\" + validateMsg + ' ' + 'Claim your free account'\n });\n errorDiv.setAttribute('style', \"position: fixed;\\n top: 10px;\\n left: 10px;\\n right: 10px;\\n font-size: 14px;\\n background: #EEF2FF;\\n color: #222222;\\n z-index: 999999999;\\n text-align: left;\\n border: 1px solid #EEEEEE;\\n padding: 10px 11px 10px 50px;\\n border-radius: 8px;\\n font-family: Helvetica Neue, Helvetica, Arial;\");\n document.body.appendChild(errorDiv);\n this.isLicensed = false;\n }\n this.isValidated = true;\n setValue(convertToChar(bypassKey), this.isValidated, containerObject);\n }\n return this.isLicensed;\n };\n LicenseValidator.prototype.getDecryptedData = function (key) {\n try {\n return atob(key);\n }\n catch (error) {\n return '';\n }\n };\n /**\n * Get license information from key.\n *\n * @returns {IValidator} - Get license information from key.\n */\n LicenseValidator.prototype.getInfoFromKey = function () {\n try {\n var licKey = '';\n var pkey = [5439488, 7929856, 5111808, 6488064, 4587520, 7667712, 5439488,\n 6881280, 5177344, 7208960, 4194304, 4456448, 6619136, 7733248, 5242880, 7077888,\n 6356992, 7602176, 4587520, 7274496, 7471104, 7143424];\n var decryptedStr = [];\n var resultArray = [];\n var invalidPlatform = false;\n var isNpxKey = false;\n if (this.manager.getKey()) {\n licKey = this.manager.getKey();\n }\n else {\n isNpxKey = true;\n licKey = this.npxManager.getKey().split('npxKeyReplace')[1];\n }\n var licKeySplit = licKey.split(';');\n for (var _i = 0, licKeySplit_1 = licKeySplit; _i < licKeySplit_1.length; _i++) {\n var lKey = licKeySplit_1[_i];\n var decodeStr = this.getDecryptedData(lKey);\n if (!decodeStr) {\n continue;\n }\n var k = 0;\n var buffr = '';\n if (!isNpxKey) {\n for (var i = 0; i < decodeStr.length; i++, k++) {\n if (k === pkey.length) {\n k = 0;\n }\n var c = decodeStr.charCodeAt(i);\n buffr += String.fromCharCode(c ^ (pkey[parseInt(k.toString(), 10)] >> 16));\n }\n }\n else {\n var charKey = decodeStr[decodeStr.length - 1];\n var decryptedKey = [];\n for (var i = 0; i < decodeStr.length; i++) {\n decryptedKey[parseInt(i.toString(), 10)] = decodeStr[parseInt(i.toString(), 10)].charCodeAt(0)\n - charKey.charCodeAt(0);\n }\n for (var i = 0; i < decryptedKey.length; i++) {\n buffr += String.fromCharCode(decryptedKey[parseInt(i.toString(), 10)]);\n }\n }\n if (this.platform.test(buffr)) {\n decryptedStr = buffr.split(';');\n invalidPlatform = false;\n // checked the length to verify the key in proper strucutre\n if (decryptedStr.length > 3) {\n resultArray.push({ platform: decryptedStr[0],\n version: decryptedStr[1],\n expiryDate: decryptedStr[2] });\n }\n }\n else if (buffr && buffr.split(';').length > 3) {\n invalidPlatform = true;\n }\n }\n if (invalidPlatform && !resultArray.length) {\n return [{ invalidPlatform: invalidPlatform }];\n }\n else {\n return resultArray.length ? resultArray : null;\n }\n }\n catch (error) {\n return null;\n }\n };\n return LicenseValidator;\n}());\nvar licenseValidator = new LicenseValidator();\n/**\n * Converts the given number to characters.\n *\n * @param {number} cArr - Specifies the license key as number.\n * @returns {string} ?\n */\nfunction convertToChar(cArr) {\n var ret = '';\n for (var _i = 0, cArr_1 = cArr; _i < cArr_1.length; _i++) {\n var arr = cArr_1[_i];\n ret += String.fromCharCode(arr);\n }\n return ret;\n}\n/**\n * To set license key.\n *\n * @param {string} key - license key\n * @returns {void}\n */\nfunction registerLicense(key) {\n licenseValidator = new LicenseValidator(key);\n}\nvar validateLicense = function (key) {\n if (key) {\n registerLicense(key);\n }\n return licenseValidator.validate();\n};\nvar getVersion = function () {\n return licenseValidator.version;\n};\n// Method for create overlay over the sample\nvar createLicenseOverlay = function () {\n var bannerTemplate = \"\\n \\n
\";\n if (typeof document !== 'undefined' && !isNullOrUndefined(document)) {\n var errorBackground = createElement('div', {\n innerHTML: bannerTemplate\n });\n document.body.appendChild(errorBackground);\n }\n};\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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};\nvar componentCount = 0;\nvar lastPageID;\nvar lastHistoryLen = 0;\n// Decalre the static variable to count the instance\nvar instancecount = 0;\n// Decalre the static variable to find if control limit exceed or not\nvar isvalid = true;\n// We have added styles to inline type so here declare the static variable to detect if banner is added or not\nvar isBannerAdded = false;\nvar versionBasedStatePersistence = false;\n/**\n * To enable or disable version based statePersistence functionality for all components globally.\n *\n * @param {boolean} status - Optional argument Specifies the status value to enable or disable versionBasedStatePersistence option.\n * @returns {void}\n */\nfunction enableVersionBasedPersistence(status) {\n versionBasedStatePersistence = status;\n}\n/**\n * Base class for all Essential JavaScript components\n */\nvar Component = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Component, _super);\n /**\n * Initialize the constructor for component base\n *\n * @param {Object} options ?\n * @param {string} selector ?\n */\n function Component(options, selector) {\n var _this = _super.call(this, options, selector) || this;\n _this.randomId = uniqueID();\n /**\n * string template option for Blazor template rendering\n *\n * @private\n */\n _this.isStringTemplate = false;\n _this.needsID = false;\n _this.isReactHybrid = false;\n _this.isAngular = false;\n _this.isReact = false;\n _this.isVue = false;\n if (isNullOrUndefined(_this.enableRtl)) {\n _this.setProperties({ 'enableRtl': rightToLeft }, true);\n }\n if (isNullOrUndefined(_this.locale)) {\n _this.setProperties({ 'locale': defaultCulture }, true);\n }\n _this.moduleLoader = new ModuleLoader(_this);\n _this.localObserver = new Observer(_this);\n onIntlChange.on('notifyExternalChange', _this.detectFunction, _this, _this.randomId);\n // Based on the considered control list we have count the instance\n if (typeof window !== 'undefined' && typeof document !== 'undefined' && !validateLicense()) {\n if (componentList.indexOf(_this.getModuleName()) !== -1) {\n instancecount = instancecount + 1;\n if (instancecount > 5) {\n isvalid = false;\n }\n }\n }\n if (!isUndefined(selector)) {\n _this.appendTo();\n }\n return _this;\n }\n Component.prototype.requiredModules = function () {\n return [];\n };\n /**\n * Destroys the sub modules while destroying the widget\n *\n * @returns {void} ?\n */\n Component.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n if (this.enablePersistence) {\n this.setPersistData();\n this.detachUnloadEvent();\n }\n this.localObserver.destroy();\n if (this.refreshing) {\n return;\n }\n removeClass([this.element], ['e-control']);\n this.trigger('destroyed', { cancel: false });\n _super.prototype.destroy.call(this);\n this.moduleLoader.clean();\n onIntlChange.off('notifyExternalChange', this.detectFunction, this.randomId);\n };\n /**\n * Applies all the pending property changes and render the component again.\n *\n * @returns {void} ?\n */\n Component.prototype.refresh = function () {\n this.refreshing = true;\n this.moduleLoader.clean();\n this.destroy();\n this.clearChanges();\n this.localObserver = new Observer(this);\n this.preRender();\n this.injectModules();\n this.render();\n this.refreshing = false;\n };\n Component.prototype.accessMount = function () {\n if (this.mount && !this.isReactHybrid) {\n this.mount();\n }\n };\n /**\n * Returns the route element of the component\n *\n * @returns {HTMLElement} ?\n */\n Component.prototype.getRootElement = function () {\n if (this.isReactHybrid) {\n return this.actualElement;\n }\n else {\n return this.element;\n }\n };\n /**\n * Returns the persistence data for component\n *\n * @returns {any} ?\n */\n Component.prototype.getLocalData = function () {\n var eleId = this.getModuleName() + this.element.id;\n if (versionBasedStatePersistence) {\n return window.localStorage.getItem(eleId + this.ej2StatePersistenceVersion);\n }\n else {\n return window.localStorage.getItem(eleId);\n }\n };\n /**\n * Adding unload event to persist data when enable persistence true\n *\n * @returns {void}\n */\n Component.prototype.attachUnloadEvent = function () {\n this.handleUnload = this.handleUnload.bind(this);\n window.addEventListener('pagehide', this.handleUnload);\n };\n /**\n * Handling unload event to persist data when enable persistence true\n *\n * @returns {void}\n */\n Component.prototype.handleUnload = function () {\n this.setPersistData();\n };\n /**\n * Removing unload event to persist data when enable persistence true\n *\n * @returns {void}\n */\n Component.prototype.detachUnloadEvent = function () {\n window.removeEventListener('pagehide', this.handleUnload);\n };\n /**\n * Appends the control within the given HTML element\n *\n * @param {string | HTMLElement} selector - Target element where control needs to be appended\n * @returns {void} ?\n */\n Component.prototype.appendTo = function (selector) {\n if (!isNullOrUndefined(selector) && typeof (selector) === 'string') {\n this.element = select(selector, document);\n }\n else if (!isNullOrUndefined(selector)) {\n this.element = selector;\n }\n if (!isNullOrUndefined(this.element)) {\n var moduleClass = 'e-' + this.getModuleName().toLowerCase();\n addClass([this.element], ['e-control', moduleClass]);\n this.isProtectedOnChange = false;\n if (this.needsID && !this.element.id) {\n this.element.id = this.getUniqueID(this.getModuleName());\n }\n if (this.enablePersistence) {\n this.mergePersistData();\n this.attachUnloadEvent();\n }\n var inst = getValue('ej2_instances', this.element);\n if (!inst || inst.indexOf(this) === -1) {\n _super.prototype.addInstance.call(this);\n }\n this.preRender();\n this.injectModules();\n // Throw a warning for the required modules to be injected.\n var ignoredComponents = {\n schedule: 'all',\n diagram: 'all',\n PdfViewer: 'all',\n grid: ['logger'],\n richtexteditor: ['link', 'table', 'image', 'audio', 'video', 'formatPainter', 'emojiPicker', 'pasteCleanup', 'htmlEditor', 'toolbar', 'importExport'],\n treegrid: ['filter'],\n gantt: ['tooltip'],\n chart: ['Export', 'Zoom'],\n accumulationchart: ['Export'],\n 'query-builder': 'all'\n };\n var component = this.getModuleName();\n if (this.requiredModules && (!ignoredComponents[\"\" + component] || ignoredComponents[\"\" + component] !== 'all')) {\n var modulesRequired = this.requiredModules();\n for (var _i = 0, _a = this.moduleLoader.getNonInjectedModules(modulesRequired); _i < _a.length; _i++) {\n var module = _a[_i];\n var moduleName = module.name ? module.name : module.member;\n if (ignoredComponents[\"\" + component] && ignoredComponents[\"\" + component].indexOf(module.member) !== -1) {\n continue;\n }\n var componentName = component.charAt(0).toUpperCase() + component.slice(1); // To capitalize the component name\n console.warn(\"[WARNING] :: Module \\\"\" + moduleName + \"\\\" is not available in \" + componentName + \" component! You either misspelled the module name or forgot to load it.\");\n }\n }\n // Checked weather cases are valid or not. If control leads to more than five counts\n if (!isvalid && !isBannerAdded) {\n createLicenseOverlay();\n isBannerAdded = true;\n }\n this.render();\n if (!this.mount) {\n this.trigger('created');\n }\n else {\n this.accessMount();\n }\n }\n };\n /**\n * It is used to process the post rendering functionalities to a component.\n *\n * @param {Node} wrapperElement ?\n * @returns {void} ?\n */\n Component.prototype.renderComplete = function (wrapperElement) {\n if (isBlazor()) {\n var sfBlazor = 'sfBlazor';\n window[\"\" + sfBlazor].renderComplete(this.element, wrapperElement);\n }\n this.isRendered = true;\n };\n /**\n * When invoked, applies the pending property changes immediately to the component.\n *\n * @returns {void} ?\n */\n Component.prototype.dataBind = function () {\n this.injectModules();\n _super.prototype.dataBind.call(this);\n };\n /**\n * Attach one or more event handler to the current component context.\n * It is used for internal handling event internally within the component only.\n *\n * @param {BoundOptions[]| string} event - It is optional type either to Set the collection of event list or the eventName.\n * @param {Function} handler - optional parameter Specifies the handler to run when the event occurs\n * @param {Object} context - optional parameter Specifies the context to be bind in the handler.\n * @returns {void} ?\n * @private\n */\n Component.prototype.on = function (event, handler, context) {\n if (typeof event === 'string') {\n this.localObserver.on(event, handler, context);\n }\n else {\n for (var _i = 0, event_1 = event; _i < event_1.length; _i++) {\n var arg = event_1[_i];\n this.localObserver.on(arg.event, arg.handler, arg.context);\n }\n }\n };\n /**\n * To remove one or more event handler that has been attached with the on() method.\n *\n * @param {BoundOptions[]| string} event - It is optional type either to Set the collection of event list or the eventName.\n * @param {Function} handler - optional parameter Specifies the function to run when the event occurs\n * @returns {void} ?\n * @private\n */\n Component.prototype.off = function (event, handler) {\n if (typeof event === 'string') {\n this.localObserver.off(event, handler);\n }\n else {\n for (var _i = 0, event_2 = event; _i < event_2.length; _i++) {\n var arg = event_2[_i];\n this.localObserver.off(arg.event, arg.handler);\n }\n }\n };\n /**\n * To notify the handlers in the specified event.\n *\n * @param {string} property - Specifies the event to be notify.\n * @param {Object} argument - Additional parameters to pass while calling the handler.\n * @returns {void} ?\n * @private\n */\n Component.prototype.notify = function (property, argument) {\n if (this.isDestroyed !== true) {\n this.localObserver.notify(property, argument);\n }\n };\n /**\n * Get injected modules\n *\n * @returns {Function} ?\n * @private\n */\n Component.prototype.getInjectedModules = function () {\n return this.injectedModules;\n };\n /**\n * Dynamically injects the required modules to the component.\n *\n * @param {Function} moduleList ?\n * @returns {void} ?\n */\n Component.Inject = function () {\n var moduleList = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n moduleList[_i] = arguments[_i];\n }\n if (!this.prototype.injectedModules) {\n this.prototype.injectedModules = [];\n }\n for (var i = 0; i < moduleList.length; i++) {\n if (this.prototype.injectedModules.indexOf(moduleList[parseInt(i.toString(), 10)]) === -1) {\n this.prototype.injectedModules.push(moduleList[parseInt(i.toString(), 10)]);\n }\n }\n };\n /**\n * This is a instance method to create an element.\n *\n * @param {string} tagName ?\n * @param {ElementProperties} prop ?\n * @param {boolean} isVDOM ?\n * @returns {any} ?\n * @private\n */\n Component.prototype.createElement = function (tagName, prop, isVDOM) {\n return createElement(tagName, prop);\n };\n /**\n *\n * @param {Function} handler - handler to be triggered after state Updated.\n * @param {any} argument - Arguments to be passed to caller.\n * @returns {void} .\n * @private\n */\n Component.prototype.triggerStateChange = function (handler, argument) {\n if (this.isReactHybrid) {\n this.setState();\n this.currentContext = { calls: handler, args: argument };\n }\n };\n Component.prototype.injectModules = function () {\n if (this.injectedModules && this.injectedModules.length) {\n this.moduleLoader.inject(this.requiredModules(), this.injectedModules);\n }\n };\n Component.prototype.detectFunction = function (args) {\n var prop = Object.keys(args);\n if (prop.length) {\n this[prop[0]] = args[prop[0]];\n }\n };\n Component.prototype.mergePersistData = function () {\n var data;\n if (versionBasedStatePersistence) {\n data = window.localStorage.getItem(this.getModuleName() + this.element.id + this.ej2StatePersistenceVersion);\n }\n else {\n data = window.localStorage.getItem(this.getModuleName() + this.element.id);\n }\n if (!(isNullOrUndefined(data) || (data === ''))) {\n this.setProperties(JSON.parse(data), true);\n }\n };\n Component.prototype.setPersistData = function () {\n if (!this.isDestroyed) {\n if (versionBasedStatePersistence) {\n window.localStorage.setItem(this.getModuleName() +\n this.element.id + this.ej2StatePersistenceVersion, this.getPersistData());\n }\n else {\n window.localStorage.setItem(this.getModuleName() + this.element.id, this.getPersistData());\n }\n }\n };\n Component.prototype.renderReactTemplates = function (callback) {\n if (!isNullOrUndefined(callback)) {\n callback();\n }\n };\n Component.prototype.clearTemplate = function (templateName, index) {\n //No Code\n };\n Component.prototype.getUniqueID = function (definedName) {\n if (this.isHistoryChanged()) {\n componentCount = 0;\n }\n lastPageID = this.pageID(location.href);\n lastHistoryLen = history.length;\n return definedName + '_' + lastPageID + '_' + componentCount++;\n };\n Component.prototype.pageID = function (url) {\n var hash = 0;\n if (url.length === 0) {\n return hash;\n }\n for (var i = 0; i < url.length; i++) {\n var char = url.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n return Math.abs(hash);\n };\n Component.prototype.isHistoryChanged = function () {\n return lastPageID !== this.pageID(location.href) || lastHistoryLen !== history.length;\n };\n Component.prototype.addOnPersist = function (options) {\n var _this = this;\n var persistObj = {};\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var key = options_1[_i];\n var objValue = getValue(key, this);\n if (!isUndefined(objValue)) {\n setValue(key, this.getActualProperties(objValue), persistObj);\n }\n }\n return JSON.stringify(persistObj, function (key, value) {\n return _this.getActualProperties(value);\n });\n };\n Component.prototype.getActualProperties = function (obj) {\n if (obj instanceof ChildProperty) {\n return getValue('properties', obj);\n }\n else {\n return obj;\n }\n };\n Component.prototype.ignoreOnPersist = function (options) {\n return JSON.stringify(this.iterateJsonProperties(this.properties, options));\n };\n Component.prototype.iterateJsonProperties = function (obj, ignoreList) {\n var newObj = {};\n var _loop_1 = function (key) {\n if (ignoreList.indexOf(key) === -1) {\n var value = obj[\"\" + key];\n if (typeof value === 'object' && !(value instanceof Array)) {\n var newList = ignoreList.filter(function (str) {\n var regExp = RegExp;\n return new regExp(key + '.').test(str);\n }).map(function (str) {\n return str.replace(key + '.', '');\n });\n newObj[\"\" + key] = this_1.iterateJsonProperties(this_1.getActualProperties(value), newList);\n }\n else {\n newObj[\"\" + key] = value;\n }\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var key = _a[_i];\n _loop_1(key);\n }\n return newObj;\n };\n __decorate$1([\n Property(false)\n ], Component.prototype, \"enablePersistence\", void 0);\n __decorate$1([\n Property()\n ], Component.prototype, \"enableRtl\", void 0);\n __decorate$1([\n Property()\n ], Component.prototype, \"locale\", void 0);\n Component = __decorate$1([\n NotifyPropertyChanges\n ], Component);\n return Component;\n}(Base));\n//Function handling for page navigation detection\n/* istanbul ignore next */\n(function () {\n if (typeof window !== 'undefined') {\n window.addEventListener('popstate', \n /* istanbul ignore next */\n function () {\n componentCount = 0;\n });\n }\n})();\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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};\nvar defaultPosition = { left: 0, top: 0, bottom: 0, right: 0 };\nvar isDraggedObject = { isDragged: false };\n/**\n * Specifies the position coordinates\n */\nvar Position = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Position, _super);\n function Position() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property(0)\n ], Position.prototype, \"left\", void 0);\n __decorate$2([\n Property(0)\n ], Position.prototype, \"top\", void 0);\n return Position;\n}(ChildProperty));\n/**\n * Draggable Module provides support to enable draggable functionality in Dom Elements.\n * ```html\n * \\n ![](\\\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODIwIiBoZWlnaHQ9IjU2IiB2aWV3Qm94PSIwIDAgODIwIDU2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MjcuNjE3IDIyLjU2NTlWMjQuNzIyNkM0MjYuNTU4IDI0LjM2MzggNDI1LjM5OCAyNC4xNTQ0IDQyNC40NzQgMjQuMTU0NEM0MjMuMzMzIDI0LjE1NDQgNDIyLjY5OCAyNC40OTEyIDQyMi42OTggMjUuMDk2M0M0MjIuNjk4IDI1LjQ4MjQgNDIyLjk3NiAyNS43MzgzIDQyMy43NzMgMjYuMDg1NEw0MjUuOTE3IDI3LjAxNzRDNDI3LjYzMyAyNy43NjM5IDQyOC40OTcgMjguODUzIDQyOC40OTcgMzAuMjY4MUM0MjguNDk3IDMyLjQ1MjIgNDI2LjU0NiAzMy44MyA0MjMuNDUyIDMzLjgzQzQyMi4zMjQgMzMuODMgNDIxLjAxOCAzMy42NzM2IDQxOS42MzYgMzMuMzcwOVYzMS4xNDE2QzQyMS4wMDYgMzEuNTAyOCA0MjIuMjYyIDMxLjY5NTcgNDIzLjIzOSAzMS42OTU3QzQyNC41MTggMzEuNjk1NyA0MjUuMjAzIDMxLjM1MDYgNDI1LjIwMyAzMC43MDc0QzQyNS4yMDMgMzAuMzIwOCA0MjQuOTM1IDMwLjAzNjcgNDI0LjMyMiAyOS43NzE3TDQyMS45NzUgMjguNzU5M0M0MjAuMjM2IDI4LjAwNzggNDE5LjQzMyAyNi45OTU0IDQxOS40MzMgMjUuNTUyMUM0MTkuNDMzIDIzLjQ4MzcgNDIxLjMxNCAyMi4xNjQ5IDQyNC4yNjUgMjIuMTY0OUM0MjUuMjk4IDIyLjE2NDkgNDI2LjU3IDIyLjMxNzEgNDI3LjYxNyAyMi41NjU5VjIyLjU2NTlaTTQzMC4xNjcgMjIuMzkwOUg0MzMuNjM1VjMzLjYwMzlINDMwLjE2N1YyMi4zOTA5Wk00NDQuOTExIDIyLjM5MDlWMjQuNDQ1MUg0MzkuNjc1VjI2Ljk3NDJINDQ0LjI0OVYyOC44MzIzSDQzOS42NzVWMzEuNDU0M0g0NDQuOTc4VjMzLjYwMzlINDM2LjMwNVYyMi4zOTA5SDQ0NC45MTFaTTQ2MS4yOTQgMjIuMzkwOVYzMy42MDM5SDQ1Ny45MzlWMjYuMjIzNkw0NTQuNjUyIDMzLjY5MTVINDUyLjUzMUw0NDkuMjY2IDI2LjIyMzZWMzMuNjAzOUg0NDYuOTQ5VjIyLjM5MDlINDUxLjE4NEw0NTQuMTc4IDI5LjIxMTRMNDU3LjE1NiAyMi4zOTA5SDQ2MS4yOTRWMjIuMzkwOVpNNDcyLjU3OSAyMi4zOTA5VjI0LjQ0NTFINDY3LjMzNVYyNi45NzQySDQ3MS45MDhWMjguODMyM0g0NjcuMzM1VjMxLjQ1NDNINDcyLjYzOFYzMy42MDM5SDQ2My45NTdWMjIuMzkwOUg0NzIuNTc5Wk00ODQuNzk0IDIyLjM5MDlWMzMuNjAzOUg0ODEuMDkzTDQ3Ni45MjYgMjYuNDEyM1YzMy42MDM5SDQ3NC42MDhWMjIuMzkwOUg0NzguNDA3TDQ4Mi40ODQgMjkuNDg3NlYyMi4zOTA5SDQ4NC43OTRaTTQ5NC44NTggMjIuNTY1OVYyNC43MjI2QzQ5My44MDcgMjQuMzY2MyA0OTIuNjQgMjQuMTU0NCA0OTEuNzMyIDI0LjE1NDRDNDkwLjU3MyAyNC4xNTQ0IDQ4OS45MzkgMjQuNDg1OCA0ODkuOTM5IDI1LjA5M0M0ODkuOTM5IDI1LjQ4ODYgNDkwLjE5OCAyNS43MjUgNDkxLjAyMyAyNi4wODU5TDQ5My4xNTcgMjcuMDE3OEM0OTQuODg1IDI3Ljc3MjIgNDk1LjczOSAyOC44NTE4IDQ5NS43MzkgMzAuMjgzNUM0OTUuNzM5IDMyLjQ1NTkgNDkzLjc4NiAzMy44MzA4IDQ5MC42OTkgMzMuODMwOEM0ODkuNTY5IDMzLjgzMDggNDg4LjI1OSAzMy42NzM2IDQ4Ni44NzggMzMuMzcxN1YzMS4xNDI0QzQ4OC4yNDcgMzEuNTAyOCA0ODkuNDk5IDMxLjY5NjUgNDkwLjQ3IDMxLjY5NjVDNDkxLjc0IDMxLjY5NjUgNDkyLjQ0NCAzMS4zNTE1IDQ5Mi40NDQgMzAuNzI4NUM0OTIuNDQ0IDMwLjMxNjMgNDkyLjE5NyAzMC4wNTA0IDQ5MS41NTUgMjkuNzcyNUw0ODkuMjE4IDI4Ljc2MDFDNDg3LjQ2NyAyOC4wMDI4IDQ4Ni42NzQgMjcuMDAyIDQ4Ni42NzQgMjUuNTUzM0M0ODYuNjc0IDIzLjQ4NjIgNDg4LjU1NiAyMi4xNjY1IDQ5MS41IDIyLjE2NjVDNDkyLjUzNiAyMi4xNjUzIDQ5My44MTMgMjIuMzE3MSA0OTQuODU4IDIyLjU2NTlWMjIuNTY1OVoiIGZpbGw9IiMwMEEwQjAiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzUyLjQxMyAyNi44MTlDMzUwLjk5MiAyNS4yNzU5IDM0OS42MzggMjMuODMxNSAzNDguMzQ5IDIyLjE1NzRMMzQ3LjkyIDIxLjU5OTVDMzQ5LjQwNiAyMS4zNjkzIDM1MC42OTUgMjAuMzg0OCAzNTAuNjk1IDE4Ljc0MzNDMzUwLjY5NSAxNy4yMzMxIDM0OS41MzkgMTYuMjQ4MiAzNDcuODIxIDE2LjI0ODJDMzQ2LjU5OCAxNi4yNDgyIDM0NS43MDYgMTYuMzEzNyAzNDUuMjQzIDE2LjMxMzdDMzQ0LjcxNSAxNi4zMTM3IDM0NC4yODUgMTYuMzEzNyAzNDMuNzkgMTYuMjgwOEMzNDMuODU2IDE4LjE1MjEgMzQzLjg4OSAxOC4yODM0IDM0My44ODkgMTkuNDMyMlYyMy42MzQzQzM0My44ODkgMjQuNDU1MyAzNDMuODU2IDI1LjI3NTkgMzQzLjc5IDI2LjgxODZDMzQ0LjE1MyAyNi43MjAyIDM0NC41MTcgMjYuNzIwMiAzNDQuNzgxIDI2LjcyMDJDMzQ1LjA0NSAyNi43MjAyIDM0NS40MDkgMjYuNzUzMSAzNDUuNzA2IDI2LjgxODZDMzQ1LjY0IDI1Ljc2NzkgMzQ1LjYwNyAyNC4wMjgzIDM0NS42MDcgMjMuNjM0M1YyMS4yMDUxQzM0Ny4xNiAyMy4yMDc3IDM0OS4yMDkgMjUuNjY5NSAzNTAuMDAxIDI2LjgxODZDMzUwLjM5OCAyNi43MjAyIDM1MC43MjggMjYuNzIwMiAzNTEuMTI0IDI2LjcyMDJDMzUxLjQ1NSAyNi43MjA2IDM1MS45MTggMjYuNzIwNiAzNTIuNDEzIDI2LjgxOVYyNi44MTlaTTM0OC44NzggMTkuMDA2QzM0OC44NzggMjAuMDIzNCAzNDguMzE3IDIxLjIwNTQgMzQ2Ljc5NyAyMS4yMDU0QzM0Ni40IDIxLjIwNTQgMzQ2LjAwMyAyMS4yMDU0IDM0NS42MDcgMjEuMTcyNVYxNy4wNjg4QzM0Ni4wMDMgMTYuOTcwNCAzNDYuNDk5IDE2LjkwNDYgMzQ2Ljc2MyAxNi45MDQ2QzM0OC4wODUgMTYuOTA0OSAzNDguODc4IDE3LjY2IDM0OC44NzggMTkuMDA2VjE5LjAwNlpNMzgyLjM4IDI2Ljg4NDVDMzgxLjgxOSAyNi4yOTM2IDM4MC45NiAyNS4zNDE3IDM4MC4xMzQgMjQuNDIyM0MzODAuODI4IDIzLjY2NzIgMzgxLjU1NSAyMi41NTEgMzgxLjk4NCAyMS41OTkxQzM4MS43MTkgMjEuNDY3OCAzODEuMzU2IDIxLjIwNTEgMzgxLjA5MiAyMC45NzUzQzM4MC45OTMgMjEuNzk1OSAzODAuNDMyIDIyLjg3OTIgMzc5LjYzOSAyMy44MzE1QzM3OC41MTUgMjIuNTE4NSAzNzguMjE4IDIyLjE1NzQgMzc3LjE5MyAyMC43Nzg1QzM3OC41ODEgMTkuODkyMSAzNzkuMjQyIDE4Ljg3NDMgMzc5LjI0MiAxOC4wNTM3QzM3OS4yNDIgMTcuMTAxNyAzNzguNTgxIDE2LjExNjkgMzc2Ljk2MiAxNi4xMTY5QzM3NS4yMTEgMTYuMTE2OSAzNzQuMzUyIDE3LjIwMDIgMzc0LjM1MiAxOC40ODAzQzM3NC4zNTIgMTkuMjM1NCAzNzQuNTUgMTkuODkxNyAzNzUuMzc2IDIwLjk3NTNDMzc0LjA1NCAyMS42OTc1IDM3Mi43NjYgMjIuNzQ3OSAzNzIuNzY2IDI0LjQyMjNDMzcyLjc2NiAyNi4wNjM5IDM3NC4wODcgMjYuOTE3NCAzNzUuNzA3IDI2LjkxNzRDMzc3LjE5MyAyNi45MTc0IDM3OC4xNTEgMjYuMzI2NiAzNzguOTEyIDI1LjYzNjlMMzc5LjkwMiAyNi44MTlDMzgwLjIgMjYuNzg2MSAzODAuNTMxIDI2LjcyMDYgMzgwLjg2MSAyNi43MjA2QzM4MS4zMjQgMjYuNzIwNiAzODEuODUyIDI2Ljc4NjEgMzgyLjM4IDI2Ljg4NDVWMjYuODg0NVpNMzgzLjM3MiA0MC4wMTU4QzM4MS45MTggMzguNDczIDM4MC41OTcgMzcuMDYxMiAzNzkuMzA4IDM1LjM4NzFMMzc4Ljg3OCAzNC44Mjg4QzM4MC4zMzIgMzQuNTk5MSAzODEuNjU0IDMzLjYxNSAzODEuNjU0IDMxLjk0MDFDMzgxLjY1NCAzMC40NjMyIDM4MC40OTggMjkuNDQ1NCAzNzguNzc5IDI5LjQ0NTRDMzc3LjU1NyAyOS40NDU0IDM3Ni42MzIgMjkuNTQzNSAzNzYuMTY5IDI5LjU0MzVDMzc1LjY3MyAyOS41NDM1IDM3NS4yNDQgMjkuNTQzNSAzNzQuNzQ4IDI5LjQ3NzZDMzc0LjgxNCAzMS4zODIyIDM3NC44NDggMzEuNDgwMiAzNzQuODQ4IDMyLjYyOTRWMzYuODMxMUMzNzQuODQ4IDM3LjY1MjQgMzc0LjgxNCAzOC41MDUyIDM3NC43NDggNDAuMDE1NEMzNzUuMTEyIDM5Ljk0OTYgMzc1LjQ3NSAzOS45NDk2IDM3NS43MDcgMzkuOTQ5NkMzNzYuMDA0IDM5Ljk0OTYgMzc2LjM2OCAzOS45NDk2IDM3Ni42MzIgNDAuMDE1NEMzNzYuNTY1IDM4Ljk5OCAzNzYuNTMzIDM3LjI1ODEgMzc2LjUzMyAzNi44MzExVjM0LjQzNDhDMzc4LjExOSAzNi40MDQyIDM4MC4xNjcgMzguODk5NiAzODAuOTYgNDAuMDE1NEMzODEuMzU2IDM5Ljk0OTYgMzgxLjY4NyAzOS45NDk2IDM4Mi4wODMgMzkuOTQ5NkMzODIuMzggMzkuOTUgMzgyLjg3NiAzOS45NSAzODMuMzcyIDQwLjAxNThaTTM2Mi4xNiAyNi44MTlDMzYwLjk3MSAyNS41NzE1IDM1OC44ODkgMjIuOTc4IDM1OC4wNjMgMjEuOTkzNUwzNTcuMjM3IDIwLjk3NTdDMzU4LjA5NiAxOS45NTgzIDM1OC42OSAxOS4zMzQxIDM1OS4zMTkgMTguNTc5QzM2MC4wNDUgMTcuNzkxIDM2MC43MDYgMTYuOTcwNCAzNjEuNDk5IDE2LjI0ODJDMzYxLjEzNiAxNi4zMTM3IDM2MC45MzcgMTYuMzEzNyAzNjAuNzM5IDE2LjMxMzdDMzYwLjU0MSAxNi4zMTM3IDM2MC4zNDMgMTYuMzEzNyAzNjAuMTQ0IDE2LjI0ODJDMzU5LjkxMyAxNi42MDkzIDM1OS41NSAxNy4wNjg4IDM1OS4xNTMgMTcuNTI4N0MzNTguNzU2IDE3Ljk1NTYgMzU4LjM2IDE4LjM4MjIgMzU4LjA2MyAxOC43NDMzQzM1Ny4yMzYgMTkuNjk1MiAzNTYuNzc0IDIwLjE1NDcgMzU1LjU4NSAyMS4yNzA5VjE5LjQ2NTVDMzU1LjU4NSAxOC40MTUxIDM1NS41ODUgMTcuNzI1NSAzNTUuNjUxIDE2LjI0ODJDMzU1LjMyMSAxNi4zMTM3IDM1NC45NTcgMTYuMzEzNyAzNTQuNzI2IDE2LjMxMzdDMzU0LjQ2MSAxNi4zMTM3IDM1NC4wMzIgMTYuMzEzNyAzNTMuNzY4IDE2LjI0ODJDMzUzLjgzMyAxNy44MjM5IDM1My44NjcgMTguMjgzNCAzNTMuODY3IDE5LjQzMjVWMjMuNjM0N0MzNTMuODY3IDI0LjY4NSAzNTMuODMzIDI1LjMwODggMzUzLjc2OCAyNi44MTlDMzU0LjE2NCAyNi43MjA2IDM1NC40OTUgMjYuNzIwNiAzNTQuNzI2IDI2LjcyMDZDMzU0Ljk1NyAyNi43MjA2IDM1NS4zNTMgMjYuNzUzNSAzNTUuNjUxIDI2LjgxOUMzNTUuNTg1IDI1LjE0NDkgMzU1LjU4NSAyNC4xNTk3IDM1NS41ODUgMjMuNjM0N1YyMS40MzUyQzM1Ni44MDcgMjIuODc5NiAzNTguNjkgMjUuMjQzMyAzNTkuNzQ4IDI2LjgxOUMzNjAuMTMgMjYuNzU2MyAzNjAuNTE3IDI2LjcyMzQgMzYwLjkwNSAyNi43MjA2QzM2MS4yMDIgMjYuNzIwNiAzNjEuNjY1IDI2LjcyMDYgMzYyLjE2IDI2LjgxOVYyNi44MTlaTTM3Mi42MDEgNDAuMDE1OEMzNzIuNTY4IDM5Ljg1MTkgMzcyLjUzNSAzOS43MjA2IDM3Mi41MzUgMzkuNTIzNEMzNzIuNTM1IDM5LjM5MjggMzcyLjU2OCAzOS4yMjgxIDM3Mi42MDEgMzkuMDk2NEMzNzEuMjggMzkuMTI5NyAzNjguOTAxIDM5LjE5NTIgMzY4LjM3MiAzOS4xOTUyVjM0LjY2NDlDMzY5LjY5NCAzNC42NjQ5IDM3MC45ODIgMzQuNjY0OSAzNzIuMjcgMzQuNzk2M0MzNzIuMjM4IDM0LjYzMjQgMzcyLjIwNCAzNC40Njc3IDM3Mi4yMDQgMzQuMzM2NEMzNzIuMjA0IDM0LjIwNTggMzcyLjIwNCAzNC4wNDE5IDM3Mi4yNyAzMy44NDQ3QzM3MS4zNDYgMzMuOTQyOCAzNjkuMTk4IDMzLjk3NiAzNjguMzcyIDMzLjk3NlYzMC4yNjZDMzY5LjgyNiAzMC4yNjYgMzcwLjY4NSAzMC4yNjYgMzcxLjE4IDMwLjI5OTNMMzcyLjUwMiAzMC4zNjUxQzM3Mi40MzYgMzAuMTY3OSAzNzIuNDM2IDMwLjA2OTIgMzcyLjQzNiAyOS45MDUzQzM3Mi40MzYgMjkuNzQxNCAzNzIuNDM2IDI5LjcwODEgMzcyLjUwMiAyOS40NDU4QzM3MS40MTEgMjkuNDc4MyAzNjkuOTI1IDI5LjU0MzggMzY5LjI2NCAyOS41NDM4QzM2OC44MDIgMjkuNTQzOCAzNjcuMzQ4IDI5LjUxMTMgMzY2LjU4NyAyOS40NDU4QzM2Ni42NTQgMzAuMjY2NCAzNjYuNjg2IDMxLjYxMjMgMzY2LjY4NiAzMi41NjQyVjM2Ljg2NTFDMzY2LjY4NiAzNy40ODg1IDM2Ni42MiAzOC43MzU3IDM2Ni41ODcgNDAuMDE2MkMzNjcuNTEzIDM5Ljk1MDMgMzY4LjgwMiAzOS45NTAzIDM2OS4yNjQgMzkuOTUwM0MzNzAuMDI0IDM5Ljk1IDM3MS42NDMgMzkuOTUgMzcyLjYwMSA0MC4wMTU4Wk0zNjQuNjA1IDM5LjEyOTRDMzY0LjQ0IDM4LjgwMDggMzY0LjM0MSAzOC4zMDg4IDM2NC4yNzUgMzguMDQ2MUMzNjIuOTIgMzkuMTYxOSAzNjEuOTk1IDM5LjM5MjQgMzYwLjkzOCAzOS4zOTI0QzM1OC41OTIgMzkuMzkyNCAzNTcuMzM3IDM3LjI5MTMgMzU3LjMzNyAzNC42NjQ5QzM1Ny4zMzcgMzEuNzQzNiAzNTguNzU3IDMwLjAzNjIgMzYxLjE2OSAzMC4wMzYyQzM2Mi40MjUgMzAuMDM2MiAzNjMuNjE0IDMwLjU5NDUgMzY0LjE3NiAzMS4xNTI4QzM2NC4yMDggMzAuODg5OCAzNjQuMzA4IDMwLjM2NDggMzY0LjQ3MyAzMC4wNjg4QzM2My4zMTYgMjkuNTExMyAzNjIuMjU5IDI5LjM0NjYgMzYxLjEwMiAyOS4zNDY2QzM1Ny4yMzcgMjkuMzQ2NiAzNTUuNDUzIDMxLjc0MzYgMzU1LjQ1MyAzNC44Mjg4QzM1NS40NTMgMzguMzA5MSAzNTcuNzk4IDQwLjE0NzEgMzYwLjczOSA0MC4xNDcxQzM2Mi40MjUgNDAuMTQ3MSAzNjMuODEyIDM5LjYyMjIgMzY0LjYwNSAzOS4xMjk0VjM5LjEyOTRaTTM0Mi4zMDMgMjYuODE5QzM0MC41MTkgMjMuNDA0OSAzMzguOCAxOS4xMzczIDMzNy41NzggMTYuMTE2OUgzMzcuMzhDMzM2LjU4NyAxOC4wMjA3IDMzNS4xMzMgMjEuMjcwOSAzMzQuNzM3IDIyLjE4OTlDMzM0LjI3NCAyMy4zMDYxIDMzMy4yNSAyNS41MDU2IDMzMi41ODkgMjYuODE4NkMzMzIuODAzIDI2Ljc1MzggMzMzLjAyNiAyNi43MjA2IDMzMy4yNSAyNi43MjAyQzMzMy40NDggMjYuNzIwMiAzMzMuNjEzIDI2Ljc1MzEgMzMzLjg0NSAyNi44MTg2QzMzNC4xNzUgMjUuOTMyMiAzMzQuNjM4IDI0LjgxNiAzMzUuMTMzIDIzLjYzNDNDMzM1Ljc5NCAyMy42MDE0IDMzNi4zODkgMjMuNTY4OCAzMzYuOTg0IDIzLjU2ODhDMzM3LjYxMiAyMy41Njg4IDMzOC4yNzIgMjMuNjAxNCAzMzguOTMzIDIzLjYzNDNMMzM5LjU5NCAyNS4yMUwzNDAuMjU1IDI2LjgxODZDMzQwLjcxNyAyNi43MjAyIDM0MS4wOCAyNi43MjAyIDM0MS4zMTIgMjYuNzIwMkMzNDEuNjA5IDI2LjcyMDYgMzQxLjg3MyAyNi43MjA2IDM0Mi4zMDMgMjYuODE5VjI2LjgxOVpNMzUzLjYzNiAyOS40NDU0QzM1My40MzggMjkuNTExMyAzNTMuMjczIDI5LjU0MzUgMzUzLjEwNyAyOS41NDM1QzM1Mi45MDkgMjkuNTQzNSAzNTIuNzQ0IDI5LjUxMDkgMzUyLjU0NiAyOS40NDU0QzM1Mi42NDQgMzAuNzU4NCAzNTIuNjc4IDMyLjA3MTQgMzUyLjY3OCAzMy4zNTE5VjM2LjczMzRDMzUyLjE0OSAzNi4yNzM2IDM1MC44NiAzNS4wOTE5IDM0OS4zNzQgMzMuNzEzQzM0Ny44NiAzMi4zMDc0IDM0Ni4zOTQgMzAuODUxMSAzNDQuOTc5IDI5LjM0NjZIMzQ0Ljc0OEMzNDQuNzgxIDMwLjgyNDMgMzQ0LjgxNCAzMi40IDM0NC44MTQgMzMuODExNFYzNS44Nzk5QzM0NC44MTQgMzcuNjUyOCAzNDQuODE0IDM4LjYwNDcgMzQ0LjcxNSA0MC4wMTYyQzM0NC45OCAzOS45NTAzIDM0NS4xMTIgMzkuOTUwMyAzNDUuMzEgMzkuOTUwM0MzNDUuNDQyIDM5Ljk1MDMgMzQ1LjU3NSAzOS45NTAzIDM0NS44MDYgNDAuMDE2MkMzNDUuNzQgMzguNjcwNiAzNDUuNzA3IDM2LjQ3MDggMzQ1LjcwNyAzNS44Nzk5VjMyLjU5NjhDMzQ4LjE4NSAzNC44NjI1IDM1MS4yMjQgMzcuODgyNiAzNTMuNDcxIDQwLjE0NzVIMzUzLjYwM0MzNTMuNjAzIDM4LjkzMjkgMzUzLjUzNyAzNy43MTc5IDM1My41MzcgMzYuNTA0VjM0LjYzMjdDMzUzLjUzNiAzMi40MzI1IDM1My41MzYgMzEuMzQ5MyAzNTMuNjM2IDI5LjQ0NTRaTTM0Mi41NjcgNDAuMDE1OEMzNDIuNTM0IDM5Ljg1MTkgMzQyLjUwMSAzOS43MjA2IDM0Mi41MDEgMzkuNTIzNEMzNDIuNTAxIDM5LjM5MjggMzQyLjUzNCAzOS4yMjgxIDM0Mi41NjcgMzkuMDk2NEMzNDEuMjQ2IDM5LjEyOTcgMzM4Ljg2NyAzOS4xOTUyIDMzOC4zNzEgMzkuMTk1MlYzNC42NjQ5QzMzOS42NiAzNC42NjQ5IDM0MC45NDggMzQuNjY0OSAzNDIuMjM3IDM0Ljc5NjNDMzQyLjIwNCAzNC42MzI0IDM0Mi4xNzEgMzQuNDY3NyAzNDIuMTcxIDM0LjMzNjRDMzQyLjE3MSAzNC4yMDU4IDM0Mi4xNzEgMzQuMDQxOSAzNDIuMjM3IDMzLjg0NDdDMzQxLjMxMiAzMy45NDI4IDMzOS4xOTcgMzMuOTc2IDMzOC4zNzEgMzMuOTc2VjMwLjI2NkMzMzkuNzkyIDMwLjI2NiAzNDAuNjUxIDMwLjI2NiAzNDEuMTc5IDMwLjI5OTNMMzQyLjQ2OCAzMC4zNjUxQzM0Mi40MzUgMzAuMTY3OSAzNDIuNDM1IDMwLjA2OTIgMzQyLjQzNSAyOS45MDUzQzM0Mi40MzUgMjkuNzQxNCAzNDIuNDM1IDI5LjY3NTUgMzQyLjQ2OCAyOS40NDU4QzM0MS4zNzggMjkuNDc4MyAzMzkuODkxIDI5LjU0MzggMzM5LjIzIDI5LjU0MzhDMzM4Ljc2NyAyOS41NDM4IDMzNy4zMTQgMjkuNTExMyAzMzYuNTU0IDI5LjQ0NThDMzM2LjYyIDMwLjI2NjQgMzM2LjY1MyAzMS42MTIzIDMzNi42NTMgMzIuNTY0MlYzNi44NjUxQzMzNi42NTMgMzcuNDg4NSAzMzYuNTg3IDM4LjczNTcgMzM2LjU1NCA0MC4wMTYyQzMzNy41MTIgMzkuOTUwMyAzMzguNzY3IDM5Ljk1MDMgMzM5LjIzIDM5Ljk1MDNDMzM5Ljk5IDM5Ljk1IDM0MS42NDIgMzkuOTUgMzQyLjU2NyA0MC4wMTU4VjQwLjAxNThaTTMzMS4yMDEgMjYuODE5QzMzMC42NzMgMjMuMjQwNiAzMzAuMjEgMTkuNDk4NCAzMjkuODQ3IDE2LjExNjlDMzI5Ljc0OCAxNi4xNDk4IDMyOS43MTQgMTYuMTQ5OCAzMjkuNjQ5IDE2LjExNjlDMzI4Ljk1NSAxNy4zMzE1IDMyOC4xNjIgMTguNjQ0NSAzMjcuNTY3IDE5LjU2MzlDMzI3LjAwNiAyMC40NTAzIDMyNi4zNDUgMjEuNTAwNyAzMjUuNTg1IDIyLjYxNjlDMzIzLjk5OSAyMC41ODE3IDMyMi4zNDcgMTguMDIxMSAzMjEuMjU2IDE2LjExNjlDMzIxLjE5IDE2LjE0OTggMzIxLjE1NyAxNi4xMTY5IDMyMS4wOTEgMTYuMTE2OUMzMjAuNzI4IDE5LjQ5OCAzMjAuMjMyIDIzLjI3MzIgMzE5LjczNiAyNi44MTlDMzIwLjAwMSAyNi43MjA2IDMyMC4xNjYgMjYuNzIwNiAzMjAuMjk4IDI2LjcyMDZDMzIwLjQ5NiAyNi43MjA2IDMyMC42MjggMjYuNzUzNSAzMjAuODU5IDI2LjgxOUMzMjAuOTkyIDI0LjQ1NTMgMzIxLjI1NiAyMi4xMjQ0IDMyMS41NTMgMTkuNjYyM0MzMjIuODQyIDIxLjUzMzYgMzIzLjk2NSAyMy4xNDIyIDMyNS4yMjEgMjQuODQ5M0MzMjYuMjc4IDIzLjIwNzcgMzI3LjM2OCAyMS40MzQ4IDMyOC41NTggMTkuNjI5NEMzMjguODg4IDIyLjE1NyAzMjkuMTg2IDI0LjQ1NTMgMzI5LjM1MSAyNi44MTlDMzI5Ljc4IDI2LjcyMDYgMzMwLjA3OCAyNi43MjA2IDMzMC4yNzYgMjYuNzIwNkMzMzAuNTQgMjYuNzIwNiAzMzAuODA1IDI2LjcyMDYgMzMxLjIwMSAyNi44MTlWMjYuODE5Wk0zMzQuOTY4IDMyLjIwMjhDMzM0Ljk2OCAzMC4yOTg5IDMzMy40NDggMjkuNDQ1NCAzMzEuNTk4IDI5LjQ0NTRDMzMwLjc3MiAyOS40NDU0IDMyOS44OCAyOS41NDM1IDMyOS4yNTIgMjkuNTQzNUMzMjkuMDIxIDI5LjU0MzUgMzI4LjUyNSAyOS41NDM1IDMyNy45OTcgMjkuNDc3NkMzMjguMDMgMzAuNTI4MyAzMjguMDk2IDMxLjQxNDggMzI4LjA5NiAzMi40MzIyVjM2LjkyOTVDMzI4LjA5NiAzNy45MTQ4IDMyOC4wMyAzOC45OTggMzI3Ljk5NyA0MC4wMTU0QzMyOC40MjYgMzkuOTQ5NiAzMjguNzI0IDM5Ljk0OTYgMzI4LjkyMiAzOS45NDk2QzMyOS4xNTMgMzkuOTQ5NiAzMjkuNDg0IDM5Ljk0OTYgMzI5Ljg4IDQwLjAxNTRDMzI5LjgxNSAzOS4wMzE5IDMyOS43ODIgMzguMDQ2NSAzMjkuNzgxIDM3LjA2MDlWMzUuNDJDMzMwLjE0NSAzNS40NTI2IDMzMC41MDggMzUuNDUyNiAzMzAuOTA1IDM1LjQ1MjZDMzMyLjgyIDM1LjQ1MjYgMzM0Ljk2OCAzNC43MzA0IDMzNC45NjggMzIuMjAyOFYzMi4yMDI4Wk0zMjYuMDE0IDM2Ljg5NzNDMzI2LjAxNCAzNS4yNTU4IDMyNC45MjQgMzQuNTMzNiAzMjMuMDQgMzMuNzQ1NkMzMjEuNjg2IDMzLjE4OCAzMjAuOTkyIDMyLjY5NTYgMzIwLjk5MiAzMS42NDQ1QzMyMC45OTIgMzAuNjYgMzIxLjc1MiAzMC4wMzYyIDMyMy4wMDggMzAuMDM2MkMzMjMuODM0IDMwLjAzNjIgMzI0LjU2MSAzMC4zMzE1IDMyNS4yMjIgMzAuODU2OEMzMjUuMjg3IDMwLjQ5NTcgMzI1LjQ1MyAzMC4xMzQ3IDMyNS42NTEgMjkuODM5NEMzMjQuODU4IDI5LjQ3ODMgMzIzLjk5OSAyOS4zNDcgMzIzLjA3NCAyOS4zNDdDMzIwLjM2NSAyOS4zNDcgMzE5LjUwNSAzMC44OTA1IDMxOS41MDUgMzIuMjAzNUMzMTkuNTA1IDMzLjgxMTggMzIwLjI5OSAzNC41NjcyIDMyMi4zNDcgMzUuMzU1M0MzMjMuNjM2IDM1Ljg0NyAzMjQuMjk2IDM2LjQ3MTEgMzI0LjI5NiAzNy41NTQ0QzMyNC4yOTYgMzguNzAzNSAzMjMuNDM3IDM5LjQyNTcgMzIyLjI0OCAzOS40MjU3QzMyMS41NTQgMzkuNDI1NyAzMjAuMzY1IDM5LjA2NDYgMzE5LjUzOSAzOC4zMDk5QzMxOS41MDUgMzguNzM2MSAzMTkuNTA1IDM5LjEzMDQgMzE5LjM3MyAzOS40OTE1QzMxOS45MDIgMzkuNzU0NiAzMjEuMTI1IDQwLjE0NzkgMzIyLjIxNSA0MC4xNDc5QzMyNC45OSA0MC4xNDcxIDMyNi4wMTQgMzguNDM5NyAzMjYuMDE0IDM2Ljg5NzNWMzYuODk3M1pNMzc4LjE1MiAxNy45ODgyQzM3OC4xNTIgMTguOTczIDM3Ny40NTggMTkuNjYyMyAzNzYuNzY0IDIwLjIyMDJDMzc2LjMwMSAxOS41NjM5IDM3NS43NCAxOC42NzcxIDM3NS43NCAxNy45ODgyQzM3NS43NCAxNy4yMzMxIDM3Ni4yNjggMTYuODA2MSAzNzYuOTk1IDE2LjgwNjFDMzc3Ljk4NyAxNi44MDY1IDM3OC4xNTIgMTcuNjkyNiAzNzguMTUyIDE3Ljk4ODJWMTcuOTg4MlpNMzc4LjQ4MiAyNS4wMTMyQzM3OC4xMTkgMjUuMzQxNyAzNzcuMjYgMjUuOTY1NSAzNzYuNTMzIDI1Ljk2NTVDMzc1LjU3NCAyNS45NjU1IDM3NC40MTggMjUuMjc1OSAzNzQuNDE4IDIzLjc5ODZDMzc0LjQxOCAyMi40ODU1IDM3NS4yNzcgMjEuODk0NyAzNzUuODA2IDIxLjU2NjVDMzc3LjAyOCAyMy4yNDA2IDM3Ny4wOTUgMjMuMzM5MSAzNzguNDgyIDI1LjAxMzJaTTM3OS44MDQgMzIuMjAyOEMzNzkuODA0IDMzLjI1MzUgMzc5LjI3NSAzNC40MDI2IDM3Ny43NTUgMzQuNDAyNkMzNzcuMzI2IDM0LjQwMjYgMzc2LjkyOSAzNC40MDI2IDM3Ni41MzMgMzQuMzY5M1YzMC4yNjU2QzM3Ni45MjkgMzAuMTY3NiAzNzcuNDI1IDMwLjEzNDMgMzc3LjcyMiAzMC4xMzQzQzM3OS4wMTEgMzAuMTM0MyAzNzkuODA0IDMwLjg4OTggMzc5LjgwNCAzMi4yMDI4Wk0zMzguNjAyIDIyLjgxNDFDMzM3LjkwOSAyMi44NDY2IDMzNy41NDUgMjIuODQ2NiAzMzcuMDgyIDIyLjg0NjZDMzM2LjUyMSAyMi44NDY2IDMzNi4xOSAyMi44NDY2IDMzNS40NjMgMjIuODE0MUwzMzcuMDgyIDE5LjAwNkwzMzguNjAyIDIyLjgxNDFaTTMzMy4xNTEgMzIuMzAwOEMzMzMuMTUxIDMzLjgxMTEgMzMyLjI1OCAzNC43OTU5IDMzMC44MDUgMzQuNzk1OUMzMzAuNTA3IDM0Ljc5NTkgMzMwLjE3NyAzNC43OTU5IDMyOS43OCAzNC43MzAxVjMwLjIzMjdDMzMwLjI0MyAzMC4xNjY5IDMzMC42MzkgMzAuMTMzOSAzMzEuMDM2IDMwLjEzMzlDMzMyLjQyNCAzMC4xMzQzIDMzMy4xNTEgMzEuMDIxMSAzMzMuMTUxIDMyLjMwMDhaTTM2OS41MjggMjMuNjY3NkMzNjkuNTI4IDIyLjAyNiAzNjguNDM4IDIxLjMwMzkgMzY2LjU1NSAyMC41MTYyQzM2NS4yIDE5Ljk1ODMgMzY0LjUwNiAxOS40OTg4IDM2NC41MDYgMTguNDE1MUMzNjQuNTA2IDE3LjQ2MzIgMzY1LjI2NiAxNi44MDY1IDM2Ni41MjEgMTYuODA2NUMzNjcuMzQ4IDE2LjgwNjUgMzY4LjA3NSAxNy4xMDE3IDM2OC43MzUgMTcuNjI3NUMzNjguODAyIDE3LjI2NjQgMzY4Ljk2NyAxNi45MDQ5IDM2OS4xMzEgMTYuNjQyMkMzNjguMzcyIDE2LjI4MTEgMzY3LjQ3OSAxNi4xMTcyIDM2Ni41ODcgMTYuMTE3MkMzNjMuOTQ0IDE2LjExNzIgMzYyLjk4NiAxNy42NiAzNjIuOTg2IDE5LjAwNkMzNjIuOTg2IDIwLjU4MTcgMzYzLjgxMiAyMS4zMzY4IDM2NS44NjEgMjIuMTI0NEMzNjcuMTQ5IDIyLjYxNjkgMzY3LjgxIDIzLjI0MDYgMzY3LjgxIDI0LjM1NjhDMzY3LjgxIDI1LjQ3MyAzNjYuOTUxIDI2LjE5NTIgMzY1Ljc2MiAyNi4xOTUyQzM2NS4wMzUgMjYuMTk1MiAzNjMuODc5IDI1LjgzNDEgMzYzLjA1MiAyNS4xMTE5QzM2My4wMiAyNS41Mzg5IDM2Mi45ODYgMjUuOSAzNjIuODg3IDI2LjI2MTFDMzYzLjM4MyAyNi41MjM4IDM2NC42MDYgMjYuOTE3NCAzNjUuNzI5IDI2LjkxNzRDMzY4LjUwNCAyNi45MTc0IDM2OS41MjggMjUuMjQzMyAzNjkuNTI4IDIzLjY2NzZWMjMuNjY3NloiIGZpbGw9IiMwMzY1NTUiLz4NCjxwYXRoIGQ9Ik02NDAuNDE2IDIwLjU1NzNDNjM4LjY3MSAxOS44MzU0IDYzNy42MzEgMTkuNTU1MSA2MzYuNTk4IDE5LjU1NTFDNjM1LjUxNCAxOS41NTUxIDYzNC44MTkgMTkuOTE3IDYzNC44MTkgMjAuNDc2NUM2MzQuODE5IDIyLjE2NDUgNjQwLjk2MiAyMS42ODkzIDY0MC45NjIgMjUuNTkzNkM2NDAuOTYyIDI3Ljc0NjQgNjM5LjAyNCAyOC45OTc0IDYzNi4zMzIgMjguOTk3NEM2MzQuMjIgMjguOTk3NCA2MzMuMTggMjguNDg4IDYzMS45ODMgMjcuOTExNlYyNS40OTYyQzYzMy43MSAyNi41NjM1IDYzNC43NjggMjYuOTQwMSA2MzYuMTAxIDI2Ljk0MDFDNjM3LjI1NiAyNi45NDAxIDYzNy44NzkgMjYuNTYzNSA2MzcuODc5IDI1LjkwNjNDNjM3Ljg3OSAyNC4wNjg1IDYzMS43MzcgMjQuNzQxNSA2MzEuNzM3IDIwLjcyMTNDNjMxLjczNyAxOC43ODI3IDYzMy41MzQgMTcuNDk5IDYzNi4zMzIgMTcuNDk5QzYzNy42ODIgMTcuNDk5IDYzOC45MDEgMTcuNzYzNSA2NDAuNDE2IDE4LjM3MDdWMjAuNTU3M1pNNjQ5LjAxNiAyOC40ODQxQzY0Ny45OTIgMjguODMwNiA2NDcuMTI2IDI4Ljk5NTQgNjQ2LjI2MiAyOC45OTU0QzY0My40MDIgMjguOTk1NCA2NDEuNTUyIDI3LjQ0MjIgNjQxLjU1MiAyNS4wNzkyQzY0MS41NTIgMjIuNzU5NCA2NDMuNDczIDIxLjEyMDIgNjQ2LjE1NiAyMS4xMjAyQzY0Ni45ODUgMjEuMTIwMiA2NDguMDQ0IDIxLjMxODIgNjQ4Ljg5MSAyMS42MTIzVjIzLjM4ODFDNjQ4LjIyMSAyMy4wNTYyIDY0Ny40NDQgMjIuODc0MSA2NDYuODA5IDIyLjg3NDFDNjQ1LjI3MyAyMi44NzQxIDY0NC4yODYgMjMuNzM0MyA2NDQuMjg2IDI1LjA2MTlDNjQ0LjI4NiAyNi40MDggNjQ1LjI1NiAyNy4yOTQgNjQ2LjcyIDI3LjI5NEM2NDcuMzM3IDI3LjI5NCA2NDcuODg2IDI3LjE2MjMgNjQ5LjAxNiAyNi43NjhMNjQ5LjAxNiAyOC40ODQxWk02NzEuMzIgMjQuMjA5QzY3MS40MjUgMjMuMTU0OCA2NzIuMDgxIDIyLjU0NTcgNjczLjA4NyAyMi41NDU3QzY3NC4wNzYgMjIuNTQ1NyA2NzQuNzQ2IDIzLjE3MjEgNjc0Ljg1MiAyNC4yMDlINjcxLjMyWk02NzIuOTEgMjEuMTIyOUM2NzAuNCAyMS4xMjI5IDY2OC42MTQgMjIuNzc1NSA2NjguNjE0IDI1LjEwMTJDNjY4LjYxNCAyNy40NDQxIDY3MC40NzEgMjguOTk1NCA2NzMuMzM1IDI4Ljk5NTRDNjczLjk3IDI4Ljk5NTQgNjc1LjUwNCAyOC45OTU0IDY3Ni45NjYgMjcuOTg3VjI2LjUwNDJDNjc1Ljc2OSAyNy4yOTkzIDY3NC45NzcgMjcuNTczMSA2NzMuOTU1IDI3LjU3MzFDNjcyLjM0MSAyNy41NzMxIDY3MS4zNTQgMjYuNzk0OSA2NzEuMjY1IDI1LjQ2NjZINjc3LjExQzY3Ny4yMzIgMjIuNjkzOSA2NzUuMjc5IDIxLjEyMjkgNjcyLjkxIDIxLjEyMjlWMjEuMTIyOVpNNjc4LjA5OSAyOC44NTcySDY4MC42NTRWMjEuMjYyN0g2NzguMDk5VjI4Ljg1NzJaTTY4Ny43NjcgMjYuNzgxNUM2ODcuMjM0IDI3LjIyODEgNjg2Ljc5MiAyNy40MDcyIDY4Ni4yNDYgMjcuNDA3MkM2ODUuMDQzIDI3LjQwNzIgNjg0LjI4MSAyNi40ODM4IDY4NC4yODEgMjUuMTAwNEM2ODQuMjgxIDIzLjU4NDEgNjg1LjA0MyAyMi43MTAxIDY4Ni4zMzEgMjIuNzEwMUM2ODYuNzkyIDIyLjcxMDEgNjg3LjM5NCAyMi45MDggNjg3Ljc2NyAyMy4xNTU5VjI2Ljc4MTVaTTY4Ny43NjcgMTcuNjM5MVYyMS41OTU4QzY4Ny4wNzYgMjEuMjg0NyA2ODYuMzg4IDIxLjEyMDIgNjg1LjY0NCAyMS4xMjAyQzY4My4zMTMgMjEuMTIwMiA2ODEuNyAyMi43MjY2IDY4MS43IDI1LjA1MDdDNjgxLjcgMjcuMzI0OCA2ODMuMzEzIDI4Ljk5NzQgNjg1LjUgMjguOTk3NEM2ODYuMzY3IDI4Ljk5NzQgNjg3LjAzNyAyOC43ODU2IDY4Ny43NjcgMjguMjQzNVYyOC44NTQ5SDY5MC4zMjJWMTcuNjM5MUg2ODcuNzY3Wk02OTQuMTA1IDI0LjIwOUM2OTQuMjExIDIzLjE1NDggNjk0Ljg2NCAyMi41NDU3IDY5NS44NjggMjIuNTQ1N0M2OTYuODU4IDIyLjU0NTcgNjk3LjUzNSAyMy4xNzIxIDY5Ny42NDEgMjQuMjA5SDY5NC4xMDVaTTY5NS42OTQgMjEuMTIyOUM2OTMuMTg0IDIxLjEyMjkgNjkxLjQgMjIuNzc1NSA2OTEuNCAyNS4xMDEyQzY5MS40IDI3LjQ0NDEgNjkzLjI1OSAyOC45OTU0IDY5Ni4xMTkgMjguOTk1NEM2OTYuNzUzIDI4Ljk5NTQgNjk4LjI5IDI4Ljk5NTQgNjk5Ljc1NSAyNy45ODdWMjYuNTA0MkM2OTguNTU3IDI3LjI5OTMgNjk3Ljc2MyAyNy41NzMxIDY5Ni43MzYgMjcuNTczMUM2OTUuMTMxIDI3LjU3MzEgNjk0LjE0IDI2Ljc5NDkgNjk0LjA1MSAyNS40NjY2SDY5OS44OTRDNzAwLjAxNSAyMi42OTM5IDY5OC4wNjEgMjEuMTIyOSA2OTUuNjk0IDIxLjEyMjkiIGZpbGw9IiMwMDlFNEQiLz4NCjxwYXRoIGQ9Ik03MDMuNzIxIDIzLjQzNjhINzAzLjc1OEM3MDQuNTE3IDIxLjg1NjIgNzA1LjM2NiAyMS4xMTUgNzA2LjM1MiAyMS4xMTVDNzA2Ljg2MiAyMS4xMTUgNzA3LjMwMyAyMS4yOTY0IDcwOC4wNDQgMjEuODA3Nkw3MDcuMzQxIDIzLjkxMzNDNzA2LjY3IDIzLjUxODYgNzA2LjIyOSAyMy4zNTM1IDcwNS44MjMgMjMuMzUzNUM3MDQuODg2IDIzLjM1MzUgNzA0LjI4NiAyNC4xNzc1IDcwMy43MjEgMjUuNTcwNFYyOC44NDY2SDcwMS4xNjJWMjEuMjU0MUg3MDMuNzIxVjIzLjQzNjhaTTY4MC43NzUgMTguMDY3NEM2ODEuMDE1IDE4LjY1NzUgNjgwLjU4MyAxOS40ODA1IDY3OS44MTQgMTkuOTA0QzY3OS4wNDEgMjAuMzI3MSA2NzguMjI0IDIwLjE5MjggNjc3Ljk4NiAxOS42MDI3QzY3Ny43NDMgMTkuMDExNyA2NzguMTczIDE4LjE4NzcgNjc4Ljk0NSAxNy43NjY2QzY3OS43MTYgMTcuMzQxMSA2ODAuNTMzIDE3LjQ3NTkgNjgwLjc3NSAxOC4wNjc0WiIgZmlsbD0iIzAwOUU0RCIvPg0KPHBhdGggZD0iTTY1OC4yMiAyNC4wMjMxQzY1OC4yMiAyMS45NjUxIDY1Ni43MTkgMjEuMTIyNiA2NTUuMjM5IDIxLjEyMjZDNjU0LjIzMiAyMS4xMjI2IDY1My40MDQgMjEuNTE4NCA2NTIuNjY0IDIyLjM5MjFINjUyLjYyOVYxNy42MzkySDY1MC4wNzFWMjguODM1M0g2NTIuNjI5VjI0LjAyMzFDNjUzLjIyOCAyMy4yMTYxIDY1My43MzggMjIuODcxMSA2NTQuMzM4IDIyLjg3MTFDNjU1LjEzNCAyMi44NzExIDY1NS42NjIgMjMuMzk4NiA2NTUuNjYyIDI0LjUzMjlWMjcuMjAwOEM2NTYuNTIgMjYuNzg5NiA2NTcuMzkzIDI2LjUzNzQgNjU4LjIyIDI2LjQ0MzhWMjQuMDIzMVpNNjY0LjYzNiAyMS4xMTk5QzY2My41OTQgMjEuMTE5OSA2NjIuNzk5IDIxLjQ4MTEgNjYxLjk4NCAyMi4zNDkzVjIxLjI2MjRINjU5LjQyOFYyNi40MjM0QzY2MC4zMTMgMjYuNTA1OCA2NjEuNDQzIDI2Ljg4NDcgNjYxLjk4NCAyNy41MTA0VjIzLjk2MzRDNjYyLjY1NyAyMy4wMjMyIDY2My4xMzQgMjIuNzA5NyA2NjMuNzcgMjIuNzA5N0M2NjQuNDk0IDIyLjcwOTcgNjY1LjA0NSAyMy4xNTU2IDY2NS4wNDUgMjQuMjI2NFYyOC44MzcySDY2Ny42MDJWMjQuMDI4OUM2NjcuNjAyIDIxLjc5MjYgNjY1LjkwOCAyMS4xMTk5IDY2NC42MzYgMjEuMTE5OVYyMS4xMTk5Wk02NjkuMDE1IDMxLjAxODFINjY2LjA0M1YzMi45ODY0SDY2OC45MDlWMzMuODMxMkg2NjYuMDQzVjM1Ljg2MTlINjY5LjEwM1YzNi43MDU1SDY2NS4wNDZWMzAuMTc1Mkg2NjkuMDE1TDY2OS4wMTUgMzEuMDE4MVpNNjcxLjQ0MiAzNi43MDkzSDY3Mi4zNTJWMzAuMTczM0g2NzEuNDQyVjM2LjcwOTNaTTY3Ni44NTkgMzMuMDQ4NEM2NzcuNTA0IDMzLjA0ODQgNjc3LjkwNCAzMy40NjMxIDY3Ny45MzUgMzQuMTE0Mkg2NzUuNjE2QzY3NS43NDIgMzMuNDM0MiA2NzYuMTYxIDMzLjA0ODQgNjc2Ljg1OSAzMy4wNDg0Wk02NzUuNiAzNC42ODFINjc4Ljg0MkM2NzguODQyIDMzLjA4NjkgNjc4LjA2MiAzMi4zMTggNjc2LjgzOCAzMi4zMThDNjc1LjU2OSAzMi4zMTggNjc0LjY4OCAzMy4xOTI0IDY3NC42ODggMzQuNDk2OUM2NzQuNjg4IDM1LjY4OSA2NzUuNDg0IDM2Ljc4OTggNjc2LjkxNyAzNi43ODk4QzY3Ny42OTggMzYuNzg5OCA2NzguMjAzIDM2LjYyODEgNjc4Ljc2MyAzNi4yODJWMzUuNDU2QzY3OC4yMjIgMzUuNzg1NiA2NzcuNjk4IDM1Ljk3NTggNjc3LjE0NyAzNS45NzU4QzY3Ni4yNjUgMzUuOTc1OCA2NzUuNzQyIDM1LjUzNSA2NzUuNiAzNC42ODA2VjM0LjY4MVpNNjg0Ljc4NiAzMy41MzA5QzY4NC4yNjMgMzMuMTk2NiA2ODMuOTE0IDMzLjA5ODUgNjgzLjUxNSAzMy4wOTg1QzY4Mi42ODIgMzMuMDk4NSA2ODIuMTA1IDMzLjY5NDUgNjgyLjEwNSAzNC41NjdDNjgyLjEwNSAzNS40NTYgNjgyLjcxOSAzNS45OTE2IDY4My42NjggMzUuOTkxNkM2ODQuMDU4IDM1Ljk5MTYgNjg0LjQzIDM1Ljg5NzMgNjg0Ljg4OCAzNS43MDU5VjM2LjU0MjZDNjg0LjU4MiAzNi42Nzc0IDY4My45OTcgMzYuNzg5OCA2ODMuNTE1IDM2Ljc4OThDNjgyLjEzNiAzNi43ODk4IDY4MS4xOCAzNS45MDYyIDY4MS4xOCAzNC42NDMyQzY4MS4xOCAzMy4yMTc4IDY4Mi4wNTQgMzIuMzE4IDY4My40NTMgMzIuMzE4QzY4My45ODcgMzIuMzE4IDY4NC4zNDYgMzIuNDMzOSA2ODQuNzg3IDMyLjYxNDVMNjg0Ljc4NiAzMy41MzA5Wk02ODguOTM0IDMyLjQwMDRINjkwLjM5NVYzMy4xNjUxSDY4OC45MzRWMzUuMzc1MkM2ODguOTM0IDM1Ljg4MTEgNjg5LjMyNyAzNi4wMjc0IDY4OS41OTMgMzYuMDI3NEM2ODkuOTIyIDM2LjAyNzQgNjkwLjI2MiAzNS45MiA2OTAuNjMgMzUuNzA3OVYzNi41MDM3QzY5MC4zMSAzNi42Njc4IDY4OS44MiAzNi43ODk4IDY4OS41MTkgMzYuNzg5OEM2ODguNTI4IDM2Ljc4OTggNjg4LjAyNyAzNi4yMTYxIDY4OC4wMjcgMzUuNDM5MVYzMy4xNjUxSDY4Ny4yMjRWMzMuMDcwM0w2ODguOTM0IDMxLjUxMDJWMzIuNDAwNFpNNjkzLjg3NiAzMi40MDA0VjMzLjM5NjlINjkzLjg5NUM2OTQuMzU5IDMyLjYzNDUgNjk0LjggMzIuMzE4IDY5NS4yMyAzMi4zMThDNjk1LjYwMSAzMi4zMTggNjk1Ljk0NyAzMi40ODAxIDY5Ni4zMjkgMzIuODE2Nkw2OTUuODQ3IDMzLjU2NDRDNjk1LjU3IDMzLjMwOTEgNjk1LjIxMSAzMy4xMzMxIDY5NC45OTUgMzMuMTMzMUM2OTQuMzY4IDMzLjEzMzEgNjkzLjg3NiAzMy43MjY4IDY5My44NzYgMzQuNDYyNlYzNi43MDkzSDY5Mi45NjdWMzIuNDAwNEg2OTMuODc2Wk03MDUuNjU3IDMzLjUzMDlDNzA1LjEzMSAzMy4xOTY2IDcwNC43ODIgMzMuMDk4NSA3MDQuMzgxIDMzLjA5ODVDNzAzLjU0OSAzMy4wOTg1IDcwMi45NzcgMzMuNjk0NSA3MDIuOTc3IDM0LjU2N0M3MDIuOTc3IDM1LjQ1NiA3MDMuNTkyIDM1Ljk5MTYgNzA0LjUzNSAzNS45OTE2QzcwNC45MjUgMzUuOTkxNiA3MDUuMjk1IDM1Ljg5NzMgNzA1Ljc2IDM1LjcwNTlWMzYuNTQyNkM3MDUuNDQ3IDM2LjY3NzQgNzA0Ljg2MiAzNi43ODk4IDcwNC4zOCAzNi43ODk4QzcwMy4wMDQgMzYuNzg5OCA3MDIuMDQ0IDM1LjkwNjIgNzAyLjA0NCAzNC42NDMyQzcwMi4wNDQgMzMuMjE3OCA3MDIuOTIyIDMyLjMxOCA3MDQuMzIgMzIuMzE4QzcwNC44NTUgMzIuMzE4IDcwNS4yMTIgMzIuNDMzOSA3MDUuNjU3IDMyLjYxNDVMNzA1LjY1NyAzMy41MzA5Wk02OTguNzQyIDM2LjcwOTNINjk5LjY1MlYzMi40MDA4SDY5OC43NDJWMzYuNzA5M1oiIGZpbGw9IiMwMDlFNEQiLz4NCjxwYXRoIGQ9Ik02OTkuNjg0IDMwLjg1MjVDNjk5Ljc3MyAzMS4wNjA0IDY5OS42MTggMzEuMzU0NCA2OTkuMzQ0IDMxLjUwNDFDNjk5LjA2OCAzMS42NTQzIDY5OC43NzYgMzEuNjA2MiA2OTguNjkzIDMxLjM5NzhDNjk4LjYxIDMxLjE4NzQgNjk4Ljc2MSAzMC44OTU4IDY5OS4wMzggMzAuNzQ1NkM2OTkuMzExIDMwLjU5MzUgNjk5LjYwMSAzMC42NDIxIDY5OS42ODQgMzAuODUyNVYzMC44NTI1Wk02NTguOTQgMzEuMjAwOUM2NTguNzc5IDMxLjIwMDkgNjU4LjcxMSAzMS4yMjU1IDY1OC42NDYgMzEuMjkzOEM2NTguNjIgMzEuMzIwMyA2NTguNjEgMzEuMzQ3MiA2NTguNiAzMS40MDExTDY1Ny43ODQgMzQuMjg3QzY1Ny41OTMgMzUuMjk5MiA2NTYuMjU5IDM2LjMwOTkgNjU0LjUyMSAzNi4zMDk5SDY1Mi4xMDRMNjUyLjUyMyAzNC44MjdINjU0LjA3NkM2NTQuMjM0IDM0LjgyNyA2NTQuMzU4IDM0Ljc3MjEgNjU0LjQ2MiAzNC42NjQzQzY1NC41IDM0LjYyMjUgNjU0LjU1IDM0LjU1NyA2NTQuNTU2IDM0LjQ4OTZMNjU1LjIwMSAzMS45NjgxQzY1NS4zOTEgMzAuOTU1NSA2NTYuNTM4IDI5LjgzNjkgNjU4LjI3NiAyOS44MzY5SDY2MC43NTFMNjYwLjQzNSAzMS4yMDA5SDY1OC45NFpNNjU5LjQ5NyAzMi45NTk2TDY1OS43NzMgMzIuMDI1OUg2NjIuMjg4QzY2Mi41OTggMzAuNjcyIDY2Mi4zNTQgMjkuNDE3NyA2NjEuNDczIDI4LjU5NjFDNjU5LjY4OSAyNi45MzMyIDY1NS45NTcgMjcuNDk4MyA2NTMuMTc3IDI5Ljk3NzlDNjUyLjc0MyAzMC4zNjMgNjUyLjM3NiAzMC43NzkzIDY1Mi4wNDIgMzEuMjA0OEg2NTMuNTU2TDY1My4yMDQgMzIuMTQwNEg2NTEuMzk1QzY1MS4yMjIgMzIuNDM1NCA2NTEuMDYgMzIuNzI4MSA2NTAuOTM2IDMzLjAyNUg2NTMuMDgxTDY1Mi43MzcgMzMuOTYwN0g2NTAuNjNDNjUwLjI2OSAzNS4zOTAxIDY1MC40OTkgMzYuNzIzMyA2NTEuNDA2IDM3LjU2OTlDNjUzLjE2NyAzOS4yMTE2IDY1Ni44ODggMzguNjM0NiA2NTkuNjY3IDM2LjE1NTRDNjYwLjE1MyAzNS43MjQyIDY2MC41NTUgMzUuMjU4NyA2NjAuOTE4IDM0Ljc4MDhINjU4Ljk3M0w2NTkuMjY5IDMzLjg0NzFINjYxLjU0M0M2NjEuNzEgMzMuNTUwMSA2NjEuODYzIDMzLjI1NjUgNjYxLjk4MyAzMi45NTk2SDY1OS40OTdaIiBmaWxsPSIjMDA5RTREIi8+DQo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNThfMTExKSI+DQo8cGF0aCBkPSJNNzc1LjA2OCA0MS4yMjc0Qzc2Ni4yODUgNDIuMDQ2MyA3NTcuMTMxIDQwLjc1NjQgNzU1Ljg0OCAzMy44MTlDNzU1LjIyMSAzMC4zOTkgNzU2Ljc2NSAyNi43NzI1IDc1OC44MSAyNC41MTg0VjIzLjMxNDhDNzU1LjEyNiAyNi41OCA3NTMuMTMgMzAuNzExNSA3NTQuMjggMzUuNTkyQzc1NS43NDggNDEuODUxOCA3NjMuNjAzIDQ1LjM5NjcgNzc1LjU5NSA0NC4yMTk1Qzc4MC4zNDIgNDMuNzU0NSA3ODYuNTUgNDIuMjEyIDc5MC44NjkgMzkuODE0NFYzNi40MTA5Qzc4Ni45NDkgMzguNzcxMyA3ODAuNDY4IDQwLjcyMTEgNzc1LjA2OCA0MS4yMjc0VjQxLjIyNzRaTTc5OC4yMDUgMjMuMjMzNUM3OTYuMTIyIDEyLjk1MzMgNzc2LjM3MyAxMi4zMDE2IDc2My42NDMgMjAuMTMzOFYyMC45OTg5Qzc3Ni4zNTkgMTQuMzkxNSA3OTQuMzk1IDE0LjQzMTcgNzk2LjAzNyAyMy45MDE2Qzc5Ni41ODkgMjcuMDM0MiA3OTQuODQzIDMwLjI5NzggNzkxLjcyMyAzMi4xNzdWMzQuNjM0MkM3OTUuNDc2IDMzLjI0MzIgNzk5LjMyNCAyOC43NDQyIDc5OC4yMDUgMjMuMjMzNVYyMy4yMzM1WiIgZmlsbD0iIzBFN0RDMiIvPg0KPHBhdGggZD0iTTc5MC4xNTkgMjEuNzM2OEg3ODcuODU2VjMyLjEwM0M3ODcuODU2IDMzLjMxNzkgNzg4LjQzNyAzNC4zNzQ0IDc5MC4xNTkgMzQuNTQzMlYyMS43MzY4Wk03NjIuNzM5IDI1LjUyMTdINzYwLjQzMkw3NjAuNDMxIDMyLjI5NDNDNzYwLjQzMSAzMy41MTM0IDc2MS4wMTMgMzQuNTY4OCA3NjIuNzM5IDM0LjczNDRWMjUuNTIxN1YyNS41MjE3Wk03NjAuNDMyIDIyLjA1MjFINzYyLjczMlYyNC4yNTg0SDc2MC40MzJWMjIuMDUyMVpNNzc2LjUzIDM0LjYyNzJDNzc0LjY2NiAzNC42MjcyIDc3My44NzcgMzMuMzE3NyA3NzMuODc3IDMyLjAyOFYyMy4wMzU1SDc3Ni4xNlYyNS41MjE3SDc3Ny44NzlWMjcuMzg1M0g3NzYuMTZWMzEuODg1NEM3NzYuMTYgMzIuNDExMyA3NzYuNDA3IDMyLjcwNDQgNzc2Ljk1IDMyLjcwNDRINzc3Ljg3OVYzNC42MjcyTDc3Ni41MyAzNC42MjcyVjM0LjYyNzJaTTc4MC43MzEgMzAuNzk2MUM3ODAuNzMxIDMxLjk3NjggNzgxLjQ2MSAzMi44NDQ2IDc4Mi43NTQgMzIuODQ0NkM3ODMuNzY2IDMyLjg0NDYgNzg0LjI2NiAzMi41NjA1IDc4NC44NSAzMS45NzY4TDc4Ni4yNjEgMzMuMzM0OUM3ODUuMzU3IDM0LjIzNzkgNzg0LjQwOSAzNC43ODcgNzgyLjczNyAzNC43ODdDNzgwLjU1MiAzNC43ODcgNzc4LjQ1OSAzMy41ODE5IDc3OC40NTkgMzAuMDY4NkM3NzguNDU5IDI3LjA2NTEgNzgwLjI4OCAyNS4zNjczIDc4Mi42ODYgMjUuMzY3M0M3ODUuMTI0IDI1LjM2NzMgNzg2LjUyNSAyNy4zNTQ5IDc4Ni41MjUgMjkuOTYzOVYzMC43OTYzSDc4MC43MzFWMzAuNzk2MVpNNzgyLjU4NiAyNy4yNzU2Qzc4MS44MDUgMjcuMjc1NiA3ODEuMjA0IDI3LjY4MjMgNzgwLjk1IDI4LjIzMDlDNzgwLjgwMiAyOC41NjA3IDc4MC43NDcgMjguODE3NyA3ODAuNzMxIDI5LjIyMjlINzg0LjI0OUM3ODQuMjA0IDI4LjIzMDkgNzgzLjc1OSAyNy4yNzU2IDc4Mi41ODYgMjcuMjc1NlpNNzY4LjkzOSAyNy4zODUzQzc2OS42MDggMjcuMzg1MyA3NjkuODg3IDI3LjcxOTggNzY5Ljg4NyAyOC4yNjI2VjM0LjY0MDZINzcyLjE3VjI4LjI0OTJDNzcyLjE3IDI2Ljk1NDIgNzcxLjQ4NyAyNS41MjQxIDc2OS40ODIgMjUuNTI0MUw3NjQuNzY2IDI1LjUyMTdWMzQuNjQwNkg3NjcuMDVWMjcuMzg1M0g3NjguOTM5VjI3LjM4NTNaTTc5Mi42MzcgMjMuNTg5MUM3OTIuMTI5IDIzLjU4OTEgNzkxLjcyNCAyMy4xNzU0IDc5MS43MjQgMjIuNjYyOUM3OTEuNzI0IDIyLjE1MjkgNzkyLjEyOSAyMS43MzY4IDc5Mi42MzcgMjEuNzM2OEM3OTMuMTQyIDIxLjczNjggNzkzLjU1NiAyMi4xNTI5IDc5My41NTYgMjIuNjYyOUM3OTMuNTU2IDIzLjE3NTQgNzkzLjE0MiAyMy41ODkxIDc5Mi42MzcgMjMuNTg5MVpNNzkyLjYzNyAyMS44OTEyQzc5Mi4yMTggMjEuODkxMiA3OTEuODgyIDIyLjI0MDcgNzkxLjg4MiAyMi42NjI5Qzc5MS44ODIgMjMuMDg3NiA3OTIuMjE4IDIzLjQzMDkgNzkyLjYzNyAyMy40MzA5Qzc5My4wNTUgMjMuNDMwOSA3OTMuNDAyIDIzLjA4NzYgNzkzLjQwMiAyMi42NjI5Qzc5My40MDIgMjIuMjQwNyA3OTMuMDU1IDIxLjg5MTIgNzkyLjYzNyAyMS44OTEyWk03OTMuMDQzIDIzLjIxOEg3OTIuODcyQzc5Mi44NjQgMjMuMjE3OSA3OTIuODU3IDIzLjIxNTcgNzkyLjg1MSAyMy4yMTE2Qzc5Mi44NDUgMjMuMjA3NSA3OTIuODQgMjMuMjAxNyA3OTIuODM3IDIzLjE5NDlMNzkyLjYwNSAyMi43OTdDNzkyLjU5OCAyMi43ODg1IDc5Mi41NzkgMjIuNzc4OCA3OTIuNTczIDIyLjc3ODhINzkyLjQ2N1YyMy4xNzU0Qzc5Mi40NjcgMjMuMTk1IDc5Mi40NTMgMjMuMjE4MSA3OTIuNDI4IDIzLjIxODFINzkyLjI3NEM3OTIuMjUxIDIzLjIxODEgNzkyLjIzNSAyMy4xOTUgNzkyLjIzNSAyMy4xNzU0VjIyLjE3NDlDNzkyLjIzNSAyMi4xMTY0IDc5Mi4yNTQgMjIuMDkyNCA3OTIuMzA1IDIyLjA4NUM3OTIuMzYxIDIyLjA3OSA3OTIuNTA1IDIyLjA3MTYgNzkyLjU4NiAyMi4wNzE2Qzc5Mi44NzIgMjIuMDcxNiA3OTMuMDM5IDIyLjE1NjYgNzkzLjAzOSAyMi40MjQ0VjIyLjQ0NEM3OTMuMDM5IDIyLjYwOTQgNzkyLjk1OSAyMi42OTk1IDc5Mi44MzMgMjIuNzM5N0w3OTMuMDc0IDIzLjE1NDdDNzkzLjA3OCAyMy4xNjQgNzkzLjA4IDIzLjE3MzkgNzkzLjA4IDIzLjE4NEM3OTMuMDggMjMuMTk5NyA3OTMuMDcyIDIzLjIxOCA3OTMuMDQzIDIzLjIxOFYyMy4yMThaTTc5Mi44MjEgMjIuNDI0NEM3OTIuODIxIDIyLjMxMjcgNzkyLjc1MiAyMi4yNzczIDc5Mi42MDUgMjIuMjc3M0g3OTIuNDU5VjIyLjU5NDdDNzkyLjQ4MiAyMi41OTQ3IDc5Mi41ODYgMjIuNTk5NiA3OTIuNjA1IDIyLjU5OTZDNzkyLjc1MiAyMi41OTk2IDc5Mi44MjEgMjIuNTUgNzkyLjgyMSAyMi40NDRWMjIuNDI0NFoiIGZpbGw9IiMwRTdEQzIiLz4NCjwvZz4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMV81OF8xMTEpIj4NCjxwYXRoIGQ9Ik01MzMuNzczIDIwLjk5MTFDNTI5LjI2MyAyMC45OTExIDUyNS41OTkgMjQuNjU0NyA1MjUuNTk5IDI5LjE2NDRDNTI1LjU5OSAzMy42NzQxIDUyOS4yNjMgMzcuMzM3NyA1MzMuNzczIDM3LjMzNzdDNTM4LjI4MiAzNy4zMzc3IDU0MS45NDYgMzMuNjc0MSA1NDEuOTQ2IDI5LjE2NDRDNTQxLjk0NiAyNC42NTQ3IDUzOC4yODIgMjAuOTkxMSA1MzMuNzczIDIwLjk5MTFaTTUzMy43NzMgMzYuNTE4NkM1MjkuNzEzIDM2LjUxODYgNTI2LjQxOSAzMy4yMTUgNTI2LjQxOSAyOS4xNjQ0QzUyNi40MTkgMjUuMTEzNyA1MjkuNzEzIDIxLjgxMDIgNTMzLjc3MyAyMS44MTAyQzUzNy44MzIgMjEuODEwMiA1NDEuMTI3IDI1LjExMzcgNTQxLjEyNyAyOS4xNjQ0QzU0MS4xMjcgMzMuMjE1IDUzNy44MzIgMzYuNTE4NiA1MzMuNzczIDM2LjUxODZaIiBmaWxsPSJibGFjayIvPg0KPHBhdGggZD0iTTUzNi42OSAyMy45MjUyQzUzNi42NjMgMjMuOTA3MiA1MzYuNjI3IDIzLjg5ODIgNTM2LjU5MSAyMy44OTgyQzUzNi40ODMgMjMuODk4MiA1MzYuNDAyIDIzLjk3OTIgNTM2LjQwMiAyNC4wODczVjI2LjY0MzdDNTM2LjQwMiAyNi43MzM3IDUzNi4zMyAyNi44MDU3IDUzNi4yNCAyNi44MDU3SDUzMS4yOUM1MzEuMiAyNi44MDU3IDUzMS4xMzcgMjYuNzMzNyA1MzEuMTI4IDI2LjY0MzdWMjQuMDg3M0M1MzEuMTI4IDI0LjA1MTMgNTMxLjExOSAyNC4wMjQyIDUzMS4xMDEgMjMuOTg4MkM1MzEuMDQ3IDIzLjg5ODIgNTMwLjkzIDIzLjg3MTIgNTMwLjgzOSAyMy45MjUyQzUyOS4wMTIgMjUuMDUwNCA1MjcuOTA1IDI3LjAwMzcgNTI3LjkwNSAyOS4xNjQxQzUyNy45MDUgMzEuMzI0NCA1MjkuMDEyIDMzLjI3NzcgNTMwLjg1NyAzNC40MDI5QzUzMC44ODUgMzQuNDIwOSA1MzAuOTIxIDM0LjQyOTkgNTMwLjk1NyAzNC40Mjk5QzUzMS4wNjUgMzQuNDI5OSA1MzEuMTQ2IDM0LjM0ODkgNTMxLjE0NiAzNC4yNDA5VjMxLjY4NDVDNTMxLjE0NiAzMS41OTQ0IDUzMS4yMTggMzEuNTMxNCA1MzEuMzA4IDMxLjUyMjRINTM2LjI1OEM1MzYuMzQ4IDMxLjUyMjQgNTM2LjQyIDMxLjU5NDQgNTM2LjQyIDMxLjY4NDVWMzQuMjQwOUM1MzYuNDIgMzQuMjc2OSA1MzYuNDI5IDM0LjMwMzkgNTM2LjQ0NyAzNC4zMzk5QzUzNi41MDEgMzQuNDI5OSA1MzYuNjE4IDM0LjQ1NjkgNTM2LjcwOCAzNC40MDI5QzUzOC41NTQgMzMuMjc3NyA1MzkuNjYxIDMxLjMyNDQgNTM5LjY2MSAyOS4xNjQxQzUzOS42NjEgMjcuMDAzNyA1MzguNTM2IDI1LjA1MDQgNTM2LjY5IDIzLjkyNTJWMjMuOTI1MlpNNTMwLjE5MSAzMi4zNjg2TDUzMC4yMTggMzIuNjc0Nkw1MzAuMDIgMzIuNDMxNkM1MjguNDk5IDMwLjUxNDMgNTI4LjQ5OSAyNy44MDQ4IDUzMC4wMiAyNS44ODc1TDUzMC4xOTEgMjUuNjcxNUw1MzAuMjE4IDI1LjY0NDVMNTMwLjE5MSAyNS45NTk2QzUzMC4xNjQgMjYuMjExNiA1MzAuMTU1IDI2LjQ3MjYgNTMwLjE1NSAyNi43MzM3VjMxLjU4NTRDNTMwLjE1NSAzMS44NDY1IDUzMC4xNzMgMzIuMTA3NSA1MzAuMTkxIDMyLjM2ODZaTTUzNi40MDIgMzAuMzg4M0M1MzYuNDAyIDMwLjQ3ODMgNTM2LjMzIDMwLjU1MDMgNTM2LjI0IDMwLjU1MDNINTMxLjI5QzUzMS4yIDMwLjU1MDMgNTMxLjEzNyAzMC40NzgzIDUzMS4xMjggMzAuMzg4M1YyNy45Mzk5QzUzMS4xMjggMjcuODQ5OSA1MzEuMiAyNy43Nzc4IDUzMS4yOSAyNy43Nzc4SDUzNi4yNEM1MzYuMzMgMjcuNzc3OCA1MzYuNDAyIDI3Ljg0OTkgNTM2LjQwMiAyNy45Mzk5VjMwLjM4ODNaTTUzNy41MTkgMzIuNDMxNkw1MzcuMzIxIDMyLjY3NDZMNTM3LjM0OCAzMi4zNjg2QzUzNy4zNzUgMzIuMTE2NSA1MzcuMzg0IDMxLjg1NTUgNTM3LjM4NCAzMS41OTQ0VjI2LjczMzdDNTM3LjM4NCAyNi40NzI2IDUzNy4zNzUgMjYuMjExNiA1MzcuMzQ4IDI1Ljk1OTZMNTM3LjMzOSAyNS44MjQ1TDUzNy4zMyAyNS42ODA1VjI1LjY0NDVMNTM3LjUxOSAyNS44ODc1QzUzOC4yNTcgMjYuODA1NyA1MzguNjYyIDI3Ljk3NTkgNTM4LjY2MiAyOS4xNTUxQzUzOC42NjIgMzAuMzM0MiA1MzguMjU3IDMxLjUxMzQgNTM3LjUxOSAzMi40MzE2VjMyLjQzMTZaIiBmaWxsPSJibGFjayIvPg0KPHBhdGggZD0iTTU1NC4yNzYgMjkuMDIwMkM1NTQuMjMxIDI5LjAwMjIgNTU0LjE3NyAyOC45ODQyIDU1NC4xNzcgMjguOTMwMkM1NTQuMTc3IDI4Ljg5NDIgNTU0LjE5NSAyOC44NjcyIDU1NC4yMzEgMjguODQ5MkM1NTQuMjk0IDI4LjgyMjIgNTU1Ljg1MSAyOC4yNjQxIDU1NS44NTEgMjYuNDI3OEM1NTUuODUxIDI0LjM4NDUgNTU0LjQ3NCAyMy4xNjkzIDU1Mi4xNTIgMjMuMTY5M0g1NDYuNTI2VjM1LjE3NzJINTUyLjY2NUM1NTQuNDU2IDM1LjE3NzIgNTU2LjM4MiAzMy45MDggNTU2LjM4MiAzMS44NjQ2QzU1Ni4zODIgMjkuOTExMyA1NTQuOTA2IDI5LjIyNzIgNTU0LjI3NiAyOS4wMjAyVjI5LjAyMDJaTTU0OS4zNjEgMjUuNjI2N0M1NDkuMzYxIDI1LjU4MTcgNTQ5LjM5NyAyNS41NDU2IDU0OS40NDIgMjUuNTQ1Nkg1NTEuNjc1QzU1Mi40MTMgMjUuNTQ1NiA1NTIuOTE3IDI2LjA0MDcgNTUyLjkxNyAyNi43Nzg4QzU1Mi45MTcgMjcuMzU0OSA1NTIuNDY3IDI3Ljk3NiA1NTEuNjIxIDI3Ljk3Nkg1NDkuNDQyQzU0OS4zOTcgMjcuOTc2IDU0OS4zNjEgMjcuOTQgNTQ5LjM2MSAyNy44OTVWMjUuNjI2N1pNNTUxLjY3NSAzMi44MDk4SDU0OS40NDJDNTQ5LjM5NyAzMi44MDk4IDU0OS4zNjEgMzIuNzczOCA1NDkuMzYxIDMyLjcyODhWMzAuMzM0NEM1NDkuMzYxIDMwLjI4OTQgNTQ5LjM5NyAzMC4yNTM0IDU0OS40NDIgMzAuMjUzNEg1NTEuNjIxQzU1Mi42OTIgMzAuMjUzNCA1NTMuMzA0IDMwLjcxMjUgNTUzLjMwNCAzMS41MjI2QzU1My4zMDQgMzIuMzU5NyA1NTIuNzM3IDMyLjgwOTggNTUxLjY3NSAzMi44MDk4VjMyLjgwOThaTTU3NS4zODQgMjcuOTQ5TDU3NC45NTIgMjcuODU5QzU3My45OCAyNy42NTIgNTczLjAzNSAyNy4zOTA5IDU3My4wMzUgMjYuNTUzOEM1NzMuMDM1IDI1LjcxNjcgNTczLjgxOCAyNS4zMzg2IDU3NC41OTIgMjUuMzM4NkM1NzUuNTAxIDI1LjMzODYgNTc2LjQwMSAyNS43NDM3IDU3Ny4wODYgMjYuNDQ1OEw1NzguODY4IDI0LjY4MTVDNTc4LjEwMyAyMy44MzU0IDU3Ni43NDQgMjIuODYzMiA1NzQuNTQ3IDIyLjg2MzJDNTcxLjkwMSAyMi44NjMyIDU3MC4xMTggMjQuMzY2NSA1NzAuMTE4IDI2LjYwNzhDNTcwLjExOCAyOC45NzUyIDU3MS45ODIgMjkuODY2MyA1NzMuNTQ4IDMwLjE5OTRMNTczLjk3MSAzMC4yODk0QzU3NS40OTIgMzAuNjEzNSA1NzYuMjEyIDMwLjg1NjUgNTc2LjIxMiAzMS43MjA2QzU3Ni4yMTIgMzIuNDk0NyA1NzUuNTE5IDMzLjAwNzggNTc0LjQ5MyAzMy4wMDc4QzU3My4yODcgMzMuMDA3OCA1NzIuMjE2IDMyLjQ3NjcgNTcxLjQwNiAzMS40Nzc2TDU2OS41NzggMzMuMjY4OUM1NzAuNTUxIDM0LjQyMTEgNTcxLjgzOCAzNS40NjUyIDU3NC41MjkgMzUuNDY1MkM1NzYuODI1IDM1LjQ2NTIgNTc5LjE1NiAzNC4xMzMgNTc5LjE1NiAzMS41NzY2QzU3OS4xNDcgMjguOTU3MiA1NzcuMzY1IDI4LjM2MzEgNTc1LjM4NCAyNy45NDlWMjcuOTQ5Wk01OTkuMTAzIDIzLjE2OTNWMjcuNTYyQzU5OS4xMDMgMjcuNjA3IDU5OS4wNjcgMjcuNjQzIDU5OS4wMjIgMjcuNjQzSDU5NS4zMzFDNTk1LjI4NiAyNy42NDMgNTk1LjI1IDI3LjYwNyA1OTUuMjUgMjcuNTYyVjIzLjE2OTNINTkyLjIyNlYzNS4xNzcySDU5NS4yNVYzMC40NjA0QzU5NS4yNSAzMC40MTU0IDU5NS4yODYgMzAuMzc5NCA1OTUuMzMxIDMwLjM3OTRINTk5LjAyMkM1OTkuMDY3IDMwLjM3OTQgNTk5LjEwMyAzMC40MTU0IDU5OS4xMDMgMzAuNDYwNFYzNS4xNzcySDYwMi4xNDZWMjMuMTY5M0g1OTkuMTAzWk01ODYuMTQxIDMyLjcxOThDNTg0Ljc4MiAzMi43MTk4IDU4My4zMTUgMzEuNTg1NiA1ODMuMzE1IDI5LjA5MjJDNTgzLjMxNSAyNi44MTQ4IDU4NC42OTIgMjUuNjI2NyA1ODYuMDUxIDI1LjYyNjdDNTg3LjA0MSAyNS42MjY3IDU4Ny43MzQgMjYuMDQwNyA1ODguMjgzIDI2Ljk1ODlMNTkwLjYwNiAyNS40MTk2QzU4OS40MTggMjMuNjczMyA1ODguMDA0IDIyLjg4MTIgNTg2LjAzMyAyMi44ODEyQzU4Mi4xNzEgMjIuODgxMiA1ODAuNDQzIDI2LjAwNDcgNTgwLjQ0MyAyOS4wOTIyQzU4MC40NDMgMzIuODQ1OCA1ODIuNzI5IDM1LjQ2NTIgNTg1Ljk5NyAzNS40NjUyQzU4OC40MjcgMzUuNDY1MiA1ODkuNTM1IDM0LjU3NDEgNTkwLjY5NiAzMi45MjY4TDU4OC4zNTUgMzEuMzUxNkM1ODcuODMzIDMyLjE5NzcgNTg3LjI2NiAzMi43MTk4IDU4Ni4xNDEgMzIuNzE5OFpNNTYzLjE3OCAyMi44NjMyQzU1OS44NzUgMjIuODYzMiA1NTcuNjYxIDI1LjM5MjYgNTU3LjY2MSAyOS4xNjQyQzU1Ny42NjEgMzIuOTM1OCA1NTkuODc1IDM1LjQ2NTIgNTYzLjE3OCAzNS40NjUyQzU2Ni40ODIgMzUuNDY1MiA1NjguNjk2IDMyLjkzNTggNTY4LjY5NiAyOS4xNjQyQzU2OC42OTYgMjUuMzkyNiA1NjYuNDgyIDIyLjg2MzIgNTYzLjE3OCAyMi44NjMyVjIyLjg2MzJaTTU2My4xNzggMzIuNzE5OEM1NjEuNTU4IDMyLjcxOTggNTYwLjUxNCAzMS4zMjQ2IDU2MC41MTQgMjkuMTY0MkM1NjAuNTE0IDI3LjAxMjkgNTYxLjU1OCAyNS42MjY3IDU2My4xNzggMjUuNjI2N0M1NjQuODA4IDI1LjYyNjcgNTY1Ljg2MSAyNy4wMTI5IDU2NS44NjEgMjkuMTY0MkM1NjUuODYxIDMxLjMyNDYgNTY0LjgwOCAzMi43MTk4IDU2My4xNzggMzIuNzE5OFoiIGZpbGw9IiNGODAwMDAiLz4NCjwvZz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQ2LjM0NCAyMi4xODExQzE0Ny41OTUgMjIuMjg1NCAxNDguODQ1IDIxLjU1NTMgMTQ5LjYyNyAyMC42Mjk4QzE1MC4zOTUgMTkuNjc4MSAxNTAuOTAzIDE4LjQwMDUgMTUwLjc3MyAxNy4wOTY5QzE0OS42NjYgMTcuMTQ5MSAxNDguMjk4IDE3LjgyNjkgMTQ3LjUxNyAxOC43Nzg2QzE0Ni44IDE5LjU5OTkgMTQ2LjE4OCAyMC45Mjk2IDE0Ni4zNDQgMjIuMTgxMVpNMTQ3Ljg0MSAyMy4wNzk3QzE0OC42NTMgMjIuNzYwNiAxNDkuNjU4IDIyLjM2NTYgMTUwLjc2IDIyLjQyOTFDMTUxLjQ2MyAyMi40ODEyIDE1My40OTUgMjIuNjg5OCAxNTQuNzk4IDI0LjYxOTJDMTU0Ljc5MiAyNC42MjM3IDE1NC43NzggMjQuNjMyMyAxNTQuNzU5IDI0LjY0NUMxNTQuNDM2IDI0Ljg1NDggMTUyLjM5IDI2LjE4NzEgMTUyLjQxNCAyOC44MTY5QzE1Mi40MzkgMzEuOTQ5OSAxNTQuOTg4IDMzLjExODMgMTU1LjMyMiAzMy4yNzExQzE1NS4zNDQgMzMuMjgxMSAxNTUuMzU2IDMzLjI4NjcgMTU1LjM1OCAzMy4yODgzQzE1NS4zNTYgMzMuMjkyNiAxNTUuMzU0IDMzLjMwMSAxNTUuMzUgMzMuMzEzM0MxNTUuMjgzIDMzLjUyODggMTU0Ljg0NSAzNC45NDg5IDE1My44NDcgMzYuNDA0QzE1Mi45MjIgMzcuNzU5OCAxNTEuOTcxIDM5LjA4OTUgMTUwLjQ2IDM5LjExNTZDMTQ5Ljc0OSAzOS4xMjgzIDE0OS4yNyAzOC45MjExIDE0OC43NzIgMzguNzA1NEMxNDguMjQ3IDM4LjQ3ODUgMTQ3LjcwMSAzOC4yNDIyIDE0Ni44NCAzOC4yNDIyQzE0NS45NDcgMzguMjQyMiAxNDUuMzc2IDM4LjQ4NDggMTQ0LjgyNiAzOC43MTg0QzE0NC4zNDggMzguOTIxNCAxNDMuODg3IDM5LjExNzQgMTQzLjI0NSAzOS4xNDE3QzE0MS43ODYgMzkuMTkzOCAxNDAuNjc5IDM3LjcwNzcgMTM5Ljc1NCAzNi4zNTE5QzEzNy44NjYgMzMuNjE0MyAxMzYuNDIgMjguNjM0NCAxMzguMzc0IDI1LjI3MUMxMzkuMzI1IDIzLjU4OTMgMTQxLjA1NyAyMi41MzM0IDE0Mi45MTkgMjIuNTA3M0MxNDMuNzMyIDIyLjQ5MjUgMTQ0LjUwNyAyMi44MDA2IDE0NS4xODQgMjMuMDcwMUMxNDUuNzAyIDIzLjI3NTggMTQ2LjE2MiAyMy40NTg5IDE0Ni41NCAyMy40NTg5QzE0Ni44NzcgMjMuNDU4OSAxNDcuMzE5IDIzLjI4NTEgMTQ3Ljg0MSAyMy4wNzk3WiIgZmlsbD0iYmxhY2siLz4NCjxwYXRoIGQ9Ik0zNi44NTg3IDM3LjUyNDFIMzEuOTg3NEwzNS4wMzQyIDE5LjY2NjhIMzkuOTA1MkwzNi44NTg3IDM3LjUyNDFaIiBmaWxsPSIjMDA1NzlGIi8+DQo8cGF0aCBkPSJNNTQuNTE1NyAyMC4xMDQxQzUzLjU1NDkgMTkuNzQyOCA1Mi4wMzA5IDE5LjM0MzggNTAuMTQ2NiAxOS4zNDM4QzQ1LjMzNjEgMTkuMzQzOCA0MS45NDg2IDIxLjc3NTMgNDEuOTI3OCAyNS4yNTE2QzQxLjg4NzggMjcuODE2NSA0NC4zNTMxIDI5LjI0MSA0Ni4xOTcgMzAuMDk2MkM0OC4wODE2IDMwLjk3MDEgNDguNzIyMyAzMS41NDA1IDQ4LjcyMjMgMzIuMzE5NEM0OC43MDMxIDMzLjUxNTcgNDcuMTk5NCAzNC4wNjcyIDQ1Ljc5NjkgMzQuMDY3MkM0My44NTIxIDM0LjA2NzIgNDIuODEgMzMuNzgyOSA0MS4yMjY0IDMzLjExNzNMNDAuNTg1IDMyLjgzMkwzOS45MDMzIDM2Ljg0MDZDNDEuMDQ1OCAzNy4zMzM5IDQzLjE1MDcgMzcuNzcxNyA0NS4zMzYxIDM3Ljc5MDlDNTAuNDQ3MyAzNy43OTA5IDUzLjc3NDkgMzUuMzk3MSA1My44MTQzIDMxLjY5MjVDNTMuODMzOCAyOS42NTk3IDUyLjUzMiAyOC4xMDIgNDkuNzI1NCAyNi44MjkyQzQ4LjAyMTcgMjYuMDEyMSA0Ni45NzgzIDI1LjQ2MTIgNDYuOTc4MyAyNC42MjUyQzQ2Ljk5ODMgMjMuODY1MiA0Ny44NjA4IDIzLjA4NjggNDkuNzg0IDIzLjA4NjhDNTEuMzY3NyAyMy4wNDg2IDUyLjUzMTIgMjMuNDA5NCA1My40MTI2IDIzLjc3MDVMNTMuODUzMiAyMy45NjAxTDU0LjUxNTcgMjAuMTA0MVoiIGZpbGw9IiMwMDU3OUYiLz4NCjxwYXRoIGQ9Ik02MC45OTI0IDMxLjE5NzlDNjEuMzkzNiAzMC4xNzIgNjIuOTM3MiAyNi4yMDE2IDYyLjkzNzIgMjYuMjAxNkM2Mi45MTcgMjYuMjM5NyA2My4zMzc2IDI1LjE1NjggNjMuNTc4MSAyNC40OTE5TDYzLjkxODYgMjYuMDMwNkM2My45MTg2IDI2LjAzMDYgNjQuODQxIDMwLjMwNTEgNjUuMDQxNCAzMS4xOTc5QzY0LjI4IDMxLjE5NzkgNjEuOTU0NiAzMS4xOTc5IDYwLjk5MjQgMzEuMTk3OVpNNjcuMDA1NCAxOS42NjY4SDYzLjIzNzRDNjIuMDc1NSAxOS42NjY4IDYxLjE5MjcgMTkuOTg5NSA2MC42OTE0IDIxLjE0ODRMNTMuNDU1OCAzNy41MjM5SDU4LjU2NzFDNTguNTY3MSAzNy41MjM5IDU5LjQwODUgMzUuMzE5OSA1OS41ODk0IDM0Ljg0NTJDNjAuMTUwMSAzNC44NDUyIDY1LjEyMjMgMzQuODQ1MiA2NS44NDM3IDM0Ljg0NTJDNjUuOTgzNSAzNS40NzIxIDY2LjQyNDkgMzcuNTIzOSA2Ni40MjQ5IDM3LjUyMzlINzAuOTM1Mkw2Ny4wMDU0IDE5LjY2NjhWMTkuNjY2OFoiIGZpbGw9IiMwMDU3OUYiLz4NCjxwYXRoIGQ9Ik0yNy45MTggMTkuNjY2OEwyMy4xNDc1IDMxLjg0MzhMMjIuNjI2MiAyOS4zNzQxQzIxLjc0NDIgMjYuNTI0NSAxOC45NzgxIDIzLjQyODQgMTUuODkxNCAyMS44ODlMMjAuMjYxIDM3LjUwNTJIMjUuNDEyMkwzMy4wNjkgMTkuNjY2OEgyNy45MThWMTkuNjY2OFoiIGZpbGw9IiMwMDU3OUYiLz4NCjxwYXRoIGQ9Ik0xOC43MTg0IDE5LjY2NjhIMTAuODgxMUwxMC44MDA5IDIwLjAyNzZDMTYuOTE0NSAyMS41MDk1IDIwLjk2MzUgMjUuMDgxNSAyMi42MjcgMjkuMzc0OUwyMC45MjMyIDIxLjE2NzlDMjAuNjQyNyAyMC4wMjc0IDE5Ljc4MDcgMTkuNzA0NCAxOC43MTg0IDE5LjY2NjhaIiBmaWxsPSIjRkFBNjFBIi8+DQo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDJfNThfMTExKSI+DQo8cGF0aCBkPSJNMjIxLjE1OCAxNy40OTlWMTguOTM1NkgyMzEuMzA2VjE3LjQ5OUgyMjEuMTU4Wk0yMzIuNzQ0IDE3LjQ5OVYxOC45MzU2SDI0Ny4yMDZDMjQ3LjIwNiAxOC45MzU2IDI0NS43MjkgMTcuNDk5IDI0My43NzMgMTcuNDk5SDIzMi43NDRaTTI1MC4wNDMgMTcuNDk5VjE4LjkzNTZIMjU4Ljc5M0wyNTguMjczIDE3LjQ5OUgyNTAuMDQzWk0yNjUuMDY1IDE3LjQ5OUwyNjQuNTQ2IDE4LjkzNTZIMjczLjIxNlYxNy40OTlIMjY1LjA2NVpNMjIxLjE1OCAyMC4yOTI5VjIxLjcyOTZIMjMxLjMwNlYyMC4yOTI5SDIyMS4xNThaTTIzMi43NDQgMjAuMjk1VjIxLjcyOTdIMjQ4Ljg4NEMyNDguODg0IDIxLjcyOTcgMjQ4LjY5NiAyMC42MjM5IDI0OC4zNjcgMjAuMjk1SDIzMi43NDRaTTI1MC4wNDMgMjAuMjk1VjIxLjcyOTdIMjU5Ljc1MkwyNTkuMjcxIDIwLjI5NUgyNTAuMDQzWk0yNjQuMDI3IDIwLjI5NUwyNjMuNTQ2IDIxLjcyOTdIMjczLjIxNlYyMC4yOTVIMjY0LjAyN1YyMC4yOTVaTTIyNC4wNzQgMjMuMDg2OVYyNC41MjU3SDIyOC40NjlWMjMuMDg2OUgyMjQuMDc0VjIzLjA4NjlaTTIzNS42NjEgMjMuMDg2OVYyNC41MjU3SDI0MC4wNTZWMjMuMDg2OUgyMzUuNjYxVjIzLjA4NjlaTTI0NC4zMzEgMjMuMDg2OVYyNC41MjU3SDI0OC43MjZDMjQ4LjcyNiAyNC41MjU3IDI0OS4wMDUgMjMuNzY1OSAyNDkuMDA1IDIzLjA4NjlIMjQ0LjMzMVYyMy4wODY5Wk0yNTIuOTYgMjMuMDg2OVYyNC41MjU3SDI2MC43NTJMMjYwLjIzMiAyMy4wODY5SDI1Mi45NlYyMy4wODY5Wk0yNjMuMDY5IDIzLjA4NjlMMjYyLjU0OCAyNC41MjU3SDI3MC4zNzlWMjMuMDg2OUgyNjMuMDY5VjIzLjA4NjlaTTIyNC4wNzQgMjUuODgzVjI3LjMxOTdIMjI4LjQ2OVYyNS44ODNIMjI0LjA3NFYyNS44ODNaTTIzNS42NjEgMjUuODgzVjI3LjMxOTdIMjQ2Ljg4N0MyNDYuODg3IDI3LjMxOTcgMjQ3LjgyNiAyNi41ODI1IDI0OC4xMjUgMjUuODgzSDIzNS42NjFaTTI1Mi45NiAyNS44ODNWMjcuMzE5N0gyNTcuMzU1VjI2LjUyTDI1Ny42MzQgMjcuMzE5N0gyNjUuNjg0TDI2NS45ODQgMjYuNTJWMjcuMzE5N0gyNzAuMzc5VjI1Ljg4M0gyNjIuMTI5TDI2MS42OTEgMjcuMDk5OUwyNjEuMjUxIDI1Ljg4M0gyNTIuOTZaTTIyNC4wNzQgMjguNjc3VjMwLjExMzdIMjI4LjQ2OVYyOC42NzdIMjI0LjA3NFpNMjM1LjY2MSAyOC42NzdWMzAuMTEzN0gyNDguMTI1QzI0Ny44MjYgMjkuNDE2NSAyNDYuODg3IDI4LjY3NyAyNDYuODg3IDI4LjY3N0gyMzUuNjYxWk0yNTIuOTYgMjguNjc3VjMwLjExMzdIMjU3LjM1NVYyOC42NzdIMjUyLjk2Wk0yNTguMTUzIDI4LjY3N0wyNTguNjg1IDMwLjExMzdIMjY0LjcyMUwyNjUuMjI2IDI4LjY3N0gyNTguMTUzWk0yNjUuOTg0IDI4LjY3N1YzMC4xMTM3SDI3MC4zNzlWMjguNjc3SDI2NS45ODRaTTIyNC4wNzQgMzEuNDcxVjMyLjkwNzZIMjI4LjQ2OVYzMS40NzFIMjI0LjA3NFpNMjM1LjY2MSAzMS40NzFWMzIuOTA3NkgyNDAuMDU2VjMxLjQ3MUgyMzUuNjYxWk0yNDQuMzMxIDMxLjQ3MVYzMi45MDc2SDI0OS4wMDVDMjQ5LjAwNSAzMi4yMjk2IDI0OC43MjYgMzEuNDcxIDI0OC43MjYgMzEuNDcxSDI0NC4zMzFWMzEuNDcxWk0yNTIuOTYgMzEuNDcxVjMyLjkwNzZIMjU3LjM1NVYzMS40NzFIMjUyLjk2Wk0yNTkuMTUxIDMxLjQ3MUwyNTkuNjY2IDMyLjkwNzZIMjYzLjcxM0wyNjQuMjMyIDMxLjQ3MUgyNTkuMTUxWk0yNjUuOTg0IDMxLjQ3MVYzMi45MDc2SDI3MC4zNzlWMzEuNDcxSDI2NS45ODRaTTIyMS4yMzcgMzQuMjY1VjM1LjcwMzdIMjMxLjM4NlYzNC4yNjVIMjIxLjIzN1pNMjMyLjc0NCAzNC4yNjVWMzUuNzAzN0gyNDguMzY3QzI0OC42OTYgMzUuMzc0MyAyNDguODg0IDM0LjI2NSAyNDguODg0IDM0LjI2NUgyMzIuNzQ0VjM0LjI2NVpNMjUwLjEyMyAzNC4yNjVWMzUuNzAzN0gyNTcuMzU1VjM0LjI2NUgyNTAuMTIzWk0yNjAuMTUxIDM0LjI2NUwyNjAuNjggMzUuNzAzN0gyNjIuNzM5TDI2My4yMzYgMzQuMjY1SDI2MC4xNTFaTTI2NS45ODQgMzQuMjY1VjM1LjcwMzdIMjczLjI5NVYzNC4yNjVIMjY1Ljk4NFpNMjIxLjIzNyAzNy4wNjFWMzguNDk3N0gyMzEuMzg2VjM3LjA2MUgyMjEuMjM3Wk0yMzIuNzQ0IDM3LjA2MVYzOC40OTU2SDI0My43NzNDMjQ1LjcyOSAzOC40OTU2IDI0Ny4yMDYgMzcuMDYxIDI0Ny4yMDYgMzcuMDYxSDIzMi43NDRaTTI1MC4xMjMgMzcuMDYxVjM4LjQ5NzdIMjU3LjM1NVYzNy4wNjFIMjUwLjEyM1pNMjYxLjE1NSAzNy4wNjFMMjYxLjY2NCAzOC40OTM2TDI2MS43NTIgMzguNDk1NkwyNjIuMjY5IDM3LjA2MUgyNjEuMTU1VjM3LjA2MVpNMjY1Ljk4NCAzNy4wNjFWMzguNDk3N0gyNzMuMjk1VjM3LjA2MUgyNjUuOTg0WiIgZmlsbD0iIzFGNzBDMSIvPg0KPC9nPg0KPGRlZnM+DQo8Y2xpcFBhdGggaWQ9ImNsaXAwXzU4XzExMSI+DQo8cmVjdCB3aWR0aD0iNDQuNDQ3MyIgaGVpZ2h0PSIyOS42MzE1IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzUzLjk1NSAxNC44MTU1KSIvPg0KPC9jbGlwUGF0aD4NCjxjbGlwUGF0aCBpZD0iY2xpcDFfNThfMTExIj4NCjxyZWN0IHdpZHRoPSI3Ni41NDgxIiBoZWlnaHQ9IjE2LjM1MDciIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MjUuNTk5IDIwLjk4ODkpIi8+DQo8L2NsaXBQYXRoPg0KPGNsaXBQYXRoIGlkPSJjbGlwMl81OF8xMTEiPg0KPHJlY3Qgd2lkdGg9IjUyLjEzNzIiIGhlaWdodD0iMjAuOTk4NyIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyMS4xNTggMTcuNDk5KSIvPg0KPC9jbGlwUGF0aD4NCjwvZGVmcz4NCjwvc3ZnPg0K\\\")
\\n Claim your FREE account\\n
\\n \\n ![](\\\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTQ2IDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDAuNTk2NSAxNS4wMDc4SDMyLjQyNUMzMS41NTU3IDE1LjAwNzggMzAuOTAzNyAxNS4xODEyIDMwLjUxMjUgMTUuNDg0NkMzMC4xMjEzIDE1LjgzMTQgMjkuOTA0IDE2LjMwODIgMjkuOTA0IDE3LjA0NTFDMjkuOTA0IDE3LjYwODYgMzAuMDc3OCAxOC4wNDIxIDMwLjQyNTYgMTguMzAyMkMzMC43NzMzIDE4LjYwNTYgMzEuMjk0OSAxOC43MzU2IDMxLjk5MDMgMTguNzM1NkgzNi4zMzY5QzM4LjExODkgMTguNzM1NiAzOS40MjI5IDE5LjA4MjQgNDAuMTYxOCAxOS43MzI2QzQwLjk0NDIgMjAuNDI2MiA0MS4yOTE5IDIxLjU1MzIgNDEuMjkxOSAyMy4xMTM3QzQxLjI5MTkgMjQuNzE3NiA0MC44NTcyIDI1Ljg4OCAzOS45ODc5IDI2LjY2ODJDMzkuMTE4NiAyNy40MDUxIDM3LjcyNzcgMjcuNzk1MyAzNS44NTg3IDI3Ljc5NTNIMjcuMDc4N1YyNS4wMjFIMzUuMzM3MkMzNi4yOTM0IDI1LjAyMSAzNi45NDU0IDI0Ljg5MSAzNy4zMzY2IDI0LjYzMDlDMzcuNzI3NyAyNC4zNzA4IDM3LjkwMTYgMjMuODk0IDM3LjkwMTYgMjMuMjg3MUMzNy45MDE2IDIyLjYzNjkgMzcuNzI3NyAyMi4xNjAxIDM3LjM4IDIxLjlDMzcuMDMyMyAyMS42Mzk5IDM2LjQyMzggMjEuNDY2NSAzNS41NTQ1IDIxLjQ2NjVIMzEuNjQyNkMyOS44NjA1IDIxLjQ2NjUgMjguNTEzMSAyMS4xMTk4IDI3LjY4NzMgMjAuMzgyOEMyNi44NjE0IDE5LjY0NTkgMjYuNDI2OCAxOC41MTg5IDI2LjQyNjggMTcuMDAxN0MyNi40MjY4IDE1LjM1NDUgMjYuODYxNCAxNC4xNDA4IDI3LjczMDcgMTMuMzYwNkMyOC42IDEyLjU4MDMgMjkuOTkwOSAxMi4yMzM1IDMxLjkwMzQgMTIuMjMzNUg0MC41OTY1VjE1LjAwNzhaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik00OC4wNzI3IDI1LjI4MTFINTAuNTA2OFYxNi4zOTQ5SDUzLjU0OTNWMjcuNTM1MkM1My41NDkzIDI5LjA1MjQgNTMuMjAxNiAzMC4xNzk0IDUyLjUwNjIgMzAuOTE2M0M1MS44MTA3IDMxLjY1MzIgNTAuNzI0MSAzMiA0OS4yNDYzIDMySDQzLjMzNVYyOS42NTkySDQ4LjcyNDdDNDkuMjg5NyAyOS42NTkyIDQ5Ljc2NzkgMjkuNTI5MiA1MC4wNzIxIDI5LjIyNThDNTAuMzc2NCAyOC45NjU3IDUwLjU1MDIgMjguNTMyMiA1MC41NTAyIDI4LjAxMlYyNy44Mzg2SDQ3Ljg5ODlDNDYuMjAzNyAyNy44Mzg2IDQ0Ljk0MzIgMjcuNDkxOSA0NC4yNDc4IDI2Ljg0MTZDNDMuNTA4OSAyNi4xNDgxIDQzLjE2MTEgMjUuMDY0NCA0My4xNjExIDIzLjQ2MDVWMTYuMzk0OUg0Ni4xNjAyVjIzLjIwMDVDNDYuMTYwMiAyNC4wNjc0IDQ2LjI5MDYgMjQuNjMwOSA0Ni41NTE0IDI0Ljg5MUM0Ni43MjUzIDI1LjE1MTEgNDcuMjQ2OSAyNS4yODExIDQ4LjA3MjcgMjUuMjgxMVoiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTU1Ljg5NjUgMTYuMzk0OUg2MS41OTA0QzYzLjMyOTEgMTYuMzk0OSA2NC41NDYxIDE2LjY5ODMgNjUuMjg1IDE3LjM0ODVDNjYuMDIzOSAxNy45OTg4IDY2LjM3MTYgMTkuMDgyNCA2Ni4zNzE2IDIwLjU1NjNWMjcuNzk1M0g2My4zMjkxVjIwLjk0NjRDNjMuMzI5MSAyMC4wNzk0IDYzLjE5ODcgMTkuNTE1OSA2Mi45Mzc5IDE5LjI5OTJDNjIuNjc3MSAxOS4wMzkxIDYyLjE1NTUgMTguOTA5MSA2MS4zMjk3IDE4LjkwOTFINTguODk1NlYyNy44Mzg2SDU1Ljg1M1YxNi4zOTQ5SDU1Ljg5NjVaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik03NC45MzQyIDI1LjM2NzhINzguMTUwNlYyNy43OTUySDc0LjAyMTRDNzIuOTc4MiAyNy43OTUyIDcyLjEwODkgMjcuNjY1MiA3MS40NTcgMjcuNDkxOEM3MC44MDUgMjcuMjc1IDcwLjE5NjUgMjYuOTI4MyA2OS43MTgzIDI2LjQ1MTRDNjkuMTk2OCAyNS45MzEzIDY4Ljc2MjEgMjUuMjgxMSA2OC40NTc4IDI0LjU0NDJDNjguMTUzNiAyMy44MDcyIDY4LjAyMzIgMjIuOTgzNiA2OC4wMjMyIDIyLjE2QzY4LjAyMzIgMjEuMjkzMSA2OC4xNTM2IDIwLjQ2OTUgNjguNDU3OCAxOS42ODkyQzY4Ljc2MjEgMTguOTA5IDY5LjE1MzMgMTguMzAyMSA2OS43MTgzIDE3Ljc4MTlDNzAuMjM5OSAxNy4zMDUxIDcwLjgwNSAxNi45NTgzIDcxLjUwMDQgMTYuNzQxNkM3Mi4xOTU5IDE2LjUyNDkgNzMuMDIxNyAxNi40MzgyIDc0LjA2NDkgMTYuNDM4Mkg3OC4xOTQxVjE4LjkwOUg3NC45MzQyQzczLjQ5OTggMTguOTA5IDcyLjU0MzYgMTkuMTY5MSA3MS45Nzg1IDE5LjY0NTlDNzEuNDU2OSAyMC4xMjI3IDcxLjE1MjcgMjAuOTg5NyA3MS4xNTI3IDIyLjIwMzRDNzEuMTUyNyAyMi44OTY5IDcxLjI4MzEgMjMuNDYwNSA3MS41MDA0IDIzLjkzNzNDNzEuNzE3NyAyNC40MTQxIDcyLjA2NTUgMjQuNzYwOSA3Mi41MDAxIDI1LjA2NDNDNzIuNzE3NCAyNS4xOTQ0IDcyLjk3ODIgMjUuMjgxMSA3My4yODI1IDI1LjM2NzhDNzMuNjMwMiAyNS4zMjQ0IDc0LjE1MTggMjUuMzY3OCA3NC45MzQyIDI1LjM2NzhaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik04MC44NDU2IDE4LjY0ODlINzguNjcyNFYxNi4zNTE1SDgwLjg0NTZWMTUuMTgxMUM4MC44NDU2IDE0LjAxMDggODEuMDYzIDEzLjIzMDUgODEuNDk3NiAxMi44NDA0QzgxLjkzMjMgMTIuNDUwMyA4Mi43NTgxIDEyLjIzMzUgODMuOTc1MSAxMi4yMzM1SDg2Ljg0MzhWMTQuNDAwOUg4NS40MDk1Qzg0Ljg4NzkgMTQuNDAwOSA4NC41NDAyIDE0LjQ4NzYgODQuMzIyOSAxNC42NjFDODQuMTA1NSAxNC44MzQ0IDgzLjk3NTEgMTUuMDk0NSA4My45NzUxIDE1LjQ0MTJWMTYuMzUxNUg4Ni44NDM4VjE4LjY0ODlIODMuOTc1MVYyNy43OTUzSDgwLjg0NTZWMTguNjQ4OVoiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTk4LjQwNTYgMjcuNzk1M0g5Mi43MTE2QzkxLjAxNjUgMjcuNzk1MyA4OS44NDI5IDI3LjQ0ODUgODkuMDYwNSAyNi43OTgzQzg4LjMyMTYgMjYuMTQ4MSA4Ny45MzA0IDI1LjA2NDQgODcuOTMwNCAyMy41OTA2VjE2LjM5NDlIOTAuOTI5NVYyMy40MTcyQzkwLjkyOTUgMjQuMTk3NCA5MS4wNTk5IDI0LjY3NDMgOTEuMzIwNyAyNC45MzQ0QzkxLjU4MTUgMjUuMTk0NCA5Mi4xMDMxIDI1LjMyNDUgOTIuOTI4OSAyNS4zMjQ1SDk1LjM2M1YxNi4zOTQ5SDk4LjQwNTZWMjcuNzk1M1oiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTEwMC42MjIgMjUuNDExMkgxMDcuMDExQzEwNy41NzcgMjUuNDExMiAxMDguMDExIDI1LjMyNDUgMTA4LjI3MiAyNS4xNTExQzEwOC41MzMgMjQuOTc3NyAxMDguNjYzIDI0LjY3NDMgMTA4LjY2MyAyNC4zMjc1QzEwOC42NjMgMjMuOTM3NCAxMDguNTMzIDIzLjY3NzMgMTA4LjI3MiAyMy40NjA1QzEwOC4wMTEgMjMuMjg3MSAxMDcuNTc3IDIzLjIwMDUgMTA3LjA1NSAyMy4yMDA1SDEwNC40NDdDMTAyLjg4MiAyMy4yMDA1IDEwMS44MzkgMjIuOTgzNyAxMDEuMzE4IDIyLjUwNjlDMTAwLjc1MiAyMi4wMzAxIDEwMC40OTIgMjEuMjA2NSAxMDAuNDkyIDE5Ljk5MjdDMTAwLjQ5MiAxOC43NzkgMTAwLjgzOSAxNy44Njg3IDEwMS40OTEgMTcuMjYxOEMxMDIuMTQzIDE2LjY5ODMgMTAzLjE4NyAxNi4zOTQ5IDEwNC41MzQgMTYuMzk0OUgxMTEuMDU0VjE4Ljc3OUgxMDUuNzA4QzEwNC44MzggMTguNzc5IDEwNC4yNzMgMTguODY1NyAxMDQuMDEyIDE4Ljk5NTdDMTAzLjc1MiAxOS4xNjkxIDEwMy42MjEgMTkuNDI5MiAxMDMuNjIxIDE5LjgxOTRDMTAzLjYyMSAyMC4xNjYxIDEwMy43NTIgMjAuNDI2MiAxMDMuOTY5IDIwLjU5OTZDMTA0LjE4NiAyMC43NzMgMTA0LjU3NyAyMC44NTk3IDEwNS4wNTYgMjAuODU5N0gxMDcuNzk0QzEwOS4wNTQgMjAuODU5NyAxMTAuMDExIDIxLjE2MzEgMTEwLjY2MyAyMS43MjY2QzExMS4zMTUgMjIuMjkwMiAxMTEuNjYyIDIzLjE1NzEgMTExLjY2MiAyNC4yNDA4QzExMS42NjIgMjUuMjgxMSAxMTEuMzU4IDI2LjE0ODEgMTEwLjc5MyAyNi43OTgzQzExMC4yMjggMjcuNDQ4NSAxMDkuNDQ2IDI3Ljc5NTMgMTA4LjUzMyAyNy43OTUzSDEwMC43MDlWMjUuNDExMkgxMDAuNjIyWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMTE2LjU3NCAxNS4wOTQ0SDExMy40MDFWMTIuMjc2OUgxMTYuNTc0VjE1LjA5NDRaTTExNi41NzQgMjcuNzk1M0gxMTMuNDAxVjE2LjM5NDlIMTE2LjU3NFYyNy43OTUzWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMTMwLjMwOSAyMi4xMTY3QzEzMC4zMDkgMjMuODkzOSAxMjkuNzQ0IDI1LjMyNDQgMTI4LjY1NyAyNi40MDgxQzEyNy41NzEgMjcuNDkxOCAxMjYuMDkzIDI4LjAxMiAxMjQuMjI0IDI4LjAxMkMxMjIuMzU1IDI4LjAxMiAxMjAuODc3IDI3LjQ5MTggMTE5Ljc5IDI2LjQwODFDMTE4LjcwNCAyNS4zMjQ0IDExOC4xMzkgMjMuODkzOSAxMTguMTM5IDIyLjExNjdDMTE4LjEzOSAyMC4zMzk0IDExOC43MDQgMTguOTA5IDExOS43OSAxNy44MjUzQzEyMC44NzcgMTYuNzQxNiAxMjIuMzk4IDE2LjIyMTQgMTI0LjIyNCAxNi4yMjE0QzEyNi4wNDkgMTYuMjIxNCAxMjcuNTI3IDE2Ljc0MTYgMTI4LjY1NyAxNy44MjUzQzEyOS43NDQgMTguODY1NiAxMzAuMzA5IDIwLjI5NjEgMTMwLjMwOSAyMi4xMTY3Wk0xMjEuMjY4IDIyLjExNjdDMTIxLjI2OCAyMy4yMDA0IDEyMS41MjkgMjQuMDY3MyAxMjIuMDUxIDI0LjY3NDJDMTIyLjU3MiAyNS4yODExIDEyMy4yNjggMjUuNTg0NSAxMjQuMTggMjUuNTg0NUMxMjUuMDkzIDI1LjU4NDUgMTI1Ljc4OSAyNS4yODExIDEyNi4zMSAyNC42NzQyQzEyNi44MzIgMjQuMDY3MyAxMjcuMDkzIDIzLjIwMDQgMTI3LjA5MyAyMi4xMTY3QzEyNy4wOTMgMjEuMDMzIDEyNi44MzIgMjAuMTY2MSAxMjYuMzEgMTkuNjAyNUMxMjUuNzg5IDE4Ljk5NTcgMTI1LjA5MyAxOC42OTIyIDEyNC4xMzcgMTguNjkyMkMxMjMuMjI0IDE4LjY5MjIgMTIyLjUyOSAxOC45OTU3IDEyMi4wMDcgMTkuNjAyNUMxMjEuNTI5IDIwLjE2NjEgMTIxLjI2OCAyMS4wMzMgMTIxLjI2OCAyMi4xMTY3WiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMTMxLjc4NyAxNi4zOTQ5SDEzNy40ODFDMTM5LjIxOSAxNi4zOTQ5IDE0MC40MzYgMTYuNjk4MyAxNDEuMTc1IDE3LjM0ODVDMTQxLjkxNCAxNy45OTg4IDE0Mi4yNjIgMTkuMDgyNCAxNDIuMjYyIDIwLjU1NjNWMjcuNzk1M0gxMzkuMjE5VjIwLjk0NjRDMTM5LjIxOSAyMC4wNzk0IDEzOS4wODkgMTkuNTE1OSAxMzguODI4IDE5LjI5OTJDMTM4LjU2NyAxOS4wMzkxIDEzOC4wNDYgMTguOTA5MSAxMzcuMjIgMTguOTA5MUgxMzQuNzg2VjI3LjgzODZIMTMxLjc0M1YxNi4zOTQ5SDEzMS43ODdaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik03LjEyODMxIDMuNzM3NDNIMFYxMC44NDY0SDcuMTI4MzFWMy43Mzc0M1oiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTIzLjI1MTMgLTIuMTU3MjVlLTA1TDE4LjU1MTMgNS41MTY4NUwyNC4wODMxIDEwLjIwNDFMMjguNzgzMSA0LjY4NzI1TDIzLjI1MTMgLTIuMTU3MjVlLTA1WiIgZmlsbD0iI0ZGODYwMCIvPgo8cGF0aCBkPSJNMTUuNjA0MSAzLjczNzQzSDguNDc1ODNWMTAuODQ2NEgxNS42MDQxVjMuNzM3NDNaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik03LjEyODMxIDEyLjE5MDJIMFYxOS4yOTkySDcuMTI4MzFWMTIuMTkwMloiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTE1LjYwNDEgMTIuMTkwMkg4LjQ3NTgzVjE5LjI5OTJIMTUuNjA0MVYxMi4xOTAyWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMjQuMDc5NyAxMi4xOTAySDE2Ljk1MTRWMTkuMjk5MkgyNC4wNzk3VjEyLjE5MDJaIiBmaWxsPSIjRkY4NjAwIi8+CjxwYXRoIGQ9Ik03LjEyODMxIDIwLjY4NjNIMFYyNy43OTUzSDcuMTI4MzFWMjAuNjg2M1oiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTE1LjYwNDEgMjAuNjg2M0g4LjQ3NTgzVjI3Ljc5NTNIMTUuNjA0MVYyMC42ODYzWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMjQuMTIzMiAyMC42ODYzSDE2Ljk5NDlWMjcuNzk1M0gyNC4xMjMyVjIwLjY4NjNaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik0xNDYgMTUuODMxM0MxNDYgMTYuODcxNyAxNDUuMTc0IDE3LjY5NTMgMTQ0LjEzMSAxNy42OTUzQzE0My4wODggMTcuNjk1MyAxNDIuMjYyIDE2Ljg3MTcgMTQyLjI2MiAxNS44MzEzQzE0Mi4yNjIgMTQuNzkxIDE0My4wODggMTQuMDEwNyAxNDQuMTMxIDE0LjAxMDdDMTQ1LjEzMSAxMy45Njc0IDE0NiAxNC43OTEgMTQ2IDE1LjgzMTNaTTE0Mi45NTcgMTQuNzkxQzE0Mi42OTcgMTUuMDUxMSAxNDIuNTY2IDE1LjQ0MTIgMTQyLjU2NiAxNS44MzEzQzE0Mi41NjYgMTYuNjk4MyAxNDMuMjYyIDE3LjM5MTggMTQ0LjEzMSAxNy4zOTE4QzE0NSAxNy4zOTE4IDE0NS42OTYgMTYuNjk4MyAxNDUuNjk2IDE1LjgzMTNDMTQ1LjY5NiAxNS4wMDc3IDE0NSAxNC4yNzA4IDE0NC4xNzQgMTQuMjcwOEMxNDMuNjUzIDE0LjI3MDggMTQzLjI2MiAxNC40NDQyIDE0Mi45NTcgMTQuNzkxWk0xNDQuODcgMTYuOTE1SDE0NC40NzlMMTQzLjkxNCAxNi4wOTE0VjE2LjkxNUgxNDMuNjA5VjE0Ljc0NzZIMTQzLjk1N0MxNDQuNDM1IDE0Ljc0NzYgMTQ0LjY1MyAxNC45NjQ0IDE0NC42NTMgMTUuMzU0NUMxNDQuNjUzIDE1LjY1NzkgMTQ0LjQ3OSAxNS44NzQ3IDE0NC4xNzQgMTUuOTYxNEwxNDQuODcgMTYuOTE1Wk0xNDQuMDQ0IDE1LjY1NzlDMTQ0LjI2MSAxNS42NTc5IDE0NC4zOTIgMTUuNTI3OSAxNDQuMzkyIDE1LjM1NDVDMTQ0LjM5MiAxNS4xMzc4IDE0NC4yNjEgMTUuMDUxMSAxNDQuMDAxIDE1LjA1MTFIMTQzLjkxNFYxNS42NTc5SDE0NC4wNDRaIiBmaWxsPSIjMzU0M0E4Ii8+Cjwvc3ZnPgo=\\\")
\\n
\\n Claim your FREE account and get a key in less than a minute
\\n - \\n
- Access to a 30-day free trial of any of our products. \\n
- Access to 24x5 support by developers via the support tickets, forum, feature & feedback page and chat. \\n
- 200+ ebooks on the latest technologies, industry trends, and research topics.\\n \\n
- Largest collection of over 7,000 flat and wireframe icons for free with Syncfusion Metro Studio. \\n
- Free and unlimited access to Syncfusion technical blogs and whitepapers. \\n
Syncfusion is trusted by 29,000+ businesses worldwide
\\n have a Syncfusion account? Sign In
\\n Draggable
\n * \n * ```\n */\nvar Draggable = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.prevLeft = 0;\n _this.prevTop = 0;\n _this.dragProcessStarted = false;\n _this.eleTop = 0;\n _this.tapHoldTimer = 0;\n _this.externalInitialize = false;\n _this.diffY = 0;\n _this.parentScrollX = 0;\n _this.parentScrollY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n var handler = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler);\n }\n else {\n EventHandler.add(ele || this.element, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler, this);\n }\n };\n /* istanbul ignore next */\n Draggable.prototype.mobileInitialize = function (evt) {\n var _this = this;\n var target = evt.currentTarget;\n this.tapHoldTimer = setTimeout(function () {\n _this.externalInitialize = true;\n _this.removeTapholdTimer();\n _this.initialize(evt, target);\n }, this.tapHoldThreshold);\n EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.removeTapholdTimer, this);\n EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.removeTapholdTimer, this);\n };\n /* istanbul ignore next */\n Draggable.prototype.removeTapholdTimer = function () {\n clearTimeout(this.tapHoldTimer);\n EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.removeTapholdTimer);\n EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.removeTapholdTimer);\n };\n /* istanbul ignore next */\n Draggable.prototype.getScrollableParent = function (element, axis) {\n var scroll = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' };\n var client = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' };\n if (isNullOrUndefined(element)) {\n return null;\n }\n if (element[scroll[\"\" + axis]] > element[client[\"\" + axis]]) {\n if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) {\n if (axis === 'vertical') {\n this.parentScrollY = this.parentScrollY +\n (this.parentScrollY === 0 ? element.scrollTop : element.scrollTop - this.parentScrollY);\n this.tempScrollHeight = element.scrollHeight;\n }\n else {\n this.parentScrollX = this.parentScrollX +\n (this.parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - this.parentScrollX);\n this.tempScrollWidth = element.scrollWidth;\n }\n if (!isNullOrUndefined(element)) {\n return this.getScrollableParent(element.parentNode, axis);\n }\n else {\n return element;\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n };\n Draggable.prototype.getScrollableValues = function () {\n this.parentScrollX = 0;\n this.parentScrollY = 0;\n var isModalDialog = this.element.classList.contains('e-dialog') && this.element.classList.contains('e-dlg-modal');\n var verticalScrollParent = this.getScrollableParent(this.element.parentNode, 'vertical');\n var horizontalScrollParent = this.getScrollableParent(this.element.parentNode, 'horizontal');\n };\n Draggable.prototype.initialize = function (evt, curTarget) {\n this.currentStateTarget = evt.target;\n if (this.isDragStarted()) {\n return;\n }\n else {\n this.isDragStarted(true);\n this.externalInitialize = false;\n }\n this.target = (evt.currentTarget || curTarget);\n this.dragProcessStarted = false;\n if (this.abort) {\n var abortSelectors = this.abort;\n if (typeof abortSelectors === 'string') {\n abortSelectors = [abortSelectors];\n }\n for (var i = 0; i < abortSelectors.length; i++) {\n if (!isNullOrUndefined(closest(evt.target, abortSelectors[parseInt(i.toString(), 10)]))) {\n /* istanbul ignore next */\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n return;\n }\n }\n }\n if (this.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') {\n evt.preventDefault();\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.getScrollableValues();\n if (evt.clientX === evt.pageX) {\n this.parentScrollX = 0;\n }\n if (evt.clientY === evt.pageY) {\n this.parentScrollY = 0;\n }\n this.relativeXPosition = intCoord.pageX - (pos.left + this.parentScrollX);\n this.relativeYPosition = intCoord.pageY - (pos.top + this.parentScrollY);\n }\n if (this.externalInitialize) {\n this.intDragStart(evt);\n }\n else {\n EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDestroy, this);\n }\n this.toggleEvents(true);\n if (evt.type !== 'touchstart' && this.isPreventSelect) {\n document.body.classList.add('e-prevent-select');\n }\n this.externalInitialize = false;\n EventHandler.trigger(document.documentElement, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n this.removeTapholdTimer();\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10)\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n /* istanbul ignore next */\n if (this.isReplaceDragEle) {\n element = this.currentStateCheck(evt.target, element);\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if ((distance >= this.distance || this.externalInitialize)) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n if (isChangeTouch) {\n evt.preventDefault();\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n var args = {\n event: evt,\n element: element,\n target: curTarget,\n bindEvents: isBlazor() ? this.bindDragEvents.bind(this) : null,\n dragElement: dragTargetElement\n };\n this.trigger('dragStart', args);\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n this.getScrollableValues();\n // when drag element has margin-top\n var styles = getComputedStyle(element);\n var marginTop = parseFloat(styles.marginTop);\n /* istanbul ignore next */\n if (this.clone && marginTop !== 0) {\n pos.top += marginTop;\n }\n this.eleTop = !isNaN(parseFloat(styles.top)) ? parseFloat(styles.top) - this.offset.top : 0;\n /* istanbul ignore next */\n // if (this.eleTop > 0) {\n // pos.top += this.eleTop;\n // }\n if (this.enableScrollHandler && !this.clone) {\n pos.top -= this.parentScrollY;\n pos.left -= this.parentScrollX;\n }\n var posValue = this.getProcessedPositionValue({\n top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px'\n });\n if (this.dragArea && typeof this.dragArea !== 'string' && this.dragArea.classList.contains('e-kanban-content') && this.dragArea.style.position === 'relative') {\n pos.top += this.dragArea.scrollTop;\n }\n this.dragElePosition = { top: pos.top, left: pos.left };\n setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));\n EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDestroy);\n if (!isBlazor()) {\n this.bindDragEvents(dragTargetElement);\n }\n }\n };\n Draggable.prototype.bindDragEvents = function (dragTargetElement) {\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n }\n };\n Draggable.prototype.elementInViewport = function (el) {\n this.top = el.offsetTop;\n this.left = el.offsetLeft;\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n while (el.offsetParent) {\n el = el.offsetParent;\n this.top += el.offsetTop;\n this.left += el.offsetLeft;\n }\n return (this.top >= window.pageYOffset &&\n this.left >= window.pageXOffset &&\n (this.top + this.height) <= (window.pageYOffset + window.innerHeight) &&\n (this.left + this.width) <= (window.pageXOffset + window.innerWidth));\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n if (this.clone && evt.changedTouches && Browser.isDevice && Browser.isTouch) {\n evt.preventDefault();\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n var flag = true;\n if (this.hoverObject) {\n if (this.hoverObject.instance !== eleObj.instance) {\n this.triggerOutFunction(evt, eleObj);\n }\n else {\n flag = false;\n }\n }\n if (flag) {\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intOver(evt, eleObj.target);\n this.hoverObject = eleObj;\n }\n }\n else if (this.hoverObject) {\n this.triggerOutFunction(evt, eleObj);\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n var styles = getComputedStyle(helperElement);\n if (this.dragArea) {\n if (this.enableAutoScroll) {\n this.setDragArea();\n }\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft && dLeft > 0) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) {\n left = dLeft - (dLeft - this.dragLimit.right) + window.pageXOffset - helperWidth;\n }\n else {\n left = dLeft < 0 ? this.dragLimit.left : dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop && dTop > 0) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) {\n top = dTop - (dTop - this.dragLimit.bottom) + window.pageYOffset - helperHeight;\n }\n else {\n top = dTop < 0 ? this.dragLimit.top : dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n if (this.dragProcessStarted) {\n if (isNullOrUndefined(top)) {\n top = this.prevTop;\n }\n if (isNullOrUndefined(left)) {\n left = this.prevLeft;\n }\n }\n var draEleTop;\n var draEleLeft;\n if (this.helperElement.classList.contains('e-treeview')) {\n if (this.dragArea) {\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - this.borderWidth.top);\n draEleLeft = (left - iLeft) < 0 ? this.dragLimit.left : (left - this.borderWidth.left);\n }\n else {\n draEleTop = top - this.borderWidth.top;\n draEleLeft = left - this.borderWidth.left;\n }\n }\n else {\n if (this.dragArea) {\n var isDialogEle = this.helperElement.classList.contains('e-dialog');\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);\n draEleLeft = (left - iLeft) < 0 ? isDialogEle ? (left - (iLeft - this.borderWidth.left)) :\n this.dragElePosition.left : (left - iLeft);\n }\n else {\n draEleTop = top - iTop;\n draEleLeft = left - iLeft;\n }\n }\n var marginTop = parseFloat(getComputedStyle(this.element).marginTop);\n // when drag-element has margin-top\n /* istanbul ignore next */\n if (marginTop > 0) {\n if (this.clone) {\n draEleTop += marginTop;\n if (dTop < 0) {\n if ((marginTop + dTop) >= 0) {\n draEleTop = marginTop + dTop;\n }\n else {\n draEleTop -= marginTop;\n }\n }\n if (this.dragArea) {\n draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;\n }\n }\n if ((top - iTop) < 0) {\n if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {\n var tempDraEleTop = this.dragLimit.top + dTop - iTop;\n if ((tempDraEleTop + marginTop + iTop) < 0) {\n draEleTop -= marginTop + iTop;\n }\n else {\n draEleTop = tempDraEleTop;\n }\n }\n else {\n draEleTop -= marginTop + iTop;\n }\n }\n }\n if (this.dragArea && this.helperElement.classList.contains('e-treeview')) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n draEleTop = (draEleTop + helperHeight) > this.dragLimit.bottom ? (this.dragLimit.bottom - helperHeight) : draEleTop;\n }\n /* istanbul ignore next */\n // if(this.eleTop > 0) {\n // draEleTop += this.eleTop;\n // }\n if (this.enableScrollHandler && !this.clone) {\n draEleTop -= this.parentScrollY;\n draEleLeft -= this.parentScrollX;\n }\n if (this.dragArea && typeof this.dragArea !== 'string' && this.dragArea.classList.contains('e-kanban-content') && this.dragArea.style.position === 'relative') {\n draEleTop += this.dragArea.scrollTop;\n }\n var dragValue = this.getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' });\n if (this.isPreventScroll) {\n dragValue = this.getProcessedPositionValue({\n top: (this.position.top - this.parentClientRect.top - 2) + 'px',\n left: (this.position.left - this.parentClientRect.left - 2) + 'px'\n });\n }\n setStyleAttribute(helperElement, this.getDragPosition(dragValue));\n if (!this.elementInViewport(helperElement) && this.enableAutoScroll && !this.helperElement.classList.contains('e-treeview')) {\n this.helperElement.scrollIntoView();\n }\n var elements = document.querySelectorAll(':hover');\n if (this.enableAutoScroll && this.helperElement.classList.contains('e-treeview')) {\n if (elements.length === 0) {\n elements = this.getPathElements(evt);\n }\n var scrollParent = this.getScrollParent(elements, false);\n if (this.elementInViewport(this.helperElement)) {\n this.getScrollPosition(scrollParent, draEleTop);\n }\n else if (!this.elementInViewport(this.helperElement)) {\n elements = [].slice.call(document.querySelectorAll(':hover'));\n if (elements.length === 0) {\n elements = this.getPathElements(evt);\n }\n scrollParent = this.getScrollParent(elements, true);\n this.getScrollPosition(scrollParent, draEleTop);\n }\n }\n this.dragProcessStarted = true;\n this.prevLeft = left;\n this.prevTop = top;\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n Draggable.prototype.getScrollParent = function (node, reverse) {\n var nodeEl = reverse ? node.reverse() : node;\n var hasScroll;\n for (var i = nodeEl.length - 1; i >= 0; i--) {\n hasScroll = window.getComputedStyle(nodeEl[parseInt(i.toString(), 10)])['overflow-y'];\n if ((hasScroll === 'auto' || hasScroll === 'scroll')\n && nodeEl[parseInt(i.toString(), 10)].scrollHeight > nodeEl[parseInt(i.toString(), 10)].clientHeight) {\n return nodeEl[parseInt(i.toString(), 10)];\n }\n }\n hasScroll = window.getComputedStyle(document.scrollingElement)['overflow-y'];\n if (hasScroll === 'visible') {\n document.scrollingElement.style.overflow = 'auto';\n return document.scrollingElement;\n }\n };\n Draggable.prototype.getScrollPosition = function (nodeEle, draEleTop) {\n if (nodeEle && nodeEle === document.scrollingElement) {\n if ((nodeEle.clientHeight + document.scrollingElement.scrollTop - this.helperElement.clientHeight) < draEleTop\n && nodeEle.getBoundingClientRect().height + this.parentClientRect.top > draEleTop) {\n nodeEle.scrollTop += this.helperElement.clientHeight;\n }\n else if (nodeEle.scrollTop > draEleTop - this.helperElement.clientHeight) {\n nodeEle.scrollTop -= this.helperElement.clientHeight;\n }\n }\n else if (nodeEle && nodeEle !== document.scrollingElement) {\n var docScrollTop = document.scrollingElement.scrollTop;\n var helperClientHeight = this.helperElement.clientHeight;\n if ((nodeEle.clientHeight + nodeEle.getBoundingClientRect().top - helperClientHeight + docScrollTop) < draEleTop) {\n nodeEle.scrollTop += this.helperElement.clientHeight;\n }\n else if (nodeEle.getBoundingClientRect().top > (draEleTop - helperClientHeight - docScrollTop)) {\n nodeEle.scrollTop -= this.helperElement.clientHeight;\n }\n }\n };\n Draggable.prototype.getPathElements = function (evt) {\n var elementTop = evt.clientX > 0 ? evt.clientX : 0;\n var elementLeft = evt.clientY > 0 ? evt.clientY : 0;\n return document.elementsFromPoint(elementTop, elementLeft);\n };\n Draggable.prototype.triggerOutFunction = function (evt, eleObj) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n };\n Draggable.prototype.getDragPosition = function (dragValue) {\n var temp = extend({}, dragValue);\n if (this.axis) {\n if (this.axis === 'x') {\n delete temp.top;\n }\n else if (this.axis === 'y') {\n delete temp.left;\n }\n }\n return temp;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n this.dragProcessStarted = false;\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n /**\n * @param {MouseEvent | TouchEvent} evt ?\n * @returns {void}\n * @private\n */\n Draggable.prototype.intDestroy = function (evt) {\n this.dragProcessStarted = false;\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, this.intDrag);\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.isDragStarted = function (change) {\n if (change) {\n isDraggedObject.isDragged = !isDraggedObject.isDragged;\n }\n return isDraggedObject.isDragged;\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;\n eleHeightBound = ele.scrollHeight ? (this.dragArea && !isNullOrUndefined(this.helperElement) && this.helperElement.classList.contains('e-treeview')) ? ele.clientHeight : ele.scrollHeight : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[parseInt(i.toString(), 10)];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[\"\" + lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[\"\" + lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n if (this.dragArea && !isNullOrUndefined(this.helperElement) && this.helperElement.classList.contains('e-treeview')) {\n top = elementArea.top + document.scrollingElement.scrollTop;\n }\n else {\n top = elementArea.top;\n }\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.pointerEvents || '';\n var isPointer = evt.type.indexOf('pointer') !== -1 && Browser.info.name === 'safari' && parseInt(Browser.info.version, 10) > 12;\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1 || isPointer) {\n this.helperElement.style.pointerEvents = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.pointerEvents = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n /* istanbul ignore next */\n Draggable.prototype.currentStateCheck = function (ele, oldEle) {\n var elem;\n if (!isNullOrUndefined(this.currentStateTarget) && this.currentStateTarget !== ele) {\n elem = this.currentStateTarget;\n }\n else {\n elem = !isNullOrUndefined(oldEle) ? oldEle : ele;\n }\n return elem;\n };\n Draggable.prototype.getMousePosition = function (evt, isdragscroll) {\n var dragEle = evt.srcElement !== undefined ? evt.srcElement : evt.target;\n var intCoord = this.getCoordinates(evt);\n var pageX;\n var pageY;\n var isOffsetParent = isNullOrUndefined(dragEle.offsetParent);\n /* istanbul ignore next */\n if (isdragscroll) {\n pageX = this.clone ? intCoord.pageX :\n (intCoord.pageX + (isOffsetParent ? 0 : dragEle.offsetParent.scrollLeft)) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY :\n (intCoord.pageY + (isOffsetParent ? 0 : dragEle.offsetParent.scrollTop)) - this.relativeYPosition;\n }\n else {\n pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;\n }\n if (document.scrollingElement && (!isdragscroll && !this.clone)) {\n var ele = document.scrollingElement;\n var isVerticalScroll = ele.scrollHeight > 0 && ele.scrollHeight > ele.clientHeight && ele.scrollTop > 0;\n var isHorrizontalScroll = ele.scrollWidth > 0 && ele.scrollWidth > ele.clientWidth && ele.scrollLeft > 0;\n pageX = isHorrizontalScroll ? pageX - ele.scrollLeft : pageX;\n pageY = isVerticalScroll ? pageY - ele.scrollTop : pageY;\n }\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[\"\" + name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n var Draggable_1;\n __decorate$2([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate$2([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"isDragScroll\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"isReplaceDragEle\", void 0);\n __decorate$2([\n Property(true)\n ], Draggable.prototype, \"isPreventSelect\", void 0);\n __decorate$2([\n Property(false)\n ], Draggable.prototype, \"isPreventScroll\", void 0);\n __decorate$2([\n Event$1()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate$2([\n Event$1()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate$2([\n Event$1()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate$2([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate$2([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate$2([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate$2([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate$2([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate$2([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate$2([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n __decorate$2([\n Property(false)\n ], Draggable.prototype, \"enableAutoScroll\", void 0);\n __decorate$2([\n Property(false)\n ], Draggable.prototype, \"enableTapHold\", void 0);\n __decorate$2([\n Property(750)\n ], Draggable.prototype, \"tapHoldThreshold\", void 0);\n __decorate$2([\n Property(false)\n ], Draggable.prototype, \"enableScrollHandler\", void 0);\n Draggable = Draggable_1 = __decorate$2([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n}(Base));\n\nvar __extends$3 = (undefined && undefined.__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$3 = (undefined && undefined.__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/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @__PURE__ @class */ (function (_super) {\n __extends$3(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n var drag = this.dragData[this.scope];\n this.trigger('over', { event: event, target: element, dragData: drag });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n this.mouseOver = false;\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate$3([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate$3([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate$3([\n Event$1()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate$3([\n Event$1()\n ], Droppable.prototype, \"over\", void 0);\n __decorate$3([\n Event$1()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate$3([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\n\nvar __extends$4 = (undefined && undefined.__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$4 = (undefined && undefined.__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};\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Calendar = /** @__PURE__ @class */ (function (_super) {\n __extends(Calendar, _super);\n /**\n * Initialized new instance of Calendar Class.\n * Constructor for creating the widget\n *\n * @param {CalendarModel} options - Specifies the Calendar model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function Calendar(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n Calendar.prototype.render = function () {\n if (this.calendarMode === 'Islamic' && this.islamicModule === undefined) {\n throwError('Requires the injectable Islamic modules to render Calendar in Islamic mode');\n }\n if (this.isMultiSelection && typeof this.values === 'object' && !isNullOrUndefined(this.values) && this.values.length > 0) {\n var tempValues = [];\n var copyValues = [];\n for (var limit = 0; limit < this.values.length; limit++) {\n if (tempValues.indexOf(+this.values[limit]) === -1) {\n tempValues.push(+this.values[limit]);\n copyValues.push(this.values[limit]);\n }\n }\n this.setProperties({ values: copyValues }, true);\n for (var index = 0; index < this.values.length; index++) {\n if (!this.checkDateValue(this.values[index])) {\n if (typeof (this.values[index]) === 'string' && this.checkDateValue(new Date(this.checkValue(this.values[index])))) {\n var copyDate = new Date(this.checkValue(this.values[index]));\n this.values.splice(index, 1);\n this.values.splice(index, 0, copyDate);\n }\n else {\n this.values.splice(index, 1);\n }\n }\n }\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n this.previousValues = this.values.length;\n }\n this.validateDate();\n this.minMaxUpdate();\n if (this.getModuleName() === 'calendar') {\n this.setEnable(this.enabled);\n this.setClass(this.cssClass);\n }\n _super.prototype.render.call(this);\n if (this.getModuleName() === 'calendar') {\n var form = closest(this.element, 'form');\n if (form) {\n EventHandler.add(form, 'reset', this.formResetHandler.bind(this));\n }\n this.setTimeZone(this.serverTimezoneOffset);\n }\n this.renderComplete();\n };\n Calendar.prototype.setEnable = function (enable) {\n if (!enable) {\n addClass([this.element], DISABLED);\n }\n else {\n removeClass([this.element], DISABLED);\n }\n };\n Calendar.prototype.setClass = function (newCssClass, oldCssClass) {\n if (!isNullOrUndefined(oldCssClass)) {\n oldCssClass = (oldCssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newCssClass)) {\n newCssClass = (newCssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(oldCssClass) && oldCssClass !== '') {\n removeClass([this.element], oldCssClass.split(' '));\n }\n if (!isNullOrUndefined(newCssClass)) {\n addClass([this.element], newCssClass.split(' '));\n }\n };\n Calendar.prototype.isDayLightSaving = function () {\n var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();\n var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();\n return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));\n };\n Calendar.prototype.setTimeZone = function (offsetValue) {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var serverTimezoneDiff = offsetValue;\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;\n timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;\n this.value = new Date(this.value.getTime() + (timeZoneDiff * 60 * 60 * 1000));\n }\n };\n Calendar.prototype.formResetHandler = function () {\n this.setProperties({ value: null }, true);\n };\n Calendar.prototype.validateDate = function () {\n if (typeof this.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date(this.checkValue(this.value))) }, true); // persist the value property.\n }\n _super.prototype.validateDate.call(this, this.value);\n if (!isNullOrUndefined(this.value) && this.min <= this.max && this.value >= this.min && this.value <= this.max) {\n this.currentDate = new Date(this.checkValue(this.value));\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: null }, true);\n }\n };\n Calendar.prototype.minMaxUpdate = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.value) && this.value <= this.min && this.min <= this.max) {\n this.setProperties({ value: this.min }, true);\n this.changedArgs = { value: this.value };\n }\n else {\n if (!isNullOrUndefined(this.value) && this.value >= this.max && this.min <= this.max) {\n this.setProperties({ value: this.max }, true);\n this.changedArgs = { value: this.value };\n }\n }\n }\n if (this.getModuleName() !== 'calendar' && !isNullOrUndefined(this.value)) {\n if (!isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max) {\n _super.prototype.minMaxUpdate.call(this, this.min);\n }\n else {\n if (!isNullOrUndefined(this.value) && this.value > this.max && this.min <= this.max) {\n _super.prototype.minMaxUpdate.call(this, this.max);\n }\n }\n }\n else {\n _super.prototype.minMaxUpdate.call(this, this.value);\n }\n };\n Calendar.prototype.generateTodayVal = function (value) {\n var tempValue = new Date();\n if (!isNullOrUndefined(this.timezone)) {\n tempValue = _super.prototype.getDate.call(this, tempValue, this.timezone);\n }\n if (value && isNullOrUndefined(this.timezone)) {\n tempValue.setHours(value.getHours());\n tempValue.setMinutes(value.getMinutes());\n tempValue.setSeconds(value.getSeconds());\n tempValue.setMilliseconds(value.getMilliseconds());\n }\n else {\n tempValue = new Date(tempValue.getFullYear(), tempValue.getMonth(), tempValue.getDate(), 0, 0, 0, 0);\n }\n return tempValue;\n };\n Calendar.prototype.todayButtonClick = function (e) {\n if (this.showTodayButton) {\n var tempValue = this.generateTodayVal(this.value);\n this.setProperties({ value: tempValue }, true);\n this.isTodayClicked = true;\n this.todayButtonEvent = e;\n if (this.isMultiSelection) {\n var copyValues = this.copyValues(this.values);\n if (!_super.prototype.checkPresentDate.call(this, tempValue, this.values)) {\n copyValues.push(tempValue);\n this.setProperties({ values: copyValues });\n }\n }\n _super.prototype.todayButtonClick.call(this, e, new Date(+this.value));\n }\n };\n Calendar.prototype.keyActionHandle = function (e) {\n _super.prototype.keyActionHandle.call(this, e, this.value, this.isMultiSelection);\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Calendar.prototype.preRender = function () {\n var _this = this;\n this.changeHandler = function (e) {\n _this.triggerChange(e);\n };\n this.checkView();\n _super.prototype.preRender.call(this, this.value);\n };\n /**\n * @returns {void}\n * @deprecated\n */\n Calendar.prototype.createContent = function () {\n this.previousDate = this.value;\n this.previousDateTime = this.value;\n _super.prototype.createContent.call(this);\n };\n Calendar.prototype.minMaxDate = function (localDate) {\n return _super.prototype.minMaxDate.call(this, localDate);\n };\n Calendar.prototype.renderMonths = function (e, value, isCustomDate) {\n _super.prototype.renderMonths.call(this, e, this.value, isCustomDate);\n };\n Calendar.prototype.renderDays = function (currentDate, value, isMultiSelect, values, isCustomDate, e) {\n var tempDays = _super.prototype.renderDays.call(this, currentDate, this.value, this.isMultiSelection, this.values, isCustomDate, e);\n if (this.isMultiSelection) {\n _super.prototype.validateValues.call(this, this.isMultiSelection, this.values);\n }\n return tempDays;\n };\n Calendar.prototype.renderYears = function (e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderYears.call(this, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderYears(e, this.value);\n }\n };\n Calendar.prototype.renderDecades = function (e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderDecades.call(this, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderDecade(e, this.value);\n }\n };\n Calendar.prototype.renderTemplate = function (elements, count, classNm, e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderTemplate.call(this, elements, count, classNm, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderTemplate(elements, count, classNm, e, this.value);\n }\n this.changedArgs = { value: this.value, values: this.values };\n e && e.type === 'click' && e.currentTarget.classList.contains(OTHERMONTH) ? this.changeHandler(e) : this.changeHandler();\n };\n Calendar.prototype.clickHandler = function (e) {\n var eve = e.currentTarget;\n this.isPopupClicked = true;\n if (eve.classList.contains(OTHERMONTH)) {\n if (this.isMultiSelection) {\n var copyValues = this.copyValues(this.values);\n if (copyValues.toString().indexOf(this.getIdValue(e, null).toString()) === -1) {\n copyValues.push(this.getIdValue(e, null));\n this.setProperties({ values: copyValues }, true);\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n else {\n this.previousDates = true;\n }\n }\n else {\n this.setProperties({ value: this.getIdValue(e, null) }, true);\n }\n }\n var storeView = this.currentView();\n _super.prototype.clickHandler.call(this, e, this.value);\n if (this.isMultiSelection && this.currentDate !== this.value &&\n !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0]) && storeView === 'Year') {\n this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);\n }\n };\n Calendar.prototype.switchView = function (view, e, isMultiSelection, isCustomDate) {\n _super.prototype.switchView.call(this, view, e, this.isMultiSelection, isCustomDate);\n };\n /**\n * To get component name\n *\n * @returns {string} Return the component name.\n * @private\n */\n Calendar.prototype.getModuleName = function () {\n _super.prototype.getModuleName.call(this);\n return 'calendar';\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained upon browser refresh.\n *\n * @returns {string}\n */\n Calendar.prototype.getPersistData = function () {\n _super.prototype.getPersistData.call(this);\n var keyEntity = ['value', 'values'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Called internally if any of the property value changed.\n *\n * @param {CalendarModel} newProp - Returns the dynamic property value of the component.\n * @param {CalendarModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n Calendar.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.effect = '';\n this.rangeValidation(this.min, this.max);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n if (this.isDateSelected) {\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: new Date(this.checkValue(newProp.value)) }, true);\n }\n else {\n newProp.value = new Date(this.checkValue(newProp.value));\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: oldProp.value }, true);\n }\n this.update();\n }\n break;\n case 'values':\n if (this.isDateSelected) {\n if (typeof newProp.values === 'string' || typeof newProp.values === 'number') {\n this.setProperties({ values: null }, true);\n }\n else {\n var copyValues = this.copyValues(this.values);\n for (var index = 0; index < copyValues.length; index++) {\n var tempDate = copyValues[index];\n if (this.checkDateValue(tempDate) && !_super.prototype.checkPresentDate.call(this, tempDate, copyValues)) {\n copyValues.push(tempDate);\n }\n }\n this.setProperties({ values: copyValues }, true);\n if (this.values.length > 0) {\n this.setProperties({ value: newProp.values[newProp.values.length - 1] }, true);\n }\n }\n this.validateValues(this.isMultiSelection, this.values);\n this.update();\n }\n break;\n case 'isMultiSelection':\n if (this.isDateSelected) {\n this.setProperties({ isMultiSelection: newProp.isMultiSelection }, true);\n this.update();\n }\n break;\n case 'enabled':\n this.setEnable(this.enabled);\n break;\n case 'cssClass':\n if (this.getModuleName() === 'calendar') {\n this.setClass(newProp.cssClass, oldProp.cssClass);\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp, this.isMultiSelection, this.values);\n }\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n Calendar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'calendar') {\n this.changedArgs = null;\n var form = closest(this.element, 'form');\n if (form) {\n EventHandler.remove(form, 'reset', this.formResetHandler.bind(this));\n }\n }\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n *\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @param {boolean} isCustomDate - Specifies whether the calendar is rendered with custom today date or not.\n * @returns {void}\n * @deprecated\n */\n Calendar.prototype.navigateTo = function (view, date, isCustomDate) {\n this.minMaxUpdate();\n _super.prototype.navigateTo.call(this, view, date, isCustomDate);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the current view of the Calendar.\n *\n * @returns {string}\n * @deprecated\n */\n Calendar.prototype.currentView = function () {\n return _super.prototype.currentView.call(this);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * This method is used to add the single or multiple dates to the values property of the Calendar.\n *\n * @param {Date | Date[]} dates - Specifies the date or dates to be added to the values property of the Calendar.\n * @returns {void}\n * @deprecated\n */\n Calendar.prototype.addDate = function (dates) {\n if (typeof dates !== 'string' && typeof dates !== 'number') {\n var copyValues = this.copyValues(this.values);\n if (typeof dates === 'object' && (dates).length > 0) {\n var tempDates = dates;\n for (var i = 0; i < tempDates.length; i++) {\n if (this.checkDateValue(tempDates[i]) && !_super.prototype.checkPresentDate.call(this, tempDates[i], copyValues)) {\n if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {\n copyValues.push(tempDates[i]);\n }\n else {\n copyValues = [new Date(+tempDates[i])];\n }\n }\n }\n }\n else {\n if (this.checkDateValue(dates) && !_super.prototype.checkPresentDate.call(this, dates, copyValues)) {\n if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {\n copyValues.push((dates));\n }\n else {\n copyValues = [new Date(+dates)];\n }\n }\n }\n this.setProperties({ values: copyValues }, true);\n if (this.isMultiSelection) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.validateValues(this.isMultiSelection, copyValues);\n this.update();\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler();\n }\n };\n /**\n * This method is used to remove the single or multiple dates from the values property of the Calendar.\n *\n * @param {Date | Date[]} dates - Specifies the date or dates which need to be removed from the values property of the Calendar.\n * @returns {void}\n * @deprecated\n */\n Calendar.prototype.removeDate = function (dates) {\n if (typeof dates !== 'string' && typeof dates !== 'number' && !isNullOrUndefined(this.values) && this.values.length > 0) {\n var copyValues = this.copyValues(this.values);\n if (typeof dates === 'object' && ((dates).length > 0)) {\n var tempDates = dates;\n for (var index = 0; index < tempDates.length; index++) {\n for (var i = 0; i < copyValues.length; i++) {\n if (+copyValues[i] === +tempDates[index]) {\n copyValues.splice(i, 1);\n }\n }\n }\n }\n else {\n for (var i = 0; i < copyValues.length; i++) {\n if (+copyValues[i] === +dates) {\n copyValues.splice(i, 1);\n }\n }\n }\n this.setProperties({ values: copyValues }, false);\n this.update();\n if (this.isMultiSelection) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler();\n }\n };\n /**\n * To set custom today date in calendar\n *\n * @param {Date} date - Specifies date value to be set.\n * @private\n * @returns {void}\n */\n Calendar.prototype.setTodayDate = function (date) {\n var todayDate = new Date(+date);\n this.setProperties({ value: todayDate }, true);\n _super.prototype.todayButtonClick.call(this, null, todayDate, true);\n };\n Calendar.prototype.update = function () {\n this.validateDate();\n this.minMaxUpdate();\n _super.prototype.setValueUpdate.call(this);\n };\n Calendar.prototype.selectDate = function (e, date, element) {\n _super.prototype.selectDate.call(this, e, date, element, this.isMultiSelection, this.values);\n if (this.isMultiSelection && !isNullOrUndefined(this.values) && this.values.length > 0) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Calendar.prototype.changeEvent = function (e) {\n if ((this.value && this.value.valueOf()) !== (this.previousDate && +this.previousDate.valueOf())\n || this.isMultiSelection) {\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', this.changedArgs);\n }\n this.previousDate = new Date(+this.value);\n }\n };\n Calendar.prototype.triggerChange = function (e) {\n if (!isNullOrUndefined(this.todayButtonEvent) && this.isTodayClicked) {\n e = this.todayButtonEvent;\n this.isTodayClicked = false;\n }\n this.changedArgs.event = e || null;\n this.changedArgs.isInteracted = !isNullOrUndefined(e);\n if (!isNullOrUndefined(this.value)) {\n this.setProperties({ value: this.value }, true);\n }\n // eslint-disable-next-line\n if (!this.isMultiSelection && +this.value !== Number.NaN && (!isNullOrUndefined(this.value) &&\n !isNullOrUndefined(this.previousDate) || this.previousDate === null\n && !isNaN(+this.value))) {\n this.changeEvent(e);\n }\n else if (!isNullOrUndefined(this.values) && this.previousValues !== this.values.length) {\n this.changeEvent(e);\n this.previousValues = this.values.length;\n }\n };\n __decorate([\n Property(null)\n ], Calendar.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], Calendar.prototype, \"values\", void 0);\n __decorate([\n Property(false)\n ], Calendar.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"change\", void 0);\n Calendar = __decorate([\n NotifyPropertyChanges\n ], Calendar);\n return Calendar;\n}(CalendarBase));\n\n/**\n *\n */\n//class constant defination.\nvar OTHERMONTH$1 = 'e-other-month';\nvar YEAR$1 = 'e-year';\nvar MONTH$1 = 'e-month';\nvar DECADE$1 = 'e-decade';\nvar DISABLED$1 = 'e-disabled';\nvar OVERLAY$1 = 'e-overlay';\nvar WEEKEND$1 = 'e-weekend';\nvar WEEKNUMBER$1 = 'e-week-number';\nvar SELECTED$1 = 'e-selected';\nvar FOCUSEDDATE$1 = 'e-focused-date';\nvar OTHERMONTHROW$1 = 'e-month-hide';\nvar TODAY$1 = 'e-today';\nvar LINK$1 = 'e-day';\nvar CELL$1 = 'e-cell';\nvar dayMilliSeconds$1 = 86400000;\nvar minDecade = 2060;\nvar maxDecade = 2069;\nvar Islamic = /** @__PURE__ @class */ (function () {\n function Islamic(instance) {\n this.calendarInstance = instance;\n }\n Islamic.prototype.getModuleName = function () {\n return 'islamic';\n };\n Islamic.prototype.islamicTitleUpdate = function (date, view) {\n var globalize = new Internationalization(this.calendarInstance.locale);\n switch (view) {\n case 'days':\n this.calendarInstance.headerTitleElement.textContent = globalize.formatDate(date, { type: 'dateTime', format: 'MMMMyyyy', calendar: 'islamic' });\n break;\n case 'months':\n this.calendarInstance.headerTitleElement.textContent = globalize.formatDate(date, { type: 'dateTime', format: 'yyyy', calendar: 'islamic' });\n }\n };\n Islamic.prototype.islamicRenderDays = function (currentDate, value, multiSelection, values) {\n var tdEles = [];\n var cellsCount = 42;\n var localDate = new Date(this.islamicInValue(currentDate));\n var minMaxDate;\n this.islamicTitleUpdate(currentDate, 'days');\n var islamicDate = this.getIslamicDate(localDate);\n var gregorianObject = this.toGregorian(islamicDate.year, islamicDate.month, 1);\n var currentMonth = islamicDate.month;\n localDate = gregorianObject;\n while (localDate.getDay() !== this.calendarInstance.firstDayOfWeek) {\n this.calendarInstance.setStartDate(localDate, -1 * dayMilliSeconds$1);\n }\n for (var day = 0; day < cellsCount; ++day) {\n var weekEle = this.calendarInstance.createElement('td', { className: CELL$1 });\n var weekAnchor = this.calendarInstance.createElement('span');\n if (day % 7 === 0 && this.calendarInstance.weekNumber) {\n weekAnchor.textContent = '' + this.calendarInstance.getWeek(localDate);\n weekEle.appendChild(weekAnchor);\n addClass([weekEle], '' + WEEKNUMBER$1);\n tdEles.push(weekEle);\n }\n minMaxDate = new Date(+localDate);\n localDate = this.calendarInstance.minMaxDate(localDate);\n var dateFormatOptions = { type: 'dateTime', skeleton: 'full', calendar: 'islamic' };\n var date = this.calendarInstance.globalize.parseDate(this.calendarInstance.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);\n var tdEle = this.islamicDayCell(localDate);\n var title = this.calendarInstance.globalize.formatDate(localDate, { type: 'date', skeleton: 'full', calendar: 'islamic' });\n var dayLink = this.calendarInstance.createElement('span');\n dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'date', skeleton: 'd', calendar: 'islamic' });\n var disabled = (this.calendarInstance.min > localDate) || (this.calendarInstance.max < localDate);\n if (disabled) {\n addClass([tdEle], DISABLED$1);\n addClass([tdEle], OVERLAY$1);\n }\n else {\n dayLink.setAttribute('title', '' + title);\n }\n var hijriMonthObject = this.getIslamicDate(localDate);\n if (currentMonth !== hijriMonthObject.month) {\n addClass([tdEle], OTHERMONTH$1);\n }\n if (localDate.getDay() === 0 || localDate.getDay() === 6) {\n addClass([tdEle], WEEKEND$1);\n }\n tdEle.appendChild(dayLink);\n this.calendarInstance.renderDayCellArgs = {\n date: localDate,\n isDisabled: false,\n element: tdEle,\n isOutOfRange: disabled\n };\n var argument = this.calendarInstance.renderDayCellArgs;\n this.calendarInstance.renderDayCellEvent(argument);\n if (argument.isDisabled) {\n if (this.calendarInstance.isMultiSelection) {\n if (!isNullOrUndefined(this.calendarInstance.values) && this.calendarInstance.values.length > 0) {\n for (var index = 0; index < values.length; index++) {\n var localDateString = +new Date(this.calendarInstance.globalize.formatDate(argument.date, { type: 'date', skeleton: 'yMd', calendar: 'islamic' }));\n var tempDateString = +new Date(this.calendarInstance.globalize.formatDate(this.calendarInstance.values[index], { type: 'date', skeleton: 'yMd', calendar: 'islamic' }));\n if (localDateString === tempDateString) {\n this.calendarInstance.values.splice(index, 1);\n index = -1;\n }\n }\n }\n }\n else if (value && +value === +argument.date) {\n this.calendarInstance.setProperties({ value: null }, true);\n }\n }\n if (this.calendarInstance.renderDayCellArgs.isDisabled && !tdEle.classList.contains(SELECTED$1)) {\n addClass([tdEle], DISABLED$1);\n addClass([tdEle], OVERLAY$1);\n if (+this.calendarInstance.renderDayCellArgs.date === +this.calendarInstance.todayDate) {\n this.calendarInstance.todayDisabled = true;\n }\n }\n var otherMnthBool = tdEle.classList.contains(OTHERMONTH$1);\n var disabledCls = tdEle.classList.contains(DISABLED$1);\n if (!disabledCls) {\n EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);\n }\n if (this.calendarInstance.isMultiSelection && !isNullOrUndefined(this.calendarInstance.values) &&\n !otherMnthBool && !disabledCls) {\n for (var tempValue = 0; tempValue < this.calendarInstance.values.length; tempValue++) {\n var localDateString = this.calendarInstance.globalize.formatDate(localDate, { type: 'date', skeleton: 'short', calendar: 'islamic' });\n var tempDateString = this.calendarInstance.globalize.formatDate(this.calendarInstance.values[tempValue], { type: 'date', skeleton: 'short', calendar: 'islamic' });\n if (localDateString === tempDateString &&\n this.calendarInstance.getDateVal(localDate, this.calendarInstance.values[tempValue])) {\n addClass([tdEle], SELECTED$1);\n }\n else {\n this.calendarInstance.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n }\n if (this.calendarInstance.values.length <= 0) {\n this.calendarInstance.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n }\n else if (!otherMnthBool && !disabledCls && this.calendarInstance.getDateVal(localDate, value)) {\n addClass([tdEle], SELECTED$1);\n }\n else {\n this.calendarInstance.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n if (date.getDate() === new Date().getDate() && date.getMonth() === new Date().getMonth()) {\n if (date.getFullYear() === new Date().getFullYear()) {\n addClass([tdEle], TODAY$1);\n }\n }\n localDate = new Date(+minMaxDate);\n tdEles.push(this.calendarInstance.renderDayCellArgs.element);\n this.calendarInstance.addDay(localDate, 1, null, this.calendarInstance.max, this.calendarInstance.min);\n }\n return tdEles;\n };\n Islamic.prototype.islamicIconHandler = function () {\n new Date(this.islamicInValue(this.calendarInstance.currentDate)).setDate(1);\n var date = new Date(this.islamicInValue(this.calendarInstance.currentDate));\n switch (this.calendarInstance.currentView()) {\n case 'Month':\n {\n var prevMonthCompare = this.islamicCompareMonth(date, this.calendarInstance.min) < 1;\n var nextMonthCompare = this.islamicCompareMonth(date, this.calendarInstance.max) > -1;\n this.calendarInstance.previousIconHandler(prevMonthCompare);\n this.calendarInstance.nextIconHandler(nextMonthCompare);\n }\n break;\n case 'Year':\n {\n var prevYearCompare = this.hijriCompareYear(date, this.calendarInstance.min) < 1;\n var nextYearCompare = this.hijriCompareYear(date, this.calendarInstance.max) > -1;\n this.calendarInstance.previousIconHandler(prevYearCompare);\n this.calendarInstance.nextIconHandler(nextYearCompare);\n }\n break;\n case 'Decade': {\n var startIslamicYear = 1361;\n var gregorianValue = HijriParser.toGregorian(startIslamicYear, 1, 1);\n var prevDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.min) < 1;\n var nextDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.max) > -1;\n prevDecadeCompare = HijriParser.toGregorian(this.calendarInstance.headerTitleElement.textContent.split('-')[0].trim(), 1, 1).getFullYear() === gregorianValue.getFullYear() ? true : prevDecadeCompare;\n this.calendarInstance.previousIconHandler(prevDecadeCompare);\n this.calendarInstance.nextIconHandler(nextDecadeCompare);\n }\n }\n };\n Islamic.prototype.islamicNext = function () {\n this.calendarInstance.effect = '';\n var view = this.calendarInstance.getViewNumber(this.calendarInstance.currentView());\n var islamicDate = this.getIslamicDate(this.calendarInstance.currentDate);\n switch (this.calendarInstance.currentView()) {\n case 'Year':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year + 1, islamicDate.month, 1);\n this.calendarInstance.switchView(view);\n break;\n case 'Month':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year, islamicDate.month + 1, 1);\n this.calendarInstance.switchView(view);\n break;\n case 'Decade':\n this.calendarInstance.nextIconClicked = true;\n if (islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1) {\n islamicDate.year = islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1 ? islamicDate.year + 1 : islamicDate.year;\n }\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year + 10, islamicDate.month, 1);\n this.calendarInstance.switchView(view);\n break;\n }\n };\n Islamic.prototype.islamicPrevious = function () {\n var currentView = this.calendarInstance.getViewNumber(this.calendarInstance.currentView());\n this.calendarInstance.effect = '';\n var islamicDate = this.getIslamicDate(this.calendarInstance.currentDate);\n switch (this.calendarInstance.currentView()) {\n case 'Month':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year, islamicDate.month - 1, 1);\n this.calendarInstance.switchView(currentView);\n break;\n case 'Year':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year - 1, islamicDate.month, 1);\n this.calendarInstance.switchView(currentView);\n break;\n case 'Decade':\n this.calendarInstance.previousIconClicked = true;\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year - 10, islamicDate.month - 1, 1);\n this.calendarInstance.switchView(currentView);\n break;\n }\n };\n Islamic.prototype.islamicRenderYears = function (e, value) {\n this.calendarInstance.removeTableHeadElement();\n var numCells = 4;\n var tdEles = [];\n var valueUtil = isNullOrUndefined(value);\n var curDate = new Date(this.islamicInValue(this.calendarInstance.currentDate));\n var localDate = curDate;\n var islamicDate = this.getIslamicDate(localDate);\n var gregorianObject = HijriParser.toGregorian(islamicDate.year, 1, 1);\n localDate = gregorianObject;\n var mon = islamicDate.month;\n var yr = islamicDate.year;\n var curYrs = islamicDate.year;\n var minYr = (this.getIslamicDate(this.calendarInstance.min)).year;\n var minMonth = (this.getIslamicDate(this.calendarInstance.min)).month;\n var maxYr = (this.getIslamicDate(this.calendarInstance.max)).year;\n var maxMonth = (this.getIslamicDate(this.calendarInstance.max)).month;\n this.islamicTitleUpdate(this.calendarInstance.currentDate, 'months');\n for (var month = 1; month <= 12; ++month) {\n var islamicDate_1 = this.getIslamicDate(localDate);\n var gregorianObject_1 = HijriParser.toGregorian(islamicDate_1.year, month, 1);\n localDate = gregorianObject_1;\n var tdEle = this.islamicDayCell(localDate);\n var dayLink = this.calendarInstance.createElement('span');\n var localMonth = (value &&\n (this.getIslamicDate(value)).month === (this.getIslamicDate(localDate)).month);\n var select = (value && (this.getIslamicDate(value)).year === yr && localMonth);\n dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'dateTime', format: 'MMM', calendar: 'islamic' });\n if ((this.calendarInstance.min && (curYrs < minYr || (month < minMonth && curYrs === minYr))) || (this.calendarInstance.max && (curYrs > maxYr || (month > maxMonth && curYrs >= maxYr)))) {\n addClass([tdEle], DISABLED$1);\n }\n else if (!valueUtil && select) {\n addClass([tdEle], SELECTED$1);\n }\n else {\n if ((this.getIslamicDate(localDate)).month === mon &&\n (this.getIslamicDate(this.calendarInstance.currentDate)).month === mon) {\n addClass([tdEle], FOCUSEDDATE$1);\n }\n }\n if (!tdEle.classList.contains(DISABLED$1)) {\n EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);\n }\n tdEle.appendChild(dayLink);\n tdEles.push(tdEle);\n }\n this.islamicRenderTemplate(tdEles, numCells, YEAR$1, e, value);\n };\n Islamic.prototype.islamicRenderDecade = function (e, value) {\n this.calendarInstance.removeTableHeadElement();\n var numCells = 4;\n var yearCell = 12;\n var tdEles = [];\n var localDate = new Date(this.islamicInValue(this.calendarInstance.currentDate));\n var islamicDate = this.getIslamicDate(localDate);\n var gregorianObject = HijriParser.toGregorian(islamicDate.year, 1, 1);\n localDate = gregorianObject;\n var localYr = localDate.getFullYear();\n var startYr = new Date(this.islamicInValue((localYr - localYr % 10)));\n var endYr = new Date(this.islamicInValue((localYr - localYr % 10 + (10 - 1))));\n var startFullYr = startYr.getFullYear();\n var endFullYr = endYr.getFullYear();\n var startHdrYr = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n var endHdrYr = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n if (this.calendarInstance.locale === 'ar') {\n startHdrYr = Number(startHdrYr.replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) { return String.fromCharCode(d.charCodeAt(0) - 1632 + 48); }));\n endHdrYr = Number(endHdrYr.replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) { return String.fromCharCode(d.charCodeAt(0) - 1632 + 48); }));\n }\n var splityear = this.calendarInstance.headerElement.textContent.split('-');\n if ((!isNullOrUndefined(e) && (splityear[0] !== startHdrYr) && e.action === 'home') ||\n (!isNullOrUndefined(e) && e.type === 'keydown' && e.action === 'end')) {\n startHdrYr = this.calendarInstance.headerElement.textContent.split('-')[0].trim();\n endHdrYr = this.calendarInstance.headerElement.textContent.split('-')[1].trim();\n }\n if (this.calendarInstance.islamicPreviousHeader) {\n startHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[0].trim();\n endHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[1].trim();\n this.calendarInstance.islamicPreviousHeader = null;\n }\n if (this.calendarInstance.previousIconClicked) {\n var i = 0;\n for (i = 0; i <= splityear.length; i++) {\n endHdrYr = endHdrYr - splityear[i] === 2 || splityear[i]\n - endHdrYr === 2 ? (parseInt(endHdrYr, 10) + 1).toString() :\n endHdrYr - splityear[i] === 3 || splityear[i] - endHdrYr === 3 ?\n (parseInt(endHdrYr, 10) + 2).toString() : endHdrYr - splityear[i] === 4 ||\n splityear[i] - endHdrYr === 4 ? (parseInt(endHdrYr, 10) + 3).toString() :\n endHdrYr - splityear[i] === 5 || splityear[i] - endHdrYr === 5 ?\n (parseInt(endHdrYr, 10) + 4).toString() : endHdrYr;\n if (endHdrYr - splityear[i] === 0 || splityear[i] - endHdrYr === 0) {\n endHdrYr = (parseInt(endHdrYr, 10) - 1).toString();\n }\n }\n if (endHdrYr - splityear[i] === 8 || splityear[i] - endHdrYr === 8) {\n endHdrYr = (parseInt(endHdrYr, 10) - 9).toString();\n startHdrYr = (parseInt(endHdrYr, 10) - 9).toString();\n }\n if (endHdrYr - splityear[i] === 7 || splityear[i] - endHdrYr === 7) {\n endHdrYr = (parseInt(endHdrYr, 10) - 8).toString();\n startHdrYr = (parseInt(endHdrYr, 10) - 9).toString();\n }\n startHdrYr = endHdrYr - startHdrYr === 10\n ? (parseInt(startHdrYr, 10) + 1).toString() : endHdrYr - startHdrYr === 11\n ? (parseInt(startHdrYr, 10) + 2).toString() : endHdrYr - startHdrYr === 12\n ? (parseInt(startHdrYr, 10) + 3).toString() : startHdrYr;\n if (endHdrYr - startHdrYr === 8) {\n startHdrYr = (parseInt(startHdrYr, 10) - 1).toString();\n }\n }\n if (this.calendarInstance.nextIconClicked) {\n for (var i = 0; i <= splityear.length; i++) {\n if (startHdrYr - splityear[i] === 0 || splityear[i] - startHdrYr === 0) {\n startHdrYr = (parseInt(startHdrYr, 10) + 1).toString();\n }\n if (startHdrYr - splityear[i] === 2 && startHdrYr > splityear[i].trim()) {\n startHdrYr = (parseInt(startHdrYr, 10) - 1).toString();\n }\n if (splityear[i] - startHdrYr === 1 && startHdrYr < splityear[i].trim()) {\n startHdrYr = (parseInt(startHdrYr, 10) + 2).toString();\n }\n }\n if (startHdrYr - this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim() > 1) {\n startHdrYr = (parseInt(this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim(), 10) + 1).toString();\n endHdrYr = (parseInt(startHdrYr, 10) + 9).toString();\n }\n endHdrYr = endHdrYr - startHdrYr === 10 ? (parseInt(endHdrYr, 10) - 1).toString() : endHdrYr;\n endHdrYr = endHdrYr - startHdrYr === 7\n ? (parseInt(endHdrYr, 10) + 2).toString() : endHdrYr - startHdrYr === 8\n ? (parseInt(endHdrYr, 10) + 1).toString() : endHdrYr;\n }\n if (this.calendarInstance.locale === 'ar') {\n var startHeaderYear = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n var endHeaderYear = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n this.calendarInstance.headerTitleElement.textContent = startHeaderYear + ' - ' + (endHeaderYear);\n }\n else {\n this.calendarInstance.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);\n }\n this.calendarInstance.nextIconClicked = this.calendarInstance.previousIconClicked = false;\n var year = (parseInt(startHdrYr, 10) - 2).toString();\n startFullYr = Math.round(parseInt(startHdrYr, 10) * 0.97 + 622);\n endFullYr = Math.round(parseInt(endHdrYr, 10) * 0.97 + 622);\n var startYear = Math.round(parseInt(year, 10) * 0.97 + 622);\n for (var rowCount = 1; rowCount <= yearCell; ++rowCount) {\n var year_1 = startYear + rowCount;\n localDate.setFullYear(year_1);\n localDate.setDate(1);\n localDate.setMonth(0);\n if ((this.getIslamicDate(localDate).year - islamicDate.year) > 1) {\n localDate.setMonth(1);\n rowCount = rowCount - 1;\n localDate.setFullYear(localDate.getFullYear() - 1);\n }\n islamicDate = this.getIslamicDate(localDate);\n var gregorianObject_2 = HijriParser.toGregorian(islamicDate.year, 1, 1);\n localDate = gregorianObject_2;\n if (islamicDate.year === parseInt(startHdrYr, 10) - 1 || islamicDate.year >= startHdrYr &&\n islamicDate.year <= endFullYr || islamicDate.year === parseInt(endHdrYr, 10) + 1) {\n var tdEle = this.islamicDayCell(localDate);\n attributes(tdEle, { 'role': 'gridcell' });\n var dayLink = this.calendarInstance.createElement('span');\n dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n if (islamicDate.year === parseInt(startHdrYr, 10) - 1 || (year_1 < startFullYr) ||\n (year_1 > endFullYr) && islamicDate.year !== parseInt(endHdrYr, 10)) {\n addClass([tdEle], OTHERMONTH$1);\n }\n else if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()\n || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {\n addClass([tdEle], DISABLED$1);\n }\n else if (!isNullOrUndefined(value) &&\n (this.getIslamicDate(localDate)).year ===\n (this.getIslamicDate(value)).year) {\n addClass([tdEle], SELECTED$1);\n }\n else {\n if (localDate.getFullYear() === this.calendarInstance.currentDate.getFullYear() &&\n !tdEle.classList.contains(DISABLED$1)) {\n addClass([tdEle], FOCUSEDDATE$1);\n }\n }\n if (!tdEle.classList.contains(DISABLED$1)) {\n EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);\n }\n tdEle.appendChild(dayLink);\n if ((!isNullOrUndefined(e) && e.action === 'home' && islamicDate.year.toString() === startHdrYr) || (!isNullOrUndefined(e) && e.action === 'end' && islamicDate.year.toString() === endHdrYr)) {\n addClass([tdEle], FOCUSEDDATE$1);\n }\n tdEles.push(tdEle);\n }\n }\n this.islamicRenderTemplate(tdEles, numCells, 'e-decade', e, value);\n };\n Islamic.prototype.islamicDayCell = function (localDate) {\n var dateFormatOptions = { skeleton: 'full', type: 'dateTime', calendar: 'islamic' };\n var formatDate = this.calendarInstance.globalize.formatDate(localDate, dateFormatOptions);\n var date = this.calendarInstance.globalize.parseDate(formatDate, dateFormatOptions);\n var value = date.valueOf();\n var attrs = {\n className: CELL$1, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false', 'role': 'gridcell' }\n };\n return this.calendarInstance.createElement('td', attrs);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Islamic.prototype.islamicRenderTemplate = function (elements, count, classNm, e, value) {\n var view = this.calendarInstance.getViewNumber(this.calendarInstance.currentView());\n var trEle;\n this.calendarInstance.tableBodyElement = this.calendarInstance.createElement('tbody');\n this.calendarInstance.table.appendChild(this.calendarInstance.tableBodyElement);\n removeClass([this.calendarInstance.contentElement, this.calendarInstance.headerElement], [MONTH$1, DECADE$1, YEAR$1]);\n addClass([this.calendarInstance.contentElement, this.calendarInstance.headerElement], [classNm]);\n var weekNumCell = 41;\n var numberCell = 35;\n var otherMonthCell = 6;\n var row = count;\n var rowCount = 0;\n for (var dayCell = 0; dayCell < Math.round(elements.length / count); ++dayCell) {\n trEle = this.calendarInstance.createElement('tr', { attrs: { 'role': 'row' } });\n for (rowCount = 0 + rowCount; rowCount < row; rowCount++) {\n if (!elements[rowCount].classList.contains('e-week-number') && !isNullOrUndefined(elements[rowCount].children[0])) {\n addClass([elements[rowCount].children[0]], [LINK$1]);\n rippleEffect(elements[rowCount].children[0], {\n duration: 600,\n isCenterRipple: true\n });\n }\n trEle.appendChild(elements[rowCount]);\n if (this.calendarInstance.weekNumber &&\n rowCount === otherMonthCell + 1 && elements[otherMonthCell + 1].classList.contains(OTHERMONTH$1)) {\n addClass([trEle], OTHERMONTHROW$1);\n }\n if (!this.calendarInstance.weekNumber\n && rowCount === otherMonthCell && elements[otherMonthCell].classList.contains(OTHERMONTH$1)) {\n addClass([trEle], OTHERMONTHROW$1);\n }\n if (this.calendarInstance.weekNumber) {\n if (rowCount === weekNumCell && elements[weekNumCell].classList.contains(OTHERMONTH$1)) {\n addClass([trEle], OTHERMONTHROW$1);\n }\n }\n else {\n if (rowCount === numberCell && elements[numberCell].classList.contains(OTHERMONTH$1)) {\n addClass([trEle], OTHERMONTHROW$1);\n }\n }\n }\n row = row + count;\n rowCount = rowCount + 0;\n this.calendarInstance.tableBodyElement.appendChild(trEle);\n }\n this.calendarInstance.table.querySelector('tbody').className = this.calendarInstance.effect;\n this.islamicIconHandler();\n if (view !== this.calendarInstance.getViewNumber(this.calendarInstance.currentView())\n || (view === 0 && view !== this.calendarInstance.getViewNumber(this.calendarInstance.currentView()))) {\n this.calendarInstance.navigateHandler(e);\n }\n this.calendarInstance.setAriaActiveDescendant();\n this.calendarInstance.changedArgs = { value: this.calendarInstance.value, values: this.calendarInstance.values };\n this.calendarInstance.changeHandler();\n };\n Islamic.prototype.islamicCompareMonth = function (start, end) {\n var hijriStart = (this.getIslamicDate(start));\n var hijriEnd = (this.getIslamicDate(end));\n var result;\n if (hijriStart.year > hijriEnd.year) {\n result = 1;\n }\n else if (hijriStart.year < hijriEnd.year) {\n result = -1;\n }\n else {\n result = hijriStart.month === hijriEnd.month ? 0 : hijriStart.month > hijriEnd.month ? 1 : -1;\n }\n return result;\n };\n Islamic.prototype.islamicCompare = function (startDate, endDate, modifier) {\n var hijriStart = this.getIslamicDate(startDate);\n var hijriEnd = this.getIslamicDate(endDate);\n var start = hijriEnd.year;\n var end;\n var result;\n end = start;\n result = 0;\n if (modifier) {\n start = start - start % modifier;\n end = start - start % modifier + modifier - 1;\n }\n if (hijriStart.year > end) {\n result = 1;\n }\n else if ((this.calendarInstance.currentView() === 'Decade') && hijriStart.year < start &&\n !((startDate.getFullYear() >= minDecade && startDate.getFullYear() <= maxDecade))) {\n result = -1;\n }\n else if (hijriStart.year < start && (this.calendarInstance.currentView() === 'Year')) {\n result = -1;\n }\n return result;\n };\n Islamic.prototype.getIslamicDate = function (date) {\n return (HijriParser.getHijriDate(date));\n };\n Islamic.prototype.toGregorian = function (year, month, date) {\n return HijriParser.toGregorian(year, month, date);\n };\n Islamic.prototype.hijriCompareYear = function (start, end) {\n return this.islamicCompare(start, end, 0);\n };\n Islamic.prototype.hijriCompareDecade = function (start, end) {\n return this.islamicCompare(start, end, 10);\n };\n Islamic.prototype.destroy = function () {\n this.calendarInstance = null;\n };\n Islamic.prototype.islamicInValue = function (inValue) {\n if (inValue instanceof Date) {\n return (inValue.toUTCString());\n }\n else {\n return ('' + inValue);\n }\n };\n return Islamic;\n}());\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar ROOT$1 = 'e-datepicker';\nvar LIBRARY = 'e-lib';\nvar CONTROL = 'e-control';\nvar POPUPWRAPPER = 'e-popup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar INPUTCONTAINER = 'e-input-group';\nvar INPUTFOCUS = 'e-input-focus';\nvar INPUTROOT = 'e-input';\nvar ERROR = 'e-error';\nvar ACTIVE = 'e-active';\nvar OVERFLOW = 'e-date-overflow';\nvar DATEICON = 'e-date-icon';\nvar ICONS = 'e-icons';\nvar OPENDURATION = 300;\nvar OFFSETVALUE = 4;\nvar SELECTED$2 = 'e-selected';\nvar FOCUSEDDATE$2 = 'e-focused-date';\nvar NONEDIT = 'e-non-edit';\nvar containerAttr = ['title', 'class', 'style'];\n/**\n * Represents the DatePicker component that allows user to select\n * or enter a date value.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar DatePicker = /** @__PURE__ @class */ (function (_super) {\n __extends$1(DatePicker, _super);\n /**\n * Constructor for creating the widget.\n *\n * @param {DatePickerModel} options - Specifies the DatePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DatePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isDateIconClicked = false;\n _this.isAltKeyPressed = false;\n _this.isInteracted = true;\n _this.invalidValueString = null;\n _this.checkPreviousValue = null;\n _this.maskedDateValue = '';\n _this.preventChange = false;\n _this.isIconClicked = false;\n _this.isDynamicValueChanged = false;\n _this.moduleName = _this.getModuleName();\n _this.isFocused = false;\n _this.isBlur = false;\n _this.isKeyAction = false;\n _this.datepickerOptions = options;\n return _this;\n }\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DatePicker.prototype.render = function () {\n this.initialize();\n this.bindEvents();\n if (this.floatLabelType !== 'Never') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n this.setTimeZone(this.serverTimezoneOffset);\n };\n DatePicker.prototype.setTimeZone = function (offsetValue) {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var serverTimezoneDiff = offsetValue;\n var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;\n timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;\n this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));\n this.updateInput();\n }\n };\n DatePicker.prototype.isDayLightSaving = function () {\n var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();\n var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();\n return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));\n };\n DatePicker.prototype.setAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.updateIconState();\n };\n DatePicker.prototype.updateIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [NONEDIT]);\n }\n else {\n addClass([this.inputWrapper.container], [NONEDIT]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [NONEDIT]);\n }\n };\n DatePicker.prototype.initialize = function () {\n this.checkInvalidValue(this.value);\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n this.createInput();\n this.updateHtmlAttributeToWrapper();\n this.setAllowEdit();\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {\n this.updateInput(true);\n this.updateInputValue(this.maskedDateValue);\n }\n else if (!this.enableMask) {\n this.updateInput(true);\n }\n this.previousElementValue = this.inputElement.value;\n this.previousDate = !isNullOrUndefined(this.value) ? new Date(+this.value) : null;\n this.inputElement.setAttribute('value', this.inputElement.value);\n this.inputValueCopy = this.value;\n };\n DatePicker.prototype.createInput = function () {\n var ariaAttrs = {\n 'aria-atomic': 'true', 'aria-expanded': 'false',\n 'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off',\n 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'\n };\n if (this.getModuleName() === 'datepicker') {\n var l10nLocale = { placeholder: this.placeholder };\n this.globalize = new Internationalization(this.locale);\n this.l10n = new L10n('datepicker', l10nLocale, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (this.fullScreenMode && Browser.isDevice) {\n this.cssClass += ' ' + 'e-popup-expand';\n }\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n var isBindClearAction = this.enableMask ? false : true;\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n bindClearAction: isBindClearAction,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [INPUTWRAPPER + ' ' + DATEICON + ' ' + ICONS]\n }, this.createElement);\n this.setWidth(this.width);\n if (this.inputElement.name !== '') {\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute('name'));\n }\n else {\n this.inputElement.setAttribute('name', '' + this.element.id);\n }\n attributes(this.inputElement, ariaAttrs);\n if (!this.inputElement.hasAttribute('aria-label')) {\n this.inputElement.setAttribute('aria-label', this.getModuleName());\n }\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.inputElement.tabIndex = -1;\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n Input.addAttributes({ 'aria-label': 'select', 'role': 'button' }, this.inputWrapper.buttons[0]);\n addClass([this.inputWrapper.container], DATEWRAPPER);\n };\n DatePicker.prototype.updateInput = function (isDynamic, isBlur) {\n if (isDynamic === void 0) { isDynamic = false; }\n if (isBlur === void 0) { isBlur = false; }\n var formatOptions;\n if (this.value && !this.isCalendar()) {\n this.disabledDates(isDynamic, isBlur);\n }\n if (isNaN(+new Date(this.checkValue(this.value)))) {\n this.setProperties({ value: null }, true);\n }\n if (this.strictMode) {\n //calls the Calendar processDate protected method to update the date value according to the strictMode true behaviour.\n _super.prototype.validateDate.call(this);\n this.minMaxUpdates();\n _super.prototype.minMaxUpdate.call(this);\n }\n if (!isNullOrUndefined(this.value)) {\n var dateValue = this.value;\n var dateString = void 0;\n var tempFormat = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(this.value, {\n format: tempFormat, type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(this.value, {\n format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n dateString = this.globalize.formatDate(this.value, formatOptions);\n }\n if ((+dateValue <= +this.max) && (+dateValue >= +this.min)) {\n this.updateInputValue(dateString);\n }\n else {\n var value = (+dateValue >= +this.max || !+this.value) || (!+this.value || +dateValue <= +this.min);\n if (!this.strictMode && value) {\n this.updateInputValue(dateString);\n }\n }\n }\n if (isNullOrUndefined(this.value) && this.strictMode) {\n if (!this.enableMask) {\n this.updateInputValue('');\n }\n else {\n this.updateInputValue(this.maskedDateValue);\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.updateInputValue(this.invalidValueString);\n }\n this.changedArgs = { value: this.value };\n this.errorClass();\n this.updateIconState();\n };\n DatePicker.prototype.minMaxUpdates = function () {\n if (!isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max && this.strictMode) {\n this.setProperties({ value: this.min }, true);\n this.changedArgs = { value: this.value };\n }\n else {\n if (!isNullOrUndefined(this.value) && this.value > this.max && this.min <= this.max && this.strictMode) {\n this.setProperties({ value: this.max }, true);\n this.changedArgs = { value: this.value };\n }\n }\n };\n DatePicker.prototype.checkStringValue = function (val) {\n var returnDate = null;\n var formatOptions = null;\n var formatDateTime = null;\n if (this.getModuleName() === 'datetimepicker') {\n var culture = new Internationalization(this.locale);\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };\n }\n else {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n returnDate = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(val), formatOptions));\n if (isNullOrUndefined(returnDate) && (this.getModuleName() === 'datetimepicker')) {\n returnDate = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(val), formatDateTime));\n }\n return returnDate;\n };\n DatePicker.prototype.checkInvalidValue = function (value) {\n if (!(value instanceof Date) && !isNullOrUndefined(value)) {\n var valueDate = null;\n var valueString = value;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n var formatOptions = null;\n var formatDateTime = null;\n if (this.getModuleName() === 'datetimepicker') {\n var culture = new Internationalization(this.locale);\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };\n }\n else {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n var invalid = false;\n if (typeof valueString !== 'string') {\n valueString = null;\n invalid = true;\n }\n else {\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n valueDate = this.checkStringValue(valueString);\n if (!valueDate) {\n var extISOString = null;\n var basicISOString = null;\n // eslint-disable-next-line\n extISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // eslint-disable-next-line\n basicISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOString.test(valueString) && !basicISOString.test(valueString))\n || (/^[a-zA-Z0-9- ]*$/).test(valueString) || isNaN(+new Date(this.checkValue(valueString)))) {\n invalid = true;\n }\n else {\n valueDate = new Date(valueString);\n }\n }\n }\n if (invalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n }\n else {\n this.setProperties({ value: valueDate }, true);\n }\n }\n };\n DatePicker.prototype.bindInputEvent = function () {\n if (!isNullOrUndefined(this.formatString) || this.enableMask) {\n if (this.enableMask || this.formatString.indexOf('y') === -1) {\n EventHandler.add(this.inputElement, 'input', this.inputHandler, this);\n }\n else {\n EventHandler.remove(this.inputElement, 'input', this.inputHandler);\n }\n }\n };\n DatePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateIconHandler, this);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);\n if (this.enableMask) {\n EventHandler.add(this.inputElement, 'keydown', this.keydownHandler, this);\n }\n this.bindInputEvent();\n // To prevent the twice triggering.\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.resetFormHandler, this);\n }\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardModules = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyActionHandle.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DatePicker.prototype.keydownHandler = function (e) {\n switch (e.code) {\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'ArrowUp':\n case 'ArrowDown':\n case 'Home':\n case 'End':\n case 'Backspace':\n case 'Delete':\n if (this.enableMask && !this.popupObj && !this.readonly) {\n if (e.code !== 'Delete' && e.code !== 'Backspace') {\n e.preventDefault();\n }\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: e\n });\n }\n break;\n }\n };\n DatePicker.prototype.unBindEvents = function () {\n if (!isNullOrUndefined(this.inputWrapper)) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dateIconHandler);\n }\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);\n if (this.enableMask) {\n EventHandler.remove(this.inputElement, 'keydown', this.keydownHandler);\n }\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);\n }\n };\n DatePicker.prototype.resetFormHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var value = this.inputElement.getAttribute('value');\n if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {\n value = '';\n this.inputValueCopy = null;\n this.inputElement.setAttribute('value', '');\n }\n this.setProperties({ value: this.inputValueCopy }, true);\n this.restoreValue();\n if (this.inputElement) {\n this.updateInputValue(value);\n this.errorClass();\n }\n }\n };\n DatePicker.prototype.restoreValue = function () {\n this.currentDate = this.value ? this.value : new Date();\n this.previousDate = this.value;\n this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.globalize.formatDate(this.inputValueCopy, {\n format: this.formatString, type: 'dateTime', skeleton: 'yMd'\n });\n };\n DatePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n DatePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n DatePicker.prototype.resetHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n this.clear(e);\n };\n DatePicker.prototype.mouseUpHandler = function (e) {\n if (this.enableMask) {\n e.preventDefault();\n this.notify('setMaskSelection', {\n module: 'MaskedDateTime'\n });\n }\n };\n DatePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n if (!this.enableMask) {\n this.updateInputValue('');\n }\n var clearedArgs = {\n event: event\n };\n this.trigger('cleared', clearedArgs);\n this.invalidValueString = '';\n this.updateInput();\n this.popupUpdate();\n this.changeEvent(event);\n if (this.enableMask) {\n this.notify('clearHandler', {\n module: 'MaskedDateTime'\n });\n }\n if (closest(this.element, 'form')) {\n var element = this.element;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n DatePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnDateIconClick');\n };\n DatePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DatePicker.prototype.dateIconHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n this.inputElement.blur();\n }\n e.preventDefault();\n if (!this.readonly) {\n if (this.isCalendar()) {\n this.hide(e);\n }\n else {\n this.isDateIconClicked = true;\n this.show(null, e);\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n addClass(this.inputWrapper.buttons, ACTIVE);\n }\n }\n this.isIconClicked = false;\n };\n DatePicker.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 if (!isNullOrUndefined(this.htmlAttributes[\"\" + key])) {\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValues = (this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValues !== '') {\n addClass([this.inputWrapper.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var setStyle = this.inputWrapper.container.getAttribute(key);\n if (!isNullOrUndefined(setStyle)) {\n if (setStyle.charAt(setStyle.length - 1) === ';') {\n setStyle = setStyle + this.htmlAttributes[\"\" + key];\n }\n else {\n setStyle = setStyle + ';' + this.htmlAttributes[\"\" + key];\n }\n }\n else {\n setStyle = this.htmlAttributes[\"\" + key];\n }\n this.inputWrapper.container.setAttribute(key, setStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n }\n };\n DatePicker.prototype.updateHtmlAttributeToElement = 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 if (containerAttr.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n DatePicker.prototype.updateCssClass = function (newCssClass, oldCssClass) {\n if (!isNullOrUndefined(oldCssClass)) {\n oldCssClass = (oldCssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newCssClass)) {\n newCssClass = (newCssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newCssClass, [this.inputWrapper.container], oldCssClass);\n if (this.popupWrapper) {\n Input.setCssClass(newCssClass, [this.popupWrapper], oldCssClass);\n }\n };\n DatePicker.prototype.calendarKeyActionHandle = function (e) {\n switch (e.action) {\n case 'escape':\n if (this.isCalendar()) {\n this.hide(e);\n }\n else {\n this.inputWrapper.container.children[this.index].blur();\n }\n break;\n case 'enter':\n if (!this.isCalendar()) {\n this.show(null, e);\n }\n else {\n if (+this.value !== +this.currentDate && !this.isCalendar()) {\n this.inputWrapper.container.children[this.index].focus();\n }\n }\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n break;\n }\n };\n DatePicker.prototype.inputFocusHandler = function () {\n this.isFocused = true;\n if (!this.enabled) {\n return;\n }\n if (this.enableMask && !this.inputElement.value && this.placeholder) {\n if (this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n this.inputElement.selectionStart = 0;\n this.inputElement.selectionEnd = this.inputElement.value.length;\n }\n }\n if (this.enableMask && this.showClearButton && this.inputElement && this.inputElement.value === this.maskedDateValue && this.inputWrapper && this.inputWrapper.clearButton && !this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) {\n this.inputWrapper.clearButton.classList.add('e-clear-icon-hide');\n }\n var focusArguments = {\n model: this\n };\n this.isDateIconClicked = false;\n this.trigger('focus', focusArguments);\n this.updateIconState();\n if (this.openOnFocus && !this.isIconClicked) {\n this.show();\n }\n };\n DatePicker.prototype.inputHandler = function (e) {\n this.isPopupClicked = false;\n if (this.enableMask) {\n if (!isNullOrUndefined(e) && !isNullOrUndefined(e.inputType) && e.inputType === 'insertFromPaste') {\n this.notify('maskPasteInputHandler', {\n module: 'MaskedDateTime'\n });\n }\n else {\n this.notify('inputHandler', {\n module: 'MaskedDateTime'\n });\n }\n }\n };\n DatePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.strictModeUpdate();\n if (this.inputElement.value === '' && isNullOrUndefined(this.value)) {\n this.invalidValueString = null;\n this.updateInputValue('');\n }\n this.isBlur = true;\n this.updateInput(false, true);\n this.isBlur = false;\n this.popupUpdate();\n this.changeTrigger(e);\n if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {\n if (this.inputElement.value === this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue('');\n }\n }\n this.errorClass();\n if (this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide(e);\n }\n if (this.getModuleName() === 'datepicker') {\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n if (this.isCalendar()) {\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.calendarKeyboardModules = new KeyboardEvents(this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: this.calendarKeyActionHandle.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n }\n this.isPopupClicked = false;\n };\n DatePicker.prototype.documentHandler = function (e) {\n if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||\n (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {\n e.preventDefault();\n }\n var target = e.target;\n if (!(closest(target, '.e-datepicker.e-popup-wrapper')) && !isNullOrUndefined(this.inputWrapper)\n && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)\n && (!target.classList.contains('e-day'))\n && (!target.classList.contains('e-dlg-overlay'))) {\n this.hide(e);\n this.focusOut();\n }\n else if (closest(target, '.e-datepicker.e-popup-wrapper')) {\n // Fix for close the popup when select the previously selected value.\n if (target.classList.contains('e-day')\n && !isNullOrUndefined(e.target.parentElement)\n && e.target.parentElement.classList.contains('e-selected')\n && closest(target, '.e-content')\n && closest(target, '.e-content').classList.contains('e-' + this.depth.toLowerCase())) {\n this.hide(e);\n }\n else if (closest(target, '.e-footer-container')\n && target.classList.contains('e-today')\n && target.classList.contains('e-btn')\n && (+new Date(+this.value) === +_super.prototype.generateTodayVal.call(this, this.value))) {\n this.hide(e);\n }\n }\n };\n DatePicker.prototype.inputKeyActionHandle = function (e) {\n var clickedView = this.currentView();\n switch (e.action) {\n case 'altUpArrow':\n this.isAltKeyPressed = false;\n this.hide(e);\n this.inputElement.focus();\n break;\n case 'altDownArrow':\n this.isAltKeyPressed = true;\n this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger(e);\n if (this.getModuleName() === 'datepicker') {\n this.show(null, e);\n }\n break;\n case 'escape':\n this.hide(e);\n break;\n case 'enter':\n this.strictModeUpdate();\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(e);\n this.errorClass();\n if (!this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide(e);\n }\n if (this.isCalendar()) {\n e.preventDefault();\n e.stopPropagation();\n }\n break;\n case 'tab':\n case 'shiftTab':\n {\n var start = this.inputElement.selectionStart;\n var end = this.inputElement.selectionEnd;\n if (this.enableMask && !this.popupObj && !this.readonly) {\n var length_1 = this.inputElement.value.length;\n if ((start === 0 && end === length_1) || (end !== length_1 && e.action === 'tab') || (start !== 0 && e.action === 'shiftTab')) {\n e.preventDefault();\n }\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: e\n });\n start = this.inputElement.selectionStart;\n end = this.inputElement.selectionEnd;\n }\n this.strictModeUpdate();\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(e);\n this.errorClass();\n if (this.enableMask) {\n this.inputElement.selectionStart = start;\n this.inputElement.selectionEnd = end;\n }\n if (e.action === 'tab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {\n e.preventDefault();\n this.headerTitleElement.focus();\n }\n if (e.action === 'shiftTab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide(e);\n }\n break;\n }\n default:\n this.defaultAction(e);\n // Fix for close the popup when select the previously selected value.\n if (e.action === 'select' && clickedView === this.depth) {\n this.hide(e);\n }\n }\n };\n DatePicker.prototype.defaultAction = function (e) {\n this.previousDate = ((!isNullOrUndefined(this.value) && new Date(+this.value)) || null);\n if (this.isCalendar()) {\n _super.prototype.keyActionHandle.call(this, e);\n if (this.isCalendar()) {\n attributes(this.inputElement, {\n 'aria-activedescendant': '' + this.setActiveDescendant()\n });\n }\n }\n };\n DatePicker.prototype.popupUpdate = function () {\n if ((isNullOrUndefined(this.value)) && (!isNullOrUndefined(this.previousDate)) ||\n (((this.getModuleName() !== 'datetimepicker') && (+this.value !== +this.previousDate)) || ((this.getModuleName() === 'datetimepicker') && (+this.value !== +this.previousDateTime)))) {\n if (this.popupObj) {\n if (this.popupObj.element.querySelectorAll('.' + SELECTED$2).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED$2), [SELECTED$2]);\n }\n }\n if (!isNullOrUndefined(this.value)) {\n if ((+this.value >= +this.min) && (+this.value <= +this.max)) {\n var targetdate = new Date(this.checkValue(this.value));\n _super.prototype.navigateTo.call(this, 'Month', targetdate);\n }\n }\n }\n };\n DatePicker.prototype.strictModeUpdate = function () {\n var format;\n var pattern = /^y/;\n var charPattern = /[^a-zA-Z]/;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n format = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n }\n else if (!pattern.test(this.formatString) || charPattern.test(this.formatString)) {\n format = isNullOrUndefined(this.formatString) ? this.formatString : this.formatString.replace('dd', 'd');\n }\n if (!isNullOrUndefined(format)) {\n var len = format.split('M').length - 1;\n if (len < 3) {\n format = format.replace('MM', 'M');\n }\n }\n else {\n format = this.formatString;\n }\n var dateOptions;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n dateOptions = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n dateOptions = formatOptions;\n }\n var date;\n if (typeof this.inputElement.value === 'string') {\n this.inputElement.value = this.inputElement.value.trim();\n }\n if ((this.getModuleName() === 'datetimepicker')) {\n if (this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions))) {\n date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), formatOptions);\n }\n }\n else {\n date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions);\n date = (!isNullOrUndefined(date) && isNaN(+date)) ? null : date;\n if (!isNullOrUndefined(this.formatString) && this.inputElement.value !== '' && this.strictMode) {\n if ((this.isPopupClicked || (!this.isPopupClicked && this.inputElement.value === this.previousElementValue))\n && this.formatString.indexOf('y') === -1) {\n date.setFullYear(this.value.getFullYear());\n }\n }\n }\n // EJ2-35061 - To prevent change event from triggering twice when using strictmode and format property\n if ((this.getModuleName() === 'datepicker') && (this.value && !isNaN(+this.value)) && date) {\n date.setHours(this.value.getHours(), this.value.getMinutes(), this.value.getSeconds(), this.value.getMilliseconds());\n }\n if (this.strictMode && date) {\n this.updateInputValue(this.globalize.formatDate(date, dateOptions));\n if (this.inputElement.value !== this.previousElementValue) {\n this.setProperties({ value: date }, true);\n }\n }\n else if (!this.strictMode) {\n if (this.inputElement.value !== this.previousElementValue) {\n this.setProperties({ value: date }, true);\n }\n }\n if (this.strictMode && !date && this.inputElement.value === (this.enableMask ? this.maskedDateValue : '')) {\n this.setProperties({ value: null }, true);\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: null }, true);\n }\n if (isNullOrUndefined(this.value)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n };\n DatePicker.prototype.createCalendar = function () {\n var _this = this;\n this.popupWrapper = this.createElement('div', { className: '' + ROOT$1 + ' ' + POPUPWRAPPER, id: this.inputElement.id + '_options' });\n this.popupWrapper.setAttribute('aria-label', this.element.id);\n this.popupWrapper.setAttribute('role', 'dialog');\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (Browser.isDevice) {\n this.modelHeader();\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT$1 + ' e-date-modal';\n document.body.className += ' ' + OVERFLOW;\n this.modal.style.display = 'block';\n document.body.appendChild(this.modal);\n }\n //this.calendarElement represent the Calendar object from the Calendar class.\n this.calendarElement.querySelector('table tbody').className = '';\n this.popupObj = new Popup(this.popupWrapper, {\n content: this.calendarElement,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : (this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' }),\n offsetY: OFFSETVALUE,\n targetType: 'container',\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : (this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }),\n open: function () {\n if (Browser.isDevice && _this.fullScreenMode) {\n _this.iconRight = parseInt(window.getComputedStyle(_this.calendarElement.querySelector('.e-header.e-month .e-prev')).marginRight, 10) > 16 ? true : false;\n _this.touchModule = new Touch(_this.calendarElement.querySelector('.e-content.e-month'), {\n swipe: _this.CalendarSwipeHandler.bind(_this)\n });\n EventHandler.add(_this.calendarElement.querySelector('.e-content.e-month'), 'touchstart', _this.TouchStartHandler, _this);\n }\n if (_this.getModuleName() !== 'datetimepicker') {\n if (document.activeElement !== _this.inputElement) {\n _this.defaultKeyConfigs = extend(_this.defaultKeyConfigs, _this.keyConfigs);\n _this.calendarElement.children[1].firstElementChild.focus();\n _this.calendarKeyboardModules = new KeyboardEvents(_this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: _this.calendarKeyActionHandle.bind(_this),\n keyConfigs: _this.defaultKeyConfigs\n });\n _this.calendarKeyboardModules = new KeyboardEvents(_this.inputWrapper.container.children[_this.index], {\n eventName: 'keydown',\n keyAction: _this.calendarKeyActionHandle.bind(_this),\n keyConfigs: _this.defaultKeyConfigs\n });\n }\n }\n }, close: function () {\n if (_this.isDateIconClicked) {\n _this.inputWrapper.container.children[_this.index].focus();\n }\n if (_this.value) {\n _this.disabledDates();\n }\n if (_this.popupObj) {\n _this.popupObj.destroy();\n }\n _this.resetCalendar();\n detach(_this.popupWrapper);\n _this.popupObj = _this.popupWrapper = null;\n _this.preventArgs = null;\n _this.calendarKeyboardModules = null;\n _this.setAriaAttributes();\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n this.popupObj.element.className += ' ' + this.cssClass;\n this.setAriaAttributes();\n };\n DatePicker.prototype.getAmPmValue = function (date) {\n try {\n if (typeof date === 'string' && date.trim() !== '') {\n // Replace am/pm variants with uppercase AM/PM\n return date.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); });\n }\n // If date is null, undefined, or an empty string, return a default value or empty string\n return '';\n }\n catch (error) {\n console.error('Error occurred while processing date:', error);\n return ''; // Return a default value in case of an error\n }\n };\n DatePicker.prototype.CalendarSwipeHandler = function (e) {\n var direction = 0;\n if (this.iconRight) {\n switch (e.swipeDirection) {\n case 'Left':\n direction = 1;\n break;\n case 'Right':\n direction = -1;\n break;\n }\n }\n else {\n switch (e.swipeDirection) {\n case 'Up':\n direction = 1;\n break;\n case 'Down':\n direction = -1;\n break;\n }\n }\n if (this.touchStart) {\n if (direction === 1) {\n this.navigateNext(e);\n }\n else if (direction === -1) {\n this.navigatePrevious(e);\n }\n this.touchStart = false;\n }\n };\n DatePicker.prototype.TouchStartHandler = function (e) {\n this.touchStart = true;\n };\n DatePicker.prototype.setAriaDisabled = function () {\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.inputElement.tabIndex = -1;\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n };\n DatePicker.prototype.modelHeader = function () {\n var dateOptions;\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var yearHeading = this.createElement('h1', { className: 'e-model-year' });\n var h2 = this.createElement('div');\n var daySpan = this.createElement('span', { className: 'e-model-day' });\n var monthSpan = this.createElement('span', { className: 'e-model-month' });\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'y', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'y', skeleton: 'dateTime', calendar: 'islamic' };\n }\n yearHeading.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'E', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'E', skeleton: 'dateTime', calendar: 'islamic' };\n }\n daySpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions) + ', ';\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'MMM d', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'MMM d', skeleton: 'dateTime', calendar: 'islamic' };\n }\n monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);\n if (this.fullScreenMode) {\n var modelCloseIcon = this.createElement('span', { className: 'e-popup-close' });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelCloseHandler, this);\n var modelTodayButton = this.calendarElement.querySelector('button.e-today');\n h2.classList.add('e-day-wrapper');\n modelTodayButton.classList.add('e-outline');\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTodayButton);\n }\n if (!this.fullScreenMode) {\n modelHeader.appendChild(yearHeading);\n }\n h2.appendChild(daySpan);\n h2.appendChild(monthSpan);\n modelHeader.appendChild(h2);\n this.calendarElement.insertBefore(modelHeader, this.calendarElement.firstElementChild);\n };\n DatePicker.prototype.modelCloseHandler = function (e) {\n this.hide();\n };\n DatePicker.prototype.changeTrigger = function (event) {\n if (this.inputElement.value !== this.previousElementValue) {\n if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {\n if (this.isDynamicValueChanged && this.isCalendar()) {\n this.popupUpdate();\n }\n this.changedArgs.value = this.value;\n this.changedArgs.event = event || null;\n this.changedArgs.element = this.element;\n this.changedArgs.isInteracted = !isNullOrUndefined(event);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', this.changedArgs);\n }\n this.previousElementValue = this.inputElement.value;\n this.previousDate = !isNaN(+new Date(this.checkValue(this.value))) ? new Date(this.checkValue(this.value)) : null;\n this.isInteracted = true;\n }\n }\n this.isKeyAction = false;\n };\n DatePicker.prototype.navigatedEvent = function () {\n this.trigger('navigated', this.navigatedArgs);\n };\n DatePicker.prototype.keyupHandler = function (e) {\n this.isKeyAction = (this.inputElement.value !== this.previousElementValue) ? true : false;\n if (this.enableMask && this.showClearButton && this.inputElement && this.inputElement.value === this.maskedDateValue && this.inputWrapper && this.inputWrapper.clearButton && !this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) {\n this.inputWrapper.clearButton.classList.add('e-clear-icon-hide');\n }\n };\n DatePicker.prototype.changeEvent = function (event) {\n if (!this.isIconClicked && !(this.isBlur || this.isKeyAction)) {\n this.selectCalendar(event);\n }\n if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {\n this.changedArgs.event = event ? event : null;\n this.changedArgs.element = this.element;\n this.changedArgs.isInteracted = this.isInteracted;\n if (!this.isDynamicValueChanged) {\n this.trigger('change', this.changedArgs);\n }\n this.previousDate = this.value && new Date(+this.value);\n if (!this.isDynamicValueChanged) {\n this.hide(event);\n }\n this.previousElementValue = this.inputElement.value;\n this.errorClass();\n }\n else if (event) {\n this.hide(event);\n }\n this.isKeyAction = false;\n };\n DatePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this.calendarMode === 'Islamic') {\n modules.push({ args: [this], member: 'islamic', name: 'Islamic' });\n }\n if (this.enableMask) {\n modules.push({ args: [this], member: 'MaskedDateTime' });\n }\n return modules;\n };\n DatePicker.prototype.selectCalendar = function (e) {\n var date;\n var tempFormat;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n tempFormat = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n }\n else {\n tempFormat = this.formatString;\n }\n if (this.value) {\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: tempFormat, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.formatDate(this.changedArgs.value, formatOptions);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.formatDate(this.changedArgs.value, formatOptions);\n }\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n }\n if (!isNullOrUndefined(date)) {\n this.updateInputValue(date);\n if (this.enableMask) {\n this.notify('setMaskSelection', {\n module: 'MaskedDateTime'\n });\n }\n }\n };\n DatePicker.prototype.isCalendar = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + POPUPWRAPPER)) {\n return true;\n }\n return false;\n };\n DatePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(this.width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (this.width) : (formatUnit(this.width));\n }\n else {\n this.inputWrapper.container.style.width = '100%';\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Shows the Calendar.\n *\n * @returns {void}\n * @deprecated\n */\n DatePicker.prototype.show = function (type, e) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupObj) {\n return;\n }\n else {\n var prevent_1 = true;\n var outOfRange = void 0;\n if (!isNullOrUndefined(this.value) && !(+this.value >= +new Date(this.checkValue(this.min))\n && +this.value <= +new Date(this.checkValue(this.max)))) {\n outOfRange = new Date(this.checkValue(this.value));\n this.setProperties({ 'value': null }, true);\n }\n else {\n outOfRange = this.value || null;\n }\n if (!this.isCalendar()) {\n _super.prototype.render.call(this);\n this.setProperties({ 'value': outOfRange || null }, true);\n this.previousDate = outOfRange;\n this.createCalendar();\n }\n if (Browser.isDevice) {\n this.mobilePopupWrapper = this.createElement('div', { className: 'e-datepick-mob-popup-wrap' });\n document.body.appendChild(this.mobilePopupWrapper);\n }\n this.preventArgs = {\n preventDefault: function () {\n prevent_1 = false;\n },\n popup: this.popupObj,\n event: e || null,\n cancel: false,\n appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (prevent_1 && !_this.preventArgs.cancel) {\n addClass(_this.inputWrapper.buttons, ACTIVE);\n _this.preventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupObj.refreshPosition(_this.inputElement);\n var openAnimation = {\n name: 'FadeIn',\n duration: Browser.isDevice ? 0 : OPENDURATION\n };\n if (_this.zIndex === 1000) {\n _this.popupObj.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObj.show(new Animation(openAnimation), null);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _super.prototype.setOverlayIndex.call(_this, _this.mobilePopupWrapper, _this.popupObj.element, _this.modal, Browser.isDevice);\n _this.setAriaAttributes();\n }\n else {\n _this.popupObj.destroy();\n _this.popupWrapper = _this.popupObj = null;\n }\n if (!isNullOrUndefined(_this.inputElement) && _this.inputElement.value === '') {\n if (!isNullOrUndefined(_this.tableBodyElement) && _this.tableBodyElement.querySelectorAll('td.e-selected').length > 0) {\n addClass([_this.tableBodyElement.querySelector('td.e-selected')], FOCUSEDDATE$2);\n removeClass(_this.tableBodyElement.querySelectorAll('td.e-selected'), SELECTED$2);\n }\n }\n EventHandler.add(document, 'mousedown touchstart', _this.documentHandler, _this);\n });\n if (Browser.isDevice) {\n var dlgOverlay = this.createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.mobilePopupWrapper.appendChild(dlgOverlay);\n }\n }\n };\n /**\n * Hide the Calendar.\n *\n * @returns {void}\n * @deprecated\n */\n DatePicker.prototype.hide = function (event) {\n var _this = this;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var prevent_2 = true;\n this.preventArgs = {\n preventDefault: function () {\n prevent_2 = false;\n },\n popup: this.popupObj,\n event: event || null,\n cancel: false\n };\n removeClass(this.inputWrapper.buttons, ACTIVE);\n removeClass([document.body], OVERFLOW);\n var eventArgs = this.preventArgs;\n if (this.isCalendar()) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.closeEventCallback(prevent_2, eventArgs);\n });\n }\n else {\n this.closeEventCallback(prevent_2, eventArgs);\n }\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n DatePicker.prototype.closeEventCallback = function (prevent, eventArgs) {\n this.preventArgs = eventArgs;\n if (this.isCalendar() && (prevent && !this.preventArgs.cancel)) {\n this.popupObj.hide();\n this.isAltKeyPressed = false;\n this.keyboardModule.destroy();\n removeClass(this.inputWrapper.buttons, ACTIVE);\n }\n this.setAriaAttributes();\n if (Browser.isDevice && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n if (Browser.isDevice) {\n if (!isNullOrUndefined(this.mobilePopupWrapper) &&\n (prevent && (isNullOrUndefined(this.preventArgs) || !this.preventArgs.cancel))) {\n this.mobilePopupWrapper.remove();\n this.mobilePopupWrapper = null;\n }\n }\n EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n /* eslint-disable jsdoc/require-param */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DatePicker.prototype.focusIn = function (triggerEvent) {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n /* eslint-enable jsdoc/require-param */\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DatePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.inputElement.blur();\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the current view of the DatePicker.\n *\n * @returns {string}\n * @deprecated\n */\n DatePicker.prototype.currentView = function () {\n var currentView;\n if (this.calendarElement) {\n // calls the Calendar currentView public method\n currentView = _super.prototype.currentView.call(this);\n }\n return currentView;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Navigates to specified month or year or decade view of the DatePicker.\n *\n * @param {string} view - Specifies the view of the calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns {void}\n * @deprecated\n */\n DatePicker.prototype.navigateTo = function (view, date) {\n if (this.calendarElement) {\n // calls the Calendar navigateTo public method\n _super.prototype.navigateTo.call(this, view, date);\n }\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DatePicker.prototype.destroy = function () {\n this.unBindEvents();\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n _super.prototype.destroy.call(this);\n Input.destroy({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n if (!isNullOrUndefined(this.keyboardModules)) {\n this.keyboardModules.destroy();\n }\n if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {\n _super.prototype.destroy.call(this);\n }\n var ariaAttrs = {\n 'aria-atomic': 'true', 'aria-disabled': 'true',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n };\n if (this.inputElement.hasAttribute('aria-label')) {\n this.inputElement.removeAttribute('aria-label');\n }\n if (this.inputElement) {\n Input.removeAttributes(ariaAttrs, this.inputElement);\n if (!isNullOrUndefined(this.inputElementCopy.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n this.ensureInputAttribute();\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObj = this.popupWrapper = null;\n this.keyboardModule.destroy();\n }\n if (this.ngTag === null) {\n if (this.inputElement) {\n if (!isNullOrUndefined(this.inputWrapper)) {\n this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);\n }\n removeClass([this.inputElement], [INPUTROOT]);\n }\n removeClass([this.element], [ROOT$1]);\n if (!isNullOrUndefined(this.inputWrapper)) {\n detach(this.inputWrapper.container);\n }\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);\n }\n this.inputWrapper = null;\n this.keyboardModules = null;\n };\n DatePicker.prototype.ensureInputAttribute = function () {\n var prop = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n prop[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < prop.length; i++) {\n if (isNullOrUndefined(this.inputElementCopy.getAttribute(prop[i]))) {\n if (prop[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop[i]);\n }\n else {\n if (prop[i].toLowerCase() === 'value') {\n this.inputElement.value = this.inputElementCopy.getAttribute(prop[i]);\n }\n this.inputElement.setAttribute(prop[i], this.inputElementCopy.getAttribute(prop[i]));\n }\n }\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n DatePicker.prototype.preRender = function () {\n this.inputElementCopy = this.element.cloneNode(true);\n removeClass([this.inputElementCopy], [ROOT$1, CONTROL, LIBRARY]);\n this.inputElement = this.element;\n this.formElement = closest(this.inputElement, 'form');\n this.index = this.showClearButton ? 2 : 1;\n this.ngTag = null;\n if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.ngTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n if (this.element.getAttribute('id')) {\n if (this.ngTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n if (this.getModuleName() === 'datetimepicker') {\n this.element.id = getUniqueID('ej2-datetimepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n else {\n this.element.id = getUniqueID('ej2-datepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n }\n if (this.ngTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.defaultKeyConfigs = this.getDefaultKeyConfig();\n this.checkHtmlAttributes(false);\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n _super.prototype.preRender.call(this);\n };\n DatePicker.prototype.getDefaultKeyConfig = function () {\n this.defaultKeyConfigs = {\n altUpArrow: 'alt+uparrow',\n altDownArrow: 'alt+downarrow',\n escape: 'escape',\n enter: 'enter',\n controlUp: 'ctrl+38',\n controlDown: 'ctrl+40',\n moveDown: 'downarrow',\n moveUp: 'uparrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n select: 'enter',\n home: 'home',\n end: 'end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n shiftPageUp: 'shift+pageup',\n shiftPageDown: 'shift+pagedown',\n controlHome: 'ctrl+home',\n controlEnd: 'ctrl+end',\n shiftTab: 'shift+tab',\n tab: 'tab'\n };\n return this.defaultKeyConfigs;\n };\n DatePicker.prototype.validationAttribute = function (target, inputElement) {\n var nameAttribute = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n inputElement.setAttribute('name', nameAttribute);\n target.removeAttribute('name');\n var attribute = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attribute.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attribute[i]))) {\n continue;\n }\n var attr = target.getAttribute(attribute[i]);\n inputElement.setAttribute(attribute[i], attr);\n target.removeAttribute(attribute[i]);\n }\n };\n DatePicker.prototype.checkFormat = function () {\n var culture = new Internationalization(this.locale);\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (this.format.skeleton !== '' && !isNullOrUndefined(this.format.skeleton)) {\n var skeletonString = this.format.skeleton;\n if (this.getModuleName() === 'datetimepicker') {\n this.formatString = culture.getDatePattern({ skeleton: skeletonString, type: 'dateTime' });\n }\n else {\n this.formatString = culture.getDatePattern({ skeleton: skeletonString, type: 'date' });\n }\n }\n else {\n if (this.getModuleName() === 'datetimepicker') {\n this.formatString = this.dateTimeFormat;\n }\n else {\n this.formatString = null;\n }\n }\n }\n else {\n this.formatString = null;\n }\n };\n DatePicker.prototype.checkHtmlAttributes = function (dynamic) {\n this.globalize = new Internationalization(this.locale);\n this.checkFormat();\n this.checkView();\n var attributes = dynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder', 'type'];\n var options;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n options = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n options = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n options = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n options = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['enabled'] === undefined)) || dynamic)) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !dynamic);\n }\n break;\n case 'readonly':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['readonly'] === undefined)) || dynamic)) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !dynamic);\n }\n break;\n case 'placeholder':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['placeholder'] === undefined)) || dynamic)) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !dynamic);\n }\n break;\n case 'style':\n this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));\n break;\n case 'name':\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));\n break;\n case 'value':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['value'] === undefined)) || dynamic)) {\n var value = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(this.getAmPmValue(value), options), {}), !dynamic);\n }\n break;\n case 'min':\n if ((+this.min === +new Date(1900, 0, 1)) || dynamic) {\n var min = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(this.getAmPmValue(min), options), {}), !dynamic);\n }\n break;\n case 'max':\n if ((+this.max === +new Date(2099, 11, 31)) || dynamic) {\n var max = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(this.getAmPmValue(max), options), {}), !dynamic);\n }\n break;\n case 'type':\n if (this.inputElement.getAttribute(prop) !== 'text') {\n this.inputElement.setAttribute('type', 'text');\n }\n break;\n }\n }\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DatePicker.prototype.getModuleName = function () {\n return 'datepicker';\n };\n DatePicker.prototype.disabledDates = function (isDynamic, isBlur) {\n if (isDynamic === void 0) { isDynamic = false; }\n if (isBlur === void 0) { isBlur = false; }\n var formatOptions;\n var globalize;\n var valueCopy = this.checkDateValue(this.value) ? new Date(+this.value) : new Date(this.checkValue(this.value));\n var previousValCopy = this.previousDate;\n //calls the Calendar render method to check the disabled dates through renderDayCell event and update the input value accordingly.\n this.minMaxUpdates();\n if (!isDynamic || (isDynamic && !isNullOrUndefined(this.renderDayCell))) {\n _super.prototype.render.call(this);\n }\n this.previousDate = previousValCopy;\n var date = valueCopy && +(valueCopy);\n var dateIdString = '*[id^=\"/id\"]'.replace('/id', '' + date);\n if (!this.strictMode) {\n if (typeof this.value === 'string' || ((typeof this.value === 'object') && (+this.value) !== (+valueCopy))) {\n this.setProperties({ value: valueCopy }, true);\n }\n }\n if (!isNullOrUndefined(this.calendarElement) && !isNullOrUndefined(this.calendarElement.querySelectorAll(dateIdString)[0])) {\n if (this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled')) {\n if (!this.strictMode) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n }\n }\n var inputVal;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n globalize = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n globalize = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n inputVal = globalize;\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n inputVal = this.globalize.formatDate(valueCopy, formatOptions);\n }\n if (!this.popupObj) {\n this.updateInputValue(inputVal);\n if (this.enableMask) {\n this.updateInputValue(this.maskedDateValue);\n this.notify('createMask', {\n module: 'MaskedDateTime', isBlur: isBlur\n });\n }\n }\n };\n DatePicker.prototype.setAriaAttributes = function () {\n if (this.isCalendar()) {\n Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);\n attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });\n attributes(this.inputElement, { 'aria-controls': this.inputElement.id });\n if (this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });\n }\n }\n else {\n Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);\n this.inputElement.removeAttribute('aria-owns');\n this.inputElement.removeAttribute('aria-controls');\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n };\n DatePicker.prototype.errorClass = function () {\n var dateIdString = '*[id^=\"/id\"]'.replace('/id', '' + (+this.value));\n var isDisabledDate = this.calendarElement &&\n this.calendarElement.querySelectorAll(dateIdString)[0] &&\n this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled');\n if ((!isNullOrUndefined(this.value) && !isNullOrUndefined(this.min) &&\n !isNullOrUndefined(this.max) && !(new Date(this.value).setMilliseconds(0) >=\n new Date(this.min).setMilliseconds(0)\n && new Date(this.value).setMilliseconds(0) <= new Date(this.max).setMilliseconds(0)))\n || (!this.strictMode && this.inputElement.value !== '' && this.inputElement.value !== this.maskedDateValue &&\n isNullOrUndefined(this.value) || isDisabledDate) || !this.isValidTime(this.value)) {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n else if (!isNullOrUndefined(this.inputWrapper)) {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n }\n };\n DatePicker.prototype.isValidTime = function (value) {\n return true;\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DatePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DatePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n DatePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n var openPopup = ['blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell'];\n if (openPopup.indexOf(prop) > 0 && this.isReact) {\n this.isDynamicValueChanged = true;\n }\n switch (prop) {\n case 'value':\n this.isDynamicValueChanged = true;\n this.isInteracted = false;\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n this.previousElementValue = this.inputElement.value;\n if (isNullOrUndefined(this.value)) {\n if (this.enableMask) {\n this.updateInputValue(this.maskedDateValue);\n }\n else {\n this.updateInputValue('');\n }\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n this.updateInput(true);\n if (+this.previousDate !== +this.value) {\n this.changeTrigger(null);\n }\n this.isInteracted = true;\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'format':\n this.checkFormat();\n this.bindInputEvent();\n this.updateInput();\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n break;\n case 'allowEdit':\n this.setAllowEdit();\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.inputElement);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n this.setAriaDisabled();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkHtmlAttributes(true);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n if (this.datepickerOptions && this.datepickerOptions.placeholder == null) {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.inputElement);\n }\n this.updateInput();\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'start':\n case 'depth':\n this.checkView();\n if (this.calendarElement) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n this.index = this.showClearButton ? 2 : 1;\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n this.updateInputValue(this.maskedDateValue);\n this.bindInputEvent();\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.updateInputValue('');\n }\n }\n break;\n default:\n if (this.calendarElement && this.isCalendar()) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n if (prop === 'min' && isNullOrUndefined(this.min)) {\n this.min = new Date(1900, 0, 1);\n }\n if (prop === 'max' && isNullOrUndefined(this.max)) {\n this.max = new Date(2099, 11, 31);\n }\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"width\", void 0);\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"value\", void 0);\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"cssClass\", void 0);\n __decorate$1([\n Property(false)\n ], DatePicker.prototype, \"strictMode\", void 0);\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"format\", void 0);\n __decorate$1([\n Property(true)\n ], DatePicker.prototype, \"enabled\", void 0);\n __decorate$1([\n Property(false)\n ], DatePicker.prototype, \"fullScreenMode\", void 0);\n __decorate$1([\n Property({})\n ], DatePicker.prototype, \"htmlAttributes\", void 0);\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"values\", void 0);\n __decorate$1([\n Property(false)\n ], DatePicker.prototype, \"isMultiSelection\", void 0);\n __decorate$1([\n Property(true)\n ], DatePicker.prototype, \"showClearButton\", void 0);\n __decorate$1([\n Property(true)\n ], DatePicker.prototype, \"allowEdit\", void 0);\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"keyConfigs\", void 0);\n __decorate$1([\n Property(false)\n ], DatePicker.prototype, \"enablePersistence\", void 0);\n __decorate$1([\n Property(1000)\n ], DatePicker.prototype, \"zIndex\", void 0);\n __decorate$1([\n Property(false)\n ], DatePicker.prototype, \"readonly\", void 0);\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"placeholder\", void 0);\n __decorate$1([\n Property('Never')\n ], DatePicker.prototype, \"floatLabelType\", void 0);\n __decorate$1([\n Property(null)\n ], DatePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate$1([\n Property(false)\n ], DatePicker.prototype, \"openOnFocus\", void 0);\n __decorate$1([\n Property(false)\n ], DatePicker.prototype, \"enableMask\", void 0);\n __decorate$1([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], DatePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate$1([\n Event()\n ], DatePicker.prototype, \"open\", void 0);\n __decorate$1([\n Event()\n ], DatePicker.prototype, \"cleared\", void 0);\n __decorate$1([\n Event()\n ], DatePicker.prototype, \"close\", void 0);\n __decorate$1([\n Event()\n ], DatePicker.prototype, \"blur\", void 0);\n __decorate$1([\n Event()\n ], DatePicker.prototype, \"focus\", void 0);\n __decorate$1([\n Event()\n ], DatePicker.prototype, \"created\", void 0);\n __decorate$1([\n Event()\n ], DatePicker.prototype, \"destroyed\", void 0);\n DatePicker = __decorate$1([\n NotifyPropertyChanges\n ], DatePicker);\n return DatePicker;\n}(Calendar));\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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};\nvar DATERANGEWRAPPER = 'e-date-range-wrapper';\nvar INPUTCONTAINER$1 = 'e-input-group';\nvar DATERANGEICON = 'e-input-group-icon e-range-icon e-icons';\nvar POPUP$1 = 'e-popup';\nvar LEFTCALENDER = 'e-left-calendar';\nvar RIGHTCALENDER = 'e-right-calendar';\nvar LEFTCONTAINER = 'e-left-container';\nvar RIGHTCONTAINER = 'e-right-container';\nvar ROOT$2 = 'e-daterangepicker';\nvar LIBRARY$1 = 'e-lib';\nvar CONTROL$1 = 'e-control';\nvar ERROR$1 = 'e-error';\nvar ACTIVE$1 = 'e-active';\nvar STARTENDCONTAINER = 'e-start-end';\nvar STARTDATE = 'e-start-date';\nvar ENDDATE = 'e-end-date';\nvar STARTBUTTON = 'e-start-btn';\nvar INPUTFOCUS$1 = 'e-input-focus';\nvar ENDBUTTON = 'e-end-btn';\nvar RANGEHOVER = 'e-range-hover';\nvar OTHERMONTH$2 = 'e-other-month';\nvar STARTLABEL = 'e-start-label';\nvar ENDLABEL = 'e-end-label';\nvar DISABLED$2 = 'e-disabled';\nvar SELECTED$3 = 'e-selected';\nvar CALENDAR = 'e-calendar';\nvar NEXTICON$1 = 'e-next';\nvar PREVICON$1 = 'e-prev';\nvar HEADER$1 = 'e-header';\nvar TITLE$1 = 'e-title';\nvar ICONCONTAINER$1 = 'e-icon-container';\nvar RANGECONTAINER = 'e-date-range-container';\nvar RANGEHEADER = 'e-range-header';\nvar PRESETS = 'e-presets';\nvar FOOTER$1 = 'e-footer';\nvar RANGEBORDER = 'e-range-border';\nvar TODAY$2 = 'e-today';\nvar FOCUSDATE = 'e-focused-date';\nvar CONTENT$1 = 'e-content';\nvar DAYSPAN = 'e-day-span';\nvar WEEKNUMBER$2 = 'e-week-number';\nvar DATEDISABLED = 'e-date-disabled';\nvar ICONDISABLED = 'e-icon-disabled';\nvar CALENDARCONTAINER = 'e-calendar-container';\nvar SEPARATOR = 'e-separator';\nvar APPLY = 'e-apply';\nvar CANCEL = 'e-cancel';\nvar DEVICE$1 = 'e-device';\nvar OVERLAY$2 = 'e-overlay';\nvar CHANGEICON = 'e-change-icon e-icons';\nvar LISTCLASS = 'e-list-item';\nvar RTL$1 = 'e-rtl';\nvar HOVER = 'e-hover';\nvar OVERFLOW$1 = 'e-range-overflow';\nvar OFFSETVALUE$1 = 4;\nvar PRIMARY$1 = 'e-primary';\nvar FLAT$1 = 'e-flat';\nvar CSS$1 = 'e-css';\nvar ZOOMIN$1 = 'e-zoomin';\nvar NONEDITABLE = 'e-non-edit';\nvar DAYHEADERLONG$1 = 'e-daterange-day-header-lg';\nvar HIDDENELEMENT = 'e-daterange-hidden';\nvar wrapperAttr = ['title', 'class', 'style'];\nvar Presets = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Presets, _super);\n function Presets() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property()\n ], Presets.prototype, \"label\", void 0);\n __decorate$2([\n Property()\n ], Presets.prototype, \"start\", void 0);\n __decorate$2([\n Property()\n ], Presets.prototype, \"end\", void 0);\n return Presets;\n}(ChildProperty));\n/**\n * Represents the DateRangePicker component that allows user to select the date range from the calendar\n * or entering the range through the input element.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar DateRangePicker = /** @__PURE__ @class */ (function (_super) {\n __extends$2(DateRangePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DateRangePickerModel} options - Specifies the DateRangePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DateRangePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isCustomRange = false;\n _this.isCustomWindow = false;\n _this.presetsItem = [];\n _this.liCollections = [];\n _this.previousEleValue = '';\n _this.isKeyPopup = false;\n _this.dateDisabled = false;\n _this.isRangeIconClicked = false;\n _this.isMaxDaysClicked = false;\n _this.disabledDays = [];\n _this.preventBlur = false;\n _this.preventFocus = false;\n _this.invalidValueString = null;\n _this.preventChange = false;\n _this.dateRangeOptions = options;\n return _this;\n }\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DateRangePicker.prototype.render = function () {\n this.initialize();\n this.setProperties({ startDate: this.startValue }, true);\n this.setProperties({ endDate: this.endValue }, true);\n this.setModelValue();\n this.setDataAttribute(false);\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n if (this.floatLabelType !== 'Never') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n DateRangePicker.prototype.preRender = function () {\n this.keyInputConfigs = {\n altDownArrow: 'alt+downarrow',\n escape: 'escape',\n enter: 'enter',\n tab: 'tab',\n altRightArrow: 'alt+rightarrow',\n altLeftArrow: 'alt+leftarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n spacebar: 'space'\n };\n this.defaultConstant = {\n placeholder: this.placeholder,\n startLabel: 'Start Date',\n endLabel: 'End Date',\n customRange: 'Custom Range',\n applyText: 'Apply',\n cancelText: 'Cancel',\n selectedDays: 'Selected Days',\n days: 'days'\n };\n /**\n * Mobile View\n */\n this.isMobile = (Browser.isDevice) ? true : window.matchMedia('(max-width:550px)').matches;\n this.inputElement = this.element;\n this.angularTag = null;\n if (this.element.tagName === 'EJS-DATERANGEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [ROOT$2, CONTROL$1, LIBRARY$1]);\n this.updateHtmlAttributeToElement();\n if (this.element.getAttribute('id')) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n this.element.id = getUniqueID('ej2-datetimepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n this.checkInvalidRange(this.value);\n if (!this.invalidValueString && (typeof (this.value) === 'string')) {\n var rangeArray = this.value.split(' ' + this.separator + ' ');\n this.value = [new Date(rangeArray[0]), new Date(rangeArray[1])];\n }\n this.initProperty();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n _super.prototype.preRender.call(this);\n this.navNextFunction = this.navNextMonth.bind(this);\n this.navPrevFunction = this.navPrevMonth.bind(this);\n this.deviceNavNextFunction = this.deviceNavNext.bind(this);\n this.deviceNavPrevFunction = this.deviceNavPrevious.bind(this);\n this.initStartDate = this.checkDateValue(this.startValue);\n this.initEndDate = this.checkDateValue(this.endValue);\n this.formElement = closest(this.element, 'form');\n };\n DateRangePicker.prototype.updateValue = function () {\n if (this.value && this.value.length > 0) {\n if (this.value[0] instanceof Date && !isNaN(+this.value[0])) {\n this.setProperties({ startDate: this.value[0] }, true);\n this.startValue = this.value[0];\n }\n else if (typeof this.value[0] === 'string') {\n if (+this.value[0] === 0 || isNaN(+(new Date(this.checkValue(this.value[0]))))) {\n this.startValue = null;\n this.setValue();\n }\n else {\n this.setProperties({ startDate: new Date(this.checkValue(this.value[0])) }, true);\n this.startValue = new Date(this.checkValue(this.value[0]));\n }\n }\n else {\n this.startValue = null;\n this.setValue();\n }\n if (this.value[1] instanceof Date && !isNaN(+this.value[1])) {\n this.setProperties({ endDate: this.value[1] }, true);\n this.endValue = this.value[1];\n }\n else if (typeof this.value[1] === 'string') {\n if (+this.value[0] === 0 || isNaN(+(new Date(this.checkValue(this.value[0]))))) {\n this.setProperties({ endDate: null }, true);\n this.endValue = null;\n this.setValue();\n }\n else {\n this.setProperties({ endDate: new Date(this.checkValue(this.value[1])) }, true);\n this.endValue = new Date(this.checkValue(this.value[1]));\n this.setValue();\n }\n }\n else {\n this.setProperties({ endDate: null }, true);\n this.endValue = null;\n this.setValue();\n }\n }\n else if (this.value && this.value.start) {\n if (this.value.start instanceof Date && !isNaN(+this.value.start)) {\n this.setProperties({ startDate: this.value.start }, true);\n this.startValue = this.value.start;\n }\n else if (typeof this.value.start === 'string') {\n this.setProperties({ startDate: new Date(this.checkValue(this.value.start)) }, true);\n this.startValue = new Date(this.checkValue(this.value.start));\n }\n else {\n this.startValue = null;\n this.setValue();\n }\n if (this.value.end instanceof Date && !isNaN(+this.value.end)) {\n this.setProperties({ endDate: this.value.end }, true);\n this.endValue = this.value.end;\n }\n else if (typeof this.value.end === 'string') {\n this.setProperties({ endDate: new Date(this.checkValue(this.value.end)) }, true);\n this.endValue = new Date(this.checkValue(this.value.end));\n this.setValue();\n }\n else {\n this.setProperties({ endDate: null }, true);\n this.endValue = null;\n this.setValue();\n }\n }\n else if (isNullOrUndefined(this.value)) {\n this.endValue = this.checkDateValue(new Date(this.checkValue(this.endDate)));\n this.startValue = this.checkDateValue(new Date(this.checkValue(this.startDate)));\n this.setValue();\n }\n };\n DateRangePicker.prototype.initProperty = function () {\n this.globalize = new Internationalization(this.locale);\n this.checkFormat();\n this.checkView();\n if (isNullOrUndefined(this.firstDayOfWeek) || this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {\n this.setProperties({ firstDayOfWeek: this.globalize.getFirstDayOfWeek() }, true);\n }\n this.updateValue();\n };\n DateRangePicker.prototype.checkFormat = function () {\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (this.format.skeleton !== '' && !isNullOrUndefined(this.format.skeleton)) {\n var skeletonString = this.format.skeleton;\n this.formatString = this.globalize.getDatePattern({ skeleton: skeletonString, type: 'date' });\n }\n else {\n this.formatString = null;\n }\n }\n else {\n this.formatString = null;\n }\n };\n DateRangePicker.prototype.initialize = function () {\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.checkHtmlAttributes(false);\n merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab', tab: 'tab' });\n var start = this.checkDateValue(new Date(this.checkValue(this.startValue)));\n this.setProperties({ startDate: start }, true); // persist the value propeerty.\n this.setProperties({ endValue: this.checkDateValue(new Date(this.checkValue(this.endValue))) }, true);\n this.setValue();\n this.setProperties({ min: this.checkDateValue(new Date(this.checkValue(this.min))) }, true);\n this.setProperties({ max: this.checkDateValue(new Date(this.checkValue(this.max))) }, true);\n this.l10n = new L10n('daterangepicker', this.defaultConstant, this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.processPresets();\n this.createInput();\n this.updateHtmlAttributeToWrapper();\n this.setRangeAllowEdit();\n this.bindEvents();\n };\n DateRangePicker.prototype.setDataAttribute = function (isDynamic) {\n var attributes = {};\n if (!isDynamic) {\n for (var i = 0; i < this.element.attributes.length; i++) {\n attributes[this.element.attributes[i].name] =\n this.element.getAttribute(this.element.attributes[i].name);\n }\n }\n else {\n attributes = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (pro.indexOf('data') === 0) {\n this.firstHiddenChild.setAttribute(pro, attributes[\"\" + pro]);\n this.secondHiddenChild.setAttribute(pro, attributes[\"\" + pro]);\n }\n }\n };\n DateRangePicker.prototype.setRangeAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.updateClearIconState();\n };\n DateRangePicker.prototype.updateClearIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [NONEDITABLE]);\n }\n else {\n addClass([this.inputWrapper.container], [NONEDITABLE]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [NONEDITABLE]);\n }\n };\n DateRangePicker.prototype.validationAttribute = function (element, input) {\n var name = element.getAttribute('name') ? element.getAttribute('name') : element.getAttribute('id');\n input.setAttribute('name', name);\n element.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(element.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = element.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n element.removeAttribute(attributes[i]);\n }\n };\n DateRangePicker.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 if (wrapperAttr.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValue = (this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.inputWrapper.container], updatedClassValue.split(' '));\n }\n }\n else if (key === 'style') {\n var dateRangeStyle = this.inputWrapper.container.getAttribute(key);\n dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes[\"\" + key]) :\n this.htmlAttributes[\"\" + key];\n this.inputWrapper.container.setAttribute(key, dateRangeStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n };\n DateRangePicker.prototype.updateHtmlAttributeToElement = 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 if (wrapperAttr.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n DateRangePicker.prototype.updateCssClass = function (cssNewClass, cssOldClass) {\n if (!isNullOrUndefined(cssOldClass)) {\n cssOldClass = (cssOldClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(cssNewClass)) {\n cssNewClass = (cssNewClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(cssNewClass, [this.inputWrapper.container], cssOldClass);\n if (this.popupWrapper) {\n Input.setCssClass(cssNewClass, [this.popupWrapper], cssOldClass);\n }\n };\n DateRangePicker.prototype.processPresets = function () {\n this.presetsItem = [];\n var i = 0;\n if (!isNullOrUndefined(this.presets[0]) && !isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n for (var _i = 0, _a = this.presets; _i < _a.length; _i++) {\n var range = _a[_i];\n var id = range.label.replace(/\\s+/g, '') + '_' + (++i);\n if (typeof range.end === 'string') {\n this.presetsItem.push({\n id: id, text: range.label, end: new Date(this.checkValue(range.end)), start: new Date(this.checkValue(range.start))\n });\n }\n else {\n this.presetsItem.push({ id: id, text: range.label, start: range.start, end: range.end });\n }\n }\n var startDate = isNullOrUndefined(this.startValue) ? null : new Date(+this.startValue);\n var endDate = isNullOrUndefined(this.endValue) ? null : new Date(+this.endValue);\n this.presetsItem.push({ id: 'custom_range', text: this.l10n.getConstant('customRange'), start: startDate, end: endDate });\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n this.isCustomRange = true;\n this.activeIndex = this.presetsItem.length - 1;\n }\n }\n };\n DateRangePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n if (!this.isMobile) {\n this.keyInputConfigs = extend(this.keyInputConfigs, this.keyConfigs);\n this.inputKeyboardModule = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputHandler.bind(this),\n keyConfigs: this.keyInputConfigs\n });\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (this.enabled) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.tabIndex = -1;\n }\n };\n DateRangePicker.prototype.unBindEvents = function () {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);\n }\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.inputKeyboardModule)) {\n this.inputKeyboardModule.destroy();\n }\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n this.inputElement.tabIndex = -1;\n };\n DateRangePicker.prototype.updateHiddenInput = function () {\n if (this.firstHiddenChild && this.secondHiddenChild) {\n var format = { format: this.formatString, type: 'datetime', skeleton: 'yMd' };\n if (typeof this.startDate === 'string') {\n this.startDate = this.globalize.parseDate(this.getAmPmValue(this.startDate), format);\n }\n if (typeof this.endDate === 'string') {\n this.endDate = this.globalize.parseDate(this.getAmPmValue(this.endDate), format);\n }\n this.firstHiddenChild.value = (this.startDate && this.globalize.formatDate(this.startDate, format))\n || (this.inputElement.value);\n this.secondHiddenChild.value = (this.endDate && this.globalize.formatDate(this.endDate, format)) ||\n (this.inputElement.value);\n this.dispatchEvent(this.firstHiddenChild, 'focusout');\n this.dispatchEvent(this.firstHiddenChild, 'change');\n }\n };\n DateRangePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n this.updateHiddenInput();\n };\n DateRangePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DateRangePicker.prototype.resetHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.valueType = this.value;\n e.preventDefault();\n this.clear();\n var clearedArgs = {\n event: e\n };\n this.setProperties({ endDate: this.checkDateValue(this.endValue) }, true);\n this.setProperties({ startDate: this.checkDateValue(this.startValue) }, true);\n this.trigger('cleared', clearedArgs);\n this.changeTrigger(e);\n this.clearRange();\n this.hide(e);\n if (closest(this.element, 'form')) {\n var element = this.firstHiddenChild;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n DateRangePicker.prototype.restoreValue = function () {\n this.previousEleValue = this.inputElement.value;\n this.previousStartValue = this.startValue;\n this.previousEndValue = this.endValue;\n this.valueType = null;\n this.initStartDate = this.checkDateValue(this.startValue);\n this.initEndDate = this.checkDateValue(this.endValue);\n this.setValue();\n this.setModelValue();\n };\n DateRangePicker.prototype.formResetHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.formElement && (e.target === this.formElement) && !this.inputElement.disabled) {\n var val = this.inputElement.getAttribute('value');\n if (!isNullOrUndefined(this.startCopy)) {\n if (!isNullOrUndefined(this.value) && !isNullOrUndefined(this.value.start)) {\n this.setProperties({ value: { start: this.startCopy, end: this.endCopy } }, true);\n this.startValue = this.value.start;\n this.endValue = this.value.end;\n }\n else {\n this.setProperties({ value: [this.startCopy, this.endCopy] }, true);\n this.startValue = this.value[0];\n this.endValue = this.value[1];\n }\n this.setProperties({ startDate: this.startValue, endDate: this.endValue }, true);\n }\n else {\n this.setProperties({ value: null, startDate: null, endDate: null }, true);\n this.startValue = this.endValue = null;\n }\n if (this.element.tagName === 'EJS-DATERANGEPICKER') {\n this.setProperties({ value: null, startDate: null, endDate: null }, true);\n val = '';\n this.startValue = this.endValue = null;\n this.inputElement.setAttribute('value', '');\n }\n this.restoreValue();\n if (this.inputElement) {\n Input.setValue(val, this.inputElement, this.floatLabelType, this.showClearButton);\n this.errorClass();\n }\n }\n };\n DateRangePicker.prototype.clear = function () {\n if (this.startValue !== null) {\n this.startValue = null;\n }\n if (this.endValue !== null) {\n this.endValue = null;\n }\n if (this.value && this.value.start) {\n this.setProperties({ value: { start: null, end: null } }, true);\n }\n if (this.value !== null && this.value.length > 0) {\n this.setProperties({ value: null }, true);\n }\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n if (!(isNullOrUndefined(this.applyButton))) {\n this.applyButton.disabled = this.applyButton.element.disabled = true;\n }\n this.removeSelection();\n };\n DateRangePicker.prototype.rangeIconHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.isMobile) {\n this.inputElement.setAttribute('readonly', '');\n }\n e.preventDefault();\n this.targetElement = null;\n if (this.isPopupOpen() && document.body.contains(this.popupObj.element)) {\n this.applyFunction(e);\n }\n else {\n this.isRangeIconClicked = true;\n this.inputWrapper.container.children[0].focus();\n this.show(null, e);\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.leftCalendar)) {\n this.isRangeIconClicked = false;\n this.calendarFocus();\n this.isRangeIconClicked = true;\n }\n }\n addClass([this.inputWrapper.container], [INPUTFOCUS$1]);\n }\n };\n DateRangePicker.prototype.checkHtmlAttributes = function (isDynamic) {\n this.globalize = new Internationalization(this.locale);\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['startDate', 'endDate', 'minDays', 'maxDays', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder',\n 'type', 'value'];\n var format = { format: this.formatString, type: 'date', skeleton: 'yMd' };\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['enabled'] === undefined)) || isDynamic) {\n var disabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ enabled: !disabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === 'true' || this.inputElement.getAttribute(prop) === '' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['value'] === undefined)) || isDynamic) {\n var value = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, value, {}), !isDynamic);\n }\n break;\n case 'style':\n this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));\n break;\n case 'min':\n if ((isNullOrUndefined(this.min) || +this.min === +new Date(1900, 0, 1)) || isDynamic) {\n var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);\n this.setProperties(setValue(prop, dateValue, {}), !isDynamic);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));\n break;\n case 'max':\n if ((isNullOrUndefined(this.max) || +this.max === +new Date(2099, 11, 31)) || isDynamic) {\n var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);\n this.setProperties(setValue(prop, dateValue, {}), !isDynamic);\n }\n break;\n case 'startDate':\n if (isNullOrUndefined(this.startDate)) {\n var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);\n this.startValue = dateValue;\n this.setValue();\n }\n break;\n case 'endDate':\n if (isNullOrUndefined(this.endDate)) {\n var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);\n this.endValue = dateValue;\n this.setValue();\n }\n break;\n case 'minDays':\n if (isNullOrUndefined(this.minDays)) {\n this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);\n }\n break;\n case 'maxDays':\n if (isNullOrUndefined(this.maxDays)) {\n this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);\n }\n break;\n case 'type':\n if (this.inputElement.getAttribute(prop) !== 'text') {\n this.inputElement.setAttribute('type', 'text');\n }\n break;\n }\n }\n }\n };\n DateRangePicker.prototype.createPopup = function () {\n for (var i = 0; i < this.presetsItem.length; i++) {\n if ((i !== (this.presetsItem.length - 1)) && this.presetsItem[i].id === 'custom_range') {\n this.presetsItem.splice(i, 1);\n }\n }\n this.activeIndex = this.presetsItem.length - 1;\n this.isCustomRange = true;\n for (var i = 0; i <= this.presetsItem.length - 2; i++) {\n var startDate = this.presetsItem[i].start;\n var endDate = this.presetsItem[i].end;\n if (this.startValue && this.endValue) {\n if (startDate.getDate() === this.startValue.getDate() && startDate.getMonth() === this.startValue.getMonth() &&\n startDate.getFullYear() === this.startValue.getFullYear() && endDate.getDate() === this.endValue.getDate() &&\n endDate.getMonth() === this.endValue.getMonth() && endDate.getFullYear() === this.endValue.getFullYear()) {\n this.activeIndex = i;\n this.isCustomRange = false;\n }\n }\n }\n this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: ROOT$2 + ' ' + POPUP$1 });\n this.popupWrapper.setAttribute('aria-label', this.element.id);\n this.popupWrapper.setAttribute('role', 'dialog');\n this.adjustLongHeaderWidth();\n var isPreset = (!this.isCustomRange || this.isMobile);\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {\n this.isCustomWindow = false;\n this.createPresets();\n this.listRippleEffect();\n this.renderPopup();\n }\n else {\n this.isCustomWindow = true;\n this.renderControl();\n }\n };\n DateRangePicker.prototype.renderControl = function () {\n this.createControl();\n this.bindCalendarEvents();\n this.updateRange((this.isMobile ? [this.calendarElement] : [this.leftCalendar, this.rightCalendar]));\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) &&\n !isNullOrUndefined(this.renderDayCellArgs) && this.renderDayCellArgs.isDisabled) {\n this.disabledDateRender();\n }\n this.updateHeader();\n };\n DateRangePicker.prototype.clearCalendarEvents = function () {\n if (this.leftCalPrevIcon && this.leftCalNextIcon && this.rightCalPrevIcon && this.rightCalNextIcon) {\n EventHandler.clearEvents(this.leftCalPrevIcon);\n EventHandler.clearEvents(this.leftCalNextIcon);\n EventHandler.clearEvents(this.rightCalPrevIcon);\n EventHandler.clearEvents(this.rightCalNextIcon);\n }\n };\n DateRangePicker.prototype.updateNavIcons = function () {\n _super.prototype.iconHandler.call(this);\n };\n DateRangePicker.prototype.calendarIconEvent = function () {\n this.clearCalendarEvents();\n if (this.leftCalPrevIcon && !this.leftCalPrevIcon.classList.contains(DISABLED$2)) {\n EventHandler.add(this.leftCalPrevIcon, 'mousedown', this.navPrevFunction);\n }\n if (this.leftCalNextIcon && !this.leftCalNextIcon.classList.contains(DISABLED$2)) {\n EventHandler.add(this.leftCalNextIcon, 'mousedown', this.navNextFunction);\n }\n if (this.rightCalPrevIcon && !this.rightCalPrevIcon.classList.contains(DISABLED$2)) {\n EventHandler.add(this.rightCalPrevIcon, 'mousedown', this.navPrevFunction);\n }\n if (this.rightCalNextIcon && !this.rightCalNextIcon.classList.contains(DISABLED$2)) {\n EventHandler.add(this.rightCalNextIcon, 'mousedown', this.navNextFunction);\n }\n };\n DateRangePicker.prototype.bindCalendarEvents = function () {\n if (!this.isMobile) {\n this.updateNavIcons();\n this.calendarIconEvent();\n this.calendarIconRipple();\n this.headerTitleElement = this.popupObj.element.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1 + ' .' + TITLE$1);\n this.headerTitleElement = this.popupObj.element.querySelector('.' + LEFTCALENDER + ' .' + HEADER$1 + ' .' + TITLE$1);\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.leftKeyboardModule = new KeyboardEvents(this.leftCalendar, {\n eventName: 'keydown',\n keyAction: this.keyInputHandler.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n this.rightKeyboardModule = new KeyboardEvents(this.rightCalendar, {\n eventName: 'keydown',\n keyAction: this.keyInputHandler.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n }\n else {\n this.deviceCalendarEvent();\n EventHandler.add(this.startButton.element, 'click', this.deviceHeaderClick, this);\n EventHandler.add(this.endButton.element, 'click', this.deviceHeaderClick, this);\n }\n if (this.start === this.depth) {\n this.bindCalendarCellEvents();\n }\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.calendarIconRipple = function () {\n rippleEffect(this.leftCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.leftCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n rippleEffect(this.rightCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.rightCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n };\n DateRangePicker.prototype.deviceCalendarEvent = function () {\n EventHandler.clearEvents(this.nextIcon);\n EventHandler.clearEvents(this.previousIcon);\n rippleEffect(this.nextIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.previousIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n if (this.nextIcon && !this.nextIcon.classList.contains(DISABLED$2)) {\n EventHandler.add(this.nextIcon, 'mousedown', this.deviceNavNextFunction);\n }\n if (this.previousIcon && !this.previousIcon.classList.contains(DISABLED$2)) {\n EventHandler.add(this.previousIcon, 'mousedown', this.deviceNavPrevFunction);\n }\n };\n DateRangePicker.prototype.deviceNavNext = function (e) {\n var calendar = closest(e.target, '.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n this.navigateNext(e);\n this.deviceNavigation();\n };\n DateRangePicker.prototype.deviceNavPrevious = function (e) {\n var calendar = closest(e.target, '.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n this.navigatePrevious(e);\n this.deviceNavigation();\n };\n DateRangePicker.prototype.updateDeviceCalendar = function (calendar) {\n if (calendar) {\n this.previousIcon = calendar.querySelector('.' + PREVICON$1);\n this.nextIcon = calendar.querySelector('.' + NEXTICON$1);\n this.calendarElement = calendar;\n this.deviceCalendar = calendar;\n this.contentElement = calendar.querySelector('.' + CONTENT$1);\n this.tableBodyElement = select('.' + CONTENT$1 + ' tbody', calendar);\n this.table = calendar.querySelector('.' + CONTENT$1).getElementsByTagName('table')[0];\n this.headerTitleElement = calendar.querySelector('.' + HEADER$1 + ' .' + TITLE$1);\n this.headerElement = calendar.querySelector('.' + HEADER$1);\n }\n };\n DateRangePicker.prototype.deviceHeaderClick = function (event) {\n var element = event.currentTarget;\n if (element.classList.contains(STARTBUTTON) && !isNullOrUndefined(this.startValue)) {\n this.endButton.element.classList.remove(ACTIVE$1);\n this.startButton.element.classList.add(ACTIVE$1);\n var calendar = this.popupObj.element.querySelector('.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n if (isNullOrUndefined(this.calendarElement.querySelector('.' + STARTDATE + ':not(.e-other-month)'))) {\n this.currentDate = new Date(+this.startValue);\n remove(this.tableBodyElement);\n this.createContentBody();\n this.deviceNavigation();\n }\n this.removeClassDisabled();\n }\n else if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n this.startButton.element.classList.remove(ACTIVE$1);\n this.endButton.element.classList.add(ACTIVE$1);\n var calendar = this.popupObj.element.querySelector('.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n if (isNullOrUndefined(this.calendarElement.querySelector('.' + ENDDATE + ':not(.e-other-month)'))) {\n this.currentDate = new Date(+this.endValue);\n remove(this.tableBodyElement);\n this.createContentBody();\n this.deviceNavigation();\n }\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n this.selectableDates();\n }\n };\n DateRangePicker.prototype.inputFocusHandler = function () {\n if (!this.enabled) {\n return;\n }\n this.preventBlur = false;\n var focusArguments = {\n model: this\n };\n if (!this.preventFocus) {\n this.trigger('focus', focusArguments);\n }\n this.updateClearIconState();\n if (this.openOnFocus && !this.preventFocus) {\n this.preventFocus = true;\n this.show();\n }\n else {\n this.preventFocus = true;\n }\n };\n DateRangePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (!this.preventBlur) {\n var value = this.inputElement.value;\n if (!isNullOrUndefined(this.presetsItem)) {\n if (this.presetsItem.length > 0 && this.previousEleValue !== this.inputElement.value) {\n this.activeIndex = this.presetsItem.length - 1;\n this.isCustomRange = true;\n }\n }\n if (!isNullOrUndefined(value) && value.trim() !== '') {\n var range = value.split(' ' + this.separator + ' ');\n if (range.length > 1) {\n this.invalidValueString = null;\n var dateOptions = { format: this.formatString, type: 'date', skeleton: 'yMd' };\n var start = this.globalize.parseDate(this.getAmPmValue(range[0]), dateOptions);\n var end = this.globalize.parseDate(this.getAmPmValue(range[1]), dateOptions);\n var startDate = this.getStartEndDate(start, false, range, dateOptions);\n var endDate = this.getStartEndDate(end, true, range, dateOptions);\n if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {\n var prevStartVal = this.startValue;\n this.startValue = startDate;\n var prevEndVal = this.endValue;\n this.endValue = endDate;\n this.setValue();\n this.refreshControl();\n if (value !== this.previousEleValue) {\n this.changeTrigger(e);\n }\n if (!this.preventBlur && document.activeElement !== this.inputElement) {\n this.preventFocus = false;\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n this.updateHiddenInput();\n // For Mobile mode, when a value is present and choose another range and click on console\n // when popup is open, two startvalues and end values are updated in the popup.\n if (this.isMobile && this.isPopupOpen()) {\n this.startValue = prevStartVal;\n this.endValue = prevEndVal;\n }\n return;\n }\n else {\n if (!this.strictMode) {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n }\n else {\n if (!this.strictMode) {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n }\n if (!this.strictMode) {\n if (isNullOrUndefined(this.popupObj)) {\n this.currentDate = null;\n }\n this.previousStartValue = this.previousEndValue = null;\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n else {\n if (!isNullOrUndefined(value) && value.trim() === '') {\n this.startValue = null;\n this.endValue = null;\n }\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.updateInput();\n }\n this.errorClass();\n this.changeTrigger(e);\n if (!this.preventBlur && document.activeElement !== this.inputElement) {\n this.preventFocus = false;\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n }\n this.updateHiddenInput();\n };\n DateRangePicker.prototype.getStartEndDate = function (date, isEnd, range, dateOptions) {\n if (this.depth === 'Month') {\n return this.globalize.parseDate(this.getAmPmValue(range[isEnd ? 1 : 0]).trim(), dateOptions);\n }\n else if (this.depth === 'Year' && !isNullOrUndefined(date)) {\n return new Date(date.getFullYear(), date.getMonth() + (isEnd ? 1 : 0), isEnd ? 0 : 1);\n }\n else if (!isNullOrUndefined(date)) {\n return new Date(date.getFullYear(), isEnd ? 11 : 0, isEnd ? 31 : 1);\n }\n else {\n return null;\n }\n };\n DateRangePicker.prototype.clearRange = function () {\n this.previousStartValue = this.previousEndValue = null;\n this.currentDate = null;\n };\n DateRangePicker.prototype.errorClass = function () {\n var inputStr = !isNullOrUndefined(this.inputElement.value) ? this.inputElement.value.trim() : null;\n if (((isNullOrUndefined(this.endValue) && isNullOrUndefined(this.startValue) && inputStr !== '') ||\n ((!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)\n || (!isNullOrUndefined(this.endValue) && +this.endValue > +this.max))\n || ((this.startValue && this.isDateDisabled(this.startValue))\n || (this.endValue && this.isDateDisabled(this.endValue)))) && inputStr !== '') {\n addClass([this.inputWrapper.container], ERROR$1);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n else {\n if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], ERROR$1);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n }\n }\n };\n DateRangePicker.prototype.keyCalendarUpdate = function (isLeftCalendar, ele, isRemoveFocus) {\n if (isRemoveFocus === void 0) { isRemoveFocus = true; }\n if (isRemoveFocus) {\n this.removeFocusedDate();\n }\n if (isLeftCalendar) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n ele = this.leftCalendar;\n }\n else {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n ele = this.rightCalendar;\n }\n this.updateCalendarElement(ele);\n this.table.focus();\n return ele;\n };\n DateRangePicker.prototype.navInCalendar = function (e, isLeftCalendar, leftLimit, rightLimit, ele) {\n var view = this.getViewNumber(this.currentView());\n var date;\n var min = this.min;\n var max;\n if (!isNullOrUndefined(this.maxDays) && this.isMaxDaysClicked && !isNullOrUndefined(this.startValue)) {\n max = new Date(new Date(+this.startValue).setDate(this.startValue.getDate() + (this.maxDays - 1)));\n }\n else {\n max = this.max;\n }\n switch (e.action) {\n case 'moveRight':\n date = new Date(+this.currentDate);\n this.addDay(date, 1, e, max, min);\n if (isLeftCalendar && +date === +rightLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.keyboardNavigate(1, view, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'moveLeft':\n date = new Date(+this.currentDate);\n this.addDay(date, -1, e, max, min);\n if (!isLeftCalendar) {\n if (+date === +leftLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n }\n this.keyboardNavigate(-1, view, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'moveUp':\n if (view === 0) {\n date = new Date(+this.currentDate);\n this.addDay(date, -7, e, max, min);\n if (+date <= +leftLimit && !isLeftCalendar) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.keyboardNavigate(-7, view, e, max, min);\n }\n else {\n this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.\n }\n this.keyNavigation(ele, e);\n break;\n case 'moveDown':\n if (view === 0) {\n date = new Date(+this.currentDate);\n this.addDay(date, 7, e, max, min);\n if (isLeftCalendar && +date >= +rightLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.keyboardNavigate(7, view, e, max, min);\n }\n else {\n this.keyboardNavigate(4, view, e, this.max, this.min);\n }\n this.keyNavigation(ele, e);\n break;\n case 'home':\n this.currentDate = this.firstDay(this.currentDate);\n remove(this.tableBodyElement);\n if (view === 0) {\n this.renderMonths(e);\n }\n else if (view === 1) {\n this.renderYears(e);\n }\n else {\n this.renderDecades(e);\n }\n this.keyNavigation(ele, e);\n break;\n case 'end':\n this.currentDate = this.lastDay(this.currentDate, view);\n remove(this.tableBodyElement);\n if (view === 0) {\n this.renderMonths(e);\n }\n else if (view === 1) {\n this.renderYears(e);\n }\n else {\n this.renderDecades(e);\n }\n this.keyNavigation(ele, e);\n break;\n case 'tab':\n if (this.tabKeyValidation(ele, LEFTCALENDER)) {\n ele = this.keyCalendarUpdate(false, ele, false);\n this.currentDate = this.firstCellToFocus(this.rightCalendar);\n view = this.getViewNumber(this.currentView());\n this.keyboardNavigate(0, view, e, max, min);\n this.keyNavigation(ele, e);\n }\n break;\n case 'shiftTab':\n if (this.tabKeyValidation(ele, RIGHTCALENDER)) {\n ele = this.keyCalendarUpdate(true, ele, false);\n this.currentDate = this.firstCellToFocus(this.leftCalendar);\n this.keyboardNavigate(0, view, e, max, min);\n this.keyNavigation(ele, e);\n }\n break;\n }\n };\n DateRangePicker.prototype.firstCellToFocus = function (calendar) {\n var focusAbleEle = this.getViewNumber(this.currentView()) === 2 ? calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-year)') : calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');\n var focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;\n var currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);\n var focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;\n return focusDate;\n };\n DateRangePicker.prototype.keyInputHandler = function (e, value) {\n var date;\n var view = this.getViewNumber(this.currentView());\n var rightDateLimit = new Date(this.rightCalCurrentDate.getFullYear(), this.rightCalCurrentDate.getMonth(), 1);\n var leftDateLimit = new Date(this.leftCalCurrentDate.getFullYear(), this.leftCalCurrentDate.getMonth() + 1, 0);\n var ele = closest(e.target, '.' + RIGHTCALENDER);\n ele = isNullOrUndefined(ele) ? this.leftCalendar : ele;\n var isLeftCalendar = ele.classList.contains(LEFTCALENDER);\n this.updateCalendarElement(ele);\n var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');\n var focusedDate = ele.querySelector('tr td.' + FOCUSDATE);\n var startDate = ele.querySelector('tr td.' + STARTDATE);\n var endDate = ele.querySelector('tr td.' + ENDDATE);\n var depthValue = this.getViewNumber(this.depth);\n var levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);\n var leftCalendar = closest(e.target, '.' + LEFTCALENDER);\n var rightCalendar = closest(e.target, '.' + RIGHTCALENDER);\n var presetElement = closest(e.target, '.' + PRESETS);\n if (!isNullOrUndefined(focusedDate)) {\n // eslint-disable-next-line no-self-assign\n this.currentDate = this.currentDate;\n }\n else if (!isNullOrUndefined(endDate) && !this.dateDisabled) {\n this.currentDate = new Date(+this.endValue);\n }\n else if (!isNullOrUndefined(startDate) && !this.dateDisabled) {\n this.currentDate = new Date(+this.startValue);\n }\n else if (!this.dateDisabled) {\n this.currentDate.setDate(1);\n }\n this.effect = '';\n switch (e.action) {\n case 'altUpArrow':\n if (this.isPopupOpen()) {\n this.hide(e);\n this.preventFocus = true;\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS$1]);\n }\n break;\n case 'select':\n if (levelRestrict) {\n var element = !isNullOrUndefined(focusedDate) ? focusedDate : startDate;\n if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED$2)) {\n this.selectRange(null, (element));\n }\n }\n else {\n if (!isNullOrUndefined(selectedDate) && !levelRestrict || !isNullOrUndefined(focusedDate)) {\n if (!isNullOrUndefined(this.value)) {\n if (this.calendarElement.classList.contains(LEFTCALENDER)) {\n value = this.startDate;\n }\n else {\n value = this.endDate;\n }\n }\n this.controlDown = e;\n this.contentClick(null, --view, (focusedDate || selectedDate), value);\n }\n }\n e.preventDefault();\n break;\n case 'controlHome':\n {\n var yearDate = new Date(this.currentDate.getFullYear(), 0, 1);\n if (!isLeftCalendar && +yearDate < +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n _super.prototype.navigateTo.call(this, 'Month', new Date(this.currentDate.getFullYear(), 0, 1));\n this.keyNavigation(ele, e);\n }\n break;\n case 'altRightArrow':\n if (!isNullOrUndefined(leftCalendar)) {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n else if (!isNullOrUndefined(rightCalendar)) {\n if (!isNullOrUndefined(this.presetElement)) {\n this.presetElement.focus();\n this.removeFocusedDate();\n }\n else {\n this.cancelButton.element.focus();\n }\n }\n else {\n if (!isNullOrUndefined(presetElement)) {\n this.cancelButton.element.focus();\n }\n }\n e.preventDefault();\n break;\n case 'altLeftArrow':\n if (!isNullOrUndefined(leftCalendar)) {\n if (this.applyButton.element.disabled !== true) {\n this.applyButton.element.focus();\n }\n else {\n this.cancelButton.element.focus();\n }\n }\n else {\n if (!isNullOrUndefined(rightCalendar)) {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n }\n e.preventDefault();\n break;\n case 'controlUp':\n if (this.calendarElement.classList.contains(LEFTCALENDER)) {\n this.calendarNavigation(e, this.calendarElement);\n }\n else {\n this.calendarNavigation(e, this.calendarElement);\n }\n e.preventDefault();\n break;\n case 'controlDown':\n if ((!isNullOrUndefined(selectedDate) || !isNullOrUndefined(focusedDate)) && !levelRestrict) {\n if (!isNullOrUndefined(this.value)) {\n if (this.calendarElement.classList.contains(LEFTCALENDER)) {\n value = this.startDate;\n }\n else {\n value = this.endDate;\n }\n }\n this.controlDown = e;\n this.contentClick(null, --view, (selectedDate || focusedDate), value);\n }\n e.preventDefault();\n break;\n case 'controlEnd':\n {\n var yearDate = new Date(this.currentDate.getFullYear(), 11, 31);\n if (isLeftCalendar && +yearDate > +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n _super.prototype.navigateTo.call(this, 'Month', new Date(this.currentDate.getFullYear(), 11, 31));\n this.keyNavigation(ele, e);\n }\n break;\n case 'pageUp':\n date = new Date(+this.currentDate);\n this.addMonths(date, -1);\n if (!isLeftCalendar && +date <= +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.addMonths(this.currentDate, -1);\n _super.prototype.navigateTo.call(this, 'Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'pageDown':\n date = new Date(+this.currentDate);\n this.addMonths(date, 1);\n if (isLeftCalendar && +date >= +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.addMonths(this.currentDate, 1);\n _super.prototype.navigateTo.call(this, 'Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftPageUp':\n date = new Date(+this.currentDate);\n this.addYears(date, -1);\n if (!isLeftCalendar && +date <= +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.addYears(this.currentDate, -1);\n _super.prototype.navigateTo.call(this, 'Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftPageDown':\n date = new Date(+this.currentDate);\n this.addYears(date, 1);\n if (isLeftCalendar && +date >= +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.addYears(this.currentDate, 1);\n _super.prototype.navigateTo.call(this, 'Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftTab':\n if (!isNullOrUndefined(this.presetElement)) {\n this.presetElement.setAttribute('tabindex', '0');\n this.presetElement.focus();\n this.removeFocusedDate();\n }\n if (isLeftCalendar) {\n e.preventDefault();\n }\n if (this.tabKeyValidation(ele, RIGHTCALENDER)) {\n this.currentDate = new Date(+this.leftCalCurrentDate);\n this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);\n }\n break;\n case 'spacebar':\n if (this.applyButton && !this.applyButton.disabled) {\n this.applyFunction(e);\n }\n break;\n case 'tab':\n if (this.tabKeyValidation(ele, LEFTCALENDER)) {\n this.currentDate = new Date(+this.rightCalCurrentDate);\n this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);\n }\n break;\n default:\n this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);\n this.checkMinMaxDays();\n }\n this.presetHeight();\n };\n DateRangePicker.prototype.tabKeyValidation = function (ele, calendarPos) {\n var isLeftCalendar = ele.classList.contains(calendarPos);\n var rightHeader = this.rightCalendar.querySelector('.e-header');\n var leftHeader = this.leftCalendar.querySelector('.e-header');\n var isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;\n var isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;\n var isRightYear = rightHeader ? rightHeader.classList.contains('e-year') : false;\n var isLeftYear = leftHeader ? leftHeader.classList.contains('e-year') : false;\n var isRightDecade = rightHeader ? rightHeader.classList.contains('e-decade') : false;\n var isLeftDecade = leftHeader ? leftHeader.classList.contains('e-decade') : false;\n return isLeftCalendar && (isLeftMonth || isLeftYear || isLeftDecade) &&\n (isRightMonth || isRightYear || isRightDecade) && !this.isMobile;\n };\n DateRangePicker.prototype.keyNavigation = function (calendar, e) {\n this.bindCalendarCellEvents(calendar);\n if (calendar.classList.contains(LEFTCALENDER)) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n }\n else {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n }\n this.updateNavIcons();\n this.calendarIconEvent();\n this.updateRange([calendar]);\n this.dateDisabled = this.isDateDisabled(this.currentDate);\n e.preventDefault();\n };\n DateRangePicker.prototype.inputHandler = function (e) {\n switch (e.action) {\n case 'altDownArrow':\n if (!this.isPopupOpen()) {\n if (this.inputElement.value === '') {\n this.clear();\n this.changeTrigger(e);\n this.clearRange();\n }\n this.show(null, e);\n this.isRangeIconClicked = false;\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.leftCalendar)) {\n this.calendarFocus();\n }\n }\n this.isKeyPopup = true;\n }\n break;\n case 'escape':\n if (this.isPopupOpen()) {\n this.hide(e);\n }\n break;\n case 'enter':\n if (document.activeElement === this.inputElement) {\n this.inputBlurHandler(e);\n this.hide(e);\n }\n break;\n case 'tab':\n if (document.activeElement === this.inputElement && this.isPopupOpen()) {\n this.hide(e);\n e.preventDefault();\n }\n break;\n }\n };\n DateRangePicker.prototype.bindCalendarCellEvents = function (calendar) {\n var tdCells;\n if (calendar) {\n tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n }\n else {\n tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td');\n }\n for (var _i = 0, tdCells_1 = tdCells; _i < tdCells_1.length; _i++) {\n var cell = tdCells_1[_i];\n EventHandler.clearEvents(cell);\n var disabledCell = cell.classList.contains(DISABLED$2) || cell.classList.contains(DATEDISABLED);\n if (!disabledCell && !cell.classList.contains(WEEKNUMBER$2)) {\n if (!this.isMobile) {\n EventHandler.add(cell, 'mouseover', this.hoverSelection, this);\n }\n EventHandler.add(cell, 'mousedown', this.selectRange, this);\n }\n }\n };\n DateRangePicker.prototype.removeFocusedDate = function () {\n var isDate = !isNullOrUndefined(this.startValue) || !isNullOrUndefined(this.endValue);\n var focusedDate = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' .' + FOCUSDATE);\n for (var _i = 0, focusedDate_1 = focusedDate; _i < focusedDate_1.length; _i++) {\n var ele = focusedDate_1[_i];\n var today = new Date();\n var eleDate = this.getIdValue(null, ele);\n if ((this.depth === 'Month' && this.currentView() === 'Month' &&\n (!ele.classList.contains(TODAY$2) || (ele.classList.contains(TODAY$2) && isDate)))\n || (this.depth === 'Year' && this.currentView() === 'Year' &&\n ((!this.isSameMonth(today, eleDate) && !this.isSameYear(today, eleDate)) || isDate))\n || (this.depth === 'Decade' && this.currentView() === 'Decade' &&\n (!this.isSameYear(today, eleDate) || isDate))) {\n ele.classList.remove(FOCUSDATE);\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(ENDDATE)) {\n ele.removeAttribute('aria-label');\n }\n }\n }\n };\n DateRangePicker.prototype.hoverSelection = function (event, element) {\n var currentElement = element || event.currentTarget;\n var currentDate = this.getIdValue(null, currentElement);\n if (!isNullOrUndefined(this.startValue) && +this.startValue >= +this.min && +this.startValue <= +this.max) {\n if ((!this.isDateDisabled(this.endValue) && !this.isDateDisabled(this.startValue)\n && isNullOrUndefined(this.endValue) && isNullOrUndefined(this.startValue))\n || (!isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue))) {\n var tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td');\n for (var _i = 0, tdCells_2 = tdCells; _i < tdCells_2.length; _i++) {\n var ele = tdCells_2[_i];\n var isDisabledCell = (!ele.classList.contains(DISABLED$2) || ele.classList.contains(DATEDISABLED));\n if (!ele.classList.contains(WEEKNUMBER$2) && isDisabledCell) {\n var eleDate = this.getIdValue(null, ele);\n var startDateValue = new Date(+this.startValue);\n var eleDateValue = new Date(+eleDate);\n if (eleDateValue.setHours(0, 0, 0, 0) >= startDateValue.setHours(0, 0, 0, 0) && +eleDate <= +currentDate) {\n addClass([ele], RANGEHOVER);\n }\n else {\n removeClass([ele], [RANGEHOVER]);\n }\n }\n }\n }\n }\n };\n DateRangePicker.prototype.isSameStartEnd = function (startVal, endVal) {\n var isSame = false;\n if (this.depth === 'Month') {\n if ((startVal).setHours(0, 0, 0, 0) === (endVal).setHours(0, 0, 0, 0)) {\n isSame = true;\n }\n }\n else if (this.depth === 'Year') {\n if ((startVal.getFullYear() === endVal.getFullYear()) &&\n (startVal.getMonth() === endVal.getMonth())) {\n isSame = true;\n }\n }\n else if (this.depth === 'Decade') {\n if (startVal.getFullYear() === endVal.getFullYear()) {\n isSame = true;\n }\n }\n return isSame;\n };\n DateRangePicker.prototype.updateRange = function (elementCollection) {\n if (!isNullOrUndefined(this.startValue)) {\n for (var _i = 0, elementCollection_1 = elementCollection; _i < elementCollection_1.length; _i++) {\n var calendar = elementCollection_1[_i];\n var tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n for (var _a = 0, tdCells_3 = tdCells; _a < tdCells_3.length; _a++) {\n var ele = tdCells_3[_a];\n if (!ele.classList.contains(WEEKNUMBER$2) && !ele.classList.contains(DISABLED$2)) {\n var eleDate = this.getIdValue(null, ele);\n var eleDateValue = this.getIdValue(null, ele);\n if (!isNullOrUndefined(this.endValue)) {\n if (this.currentView() === this.depth &&\n +eleDateValue.setHours(0, 0, 0, 0) >= +new Date(+this.startValue).setHours(0, 0, 0, 0)\n && +eleDateValue.setHours(0, 0, 0, 0) <= +new Date(+this.endValue).setHours(0, 0, 0, 0) &&\n !this.isSameStartEnd(new Date(+this.startValue), new Date(+this.endValue)) &&\n +new Date(+this.startValue).setHours(0, 0, 0, 0) >= +this.min\n && +new Date(+this.endValue).setHours(0, 0, 0, 0) <= +this.max\n && !(this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue))) {\n addClass([ele], RANGEHOVER);\n }\n }\n else {\n removeClass([ele], [RANGEHOVER]);\n }\n if (ele.classList.contains(SELECTED$3) && ele.classList.contains(ENDDATE) &&\n (+eleDateValue !== +this.endValue)) {\n removeClass([ele], [SELECTED$3]);\n removeClass([ele], [ENDDATE]);\n }\n if (ele.classList.contains(RANGEHOVER) && (+eleDateValue > +this.endValue)) {\n removeClass([ele], [RANGEHOVER]);\n }\n if (!ele.classList.contains(OTHERMONTH$2)) {\n var startDateValue = new Date(+this.startValue);\n var eleDateValue_1 = new Date(+eleDate);\n if (this.currentView() === this.depth &&\n +eleDateValue_1.setHours(0, 0, 0, 0) === +startDateValue.setHours(0, 0, 0, 0)\n && +eleDateValue_1.setHours(0, 0, 0, 0) >= +startDateValue.setHours(0, 0, 0, 0) &&\n +this.startValue >= +this.min\n && !this.inputWrapper.container.classList.contains('e-error')\n && !(this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue))) {\n addClass([ele], [STARTDATE, SELECTED$3]);\n this.addSelectedAttributes(ele, this.startValue, true);\n }\n var endDateValue = new Date(+this.endValue);\n if (this.currentView() === 'Year') {\n eleDateValue_1 = new Date(eleDateValue_1.getFullYear(), eleDateValue_1.getMonth() + 1, 0);\n }\n else if (this.currentView() === 'Decade') {\n eleDateValue_1 = new Date(eleDateValue_1.getFullYear(), 11, 31);\n }\n if (this.currentView() === this.depth &&\n !isNullOrUndefined(this.endValue) &&\n +eleDateValue_1.setHours(0, 0, 0, 0) === +endDateValue.setHours(0, 0, 0, 0)\n && +eleDateValue_1.setHours(0, 0, 0, 0) <= +endDateValue.setHours(0, 0, 0, 0) &&\n +this.startValue >= +this.min\n && !this.inputWrapper.container.classList.contains('e-error')\n && !(this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue))) {\n addClass([ele], [ENDDATE, SELECTED$3]);\n this.addSelectedAttributes(ele, this.startValue, false);\n }\n if (+eleDate === +this.startValue && !isNullOrUndefined(this.endValue) && +eleDate === +this.endValue) {\n this.addSelectedAttributes(ele, this.endValue, false, true);\n }\n }\n }\n }\n }\n }\n };\n DateRangePicker.prototype.checkMinMaxDays = function () {\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) || (!isNullOrUndefined(this.maxDays) && this.maxDays > 0)) {\n if (!this.isMobile) {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + LEFTCALENDER));\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + RIGHTCALENDER));\n }\n else {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n }\n }\n };\n DateRangePicker.prototype.rangeArgs = function (e) {\n var inputValue;\n var range;\n var startDate = !isNullOrUndefined(this.startValue) ?\n this.globalize.formatDate(this.startValue, {\n format: this.formatString, type: 'date', skeleton: 'yMd'\n }) : null;\n var endDate = !isNullOrUndefined(this.endValue) ?\n this.globalize.formatDate(this.endValue, {\n format: this.formatString, type: 'date', skeleton: 'yMd'\n }) : null;\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n inputValue = startDate + ' ' + this.separator + ' ' + endDate;\n range = (Math.round(Math.abs((this.removeTimeValueFromDate(this.startValue).getTime() -\n this.removeTimeValueFromDate(this.endValue).getTime()) / (1000 * 60 * 60 * 24))) + 1);\n }\n else {\n inputValue = '';\n range = 0;\n }\n var args = {\n value: this.value,\n startDate: this.startValue,\n endDate: this.endValue,\n daySpan: range,\n event: e || null,\n element: this.element,\n isInteracted: !isNullOrUndefined(e),\n text: inputValue\n };\n return args;\n };\n DateRangePicker.prototype.otherMonthSelect = function (ele, isStartDate, sameDate) {\n var value = +this.getIdValue(null, ele);\n var dateIdString = '*[id^=\"/id\"]:not(.e-other-month)'.replace('/id', '' + value);\n var tdCell = this.popupObj && this.popupObj.element.querySelector(dateIdString);\n if (!isNullOrUndefined(tdCell)) {\n if (isStartDate) {\n addClass([tdCell], [STARTDATE, SELECTED$3]);\n this.addSelectedAttributes(tdCell, this.startValue, true);\n }\n else {\n addClass([tdCell], [ENDDATE, SELECTED$3]);\n this.addSelectedAttributes(tdCell, this.endValue, true);\n }\n if (sameDate) {\n this.addSelectedAttributes(ele, this.endValue, false, true);\n }\n }\n };\n DateRangePicker.prototype.selectRange = function (event, element) {\n var leftCalendar;\n var rightCalendar;\n if (event) {\n event.preventDefault();\n }\n var date = isNullOrUndefined(event) ? this.getIdValue(null, element)\n : this.getIdValue(event, null);\n var y = date.getFullYear();\n var m = date.getMonth();\n var firstDay = new Date(y, m, 1);\n var lastDay = new Date(y, m + 1, 0);\n var firstMonth = new Date(y, 0, 1);\n var lastMonth = new Date(y, 11, 31);\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n if (!this.isMobile || this.isMobile && !this.endButton.element.classList.contains(ACTIVE$1)) {\n this.removeSelection();\n }\n }\n else if (this.isMobile && this.startButton.element.classList.contains(ACTIVE$1)) {\n this.removeSelection();\n }\n var ele = element || event.currentTarget;\n if (isNullOrUndefined(this.startValue)) {\n if (!isNullOrUndefined(this.previousStartValue)) {\n date.setHours(this.previousStartValue.getHours());\n date.setMinutes(this.previousStartValue.getMinutes());\n date.setSeconds(this.previousStartValue.getSeconds());\n }\n this.startValue = (this.depth === 'Month') ? new Date(this.checkValue(date)) :\n (this.depth === 'Year') ? firstDay : firstMonth;\n this.endValue = null;\n this.setValue();\n addClass([ele], STARTDATE);\n this.addSelectedAttributes(ele, this.startValue, true);\n if (ele.classList.contains(OTHERMONTH$2)) {\n this.otherMonthSelect(ele, true);\n }\n this.checkMinMaxDays();\n this.applyButton.disabled = true;\n this.applyButton.element.disabled = true;\n if (this.isMobile) {\n this.endButton.element.classList.add(ACTIVE$1);\n this.startButton.element.classList.remove(ACTIVE$1);\n this.endButton.element.removeAttribute('disabled');\n this.selectableDates();\n }\n this.trigger('select', this.rangeArgs(event));\n }\n else {\n if (+date === +this.startValue || +date > +this.startValue) {\n if (+date === +this.startValue && !isNullOrUndefined(this.minDays) && this.minDays > 1) {\n return;\n }\n this.endValue = null;\n this.setValue();\n if (this.isMobile || element) {\n this.hoverSelection(event, element);\n }\n if (!isNullOrUndefined(this.previousEndValue)) {\n date.setHours(this.previousEndValue.getHours());\n date.setMinutes(this.previousEndValue.getMinutes());\n date.setSeconds(this.previousEndValue.getSeconds());\n }\n this.endValue = (this.depth === 'Month') ? new Date(this.checkValue(date)) :\n (this.depth === 'Year') ? lastDay : lastMonth;\n this.setValue();\n var endEle = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n if (this.isMobile) {\n this.startButton.element.classList.remove(ACTIVE$1);\n this.endButton.element.classList.add(ACTIVE$1);\n for (var _i = 0, endEle_1 = endEle; _i < endEle_1.length; _i++) {\n var ele_1 = endEle_1[_i];\n ele_1.removeAttribute('aria-label');\n if (!ele_1.classList.contains(STARTDATE)) {\n ele_1.setAttribute('aria-selected', 'false');\n removeClass([ele_1], [ENDDATE, SELECTED$3]);\n }\n else {\n this.addSelectedAttributes(ele_1, this.startValue, true);\n removeClass([ele_1], [ENDDATE]);\n }\n }\n }\n addClass([ele], ENDDATE);\n if (+this.endValue === +this.startValue) {\n this.addSelectedAttributes(ele, this.endValue, false, true);\n }\n else {\n this.addSelectedAttributes(ele, this.endValue, false);\n }\n if (ele.classList.contains(OTHERMONTH$2)) {\n if (+this.endValue === +this.startValue) {\n this.otherMonthSelect(ele, false, true);\n }\n else {\n this.otherMonthSelect(ele, false);\n }\n }\n endEle = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n for (var _a = 0, endEle_2 = endEle; _a < endEle_2.length; _a++) {\n var ele_2 = endEle_2[_a];\n if (ele_2.classList.contains(STARTDATE)) {\n removeClass([ele_2], [RANGEHOVER]);\n }\n }\n this.applyButton.disabled = false;\n this.applyButton.element.disabled = false;\n if (!this.isMobile) {\n this.removeClassDisabled();\n }\n if (!isNullOrUndefined(this.renderDayCellArgs) && this.renderDayCellArgs.isDisabled) {\n this.disabledDateRender();\n }\n this.trigger('select', this.rangeArgs(event));\n }\n else if (+date < +this.startValue) {\n this.removeClassDisabled();\n this.startValue = (this.depth === 'Month') ? new Date(this.checkValue(date)) :\n (this.depth === 'Year') ? firstDay : firstMonth;\n this.setValue();\n this.removeSelectedAttributes();\n removeClass(this.popupObj.element.querySelectorAll('.' + STARTDATE), [STARTDATE, SELECTED$3]);\n addClass([ele], STARTDATE);\n this.addSelectedAttributes(ele, this.startValue, true);\n if (ele.classList.contains(OTHERMONTH$2)) {\n this.otherMonthSelect(ele, true);\n }\n this.checkMinMaxDays();\n }\n }\n if (event) {\n leftCalendar = closest(event.target, '.' + LEFTCALENDER);\n }\n if (!isNullOrUndefined(leftCalendar)) {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n else {\n if (event) {\n rightCalendar = event && closest(event.target, '.' + RIGHTCALENDER);\n }\n if (!isNullOrUndefined(rightCalendar)) {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n }\n addClass([ele], SELECTED$3);\n this.calendarIconEvent();\n this.updateHeader();\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.selectableDates = function () {\n if (!isNullOrUndefined(this.startValue)) {\n var tdCells = this.calendarElement.querySelectorAll('.' + CALENDAR + ' td');\n var isStartDate = false;\n if (this.currentView() === this.depth) {\n for (var _i = 0, tdCells_4 = tdCells; _i < tdCells_4.length; _i++) {\n var ele = tdCells_4[_i];\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(WEEKNUMBER$2)) {\n if (!ele.classList.contains(DISABLED$2)) {\n var eleDate = this.getIdValue(null, ele);\n if (+eleDate < +this.startValue) {\n addClass([ele], [DATEDISABLED, DISABLED$2, OVERLAY$2]);\n EventHandler.clearEvents(ele);\n continue;\n }\n else {\n break;\n }\n }\n }\n if (ele.classList.contains(STARTDATE) && !ele.classList.contains(OTHERMONTH$2)) {\n isStartDate = true;\n break;\n }\n }\n if (isStartDate) {\n if (!this.previousIcon.classList.contains(DISABLED$2)) {\n addClass([this.previousIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n }\n }\n else {\n for (var _a = 0, tdCells_5 = tdCells; _a < tdCells_5.length; _a++) {\n var ele = tdCells_5[_a];\n var startMonth = this.startValue.getMonth();\n var startYear = this.startValue.getFullYear();\n var element = this.getIdValue(null, ele);\n if (!this.startButton.element.classList.contains(ACTIVE$1) && ((this.currentView() === 'Year' &&\n (element.getMonth() < startMonth) && (element.getFullYear() <= startYear))\n || (this.currentView() === 'Decade' && (element.getMonth() <= startMonth) &&\n (element.getFullYear() < startYear)))) {\n addClass([ele], [DISABLED$2]);\n }\n else {\n break;\n }\n }\n if (tdCells[0].classList.contains(DISABLED$2)) {\n this.previousIconHandler(true);\n }\n else if (tdCells[tdCells.length - 1].classList.contains(DISABLED$2)) {\n this.nextIconHandler(true);\n }\n }\n }\n };\n DateRangePicker.prototype.updateMinMaxDays = function (calendar) {\n if ((!isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) ||\n (this.isMobile && this.endButton && this.endButton.element.classList.contains(ACTIVE$1))) {\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) || (!isNullOrUndefined(this.maxDays) && this.maxDays > 0)) {\n var startValueSelected = this.removeTimeValueFromDate(this.startValue);\n var minDate = new Date(new Date(+startValueSelected).setDate(startValueSelected.getDate() + (this.minDays - 1)));\n var maxDate = new Date(new Date(+startValueSelected).setDate(startValueSelected.getDate() + (this.maxDays - 1)));\n minDate = (!isNullOrUndefined(this.minDays) && this.minDays > 0) ? minDate : null;\n maxDate = (!isNullOrUndefined(this.maxDays) && this.maxDays > 0) ? maxDate : null;\n if (this.currentView() === 'Year') {\n minDate = isNullOrUndefined(minDate) ? null : new Date(minDate.getFullYear(), minDate.getMonth(), 0);\n maxDate = isNullOrUndefined(maxDate) ? null : new Date(maxDate.getFullYear(), maxDate.getMonth(), 1);\n }\n else if (this.currentView() === 'Decade') {\n minDate = isNullOrUndefined(minDate) ? null : new Date(minDate.getFullYear() - 1, 11, 1);\n maxDate = isNullOrUndefined(maxDate) ? null : new Date(maxDate.getFullYear(), 0, 1);\n }\n var tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n var maxEle = void 0;\n for (var _i = 0, tdCells_6 = tdCells; _i < tdCells_6.length; _i++) {\n var ele = tdCells_6[_i];\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(WEEKNUMBER$2)) {\n var eleDate = this.getIdValue(null, ele);\n eleDate = this.removeTimeValueFromDate(eleDate);\n if (!isNullOrUndefined(minDate) && +eleDate === +minDate && ele.classList.contains(DISABLED$2)) {\n minDate.setDate(minDate.getDate() + 1);\n }\n if (!ele.classList.contains(DISABLED$2)) {\n if (+eleDate <= +startValueSelected) {\n continue;\n }\n if (!isNullOrUndefined(minDate) && +eleDate < +minDate) {\n addClass([ele], [DATEDISABLED, DISABLED$2, OVERLAY$2]);\n EventHandler.clearEvents(ele);\n }\n if (!isNullOrUndefined(maxDate) && +eleDate > +maxDate) {\n addClass([ele], [DATEDISABLED, DISABLED$2, OVERLAY$2]);\n this.isMaxDaysClicked = true;\n EventHandler.clearEvents(ele);\n if (isNullOrUndefined(maxEle) && !ele.classList.contains(OTHERMONTH$2)) {\n maxEle = ele;\n }\n }\n }\n }\n }\n if (!isNullOrUndefined(maxEle)) {\n if (this.isMobile) {\n if (!this.nextIcon.classList.contains(DISABLED$2)) {\n addClass([this.nextIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n }\n else {\n var calendar_1 = closest(maxEle, '.' + RIGHTCALENDER);\n calendar_1 = isNullOrUndefined(calendar_1) ? this.leftCalendar : calendar_1;\n var isLeftCalendar = calendar_1.classList.contains(LEFTCALENDER);\n if (!isLeftCalendar) {\n if (!this.rightCalNextIcon.classList.contains(DISABLED$2)) {\n addClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n }\n else {\n if (!this.rightCalNextIcon.classList.contains(DISABLED$2)) {\n addClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n if (!this.leftCalNextIcon.classList.contains(DISABLED$2)) {\n addClass([this.leftCalNextIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n if (!this.rightCalPrevIcon.classList.contains(DISABLED$2)) {\n addClass([this.rightCalPrevIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n }\n }\n }\n }\n }\n else {\n this.isMaxDaysClicked = false;\n }\n };\n DateRangePicker.prototype.removeTimeValueFromDate = function (value) {\n var dateValue = new Date(value.getFullYear(), value.getMonth(), value.getDate());\n return dateValue;\n };\n DateRangePicker.prototype.removeClassDisabled = function () {\n var tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td' + '.' + DATEDISABLED);\n for (var _i = 0, tdCells_7 = tdCells; _i < tdCells_7.length; _i++) {\n var ele = tdCells_7[_i];\n if (ele.classList.contains(DATEDISABLED)) {\n removeClass([ele], [DATEDISABLED, DISABLED$2, OVERLAY$2]);\n EventHandler.add(ele, 'click', this.selectRange, this);\n if (!this.isMobile) {\n EventHandler.add(ele, 'mouseover', this.hoverSelection, this);\n }\n }\n }\n if (this.isMobile) {\n if (this.nextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.nextIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n if (this.previousIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.previousIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n }\n else {\n if (this.rightCalNextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n if (this.rightCalPrevIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.rightCalPrevIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n if (this.leftCalNextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.leftCalNextIcon], [ICONDISABLED, DISABLED$2, OVERLAY$2]);\n }\n }\n };\n DateRangePicker.prototype.updateHeader = function () {\n var format = { type: 'date', skeleton: 'yMMMd' };\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n var range = (Math.round(Math.abs((this.removeTimeValueFromDate(this.startValue).getTime() -\n this.removeTimeValueFromDate(this.endValue).getTime()) / (1000 * 60 * 60 * 24))) + 1);\n if (!isNullOrUndefined(this.disabledDayCnt)) {\n range = range - this.disabledDayCnt;\n this.disabledDayCnt = null;\n }\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = range.toString() + ' ' + this.l10n.getConstant('days');\n }\n else {\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = this.l10n.getConstant('selectedDays');\n }\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.globalize.formatDate(this.endValue, format);\n }\n else {\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.l10n.getConstant('endLabel');\n }\n if (!isNullOrUndefined(this.startValue)) {\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.globalize.formatDate(this.startValue, format);\n }\n else {\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.l10n.getConstant('startLabel');\n }\n }\n else {\n if (!isNullOrUndefined(this.startValue)) {\n this.startButton.element.textContent = this.globalize.formatDate(this.startValue, format);\n }\n else {\n this.startButton.element.textContent = this.l10n.getConstant('startLabel');\n }\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n this.endButton.element.textContent = this.globalize.formatDate(this.endValue, format);\n }\n else {\n this.endButton.element.textContent = this.l10n.getConstant('endLabel');\n }\n }\n if ((this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue)) ||\n ((!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || (!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue))\n && +this.startValue > +this.endValue))) {\n if (!this.isMobile) {\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = this.l10n.getConstant('selectedDays');\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.l10n.getConstant('startLabel');\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.l10n.getConstant('endLabel');\n }\n else {\n this.startButton.element.textContent = this.l10n.getConstant('startLabel');\n this.endButton.element.textContent = this.l10n.getConstant('endLabel');\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = this.l10n.getConstant('selectedDays');\n }\n }\n if (this.popupObj.element.querySelector('#custom_range')) {\n this.popupObj.element.querySelector('#custom_range').textContent =\n this.l10n.getConstant('customRange') !== '' ? this.l10n.getConstant('customRange') : 'Custom Range';\n }\n };\n DateRangePicker.prototype.removeSelection = function () {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n this.removeSelectedAttributes();\n if (this.popupObj) {\n if (this.popupObj.element.querySelectorAll('.' + SELECTED$3).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED$3), [STARTDATE, ENDDATE, SELECTED$3]);\n }\n if (this.popupObj.element.querySelectorAll('.' + FOCUSDATE).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + FOCUSDATE), FOCUSDATE);\n }\n if (this.popupObj.element.querySelectorAll('.' + RANGEHOVER).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + RANGEHOVER), [RANGEHOVER]);\n }\n }\n };\n DateRangePicker.prototype.addSelectedAttributes = function (ele, date, isStartDate, sameDate) {\n if (ele) {\n var title = this.globalize.formatDate(date, { type: 'date', skeleton: 'full' });\n if (!isNullOrUndefined(sameDate) && sameDate) {\n ele.setAttribute('aria-label', 'The current start and end date is ' + '' + title);\n }\n else {\n ele.setAttribute('aria-label', 'The current ' + (isStartDate ? 'start' : 'end') + ' date is ' + '' + title);\n }\n ele.setAttribute('aria-selected', 'true');\n }\n };\n DateRangePicker.prototype.removeSelectedAttributes = function () {\n if (this.popupObj) {\n var start = this.popupObj.element.querySelectorAll('.' + STARTDATE);\n for (var _i = 0, start_1 = start; _i < start_1.length; _i++) {\n var ele = start_1[_i];\n ele.setAttribute('aria-selected', 'false');\n ele.removeAttribute('aria-label');\n }\n var end = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n for (var _a = 0, end_1 = end; _a < end_1.length; _a++) {\n var ele = end_1[_a];\n ele.setAttribute('aria-selected', 'false');\n ele.removeAttribute('aria-label');\n }\n }\n };\n DateRangePicker.prototype.updateCalendarElement = function (calendar) {\n if (calendar.classList.contains(LEFTCALENDER)) {\n this.calendarElement = this.leftCalendar;\n this.currentDate = this.leftCalCurrentDate;\n this.previousIcon = this.leftCalPrevIcon;\n this.nextIcon = this.leftCalNextIcon;\n }\n else {\n this.calendarElement = this.rightCalendar;\n this.currentDate = this.rightCalCurrentDate;\n this.previousIcon = this.rightCalPrevIcon;\n this.nextIcon = this.rightCalNextIcon;\n }\n this.contentElement = calendar.querySelector('.' + CONTENT$1);\n this.tableBodyElement = select('.' + CONTENT$1 + ' tbody', calendar);\n this.table = calendar.querySelector('.' + CONTENT$1).getElementsByTagName('table')[0];\n this.headerTitleElement = calendar.querySelector('.' + HEADER$1 + ' .' + TITLE$1);\n this.headerElement = calendar.querySelector('.' + HEADER$1);\n };\n DateRangePicker.prototype.navPrevMonth = function (e) {\n e.preventDefault();\n var ele = closest(e.target, '.' + LEFTCALENDER);\n ele = isNullOrUndefined(ele) ? closest(e.target, '.' + RIGHTCALENDER) : ele;\n this.updateCalendarElement(ele);\n this.navigatePrevious(e);\n if (!isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) {\n this.updateMinMaxDays(ele);\n }\n this.updateControl(ele);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateRangePicker.prototype.deviceNavigation = function (ele) {\n this.deviceCalendarEvent();\n this.updateRange([this.popupObj.element.querySelector('.' + CALENDAR)]);\n if (this.endButton.element.classList.contains(ACTIVE$1)) {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n }\n if (this.endButton.element.classList.contains(ACTIVE$1)) {\n this.selectableDates();\n }\n if (this.currentView() === this.depth) {\n this.bindCalendarCellEvents();\n }\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.updateControl = function (calendar, customDate) {\n if (customDate === void 0) { customDate = null; }\n if (calendar.classList.contains(RIGHTCALENDER)) {\n this.rightCalCurrentDate = new Date(+(customDate ? customDate : this.currentDate));\n }\n else {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n }\n this.calendarIconEvent();\n if ((((this.depth === 'Month')\n && this.leftCalendar.querySelector('.e-content').classList.contains('e-month')\n && this.rightCalendar.querySelector('.e-content').classList.contains('e-month'))\n || ((this.depth === 'Year')\n && this.leftCalendar.querySelector('.e-content').classList.contains('e-year')\n && this.rightCalendar.querySelector('.e-content').classList.contains('e-year'))\n || ((this.depth === 'Decade')\n && this.leftCalendar.querySelector('.e-content').classList.contains('e-decade')\n && this.rightCalendar.querySelector('.e-content').classList.contains('e-decade')))\n || this.isMobile) {\n this.bindCalendarCellEvents();\n }\n this.removeFocusedDate();\n this.updateRange([calendar]);\n };\n DateRangePicker.prototype.navNextMonth = function (event) {\n event.preventDefault();\n var ele = closest(event.target, '.' + LEFTCALENDER);\n ele = isNullOrUndefined(ele) ? closest(event.target, '.' + RIGHTCALENDER) : ele;\n this.updateCalendarElement(ele);\n this.navigateNext(event);\n if (!isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) {\n this.updateMinMaxDays(ele);\n }\n this.updateControl(ele);\n };\n DateRangePicker.prototype.isPopupOpen = function () {\n if (!isNullOrUndefined(this.popupObj) && this.popupObj.element.classList.contains(POPUP$1)) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.createRangeHeader = function () {\n var labelContainer = this.createElement('div', { className: STARTENDCONTAINER });\n if (!this.isMobile) {\n var startLabel = this.createElement('a', { className: STARTLABEL });\n var endLabel = this.createElement('a', { className: ENDLABEL });\n var changeIcon = this.createElement('span', { className: CHANGEICON });\n attributes(startLabel, { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'Start Date', 'role': 'button' });\n attributes(endLabel, { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'End Date', 'role': 'button' });\n labelContainer.appendChild(startLabel);\n labelContainer.appendChild(changeIcon);\n labelContainer.appendChild(endLabel);\n startLabel.textContent = this.l10n.getConstant('startLabel');\n endLabel.textContent = this.l10n.getConstant('endLabel');\n }\n else {\n var endBtn = this.createElement('button', { className: ENDBUTTON });\n var startBtn = this.createElement('button', { className: STARTBUTTON });\n this.startButton = new Button({ content: this.l10n.getConstant('startLabel') }, startBtn);\n this.endButton = new Button({ content: this.l10n.getConstant('endLabel') }, endBtn);\n labelContainer.appendChild(startBtn);\n labelContainer.appendChild(endBtn);\n }\n return labelContainer;\n };\n DateRangePicker.prototype.disableInput = function () {\n if (this.strictMode) {\n if (!isNullOrUndefined(this.previousStartValue) && !isNullOrUndefined(this.previousEndValue)) {\n this.startValue = this.previousStartValue;\n this.endValue = this.previousEndValue;\n this.setValue();\n this.updateInput();\n }\n }\n else {\n this.updateInput();\n this.clearRange();\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n this.errorClass();\n }\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n this.bindEvents();\n };\n DateRangePicker.prototype.validateMinMax = function () {\n this.min = isNullOrUndefined(this.min) || !(+this.min) ? this.min = new Date(1900, 0, 1) : this.min;\n this.max = isNullOrUndefined(this.max) || !(+this.max) ? this.max = new Date(2099, 11, 31) : this.max;\n if (!(this.min <= this.max)) {\n this.disableInput();\n return;\n }\n if (!isNullOrUndefined(this.minDays) && !isNullOrUndefined(this.maxDays)) {\n if (this.maxDays > 0 && this.minDays > 0 && (this.minDays > this.maxDays)) {\n this.maxDays = null;\n }\n }\n if (!isNullOrUndefined(this.minDays) && this.minDays < 0) {\n this.minDays = null;\n }\n if (!isNullOrUndefined(this.maxDays) && this.maxDays < 0) {\n this.maxDays = null;\n }\n };\n DateRangePicker.prototype.validateRangeStrict = function () {\n if (!isNullOrUndefined(this.startValue)) {\n if (+this.startValue <= +this.min) {\n this.startValue = this.min;\n this.setValue();\n }\n else if (+this.startValue >= +this.min && +this.startValue >= +this.max) {\n this.startValue = this.max;\n }\n }\n if (!isNullOrUndefined(this.endValue)) {\n if (+this.endValue > +this.max) {\n this.endValue = this.max;\n this.setValue();\n }\n else if (+this.endValue < +this.min) {\n this.endValue = this.min;\n this.setValue();\n }\n }\n this.validateMinMaxDays();\n };\n DateRangePicker.prototype.validateRange = function () {\n this.validateMinMaxDays();\n };\n DateRangePicker.prototype.validateMinMaxDays = function () {\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n var range = (Math.round(Math.abs((this.removeTimeValueFromDate(this.startValue).getTime() -\n this.removeTimeValueFromDate(this.endValue).getTime()) / (1000 * 60 * 60 * 24))) + 1);\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) && !(range >= this.minDays)) {\n if (this.strictMode) {\n var date = new Date(+this.startValue);\n date.setDate(date.getDate() + (this.minDays - 1));\n if (+date > +this.max) {\n this.endValue = this.max;\n this.setValue();\n }\n else {\n this.endValue = date;\n this.setValue();\n }\n }\n else {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n if ((!isNullOrUndefined(this.maxDays) && this.maxDays > 0) && !(range <= this.maxDays)) {\n if (this.strictMode) {\n this.endValue = new Date(+this.startValue);\n this.endValue.setDate(this.endValue.getDate() + (this.maxDays - 1));\n this.setValue();\n }\n else {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n }\n };\n DateRangePicker.prototype.renderCalendar = function () {\n this.calendarElement = this.createElement('div');\n this.calendarElement.classList.add(CALENDAR);\n if (this.enableRtl) {\n this.calendarElement.classList.add(RTL$1);\n }\n attributes(this.calendarElement, { 'data-role': 'calendar' });\n _super.prototype.createHeader.call(this);\n _super.prototype.createContent.call(this);\n };\n DateRangePicker.prototype.isSameMonth = function (start, end) {\n if (start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear()) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.isSameYear = function (start, end) {\n if (start.getFullYear() === end.getFullYear()) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.isSameDecade = function (start, end) {\n var startYear = start.getFullYear();\n var endYear = end.getFullYear();\n if ((startYear - (startYear % 10)) === (endYear - (endYear % 10))) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.startMonthCurrentDate = function () {\n if (this.isSameMonth(this.min, this.max) || +this.currentDate > +this.max || this.isSameMonth(this.currentDate, this.max)) {\n this.currentDate = new Date(+this.max);\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() - 1);\n }\n else if (this.currentDate < this.min) {\n this.currentDate = new Date(this.checkValue(this.min));\n }\n };\n DateRangePicker.prototype.selectNextMonth = function () {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) && !this.isSameMonth(this.endValue, this.currentDate)\n && !this.isDateDisabled(this.endValue) && !this.isDateDisabled(this.startValue)) {\n this.currentDate = new Date(+this.endValue);\n }\n else {\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() + 1);\n return;\n }\n if ((!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || (!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n this.currentDate.setDate(1);\n var month = this.currentDate.getMonth() + 1;\n this.currentDate.setMonth(month);\n }\n };\n DateRangePicker.prototype.selectNextYear = function () {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) && !this.isSameYear(this.endValue, this.currentDate)\n && !this.isDateDisabled(this.endValue) && !this.isDateDisabled(this.startValue)) {\n this.currentDate = new Date(+this.endValue);\n }\n else {\n this.currentDate.setMonth(0);\n var yr = this.currentDate.getFullYear() + 1;\n this.currentDate.setFullYear(yr);\n return;\n }\n if ((!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)\n || (!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n this.currentDate.setMonth(0);\n this.currentDate.setFullYear(this.currentDate.getFullYear() + 1);\n }\n };\n DateRangePicker.prototype.selectNextDecade = function () {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) && !this.isSameDecade(this.endValue, this.currentDate)\n && !this.isDateDisabled(this.endValue) && !this.isDateDisabled(this.startValue)) {\n this.currentDate = new Date(+this.endValue);\n }\n else {\n var decyr = this.currentDate.getFullYear() + 10;\n this.currentDate.setFullYear(decyr);\n return;\n }\n if (((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)\n || (!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || (!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n this.currentDate.setFullYear(this.currentDate.getFullYear() + 10);\n }\n };\n DateRangePicker.prototype.selectStartMonth = function () {\n if (!isNullOrUndefined(this.startValue)) {\n if (!isNullOrUndefined(this.max) && this.isSameMonth(this.startValue, this.max)) {\n this.currentDate = new Date(+this.max);\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() - 1);\n }\n else if (!(this.startValue >= this.min && this.startValue <= this.max)\n || this.isDateDisabled(this.startValue)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n else {\n this.currentDate = new Date(+this.startValue);\n }\n }\n else {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n this.startMonthCurrentDate();\n }\n if ((!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || (!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n this.startMonthCurrentDate();\n };\n DateRangePicker.prototype.createCalendar = function () {\n var calendarContainer = this.createElement('div', { className: CALENDARCONTAINER });\n if (!this.isMobile) {\n this.selectStartMonth();\n this.renderCalendar();\n this.leftCalCurrentDate = new Date(+this.currentDate);\n this.calendarElement.classList.add(LEFTCALENDER);\n this.leftCalPrevIcon = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + PREVICON$1);\n this.leftCalNextIcon = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + NEXTICON$1);\n this.leftTitle = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + TITLE$1);\n remove(this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + ICONCONTAINER$1));\n this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER$1).appendChild(this.leftCalNextIcon);\n this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER$1).appendChild(this.leftCalPrevIcon);\n prepend([this.leftCalPrevIcon], this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER$1));\n this.leftCalendar = this.calendarElement;\n var leftContainer = this.createElement('div', { className: LEFTCONTAINER });\n var rightContainer = this.createElement('div', { className: RIGHTCONTAINER });\n leftContainer.appendChild(this.leftCalendar);\n calendarContainer.appendChild(leftContainer);\n if (!this.isMobile) {\n EventHandler.add(this.leftTitle, 'click', this.leftNavTitle, this);\n }\n if (this.start === 'Month') {\n this.selectNextMonth();\n }\n if (this.start === 'Year') {\n this.selectNextYear();\n }\n if (this.start === 'Decade') {\n this.selectNextDecade();\n }\n this.renderCalendar();\n this.rightCalCurrentDate = new Date(+this.currentDate);\n addClass([this.calendarElement], RIGHTCALENDER);\n this.rightCalendar = this.calendarElement;\n removeClass([this.leftCalendar && this.leftCalendar.querySelector('.e-content tbody')], 'e-zoomin');\n removeClass([this.rightCalendar && this.rightCalendar.querySelector('.e-content tbody')], 'e-zoomin');\n this.rightCalPrevIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + PREVICON$1);\n this.rightCalNextIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + NEXTICON$1);\n this.rightTitle = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + TITLE$1);\n remove(this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + ICONCONTAINER$1));\n this.calendarElement.querySelector('table').setAttribute('tabindex', '0');\n this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1).appendChild(this.rightCalNextIcon);\n this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1).appendChild(this.rightCalPrevIcon);\n prepend([this.rightCalPrevIcon], this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1));\n rightContainer.appendChild(this.rightCalendar);\n calendarContainer.appendChild(rightContainer);\n if (!this.isMobile) {\n EventHandler.add(this.rightTitle, 'click', this.rightNavTitle, this);\n }\n }\n else {\n if (!isNullOrUndefined(this.startValue)) {\n this.currentDate = new Date(+this.startValue);\n }\n _super.prototype.validateDate.call(this);\n _super.prototype.minMaxUpdate.call(this);\n _super.prototype.render.call(this);\n var prevIcon = this.calendarElement.querySelector('.' + CALENDAR + ' .' + PREVICON$1);\n var nextIcon = this.calendarElement.querySelector('.' + CALENDAR + ' .' + NEXTICON$1);\n remove(this.calendarElement.querySelector('.' + CALENDAR + ' .' + ICONCONTAINER$1));\n this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER$1).appendChild(nextIcon);\n this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER$1).appendChild(prevIcon);\n prepend([prevIcon], this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER$1));\n this.deviceCalendar = this.calendarElement;\n calendarContainer.appendChild(this.calendarElement);\n this.headerTitleElement = this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER$1 + ' .' + TITLE$1);\n }\n return calendarContainer;\n };\n DateRangePicker.prototype.leftNavTitle = function (e) {\n if (this.isPopupOpen()) {\n this.calendarElement = this.leftCalendar;\n this.calendarNavigation(e, this.calendarElement);\n }\n };\n DateRangePicker.prototype.calendarNavigation = function (e, element) {\n this.table = element.querySelector('table');\n this.headerTitleElement = element.querySelector('.e-title');\n this.tableBodyElement = element.querySelector('tbody');\n this.tableHeadElement = element.querySelector('thead');\n this.contentElement = element.querySelector('.e-content');\n this.updateCalendarElement(element);\n _super.prototype.navigateTitle.call(this, e);\n this.updateNavIcons();\n };\n DateRangePicker.prototype.rightNavTitle = function (e) {\n if (this.isPopupOpen()) {\n this.calendarElement = this.rightCalendar;\n this.calendarNavigation(e, this.calendarElement);\n }\n };\n DateRangePicker.prototype.clickEventEmitter = function (e) {\n if (!this.isMobile) {\n if (closest(e.target, '.e-calendar.e-left-calendar')) {\n this.calendarElement = this.leftCalendar;\n this.updateCalendarElement(this.leftCalendar);\n }\n else {\n this.calendarElement = this.rightCalendar;\n this.updateCalendarElement(this.rightCalendar);\n }\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the current view of the Calendar.\n *\n * @returns {string}\n * @private\n * @hidden\n */\n DateRangePicker.prototype.currentView = function () {\n return _super.prototype.currentView.call(this);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n DateRangePicker.prototype.getCalendarView = function (view) {\n if (view === 'Year') {\n return 'Year';\n }\n else if (view === 'Decade') {\n return 'Decade';\n }\n else {\n return 'Month';\n }\n };\n DateRangePicker.prototype.navigatedEvent = function (e) {\n this.trigger('navigated', this.navigatedArgs);\n if (!isNullOrUndefined(this.popupObj)) {\n var element = void 0;\n var view = this.getCalendarView(this.currentView());\n if (this.isMobile) {\n if (view === this.depth) {\n this.bindCalendarCellEvents();\n this.deviceNavigation();\n this.removeFocusedDate();\n this.checkMinMaxDays();\n }\n else {\n this.selectableDates();\n }\n }\n else {\n if (!this.isMobile && view === this.depth) {\n element = this.calendarElement.classList.contains('e-left-calendar') ? this.leftCalendar : this.rightCalendar;\n if (element === this.leftCalendar && ((e && !e.currentTarget.children[0].classList.contains('e-icons'))\n || (!isNullOrUndefined(this.controlDown)))) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n this.effect = '';\n this.currentDate = this.leftCalCurrentDate;\n this.updateCalendarElement(this.leftCalendar);\n this.updateControl(this.leftCalendar);\n this.updateCalendarElement(this.rightCalendar);\n _super.prototype.navigateTo.call(this, view, this.rightCalCurrentDate);\n var customDate = this.rightCalCurrentDate ? this.rightCalCurrentDate : this.currentDate;\n this.updateControl(this.rightCalendar, customDate);\n this.updateNavIcons();\n this.calendarIconEvent();\n this.calendarIconRipple();\n this.controlDown = null;\n }\n else if (e && !e.currentTarget.children[0].classList.contains('e-icons')\n || (!isNullOrUndefined(this.controlDown))) {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n this.effect = '';\n this.currentDate = this.rightCalCurrentDate;\n this.updateCalendarElement(this.rightCalendar);\n this.updateControl(this.rightCalendar);\n this.updateCalendarElement(this.leftCalendar);\n if (this.startValue && isNullOrUndefined(this.endValue)) {\n if (view === 'Month' && this.startValue.getMonth() < this.rightCalCurrentDate.getMonth() &&\n this.startValue.getFullYear() <= this.rightCalCurrentDate.getFullYear()) {\n _super.prototype.navigateTo.call(this, view, new Date(+this.startValue));\n }\n else if (view === 'Year' && this.startValue.getFullYear() < this.rightCalCurrentDate.getFullYear()) {\n _super.prototype.navigateTo.call(this, view, new Date(+this.startValue));\n }\n else {\n _super.prototype.navigateTo.call(this, view, this.leftCalCurrentDate);\n }\n }\n else {\n _super.prototype.navigateTo.call(this, view, this.leftCalCurrentDate);\n }\n this.updateControl(this.leftCalendar);\n this.updateNavIcons();\n this.calendarIconEvent();\n this.calendarIconRipple();\n this.controlDown = null;\n }\n this.checkMinMaxDays();\n }\n else {\n this.updateNavIcons();\n this.calendarIconEvent();\n }\n }\n }\n };\n DateRangePicker.prototype.createControl = function () {\n var controlContainer = this.createElement('div', { className: RANGECONTAINER });\n var headerContainer = this.createElement('div', { className: RANGEHEADER });\n if (this.isMobile && this.fullScreenMode) {\n var modelHeaderIconWrapper = this.createElement('div', { className: 'e-model-header-wrapper' });\n var modelCloseIcon = this.createElement('span', { className: 'e-popup-close' });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);\n var modelApplyButton = this.createElement('span', { className: 'e-apply' });\n EventHandler.add(modelApplyButton, 'mousedown touchstart', this.applyFunction, this);\n modelHeaderIconWrapper.appendChild(modelCloseIcon);\n modelHeaderIconWrapper.appendChild(modelApplyButton);\n headerContainer.appendChild(modelHeaderIconWrapper);\n }\n var labelContainer = this.createRangeHeader();\n headerContainer.appendChild(labelContainer);\n var daySpan = this.createElement('div', { className: DAYSPAN });\n attributes(daySpan, { 'aria-label': 'Selected Days' });\n daySpan.textContent = this.l10n.getConstant('selectedDays');\n headerContainer.appendChild(daySpan);\n var separator = this.createElement('div', { className: SEPARATOR });\n var calendarContainer = this.createCalendar();\n controlContainer.appendChild(headerContainer);\n controlContainer.appendChild(separator);\n controlContainer.appendChild(calendarContainer);\n var footerSection = this.createElement('div', { className: FOOTER$1 });\n var cancelBtn = this.createElement('button', { className: CANCEL + ' ' + FLAT$1 + ' ' + CSS$1 });\n var applyBtn = this.createElement('button');\n addClass([applyBtn], [APPLY, FLAT$1, PRIMARY$1, CSS$1]);\n footerSection.appendChild(applyBtn);\n footerSection.appendChild(cancelBtn);\n var enable = !isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue);\n this.cancelButton = new Button({ content: this.l10n.getConstant('cancelText') }, cancelBtn);\n this.applyButton = new Button({ content: this.l10n.getConstant('applyText'), disabled: !enable }, applyBtn);\n EventHandler.add(applyBtn, 'click', this.applyFunction, this);\n EventHandler.add(cancelBtn, 'click', this.cancelFunction, this);\n this.popupWrapper.appendChild(controlContainer);\n if (!this.isMobile) {\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n this.createPresets();\n this.listRippleEffect();\n addClass([controlContainer], RANGEBORDER);\n addClass([this.popupWrapper], 'e-preset-wrapper');\n var presets = this.popupWrapper.querySelector('.' + PRESETS);\n presets.style.height = this.popupWrapper.querySelector('.' + RANGECONTAINER).getBoundingClientRect().height + 'px';\n }\n }\n this.popupWrapper.appendChild(footerSection);\n if (this.isMobile) {\n this.deviceHeaderUpdate();\n }\n this.renderPopup();\n };\n DateRangePicker.prototype.modelRangeCloseHandler = function (e) {\n this.hide();\n };\n DateRangePicker.prototype.cancelFunction = function (eve) {\n if (document.activeElement !== this.inputElement) {\n this.preventFocus = true;\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS$1]);\n }\n eve.preventDefault();\n if (this.isKeyPopup) {\n this.inputElement.focus();\n this.isKeyPopup = false;\n }\n this.startValue = null;\n this.endValue = null;\n this.removeSelection();\n this.hide(eve);\n };\n DateRangePicker.prototype.deviceHeaderUpdate = function () {\n if (isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) {\n this.endButton.element.setAttribute('disabled', '');\n this.startButton.element.classList.add(ACTIVE$1);\n }\n else if (!isNullOrUndefined(this.startValue)) {\n this.startButton.element.classList.add(ACTIVE$1);\n }\n };\n DateRangePicker.prototype.applyFunction = function (eve) {\n var isValueChanged = false;\n if (eve.type !== 'touchstart') {\n eve.preventDefault();\n }\n if (this.closeEventArgs && this.closeEventArgs.cancel) {\n this.startValue = this.popupWrapper.querySelector('.e-start-date') &&\n this.getIdValue(null, this.popupWrapper.querySelector('.e-start-date'));\n this.endValue = this.popupWrapper.querySelector('.e-end-date') &&\n this.getIdValue(null, this.popupWrapper.querySelector('.e-end-date'));\n this.setValue();\n }\n if (document.activeElement !== this.inputElement) {\n this.preventFocus = true;\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS$1]);\n }\n if (eve.type !== 'touchstart' &&\n this.closeEventArgs && !this.closeEventArgs.cancel) {\n eve.preventDefault();\n }\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n if (!(this.previousStartValue && this.previousEndValue &&\n this.startValue.getDate() === this.previousStartValue.getDate() &&\n this.startValue.getMonth() === this.previousStartValue.getMonth() &&\n this.startValue.getFullYear() === this.previousStartValue.getFullYear()\n && this.endValue.getDate() === this.previousEndValue.getDate() &&\n this.endValue.getMonth() === this.previousEndValue.getMonth()\n && this.endValue.getFullYear() === this.previousEndValue.getFullYear())) {\n Input.setValue(this.rangeArgs(eve).text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.previousStartValue = new Date(+this.startValue);\n this.previousEndValue = new Date(+this.endValue);\n this.previousEleValue = this.inputElement.value;\n if (+this.initStartDate !== +this.startValue || +this.initEndDate !== +this.endValue) {\n isValueChanged = true;\n }\n this.changeTrigger(eve);\n this.hide(eve ? eve : null);\n this.errorClass();\n isValueChanged = true;\n }\n else {\n this.hide(eve ? eve : null);\n }\n if (!(closest(eve.target, '.' + INPUTCONTAINER$1))\n && (!isValueChanged)) {\n this.focusOut();\n }\n if (!this.isMobile) {\n this.isKeyPopup = false;\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.children[1].focus();\n this.keyInputConfigs = extend(this.keyInputConfigs, this.keyConfigs);\n this.popupKeyboardModule = new KeyboardEvents(this.inputWrapper.container.children[1], {\n eventName: 'keydown',\n keyConfigs: this.keyInputConfigs,\n keyAction: this.popupKeyActionHandle.bind(this)\n });\n }\n }\n };\n DateRangePicker.prototype.onMouseClick = function (event, item) {\n if (event.type === 'touchstart') {\n return;\n }\n var target = item || event.target;\n var li = closest(target, '.' + LISTCLASS);\n var isClick = li && li.classList.contains(ACTIVE$1);\n if (li && li.classList.contains(LISTCLASS)) {\n this.setListSelection(li, event);\n }\n this.preventFocus = true;\n this.inputElement.focus();\n if (!this.isMobile) {\n this.preventFocus = true;\n if (li && li.classList.contains(LISTCLASS) && li.getAttribute('id') === 'custom_range') {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n else {\n if (!isClick && event.type === 'keydown') {\n this.inputElement.focus();\n }\n }\n }\n };\n DateRangePicker.prototype.onMouseOver = function (event) {\n var li = closest(event.target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS) && !li.classList.contains(HOVER)) {\n addClass([li], HOVER);\n }\n };\n DateRangePicker.prototype.onMouseLeave = function (event) {\n var item = closest(event.target, '.' + HOVER);\n if (!isNullOrUndefined(item)) {\n removeClass([item], HOVER);\n }\n };\n DateRangePicker.prototype.setListSelection = function (li, event) {\n if (li && (!li.classList.contains(ACTIVE$1) || (this.isMobile && li.classList.contains(ACTIVE$1)))) {\n if (this.isMobile && li.classList.contains(ACTIVE$1)) {\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n var values_1 = this.presetsItem[this.activeIndex];\n if (values_1.id === 'custom_range') {\n this.renderCustomPopup();\n return;\n }\n return;\n }\n this.removeListSelection();\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n addClass([li], ACTIVE$1);\n li.setAttribute('aria-selected', 'true');\n var values = this.presetsItem[this.activeIndex];\n if (values.id === 'custom_range') {\n this.renderCustomPopup();\n }\n else {\n this.applyPresetRange(values, event);\n }\n }\n };\n DateRangePicker.prototype.removeListSelection = function () {\n var item = this.presetElement.querySelector('.' + ACTIVE$1);\n if (!isNullOrUndefined(item)) {\n removeClass([item], ACTIVE$1);\n item.removeAttribute('aria-selected');\n }\n };\n DateRangePicker.prototype.setValue = function () {\n this.modelValue = [this.startValue, this.endValue];\n };\n DateRangePicker.prototype.applyPresetRange = function (values, e) {\n this.hide(null);\n this.presetsItem[this.presetsItem.length - 1].start = null;\n this.presetsItem[this.presetsItem.length - 1].end = null;\n this.startValue = values.start;\n this.endValue = values.end;\n this.setValue();\n this.refreshControl();\n this.trigger('select', this.rangeArgs(e));\n this.changeTrigger(e);\n this.previousEleValue = this.inputElement.value;\n this.isCustomRange = false;\n this.leftCalendar = this.rightCalendar = null;\n if (this.isKeyPopup) {\n this.isRangeIconClicked = false;\n this.inputElement.focus();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateRangePicker.prototype.showPopup = function (element, event) {\n this.presetHeight();\n if (this.zIndex === 1000) {\n this.popupObj.show(null, this.element);\n }\n else {\n this.popupObj.show(null, null);\n }\n if (this.isMobile) {\n this.popupObj.refreshPosition();\n }\n };\n DateRangePicker.prototype.renderCustomPopup = function () {\n var _this = this;\n this.isCustomWindow = true;\n this.popupObj.hide();\n this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: ROOT$2 + ' ' + POPUP$1 });\n this.renderControl();\n this.openEventArgs = {\n popup: this.popupObj || null,\n cancel: false,\n date: this.inputElement.value,\n model: this,\n event: event ? event : null,\n appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : document.body\n };\n var eventArgs = this.openEventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.openEventArgs = eventArgs;\n if (_this.openEventArgs.cancel) {\n return;\n }\n });\n this.openEventArgs.appendTo.appendChild(this.popupWrapper);\n this.showPopup();\n this.isCustomRange = true;\n if (!this.isMobile) {\n this.calendarFocus();\n }\n };\n DateRangePicker.prototype.listRippleEffect = function () {\n for (var _i = 0, _a = this.liCollections; _i < _a.length; _i++) {\n var li = _a[_i];\n rippleEffect(li);\n }\n };\n DateRangePicker.prototype.createPresets = function () {\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n this.presetElement = this.createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });\n var listTag = ListBase.createList(this.createElement, this.presetsItem, null, true);\n attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0', 'aria-label': 'daterangepicker-preset' });\n this.presetElement.appendChild(listTag);\n this.popupWrapper.appendChild(this.presetElement);\n var customElement = this.presetElement.querySelector('#custom_range');\n if (!isNullOrUndefined(customElement)) {\n customElement.textContent = this.l10n.getConstant('customRange') !== '' ? this.l10n.getConstant('customRange')\n : 'Custom Range';\n }\n this.liCollections = this.presetElement.querySelectorAll('.' + LISTCLASS);\n this.wireListEvents();\n if (this.isMobile) {\n if (this.fullScreenMode) {\n var modelWrapper = createElement('div', { className: 'e-range-mob-popup-wrap' });\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var modelTitleSpan = this.createElement('span', { className: 'e-model-title' });\n modelTitleSpan.textContent = 'Select Preset';\n var modelCloseIcon = this.createElement('span', { className: 'e-popup-close' });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);\n var presetContent = this.presetElement;\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTitleSpan);\n modelWrapper.appendChild(modelHeader);\n modelWrapper.appendChild(presetContent);\n this.popupWrapper.insertBefore(modelWrapper, this.popupWrapper.firstElementChild);\n this.presetElement.style.width = '100%';\n }\n else {\n this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';\n }\n }\n if (!isNullOrUndefined(this.activeIndex) && this.activeIndex > -1) {\n addClass([this.liCollections[this.activeIndex]], ACTIVE$1);\n }\n }\n };\n DateRangePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.presetElement, 'click', this.onMouseClick, this);\n if (!this.isMobile) {\n EventHandler.add(this.presetElement, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.presetElement, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateRangePicker.prototype.unWireListEvents = function () {\n if (!isNullOrUndefined(this.presetElement)) {\n EventHandler.remove(this.presetElement, 'click touchstart', this.onMouseClick);\n if (!this.isMobile) {\n EventHandler.remove(this.presetElement, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.presetElement, 'mouseout', this.onMouseLeave);\n }\n }\n };\n DateRangePicker.prototype.renderPopup = function () {\n var _this = this;\n this.popupWrapper.classList.add('e-control');\n var popupWidth = this.popupWrapper.getBoundingClientRect().width;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass.trim() !== '') {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (this.isMobile && this.isCustomWindow) {\n this.modal = this.createElement('div');\n document.body.appendChild(this.modal);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n relateTo: this.isMobile && this.isCustomWindow ? document.body :\n (!isNullOrUndefined(this.targetElement) ? this.targetElement : this.inputWrapper.container),\n position: (this.isMobile ?\n (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && !this.isCustomWindow ?\n { X: 'left', Y: 'bottom' } : { X: 'center', Y: 'center' }) :\n this.enableRtl ? { X: 'left', Y: 'bottom' } : { X: 'right', Y: 'bottom' }),\n offsetX: this.isMobile || this.enableRtl ? 0 : -popupWidth,\n offsetY: OFFSETVALUE$1,\n collision: this.isMobile ?\n (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && !this.isCustomWindow ?\n { X: 'fit' } : { X: 'fit', Y: 'fit' }) : { X: 'fit', Y: 'flip' },\n targetType: this.isMobile && this.isCustomWindow ? 'container' : 'relative',\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n open: function () {\n if (_this.isMobile && _this.fullScreenMode) {\n _this.iconRangeRight = _this.calendarElement && window.getComputedStyle(_this.calendarElement.querySelector('.e-header.e-month .e-prev')).cssFloat;\n if (_this.iconRangeRight) {\n _this.touchRangeModule = new Touch(_this.calendarElement.querySelector('.e-content.e-month'), {\n swipe: _this.dateRangeSwipeHandler.bind(_this)\n });\n EventHandler.add(_this.calendarElement.querySelector('.e-content.e-month'), 'touchstart', _this.touchStartRangeHandler, _this);\n }\n }\n attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id, 'aria-controls': _this.inputElement.id });\n if (_this.value) {\n attributes(_this.inputElement, { 'aria-activedescendant': _this.inputElement.id });\n }\n else {\n _this.inputElement.removeAttribute('aria-activedescendant');\n }\n addClass([_this.inputWrapper.buttons[0]], ACTIVE$1);\n if (!_this.isMobile) {\n if (_this.cancelButton) {\n _this.btnKeyboardModule = new KeyboardEvents(_this.cancelButton.element, {\n eventName: 'keydown',\n keyAction: _this.popupKeyActionHandle.bind(_this),\n keyConfigs: { tab: 'tab', altRightArrow: 'alt+rightarrow', altLeftArrow: 'alt+leftarrow' }\n });\n _this.btnKeyboardModule = new KeyboardEvents(_this.applyButton.element, {\n eventName: 'keydown',\n keyAction: _this.popupKeyActionHandle.bind(_this),\n keyConfigs: { altRightArrow: 'alt+rightarrow', altLeftArrow: 'alt+leftarrow' }\n });\n }\n if (!isNullOrUndefined(_this.leftCalendar)) {\n if (!_this.isRangeIconClicked) {\n _this.calendarFocus();\n }\n }\n if (!isNullOrUndefined(_this.presetElement)) {\n _this.keyInputConfigs = extend(_this.keyInputConfigs, _this.keyConfigs);\n _this.presetKeyboardModule = new KeyboardEvents(_this.presetElement, {\n eventName: 'keydown',\n keyAction: _this.presetKeyActionHandler.bind(_this),\n keyConfigs: _this.keyInputConfigs\n });\n _this.presetKeyboardModule = new KeyboardEvents(_this.presetElement, {\n eventName: 'keydown',\n keyAction: _this.popupKeyActionHandle.bind(_this),\n keyConfigs: { altRightArrow: 'alt+rightarrow', altLeftArrow: 'alt+leftarrow' }\n });\n if (isNullOrUndefined(_this.leftCalendar)) {\n _this.preventBlur = true;\n _this.presetElement.focus();\n }\n else {\n _this.presetElement.setAttribute('tabindex', '-1');\n }\n }\n _this.popupKeyBoardHandler();\n }\n if (_this.isMobile && !Browser.isDevice) {\n EventHandler.add(document, 'keydown', _this.popupCloseHandler, _this);\n }\n },\n close: function () {\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n _this.inputElement.removeAttribute('aria-owns');\n _this.inputElement.removeAttribute('aria-controls');\n _this.inputElement.removeAttribute('aria-activedescendant');\n removeClass([_this.inputWrapper.buttons[0]], ACTIVE$1);\n if (_this.isRangeIconClicked) {\n _this.inputWrapper.container.children[1].focus();\n }\n if (!isUndefined(_this.presets[0].start && _this.presets[0].end && _this.presets[0].label)) {\n _this.unWireListEvents();\n }\n if (_this.applyButton) {\n _this.applyButton.destroy();\n }\n if (_this.cancelButton) {\n _this.cancelButton.destroy();\n }\n if (_this.isMobile && _this.endButton) {\n _this.endButton.destroy();\n }\n if (_this.isMobile && _this.startButton) {\n _this.startButton.destroy();\n }\n if (!isNullOrUndefined(_this.popupObj)) {\n if (!isNullOrUndefined(_this.popupObj.element.parentElement)) {\n detach(_this.popupObj.element);\n }\n _this.popupObj.destroy();\n _this.popupObj = null;\n }\n if (_this.isMobile && !Browser.isDevice) {\n EventHandler.remove(document, 'keydown', _this.popupCloseHandler);\n }\n }, targetExitViewport: function () {\n var popupEle = _this.popupObj && _this.popupObj.element;\n if (!Browser.isDevice && popupEle && popupEle.getBoundingClientRect().height < window.innerHeight) {\n _this.hide();\n }\n }\n });\n if (this.isMobile) {\n this.popupObj.element.classList.add(DEVICE$1);\n if (!this.isMobile) {\n this.popupObj.element.classList.add('e-bigger');\n }\n }\n if (this.isMobile && this.isCustomWindow) {\n addClass([this.modal], [DEVICE$1, ROOT$2, 'e-range-modal']);\n document.body.className += ' ' + OVERFLOW$1;\n this.modal.style.display = 'block';\n }\n EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);\n };\n DateRangePicker.prototype.dateRangeSwipeHandler = function (e) {\n var direction = 0;\n if (this.iconRangeRight === 'left') {\n switch (e.swipeDirection) {\n case 'Left':\n direction = 1;\n break;\n case 'Right':\n direction = -1;\n break;\n }\n }\n else {\n switch (e.swipeDirection) {\n case 'Up':\n direction = 1;\n break;\n case 'Down':\n direction = -1;\n break;\n }\n }\n if (this.touchRangeStart) {\n if (direction === 1) {\n this.navigateNext(e);\n }\n else if (direction === -1) {\n this.navigatePrevious(e);\n }\n this.touchRangeStart = false;\n }\n };\n DateRangePicker.prototype.touchStartRangeHandler = function (e) {\n this.touchRangeStart = true;\n };\n DateRangePicker.prototype.popupCloseHandler = function (e) {\n switch (e.keyCode) {\n case 27:\n this.hide(e);\n break;\n }\n };\n DateRangePicker.prototype.calendarFocus = function () {\n var startDate = this.popupObj && this.popupObj.element.querySelector('.' + STARTDATE);\n if (startDate) {\n var ele = closest(startDate, '.' + RIGHTCALENDER);\n ele = isNullOrUndefined(ele) ? this.leftCalendar : ele;\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.focus();\n }\n else {\n this.preventBlur = true;\n ele.children[1].firstElementChild.focus();\n }\n addClass([startDate], FOCUSDATE);\n }\n else {\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.focus();\n }\n else {\n this.preventBlur = true;\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n }\n };\n DateRangePicker.prototype.presetHeight = function () {\n var presets = this.popupObj && this.popupObj.element.querySelector('.' + PRESETS);\n var rangeContainer = this.popupObj && this.popupObj.element.querySelector('.' + RANGECONTAINER);\n if (!isNullOrUndefined(presets) && !isNullOrUndefined(rangeContainer)) {\n presets.style.height = rangeContainer.getBoundingClientRect().height + 'px';\n }\n };\n DateRangePicker.prototype.presetKeyActionHandler = function (e) {\n switch (e.action) {\n case 'moveDown':\n this.listMoveDown(e);\n this.setScrollPosition();\n e.preventDefault();\n break;\n case 'moveUp':\n this.listMoveUp(e);\n this.setScrollPosition();\n e.preventDefault();\n break;\n case 'enter':\n {\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(this.leftCalendar) && !isNullOrUndefined(actItem)) {\n if (isNullOrUndefined(hvrItem) || (!isNullOrUndefined(actItem) && actItem === hvrItem)) {\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(actItem);\n var values = this.presetsItem[this.activeIndex];\n if (values.id === 'custom_range') {\n this.calendarFocus();\n actItem.classList.remove(HOVER);\n e.preventDefault();\n return;\n }\n }\n }\n if (!isNullOrUndefined(hvrItem) || !isNullOrUndefined(actItem)) {\n this.onMouseClick(e, hvrItem || actItem);\n }\n e.preventDefault();\n }\n break;\n case 'tab':\n if (this.leftCalendar) {\n var item = this.getHoverLI();\n if (!isNullOrUndefined(item)) {\n item.classList.remove(HOVER);\n }\n }\n else {\n this.hide(e);\n e.preventDefault();\n }\n break;\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateRangePicker.prototype.listMoveDown = function (e) {\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(hvrItem)) {\n var li = hvrItem.nextElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n removeClass([hvrItem], HOVER);\n addClass([li], HOVER);\n }\n }\n else if (!isNullOrUndefined(actItem)) {\n var li = actItem.nextElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n addClass([li], HOVER);\n }\n }\n else {\n addClass([this.liCollections[0]], HOVER);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateRangePicker.prototype.listMoveUp = function (e) {\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(hvrItem)) {\n var li = hvrItem.previousElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n removeClass([hvrItem], HOVER);\n addClass([li], HOVER);\n }\n }\n else if (!isNullOrUndefined(actItem)) {\n var li = actItem.previousElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n addClass([li], HOVER);\n }\n }\n };\n DateRangePicker.prototype.getHoverLI = function () {\n var item = this.presetElement.querySelector('.' + HOVER);\n return item;\n };\n DateRangePicker.prototype.getActiveLI = function () {\n var item = this.presetElement.querySelector('.' + ACTIVE$1);\n return item;\n };\n DateRangePicker.prototype.popupKeyBoardHandler = function () {\n this.popupKeyboardModule = new KeyboardEvents(this.popupWrapper, {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: { escape: 'escape' }\n });\n this.keyInputConfigs = extend(this.keyInputConfigs, this.keyConfigs);\n this.popupKeyboardModule = new KeyboardEvents(this.inputWrapper.container.children[1], {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: this.keyInputConfigs\n });\n };\n DateRangePicker.prototype.setScrollPosition = function () {\n var listHeight = this.presetElement.getBoundingClientRect().height;\n var hover = this.presetElement.querySelector('.' + HOVER);\n var active = this.presetElement.querySelector('.' + ACTIVE$1);\n var element = !isNullOrUndefined(hover) ? hover : active;\n if (!isNullOrUndefined(element)) {\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.presetElement.scrollTop = nextEle ? (height - (listHeight / 2 + liHeight / 2)) : height;\n }\n else {\n this.presetElement.scrollTop = 0;\n }\n }\n };\n DateRangePicker.prototype.popupKeyActionHandle = function (e) {\n var presetElement = closest(e.target, '.' + PRESETS);\n switch (e.action) {\n case 'escape':\n if (this.isPopupOpen()) {\n if (this.isKeyPopup) {\n this.inputElement.focus();\n this.isKeyPopup = false;\n }\n this.hide(e);\n }\n else {\n this.inputWrapper.container.children[1].blur();\n }\n break;\n case 'enter':\n if (!this.isPopupOpen()) {\n this.show(null, e);\n }\n else {\n this.inputWrapper.container.children[1].focus();\n }\n break;\n case 'tab':\n this.hide(e);\n break;\n case 'altRightArrow':\n if (!isNullOrUndefined(presetElement)) {\n this.cancelButton.element.focus();\n }\n else {\n if (document.activeElement === this.cancelButton.element && this.applyButton.element.disabled !== true) {\n this.applyButton.element.focus();\n }\n else {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n }\n e.preventDefault();\n break;\n case 'altLeftArrow':\n if (!isNullOrUndefined(presetElement)) {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n else {\n if (document.activeElement === this.applyButton.element && this.applyButton.element.disabled !== true) {\n this.cancelButton.element.focus();\n }\n else {\n if (!isNullOrUndefined(this.presetElement) && (document.activeElement === this.cancelButton.element)) {\n this.presetElement.focus();\n }\n else {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n }\n }\n e.preventDefault();\n break;\n }\n };\n DateRangePicker.prototype.documentHandler = function (e) {\n if (isNullOrUndefined(this.popupObj)) {\n return;\n }\n var target = e.target;\n if (!this.inputWrapper.container.contains(target) ||\n (!isNullOrUndefined(this.popupObj) && !closest(target, '[id=\"' + this.popupWrapper.id + '\"]') && e.type !== 'mousedown')) {\n if (e.type !== 'touchstart' && ((e.type === 'mousedown') ||\n this.closeEventArgs && !this.closeEventArgs.cancel)) {\n e.preventDefault();\n }\n }\n if ((isNullOrUndefined(this.targetElement) ||\n (!isNullOrUndefined(this.targetElement) && !(target === this.targetElement))) &&\n !(closest(target, '[id=\"' + this.popupWrapper.id + '\"]'))\n && !(closest(target, '.' + INPUTCONTAINER$1) === this.inputWrapper.container)\n && !(closest(target, '.e-daterangepicker.e-popup') && (!target.classList.contains('e-day'))) && (!target.classList.contains('e-dlg-overlay'))) {\n this.preventBlur = false;\n if (this.isPopupOpen() && document.body.contains(this.popupObj.element)) {\n this.applyFunction(e);\n if (!this.isMobile) {\n this.isRangeIconClicked = false;\n }\n }\n }\n };\n DateRangePicker.prototype.createInput = function () {\n if (this.fullScreenMode && this.isMobile) {\n this.cssClass += ' ' + 'e-popup-expand';\n }\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n floatLabelType: this.floatLabelType,\n element: this.inputElement,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [DATERANGEICON]\n }, this.createElement);\n attributes(this.inputElement, {\n 'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox',\n 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n });\n Input.addAttributes({ 'aria-label': 'select', 'role': 'button' }, this.inputWrapper.buttons[0]);\n // if (!isNullOrUndefined(this.placeholder) && this.placeholder.trim() !== '') {\n // Input.addAttributes({ 'aria-placeholder': this.placeholder }, this.inputElement);\n // }\n this.setEleWidth(this.width);\n addClass([this.inputWrapper.container], DATERANGEWRAPPER);\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n if (this.inputElement.type === 'hidden') {\n this.inputWrapper.container.style.display = 'none';\n }\n this.refreshControl();\n this.previousEleValue = this.inputElement.value;\n this.inputElement.setAttribute('value', this.inputElement.value);\n this.startCopy = this.startDate;\n this.endCopy = this.endDate;\n };\n DateRangePicker.prototype.setEleWidth = function (width) {\n if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (this.width);\n }\n else if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(this.width);\n }\n else {\n this.inputWrapper.container.style.width = '100%';\n }\n };\n DateRangePicker.prototype.adjustLongHeaderWidth = function () {\n if (this.dayHeaderFormat === 'Wide') {\n addClass([this.popupWrapper], DAYHEADERLONG$1);\n }\n };\n DateRangePicker.prototype.refreshControl = function () {\n this.validateMinMax();\n if (this.strictMode) {\n this.validateRangeStrict();\n }\n var isDisabled = this.disabledDates();\n if (this.strictMode && (isDisabled)) {\n this.startValue = this.previousStartValue;\n this.setProperties({ startDate: this.startValue }, true);\n this.endValue = this.previousEndValue;\n this.setProperties({ endDate: this.endValue }, true);\n this.setValue();\n }\n this.updateInput();\n if (!this.strictMode) {\n this.validateRange();\n }\n if (!this.strictMode && (isDisabled)) {\n this.clearRange();\n }\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) &&\n !isDisabled && !isNullOrUndefined(this.renderDayCellArgs) && this.renderDayCellArgs.isDisabled) {\n this.disabledDateRender();\n }\n this.errorClass();\n this.previousStartValue = isNullOrUndefined(this.startValue) || isNaN(+this.startValue) ? null : new Date(+this.startValue);\n this.previousEndValue = isNullOrUndefined(this.endValue) || isNaN(+this.endValue) ? null : new Date(+this.endValue);\n };\n DateRangePicker.prototype.updateInput = function () {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n var formatOption = { format: this.formatString, type: 'date', skeleton: 'yMd' };\n var startDate = this.globalize.formatDate(this.startValue, formatOption);\n var endDate = this.globalize.formatDate(this.endValue, formatOption);\n Input.setValue(startDate + ' ' + this.separator + ' ' + endDate, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousStartValue = new Date(+this.startValue);\n this.previousEndValue = new Date(+this.endValue);\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n Input.setValue(this.invalidValueString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n };\n DateRangePicker.prototype.checkInvalidRange = function (value) {\n if (!isNullOrUndefined(value)) {\n var invalid = false;\n var startinvalue = void 0;\n var endinvalue = void 0;\n var startString = null;\n var endString = null;\n var valueString = null;\n var startObject = false;\n var endObject = false;\n var invalidobject = false;\n if (typeof (value) === 'string') {\n var range = value.split(' ' + this.separator + ' ');\n if (range.length === 2) {\n startString = range[0];\n endString = range[1];\n }\n else {\n invalid = true;\n valueString = value;\n }\n }\n else {\n if (value.length > 0) {\n startinvalue = value[0];\n endinvalue = value[1];\n }\n else {\n startinvalue = value.start;\n endinvalue = value.end;\n }\n if (!(startinvalue instanceof Date) && typeof (startinvalue) !== 'object') {\n startString = this.getstringvalue(startinvalue);\n }\n else if (startinvalue instanceof Date) {\n startObject = true;\n }\n else if (!isNullOrUndefined(startinvalue)) {\n invalidobject = true;\n }\n if (!(endinvalue instanceof Date) && typeof (endinvalue) !== 'object') {\n endString = this.getstringvalue(endinvalue);\n }\n else if (endinvalue instanceof Date) {\n endObject = true;\n }\n else if (!isNullOrUndefined(endinvalue)) {\n invalidobject = true;\n }\n }\n if ((isNullOrUndefined(startString) && !startObject && !isNullOrUndefined(endString)) ||\n (!isNullOrUndefined(startString) && !endObject && isNullOrUndefined(endString))) {\n invalid = true;\n }\n if (invalidobject) {\n startString = endString = valueString = null;\n invalid = true;\n }\n if (startString) {\n invalid = invalid || this.checkInvalidValue(startString);\n }\n if (endString) {\n invalid = invalid || this.checkInvalidValue(endString);\n }\n if (invalid) {\n if (startObject && !invalidobject) {\n startString = startinvalue.toLocaleDateString();\n }\n if (endObject && !invalidobject) {\n endString = endinvalue.toLocaleDateString();\n }\n if (!isNullOrUndefined(startString) && !isNullOrUndefined(endString)) {\n valueString = startString + ' ' + this.separator + ' ' + endString;\n }\n else if (!isNullOrUndefined(startString)) {\n valueString = startString;\n }\n else if (!isNullOrUndefined(endString)) {\n valueString = endString;\n }\n this.invalidValueString = valueString;\n this.setProperties({ value: null }, true);\n this.setProperties({ startValue: null }, true);\n this.setProperties({ endValue: null }, true);\n this.startDate = null;\n this.endDate = null;\n }\n }\n };\n DateRangePicker.prototype.getstringvalue = function (value) {\n var stringValue = null;\n if (!isNullOrUndefined(value) && (typeof value === 'number')) {\n stringValue = (value).toString();\n }\n else if (!isNullOrUndefined(value) && (typeof value === 'string')) {\n stringValue = '' + value;\n }\n return stringValue;\n };\n DateRangePicker.prototype.checkInvalidValue = function (value) {\n var valueString = value;\n var invalid = false;\n var formatOpt = null;\n formatOpt = { format: this.formatString, type: 'date', skeleton: 'yMd' };\n if (typeof valueString !== 'string') {\n invalid = true;\n }\n else {\n var globalize = new Internationalization(this.locale);\n if (!this.checkDateValue(globalize.parseDate(valueString, formatOpt))) {\n var extISOStr = null;\n var basISOString = null;\n // eslint-disable-next-line\n extISOStr = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // eslint-disable-next-line\n basISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOStr.test(valueString) && !basISOString.test(valueString))\n || (/^[a-zA-Z0-9- ]*$/).test(valueString) || isNaN(+new Date(this.checkValue(valueString)))) {\n invalid = true;\n }\n }\n }\n return invalid;\n };\n DateRangePicker.prototype.isDateDisabled = function (date) {\n if (isNullOrUndefined(date)) {\n return false;\n }\n var value = new Date(+date);\n if (+value < +this.min || +value > +this.max) {\n return true;\n }\n this.virtualRenderCellArgs = {\n date: value,\n isDisabled: false\n };\n var args = this.virtualRenderCellArgs;\n this.virtualRenderCellEvent(args);\n if (args.isDisabled) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.disabledDateRender = function () {\n this.disabledDays = [];\n this.disabledDayCnt = null;\n var localDate = new Date(+this.startValue);\n var count = 0;\n while (+localDate <= +this.endValue && +this.endValue <= +this.max) {\n this.virtualRenderCellArgs = {\n date: localDate,\n isDisabled: false\n };\n var args = this.virtualRenderCellArgs;\n this.virtualRenderCellEvent(args);\n if (args.isDisabled) {\n this.disabledDays.push(new Date(+args.date));\n if (+localDate > +this.startValue && +localDate < +this.endValue) {\n count++;\n }\n }\n this.addDay(localDate, 1, null, this.max, this.min);\n }\n this.disabledDayCnt = count;\n };\n DateRangePicker.prototype.virtualRenderCellEvent = function (args) {\n extend(this.virtualRenderCellArgs, { name: 'renderDayCell' });\n this.trigger('renderDayCell', args);\n };\n DateRangePicker.prototype.disabledDates = function () {\n var isStartDisabled = false;\n var isEndDisabled = false;\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n isStartDisabled = this.isDateDisabled(this.startValue);\n isEndDisabled = this.isDateDisabled(this.endValue);\n if (!this.isPopupOpen()) {\n this.currentDate = null;\n }\n this.setValue();\n }\n return (isStartDisabled || isEndDisabled);\n };\n DateRangePicker.prototype.setModelValue = function () {\n if (!this.value && this.startDate === null && this.endDate === null) {\n this.setProperties({ value: null }, true);\n }\n else if (this.value === null || this.value.start === null) {\n if (this.value === null) {\n this.setProperties({ value: [this.startDate, this.endDate] }, true);\n }\n else if (this.value.start === null) {\n this.setProperties({ value: { start: this.startDate, end: this.endDate } }, true);\n }\n }\n else {\n if ((this.value && this.value.length > 0) ||\n this.valueType && this.valueType.length > 0) {\n if (+this.startDate !== +this.value[0] || +this.endDate !== +this.value[1]) {\n this.setProperties({ value: [this.startDate, this.endDate] }, true);\n }\n if (this.value && this.value[0] == null && this.value[1] == null) {\n this.setProperties({ value: null }, true);\n }\n }\n else {\n if ((this.value && this.value.start)) {\n this.setProperties({ value: { start: this.startDate, end: this.endDate } }, true);\n }\n }\n }\n this.createHiddenInput();\n };\n /**\n * To dispatch the event manually\n *\n * @param {HTMLElement} element - Specifies the element to dispatch the event.\n * @param {string} type - Specifies the name of the event.\n * @returns {void}\n */\n DateRangePicker.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n this.firstHiddenChild.dispatchEvent(evt);\n };\n DateRangePicker.prototype.changeTrigger = function (e) {\n if (+this.initStartDate !== +this.startValue || +this.initEndDate !== +this.endValue) {\n this.setProperties({ endDate: this.checkDateValue(this.endValue) }, true);\n this.setProperties({ startDate: this.checkDateValue(this.startValue) }, true);\n this.setModelValue();\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', this.rangeArgs(e));\n }\n }\n this.previousEleValue = this.inputElement.value;\n this.initStartDate = this.checkDateValue(this.startValue);\n this.initEndDate = this.checkDateValue(this.endValue);\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n *\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns {void}\n * @hidden\n */\n DateRangePicker.prototype.navigateTo = function (view, date) {\n if (this.isPopupOpen()) {\n if (view.toLowerCase() === 'month') {\n view = 'Month';\n }\n else if (view.toLowerCase() === 'year') {\n view = 'Year';\n }\n else if (view.toLowerCase() === 'decade') {\n view = 'Decade';\n }\n else {\n return;\n }\n if (this.getViewNumber(view) < this.getViewNumber(this.depth)) {\n view = this.depth;\n }\n if (this.isMobile) {\n _super.prototype.navigateTo.call(this, view, date);\n }\n else {\n if (date < this.min) {\n date = new Date(+this.min);\n }\n else if (date >= this.max) {\n date = new Date(+this.max);\n }\n if (view === 'Month' && this.isSameMonth(date, this.max)) {\n date = new Date(this.max.getFullYear(), this.max.getMonth() - 1, this.min.getDate());\n }\n else if (view === 'Year' && this.isSameYear(date, this.max)) {\n date = new Date((this.max.getFullYear() - 1), this.max.getMonth(), this.max.getDate());\n }\n else if (view === 'Decade' && this.isSameDecade(date, this.max)) {\n date = new Date((this.max.getFullYear() - 10), this.max.getMonth(), this.max.getDate());\n }\n this.leftCalCurrentDate = date;\n this.navigate(this.leftCalendar, this.leftCalCurrentDate, view);\n if (view === 'Month') {\n date = new Date(this.currentDate.setMonth(this.currentDate.getMonth() + 1));\n }\n else if (view === 'Year') {\n date = new Date(this.currentDate.setFullYear(this.currentDate.getFullYear() + 1));\n }\n else {\n date = new Date(this.currentDate.setFullYear(this.currentDate.getFullYear() + 10));\n }\n this.rightCalCurrentDate = date;\n this.navigate(this.rightCalendar, this.rightCalCurrentDate, view);\n this.leftKeyboardModule = this.rightKeyboardModule = null;\n this.updateNavIcons();\n }\n if (this.currentView() === this.depth) {\n this.bindCalendarCellEvents();\n }\n this.removeFocusedDate();\n this.updateRange((this.isMobile ? [this.calendarElement] : [this.leftCalendar, this.rightCalendar]));\n }\n };\n DateRangePicker.prototype.navigate = function (calendar, date, view) {\n this.calendarElement = calendar;\n this.table = calendar.querySelector('table');\n this.tableBodyElement = calendar.querySelector('tbody');\n this.headerTitleElement = calendar.querySelector('.e-title');\n this.tableHeadElement = calendar.querySelector('thead');\n this.contentElement = calendar.querySelector('.e-content');\n this.previousIcon = calendar.querySelector('.e-prev');\n this.nextIcon = calendar.querySelector('.e-next');\n this.effect = ZOOMIN$1;\n _super.prototype.navigateTo.call(this, view, date);\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n DateRangePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n addClass([this.inputWrapper.container], [INPUTFOCUS$1]);\n this.inputElement.focus();\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DateRangePicker.prototype.focusOut = function () {\n var isBlur = this.preventBlur;\n if (document.activeElement === this.inputElement) {\n removeClass([this.inputWrapper.container], [INPUTFOCUS$1]);\n this.preventBlur = false;\n this.inputElement.blur();\n this.preventBlur = isBlur;\n }\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DateRangePicker.prototype.destroy = function () {\n this.unBindEvents();\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n this.hide(null);\n var ariaAttrs = {\n 'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox',\n 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'aria-invalid': 'false', 'spellcheck': 'false'\n };\n if (this.inputElement) {\n removeClass([this.inputElement], [ROOT$2]);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n Input.removeAttributes(ariaAttrs, this.inputElement);\n if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n this.ensureInputAttribute();\n this.inputElement.classList.remove('e-input');\n if (!isNullOrUndefined(this.inputWrapper)) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n detach(this.inputWrapper.container);\n }\n }\n if (!isNullOrUndefined(this.inputKeyboardModule) && !this.isMobile) {\n this.inputKeyboardModule.destroy();\n }\n if (this.popupObj) {\n if (!this.isMobile) {\n this.clearCalendarEvents();\n }\n }\n Input.destroy({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n _super.prototype.destroy.call(this);\n this.inputWrapper = this.popupWrapper = this.popupObj = this.cloneElement = this.presetElement = null;\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n if ((!isNullOrUndefined(this.firstHiddenChild))\n && (!isNullOrUndefined(this.secondHiddenChild))) {\n detach(this.firstHiddenChild);\n detach(this.secondHiddenChild);\n this.firstHiddenChild = this.secondHiddenChild = null;\n this.inputElement.setAttribute('name', this.element.getAttribute('data-name'));\n this.inputElement.removeAttribute('data-name');\n }\n this.closeEventArgs = null;\n this.leftCalendar = null;\n this.rightTitle = null;\n this.leftTitle = null;\n this.openEventArgs = null;\n this.leftCalNextIcon = null;\n this.rightCalendar = null;\n this.closeEventArgs = null;\n this.rightCalPrevIcon = null;\n this.leftCalPrevIcon = null;\n this.popupKeyboardModule = null;\n this.cancelButton = null;\n this.applyButton = null;\n this.calendarElement = null;\n this.leftKeyboardModule = null;\n this.rightCalNextIcon = null;\n this.leftCalNextIcon = null;\n this.btnKeyboardModule = null;\n this.rightKeyboardModule = null;\n this.leftKeyboardModule = null;\n this.presetKeyboardModule = null;\n this.liCollections = null;\n this.popupObj = null;\n this.popupWrapper = null;\n };\n DateRangePicker.prototype.ensureInputAttribute = function () {\n var attr = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n attr[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < attr.length; i++) {\n if (isNullOrUndefined(this.cloneElement.getAttribute(attr[i]))) {\n if (attr[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(attr[i]);\n }\n else {\n if (attr[i].toLowerCase() === 'value') {\n this.inputElement.value = this.cloneElement.getAttribute(attr[i]);\n }\n this.inputElement.setAttribute(attr[i], this.cloneElement.getAttribute(attr[i]));\n }\n }\n };\n /**\n * To get component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DateRangePicker.prototype.getModuleName = function () {\n return 'daterangepicker';\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Return the properties that are maintained upon browser refresh.\n *\n * @returns {string}\n */\n DateRangePicker.prototype.getPersistData = function () {\n var keyEntity = ['startDate', 'endDate', 'value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Return the selected range and day span in the DateRangePicker.\n *\n * @returns {Object}\n */\n DateRangePicker.prototype.getSelectedRange = function () {\n var range;\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n range = (Math.round(Math.abs((this.removeTimeValueFromDate(this.startValue).getTime() -\n this.removeTimeValueFromDate(this.endValue).getTime()) / (1000 * 60 * 60 * 24))) + 1);\n if (!isNullOrUndefined(this.renderDayCellArgs) && this.renderDayCellArgs.isDisabled) {\n this.disabledDateRender();\n }\n if (!isNullOrUndefined(this.disabledDayCnt)) {\n range = range - this.disabledDayCnt;\n this.disabledDayCnt = null;\n }\n }\n else {\n range = 0;\n }\n return { startDate: this.startValue, endDate: this.endValue, daySpan: range };\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * To open the Popup container in the DateRangePicker component.\n *\n * @param {HTMLElement} element - Specifies element.\n * @returns {void}\n */\n DateRangePicker.prototype.show = function (element, event) {\n var _this = this;\n if (this.isMobile && this.popupObj) {\n this.popupObj.refreshPosition();\n }\n if ((this.enabled && this.readonly) || !this.enabled || this.popupObj) {\n return;\n }\n else {\n if (!this.isPopupOpen()) {\n if (element) {\n this.targetElement = element;\n }\n this.createPopup();\n if (this.isMobile || Browser.isDevice) {\n this.mobileRangePopupWrap = this.createElement('div', { className: 'e-daterangepick-mob-popup-wrap' });\n document.body.appendChild(this.mobileRangePopupWrap);\n }\n this.openEventArgs = {\n popup: this.popupObj || null,\n cancel: false,\n date: this.inputElement.value,\n model: this,\n event: event ? event : null,\n appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : document.body\n };\n var eventArgs = this.openEventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.openEventArgs = eventArgs;\n if (!_this.openEventArgs.cancel) {\n _this.openEventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.showPopup(element, event);\n var isPreset = (!_this.isCustomRange || (_this.isMobile && _this.isCustomRange));\n if (!isUndefined(_this.presets[0].start && _this.presets[0].end && _this.presets[0].label) && isPreset) {\n _this.setScrollPosition();\n }\n _this.checkMinMaxDays();\n if ((_this.isMobile) && (!isNullOrUndefined(_this.startDate)) && (isNullOrUndefined(_this.endDate))) {\n _this.endButton.element.classList.add(ACTIVE$1);\n _this.startButton.element.classList.remove(ACTIVE$1);\n _this.endButton.element.removeAttribute('disabled');\n _this.selectableDates();\n }\n _super.prototype.setOverlayIndex.call(_this, _this.mobileRangePopupWrap, _this.popupObj.element, _this.modal, _this.isMobile || Browser.isDevice);\n }\n });\n if (Browser.isDevice) {\n var dlgOverlay = this.createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.mobileRangePopupWrap.appendChild(dlgOverlay);\n }\n }\n }\n };\n /**\n * To close the Popup container in the DateRangePicker component.\n *\n * @returns {void}\n */\n DateRangePicker.prototype.hide = function (event) {\n var _this = this;\n if (this.popupObj) {\n if (isNullOrUndefined(this.previousEndValue) && isNullOrUndefined(this.previousStartValue)) {\n this.clearRange();\n }\n else {\n if (!isNullOrUndefined(this.previousStartValue)) {\n this.startValue = new Date(this.checkValue(this.previousStartValue));\n this.setValue();\n this.currentDate = new Date(this.checkValue(this.startValue));\n }\n else {\n this.startValue = null;\n this.setValue();\n }\n if (!isNullOrUndefined(this.previousEndValue)) {\n this.endValue = new Date(this.checkValue(this.previousEndValue));\n this.setValue();\n }\n else {\n this.endValue = null;\n this.setValue();\n }\n }\n if (this.isPopupOpen()) {\n this.closeEventArgs = {\n cancel: false,\n popup: this.popupObj,\n date: this.inputElement.value,\n model: this,\n event: event ? event : null\n };\n var eventArgs = this.closeEventArgs;\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.closeEventArgs = eventArgs;\n if (!_this.closeEventArgs.cancel) {\n if (_this.isMobile) {\n if (!isNullOrUndefined(_this.startButton) && !isNullOrUndefined(_this.endButton)) {\n EventHandler.remove(_this.startButton.element, 'click touchstart', _this.deviceHeaderClick);\n EventHandler.remove(_this.endButton.element, 'click touchstart', _this.deviceHeaderClick);\n }\n }\n if (_this.popupObj) {\n _this.popupObj.hide();\n if (_this.preventBlur) {\n _this.inputElement.focus();\n addClass([_this.inputWrapper.container], [INPUTFOCUS$1]);\n }\n }\n if (!_this.isMobile) {\n if (!isNullOrUndefined(_this.leftKeyboardModule) && !isNullOrUndefined(_this.rightKeyboardModule)) {\n _this.leftKeyboardModule.destroy();\n _this.rightKeyboardModule.destroy();\n }\n if (!isNullOrUndefined(_this.presetElement)) {\n _this.presetKeyboardModule.destroy();\n }\n if (!isNullOrUndefined(_this.cancelButton)) {\n _this.btnKeyboardModule.destroy();\n }\n }\n _this.targetElement = null;\n removeClass([document.body], OVERFLOW$1);\n EventHandler.remove(document, 'mousedown touchstart', _this.documentHandler);\n if (_this.isMobile && _this.modal) {\n _this.modal.style.display = 'none';\n _this.modal.outerHTML = '';\n _this.modal = null;\n }\n if (_this.isMobile || Browser.isDevice) {\n if (!isNullOrUndefined(_this.mobileRangePopupWrap)) {\n _this.mobileRangePopupWrap.remove();\n _this.mobileRangePopupWrap = null;\n }\n }\n _this.isKeyPopup = _this.dateDisabled = false;\n }\n else {\n removeClass([_this.inputWrapper.buttons[0]], ACTIVE$1);\n }\n _this.updateClearIconState();\n _this.updateHiddenInput();\n if (_this.isMobile && _this.allowEdit && !_this.readonly) {\n _this.inputElement.removeAttribute('readonly');\n }\n });\n }\n }\n else {\n this.updateClearIconState();\n this.updateHiddenInput();\n if (this.isMobile && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n DateRangePicker.prototype.setLocale = function () {\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n if (this.dateRangeOptions && this.dateRangeOptions.placeholder == null) {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.inputElement);\n }\n this.updateInput();\n this.updateHiddenInput();\n this.changeTrigger();\n };\n DateRangePicker.prototype.refreshChange = function () {\n this.checkView();\n this.refreshControl();\n this.changeTrigger();\n };\n DateRangePicker.prototype.setDate = function () {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.refreshChange();\n };\n DateRangePicker.prototype.enableInput = function () {\n if (+this.min <= +this.max) {\n this.setProperties({ enabled: true }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.element.hasAttribute('disabled')) {\n this.bindEvents();\n }\n }\n };\n DateRangePicker.prototype.clearModelvalue = function (newProp, oldProp) {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n if (oldProp.value && oldProp.value.length > 0) {\n this.setProperties({ value: null }, true);\n }\n else if (oldProp.value && oldProp.value.start) {\n this.setProperties({ value: { start: null, end: null } }, true);\n }\n else if (oldProp.value && !oldProp.value.start) {\n this.setProperties({ value: { start: null, end: null } }, true);\n }\n this.updateValue();\n this.setDate();\n };\n DateRangePicker.prototype.createHiddenInput = function () {\n if (isNullOrUndefined(this.firstHiddenChild) && isNullOrUndefined(this.secondHiddenChild)) {\n this.firstHiddenChild = this.createElement('input');\n this.secondHiddenChild = this.createElement('input');\n }\n if (!isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n this.inputElement.setAttribute('data-name', this.inputElement.getAttribute('name'));\n this.inputElement.removeAttribute('name');\n }\n attributes(this.firstHiddenChild, {\n 'type': 'text', 'name': this.inputElement.getAttribute('data-name'), 'class': HIDDENELEMENT\n });\n attributes(this.secondHiddenChild, {\n 'type': 'text', 'name': this.inputElement.getAttribute('data-name'), 'class': HIDDENELEMENT\n });\n var format = { format: this.formatString, type: 'datetime', skeleton: 'yMd' };\n this.firstHiddenChild.value = this.startDate && this.globalize.formatDate(this.startDate, format);\n this.secondHiddenChild.value = this.endDate && this.globalize.formatDate(this.endDate, format);\n this.inputElement.parentElement.appendChild(this.firstHiddenChild);\n this.inputElement.parentElement.appendChild(this.secondHiddenChild);\n };\n DateRangePicker.prototype.setMinMaxDays = function () {\n if (this.isPopupOpen()) {\n this.removeClassDisabled();\n this.checkMinMaxDays();\n if (this.isMobile) {\n this.selectableDates();\n }\n if (!this.strictMode && (isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue))) {\n this.removeSelection();\n }\n else {\n this.updateRange((this.isMobile ? [this.calendarElement] : [this.leftCalendar, this.rightCalendar]));\n }\n this.updateHeader();\n }\n };\n DateRangePicker.prototype.getAmPmValue = function (date) {\n try {\n if (typeof date === 'string' && date.trim() !== '') {\n // Replace am/pm variants with uppercase AM/PM\n return date.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); });\n }\n // If date is null, undefined, or an empty string, return a default value or empty string\n return '';\n }\n catch (error) {\n console.error('Error occurred while processing date:', error);\n return ''; // Return a default value in case of an error\n }\n };\n DateRangePicker.prototype.getStartEndValue = function (date, isEnd) {\n if (this.depth === 'Month') {\n return this.checkDateValue(new Date(this.checkValue(date)));\n }\n else if (this.depth === 'Year') {\n return new Date(date.getFullYear(), date.getMonth() + (isEnd ? 1 : 0), isEnd ? 0 : 1);\n }\n else {\n return new Date(date.getFullYear(), isEnd ? 11 : 0, isEnd ? 31 : 1);\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DateRangePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DateRangePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n DateRangePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var format = { format: this.formatString, type: 'date', skeleton: 'yMd' };\n var isDynamicValueChange = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n var openPopup = ['blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell', 'select'];\n if (openPopup.indexOf(prop) > 0 && this.isReact) {\n isDynamicValueChange = true;\n }\n switch (prop) {\n case 'width':\n this.setEleWidth(this.width);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'separator':\n this.previousEleValue = this.inputElement.value;\n this.setProperties({ separator: newProp.separator }, true);\n this.updateInput();\n this.changeTrigger();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.setProperties({ placeholder: newProp.placeholder }, true);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n this.setRangeAllowEdit();\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'allowEdit':\n this.setRangeAllowEdit();\n break;\n case 'enableRtl':\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.updateInput();\n this.changeTrigger();\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n if (this.dateRangeOptions && this.dateRangeOptions.placeholder == null) {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.inputElement);\n }\n this.setLocale();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.setDataAttribute(true);\n this.checkHtmlAttributes(true);\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'startDate':\n if (typeof newProp.startDate === 'string') {\n newProp.startDate = this.globalize.parseDate(this.getAmPmValue(newProp.startDate), format);\n }\n if (+this.initStartDate !== +newProp.startDate) {\n this.startValue = this.getStartEndValue(newProp.startDate, false);\n this.setDate();\n this.setValue();\n }\n break;\n case 'endDate':\n if (typeof newProp.endDate === 'string') {\n newProp.endDate = this.globalize.parseDate(this.getAmPmValue(newProp.endDate), format);\n }\n if (+this.initEndDate !== +newProp.endDate) {\n this.endValue = this.getStartEndValue(newProp.endDate, true);\n this.setDate();\n this.setValue();\n }\n break;\n case 'value':\n isDynamicValueChange = true;\n this.invalidValueString = null;\n this.checkInvalidRange(newProp.value);\n if (typeof (newProp.value) === 'string') {\n if (!this.invalidValueString) {\n var rangeArray = newProp.value.split(' ' + this.separator + ' ');\n this.value = [new Date(rangeArray[0]), new Date(rangeArray[1])];\n this.updateValue();\n this.setDate();\n }\n else {\n this.clearModelvalue(newProp, oldProp);\n }\n }\n else {\n if ((!isNullOrUndefined(newProp.value) && newProp.value.length > 0)\n || !isNullOrUndefined(newProp.value) && newProp.value.start) {\n this.valueType = newProp.value;\n if (newProp.value[0] === null || (newProp.value.start === null)) {\n if (newProp.value.length === 1 || (newProp.value.start)) {\n this.clearModelvalue(newProp, oldProp);\n }\n else if (newProp.value[1] === null ||\n (newProp.value.start === null)) {\n this.clearModelvalue(newProp, oldProp);\n }\n }\n else if ((+this.initStartDate !== +newProp.value[0]\n || +this.initEndDate !== +newProp.value[1]) ||\n (+this.initStartDate !== +(newProp.value.start\n || +this.initEndDate !== +newProp.value.start))) {\n if (newProp.value.length === 1) {\n this.modelValue = newProp.value;\n }\n else if (newProp.value.start) {\n this.modelValue = newProp.value;\n }\n this.updateValue();\n this.setDate();\n }\n }\n else {\n if (isNullOrUndefined(this.value)\n || newProp.value.start == null) {\n this.valueType = newProp.value;\n this.startValue = null;\n this.endValue = null;\n this.clearModelvalue(newProp, oldProp);\n }\n }\n }\n if (this.isPopupOpen()) {\n if (isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) {\n this.removeSelection();\n if (this.isMobile) {\n this.deviceHeaderUpdate();\n }\n return;\n }\n if (this.isMobile) {\n this.navigate(this.deviceCalendar, this.startValue, this.currentView());\n this.deviceHeaderUpdate();\n }\n else {\n this.navigate(this.leftCalendar, this.startValue, this.currentView());\n this.updateControl(this.leftCalendar);\n this.navigate(this.rightCalendar, this.endValue, this.currentView());\n this.updateControl(this.rightCalendar);\n }\n this.updateRange((this.isMobile ? [this.calendarElement] : [this.leftCalendar, this.rightCalendar]));\n this.updateHeader();\n this.applyButton.disabled = this.applyButton.element.disabled = false;\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n break;\n case 'minDays':\n isDynamicValueChange = true;\n this.setProperties({ minDays: newProp.minDays }, true);\n this.refreshChange();\n this.setMinMaxDays();\n break;\n case 'maxDays':\n isDynamicValueChange = true;\n this.setProperties({ maxDays: newProp.maxDays }, true);\n this.refreshChange();\n this.setMinMaxDays();\n break;\n case 'min':\n this.setProperties({ min: this.checkDateValue(new Date(this.checkValue(newProp.min))) }, true);\n this.previousEleValue = this.inputElement.value;\n this.enableInput();\n this.refreshChange();\n break;\n case 'max':\n this.setProperties({ max: this.checkDateValue(new Date(this.checkValue(newProp.max))) }, true);\n this.enableInput();\n this.refreshChange();\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.refreshChange();\n break;\n case 'presets':\n this.setProperties({ presets: newProp.presets }, true);\n this.processPresets();\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'start':\n this.setProperties({ start: newProp.start }, true);\n this.refreshChange();\n break;\n case 'depth':\n this.setProperties({ depth: newProp.depth }, true);\n this.refreshChange();\n break;\n }\n if (!isDynamicValueChange) {\n this.hide(null);\n }\n }\n };\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"value\", void 0);\n __decorate$2([\n Property(false)\n ], DateRangePicker.prototype, \"enablePersistence\", void 0);\n __decorate$2([\n Property(new Date(1900, 0, 1))\n ], DateRangePicker.prototype, \"min\", void 0);\n __decorate$2([\n Property(new Date(2099, 11, 31))\n ], DateRangePicker.prototype, \"max\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"locale\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate$2([\n Property(false)\n ], DateRangePicker.prototype, \"weekNumber\", void 0);\n __decorate$2([\n Property('Gregorian')\n ], DateRangePicker.prototype, \"calendarMode\", void 0);\n __decorate$2([\n Property(false)\n ], DateRangePicker.prototype, \"openOnFocus\", void 0);\n __decorate$2([\n Property(false)\n ], DateRangePicker.prototype, \"fullScreenMode\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"created\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"destroyed\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"change\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"cleared\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"navigated\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"renderDayCell\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"startDate\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"endDate\", void 0);\n __decorate$2([\n Collection([{}], Presets)\n ], DateRangePicker.prototype, \"presets\", void 0);\n __decorate$2([\n Property('')\n ], DateRangePicker.prototype, \"width\", void 0);\n __decorate$2([\n Property(1000)\n ], DateRangePicker.prototype, \"zIndex\", void 0);\n __decorate$2([\n Property(true)\n ], DateRangePicker.prototype, \"showClearButton\", void 0);\n __decorate$2([\n Property(true)\n ], DateRangePicker.prototype, \"showTodayButton\", void 0);\n __decorate$2([\n Property('Month')\n ], DateRangePicker.prototype, \"start\", void 0);\n __decorate$2([\n Property('Month')\n ], DateRangePicker.prototype, \"depth\", void 0);\n __decorate$2([\n Property('')\n ], DateRangePicker.prototype, \"cssClass\", void 0);\n __decorate$2([\n Property('-')\n ], DateRangePicker.prototype, \"separator\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"minDays\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"maxDays\", void 0);\n __decorate$2([\n Property(false)\n ], DateRangePicker.prototype, \"strictMode\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"keyConfigs\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"format\", void 0);\n __decorate$2([\n Property(true)\n ], DateRangePicker.prototype, \"enabled\", void 0);\n __decorate$2([\n Property(false)\n ], DateRangePicker.prototype, \"readonly\", void 0);\n __decorate$2([\n Property(true)\n ], DateRangePicker.prototype, \"allowEdit\", void 0);\n __decorate$2([\n Property('Never')\n ], DateRangePicker.prototype, \"floatLabelType\", void 0);\n __decorate$2([\n Property(null)\n ], DateRangePicker.prototype, \"placeholder\", void 0);\n __decorate$2([\n Property({})\n ], DateRangePicker.prototype, \"htmlAttributes\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"open\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"close\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"select\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"focus\", void 0);\n __decorate$2([\n Event()\n ], DateRangePicker.prototype, \"blur\", void 0);\n DateRangePicker = __decorate$2([\n NotifyPropertyChanges\n ], DateRangePicker);\n return DateRangePicker;\n}(CalendarBase));\n\nvar __extends$3 = (undefined && undefined.__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$3 = (undefined && undefined.__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};\nvar WRAPPERCLASS = 'e-time-wrapper';\nvar POPUP$2 = 'e-popup';\nvar ERROR$2 = 'e-error';\nvar POPUPDIMENSION = '240px';\nvar DAY = new Date().getDate();\nvar MONTH$2 = new Date().getMonth();\nvar YEAR$2 = new Date().getFullYear();\nvar ROOT$3 = 'e-timepicker';\nvar LIBRARY$2 = 'e-lib';\nvar CONTROL$2 = 'e-control';\nvar CONTENT$2 = 'e-content';\nvar SELECTED$4 = 'e-active';\nvar HOVER$1 = 'e-hover';\nvar NAVIGATION = 'e-navigation';\nvar DISABLED$3 = 'e-disabled';\nvar ICONANIMATION = 'e-icon-anim';\nvar FOCUS = 'e-input-focus';\nvar LISTCLASS$1 = 'e-list-item';\nvar HALFPOSITION = 2;\nvar ANIMATIONDURATION = 50;\nvar OVERFLOW$2 = 'e-time-overflow';\nvar OFFSETVAL = 4;\nvar EDITABLE = 'e-non-edit';\nvar wrapperAttributes = ['title', 'class', 'style'];\n// eslint-disable-next-line @typescript-eslint/no-namespace\nvar TimePickerBase;\n(function (TimePickerBase) {\n // eslint-disable-next-line max-len, jsdoc/require-jsdoc\n function createListItems(createdEl, min, max, globalize, timeFormat, step) {\n if (this.calendarMode === 'Gregorian') ;\n var start;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n var end = +(max.setMilliseconds(0));\n while (end >= start) {\n timeCollections.push(start);\n listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));\n start += interval;\n }\n var listTag = ListBase.createList(createdEl, listItems, null, true);\n return { collection: timeCollections, list: listTag };\n }\n TimePickerBase.createListItems = createListItems;\n})(TimePickerBase || (TimePickerBase = {}));\nvar TimeMaskPlaceholder = /** @__PURE__ @class */ (function (_super) {\n __extends$3(TimeMaskPlaceholder, _super);\n function TimeMaskPlaceholder() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$3([\n Property('day')\n ], TimeMaskPlaceholder.prototype, \"day\", void 0);\n __decorate$3([\n Property('month')\n ], TimeMaskPlaceholder.prototype, \"month\", void 0);\n __decorate$3([\n Property('year')\n ], TimeMaskPlaceholder.prototype, \"year\", void 0);\n __decorate$3([\n Property('day of the week')\n ], TimeMaskPlaceholder.prototype, \"dayOfTheWeek\", void 0);\n __decorate$3([\n Property('hour')\n ], TimeMaskPlaceholder.prototype, \"hour\", void 0);\n __decorate$3([\n Property('minute')\n ], TimeMaskPlaceholder.prototype, \"minute\", void 0);\n __decorate$3([\n Property('second')\n ], TimeMaskPlaceholder.prototype, \"second\", void 0);\n return TimeMaskPlaceholder;\n}(ChildProperty));\n/**\n * TimePicker is an intuitive interface component which provides an options to select a time value\n * from popup list or to set a desired time value.\n * ```\n * \n * \n * ```\n */\nvar TimePicker = /** @__PURE__ @class */ (function (_super) {\n __extends$3(TimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {TimePickerModel} options - Specifies the TimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.disableItemCollection = [];\n _this.invalidValueString = null;\n _this.preventChange = false;\n _this.maskedDateValue = '';\n _this.moduleName = _this.getModuleName();\n _this.timeOptions = options;\n return _this;\n }\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n TimePicker.prototype.preRender = function () {\n this.keyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [ROOT$3, CONTROL$2, LIBRARY$2]);\n this.inputElement = this.element;\n this.angularTag = null;\n this.formElement = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n this.openPopupEventArgs = {\n appendTo: document.body\n };\n };\n // element creation\n TimePicker.prototype.render = function () {\n this.initialize();\n this.createInputElement();\n this.updateHtmlAttributeToWrapper();\n this.setTimeAllowEdit();\n this.setEnable();\n this.validateInterval();\n this.bindEvents();\n this.validateDisable();\n this.setTimeZone();\n this.setValue(this.getFormattedValue(this.value));\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n this.checkErrorState(this.maskedDateValue);\n }\n this.anchor = this.inputElement;\n this.inputElement.setAttribute('value', this.inputElement.value);\n this.inputEleValue = this.getDateObject(this.inputElement.value);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n };\n TimePicker.prototype.setTimeZone = function () {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var serverTimezoneDiff = this.serverTimezoneOffset;\n var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;\n timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;\n this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));\n }\n };\n TimePicker.prototype.isDayLightSaving = function () {\n var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();\n var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();\n return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));\n };\n TimePicker.prototype.setTimeAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.clearIconState();\n };\n TimePicker.prototype.clearIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n else {\n addClass([this.inputWrapper.container], [EDITABLE]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n };\n TimePicker.prototype.validateDisable = function () {\n this.setMinMax(this.initMin, this.initMax);\n if (!isNullOrUndefined(this.value)) {\n this.popupCreation();\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n }\n if ((!isNaN(+this.value) && this.value !== null)) {\n if (!this.valueIsDisable(this.value)) {\n //disable value given in value property so reset the date based on current date\n if (this.strictMode) {\n this.resetState();\n }\n this.initValue = null;\n this.initMax = this.getDateObject(this.initMax);\n this.initMin = this.getDateObject(this.initMin);\n this.timeCollections = this.liCollections = [];\n this.setMinMax(this.initMin, this.initMax);\n }\n }\n };\n TimePicker.prototype.validationAttribute = function (target, input) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n input.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n TimePicker.prototype.initialize = function () {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n this.checkInvalidValue(this.value);\n // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true);\n this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true);\n this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true);\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true);\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.checkAttributes(false); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n };\n TimePicker.prototype.checkTimeFormat = function () {\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (!isNullOrUndefined(this.format.skeleton) && this.format.skeleton !== '') {\n var skeletonString = this.format.skeleton;\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: skeletonString });\n }\n else {\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: 'short' });\n }\n }\n else {\n this.formatString = null;\n }\n };\n TimePicker.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n TimePicker.prototype.createInputElement = function () {\n if (this.fullScreenMode && Browser.isDevice) {\n this.cssClass += ' ' + 'e-popup-expand';\n }\n var updatedCssClassesValue = this.cssClass;\n var isBindClearAction = this.enableMask ? false : true;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassesValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n bindClearAction: isBindClearAction,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassesValue,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [' e-input-group-icon e-time-icon e-icons']\n }, this.createElement);\n this.inputWrapper.container.style.width = this.setWidth(this.width);\n attributes(this.inputElement, {\n 'aria-autocomplete': 'list', 'tabindex': '0',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-disabled': 'false', 'aria-invalid': 'false'\n });\n if (!this.isNullOrEmpty(this.inputStyle)) {\n Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);\n }\n addClass([this.inputWrapper.container], WRAPPERCLASS);\n };\n TimePicker.prototype.getCldrDateTimeFormat = function () {\n var culture = new Internationalization(this.locale);\n var cldrTime;\n var dateFormat = culture.getDatePattern({ skeleton: 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.cldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.checkInvalidValue = function (value) {\n var isInvalid = false;\n if (typeof value !== 'object' && !isNullOrUndefined(value)) {\n var valueString = value;\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n var valueExpression = null;\n var valueExp = null;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n else if (typeof value === 'string') {\n if (!(/^[a-zA-Z0-9- ]*$/).test(value)) {\n valueExpression = this.setCurrentDate(this.getDateObject(value));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n }));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), {\n format: this.formatString, type: 'dateTime', skeleton: 'yMd'\n }));\n }\n }\n }\n }\n valueExp = this.globalize.parseDate(this.getAmPmValue(valueString), {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n });\n valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null;\n if (isNullOrUndefined(valueExpression) && valueString.replace(/\\s/g, '').length) {\n var extISOString = null;\n var basicISOString = null;\n // eslint-disable-next-line\n extISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // eslint-disable-next-line\n basicISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOString.test(valueString) && !basicISOString.test(valueString))\n || ((/^[a-zA-Z0-9- ]*$/).test(value)) || isNaN(+new Date('' + valueString))) {\n isInvalid = true;\n }\n else {\n valueExpression = new Date('' + valueString);\n }\n }\n if (isInvalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n this.initValue = null;\n }\n else {\n this.setProperties({ value: valueExpression }, true);\n this.initValue = this.value;\n }\n }\n };\n TimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this.enableMask) {\n modules.push({ args: [this], member: 'MaskedDateTime' });\n }\n return modules;\n };\n TimePicker.prototype.getAmPmValue = function (date) {\n try {\n if (typeof date === 'string' && date.trim() !== '') {\n // Replace am/pm variants with uppercase AM/PM\n return date.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); });\n }\n // If date is null, undefined, or an empty string, return a default value or empty string\n return '';\n }\n catch (error) {\n console.error('Error occurred while processing date:', error);\n return ''; // Return a default value in case of an error\n }\n };\n TimePicker.prototype.cldrFormat = function (type) {\n var cldrDateTimeString;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTimeString = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTimeString;\n };\n // destroy function\n TimePicker.prototype.destroy = function () {\n this.hide();\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n this.unBindEvents();\n var ariaAttribute = {\n 'aria-autocomplete': 'list', 'tabindex': '0',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-disabled': 'true', 'aria-invalid': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n this.ensureInputAttribute();\n this.enableElement([this.inputElement]);\n this.inputElement.classList.remove('e-input');\n if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {\n Input.setEnabled(true, this.inputElement, this.floatLabelType);\n }\n }\n if (this.inputWrapper.container) {\n detach(this.inputWrapper.container);\n }\n this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;\n this.liCollections = this.timeCollections = this.disableItemCollection = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n Input.destroy({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n _super.prototype.destroy.call(this);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n this.rippleFn = null;\n this.openPopupEventArgs = null;\n this.selectedElement = null;\n this.listTag = null;\n this.liCollections = null;\n };\n TimePicker.prototype.ensureInputAttribute = function () {\n var propertyList = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n propertyList[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < propertyList.length; i++) {\n if (!isNullOrUndefined(this.cloneElement.getAttribute(propertyList[i]))) {\n this.inputElement.setAttribute(propertyList[i], this.cloneElement.getAttribute(propertyList[i]));\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = this.cloneElement.getAttribute(propertyList[i]);\n }\n }\n else {\n this.inputElement.removeAttribute(propertyList[i]);\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n }\n }\n };\n //popup creation\n TimePicker.prototype.popupCreation = function () {\n this.popupWrapper = this.createElement('div', {\n className: ROOT$3 + ' ' + POPUP$2,\n attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }\n });\n this.popupWrapper.setAttribute('aria-label', this.element.id);\n this.popupWrapper.setAttribute('role', 'dialog');\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.generateList();\n append([this.listWrapper], this.popupWrapper);\n }\n this.addSelection();\n this.renderPopup();\n detach(this.popupWrapper);\n };\n TimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.popupWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n TimePicker.prototype.generateList = function () {\n this.createListItems();\n this.wireListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS$1 };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS$1);\n };\n TimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.setPopupWidth(this.width),\n zIndex: this.zIndex,\n targetType: 'relative',\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n enableRtl: this.enableRtl,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n offsetY: OFFSETVAL,\n open: function () {\n _this.popupWrapper.style.visibility = 'visible';\n addClass([_this.inputWrapper.buttons[0]], SELECTED$4);\n }, close: function () {\n removeClass([_this.inputWrapper.buttons[0]], SELECTED$4);\n _this.unWireListEvents();\n _this.inputElement.removeAttribute('aria-activedescendant');\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupWrapper.innerHTML = '';\n _this.listWrapper = _this.popupWrapper = _this.listTag = undefined;\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (!Browser.isDevice) {\n this.popupObj.collision = { X: 'none', Y: 'flip' };\n }\n if (Browser.isDevice && this.fullScreenMode) {\n this.popupObj.element.style.maxHeight = '100%';\n this.popupObj.element.style.width = '100%';\n }\n else {\n this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n }\n if (Browser.isDevice && this.fullScreenMode) {\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var modelTitleSpan = this.createElement('span', { className: 'e-model-title' });\n modelTitleSpan.textContent = 'Select time';\n var modelCloseIcon = this.createElement('span', { className: 'e-popup-close' });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.timePopupCloseHandler, this);\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTitleSpan);\n this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild);\n }\n };\n TimePicker.prototype.timePopupCloseHandler = function (e) {\n this.hide();\n };\n //util function\n TimePicker.prototype.getFormattedValue = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { skeleton: 'medium', type: 'time' });\n }\n };\n TimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = !this.isNullOrEmpty(this.initValue);\n if (this.checkDateValue(dateValue)) {\n var date = value ? this.initValue.getDate() : DAY;\n var month = value ? this.initValue.getMonth() : MONTH$2;\n var year = value ? this.initValue.getFullYear() : YEAR$2;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds());\n }\n }\n return null;\n };\n TimePicker.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 if (wrapperAttributes.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassesValue = (this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassesValue !== '') {\n addClass([this.inputWrapper.container], updatedClassesValue.split(' '));\n }\n }\n else if (key === 'style') {\n var timeStyle = this.inputWrapper.container.getAttribute(key);\n timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[\"\" + key]) :\n this.htmlAttributes[\"\" + key];\n this.inputWrapper.container.setAttribute(key, timeStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n };\n TimePicker.prototype.updateHtmlAttributeToElement = 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 if (wrapperAttributes.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n TimePicker.prototype.updateCssClass = function (cssClassNew, cssClassOld) {\n if (!isNullOrUndefined(cssClassOld)) {\n cssClassOld = (cssClassOld.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(cssClassNew)) {\n cssClassNew = (cssClassNew.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(cssClassNew, [this.inputWrapper.container], cssClassOld);\n if (this.popupWrapper) {\n Input.setCssClass(cssClassNew, [this.popupWrapper], cssClassOld);\n }\n };\n TimePicker.prototype.removeErrorClass = function () {\n removeClass([this.inputWrapper.container], ERROR$2);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n };\n TimePicker.prototype.checkErrorState = function (val) {\n var value = this.getDateObject(val);\n if ((this.validateState(value) && !this.invalidValueString) ||\n (this.enableMask && this.inputElement.value === this.maskedDateValue)) {\n this.removeErrorClass();\n }\n else {\n addClass([this.inputWrapper.container], ERROR$2);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n };\n TimePicker.prototype.validateInterval = function () {\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.enableElement([this.inputWrapper.buttons[0]]);\n }\n else {\n this.disableTimeIcon();\n }\n };\n TimePicker.prototype.disableTimeIcon = function () {\n this.disableElement([this.inputWrapper.buttons[0]]);\n this.hide();\n };\n TimePicker.prototype.disableElement = function (element) {\n addClass(element, DISABLED$3);\n };\n TimePicker.prototype.enableElement = function (element) {\n removeClass(element, DISABLED$3);\n };\n TimePicker.prototype.selectInputText = function () {\n this.inputElement.setSelectionRange(0, (this.inputElement).value.length);\n };\n TimePicker.prototype.setCursorToEnd = function () {\n this.inputElement.setSelectionRange((this.inputElement).value.length, (this.inputElement).value.length);\n };\n TimePicker.prototype.getMeridianText = function () {\n var meridian;\n if (this.locale === 'en' || this.locale === 'en-US') {\n meridian = getValue('dayPeriods.format.wide', getDefaultDateObject());\n }\n else {\n var gregorianFormat = '.dates.calendars.gregorian.dayPeriods.format.abbreviated';\n var mainVal = 'main.';\n meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData);\n }\n return meridian;\n };\n TimePicker.prototype.getCursorSelection = function () {\n var input = (this.inputElement);\n var start = 0;\n var end = 0;\n if (!isNaN(input.selectionStart)) {\n start = input.selectionStart;\n end = input.selectionEnd;\n }\n return { start: Math.abs(start), end: Math.abs(end) };\n };\n TimePicker.prototype.getActiveElement = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n return this.popupWrapper.querySelectorAll('.' + SELECTED$4);\n }\n else {\n return null;\n }\n };\n TimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n TimePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = (width.match(/px|%|em/)) ? width : formatUnit(width);\n }\n else {\n width = '100%';\n }\n return width;\n };\n TimePicker.prototype.setPopupWidth = function (width) {\n width = this.setWidth(width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n TimePicker.prototype.setScrollPosition = function () {\n var element = this.selectedElement;\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n TimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.setScrollTo = function () {\n var element;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS$1);\n if (items.length) {\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.getText = function () {\n return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value);\n };\n TimePicker.prototype.getValue = function (value) {\n return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, {\n format: this.cldrTimeFormat(), type: 'time'\n });\n };\n TimePicker.prototype.cldrDateFormat = function () {\n var cldrDate;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDate = (getValue('dateFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));\n }\n return cldrDate;\n };\n TimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.formatString)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.dateToNumeric = function () {\n var cldrTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.medium', getDefaultDateObject()));\n }\n else {\n cldrTime = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));\n }\n return cldrTime;\n };\n TimePicker.prototype.getExactDateTime = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' });\n }\n };\n TimePicker.prototype.setValue = function (value) {\n var time = this.checkValue(value);\n if (!this.strictMode && !this.validateState(time)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n if (this.isNullOrEmpty(time)) {\n this.initValue = null;\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.initValue = this.compareFormatChange(time);\n }\n }\n this.updateInput(true, this.initValue);\n };\n TimePicker.prototype.compareFormatChange = function (value) {\n if (isNullOrUndefined(value)) {\n return null;\n }\n return (value !== this.getText()) ? this.getDateObject(value) : this.getDateObject(this.value);\n };\n TimePicker.prototype.updatePlaceHolder = function () {\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n };\n //event related functions\n TimePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n TimePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');\n };\n TimePicker.prototype.popupHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n e.preventDefault();\n if (this.isPopupOpen()) {\n this.closePopup(0, e);\n }\n else {\n this.inputElement.focus();\n this.show(e);\n }\n };\n TimePicker.prototype.mouseDownHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.readonly) {\n this.inputElement.setSelectionRange(0, 0);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n }\n };\n TimePicker.prototype.mouseUpHandler = function (event) {\n if (!this.readonly) {\n event.preventDefault();\n if (this.enableMask) {\n event.preventDefault();\n this.notify('setMaskSelection', {\n module: 'MaskedDateTime'\n });\n return;\n }\n else {\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n var curPos = this.getCursorSelection();\n if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {\n if (this.inputElement.value.length > 0) {\n this.cursorDetails = this.focusSelection();\n }\n this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);\n }\n }\n }\n };\n TimePicker.prototype.focusSelection = function () {\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n var split = this.inputElement.value.split('');\n split.push(' ');\n var curPos = this.getCursorSelection();\n var start = 0;\n var end = 0;\n var isSeparator = false;\n if (!this.isTextSelected) {\n for (var i = 0; i < split.length; i++) {\n if (!regex.test(split[i])) {\n end = i;\n isSeparator = true;\n }\n if (isSeparator) {\n if (curPos.start >= start && curPos.end <= end) {\n // eslint-disable-next-line no-self-assign\n end = end;\n this.isTextSelected = true;\n break;\n }\n else {\n start = i + 1;\n isSeparator = false;\n }\n }\n }\n }\n else {\n start = curPos.start;\n end = curPos.end;\n this.isTextSelected = false;\n }\n return { start: start, end: end };\n };\n TimePicker.prototype.inputHandler = function (event) {\n if (!this.readonly && this.enabled) {\n if (!((event.action === 'right' || event.action === 'left' || event.action === 'tab') || ((event.action === 'home' || event.action === 'end' || event.action === 'up' || event.action === 'down') && !this.isPopupOpen() && !this.enableMask))) {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n if (!this.isPopupOpen()) {\n this.popupCreation();\n this.popupObj.destroy();\n this.popupObj = this.popupWrapper = null;\n }\n if (this.enableMask && !this.readonly && !this.isPopupOpen()) {\n event.preventDefault();\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: event\n });\n }\n if (this.isPopupOpen()) {\n this.keyHandler(event);\n }\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.updateValue(this.valueWithMinutes, event);\n }\n else {\n this.updateValue(this.inputElement.value, event);\n }\n this.hide();\n this.isNavigate = false;\n if (this.isPopupOpen()) {\n event.stopPropagation();\n }\n break;\n case 'open':\n this.show(event);\n break;\n case 'escape':\n this.updateInputValue(this.objToString(this.value));\n if (this.enableMask) {\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n this.createMask();\n }\n this.previousState(this.value);\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n case 'right':\n case 'left':\n case 'tab':\n case 'shiftTab':\n if (!this.isPopupOpen() && this.enableMask && !this.readonly) {\n if ((this.inputElement.selectionStart === 0 && this.inputElement.selectionEnd === this.inputElement.value.length) ||\n (this.inputElement.selectionEnd !== this.inputElement.value.length && event.action === 'tab') ||\n (this.inputElement.selectionStart !== 0 && event.action === 'shiftTab') || (event.action === 'left' || event.action === 'right')) {\n event.preventDefault();\n }\n this.notify('keyDownHandler', { module: 'MaskedDateTime',\n e: event\n });\n }\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n TimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS$1);\n this.setSelection(li, event);\n if (li && li.classList.contains(LISTCLASS$1)) {\n this.hide();\n }\n };\n TimePicker.prototype.closePopup = function (delay, e) {\n var _this = this;\n if (this.isPopupOpen() && this.popupWrapper) {\n var args = {\n popup: this.popupObj,\n event: e || null,\n cancel: false,\n name: 'open'\n };\n removeClass([document.body], OVERFLOW$2);\n this.trigger('close', args, function (args) {\n if (!args.cancel) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: delay ? delay : 0\n };\n _this.popupObj.hide(new Animation(animModel));\n removeClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n _this.inputElement.removeAttribute('aria-owns');\n _this.inputElement.removeAttribute('aria-controls');\n _this.inputElement.removeAttribute('aria-activedescendant');\n EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);\n }\n if (Browser.isDevice && _this.modal) {\n _this.modal.style.display = 'none';\n _this.modal.outerHTML = '';\n _this.modal = null;\n }\n if (Browser.isDevice) {\n if (!isNullOrUndefined(_this.mobileTimePopupWrap)) {\n _this.mobileTimePopupWrap.remove();\n _this.mobileTimePopupWrap = null;\n }\n }\n if (Browser.isDevice && _this.allowEdit && !_this.readonly) {\n _this.inputElement.removeAttribute('readonly');\n }\n });\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n };\n TimePicker.prototype.disposeServerPopup = function () {\n if (this.popupWrapper) {\n this.popupWrapper.style.visibility = 'hidden';\n this.popupWrapper.style.top = '-9999px';\n this.popupWrapper.style.left = '-9999px';\n this.popupWrapper.style.width = '0px';\n this.popupWrapper.style.height = '0px';\n }\n };\n TimePicker.prototype.checkValueChange = function (event, isNavigation) {\n if (!this.strictMode && !this.validateState(this.valueWithMinutes)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.setProperties({ value: this.compareFormatChange(this.inputElement.value) }, true);\n this.initValue = this.valueWithMinutes = this.compareFormatChange(this.inputElement.value);\n this.prevValue = this.inputElement.value;\n if (+this.prevDate !== +this.value) {\n this.changeEvent(event);\n }\n }\n else {\n if (!isNavigation) {\n if ((this.prevValue !== this.inputElement.value) || isNullOrUndefined(this.checkDateValue(this.value))) {\n this.valueProcess(event, this.compareFormatChange(this.inputElement.value));\n }\n }\n else {\n var value = this.getDateObject(new Date(this.timeCollections[this.activeIndex]));\n if (+this.prevDate !== +value) {\n this.valueProcess(event, value);\n }\n }\n }\n };\n TimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS$1);\n this.setHover(currentLi, HOVER$1);\n };\n TimePicker.prototype.setHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeHover(className);\n addClass([li], className);\n if (className === NAVIGATION) {\n li.setAttribute('aria-selected', 'true');\n }\n }\n };\n TimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li)) {\n this.checkValue(li.getAttribute('data-value'));\n if (this.enableMask) {\n this.createMask();\n }\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], SELECTED$4);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.checkValueChange(event, true);\n }\n };\n TimePicker.prototype.onMouseLeave = function () {\n this.removeHover(HOVER$1);\n };\n TimePicker.prototype.scrollHandler = function () {\n if (this.getModuleName() === 'timepicker' && Browser.isDevice) {\n return;\n }\n else {\n this.hide();\n }\n };\n TimePicker.prototype.setMinMax = function (minVal, maxVal) {\n if (isNullOrUndefined(this.checkDateValue(minVal))) {\n this.initMin = this.getDateObject('12:00:00 AM');\n }\n if (isNullOrUndefined(this.checkDateValue(maxVal))) {\n this.initMax = this.getDateObject('11:59:59 PM');\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.validateMinMax = function (dateVal, minVal, maxVal) {\n var value = dateVal instanceof Date ? dateVal : this.getDateObject(dateVal);\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n dateVal = this.strictOperation(this.initMin, this.initMax, dateVal, value);\n }\n else if (+(this.createDateObj(this.getFormattedValue(this.initMin))) >\n +(this.createDateObj(this.getFormattedValue(this.initMax)))) {\n this.disableTimeIcon();\n }\n if (this.strictMode) {\n dateVal = this.valueIsDisable(dateVal) ? dateVal : null;\n }\n this.checkErrorState(dateVal);\n return dateVal;\n };\n TimePicker.prototype.valueIsDisable = function (value) {\n if (!isNullOrUndefined(this.disableItemCollection) && this.disableItemCollection.length > 0) {\n if (this.disableItemCollection.length === this.timeCollections.length) {\n return false;\n }\n var time = value instanceof Date ? this.objToString(value) : value;\n for (var index = 0; index < this.disableItemCollection.length; index++) {\n if (time === this.disableItemCollection[index]) {\n return false;\n }\n }\n }\n return true;\n };\n TimePicker.prototype.validateState = function (val) {\n if (!this.strictMode) {\n if (this.valueIsDisable(val)) {\n var value = typeof val === 'string' ? this.setCurrentDate(this.getDateObject(val)) :\n this.setCurrentDate(this.getDateObject(val));\n var maxValue = this.setCurrentDate(this.getDateObject(this.initMax));\n var minValue = this.setCurrentDate(this.getDateObject(this.initMin));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n if ((+(value) > +(maxValue)) || (+(value) < +(minValue))) {\n return false;\n }\n }\n else {\n if ((+(maxValue) < +(minValue)) || this.inputElement.value !== '') {\n return false;\n }\n }\n }\n else {\n return false;\n }\n }\n return true;\n };\n TimePicker.prototype.strictOperation = function (minimum, maximum, dateVal, val) {\n var maxValue = this.createDateObj(this.getFormattedValue(maximum));\n var minValue = this.createDateObj(this.getFormattedValue(minimum));\n var value = this.createDateObj(this.getFormattedValue(val));\n if (this.strictMode) {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n this.initValue = this.getDateObject(maxValue);\n this.updateInputValue(this.getValue(this.initValue));\n if (this.enableMask) {\n this.createMask();\n }\n return this.inputElement.value;\n }\n else if (+minValue >= +value) {\n return this.getDateObject(minValue);\n }\n else if (+value >= +maxValue || +minValue === +maxValue) {\n return this.getDateObject(maxValue);\n }\n }\n else {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n if (!isNaN(+this.createDateObj(dateVal))) {\n return dateVal;\n }\n }\n }\n return dateVal;\n };\n TimePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.popupHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n EventHandler.add(this.inputElement, 'input', this.inputEventHandler, this);\n if (this.enableMask) {\n EventHandler.add(this.inputElement, 'keydown', this.keydownHandler, this);\n EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);\n }\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyConfigure = extend(this.keyConfigure, this.keyConfigs);\n this.inputEvent = new KeyboardEvents(this.inputWrapper.container, {\n keyAction: this.inputHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n if (this.showClearButton && this.inputElement) {\n EventHandler.add(this.inputElement, 'mousedown', this.mouseDownHandler, this);\n }\n }\n };\n TimePicker.prototype.keydownHandler = function (e) {\n switch (e.code) {\n case 'Delete':\n if (this.enableMask && !this.popupObj && !this.readonly) {\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: e\n });\n }\n break;\n }\n };\n TimePicker.prototype.keyupHandler = function (e) {\n if ((e.code === 'Backspace' || e.code === 'Delete') && (this.enableMask && this.showClearButton && this.inputElement && this.inputElement.value === this.maskedDateValue && this.inputWrapper && this.inputWrapper.clearButton && !this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) {\n this.inputWrapper.clearButton.classList.add('e-clear-icon-hide');\n }\n };\n TimePicker.prototype.formResetHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var timeValue = this.inputElement.getAttribute('value');\n var val = this.checkDateValue(this.inputEleValue);\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n val = null;\n timeValue = '';\n this.inputElement.setAttribute('value', '');\n }\n this.setProperties({ value: val }, true);\n this.prevDate = this.value;\n this.valueWithMinutes = this.value;\n this.initValue = this.value;\n if (this.inputElement) {\n this.updateInputValue(timeValue);\n if (this.enableMask) {\n if (!timeValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n this.createMask();\n }\n this.checkErrorState(timeValue);\n this.prevValue = this.inputElement.value;\n }\n }\n };\n TimePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n TimePicker.prototype.inputEventHandler = function () {\n if (this.enableMask) {\n this.notify('inputHandler', {\n module: 'MaskedDateTime'\n });\n }\n };\n TimePicker.prototype.unBindEvents = function () {\n if (this.inputWrapper) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.popupHandler);\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n EventHandler.remove(this.inputElement, 'input', this.inputEventHandler);\n if (this.enableMask) {\n EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);\n }\n if (this.inputEvent) {\n this.inputEvent.destroy();\n }\n EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);\n if (this.showClearButton && !isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.clearButton)) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n TimePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n };\n TimePicker.prototype.raiseClearedEvent = function (e) {\n var clearedArgs = {\n event: e\n };\n this.trigger('cleared', clearedArgs);\n };\n TimePicker.prototype.clearHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n if (!isNullOrUndefined(this.value)) {\n this.clear(e);\n }\n else {\n this.resetState();\n this.raiseClearedEvent(e);\n }\n if (this.popupWrapper) {\n this.popupWrapper.scrollTop = 0;\n }\n if (this.enableMask) {\n this.notify('clearHandler', {\n module: 'MaskedDateTime'\n });\n }\n if (closest(this.element, 'form')) {\n var element = this.element;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n TimePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.initValue = null;\n this.resetState();\n this.raiseClearedEvent(event);\n this.changeEvent(event);\n };\n TimePicker.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.zIndex = this.zIndex;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['step', 'disabled', 'readonly', 'style', 'name', 'value', 'min', 'max', 'placeholder'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'style':\n this.inputStyle = this.inputElement.getAttribute(prop);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.initValue = value;\n this.updateInput(false, this.initValue);\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n TimePicker.prototype.setCurrentDate = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n return new Date(YEAR$2, MONTH$2, DAY, value.getHours(), value.getMinutes(), value.getSeconds());\n };\n TimePicker.prototype.getTextFormat = function () {\n var time = 0;\n if (this.cldrTimeFormat().split(' ')[0] === 'a' || this.cldrTimeFormat().indexOf('a') === 0) {\n time = 1;\n }\n else if (this.cldrTimeFormat().indexOf('a') < 0) {\n var strArray = this.cldrTimeFormat().split(' ');\n for (var i = 0; i < strArray.length; i++) {\n if (strArray[i].toLowerCase().indexOf('h') >= 0) {\n time = i;\n break;\n }\n }\n }\n return time;\n };\n TimePicker.prototype.updateValue = function (value, event) {\n var val;\n if (this.isNullOrEmpty(value)) {\n this.resetState();\n }\n else {\n val = this.checkValue(value);\n if (this.strictMode) {\n // this case set previous value to the text box when set invalid date\n var inputVal = (val === null && value.trim().length > 0) ?\n this.previousState(this.prevDate) : this.inputElement.value;\n this.updateInputValue(inputVal);\n if (this.enableMask) {\n if (!inputVal) {\n this.updateInputValue(this.maskedDateValue);\n }\n if (isNullOrUndefined(val) && value !== this.maskedDateValue) {\n this.createMask();\n }\n if (isNullOrUndefined(val) && value === this.maskedDateValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n }\n this.checkValueChange(event, typeof value === 'string' ? false : true);\n };\n TimePicker.prototype.previousState = function (date) {\n var value = this.getDateObject(date);\n for (var i = 0; i < this.timeCollections.length; i++) {\n if (+value === this.timeCollections[i]) {\n this.activeIndex = i;\n this.selectedElement = this.liCollections[i];\n this.valueWithMinutes = new Date(this.timeCollections[i]);\n break;\n }\n }\n return this.getValue(date);\n };\n TimePicker.prototype.resetState = function () {\n this.removeSelection();\n Input.setValue('', this.inputElement, this.floatLabelType, false);\n this.valueWithMinutes = this.activeIndex = null;\n if (!this.strictMode) {\n this.checkErrorState(null);\n }\n };\n TimePicker.prototype.objToString = function (val) {\n if (isNullOrUndefined(this.checkDateValue(val))) {\n return null;\n }\n else {\n return this.globalize.formatDate(val, { format: this.cldrTimeFormat(), type: 'time' });\n }\n };\n TimePicker.prototype.checkValue = function (value) {\n if (!this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.validateValue(date, value);\n }\n this.resetState();\n return this.valueWithMinutes = null;\n };\n TimePicker.prototype.validateValue = function (date, value) {\n var time;\n var val = this.validateMinMax(value, this.min, this.max);\n var newval = this.getDateObject(val);\n if (this.getFormattedValue(newval) !== this.getFormattedValue(this.value)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = this.objToString(this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = this.objToString(this.valueWithMinutes);\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n var value_1 = val.trim().length > 0 ? val : '';\n this.updateInputValue(value_1);\n if (this.enableMask) {\n if (!value_1) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n else {\n this.updateInputValue(time);\n if (this.enableMask) {\n if (time === '') {\n this.updateInputValue(this.maskedDateValue);\n }\n if (isNullOrUndefined(time) && value !== this.maskedDateValue) {\n this.createMask();\n }\n if (isNullOrUndefined(time) && value === this.maskedDateValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n return time;\n };\n TimePicker.prototype.createMask = function () {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n };\n TimePicker.prototype.findNextElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var timeVal = null;\n var count = this.liCollections.length;\n var collections = this.timeCollections;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(collections.length - 1, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < count; i++) {\n if (+value < this.timeCollections[i]) {\n var index = this.validLiElement(i);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === count - 1) {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n else {\n for (var i = count - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n var index = this.validLiElement(i, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === 0) {\n var index = this.validLiElement(count - 1);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));\n }\n else {\n this.selectNextItem(event);\n }\n };\n TimePicker.prototype.selectNextItem = function (event) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n this.elementValue(new Date(this.timeCollections[index]));\n };\n TimePicker.prototype.elementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.checkValue(value);\n }\n };\n TimePicker.prototype.validLiElement = function (index, backward) {\n var elementIndex = null;\n var items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :\n this.popupWrapper.querySelectorAll('.' + LISTCLASS$1);\n var isCheck = true;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n if (!items[i].classList.contains(DISABLED$3)) {\n elementIndex = i;\n break;\n }\n else if (i === 0) {\n if (isCheck) {\n index = i = items.length;\n isCheck = false;\n }\n }\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n if (!items[i].classList.contains(DISABLED$3)) {\n elementIndex = i;\n break;\n }\n else if (i === items.length - 1) {\n if (isCheck) {\n index = i = -1;\n isCheck = false;\n }\n }\n }\n }\n }\n return elementIndex;\n };\n TimePicker.prototype.keyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper)\n && this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {\n return;\n }\n var count = this.timeCollections.length;\n if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n this.elementValue(new Date(this.timeCollections[index]));\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n var nextItem = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (count) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;\n this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?\n false : true);\n nextItem = isNullOrUndefined(this.timeCollections[index]) ?\n this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n var index = this.validLiElement(0);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(count - 1, true);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(new Date(nextItem));\n }\n this.isNavigate = true;\n this.setHover(this.selectedElement, NAVIGATION);\n this.setActiveDescendant();\n if (this.enableMask) {\n this.selectInputText();\n }\n if (this.isPopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setScrollPosition();\n }\n };\n TimePicker.prototype.getCultureTimeObject = function (ld, c) {\n return getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n TimePicker.prototype.getCultureDateObject = function (ld, c) {\n return getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);\n };\n TimePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n TimePicker.prototype.unWireListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n if (!Browser.isDevice) {\n EventHandler.remove(this.listWrapper, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.listWrapper, 'mouseout', this.onMouseLeave);\n }\n }\n };\n TimePicker.prototype.valueProcess = function (event, value) {\n var result = (isNullOrUndefined(this.checkDateValue(value))) ? null : value;\n if (+this.prevDate !== +result) {\n this.initValue = result;\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.changeEvent = function (e) {\n this.addSelection();\n this.updateInput(true, this.initValue);\n var eventArgs = {\n event: (e || null),\n value: this.value,\n text: (this.inputElement).value,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n eventArgs.value = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n this.prevDate = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.invalidValueString = null;\n this.checkErrorState(this.value);\n };\n TimePicker.prototype.updateInput = function (isUpdate, date) {\n if (isUpdate) {\n this.prevValue = this.getValue(this.prevDate);\n }\n this.prevDate = this.valueWithMinutes = date;\n if ((typeof date !== 'number') || (this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {\n this.setProperties({ value: date }, true);\n if (this.enableMask && this.value) {\n this.createMask();\n }\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.checkErrorState(this.invalidValueString);\n this.updateInputValue(this.invalidValueString);\n }\n this.clearIconState();\n };\n TimePicker.prototype.setActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement) && this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n };\n TimePicker.prototype.removeSelection = function () {\n this.removeHover(HOVER$1);\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + SELECTED$4);\n if (items.length) {\n removeClass(items, SELECTED$4);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.removeHover = function (className) {\n var hoveredItem = this.getHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n if (className === NAVIGATION) {\n hoveredItem[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.getHoverItem = function (className) {\n var hoveredItem;\n if (!isNullOrUndefined(this.popupWrapper)) {\n hoveredItem = this.popupWrapper.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n TimePicker.prototype.setActiveClass = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS$1);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if ((this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n };\n TimePicker.prototype.addSelection = function () {\n this.selectedElement = null;\n this.removeSelection();\n this.setActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], SELECTED$4);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n TimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS$1) && !li.classList.contains(DISABLED$3));\n };\n TimePicker.prototype.createDateObj = function (val) {\n var formatStr = null;\n var today = this.globalize.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n var value = null;\n if (typeof val === 'string') {\n if (val.toUpperCase().indexOf('AM') > -1 || val.toUpperCase().indexOf('PM') > -1) {\n today = this.defaultCulture.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n value = isNaN(+new Date(today + ' ' + val)) ? null : new Date(new Date(today + ' ' + val).setMilliseconds(0));\n if (isNullOrUndefined(value)) {\n value = this.timeParse(today, val);\n }\n }\n else {\n value = this.timeParse(today, val);\n }\n }\n else if (val instanceof Date) {\n value = val;\n }\n return value;\n };\n TimePicker.prototype.timeParse = function (today, val) {\n var value;\n value = this.globalize.parseDate(this.getAmPmValue(today + ' ' + val), {\n format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'\n });\n value = isNullOrUndefined(value) ? this.globalize.parseDate(this.getAmPmValue(today + ' ' + val), {\n format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'\n }) : value;\n value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));\n return value;\n };\n TimePicker.prototype.createListItems = function () {\n var _this = this;\n this.listWrapper = this.createElement('div', { className: CONTENT$2, attrs: { 'tabindex': '-1' } });\n var start;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n var end = +(this.getDateObject(this.initMax).setMilliseconds(0));\n while (end >= start) {\n this.timeCollections.push(start);\n listItems.push(this.globalize.formatDate(new Date(start), { format: this.cldrTimeFormat(), type: 'time' }));\n start += interval;\n }\n var listBaseOptions = {\n itemCreated: function (args) {\n var eventArgs = {\n element: args.item,\n text: args.text, value: _this.getDateObject(args.text), isDisabled: false\n };\n _this.trigger('itemRender', eventArgs, function (eventArgs) {\n if (eventArgs.isDisabled) {\n eventArgs.element.classList.add(DISABLED$3);\n }\n if (eventArgs.element.classList.contains(DISABLED$3)) {\n _this.disableItemCollection.push(eventArgs.element.getAttribute('data-value'));\n }\n });\n }\n };\n this.listTag = ListBase.createList(this.createElement, listItems, listBaseOptions, true);\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||\n (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) && target !== this.inputElement\n && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&\n target !== (this.inputWrapper && this.inputWrapper.clearButton) &&\n target !== (this.inputWrapper && this.inputWrapper.container)\n && (!target.classList.contains('e-dlg-overlay'))) {\n if (this.isPopupOpen()) {\n this.hide();\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement)\n && (target === this.popupWrapper);\n }\n }\n };\n TimePicker.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement, this.floatLabelType);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], DISABLED$3);\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED$3);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.inputElement.tabIndex = -1;\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date(this.checkInValue(date.min)));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date(this.checkInValue(date.max)));\n this.setProperties({ max: this.initMax }, true);\n }\n if (this.inputElement.value === '') {\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.checkValue(this.inputElement.value);\n }\n this.checkValueChange(null, false);\n };\n TimePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup(0, e);\n if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {\n if (this.inputElement.value === this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue('');\n }\n }\n removeClass([this.inputWrapper.container], [FOCUS]);\n if (this.getText() !== this.inputElement.value) {\n this.updateValue((this.inputElement).value, e);\n }\n else if (this.inputElement.value.trim().length === 0) {\n this.resetState();\n }\n this.cursorDetails = null;\n this.isNavigate = false;\n if (this.inputElement.value === '') {\n this.invalidValueString = null;\n }\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n };\n /**\n * Focuses out the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n };\n TimePicker.prototype.isPopupOpen = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + ROOT$3)) {\n return true;\n }\n return false;\n };\n TimePicker.prototype.inputFocusHandler = function () {\n if (!this.enabled) {\n return;\n }\n var focusArguments = {\n model: this\n };\n if (!this.readonly && !Browser.isDevice && !this.enableMask) {\n this.selectInputText();\n }\n if (this.enableMask && !this.inputElement.value && this.placeholder) {\n if (this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n this.inputElement.selectionStart = 0;\n this.inputElement.selectionEnd = this.inputElement.value.length;\n }\n }\n if (this.enableMask && this.showClearButton && this.inputElement && this.inputElement.value === this.maskedDateValue && this.inputWrapper && this.inputWrapper.clearButton && !this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) {\n this.inputWrapper.clearButton.classList.add('e-clear-icon-hide');\n }\n this.trigger('focus', focusArguments);\n this.clearIconState();\n if (this.openOnFocus) {\n this.show();\n }\n };\n /**\n * Focused the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Hides the TimePicker popup.\n *\n * @returns {void}\n * @deprecated\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100, null);\n this.clearIconState();\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup to show the list items.\n *\n * @returns {void}\n * @deprecated\n */\n TimePicker.prototype.show = function (event) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupWrapper) {\n return;\n }\n else {\n this.popupCreation();\n if (Browser.isDevice && this.listWrapper) {\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT$3 + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW$2;\n document.body.appendChild(this.modal);\n }\n if (Browser.isDevice) {\n this.mobileTimePopupWrap = this.createElement('div', { className: 'e-timepicker-mob-popup-wrap' });\n document.body.appendChild(this.mobileTimePopupWrap);\n }\n this.openPopupEventArgs = {\n popup: this.popupObj || null,\n cancel: false,\n event: event || null,\n name: 'open',\n appendTo: Browser.isDevice ? this.mobileTimePopupWrap : document.body\n };\n var eventArgs = this.openPopupEventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.openPopupEventArgs = eventArgs;\n if (!_this.openPopupEventArgs.cancel && !_this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {\n _this.openPopupEventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupAlignment(_this.openPopupEventArgs);\n _this.setScrollPosition();\n if (!Browser.isDevice) {\n _this.inputElement.focus();\n }\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION\n };\n _this.popupObj.refreshPosition(_this.anchor);\n if (_this.zIndex === 1000) {\n _this.popupObj.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObj.show(new Animation(openAnimation), null);\n }\n _this.setActiveDescendant();\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });\n attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });\n addClass([_this.inputWrapper.container], FOCUS);\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);\n }\n else {\n _this.popupObj.destroy();\n _this.popupWrapper = _this.listTag = undefined;\n _this.liCollections = _this.timeCollections = _this.disableItemCollection = [];\n _this.popupObj = null;\n }\n });\n if (Browser.isDevice) {\n var dlgOverlay = this.createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.mobileTimePopupWrap.appendChild(dlgOverlay);\n }\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n TimePicker.prototype.setOverlayIndex = function (popupWrapper, timePopupElement, modal, isDevice) {\n if (isDevice && !isNullOrUndefined(timePopupElement) && !isNullOrUndefined(modal) && !isNullOrUndefined(popupWrapper)) {\n var index = parseInt(timePopupElement.style.zIndex, 10) ? parseInt(timePopupElement.style.zIndex, 10) : 1000;\n modal.style.zIndex = (index - 1).toString();\n popupWrapper.style.zIndex = index.toString();\n }\n };\n TimePicker.prototype.formatValues = function (type) {\n var value;\n if (typeof type === 'number') {\n value = formatUnit(type);\n }\n else if (typeof type === 'string') {\n value = (type.match(/px|%|em/)) ? type : isNaN(parseInt(type, 10)) ? type : formatUnit(type);\n }\n return value;\n };\n TimePicker.prototype.popupAlignment = function (args) {\n args.popup.position.X = this.formatValues(args.popup.position.X);\n args.popup.position.Y = this.formatValues(args.popup.position.Y);\n if (!isNaN(parseFloat(args.popup.position.X)) || !isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.targetType = 'container';\n }\n if (!isNaN(parseFloat(args.popup.position.X))) {\n this.popupObj.offsetX = parseFloat(args.popup.position.X);\n }\n if (!isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.offsetY = parseFloat(args.popup.position.Y);\n }\n if (!Browser.isDevice) {\n switch (args.popup.position.X) {\n case 'left':\n break;\n case 'right':\n args.popup.offsetX = this.containerStyle.width;\n break;\n case 'center':\n args.popup.offsetX = -(this.containerStyle.width / 2);\n break;\n }\n switch (args.popup.position.Y) {\n case 'top':\n break;\n case 'bottom':\n break;\n case 'center':\n args.popup.offsetY = -(this.containerStyle.height / 2);\n break;\n }\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.inputWrapper.container;\n this.anchor = this.inputElement;\n this.popupObj.targetType = 'relative';\n }\n }\n else {\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.offsetY = 0;\n this.popupObj.targetType = 'container';\n this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained upon browser refresh.\n *\n * @returns {string}\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * To get component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n TimePicker.prototype.getModuleName = function () {\n return 'timepicker';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {TimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {TimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TimePicker.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 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);\n if (this.readonly) {\n this.hide();\n }\n this.setTimeAllowEdit();\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n this.setEnable();\n break;\n case 'allowEdit':\n this.setTimeAllowEdit();\n break;\n case 'enableRtl':\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n this.setEnableRtl();\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'locale':\n this.setProperties({ locale: newProp.locale }, true);\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n if (this.timeOptions && this.timeOptions.placeholder == null) {\n this.updatePlaceHolder();\n }\n this.setValue(this.value);\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkTimeFormat();\n this.setValue(this.value);\n if (this.enableMask) {\n this.createMask();\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n break;\n case 'value':\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n if (!this.invalidValueString) {\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date(newProp.value)) }, true);\n newProp.value = this.value;\n }\n else {\n if ((newProp.value && +new Date(+newProp.value).setMilliseconds(0)) !== +this.value) {\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n }\n }\n this.initValue = newProp.value;\n newProp.value = this.compareFormatChange(this.checkValue(newProp.value));\n }\n else {\n this.updateInputValue(this.invalidValueString);\n this.checkErrorState(this.invalidValueString);\n }\n if (this.enableMask && isNullOrUndefined(newProp.value)) {\n this.updateInputValue(this.maskedDateValue);\n this.checkErrorState(this.maskedDateValue);\n }\n this.checkValueChange(null, false);\n if (this.isPopupOpen()) {\n this.setScrollPosition();\n }\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n if (newProp.strictMode) {\n this.checkErrorState(null);\n }\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.checkValue((this.inputElement).value);\n this.checkValueChange(null, false);\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo)))) {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n this.updateInputValue(this.maskedDateValue);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.updateInputValue('');\n }\n }\n break;\n }\n }\n };\n TimePicker.prototype.checkInValue = function (inValue) {\n if (inValue instanceof Date) {\n return (inValue.toUTCString());\n }\n else {\n return ('' + inValue);\n }\n };\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"width\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"cssClass\", void 0);\n __decorate$3([\n Property(false)\n ], TimePicker.prototype, \"strictMode\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"keyConfigs\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"format\", void 0);\n __decorate$3([\n Property(true)\n ], TimePicker.prototype, \"enabled\", void 0);\n __decorate$3([\n Property(false)\n ], TimePicker.prototype, \"fullScreenMode\", void 0);\n __decorate$3([\n Property(false)\n ], TimePicker.prototype, \"readonly\", void 0);\n __decorate$3([\n Property({})\n ], TimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate$3([\n Property('Never')\n ], TimePicker.prototype, \"floatLabelType\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"placeholder\", void 0);\n __decorate$3([\n Property(1000)\n ], TimePicker.prototype, \"zIndex\", void 0);\n __decorate$3([\n Property(false)\n ], TimePicker.prototype, \"enablePersistence\", void 0);\n __decorate$3([\n Property(true)\n ], TimePicker.prototype, \"showClearButton\", void 0);\n __decorate$3([\n Property(30)\n ], TimePicker.prototype, \"step\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"scrollTo\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"value\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"min\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"max\", void 0);\n __decorate$3([\n Property(true)\n ], TimePicker.prototype, \"allowEdit\", void 0);\n __decorate$3([\n Property(false)\n ], TimePicker.prototype, \"openOnFocus\", void 0);\n __decorate$3([\n Property(false)\n ], TimePicker.prototype, \"enableMask\", void 0);\n __decorate$3([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], TimePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate$3([\n Property(null)\n ], TimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"change\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"created\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"destroyed\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"open\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"itemRender\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"close\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"cleared\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"blur\", void 0);\n __decorate$3([\n Event()\n ], TimePicker.prototype, \"focus\", void 0);\n TimePicker = __decorate$3([\n NotifyPropertyChanges\n ], TimePicker);\n return TimePicker;\n}(Component));\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nvar __extends$4 = (undefined && undefined.__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$4 = (undefined && undefined.__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//class constant defination\nvar DATEWRAPPER$1 = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY$1 = new Date().getDate();\nvar MONTH$3 = new Date().getMonth();\nvar YEAR$3 = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT$4 = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER$1 = 'e-input-group-icon';\nvar POPUP$3 = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS$2 = 'e-input-focus';\nvar POPUPDIMENSION$1 = '250px';\nvar ICONANIMATION$1 = 'e-icon-anim';\nvar DISABLED$4 = 'e-disabled';\nvar ERROR$3 = 'e-error';\nvar CONTENT$3 = 'e-content';\nvar NAVIGATION$1 = 'e-navigation';\nvar ACTIVE$2 = 'e-active';\nvar HOVER$2 = 'e-hover';\nvar ICONS$1 = 'e-icons';\nvar HALFPOSITION$1 = 2;\nvar LISTCLASS$2 = 'e-list-item';\nvar ANIMATIONDURATION$1 = 100;\nvar OVERFLOW$3 = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar DateTimePicker = /** @__PURE__ @class */ (function (_super) {\n __extends$4(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DateTimePickerModel} options - Specifies the DateTimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.scrollInvoked = false;\n _this.moduleName = _this.getModuleName();\n _this.formatRegex = /dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yyy|yy|y|'[^']*'|'[^']*'/g;\n _this.dateFormatString = '';\n _this.dateTimeOptions = options;\n return _this;\n }\n DateTimePicker.prototype.focusHandler = function () {\n if (!this.enabled) {\n return;\n }\n addClass([this.inputWrapper.container], INPUTFOCUS$2);\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusIn = function () {\n _super.prototype.focusIn.call(this);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS$2]);\n }\n };\n DateTimePicker.prototype.blurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isTimePopupOpen() && this.isPreventBlur) {\n this.inputElement.focus();\n return;\n }\n removeClass([this.inputWrapper.container], INPUTFOCUS$2);\n var blurArguments = {\n model: this\n };\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n this.trigger('blur', blurArguments);\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP$3)) {\n this.popupObject.destroy();\n detach(this.dateTimeWrapper);\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n this.liCollections = null;\n this.rippleFn = null;\n this.selectedElement = null;\n this.listTag = null;\n this.timeIcon = null;\n this.popupObject = null;\n this.preventArgs = null;\n this.keyboardModule = null;\n Input.destroy({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DateTimePicker.prototype.render = function () {\n this.timekeyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.valueWithMinutes = null;\n this.previousDateTime = null;\n this.isPreventBlur = false;\n this.cloneElement = this.element.cloneNode(true);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n this.initValue = this.value;\n if (typeof (this.min) === 'string') {\n this.min = this.checkDateValue(new Date(this.min));\n }\n if (typeof (this.max) === 'string') {\n this.max = this.checkDateValue(new Date(this.max));\n }\n if (typeof (this.minTime) === 'string') {\n this.minTime = this.checkDateValue(new Date(this.minTime));\n }\n if (typeof (this.maxTime) === 'string') {\n this.maxTime = this.checkDateValue(new Date(this.maxTime));\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n _super.prototype.updateHtmlAttributeToElement.call(this);\n this.checkAttributes(false);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('datetimepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n _super.prototype.render.call(this);\n this.createInputElement();\n _super.prototype.updateHtmlAttributeToWrapper.call(this);\n this.bindInputEvents();\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n this.setValue(true);\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(this.scrollTo))) }, true);\n this.previousDateTime = this.value && new Date(+this.value);\n if (this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n }\n if (this.floatLabelType !== 'Never') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\n this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function (isDynamic) {\n if (isDynamic === void 0) { isDynamic = false; }\n this.initValue = this.validateMinMaxRange(this.value);\n if (!this.strictMode && this.isDateObject(this.initValue)) {\n var value = this.validateMinMaxRange(this.initValue);\n Input.setValue(this.getFormattedValue(value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value }, true);\n }\n else {\n if (isNullOrUndefined(this.value)) {\n this.initValue = null;\n this.setProperties({ value: null }, true);\n }\n }\n this.valueWithMinutes = this.value;\n _super.prototype.updateInput.call(this, isDynamic);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min)) || !this.isValidTime(value)) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR$3);\n }\n else {\n addClass([this.inputWrapper.container], ERROR$3);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.isValidTime = function (value) {\n if (value != null && (this.minTime || this.maxTime)) {\n var minTimeValue = void 0;\n var maxTimeValue = void 0;\n var maxValue = void 0;\n var minValue = void 0;\n var valueTime = value.getHours() * 3600000 + value.getMinutes() * 60000 +\n value.getSeconds() * 1000 + value.getMilliseconds();\n if (this.minTime) {\n minTimeValue = this.minTime.getHours() * 3600000 + this.minTime.getMinutes() * 60000 +\n this.minTime.getSeconds() * 1000 + this.minTime.getMilliseconds();\n }\n if (this.maxTime) {\n maxTimeValue = this.maxTime.getHours() * 3600000 + this.maxTime.getMinutes() * 60000 +\n this.maxTime.getSeconds() * 1000 + this.maxTime.getMilliseconds();\n }\n if (this.min && (+value.getDate() === +this.min.getDate() && +value.getMonth() === +this.min.getMonth() &&\n +value.getFullYear() === +this.min.getFullYear())) {\n minValue = this.min.getHours() * 3600000 + this.min.getMinutes() * 60000 +\n this.min.getSeconds() * 1000 + this.min.getMilliseconds();\n minTimeValue = minTimeValue < minValue ? minValue : minTimeValue;\n }\n if (this.max && (+value.getDate() === +this.max.getDate() && +value.getMonth() === +this.max.getMonth() &&\n +this.max.getFullYear() === +this.max.getFullYear())) {\n maxValue = this.max.getHours() * 3600000 + this.max.getMinutes() * 60000 +\n this.max.getSeconds() * 1000 + this.max.getMilliseconds();\n maxTimeValue = maxTimeValue > maxValue ? maxValue : maxTimeValue;\n }\n if (this.strictMode) {\n var newValue = void 0;\n if (minTimeValue && valueTime < minTimeValue) {\n newValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.minTime.getHours(), this.minTime.getMinutes(), this.minTime.getSeconds(), this.minTime.getMilliseconds());\n this.setProperties({ value: newValue }, true);\n this.changedArgs = { value: this.value };\n }\n else if (maxTimeValue && valueTime > maxTimeValue) {\n newValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.maxTime.getHours(), this.maxTime.getMinutes(), this.maxTime.getSeconds(), this.maxTime.getMilliseconds());\n this.setProperties({ value: newValue }, true);\n this.changedArgs = { value: this.value };\n }\n return true;\n }\n else {\n return !((minTimeValue && valueTime < minTimeValue) || (maxTimeValue && valueTime > maxTimeValue));\n }\n }\n return true;\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED$4);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED$4);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n var dateOptions;\n if (!isNullOrUndefined(value)) {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n return this.globalize.formatDate(value, dateOptions);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.isDateObject = function (value) {\n return (!isNullOrUndefined(value) && !isNaN(+value)) ? true : false;\n };\n DateTimePicker.prototype.createInputElement = function () {\n removeClass([this.inputElement], DATEPICKERROOT);\n removeClass([this.inputWrapper.container], DATEWRAPPER$1);\n addClass([this.inputWrapper.container], DATETIMEWRAPPER);\n addClass([this.inputElement], ROOT$4);\n this.renderTimeIcon();\n };\n DateTimePicker.prototype.renderTimeIcon = function () {\n this.timeIcon = Input.appendSpan(INPUTWRAPPER$1 + ' ' + TIMEICON + ' ' + ICONS$1, this.inputWrapper.container);\n };\n DateTimePicker.prototype.bindInputEvents = function () {\n EventHandler.add(this.timeIcon, 'mousedown', this.timeHandler, this);\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.blurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.focusHandler, this);\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DateTimePicker.prototype.unBindInputEvents = function () {\n EventHandler.remove(this.timeIcon, 'mousedown touchstart', this.timeHandler);\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler);\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'blur', this.blurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.focusHandler);\n }\n if (this.keyboardHandler) {\n this.keyboardHandler.destroy();\n }\n };\n DateTimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.timeFormat)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.timeFormat;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.cldrDateTimeFormat = function () {\n var cldrTime;\n var culture = new Internationalization(this.locale);\n var dateFormat = culture.getDatePattern({ skeleton: 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld);\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);\n }\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (e.currentTarget === this.timeIcon) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n else {\n this.inputElement.focus();\n this.popupCreation('time', e);\n addClass([this.inputWrapper.container], [INPUTFOCUS$2]);\n }\n }\n this.isIconClicked = false;\n };\n DateTimePicker.prototype.dateHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (e.currentTarget === this.inputWrapper.buttons[0]) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n if (!isNullOrUndefined(this.popupWrapper)) {\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.show = function (type, e) {\n if ((this.enabled && this.readonly) || !this.enabled) {\n return;\n }\n else {\n if (type === 'time' && !this.dateTimeWrapper) {\n if (this.isDatePopupOpen()) {\n this.hide(e);\n }\n this.popupCreation('time', e);\n }\n else if (!this.popupObj) {\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n _super.prototype.show.call(this);\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.toggle = function (e) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n this.show('time', null);\n }\n else if (this.isTimePopupOpen()) {\n this.hide(e);\n _super.prototype.show.call(this, null, e);\n this.popupCreation('date', null);\n }\n else {\n this.show(null, e);\n }\n };\n DateTimePicker.prototype.listCreation = function () {\n var dateObject;\n if (this.calendarMode === 'Gregorian') {\n this.cldrDateTimeFormat().replace(this.formatRegex, this.TimePopupFormat());\n if (this.dateFormatString === '') {\n this.dateFormatString = this.cldrDateTimeFormat();\n }\n dateObject = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), {\n format: this.dateFormatString, type: 'datetime'\n });\n }\n else {\n dateObject = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), {\n format: this.cldrDateTimeFormat(), type: 'datetime', calendar: 'islamic'\n });\n }\n var value = isNullOrUndefined(this.value) ? this.inputElement.value !== '' ?\n dateObject : new Date() : this.value;\n this.valueWithMinutes = value;\n this.listWrapper = createElement('div', { className: CONTENT$3, attrs: { 'tabindex': '0' } });\n var min = this.startTime(value);\n var max = this.endTime(value);\n var listDetails = TimePickerBase.createListItems(this.createElement, min, max, this.globalize, this.cldrTimeFormat(), this.step);\n this.timeCollections = listDetails.collection;\n this.listTag = listDetails.list;\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([listDetails.list], this.listWrapper);\n this.wireTimeListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS$2 };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS$2);\n };\n DateTimePicker.prototype.popupCreation = function (type, e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\n }\n if (type === 'date') {\n if (!this.readonly && this.popupWrapper) {\n addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);\n attributes(this.popupWrapper, { 'id': this.element.id + '_options' });\n }\n }\n else {\n if (!this.readonly) {\n this.dateTimeWrapper = createElement('div', {\n className: ROOT$4 + ' ' + POPUP$3,\n attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.dateTimeWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.listCreation();\n append([this.listWrapper], this.dateTimeWrapper);\n }\n document.body.appendChild(this.dateTimeWrapper);\n this.addTimeSelection();\n this.renderPopup();\n this.setTimeScrollPosition();\n this.openPopup(e);\n if (!Browser.isDevice || (Browser.isDevice && !this.fullScreenMode)) {\n this.popupObject.refreshPosition(this.inputElement);\n }\n if (Browser.isDevice) {\n this.modelWrapper.style.zIndex = (this.popupObject.zIndex - 1).toString();\n if (this.fullScreenMode) {\n this.dateTimeWrapper.style.left = '0px';\n }\n }\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (!_this.preventArgs.cancel && !_this.readonly) {\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION$1\n };\n if (_this.zIndex === 1000) {\n _this.popupObject.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObject.show(new Animation(openAnimation), null);\n }\n addClass([_this.inputWrapper.container], [ICONANIMATION$1]);\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });\n attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n }\n });\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||\n (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + (this.popupObject && this.popupObject.element.id + '\"]'))) && target !== this.inputElement\n && target !== this.timeIcon && !isNullOrUndefined(this.inputWrapper) && target !== this.inputWrapper.container && !target.classList.contains('e-dlg-overlay')) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT$4)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT$4 + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW$3;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n if (Browser.isDevice) {\n this.modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });\n this.modelWrapper.appendChild(this.dateTimeWrapper);\n var dlgOverlay = createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.modelWrapper.appendChild(dlgOverlay);\n document.body.appendChild(this.modelWrapper);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE$2);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.timeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE$2);\n _this.unWireTimeListEvents();\n _this.inputElement.removeAttribute('aria-activedescendant');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n if (_this.modelWrapper) {\n remove(_this.modelWrapper);\n }\n _this.listWrapper = _this.dateTimeWrapper = undefined;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (Browser.isDevice && this.fullScreenMode) {\n this.popupObject.element.style.maxHeight = '100%';\n this.popupObject.element.style.width = '100%';\n }\n else {\n this.popupObject.element.style.maxHeight = POPUPDIMENSION$1;\n }\n if (Browser.isDevice && this.fullScreenMode) {\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var modelTitleSpan = this.createElement('span', { className: 'e-model-title' });\n modelTitleSpan.textContent = 'Select time';\n var modelCloseIcon = this.createElement('span', { className: 'e-popup-close' });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.dateTimeCloseHandler, this);\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTitleSpan);\n this.dateTimeWrapper.insertBefore(modelHeader, this.dateTimeWrapper.firstElementChild);\n }\n };\n DateTimePicker.prototype.dateTimeCloseHandler = function (e) {\n this.hide();\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n // eslint-disable-next-line no-self-assign\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n DateTimePicker.prototype.setPopupWidth = function () {\n var width = this.setDimension(this.width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n DateTimePicker.prototype.wireTimeListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateTimePicker.prototype.unWireTimeListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n }\n };\n DateTimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS$2);\n this.setTimeHover(currentLi, HOVER$2);\n };\n DateTimePicker.prototype.onMouseLeave = function () {\n this.removeTimeHover(HOVER$2);\n };\n DateTimePicker.prototype.setTimeHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeTimeHover(className);\n addClass([li], className);\n }\n };\n DateTimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION$1, 10);\n var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;\n if (Browser.isDevice && this.fullScreenMode) {\n return popupHeight;\n }\n else {\n return popupHeight > height ? height : popupHeight;\n }\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n _super.prototype.changeEvent.call(this, e);\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n this.previousDateTime = this.value && new Date(+this.value);\n }\n };\n DateTimePicker.prototype.updateValue = function (e) {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs = {\n value: this.value, event: e || null,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.previousDate = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n this.findScrollTop(popupElement);\n }\n else if (this.dateTimeWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n DateTimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextElement = element.nextElementSibling;\n var height = nextElement ? nextElement.offsetTop : element.offsetTop;\n var lineHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n if (Browser.isDevice && this.fullScreenMode) {\n var listContent = this.dateTimeWrapper.querySelector('.e-content');\n listContent.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;\n }\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setScrollTo = function () {\n var element;\n var items = this.dateTimeWrapper.querySelectorAll('.' + LISTCLASS$2);\n if (items.length >= 0) {\n this.scrollInvoked = true;\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n if (this.enableMask) {\n this.createMask();\n }\n }\n this.updateIconState();\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.createMask = function () {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS$2);\n if (li && li.classList.contains(LISTCLASS$2)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide(event);\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE$2)) {\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE$2);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue(event);\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS$2);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement) && this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE$2);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER$2);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE$2);\n if (items.length) {\n removeClass(items, ACTIVE$2);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS$2) && !li.classList.contains(DISABLED$4));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var tempMax = this.max;\n var value = date === null ? new Date() : date;\n var isModified = false;\n var startValue;\n if (this.minTime) {\n startValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.minTime.getHours(), this.minTime.getMinutes(), this.minTime.getSeconds(), this.minTime.getMilliseconds());\n isModified = true;\n }\n else {\n startValue = value;\n }\n if ((+startValue.getDate() === +tempMin.getDate() && +startValue.getMonth() === +tempMin.getMonth() &&\n +startValue.getFullYear() === +tempMin.getFullYear()) ||\n ((+new Date(startValue.getFullYear(), startValue.getMonth(), startValue.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = tempMin;\n if (isModified && ((+new Date(startValue.getFullYear(), startValue.getMonth(), startValue.getDate(), startValue.getHours(), startValue.getMinutes(), startValue.getSeconds(), startValue.getMilliseconds())) >=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate(), tempMin.getHours(), tempMin.getMinutes(), tempMin.getSeconds(), tempMin.getMilliseconds()))) {\n tempStartValue.setHours(startValue.getHours(), startValue.getMinutes(), startValue.getSeconds(), startValue.getMilliseconds());\n }\n }\n else if (+startValue < +tempMax && +startValue > +tempMin) {\n start = !isModified;\n tempStartValue = startValue;\n }\n else if (+startValue >= +tempMax) {\n start = true;\n tempStartValue = tempMax;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.TimePopupFormat = function () {\n var format = '';\n var formatCount = 0;\n var proxy = this;\n /**\n * Formats the value specifier.\n *\n * @param {string} formattext - The format text.\n * @returns {string} The formatted value specifier.\n */\n function formatValueSpecifier(formattext) {\n switch (formattext) {\n case 'd':\n case 'dd':\n case 'ddd':\n case 'dddd':\n case 'M':\n case 'MM':\n case 'MMM':\n case 'MMMM':\n case 'y':\n case 'yy':\n case 'yyy':\n case 'yyyy':\n if (format === '') {\n format = format + formattext;\n }\n else {\n format = format + '/' + formattext;\n }\n formatCount = formatCount + 1;\n break;\n }\n if (formatCount > 2) {\n proxy.dateFormatString = format;\n }\n return format;\n }\n return formatValueSpecifier;\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value = date === null ? new Date() : date;\n var isModified = false;\n var endValue;\n if (this.maxTime) {\n endValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.maxTime.getHours(), this.maxTime.getMinutes(), this.maxTime.getSeconds(), this.maxTime.getMilliseconds());\n isModified = true;\n }\n else {\n endValue = value;\n }\n if ((+endValue.getDate() === +tempMax.getDate() && +endValue.getMonth() === +tempMax.getMonth() &&\n +endValue.getFullYear() === +tempMax.getFullYear()) ||\n (+new Date(endValue.getUTCFullYear(), endValue.getMonth(), endValue.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n if (isModified && (+new Date(endValue.getUTCFullYear(), endValue.getMonth(), endValue.getDate(), endValue.getHours(), endValue.getMinutes(), endValue.getSeconds(), endValue.getMilliseconds()) <=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate(), tempMax.getHours(), tempMax.getMinutes(), tempMax.getSeconds(), tempMax.getMilliseconds()))) {\n tempEndValue.setHours(endValue.getHours(), endValue.getMinutes(), endValue.getSeconds(), endValue.getMilliseconds());\n }\n }\n else if (+endValue < +this.max && +endValue > +this.min) {\n end = !isModified;\n tempEndValue = endValue;\n }\n else if (+endValue <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function (e) {\n var _this = this;\n if (this.popupObj || this.dateTimeWrapper) {\n this.preventArgs = {\n cancel: false,\n popup: this.popupObj || this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n if (isNullOrUndefined(this.popupObj)) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.dateTimeCloseEventCallback(e, eventArgs);\n });\n }\n else {\n this.dateTimeCloseEventCallback(e, eventArgs);\n }\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n }\n };\n DateTimePicker.prototype.dateTimeCloseEventCallback = function (e, eventArgs) {\n this.preventArgs = eventArgs;\n if (!this.preventArgs.cancel) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n else if (this.isTimePopupOpen()) {\n this.closePopup(e);\n removeClass([document.body], OVERFLOW$3);\n if (Browser.isDevice && this.timeModal) {\n this.timeModal.style.display = 'none';\n this.timeModal.outerHTML = '';\n this.timeModal = null;\n }\n this.setTimeActiveDescendant();\n }\n }\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.closePopup = function (e) {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION$1,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION$1);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n this.inputElement.removeAttribute('aria-owns');\n this.inputElement.removeAttribute('aria-controls');\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n this.checkFormat();\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.preRender.call(this);\n removeClass([this.inputElementCopy], [ROOT$4]);\n };\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['style', 'name', 'step', 'disabled', 'readonly', 'value', 'min', 'max', 'placeholder', 'type'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === 'true' ||\n this.inputElement.getAttribute(prop) === '' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this.calendarMode === 'Islamic') {\n modules.push({ args: [this], member: 'islamic', name: 'Islamic' });\n }\n if (this.enableMask) {\n modules.push(this.maskedDateModule());\n }\n return modules;\n };\n DateTimePicker.prototype.maskedDateModule = function () {\n var modules = { args: [this], member: 'MaskedDateTime' };\n return modules;\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE$2);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY$1;\n var month = status_1 ? value.getMonth() : MONTH$3;\n var year = status_1 ? value.getFullYear() : YEAR$3;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n if (!this.scrollInvoked) {\n return new Date(year, month, date, hour, minute, second, millisecond);\n }\n else {\n this.scrollInvoked = false;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds(), dateValue.getMilliseconds());\n }\n }\n }\n return null;\n };\n DateTimePicker.prototype.findNextTimeElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var dateTimeVal = null;\n var listCount = this.liCollections.length;\n if (!isNullOrUndefined(this.activeIndex) || !isNullOrUndefined(this.checkDateValue(value))) {\n if (event.action === 'home') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[0])));\n this.activeIndex = 0;\n }\n else if (event.action === 'end') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[this.timeCollections.length - 1])));\n this.activeIndex = this.timeCollections.length - 1;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < listCount; i++) {\n if (+value < this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = listCount - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(isNullOrUndefined(dateTimeVal) ? null : new Date(dateTimeVal));\n }\n };\n DateTimePicker.prototype.setTimeValue = function (date, value) {\n var dateString;\n var time;\n var val = this.validateMinMaxRange(value);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== (!isNullOrUndefined(this.value) ? this.getFormattedValue(this.value) : null)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = new Date(+this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = new Date(+this.valueWithMinutes);\n }\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n DateTimePicker.prototype.timeElementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value)) && !this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.setTimeValue(date, value);\n }\n return null;\n };\n DateTimePicker.prototype.timeKeyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0) {\n return;\n }\n var listCount = this.timeCollections.length;\n if (isNullOrUndefined(this.getTimeActiveElement()) || this.getTimeActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n this.activeIndex = 0;\n this.selectedElement = this.liCollections[0];\n this.timeElementValue(new Date(this.timeCollections[0]));\n }\n else {\n this.findNextTimeElement(event);\n }\n }\n }\n else {\n var nextItemValue = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (listCount) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (listCount - 1) : this.activeIndex;\n nextItemValue = isNullOrUndefined(this.timeCollections[index]) ?\n this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n this.activeIndex = 0;\n nextItemValue = this.timeCollections[0];\n }\n else if (event.action === 'end') {\n this.activeIndex = listCount - 1;\n nextItemValue = this.timeCollections[listCount - 1];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(new Date(nextItemValue));\n }\n this.isNavigate = true;\n this.setTimeHover(this.selectedElement, NAVIGATION$1);\n this.setTimeActiveDescendant();\n if (this.isTimePopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setTimeScrollPosition();\n }\n };\n DateTimePicker.prototype.timeKeyActionHandle = function (event) {\n if (this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'up':\n case 'down':\n case 'home':\n case 'end':\n this.timeKeyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs.value = this.value;\n this.addTimeSelection();\n this.previousDateTime = this.value;\n }\n }\n else {\n this.updateValue(event);\n }\n this.hide(event);\n addClass([this.inputWrapper.container], INPUTFOCUS$2);\n this.isNavigate = false;\n event.stopPropagation();\n break;\n case 'escape':\n this.hide(event);\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n DateTimePicker.prototype.inputKeyAction = function (event) {\n switch (event.action) {\n case 'altDownArrow':\n this.strictModeUpdate();\n this.updateInput();\n this.toggle(event);\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DateTimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DateTimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @deprecated\n */\n DateTimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n var openPopup = ['blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell'];\n if (openPopup.indexOf(prop) > 0 && this.isReact) {\n this.isDynamicValueChanged = true;\n }\n switch (prop) {\n case 'value':\n this.isDynamicValueChanged = true;\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n newProp.value = this.validateValue(newProp.value);\n if (this.enableMask) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n if (this.popupObj) {\n this.popupUpdate();\n }\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n if (this.enableMask && this.value) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n if (!isNullOrUndefined(oldProp.cssClass)) {\n oldProp.cssClass = (oldProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newProp.cssClass)) {\n newProp.cssClass = (newProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container], oldProp.cssClass);\n if (this.dateTimeWrapper) {\n Input.setCssClass(newProp.cssClass, [this.dateTimeWrapper], oldProp.cssClass);\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n if (this.dateTimeOptions && this.dateTimeOptions.placeholder == null) {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n }\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.dateTimeFormat = this.formatString;\n this.setValue();\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n if (!this.value) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {\n if (this.dateTimeWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.maskedDateValue = '';\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\n };\n DateTimePicker.prototype.restoreValue = function () {\n this.previousDateTime = this.previousDate;\n this.currentDate = this.value ? this.value : new Date();\n this.valueWithMinutes = this.value;\n this.previousDate = this.value;\n this.previousElementValue = this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.getFormattedValue(this.inputValueCopy);\n };\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"timeFormat\", void 0);\n __decorate$4([\n Property(30)\n ], DateTimePicker.prototype, \"step\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"scrollTo\", void 0);\n __decorate$4([\n Property(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"value\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"keyConfigs\", void 0);\n __decorate$4([\n Property({})\n ], DateTimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate$4([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", void 0);\n __decorate$4([\n Property(true)\n ], DateTimePicker.prototype, \"allowEdit\", void 0);\n __decorate$4([\n Property(false)\n ], DateTimePicker.prototype, \"isMultiSelection\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"values\", void 0);\n __decorate$4([\n Property(true)\n ], DateTimePicker.prototype, \"showClearButton\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"placeholder\", void 0);\n __decorate$4([\n Property(false)\n ], DateTimePicker.prototype, \"strictMode\", void 0);\n __decorate$4([\n Property(false)\n ], DateTimePicker.prototype, \"fullScreenMode\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate$4([\n Property(new Date(1900, 0, 1))\n ], DateTimePicker.prototype, \"min\", void 0);\n __decorate$4([\n Property(new Date(2099, 11, 31))\n ], DateTimePicker.prototype, \"max\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"minTime\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"maxTime\", void 0);\n __decorate$4([\n Property(null)\n ], DateTimePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate$4([\n Property('Gregorian')\n ], DateTimePicker.prototype, \"calendarMode\", void 0);\n __decorate$4([\n Property('Month')\n ], DateTimePicker.prototype, \"start\", void 0);\n __decorate$4([\n Property('Month')\n ], DateTimePicker.prototype, \"depth\", void 0);\n __decorate$4([\n Property(false)\n ], DateTimePicker.prototype, \"weekNumber\", void 0);\n __decorate$4([\n Property(true)\n ], DateTimePicker.prototype, \"showTodayButton\", void 0);\n __decorate$4([\n Property('Short')\n ], DateTimePicker.prototype, \"dayHeaderFormat\", void 0);\n __decorate$4([\n Property(false)\n ], DateTimePicker.prototype, \"openOnFocus\", void 0);\n __decorate$4([\n Property(false)\n ], DateTimePicker.prototype, \"enableMask\", void 0);\n __decorate$4([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], DateTimePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate$4([\n Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate$4([\n Event()\n ], DateTimePicker.prototype, \"close\", void 0);\n __decorate$4([\n Event()\n ], DateTimePicker.prototype, \"cleared\", void 0);\n __decorate$4([\n Event()\n ], DateTimePicker.prototype, \"blur\", void 0);\n __decorate$4([\n Event()\n ], DateTimePicker.prototype, \"focus\", void 0);\n __decorate$4([\n Event()\n ], DateTimePicker.prototype, \"created\", void 0);\n __decorate$4([\n Event()\n ], DateTimePicker.prototype, \"destroyed\", void 0);\n DateTimePicker = __decorate$4([\n NotifyPropertyChanges\n ], DateTimePicker);\n return DateTimePicker;\n}(DatePicker));\n\nvar ARROWLEFT = 'ArrowLeft';\nvar ARROWRIGHT = 'ArrowRight';\nvar ARROWUP = 'ArrowUp';\nvar ARROWDOWN = 'ArrowDown';\nvar TAB = 'Tab';\nvar SHIFTTAB = 'shiftTab';\nvar END = 'End';\nvar HOME = 'Home';\nvar MaskedDateTime = /** @__PURE__ @class */ (function () {\n function MaskedDateTime(parent) {\n this.mask = '';\n this.defaultConstant = {\n day: 'day',\n month: 'month',\n year: 'year',\n hour: 'hour',\n minute: 'minute',\n second: 'second',\n dayOfTheWeek: 'day of the week'\n };\n this.hiddenMask = '';\n this.validCharacters = 'dMyhmHfasz';\n this.isDayPart = false;\n this.isMonthPart = false;\n this.isYearPart = false;\n this.isHourPart = false;\n this.isMinutePart = false;\n this.isSecondsPart = false;\n this.isMilliSecondsPart = false;\n this.monthCharacter = '';\n this.periodCharacter = '';\n this.isHiddenMask = false;\n this.isComplete = false;\n this.isNavigate = false;\n this.navigated = false;\n this.isBlur = false;\n this.formatRegex = /EEEEE|EEEE|EEE|EE|E|dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yyy|yy|y|HH|H|hh|h|mm|m|fff|ff|f|aa|a|ss|s|zzzz|zzz|zz|z|'[^']*'|'[^']*'/g;\n this.isDeletion = false;\n this.isShortYear = false;\n this.isDeleteKey = false;\n this.isDateZero = false;\n this.isMonthZero = false;\n this.isYearZero = false;\n this.isLeadingZero = false;\n this.dayTypeCount = 0;\n this.monthTypeCount = 0;\n this.hourTypeCount = 0;\n this.minuteTypeCount = 0;\n this.secondTypeCount = 0;\n this.parent = parent;\n this.dateformat = this.getCulturedFormat();\n this.maskDateValue = this.parent.value != null ? new Date(+this.parent.value) : new Date();\n this.maskDateValue.setMonth(0);\n this.maskDateValue.setHours(0);\n this.maskDateValue.setMinutes(0);\n this.maskDateValue.setSeconds(0);\n this.previousDate = new Date(this.maskDateValue.getFullYear(), this.maskDateValue.getMonth(), this.maskDateValue.getDate(), this.maskDateValue.getHours(), this.maskDateValue.getMinutes(), this.maskDateValue.getSeconds());\n this.removeEventListener();\n this.addEventListener();\n }\n MaskedDateTime.prototype.getModuleName = function () {\n return 'MaskedDateTime';\n };\n MaskedDateTime.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('createMask', this.createMask, this);\n this.parent.on('setMaskSelection', this.validCharacterCheck, this);\n this.parent.on('inputHandler', this.maskInputHandler, this);\n this.parent.on('keyDownHandler', this.maskKeydownHandler, this);\n this.parent.on('clearHandler', this.clearHandler, this);\n this.parent.on('maskPasteInputHandler', this.maskPasteInputHandler, this);\n };\n MaskedDateTime.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('createMask', this.createMask);\n this.parent.off('setMaskSelection', this.validCharacterCheck);\n this.parent.off('inputHandler', this.maskInputHandler);\n this.parent.off('keyDownHandler', this.maskKeydownHandler);\n this.parent.off('clearHandler', this.clearHandler);\n this.parent.off('maskPasteInputHandler', this.maskPasteInputHandler);\n };\n MaskedDateTime.prototype.createMask = function (mask) {\n this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = false;\n this.dateformat = this.getCulturedFormat();\n if (this.parent.maskPlaceholder.day) {\n this.defaultConstant['day'] = this.parent.maskPlaceholder.day;\n }\n if (this.parent.maskPlaceholder.month) {\n this.defaultConstant['month'] = this.parent.maskPlaceholder.month;\n }\n if (this.parent.maskPlaceholder.year) {\n this.defaultConstant['year'] = this.parent.maskPlaceholder.year;\n }\n if (this.parent.maskPlaceholder.hour) {\n this.defaultConstant['hour'] = this.parent.maskPlaceholder.hour;\n }\n if (this.parent.maskPlaceholder.minute) {\n this.defaultConstant['minute'] = this.parent.maskPlaceholder.minute;\n }\n if (this.parent.maskPlaceholder.second) {\n this.defaultConstant['second'] = this.parent.maskPlaceholder.second;\n }\n if (this.parent.maskPlaceholder.dayOfTheWeek) {\n this.defaultConstant['dayOfTheWeek'] = this.parent.maskPlaceholder.dayOfTheWeek.toString();\n }\n this.getCUltureMaskFormat();\n var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.mask = this.previousValue = inputValue;\n this.parent.maskedDateValue = this.mask;\n if (this.parent.value) {\n this.navigated = true;\n this.isBlur = mask.isBlur;\n this.setDynamicValue();\n }\n };\n MaskedDateTime.prototype.getCUltureMaskFormat = function () {\n this.l10n = new L10n(this.parent.moduleName, this.defaultConstant, this.parent.locale);\n this.objectString = Object.keys(this.defaultConstant);\n for (var i = 0; i < this.objectString.length; i++) {\n this.defaultConstant[this.objectString[i].toString()] =\n this.l10n.getConstant(this.objectString[i].toString());\n }\n };\n MaskedDateTime.prototype.validCharacterCheck = function () {\n var start = this.parent.inputElement.selectionStart;\n if (this.parent.moduleName !== 'timepicker') {\n if (start === this.hiddenMask.length && this.mask === this.parent.inputElement.value) {\n start = 0;\n }\n }\n for (var i = start, j = start - 1; i < this.hiddenMask.length || j >= 0; i++, j--) {\n if (i < this.hiddenMask.length && this.validCharacters.indexOf(this.hiddenMask[i]) !== -1) {\n this.setSelection(this.hiddenMask[i]);\n return;\n }\n if (j >= 0 && this.validCharacters.indexOf(this.hiddenMask[j]) !== -1) {\n this.setSelection(this.hiddenMask[j]);\n return;\n }\n }\n };\n MaskedDateTime.prototype.setDynamicValue = function () {\n this.maskDateValue = new Date(+this.parent.value);\n this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = true;\n this.updateValue();\n if (!this.isBlur) {\n this.validCharacterCheck();\n }\n };\n MaskedDateTime.prototype.setSelection = function (validChar) {\n var start = -1;\n var end = 0;\n for (var i = 0; i < this.hiddenMask.length; i++) {\n if (this.hiddenMask[i] === validChar) {\n end = i + 1;\n if (start === -1) {\n start = i;\n }\n }\n }\n if (start < 0) {\n start = 0;\n }\n this.parent.inputElement.setSelectionRange(start, end);\n };\n MaskedDateTime.prototype.maskKeydownHandler = function (args) {\n if (args.e.key === 'Backspace') {\n var start = this.parent.inputElement.selectionStart;\n var formatText = '';\n if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {\n formatText = this.hiddenMask[start];\n }\n switch (formatText) {\n case 'd':\n this.dayTypeCount = Math.max(this.dayTypeCount - 1, 0);\n break;\n case 'M':\n this.monthTypeCount = Math.max(this.monthTypeCount - 1, 0);\n break;\n case 'H':\n case 'h':\n this.hourTypeCount = Math.max(this.hourTypeCount - 1, 0);\n break;\n case 'm':\n this.minuteTypeCount = Math.max(this.minuteTypeCount - 1, 0);\n break;\n case 's':\n this.secondTypeCount = Math.max(this.secondTypeCount - 1, 0);\n break;\n }\n return;\n }\n this.dayTypeCount = this.monthTypeCount = this.hourTypeCount = this.minuteTypeCount = this.secondTypeCount = 0;\n if (args.e.key === 'Delete') {\n this.isDeleteKey = true;\n return;\n }\n if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWLEFT || args.e.key === ARROWRIGHT\n || args.e.key === SHIFTTAB || args.e.key === TAB || args.e.action === SHIFTTAB ||\n args.e.key === END || args.e.key === HOME)) {\n var start = this.parent.inputElement.selectionStart;\n var end = this.parent.inputElement.selectionEnd;\n var length_1 = this.parent.inputElement.value.length;\n if ((start === 0 && end === length_1) && (args.e.key === TAB || args.e.action === SHIFTTAB)) {\n var index = args.e.action === SHIFTTAB ? end : 0;\n this.parent.inputElement.selectionStart = this.parent.inputElement.selectionEnd = index;\n }\n if (args.e.key === END || args.e.key === HOME) {\n var range = args.e.key === END ? length_1 : 0;\n this.parent.inputElement.selectionStart = this.parent.inputElement.selectionEnd = range;\n }\n this.navigateSelection(args.e.key === ARROWLEFT || args.e.action === SHIFTTAB || args.e.key === END ? true : false);\n }\n if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWUP || args.e.key === ARROWDOWN)) {\n var start = this.parent.inputElement.selectionStart;\n var formatText = '';\n if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {\n formatText = this.hiddenMask[start];\n }\n this.dateAlteration(args.e.key === ARROWDOWN ? true : false);\n var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.previousValue = inputValue;\n this.parent.inputElement.value = inputValue;\n for (var i = 0; i < this.hiddenMask.length; i++) {\n if (formatText === this.hiddenMask[i]) {\n start = i;\n break;\n }\n }\n this.parent.inputElement.selectionStart = start;\n this.validCharacterCheck();\n }\n };\n MaskedDateTime.prototype.isPersist = function () {\n var isPersist = this.parent.isFocused || this.navigated;\n return isPersist;\n };\n MaskedDateTime.prototype.differenceCheck = function () {\n var start = this.parent.inputElement.selectionStart;\n var inputValue = this.parent.inputElement.value;\n var previousVal = this.previousValue.substring(0, start + this.previousValue.length - inputValue.length);\n var newVal = inputValue.substring(0, start);\n var newDateValue = new Date(+this.maskDateValue);\n var maxDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth() + 1, 0).getDate();\n if (previousVal.indexOf(newVal) === 0 && (newVal.length === 0 ||\n this.previousHiddenMask[newVal.length - 1] !== this.previousHiddenMask[newVal.length])) {\n for (var i = newVal.length; i < previousVal.length; i++) {\n if (this.previousHiddenMask[i] !== '' && this.validCharacters.indexOf(this.previousHiddenMask[i]) >= 0) {\n this.isDeletion = this.handleDeletion(this.previousHiddenMask[i], false);\n }\n }\n if (this.isDeletion) {\n return;\n }\n }\n switch (this.previousHiddenMask[start - 1]) {\n case 'd':\n {\n var date = (this.isDayPart && newDateValue.getDate().toString().length < 2 &&\n !this.isPersist() ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);\n this.isDateZero = (newVal[start - 1] === '0');\n this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;\n this.navigated = this.navigated ? false : this.navigated;\n if (isNaN(date)) {\n return;\n }\n for (var i = 0; date > maxDate; i++) {\n date = parseInt(date.toString().slice(1), 10);\n }\n if (date >= 1) {\n newDateValue.setDate(date);\n this.isNavigate = date.toString().length === 2;\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n if (newDateValue.getMonth() !== this.maskDateValue.getMonth()) {\n return;\n }\n this.isDayPart = true;\n this.dayTypeCount = this.dayTypeCount + 1;\n }\n else {\n this.isDayPart = false;\n this.dayTypeCount = this.isDateZero ? this.dayTypeCount + 1 : this.dayTypeCount;\n }\n break;\n }\n case 'M':\n {\n var month = void 0;\n if (newDateValue.getMonth().toString().length < 2 && !this.isPersist()) {\n month = (this.isMonthPart ? (newDateValue.getMonth() + 1) * 10 : 0) + parseInt(newVal[start - 1], 10);\n }\n else {\n month = parseInt(newVal[start - 1], 10);\n }\n this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;\n this.navigated = this.navigated ? false : this.navigated;\n this.isMonthZero = (newVal[start - 1] === '0');\n if (!isNaN(month)) {\n while (month > 12) {\n month = parseInt(month.toString().slice(1), 10);\n }\n if (month >= 1) {\n newDateValue.setMonth(month - 1);\n if (month >= 10 || month === 1) {\n if (this.isLeadingZero && month === 1) {\n this.isNavigate = month.toString().length === 1;\n this.isLeadingZero = false;\n }\n else {\n this.isNavigate = month.toString().length === 2;\n }\n }\n else {\n this.isNavigate = month.toString().length === 1;\n }\n if (newDateValue.getMonth() !== month - 1) {\n newDateValue.setDate(1);\n newDateValue.setMonth(month - 1);\n }\n if (this.isDayPart) {\n var previousMaxDate = new Date(this.previousDate.getFullYear(), this.previousDate.getMonth() + 1, 0).getDate();\n var currentMaxDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth() + 1, 0).getDate();\n if (this.previousDate.getDate() === previousMaxDate && currentMaxDate <= previousMaxDate) {\n newDateValue.setDate(currentMaxDate);\n }\n }\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n this.isMonthPart = true;\n this.monthTypeCount = this.monthTypeCount + 1;\n this.isLeadingZero = false;\n }\n else {\n newDateValue.setMonth(0);\n this.isLeadingZero = true;\n this.isMonthPart = false;\n this.monthTypeCount = this.isMonthZero ? this.monthTypeCount + 1 : this.monthTypeCount;\n }\n }\n else {\n var monthString = (this.getCulturedValue('months[stand-alone].wide'));\n var monthValue = Object.keys(monthString);\n this.monthCharacter += newVal[start - 1].toLowerCase();\n while (this.monthCharacter.length > 0) {\n var i = 1;\n for (var _i = 0, monthValue_1 = monthValue; _i < monthValue_1.length; _i++) {\n var months = monthValue_1[_i];\n if (monthString[i].toLowerCase().indexOf(this.monthCharacter) === 0) {\n newDateValue.setMonth(i - 1);\n this.isMonthPart = true;\n this.maskDateValue = newDateValue;\n return;\n }\n i++;\n }\n this.monthCharacter = this.monthCharacter.substring(1, this.monthCharacter.length);\n }\n }\n break;\n }\n case 'y':\n {\n var year = (this.isYearPart && (newDateValue.getFullYear().toString().length < 4\n && !this.isShortYear) ? newDateValue.getFullYear() * 10 : 0) + parseInt(newVal[start - 1], 10);\n var yearValue = (this.dateformat.match(/y/g) || []).length;\n yearValue = yearValue !== 2 ? 4 : yearValue;\n this.isShortYear = false;\n this.isYearZero = (newVal[start - 1] === '0');\n if (isNaN(year)) {\n return;\n }\n while (year > 9999) {\n year = parseInt(year.toString().slice(1), 10);\n }\n if (year < 1) {\n this.isYearPart = false;\n }\n else {\n newDateValue.setFullYear(year);\n if (year.toString().length === yearValue) {\n this.isNavigate = true;\n }\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n this.isYearPart = true;\n }\n break;\n }\n case 'h':\n this.hour = (this.isHourPart && (newDateValue.getHours() % 12 || 12).toString().length < 2\n && !this.isPersist() ? (newDateValue.getHours() % 12 || 12) * 10 : 0) + parseInt(newVal[start - 1], 10);\n this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;\n this.navigated = this.navigated ? false : this.navigated;\n if (isNaN(this.hour)) {\n return;\n }\n while (this.hour > 12) {\n this.hour = parseInt(this.hour.toString().slice(1), 10);\n }\n newDateValue.setHours(Math.floor(newDateValue.getHours() / 12) * 12 + (this.hour % 12));\n this.isNavigate = this.hour.toString().length === 2;\n this.isHourPart = true;\n this.hourTypeCount = this.hourTypeCount + 1;\n break;\n case 'H':\n this.hour = (this.isHourPart && newDateValue.getHours().toString().length < 2 &&\n !this.isPersist() ? newDateValue.getHours() * 10 : 0) + parseInt(newVal[start - 1], 10);\n this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;\n this.navigated = this.navigated ? false : this.navigated;\n if (isNaN(this.hour)) {\n return;\n }\n for (var i = 0; this.hour > 23; i++) {\n this.hour = parseInt(this.hour.toString().slice(1), 10);\n }\n newDateValue.setHours(this.hour);\n this.isNavigate = this.hour.toString().length === 2;\n this.isHourPart = true;\n this.hourTypeCount = this.hourTypeCount + 1;\n break;\n case 'm':\n {\n var minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2\n && !this.isPersist() ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);\n this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;\n this.navigated = this.navigated ? false : this.navigated;\n if (isNaN(minutes)) {\n return;\n }\n for (var i = 0; minutes > 59; i++) {\n minutes = parseInt(minutes.toString().slice(1), 10);\n }\n newDateValue.setMinutes(minutes);\n this.isNavigate = minutes.toString().length === 2;\n this.isMinutePart = true;\n this.minuteTypeCount = this.minuteTypeCount + 1;\n break;\n }\n case 's':\n {\n var seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 &&\n !this.isPersist() ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);\n this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;\n this.navigated = this.navigated ? false : this.navigated;\n if (isNaN(seconds)) {\n return;\n }\n for (var i = 0; seconds > 59; i++) {\n seconds = parseInt(seconds.toString().slice(1), 10);\n }\n newDateValue.setSeconds(seconds);\n this.isNavigate = seconds.toString().length === 2;\n this.isSecondsPart = true;\n this.secondTypeCount = this.secondTypeCount + 1;\n break;\n }\n case 'a':\n {\n this.periodCharacter += newVal[start - 1].toLowerCase();\n var periodString = (this.getCulturedValue('dayPeriods.format.wide'));\n var periodkeys = Object.keys(periodString);\n for (var i = 0; this.periodCharacter.length > 0; i++) {\n if ((periodString[periodkeys[0]].toLowerCase().indexOf(this.periodCharacter) === 0\n && newDateValue.getHours() >= 12) || (periodString[periodkeys[1]].toLowerCase().\n indexOf(this.periodCharacter) === 0 && newDateValue.getHours() < 12)) {\n newDateValue.setHours((newDateValue.getHours() + 12) % 24);\n this.maskDateValue = newDateValue;\n }\n this.periodCharacter = this.periodCharacter.substring(1, this.periodCharacter.length);\n }\n break;\n }\n }\n this.maskDateValue = newDateValue;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n MaskedDateTime.prototype.formatCheck = function () {\n var proxy = this;\n function formatValueSpecifier(formattext) {\n var result;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var daysAbbreviated = proxy.getCulturedValue('days[stand-alone].abbreviated');\n var dayKeyAbbreviated = Object.keys(daysAbbreviated);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var daysWide = (proxy.getCulturedValue('days[stand-alone].wide'));\n var dayKeyWide = Object.keys(daysWide);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var daysNarrow = (proxy.getCulturedValue('days[stand-alone].narrow'));\n var dayKeyNarrow = Object.keys(daysNarrow);\n var monthAbbreviated = (proxy.getCulturedValue('months[stand-alone].abbreviated'));\n var monthWide = (proxy.getCulturedValue('months[stand-alone].wide'));\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var periodString = (proxy.getCulturedValue('dayPeriods.format.wide'));\n var milliseconds;\n var dateOptions;\n switch (formattext) {\n case 'ddd':\n case 'dddd':\n case 'd':\n result = proxy.isDayPart ? proxy.maskDateValue.getDate().toString() : proxy.defaultConstant['day'].toString();\n result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);\n if (proxy.dayTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.dayTypeCount = 0;\n }\n break;\n case 'dd':\n result = proxy.isDayPart ? proxy.roundOff(proxy.maskDateValue.getDate(), 2) : proxy.defaultConstant['day'].toString();\n result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);\n if (proxy.dayTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.dayTypeCount = 0;\n }\n break;\n case 'E':\n case 'EE':\n case 'EEE':\n result = proxy.isDayPart && proxy.isMonthPart && proxy.isYearPart ? daysAbbreviated[dayKeyAbbreviated[proxy.maskDateValue.getDay()]].toString() : proxy.defaultConstant['dayOfTheWeek'].toString();\n break;\n case 'EEEE':\n result = proxy.isDayPart && proxy.isMonthPart && proxy.isYearPart ? daysWide[dayKeyWide[proxy.maskDateValue.getDay()]].toString() : proxy.defaultConstant['dayOfTheWeek'].toString();\n break;\n case 'EEEEE':\n result = proxy.isDayPart && proxy.isMonthPart && proxy.isYearPart ? daysNarrow[dayKeyNarrow[proxy.maskDateValue.getDay()]].toString() : proxy.defaultConstant['dayOfTheWeek'].toString();\n break;\n case 'M':\n result = proxy.isMonthPart ? (proxy.maskDateValue.getMonth() + 1).toString() : proxy.defaultConstant['month'].toString();\n result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);\n if (proxy.monthTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.monthTypeCount = 0;\n }\n break;\n case 'MM':\n result = proxy.isMonthPart ? proxy.roundOff(proxy.maskDateValue.getMonth() + 1, 2) : proxy.defaultConstant['month'].toString();\n result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);\n if (proxy.monthTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.monthTypeCount = 0;\n }\n break;\n case 'MMM':\n result = proxy.isMonthPart ? monthAbbreviated[proxy.maskDateValue.getMonth() + 1] : proxy.defaultConstant['month'].toString();\n break;\n case 'MMMM':\n result = proxy.isMonthPart ? monthWide[proxy.maskDateValue.getMonth() + 1] : proxy.defaultConstant['month'].toString();\n break;\n case 'yy':\n result = proxy.isYearPart ? proxy.roundOff(proxy.maskDateValue.getFullYear() % 100, 2) : proxy.defaultConstant['year'].toString();\n result = proxy.zeroCheck(proxy.isYearZero, proxy.isYearPart, result);\n break;\n case 'y':\n case 'yyy':\n case 'yyyy':\n result = proxy.isYearPart ? proxy.roundOff(proxy.maskDateValue.getFullYear(), 4) : proxy.defaultConstant['year'].toString();\n result = proxy.zeroCheck(proxy.isYearZero, proxy.isYearPart, result);\n break;\n case 'h':\n result = proxy.isHourPart ? (proxy.maskDateValue.getHours() % 12 || 12).toString() : proxy.defaultConstant['hour'].toString();\n if (proxy.hourTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.hourTypeCount = 0;\n }\n break;\n case 'hh':\n result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours() % 12 || 12, 2) : proxy.defaultConstant['hour'].toString();\n if (proxy.hourTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.hourTypeCount = 0;\n }\n break;\n case 'H':\n result = proxy.isHourPart ? proxy.maskDateValue.getHours().toString() : proxy.defaultConstant['hour'].toString();\n if (proxy.hourTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.hourTypeCount = 0;\n }\n break;\n case 'HH':\n result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours(), 2) : proxy.defaultConstant['hour'].toString();\n if (proxy.hourTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.hourTypeCount = 0;\n }\n break;\n case 'm':\n result = proxy.isMinutePart ? proxy.maskDateValue.getMinutes().toString() : proxy.defaultConstant['minute'].toString();\n if (proxy.minuteTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.minuteTypeCount = 0;\n }\n break;\n case 'mm':\n result = proxy.isMinutePart ? proxy.roundOff(proxy.maskDateValue.getMinutes(), 2) : proxy.defaultConstant['minute'].toString();\n if (proxy.minuteTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.minuteTypeCount = 0;\n }\n break;\n case 's':\n result = proxy.isSecondsPart ? proxy.maskDateValue.getSeconds().toString() : proxy.defaultConstant['second'].toString();\n if (proxy.secondTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.secondTypeCount = 0;\n }\n break;\n case 'ss':\n result = proxy.isSecondsPart ? proxy.roundOff(proxy.maskDateValue.getSeconds(), 2) : proxy.defaultConstant['second'].toString();\n if (proxy.secondTypeCount === 2) {\n proxy.isNavigate = true;\n proxy.secondTypeCount = 0;\n }\n break;\n case 'f':\n result = Math.floor(proxy.maskDateValue.getMilliseconds() / 100).toString();\n break;\n case 'ff':\n milliseconds = proxy.maskDateValue.getMilliseconds();\n if (proxy.maskDateValue.getMilliseconds() > 99) {\n milliseconds = Math.floor(proxy.maskDateValue.getMilliseconds() / 10);\n }\n result = proxy.roundOff(milliseconds, 2);\n break;\n case 'fff':\n result = proxy.roundOff(proxy.maskDateValue.getMilliseconds(), 3);\n break;\n case 'a':\n case 'aa':\n result = proxy.maskDateValue.getHours() < 12 ? periodString['am'] : periodString['pm'];\n break;\n case 'z':\n case 'zz':\n case 'zzz':\n case 'zzzz':\n dateOptions = {\n format: formattext,\n type: 'dateTime', skeleton: 'yMd', calendar: proxy.parent.calendarMode\n };\n result = proxy.parent.globalize.formatDate(proxy.maskDateValue, dateOptions);\n break;\n }\n result = result !== undefined ? result : formattext.slice(1, formattext.length - 1);\n if (proxy.isHiddenMask) {\n var hiddenChar = '';\n for (var i = 0; i < result.length; i++) {\n hiddenChar += formattext[0];\n }\n return hiddenChar;\n }\n else {\n return result;\n }\n }\n return formatValueSpecifier;\n };\n MaskedDateTime.prototype.isValidDate = function (dateString) {\n var date = new Date(dateString);\n // Return true if the date is valid, false otherwise\n return !isNaN(date.getTime());\n };\n MaskedDateTime.prototype.maskPasteInputHandler = function () {\n if (this.isValidDate(this.parent.inputElement.value)) {\n this.maskDateValue = new Date(this.parent.inputElement.value);\n this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = true;\n this.updateValue();\n if (!this.isBlur) {\n this.validCharacterCheck();\n }\n return;\n }\n else {\n this.maskInputHandler();\n }\n };\n MaskedDateTime.prototype.maskInputHandler = function () {\n var start = this.parent.inputElement.selectionStart;\n var formatText = '';\n if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {\n formatText = this.hiddenMask[start];\n }\n this.differenceCheck();\n var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isDateZero = this.isMonthZero = this.isYearZero = false;\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.previousValue = inputValue;\n this.parent.inputElement.value = inputValue;\n for (var i = 0; i < this.hiddenMask.length; i++) {\n if (formatText === this.hiddenMask[i]) {\n start = i;\n break;\n }\n }\n var scrollPositionY;\n if (Browser.isDevice && (Browser.isIos || Browser.isIos7)) {\n var scrollableParent = this.findScrollableParent(this.parent.inputElement);\n scrollPositionY = scrollableParent ? scrollableParent.getBoundingClientRect().top : window.scrollY;\n }\n this.parent.inputElement.selectionStart = start;\n this.validCharacterCheck();\n if ((this.isNavigate || this.isDeletion) && !this.isDeleteKey) {\n var isbackward = this.isNavigate ? false : true;\n this.isNavigate = this.isDeletion = false;\n this.navigateSelection(isbackward);\n if (Browser.isDevice && (Browser.isIos || Browser.isIos7)) {\n setTimeout(function () {\n window.scrollTo(0, scrollPositionY);\n }, 0);\n }\n }\n if (this.isDeleteKey) {\n this.isDeletion = false;\n }\n this.isDeleteKey = false;\n };\n MaskedDateTime.prototype.findScrollableParent = function (element) {\n while (element) {\n if (this.isScrollable(element)) {\n return element;\n }\n element = element.parentElement;\n }\n return null;\n };\n MaskedDateTime.prototype.isScrollable = function (element) {\n var overflowY = window.getComputedStyle(element).overflowY;\n return element.scrollHeight > element.clientHeight && (overflowY === 'auto' || overflowY === 'scroll');\n };\n MaskedDateTime.prototype.navigateSelection = function (isbackward) {\n var start = this.parent.inputElement.selectionStart;\n var end = this.parent.inputElement.selectionEnd;\n var formatIndex = isbackward ? start - 1 : end;\n this.navigated = true;\n while (formatIndex < this.hiddenMask.length && formatIndex >= 0) {\n if (this.validCharacters.indexOf(this.hiddenMask[formatIndex]) >= 0) {\n this.setSelection(this.hiddenMask[formatIndex]);\n break;\n }\n formatIndex = formatIndex + (isbackward ? -1 : 1);\n }\n };\n MaskedDateTime.prototype.roundOff = function (val, count) {\n var valueText = val.toString();\n var length = count - valueText.length;\n var result = '';\n for (var i = 0; i < length; i++) {\n result += '0';\n }\n return result + valueText;\n };\n MaskedDateTime.prototype.zeroCheck = function (isZero, isDayPart, resultValue) {\n var result = resultValue;\n if (isZero && !isDayPart) {\n result = '0';\n }\n return result;\n };\n MaskedDateTime.prototype.handleDeletion = function (format, isSegment) {\n switch (format) {\n case 'd':\n this.isDayPart = isSegment;\n break;\n case 'M':\n this.isMonthPart = isSegment;\n if (!isSegment) {\n this.maskDateValue.setMonth(0);\n this.monthCharacter = '';\n }\n break;\n case 'y':\n this.isYearPart = isSegment;\n break;\n case 'H':\n case 'h':\n this.isHourPart = isSegment;\n if (!isSegment) {\n this.periodCharacter = '';\n }\n break;\n case 'm':\n this.isMinutePart = isSegment;\n break;\n case 's':\n this.isSecondsPart = isSegment;\n break;\n default:\n return false;\n }\n return true;\n };\n MaskedDateTime.prototype.dateAlteration = function (isDecrement) {\n var start = this.parent.inputElement.selectionStart;\n var formatText = '';\n if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {\n formatText = this.hiddenMask[start];\n }\n else {\n return;\n }\n var newDateValue = new Date(this.maskDateValue.getFullYear(), this.maskDateValue.getMonth(), this.maskDateValue.getDate(), this.maskDateValue.getHours(), this.maskDateValue.getMinutes(), this.maskDateValue.getSeconds());\n this.previousDate = new Date(this.maskDateValue.getFullYear(), this.maskDateValue.getMonth(), this.maskDateValue.getDate(), this.maskDateValue.getHours(), this.maskDateValue.getMinutes(), this.maskDateValue.getSeconds());\n var incrementValue = isDecrement ? -1 : 1;\n switch (formatText) {\n case 'd':\n newDateValue.setDate(newDateValue.getDate() + incrementValue);\n break;\n case 'M':\n {\n var newMonth = newDateValue.getMonth() + incrementValue;\n newDateValue.setDate(1);\n newDateValue.setMonth(newMonth);\n if (this.isDayPart) {\n var previousMaxDate = new Date(this.previousDate.getFullYear(), this.previousDate.getMonth() + 1, 0).getDate();\n var currentMaxDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth() + 1, 0).getDate();\n if (this.previousDate.getDate() === previousMaxDate && currentMaxDate <= previousMaxDate) {\n newDateValue.setDate(currentMaxDate);\n }\n else {\n newDateValue.setDate(this.previousDate.getDate());\n }\n }\n else {\n newDateValue.setDate(this.previousDate.getDate());\n }\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n break;\n }\n case 'y':\n newDateValue.setFullYear(newDateValue.getFullYear() + incrementValue);\n break;\n case 'H':\n case 'h':\n newDateValue.setHours(newDateValue.getHours() + incrementValue);\n break;\n case 'm':\n newDateValue.setMinutes(newDateValue.getMinutes() + incrementValue);\n break;\n case 's':\n newDateValue.setSeconds(newDateValue.getSeconds() + incrementValue);\n break;\n case 'a':\n newDateValue.setHours((newDateValue.getHours() + 12) % 24);\n break;\n }\n this.maskDateValue = newDateValue.getFullYear() > 0 ? newDateValue : this.maskDateValue;\n if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {\n this.handleDeletion(this.hiddenMask[start], true);\n }\n };\n MaskedDateTime.prototype.getCulturedValue = function (format) {\n var locale = this.parent.locale;\n var result;\n if (locale === 'en' || locale === 'en-US') {\n result = getValue(format, getDefaultDateObject());\n }\n else {\n result = getValue('main.' + '' + locale + ('.dates.calendars.gregorian.' + format), cldrData);\n }\n return result;\n };\n MaskedDateTime.prototype.getCulturedFormat = function () {\n var formatString = (this.getCulturedValue('dateTimeFormats[availableFormats].yMd')).toString();\n if (this.parent.moduleName === 'datepicker') {\n formatString = (this.getCulturedValue('dateTimeFormats[availableFormats].yMd')).toString();\n if (this.parent.format && this.parent.formatString) {\n formatString = this.parent.formatString;\n }\n }\n if (this.parent.moduleName === 'datetimepicker') {\n formatString = (this.getCulturedValue('dateTimeFormats[availableFormats].yMd')).toString();\n if (this.parent.dateTimeFormat) {\n formatString = this.parent.dateTimeFormat;\n }\n }\n if (this.parent.moduleName === 'timepicker') {\n formatString = this.parent.cldrTimeFormat();\n }\n return formatString;\n };\n MaskedDateTime.prototype.clearHandler = function () {\n this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = false;\n this.updateValue();\n if (this.parent.inputElement && this.parent.inputElement.value === this.parent.maskedDateValue && this.parent.inputWrapper && this.parent.inputWrapper.clearButton && !this.parent.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) {\n this.parent.inputWrapper.clearButton.classList.add('e-clear-icon-hide');\n }\n };\n MaskedDateTime.prototype.updateValue = function () {\n this.monthCharacter = this.periodCharacter = '';\n var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.previousValue = inputValue;\n this.parent.updateInputValue(inputValue);\n };\n MaskedDateTime.prototype.destroy = function () {\n this.removeEventListener();\n };\n return MaskedDateTime;\n}());\n\nexport { Calendar, CalendarBase, DatePicker, DateRangePicker, DateTimePicker, Islamic, MaskedDateTime, Presets, TimeMaskPlaceholder, TimePicker, TimePickerBase };\n","import { isNullOrUndefined, getValue, merge, extend, setValue, Fetch } from '@syncfusion/ej2-base';\n\n/* eslint-disable valid-jsdoc */\n/**\n * Query class is used to build query which is used by the DataManager to communicate with datasource.\n */\nvar Query = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for Query class.\n *\n * @param {string|string[]} from?\n * @param from\n * @hidden\n */\n function Query(from) {\n /** @hidden */\n this.subQuery = null;\n /** @hidden */\n this.isChild = false;\n /** @hidden */\n this.distincts = [];\n this.queries = [];\n this.key = '';\n this.fKey = '';\n if (typeof from === 'string') {\n this.fromTable = from;\n }\n else if (from && from instanceof Array) {\n this.lookups = from;\n }\n this.expands = [];\n this.sortedColumns = [];\n this.groupedColumns = [];\n this.subQuery = null;\n this.isChild = false;\n this.params = [];\n this.lazyLoad = [];\n return this;\n }\n Object.defineProperty(Query.prototype, \"moduleName\", {\n /** @hidden */\n get: function () { return 'query'; },\n enumerable: true,\n configurable: true\n });\n /**\n * Sets the primary key.\n *\n * @param {string} field - Defines the column field.\n */\n Query.prototype.setKey = function (field) {\n this.key = field;\n return this;\n };\n /**\n * Sets default DataManager to execute query.\n *\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.using = function (dataManager) {\n this.dataManager = dataManager;\n return this;\n };\n /**\n * Executes query with the given DataManager.\n *\n * @param {DataManager} dataManager - Defines the DataManager.\n * @param {Function} done - Defines the success callback.\n * @param {Function} fail - Defines the failure callback.\n * @param {Function} always - Defines the callback which will be invoked on either success or failure.\n *\n * } triggerEvent method .\\\n * @param {DiagramEvent} event - provide the options value.\n * @param {Object} args - provide the args value.\n * @private\n */\n CommandHandler.prototype.triggerEvent = function (event, args) {\n return __awaiter$1(this, void 0, void 0, function () {\n var temparg;\n return __generator$1(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (!(event === DiagramEvent.drop || event === DiagramEvent.positionChange ||\n event === DiagramEvent.connectionChange)) return [3 /*break*/, 3];\n if (this.diagram.currentSymbol) {\n return [2 /*return*/];\n }\n if (event === DiagramEvent.drop) {\n args.source = cloneBlazorObject(this.diagram);\n }\n if (!(this.diagram.currentDrawingObject instanceof Connector && event !== DiagramEvent.positionChange)) return [3 /*break*/, 2];\n return [4 /*yield*/, this.diagram.triggerEvent(event, args)];\n case 1: return [2 /*return*/, _a.sent()];\n case 2:\n if (this.diagram.currentDrawingObject && event !== DiagramEvent.positionChange) {\n return [2 /*return*/];\n }\n _a.label = 3;\n case 3: return [4 /*yield*/, this.diagram.triggerEvent(event, args)];\n case 4:\n temparg = _a.sent();\n return [2 /*return*/, temparg];\n }\n });\n });\n };\n /**\n * dragOverElement method\\\n *\n * @returns { void } dragOverElement method .\\\n * @param {MouseEventArgs} args - provide the options value.\n * @param {PointModel} currentPosition - provide the args value.\n * @private\n */\n CommandHandler.prototype.dragOverElement = function (args, currentPosition) {\n if (this.diagram.currentSymbol) {\n var dragOverArg = {\n element: cloneBlazorObject(args.source), target: cloneBlazorObject(args.target),\n mousePosition: cloneBlazorObject(currentPosition), diagram: cloneBlazorObject(this.diagram)\n };\n this.triggerEvent(DiagramEvent.dragOver, dragOverArg);\n }\n };\n /**\n * disConnect method\\\n *\n * @returns { IConnectionChangeEventArgs | IBlazorConnectionChangeEventArgs } disConnect method .\\\n * @param {IElement} obj - provide the obj value.\n * @param {string} endPoint - provide the endPoint value.\n * @param {boolean} canCancel - provide the canCancel value.\n * @private\n */\n CommandHandler.prototype.disConnect = function (obj, endPoint, canCancel) {\n var oldChanges = {};\n var newChanges = {};\n var returnargs;\n var selectorModel;\n var connector;\n if (obj instanceof Selector) {\n selectorModel = obj;\n connector = selectorModel.connectors[0];\n }\n else if (obj instanceof Connector && this.diagram.currentDrawingObject) {\n connector = this.diagram.currentDrawingObject;\n }\n if (obj && connector && (hasSingleConnection(this.diagram) || this.diagram.currentDrawingObject)) {\n if (endPoint && (endPoint === 'ConnectorSourceEnd' || endPoint === 'ConnectorTargetEnd')) {\n var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n if (connector[\"\" + nodeEndId]) { //connector.sourceID || connector.targetID\n oldChanges[\"\" + nodeEndId] = connector[\"\" + nodeEndId];\n connector[\"\" + nodeEndId] = '';\n newChanges[\"\" + nodeEndId] = connector[\"\" + nodeEndId];\n if (connector.sourcePortID || connector.targetPortID) {\n oldChanges[\"\" + portEndId] = connector[\"\" + portEndId];\n connector[\"\" + portEndId] = '';\n newChanges[\"\" + portEndId] = connector[\"\" + portEndId];\n }\n returnargs = this.connectionEventChange(connector, oldChanges, newChanges, endPoint, canCancel);\n }\n }\n else if ((endPoint !== 'OrthoThumb' && endPoint !== 'SegmentEnd') && (connector.sourceID || connector.targetID)) {\n oldChanges = {\n sourceID: connector.sourceID, sourcePortID: connector.sourcePortID,\n targetID: connector.targetID, targetPortID: connector.targetPortID\n };\n connector.sourceID = '';\n connector.sourcePortID = '';\n connector.targetID = '';\n connector.targetPortID = '';\n newChanges = {\n sourceID: connector.sourceID, sourcePortID: connector.sourcePortID,\n targetID: connector.targetID, targetPortID: connector.targetPortID\n };\n var arg = {\n connector: cloneBlazorObject(connector), oldValue: oldChanges,\n newValue: newChanges, cancel: false, state: 'Changing', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n if (arg.cancel) {\n connector.sourceID = oldChanges.sourceID;\n connector.sourcePortID = oldChanges.sourcePortID;\n connector.targetID = oldChanges.targetID;\n connector.targetPortID = oldChanges.targetPortID;\n }\n else {\n this.diagram.connectorPropertyChange(connector, oldChanges, newChanges);\n this.diagram.updateDiagramObject(connector);\n arg = {\n connector: connector, oldValue: oldChanges,\n newValue: newChanges, cancel: false, state: 'Changed', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n }\n }\n }\n return returnargs;\n };\n CommandHandler.prototype.connectionEventChange = function (connector, oldChanges, newChanges, endPoint, canCancel) {\n var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n var connectedNode;\n if (this.enableCloneObject) {\n connectedNode = this.diagram.nameTable[newChanges[\"\" + nodeEndId]];\n var nodeObject = cloneObject(connectedNode);\n this.diagram.insertValue(nodeObject, true);\n }\n var returnargs;\n var arg = {\n cancel: false, state: 'Changing', connectorEnd: endPoint,\n connector: cloneBlazorObject(connector), oldValue: { nodeId: oldChanges[\"\" + nodeEndId], portId: oldChanges[\"\" + portEndId] },\n newValue: { nodeId: newChanges[\"\" + nodeEndId], portId: newChanges[\"\" + portEndId] }\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n if (arg.cancel) {\n connector[\"\" + nodeEndId] = oldChanges[\"\" + nodeEndId];\n connector[\"\" + portEndId] = oldChanges[\"\" + portEndId];\n newChanges = oldChanges;\n }\n this.diagram.connectorPropertyChange(connector, oldChanges, newChanges);\n this.diagram.updateDiagramObject(connector);\n arg = {\n connector: cloneBlazorObject(connector), oldValue: { nodeId: oldChanges[\"\" + nodeEndId], portId: oldChanges[\"\" + portEndId] },\n newValue: {\n nodeId: newChanges[\"\" + nodeEndId],\n portId: newChanges[\"\" + portEndId]\n },\n cancel: false, state: 'Changing', connectorEnd: endPoint\n };\n if (this.enableCloneObject) {\n if (connectedNode === undefined) {\n connectedNode = this.diagram.nameTable[oldChanges[\"\" + nodeEndId]];\n var nodeObject = cloneObject(connectedNode);\n this.diagram.insertValue(nodeObject, true);\n }\n }\n if (this.diagram.bpmnModule) {\n if (connector.isBpmnAnnotationConnector) {\n var textAnnotationNode = this.diagram.nameTable[connector.targetID];\n textAnnotationNode.shape.textAnnotation.textAnnotationTarget = connector.sourceID;\n }\n }\n return returnargs;\n };\n // /**\n // * insertBlazorObject method\\\n // *\n // * @returns { void } insertBlazorObject method .\\\n // * @param {IElement} object - provide the object value.\n // * @param {boolean} isNode - provide the isNode value.\n // * @private\n // */\n // public insertBlazorObject(object: SelectorModel | Node | Connector, isNode?: boolean): void {\n // }\n // /**\n // * updatePropertiesToBlazor method\\\n // *\n // * @returns { void } updatePropertiesToBlazor method .\\\n // * @param {MouseEventArgs} args - provide the args value.\n // * @param {PointModel} labelDrag - provide the labelDrag value.\n // * @private\n // */\n // public updatePropertiesToBlazor(args: MouseEventArgs, labelDrag: boolean): void {\n // this.enableCloneObject(false);\n // this.ismouseEvents(false);\n // // this.getBlazorOldValues(args, labelDrag);\n // // this.updateBlazorSelector();\n // }\n // /**\n // * insertSelectedObjects method\\\n // *\n // * @returns { void } insertSelectedObjects method .\\\n // * @private\n // */\n // public insertSelectedObjects(): void {\n // // this.oldSelectedObjects = cloneSelectedObjects(this.diagram);\n // }\n /**\n * findTarget method\\\n *\n * @returns { NodeModel | PointPortModel | ShapeAnnotationModel | PathAnnotationModel } findTarget method .\\\n * @param {DiagramElement} element - provide the element value.\n * @param {IElement} argsTarget - provide the argsTarget value.\n * @param {boolean} source - provide the source value.\n * @param {boolean} connection - provide the connection value.\n * @private\n */\n CommandHandler.prototype.findTarget = function (element, argsTarget, source, connection) {\n if (argsTarget instanceof Node) {\n if (element && element.id === argsTarget.id + '_content') {\n return argsTarget;\n }\n if (source && argsTarget.shape.type === 'Bpmn' && ((!isBlazor() && argsTarget.shape.shape === 'Activity'))) {\n if (argsTarget.shape.activity.subProcess.type === 'Transaction') {\n var transaction = argsTarget.shape.activity.subProcess.transaction;\n if (transaction.success.visible && element.id.indexOf(argsTarget.id + '_success') === 0) {\n return transaction.success;\n }\n if (transaction.cancel.visible && element.id.indexOf(argsTarget.id + '_cancel') === 0) {\n return transaction.cancel;\n }\n if (transaction.failure.visible && element.id.indexOf(argsTarget.id + '_failure') === 0) {\n return transaction.failure;\n }\n }\n }\n if (element instanceof PathElement) {\n for (var i = 0; i < argsTarget.ports.length; i++) {\n var port = argsTarget.ports[parseInt(i.toString(), 10)];\n if (element.id === argsTarget.id + '_' + port.id) {\n return port;\n }\n }\n }\n }\n // Feature 826644: Support to add ports to the connector.\n // Added below condition to find the target connector port.\n if (argsTarget instanceof Connector) {\n if (element && element.id === argsTarget.id + '_content') {\n return argsTarget;\n }\n if (element instanceof PathElement) {\n for (var i = 0; i < argsTarget.ports.length; i++) {\n var port = argsTarget.ports[parseInt(i.toString(), 10)];\n if (element.id === argsTarget.id + '_' + port.id) {\n return port;\n }\n }\n }\n }\n if (!connection) {\n var annotation = void 0;\n for (var i = 0; i < argsTarget.annotations.length; i++) {\n annotation = argsTarget.annotations[parseInt(i.toString(), 10)];\n if (element.id === argsTarget.id + '_' + annotation.id) {\n return annotation;\n }\n }\n }\n return argsTarget;\n };\n /**\n * canDisconnect method\\\n *\n * @returns { boolean } canDisconnect method .\\\n * @param {string} endPoint - provide the endPoint value.\n * @param {MouseEventArgs} args - provide the args value.\n * @param {string} targetPortId - provide the targetPortId value.\n * @param {string} targetNodeId - provide the targetNodeId value.\n * @private\n */\n CommandHandler.prototype.canDisconnect = function (endPoint, args, targetPortId, targetNodeId) {\n var selector;\n var connect;\n if (args.source instanceof Selector) {\n selector = args.source;\n connect = selector.connectors[0];\n }\n else if (args.source instanceof Connector && this.diagram.currentDrawingObject) {\n connect = this.diagram.currentDrawingObject;\n }\n var targetObject = this.findTarget(args.targetWrapper, args.target, endPoint === 'ConnectorSourceEnd', true);\n var nodeEnd = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEnd = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n if (connect[\"\" + nodeEnd] !== targetNodeId || connect[\"\" + portEnd] !== targetPortId) {\n return true;\n }\n return false;\n };\n /* tslint:disable */\n /**\n * connect method\\\n *\n * @returns { IConnectionChangeEventArgs | IBlazorConnectionChangeEventArgs } connect method .\\\n * @param {string} endPoint - provide the endPoint value.\n * @param {MouseEventArgs} args - provide the args value.\n * @param {boolean} canCancel - provide the canCancel value.\n * @private\n */\n CommandHandler.prototype.connect = function (endPoint, args, canCancel) {\n var newChanges = {};\n var oldChanges = {};\n var oldNodeId;\n var oldPortId;\n var selectorModel;\n var connector;\n var returnargs;\n if (args.source instanceof Selector) {\n selectorModel = args.source;\n connector = selectorModel.connectors[0];\n }\n else if (args.source instanceof Connector && this.diagram.currentDrawingObject) {\n connector = this.diagram.currentDrawingObject;\n }\n var target = this.findTarget((args.targetWrapper || args.sourceWrapper), (args.target || args.actualObject), endPoint === 'ConnectorSourceEnd', true);\n var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n if (target instanceof Node) {\n oldChanges[\"\" + nodeEndId] = connector[\"\" + nodeEndId];\n connector[\"\" + nodeEndId] = target.id;\n newChanges[\"\" + nodeEndId] = connector[\"\" + nodeEndId];\n oldChanges[\"\" + portEndId] = connector[\"\" + portEndId];\n returnargs = this.connectionEventChange(connector, oldChanges, newChanges, endPoint, canCancel);\n }\n else if (target instanceof Port) {\n oldNodeId = connector[\"\" + nodeEndId];\n oldPortId = connector[\"\" + portEndId];\n connector[\"\" + portEndId] = target.id;\n connector[\"\" + nodeEndId] = (args.target && args.target.id || args.actualObject.id);\n newChanges[\"\" + nodeEndId] = connector[\"\" + nodeEndId];\n newChanges[\"\" + portEndId] = connector[\"\" + portEndId];\n var arg = {\n connector: cloneBlazorObject(connector), oldValue: { nodeId: oldNodeId, portId: oldPortId },\n newValue: { nodeId: newChanges[\"\" + nodeEndId], portId: newChanges[\"\" + portEndId] },\n cancel: false, state: 'Changing', connectorEnd: endPoint\n };\n {\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n }\n if (arg.cancel) {\n connector[\"\" + nodeEndId] = oldNodeId;\n connector[\"\" + portEndId] = oldPortId;\n newChanges[\"\" + nodeEndId] = oldNodeId;\n newChanges[\"\" + portEndId] = oldPortId;\n }\n else {\n this.diagram.connectorPropertyChange(connector, oldChanges, newChanges);\n this.diagram.updateDiagramObject(connector);\n arg = {\n connector: cloneBlazorObject(connector), oldValue: { nodeId: oldNodeId, portId: oldPortId },\n newValue: { nodeId: newChanges[\"\" + nodeEndId], portId: newChanges[\"\" + portEndId] }, cancel: false,\n state: 'Changing', connectorEnd: endPoint\n };\n }\n }\n this.renderHighlighter(args, undefined, endPoint === 'ConnectorSourceEnd');\n return returnargs;\n };\n /* tslint:enable */\n /** @private */\n /**\n * cut method\\\n *\n * @returns { void } cut method .\\\n * @private\n */\n CommandHandler.prototype.cut = function () {\n this.clipboardData.pasteIndex = 0;\n if (this.diagram.undoRedoModule) {\n this.diagram.historyManager.startGroupAction();\n }\n this.clipboardData.clipObject = this.copyObjects();\n if (this.diagram.undoRedoModule) {\n this.diagram.historyManager.endGroupAction();\n }\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n };\n // private UpdateBlazorDiagramModelLayers(layer: Layer, isRemove: boolean): void {\n // comment blazor code\n // }\n /**\n * addLayer method\\\n *\n * @returns { void } addLayer method .\\\n * @param {LayerModel} layer - provide the endPoint value.\n * @param {Object[]} objects - provide the args value.\n * @param {boolean} isServerUpdate - provide the canCancel value.\n * @private\n */\n CommandHandler.prototype.addLayer = function (layer, objects, isServerUpdate) {\n layer.id = layer.id || randomId();\n layer.zIndex = this.diagram.layers.length;\n var isEnableServerDatabind = this.diagram.allowServerDataBinding;\n this.diagram.enableServerDataBinding(false);\n layer = new Layer(this.diagram, 'layers', layer, true);\n this.diagram.enableServerDataBinding(isEnableServerDatabind);\n layer.objectZIndex = -1;\n layer.zIndexTable = {};\n this.diagram.layers.push(layer);\n // if (isServerUpdate) {\n // this.UpdateBlazorDiagramModelLayers(layer as Layer, false);\n // }\n this.diagram.layerZIndexTable[layer.zIndex] = layer.id;\n this.diagram.activeLayer = layer;\n var layers = layer.objects;\n if (objects) {\n for (var i = 0; i < objects.length; i++) {\n this.diagram.add(objects[parseInt(i.toString(), 10)]);\n }\n }\n };\n /**\n * getObjectLayer method\\\n *\n * @returns { LayerModel } getObjectLayer method .\\\n * @param {string} objectName - provide the endPoint value.\n * @private\n */\n CommandHandler.prototype.getObjectLayer = function (objectName) {\n var layers = this.diagram.layers;\n if (layers.length > 1) {\n for (var i = 0; i < layers.length; i++) {\n var objIndex = layers[parseInt(i.toString(), 10)].objects.indexOf(objectName);\n if (objIndex > -1) {\n return layers[parseInt(i.toString(), 10)];\n }\n }\n }\n return this.diagram.activeLayer;\n };\n /**\n * getLayer method\\\n *\n * @returns { LayerModel } getLayer method .\\\n * @param {string} layerName - provide the endPoint value.\n * @private\n */\n CommandHandler.prototype.getLayer = function (layerName) {\n var layers = this.diagram.layers;\n for (var i = 0; i < layers.length; i++) {\n if (layers[parseInt(i.toString(), 10)].id === layerName) {\n return layers[parseInt(i.toString(), 10)];\n }\n }\n return undefined;\n };\n /**\n * removeLayer method\\\n *\n * @returns { void } removeLayer method .\\\n * @param {string} layerId - provide the endPoint value.\n * @param {boolean} isServerUpdate - provide the endPoint value.\n * @private\n */\n CommandHandler.prototype.removeLayer = function (layerId, isServerUpdate) {\n var layers = this.getLayer(layerId);\n if (layers) {\n var index = this.diagram.layers.indexOf(layers);\n var layerObject = layers.objects;\n for (var i = layerObject.length - 1; i >= 0; i--) {\n this.diagram.unSelect(this.diagram.nameTable[layerObject[parseInt(i.toString(), 10)]]);\n this.diagram.remove(this.diagram.nameTable[layerObject[parseInt(i.toString(), 10)]]);\n if (layers.id !== 'default_layer') {\n if (this.diagram.activeLayer.id === layerId) {\n this.diagram.activeLayer = this.diagram.layers[this.diagram.layers.length - 1];\n }\n }\n }\n // if (isServerUpdate) {\n // this.UpdateBlazorDiagramModelLayers(this.diagram.layers[parseInt(index.toString(), 10)] as Layer, true);\n // }\n delete this.diagram.layerZIndexTable[layers.zIndex];\n this.diagram.layers.splice(index, 1);\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /**\n * moveObjects method\\\n *\n * @returns { void } moveObjects method .\\\n * @param {string[]]} objects - provide the objects value.\n * @param {string} targetLayer - provide the targetLayer value.\n * @private\n */\n CommandHandler.prototype.moveObjects = function (objects, targetLayer) {\n this.diagram.startGroupAction();\n var connectorObjectsDetails = {};\n var childNodes = [];\n for (var i = 0; i < objects.length; i++) {\n var obj = this.diagram.nameTable[objects[parseInt(i.toString(), 10)]];\n if (obj instanceof Node) {\n var detail = { inEdges: obj.inEdges, outEdges: obj.outEdges };\n connectorObjectsDetails[\"\" + obj.id] = cloneObject(detail);\n }\n else if (obj instanceof Connector) {\n var detail = {\n sourceID: obj.sourceID, targetID: obj.targetID,\n sourcePortID: obj.sourcePortID, targetPortID: obj.targetPortID\n };\n connectorObjectsDetails[\"\" + obj.id] = cloneObject(detail);\n }\n }\n var layer = this.getLayer(targetLayer) || this.diagram.activeLayer;\n this.diagram.setActiveLayer(layer.id);\n var targerNodes;\n for (var _i = 0, objects_1 = objects; _i < objects_1.length; _i++) {\n var i = objects_1[_i];\n var layer_1 = this.getObjectLayer(i);\n var index = layer_1.objects.indexOf(i);\n if (index > -1) {\n targerNodes = this.diagram.nameTable[\"\" + i];\n childNodes = [];\n if (targerNodes.children) {\n for (var _a = 0, _b = targerNodes.children; _a < _b.length; _a++) {\n var node = _b[_a];\n childNodes.push(this.diagram.nameTable[\"\" + node]);\n }\n }\n this.diagram.unSelect(targerNodes);\n //875087 - Restrict removing dependent connectors when moveing between layers\n this.diagram.deleteDependentConnector = false;\n this.diagram.remove(this.diagram.nameTable[\"\" + i]);\n this.diagram.deleteDependentConnector = true;\n if (childNodes.length > 0) {\n var addedObj = void 0;\n for (var _c = 0, childNodes_1 = childNodes; _c < childNodes_1.length; _c++) {\n var node = childNodes_1[_c];\n addedObj = this.diagram.add(node);\n this.setConnectorDetails(addedObj || node, connectorObjectsDetails);\n targerNodes.children.push(addedObj.id);\n }\n addedObj = this.diagram.add(targerNodes);\n this.setConnectorDetails(addedObj || targerNodes, connectorObjectsDetails);\n }\n else {\n var addedObj = this.diagram.add(targerNodes);\n this.setConnectorDetails(addedObj || targerNodes, connectorObjectsDetails);\n }\n if (targerNodes.parentId) {\n var parentId = targerNodes.parentId;\n var group = this.diagram.nameTable[\"\" + parentId];\n this.diagram.addChildToGroup(group, targerNodes.id);\n }\n }\n }\n this.diagram.endGroupAction();\n };\n CommandHandler.prototype.setConnectorDetails = function (obj, connectorObjectsDetails) {\n var details = connectorObjectsDetails[obj.id];\n if (obj instanceof Node) {\n if (details) {\n if (details.inEdges && details.inEdges.length > 0) {\n for (var i = 0; i < details.inEdges.length; i++) {\n var con = this.diagram.nameTable[details.inEdges[parseInt(i.toString(), 10)]];\n con.targetID = obj.id;\n }\n }\n if (details.outEdges && details.outEdges.length > 0) {\n for (var i = 0; i < details.outEdges.length; i++) {\n var con = this.diagram.nameTable[details.outEdges[parseInt(i.toString(), 10)]];\n con.sourceID = obj.id;\n }\n }\n }\n }\n else if (obj instanceof Connector) {\n if (details) {\n obj.sourceID = details.sourceID;\n obj.targetID = details.targetID;\n obj.sourcePortID = details.sourcePortID;\n obj.targetPortID = details.targetPortID;\n }\n }\n };\n /**\n * cloneLayer method\\\n *\n * @returns { void } cloneLayer method .\\\n * @param {string[]} layerName - provide the objects value.\n * @private\n */\n CommandHandler.prototype.cloneLayer = function (layerName) {\n var layers = this.diagram.layers;\n var layer = this.getLayer(layerName);\n if (layer) {\n var cloneObject_1 = [];\n var newlayer = {\n id: layerName + '_' + randomId(), objects: [], visible: true, lock: false\n };\n this.addLayer(newlayer, null, true);\n newlayer.zIndex = this.diagram.layers.length - 1;\n var multiSelect = cloneObject_1.length !== 1;\n for (var _i = 0, _a = layer.objects; _i < _a.length; _i++) {\n var obj = _a[_i];\n cloneObject_1.push(this.diagram.nameTable[\"\" + obj]);\n }\n this.paste(cloneObject_1);\n }\n };\n /**\n * copy method\\\n *\n * @returns { void } copy method .\\\n * @private\n */\n CommandHandler.prototype.copy = function () {\n this.clipboardData.pasteIndex = 1;\n this.clipboardData.clipObject = this.copyObjects();\n return this.clipboardData.clipObject;\n };\n /**\n * copyObjects method\\\n *\n * @returns { Object[] } copyObjects method .\\\n * @private\n */\n CommandHandler.prototype.copyObjects = function () {\n var selectedItems = [];\n var obj = [];\n this.clipboardData.childTable = {};\n if (this.diagram.selectedItems.connectors.length > 0) {\n //908602 - Issue in Cut connectors\n selectedItems = selectedItems.concat(this.diagram.selectedItems.connectors);\n for (var j = 0; j < selectedItems.length; j++) {\n var element = void 0;\n //To copy text annotation node while copying the text annotation connector.\n if (this.diagram.bpmnModule &&\n selectedItems[parseInt(j.toString(), 10)].isBpmnAnnotationConnector) {\n element = cloneObject((this.diagram.nameTable[selectedItems[parseInt(j.toString(), 10)].targetID]));\n }\n else {\n element = cloneObject((selectedItems[parseInt(j.toString(), 10)]));\n }\n obj.push(element);\n }\n }\n if (this.diagram.selectedItems.nodes.length > 0) {\n selectedItems = selectedItems.concat(this.diagram.selectedItems.nodes);\n for (var j = 0; j < this.diagram.selectedItems.nodes.length; j++) {\n if (!this.diagram.selectedItems.nodes[parseInt(j.toString(), 10)].isPhase) {\n var node = cloneObject(this.diagram.selectedItems.nodes[parseInt(j.toString(), 10)]);\n if (!((node.isLane || node.isHeader) && this.checkSwimlaneInSelection(node, obj))) {\n if (node.wrapper && (node.offsetX !== node.wrapper.offsetX)) {\n node.offsetX = node.wrapper.offsetX;\n }\n if (node.wrapper && (node.offsetY !== node.wrapper.offsetY)) {\n node.offsetY = node.wrapper.offsetY;\n }\n this.copyProcesses(node);\n obj.push(cloneObject(node));\n var matrix = identityMatrix();\n rotateMatrix(matrix, -node.rotateAngle, node.offsetX, node.offsetY);\n if (node.children) {\n var childTable = this.clipboardData.childTable;\n var tempNode = void 0;\n var elements = [];\n var nodes = this.getAllDescendants(node, elements, true);\n for (var i = 0; i < nodes.length; i++) {\n tempNode = this.diagram.nameTable[nodes[parseInt(i.toString(), 10)].id];\n var clonedObject = childTable[tempNode.id] = cloneObject(tempNode);\n var newOffset = transformPointByMatrix(matrix, { x: clonedObject.wrapper.offsetX, y: clonedObject.wrapper.offsetY });\n if (tempNode instanceof Node) {\n clonedObject.offsetX = newOffset.x;\n clonedObject.offsetY = newOffset.y;\n clonedObject.rotateAngle -= node.rotateAngle;\n }\n }\n this.clipboardData.childTable = childTable;\n }\n // Adding the clonned connectors of swim lane in child table\n if (node.shape.type === 'SwimLane') {\n var swimlane = this.diagram.getObject(this.diagram.selectedItems.nodes[parseInt(j.toString(), 10)].id);\n var childTable = this.clipboardData.childTable;\n var connectorsList = getConnectors(this.diagram, swimlane.wrapper.children[0]);\n for (var i = 0; i < connectorsList.length; i++) {\n var connector = this.diagram.getObject(connectorsList[parseInt(i.toString(), 10)]);\n childTable[connector.id] = cloneObject(connector);\n }\n }\n // Adding the clonned LANE of swim lane in child table\n if (node && node.isLane) {\n var childTable = this.clipboardData.childTable;\n var swimlane = this.diagram.getObject(node.parentId);\n var lane = findLane(node, this.diagram);\n childTable[node.id] = cloneObject(lane);\n childTable[node.id].width = swimlane.wrapper.actualSize.width;\n }\n }\n }\n }\n }\n if (this.clipboardData.pasteIndex === 0) {\n this.startGroupAction();\n for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {\n var item = selectedItems_1[_i];\n if (this.diagram.nameTable[item.id]) {\n this.diagram.remove(item);\n }\n }\n this.endGroupAction();\n }\n this.sortByZIndex(obj, 'zIndex');\n //892957: Remove duplicate elements while copy, paste the swimlane\n if (this.diagram.selectedItems.nodes.some(function (node) {\n return node.shape.type === 'SwimLane';\n })) {\n obj = this.removeDuplicateObjects(obj);\n }\n return obj;\n };\n //892957: To remove duplicate objects\n CommandHandler.prototype.removeDuplicateObjects = function (objects) {\n var uniqueObjects = {};\n for (var i = 0; i < objects.length; i++) {\n uniqueObjects[objects[parseInt(i.toString(), 10)].id] = objects[parseInt(i.toString(), 10)];\n }\n var result = [];\n //To remove objects with same id\n for (var key in uniqueObjects) {\n if (Object.prototype.hasOwnProperty.call(uniqueObjects, key)) {\n result.push(uniqueObjects[\"\" + key]);\n }\n }\n var _loop_1 = function (i) {\n if (result[parseInt(i.toString(), 10)].parentId) {\n var lane_1 = this_1.diagram.getObject(result[parseInt(i.toString(), 10)].parentId);\n if (lane_1 && lane_1.isLane && lane_1.parentId &&\n result.some(function (obj) { return obj.id === lane_1.parentId; })) {\n result.splice(i, 1);\n i--;\n }\n }\n out_i_1 = i;\n };\n var this_1 = this, out_i_1;\n //To remove the nodes which is child node of copied swimlane\n for (var i = 0; i < result.length; i++) {\n _loop_1(i);\n i = out_i_1;\n }\n // Get the keys from childTable\n var childTableKeys = Object.keys(this.clipboardData.childTable);\n // Filter the array to remove objects with ids matching the keys in childTable except lane\n var filteredArray = result.filter(function (item) {\n return (childTableKeys.indexOf(item.id) === -1 || item.isLane);\n });\n return filteredArray;\n };\n //To check if the swimlane is selected along with its child lane\n CommandHandler.prototype.checkSwimlaneInSelection = function (node, obj) {\n return this.diagram.selectedItems.nodes.some(function (item) { return item.id === node.parentId; });\n };\n CommandHandler.prototype.copyProcesses = function (node) {\n if (node.shape.type === 'Bpmn' && node.shape.activity &&\n node.shape.activity.subProcess.processes &&\n node.shape.activity.subProcess.processes.length > 0) {\n var processes = node.shape.activity.subProcess.processes;\n for (var _i = 0, processes_1 = processes; _i < processes_1.length; _i++) {\n var i = processes_1[_i];\n this.processTable[\"\" + i] = (cloneObject(this.diagram.nameTable[\"\" + i]));\n if (this.processTable[\"\" + i].shape.activity.subProcess.processes &&\n this.processTable[\"\" + i].shape.activity.subProcess.processes.length > 0) {\n this.copyProcesses(this.processTable[\"\" + i]);\n }\n }\n this.clipboardData.processTable = this.processTable;\n }\n };\n /**\n * group method\\\n *\n * @returns { void } group method .\\\n * @private\n */\n CommandHandler.prototype.group = function () {\n this.oldSelectedObjects = cloneSelectedObjects(this.diagram);\n var propName = 'isProtectedOnChange';\n var protectedChange = this.diagram[\"\" + propName];\n this.diagram.protectPropertyChange(true);\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.Group;\n var selectedItems = [];\n var obj = {};\n //let group: Node | Connector;\n obj.id = 'group' + randomId();\n obj = new Node(this.diagram, 'nodes', obj, true);\n obj.children = [];\n selectedItems = this.diagram.selectedItems.nodes;\n selectedItems = selectedItems.concat(this.diagram.selectedItems.connectors);\n var order = selectedItems.sort(function (a, b) {\n return a.zIndex - b.zIndex;\n });\n for (var i = 0; i < order.length; i++) {\n if (!order[parseInt(i.toString(), 10)].parentId) {\n obj.children.push(order[parseInt(i.toString(), 10)].id);\n }\n }\n //867606 - Exception throws while grouping the existing group nodes\n if (obj.children.length > 0) {\n var group = this.diagram.add(obj);\n if (group) {\n this.select(group);\n }\n var entry = { type: 'Group', undoObject: obj, redoObject: obj, category: 'Internal' };\n this.addHistoryEntry(entry);\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.Group;\n this.diagram.protectPropertyChange(protectedChange);\n // this.updateBlazorSelector();\n }\n };\n /**\n * unGroup method\\\n *\n * @returns { void } unGroup method .\\\n * @param {NodeModel} obj - provide the angle value.\n * @private\n */\n CommandHandler.prototype.unGroup = function (obj) {\n var propName = 'isProtectedOnChange';\n var protectedChange = this.diagram[\"\" + propName];\n this.diagram.protectPropertyChange(true);\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.Group;\n var selectedItems = [];\n if (obj) {\n selectedItems.push(obj);\n }\n else {\n selectedItems = this.diagram.selectedItems.nodes;\n }\n this.diagram.startGroupAction();\n for (var i = 0; i < selectedItems.length; i++) {\n var node = selectedItems[parseInt(i.toString(), 10)];\n var undoObject = cloneObject(node);\n var childCollection = [];\n for (var k = 0; k < node.children.length; k++) {\n childCollection.push(node.children[parseInt(k.toString(), 10)]);\n }\n if (node.children) {\n if (node.ports && node.ports.length > 0) {\n this.diagram.removePorts(node, node.ports);\n }\n if (node.annotations && node.annotations.length > 0 && (!isBlazor())) {\n this.diagram.removeLabels(node, node.annotations);\n }\n var parentNode = this.diagram.nameTable[node.parentId];\n for (var j = node.children.length - 1; j >= 0; j--) {\n (this.diagram.nameTable[node.children[parseInt(j.toString(), 10)]]).parentId = '';\n this.diagram.deleteChild(this.diagram.nameTable[node.children[parseInt(j.toString(), 10)]], node);\n if (node.parentId && node.children[parseInt(j.toString(), 10)]) {\n this.diagram.addChild(parentNode, node.children[parseInt(j.toString(), 10)]);\n }\n }\n this.resetDependentConnectors(node.inEdges, true);\n this.resetDependentConnectors(node.outEdges, false);\n var entry = {\n type: 'UnGroup', undoObject: undoObject,\n redoObject: undoObject, category: 'Internal'\n };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n if (node.parentId) {\n this.diagram.deleteChild(node, parentNode);\n }\n }\n this.diagram.removeNode(node, childCollection);\n this.clearSelection();\n }\n this.diagram.endGroupAction();\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.Group;\n this.diagram.protectPropertyChange(protectedChange);\n };\n CommandHandler.prototype.resetDependentConnectors = function (edges, isInEdges) {\n for (var i = 0; i < edges.length; i++) {\n var newConnector = this.diagram.nameTable[edges[parseInt(i.toString(), 10)]];\n var undoObject = cloneObject(newConnector);\n var newProp = void 0;\n if (isInEdges) {\n newConnector.targetID = '';\n newConnector.targetPortID = '';\n newProp = { targetID: newConnector.targetID, targetPortID: newConnector.targetPortID };\n }\n else {\n newConnector.sourceID = '';\n newConnector.sourcePortID = '';\n newProp = { sourceID: newConnector.sourceID, sourcePortID: newConnector.sourcePortID };\n }\n this.diagram.connectorPropertyChange(newConnector, {}, newProp);\n var entry = {\n type: 'ConnectionChanged', undoObject: { connectors: [undoObject], nodes: [] },\n redoObject: { connectors: [cloneObject(newConnector)], nodes: [] }, category: 'Internal'\n };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n }\n };\n /**\n * paste method\\\n *\n * @returns { void } paste method .\\\n * @param {(NodeModel | ConnectorModel)[]} obj - provide the objects value.\n * @private\n */\n CommandHandler.prototype.paste = function (obj) {\n if (obj || this.clipboardData.clipObject) {\n this.diagram.protectPropertyChange(true);\n var copiedItems = obj ? this.getNewObject(obj) :\n this.clipboardData.clipObject;\n if (copiedItems) {\n var multiSelect = copiedItems.length !== 1;\n var groupAction = false;\n var objectTable = {};\n var keyTable = {};\n if (this.clipboardData.pasteIndex !== 0) {\n this.clearSelection();\n }\n if (this.diagram.undoRedoModule) {\n groupAction = true;\n this.diagram.historyManager.startGroupAction();\n }\n for (var _i = 0, copiedItems_1 = copiedItems; _i < copiedItems_1.length; _i++) {\n var copy = copiedItems_1[_i];\n objectTable[copy.id] = copy;\n }\n var copiedObject = [];\n if (multiSelect) {\n // This bool is also consider to prevent selection change event is triggered after every object clone\n this.diagram.isServerUpdate = true;\n }\n for (var j = 0; j < copiedItems.length; j++) {\n var copy = copiedItems[parseInt(j.toString(), 10)];\n //EJ2-841227-Copy paste of child node from group node\n if (copy.parentId) {\n var parentObj = this.diagram.getObject(copy.parentId);\n if (parentObj.shape.type !== 'SwimLane' && copy.parentId) {\n copy.parentId = '';\n }\n }\n if (getObjectType(copy) === Connector) {\n var clonedObj = cloneObject(copy);\n var nodeId = clonedObj.sourceID;\n clonedObj.sourceID = '';\n if (objectTable[\"\" + nodeId] && keyTable[\"\" + nodeId]) {\n clonedObj.sourceID = keyTable[\"\" + nodeId];\n }\n nodeId = clonedObj.targetID;\n clonedObj.targetID = '';\n if (objectTable[\"\" + nodeId] && keyTable[\"\" + nodeId]) {\n clonedObj.targetID = keyTable[\"\" + nodeId];\n }\n //To check if the connector is cloned already for text annotation node.\n var allowClone = true;\n if (clonedObj.targetID) {\n var targetNode = this.diagram.nameTable[clonedObj.targetID];\n if (targetNode.shape.shape === 'TextAnnotation' && targetNode.inEdges && targetNode.inEdges.length > 0) {\n allowClone = false;\n }\n }\n if (allowClone) {\n var newObj = this.cloneConnector(clonedObj, multiSelect);\n copiedObject.push(newObj);\n keyTable[copy.id] = newObj.id;\n }\n }\n else {\n var newNode = this.cloneNode(copy, multiSelect);\n copiedObject.push(newNode);\n //bpmn text annotations will not be pasted\n if (newNode) {\n keyTable[copy.id] = newNode.id;\n var edges = copy.inEdges;\n if (edges) {\n for (var _a = 0, edges_1 = edges; _a < edges_1.length; _a++) {\n var edge = edges_1[_a];\n if (objectTable[\"\" + edge] && keyTable[\"\" + edge]) {\n var newConnector = this.diagram.nameTable[keyTable[\"\" + edge]];\n newConnector.targetID = keyTable[copy.id];\n this.diagram.connectorPropertyChange(newConnector, { targetID: '', targetPortID: '' }, { targetID: newConnector.targetID, targetPortID: newConnector.targetPortID });\n }\n }\n }\n edges = copy.outEdges;\n if (edges) {\n for (var _b = 0, edges_2 = edges; _b < edges_2.length; _b++) {\n var edge = edges_2[_b];\n if (objectTable[\"\" + edge] && keyTable[\"\" + edge]) {\n var newConnector = this.diagram.nameTable[keyTable[\"\" + edge]];\n newConnector.sourceID = keyTable[copy.id];\n this.diagram.connectorPropertyChange(newConnector, { sourceID: '', sourcePortID: '' }, { sourceID: newConnector.sourceID, sourcePortID: newConnector.sourcePortID });\n }\n }\n }\n }\n }\n }\n if (multiSelect) {\n this.diagram.isServerUpdate = false;\n // this.diagram.UpdateBlazorDiagramModelCollection(copiedItems[0] as Node, copiedObject);\n // this.getBlazorOldValues();\n this.diagram.select(copiedObject, true);\n }\n if (groupAction === true) {\n this.diagram.historyManager.endGroupAction();\n groupAction = false;\n }\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n this.clipboardData.pasteIndex++;\n this.diagram.protectPropertyChange(false);\n }\n }\n };\n CommandHandler.prototype.getNewObject = function (obj) {\n var newObj;\n var newobjs = [];\n this.clipboardData.pasteIndex = 1;\n for (var i = 0; i < obj.length; i++) {\n newObj = cloneObject(obj[parseInt(i.toString(), 10)]);\n newobjs.push(newObj);\n }\n return newobjs;\n };\n CommandHandler.prototype.cloneConnector = function (connector, multiSelect) {\n //let newConnector: Node | Connector;\n var cloneObject$1 = cloneObject(connector);\n this.translateObject(cloneObject$1);\n cloneObject$1.zIndex = Number.MIN_VALUE;\n var newConnector = this.diagram.add(cloneObject$1);\n if (!this.diagram.isServerUpdate) {\n this.selectObjects([newConnector], multiSelect);\n }\n return newConnector;\n };\n CommandHandler.prototype.cloneNode = function (node, multiSelect, children, groupnodeID) {\n var newNode;\n var connectorsTable = {};\n var cloneObject$1 = cloneObject(node);\n var process;\n var temp = this.diagram.nameTable[node.parentId];\n if (node.shape && node.shape.type === 'Bpmn' && node.shape.activity &&\n node.shape.activity.subProcess.processes\n && node.shape.activity.subProcess.processes.length) {\n process = cloneObject$1.shape.activity.subProcess.processes;\n cloneObject$1.zIndex = Number.MIN_VALUE;\n cloneObject$1.shape.activity.subProcess.processes = undefined;\n }\n if (node.shape && node.shape.type === 'SwimLane') {\n pasteSwimLane(node, this.diagram, this.clipboardData);\n }\n else if (temp && temp.shape.type === 'SwimLane') {\n pasteSwimLane(cloneObject(temp), this.diagram, this.clipboardData, node, true);\n }\n else if (node.children && node.children.length && (!children || !children.length)) {\n newNode = this.cloneGroup(node, multiSelect);\n }\n else {\n this.translateObject(cloneObject$1, groupnodeID);\n cloneObject$1.zIndex = Number.MIN_VALUE;\n if (children) {\n cloneObject$1.children = children;\n }\n if (cloneObject$1.shape && cloneObject$1.shape.shape === 'TextAnnotation') {\n cloneObject$1.isTextAnnotationCopied = true;\n }\n newNode = this.diagram.add(cloneObject$1);\n }\n for (var _i = 0, _a = Object.keys(connectorsTable); _i < _a.length; _i++) {\n var i = _a[_i];\n this.diagram.add(connectorsTable[\"\" + i]);\n }\n if (process && process.length) {\n newNode.shape.activity.subProcess.processes = process;\n this.cloneSubProcesses(newNode);\n }\n if (newNode && !this.diagram.isServerUpdate) {\n this.selectObjects([newNode], multiSelect);\n }\n return newNode;\n };\n CommandHandler.prototype.cloneSubProcesses = function (node) {\n var connector = [];\n var temp = {};\n if (node.shape.type === 'Bpmn' && node.shape.activity &&\n node.shape.activity.subProcess.processes\n && node.shape.activity.subProcess.processes.length) {\n var process = node.shape.activity.subProcess.processes;\n for (var g = 0; g < process.length; g++) {\n var child = this.diagram.nameTable[process[parseInt(g.toString(), 10)]]\n || this.clipboardData.processTable[process[parseInt(g.toString(), 10)]];\n for (var _i = 0, _a = child.outEdges; _i < _a.length; _i++) {\n var j = _a[_i];\n if (connector.indexOf(j) < 0) {\n connector.push(j);\n }\n }\n for (var _b = 0, _c = child.inEdges; _b < _c.length; _b++) {\n var j = _c[_b];\n if (connector.indexOf(j) < 0) {\n connector.push(j);\n }\n }\n var innerChild = cloneObject(this.clipboardData.processTable[process[parseInt(g.toString(), 10)]]);\n innerChild.processId = node.id;\n var newNode = this.cloneNode(innerChild, false);\n temp[process[parseInt(g.toString(), 10)]] = newNode.id;\n process[parseInt(g.toString(), 10)] = newNode.id;\n this.diagram.addProcess(newNode, node.id);\n for (var _d = 0, connector_1 = connector; _d < connector_1.length; _d++) {\n var i = connector_1[_d];\n var node_1 = this.diagram.nameTable[\"\" + i] || this.diagram.connectorTable[\"\" + i];\n var clonedNode = cloneObject(node_1);\n if (temp[clonedNode.sourceID] && temp[clonedNode.targetID]) {\n clonedNode.zIndex = -1;\n clonedNode.id += randomId();\n clonedNode.sourceID = temp[clonedNode.sourceID];\n clonedNode.targetID = temp[clonedNode.targetID];\n connector.splice(connector.indexOf(i), 1);\n this.diagram.add(clonedNode);\n }\n }\n }\n }\n };\n CommandHandler.prototype.cloneGroup = function (obj, multiSelect) {\n var sourceId;\n var targetId;\n var newChildren = [];\n var children = [];\n var connectorObj = [];\n var newObj;\n var oldID = [];\n children = children.concat(obj.children);\n var id = randomId();\n var objectCollection = [];\n this.diagram.blazorActions |= BlazorAction.GroupClipboardInProcess;\n if (this.clipboardData.childTable || obj.children.length > 0) {\n for (var i = 0; i < children.length; i++) {\n var childObj = void 0;\n if (this.clipboardData.childTable) {\n childObj = this.clipboardData.childTable[children[parseInt(i.toString(), 10)]];\n // EJ2-905181 - Added to consider copy paste and clone the new group node.\n if (!childObj) {\n childObj = this.diagram.nameTable[children[parseInt(i.toString(), 10)]];\n }\n }\n else {\n childObj = this.diagram.nameTable[children[parseInt(i.toString(), 10)]];\n }\n childObj.parentId = '';\n if (childObj) {\n if (getObjectType(childObj) === Connector) {\n connectorObj.push(childObj);\n }\n else {\n newObj = this.cloneNode(childObj, multiSelect, undefined, id);\n oldID.push(childObj.id);\n newChildren.push(newObj.id);\n objectCollection.push(newObj);\n }\n }\n }\n }\n for (var k = 0; k < connectorObj.length; k++) {\n if (connectorObj[parseInt(k.toString(), 10)].sourceID || connectorObj[parseInt(k.toString(), 10)].targetID) {\n for (var j = 0; j < oldID.length; j++) {\n if (connectorObj[parseInt(k.toString(), 10)].sourceID === (oldID[parseInt(j.toString(), 10)])) {\n sourceId = connectorObj[parseInt(k.toString(), 10)].sourceID;\n connectorObj[parseInt(k.toString(), 10)].sourceID += id;\n }\n if (connectorObj[parseInt(k.toString(), 10)].targetID === (oldID[parseInt(j.toString(), 10)])) {\n targetId = connectorObj[parseInt(k.toString(), 10)].targetID;\n connectorObj[parseInt(k.toString(), 10)].targetID += id;\n }\n }\n }\n newObj = this.cloneConnector(connectorObj[parseInt(k.toString(), 10)], multiSelect);\n //EJ2-839982 - When we copy paste the group node multiple times, the connector is not rendered properly\n connectorObj[parseInt(k.toString(), 10)].sourceID = sourceId;\n connectorObj[parseInt(k.toString(), 10)].targetID = targetId;\n newChildren.push(newObj.id);\n objectCollection.push(newObj);\n }\n var parentObj = this.cloneNode(obj, multiSelect, newChildren);\n objectCollection.push(parentObj);\n if (parentObj && parentObj.container && parentObj.shape && parentObj.shape.type === 'UmlClassifier') {\n this.diagram.updateDiagramObject(parentObj);\n parentObj.wrapper.measure(new Size());\n }\n this.diagram.blazorActions &= ~BlazorAction.GroupClipboardInProcess;\n if (!this.diagram.isServerUpdate) {\n this.diagram.UpdateBlazorDiagramModelCollection(undefined, objectCollection, undefined, true);\n }\n else {\n this.cloneGroupChildCollection = objectCollection;\n }\n return parentObj;\n };\n /**\n * translateObject method\\\n *\n * @returns { Object[] } translateObject method .\\\n * @param {Node | Connector} obj - provide the objects value.\n * @param {string} groupnodeID - provide the objects value.\n * @private\n */\n CommandHandler.prototype.translateObject = function (obj, groupnodeID) {\n obj.id += groupnodeID || randomId();\n var diff = this.clipboardData.pasteIndex * 10;\n if (getObjectType(obj) === Connector) {\n obj.sourcePoint = {\n x: obj.sourcePoint.x + diff, y: obj.sourcePoint.y + diff\n };\n obj.targetPoint = {\n x: obj.targetPoint.x + diff, y: obj.targetPoint.y + diff\n };\n if (obj.type === 'Bezier') {\n var segments = obj.segments;\n for (var i = 0; i < segments.length; i++) {\n if (!Point.isEmptyPoint(segments[parseInt(i.toString(), 10)].point1)) {\n segments[parseInt(i.toString(), 10)].point1 = {\n x: segments[parseInt(i.toString(), 10)].point1.x + diff, y: segments[parseInt(i.toString(), 10)].point1.y + diff\n };\n }\n if (!Point.isEmptyPoint(segments[parseInt(i.toString(), 10)].point2)) {\n segments[parseInt(i.toString(), 10)].point2 = {\n x: segments[parseInt(i.toString(), 10)].point2.x + diff, y: segments[parseInt(i.toString(), 10)].point2.y + diff\n };\n }\n }\n }\n if (obj.type === 'Straight' || obj.type === 'Bezier') {\n if (obj.segments && obj.segments.length > 0) {\n var segments = obj.segments;\n for (var i = 0; i < segments.length - 1; i++) {\n segments[parseInt(i.toString(), 10)].point.x += diff;\n segments[parseInt(i.toString(), 10)].point.y += diff;\n }\n }\n }\n }\n else {\n obj.offsetX += diff;\n obj.offsetY += diff;\n }\n };\n /**\n * drawObject method\\\n *\n * @returns { Node | Connector } drawObject method .\\\n * @param {Node | Connector} obj - provide the objects value.\n * @private\n */\n CommandHandler.prototype.drawObject = function (obj) {\n var newObj;\n //let cloneObject: Node | Connector;\n if (obj && obj.shape) {\n if (obj.shape.type === 'Text') {\n obj.width = this.diagram.drawingObject.width ? this.diagram.drawingObject.width : 50;\n obj.height = this.diagram.drawingObject.height ? this.diagram.drawingObject.height : 20;\n }\n }\n var cloneObject$1 = cloneObject(this.diagram.drawingObject);\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n cloneObject$1[\"\" + prop] = obj[\"\" + prop];\n }\n if (getObjectType(this.diagram.drawingObject) === Node || (getObjectType(this.diagram.drawingObject) === Connector && this.diagram.drawingObject.type === 'Freehand' && obj.type !== 'Bezier')) {\n newObj = new Node(this.diagram, 'nodes', cloneObject$1, true);\n newObj.id = (this.diagram.drawingObject.id || 'node') + randomId();\n }\n else {\n newObj = new Connector(this.diagram, 'connectors', cloneObject$1, true);\n newObj.id = (this.diagram.drawingObject ? (this.diagram.drawingObject.id ? this.diagram.drawingObject.id : 'connector')\n : 'connector') + randomId();\n }\n this.diagram.initObject(newObj);\n this.diagram.updateDiagramObject(newObj);\n this.diagram.currentDrawingObject = newObj;\n return newObj;\n };\n /**\n * addObjectToDiagram method\\\n *\n * @returns { void } addObjectToDiagram method .\\\n * @param {Node | Connector} obj - provide the objects value.\n * @private\n */\n CommandHandler.prototype.addObjectToDiagram = function (obj) {\n //let newObj: Node | Connector;\n this.diagram.removeFromAQuad(obj);\n this.diagram.removeObjectsFromLayer(this.diagram.nameTable[obj.id]);\n delete this.diagram.nameTable[obj.id];\n //EJ2-62652 - Added below code to empty the segment collection if connector type is bezier\n if (obj instanceof Connector && obj.type === 'Bezier' && obj.segments.length > 0\n && (this.diagram.drawingObject && this.diagram.drawingObject.type === 'Bezier')) {\n obj.segments = [];\n }\n var newObj = this.diagram.add(obj);\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n this.selectObjects([newObj]);\n if (obj && (!(canContinuousDraw(this.diagram)))) {\n this.diagram.tool &= ~DiagramTools.DrawOnce;\n this.diagram.currentDrawingObject = undefined;\n }\n };\n /**\n * addObjectToDiagram method\\\n *\n * @returns { void } addObjectToDiagram method .\\\n * @param {boolean} enable - provide the objects value.\n * @private\n */\n CommandHandler.prototype.enableServerDataBinding = function (enable) {\n this.diagram.enableServerDataBinding(enable);\n };\n /**\n * addText method\\\n *\n * @returns { void } addText method .\\\n * @param {boolean} obj - provide the objects value.\n * @param {PointModel} currentPosition - provide the objects value.\n * @private\n */\n CommandHandler.prototype.addText = function (obj, currentPosition) {\n var annotation = this.diagram.findElementUnderMouse(obj, currentPosition, this.diagram);\n this.diagram.startTextEdit(obj, annotation instanceof TextElement ? (annotation.id).split('_')[1] : undefined);\n };\n /**\n * isUserHandle method\\\n *\n * @returns { boolean } isUserHandle method .\\\n * @param {PointModel} position - provide the objects value.\n * @private\n */\n CommandHandler.prototype.isUserHandle = function (position) {\n var handle = this.diagram.selectedItems;\n if (handle.wrapper && canShowCorner(handle.constraints, 'UserHandle')) {\n for (var _i = 0, _a = handle.userHandles; _i < _a.length; _i++) {\n var obj = _a[_i];\n if (obj.visible) {\n var paddedBounds = getUserHandlePosition(handle, obj, this.diagram.scroller.transform);\n if (contains(position, paddedBounds, obj.size / (2 * this.diagram.scroller.transform.scale))) {\n return true;\n }\n }\n }\n }\n return false;\n };\n /**\n * selectObjects method\\\n *\n * @returns { Promise } selectObjects method .\\\n * @param {(NodeModel | ConnectorModel)[]} obj - provide the objects value.\n * @param {boolean} multipleSelection - provide the objects value.\n * @param {(NodeModel | ConnectorModel)[]} oldValue - provide the objects value.\n * @private\n */\n CommandHandler.prototype.selectObjects = function (obj, multipleSelection, oldValue) {\n return __awaiter$1(this, void 0, void 0, function () {\n var arg, swimlaneNode, laneId, j, i, parentId, select, oldSelectedItems, canDoMultipleSelection, canDoSingleSelection, i, newObj, i_1, parentNode;\n return __generator$1(this, function (_a) {\n arg = {\n oldValue: oldValue ? oldValue : this.getSelectedObject(),\n newValue: obj, cause: this.diagram.diagramActions,\n state: 'Changing', type: 'Addition', cancel: false\n };\n // EJ2-57157 - Added to consider the lane header at selection change when selecting a lane.\n if (obj.length > 0 && (obj[0] && obj[0].isLane)) {\n swimlaneNode = this.diagram.getObject(obj[0].parentId);\n obj[0].shape.header = [];\n laneId = '';\n for (j = 0; j < obj.length; j++) {\n for (i = 0; i < swimlaneNode.shape.lanes.length; i++) {\n parentId = obj[0].id.split(obj[0].parentId);\n laneId = parentId[1].slice(0, -1);\n if (laneId === swimlaneNode.shape.lanes[parseInt(i.toString(), 10)].id) {\n obj[0].shape.header.push(swimlaneNode.shape.lanes[parseInt(i.toString(), 10)].header);\n }\n }\n }\n }\n this.diagram.enableServerDataBinding(false);\n select = true;\n if (!isBlazor()) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n else {\n this.oldSelectedObjects = cloneSelectedObjects(this.diagram);\n }\n oldSelectedItems = (this.diagram.selectedItems.nodes.concat(this.diagram.selectedItems.connectors));\n canDoMultipleSelection = canMultiSelect(this.diagram);\n canDoSingleSelection = canSingleSelect(this.diagram);\n if (canDoSingleSelection || canDoMultipleSelection) {\n if (!canDoMultipleSelection && ((obj.length > 1) || (multipleSelection && obj.length === 1))) {\n if (obj.length === 1) {\n this.clearSelection();\n }\n else {\n return [2 /*return*/];\n }\n }\n if (!(canDoSingleSelection || canDoMultipleSelection) && obj.length === 1\n && (!multipleSelection || !hasSelection(this.diagram))) {\n this.clearSelection();\n return [2 /*return*/];\n }\n }\n if (!arg.cancel) {\n for (i = 0; i < obj.length; i++) {\n newObj = obj[parseInt(i.toString(), 10)];\n if (newObj) {\n select = true;\n if (!hasSelection(this.diagram)) {\n this.select(newObj, i > 0 || multipleSelection, true);\n }\n else {\n if ((i > 0 || multipleSelection) && newObj.children && !newObj.parentId) {\n for (i_1 = 0; i_1 < this.diagram.selectedItems.nodes.length; i_1++) {\n parentNode = this.diagram.nameTable[this.diagram.selectedItems.nodes[parseInt(i_1.toString(), 10)].parentId];\n if (parentNode) {\n parentNode = this.findParent(parentNode);\n if (parentNode) {\n if (newObj.id === parentNode.id) {\n this.selectGroup(newObj);\n }\n }\n }\n }\n }\n this.selectProcesses(newObj);\n select = this.selectBpmnSubProcesses(newObj);\n if (select) {\n this.select(newObj, i > 0 || multipleSelection, true);\n }\n }\n }\n }\n if (oldValue === undefined) {\n oldValue = oldSelectedItems;\n }\n arg = {\n oldValue: oldValue ? oldValue : [],\n newValue: this.getSelectedObject(),\n cause: this.diagram.diagramActions, state: 'Changed', type: 'Addition', cancel: false\n };\n this.diagram.renderSelector(multipleSelection || (obj && obj.length > 1));\n // this.updateBlazorSelectorModel(oldValue);\n if (!isBlazor()) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n this.diagram.enableServerDataBinding(true);\n }\n return [2 /*return*/];\n });\n });\n };\n // /**\n // * updateBlazorSelector method\\\n // *\n // * @returns { void } updateBlazorSelector method .\\\n // * @private\n // */\n // public updateBlazorSelector(): void {\n // //remove blazor code\n // }\n /**\n * findParent method\\\n *\n * @returns { Node } findParent method .\\\n * @param {Node} node - provide the objects value.\n * @private\n */\n CommandHandler.prototype.findParent = function (node) {\n if (node.parentId) {\n node = this.diagram.nameTable[node.parentId];\n this.findParent(node);\n }\n return node;\n };\n CommandHandler.prototype.selectProcesses = function (newObj) {\n if (this.hasProcesses(newObj)) {\n var processes = (newObj).shape.activity.subProcess.processes;\n for (var i = 0; i < processes.length; i++) {\n var innerChild = this.diagram.nameTable[processes[parseInt(i.toString(), 10)]];\n if (this.hasProcesses(innerChild)) {\n this.selectObjects([innerChild], true);\n }\n this.unSelect(innerChild);\n }\n }\n };\n CommandHandler.prototype.selectGroup = function (newObj) {\n for (var j = 0; j < newObj.children.length; j++) {\n var innerChild = this.diagram.nameTable[newObj.children[parseInt(j.toString(), 10)]];\n if (innerChild.children) {\n this.selectGroup(innerChild);\n }\n this.unSelect(this.diagram.nameTable[newObj.children[parseInt(j.toString(), 10)]]);\n }\n };\n CommandHandler.prototype.selectBpmnSubProcesses = function (node) {\n var select = true;\n var parent;\n if (node.processId) {\n if (isSelected(this.diagram, this.diagram.nameTable[node.processId])) {\n select = false;\n }\n else {\n select = this.selectBpmnSubProcesses(this.diagram.nameTable[node.processId]);\n }\n }\n else if (node instanceof Connector) {\n if (node.sourceID && this.diagram.nameTable[node.sourceID] &&\n this.diagram.nameTable[node.sourceID].processId) {\n parent = this.diagram.nameTable[node.sourceID].processId;\n }\n if (node.targetID && this.diagram.nameTable[node.targetID] &&\n this.diagram.nameTable[node.targetID].processId) {\n parent = this.diagram.nameTable[node.targetID].processId;\n }\n if (parent) {\n if (isSelected(this.diagram, this.diagram.nameTable[\"\" + parent])) {\n return false;\n }\n else {\n select = this.selectBpmnSubProcesses(this.diagram.nameTable[\"\" + parent]);\n }\n }\n }\n else if (node.parentId && this.diagram.nameTable[node.parentId] &&\n this.diagram.nameTable[node.parentId].shape.type === 'UmlClassifier') {\n if (isSelected(this.diagram, this.diagram.nameTable[node.parentId])) {\n select = false;\n }\n }\n return select;\n };\n CommandHandler.prototype.hasProcesses = function (node) {\n if (node) {\n if ((node.shape.type === 'Bpmn') && node.shape.activity &&\n node.shape.activity.subProcess.processes &&\n node.shape.activity.subProcess.processes.length > 0) {\n return true;\n }\n }\n return false;\n };\n /**\n * select method\\\n *\n * @returns { void } select method .\\\n * @param {NodeModel | ConnectorModel} obj - provide the objects value.\n * @param {boolean} multipleSelection - provide the objects value.\n * @param {boolean} preventUpdate - provide the objects value.\n * @private\n */\n CommandHandler.prototype.select = function (obj, multipleSelection, preventUpdate) {\n var hasLayer = this.getObjectLayer(obj.id);\n if ((canSelect(obj) && !(obj instanceof Selector) && !isSelected(this.diagram, obj))\n && (hasLayer && !hasLayer.lock && hasLayer.visible) && obj.wrapper.visible) {\n multipleSelection = hasSelection(this.diagram) ? multipleSelection : false;\n if (!multipleSelection) {\n this.clearSelection();\n }\n this.diagram.enableServerDataBinding(false);\n var selectorModel = this.diagram.selectedItems;\n var convert = obj;\n if (convert instanceof Node) {\n if (obj.isHeader) {\n var node = this.diagram.nameTable[obj.parentId];\n selectorModel.nodes.push(node);\n }\n else {\n selectorModel.nodes.push(obj);\n }\n }\n else {\n selectorModel.connectors.push(obj);\n }\n // EJ2-56919 - Push the newly selected objects in selectedObjects collection\n selectorModel.selectedObjects.push(obj);\n if (!multipleSelection) {\n selectorModel.init(this.diagram);\n if (selectorModel.nodes.length === 1 && selectorModel.connectors.length === 0) {\n var wrapper = gridSelection(this.diagram, selectorModel);\n if (wrapper) {\n selectorModel.wrapper.children[0] = wrapper;\n }\n selectorModel.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.pivot = selectorModel.nodes[0].pivot;\n }\n }\n else {\n selectorModel.wrapper.rotateAngle = selectorModel.rotateAngle = 0;\n selectorModel.wrapper.children.push(obj.wrapper);\n }\n if (!preventUpdate) {\n this.diagram.renderSelector(multipleSelection);\n }\n this.diagram.enableServerDataBinding(true);\n }\n };\n // private getObjectCollectionId(isNode: boolean, clearSelection?: boolean): string[] {\n // const id: string[] = [];\n // let i: number = 0;\n // const selectedObject: (NodeModel | ConnectorModel)[] = isNode ? this.diagram.selectedItems.nodes\n // : this.diagram.selectedItems.connectors;\n // while (!clearSelection && i < selectedObject.length) {\n // id[parseInt(i.toString(), 10)] = selectedObject[parseInt(i.toString(), 10)].id;\n // i++;\n // }\n // return id;\n // }\n // private updateBlazorSelectorModel(oldItemsCollection: (NodeModel | ConnectorModel)[], clearSelection?: boolean): void {\n // remove blazor code\n // }\n /**\n * labelSelect method\\\n *\n * @returns { void } labelSelect method .\\\n * @param {NodeModel | ConnectorModel} obj - provide the objects value.\n * @param {DiagramElement} textWrapper - provide the objects value.\n * @private\n */\n CommandHandler.prototype.labelSelect = function (obj, textWrapper) {\n this.oldSelectedObjects = cloneSelectedObjects(this.diagram);\n var selectorModel = (this.diagram.selectedItems);\n var isEnableServerDatabind = this.diagram.allowServerDataBinding;\n this.diagram.allowServerDataBinding = false;\n selectorModel.nodes = selectorModel.connectors = [];\n this.diagram.allowServerDataBinding = isEnableServerDatabind;\n if (obj instanceof Node) {\n selectorModel.nodes[0] = obj;\n }\n else {\n selectorModel.connectors[0] = obj;\n }\n selectorModel.annotation = (this.findTarget(textWrapper, obj));\n selectorModel.init(this.diagram);\n this.diagram.renderSelector(false);\n };\n /**\n * unSelect method\\\n *\n * @returns { void } unSelect method .\\\n * @param {NodeModel | ConnectorModel} obj - provide the objects value.\n * @private\n */\n CommandHandler.prototype.unSelect = function (obj) {\n var items = (this.diagram.selectedItems.nodes.concat(this.diagram.selectedItems.connectors));\n var selectedObjects = items.filter(function (items) {\n return items.id !== obj.id;\n });\n var arg = {\n oldValue: items, newValue: selectedObjects, cause: this.diagram.diagramActions,\n state: 'Changing', type: 'Removal', cancel: false\n };\n if (!this.diagram.currentSymbol) {\n if (!isBlazor()) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n }\n if (isSelected(this.diagram, obj)) {\n var selectormodel = this.diagram.selectedItems;\n var index = void 0;\n if (obj instanceof Node) {\n index = selectormodel.nodes.indexOf(obj, 0);\n selectormodel.nodes.splice(index, 1);\n }\n else {\n index = selectormodel.connectors.indexOf(obj, 0);\n selectormodel.connectors.splice(index, 1);\n }\n index = selectormodel.selectedObjects.indexOf(obj, 0);\n selectormodel.selectedObjects.splice(index, 1);\n arg = {\n oldValue: items, newValue: selectedObjects, cause: this.diagram.diagramActions,\n state: 'Changed', type: 'Removal', cancel: false\n };\n // this.updateBlazorSelectorModel(objArray);\n arg = {\n oldValue: cloneBlazorObject(items), newValue: selectedObjects, cause: this.diagram.diagramActions,\n state: 'Changed', type: 'Removal', cancel: arg.cancel\n };\n if (!arg.cancel) {\n index = selectormodel.wrapper.children.indexOf(obj.wrapper, 0);\n selectormodel.wrapper.children.splice(index, 1);\n this.diagram.updateSelector();\n if (!this.diagram.currentSymbol) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n }\n }\n };\n /**\n * getChildElements method\\\n *\n * @returns { string[] } getChildElements method .\\\n * @param {DiagramElement[]} child - provide the objects value.\n * @private\n */\n // public getChildElements(child: DiagramElement[]): string[] {\n // const children: string[] = [];\n // for (let i: number = 0; i < child.length; i++) {\n // const childNode: DiagramElement = child[parseInt(i.toString(), 10)];\n // if ((childNode as Container).children && (childNode as Container).children.length > 0) {\n // // children.concat(this.getChildElements((childNode as Container).children));\n // } else {\n // children.push(childNode.id);\n // if (childNode instanceof TextElement) {\n // children.push(childNode.id + '_text');\n // }\n // }\n // }\n // return children;\n // }\n /**\n * moveSvgNode method\\\n *\n * @returns { void } moveSvgNode method .\\\n * @param {string} nodeId - provide the objects value.\n * @param {string} targetID - provide the objects value.\n * @private\n */\n CommandHandler.prototype.moveSvgNode = function (nodeId, targetID) {\n //Bug 921994: Z-index order changes are not reflected at the UI level with Undo Redo commands.\n var node = this.diagram.nameTable[\"\" + targetID];\n if (node.shape.type === 'Native' || node.shape.type === 'HTML') {\n this.updateNativeNodeIndex(nodeId, targetID);\n }\n else {\n var diagramDiv = getDiagramElement(targetID + '_groupElement', this.diagram.element.id);\n var backNode = getDiagramElement(nodeId + '_groupElement', this.diagram.element.id);\n diagramDiv.parentNode.insertBefore(backNode, diagramDiv);\n }\n };\n CommandHandler.prototype.moveAfterSvgNode = function (nodeId, targetID) {\n //Bug 921994: Z-index order changes are not reflected at the UI level with Undo Redo commands.\n var node = this.diagram.nameTable[\"\" + targetID];\n if (node && (node.shape.type === 'HTML' || node.shape.type === 'Native')) {\n for (var i = 0; i < this.diagram.views.length; i++) {\n var id = node.shape.type === 'HTML' ? '_html_element' : '_content_groupElement';\n var backNode = getDiagramElement(nodeId + id, this.diagram.views[parseInt(i.toString(), 10)]);\n var diagramDiv = targetID ? getDiagramElement(targetID + id, this.diagram.views[parseInt(i.toString(), 10)])\n : backNode.parentElement.firstChild;\n if (backNode && diagramDiv) {\n if (backNode.parentNode.id === diagramDiv.parentNode.id) {\n diagramDiv.insertAdjacentElement('afterend', backNode);\n }\n }\n }\n }\n else {\n var diagramDiv = getDiagramElement(targetID + '_groupElement', this.diagram.element.id);\n var backNode = getDiagramElement(nodeId + '_groupElement', this.diagram.element.id);\n diagramDiv.insertAdjacentElement('afterend', backNode);\n }\n };\n /**\n * sendLayerBackward method\\\n *\n * @returns { void } sendLayerBackward method .\\\n * @param {string} layerName - provide the objects value.\n * @private\n */\n CommandHandler.prototype.sendLayerBackward = function (layerName) {\n var layer = this.getLayer(layerName);\n if (layer && layer.zIndex !== 0) {\n var index = layer.zIndex;\n if (this.diagram.mode === 'SVG') {\n var currentLayerObject = layer.objects;\n var targetObject = this.getLayer(this.diagram.layerZIndexTable[index - 1]).objects[0];\n if (targetObject) {\n for (var _i = 0, currentLayerObject_1 = currentLayerObject; _i < currentLayerObject_1.length; _i++) {\n var obj = currentLayerObject_1[_i];\n this.moveSvgNode(obj, targetObject);\n }\n }\n }\n var targetLayer = this.getLayer(this.diagram.layerZIndexTable[index - 1]);\n targetLayer.zIndex = targetLayer.zIndex + 1;\n layer.zIndex = layer.zIndex - 1;\n var temp = this.diagram.layerZIndexTable[parseInt(index.toString(), 10)];\n this.diagram.layerZIndexTable[parseInt(index.toString(), 10)] = this.diagram.layerZIndexTable[index - 1];\n this.diagram.layerZIndexTable[index - 1] = temp;\n if (this.diagram.mode === 'Canvas') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /**\n * bringLayerForward method\\\n *\n * @returns { void } bringLayerForward method .\\\n * @param {string} layerName - provide the objects value.\n * @private\n */\n CommandHandler.prototype.bringLayerForward = function (layerName) {\n var layer = this.getLayer(layerName);\n if (layer && layer.zIndex < this.diagram.layers.length - 1) {\n var index = layer.zIndex;\n var targetLayer = this.getLayer(this.diagram.layerZIndexTable[index + 1]);\n if (this.diagram.mode === 'SVG') {\n var currentLayerObject = layer.objects[0];\n var targetLayerObjects = targetLayer.objects;\n for (var _i = 0, targetLayerObjects_1 = targetLayerObjects; _i < targetLayerObjects_1.length; _i++) {\n var obj = targetLayerObjects_1[_i];\n if (obj) {\n this.moveSvgNode(obj, currentLayerObject);\n }\n }\n }\n targetLayer.zIndex = targetLayer.zIndex - 1;\n layer.zIndex = layer.zIndex + 1;\n var temp = this.diagram.layerZIndexTable[parseInt(index.toString(), 10)];\n this.diagram.layerZIndexTable[parseInt(index.toString(), 10)] = this.diagram.layerZIndexTable[index + 1];\n this.diagram.layerZIndexTable[index + 1] = temp;\n if (this.diagram.mode === 'Canvas') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /**\n * sendToBack method\\\n *\n * @returns { void } sendToBack method .\\\n * @param {NodeModel | ConnectorModel} object - provide the objects value.\n * @private\n */\n CommandHandler.prototype.sendToBack = function (object) {\n this.diagram.protectPropertyChange(true);\n if (hasSelection(this.diagram) || object) {\n // EJ2-57772 - Added the below code to iterate all the selected nodes / connectors in the diagram and\n // perform send to back operation\n var selectedItems = this.diagram.selectedItems;\n var objects = [];\n if (object && object.id) {\n objects.push(object);\n }\n else {\n objects = objects.concat(selectedItems.nodes);\n objects = objects.concat(selectedItems.connectors);\n }\n var objectId = (object && object.id);\n for (var i = 0; i < objects.length; i++) {\n var clonedObject = cloneObject(objects[parseInt(i.toString(), 10)]);\n objectId = objects[parseInt(i.toString(), 10)].id;\n var index = this.diagram.nameTable[\"\" + objectId].zIndex;\n var layerNum = this.diagram.layers.indexOf(this.getObjectLayer(objectId));\n var zIndexTable = this.diagram.layers[parseInt(layerNum.toString(), 10)].zIndexTable;\n var layerObjects = this.diagram.layers[parseInt(layerNum.toString(), 10)].objects;\n var minZindex = null;\n var targetId = '';\n for (var i_2 = 0; i_2 < layerObjects.length; i_2++) {\n var obj = this.diagram.nameTable[layerObjects[parseInt(i_2.toString(), 10)]];\n if (minZindex === null || obj.zIndex < minZindex) {\n minZindex = obj.zIndex;\n targetId = obj.id;\n }\n }\n var tempTable = JSON.parse(JSON.stringify(zIndexTable));\n var undoObject = cloneObject(this.diagram.selectedItems);\n var tempIndex = 0;\n //Checks whether the selected node is the only node in the node array.\n //Checks whether it is not a group and the nodes behind it are not it’s children.\n if (this.diagram.nodes.length !== 1 && (this.diagram.nameTable[\"\" + objectId].children === undefined ||\n this.checkObjectBehind(objectId, zIndexTable, index))) {\n var obj = this.diagram.nameTable[\"\" + objectId];\n if (obj.zIndex > minZindex && obj.shape.type !== 'SwimLane') {\n var clonedNode = cloneObject(obj);\n obj.zIndex = minZindex - ((objects.indexOf(obj) !== -1 ? objects.indexOf(obj) : 0) + 1);\n if (obj.children) {\n minZindex = this.findLowestZIndex(obj, layerObjects) || minZindex;\n }\n this.triggerOrderCommand(clonedNode, obj, obj);\n if (obj.children) {\n this.updateGroupZindex(obj, 'SendToBack', minZindex);\n }\n }\n else if (obj.shape.type === 'SwimLane') {\n tempIndex = this.swapZIndexObjects(index, zIndexTable, objectId, tempTable);\n }\n // for (let i: number = index; i > 0; i--) {\n // if (zIndexTable[parseInt(i.toString(), 10)]) {\n // //When there are empty records in the zindex table\n // if (!zIndexTable[i - 1]) {\n // zIndexTable[i - 1] = zIndexTable[parseInt(i.toString(), 10)];\n // this.diagram.nameTable[zIndexTable[i - 1]].zIndex = i;\n // delete zIndexTable[parseInt(i.toString(), 10)];\n // } else {\n // //bringing the objects forward\n // let clonedNode = cloneObject( this.diagram.nameTable[zIndexTable[parseInt((i-1).toString(), 10)]]);\n // zIndexTable[parseInt(i.toString(), 10)] = zIndexTable[i - 1];\n // this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]].zIndex = i;\n // this.triggerOrderCommand(clonedNode, this.diagram.nameTable[zIndexTable[parseInt((i-1).toString(), 10)]], this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]]);\n // }\n // }\n // }\n // for (let i: number = index; i > 0; i--) {\n // if (zIndexTable[parseInt(i.toString(), 10)]) {\n // this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]].zIndex = i;\n // }\n // }\n // if (obj.shape.type !== 'SwimLane') {\n // zIndexTable[0] = this.diagram.nameTable[`${objectId}`].id;\n // this.diagram.nameTable[`${objectId}`].zIndex = 0;\n // this.triggerOrderCommand(clonedObject, objects[parseInt(i.toString(), 10)], objects[parseInt(i.toString(), 10)]);\n // } else {\n // tempIndex = this.swapZIndexObjects(index, zIndexTable, objectId, tempTable);\n // }\n if (this.diagram.mode === 'SVG') {\n var obj_1 = this.diagram.nameTable[\"\" + objectId];\n var i_3 = obj_1.shape.type !== 'SwimLane' ? minZindex : tempIndex;\n // if (i !== tempIndex) {\n // i = (obj.children && obj.children.length > 0) ? index : 1;\n // }\n var target = zIndexTable[parseInt(i_3.toString(), 10)];\n // EJ2-49326 - (CR issue fix) An exception raised when send the swimlane back to the normal node.\n while (!target && i_3 < index) {\n target = zIndexTable[++i_3];\n }\n // EJ2-46656 - CR issue fix\n target = this.resetTargetNode(objectId, target, i_3, zIndexTable);\n //EJ2-69654 - Send to back command not working when there is single node in layer\n if (target) {\n target = this.diagram.nameTable[\"\" + target].parentId ? this.checkParentExist(target) : target;\n this.moveSvgNode(objectId, target);\n }\n this.updateNativeNodeIndex(objectId);\n this.updateLayerZindexTable(layerNum);\n }\n else {\n this.diagram.refreshCanvasLayers();\n this.updateLayerZindexTable(layerNum);\n }\n var redoObject = cloneObject(this.diagram.selectedItems);\n var entry = { type: 'SendToBack', category: 'Internal', undoObject: undoObject, redoObject: redoObject };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n }\n }\n }\n this.diagram.protectPropertyChange(false);\n };\n CommandHandler.prototype.updateGroupZindex = function (parent, command, index) {\n if (command === 'SendToBack' || command === 'SendBackward') {\n var parentZindex = parent.zIndex;\n for (var i = 0; i < parent.children.length; i++) {\n var child = this.diagram.nameTable[parent.children[parseInt(i.toString(), 10)]];\n if (child.children) {\n child.zIndex = parentZindex - (i + 1);\n this.updateGroupZindex(child, command, child.zIndex);\n }\n else {\n child.zIndex = parentZindex - (i + 1);\n }\n }\n }\n else if (command === 'BringToFront' || command === 'BringForward') {\n for (var i = 0; i < parent.children.length; i++) {\n var child = this.diagram.nameTable[parent.children[parseInt(i.toString(), 10)]];\n if (child.children) {\n child.zIndex = index + (i + 1);\n this.updateGroupZindex(child, command, child.zIndex);\n }\n else {\n child.zIndex = index + (i + 1);\n }\n }\n }\n };\n CommandHandler.prototype.updateLayerZindexTable = function (layerIndex) {\n var layer = this.diagram.layers[parseInt(layerIndex.toString(), 10)];\n layer.zIndexTable = {};\n for (var i = 0; i < layer.objects.length; i++) {\n var obj = this.diagram.nameTable[layer.objects[parseInt(i.toString(), 10)]];\n layer.zIndexTable[obj.zIndex] = obj.id;\n }\n };\n CommandHandler.prototype.swapZIndexObjects = function (index, zIndexTable, objectId, tempTable) {\n var tempIndex = 0;\n var childCount = 0;\n var childIndex = -1;\n var j = 1;\n // Get the swimlane's Children count\n for (var i = 0; i <= index; i++) {\n if (zIndexTable[parseInt(i.toString(), 10)]\n && this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]].parentId === objectId) {\n // Get the swimlane's first children position from z index table\n if (childIndex === -1) {\n childIndex = i;\n }\n childCount++;\n }\n }\n // Swap the swimlane children to the top of the z index table\n for (var i = 0; i <= index; i++) {\n if (zIndexTable[parseInt(i.toString(), 10)] && j <= childCount) {\n while (!zIndexTable[parseInt(childIndex.toString(), 10)]) {\n childIndex++;\n }\n zIndexTable[parseInt(i.toString(), 10)] = zIndexTable[parseInt(childIndex.toString(), 10)];\n this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]].zIndex = i;\n childIndex++;\n j++;\n }\n }\n var k = 0;\n // Get the Z index from ZindexTable in the child's count position. In that position we want to put the swimlane\n for (var i = 0; i < childCount; i++) {\n while (!zIndexTable[parseInt(k.toString(), 10)]) {\n k++;\n }\n tempIndex = this.diagram.nameTable[zIndexTable[parseInt(k.toString(), 10)]].zIndex;\n k++;\n }\n tempIndex = tempIndex + 1;\n // Check if there is a object in the z index table or not\n while (!zIndexTable[parseInt(tempIndex.toString(), 10)]) {\n ++tempIndex;\n }\n k = 0;\n // Place the swimlane at the next position of the swimlane's last children.\n zIndexTable[parseInt(tempIndex.toString(), 10)] = this.diagram.nameTable[\"\" + objectId].id;\n this.diagram.nameTable[\"\" + objectId].zIndex = tempIndex;\n tempIndex = tempIndex + 1;\n // Now swap the intersect nodes at next position of the swimlane.\n for (var i = tempIndex; i <= index; i++) {\n if (zIndexTable[parseInt(i.toString(), 10)]) {\n while (!tempTable[parseInt(k.toString(), 10)]) {\n k++;\n }\n zIndexTable[parseInt(i.toString(), 10)] = tempTable[parseInt(k.toString(), 10)];\n this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]].zIndex = i;\n k++;\n }\n }\n return tempIndex;\n };\n CommandHandler.prototype.resetTargetNode = function (objectId, target, i, zIndexTable) {\n if (this.diagram.nameTable[\"\" + objectId].shape.type === 'SwimLane'\n && this.diagram.nameTable[\"\" + target].parentId !== undefined && this.diagram.nameTable[\"\" + target].parentId !== '' && this.diagram.nameTable[this.diagram.nameTable[\"\" + target].parentId].isLane) {\n i = i + 1;\n if (zIndexTable[parseInt(i.toString(), 10)]) {\n target = zIndexTable[parseInt(i.toString(), 10)];\n return target = this.resetTargetNode(objectId, target, i, zIndexTable);\n }\n else {\n return target;\n }\n }\n else {\n return target;\n }\n };\n // private getZIndexObjects(): void {\n // // const element: (NodeModel | ConnectorModel)[] = [];\n // // let i: number; let j: number;\n // // for (i = 0; i < this.diagram.nodes.length; i++) {\n // // element.push(this.diagram.nodes[parseInt(i.toString(), 10)]);\n // // }\n // // for (j = 0; j < this.diagram.connectors.length; j++) {\n // // element.push(this.diagram.connectors[parseInt(j.toString(), 10)]);\n // // }\n // // this.updateBlazorZIndex(element);\n // }\n // private updateBlazorZIndex(element: (NodeModel | ConnectorModel)[]): void {\n // // const blazorInterop: string = 'sfBlazor';\n // // const blazor: string = 'Blazor';\n // // let diagramobject: object = {};\n // // const nodeObject: NodeModel[] = [];\n // // const connectorObject: ConnectorModel[] = [];\n // // let k: number;\n // // if (element && element.length > 0) {\n // // for (k = 0; k < element.length; k++) {\n // // const elementObject: (NodeModel | ConnectorModel) = element[parseInt(k.toString(), 10)];\n // // if (elementObject instanceof Node) {\n // // nodeObject.push(this.getBlazorObject(elementObject));\n // // } else if (elementObject instanceof Connector) {\n // // connectorObject.push(this.getBlazorObject(elementObject));\n // // }\n // // }\n // // }\n // // diagramobject = {\n // // nodes: nodeObject,\n // // connectors: connectorObject\n // // };\n // // if (window && window[`${blazor}`]) {\n // // const obj: object = { 'methodName': 'UpdateBlazorProperties', 'diagramobj': diagramobject };\n // // window[`${blazorInterop}`].updateBlazorProperties(obj, this.diagram);\n // // }\n // }\n // private getBlazorObject(objectName: (NodeModel | ConnectorModel)): any {\n // // const object: object = {\n // // sfIndex: getIndex(this.diagram, objectName.id),\n // // zIndex: objectName.zIndex\n // // };\n // // return object;\n // }\n //Checks whether the target is a child node.\n CommandHandler.prototype.checkParentExist = function (target) {\n var objBehind = target;\n while (this.diagram.nameTable[\"\" + objBehind].parentId) {\n objBehind = this.diagram.nameTable[\"\" + objBehind].parentId;\n }\n return objBehind;\n };\n //Checks whether the selected node is not a parent of another node.\n CommandHandler.prototype.checkObjectBehind = function (objectId, zIndexTable, index) {\n // for (let i: number = 0; i < index; i++) {\n // const z: string = zIndexTable[parseInt(i.toString(), 10)];\n // if (this.diagram.nameTable[`${z}`] && objectId !== this.diagram.nameTable[`${z}`].parentId) {\n // return true;\n // }\n // }\n return true;\n };\n /**\n * bringToFront method\\\n *\n * @returns { void } bringToFront method .\\\n * @param {NodeModel | ConnectorModel } obj - Provide the nodeArray element .\n * @private\n */\n CommandHandler.prototype.bringToFront = function (obj) {\n this.diagram.protectPropertyChange(true);\n if (hasSelection(this.diagram) || obj) {\n // EJ2-57772 - Added the below code to iterate all the selected nodes / connectors in the diagram and\n // perform bring to front operation\n var objectName = (obj && obj.id);\n var selectedItems = this.diagram.selectedItems;\n var objects = [];\n if (obj && obj.id) {\n objects.push(obj);\n }\n else {\n objects = objects.concat(selectedItems.nodes);\n objects = objects.concat(selectedItems.connectors);\n }\n for (var i = 0; i < objects.length; i++) {\n var clonedObject = cloneObject(objects[parseInt(i.toString(), 10)]);\n objectName = objects[parseInt(i.toString(), 10)].id;\n var layerNum = this.diagram.layers.indexOf(this.getObjectLayer(objectName));\n var zIndexTable = this.diagram.layers[parseInt(layerNum.toString(), 10)].zIndexTable;\n var undoObject = cloneObject(this.diagram.selectedItems);\n var layerObjects = this.diagram.layers[parseInt(layerNum.toString(), 10)].objects;\n var maxZindex = null;\n for (var i_4 = 0; i_4 < layerObjects.length; i_4++) {\n var obj_2 = this.diagram.nameTable[layerObjects[parseInt(i_4.toString(), 10)]];\n if (maxZindex === null || obj_2.zIndex > maxZindex) {\n maxZindex = obj_2.zIndex;\n }\n }\n var tempTable = JSON.parse(JSON.stringify(zIndexTable));\n var tempIndex = 0;\n //find the maximum zIndex of the tabel\n var tabelLength = Number(Object.keys(zIndexTable).sort(function (a, b) { return Number(a) - Number(b); }).reverse()[0]);\n var index = this.diagram.nameTable[\"\" + objectName].zIndex;\n var oldzIndexTable = [];\n var length_1 = 0;\n for (var i_5 = 0; i_5 <= tabelLength; i_5++) {\n oldzIndexTable.push(zIndexTable[parseInt(i_5.toString(), 10)]);\n }\n var object = this.diagram.nameTable[\"\" + objectName];\n if (object.shape.type === 'SwimLane') {\n for (var i_6 = tabelLength; i_6 >= index; i_6--) {\n if (zIndexTable[parseInt(i_6.toString(), 10)]\n && !(this.diagram.nameTable[zIndexTable[parseInt(i_6.toString(), 10)]].parentId === objectName)) {\n length_1 = i_6;\n tabelLength = length_1;\n break;\n }\n }\n }\n var obj_3 = this.diagram.nameTable[\"\" + objectName];\n if (obj_3.zIndex < maxZindex && obj_3.shape.type !== 'SwimLane') {\n var clonedNode = cloneObject(obj_3);\n var parentZindex = 0;\n if (obj_3.children) {\n maxZindex = this.findGreatestZIndex(obj_3, layerObjects) || maxZindex;\n this.updateGroupZindex(obj_3, 'BringToFront', maxZindex);\n for (var i_7 = 0; i_7 < obj_3.children.length; i_7++) {\n var child = this.diagram.nameTable[obj_3.children[parseInt(i_7.toString(), 10)]];\n if (child.zIndex > parentZindex) {\n parentZindex = child.zIndex;\n }\n }\n }\n else {\n parentZindex = maxZindex;\n }\n obj_3.zIndex = parentZindex + ((objects.indexOf(obj_3) !== -1 ? objects.indexOf(obj_3) : 0) + 1);\n this.triggerOrderCommand(clonedNode, obj_3, obj_3);\n }\n // for (let i: number = index; i < tabelLength; i++) {\n // //When there are empty records in the zindex table\n // if (zIndexTable[parseInt(i.toString(), 10)]) {\n // if (!zIndexTable[i + 1]) {\n // zIndexTable[i + 1] = zIndexTable[parseInt(i.toString(), 10)];\n // this.diagram.nameTable[zIndexTable[i + 1]].zIndex = i;\n // delete zIndexTable[parseInt(i.toString(), 10)];\n // } else {\n // //bringing the objects backward\n // let clonedNode = cloneObject(this.diagram.nameTable[zIndexTable[parseInt((i+1).toString(), 10)]]);\n // zIndexTable[parseInt(i.toString(), 10)] = zIndexTable[i + 1];\n // this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]].zIndex = i;\n // this.triggerOrderCommand(clonedNode, this.diagram.nameTable[zIndexTable[parseInt((i+1).toString(), 10)]], this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]]);\n // }\n // }\n // }\n // for (let i: number = index; i < tabelLength; i++) {\n // if (zIndexTable[parseInt(i.toString(), 10)]) {\n // this.diagram.nameTable[zIndexTable[parseInt(i.toString(), 10)]].zIndex = i;\n // }\n // }\n // if (object.shape.type !== 'SwimLane') {\n // zIndexTable[parseInt(tabelLength.toString(), 10)] = this.diagram.nameTable[`${objectName}`].id;\n // this.diagram.nameTable[`${objectName}`].zIndex = tabelLength;\n // this.triggerOrderCommand(clonedObject, objects[parseInt(i.toString(), 10)], objects[parseInt(i.toString(), 10)]);\n // }\n else if (obj_3.shape.type === 'SwimLane') {\n var childCount = 0;\n var childIndex = -1;\n var tempIndex_1 = 0;\n var laneIndex = 0;\n var cloneTable = JSON.parse(JSON.stringify(zIndexTable));\n for (var i_8 = 0; i_8 <= index; i_8++) {\n if (zIndexTable[parseInt(i_8.toString(), 10)]\n && this.diagram.nameTable[zIndexTable[parseInt(i_8.toString(), 10)]].parentId === objectName) {\n if (childIndex === -1) {\n childIndex = i_8;\n tempIndex_1 = i_8;\n break;\n }\n }\n }\n for (var i_9 = 0; i_9 <= tabelLength; i_9++) {\n if (tempTable[parseInt(i_9.toString(), 10)] && tempTable[parseInt(i_9.toString(), 10)] !== objectName\n && this.diagram.nameTable[tempTable[parseInt(i_9.toString(), 10)]].parentId !== objectName) {\n var node = this.diagram.nameTable[tempTable[parseInt(i_9.toString(), 10)]];\n var swimlaneObject = this.diagram.nameTable[\"\" + objectName];\n if (node.zIndex >= swimlaneObject.zIndex) {\n childCount++;\n }\n }\n }\n var k = childIndex;\n for (var i_10 = 0; i_10 <= childCount; i_10++) {\n while (!zIndexTable[parseInt(k.toString(), 10)]) {\n k++;\n }\n laneIndex = this.diagram.nameTable[zIndexTable[parseInt(k.toString(), 10)]].zIndex;\n k++;\n }\n for (var i_11 = laneIndex; i_11 <= tabelLength; i_11++) {\n while (!cloneTable[parseInt(childIndex.toString(), 10)]) {\n childIndex++;\n }\n while (!zIndexTable[parseInt(i_11.toString(), 10)]) {\n i_11++;\n }\n zIndexTable[parseInt(i_11.toString(), 10)] = cloneTable[parseInt(childIndex.toString(), 10)];\n this.diagram.nameTable[zIndexTable[parseInt(i_11.toString(), 10)]].zIndex = i_11;\n childIndex++;\n }\n zIndexTable[parseInt(tabelLength.toString(), 10)] = this.diagram.nameTable[\"\" + objectName].id;\n this.diagram.nameTable[\"\" + objectName].zIndex = tabelLength;\n k = index + 1;\n var j = tempIndex_1;\n for (var i_12 = 0; i_12 < childCount; i_12++) {\n while (!tempTable[parseInt(k.toString(), 10)]) {\n k++;\n }\n while (this.diagram.nameTable[tempTable[parseInt(k.toString(), 10)]].parentId === objectName) {\n k++;\n }\n while (!zIndexTable[parseInt(j.toString(), 10)]) {\n j++;\n }\n zIndexTable[parseInt(j.toString(), 10)] = tempTable[parseInt(k.toString(), 10)];\n this.diagram.nameTable[zIndexTable[parseInt(j.toString(), 10)]].zIndex = j;\n k++;\n j++;\n }\n }\n if (this.diagram.mode === 'SVG') {\n // const diagramLayer: SVGGElement = this.diagram.diagramLayer as SVGGElement;\n // //const child: string[] = this.getChildElements(this.diagram.nameTable[objectName].wrapper.children);\n // //const targerNodes: Object = [];\n // let element: HTMLElement = getDiagramElement(objectName + '_groupElement', this.diagram.element.id);\n // const nodes: NodeModel[] = this.diagram.selectedItems.nodes;\n // if (nodes.length > 0 && (nodes[0].shape.type === 'Native' || nodes[0].shape.type === 'HTML')) {\n // element.parentNode.removeChild(element);\n // for (let j: number = 0; j < this.diagram.views.length; j++) {\n // element = getDiagramElement(\n // objectName + (nodes[0].shape.type === 'HTML' ? '_html_element' : '_content_groupElement'),\n // this.diagram.views[parseInt(j.toString(), 10)]);\n // const lastChildNode: HTMLElement = element.parentNode.lastChild as HTMLElement;\n // lastChildNode.parentNode.insertBefore(element, lastChildNode.nextSibling);\n // }\n // const htmlLayer: HTMLElement = getHTMLLayer(this.diagram.element.id);\n // this.diagram.diagramRenderer.renderElement(this.diagram.nameTable[`${objectName}`].wrapper, diagramLayer, htmlLayer);\n // } else {\n // Object.keys(zIndexTable).forEach((key: string) => {\n // const zIndexValue: string = zIndexTable[`${key}`];\n // if ((zIndexValue !== objectName) && (this.diagram.nameTable[`${zIndexValue}`].parentId) !== objectName) {\n // //EJ2-42101 - SendToBack and BringToFront not working for connector with group node\n // //Added @Dheepshiva to restrict the objects with lower zIndex\n // if (zIndexValue !== undefined &&\n // (oldzIndexTable.indexOf(objectName) < oldzIndexTable.indexOf(zIndexValue))) {\n // const objectNode: Node | Connector = this.diagram.nameTable[`${objectName}`];\n // const zIndexNode: Node | Connector = this.diagram.nameTable[`${zIndexValue}`];\n // if (objectNode.parentId === '' && zIndexNode.parentId === '' && zIndexNode.parentId === undefined\n // && objectNode.parentId !== zIndexNode.id) {\n // this.moveSvgNode(zIndexValue, objectName);\n // this.updateNativeNodeIndex(objectName);\n // } else {\n // if (this.checkGroupNode(objectName, zIndexValue, this.diagram.nameTable)) {\n // this.moveSvgNode(zIndexValue, objectName);\n // this.updateNativeNodeIndex(objectName);\n // }\n // }\n // }\n // }\n // });\n // this.updateLayerZindexTable(layerNum);\n // }\n var obj_4 = this.diagram.nameTable[\"\" + objectName];\n var i_13 = obj_4.shape.type !== 'SwimLane' ? maxZindex : tempIndex;\n // if (i !== tempIndex) {\n // i = (obj.children && obj.children.length > 0) ? index : 1;\n // }\n var target = zIndexTable[parseInt(i_13.toString(), 10)];\n // EJ2-49326 - (CR issue fix) An exception raised when send the swimlane back to the normal node.\n // while (!target && i > index) {\n // target = zIndexTable[++i];\n // }\n // EJ2-46656 - CR issue fix\n target = this.resetTargetNode(objectName, target, i_13, zIndexTable);\n //EJ2-69654 - Send to back command not working when there is single node in layer\n if (target) {\n target = this.diagram.nameTable[\"\" + target].parentId ? this.checkParentExist(target) : target;\n this.moveAfterSvgNode(objectName, target);\n }\n var diagramLayer = this.diagram.diagramLayer;\n var element = getDiagramElement(objectName + '_groupElement', this.diagram.element.id);\n var nodes = this.diagram.selectedItems.nodes;\n if (nodes.length > 0 && (nodes[0].shape.type === 'Native' || nodes[0].shape.type === 'HTML')) {\n element.parentNode.removeChild(element);\n for (var j = 0; j < this.diagram.views.length; j++) {\n element = getDiagramElement(objectName + (nodes[0].shape.type === 'HTML' ? '_html_element' : '_content_groupElement'), this.diagram.views[parseInt(j.toString(), 10)]);\n var lastChildNode = element.parentNode.lastChild;\n lastChildNode.parentNode.insertBefore(element, lastChildNode.nextSibling);\n }\n var htmlLayer = getHTMLLayer(this.diagram.element.id);\n this.diagram.diagramRenderer.renderElement(this.diagram.nameTable[\"\" + objectName].wrapper, diagramLayer, htmlLayer);\n }\n this.updateLayerZindexTable(layerNum);\n }\n else {\n this.diagram.refreshCanvasLayers();\n this.updateLayerZindexTable(layerNum);\n }\n var redoObject = cloneObject(this.diagram.selectedItems);\n var entry = { type: 'BringToFront', category: 'Internal', undoObject: undoObject, redoObject: redoObject };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n }\n }\n this.diagram.protectPropertyChange(false);\n };\n CommandHandler.prototype.findGreatestZIndex = function (parent, layerObjects) {\n var layerObj = this.diagram.nodes.filter(function (node) { return layerObjects.indexOf(node.id) !== -1; });\n // Get zIndex values of nodes excluding children of the parent\n var zIndexes = layerObj.filter(function (node) { return node.parentId === '' && node.id !== parent.id; }).map(function (node) { return node.zIndex; });\n // Sort zIndexes in descending order\n zIndexes.sort(function (a, b) { return b - a; });\n // Find the greatest zIndex excluding children\n if (zIndexes.length > 0) {\n return zIndexes[0];\n }\n return null;\n };\n CommandHandler.prototype.findLowestZIndex = function (parent, layerObjects) {\n var layerObj = this.diagram.nodes.filter(function (node) { return layerObjects.indexOf(node.id) !== -1; });\n // Get zIndex values of nodes excluding children of the parent\n var zIndexes = layerObj.filter(function (node) { return node.parentId === '' && node.id !== parent.id; }).map(function (node) { return node.zIndex; });\n // Sort zIndexes in ascending order\n zIndexes.sort(function (a, b) { return a - b; });\n // Find the lowest zIndex excluding children\n if (zIndexes.length > 0) {\n return zIndexes[0];\n }\n return null;\n };\n CommandHandler.prototype.triggerOrderCommand = function (oldObj, newObj, obj) {\n var clonedObject = cloneObject(oldObj);\n // EJ2-61653 - Added below code to get only changed values (zIndex) and passed as an argument to property change event\n var oldValue = {\n zIndex: clonedObject.zIndex\n };\n var newValue = {\n zIndex: newObj.zIndex\n };\n var arg = {\n element: obj, cause: this.diagram.diagramActions, diagramAction: this.diagram.getDiagramAction(this.diagram.diagramActions),\n oldValue: oldValue, newValue: newValue\n };\n this.diagram.triggerEvent(DiagramEvent.propertyChange, arg);\n };\n CommandHandler.prototype.checkGroupNode = function (selectedNodeName, layerObject, nameTable) {\n return nameTable[\"\" + layerObject].parentId === nameTable[\"\" + selectedNodeName].parentId;\n };\n /**\n * sortByZIndex method\\\n *\n * @returns { Object[] } sortByZIndex method .\\\n * @param { Object[] } nodeArray - Provide the nodeArray element .\n * @param { string } sortID - Provide the sortID element .\n * @private\n */\n CommandHandler.prototype.sortByZIndex = function (nodeArray, sortID, command) {\n if (command === 'BringForward') {\n var id_1 = sortID ? sortID : 'zIndex';\n nodeArray = nodeArray.sort(function (a, b) {\n return b[\"\" + id_1] - a[\"\" + id_1];\n });\n }\n else {\n var id_2 = sortID ? sortID : 'zIndex';\n nodeArray = nodeArray.sort(function (a, b) {\n return a[\"\" + id_2] - b[\"\" + id_2];\n });\n }\n return nodeArray;\n };\n /**\n * orderCommands method\\\n *\n * @returns { void } orderCommands method .\\\n * @param { boolean } isRedo - Provide the previousObject element .\n * @param { Selector } selector - Provide the previousObject element .\n * @param { EntryType } action - Provide the previousObject element .\n * @private\n */\n CommandHandler.prototype.orderCommands = function (isRedo, selector, action) {\n var _this = this;\n var selectedObject = selector.nodes;\n selectedObject = selectedObject.concat(selector.connectors);\n if (isRedo) {\n if (action === 'SendBackward') {\n for (var i = 0; i < selectedObject.length; i++) {\n this.sendBackward(selectedObject[parseInt(i.toString(), 10)]);\n }\n }\n else if (action === 'SendForward') {\n for (var i = 0; i < selectedObject.length; i++) {\n this.sendForward(selectedObject[parseInt(i.toString(), 10)]);\n }\n }\n else if (action === 'BringToFront') {\n this.bringToFront(selectedObject[0]);\n }\n else if (action === 'SendToBack') {\n this.sendToBack(selectedObject[0]);\n }\n }\n else {\n var startZIndex_1 = selectedObject[0].zIndex;\n var endZIndex = this.diagram.nameTable[selectedObject[0].id].zIndex;\n var undoObject = selectedObject[0];\n var layer = this.getObjectLayer(undoObject.id);\n var layerIndex = layer.zIndex;\n var zIndexTable = layer.zIndexTable;\n if (action === 'SendBackward' || action === 'SendForward') {\n for (var i = 0; i < selectedObject.length; i++) {\n var undoObject_1 = selectedObject[parseInt(i.toString(), 10)];\n var layer_2 = this.diagram.layers.indexOf(this.getObjectLayer(undoObject_1.id));\n var node = this.diagram.nameTable[selectedObject[parseInt(i.toString(), 10)].id];\n node.zIndex = undoObject_1.zIndex;\n this.diagram.layers[parseInt(layer_2.toString(), 10)].zIndexTable[undoObject_1.zIndex] = undoObject_1.id;\n }\n }\n else if (action === 'BringToFront') {\n if (selectedObject[0].shape.type === 'SwimLane') {\n this.sendToBack(selectedObject[0]);\n }\n // else {\n // const k: number = 1;\n // for (let j: number = endZIndex; j > startZIndex; j--) {\n // if (zIndexTable[parseInt(j.toString(), 10)]) {\n // if (!zIndexTable[j - k]) {\n // zIndexTable[j - k] = zIndexTable[parseInt(j.toString(), 10)];\n // this.diagram.nameTable[zIndexTable[j - k]].zIndex = j;\n // delete zIndexTable[parseInt(j.toString(), 10)];\n // } else {\n // zIndexTable[parseInt(j.toString(), 10)] = zIndexTable[j - k];\n // this.diagram.nameTable[zIndexTable[parseInt(j.toString(), 10)]].zIndex = j;\n // }\n // }\n // }\n // }\n }\n else if (action === 'SendToBack') {\n if (selectedObject[0].shape.type === 'SwimLane') {\n this.bringToFront(selectedObject[0]);\n }\n // else {\n // for (let j: number = endZIndex; j < startZIndex; j++) {\n // if (zIndexTable[parseInt(j.toString(), 10)]) {\n // if (!zIndexTable[j + 1]) {\n // zIndexTable[j + 1] = zIndexTable[parseInt(j.toString(), 10)];\n // this.diagram.nameTable[zIndexTable[j + 1]].zIndex = j;\n // delete zIndexTable[parseInt(j.toString(), 10)];\n // } else {\n // zIndexTable[parseInt(j.toString(), 10)] = zIndexTable[j + 1];\n // this.diagram.nameTable[zIndexTable[parseInt(j.toString(), 10)]].zIndex = j;\n // }\n // }\n // }\n // }\n }\n if (action === 'BringToFront' || action === 'SendToBack') {\n var node = this.diagram.nameTable[selectedObject[0].id];\n node.zIndex = undoObject.zIndex;\n this.diagram.layers[parseInt(layerIndex.toString(), 10)].zIndexTable[undoObject.zIndex] = undoObject.id;\n this.updateLayerZindexTable(layer.zIndex);\n }\n if (this.diagram.mode === 'SVG') {\n if (action === 'SendBackward') {\n //To iterate all the elements in diagram to change the zindex\n for (var i = 0; i < selectedObject.length; i++) {\n this.moveSBObject(selectedObject[parseInt(i.toString(), 10)].id);\n }\n }\n else if (action === 'SendForward') {\n //To iterate all the elements in diagram to change the zindex\n for (var i = 0; i < selectedObject.length; i++) {\n this.moveFBObject(selectedObject[parseInt(i.toString(), 10)].id);\n }\n }\n // else if (action === 'BringToFront') {\n // if (selectedObject[0].shape.type !== 'SwimLane') {\n // this.moveObject(selectedObject[0].id, zIndexTable[selectedObject[0].zIndex + 1]);\n // }\n // }\n else if (action === 'SendToBack' || action === 'BringToFront') {\n if (selectedObject[0].shape.type !== 'SwimLane') {\n // const layer: LayerModel = this.getObjectLayer(selectedObject[0].id);\n // for (let i: number = 0; i <= selectedObject[0].zIndex; i++) {\n // if (layer.objects[parseInt(i.toString(), 10)] !== selectedObject[0].id) {\n // this.moveSvgNode(layer.objects[parseInt(i.toString(), 10)], selectedObject[0].id);\n // this.updateNativeNodeIndex(selectedObject[0].id);\n // }\n // }\n var zIndexArray = layer.objects.map(function (x) { return _this.diagram.nameTable[\"\" + x].zIndex; });\n var filteredZIndexArray = zIndexArray.filter(function (zIndex) { return zIndex > startZIndex_1; });\n var filteredZIndexArray2 = zIndexArray.filter(function (zIndex) { return zIndex < startZIndex_1; });\n var nextLowestZindex = filteredZIndexArray2.length > 0 ? Math.max.apply(Math, filteredZIndexArray2) : startZIndex_1;\n var nextGreatestZIndex = filteredZIndexArray.length > 0 ? Math.min.apply(Math, filteredZIndexArray) : startZIndex_1;\n if (startZIndex_1 !== nextGreatestZIndex) {\n var first = layer.zIndexTable[parseInt(nextGreatestZIndex.toString(), 10)];\n var second = layer.zIndexTable[parseInt(startZIndex_1.toString(), 10)];\n this.moveSvgNode(second, first);\n }\n else if (action === 'SendToBack') {\n var first = layer.zIndexTable[parseInt(startZIndex_1.toString(), 10)];\n var second = layer.zIndexTable[parseInt(nextLowestZindex.toString(), 10)];\n this.moveAfterSvgNode(first, second);\n }\n }\n }\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n }\n };\n CommandHandler.prototype.swapDomOrder = function (nextNodeId, targetId) {\n if (nextNodeId) {\n //Bug 921994: Z-index order changes are not reflected at the UI level with Undo Redo commands.\n var node = this.diagram.getObject(targetId);\n if (node.shape.type === 'Native' || node.shape.type === 'HTML') {\n this.updateNativeNodeIndex(targetId, nextNodeId);\n this.updateNativeNodeIndex(nextNodeId, targetId);\n }\n else {\n var diagramDiv = getDiagramElement(targetId + '_groupElement', this.diagram.element.id);\n var backNode = getDiagramElement(nextNodeId + '_groupElement', this.diagram.element.id);\n diagramDiv.parentNode.insertBefore(diagramDiv, backNode);\n diagramDiv.parentNode.insertBefore(backNode, diagramDiv);\n }\n }\n };\n // private moveObject(sourceId: string, targetId: string): void {\n // if (targetId) {\n // this.moveSvgNode(sourceId, targetId);\n // this.updateNativeNodeIndex(sourceId, targetId);\n // }\n // }\n /**\n * sendForward method\\\n *\n * @returns { void } sendForward method .\\\n * @param { NodeModel | ConnectorModel } obj - Provide the previousObject element .\n * @private\n */\n CommandHandler.prototype.sendForward = function (obj) {\n var _this = this;\n this.diagram.protectPropertyChange(true);\n if (hasSelection(this.diagram) || obj) {\n var elements = obj || (this.diagram.selectedItems.nodes.length\n ? this.diagram.selectedItems.nodes[0] : this.diagram.selectedItems.connectors[0]);\n var clonedObjects = cloneObject(elements);\n var nodeId = (obj && obj.id);\n nodeId = nodeId || (this.diagram.selectedItems.nodes.length ? this.diagram.selectedItems.nodes[0].id\n : this.diagram.selectedItems.connectors[0].id);\n var layerIndex = this.diagram.layers.indexOf(this.getObjectLayer(nodeId));\n var originalNameTable_1 = cloneObject(this.diagram.nameTable);\n var zIndexTable = this.diagram.layers[parseInt(layerIndex.toString(), 10)].zIndexTable;\n //const tabelLength: number = Object.keys(zIndexTable).length;\n var index = this.diagram.nameTable[\"\" + nodeId];\n var intersectArray = [];\n var temp = this.diagram.spatialSearch.findObjects(index.wrapper.bounds);\n if (temp.length > 2) {\n temp = this.sortByZIndex(temp, undefined, 'BringForward');\n }\n for (var _i = 0, temp_1 = temp; _i < temp_1.length; _i++) {\n var i = temp_1[_i];\n if (index.id !== i.id) {\n var currentLayer = this.getObjectLayer(i.id).zIndex;\n if (layerIndex === currentLayer && (Number(this.diagram.nameTable[\"\" + nodeId].zIndex) < Number(i.zIndex)) && i.parentId === '' &&\n index.wrapper.bounds.intersects(i.wrapper.bounds)) {\n intersectArray.push(i);\n }\n }\n }\n for (var i = intersectArray.length - 1; i >= 0; i--) {\n var child = this.diagram.nameTable[intersectArray[parseInt(i.toString(), 10)].id];\n if (child.parentId === nodeId) {\n intersectArray.splice(i, 1);\n }\n }\n if (intersectArray.length > 0) {\n var node = this.diagram.nameTable[intersectArray[intersectArray.length - 1].id];\n if (node.parentId) {\n var parentId = '';\n var parent_1 = findParentInSwimlane(node, this.diagram, parentId);\n var obj_5 = this.diagram.nameTable[\"\" + parent_1];\n if (obj_5.id !== nodeId) {\n intersectArray[0] = obj_5;\n }\n }\n var originalZIndexTable = {}; // New variable to store original zIndex values\n // Store original zIndex values for nodes\n for (var i = 0; i < this.diagram.nodes.length; i++) {\n var node1 = this.diagram.nodes[parseInt(i.toString(), 10)];\n originalZIndexTable[node1.id] = node1.zIndex;\n }\n // Store original zIndex values for connectors\n for (var j = 0; j < this.diagram.connectors.length; j++) {\n var connector = this.diagram.connectors[parseInt(j.toString(), 10)];\n originalZIndexTable[connector.id] = connector.zIndex;\n }\n var overlapObject = intersectArray[0].zIndex;\n var temp_2 = zIndexTable[parseInt(overlapObject.toString(), 10)];\n var undoObject_2 = cloneObject(this.diagram.selectedItems);\n this.diagram.startGroupAction();\n //To store the zindex values as key value pair\n var zIndex_1 = {};\n intersectArray.forEach(function (item) {\n zIndex_1[item.id] = item.zIndex;\n });\n // To store the intersecting zindex value\n var greaterItems_1 = [];\n if (index) {\n var tempIndex_2 = index.zIndex;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-nochec\n if (Object.keys(zIndex_1).length > 0) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n Object.values(zIndex_1).forEach(function (val) {\n if (val >= tempIndex_2) {\n greaterItems_1.push(val);\n }\n });\n if (greaterItems_1.length !== 0) {\n this.updateZIndexBySendForward(index, greaterItems_1, layerIndex);\n }\n }\n }\n var changedNodeZIndexesArray_1 = [];\n Object.keys(this.changedNodeZIndexes).forEach(function (nodeId) {\n var originalZIndex = originalNameTable_1[\"\" + nodeId] ? originalNameTable_1[\"\" + nodeId].zIndex : null;\n var changedZIndex = _this.changedNodeZIndexes[\"\" + nodeId];\n //By comparing with changedNodeZIndexes to store the changed elements in undo\n if (originalZIndex !== changedZIndex) {\n var node_2 = cloneObject(originalNameTable_1[\"\" + nodeId]);\n changedNodeZIndexesArray_1.push(node_2);\n }\n });\n this.updateLayerZindexTable(layerIndex);\n undoObject_2.nodes.splice(0, undoObject_2.nodes.length);\n changedNodeZIndexesArray_1.forEach(function (node) {\n var clonedNode = cloneObject(node);\n undoObject_2.nodes.push(clonedNode);\n });\n if (this.diagram.mode === 'SVG') {\n var nodeIdToUpdate = intersectArray[intersectArray.length - 1].id;\n var element = intersectArray[intersectArray.length - 1];\n if (element && !(element.shape.type === 'HTML'\n || element.shape.type === 'Native')) {\n // this.moveForwardSvgNode(nodeId);\n this.moveAfterSvgNode(nodeId, nodeIdToUpdate);\n }\n this.updateNativeNodeIndex(nodeIdToUpdate, nodeId);\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n var changeNodeZIndexesArray_1 = [];\n Object.keys(this.changedNodeZIndexes).forEach(function (nodeId) {\n var originalZIndex = originalNameTable_1[\"\" + nodeId] ? originalNameTable_1[\"\" + nodeId].zIndex : null;\n var changedZIndex = _this.changedNodeZIndexes[\"\" + nodeId];\n //By comparing with changedNodeZIndexes to store the changed elements in redo\n if (originalZIndex !== changedZIndex) {\n var node_3 = cloneObject(_this.diagram.nameTable[\"\" + nodeId]);\n changeNodeZIndexesArray_1.push(node_3);\n }\n });\n var redoObject_1 = cloneObject(this.diagram.selectedItems);\n redoObject_1.nodes.splice(0, redoObject_1.nodes.length);\n changeNodeZIndexesArray_1.forEach(function (node) {\n var clonedNode = cloneObject(node);\n redoObject_1.nodes.push(clonedNode);\n });\n var historyEntry = {\n type: 'SendForward', category: 'Internal',\n undoObject: undoObject_2, redoObject: redoObject_1\n };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(historyEntry);\n }\n this.diagram.endGroupAction();\n }\n }\n this.diagram.protectPropertyChange(false);\n };\n //This method changes all the zindex values based on the selected node/connector\n CommandHandler.prototype.updateZIndexBySendForward = function (selectedNode, greaterItems, layerNum) {\n var clonedNode = cloneObject(selectedNode);\n selectedNode.zIndex = Math.min.apply(Math, greaterItems);\n var highChildIndex = Math.min.apply(Math, greaterItems);\n var index = Math.min.apply(Math, greaterItems);\n var highIndex;\n var layerObjects = this.diagram.layers[parseInt(layerNum.toString(), 10)].objects;\n var objects = this.diagram.nodes.filter(function (node) { return layerObjects.indexOf(node.id) !== -1; });\n if (selectedNode.children) {\n this.updateGroupZindex(selectedNode, 'BringForward', selectedNode.zIndex);\n }\n var frontNode = objects.filter(function (x) { return x.zIndex === Math.min.apply(Math, greaterItems) && x.id !== selectedNode.id; });\n if (frontNode && frontNode.length > 0 && frontNode[0].children) {\n var frontNodeIndex = Math.min.apply(Math, greaterItems);\n for (var i = 0; i < frontNode[0].children.length; i++) {\n var frontNodeChild = this.diagram.nameTable[frontNode[0].children[parseInt(i.toString(), 10)]];\n frontNodeChild.zIndex = frontNodeIndex - (i + 1);\n highChildIndex = frontNodeIndex - (i + 1);\n }\n this.arrangeZIndexForLowerNodes(highChildIndex, frontNode[0], objects);\n }\n if (selectedNode.children) {\n highIndex = this.findGreatestChildZIndex(selectedNode);\n selectedNode.zIndex = highIndex + 1;\n highIndex = selectedNode.zIndex;\n }\n else {\n selectedNode.zIndex++;\n highIndex = selectedNode.zIndex;\n }\n this.triggerOrderCommand(clonedNode, selectedNode, selectedNode);\n var sortedObjects = objects.slice().sort(function (a, b) { return a.zIndex - b.zIndex; });\n for (var i = 0; i < sortedObjects.length; i++) {\n var node = sortedObjects[parseInt(i.toString(), 10)];\n if (node.zIndex > index && node !== selectedNode && node.parentId !== selectedNode.id &&\n frontNode && frontNode.length > 0 && node.parentId !== frontNode[0].id) {\n var clonedNode_1 = cloneObject(node);\n node.zIndex = highIndex + 1;\n highIndex++;\n // node.zIndex++;\n this.triggerOrderCommand(clonedNode_1, node, node);\n }\n var originalZIndex = node.zIndex;\n //changedNodeZIndexes store the zindex values with node id as key value pair\n // eslint-disable-next-line no-prototype-builtins\n if (this.changedNodeZIndexes.hasOwnProperty(node.id)) {\n this.changedNodeZIndexes[node.id] = originalZIndex;\n }\n else {\n this.changedNodeZIndexes[node.id] = originalZIndex;\n }\n }\n };\n CommandHandler.prototype.arrangeZIndexForLowerNodes = function (index, parent, objects) {\n var lesserIndexNodes = objects.filter(function (x) { return x.zIndex <= index && x.parentId !== parent.id; });\n lesserIndexNodes.sort(function (a, b) { return b.zIndex - a.zIndex; });\n for (var i = 0; i < lesserIndexNodes.length; i++) {\n lesserIndexNodes[parseInt(i.toString(), 10)].zIndex = index - (i + 1);\n }\n };\n CommandHandler.prototype.findGreatestChildZIndex = function (parent) {\n var highestZIndex = parent.zIndex;\n for (var i = 0; i < parent.children.length; i++) {\n var child = this.diagram.nameTable[parent.children[parseInt(i.toString(), 10)]];\n if (child.zIndex > highestZIndex) {\n highestZIndex = child.zIndex;\n }\n }\n return highestZIndex;\n };\n // /**\n // * moveForwardSvgNode method\\\n // *\n // * @returns { void } moveForwardSvgNode method .\\\n // * @param {string} targetID - provide the objects value.\n // * @private\n // */\n // public moveForwardSvgNode(targetID: string): void {\n // const sortedNodeIds: string[] = Object.keys(this.changedNodeZIndexes).sort((a: string, b: string) => this.changedNodeZIndexes[`${a}`] - this.changedNodeZIndexes[`${b}`]);\n // const currentIndex: number = sortedNodeIds.indexOf(targetID);\n // if (currentIndex !== -1) {\n // //This logic moves the node/connector based on their zindex\n // if (currentIndex === sortedNodeIds.length - 1) {\n // const nextNodeId: string = sortedNodeIds[currentIndex - 1];\n // if (nextNodeId) {\n // const diagramDiv: HTMLElement = getDiagramElement(targetID + '_groupElement', this.diagram.element.id);\n // const backNode: HTMLElement = getDiagramElement(nextNodeId + '_groupElement', this.diagram.element.id);\n // diagramDiv.parentNode.insertBefore(diagramDiv, backNode);\n // diagramDiv.parentNode.insertBefore(backNode, diagramDiv);\n // }\n // }\n // else {\n // const nextNodeId: string = sortedNodeIds[currentIndex + 1];\n // if (nextNodeId) {\n // const diagramDiv: HTMLElement = getDiagramElement(targetID + '_groupElement', this.diagram.element.id);\n // const backNode: HTMLElement = getDiagramElement(nextNodeId + '_groupElement', this.diagram.element.id);\n // diagramDiv.parentNode.insertBefore(diagramDiv, backNode);\n // }\n // }\n // }\n // }\n /**\n * sendBackward method\\\n *\n * @returns { void } sendBackward method .\\\n * @param { NodeModel | ConnectorModel } obj - Provide the previousObject element .\n * @private\n */\n CommandHandler.prototype.sendBackward = function (obj) {\n var _this = this;\n this.diagram.protectPropertyChange(true);\n if (hasSelection(this.diagram) || obj) {\n var element = obj || (this.diagram.selectedItems.nodes.length\n ? this.diagram.selectedItems.nodes[0] : this.diagram.selectedItems.connectors[0]);\n var clonedObject = cloneObject(element);\n var objectId = (obj && obj.id);\n objectId = objectId || (this.diagram.selectedItems.nodes.length ? this.diagram.selectedItems.nodes[0].id\n : this.diagram.selectedItems.connectors[0].id);\n var layerNum = this.diagram.layers.indexOf(this.getObjectLayer(objectId));\n var originalNameTable_2 = cloneObject(this.diagram.nameTable);\n var zIndexTable = this.diagram.layers[parseInt(layerNum.toString(), 10)].zIndexTable;\n //const tabelLength: number = Object.keys(zIndexTable).length;\n var node = this.diagram.nameTable[\"\" + objectId];\n var intersectArray = [];\n var temp = this.diagram.spatialSearch.findObjects(node.wrapper.bounds);\n if (temp.length > 2) {\n temp = this.sortByZIndex(temp);\n }\n for (var _i = 0, temp_3 = temp; _i < temp_3.length; _i++) {\n var i = temp_3[_i];\n if (node.id !== i.id) {\n var currentLayer = this.getObjectLayer(i.id).zIndex;\n if (layerNum === currentLayer && (Number(this.diagram.nameTable[\"\" + objectId].zIndex) > Number(i.zIndex)) && i.parentId === '' &&\n node.wrapper.bounds.intersects(i.wrapper.bounds)) {\n intersectArray.push(i);\n }\n }\n }\n for (var i = intersectArray.length - 1; i >= 0; i--) {\n var child = this.diagram.nameTable[intersectArray[parseInt(i.toString(), 10)].id];\n if (child.parentId === objectId) {\n intersectArray.splice(i, 1);\n }\n }\n if (intersectArray.length > 0) {\n var child = this.diagram.nameTable[intersectArray[intersectArray.length - 1].id];\n if (child.parentId) {\n var parentId = '';\n var parent_2 = findParentInSwimlane(child, this.diagram, parentId);\n var obj_6 = this.diagram.nameTable[\"\" + parent_2];\n if (objectId !== obj_6.id) {\n intersectArray[intersectArray.length - 1] = obj_6;\n }\n }\n var originalZIndexTable = {}; // New variable to store original zIndex values\n // Store original zIndex values for nodes\n for (var i = 0; i < this.diagram.nodes.length; i++) {\n var node1 = this.diagram.nodes[parseInt(i.toString(), 10)];\n originalZIndexTable[node1.id] = node1.zIndex;\n }\n // Store original zIndex values for connectors\n for (var j = 0; j < this.diagram.connectors.length; j++) {\n var connector = this.diagram.connectors[parseInt(j.toString(), 10)];\n originalZIndexTable[connector.id] = connector.zIndex;\n }\n var overlapObject = intersectArray[intersectArray.length - 1].zIndex;\n var temp_4 = zIndexTable[parseInt(overlapObject.toString(), 10)];\n var undoObject_3 = cloneObject(this.diagram.selectedItems);\n this.diagram.startGroupAction();\n var zIndex_2 = {};\n intersectArray.forEach(function (item) {\n zIndex_2[item.id] = item.zIndex;\n });\n var lesserItems_1 = [];\n if (node) {\n var tempIndex_3 = node.zIndex;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-nochec\n if (Object.keys(zIndex_2).length > 0) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n Object.values(zIndex_2).forEach(function (val) {\n if (val <= tempIndex_3) {\n lesserItems_1.push(val);\n }\n });\n if (lesserItems_1.length !== 0) {\n this.updateZIndexBySendBackward(node, lesserItems_1, layerNum);\n }\n }\n }\n var changedNodeZIndexesArray_2 = [];\n Object.keys(this.changedNodeZIndexes).forEach(function (nodeId) {\n var originalZIndex = originalNameTable_2[\"\" + nodeId] ? originalNameTable_2[\"\" + nodeId].zIndex : null;\n var changedZIndex = _this.changedNodeZIndexes[\"\" + nodeId];\n //By comparing with changedNodeZIndexes to store the changed elements in undo\n if (originalZIndex !== changedZIndex) {\n var node_4 = cloneObject(originalNameTable_2[\"\" + nodeId]);\n changedNodeZIndexesArray_2.push(node_4);\n }\n });\n this.updateLayerZindexTable(layerNum);\n undoObject_3.nodes.splice(0, undoObject_3.nodes.length);\n changedNodeZIndexesArray_2.forEach(function (node) {\n var clonedNode = cloneObject(node);\n undoObject_3.nodes.push(clonedNode);\n });\n if (this.diagram.mode === 'SVG') {\n var nodeIdToUpdate = intersectArray[intersectArray.length - 1].id;\n var element_1 = intersectArray[intersectArray.length - 1];\n if (element_1 && !(element_1.shape.type === 'HTML'\n || element_1.shape.type === 'Native')) {\n // this.moveBackSvgNode(objectId);\n this.moveSvgNode(objectId, nodeIdToUpdate);\n }\n var node_5 = this.diagram.nameTable[\"\" + nodeIdToUpdate];\n if (node_5.children && node_5.children.length > 0) {\n this.updateNativeNodeIndex(objectId);\n }\n else {\n this.updateNativeNodeIndex(objectId, nodeIdToUpdate);\n }\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n var changeNodeZIndexesArray_2 = [];\n Object.keys(this.changedNodeZIndexes).forEach(function (nodeId) {\n var originalZIndex = originalNameTable_2[\"\" + nodeId] ? originalNameTable_2[\"\" + nodeId].zIndex : null;\n var changedZIndex = _this.changedNodeZIndexes[\"\" + nodeId];\n //By comparing with changedNodeZIndexes to store the changed elements in redo\n if (originalZIndex !== changedZIndex) {\n var node_6 = cloneObject(_this.diagram.nameTable[\"\" + nodeId]);\n changeNodeZIndexesArray_2.push(node_6);\n }\n });\n var redoObject_2 = cloneObject(this.diagram.selectedItems);\n redoObject_2.nodes.splice(0, redoObject_2.nodes.length);\n changeNodeZIndexesArray_2.forEach(function (node) {\n var clonedNode = cloneObject(node);\n redoObject_2.nodes.push(clonedNode);\n });\n var entry = { type: 'SendBackward', category: 'Internal', undoObject: undoObject_3, redoObject: redoObject_2 };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n this.diagram.endGroupAction();\n }\n }\n this.diagram.protectPropertyChange(false);\n };\n //This method changes all the zindex values based on the selected node/connector\n CommandHandler.prototype.updateZIndexBySendBackward = function (selectedNode, lesserItems, layerNum) {\n var clonedNode = cloneObject(selectedNode);\n selectedNode.zIndex = Math.max.apply(Math, lesserItems);\n var index = selectedNode.zIndex;\n var lowChildIndex = Math.max.apply(Math, lesserItems);\n var layerObjects = this.diagram.layers[parseInt(layerNum.toString(), 10)].objects;\n var objects = this.diagram.nodes.filter(function (node) { return layerObjects.indexOf(node.id) !== -1; });\n var backNode = objects.filter(function (x) { return x.zIndex === Math.max.apply(Math, lesserItems) && x.id !== selectedNode.id; });\n if (backNode && backNode.length > 0 && backNode[0].children) {\n // eslint-disable-next-line prefer-spread\n var backNodeIndex = Math.max.apply(Math, lesserItems);\n for (var i = 0; i < backNode[0].children.length; i++) {\n var backNodeChild = this.diagram.nameTable[backNode[0].children[parseInt(i.toString(), 10)]];\n backNodeChild.zIndex = backNodeIndex - (i + 1);\n lowChildIndex = backNodeIndex - (i + 1);\n }\n }\n selectedNode.zIndex = lowChildIndex - 1;\n var lowIndex;\n this.triggerOrderCommand(clonedNode, selectedNode, selectedNode);\n if (selectedNode.children) {\n this.updateGroupZindex(selectedNode, 'SendBackward', selectedNode.zIndex);\n lowIndex = this.findLowestChildZIndex(selectedNode);\n }\n else {\n lowIndex = selectedNode.zIndex;\n }\n var sortedObjects = objects.slice().sort(function (a, b) { return b.zIndex - a.zIndex; });\n for (var i = 0; i < sortedObjects.length; i++) {\n var node = sortedObjects[parseInt(i.toString(), 10)];\n if (node.zIndex < index && node !== selectedNode && node.parentId !== selectedNode.id &&\n backNode && backNode.length > 0 && node.parentId !== backNode[0].id) {\n var clonedNode_2 = cloneObject(node);\n node.zIndex = lowIndex - 1;\n lowIndex--;\n this.triggerOrderCommand(clonedNode_2, node, node);\n }\n var originalZIndex = node.zIndex;\n // eslint-disable-next-line no-prototype-builtins\n if (this.changedNodeZIndexes.hasOwnProperty(node.id)) {\n this.changedNodeZIndexes[\"\" + node.id] = originalZIndex;\n }\n else {\n this.changedNodeZIndexes[\"\" + node.id] = originalZIndex;\n }\n }\n };\n CommandHandler.prototype.findLowestChildZIndex = function (parent) {\n var lowestZIndex = parent.zIndex;\n for (var i = 0; i < parent.children.length; i++) {\n var child = this.diagram.nameTable[parent.children[parseInt(i.toString(), 10)]];\n if (child.zIndex < lowestZIndex) {\n lowestZIndex = child.zIndex;\n }\n }\n return lowestZIndex;\n };\n // /**\n // * moveBackSvgNode method\\\n // *\n // * @returns { void } moveBackSvgNode method .\\\n // * @param {string} targetID - provide the objects value.\n // * @private\n // */\n // public moveBackSvgNode(targetID: string): void {\n // const sortedNodeIds: string[] = Object.keys(this.changedNodeZIndexes).sort((a: string, b: string) => this.changedNodeZIndexes[`${a}`] - this.changedNodeZIndexes[`${b}`]);\n // const currentIndex: number = sortedNodeIds.indexOf(targetID);\n // //This logic moves the node/connector based on their zindex\n // if (currentIndex !== -1) {\n // const nextNodeId: string = sortedNodeIds[currentIndex + 1];\n // if (nextNodeId) {\n // const diagramDiv: HTMLElement = getDiagramElement(targetID + '_groupElement', this.diagram.element.id);\n // const backNode: HTMLElement = getDiagramElement(nextNodeId + '_groupElement', this.diagram.element.id);\n // diagramDiv.parentNode.insertBefore(diagramDiv, backNode);\n // }\n // }\n // }\n /**\n * updateNativeNodeIndex method\\\n *\n * @returns { void } updateNativeNodeIndex method .\\\n * @param { string } nodeId - Provide the previousObject element .\n * @param { string } targetID - Provide the previousObject element .\n * @private\n */\n CommandHandler.prototype.updateNativeNodeIndex = function (nodeId, targetID) {\n var node = this.diagram.selectedItems.nodes[0] || this.diagram.getObject(targetID);\n for (var i = 0; i < this.diagram.views.length; i++) {\n if (node && (node.shape.type === 'HTML'\n || node.shape.type === 'Native')) {\n var id = node.shape.type === 'HTML' ? '_html_element' : '_content_groupElement';\n var backNode = getDiagramElement(nodeId + id, this.diagram.views[parseInt(i.toString(), 10)]);\n var diagramDiv = targetID ? getDiagramElement(targetID + id, this.diagram.views[parseInt(i.toString(), 10)])\n : backNode.parentElement.firstChild;\n if (backNode && diagramDiv) {\n if (backNode.parentNode.id === diagramDiv.parentNode.id) {\n diagramDiv.parentNode.insertBefore(backNode, diagramDiv);\n }\n }\n }\n }\n };\n /**\n * initSelectorWrapper method\\\n *\n * @returns { void } initSelectorWrapper method .\\\n * @private\n */\n CommandHandler.prototype.initSelectorWrapper = function () {\n var selectorModel = this.diagram.selectedItems;\n selectorModel.init(this.diagram);\n if (selectorModel.nodes.length === 1 && selectorModel.connectors.length === 0) {\n selectorModel.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.pivot = selectorModel.nodes[0].pivot;\n }\n };\n /**\n * doRubberBandSelection method\\\n *\n * @returns { void } doRubberBandSelection method .\\\n * @param { Rect } region - Provide the previousObject element .\n * @private\n */\n CommandHandler.prototype.doRubberBandSelection = function (region) {\n this.clearSelectionRectangle();\n var selArray = [];\n var rubberArray = [];\n selArray = this.diagram.getNodesConnectors(selArray);\n if (this.diagram.selectedItems.rubberBandSelectionMode === 'CompleteIntersect') {\n rubberArray = completeRegion(region, selArray);\n }\n else {\n rubberArray = this.diagram.spatialSearch.findObjects(region);\n }\n if (rubberArray.length) {\n this.selectObjects(rubberArray, true);\n }\n };\n CommandHandler.prototype.clearSelectionRectangle = function () {\n var adornerSvg = getAdornerLayerSvg(this.diagram.element.id);\n var element = adornerSvg.getElementById(this.diagram.element.id + '_diagramAdorner_selected_region');\n if (element) {\n remove(element);\n }\n };\n /**\n * dragConnectorEnds method\\\n *\n * @returns { void } dragConnectorEnds method .\\\n * @param { string } endPoint - Provide the previousObject element .\n * @param { IElement } obj - Provide the previousObject element .\n * @param { PointModel } point - Provide the point element .\n * @param { BezierSegmentModel } segment - Provide the segment element .\n * @param { IElement } target - Provide the target element .\n * @param { string } targetPortId - Provide the targetPortId element .\n * @private\n */\n CommandHandler.prototype.dragConnectorEnds = function (endPoint, obj, point, segment, target, targetPortId) {\n var selectorModel;\n var connector; //let node: Node;\n var tx; //let segmentPoint: PointModel;\n var ty; //let index: number;\n var checkBezierThumb = false;\n if (obj instanceof Selector) {\n selectorModel = obj;\n connector = selectorModel.connectors[0];\n }\n else if (obj instanceof Connector && this.diagram.currentDrawingObject) {\n this.clearSelection();\n connector = this.diagram.currentDrawingObject;\n }\n if (endPoint === 'BezierSourceThumb' || endPoint === 'BezierTargetThumb') {\n checkBezierThumb = true;\n connector.isBezierEditing = true;\n }\n if (endPoint === 'ConnectorSourceEnd' || endPoint === 'BezierSourceThumb') {\n tx = point.x - (checkBezierThumb ? segment.bezierPoint1.x : connector.sourcePoint.x);\n ty = point.y - (checkBezierThumb ? segment.bezierPoint1.y : connector.sourcePoint.y);\n return this.dragSourceEnd(connector, tx, ty, null, point, endPoint, undefined, target, targetPortId, undefined, segment);\n }\n else {\n tx = point.x - (checkBezierThumb ? segment.bezierPoint2.x : connector.targetPoint.x);\n ty = point.y - (checkBezierThumb ? segment.bezierPoint2.y : connector.targetPoint.y);\n return this.dragTargetEnd(connector, tx, ty, null, point, endPoint, undefined, segment);\n }\n };\n /**\n * getSelectedObject method\\\n *\n * @returns { void } getSelectedObject method .\\\n * @private\n */\n CommandHandler.prototype.getSelectedObject = function () {\n var selectormodel = this.diagram.selectedItems;\n return (selectormodel.nodes).concat(selectormodel.connectors);\n };\n // /**\n // * updateBlazorProperties method\\\n // *\n // * @returns { void } updateBlazorProperties method .\\\n // * @param { boolean } isObjectInteraction - Provide the previousObject element .\n // * @private\n // */\n // public updateBlazorProperties(isObjectInteraction?: boolean): void {\n // const blazorInterop: string = 'sfBlazor';\n // const blazor: string = 'Blazor';\n // if (!isObjectInteraction) {\n // if (window && window[`${blazor}`]) {\n // const obj: object = { 'methodName': 'UpdateBlazorProperties', 'diagramobj': this.diagramObject };\n // // window[`${blazorInterop}`].updateBlazorProperties(obj, this.diagram);\n // }\n // } else {\n // if (window && window[`${blazor}`] && JSON.stringify(this.deepDiffer.diagramObject) !== '{}') {\n // const obj: object = { 'methodName': 'UpdateBlazorProperties', 'diagramobj': this.deepDiffer.diagramObject };\n // if (!this.diagram.isLoading) {\n // // window[`${blazorInterop}`].updateBlazorProperties(obj, this.diagram);\n // }\n // }\n // }\n // //this.diagram.enableServerDataBinding(true);\n // this.deepDiffer.newNodeObject = [];\n // this.deepDiffer.newConnectorObject = [];\n // this.diagramObject = [];\n // this.diagram.oldNodeObjects = [];\n // this.diagram.oldConnectorObjects = [];\n // }\n // /**\n // * enableCloneObject method\\\n // *\n // * @returns { void } enableCloneObject method .\\\n // * @param { boolean } value - Provide the previousObject element .\n // * @private\n // */\n CommandHandler.prototype.enableCloneObject = function (value) {\n // if ((!this.diagram.lineRoutingModule || !(this.diagram.constraints & DiagramConstraints.LineRouting))) {\n // this.diagram.canEnableBlazorObject = value;\n // }\n };\n // /**\n // * ismouseEvents method\\\n // *\n // * @returns { void } ismouseEvents method .\\\n // * @param { boolean } value - Provide the previousObject element .\n // * @private\n // */\n // public ismouseEvents(value: boolean): void {\n // // if (value) {\n // // this.diagram.blazorActions = this.diagram.addConstraints(this.diagram.blazorActions, BlazorAction.interaction);\n // // } else {\n // // this.diagram.blazorActions = this.diagram.removeConstraints(this.diagram.blazorActions, BlazorAction.interaction);\n // // }\n // }\n // /**\n // * updateLayerObject method\\\n // *\n // * @returns { void } updateLayerObject method .\\\n // * @param { object } oldDiagram - Provide the previousObject element .\n // * @param { boolean } temp - Provide the temp element .\n // * @private\n // */\n // public updateLayerObject(oldDiagram: object, temp?: boolean): void {\n // comment blazor code\n // }\n // /* tslint:enable:no-string-literal */\n // /**\n // * getDiagramOldValues method\\\n // *\n // * @returns { void } getDiagramOldValues method .\\\n // * @param { object } oldDiagram - Provide the previousObject element .\n // * @param { string[] } attribute - Provide the previousObject element .\n // * @private\n // */\n // public getDiagramOldValues(oldDiagram: object, attribute: string[]): void {\n // const newDiagram: object = {};\n // for (let i: number = 0; i < attribute.length; i++) {\n // newDiagram[attribute[parseInt(i.toString(), 10)]] = cloneObject(this.diagram[attribute[parseInt(i.toString(), 10)]]);\n // }\n // const newObject: Object = cloneObject(newDiagram);\n // const result: object = this.deepDiffer.map(newObject, oldDiagram);\n // const diffValue: object = this.deepDiffer.frameObject({}, result);\n // let diff: object = this.deepDiffer.removeEmptyValues(diffValue);\n // diff = this.deepDiffer.changeSegments(diff, newObject);\n // this.diagramObject = diff;\n // if (!(this.diagram.blazorActions & BlazorAction.ClearObject)) {\n // // this.updateBlazorProperties();\n // }\n // }\n /* tslint:disable */\n /**\n * getBlazorOldValues method\\\n *\n * @returns { void } getBlazorOldValues method .\\\n * @param { MouseEventArgs } args - Provide the previousObject element .\n * @param { boolean } labelDrag - Provide the previousObject element .\n * @private\n */\n CommandHandler.prototype.getBlazorOldValues = function (args, labelDrag) {\n //comment blazor code\n };\n // /**\n // * getObjectChanges method\\\n // *\n // * @returns { void } getObjectChanges method .\\\n // * @param { Object[] } previousObject - Provide the previousObject element .\n // * @param { Object[] } currentObject - Provide the previousObject element .\n // * @param { Object[] } previousObject - Provide the previousObject element .\n // * @private\n // */\n // public getObjectChanges(previousObject: Object[], currentObject: Object[], changedNodes: Object[]): void {\n // }\n /**\n * clearObjectSelection method\\\n *\n * @returns { void } clearObjectSelection method .\\\n * @param { (NodeModel | ConnectorModel) } mouseDownElement - Provide the triggerAction element .\n * @private\n */\n // Bug fix - EJ2-44495 -Node does not gets selected on slight movement of mouse when drag constraints disabled for node\n CommandHandler.prototype.clearObjectSelection = function (mouseDownElement) {\n var selectedItems = this.diagram.selectedItems;\n var list = [];\n list = list.concat(selectedItems.nodes, selectedItems.connectors);\n if (list.indexOf(mouseDownElement) === -1) {\n this.clearSelection((list.length > 0) ? true : false);\n this.selectObjects([mouseDownElement], true);\n }\n };\n /**\n * clearSelection method\\\n *\n * @returns { void } clearSelection method .\\\n * @param { boolean } triggerAction - Provide the triggerAction element .\n * @param { boolean } isTriggered - Provide the isTriggered element .\n * @private\n */\n CommandHandler.prototype.clearSelection = function (triggerAction, isTriggered) {\n return __awaiter$1(this, void 0, void 0, function () {\n var enableServerDataBinding, selectormodel, arrayNodes, arg;\n return __generator$1(this, function (_a) {\n enableServerDataBinding = this.diagram.allowServerDataBinding;\n this.diagram.enableServerDataBinding(false);\n if (hasSelection(this.diagram)) {\n selectormodel = this.diagram.selectedItems;\n arrayNodes = this.getSelectedObject();\n if (this.diagram.currentSymbol) {\n this.diagram.previousSelectedObject = arrayNodes;\n }\n arg = {\n oldValue: arrayNodes, newValue: [], cause: this.diagram.diagramActions,\n state: 'Changing', type: 'Removal', cancel: false\n };\n // this.updateBlazorSelectorModel(arrayNodes, true);\n if (triggerAction) {\n if (!isBlazor()) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n }\n if (!arg.cancel) {\n selectormodel.offsetX = 0;\n selectormodel.offsetY = 0;\n selectormodel.width = 0;\n selectormodel.height = 0;\n selectormodel.rotateAngle = 0;\n selectormodel.nodes = [];\n selectormodel.connectors = [];\n selectormodel.wrapper = null;\n selectormodel.annotation = undefined;\n // EJ2-56919 - While clear selection empty the selectedObjects collection\n selectormodel.selectedObjects = [];\n this.diagram.clearSelectorLayer();\n if (triggerAction) {\n arg = {\n oldValue: cloneBlazorObject(arrayNodes), newValue: [], cause: this.diagram.diagramActions,\n state: 'Changed', type: 'Removal', cancel: false\n };\n if (!isBlazor()) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n }\n }\n // this.updateBlazorSelector();\n this.diagram.enableServerDataBinding(enableServerDataBinding);\n }\n return [2 /*return*/];\n });\n });\n };\n /**\n * clearSelectedItems method\\\n *\n * @returns { void } clearSelectedItems method .\\\n * @private\n */\n CommandHandler.prototype.clearSelectedItems = function () {\n var selectedNodes = this.diagram.selectedItems.nodes ? this.diagram.selectedItems.nodes.length : 0;\n var selectedConnectors = this.diagram.selectedItems.connectors ? this.diagram.selectedItems.connectors.length : 0;\n this.clearSelection((selectedNodes + selectedConnectors) > 0 ? true : false);\n };\n /**\n * removeStackHighlighter method\\\n *\n * @returns { void } removeStackHighlighter method .\\\n * @private\n */\n CommandHandler.prototype.removeStackHighlighter = function () {\n var adornerSvg = getAdornerLayerSvg(this.diagram.element.id);\n var highlighter = adornerSvg.getElementById(adornerSvg.id + '_stack_highlighter');\n if (highlighter) {\n highlighter.parentNode.removeChild(highlighter);\n }\n };\n /**\n * @param {End} args - provide the args value.\n * @param {IElement} target - provide the target value.\n * @private\n */\n CommandHandler.prototype.renderStackHighlighter = function (args, target) {\n var source = this.diagram.selectedItems.nodes[0];\n var symbolDrag;\n var node;\n var selectorModel;\n if (!target) {\n var objects = this.diagram.findObjectsUnderMouse(args.position);\n target = this.diagram.findObjectUnderMouse(objects, 'Drag', true);\n if (target && !(target.isLane || target.isPhase || target.isHeader)) {\n for (var i = 0; i < objects.length; i++) {\n var laneNode = this.diagram.nameTable[objects[parseInt(i.toString(), 10)].id];\n if (!laneNode.isLane || laneNode.isPhase || laneNode.isHeader) {\n target = laneNode;\n this.diagram.parentObject = target;\n }\n }\n }\n }\n if (source && target && target.isLane && source.shape && !source.shape.isPhase) {\n node = this.diagram.nameTable[target.parentId];\n if (this.diagram.currentSymbol && node.shape.type === 'SwimLane') {\n symbolDrag = true;\n }\n if ((source && !source.parentId && source.shape.type !== 'SwimLane') ||\n (source && source.parentId && this.diagram.nameTable[source.parentId] && this.diagram.nameTable[source.parentId].isLane &&\n (source.parentId !== target.parentId && source.parentId !== target.id))) {\n selectorModel = this.diagram.selectedItems;\n var canvas = gridSelection(this.diagram, selectorModel, target.id, true);\n //Bug 904547: Snapping of nodes inside the swimlane is not proper.\n //Instead of assigning the canvas to the selectorModel children, pass them to render selector to highlight the swimlane.\n this.diagram.renderSelector(false, true, canvas);\n selectorModel.wrapper.children[0] = selectorModel.nodes[0].wrapper;\n }\n }\n if (source && target && target.parentId && source.shape && source.shape.isPhase) {\n var node_7 = this.diagram.nameTable[target.parentId];\n if (node_7.shape.type === 'SwimLane') {\n //Bug 904547: Snapping of nodes inside the swimlane is not proper.\n //Instead of assigning the canvas to the selectorModel children, pass them to render selector to highlight the swimlane.\n var canvas = this.diagram.nameTable[target.parentId].wrapper;\n this.diagram.renderSelector(false, true, canvas);\n }\n }\n if ((symbolDrag && this.diagram.currentSymbol.shape.isLane) || (source && target &&\n source.parentId && target.parentId && !source.isPhase && (source.parentId === target.parentId)\n && (source.id !== target.id) && node &&\n (node.container && (node.container.type === 'Stack' || node.container.type === 'Grid')))) {\n var canvas = void 0;\n var value = node.container.orientation === 'Vertical';\n var isVertical = node.container === 'Stack' ? value : !value;\n if (node.container.type === 'Grid' && target.isLane &&\n (((node.shape.orientation === 'Horizontal' && target.rowIndex !== source.rowIndex) ||\n (node.shape.orientation === 'Vertical' && target.columnIndex !== source.columnIndex))\n || (this.diagram.currentSymbol &&\n this.diagram.currentSymbol.shape.orientation === node.container.orientation))) {\n selectorModel = this.diagram.selectedItems;\n if ((source.isLane && canLaneInterchange(source, this.diagram)) || !source.isLane) {\n canvas = gridSelection(this.diagram, selectorModel, target.id, symbolDrag);\n }\n }\n var wrapper = node.container.type === 'Stack' ? target.wrapper : canvas;\n if (wrapper) {\n renderStackHighlighter(wrapper, isVertical, args.position, this.diagram, false, true);\n }\n }\n };\n /** @private */\n CommandHandler.prototype.insertBlazorConnector = function (obj) {\n if (obj instanceof Selector) {\n for (var i = 0; i < obj.connectors.length; i++) {\n this.diagram.insertBlazorConnector(obj.connectors[parseInt(i.toString(), 10)]);\n }\n }\n else {\n this.diagram.insertBlazorConnector(obj);\n }\n };\n /** @private */\n CommandHandler.prototype.drag = function (obj, tx, ty) {\n var tempNode;\n var elements = [];\n // EJ2-846953: The below code is added to set current action to drag when we drag objects dynamically using method.\n // It is used to prevent the updateGroupSize method call for group node while dragging it.\n if (!this.diagram.rotateUsingButton && obj.shape && obj.shape.type !== 'SwimLane') {\n this.diagram.eventHandler.currentAction = 'Drag';\n }\n if (canMove(obj) && this.checkBoundaryConstraints(tx, ty, obj.wrapper.bounds) && canPageEditable(this.diagram)) {\n if (obj instanceof Node) {\n var oldValues = { offsetX: obj.offsetX, offsetY: obj.offsetY };\n obj.offsetX += tx;\n obj.offsetY += ty;\n if (obj.children && !(obj.container)) {\n if (!(checkParentAsContainer(this.diagram, obj, true))) {\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.isGroupDragging;\n }\n var nodes = this.getAllDescendants(obj, elements);\n for (var i = 0; i < nodes.length; i++) {\n tempNode = (this.diagram.nameTable[nodes[parseInt(i.toString(), 10)].id]);\n this.drag(tempNode, tx, ty);\n }\n this.updateInnerParentProperties(obj);\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.isGroupDragging;\n }\n if (checkParentAsContainer(this.diagram, obj, true)) {\n checkChildNodeInContainer(this.diagram, obj);\n }\n else {\n if (obj && obj.shape && obj.shape.type === 'UmlClassifier') {\n obj.wrapper.measureChildren = true;\n }\n this.diagram.nodePropertyChange(obj, oldValues, { offsetX: obj.offsetX, offsetY: obj.offsetY }, undefined, undefined, false);\n obj.wrapper.measureChildren = false;\n }\n if (obj.shape.type === 'SwimLane' && !this.diagram.currentSymbol) {\n var grid = obj.wrapper.children[0];\n var connectors = getConnectors(this.diagram, grid);\n updateConnectorsProperties(connectors, this.diagram);\n }\n }\n else {\n var connector = obj;\n var oldValues = { sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint };\n var update = connector.type === 'Bezier' ? true : false;\n var hasEnds = false;\n if (!connector.sourceWrapper) {\n this.dragSourceEnd(connector, tx, ty, true, null, '', update);\n }\n else {\n hasEnds = true;\n }\n if (!connector.targetWrapper) {\n this.dragTargetEnd(connector, tx, ty, true, null, '', update);\n }\n else {\n hasEnds = true;\n }\n var canDragPoints = false;\n if (obj instanceof Connector) {\n canDragPoints = true;\n }\n if (!hasEnds || canDragPoints) {\n this.dragControlPoint(connector, tx, ty, true);\n var conn = { sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint };\n this.diagram.connectorPropertyChange(connector, oldValues, conn);\n }\n }\n }\n };\n /** @private */\n CommandHandler.prototype.connectorSegmentChange = function (actualObject, existingInnerBounds, isRotate) {\n var tx;\n var ty;\n var segmentChange = true;\n if (existingInnerBounds.equals(existingInnerBounds, actualObject.wrapper.bounds) === false) {\n if (actualObject.outEdges.length > 0) {\n for (var k = 0; k < actualObject.outEdges.length; k++) {\n var connector = this.diagram.nameTable[actualObject.outEdges[parseInt(k.toString(), 10)]];\n if (connector.targetID !== '') {\n segmentChange = this.isSelected(this.diagram.nameTable[connector.targetID]) ? false : true;\n }\n else {\n segmentChange = this.isSelected(this.diagram.nameTable[connector.id]) ? false : true;\n }\n if (connector.type === 'Orthogonal' && connector.segments && connector.segments.length > 1) {\n if (!isRotate) {\n if (segmentChange) {\n switch (connector.segments[0].direction) {\n case 'Bottom':\n tx = actualObject.wrapper.bounds.bottomCenter.x - existingInnerBounds.bottomCenter.x;\n ty = actualObject.wrapper.bounds.bottomCenter.y - existingInnerBounds.bottomCenter.y;\n break;\n case 'Top':\n tx = actualObject.wrapper.bounds.topCenter.x - existingInnerBounds.topCenter.x;\n ty = actualObject.wrapper.bounds.topCenter.y - existingInnerBounds.topCenter.y;\n break;\n case 'Left':\n tx = actualObject.wrapper.bounds.middleLeft.x - existingInnerBounds.middleLeft.x;\n ty = actualObject.wrapper.bounds.middleLeft.y - existingInnerBounds.middleLeft.y;\n break;\n case 'Right':\n tx = actualObject.wrapper.bounds.middleRight.x - existingInnerBounds.middleRight.x;\n ty = actualObject.wrapper.bounds.middleRight.y - existingInnerBounds.middleRight.y;\n break;\n }\n this.dragSourceEnd(connector, tx, ty, true, null, 'ConnectorSourceEnd', undefined, undefined, undefined, (actualObject.parentId &&\n (this.diagram.diagramActions & DiagramAction.isGroupDragging)) ? false : true);\n }\n }\n else {\n var firstSegment = connector.segments[0];\n var secondSegment = connector.segments[1];\n var cornerPoints = swapBounds(actualObject.wrapper, actualObject.wrapper.corners, actualObject.wrapper.bounds);\n var sourcePoint = findPoint(cornerPoints, firstSegment.direction);\n sourcePoint = getIntersection(connector, connector.sourceWrapper, sourcePoint, { x: connector.sourceWrapper.offsetX, y: connector.sourceWrapper.offsetY }, false);\n var source = {\n corners: undefined, point: sourcePoint, margin: undefined, direction: firstSegment.direction\n };\n var target = {\n corners: undefined, point: secondSegment.points[1], margin: undefined, direction: undefined\n };\n var intermediatePoints = orthoConnection2Segment(source, target);\n firstSegment.length = Point.distancePoints(intermediatePoints[0], intermediatePoints[1]);\n if (secondSegment.direction && secondSegment.length) {\n secondSegment.length = Point.distancePoints(intermediatePoints[1], intermediatePoints[2]);\n }\n }\n }\n }\n }\n }\n };\n /** @private */\n CommandHandler.prototype.updateEndPoint = function (connector, oldChanges) {\n var conn = {\n sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint,\n sourceID: connector.sourceID ? connector.sourceID : undefined,\n targetID: connector.targetID ? connector.targetID : undefined,\n sourcePortID: connector.sourcePortID ? connector.sourcePortID : undefined,\n targetPortID: connector.targetPortID ? connector.targetPortID : undefined,\n segments: connector.segments ? connector.segments : undefined\n };\n var newValue = { sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint };\n if (connector.sourceID) {\n newValue.sourceID = connector.sourceID;\n }\n if (connector.targetID) {\n newValue.targetID = connector.targetID;\n }\n if (connector.sourcePortID) {\n newValue.sourcePortID = connector.sourcePortID;\n }\n if (connector.targetPortID) {\n newValue.targetPortID = connector.targetPortID;\n }\n if (connector.segments) {\n newValue.segments = connector.segments;\n }\n this.diagram.connectorPropertyChange(connector, oldChanges ? oldChanges : {}, newValue);\n // this.diagram.refreshDiagramLayer();\n this.diagram.updateSelector();\n };\n /**\n * @param obj\n * @param tx\n * @param ty\n * @param preventUpdate\n * @param point\n * @param endPoint\n * @param update\n * @param target\n * @param targetPortId\n * @param isDragSource\n * @param segment\n * @private\n */\n CommandHandler.prototype.dragSourceEnd = function (obj, tx, ty, preventUpdate, point, endPoint, update, target, targetPortId, isDragSource, segment) {\n var connector = this.diagram.nameTable[obj.id];\n var oldChanges = {};\n var checkBoundaryConstraints = this.checkBoundaryConstraints(tx, ty, connector.wrapper.bounds);\n if (canDragSourceEnd(connector) && checkBoundaryConstraints\n && (endPoint !== 'BezierSourceThumb') && canPageEditable(this.diagram)) {\n oldChanges = { sourcePoint: connector.sourcePoint };\n oldChanges = cloneObject(oldChanges);\n connector.sourcePoint.x += tx;\n connector.sourcePoint.y += ty;\n if (endPoint === 'ConnectorSourceEnd' && connector.type === 'Orthogonal') {\n this.changeSegmentLength(connector, target, targetPortId, isDragSource);\n }\n if (connector.shape.type === 'Bpmn' && connector.shape.sequence === 'Default' && connector.shape.flow === 'Sequence') {\n this.updatePathElementOffset(connector);\n }\n }\n if (connector.type === 'Bezier') {\n oldChanges = { sourcePoint: connector.sourcePoint };\n if (segment) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorSourceEnd' : endPoint, tx, ty, segment, point, !update);\n }\n else {\n for (var i = 0; i < obj.segments.length; i++) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorSourceEnd' : endPoint, tx, ty, obj.segments[parseInt(i.toString(), 10)], point, !update);\n }\n }\n }\n if (!preventUpdate) {\n this.updateEndPoint(connector, oldChanges);\n }\n if (!(this.diagram.realActions & RealAction.AnimationClick)) {\n this.diagram.refreshCanvasLayers();\n }\n return checkBoundaryConstraints;\n };\n /**\n * Update Path Element offset\n */\n CommandHandler.prototype.updatePathElementOffset = function (connector) {\n connector.wrapper.children.splice(3, 1);\n var pathElement = new PathElement();\n var anglePoints = connector.intermediatePoints;\n pathElement = updatePathElement(anglePoints, connector);\n connector.wrapper.children.splice(3, 0, pathElement);\n };\n /**\n * Upadte the connector segments when change the source node\n */\n CommandHandler.prototype.changeSegmentLength = function (connector, target, targetPortId, isDragSource) {\n // EJ2-65063 - Added below code to check condition if connector segment length can be changed or not.\n // If inconnect and outconnect removed from node constraints\n var canChangeSegment = target ? this.canConnect(connector, target) : true;\n if (connector.segments && connector.segments[0].direction !== null\n && ((!target && connector.sourceID === '') || isDragSource) && canChangeSegment) {\n var first = connector.segments[0];\n var second = connector.segments[1];\n var node = this.diagram.nameTable[connector.sourceID];\n var secPoint = void 0;\n first.points[0] = connector.sourcePoint;\n if (first.direction === 'Top' || first.direction === 'Bottom') {\n first.points[first.points.length - 1].x = connector.sourcePoint.x;\n second.points[0].y = first.points[first.points.length - 1].y;\n }\n else {\n first.points[first.points.length - 1].y = connector.sourcePoint.y;\n second.points[0].x = first.points[first.points.length - 1].x;\n }\n if (first.direction && (first.length || first.length === 0)) {\n first.length = Point.distancePoints(first.points[0], first.points[first.points.length - 1]);\n }\n if (second.direction && (second.length || second.length === 0)) {\n second.length = Point.distancePoints(first.points[first.points.length - 1], second.points[second.points.length - 1]);\n second.direction = Point.direction(first.points[first.points.length - 1], second.points[second.points.length - 1]);\n }\n if (connector.sourcePortID !== '' && first.length < 10) {\n if (connector.segments.length > 2) {\n var next = connector.segments[2];\n var nextDirection = Point.direction(next.points[0], next.points[1]);\n if (first.direction === getOppositeDirection(nextDirection)) {\n if (first.direction === 'Right') {\n next.points[0].x = first.points[first.points.length - 1].x = node.wrapper.corners.middleRight.x + 20;\n }\n else if (first.direction === 'Left') {\n next.points[0].x = first.points[first.points.length - 1].x = node.wrapper.corners.middleLeft.x - 20;\n }\n else if (first.direction === 'Top') {\n next.points[0].y = first.points[first.points.length - 1].y = node.wrapper.corners.topCenter.y - 20;\n }\n else {\n next.points[0].y = first.points[first.points.length - 1].y = node.wrapper.corners.bottomCenter.y + 20;\n }\n if (next.direction && next.length) {\n next.length = Point.distancePoints(next.points[0], next.points[next.points.length - 1]);\n }\n first.length = Point.distancePoints(first.points[0], first.points[first.points.length - 1]);\n }\n else if (first.direction === nextDirection && next.direction && next.length) {\n if (first.direction === 'Top' || first.direction === 'Bottom') {\n next.points[0] = first.points[0];\n next.points[next.points.length - 1].x = next.points[0].x;\n }\n else {\n next.points[0] = first.points[0];\n next.points[next.points.length - 1].y = next.points[0].y;\n }\n next.length = Point.distancePoints(next.points[0], next.points[next.points.length - 1]);\n connector.segments.splice(0, 2);\n }\n else {\n first.length = 20;\n }\n }\n else {\n first.length = 20;\n }\n }\n else if (first.length < 1) {\n if (connector.sourceID !== '') {\n if (second.direction === 'Right') {\n secPoint = node.wrapper.corners.middleRight;\n second.points[second.points.length - 1].y = secPoint.y;\n }\n else if (second.direction === 'Left') {\n secPoint = node.wrapper.corners.middleLeft;\n second.points[second.points.length - 1].y = secPoint.y;\n }\n else if (second.direction === 'Top') {\n secPoint = node.wrapper.corners.topCenter;\n second.points[second.points.length - 1].x = secPoint.x;\n }\n else {\n secPoint = node.wrapper.corners.bottomCenter;\n second.points[second.points.length - 1].x = secPoint.x;\n }\n second.length = Point.distancePoints(secPoint, second.points[second.points.length - 1]);\n if (connector.segments.length > 2) {\n var next = connector.segments[2];\n if (next.direction && next.length) {\n next.length = Point.distancePoints(second.points[second.points.length - 1], next.points[next.points.length - 1]);\n }\n }\n connector.segments.splice(0, 1);\n }\n else {\n connector.segments.splice(0, 1);\n }\n }\n }\n else {\n if (target && !targetPortId && connector.sourceID !== target.id &&\n connector.segments && connector.segments[0].direction !== null\n && target && target instanceof Node && canChangeSegment) {\n this.changeSourceEndToNode(connector, target);\n }\n if (target && targetPortId && connector.sourcePortID !== targetPortId &&\n connector.segments && connector.segments[0].direction !== null\n && target && target instanceof Node && canChangeSegment) {\n this.changeSourceEndToPort(connector, target, targetPortId);\n }\n }\n };\n // EJ2-65063 - Added below method to check if target has inConnect or outConnect. If it does not have inconnect and outconnect means then return false\n CommandHandler.prototype.canConnect = function (connector, target) {\n if (canInConnect(target) && canOutConnect(target)) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Change the connector endPoint to port\n */\n CommandHandler.prototype.changeSourceEndToPort = function (connector, target, targetPortId) {\n var port = this.diagram.getWrapper(target.wrapper, targetPortId);\n var point = { x: port.offsetX, y: port.offsetY };\n var direction = getPortDirection(point, cornersPointsBeforeRotation(target.wrapper), target.wrapper.bounds);\n var firstSegment = connector.segments[0];\n var secondSegment = connector.segments[1];\n if (firstSegment.direction !== direction) {\n var segments = [];\n var segValues = {};\n if (firstSegment.direction === getOppositeDirection(direction)) {\n segValues = {};\n var segValues1 = void 0;\n if (direction === 'Top' || direction === 'Bottom') {\n segValues1 = (direction === 'Top') ? {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(firstSegment.points[0].y - point.y)\n } :\n {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(point.y - firstSegment.points[0].y)\n };\n segValues = (firstSegment.points[0].x > point.x) ?\n { type: 'Orthogonal', isTerminal: true, direction: 'Right', length: (firstSegment.points[0].x - point.x) } :\n { type: 'Orthogonal', isTerminal: true, direction: 'Left', length: (point.x - firstSegment.points[0].x) };\n }\n else {\n segValues1 = (direction === 'Right') ? {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(firstSegment.points[0].x - point.x)\n } :\n {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(point.x - firstSegment.points[0].x)\n };\n segValues = (firstSegment.points[0].y > point.y) ?\n { type: 'Orthogonal', direction: 'Top', isTerminal: true, length: (firstSegment.points[0].y - point.y) } :\n { type: 'Orthogonal', direction: 'Bottom', isTerminal: true, length: (point.y - firstSegment.points[0].y) };\n }\n segments.push(new OrthogonalSegment(connector, 'segments', segValues1, true));\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n }\n else {\n segValues = { type: 'Orthogonal', direction: direction, length: 20, isTerminal: true };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n }\n if (firstSegment.direction !== getOppositeDirection(direction)) {\n if (direction === 'Top' || direction === 'Bottom') {\n firstSegment.points[0].x = point.x;\n firstSegment.points[0].y = firstSegment.points[firstSegment.points.length - 1].y = (direction === 'Top') ?\n point.y - 20 : point.y + 20;\n }\n else {\n firstSegment.points[0].y = point.y;\n firstSegment.points[0].x = firstSegment.points[firstSegment.points.length - 1].x = (direction === 'Right') ?\n point.x + 20 : point.x - 20;\n }\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n secondSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], secondSegment.points[secondSegment.points.length - 1]);\n }\n connector.segments = segments.concat(connector.segments);\n }\n else {\n firstSegment.points[0] = point;\n if (direction === 'Top' || direction === 'Bottom') {\n firstSegment.points[firstSegment.points.length - 1].x = point.x;\n }\n else {\n firstSegment.points[firstSegment.points.length - 1].y = point.y;\n }\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n secondSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], secondSegment.points[secondSegment.points.length - 1]);\n }\n };\n /**\n * @param connector\n * @param changeTerminal\n * @private\nRemove terinal segment in initial\n */\n CommandHandler.prototype.removeTerminalSegment = function (connector, changeTerminal) {\n for (var i = 0; i < connector.segments.length - 2; i++) {\n var segment = connector.segments[0];\n if (segment.isTerminal) {\n if (changeTerminal) {\n segment.isTerminal = false;\n }\n else {\n connector.segments.splice(i, 1);\n i--;\n }\n }\n }\n };\n /**\n * Change the connector endPoint from point to node\n */\n CommandHandler.prototype.changeSourceEndToNode = function (connector, target) {\n this.removeTerminalSegment(connector);\n var sourceWrapper = target.wrapper.children[0].corners;\n var sourcePoint;\n var sourcePoint2;\n var firstSegment = connector.segments[0];\n var nextSegment = connector.segments[1];\n var segments = [];\n if (firstSegment.direction === 'Right' || firstSegment.direction === 'Left') {\n sourcePoint = (firstSegment.direction === 'Left') ? sourceWrapper.middleLeft : sourceWrapper.middleRight;\n if (firstSegment.length > sourceWrapper.width || ((firstSegment.direction === 'Left' &&\n sourcePoint.x >= firstSegment.points[0].x) || (firstSegment.direction === 'Right' &&\n sourcePoint.x <= firstSegment.points[0].x))) {\n firstSegment.points[0].y = firstSegment.points[firstSegment.points.length - 1].y = sourcePoint.y;\n firstSegment.points[0].x = sourcePoint.x;\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n nextSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], nextSegment.points[nextSegment.points.length - 1]);\n }\n else {\n var direction = void 0;\n if (nextSegment.direction) {\n direction = nextSegment.direction;\n }\n else {\n direction = Point.direction(nextSegment.points[0], nextSegment.points[nextSegment.points.length - 1]);\n }\n sourcePoint2 = (direction === 'Bottom') ? sourceWrapper.bottomCenter : sourceWrapper.topCenter;\n if (nextSegment.length && nextSegment.direction) {\n nextSegment.length =\n (direction === 'Top') ? firstSegment.points[firstSegment.points.length - 1].y - (sourcePoint2.y + 20) :\n (sourcePoint2.y + 20) - firstSegment.points[firstSegment.points.length - 1].y;\n }\n firstSegment.length = firstSegment.points[firstSegment.points.length - 1].x - sourcePoint2.x;\n firstSegment.direction = (firstSegment.length > 0) ? 'Right' : 'Left';\n var segValues = { type: 'Orthogonal', direction: direction, length: 20 };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n connector.segments = segments.concat(connector.segments);\n }\n }\n else {\n sourcePoint = (firstSegment.direction === 'Bottom') ? sourceWrapper.bottomCenter : sourceWrapper.topCenter;\n if (firstSegment.length > sourceWrapper.height || ((firstSegment.direction === 'Top' &&\n sourcePoint.y >= firstSegment.points[0].y) ||\n (firstSegment.direction === 'Bottom' && sourcePoint.y <= firstSegment.points[0].y))) {\n firstSegment.points[0].x = firstSegment.points[firstSegment.points.length - 1].x = sourcePoint.x;\n firstSegment.points[0].y = sourcePoint.y;\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n nextSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], nextSegment.points[nextSegment.points.length - 1]);\n }\n else {\n sourcePoint2 = (nextSegment.direction === 'Left') ? sourceWrapper.middleLeft : sourceWrapper.middleRight;\n var direction = void 0;\n if (nextSegment.direction) {\n direction = nextSegment.direction;\n }\n else {\n direction = Point.direction(nextSegment.points[0], nextSegment.points[nextSegment.points.length - 1]);\n }\n if (nextSegment.length && nextSegment.direction) {\n nextSegment.length =\n (direction === 'Left') ? firstSegment.points[firstSegment.points.length - 1].x - (sourcePoint2.x + 20) :\n (sourcePoint2.x + 20) - firstSegment.points[firstSegment.points.length - 1].x;\n }\n firstSegment.length = firstSegment.points[firstSegment.points.length - 1].y - sourcePoint2.y;\n firstSegment.direction = (firstSegment.length > 0) ? 'Bottom' : 'Top';\n var segValues = { type: 'Orthogonal', direction: direction, length: 20 };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n connector.segments = segments.concat(connector.segments);\n }\n }\n };\n //Translate the bezier points during the interaction\n CommandHandler.prototype.translateBezierPoints = function (connector, value, tx, ty, seg, point, update) {\n var index = (connector.segments.indexOf(seg));\n var segment = connector.segments[parseInt(index.toString(), 10)];\n var prevSegment = index > 0 ? connector.segments[index - 1] : null;\n var startPoint = prevSegment !== null ? prevSegment.point : connector.sourcePoint;\n var endPoint = index === connector.segments.length - 1 ? connector.targetPoint : segment.point;\n if (segment) {\n if (value === 'BezierSourceThumb' && (segment.vector1.angle || segment.vector1.distance)) {\n var oldDistance = segment.vector1.distance;\n var oldAngle = segment.vector1.angle;\n segment.vector1 = {\n distance: connector.distance(startPoint, point),\n angle: Point.findAngle(startPoint, point)\n };\n var deltaLength = segment.vector1.distance - oldDistance;\n var deltaAngle = segment.vector1.angle - oldAngle;\n this.translateSubsequentSegment(connector, seg, true, deltaLength, deltaAngle);\n }\n else if (value === 'BezierTargetThumb' && (segment.vector2.angle || segment.vector2.distance)) {\n var oldDistance = segment.vector2.distance;\n var oldAngle = segment.vector2.angle;\n segment.vector2 = {\n distance: connector.distance(endPoint, point),\n angle: Point.findAngle(endPoint, point)\n };\n var deltaLength = segment.vector2.distance - oldDistance;\n var deltaAngle = segment.vector2.angle - oldAngle;\n this.translateSubsequentSegment(connector, seg, false, deltaLength, deltaAngle);\n }\n else if ((value === 'ConnectorSourceEnd' && !connector.sourceID || value === 'ConnectorTargetEnd' && !connector.targetID)\n && update && isEmptyVector(segment.vector1) && isEmptyVector(segment.vector2)) {\n if (Point.isEmptyPoint(segment.point1)) {\n segment.bezierPoint1 = getBezierPoints(connector.sourcePoint, connector.targetPoint);\n }\n if (Point.isEmptyPoint(segment.point2)) {\n segment.bezierPoint2 = getBezierPoints(connector.targetPoint, connector.sourcePoint);\n }\n }\n else if (value === 'BezierSourceThumb' || (value === 'ConnectorSourceEnd' && !update && isEmptyVector(segment.vector1))) {\n segment.bezierPoint1.x += tx;\n segment.bezierPoint1.y += ty;\n if ((!Point.isEmptyPoint(segment.point1)) || (update)) {\n segment.point1 = { x: segment.bezierPoint1.x, y: segment.bezierPoint1.y };\n }\n }\n else if (value === 'BezierTargetThumb' || (value === 'ConnectorTargetEnd' && !update && isEmptyVector(segment.vector2))) {\n segment.bezierPoint2.x += tx;\n segment.bezierPoint2.y += ty;\n if ((!Point.isEmptyPoint(segment.point2)) || (update)) {\n segment.point2 = { x: segment.bezierPoint2.x, y: segment.bezierPoint2.y };\n }\n }\n }\n };\n CommandHandler.prototype.translateSubsequentSegment = function (connector, seg, isSourceEnd, deltaLength, deltaAngle) {\n var index = (connector.segments.indexOf(seg));\n var segment = connector.segments[parseInt(index.toString(), 10)];\n if (!(connector.bezierSettings.smoothness & BezierSmoothness.SymmetricAngle)) {\n deltaAngle = null;\n }\n if (!(connector.bezierSettings.smoothness & BezierSmoothness.SymmetricDistance)) {\n deltaLength = null;\n }\n if (deltaLength == null && deltaAngle == null) {\n return;\n }\n if (isSourceEnd) {\n if (index !== 0) {\n this.updatePreviousBezierSegment(connector, index, deltaLength, deltaAngle);\n }\n }\n else {\n if (index !== connector.segments.length - 1) {\n this.updateNextBezierSegment(connector, index, deltaLength, deltaAngle);\n }\n }\n };\n CommandHandler.prototype.updatePreviousBezierSegment = function (connector, index, deltaLength, deltaAngle) {\n var segment = connector.segments[index - 1];\n var newDistance = segment.vector2.distance + deltaLength;\n var newAngle = (segment.vector2.angle + deltaAngle) % 360;\n if (newAngle < 0) {\n newAngle += 360;\n }\n segment.vector2 = { distance: newDistance, angle: newAngle };\n };\n CommandHandler.prototype.updateNextBezierSegment = function (connector, index, deltaLength, deltaAngle) {\n var segment = connector.segments[index + 1];\n var newDistance = segment.vector1.distance + deltaLength;\n var newAngle = (segment.vector1.angle + deltaAngle) % 360;\n if (newAngle < 0) {\n newAngle += 360;\n }\n segment.vector1 = { distance: newDistance, angle: newAngle };\n };\n /**\n * dragTargetEnd method \\\n *\n * @returns { void } dragTargetEnd method .\\\n * @param {ConnectorModel} obj - provide the obj value.\n * @param {number} tx - provide the tx value.\n * @param {number} ty - provide the ty value.\n * @param {boolean} preventUpdate - provide the preventUpdate value.\n * @param {PointModel} point - provide the point value.\n * @param {string} endPoint - provide the endPoint value.\n * @param {boolean} update - provide the update value.\n * @param {OrthogonalSegmentModel | BezierSegmentModel | StraightSegmentModel} segment - provide the segment value.\n *\n * @private\n */\n CommandHandler.prototype.dragTargetEnd = function (obj, tx, ty, preventUpdate, point, endPoint, update, segment) {\n var connector = this.diagram.nameTable[obj.id];\n var oldChanges;\n var boundaryConstraints = this.checkBoundaryConstraints(tx, ty, connector.wrapper.bounds);\n if (canDragTargetEnd(connector) && endPoint !== 'BezierTargetThumb'\n && boundaryConstraints && canPageEditable(this.diagram)) {\n oldChanges = { targetPoint: connector.targetPoint };\n oldChanges = cloneObject(oldChanges);\n connector.targetPoint.x += tx;\n connector.targetPoint.y += ty;\n if (endPoint === 'ConnectorTargetEnd' && connector.type === 'Orthogonal' &&\n connector.segments && connector.segments.length > 0) {\n var prev = connector.segments[connector.segments.length - 2];\n if (prev && connector.segments[connector.segments.length - 1].points.length === 2) {\n if (prev.direction === 'Left' || prev.direction === 'Right') {\n prev.points[prev.points.length - 1].x = connector.targetPoint.x;\n }\n else {\n prev.points[prev.points.length - 1].y = connector.targetPoint.y;\n }\n prev.length = Point.distancePoints(prev.points[0], prev.points[prev.points.length - 1]);\n prev.direction = Point.direction(prev.points[0], prev.points[prev.points.length - 1]);\n }\n }\n if (connector.shape.type === 'Bpmn' && connector.shape.sequence === 'Default' && connector.shape.flow === 'Sequence') {\n this.updatePathElementOffset(connector);\n }\n }\n if (connector.type === 'Bezier') {\n oldChanges = { targetPoint: connector.targetPoint };\n if (segment) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorTargetEnd' : endPoint, tx, ty, segment, point, !update);\n }\n else {\n for (var i = 0; i < obj.segments.length; i++) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorTargetEnd' : endPoint, tx, ty, obj.segments[parseInt(i.toString(), 10)], point, !update);\n }\n }\n }\n if (!preventUpdate) {\n this.updateEndPoint(connector, oldChanges);\n }\n if (!(this.diagram.realActions & RealAction.AnimationClick)) {\n this.diagram.refreshCanvasLayers();\n }\n return boundaryConstraints;\n };\n /**\n * dragControlPoint method \\\n *\n * @returns { void } dragControlPoint method .\\\n * @param {ConnectorModel} obj - provide the obj value.\n * @param {number} tx - provide the tx value.\n * @param {number} ty - provide the ty value.\n * @param {boolean} preventUpdate - provide the preventUpdate value.\n * @param {number} segmentNumber - provide the segmentNumber value.\n *\n * @private\n */\n CommandHandler.prototype.dragControlPoint = function (obj, tx, ty, preventUpdate, segmentNumber) {\n var connector = this.diagram.nameTable[obj.id];\n if ((connector.type === 'Straight' || connector.type === 'Bezier') && connector.segments.length > 0) {\n if (segmentNumber !== undefined && connector.segments[parseInt(segmentNumber.toString(), 10)]) {\n if (connector.type === 'Bezier') {\n var seg = connector.segments[parseInt(segmentNumber.toString(), 10)];\n var isInternalSegment = seg.isInternalSegment;\n if (!isInternalSegment || connector.bezierSettings === null || connector.bezierSettings.segmentEditOrientation === 'FreeForm') {\n seg.point.x += tx;\n seg.point.y += ty;\n }\n else {\n if (seg.orientation === 'Horizontal') {\n seg.point.x += tx;\n }\n else {\n seg.point.y += ty;\n }\n this.updateDirectionalBezierCurve(connector);\n }\n if (isInternalSegment) {\n connector.isBezierEditing = true;\n }\n }\n else {\n connector.segments[parseInt(segmentNumber.toString(), 10)].point.x += tx;\n connector.segments[parseInt(segmentNumber.toString(), 10)].point.y += ty;\n }\n }\n else {\n for (var i = 0; i < connector.segments.length - 1; i++) {\n connector.segments[parseInt(i.toString(), 10)].point.x += tx;\n connector.segments[parseInt(i.toString(), 10)].point.y += ty;\n }\n }\n if (!preventUpdate) {\n this.updateEndPoint(connector);\n }\n }\n return true;\n };\n CommandHandler.prototype.updateDirectionalBezierCurve = function (connector) {\n var pts = [];\n pts.push(connector.sourcePoint);\n for (var i = 0; i < connector.segments.length - 1; i++) {\n var seg = connector.segments[parseInt(i.toString(), 10)];\n if (seg.orientation === 'Horizontal') {\n pts.push({ x: seg.point.x, y: pts[pts.length - 1].y });\n }\n else {\n pts.push({ x: pts[pts.length - 1].x, y: seg.point.y });\n }\n if (i === connector.segments.length - 2) {\n if (seg.orientation === 'Horizontal') {\n pts.push({ x: seg.point.x, y: connector.targetPoint.y });\n }\n else {\n pts.push({ x: connector.targetPoint.x, y: seg.point.y });\n }\n }\n }\n pts.push(connector.targetPoint);\n var start = pts[0];\n var end = pts[pts.length - 1];\n if (connector.segments.length > 1) {\n var mid1 = pts[1];\n var mid2 = pts[2];\n var center1 = { x: (mid1.x + mid2.x) * 0.5, y: (mid1.y + mid2.y) * 0.5 };\n var segment1 = connector.segments[0];\n segment1.vector1.angle = findAngle(start, mid1);\n segment1.vector1.distance = Point.findLength(start, mid1) * 0.5;\n segment1.vector2.angle = findAngle(center1, mid1);\n segment1.vector2.distance = Point.findLength(center1, mid1) * 0.5;\n segment1.point = center1;\n var segment2 = connector.segments[1];\n segment2.vector1.angle = findAngle(center1, mid2);\n segment2.vector1.distance = Point.findLength(center1, mid2) * 0.5;\n if (connector.segments.length > 2) {\n var mid3 = pts[3];\n var center2 = { x: (mid2.x + mid3.x) * 0.5, y: (mid2.y + mid3.y) * 0.5 };\n segment2.vector2.angle = findAngle(center2, mid2);\n segment2.vector2.distance = Point.findLength(center2, mid2) * 0.5;\n segment2.point = center2;\n var segment3 = connector.segments[2];\n segment3.vector1.angle = findAngle(center2, mid3);\n segment3.vector1.distance = Point.findLength(center2, mid3) * 0.5;\n if (connector.segments.length > 3) {\n var mid4 = pts[4];\n var center3 = { x: (mid3.x + mid4.x) * 0.5, y: (mid3.y + mid4.y) * 0.5 };\n segment3.vector2.angle = findAngle(center3, mid3);\n segment3.vector2.distance = Point.findLength(center3, mid3) * 0.5;\n segment3.point = center3;\n var segment4 = connector.segments[3];\n segment4.vector1.angle = findAngle(center3, mid4);\n segment4.vector1.distance = Point.findLength(center3, mid4) * 0.5;\n segment4.vector2.angle = findAngle(end, mid4);\n segment4.vector2.distance = Point.findLength(end, mid4) * 0.5;\n }\n else {\n segment3.vector2.angle = findAngle(end, mid3);\n segment3.vector2.distance = Point.findLength(end, mid3) * 0.5;\n }\n }\n else {\n segment2.vector2.angle = findAngle(end, mid2);\n segment2.vector2.distance = Point.findLength(end, mid2) * 0.5;\n }\n }\n };\n // /**\n // * rotatePropertyChnage method \\\n // *\n // * @returns { void } rotatePropertyChnage method .\\\n // * @param {number} angle - provide the obj value.\n // *\n // * @private\n // */\n // public rotatePropertyChnage(angle: number): void {\n // const selectedItems: SelectorModel = this.diagram.selectedItems;\n // let objects: (NodeModel | ConnectorModel)[] = [];\n // objects = objects.concat(selectedItems.nodes);\n // objects = objects.concat(selectedItems.connectors);\n // const pivotValue: PointModel = { x: selectedItems.offsetX, y: selectedItems.offsetY };\n // this.rotateObjects(selectedItems, objects, angle - selectedItems.rotateAngle, pivotValue);\n // selectedItems.wrapper.rotateAngle = selectedItems.rotateAngle = angle;\n // this.diagram.updateSelector();\n // }\n /**\n * rotateObjects method \\\n *\n * @returns { void } rotateObjects method .\\\n * @param {NodeModel | SelectorModel} parent - provide the parent value.\n * @param {(NodeModel | ConnectorModel)[]} objects - provide the objects value.\n * @param {number} angle - provide the angle value.\n * @param {PointModel} pivot - provide the pivot value.\n * @param {boolean} includeParent - provide the includeParent value.\n *\n * @private\n */\n CommandHandler.prototype.rotateObjects = function (parent, objects, angle, pivot, includeParent) {\n pivot = pivot || {};\n var matrix = identityMatrix();\n rotateMatrix(matrix, angle, pivot.x, pivot.y);\n var oldValues;\n for (var _i = 0, objects_2 = objects; _i < objects_2.length; _i++) {\n var obj = objects_2[_i];\n if (obj instanceof Node) {\n if (canRotate(obj) && canPageEditable(this.diagram)) {\n if (includeParent !== false || parent !== obj) {\n //918299 - Flip and rotation of the group node now work properly by calculating the wrapper offset instead of the individual offset\n oldValues = { offsetX: obj.wrapper.offsetX, offsetY: obj.wrapper.offsetY, rotateAngle: obj.rotateAngle };\n //909137 - Undo Operation Improper After Rotating Node Counterclockwise. Remove the below line and add the angle to same line.\n obj.rotateAngle = ((obj.rotateAngle + angle) + 360) % 360;\n var newOffset = transformPointByMatrix(matrix, { x: obj.wrapper.offsetX, y: obj.wrapper.offsetY });\n obj.offsetX = newOffset.x;\n obj.offsetY = newOffset.y;\n this.diagram.nodePropertyChange(obj, {}, { offsetX: obj.offsetX, offsetY: obj.offsetY, rotateAngle: obj.rotateAngle });\n }\n if (obj.processId) {\n var parent_3 = this.diagram.nameTable[obj.processId];\n var bound = this.diagram.bpmnModule.getChildrenBound(parent_3, obj.id, this.diagram);\n this.diagram.bpmnModule.updateSubProcessess(bound, obj, this.diagram);\n }\n if (obj.children && obj.children.length && !obj.container) {\n this.getChildren(obj, objects);\n }\n }\n }\n else {\n this.rotatePoints(obj, angle, pivot || { x: obj.wrapper.offsetX, y: obj.wrapper.offsetY });\n }\n this.diagram.updateDiagramObject(obj);\n }\n this.diagram.refreshCanvasLayers();\n this.diagram.updateSelector();\n };\n /**\n * snapConnectorEnd method \\\n *\n * @returns { PointModel } snapConnectorEnd method .\\\n * @param {PointModel} currentPosition - provide the parent value.\n *\n * @private\n */\n CommandHandler.prototype.snapConnectorEnd = function (currentPosition) {\n if ((this.diagram.snapSettings.constraints & SnapConstraints.SnapToLines)\n && this.snappingModule) {\n this.diagram.snappingModule.snapConnectorEnd(currentPosition);\n }\n return currentPosition;\n };\n /**\n * snapAngle method \\\n *\n * @returns { number } snapAngle method .\\\n * @param {number} angle - provide the parent value.\n *\n * @private\n */\n CommandHandler.prototype.snapAngle = function (angle) {\n if ((this.diagram.snapSettings.constraints & SnapConstraints.SnapToLines)\n && this.snappingModule) {\n return this.snappingModule.snapAngle(this.diagram, angle);\n }\n else {\n return 0;\n }\n };\n /**\n * rotatePoints method \\\n *\n * @returns { number } rotatePoints method .\\\n * @param {Connector} conn - provide the parent value.\n * @param {number} angle - provide the parent value.\n * @param {PointModel} pivot - provide the parent value.\n *\n * @private\n */\n CommandHandler.prototype.rotatePoints = function (conn, angle, pivot) {\n if (!conn.sourceWrapper || !conn.targetWrapper) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, angle, pivot.x, pivot.y);\n conn.sourcePoint = transformPointByMatrix(matrix, conn.sourcePoint);\n conn.targetPoint = transformPointByMatrix(matrix, conn.targetPoint);\n if (conn.shape.type === 'Bpmn' && conn.shape.sequence === 'Default' && conn.shape.flow === 'Sequence') {\n this.updatePathElementOffset(conn);\n }\n var newProp = { sourcePoint: conn.sourcePoint, targetPoint: conn.targetPoint };\n this.diagram.connectorPropertyChange(conn, {}, newProp);\n if (conn.segments && conn.segments.length > 0) {\n this.diagram.protectPropertyChange(true);\n var connector = conn;\n connector.segments = [];\n this.diagram.connectorPropertyChange(connector, {}, { segments: connector.segments });\n this.diagram.protectPropertyChange(false);\n }\n }\n };\n CommandHandler.prototype.updateInnerParentProperties = function (tempNode) {\n var elements = [];\n var protect = 'isProtectedOnChange';\n var protectChange = this.diagram[\"\" + protect];\n this.diagram.protectPropertyChange(true);\n var innerParents = this.getAllDescendants(tempNode, elements, false, true);\n for (var i = 0; i < innerParents.length; i++) {\n var obj = this.diagram.nameTable[innerParents[parseInt(i.toString(), 10)].id];\n obj.offsetX = obj.wrapper.offsetX;\n obj.offsetY = obj.wrapper.offsetY;\n obj.width = obj.wrapper.width;\n obj.height = obj.wrapper.height;\n }\n this.diagram.protectPropertyChange(protectChange);\n };\n /**\n * scale method \\\n *\n * @returns { boolean } scale method .\\\n * @param {NodeModel | ConnectorModel} obj - provide the parent value.\n * @param {number} sw - provide the parent value.\n * @param {number} sh - provide the parent value.\n * @param {number} pivot - provide the parent value.\n * @param {number} refObject - provide the parent value.\n * @param {boolean} isOutsideBoundary - provide the parent value.\n *\n * @private\n */\n // eslint-disable-next-line max-len\n CommandHandler.prototype.scale = function (obj, sw, sh, pivot, refObject, isOutsideBoundary) {\n var node = this.diagram.nameTable[obj.id];\n var tempNode = node;\n var elements = [];\n var element = node.wrapper;\n if (!refObject) {\n refObject = obj;\n }\n var refWrapper = refObject.wrapper;\n var x = refWrapper.offsetX - refWrapper.actualSize.width * refWrapper.pivot.x;\n var y = refWrapper.offsetY - refWrapper.actualSize.height * refWrapper.pivot.y;\n var refPoint = getPoint(x, y, refWrapper.actualSize.width, refWrapper.actualSize.height, refWrapper.rotateAngle, refWrapper.offsetX, refWrapper.offsetY, pivot);\n if (element.actualSize.width !== undefined && element.actualSize.height !== undefined && canPageEditable(this.diagram)) {\n if (tempNode.children && !(tempNode.container)) {\n var nodes = this.getAllDescendants(tempNode, elements);\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var temp = nodes_1[_i];\n this.scaleObject(sw, sh, refPoint, temp, element, refObject);\n }\n obj.wrapper.measure(new Size());\n obj.wrapper.arrange(obj.wrapper.desiredSize);\n this.diagram.updateGroupOffset(node);\n this.updateInnerParentProperties(tempNode);\n }\n else {\n this.scaleObject(sw, sh, refPoint, node, element, refObject);\n }\n var bounds = getBounds(obj.wrapper);\n var checkBoundaryConstraints = this.checkBoundaryConstraints(undefined, undefined, bounds);\n if (!checkBoundaryConstraints && isOutsideBoundary) {\n this.scale(obj, 1 / sw, 1 / sh, pivot, undefined, true);\n return false;\n }\n this.diagram.updateDiagramObject(obj);\n }\n return true;\n };\n /** @private */\n CommandHandler.prototype.getAllDescendants = function (node, nodes, includeParent, innerParent) {\n var temp = node;\n var parentNodes = [];\n for (var i = 0; i < temp.children.length; i++) {\n node = (this.diagram.nameTable[temp.children[parseInt(i.toString(), 10)]]);\n if (node) {\n if (!node.children) {\n nodes.push(node);\n }\n else {\n if (includeParent) {\n nodes.push(node);\n }\n if (innerParent) {\n parentNodes.push(node);\n }\n nodes = this.getAllDescendants(node, nodes);\n }\n }\n }\n return (innerParent) ? parentNodes : nodes;\n };\n /**\n * getChildren method \\\n *\n * @returns { (NodeModel | ConnectorModel)[]): (NodeModel | ConnectorModel)[] } getChildren method .\\\n * @param {NodeModel} node - provide the sw value.\n * @param {(NodeModel | ConnectorModel)[]} nodes - provide the sw value.\n *\n * @private\n */\n CommandHandler.prototype.getChildren = function (node, nodes) {\n var temp = node;\n if (node.children) {\n for (var i = 0; i < temp.children.length; i++) {\n node = (this.diagram.nameTable[temp.children[parseInt(i.toString(), 10)]]);\n nodes.push(node);\n }\n }\n return nodes;\n };\n /**\n * scaleObject method \\\n *\n * @returns { NodeModel } scaleObject method .\\\n * @param {string} id - provide the sw value.\n *\n * @private\n */\n CommandHandler.prototype.cloneChild = function (id) {\n var node = this.diagram.nameTable[\"\" + id];\n return node;\n };\n /**\n * scaleObject method \\\n *\n * @returns { void } scaleObject method .\\\n * @param {End} sw - provide the sw value.\n * @param {End} sh - provide the sh value.\n * @param {PointModel} pivot - provide the pivot value.\n * @param {IElement} obj - provide the pivot value.\n * @param {DiagramElement} element - provide the element value.\n * @param {IElement} refObject - provide the refObject value.\n *\n * @private\n */\n CommandHandler.prototype.scaleObject = function (sw, sh, pivot, obj, element, refObject, canUpdate) {\n sw = sw < 0 ? 1 : sw;\n sh = sh < 0 ? 1 : sh;\n var oldValues = {};\n if (sw !== 1 || sh !== 1) {\n var width = void 0;\n var height = void 0;\n if (obj instanceof Node) {\n var node = obj;\n var isResize = void 0;\n var bound = void 0;\n oldValues = {\n width: obj.wrapper.actualSize.width, height: obj.wrapper.actualSize.height,\n offsetX: obj.wrapper.offsetX, offsetY: obj.wrapper.offsetY,\n margin: { top: node.margin.top, left: node.margin.left }\n };\n if (node.shape.type === 'Bpmn' && node.shape.activity.subProcess.processes\n && node.shape.activity.subProcess.processes.length > 0) {\n bound = this.diagram.bpmnModule.getChildrenBound(node, node.id, this.diagram);\n isResize = node.wrapper.bounds.containsRect(bound);\n }\n width = node.wrapper.actualSize.width * sw;\n height = node.wrapper.actualSize.height * sh;\n if (node.maxWidth !== undefined && node.maxWidth !== 0) {\n width = Math.min(node.maxWidth, width);\n }\n if (node.minWidth !== undefined && node.minWidth !== 0) {\n width = Math.max(node.minWidth, width);\n }\n if (node.maxHeight !== undefined && node.maxHeight !== 0) {\n height = Math.min(node.maxHeight, height);\n }\n if (node.minHeight !== undefined && node.minHeight !== 0) {\n height = Math.max(node.minHeight, height);\n }\n if (isResize) {\n width = Math.max(width, (bound.right - node.wrapper.bounds.x));\n height = Math.max(height, (bound.bottom - node.wrapper.bounds.y));\n }\n sw = width / node.actualSize.width;\n sh = height / node.actualSize.height;\n }\n var matrix = identityMatrix(); // let refWrapper: DiagramElement;\n if (!refObject) {\n refObject = obj;\n }\n var refWrapper = refObject.wrapper;\n rotateMatrix(matrix, -refWrapper.rotateAngle, pivot.x, pivot.y);\n scaleMatrix(matrix, sw, sh, pivot.x, pivot.y);\n rotateMatrix(matrix, refWrapper.rotateAngle, pivot.x, pivot.y);\n if (obj instanceof Node) {\n var node = obj; //let left: number; let top: number;\n var newPosition = transformPointByMatrix(matrix, { x: node.wrapper.offsetX, y: node.wrapper.offsetY });\n var oldleft = node.wrapper.offsetX - node.wrapper.actualSize.width * node.pivot.x;\n var oldtop = node.wrapper.offsetY - node.wrapper.actualSize.height * node.pivot.y;\n if (width > 0) {\n if (node.processId) {\n var parent_4 = this.diagram.nameTable[node.processId];\n if (!parent_4.maxWidth || ((node.margin.left + width) < parent_4.maxWidth)) {\n node.width = width;\n node.offsetX = newPosition.x;\n }\n }\n else {\n node.width = width;\n node.offsetX = newPosition.x;\n }\n }\n if (height > 0) {\n if (node.processId) {\n var parent_5 = this.diagram.nameTable[node.processId];\n if (!parent_5.maxHeight || ((node.margin.top + height) < parent_5.maxHeight)) {\n node.height = height;\n node.offsetY = newPosition.y;\n }\n }\n else {\n node.height = height;\n node.offsetY = newPosition.y;\n }\n }\n var left = node.wrapper.offsetX - node.wrapper.actualSize.width * node.pivot.x;\n var top_1 = node.wrapper.offsetY - node.wrapper.actualSize.height * node.pivot.y;\n var parent_6 = this.diagram.nameTable[node.processId];\n if (parent_6 && ((node.margin.top + (top_1 - oldtop)) <= 0 ||\n (node.margin.left + (left - oldleft) <= 0))) {\n this.diagram.nodePropertyChange(obj, {}, {\n margin: { top: node.margin.top, left: node.margin.left }\n });\n }\n else {\n if (checkParentAsContainer(this.diagram, obj, true)) {\n checkChildNodeInContainer(this.diagram, obj);\n }\n else {\n if (!canUpdate) {\n this.diagram.nodePropertyChange(obj, oldValues, {\n width: node.width, height: node.height, offsetX: node.offsetX, offsetY: node.offsetY,\n margin: { top: node.margin.top + (top_1 - oldtop), left: node.margin.left + (left - oldleft) }\n });\n }\n }\n }\n }\n else {\n var connector = obj;\n var oldValues_1 = { sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint };\n if (!connector.sourceWrapper || !connector.targetWrapper) {\n this.scaleConnector(connector, matrix, oldValues_1, sw, sh, pivot);\n }\n }\n var parentNode = this.diagram.nameTable[obj.processId];\n if (parentNode) {\n var parent_7 = parentNode.wrapper.bounds;\n var child = obj.wrapper.bounds;\n var bound = this.diagram.bpmnModule.getChildrenBound(parentNode, obj.id, this.diagram);\n this.diagram.bpmnModule.updateSubProcessess(bound, obj, this.diagram);\n }\n }\n };\n CommandHandler.prototype.scaleConnector = function (connector, matrix, oldValues, sw, sh, pivot) {\n connector.sourcePoint = transformPointByMatrix(matrix, connector.sourcePoint);\n connector.targetPoint = transformPointByMatrix(matrix, connector.targetPoint);\n if (connector.shape.type === 'Bpmn' && connector.shape.sequence === 'Default' && connector.shape.flow === 'Sequence') {\n this.updatePathElementOffset(connector);\n }\n var newProp = { sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint };\n this.diagram.connectorPropertyChange(connector, oldValues, newProp);\n var selector = this.diagram.selectedItems;\n if (selectionHasConnector(this.diagram, selector)) {\n var clonedSelectedItems = cloneObject(this.diagram.selectedItems);\n var nodeModel = {\n offsetX: clonedSelectedItems.offsetX, offsetY: clonedSelectedItems.offsetY,\n height: clonedSelectedItems.height, width: clonedSelectedItems.width,\n rotateAngle: clonedSelectedItems.rotateAngle\n };\n var obj = new Node(this.diagram, 'nodes', nodeModel, true);\n obj.wrapper = clonedSelectedItems.wrapper;\n obj.wrapper.rotateAngle = selector.rotateAngle;\n this.scaleObject(sw, sh, pivot, obj, obj.wrapper, obj, true);\n selector.wrapper.actualSize.width = obj.width;\n selector.wrapper.actualSize.height = obj.height;\n selector.wrapper.offsetX = obj.offsetX;\n selector.wrapper.offsetY = obj.offsetY;\n var child = this.diagram.selectedItems.connectors[0];\n if (child.id !== connector.id) {\n this.measureSelector(selector);\n }\n }\n };\n CommandHandler.prototype.measureSelector = function (selector) {\n var desiredBounds = undefined;\n //Measuring the children\n var clonedSelectedItems = cloneObject(this.diagram.selectedItems);\n var objects = [];\n var bounds;\n objects = clonedSelectedItems.connectors;\n var pivot = { x: this.diagram.selectedItems.offsetX, y: this.diagram.selectedItems.offsetY };\n for (var i = 0; i < objects.length; i++) {\n var matrix_1 = identityMatrix();\n rotateMatrix(matrix_1, -selector.rotateAngle, pivot.x, pivot.y);\n objects[parseInt(i.toString(), 10)].sourcePoint\n = transformPointByMatrix(matrix_1, objects[parseInt(i.toString(), 10)].sourcePoint);\n objects[parseInt(i.toString(), 10)].targetPoint\n = transformPointByMatrix(matrix_1, objects[parseInt(i.toString(), 10)].targetPoint);\n var p1 = {\n x: objects[parseInt(i.toString(), 10)].sourcePoint.x,\n y: objects[parseInt(i.toString(), 10)].sourcePoint.y\n };\n var p2 = {\n x: objects[parseInt(i.toString(), 10)].targetPoint.x,\n y: objects[parseInt(i.toString(), 10)].targetPoint.y\n };\n bounds = (this.calculateBounds(p1, p2));\n if (desiredBounds === undefined) {\n desiredBounds = bounds;\n }\n else {\n desiredBounds.uniteRect(bounds);\n }\n }\n var offsetPt = {};\n if (desiredBounds !== undefined) {\n offsetPt = {\n x: desiredBounds.x + desiredBounds.width * selector.wrapper.pivot.x,\n y: desiredBounds.y + desiredBounds.height * selector.wrapper.pivot.y\n };\n }\n var nodeModel = {\n offsetX: offsetPt.x, offsetY: offsetPt.y,\n height: desiredBounds.height, width: desiredBounds.width, rotateAngle: 0\n };\n var obj = new Node(this.diagram, 'nodes', nodeModel, true);\n var matrix = identityMatrix();\n rotateMatrix(matrix, selector.rotateAngle, pivot.x, pivot.y);\n obj.rotateAngle += selector.rotateAngle;\n obj.rotateAngle = (obj.rotateAngle + 360) % 360;\n var newOffset = transformPointByMatrix(matrix, { x: obj.offsetX, y: obj.offsetY });\n obj.offsetX = newOffset.x;\n obj.offsetY = newOffset.y;\n selector.wrapper.actualSize.width = desiredBounds.width;\n selector.wrapper.actualSize.height = desiredBounds.height;\n selector.wrapper.offsetX = obj.offsetX;\n selector.wrapper.offsetY = obj.offsetY;\n var selectorEle = getSelectorElement(this.diagram.element.id);\n // EJ2-69511 - Added handleSize parameter to avoid exception when we perform multiselect of connectors, rotate and resize it.\n this.diagram.diagramRenderer.renderResizeHandle(selector.wrapper, selectorEle, selector.thumbsConstraints, this.diagram.scroller.currentZoom, selector.constraints, this.diagram.scroller.transform, false, canMove(selector), null, null, selector.handleSize);\n };\n CommandHandler.prototype.calculateBounds = function (p1, p2) {\n var left = Math.min(p1.x, p2.x);\n var right = Math.max(p1.x, p2.x);\n var top = Math.min(p1.y, p2.y);\n var bottom = Math.max(p1.y, p2.y);\n var width = right - left;\n var height = bottom - top;\n var rect = new Rect(left, top, width, height);\n return rect;\n };\n /**\n * portDrag method \\\n *\n * @returns { void } portDrag method .\\\n * @param { NodeModel | ConnectorModel} obj - provide the obj value.\n * @param {DiagramElement} portElement - provide the portElement value.\n * @param {number} tx - provide the tx value.\n * @param {number} ty - provide the tx value.\n *\n * @private\n */\n CommandHandler.prototype.portDrag = function (obj, portElement, tx, ty) {\n var oldValues;\n var changedvalues;\n var port = this.findTarget(portElement, obj);\n var bounds = getBounds(obj.wrapper);\n if (port && canDrag(port, this.diagram)) {\n // Feature 826644: Support to add ports to the connector. Added below condition to check connector port.\n if (obj instanceof Node) {\n oldValues = this.getPortChanges(obj, port);\n port.offset.x += (tx / bounds.width);\n port.offset.y += (ty / bounds.height);\n changedvalues = this.getPortChanges(obj, port);\n this.diagram.nodePropertyChange(obj, oldValues, changedvalues);\n }\n else {\n oldValues = this.getConnectorPortChanges(obj, port);\n this.updatePortOffset(obj, port, tx, ty);\n port.alignment = 'Center';\n changedvalues = this.getConnectorPortChanges(obj, port);\n this.diagram.connectorPropertyChange(obj, oldValues, changedvalues);\n }\n this.diagram.updateDiagramObject(obj);\n }\n };\n /** @private */\n CommandHandler.prototype.labelDrag = function (obj, textElement, tx, ty) {\n //let changedvalues: Object;\n //let label: ShapeAnnotationModel | PathAnnotationModel;\n // eslint-disable-next-line max-len\n var label = this.findTarget(textElement, obj);\n var bounds = cornersPointsBeforeRotation(obj.wrapper);\n var oldValues = this.getAnnotationChanges(obj, label);\n if (label instanceof ShapeAnnotation) {\n label.offset.x += (tx / bounds.width);\n label.offset.y += (ty / bounds.height);\n }\n else {\n this.updatePathAnnotationOffset(obj, label, tx, ty);\n if (label instanceof PathAnnotation) {\n label.alignment = 'Center';\n }\n }\n var changedvalues = this.getAnnotationChanges(obj, label);\n if (obj instanceof Node) {\n this.diagram.nodePropertyChange(obj, oldValues, changedvalues);\n }\n else {\n this.diagram.connectorPropertyChange(obj, oldValues, changedvalues);\n }\n this.diagram.updateDiagramObject(obj);\n if (!isSelected(this.diagram, label, false, textElement)) {\n this.labelSelect(obj, textElement);\n }\n };\n CommandHandler.prototype.updatePathAnnotationOffset = function (object, label, tx, ty, newPosition, size) {\n var textWrapper = this.diagram.getWrapper(object.wrapper, label.id);\n var offsetX = textWrapper.offsetX;\n var offsetY = textWrapper.offsetY;\n var offset;\n var intermediatePoints = object.intermediatePoints;\n var prev;\n var pointLength = 0;\n var totalLength = 0;\n var intersectingOffset;\n var currentPosition;\n switch (label.verticalAlignment) {\n case 'Center':\n if (label.horizontalAlignment === 'Center') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + tx, y: offsetY + ty };\n }\n else if (label.horizontalAlignment === 'Right') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + (textWrapper.actualSize.width) / 2 + tx, y: offsetY + ty };\n }\n else if (label.horizontalAlignment === 'Left') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX - (textWrapper.actualSize.width) / 2 + tx, y: offsetY + ty };\n }\n break;\n case 'Top':\n if (label.horizontalAlignment === 'Center') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + tx, y: offsetY - (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (label.horizontalAlignment === 'Right') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX + (textWrapper.actualSize.width) / 2 + tx, y: offsetY - (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (label.horizontalAlignment === 'Left') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX - (textWrapper.actualSize.width) / 2 + tx, y: offsetY - (textWrapper.actualSize.height) / 2 + ty };\n }\n break;\n case 'Bottom':\n if (label.horizontalAlignment === 'Center') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + tx, y: offsetY + (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (label.horizontalAlignment === 'Right') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX + (textWrapper.actualSize.width) / 2 + tx, y: offsetY + (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (label.horizontalAlignment === 'Left') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX - (textWrapper.actualSize.width) / 2 + tx, y: offsetY + (textWrapper.actualSize.height) / 2 + ty };\n }\n break;\n }\n var intersetingPts = this.getInterceptWithSegment(currentPosition, intermediatePoints);\n var newOffset = intermediatePoints[intermediatePoints.length - 1];\n totalLength = Point.getLengthFromListOfPoints(intermediatePoints);\n if (intersetingPts.length > 0) {\n label.dragLimit = label.dragLimit ? label.dragLimit : {};\n if (label.dragLimit.top || label.dragLimit.bottom || label.dragLimit.left || label.dragLimit.right) {\n var minDistance = { minDistance: null };\n newOffset = this.getRelativeOffset(currentPosition, intermediatePoints, minDistance);\n var distance = { minDistance: null };\n intersectingOffset = this.getRelativeOffset(currentPosition, intersetingPts, distance);\n if (minDistance != null && distance.minDistance < minDistance.minDistance) {\n newOffset = intersectingOffset;\n }\n else {\n var connectorOffset = getOffsetOfConnector(object.intermediatePoints, label);\n newOffset = connectorOffset.point;\n }\n }\n else {\n intersectingOffset = intersetingPts[intersetingPts.length - 1];\n newOffset = intersectingOffset;\n }\n if (newOffset) {\n var p = void 0;\n var bounds = void 0;\n for (p = 0; p < intermediatePoints.length; p++) {\n if (prev != null) {\n bounds = Rect.toBounds([prev, intermediatePoints[parseInt(p.toString(), 10)]]);\n if (bounds.containsPoint(newOffset)) {\n pointLength += Point.findLength(prev, newOffset);\n break;\n }\n else {\n pointLength += Point.findLength(prev, intermediatePoints[parseInt(p.toString(), 10)]);\n }\n }\n prev = intermediatePoints[parseInt(p.toString(), 10)];\n }\n offset = { x: pointLength / totalLength, y: 0 };\n }\n this.updateLabelMargin(object, label, offset, currentPosition, size, tx, ty);\n }\n else {\n this.updateLabelMargin(object, label, null, currentPosition, size, tx, ty);\n }\n };\n // Feature 826644: Support to add ports to the connector.\n // Added below method to update the port offset when we drag the port.\n CommandHandler.prototype.updatePortOffset = function (object, port, tx, ty, newPosition, size) {\n var textWrapper = this.diagram.getWrapper(object.wrapper, port.id);\n var offsetX = textWrapper.offsetX;\n var offsetY = textWrapper.offsetY;\n var offset;\n var intermediatePoints = object.intermediatePoints;\n var prev;\n var pointLength = 0;\n var totalLength = 0;\n var intersectingOffset;\n var currentPosition;\n switch (port.verticalAlignment) {\n case 'Center':\n if (port.horizontalAlignment === 'Center') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + tx, y: offsetY + ty };\n }\n else if (port.horizontalAlignment === 'Right') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + (textWrapper.actualSize.width) / 2 + tx, y: offsetY + ty };\n }\n else if (port.horizontalAlignment === 'Left') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX - (textWrapper.actualSize.width) / 2 + tx, y: offsetY + ty };\n }\n break;\n case 'Top':\n if (port.horizontalAlignment === 'Center') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + tx, y: offsetY - (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (port.horizontalAlignment === 'Right') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX + (textWrapper.actualSize.width) / 2 + tx, y: offsetY - (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (port.horizontalAlignment === 'Left') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX - (textWrapper.actualSize.width) / 2 + tx, y: offsetY - (textWrapper.actualSize.height) / 2 + ty };\n }\n break;\n case 'Bottom':\n if (port.horizontalAlignment === 'Center') {\n currentPosition = (newPosition) ? newPosition : { x: offsetX + tx, y: offsetY + (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (port.horizontalAlignment === 'Right') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX + (textWrapper.actualSize.width) / 2 + tx, y: offsetY + (textWrapper.actualSize.height) / 2 + ty };\n }\n else if (port.horizontalAlignment === 'Left') {\n currentPosition = (newPosition) ? newPosition :\n { x: offsetX - (textWrapper.actualSize.width) / 2 + tx, y: offsetY + (textWrapper.actualSize.height) / 2 + ty };\n }\n break;\n }\n var intersectingPoints = this.getInterceptWithSegment(currentPosition, intermediatePoints);\n var newOffset = intermediatePoints[intermediatePoints.length - 1];\n totalLength = Point.getLengthFromListOfPoints(intermediatePoints);\n if (intersectingPoints.length > 0) {\n intersectingOffset = intersectingPoints[intersectingPoints.length - 1];\n newOffset = intersectingOffset;\n if (newOffset) {\n var p = void 0;\n var bounds = void 0;\n for (p = 0; p < intermediatePoints.length; p++) {\n if (prev != null) {\n bounds = Rect.toBounds([prev, intermediatePoints[parseInt(p.toString(), 10)]]);\n if (bounds.containsPoint(newOffset)) {\n pointLength += Point.findLength(prev, newOffset);\n break;\n }\n else {\n pointLength += Point.findLength(prev, intermediatePoints[parseInt(p.toString(), 10)]);\n }\n }\n prev = intermediatePoints[parseInt(p.toString(), 10)];\n }\n offset = { x: pointLength / totalLength, y: 0 };\n }\n this.updateLabelMargin(object, port, offset, currentPosition, size, tx, ty);\n }\n else {\n this.updateLabelMargin(object, port, null, currentPosition, size, tx, ty);\n }\n };\n CommandHandler.prototype.getRelativeOffset = function (currentPosition, points, minDistance) {\n var newOffset;\n var distance;\n var pt;\n var i;\n for (i = 0; i < points.length; i++) {\n pt = points[parseInt(i.toString(), 10)];\n distance = Math.round(Math.sqrt(Math.pow((currentPosition.x - pt.x), 2) +\n Math.pow((currentPosition.y - pt.y), 2)));\n if (minDistance.minDistance === null ||\n Math.min(Math.abs(minDistance.minDistance), Math.abs(distance)) === Math.abs(distance)) {\n newOffset = pt;\n minDistance.minDistance = distance;\n }\n }\n return newOffset;\n };\n CommandHandler.prototype.dragLimitValue = function (label, point, tempPt, contentDimension) {\n var x = false;\n var y = false;\n if ((tempPt.x >= (point.x - label.dragLimit.left - (contentDimension.width / 2))) &&\n (tempPt.x <= point.x + label.dragLimit.right + (contentDimension.width / 2))) {\n x = true;\n }\n if ((tempPt.y >= (point.y - label.dragLimit.top - (contentDimension.height / 2))) &&\n (tempPt.y <= point.y + label.dragLimit.bottom + (contentDimension.height / 2))) {\n y = true;\n }\n return { x: x, y: y };\n };\n /* eslint-disable */\n CommandHandler.prototype.updateLabelMargin = function (node, label, offset, tempPt, size, tx, ty) {\n offset = offset ? offset : { x: label.offset, y: 0 };\n if (label && offset && offset.x > 0 && offset.x < 1) {\n //let point: PointModel;\n var length_2 = Point.getLengthFromListOfPoints(node.intermediatePoints);\n var point = this.getPointAtLength(length_2 * offset.x, node.intermediatePoints, 0);\n var curZoomfactor = this.diagram.scrollSettings.currentZoom;\n var dragLimit = label.dragLimit ? label.dragLimit : { left: 0, right: 0, top: 0, bottom: 0 };\n if (dragLimit.top || dragLimit.bottom || dragLimit.left || dragLimit.right) {\n var labelBounds = this.diagram.getWrapper(node.wrapper, label.id);\n var contentDimension = new Rect(0, 0, 0, 0);\n var annotationWrtapper = this.diagram.getWrapper(node.wrapper, label.id);\n contentDimension.x = ((annotationWrtapper).offsetX / curZoomfactor) + tx;\n contentDimension.y = (annotationWrtapper.offsetY / curZoomfactor) + ty;\n contentDimension.width = annotationWrtapper.bounds.width / curZoomfactor;\n contentDimension.height = annotationWrtapper.bounds.height / curZoomfactor;\n var draggableBounds = new Rect(point.x - (dragLimit.left || 0) - contentDimension.width / 2, point.y - (dragLimit.top || 0) - contentDimension.height / 2, (dragLimit.left || 0) + (dragLimit.right || 0) + contentDimension.width, (dragLimit.top || 0) + (dragLimit.bottom || 0) + contentDimension.height);\n if (draggableBounds.containsPoint(tempPt)) {\n tempPt = tempPt;\n }\n else {\n var lineIntersects = void 0;\n var line1 = [point, tempPt];\n lineIntersects = this.boundsInterSects(line1, draggableBounds, false);\n for (var _i = 0, lineIntersects_1 = lineIntersects; _i < lineIntersects_1.length; _i++) {\n var i = lineIntersects_1[_i];\n var ptt = i;\n tempPt = ptt;\n }\n }\n var cursorLimit = this.dragLimitValue(label, point, tempPt, contentDimension);\n label.margin = {\n left: cursorLimit.x ? tempPt.x - point.x : label.margin.left,\n top: cursorLimit.y ? tempPt.y - point.y : label.margin.top, right: 0, bottom: 0\n };\n }\n else {\n label.margin = { left: tempPt.x - point.x, top: tempPt.y - point.y, right: 0, bottom: 0 };\n }\n label.offset = offset.x;\n if (size) {\n label.width = size.width;\n label.height = size.height;\n }\n }\n };\n CommandHandler.prototype.boundsInterSects = function (polyLine, bounds, self) {\n var intersects;\n if (bounds) {\n var polyLine2 = [\n { x: bounds.x, y: bounds.y },\n { x: bounds.x + bounds.width, y: bounds.y },\n { x: bounds.x + bounds.width, y: bounds.y + bounds.height },\n { x: bounds.x, y: bounds.y + bounds.height },\n { x: bounds.x, y: bounds.y }\n ];\n intersects = this.intersect(polyLine, polyLine2, self);\n }\n return intersects;\n };\n /** @private */\n CommandHandler.prototype.intersect = function (polyLine1, polyLine2, self) {\n var intersect = [];\n for (var i = 0; i < polyLine1.length - 1; i++) {\n for (var j = 0; j < polyLine2.length - 1; j++) {\n var p = intersect2(polyLine1[i], polyLine1[i + 1], polyLine2[j], polyLine2[j + 1]);\n if (p.x !== 0 && p.y !== 0) {\n intersect.push(p);\n }\n }\n }\n return intersect;\n };\n /**\n * @private\n */\n CommandHandler.prototype.getPointAtLength = function (length, points, angle) {\n var run = 0;\n var pre;\n var found = { x: 0, y: 0 };\n var pt;\n for (var i = 0; i < points.length; i++) {\n pt = points[i];\n if (!pre) {\n pre = pt;\n continue;\n }\n else {\n var l = Point.findLength(pre, pt);\n var r = void 0;\n var deg = void 0;\n var x = void 0;\n var y = void 0;\n if (run + l >= length) {\n r = length - run;\n deg = Point.findAngle(pre, pt);\n x = r * Math.cos(deg * Math.PI / 180);\n y = r * Math.sin(deg * Math.PI / 180);\n found = { x: pre.x + x, y: pre.y + y };\n break;\n }\n else {\n run += l;\n }\n }\n pre = pt;\n }\n return found;\n };\n CommandHandler.prototype.getInterceptWithSegment = function (currentPosition, conPoints) {\n var intercepts = [];\n var imgLine = [];\n var segemnt = [];\n var tarAngle;\n var srcAngle; //let maxLength: number;\n var maxLength = Point.findLength({ x: 0, y: 0 }, { x: this.diagram.scroller.viewPortWidth, y: this.diagram.scroller.viewPortHeight });\n for (var i = 1; i < conPoints.length; i++) {\n segemnt = [conPoints[i - 1], conPoints[i]];\n imgLine = [];\n srcAngle = Math.round(Point.findAngle(segemnt[0], segemnt[1]) % 360);\n tarAngle = Math.round(Point.findAngle(segemnt[1], segemnt[0]) % 360);\n var angleAdd = (srcAngle > 0 && srcAngle <= 90) || (srcAngle > 180 && srcAngle <= 270) ? 90 : -90;\n imgLine.push(Point.transform(currentPosition, srcAngle + angleAdd, maxLength));\n imgLine.push(Point.transform(currentPosition, tarAngle + angleAdd, maxLength));\n var lineUtil1 = { x1: segemnt[0].x, y1: segemnt[0].y, x2: segemnt[1].x, y2: segemnt[1].y };\n var lineUtil2 = { x1: imgLine[0].x, y1: imgLine[0].y, x2: imgLine[1].x, y2: imgLine[1].y };\n var line3 = intersect3(lineUtil1, lineUtil2);\n if (line3.enabled) {\n intercepts.push(line3.intersectPt);\n }\n }\n return intercepts;\n };\n /** @private */\n CommandHandler.prototype.getAnnotationChanges = function (object, label) {\n var index = findObjectIndex(object, label.id, true);\n var annotations = {};\n annotations[index] = {\n width: label.width, height: label.height, offset: (object instanceof Node) ? ({\n x: label.offset.x,\n y: label.offset.y\n }) : label.offset,\n rotateAngle: label.rotateAngle,\n margin: { left: label.margin.left, right: label.margin.right, top: label.margin.top, bottom: label.margin.bottom },\n horizontalAlignment: label.horizontalAlignment, verticalAlignment: label.verticalAlignment,\n alignment: ((object instanceof Connector) ? label.alignment : undefined)\n };\n return { annotations: annotations };\n };\n // Feature 826644: Support to add ports to the connector. Added below method to get port values before and after drag.\n /** @private */\n CommandHandler.prototype.getConnectorPortChanges = function (object, label) {\n var index = findPortIndex(object, label.id);\n var ports = {};\n ports[index] = {\n width: label.width, height: label.height, offset: label.offset,\n margin: { left: label.margin.left, right: label.margin.right, top: label.margin.top, bottom: label.margin.bottom },\n horizontalAlignment: label.horizontalAlignment, verticalAlignment: label.verticalAlignment,\n alignment: ((object instanceof Connector) ? label.alignment : undefined)\n };\n return { ports: ports };\n };\n /** @private */\n CommandHandler.prototype.getPortChanges = function (object, port) {\n var index = findObjectIndex(object, port.id, false);\n var ports = {};\n ports[index] = { offset: port.offset };\n return { ports: ports };\n };\n /** @private */\n CommandHandler.prototype.labelRotate = function (object, label, currentPosition, selector) {\n var oldValues;\n var changedvalues;\n oldValues = this.getAnnotationChanges(object, label);\n var matrix = identityMatrix();\n var rotateAngle = label.rotateAngle;\n var labelWrapper = this.diagram.getWrapper(object.wrapper, label.id);\n var angle = findAngle({ x: labelWrapper.offsetX, y: labelWrapper.offsetY }, currentPosition) + 90;\n var snapAngle = this.snapAngle(angle);\n angle = snapAngle !== 0 ? snapAngle : angle;\n if (label instanceof PathAnnotation && label.segmentAngle) {\n var getPointloop = getAnnotationPosition(object.intermediatePoints, label, object.wrapper.bounds);\n angle -= getPointloop.angle;\n }\n angle = (angle + 360) % 360;\n label.rotateAngle += angle - (label.rotateAngle + labelWrapper.parentTransform);\n if (label instanceof PathAnnotation) {\n label.alignment = 'Center';\n }\n selector.wrapper.rotateAngle = selector.rotateAngle = label.rotateAngle;\n changedvalues = this.getAnnotationChanges(object, label);\n if (object instanceof Node) {\n this.diagram.nodePropertyChange(object, oldValues, changedvalues);\n }\n else {\n this.diagram.connectorPropertyChange(object, oldValues, changedvalues);\n }\n this.diagram.updateDiagramObject(object);\n };\n /** @private */\n CommandHandler.prototype.labelResize = function (node, label, deltaWidth, deltaHeight, pivot, selector) {\n var oldValues;\n var changedvalues;\n var rotateAngle;\n oldValues = this.getAnnotationChanges(node, label);\n var textElement = selector.wrapper.children[0];\n if ((deltaWidth && deltaWidth !== 1) || (deltaHeight && deltaHeight !== 1)) {\n var newMat = identityMatrix();\n var matrix = identityMatrix();\n rotateMatrix(newMat, -node.rotateAngle, node.offsetX, node.offsetY);\n rotateAngle = ((textElement.rotateAngle + ((node instanceof Node) ? node.rotateAngle : 0)) + 360) % 360;\n rotateMatrix(matrix, -rotateAngle, pivot.x, pivot.y);\n scaleMatrix(matrix, deltaWidth, deltaHeight, pivot.x, pivot.y);\n rotateMatrix(matrix, rotateAngle, pivot.x, pivot.y);\n var newPosition = transformPointByMatrix(matrix, { x: textElement.offsetX, y: textElement.offsetY });\n var height = textElement.actualSize.height * deltaHeight;\n var width = textElement.actualSize.width * deltaWidth;\n var shape = this.findTarget(textElement, node);\n if (shape instanceof PathAnnotation) {\n newPosition.y += (shape.verticalAlignment === 'Top') ? (-height / 2) : ((shape.verticalAlignment === 'Bottom') ? (height / 2) : 0);\n newPosition.x += (shape.horizontalAlignment === 'Left') ? (-width / 2) : ((shape.horizontalAlignment === 'Right') ? (width / 2) : 0);\n }\n if (shape instanceof PathAnnotation) {\n this.updatePathAnnotationOffset(node, label, 0, 0, newPosition, new Size(width, height));\n }\n else {\n var bounds = cornersPointsBeforeRotation(node.wrapper);\n newPosition = transformPointByMatrix(newMat, newPosition);\n newPosition.x = newPosition.x - textElement.margin.left + textElement.margin.right;\n newPosition.y = newPosition.y - textElement.margin.top + textElement.margin.bottom;\n newPosition.y += (shape.verticalAlignment === 'Top') ? (-height / 2) : ((shape.verticalAlignment === 'Bottom') ? (height / 2) : 0);\n newPosition.x += (shape.horizontalAlignment === 'Left') ? (-width / 2) : ((shape.horizontalAlignment === 'Right') ? (width / 2) : 0);\n var offsetx = bounds.width / (newPosition.x - bounds.x);\n var offsety = bounds.height / (newPosition.y - bounds.y);\n if (width > 1) {\n shape.width = width;\n shape.offset.x = 1 / offsetx;\n }\n if (height > 1) {\n shape.height = height;\n shape.offset.y = 1 / offsety;\n }\n }\n }\n if (label instanceof PathAnnotation) {\n label.alignment = 'Center';\n }\n changedvalues = this.getAnnotationChanges(node, label);\n if (node instanceof Node) {\n this.diagram.nodePropertyChange(node, oldValues, changedvalues);\n }\n else {\n this.diagram.connectorPropertyChange(node, oldValues, changedvalues);\n }\n this.diagram.updateDiagramObject(node);\n };\n /** @private */\n CommandHandler.prototype.getSubProcess = function (source) {\n var selector = { nodes: [], connectors: [] };\n var process;\n if (source instanceof Node) {\n process = source.processId;\n }\n else if (source && source.nodes && (source.nodes.length)\n && source.nodes[0].processId) {\n process = source.nodes[0].processId;\n }\n if (process) {\n selector.nodes.push(cloneObject(this.diagram.nameTable[process]));\n return selector;\n }\n return selector;\n };\n /** @private */\n CommandHandler.prototype.checkBoundaryConstraints = function (tx, ty, nodeBounds, isInitialRendering) {\n var pageSettings = this.diagram.pageSettings;\n var boundaryConstraints = this.diagram.pageSettings.boundaryConstraints;\n var scroller = this.diagram.scroller;\n if (boundaryConstraints === 'Page' || boundaryConstraints === 'Diagram') {\n var selectorBounds = !nodeBounds ? this.diagram.selectedItems.wrapper.bounds : undefined;\n var width = boundaryConstraints === 'Page' ? pageSettings.width : scroller.viewPortWidth;\n var height = boundaryConstraints === 'Page' ? pageSettings.height : scroller.viewPortHeight;\n var bounds = nodeBounds;\n var right = (nodeBounds ? bounds.right : selectorBounds.right) + (tx || 0);\n var left = (nodeBounds ? bounds.left : selectorBounds.left) + (tx || 0);\n var top_2 = (nodeBounds ? bounds.top : selectorBounds.top) + (ty || 0);\n var bottom = (nodeBounds ? bounds.bottom : selectorBounds.bottom) + (ty || 0);\n //Bug 906963: Layout is not rendered when boundaryConstraints set to \"Page/Diagram\"\n if (right <= width && left >= 0\n && bottom <= height && top_2 >= 0 || (this.diagram.layout.type !== 'None' && isInitialRendering)) {\n return true;\n }\n return false;\n }\n return true;\n };\n //interfaces\n /** @private */\n CommandHandler.prototype.dragSelectedObjects = function (tx, ty) {\n var _this = this;\n var obj = this.diagram.selectedItems;\n if (this.state && !this.state.backup) {\n this.state.backup = {};\n this.state.backup.offsetX = obj.offsetX;\n this.state.backup.offsetY = obj.offsetY;\n }\n obj = renderContainerHelper(this.diagram, obj) || obj;\n //Bug 905527: Multiselecting and dragging Swimlane updates incorrectly\n //Added below condition to check if swimlane is selected and not the symbol symbol from the symbol palette\n //Also check if the selected swimlane is not the only object selected\n var swimLaneInSelection = this.diagram.selectedItems.nodes.filter(function (node) { return node.shape.type === 'SwimLane'; });\n if (swimLaneInSelection.length > 0 && !this.diagram.currentSymbol) {\n if (this.diagram.selectedItems.nodes.length > 1) {\n var filterObjects = this.diagram.selectedItems.nodes.filter(function (node) { return (node.parentId === '' || _this.diagram.nameTable[node.parentId].shape.type !== 'SwimLane'); });\n if (filterObjects.length > 0) {\n for (var i = 0; i < filterObjects.length; i++) {\n if ((this.diagram.nameTable[filterObjects[parseInt(i.toString(), 10)].parentId] &&\n this.diagram.nameTable[filterObjects[parseInt(i.toString(), 10)].parentId].isLane)\n || filterObjects[parseInt(i.toString(), 10)].shape.type === 'SwimLane') {\n filterObjects.splice(i, 1);\n i--;\n }\n }\n //\"obj\" - The current object being processed in the array.\n //\"index\" - The index of the current object in the array.\n //\"self\" - The reference to the entire array being processed by the filter function.\n var uniqueSwimlane = swimLaneInSelection.filter(function (obj, index, self) {\n return index === self.findIndex(function (item) { return item.id === obj.id; });\n });\n if (filterObjects.length > 0 || uniqueSwimlane.length > 1) {\n filterObjects = filterObjects.concat(uniqueSwimlane);\n // Clear the nodes array without losing the reference\n this.diagram.selectedItems.nodes.splice(0, this.diagram.selectedItems.nodes.length);\n // Push objects from filterObjects into the nodes array\n filterObjects.forEach(function (node) {\n _this.diagram.selectedItems.nodes.push(node);\n });\n obj = this.diagram.selectedItems;\n this.diagram.selectedObject.helperObject = undefined;\n }\n }\n }\n }\n if (this.checkBoundaryConstraints(tx, ty)) {\n this.diagram.diagramActions = this.diagram.diagramActions | (DiagramAction.PreventZIndexOnDragging | DiagramAction.DragUsingMouse);\n var actualObject = this.diagram.selectedObject.actualObject;\n if ((actualObject && actualObject instanceof Node && actualObject.isLane &&\n canLaneInterchange(actualObject, this.diagram)) || (!actualObject || !actualObject.isLane)) {\n this.diagram.drag(obj, tx, ty);\n }\n this.diagram.diagramActions = this.diagram.diagramActions & ~(DiagramAction.PreventZIndexOnDragging | DiagramAction.DragUsingMouse);\n this.diagram.refreshCanvasLayers();\n //Bug 872140: Dragging HTML nodes in a diagram leaves shadows on the overview\n this.checkHtmlObjectDrag(obj);\n return true;\n }\n return false;\n };\n // Checks if any HTML object is being dragged and reset the canvas to clear the shadow of the HTML node border.\n CommandHandler.prototype.checkHtmlObjectDrag = function (obj) {\n var isHtmlObjDragged = false;\n if (this.diagram.views && this.diagram.views.length > 1) {\n if (obj instanceof Selector) {\n isHtmlObjDragged = obj.nodes.some(function (node) { return node.shape && node.shape.type === 'HTML'; });\n }\n else if (obj.shape && obj.shape.type === 'HTML') {\n isHtmlObjDragged = true;\n }\n if (isHtmlObjDragged) {\n this.resetOverviewCanvas();\n }\n }\n };\n //Resetting Overview canvas \n CommandHandler.prototype.resetOverviewCanvas = function () {\n for (var _i = 0, _a = this.diagram.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view = this.diagram.views[temp];\n if (!(view instanceof Diagram)) {\n var rect = document.getElementById(view.canvas.id + 'overviewrect');\n var x = Number(rect.getAttribute('x'));\n var y = Number(rect.getAttribute('y'));\n var width = Number(rect.getAttribute('width'));\n var height = Number(rect.getAttribute('height'));\n var attr = { x: x, y: y, width: Math.max(1, width), height: Math.max(1, height) };\n setAttributeHtml(rect, attr);\n }\n }\n };\n /** @private */\n CommandHandler.prototype.scaleSelectedItems = function (sx, sy, pivot) {\n var obj = this.diagram.selectedItems;\n if (this.state && !this.state.backup) {\n this.state.backup = {};\n this.state.backup.offsetX = obj.offsetX;\n this.state.backup.offsetY = obj.offsetY;\n this.state.backup.width = obj.width;\n this.state.backup.height = obj.height;\n this.state.backup.pivot = pivot;\n }\n obj = renderContainerHelper(this.diagram, obj) || obj;\n return this.diagram.scale(obj, sx, sy, pivot);\n };\n /** @private */\n CommandHandler.prototype.rotateSelectedItems = function (angle) {\n var obj = this.diagram.selectedItems;\n if (this.state && !this.state.backup) {\n this.state.backup = {};\n this.state.backup.angle = obj.rotateAngle;\n }\n obj = renderContainerHelper(this.diagram, obj) || obj;\n return this.diagram.rotate(obj, angle, undefined, true);\n };\n /** @private */\n CommandHandler.prototype.hasSelection = function () {\n return hasSelection(this.diagram);\n };\n /** @private */\n CommandHandler.prototype.isSelected = function (element) {\n return isSelected(this.diagram, element);\n };\n /**\n * initExpand is used for layout expand and collapse interaction\n */\n CommandHandler.prototype.initExpand = function (args) {\n var propName = 'isProtectedOnChange';\n var protectedChange = this.diagram[propName];\n this.diagram.protectPropertyChange(true);\n var node = (args.target || args.source);\n var oldValues = { isExpanded: node.isExpanded };\n node.isExpanded = !node.isExpanded;\n this.diagram.preventNodesUpdate = true;\n this.diagram.diagramActions |= DiagramAction.PreventIconsUpdate;\n this.diagram.nodePropertyChange(node, oldValues, { isExpanded: node.isExpanded });\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.PreventIconsUpdate;\n this.diagram.preventNodesUpdate = false;\n for (var _i = 0, _a = this.diagram.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view = this.diagram.views[temp];\n if (!(view instanceof Diagram)) {\n this.diagram.refreshCanvasDiagramLayer(view);\n }\n }\n this.diagram.protectPropertyChange(protectedChange);\n };\n /** @private */\n CommandHandler.prototype.expandNode = function (node, diagram, canLayout) {\n //let objects: ILayout;\n var preventNodesUpdate = this.diagram.preventNodesUpdate;\n var expand = node.isExpanded;\n this.diagram.preventNodesUpdate = true;\n //Bug 883244: After expand and collapse the compex hierarchical layout, the connector are not rendered properly.\n // Removed the preventConnectorsUpdate property to update the connector properly while performing expand and collapse.\n // this.diagram.preventConnectorsUpdate = true;\n this.expandCollapse(node, expand, this.diagram);\n node.isExpanded = expand;\n var fixedNode = this.diagram.layout.fixedNode;\n this.diagram.layout.fixedNode = node.id;\n if ((this.diagram.diagramActions != DiagramAction.Render) && this.diagram.layoutAnimateModule && this.diagram.layout.enableAnimation && this.diagram.organizationalChartModule) {\n this.diagram.organizationalChartModule.isAnimation = true;\n }\n this.diagram.blazorActions |= BlazorAction.expandNode;\n var objects = {};\n if (!canLayout) {\n if (this.layoutAnimateModule && this.layoutAnimateModule.setIntervalObject.length > 0) {\n this.layoutAnimateModule.stopCurrentAnimation(this.objectStore[0], diagram, node);\n this.objectStore = [];\n }\n objects = this.diagram.doLayout();\n this.objectStore.push(objects);\n }\n this.canUpdateTemplate = false;\n this.diagram.blazorActions &= ~BlazorAction.expandNode;\n this.diagram.preventNodesUpdate = preventNodesUpdate;\n // this.diagram.preventConnectorsUpdate = false;\n if (this.diagram.layoutAnimateModule && this.diagram.organizationalChartModule && !canLayout) {\n this.diagram.allowServerDataBinding = false;\n this.layoutAnimateModule.expand(this.diagram.layout.enableAnimation, objects, node, this.diagram);\n }\n else {\n var arg = {\n element: cloneBlazorObject(cloneObject(node)), state: (node.isExpanded) ? true : false\n };\n this.triggerEvent(DiagramEvent.expandStateChange, arg);\n //Bug 873119: Diagram throws error when setting isExpanded property as false with LineRouting injected.\n if (this.diagram.lineRoutingModule && this.diagram.constraints & DiagramConstraints.LineRouting && this.diagram.layout.type !== 'ComplexHierarchicalTree') {\n this.diagram.resetSegments();\n }\n }\n this.diagram.layout.fixedNode = fixedNode === '' ? '' : this.diagram.layout.fixedNode;\n return objects;\n };\n CommandHandler.prototype.getparentexpand = function (target, diagram, visibility, connector) {\n var boolean;\n for (var i = 0; i < target.inEdges.length; i++) {\n var newConnector = diagram.nameTable[target.inEdges[i]];\n var previousNode = diagram.nameTable[newConnector.sourceID];\n if (previousNode.isExpanded && !visibility && previousNode.id !== connector.sourceID && newConnector.visible) {\n return false;\n }\n else {\n boolean = true;\n }\n }\n return boolean;\n };\n /**\n * Setinterval and Clear interval for layout animation\n */\n /** @private */\n CommandHandler.prototype.expandCollapse = function (source, visibility, diagram) {\n for (var i = 0; i < source.outEdges.length; i++) {\n var connector = diagram.nameTable[source.outEdges[i]];\n var target = diagram.nameTable[connector.targetID];\n var value = this.getparentexpand(target, diagram, visibility, connector);\n connector.visible = visibility;\n var oldValues = {\n visible: target.visible,\n style: { opacity: target.wrapper.style.opacity }\n };\n var newValues = {\n visible: target.visible,\n style: { opacity: target.wrapper.style.opacity }\n };\n if (value) {\n if (target.isExpanded) {\n this.expandCollapse(target, visibility, diagram);\n }\n target.visible = visibility;\n target.style.opacity = (this.diagram.layoutAnimateModule &&\n this.diagram.layout.enableAnimation && visibility) ? 0.1 : target.style.opacity;\n diagram.nodePropertyChange(target, oldValues, newValues);\n }\n diagram.connectorPropertyChange(connector, oldValues, newValues);\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.updateNodeDimension = function (obj, rect) {\n if (obj instanceof Node) {\n obj.offsetX = rect.x + rect.width / 2;\n obj.offsetY = rect.y + rect.height / 2;\n obj.width = rect.width;\n obj.height = rect.height;\n obj.wrapper.children[0].canMeasurePath = true;\n this.diagram.nodePropertyChange(obj, {}, {\n width: rect.width, height: rect.height, offsetX: obj.offsetX,\n offsetY: obj.offsetY\n });\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.updateConnectorPoints = function (obj, rect) {\n if (obj instanceof Connector && obj.type !== 'Bezier') {\n this.diagram.connectorPropertyChange(obj, {}, {\n targetPoint: obj.targetPoint\n });\n this.diagram.updateDiagramObject(obj);\n }\n else {\n this.diagram.connectorPropertyChange(obj, {}, { segments: obj.segments });\n this.diagram.updateDiagramObject(obj);\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.updateSelectedNodeProperties = function (object) {\n if (this.diagram.lineRoutingModule && (this.diagram.constraints & DiagramConstraints.LineRouting)) {\n this.diagram.protectPropertyChange(true);\n var objects = [];\n var connectors = [];\n var actualObject = this.diagram.selectedObject.actualObject;\n var helperObject = this.diagram.selectedObject.helperObject;\n if (helperObject && actualObject) {\n var offsetX = (helperObject.offsetX - actualObject.offsetX);\n var offsetY = (helperObject.offsetY - actualObject.offsetY);\n var width = (helperObject.width - actualObject.width);\n var height = (helperObject.height - actualObject.height);\n var rotateAngle = (helperObject.rotateAngle - actualObject.rotateAngle);\n if (this.diagram.selectedItems.nodes.length + this.diagram.selectedItems.connectors.length > 0) {\n this.diagram.selectedItems.wrapper.rotateAngle = this.diagram.selectedItems.rotateAngle = helperObject.rotateAngle;\n }\n if (actualObject instanceof Node &&\n actualObject.shape.type !== 'SwimLane' && !actualObject.isLane && !actualObject.isPhase && !actualObject.isHeader &&\n !checkParentAsContainer(this.diagram, actualObject)) {\n if (actualObject.offsetX !== actualObject.wrapper.offsetX || actualObject.offsetY !== actualObject.wrapper.offsetY ||\n actualObject.width !== actualObject.wrapper.width || actualObject.height !== actualObject.wrapper.height ||\n actualObject.rotateAngle !== actualObject.wrapper.rotateAngle) {\n actualObject.offsetX += offsetX;\n actualObject.offsetY += offsetY;\n actualObject.width += width;\n actualObject.height += height;\n actualObject.rotateAngle += rotateAngle;\n this.diagram.nodePropertyChange(actualObject, {}, {\n offsetX: actualObject.offsetX, offsetY: actualObject.offsetY,\n width: actualObject.width, height: actualObject.height, rotateAngle: actualObject.rotateAngle\n });\n }\n objects = this.diagram.spatialSearch.findObjects(actualObject.wrapper.outerBounds);\n }\n else if (actualObject instanceof Selector) {\n for (var i = 0; i < actualObject.nodes.length; i++) {\n var node = actualObject.nodes[i];\n if (node instanceof Node && node.shape.type !== 'SwimLane' &&\n !checkParentAsContainer(this.diagram, node)\n && !node.isLane\n && !node.isPhase && !node.isHeader) {\n node.offsetX += offsetX;\n node.offsetY += offsetY;\n node.width += width;\n node.height += height;\n node.rotateAngle += rotateAngle;\n this.diagram.nodePropertyChange(node, {}, {\n offsetX: node.offsetX, offsetY: node.offsetY,\n width: node.width, height: node.height, rotateAngle: node.rotateAngle\n });\n objects = objects.concat(this.diagram.spatialSearch.findObjects(actualObject.wrapper.outerBounds));\n }\n }\n }\n }\n else {\n if (object instanceof Connector) {\n objects.push(object);\n }\n else if (object instanceof Selector && object.connectors.length) {\n objects = objects.concat(object.connectors);\n }\n }\n for (var i = 0; i < objects.length; i++) {\n if (objects[i] instanceof Connector && connectors.indexOf(objects[i].id) === -1) {\n connectors.push(objects[i].id);\n }\n }\n this.diagram.lineRoutingModule.renderVirtualRegion(this.diagram, true);\n for (var i = 0; i < connectors.length; i++) {\n var connector = this.diagram.nameTable[connectors[i]];\n if (connector instanceof Connector && connector.type === 'Orthogonal') {\n // EJ2-65876 - Exception occurs on line routing injection module\n //Bug 850195: Exception occurs due to line routing constraints enabled\n if (connector.sourceID && connector.targetID && connector.sourceID != connector.targetID && this.diagram.layout.type !== 'ComplexHierarchicalTree') {\n //EJ2-69573 - Excecption occurs when calling doLayout method with the lineRouting module \n var sourceNode = this.diagram.getObject(connector.sourceID);\n var targetNode = this.diagram.getObject(connector.targetID);\n var Connectorlength1 = targetNode.wrapper.outerBounds.middleLeft.x - sourceNode.wrapper.outerBounds.middleRight.x;\n var Connectorlength2 = targetNode.wrapper.outerBounds.topCenter.y - sourceNode.wrapper.outerBounds.bottomCenter.y;\n if (Connectorlength1 > 30 || Connectorlength2 > 30) {\n this.diagram.lineRoutingModule.refreshConnectorSegments(this.diagram, connector, true);\n }\n }\n }\n }\n this.updateSelector();\n this.diagram.protectPropertyChange(false);\n }\n };\n /** @private */\n CommandHandler.prototype.drawSelectionRectangle = function (x, y, width, height) {\n this.diagram.drawSelectionRectangle(x, y, width, height);\n };\n /** @private */\n CommandHandler.prototype.startGroupAction = function () {\n this.diagram.startGroupAction();\n };\n /** @private */\n CommandHandler.prototype.endGroupAction = function () {\n this.diagram.endGroupAction();\n };\n /** @private */\n CommandHandler.prototype.removeChildFromBPmn = function (child, newTarget, oldTarget) {\n var obj = this.diagram.nameTable[child.id] || child.nodes[0];\n if (oldTarget) {\n if ((obj) && obj.processId && obj.processId === oldTarget.wrapper.id) {\n var node = cloneObject(obj);\n node.processId = obj.processId;\n this.diagram.startGroupAction();\n // 908136: Node goes behind the subprocess and the connector connected to it is destroyed Issue Fix by commenting these lines\n // let edges: string[] = [];\n // edges = edges.concat((obj as Node).outEdges, (obj as Node).inEdges);\n // for (let i: number = edges.length - 1; i >= 0; i--) {\n // const connector: ConnectorModel = this.diagram.nameTable[edges[i]];\n // if (connector) {\n // this.diagram.remove(connector);\n // }\n // }\n var nodeCollection = (this.diagram.nameTable[obj.processId].shape.activity.subProcess.processes) || [];\n nodeCollection.splice(nodeCollection.indexOf((obj).id), 1);\n this.diagram.bpmnModule.removeChildFromBPMN(this.diagram.nameTable[obj.processId].wrapper, (obj).id, this.diagram);\n this.diagram.nameTable[(obj).id].processId = '';\n obj.offsetX = obj.wrapper.offsetX;\n obj.offsetY = obj.wrapper.offsetY;\n var undoElement = cloneObject(obj);\n var entry = {\n type: 'PositionChanged', redoObject: { nodes: [undoElement] }, undoObject: { nodes: [node] }, category: 'Internal'\n };\n this.addHistoryEntry(entry);\n this.diagram.endGroupAction();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.isDroppable = function (source, targetNodes) {\n var node = this.diagram.nameTable[source.id] || source.nodes[0];\n if (node instanceof Node) {\n if ((!isBlazor() && node.shape.shape === 'TextAnnotation')\n // ||(isBlazor() && (node.shape as DiagramShape).bpmnShape === 'TextAnnotation')\n ) {\n return true;\n }\n //848061 - Enabling BPMN Group Nodes to Function Like Subprocess Nodes\n if (targetNodes.shape.shape === 'Group') {\n targetNodes.shape.activity.subProcess.collapsed = false;\n }\n if (node && node.shape.type === 'Bpmn') {\n //905238 - Exception thrown while dropping BPMN shapes over a BPMN connector\n if ((node.processId === targetNodes.id) || (node.id === targetNodes.processId) ||\n targetNodes.shape.type === 'Bpmn' && !(targetNodes instanceof Connector)\n && targetNodes.shape.activity && targetNodes.shape.activity.subProcess\n && targetNodes.shape.activity.subProcess.collapsed) {\n return false;\n }\n }\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n CommandHandler.prototype.renderHighlighter = function (args, connectHighlighter, source) {\n var bounds = new Rect();\n if ((args.target instanceof Node || args.target instanceof Connector) || (connectHighlighter && (args.source instanceof Node || args.source instanceof Connector))) {\n var tgt = connectHighlighter ? args.source : args.target;\n var tgtWrap = connectHighlighter ? args.sourceWrapper : args.targetWrapper;\n var target = this.findTarget(tgtWrap, tgt, source, true);\n var element = void 0;\n if (target instanceof BpmnSubEvent) {\n var portId = target.id;\n var node = args.target;\n var parent_8 = node.wrapper.children[0].children[0].children[2];\n for (var _i = 0, _a = parent_8.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child.id === node.id + '_' + portId) {\n element = child.children[0];\n break;\n }\n }\n }\n else {\n element = (target instanceof Node) ?\n target.wrapper : connectHighlighter ? args.sourceWrapper : args.targetWrapper;\n }\n if (element && !(target instanceof Connector)) {\n this.diagram.renderHighlighter(element);\n }\n }\n };\n //additional events\n /** @private */\n CommandHandler.prototype.mouseOver = function (source, target, position) {\n //mouse over\n //returns whether the source can move over the target or not\n return true;\n };\n /**\n * @private\n */\n CommandHandler.prototype.snapPoint = function (startPoint, endPoint, tx, ty) {\n var obj = this.diagram.selectedItems;\n var point;\n var towardsLeft = endPoint.x < startPoint.x;\n var towardsTop = endPoint.y < startPoint.y;\n point = { x: tx, y: ty };\n var snappedPoint = point;\n if (this.snappingModule) {\n snappedPoint = this.diagram.snappingModule.snapPoint(this.diagram, obj, towardsLeft, towardsTop, point, startPoint, endPoint);\n }\n return snappedPoint;\n };\n /**\n * @private\n */\n CommandHandler.prototype.removeSnap = function () {\n if ((this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) && this.snappingModule) {\n this.snappingModule.removeGuidelines(this.diagram);\n }\n };\n /** @private */\n /**Bug(EJ2-62725): Exception occurs when drag and drop the connector inside the swimlane */\n CommandHandler.prototype.dropAnnotation = function (source, target) {\n if (source instanceof Node || source instanceof Selector) {\n var node = (source instanceof Node) ? source : source.nodes[0];\n if (this.diagram.bpmnModule && target.shape.type === 'Bpmn'\n && ((!isBlazor() && node.shape.shape === 'TextAnnotation')\n // ||(isBlazor() && (node.shape as DiagramShape).bpmnShape === 'TextAnnotation')\n )) {\n var hasTarget = 'hasTarget';\n node[hasTarget] = target.id;\n node.shape.annotation.nodeId = target.id;\n if (!this.diagram.currentSymbol) {\n this.diagram.addTextAnnotation(node.shape.annotation, target);\n node.shape.annotation.nodeId = '';\n this.diagram.remove(node);\n }\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.drop = function (source, target, position) {\n //drop\n if (this.diagram.bpmnModule) {\n var sourcenode = (source instanceof Node) ? source : source.nodes[0];\n //905238 - Exception thrown while dropping BPMN shapes over a BPMN connector\n if (sourcenode && sourcenode.shape.type === 'Bpmn' && target.shape.type === 'Bpmn'\n && !(target instanceof Connector)) {\n this.diagram.bpmnModule.dropBPMNchild(target, (source instanceof Node) ? source : source.nodes[0], this.diagram);\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.addHistoryEntry = function (entry) {\n this.diagram.addHistoryEntry(entry);\n };\n /** @private */\n CommandHandler.prototype.align = function (objects, option, type) {\n if (objects.length > 0) {\n var i = 0;\n objects[0] = this.diagram.nameTable[objects[0].id] || objects[0];\n var bounds = (type === 'Object') ? getBounds(objects[0].wrapper) : this.diagram.selectedItems.wrapper.bounds;\n var undoObj = { nodes: [], connectors: [] };\n var redoObj = { nodes: [], connectors: [] };\n for (i = ((type === 'Object') ? (i + 1) : i); i < objects.length; i++) {\n var tx = 0;\n var ty = 0;\n objects[i] = this.diagram.nameTable[objects[i].id] || objects[i];\n var objectBounds = getBounds(objects[i].wrapper);\n if (option === 'Left') {\n tx = bounds.left + objectBounds.width / 2 - objectBounds.center.x;\n }\n else if (option === 'Right') {\n tx = bounds.right - objectBounds.width / 2 - objectBounds.center.x;\n }\n else if (option === 'Top') {\n ty = bounds.top + objectBounds.height / 2 - objectBounds.center.y;\n }\n else if (option === 'Bottom') {\n ty = bounds.bottom - objectBounds.height / 2 - objectBounds.center.y;\n }\n else if (option === 'Center') {\n tx = bounds.center.x - objectBounds.center.x;\n }\n else if (option === 'Middle') {\n ty = bounds.center.y - objectBounds.center.y;\n }\n undoObj = this.storeObject(undoObj, objects[i]);\n this.drag(objects[i], tx, ty);\n this.diagram.updateSelector();\n redoObj = this.storeObject(redoObj, objects[i]);\n }\n undoObj = cloneObject(undoObj);\n redoObj = cloneObject(redoObj);\n var entry = {\n type: 'Align', category: 'Internal',\n undoObject: cloneObject(undoObj), redoObject: cloneObject(redoObj)\n };\n this.addHistoryEntry(entry);\n }\n };\n /**\n * distribute method \\\n *\n * @returns { void } distribute method .\\\n * @param {(NodeModel | ConnectorModel)[]} objects - provide the source value.\n * @param {SizingOptions} option - provide the target value.\n *\n * @private\n */\n CommandHandler.prototype.distribute = function (objects, option) {\n if (objects.length > 0) {\n var i = 0;\n //const j: number = 0;\n //const rect: Rect = new Rect();\n //const b: Rect[] = [];\n //let temp: NodeModel | ConnectorModel;\n var right = 0;\n var left = 0;\n var top_3 = 0;\n var bottom = 0;\n var center = 0;\n var middle = 0;\n var btt = 0;\n //const sum: number = 0;\n var undoSelectorObj = { nodes: [], connectors: [] };\n var redoSelectorObj = { nodes: [], connectors: [] };\n for (i = 0; i < objects.length; i++) {\n objects[i] = this.diagram.nameTable[objects[i].id] || objects[i];\n }\n objects = sort(objects, option);\n for (i = 1; i < objects.length; i++) {\n right = right + objects[i].wrapper.bounds.topRight.x - objects[i - 1].wrapper.bounds.topRight.x;\n left = left + objects[i].wrapper.bounds.topLeft.x - objects[i - 1].wrapper.bounds.topLeft.x;\n top_3 = top_3 + objects[i].wrapper.bounds.topRight.y - objects[i - 1].wrapper.bounds.topRight.y;\n bottom = bottom + objects[i].wrapper.bounds.bottomRight.y - objects[i - 1].wrapper.bounds.bottomRight.y;\n center = center + objects[i].wrapper.bounds.center.x - objects[i - 1].wrapper.bounds.center.x;\n middle = middle + objects[i].wrapper.bounds.center.y - objects[i - 1].wrapper.bounds.center.y;\n btt = btt + objects[i].wrapper.bounds.topRight.y - objects[i - 1].wrapper.bounds.bottomRight.y;\n }\n for (i = 1; i < objects.length - 1; i++) {\n var tx = 0;\n var ty = 0;\n var prev = getBounds(objects[i - 1].wrapper);\n var current = getBounds(objects[i].wrapper);\n if (option === 'RightToLeft' || option === 'Center') {\n tx = prev.center.x - current.center.x + (center / (objects.length - 1));\n }\n else if (option === 'Right') {\n tx = prev.topRight.x - current.topRight.x + (right / (objects.length - 1));\n }\n else if (option === 'Left') {\n tx = prev.topLeft.x - current.topLeft.x + (left / (objects.length - 1));\n }\n else if (option === 'Middle') {\n ty = prev.center.y - current.center.y + (middle / (objects.length - 1));\n }\n else if (option === 'Top') {\n ty = prev.topRight.y - current.topRight.y + (top_3 / (objects.length - 1));\n }\n else if (option === 'Bottom') {\n ty = prev.bottomRight.y - current.bottomRight.y + (bottom / (objects.length - 1));\n }\n else if (option === 'BottomToTop') {\n ty = prev.bottomRight.y - current.topRight.y + (btt / (objects.length - 1));\n }\n undoSelectorObj = this.storeObject(undoSelectorObj, objects[i]);\n this.drag(objects[i], tx, ty);\n this.diagram.updateSelector();\n redoSelectorObj = this.storeObject(redoSelectorObj, objects[i]);\n }\n undoSelectorObj = cloneObject(undoSelectorObj);\n redoSelectorObj = cloneObject(redoSelectorObj);\n var entry = {\n type: 'Distribute', category: 'Internal',\n undoObject: cloneObject(undoSelectorObj), redoObject: cloneObject(redoSelectorObj)\n };\n this.addHistoryEntry(entry);\n }\n };\n /* eslint-enable */\n /**\n * sameSize method \\\n *\n * @returns { void } sameSize method .\\\n * @param {(NodeModel | ConnectorModel)[]} objects - provide the source value.\n * @param {SizingOptions} option - provide the target value.\n *\n * @private\n */\n CommandHandler.prototype.sameSize = function (objects, option) {\n if (objects.length > 0) {\n var i = 0;\n //let pivot: PointModel;\n var pivot = { x: 0.5, y: 0.5 };\n objects[0] = this.diagram.nameTable[objects[0].id] || objects[0];\n var bounds = getBounds(objects[0].wrapper);\n var undoObject = { nodes: [], connectors: [] };\n var redoObject = { nodes: [], connectors: [] };\n for (i = 1; i < objects.length; i++) {\n objects[parseInt(i.toString(), 10)] = this.diagram.nameTable[objects[parseInt(i.toString(), 10)].id] || objects[0];\n var rect = getBounds(objects[parseInt(i.toString(), 10)].wrapper);\n var sw = 1;\n var sh = 1;\n if (option === 'Width') {\n sw = bounds.width / rect.width;\n }\n else if (option === 'Height') {\n sh = bounds.height / rect.height;\n }\n else if (option === 'Size') {\n sw = bounds.width / rect.width;\n sh = bounds.height / rect.height;\n }\n undoObject = this.storeObject(undoObject, objects[parseInt(i.toString(), 10)]);\n this.scale(objects[parseInt(i.toString(), 10)], sw, sh, pivot);\n redoObject = this.storeObject(redoObject, objects[parseInt(i.toString(), 10)]);\n }\n this.diagram.updateSelector();\n undoObject = cloneObject(undoObject);\n redoObject = cloneObject(redoObject);\n var entry = {\n type: 'Sizing', category: 'Internal',\n undoObject: cloneObject(undoObject), redoObject: cloneObject(redoObject)\n };\n this.addHistoryEntry(entry);\n }\n };\n CommandHandler.prototype.storeObject = function (selectorObject, obj) {\n if (obj instanceof Node) {\n selectorObject.nodes.push(cloneObject(obj));\n }\n else {\n selectorObject.connectors.push(cloneObject(obj));\n }\n return selectorObject;\n };\n /**\n * updatePanState method \\\n *\n * @returns { any } updatePanState method .\\\n * @param {number} eventCheck - provide the eventCheck value.\n *\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n CommandHandler.prototype.updatePanState = function (eventCheck) {\n if (eventCheck) {\n this.diagram.realActions = this.diagram.realActions | RealAction.PanInProgress;\n }\n else {\n this.diagram.dataBind();\n var diagramScrollSettings = this.diagram.scrollSettings;\n this.diagram.realActions = this.diagram.realActions & ~RealAction.PanInProgress;\n var Values = {\n VerticalOffset: diagramScrollSettings.verticalOffset, HorizontalOffset: diagramScrollSettings.horizontalOffset,\n ViewportHeight: diagramScrollSettings.viewPortHeight, ViewportWidth: diagramScrollSettings.viewPortWidth,\n CurrentZoom: diagramScrollSettings.currentZoom\n };\n var arg = {\n oldValue: Values,\n newValue: Values, source: this.diagram, panState: 'Completed'\n };\n this.triggerEvent(DiagramEvent.scrollChange, arg);\n }\n };\n /**\n * dataBinding method \\\n *\n * @returns { void } dataBinding method .\\\n *\n * @private\n */\n CommandHandler.prototype.dataBinding = function () {\n this.diagram.dataBind();\n };\n CommandHandler.prototype.setBlazorDiagramProps = function (arg) {\n this.diagram.setBlazorDiagramProps(arg);\n };\n /**\n * scroll method \\\n *\n * @returns { void } scroll method .\\\n * @param {number} scrollX - provide the source value.\n * @param {number} scrollY - provide the target value.\n * @param {PointModel} focusPoint - provide the layoutOrientation value.\n *\n * @private\n */\n CommandHandler.prototype.scroll = function (scrollX, scrollY, focusPoint) {\n var panx = canPanX(this.diagram);\n var pany = canPanY(this.diagram);\n var canPan = true;\n this.diagram.pan((scrollX = panx ? scrollX : 0) * this.diagram.scroller.currentZoom, (scrollY = pany ? scrollY : 0) * this.diagram.scroller.currentZoom, focusPoint, canPan);\n };\n /**\n * drawHighlighter method \\\n *\n * @returns { NodeModel | ConnectorModel } drawHighlighter method .\\\n * @param {IElement} element - provide the element value.\n *\n * @private\n */\n CommandHandler.prototype.drawHighlighter = function (element) {\n this.diagram.renderHighlighter(element.wrapper);\n };\n /**\n * removeHighlighter method \\\n *\n * @returns { void } removeHighlighter method .\\\n *\n * @private\n */\n CommandHandler.prototype.removeHighlighter = function () {\n this.diagram.clearHighlighter();\n };\n /**\n * renderContainerHelper method \\\n *\n * @returns { NodeModel | ConnectorModel } renderContainerHelper method .\\\n * @param {NodeModel | SelectorModel | ConnectorModel} node - provide the parent value.\n *\n * @private\n */\n CommandHandler.prototype.renderContainerHelper = function (node) {\n return renderContainerHelper(this.diagram, node);\n };\n /**\n * isParentAsContainer method \\\n *\n * @returns { boolean } isParentAsContainer method .\\\n * @param {NodeModel} node - provide the parent value.\n * @param {boolean} isChild - provide the target value.\n *\n * @private\n */\n CommandHandler.prototype.isParentAsContainer = function (node, isChild) {\n return checkParentAsContainer(this.diagram, node, isChild);\n };\n /**\n * @returns { boolean } isParentAsContainer method .\\\n * @param {NodeModel} node - provide the target Node value.\n * @private\n */\n CommandHandler.prototype.isTargetSubProcess = function (node) {\n if (node && node.shape && node.shape.type === 'Bpmn' && node.shape.activity && node.shape.activity.activity === 'SubProcess') {\n return true;\n }\n return false;\n };\n /**\n * dropChildToContainer method \\\n *\n * @returns { void } dropChildToContainer method .\\\n * @param {NodeModel} parent - provide the parent value.\n * @param {NodeModel} node - provide the target value.\n *\n * @private\n */\n CommandHandler.prototype.dropChildToContainer = function (parent, node) {\n if (!(this.diagram.diagramActions & DiagramAction.PreventLaneContainerUpdate)) {\n addChildToContainer(this.diagram, parent, node);\n if (node.hasTextAnnotation) {\n for (var i = 0; i < node.outEdges.length; i++) {\n var con = this.diagram.nameTable[node.outEdges[parseInt(i.toString(), 10)]];\n if (con.isBpmnAnnotationConnector) {\n var annotationNode = this.diagram.nameTable[con.targetID];\n addChildToContainer(this.diagram, parent, annotationNode);\n }\n }\n }\n }\n };\n /**\n * @returns { void } updateLaneChildrenZindex method .\\\n * @param {NodeModel} node - provide the node value.\n * @param {IElement} target - provide the target value.\n * @private\n */\n CommandHandler.prototype.updateLaneChildrenZindex = function (node, target) {\n var lowerIndexobject = this.findLeastIndexObject(node, target);\n var swimlane = this.diagram.nameTable[target.parentId];\n if (swimlane && swimlane.zIndex > lowerIndexobject.zIndex) {\n var layerIndex = this.diagram.layers.indexOf(this.diagram.getActiveLayer());\n var layerZIndexTable = this.diagram.layers[parseInt(layerIndex.toString(), 10)].zIndexTable;\n var tempTable = JSON.parse(JSON.stringify(layerZIndexTable));\n var startIndex = lowerIndexobject.zIndex;\n var endIndex = swimlane.zIndex;\n for (var i = endIndex; i >= startIndex; i--) {\n if (startIndex !== i) {\n if (!layerZIndexTable[i - 1]) {\n layerZIndexTable[i - 1] = layerZIndexTable[parseInt(i.toString(), 10)];\n this.diagram.nameTable[layerZIndexTable[i - 1]].zIndex = i;\n delete layerZIndexTable[parseInt(i.toString(), 10)];\n }\n else {\n //bringing the objects forward\n layerZIndexTable[parseInt(i.toString(), 10)] = layerZIndexTable[i - 1];\n this.diagram.nameTable[layerZIndexTable[parseInt(i.toString(), 10)]].zIndex = i;\n }\n }\n else {\n var tempIndex = this.swapZIndexObjects(endIndex, layerZIndexTable, swimlane.id, tempTable);\n }\n }\n if (this.diagram.mode === 'SVG') {\n this.moveSvgNode(target.parentId, lowerIndexobject.id);\n this.updateNativeNodeIndex(target.parentId, lowerIndexobject.id);\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n }\n };\n CommandHandler.prototype.findLeastIndexConnector = function (edges, target, index) {\n for (var i = 0; i < edges.length; i++) {\n var connector = this.diagram.nameTable[edges[parseInt(i.toString(), 10)]];\n if (index.zIndex > connector.zIndex) {\n index = connector;\n }\n }\n return index;\n };\n CommandHandler.prototype.findLeastIndexObject = function (node, target) {\n var lowerIndexobject = node;\n if (node instanceof Node) {\n lowerIndexobject = this.findLeastIndexConnector(node.inEdges, target, lowerIndexobject);\n lowerIndexobject = this.findLeastIndexConnector(node.outEdges, target, lowerIndexobject);\n }\n return lowerIndexobject;\n };\n /**\n * checkSelection method \\\n *\n * @returns { void } checkSelection method .\\\n * @param {SelectorModel} selector - provide the source value.\n * @param {string} corner - provide the target value.\n *\n * @private\n */\n CommandHandler.prototype.checkSelection = function (selector, corner) {\n var node; // let wrapper: GridPanel; let child: Container; let index: number; let shape: SwimLaneModel;\n if (selector.nodes.length === 1 && selector.connectors.length === 0) {\n if (checkParentAsContainer(this.diagram, selector.nodes[0], true)) {\n node = (selector.nodes[0].shape === 'SwimLane') ? selector.nodes[0] :\n this.diagram.nameTable[selector.nodes[0].parentId];\n var child = selector.nodes[0];\n if (node.shape.type === 'SwimLane') {\n var orientation_1 = (node.shape.orientation === 'Horizontal') ? true : false;\n if ((child.isPhase && ((orientation_1 && corner === 'ResizeSouth') || (!orientation_1 && corner === 'ResizeEast'))) ||\n (child.isLane && ((orientation_1 && corner === 'ResizeEast') || (!orientation_1 && corner === 'ResizeSouth')))) {\n swimLaneSelection(this.diagram, node, corner);\n }\n }\n else if (node.container.type === 'Grid') {\n if (((node.container.orientation === 'Horizontal' && child.rowIndex === 1) ||\n (node.container.orientation === 'Vertical' && child.rowIndex > 0 && child.columnIndex > 0))) {\n if (corner === 'ResizeSouth') {\n for (var i = 0; i < this.diagram.nodes.length; i++) {\n var obj = this.diagram.nodes[parseInt(i.toString(), 10)];\n if (obj.rowIndex === node.rows.length - 1 && obj.columnIndex === 0) {\n this.select(obj);\n break;\n }\n }\n }\n }\n else {\n if (corner === 'ResizeEast') {\n for (var i = 0; i < this.diagram.nodes.length; i++) {\n var obj = this.diagram.nodes[parseInt(i.toString(), 10)];\n if (obj.rowIndex === 1 && obj.columnIndex === node.columns.length - 1) {\n this.select(obj);\n break;\n }\n }\n }\n }\n }\n }\n else {\n swimLaneSelection(this.diagram, selector.nodes[0], corner);\n }\n }\n };\n /**\n * zoom method \\\n *\n * @returns { void } zoom method .\\\n * @param {number} scale - provide the source value.\n * @param {number} scrollX - provide the target value.\n * @param {number} scrollY - provide the layoutOrientation value.\n * @param {PointModel} focusPoint - provide the layoutOrientation value.\n *\n * @private\n */\n CommandHandler.prototype.zoom = function (scale, scrollX, scrollY, focusPoint) {\n this.diagram.scroller.zoom(scale, scrollX * this.diagram.scroller.currentZoom, scrollY * this.diagram.scroller.currentZoom, focusPoint);\n };\n return CommandHandler;\n}());\n\n/**\n */\nvar DiagramScroller = /** @__PURE__ @class */ (function () {\n function DiagramScroller(diagram) {\n /** @private */\n this.transform = { tx: 0, ty: 0, scale: 1 };\n /** @private */\n this.oldCollectionObjects = [];\n /** @private */\n this.removeCollection = [];\n this.vPortWidth = 0;\n this.vPortHeight = 0;\n this.currentZoomFActor = 1;\n this.hOffset = 0;\n this.vOffset = 0;\n this.scrolled = false;\n this.hScrollSize = 0;\n this.vScrollSize = 0;\n this.diagram = diagram;\n this.objects = [];\n this.transform = diagram.scroller ? diagram.scroller.transform : { tx: 0, ty: 0, scale: 1 };\n this.vPortWidth = diagram.scrollSettings.viewPortWidth;\n this.vPortHeight = diagram.scrollSettings.viewPortHeight;\n this.currentZoomFActor = diagram.scrollSettings.currentZoom;\n this.hOffset = diagram.scrollSettings.horizontalOffset;\n this.vOffset = diagram.scrollSettings.verticalOffset;\n }\n Object.defineProperty(DiagramScroller.prototype, \"viewPortHeight\", {\n /**\n * verticalOffset method \\\n *\n * @returns { number } verticalOffset method .\\\n *\n * @private\n */\n get: function () {\n return this.vPortHeight;\n },\n /**\n * verticalOffset method \\\n *\n * @returns { void } verticalOffset method .\\\n * @param {number} offset - provide the hOffset value.\n *\n * @private\n */\n set: function (offset) {\n this.vPortHeight = offset;\n this.diagram.scrollSettings.viewPortHeight = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"currentZoom\", {\n /**\n * verticalOffset method \\\n *\n * @returns { number } verticalOffset method .\\\n *\n * @private\n */\n get: function () {\n return this.currentZoomFActor;\n },\n /**\n * verticalOffset method \\\n *\n * @returns { void } verticalOffset method .\\\n * @param {number} offset - provide the hOffset value.\n *\n * @private\n */\n set: function (offset) {\n this.currentZoomFActor = offset;\n this.diagram.scrollSettings.currentZoom = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"viewPortWidth\", {\n /**\n * verticalOffset method \\\n *\n * @returns { number } verticalOffset method .\\\n *\n * @private\n */\n get: function () {\n return this.vPortWidth;\n },\n /**\n * verticalOffset method \\\n *\n * @returns { void } verticalOffset method .\\\n * @param {number} offset - provide the hOffset value.\n *\n * @private\n */\n set: function (offset) {\n this.vPortWidth = offset;\n this.diagram.scrollSettings.viewPortWidth = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"horizontalOffset\", {\n /**\n * verticalOffset method \\\n *\n * @returns { number } verticalOffset method .\\\n *\n * @private\n */\n get: function () {\n return this.hOffset;\n },\n /**\n * verticalOffset method \\\n *\n * @returns { void } verticalOffset method .\\\n * @param {number} offset - provide the hOffset value.\n *\n * @private\n */\n set: function (offset) {\n this.hOffset = offset;\n if (Math.abs(this.hOffset - this.diagram.scrollSettings.horizontalOffset) > 1) {\n this.diagram.realActions = this.diagram.realActions | RealAction.hScrollbarMoved;\n this.scrolled = true;\n }\n this.diagram.scrollSettings.horizontalOffset = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"verticalOffset\", {\n /**\n * verticalOffset method \\\n *\n * @returns { number } verticalOffset method .\\\n *\n * @private\n */\n get: function () {\n return this.vOffset;\n },\n /**\n * verticalOffset method \\\n *\n * @returns { void } verticalOffset method .\\\n * @param {number} offset - provide the hOffset value.\n *\n * @private\n */\n set: function (offset) {\n this.vOffset = offset;\n if (Math.abs(this.vOffset - this.diagram.scrollSettings.verticalOffset) > 1) {\n this.diagram.realActions = this.diagram.realActions | RealAction.vScrollbarMoved;\n this.scrolled = true;\n }\n this.diagram.scrollSettings.verticalOffset = offset;\n },\n enumerable: true,\n configurable: true\n });\n // Method added to get bounds value if diagram is loaded from negative axis.\n // SF-359118 implemented for this ticket requirement.\n DiagramScroller.prototype.getBounds = function () {\n var pageBounds;\n var postion = this.diagram.spatialSearch.getPageBounds(0, 0);\n if ((postion.x < 0 || postion.y < 0) && !this.diagram.pageSettings.multiplePage) {\n pageBounds = this.getPageBounds(undefined, undefined, true, true);\n }\n else {\n pageBounds = this.getPageBounds(undefined, undefined, true);\n }\n return pageBounds;\n };\n /**\n * updateScrollOffsets method \\\n *\n * @returns { void } updateScrollOffsets method .\\\n * @param {number} hOffset - provide the hOffset value.\n * @param {number} vOffset - provide the vOffset value.\n *\n * @private\n */\n DiagramScroller.prototype.updateScrollOffsets = function (hOffset, vOffset) {\n var offsetX = 0;\n var offsetY = 0;\n var pageBounds = this.getBounds();\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n pageBounds.width *= this.currentZoom;\n pageBounds.height *= this.currentZoom;\n offsetX = Math.max(0, hOffset - pageBounds.left);\n offsetY = Math.max(0, vOffset - pageBounds.top);\n if (hOffset !== undefined && vOffset !== undefined) {\n this.horizontalOffset = offsetX;\n this.verticalOffset = offsetY;\n this.diagram.setOffset(offsetX, offsetY);\n }\n else {\n this.diagram.setOffset(-this.horizontalOffset - pageBounds.x, -this.verticalOffset - pageBounds.y);\n }\n this.transform = {\n tx: Math.max(this.horizontalOffset, -pageBounds.left) / this.currentZoom, ty: Math.max(this.verticalOffset, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n };\n /**\n * setScrollOffset method \\\n *\n * @returns { void } setScrollOffset method .\\\n * @param {number} hOffset - provide the hOffset value.\n * @param {number} vOffset - provide the vOffset value.\n *\n * @private\n */\n DiagramScroller.prototype.setScrollOffset = function (hOffset, vOffset) {\n this.scrolled = false;\n var pageBounds = this.getBounds();\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n pageBounds.width *= this.currentZoom;\n pageBounds.height *= this.currentZoom;\n var x = -pageBounds.left;\n var y = -pageBounds.top;\n var set = false;\n var viewWidth = this.viewPortWidth * this.currentZoom;\n var viewHeight = this.viewPortHeight * this.currentZoom;\n var newX = x - hOffset;\n if (newX !== this.horizontalOffset) {\n if (x < this.horizontalOffset) {\n if (this.horizontalOffset > newX) {\n this.horizontalOffset -= hOffset;\n }\n else {\n this.horizontalOffset = newX;\n }\n set = true;\n }\n var right = Math.max(pageBounds.right + this.vScrollSize, viewWidth);\n if (!set && right < -newX + this.viewPortWidth) {\n var actualRight = -newX + viewWidth - this.vScrollSize;\n var currentRight = -this.horizontalOffset + viewWidth - this.vScrollSize;\n if (actualRight < currentRight) {\n //define\n this.horizontalOffset = newX;\n }\n else {\n if (actualRight - pageBounds.right > actualRight - currentRight) {\n this.horizontalOffset = newX;\n }\n else {\n this.horizontalOffset = -(pageBounds.right + this.vScrollSize - viewWidth);\n }\n }\n set = true;\n }\n if (!set) {\n this.horizontalOffset = x - hOffset;\n }\n }\n set = false;\n //vertical offset\n var newY = y - vOffset;\n if (newY !== this.verticalOffset) {\n if (y < this.verticalOffset) {\n if (this.verticalOffset > newY) {\n this.verticalOffset -= vOffset;\n }\n else {\n this.verticalOffset = newY;\n }\n set = true;\n }\n var bottom = Math.max(pageBounds.bottom + this.hScrollSize, viewHeight);\n if (!set && bottom < -newY + viewHeight) {\n var actualBottom = -newY + viewHeight - this.hScrollSize;\n var currentBottom = -this.verticalOffset + viewHeight - this.hScrollSize;\n if (actualBottom < currentBottom) {\n //define\n this.verticalOffset = newY;\n }\n else {\n if (actualBottom - pageBounds.bottom > actualBottom - currentBottom) {\n this.verticalOffset = newY;\n }\n else {\n this.verticalOffset = -(pageBounds.bottom + this.hScrollSize - viewHeight);\n }\n }\n set = true;\n }\n if (!set) {\n this.verticalOffset = y - vOffset;\n }\n }\n this.transform = {\n tx: Math.max(this.horizontalOffset, -pageBounds.left) / this.currentZoom, ty: Math.max(this.verticalOffset, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n this.setSize();\n };\n /**\n * getObjects \\\n *\n * @returns { string[] } To get page pageBounds.\\\n * @param {string[]} coll1 - provide the source value.\n * @param {string[]} coll2 - provide the source value.\n * @private\n */\n DiagramScroller.prototype.getObjects = function (coll1, coll2) {\n var objects = [];\n for (var i = 0; i < coll1.length; i++) {\n var isExist = false;\n for (var j = 0; j < coll2.length; j++) {\n if (coll1[parseInt(i.toString(), 10)] === coll2[parseInt(j.toString(), 10)]) {\n isExist = true;\n break;\n }\n }\n if (!isExist) {\n objects.push(coll1[parseInt(i.toString(), 10)]);\n }\n }\n return objects;\n };\n /**\n * virtualizeElements \\\n *\n * @returns { void } To get page pageBounds.\\\n *\n * @private\n */\n DiagramScroller.prototype.virtualizeElements = function () {\n var viewWidth = this.viewPortWidth / this.currentZoom;\n var viewHeight = this.viewPortHeight / this.currentZoom;\n var oObjects = this.diagram.spatialSearch.findObjects(new Rect(-this.horizontalOffset / this.currentZoom, -this.verticalOffset / this.currentZoom, viewWidth, viewHeight));\n var oObjectsID = [];\n var renderOrder = [];\n for (var j = 0; j < oObjects.length; j++) {\n var bpmnShape = oObjects[parseInt(j.toString(), 10)].shape;\n if (bpmnShape.type === 'Bpmn' && bpmnShape && bpmnShape.activity && bpmnShape.activity.subProcess && bpmnShape.activity.subProcess.processes && bpmnShape.activity.subProcess.processes.length > 0) {\n for (var k = 0; k < bpmnShape.activity.subProcess.processes.length; k++) {\n renderOrder.push(bpmnShape.activity.subProcess.processes[parseInt(k.toString(), 10)]);\n }\n renderOrder.push(oObjects[parseInt(j.toString(), 10)].id);\n }\n else if (oObjects[parseInt(j.toString(), 10)].processId === '' || oObjects[parseInt(j.toString(), 10)].processId === undefined) {\n renderOrder.push(oObjects[parseInt(j.toString(), 10)].id);\n }\n }\n oObjectsID = renderOrder;\n var zindexOrder = [];\n for (var j = 0; j < oObjects.length; j++) {\n var items = oObjects[parseInt(j.toString(), 10)].shape;\n if (items.type === 'Bpmn' && items && items.activity && items.activity.subProcess && items.activity.subProcess.processes && items.activity.subProcess.processes.length > 0) {\n zindexOrder.push(oObjects[parseInt(j.toString(), 10)].id);\n for (var t = 0; t < items.activity.subProcess.processes.length; t++) {\n zindexOrder.push(items.activity.subProcess.processes[parseInt(t.toString(), 10)]);\n }\n }\n else if (oObjects[parseInt(j.toString(), 10)].processId === '' || oObjects[parseInt(j.toString(), 10)].processId === undefined) {\n zindexOrder.push(oObjects[parseInt(j.toString(), 10)].id);\n }\n }\n for (var j = 0; j < oObjects.length; j++) {\n for (var k = 0; k < zindexOrder.length; k++) {\n if (oObjects[parseInt(j.toString(), 10)].id === zindexOrder[parseInt(k.toString(), 10)]) {\n oObjects[parseInt(j.toString(), 10)].zIndex = k;\n break;\n }\n }\n }\n var newObjects = this.getObjects(oObjectsID, this.oldCollectionObjects);\n if (this.oldCollectionObjects.length === 0) {\n this.oldCollectionObjects = oObjectsID;\n }\n var removeObjects = this.getObjects(this.oldCollectionObjects, oObjectsID);\n this.diagram.updateVirtualObjects(newObjects, false, removeObjects);\n this.oldCollectionObjects = oObjectsID;\n };\n /**\n * setSize \\\n *\n * @returns { void } To get page pageBounds.\\\n * @param {PointModel} newOffset - provide the newOffset value.\n *\n * @private\n */\n DiagramScroller.prototype.setSize = function (newOffset) {\n var pageBounds = this.getPageBounds(undefined, undefined, true);\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n pageBounds.width *= this.currentZoom;\n pageBounds.height *= this.currentZoom;\n var x = Math.min(pageBounds.x, -this.horizontalOffset);\n var y = Math.min(pageBounds.y, -this.verticalOffset);\n var difX = -this.horizontalOffset + this.viewPortWidth - pageBounds.right;\n var difY = -this.verticalOffset + this.viewPortHeight - pageBounds.bottom;\n var hScrollSize = this.scrollerWidth;\n var vScrollSize = this.scrollerWidth;\n if (-this.verticalOffset <= pageBounds.y && -this.verticalOffset + this.viewPortHeight >= pageBounds.bottom) {\n vScrollSize = 0;\n }\n if (-this.horizontalOffset <= pageBounds.x && -this.horizontalOffset + this.viewPortWidth >= pageBounds.right) {\n hScrollSize = 0;\n }\n this.hScrollSize = hScrollSize;\n this.vScrollSize = vScrollSize;\n var oldWidth = this.diagramWidth;\n var oldHeight = this.diagramHeight;\n this.diagramWidth = Math.max(pageBounds.right, -this.horizontalOffset + this.viewPortWidth - vScrollSize) - x;\n this.diagramHeight = Math.max(pageBounds.bottom, -this.verticalOffset + this.viewPortHeight - hScrollSize) - y;\n if ((oldWidth !== this.diagramWidth || oldHeight !== this.diagramHeight) && this.diagram.scrollSettings.scrollLimit !== 'Diagram') {\n this.diagram.setSize(this.diagramWidth, this.diagramHeight);\n }\n if (this.diagram.scrollSettings.scrollLimit === 'Diagram') {\n if ((oldWidth !== this.diagramWidth || oldHeight !== this.diagramHeight || this.currentZoom !== 1)\n && ((!this.diagram.diagramActions || !newOffset) || (this.diagram.diagramActions && newOffset &&\n ((this.verticalOffset !== 0 || this.verticalOffset === newOffset.y) &&\n (this.horizontalOffset !== 0 || this.horizontalOffset === newOffset.x))))) {\n if ((this.diagram.scrollActions & ScrollActions.Interaction) && newOffset) {\n this.transform = {\n tx: Math.max(newOffset.x, -(pageBounds.left / this.currentZoom)) / this.currentZoom,\n ty: Math.max(newOffset.y, -(pageBounds.top / this.currentZoom)) / this.currentZoom,\n scale: this.currentZoom\n };\n this.horizontalOffset = newOffset.x;\n this.verticalOffset = newOffset.y;\n }\n this.diagram.setSize(this.diagramWidth, this.diagramHeight);\n if ((!(this.diagram.scrollActions & ScrollActions.PropertyChange)) && newOffset) {\n this.horizontalOffset = newOffset.x;\n this.verticalOffset = newOffset.y;\n this.transform = {\n tx: Math.max(newOffset.x, -pageBounds.left) / this.currentZoom,\n ty: Math.max(newOffset.y, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n }\n }\n else if (newOffset && oldWidth === this.diagramWidth && oldHeight === this.diagramHeight &&\n ((this.diagram.diagramCanvas.scrollHeight > this.viewPortHeight &&\n newOffset.y < 0 && this.horizontalOffset === newOffset.x && this.verticalOffset === 0) ||\n (this.diagram.diagramCanvas.scrollWidth > this.viewPortWidth &&\n newOffset.x < 0 && this.verticalOffset === newOffset.y && this.horizontalOffset === 0))) {\n this.verticalOffset = newOffset.y;\n this.horizontalOffset = newOffset.x;\n this.transform = {\n tx: Math.max(newOffset.x, -pageBounds.left) / this.currentZoom,\n ty: Math.max(newOffset.y, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n }\n }\n this.diagram.transformLayers();\n this.diagram.element.style.overflow = 'hidden';\n };\n /**\n * setViewPortSize \\\n *\n * @returns { void } To get page pageBounds.\\\n * @param {number} width - provide the factor value.\n * @param {number} height - provide the factor value.\n *\n * @private\n */\n DiagramScroller.prototype.setViewPortSize = function (width, height) {\n this.viewPortWidth = width;\n this.viewPortHeight = height;\n };\n /**\n * To get page pageBounds \\\n *\n * @returns { Rect } To get page pageBounds.\\\n * @param {boolean} boundingRect - provide the factor value.\n * @param {DiagramRegions} region - provide the factor value.\n * @param {boolean} hasPadding - provide the factor value.\n * @param {boolean} isnegativeRegion - provide the isnegativeRegion value.\n *\n * @private\n */\n DiagramScroller.prototype.getPageBounds = function (boundingRect, region, hasPadding, isnegativeRegion) {\n var rect = new Rect();\n var pageBounds;\n if (region !== 'Content' && !isnegativeRegion && this.diagram.pageSettings.width !== null && this.diagram.pageSettings.height !== null) {\n var width = this.diagram.pageSettings.width;\n var height = this.diagram.pageSettings.height;\n var negwidth = 0;\n var negheight = 0;\n if (this.diagram.pageSettings.multiplePage) {\n rect = this.diagram.spatialSearch.getPageBounds(0, 0);\n if (rect.right > width) {\n var x = Math.ceil(rect.right / width);\n width = width * x;\n }\n if (rect.bottom > height) {\n var x = Math.ceil(rect.bottom / height);\n height = height * x;\n }\n if (rect.left < 0 && Math.abs(rect.left) > negwidth) {\n var x = Math.ceil(Math.abs(rect.left) / this.diagram.pageSettings.width);\n negwidth = this.diagram.pageSettings.width * x;\n }\n if (rect.top < 0 && Math.abs(rect.top) > negheight) {\n var x = Math.ceil(Math.abs(rect.top) / this.diagram.pageSettings.height);\n negheight = this.diagram.pageSettings.height * x;\n }\n }\n pageBounds = new Rect((-negwidth), (-negheight), width + negwidth, height + negheight);\n }\n else {\n var origin_1 = boundingRect ? undefined : 0;\n pageBounds = this.diagram.spatialSearch.getPageBounds(origin_1, origin_1);\n }\n if (hasPadding) {\n var scrollpadding = this.diagram.scrollSettings.padding;\n pageBounds.x -= scrollpadding.left;\n pageBounds.y -= scrollpadding.top;\n pageBounds.width += (scrollpadding.left + scrollpadding.right);\n pageBounds.height += (scrollpadding.top + scrollpadding.bottom);\n }\n return pageBounds;\n };\n /**\n * To get page break when PageBreak is set as true \\\n *\n * @returns { Segment[] } To get page break when PageBreak is set as true.\\\n * @param {Rect} pageBounds - provide the factor value.\n *\n * @private\n */\n DiagramScroller.prototype.getPageBreak = function (pageBounds) {\n var i = 0;\n var j = 0;\n var v = -1;\n var collection = [];\n var x1 = 0;\n var x2 = 0;\n var y1 = 0;\n var y2 = 0;\n var left = this.diagram.pageSettings.margin.left;\n var right = this.diagram.pageSettings.margin.right;\n var top = this.diagram.pageSettings.margin.top;\n var bottom = this.diagram.pageSettings.margin.bottom;\n var widthCount = 1;\n var heightCount = 1;\n var segment = { x1: x1, y1: y1, x2: x2, y2: y2 };\n while (pageBounds.width > i) {\n i = i + (this.diagram.pageSettings.width ? this.diagram.pageSettings.width : pageBounds.width);\n if (i === this.diagram.pageSettings.width) {\n segment = {\n x1: pageBounds.left + left, y1: pageBounds.top + top,\n x2: pageBounds.left + left, y2: pageBounds.bottom - bottom\n };\n collection[++v] = segment;\n }\n if (i < pageBounds.width) {\n x1 = pageBounds.topLeft.x + this.diagram.pageSettings.width * widthCount;\n y1 = pageBounds.topLeft.y + top;\n x2 = pageBounds.bottomLeft.x + this.diagram.pageSettings.width * widthCount;\n y2 = pageBounds.bottomLeft.y - bottom;\n segment = { x1: x1, y1: y1, x2: x2, y2: y2 };\n collection[++v] = segment;\n widthCount++;\n }\n if (pageBounds.width === i) {\n segment = {\n x1: pageBounds.right - right, y1: pageBounds.top + top,\n x2: pageBounds.right - right, y2: pageBounds.bottom - bottom\n };\n collection[++v] = segment;\n }\n }\n while (pageBounds.height > j) {\n j = j + (this.diagram.pageSettings.height ? this.diagram.pageSettings.height : pageBounds.height);\n if (j === this.diagram.pageSettings.height) {\n segment = {\n x1: pageBounds.left + left, y1: pageBounds.top + top,\n x2: pageBounds.right - right, y2: pageBounds.top + top\n };\n collection[++v] = segment;\n }\n if (j < pageBounds.height) {\n x1 = pageBounds.topLeft.x + left;\n y1 = pageBounds.topLeft.y + this.diagram.pageSettings.height * heightCount;\n x2 = pageBounds.topRight.x - right;\n y2 = pageBounds.topRight.y + this.diagram.pageSettings.height * heightCount;\n segment = { x1: x1, y1: y1, x2: x2, y2: y2 };\n collection[++v] = segment;\n heightCount++;\n }\n if (pageBounds.height === j) {\n segment = {\n x1: pageBounds.left + left, y1: pageBounds.bottom - bottom,\n x2: pageBounds.right - right, y2: pageBounds.bottom - bottom\n };\n collection[++v] = segment;\n }\n }\n return collection;\n };\n /**\n * zoom method \\\n *\n * @returns { void } zoom method .\\\n * @param {number} factor - provide the factor value.\n * @param {number} deltaX - provide the bounds value.\n * @param {number} deltaY - provide the bounds value.\n * @param {PointModel} focusPoint - provide the bounds value.\n * @param {boolean} isInteractiveZoomPan - provide the isInteractiveZoomPan value.\n * @param {boolean} isBringIntoView - provide the isBringIntoView value.\n * @param {boolean} isTrackpadScroll - provide the isTrackpadScroll value.\n * @param {boolean} canZoomOut - provide the canZoomOut value.\n *\n * @private\n */\n DiagramScroller.prototype.zoom = function (factor, deltaX, deltaY, focusPoint, isInteractiveZoomPan, isBringIntoView, isTrackpadScroll, canZoomOut) {\n if (canZoom(this.diagram) && factor !== 1 || (canPan(this.diagram) && factor === 1)) {\n var matrix = identityMatrix();\n scaleMatrix(matrix, this.currentZoom, this.currentZoom);\n translateMatrix(matrix, this.horizontalOffset, this.verticalOffset);\n focusPoint = focusPoint || {\n x: (this.viewPortWidth / 2 - this.horizontalOffset) / this.currentZoom,\n y: (this.viewPortHeight / 2 - this.verticalOffset) / this.currentZoom\n };\n focusPoint = transformPointByMatrix(matrix, focusPoint);\n //Bug 853566: Fit to page is not working when zoom value less than minZoom.\n // Removed minZoom calculation to call fitToPage even if currentZoom less than minZoom.\n if ((this.currentZoom * factor) <= this.diagram.scrollSettings.maxZoom &&\n ((this.currentZoom * factor) >= this.diagram.scrollSettings.minZoom || (canZoomOut || factor >= 1))) {\n this.currentZoom *= factor;\n var pageBounds = this.getPageBounds(undefined, undefined, true);\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n //target Matrix\n var targetMatrix = identityMatrix();\n scaleMatrix(targetMatrix, factor, factor, focusPoint.x, focusPoint.y);\n translateMatrix(targetMatrix, deltaX || 0, deltaY || 0);\n multiplyMatrix(matrix, targetMatrix);\n var newOffset = transformPointByMatrix(matrix, { x: 0, y: 0 });\n if (factor === 1) {\n // EJ2-69238 - add true as an extra parameter to calcuate the horizontal and vertical offset\n newOffset = this.applyScrollLimit(newOffset.x, newOffset.y, isInteractiveZoomPan, isBringIntoView, isTrackpadScroll);\n }\n // Bug 829925: Scroll bar flickers on scrolling the diagram using touchpad.\n // The below condition is used to avoid the flickering of the scroll bar on scrolling the diagram using trackpad.\n isTrackpadScroll = (-(pageBounds.y) >= newOffset.y && -(pageBounds.x) >= newOffset.x && isTrackpadScroll);\n if ((this.diagram.scrollActions & ScrollActions.PropertyChange ||\n !(this.diagram.scrollActions & ScrollActions.Interaction)) ||\n this.diagram.scrollSettings.scrollLimit !== 'Diagram' || isTrackpadScroll) {\n this.transform = {\n tx: Math.max(newOffset.x, -pageBounds.left) / this.currentZoom,\n ty: Math.max(newOffset.y, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n this.horizontalOffset = newOffset.x;\n this.verticalOffset = newOffset.y;\n }\n this.setSize(newOffset);\n if (this.diagram.mode !== 'SVG' && canVitualize(this.diagram)) {\n this.diagram.scroller.virtualizeElements();\n }\n if (this.diagram.mode !== 'SVG' && !canVitualize(this.diagram)) {\n this.diagram.refreshDiagramLayer();\n }\n this.diagram.setOffset(-this.horizontalOffset - pageBounds.x, -this.verticalOffset - pageBounds.y);\n updateRuler(this.diagram);\n //Bug 863516: Overview is not synced with diagram content while zoom-out the diagram.\n //Updating overview after the page scrolled or zoomed.\n if (this.diagram.views && this.diagram.views.overview) {\n var overview = this.diagram.views.overview;\n var bounds = overview.scrollOverviewRect(overview.parent.scroller.horizontalOffset, overview.parent.scroller.verticalOffset, overview.parent.scroller.currentZoom, true);\n overview.updateOverviewrect(-bounds.x, -bounds.y, bounds.width, bounds.height);\n overview.updateView(overview);\n }\n }\n }\n };\n /**\n * fitToPage method \\\n *\n * @returns { void } fitToPage method .\\\n * @param {IFitOptions} options - provide the bounds value.\n *\n * @private\n */\n DiagramScroller.prototype.fitToPage = function (options) {\n options = options || {};\n var mode = options.mode;\n var region = options.region;\n var margin = options.margin || {};\n var canZoomIn = options.canZoomIn;\n var customBounds = options.customBounds;\n // Allows fitToPage when the currentZoom less than minZoom.\n var canZoomOut = options.canZoomOut;\n margin.bottom = margin.bottom || 25;\n margin.top = margin.top || 25;\n margin.left = margin.left || 25;\n margin.right = margin.right || 25;\n var bounds = customBounds;\n var factor;\n var deltaX = -this.horizontalOffset;\n var deltaY = -this.verticalOffset;\n region = region ? region : 'PageSettings';\n //fit mode\n if ((region === 'PageSettings' && this.diagram.pageSettings.width && this.diagram.pageSettings.height)\n || (this.diagram.nodes.length > 0 || this.diagram.connectors.length > 0)) {\n mode = mode ? mode : 'Page';\n if (region !== 'CustomBounds') {\n bounds = this.getPageBounds(true, region, true);\n }\n var scale = { x: 0, y: 0 };\n //Bug 853566: Fit to page is not working when zoom value less than minZoom.\n // Resetting margin value if the margin value is greater than the viewport size to avoid scale value in negative.\n if ((margin.left + margin.right) > this.viewPortWidth) {\n if (this.viewPortWidth <= 100) {\n margin.left = 5;\n margin.right = 5;\n }\n else {\n margin.left = 25;\n margin.right = 25;\n }\n }\n if ((margin.top + margin.bottom) > this.viewPortHeight) {\n if (this.viewPortHeight <= 100) {\n margin.top = 5;\n margin.bottom = 5;\n }\n else {\n margin.top = 25;\n margin.bottom = 25;\n }\n }\n scale.x = (this.viewPortWidth - (margin.left + margin.right)) / (bounds.width);\n scale.y = (this.viewPortHeight - (margin.top + margin.bottom)) / (bounds.height);\n if (!canZoomIn && (((bounds.width - this.horizontalOffset) < this.viewPortWidth) &&\n (bounds.height - this.verticalOffset) < this.viewPortHeight)) {\n scale.x = Math.min(this.currentZoom, scale.x);\n scale.y = Math.min(this.currentZoom, scale.y);\n }\n var zoomFactor = void 0;\n var centerX = void 0;\n var centerY = void 0;\n switch (mode) {\n case 'Width':\n zoomFactor = scale.x;\n factor = zoomFactor / this.currentZoom;\n centerX = (this.viewPortWidth - (bounds.width) * zoomFactor) / 2 - bounds.x * zoomFactor;\n deltaX += centerX + (margin.left - margin.right) / 2 * zoomFactor;\n deltaY -= -this.verticalOffset * factor;\n deltaY = region !== 'CustomBounds' ? deltaY : deltaY - this.verticalOffset * factor;\n break;\n case 'Height':\n zoomFactor = scale.y;\n factor = (zoomFactor / this.currentZoom);\n centerX = ((this.viewPortWidth - (bounds.width) * zoomFactor) / 2) - bounds.x * zoomFactor;\n centerY = ((this.viewPortHeight - (bounds.height) * zoomFactor) / 2) - bounds.y * zoomFactor;\n deltaX += centerX + (margin.left - margin.right) / 2 * zoomFactor;\n deltaY += centerY + (margin.top - margin.bottom) / 2 * zoomFactor;\n break;\n case 'Page':\n zoomFactor = Math.min(scale.x, scale.y);\n factor = (zoomFactor / this.currentZoom);\n centerX = (this.viewPortWidth - (bounds.width) * zoomFactor) / 2 - bounds.x * zoomFactor;\n centerY = (this.viewPortHeight - (bounds.height) * zoomFactor) / 2 - bounds.y * zoomFactor;\n deltaX += centerX + (margin.left - margin.right) / 2 * zoomFactor;\n deltaY += centerY + (margin.top - margin.bottom) / 2 * zoomFactor;\n break;\n }\n /**\n * EJ2-62912 - fit to page is not working properly when call it multiple times.\n */\n this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 }, true, undefined, undefined, canZoomOut);\n }\n else {\n factor = 1 / this.currentZoom;\n this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 }, true, undefined, undefined, canZoomOut);\n }\n };\n /**\n * bringIntoView method \\\n *\n * @returns { void } bringIntoView method .\\\n * @param {Rect} rect - provide the bounds value.\n * @param {boolean} isBringIntoView - provide the isBringIntoView value.\n *\n * @private\n */\n DiagramScroller.prototype.bringIntoView = function (rect, isBringIntoView) {\n // EJ2-68130-Bringintoview shows the object outside the viewport\n var x = 0;\n var y = 0;\n var scale = this.currentZoom;\n var bounds = rect;\n var hoffset = -this.horizontalOffset;\n var voffset = -this.verticalOffset;\n bounds = new Rect(bounds.x * scale, bounds.y * scale, bounds.width * scale, bounds.height * scale);\n var view = new Rect(hoffset, voffset, this.viewPortWidth, this.viewPortHeight);\n //To prevent nodes from being cut off in the horizontal and vertical scrollbars when calling the \"bring into view\" function, a padding value is added.\n var nodePadding = 20;\n if (!(view.containsRect(bounds))) {\n if (bounds.right > (-hoffset + this.viewPortWidth)) {\n x = bounds.right - this.viewPortWidth;\n x += nodePadding;\n }\n if (bounds.x < -hoffset) {\n x = bounds.x;\n }\n if (bounds.bottom > (-voffset + this.viewPortHeight)) {\n y = bounds.bottom - this.viewPortHeight;\n y += nodePadding;\n }\n if (bounds.y < -voffset) {\n y = bounds.y;\n }\n this.zoom(1, -this.horizontalOffset - x, -this.verticalOffset - y, null, undefined, isBringIntoView);\n }\n };\n /**\n * bringToCenter method \\\n *\n * @returns { void } bringToCenter method .\\\n * @param {Rect} bounds - provide the bounds value.\n *\n * @private\n */\n DiagramScroller.prototype.bringToCenter = function (bounds) {\n var scale = this.currentZoom;\n var actualbounds = new Rect(bounds.x * scale, bounds.y * scale, bounds.width * scale, bounds.height * scale);\n var hoffset = actualbounds.x + actualbounds.width / 2 - this.viewPortWidth / 2;\n var voffset = actualbounds.y + actualbounds.height / 2 - this.viewPortHeight / 2;\n /**\n * In applyScrollLimit method the sign of deltaX and deltaY\n * will be changed ,so here we change the sign.\n * similarly for bringIntoView.\n */\n hoffset *= -1;\n voffset *= -1;\n this.zoom(1, -this.horizontalOffset - hoffset, -this.verticalOffset - voffset, null);\n };\n DiagramScroller.prototype.applyScrollLimit = function (hOffset, vOffset, isInteractiveZoomPan, isBringIntoView, isTrackpadScroll) {\n /**\n * EJ2-60980- ScrollOffset is not updated properly in runtime.\n * EJ2-62524 - panning is not working properly in diagram.\n * isInteractiveZoomPan is undefined while setting scrollOffset at runtime.\n */\n if (this.diagram.scrollSettings.scrollLimit === 'Infinity') {\n if (isInteractiveZoomPan === undefined && !isBringIntoView) {\n hOffset = -hOffset;\n vOffset = -vOffset;\n }\n }\n if (this.diagram.scrollSettings.scrollLimit !== 'Infinity') {\n var bounds = void 0;\n if (this.diagram.scrollSettings.scrollLimit === 'Limited') {\n var scrollableBounds = this.diagram.scrollSettings.scrollableArea;\n bounds = new Rect(scrollableBounds.x, scrollableBounds.y, scrollableBounds.width, scrollableBounds.height);\n }\n // Bug 829925: Scroll bar flickers on scrolling the diagram using touchpad.\n // Added below code to get the page bounds based on the scroll.\n bounds = bounds || (isTrackpadScroll ? this.getPageBounds() : this.getPageBounds(true));\n bounds.x *= this.currentZoom;\n bounds.y *= this.currentZoom;\n bounds.width *= this.currentZoom;\n bounds.height *= this.currentZoom;\n if (isInteractiveZoomPan !== undefined) {\n hOffset *= -1;\n vOffset *= -1;\n }\n // EJ2-69238 - Added below code to multiple the horizontal and vertical offset to bring the node in viewport\n if (isBringIntoView) {\n hOffset *= -1;\n vOffset *= -1;\n }\n var allowedRight = Math.max(bounds.right, this.viewPortWidth);\n if (!isBringIntoView && !(hOffset <= bounds.x && (hOffset + this.viewPortWidth >= bounds.right ||\n hOffset >= bounds.right - this.viewPortWidth)\n || hOffset >= bounds.x && (hOffset + this.viewPortWidth <= allowedRight))) {\n //not allowed case\n if (hOffset >= bounds.x) {\n hOffset = Math.max(bounds.x, Math.min(hOffset, hOffset - (hOffset + this.viewPortWidth - this.vScrollSize - allowedRight)));\n }\n else {\n var allowed = bounds.right - this.viewPortWidth;\n hOffset = Math.min(allowed, bounds.x);\n }\n }\n var allowedBottom = Math.max(bounds.bottom, this.viewPortHeight);\n // EJ2-69238 - Added below code to restrict the min value calculation for vertical offset in bringIntoview scenarion.\n if (!isBringIntoView && !(vOffset <= bounds.y && vOffset + this.viewPortHeight >= bounds.bottom\n || vOffset >= bounds.y && vOffset + this.viewPortHeight <= allowedBottom)) {\n //not allowed case\n if (vOffset >= bounds.y) {\n vOffset = Math.max(bounds.y, Math.min(vOffset, vOffset - (vOffset + this.viewPortHeight - this.hScrollSize - allowedBottom)));\n }\n else {\n var allowed = bounds.bottom - this.viewPortHeight;\n vOffset = Math.min(bounds.y, allowed);\n }\n }\n hOffset *= -1;\n vOffset *= -1;\n }\n return { x: hOffset, y: vOffset };\n };\n return DiagramScroller;\n}());\n\n/**\n * Quad helps to maintain a set of objects that are contained within the particular region\n */\n/** @private */\nvar Quad = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for creating the Quad class\n *\n * @param {number} left The symbol palette model.\n * @param {number} top The symbol palette element.\n * @param {number} width The symbol palette element.\n * @param {number} height The symbol palette element.\n * @param {SpatialSearch} spatialSearching The symbol palette element.\n * @private\n */\n function Quad(left, top, width, height, spatialSearching) {\n this.objects = [];\n this.left = left;\n this.top = top;\n this.width = width;\n this.height = height;\n this.spatialSearch = spatialSearching;\n }\n /**\n * findQuads method\\\n *\n * @returns { void} findQuads method .\\\n * @param {Rect} currentViewPort - provide the options value.\n * @param {Quad[]} quads - provide the options value.\n * @private\n */\n Quad.prototype.findQuads = function (currentViewPort, quads) {\n if (this.first != null && this.first.isIntersect(currentViewPort)) {\n this.first.findQuads(currentViewPort, quads);\n }\n if (this.second != null && this.second.isIntersect(currentViewPort)) {\n this.second.findQuads(currentViewPort, quads);\n }\n if (this.third != null && this.third.isIntersect(currentViewPort)) {\n this.third.findQuads(currentViewPort, quads);\n }\n if (this.fourth != null && this.fourth.isIntersect(currentViewPort)) {\n this.fourth.findQuads(currentViewPort, quads);\n }\n if (this.objects.length > 0) {\n quads.push(this);\n }\n };\n Quad.prototype.isIntersect = function (t) {\n if (this.left + this.width < t.left || this.top + this.height < t.top || this.left > t.right || this.top > t.bottom) {\n return false;\n }\n return true;\n };\n /**\n * selectQuad method\\\n *\n * @returns { Quad } selectQuad method .\\\n * @private\n */\n Quad.prototype.selectQuad = function () {\n var target = null;\n // eslint-disable-next-line\n var current = this;\n var quadSet;\n while (current != null) {\n quadSet = current.getQuad(target);\n current = quadSet.source;\n target = quadSet.target || target;\n }\n return target;\n };\n Quad.prototype.getQuad = function (target) {\n var halfWidth = this.width / 2;\n var halfHeight = this.height / 2;\n if (halfWidth >= 1000 && halfHeight >= 1000) {\n var xCenter = this.left + halfWidth;\n var yCenter = this.top + halfHeight;\n if (this.spatialSearch.childRight <= xCenter) {\n if (this.spatialSearch.childBottom <= yCenter) {\n if (!this.first) {\n var newQuad = new Quad(this.left, this.top, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.first = newQuad;\n }\n return { source: this.first };\n }\n if (this.spatialSearch.childTop >= yCenter) {\n if (!this.third) {\n var newQuad = new Quad(this.left, yCenter, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.third = newQuad;\n }\n return { source: this.third };\n }\n }\n else if (this.spatialSearch.childLeft >= xCenter) {\n if (this.spatialSearch.childBottom <= yCenter) {\n if (!this.second) {\n var newQuad = new Quad(xCenter, this.top, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.second = newQuad;\n }\n return { source: this.second };\n }\n if (this.spatialSearch.childTop >= yCenter) {\n if (!this.fourth) {\n var newQuad = new Quad(xCenter, yCenter, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.fourth = newQuad;\n }\n return { source: this.fourth };\n }\n }\n }\n this.objects.push(this.spatialSearch.childNode);\n return { target: this };\n };\n /**\n * isContained method\\\n *\n * @returns { boolean } isContained method .\\\n * @private\n */\n Quad.prototype.isContained = function () {\n if (this.spatialSearch.childLeft >= this.left && this.spatialSearch.childRight <= this.left + this.width &&\n this.spatialSearch.childTop >= this.top && this.spatialSearch.childBottom <= this.top + this.height) {\n return true;\n }\n return false;\n };\n /**\n * addIntoAQuad method\\\n *\n * @returns { Quad } addIntoAQuad method .\\\n * @param {IGroupable} node - provide the options value.\n * @private\n */\n Quad.prototype.addIntoAQuad = function (node) {\n var quadAddition = {};\n this.spatialSearch.setCurrentNode(node);\n var quad = null;\n while (!quadAddition.isAdded) {\n quadAddition = this.spatialSearch.parentQuad.add(quad);\n quad = quadAddition.quad;\n }\n return quad;\n };\n Quad.prototype.add = function (quad) {\n quad = null;\n if (this.isContained()) {\n quad = this.selectQuad();\n return { isAdded: true, quad: quad };\n }\n else {\n var newParent = void 0;\n var isempty = this.objects.length === 0 && !this.first && !this.second && !this.third &&\n !this.fourth;\n var newWidth = this.width * 2;\n var newHeight = this.height * 2;\n if (this.spatialSearch.childLeft < this.left) {\n if (this.spatialSearch.childTop < this.top) {\n newParent = new Quad(this.left - this.width, this.top - this.height, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.fourth = this;\n }\n }\n else {\n newParent = new Quad(this.left - this.width, this.top, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.second = this;\n }\n }\n }\n else if (this.spatialSearch.childTop < this.top) {\n newParent = new Quad(this.left, this.top - this.height, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.third = this;\n }\n }\n else {\n newParent = new Quad(this.left, this.top, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.first = this;\n }\n }\n this.parent = newParent;\n this.spatialSearch.parentQuad = newParent;\n return { isAdded: false, quad: quad };\n //newParent.AddIntoaQuad(node);\n }\n };\n return Quad;\n}());\n\n/**\n * Spatial search module helps to effectively find the objects over diagram\n */\nvar SpatialSearch = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for creating the spatial search\n *\n * @param {number} objectTable The objectTable.\n * @private\n */\n function SpatialSearch(objectTable) {\n this.quadSize = 500;\n this.objectTable = objectTable;\n this.parentQuad = new Quad(0, 0, this.quadSize * 2, this.quadSize * 2, this);\n this.pageLeft = Number.MAX_VALUE;\n this.pageRight = -Number.MAX_VALUE;\n this.pageTop = Number.MAX_VALUE;\n this.pageBottom = -Number.MAX_VALUE;\n this.quadTable = {};\n }\n /**\n * removeFromAQuad method\\\n *\n * @returns {void} removeFromAQuad method .\\\n * @param {IGroupable} node - provide the options value.\n * @private\n */\n SpatialSearch.prototype.removeFromAQuad = function (node) {\n if (this.quadTable[node.id]) {\n var quad = this.quadTable[node.id];\n var index = this.objectIndex(quad.objects, node);\n if (index !== -1) {\n quad.objects.splice(index, 1);\n this.update(quad);\n delete this.quadTable[node.id];\n }\n }\n };\n SpatialSearch.prototype.update = function (quad) {\n //EJ2-841966-Nodes disappears while enabling virtualization constrai\n if (quad.parent && quad.objects.length === 0 && quad.first == null && quad.second == null\n && quad.third == null && quad.fourth == null) {\n var parent_1 = quad.parent;\n if (parent_1.first === quad) {\n parent_1.first = null;\n }\n else if (parent_1.second === quad) {\n parent_1.second = null;\n }\n else if (parent_1.third === quad) {\n parent_1.third = null;\n }\n else if (parent_1.fourth === quad) {\n parent_1.fourth = null;\n }\n this.update(quad.parent);\n }\n else {\n if (quad === this.parentQuad && !quad.first && !quad.second && !quad.third && !quad.fourth) {\n quad.left = 0;\n quad.width = 1000;\n quad.top = 0;\n quad.height = 1000;\n }\n return;\n }\n };\n SpatialSearch.prototype.addIntoAQuad = function (node) {\n var quad = this.parentQuad.addIntoAQuad(node);\n this.quadTable[node.id] = quad;\n };\n SpatialSearch.prototype.objectIndex = function (objects, node) {\n for (var i = 0; i < objects.length; i++) {\n if ((objects[parseInt(i.toString(), 10)]).id === node.id) {\n return i;\n }\n }\n return -1;\n };\n SpatialSearch.prototype.updateQuad = function (node) {\n this.setCurrentNode(node);\n var nodBounds = node.outerBounds;\n if (!(!isNaN(nodBounds.x) && !isNaN(nodBounds.y) &&\n !isNaN(nodBounds.width) && !isNaN(nodBounds.height))) {\n return false;\n }\n //nodBounds = new Rect(nodBounds.X.Valid(), nodBounds.Y.Valid(), nodBounds.Width.Valid(), nodBounds.Height.Valid());\n if (this.quadTable[node.id]) {\n var quad = this.quadTable[node.id];\n if (!quad.isContained()) {\n this.removeFromAQuad(node);\n this.addIntoAQuad(node);\n }\n }\n else {\n this.addIntoAQuad(node);\n }\n if (this.isWithinPageBounds(nodBounds) &&\n this.leftElement !== node &&\n this.topElement !== node &&\n this.rightElement !== node &&\n this.bottomElement !== node) ;\n else {\n var modified = false;\n if (this.pageLeft !== this.childLeft || node !== this.leftElement) {\n if (this.pageLeft >= this.childLeft) {\n this.pageLeft = this.childLeft;\n this.leftElement = node;\n modified = true;\n }\n else if (node === this.leftElement) {\n this.pageLeft = Number.MAX_VALUE;\n this.findLeft(this.parentQuad);\n modified = true;\n }\n }\n if (this.pageTop !== this.childTop || node !== this.topElement) {\n if (this.pageTop >= this.childTop) {\n this.pageTop = this.childTop;\n this.topElement = node;\n modified = true;\n }\n else if (node === this.topElement) {\n this.pageTop = Number.MAX_VALUE;\n this.findTop(this.parentQuad);\n modified = true;\n }\n }\n if (this.pageBottom !== this.childBottom || node !== this.bottomElement) {\n if (this.pageBottom <= this.childBottom) {\n modified = true;\n this.pageBottom = this.childBottom;\n this.bottomElement = node;\n }\n else if (node === this.bottomElement) {\n this.pageBottom = -Number.MAX_VALUE;\n this.findBottom(this.parentQuad);\n modified = true;\n }\n }\n if (this.pageRight !== this.childRight || node !== this.rightElement) {\n if (this.pageRight <= this.childRight) {\n this.pageRight = this.childRight;\n this.rightElement = node;\n modified = true;\n }\n else if (node === this.rightElement) {\n this.pageRight = -Number.MAX_VALUE;\n this.findRight(this.parentQuad);\n modified = true;\n }\n }\n return modified;\n }\n this.setCurrentNode(null);\n return false;\n };\n SpatialSearch.prototype.isWithinPageBounds = function (node) {\n if (node.left >= this.pageLeft && node.right <= this.pageRight && node.top >= this.pageTop\n && node.bottom <= this.pageBottom) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * findQuads method\\\n *\n * @returns { Quad[] } findQuads method .\\\n * @param {Rect} region - provide the options value.\n * @private\n */\n SpatialSearch.prototype.findQuads = function (region) {\n var quads = [];\n this.parentQuad.findQuads(region, quads);\n return quads;\n };\n /**\n * findObjects method\\\n *\n * @returns { IGroupable[] } findObjects method .\\\n * @param {Rect} region - provide the options value.\n * @private\n */\n SpatialSearch.prototype.findObjects = function (region) {\n var quads = this.findQuads(region);\n var objects = [];\n for (var _i = 0, quads_1 = quads; _i < quads_1.length; _i++) {\n var quad = quads_1[_i];\n for (var _a = 0, _b = quad.objects; _a < _b.length; _a++) {\n var obj = _b[_a];\n if (obj.outerBounds.intersects(region)) {\n objects.push(this.objectTable[obj.id]);\n }\n }\n }\n return objects;\n };\n /**\n * updateBounds method\\\n *\n * @returns { boolean } updateBounds method .\\\n * @param {IGroupable} node - provide the options value.\n * @param {boolean} isSwimLane - provide boolean if its swimlane container\n * @private\n */\n SpatialSearch.prototype.updateBounds = function (node, isSwimLane) {\n var modified = false;\n //879088: Swimalane exception when drag and dropped from palette\n if (isSwimLane) {\n if (this.topElement && node.id === this.topElement.id) {\n modified = this.updateTop();\n }\n if (this.leftElement && node.id === this.leftElement.id) {\n modified = this.updateLeft();\n }\n if (this.rightElement && node.id === this.rightElement.id) {\n modified = this.updateRight();\n }\n if (this.bottomElement && node.id === this.bottomElement.id) {\n modified = this.updateBottom();\n }\n }\n else {\n if (node === this.topElement) {\n modified = this.updateTop();\n }\n if (node === this.leftElement) {\n modified = this.updateLeft();\n }\n if (node === this.rightElement) {\n modified = this.updateRight();\n }\n if (node === this.bottomElement) {\n modified = this.updateBottom();\n }\n }\n return modified;\n };\n SpatialSearch.prototype.updateTop = function () {\n this.pageTop = Number.MAX_VALUE;\n this.topElement = null;\n this.findTop(this.parentQuad);\n return true;\n };\n SpatialSearch.prototype.updateBottom = function () {\n this.pageBottom = -Number.MAX_VALUE;\n this.bottomElement = null;\n this.findBottom(this.parentQuad);\n return true;\n };\n SpatialSearch.prototype.updateLeft = function () {\n this.pageLeft = Number.MAX_VALUE;\n this.leftElement = null;\n this.findLeft(this.parentQuad);\n return true;\n };\n SpatialSearch.prototype.updateRight = function () {\n this.pageRight = -Number.MAX_VALUE;\n this.rightElement = null;\n this.findRight(this.parentQuad);\n return true;\n };\n SpatialSearch.prototype.findBottom = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.third || quad.fourth) {\n if (quad.third) {\n this.findBottom(quad.third);\n }\n if (quad.fourth) {\n this.findBottom(quad.fourth);\n }\n }\n else {\n if (quad.second) {\n this.findBottom(quad.second);\n }\n if (quad.first) {\n this.findBottom(quad.first);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageBottom <= node.outerBounds.bottom) {\n this.pageBottom = node.outerBounds.bottom;\n this.bottomElement = node;\n }\n }\n };\n SpatialSearch.prototype.findRight = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.second || quad.fourth) {\n if (quad.second) {\n this.findRight(quad.second);\n }\n if (quad.fourth) {\n this.findRight(quad.fourth);\n }\n }\n // EJ2-65880 - Exception occurs on dragging outside the canvas\n {\n if (quad.first) {\n this.findRight(quad.first);\n }\n if (quad.third) {\n this.findRight(quad.third);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageRight <= node.outerBounds.right) {\n this.pageRight = node.outerBounds.right;\n this.rightElement = node;\n }\n }\n };\n SpatialSearch.prototype.findLeft = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.first || quad.third) {\n if (quad.first) {\n this.findLeft(quad.first);\n }\n if (quad.third) {\n this.findLeft(quad.third);\n }\n }\n else {\n if (quad.second) {\n this.findLeft(quad.second);\n }\n if (quad.fourth) {\n this.findLeft(quad.fourth);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageLeft >= node.outerBounds.left) {\n this.pageLeft = node.outerBounds.left;\n this.leftElement = node;\n }\n }\n };\n SpatialSearch.prototype.findTop = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.first || quad.second) {\n if (quad.first) {\n this.findTop(quad.first);\n }\n if (quad.second) {\n this.findTop(quad.second);\n }\n }\n else {\n if (quad.third) {\n this.findTop(quad.third);\n }\n if (quad.fourth) {\n this.findTop(quad.fourth);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageTop >= node.outerBounds.top) {\n this.pageTop = node.outerBounds.top;\n this.topElement = node;\n }\n }\n };\n /**\n * setCurrentNode method\\\n *\n * @returns { void } setCurrentNode method .\\\n * @param {IGroupable} node - provide the options value.\n * @private\n */\n SpatialSearch.prototype.setCurrentNode = function (node) {\n this.childNode = node;\n if (node) {\n var r = node.outerBounds;\n this.childLeft = Number(r.left);\n this.childTop = Number(r.top);\n this.childRight = Number(r.right);\n this.childBottom = Number(r.bottom);\n }\n else {\n this.childLeft = Number.MAX_VALUE;\n this.childTop = Number.MAX_VALUE;\n this.childRight = -Number.MAX_VALUE;\n this.childBottom = -Number.MAX_VALUE;\n }\n };\n /**\n * getPageBounds method\\\n *\n * @returns { Rect } getPageBounds method .\\\n * @param {number} originX - provide the options value.\n * @param {number} originY - provide the options value.\n * @private\n */\n SpatialSearch.prototype.getPageBounds = function (originX, originY) {\n if (this.pageLeft === Number.MAX_VALUE) {\n return new Rect(0, 0, 0, 0);\n }\n var left = originX !== undefined ? Math.min(this.pageLeft, 0) : this.pageLeft;\n var top = originY !== undefined ? Math.min(this.pageTop, 0) : this.pageTop;\n return new Rect(Math.round(left), Math.round(top), Math.round(this.pageRight - left), Math.round(this.pageBottom - top));\n };\n /**\n * getQuad method\\\n *\n * @returns { Quad } getQuad method .\\\n * @param {IGroupable} node - provide the options value.\n * @private\n */\n SpatialSearch.prototype.getQuad = function (node) {\n return this.quadTable[node.id];\n };\n return SpatialSearch;\n}());\n\nvar __extends$y = (undefined && undefined.__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$n = (undefined && undefined.__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/**\n * Defines the serialization settings of diagram\n * ```html\n * \n * ```\n * ```typescript\n * let diagram: Diagram = new Diagram({\n * ...\n * serializationSettings: { preventDefaults: true },\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n *\n * @default {}\n */\nvar SerializationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$y(SerializationSettings, _super);\n function SerializationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$n([\n Property(false)\n ], SerializationSettings.prototype, \"preventDefaults\", void 0);\n return SerializationSettings;\n}(ChildProperty));\n\nvar __extends$z = (undefined && undefined.__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$o = (undefined && undefined.__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/**\n * A collection of JSON objects where each object represents a layer.\n * Layer is a named category of diagram shapes.\n */\nvar CustomCursorAction = /** @__PURE__ @class */ (function (_super) {\n __extends$z(CustomCursorAction, _super);\n function CustomCursorAction() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$o([\n Property('')\n ], CustomCursorAction.prototype, \"action\", void 0);\n __decorate$o([\n Property('')\n ], CustomCursorAction.prototype, \"cursor\", void 0);\n return CustomCursorAction;\n}(ChildProperty));\n\n/**\n * Line Routing\n */\nvar LineRouting = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the line routing module\n *\n * @private\n */\n function LineRouting() {\n this.size = 20;\n this.intermediatePoints = [];\n this.gridCollection = [];\n this.startArray = [];\n this.targetGridCollection = [];\n this.sourceGridCollection = [];\n this.considerWalkable = [];\n //constructs the line routing module\n }\n /**\n * lineRouting method \\\n *\n * @returns { void } lineRouting method .\\\n * @param {Diagram} diagram - provide the source value.\n *\n * @private\n */\n LineRouting.prototype.lineRouting = function (diagram) {\n var length = diagram.connectors.length;\n this.renderVirtualRegion(diagram);\n if (length > 0) {\n for (var k = 0; k < length; k++) {\n var connector = diagram.connectors[parseInt(k.toString(), 10)];\n if (connector.type === 'Orthogonal' && connector.visible) {\n this.refreshConnectorSegments(diagram, connector, true);\n }\n }\n }\n };\n /** @private */\n /**\n * renderVirtualRegion method \\\n *\n * @returns { void } renderVirtualRegion method .\\\n * @param {Diagram} diagram - provide the source value.\n * @param {boolean} isUpdate - provide the target value.\n *\n * @private\n */\n LineRouting.prototype.renderVirtualRegion = function (diagram, isUpdate) {\n /* tslint:disable */\n var extraBounds = this.size;\n if (diagram.spatialSearch['pageTop'] < 0 || diagram.spatialSearch['pageLeft'] < 0) {\n extraBounds = this.size + (this.size / 2);\n }\n var right = diagram.spatialSearch['pageRight'] + extraBounds;\n var bottom = diagram.spatialSearch['pageBottom'] + extraBounds;\n var left = diagram.spatialSearch['pageLeft'] - extraBounds;\n var top = diagram.spatialSearch['pageTop'] - extraBounds;\n left = left < 0 ? left - 20 : 0;\n top = top < 0 ? top - 20 : 0;\n /* tslint:enable */\n if ((isUpdate && (this.width !== (right - left) || this.height !== (bottom - top) ||\n this.diagramStartX !== left || this.diagramStartY !== top)) || isUpdate === undefined) {\n this.width = right - left;\n this.height = bottom - top;\n this.diagramStartX = left;\n this.diagramStartY = top;\n this.gridCollection = [];\n this.noOfRows = this.width / this.size;\n this.noOfCols = this.height / this.size;\n var size = this.size;\n var x = this.diagramStartX < 0 ? this.diagramStartX : 0;\n var y = this.diagramStartY < 0 ? this.diagramStartY : 0;\n for (var i = 0; i < this.noOfCols; i++) {\n for (var j = 0; j < this.noOfRows; j++) {\n if (i === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.gridCollection.push([0]);\n }\n var grid = {\n x: x, y: y, width: size, height: size, gridX: j,\n gridY: i, walkable: true, tested: undefined, nodeId: []\n };\n this.gridCollection[parseInt(j.toString(), 10)][parseInt(i.toString(), 10)] = grid;\n x += size;\n }\n x = this.diagramStartX < 0 ? this.diagramStartX : 0;\n y += size;\n }\n }\n var nodes = this.findNodes(diagram.nodes);\n this.updateNodesInVirtualRegion(nodes);\n };\n LineRouting.prototype.findNodes = function (nodes) {\n var objects = [];\n var node;\n for (var i = 0; i < nodes.length; i++) {\n node = nodes[parseInt(i.toString(), 10)];\n if (node.shape.type !== 'SwimLane' && !node.isLane && !node.isPhase && !node.isHeader && node.visible) {\n objects.push(node);\n }\n }\n return objects;\n };\n LineRouting.prototype.updateNodesInVirtualRegion = function (diagramNodes) {\n var size = this.size;\n var x = this.diagramStartX < 0 ? this.diagramStartX : 0;\n var y = this.diagramStartY < 0 ? this.diagramStartY : 0;\n for (var i = 0; i < this.noOfCols; i++) {\n for (var j = 0; j < this.noOfRows; j++) {\n var grid = this.gridCollection[parseInt(j.toString(), 10)][parseInt(i.toString(), 10)];\n var rectangle = new Rect(x, y, this.size, this.size);\n var isContains = void 0;\n var k = void 0;\n grid.walkable = true;\n grid.tested = undefined;\n grid.nodeId = [];\n for (k = 0; k < diagramNodes.length; k++) {\n if (diagramNodes[parseInt(k.toString(), 10)].wrapper.bounds) {\n isContains = this.intersectRect(rectangle, diagramNodes[parseInt(k.toString(), 10)].wrapper.bounds);\n }\n if (isContains) {\n grid.nodeId.push(diagramNodes[parseInt(k.toString(), 10)].id);\n grid.walkable = false;\n if (diagramNodes[parseInt(k.toString(), 10)].parentId !== '') {\n grid.parentNodeId = diagramNodes[parseInt(k.toString(), 10)].parentId;\n }\n }\n }\n x += size;\n }\n x = this.diagramStartX < 0 ? this.diagramStartX : 0;\n y += size;\n }\n };\n LineRouting.prototype.intersectRect = function (r1, r2) {\n return !(r2.left >= r1.right || r2.right <= r1.left ||\n r2.top >= r1.bottom || r2.bottom <= r1.top);\n };\n LineRouting.prototype.findEndPoint = function (connector, isSource, isPortBounds) {\n var endPoint;\n var portDirection;\n // EJ2-65876 - Exception occurs on line routing injection module\n if ((isSource && connector.sourcePortID !== '' && connector.sourcePortWrapper) || (!isSource && connector.targetPortID !== '' && connector.targetPortWrapper)) {\n endPoint = (isSource) ? { x: connector.sourcePortWrapper.offsetX, y: connector.sourcePortWrapper.offsetY } :\n { x: connector.targetPortWrapper.offsetX, y: connector.targetPortWrapper.offsetY };\n portDirection = getPortDirection(endPoint, undefined, (isSource) ? connector.sourceWrapper.bounds : connector.targetWrapper.bounds);\n var bounds = (isSource) ? connector.sourcePortWrapper.bounds : connector.targetPortWrapper.bounds;\n if (isPortBounds) {\n if (portDirection === 'Top') {\n endPoint = { x: bounds.topCenter.x, y: bounds.topCenter.y };\n }\n else if (portDirection === 'Left') {\n endPoint = { x: bounds.middleLeft.x, y: bounds.middleLeft.y };\n }\n else if (portDirection === 'Right') {\n endPoint = { x: bounds.middleRight.x, y: bounds.middleRight.y };\n }\n else {\n endPoint = { x: bounds.bottomCenter.x, y: bounds.bottomCenter.y };\n }\n }\n else {\n endPoint = { x: bounds.center.x, y: bounds.center.y };\n }\n }\n else {\n if ((isSource && this.startNode) || (!isSource && this.targetNode)) {\n endPoint = (isSource) ? { x: this.startNode.wrapper.offsetX, y: this.startNode.wrapper.offsetY } :\n { x: this.targetNode.wrapper.offsetX, y: this.targetNode.wrapper.offsetY };\n }\n else {\n endPoint = (isSource) ? { x: connector.sourcePoint.x, y: connector.sourcePoint.y } :\n { x: connector.targetPoint.x, y: connector.targetPoint.y };\n }\n }\n return endPoint;\n };\n /**\n * refreshConnectorSegments method \\\n *\n * @returns { void } refreshConnectorSegments method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {Connector} connector - provide the connector value.\n * @param {boolean} isUpdate - provide the diagram value.\n * @param {boolean} isEnableRouting - provide enableRouting value.\n *\n * @private\n */\n LineRouting.prototype.refreshConnectorSegments = function (diagram, connector, isUpdate, isEnableRouting) {\n var sourceId = connector.sourceID;\n var targetId = connector.targetID;\n var sourcePortID = connector.sourcePortID;\n var targetPortID = connector.targetPortID;\n var startPoint;\n var targetPoint;\n var sourcePortDirection;\n var targetPortDirection;\n var grid;\n var sourceTop;\n var sourceBottom;\n var isBreak;\n var sourceLeft;\n var sourceRight;\n var targetRight;\n var targetTop;\n var targetBottom;\n var targetLeft;\n if (canEnableRouting(connector, diagram) || isEnableRouting) {\n this.startNode = diagram.nameTable[\"\" + sourceId];\n this.targetNode = diagram.nameTable[\"\" + targetId];\n this.intermediatePoints = [];\n this.startArray = [];\n this.targetGridCollection = [];\n this.sourceGridCollection = [];\n this.startGrid = undefined;\n this.targetGrid = undefined;\n for (var i = 0; i < this.noOfCols; i++) {\n for (var j = 0; j < this.noOfRows; j++) {\n this.gridCollection[parseInt(j.toString(), 10)][parseInt(i.toString(), 10)].tested\n = this.gridCollection[parseInt(j.toString(), 10)][parseInt(i.toString(), 10)].parent = undefined;\n this.gridCollection[parseInt(j.toString(), 10)][parseInt(i.toString(), 10)].previousDistance\n = this.gridCollection[parseInt(j.toString(), 10)][parseInt(i.toString(), 10)].afterDistance = undefined;\n this.gridCollection[parseInt(j.toString(), 10)][parseInt(i.toString(), 10)].totalDistance = undefined;\n }\n }\n // Set the source point and target point\n startPoint = this.findEndPoint(connector, true);\n targetPoint = this.findEndPoint(connector, false);\n // Find the start grid and target grid\n for (var i = 0; i < this.noOfRows; i++) {\n for (var j = 0; j < this.noOfCols; j++) {\n grid = this.gridCollection[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)];\n var rectangle = new Rect(grid.x, grid.y, grid.width, grid.height);\n if (rectangle.containsPoint(startPoint) && !this.startGrid &&\n (grid.nodeId.indexOf(sourceId) !== -1 || sourceId === '')) {\n this.startGrid = (sourcePortID && this.startGrid &&\n ( sourcePortDirection === 'Top')) ? this.startGrid : grid;\n }\n if (rectangle.containsPoint(targetPoint) && !this.targetGrid &&\n (grid.nodeId.indexOf(targetId) !== -1 || targetId === '')) {\n this.targetGrid = (targetPortID && this.targetGrid &&\n ( targetPortDirection === 'Top')) ? this.targetGrid : grid;\n }\n if (!sourcePortID && this.startNode) {\n var bounds = this.startNode.wrapper.bounds;\n if (rectangle.containsPoint(bounds.topCenter) && !sourceTop) {\n sourceTop = grid;\n }\n if (rectangle.containsPoint(bounds.middleLeft) && !sourceLeft) {\n sourceLeft = grid;\n }\n if (rectangle.containsPoint(bounds.middleRight) && !sourceRight) {\n sourceRight = grid;\n }\n if (rectangle.containsPoint(bounds.bottomCenter) && !sourceBottom) {\n sourceBottom = grid;\n }\n }\n if (!targetPortID && this.targetNode) {\n var bounds = this.targetNode.wrapper.bounds;\n if (rectangle.containsPoint(bounds.topCenter) && !targetTop) {\n targetTop = grid;\n }\n if (rectangle.containsPoint(bounds.middleLeft) && !targetLeft) {\n targetLeft = grid;\n }\n if (rectangle.containsPoint(bounds.middleRight) && !targetRight) {\n targetRight = grid;\n }\n if (rectangle.containsPoint({ x: bounds.bottomCenter.x, y: bounds.bottomCenter.y }) && !targetBottom) {\n targetBottom = grid;\n }\n }\n }\n }\n this.findEdgeBoundary(sourcePortID, sourceLeft, sourceRight, sourceTop, sourceBottom, true);\n this.findEdgeBoundary(targetPortID, targetLeft, targetRight, targetTop, targetBottom, false);\n this.startGrid.totalDistance = 0;\n this.startGrid.previousDistance = 0;\n this.intermediatePoints.push({ x: this.startGrid.gridX, y: this.startGrid.gridY });\n this.startArray.push(this.startGrid);\n if (connector && targetLeft && targetRight && targetTop && targetBottom) {\n this.checkObstacles(connector, diagram, targetLeft, targetRight, targetTop, targetBottom);\n }\n // eslint-disable-next-line no-labels\n renderPathElement: while (this.startArray.length > 0) {\n var startGridNode = this.startArray.pop();\n //890444:Exception thrown while drag and drop shapes on top of each other repeatedly with Line Routing\n if (startGridNode) {\n for (var i = 0; i < this.targetGridCollection.length; i++) {\n var target = this.targetGridCollection[parseInt(i.toString(), 10)];\n if (startGridNode) {\n if (startGridNode.gridX === target.gridX && startGridNode.gridY === target.gridY) {\n this.getIntermediatePoints(startGridNode);\n this.optimizeIntermediatePoints();\n if (startGridNode.nodeId && startGridNode.nodeId.length > 1) {\n connector.segments = [];\n }\n isBreak = this.updateConnectorSegments(diagram, this.intermediatePoints, this.gridCollection, connector, isUpdate);\n if (!isBreak) {\n this.targetGridCollection.splice(this.targetGridCollection.indexOf(target), 1);\n startGridNode = this.startArray.pop();\n }\n else {\n this.considerWalkable = [];\n // eslint-disable-next-line no-labels\n break renderPathElement;\n }\n }\n }\n }\n if (startGridNode) {\n this.findPath(startGridNode);\n }\n }\n }\n }\n };\n LineRouting.prototype.checkChildNodes = function (grid, isSource) {\n var check = false;\n var reject = false;\n if (grid.nodeId.length >= 1 && !isSource) {\n for (var i = 0; i < grid.nodeId.length; i++) {\n var id = grid.nodeId[parseInt(i.toString(), 10)];\n for (var j = 0; j < grid.nodeId.length; j++) {\n if (this.targetNode.parentId === grid.nodeId[parseInt(j.toString(), 10)]) {\n reject = true;\n }\n }\n if (!reject && this.targetNode.id === id) {\n check = true;\n }\n else {\n check = false;\n }\n }\n }\n else {\n if (grid.nodeId.length === 1) {\n check = true;\n }\n }\n return check;\n };\n LineRouting.prototype.findEdgeBoundary = function (portID, left, right, top, bottom, isSource) {\n var grid;\n var collection = (isSource) ? this.sourceGridCollection : this.targetGridCollection;\n if (!portID && ((isSource) ? this.startNode : this.targetNode)) {\n for (var i = left.gridX; i <= right.gridX; i++) {\n grid = this.gridCollection[parseInt(i.toString(), 10)][left.gridY];\n if ((this.checkChildNodes(grid, isSource) && (i === left.gridX || i === right.gridX)) ||\n (i !== left.gridX && i !== right.gridX)) {\n collection.push(grid);\n }\n }\n for (var i = top.gridY; i <= bottom.gridY; i++) {\n grid = this.gridCollection[top.gridX][parseInt(i.toString(), 10)];\n if (((this.checkChildNodes(grid, isSource) && (i === top.gridY || i === bottom.gridY)) ||\n (i !== top.gridY && i !== bottom.gridY)) && collection.indexOf(grid) === -1) {\n collection.push(grid);\n }\n }\n }\n else {\n collection.push((isSource) ? this.startGrid : this.targetGrid);\n }\n };\n LineRouting.prototype.checkObstacles = function (connector, diagram, targetLeft, targetRight, targetTop, targetBottom) {\n var neigbours = this.findNearestNeigbours(this.startGrid, this.gridCollection, true);\n if (neigbours.length === 0) {\n if (connector.sourcePortID !== '') {\n var endPoint = { x: connector.sourcePortWrapper.offsetX, y: connector.sourcePortWrapper.offsetY };\n var portDirection = getPortDirection(endPoint, undefined, connector.sourceWrapper.bounds);\n if (portDirection === 'Top') {\n this.resetGridColl(this.startGrid, 'top', true);\n }\n else if (portDirection === 'Right') {\n this.resetGridColl(this.startGrid, 'right', true);\n }\n else if (portDirection === 'Bottom') {\n this.resetGridColl(this.startGrid, 'bottom', true);\n }\n else {\n this.resetGridColl(this.startGrid, 'left', true);\n }\n }\n else {\n this.resetGridColl(this.startGrid, 'top', true);\n this.resetGridColl(this.startGrid, 'right', true);\n this.resetGridColl(this.startGrid, 'bottom', true);\n this.resetGridColl(this.startGrid, 'left', true);\n }\n }\n neigbours = this.findNearestNeigbours(this.targetGrid, this.gridCollection, false);\n if (neigbours.length === 0) {\n if (connector.targetPortID !== '') {\n var endPoint = { x: connector.targetPortWrapper.offsetX, y: connector.targetPortWrapper.offsetY };\n var portDirection = getPortDirection(endPoint, undefined, connector.targetWrapper.bounds);\n if (portDirection === 'Top') {\n this.resetGridColl(this.targetGrid, 'top', true);\n }\n else if (portDirection === 'Right') {\n this.resetGridColl(this.targetGrid, 'right', true);\n }\n else if (portDirection === 'Bottom') {\n this.resetGridColl(this.targetGrid, 'bottom', true);\n }\n else {\n this.resetGridColl(this.targetGrid, 'left', true);\n }\n }\n else {\n this.resetGridColl(this.targetGrid, 'top', false);\n this.resetGridColl(this.targetGrid, 'right', false);\n this.resetGridColl(this.targetGrid, 'bottom', false);\n this.resetGridColl(this.targetGrid, 'left', false);\n }\n }\n if (this.targetGridCollection.length > 1 && this.targetGridCollection[0].nodeId.length > 1) {\n for (var i = 0; i <= 1; i++) {\n var gridX = this.targetGridCollection[parseInt(i.toString(), 10)].gridX;\n var gridY = this.targetGridCollection[parseInt(i.toString(), 10)].gridY;\n var gridNodes = this.targetGridCollection[parseInt(i.toString(), 10)].nodeId;\n var targetNode = void 0;\n for (var k = 0; k < gridNodes.length; k++) {\n if (this.targetNode.id !== gridNodes[parseInt(k.toString(), 10)]) {\n targetNode = gridNodes[parseInt(k.toString(), 10)];\n break;\n }\n }\n var targetNodewrapper = void 0;\n var overLapNode = void 0;\n var contains = void 0;\n if (diagram.nameTable[this.targetNode.id]) {\n targetNodewrapper = diagram.nameTable[this.targetNode.id].wrapper;\n }\n if (diagram.nameTable[\"\" + targetNode]) {\n overLapNode = diagram.nameTable[\"\" + targetNode].wrapper;\n }\n if (targetNodewrapper && overLapNode) {\n contains = this.contains(overLapNode.bounds, targetNodewrapper.bounds);\n }\n var reject = void 0;\n for (var j = 0; j < gridNodes.length; j++) {\n if (this.targetNode.parentId === gridNodes[parseInt(j.toString(), 10)]) {\n reject = true;\n }\n }\n if (!this.gridCollection[parseInt(gridX.toString(), 10)][parseInt(gridY.toString(), 10)].walkable && contains && !reject) {\n var grid = void 0;\n var diff = void 0;\n grid = this.getEndvalue(targetLeft, 'left');\n diff = targetLeft.gridX - grid.gridX;\n this.changeValue(targetLeft, diff, 'left');\n grid = this.getEndvalue(targetRight, 'right');\n diff = grid.gridX - targetRight.gridX;\n this.changeValue(targetRight, diff, 'right');\n grid = this.getEndvalue(targetTop, 'top');\n diff = targetTop.gridY - grid.gridY;\n this.changeValue(targetTop, diff, 'top');\n grid = this.getEndvalue(targetBottom, 'bottom');\n diff = targetBottom.gridY - grid.gridY;\n this.changeValue(targetBottom, diff, 'top');\n }\n }\n }\n };\n LineRouting.prototype.contains = function (rect1, rect2) {\n return rect1.left <= rect2.left && rect1.right >= rect2.right && rect1.top <= rect2.top && rect1.bottom >= rect2.bottom;\n };\n LineRouting.prototype.getEndvalue = function (target, direction) {\n if (!this.gridCollection[target.gridX][target.gridY].walkable) {\n if (direction === 'left') {\n return this.getEndvalue(this.gridCollection[target.gridX - 1][target.gridY], direction);\n }\n if (direction === 'right') {\n return this.getEndvalue(this.gridCollection[target.gridX + 1][target.gridY], direction);\n }\n if (direction === 'top') {\n return this.getEndvalue(this.gridCollection[target.gridX][target.gridY - 1], direction);\n }\n if (direction === 'bottom') {\n return this.getEndvalue(this.gridCollection[target.gridX][target.gridY + 1], direction);\n }\n }\n else {\n return target;\n }\n return target;\n };\n LineRouting.prototype.changeValue = function (targetLeft, diff, direction) {\n if (!targetLeft.walkable) {\n this.considerWalkable.push(targetLeft);\n }\n var grid;\n for (var i = 0; i <= diff; i++) {\n if (direction === 'left') {\n grid = this.gridCollection[targetLeft.gridX - i][targetLeft.gridY];\n }\n else if (direction === 'right') {\n grid = this.gridCollection[targetLeft.gridX + i][targetLeft.gridY];\n }\n else if (direction === 'top') {\n grid = this.gridCollection[targetLeft.gridX][targetLeft.gridY - i];\n }\n else if (direction === 'bottom') {\n grid = this.gridCollection[targetLeft.gridX][targetLeft.gridY + i];\n }\n if (!grid.walkable) {\n this.considerWalkable.push(grid);\n }\n }\n };\n // Get all the intermediated points from target grid\n LineRouting.prototype.getIntermediatePoints = function (target) {\n var distance;\n this.intermediatePoints = [];\n while (target) {\n this.intermediatePoints.push({ x: target.gridX, y: target.gridY });\n target = target.parent;\n }\n this.intermediatePoints.reverse();\n //890444: Exception thrown while drag and drop shapes on top of each other repeatedly with Line Routing\n if (this.intermediatePoints.length >= 1 && this.intermediatePoints[0] !== undefined\n && this.intermediatePoints[1] !== undefined) {\n if (this.intermediatePoints[0].x === this.intermediatePoints[1].x) {\n if (this.intermediatePoints[0].y < this.intermediatePoints[1].y) {\n distance = this.neigbour(this.startGrid, 'bottom', undefined, true);\n this.intermediatePoints[0].y += distance - 1;\n }\n else {\n distance = this.neigbour(this.startGrid, 'top', undefined, true);\n this.intermediatePoints[0].y -= distance - 1;\n }\n }\n else {\n if (this.intermediatePoints[0].x < this.intermediatePoints[1].x) {\n distance = this.neigbour(this.startGrid, 'right', undefined, true);\n this.intermediatePoints[0].x += distance - 1;\n }\n else {\n distance = this.neigbour(this.startGrid, 'left', undefined, true);\n this.intermediatePoints[0].x -= distance - 1;\n }\n }\n }\n };\n LineRouting.prototype.optimizeIntermediatePoints = function () {\n this.intermediatePoints = this.removePointsInSameLine(this.intermediatePoints);\n this.intermediatePoints = this.getValidPoints(this.intermediatePoints);\n };\n LineRouting.prototype.removePointsInSameLine = function (points) {\n if (points.length < 3) {\n return points;\n }\n var result = [points[0]];\n for (var i = 1; i < points.length - 1; i++) {\n var prevPoint = result[result.length - 1];\n var currentPoint = points[parseInt(i.toString(), 10)];\n var nextPoint = points[i + 1];\n if (!this.arePointsInSameLine(prevPoint, currentPoint, nextPoint)) {\n result.push(currentPoint);\n }\n }\n result.push(points[points.length - 1]);\n return result;\n };\n LineRouting.prototype.arePointsInSameLine = function (point1, point2, point3) {\n return (point2.x - point1.x) * (point3.y - point1.y) === (point3.x - point1.x) * (point2.y - point1.y);\n };\n LineRouting.prototype.getValidPoints = function (points) {\n if (points.length < 4) {\n return points;\n }\n var i = 1;\n while (i < points.length - 3) {\n var lineStart1 = points[parseInt(i.toString(), 10)];\n var lineEnd1 = points[i + 1];\n var lineStart2 = points[i + 2];\n var lineEnd2 = points[i + 3];\n if (lineStart1.x === lineEnd1.x) {\n if ((lineEnd1.y < lineStart1.y && lineEnd2.y < lineStart2.y)\n || (lineEnd1.y > lineStart1.y && lineEnd2.y > lineStart2.y)) {\n var dx = lineStart1.x < lineStart2.x ? 1 : -1;\n var dy = lineEnd1.y < lineStart1.y ? -1 : 1;\n var neigbourGridX = lineStart1.x + dx;\n var neigbourGridY = lineStart1.y;\n var isValid = false;\n while (neigbourGridX !== lineEnd2.x || neigbourGridY !== lineEnd2.y) {\n if (!this.isWalkable(neigbourGridX, neigbourGridY)) {\n isValid = false;\n break;\n }\n else {\n isValid = true;\n }\n if (neigbourGridX !== lineStart2.x) {\n neigbourGridX += dx;\n }\n else {\n neigbourGridY += dy;\n }\n }\n if (isValid) {\n lineStart1.x = lineStart2.x;\n points.splice(i + 1, 2);\n continue;\n }\n }\n }\n else if (lineStart1.y === lineEnd1.y) {\n if ((lineEnd1.x < lineStart1.x && lineEnd2.x < lineStart2.x)\n || (lineEnd1.x > lineStart1.x && lineEnd2.x > lineStart2.x)) {\n var dy1 = lineStart1.y < lineStart2.y ? 1 : -1;\n var dx1 = lineEnd1.x < lineStart1.x ? -1 : 1;\n var neigbourGridY1 = lineStart1.y + dy1;\n var neigbourGridX1 = lineStart1.x;\n var isValid1 = false;\n while (neigbourGridX1 !== lineEnd2.x || neigbourGridY1 !== lineEnd2.y) {\n if (!this.isWalkable(neigbourGridX1, neigbourGridY1)) {\n isValid1 = false;\n break;\n }\n else {\n isValid1 = true;\n }\n if (neigbourGridY1 !== lineStart2.y) {\n neigbourGridY1 += dy1;\n }\n else {\n neigbourGridX1 += dx1;\n }\n }\n if (isValid1) {\n lineStart1.y = lineStart2.y;\n points.splice(i + 1, 2);\n continue;\n }\n }\n }\n i++;\n }\n return points;\n };\n // Connector rendering\n /* tslint:disable */\n LineRouting.prototype.updateConnectorSegments = function (diagram, intermediatePoints, gridCollection, connector, isUpdate) {\n var segments = [];\n var seg;\n var targetPoint;\n var pointX;\n var pointY;\n var node;\n var points = [];\n var direction;\n var length;\n var currentdirection;\n var prevDirection;\n var targetWrapper = connector.targetWrapper;\n var sourceWrapper = connector.sourceWrapper;\n var sourcePoint = this.findEndPoint(connector, true);\n if (connector.targetPortID !== '' || !connector.targetWrapper) {\n targetPoint = this.findEndPoint(connector, false, true);\n }\n for (var i = 0; i < intermediatePoints.length; i++) {\n node = gridCollection[intermediatePoints[parseInt(i.toString(), 10)].x][intermediatePoints[parseInt(i.toString(), 10)].y];\n if (node) {\n pointX = node.x + node.width / 2;\n pointY = node.y + node.height / 2;\n points.push({ x: pointX, y: pointY });\n if (i >= 1 && points.length > 1) {\n if (points[points.length - 2].x !== points[points.length - 1].x) {\n currentdirection = (points[points.length - 2].x > points[points.length - 1].x) ? 'Left' : 'Right';\n }\n else {\n currentdirection = (points[points.length - 2].y > points[points.length - 1].y) ? 'Top' : 'Bottom';\n }\n }\n if (i >= 2 && prevDirection === currentdirection && points.length > 1) {\n points.splice(points.length - 2, 1);\n }\n prevDirection = currentdirection;\n }\n }\n if (points && points.length > 1) {\n for (var j = 0; j < points.length - 1; j++) {\n var currentPoint = points[parseInt(j.toString(), 10)];\n var nextPoint = points[j + 1];\n if (currentPoint.x !== nextPoint.x) {\n if (j === 0 && connector.sourcePortID === '' && sourceWrapper) {\n sourcePoint = (currentPoint.x > nextPoint.x)\n ? sourceWrapper.bounds.middleLeft : sourceWrapper.bounds.middleRight;\n }\n if (j === points.length - 2 && connector.targetPortID === '' && targetWrapper) {\n targetPoint = (currentPoint.x > nextPoint.x)\n ? targetWrapper.bounds.middleRight : targetWrapper.bounds.middleLeft;\n }\n if (j === 0 && sourcePoint) {\n currentPoint.x = sourcePoint.x;\n currentPoint.y = nextPoint.y = sourcePoint.y;\n var newDirection = currentPoint.x > nextPoint.x ? 'Left' : 'Right';\n var refPoint = findPoint(sourceWrapper.bounds, getOppositeDirection(newDirection));\n sourcePoint = getIntersection(connector, sourceWrapper, sourcePoint, refPoint, false);\n currentPoint.x = sourcePoint.x;\n }\n if (j === points.length - 2 && targetPoint) {\n if (j > 0 && connector.targetDecorator &&\n ((targetPoint.x - nextPoint.x) < 0) &&\n (Math.abs(targetPoint.x - currentPoint.x) < connector.targetDecorator.width + 1)) {\n currentPoint.x = points[j - 1].x -= this.size / 2;\n }\n if (j > 0 && connector.targetDecorator &&\n ((targetPoint.x - nextPoint.x) > 0) &&\n (Math.abs(targetPoint.x - currentPoint.x) < connector.targetDecorator.width + 1)) {\n currentPoint.x = points[j - 1].x += this.size / 2;\n }\n nextPoint.x = targetPoint.x;\n currentPoint.y = nextPoint.y = targetPoint.y;\n }\n }\n else {\n //EJ2-855805 - Connector target decorator is not proper in complexhierarchical layout when we call doLayout with line-routing\n if (j === 0 && connector.sourcePortID === '' && sourceWrapper) {\n sourcePoint = (currentPoint.y > nextPoint.y)\n ? sourceWrapper.bounds.topCenter : sourceWrapper.bounds.bottomCenter;\n }\n if (j === points.length - 2 && connector.targetPortID === '' && targetWrapper) {\n targetPoint = (currentPoint.y > nextPoint.y)\n ? targetWrapper.bounds.bottomCenter : targetWrapper.bounds.topCenter;\n }\n if (j === 0 && sourcePoint) {\n currentPoint.y = sourcePoint.y;\n currentPoint.x = nextPoint.x = sourcePoint.x;\n var newDirection1 = currentPoint.y > nextPoint.y ? 'Top' : 'Bottom';\n var refPoint = findPoint(sourceWrapper.bounds, getOppositeDirection(newDirection1));\n sourcePoint = getIntersection(connector, sourceWrapper, sourcePoint, refPoint, false);\n currentPoint.y = sourcePoint.y;\n }\n if (j === points.length - 2 && targetPoint) {\n if (j > 0 && connector.targetDecorator &&\n ((targetPoint.y - nextPoint.y) < 0) &&\n (Math.abs(targetPoint.y - currentPoint.y) < connector.targetDecorator.height + 1)) {\n currentPoint.y = points[j - 1].y -= this.size / 2;\n }\n if (j > 0 && connector.targetDecorator &&\n ((targetPoint.y - nextPoint.y) > 0) &&\n (Math.abs(targetPoint.y - currentPoint.y) < connector.targetDecorator.height + 1)) {\n currentPoint.y = points[j - 1].y += this.size / 2;\n }\n nextPoint.y = targetPoint.y;\n currentPoint.x = nextPoint.x = targetPoint.x;\n }\n }\n }\n for (var j = 0; j < points.length - 1; j++) {\n var currentPoint = points[parseInt(j.toString(), 10)];\n var nextPoint = points[j + 1];\n if (currentPoint.x !== nextPoint.x) {\n if (currentPoint.x > nextPoint.x) {\n direction = 'Left';\n length = currentPoint.x - nextPoint.x;\n }\n else {\n direction = 'Right';\n length = nextPoint.x - currentPoint.x;\n }\n }\n else {\n if (currentPoint.y > nextPoint.y) {\n direction = 'Top';\n length = currentPoint.y - nextPoint.y;\n }\n else {\n direction = 'Bottom';\n length = nextPoint.y - currentPoint.y;\n }\n }\n seg = { type: 'Orthogonal', length: length, direction: direction };\n segments.push(seg);\n }\n }\n if (segments && segments.length > 0) {\n var lastSeg = segments[segments.length - 1];\n if (segments.length === 1) {\n lastSeg.length -= 20;\n }\n if (lastSeg.length < 10 && segments.length === 2) {\n segments.pop();\n if (segments.length > 0) {\n segments[0].length -= 20;\n lastSeg = segments[0];\n }\n }\n if (connector.targetDecorator &&\n ((lastSeg.direction === 'Top' || lastSeg.direction === 'Bottom') && lastSeg.length > connector.targetDecorator.height + 1) ||\n ((lastSeg.direction === 'Right' || lastSeg.direction === 'Left') && lastSeg.length > connector.targetDecorator.width + 1)) {\n connector.segments = segments;\n if (isUpdate) {\n diagram.connectorPropertyChange(connector, {}, { type: 'Orthogonal', segments: segments });\n }\n return true;\n }\n }\n return false;\n };\n /* tslint:enable */\n // Shortest path\n LineRouting.prototype.findPath = function (startGrid) {\n var intermediatePoint;\n var collection = [];\n var neigbours = this.findNearestNeigbours(startGrid, this.gridCollection, true);\n for (var i = 0; i < neigbours.length; i++) {\n intermediatePoint = this.findIntermediatePoints(neigbours[parseInt(i.toString(), 10)].gridX, neigbours[parseInt(i.toString(), 10)].gridY, startGrid.gridX, startGrid.gridY, this.targetGrid.gridX, this.targetGrid.gridY);\n if (intermediatePoint !== null) {\n var grid = this.gridCollection[intermediatePoint.x][intermediatePoint.y];\n var h = this.octile(Math.abs(intermediatePoint.x - startGrid.gridX), Math.abs(intermediatePoint.y - startGrid.gridY));\n if (startGrid.parent && startGrid.parent.parent) {\n if (grid.gridX !== startGrid.parent.gridX && grid.gridY !== startGrid.parent.gridY) {\n h += 0.1;\n }\n }\n var l = startGrid.previousDistance + h;\n if ((!grid.previousDistance || grid.previousDistance > l) &&\n (!(intermediatePoint.x === startGrid.gridX && intermediatePoint.y === startGrid.gridY))) {\n collection.push(intermediatePoint);\n grid.previousDistance = l;\n grid.afterDistance = grid.afterDistance || this.manhattan(Math.abs(intermediatePoint.x - this.targetGrid.gridX), Math.abs(intermediatePoint.y - this.targetGrid.gridY));\n grid.totalDistance = grid.previousDistance + grid.afterDistance;\n grid.parent = startGrid;\n }\n }\n }\n if (collection.length > 0) {\n for (var i = 0; i < collection.length; i++) {\n var grid = this.gridCollection[collection[parseInt(i.toString(), 10)].x][collection[parseInt(i.toString(), 10)].y];\n if (this.startArray.indexOf(grid) === -1) {\n this.startArray.push(grid);\n }\n }\n }\n this.sorting(this.startArray);\n };\n // sorting the array based on total distance between source and target node\n LineRouting.prototype.sorting = function (array) {\n var done = false;\n while (!done) {\n done = true;\n for (var i = 1; i < array.length; i += 1) {\n if (array[i - 1].totalDistance < array[parseInt(i.toString(), 10)].totalDistance) {\n done = false;\n var tmp = array[i - 1];\n array[i - 1] = array[parseInt(i.toString(), 10)];\n array[parseInt(i.toString(), 10)] = tmp;\n }\n }\n }\n return array;\n };\n LineRouting.prototype.octile = function (t, e) {\n var r = Math.SQRT2 - 1;\n return e > t ? r * t + e : r * e + t;\n };\n LineRouting.prototype.manhattan = function (t, e) {\n return t + e;\n };\n // Find the nearest neigbour from the current boundaries, the neigbour is use to find next intermdiate point.\n LineRouting.prototype.findNearestNeigbours = function (startGrid, gridCollection, isSource) {\n var neigbours = [];\n var parent = startGrid.parent;\n if (parent) {\n var dx = (startGrid.gridX - parent.gridX) / Math.max(Math.abs(startGrid.gridX - parent.gridX), 1);\n var dy = (startGrid.gridY - parent.gridY) / Math.max(Math.abs(startGrid.gridY - parent.gridY), 1);\n if (dx !== 0) {\n if (this.isWalkable(startGrid.gridX, startGrid.gridY - 1, true) &&\n this.sourceGridCollection.indexOf(gridCollection[startGrid.gridX][startGrid.gridY - 1]) === -1) {\n neigbours.push(gridCollection[startGrid.gridX][startGrid.gridY - 1]);\n }\n if (this.isWalkable(startGrid.gridX, startGrid.gridY + 1, true) &&\n this.sourceGridCollection.indexOf(gridCollection[startGrid.gridX][startGrid.gridY + 1])) {\n neigbours.push(gridCollection[startGrid.gridX][startGrid.gridY + 1]);\n }\n if (this.isWalkable(startGrid.gridX + dx, startGrid.gridY, true) &&\n this.sourceGridCollection.indexOf(gridCollection[startGrid.gridX + dx][startGrid.gridY]) === -1) {\n neigbours.push(gridCollection[startGrid.gridX + dx][startGrid.gridY]);\n }\n }\n else if (dy !== 0) {\n if (this.isWalkable(startGrid.gridX - 1, startGrid.gridY, true) &&\n this.sourceGridCollection.indexOf(gridCollection[startGrid.gridX - 1][startGrid.gridY]) === -1) {\n neigbours.push(gridCollection[startGrid.gridX - 1][startGrid.gridY]);\n }\n if (this.isWalkable(startGrid.gridX + 1, startGrid.gridY, true) &&\n this.sourceGridCollection.indexOf(gridCollection[startGrid.gridX + 1][startGrid.gridY]) === -1) {\n neigbours.push(gridCollection[startGrid.gridX + 1][startGrid.gridY]);\n }\n if (this.isWalkable(startGrid.gridX, startGrid.gridY + dy, true) &&\n this.sourceGridCollection.indexOf(gridCollection[startGrid.gridX][startGrid.gridY + dy]) === -1) {\n neigbours.push(gridCollection[startGrid.gridX][startGrid.gridY + dy]);\n }\n }\n }\n else {\n this.neigbour(startGrid, 'top', neigbours, isSource);\n this.neigbour(startGrid, 'right', neigbours, isSource);\n this.neigbour(startGrid, 'bottom', neigbours, isSource);\n this.neigbour(startGrid, 'left', neigbours, isSource);\n }\n return neigbours;\n };\n LineRouting.prototype.neigbour = function (startGrid, direction, neigbours, isSource) {\n var i = 1;\n var nearGrid;\n while (i > 0) {\n var x = (direction === 'top' || direction === 'bottom') ?\n (startGrid.gridX) : ((direction === 'left') ? startGrid.gridX - i : startGrid.gridX + i);\n var y = (direction === 'right' || direction === 'left') ?\n (startGrid.gridY) : ((direction === 'top') ? startGrid.gridY - i : startGrid.gridY + i);\n nearGrid = this.gridCollection[parseInt(x.toString(), 10)][parseInt(y.toString(), 10)];\n if (nearGrid && ((isSource && this.sourceGridCollection.indexOf(nearGrid) === -1)\n || (!isSource && this.targetGridCollection.indexOf(nearGrid) === -1))) {\n if (neigbours && this.isWalkable(x, y)) {\n neigbours.push(nearGrid);\n }\n return i;\n }\n if (x > 0 && y > 0) {\n i++;\n }\n else {\n break;\n }\n }\n return null;\n };\n LineRouting.prototype.resetGridColl = function (grid, direction, isSource) {\n var i = 1;\n var nearGrid;\n while (i > 0) {\n var x = (direction === 'top' || direction === 'bottom') ?\n (grid.gridX) : ((direction === 'left') ? grid.gridX - i : grid.gridX + i);\n var y = (direction === 'right' || direction === 'left') ?\n (grid.gridY) : ((direction === 'top') ? grid.gridY - i : grid.gridY + i);\n nearGrid = this.gridCollection[parseInt(x.toString(), 10)][parseInt(y.toString(), 10)];\n if (nearGrid && ((isSource && this.sourceGridCollection.indexOf(nearGrid) === -1) ||\n (!isSource && this.targetGridCollection.indexOf(nearGrid) === -1))) {\n if (this.isWalkable(x, y)) {\n break;\n }\n else {\n var grid_1 = this.gridCollection[parseInt(x.toString(), 10)][parseInt(y.toString(), 10)];\n this.considerWalkable.push(grid_1);\n }\n }\n if (x > 0 && y > 0) {\n if (direction === 'top' || direction === 'left') {\n i--;\n }\n else {\n i++;\n }\n }\n else {\n break;\n }\n }\n return null;\n };\n LineRouting.prototype.isWalkable = function (x, y, isparent) {\n if (x >= 0 && x < this.noOfRows && y >= 0 && y < this.noOfCols) {\n var grid = this.gridCollection[parseInt(x.toString(), 10)][parseInt(y.toString(), 10)];\n if (grid && (grid.walkable || ((grid.nodeId.length === 1 || (grid.nodeId.length === 2 && grid.parentNodeId\n || (this.considerWalkable.indexOf(grid) !== -1))) &&\n (this.sourceGridCollection.indexOf(grid) !== -1 || this.targetGridCollection.indexOf(grid) !== -1 ||\n this.considerWalkable.indexOf(grid) !== -1)))) {\n if ((isparent && !grid.parent) || !isparent) {\n return true;\n }\n }\n }\n return false;\n };\n LineRouting.prototype.findIntermediatePoints = function (neigbourGridX, neigbourGridY, startGridX, startGridY, endGridX, endGridY) {\n var dx = neigbourGridX - startGridX;\n var dy = neigbourGridY - startGridY;\n var gridX = neigbourGridX;\n var gridY = neigbourGridY;\n for (var i = 0; i < this.targetGridCollection.length; i++) {\n if (neigbourGridX === this.targetGridCollection[parseInt(i.toString(), 10)].gridX\n && neigbourGridY === this.targetGridCollection[parseInt(i.toString(), 10)].gridY) {\n return { x: neigbourGridX, y: neigbourGridY };\n }\n }\n if (!this.isWalkable(neigbourGridX, neigbourGridY)) {\n return null;\n }\n var neigbourGrid = this.gridCollection[parseInt(neigbourGridX.toString(), 10)][parseInt(neigbourGridY.toString(), 10)];\n if (neigbourGrid.tested) {\n return { x: neigbourGridX, y: neigbourGridY };\n }\n neigbourGrid.tested = true;\n if (dx !== 0) {\n dx = (dx > 0) ? 1 : -1;\n if ((this.isWalkable(gridX, gridY - 1) && !this.isWalkable(gridX - dx, gridY - 1)) ||\n (this.isWalkable(gridX, gridY + 1) && !this.isWalkable(gridX - dx, gridY + 1))) {\n return { x: neigbourGridX, y: neigbourGridY };\n }\n }\n if (dy !== 0) {\n dy = (dy > 0) ? 1 : -1;\n if ((this.isWalkable(gridX - 1, gridY) && !this.isWalkable(gridX - 1, gridY - dy)) ||\n (this.isWalkable(gridX + 1, gridY) && !this.isWalkable(gridX + 1, gridY - dy))) {\n return { x: neigbourGridX, y: neigbourGridY };\n }\n if (this.findIntermediatePoints(gridX + 1, gridY, gridX, gridY, endGridX, endGridY) ||\n this.findIntermediatePoints(gridX - 1, gridY, gridX, gridY, endGridX, endGridY)) {\n return { x: neigbourGridX, y: neigbourGridY };\n }\n }\n return this.findIntermediatePoints(gridX + dx, gridY + dy, gridX, gridY, endGridX, endGridY);\n };\n /**\n *To destroy the line routing\n *\n * @returns {void} To destroy the line routing\n */\n LineRouting.prototype.destroy = function () {\n /**\n * Destroys the line routing module\n */\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n LineRouting.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'LineRouting';\n };\n return LineRouting;\n}());\n\nvar __extends$A = (undefined && undefined.__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$p = (undefined && undefined.__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/**\n * Represents the diagram settings\n * ```html\n * \n * ```\n * ```typescript\n * let diagram: Diagram = new Diagram({\n * ...\n * diagramSettings: { inversedAlignment: true },\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n *\n * @default {}\n */\nvar DiagramSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$A(DiagramSettings, _super);\n function DiagramSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$p([\n Property(true)\n ], DiagramSettings.prototype, \"inversedAlignment\", void 0);\n return DiagramSettings;\n}(ChildProperty));\n\nvar __extends$B = (undefined && undefined.__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$q = (undefined && undefined.__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};\nvar __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator$2 = (undefined && undefined.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\n/**\n * Represents the Diagram control\n * ```html\n * \n * ```\n * ```typescript\n * let diagram: Diagram = new Diagram({\n * width:'1000px', height:'500px' });\n * diagram.appendTo('#diagram');\n * ```\n */\nvar Diagram = /** @__PURE__ @class */ (function (_super) {\n __extends$B(Diagram, _super);\n /**\n * Constructor for creating the widget\n */\n function Diagram(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.version = 17.1;\n /** @private */\n _this.checkMenu = false;\n /** @private */\n _this.isServerUpdate = false;\n /** @private */\n _this.oldNodeObjects = [];\n /** @private */\n _this.oldDiagramObject = {};\n /** @private */\n _this.oldConnectorObjects = [];\n /** @private */\n _this.canEnableBlazorObject = false;\n /** @private */\n _this.connectorTable = {};\n /** @private */\n _this.groupTable = {};\n /** @private */\n _this.scrollActions = ScrollActions.None;\n /** @private */\n _this.blazorActions = BlazorAction.Default;\n /** @private */\n _this.activeLabel = { id: '', parentId: '', isGroup: false, text: undefined };\n /** @private */\n _this.textEditing = false;\n /** @private */\n _this.isTriggerEvent = false;\n /** @private */\n _this.preventNodesUpdate = false;\n /** @private */\n _this.preventConnectorsUpdate = false;\n /** @private */\n _this.callBlazorModel = true;\n /** @private */\n _this.selectionConnectorsList = [];\n /** @private */\n _this.deleteVirtualObject = false;\n _this.canLayout = true;\n _this.isRefreshed = false;\n /** @private */\n _this.swimlaneChildTable = {};\n /** @private */\n _this.swimlaneZIndexTable = {};\n /** @private */\n _this.canExpand = false;\n _this.changedConnectorCollection = [];\n _this.changedNodesCollection = [];\n _this.previousNodeCollection = [];\n _this.previousConnectorCollection = [];\n _this.crudDeleteNodes = [];\n _this.previousSelectedObjects = [];\n // Group update to server when BlazorAction is isGroupAction;\n _this.blazorAddorRemoveCollection = [];\n _this.blazorRemoveIndexCollection = [];\n _this.diagramid = 88123;\n _this.portCenterPoint = [];\n /** @private */\n _this.selectedObject = { helperObject: undefined, actualObject: undefined };\n /** @private */\n _this.deleteDependentConnector = true;\n _this.mermaidNodeBaseCollection = [];\n _this.bangShape = 'M0 0 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,-3.7200001525878905 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,3.7200001525878905 a15.470625686645507,15.470625686645507 1 0,0 15.470625686645507,12.276000503540038 a12.376500549316406,12.376500549316406 1 0,0 0,12.648000518798828 a15.470625686645507,15.470625686645507 1 0,0 -15.470625686645507,12.276000503540038 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,5.580000228881835 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,-5.580000228881835 a15.470625686645507,15.470625686645507 1 0,0 -10.313750457763673,-12.276000503540038 a12.376500549316406,12.376500549316406 1 0,0 0,-12.648000518798828 a15.470625686645507,15.470625686645507 1 0,0 10.313750457763673,-12.276000503540038 H0 V0 Z';\n _this.cloudShape = 'M0 0 a16.18875045776367,16.18875045776367 0 0,1 26.981250762939453,-10.792500305175782 a37.77375106811523,37.77375106811523 1 0,1 43.17000122070313,-10.792500305175782 a26.981250762939453,26.981250762939453 1 0,1 37.77375106811523,21.585000610351564 a16.18875045776367,16.18875045776367 1 0,1 16.18875045776367,13.020000534057615 a21.585000610351564,21.585000610351564 1 0,1 -16.18875045776367,24.180000991821288 a26.981250762939453,16.18875045776367 1 0,1 -26.981250762939453,16.18875045776367 a37.77375106811523,37.77375106811523 1 0,1 -53.962501525878906,0 a16.18875045776367,16.18875045776367 1 0,1 -26.981250762939453,-16.18875045776367 a16.18875045776367,16.18875045776367 1 0,1 -10.792500305175782,-13.020000534057615 a21.585000610351564,21.585000610351564 1 0,1 10.792500305175782,-24.180000991821288 H0 V0 Z';\n _this.renderTimer = null;\n var child;\n var node;\n //Removed isBlazor code\n _this.ignoreCollectionWatch = true;\n for (var i = 0; options && options.nodes && i < options.nodes.length; i++) {\n child = options.nodes[parseInt(i.toString(), 10)];\n node = _this.nodes[parseInt(i.toString(), 10)];\n if (child.children && child.children.length > 0) {\n if (!child.style || !child.style.fill) {\n node.style.fill = 'transparent';\n }\n if (!child.style || !child.style.strokeColor) {\n node.style.strokeColor = 'transparent';\n }\n }\n if (child.shape && child.shape.type === 'UmlActivity') {\n setUMLActivityDefaults(child, node);\n }\n if (child.shape && child.shape.type === 'SwimLane') {\n setSwimLaneDefaults(child, node);\n }\n // Removed isBlazor code\n if (_this.nodeDefaults) {\n updateDefaultValues(node, child, _this.nodeDefaults);\n }\n _this.updateAnnotationText(node.annotations);\n }\n if (options && options.connectors) {\n for (var i = 0; options && options.connectors && i < options.connectors.length; i++) {\n child = options.connectors[parseInt(i.toString(), 10)];\n node = _this.connectors[parseInt(i.toString(), 10)];\n //Removed isBlazor code\n if (_this.connectorDefaults) {\n updateDefaultValues(node, child, _this.connectorDefaults);\n }\n _this.updateAnnotationText(node.annotations);\n }\n }\n for (var i = 0; options && options.connectors && i < options.connectors.length; i++) {\n var defaultConnector = options.connectors[parseInt(i.toString(), 10)];\n var connector = _this.connectors[parseInt(i.toString(), 10)];\n if (defaultConnector.shape && defaultConnector.shape.type !== 'None') {\n setConnectorDefaults(defaultConnector, connector);\n }\n //Removed isBlazor code\n }\n return _this;\n }\n Diagram.prototype.updateAnnotationText = function (annotations) {\n //Removed isBlazor code\n };\n Diagram.prototype.clearCollection = function (isConnector) {\n var collection = [];\n var obj;\n for (var _i = 0, _a = Object.keys(this.nameTable); _i < _a.length; _i++) {\n var key = _a[_i];\n obj = this.nameTable[\"\" + key];\n if (obj && ((isConnector && obj instanceof Connector) || (!isConnector && obj instanceof Node))) {\n collection.push(obj);\n }\n }\n this.clearObjects(collection);\n };\n /**\n * Updates the diagram control when the objects are changed by comparing new and old property values.\n *\n * @param {DiagramModel} newProp - A object that lists the new values of the changed properties.\n * @param {DiagramModel} oldProp - A object that lists the old values of the changed properties.\n */\n /* tslint:disable */\n Diagram.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n // Model Changed\n // Bug 842506: After multiple group node rotations, the undo functionality is not working.\n // Below condition is used to restrict onPropertyChange when we rotate group node using button at runtime.\n if (!this.rotateUsingButton) {\n var isPropertyChanged = true;\n var refreshLayout = false;\n var refereshColelction = false;\n if (this.diagramActions & DiagramAction.Render) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n case 'height':\n this.element.style.width = this.getSizeValue(this.width);\n this.element.style.height = this.getSizeValue(this.height);\n this.eventHandler.updateViewPortSize(this.element);\n for (var _b = 0, _c = this.views; _b < _c.length; _b++) {\n var view = _c[_b];\n var temp = this.views[\"\" + view];\n if (!(temp instanceof Diagram)) {\n temp.updateView(temp);\n }\n }\n break;\n case 'nodes':\n if (newProp.nodes.length > 0 && oldProp.nodes.length === 0) {\n this.clearCollection();\n refereshColelction = true;\n }\n else {\n for (var _d = 0, _e = Object.keys(newProp.nodes); _d < _e.length; _d++) {\n var key = _e[_d];\n var index = Number(key);\n var actualObject = this.nodes[parseInt(index.toString(), 10)];\n var changedProp = newProp.nodes[parseInt(index.toString(), 10)];\n if (newProp.nodes[parseInt(index.toString(), 10)].style\n && newProp.nodes[parseInt(index.toString(), 10)].style.gradient) {\n this.updateGradient(newProp.nodes[parseInt(index.toString(), 10)], oldProp.nodes[parseInt(index.toString(), 10)], this.nodes[parseInt(index.toString(), 10)]);\n this.nodes[parseInt(index.toString(), 10)].oldGradientValue\n = cloneObject(newProp.nodes[parseInt(index.toString(), 10)].style.gradient);\n }\n refreshLayout = refreshLayout || changedProp.excludeFromLayout !== undefined;\n this.nodePropertyChange(actualObject, oldProp.nodes[parseInt(index.toString(), 10)], changedProp, undefined, true, true);\n var args = {\n element: cloneBlazorObject(actualObject), cause: this.diagramActions,\n diagramAction: this.getDiagramAction(this.diagramActions),\n oldValue: cloneBlazorObject(oldProp.nodes[parseInt(index.toString(), 10)]),\n newValue: cloneBlazorObject(newProp.nodes[parseInt(index.toString(), 10)])\n };\n // Removed isBlazor code\n this.triggerEvent(DiagramEvent.propertyChange, args);\n if (isPropertyChanged) {\n isPropertyChanged = false;\n }\n }\n if (this.mode === 'Canvas') {\n this.refreshDiagramLayer();\n }\n }\n break;\n case 'connectors':\n if (newProp.connectors.length > 0 && oldProp.connectors.length === 0) {\n this.clearCollection(true);\n refereshColelction = true;\n }\n else {\n for (var _f = 0, _g = Object.keys(newProp.connectors); _f < _g.length; _f++) {\n var key = _g[_f];\n var index = Number(key);\n var actualObject = this.connectors[parseInt(index.toString(), 10)];\n var changedProp = newProp.connectors[parseInt(index.toString(), 10)];\n if (changedProp && (changedProp.sourceDecorator || changedProp.targetDecorator)) {\n this.diagramActions |= DiagramAction.DecoratorPropertyChange;\n }\n this.connectorPropertyChange(actualObject, oldProp.connectors[parseInt(index.toString(), 10)], changedProp, true, true);\n if (changedProp && (changedProp.sourceDecorator || changedProp.targetDecorator)) {\n this.diagramActions = this.diagramActions & ~DiagramAction.DecoratorPropertyChange;\n }\n var args = {\n element: cloneBlazorObject(actualObject), cause: this.diagramActions,\n diagramAction: this.getDiagramAction(this.diagramActions),\n oldValue: cloneBlazorObject(oldProp.connectors[parseInt(index.toString(), 10)]),\n newValue: cloneBlazorObject(newProp.connectors[parseInt(index.toString(), 10)])\n };\n // Removed isBlazor code\n this.triggerEvent(DiagramEvent.propertyChange, args);\n if (actualObject && actualObject.parentId && this.nameTable[actualObject.parentId].shape.type === 'UmlClassifier') {\n this.updateConnectorEdges(this.nameTable[actualObject.parentId] || actualObject);\n }\n if (isPropertyChanged) {\n isPropertyChanged = false;\n }\n }\n this.updateBridging();\n if (this.mode === 'Canvas') {\n this.refreshDiagramLayer();\n }\n }\n break;\n case 'bridgeDirection':\n this.updateBridging();\n if (this.mode === 'Canvas') {\n this.refreshDiagramLayer();\n }\n break;\n case 'backgroundColor':\n this.intOffPageBackground();\n break;\n case 'pageSettings':\n this.validatePageSize();\n this.updatePage();\n break;\n case 'selectedItems':\n if (newProp.selectedItems.userHandles && this.selectedItems.wrapper && this.selectedItems.userHandles) {\n if (this.selectedItems.userHandles.length > 0) {\n this.renderSelector(true);\n break;\n }\n }\n if (newProp.selectedItems.constraints) {\n this.renderSelector(true);\n break;\n }\n break;\n case 'snapSettings':\n this.updateSnapSettings(newProp);\n break;\n case 'commandManager':\n this.initCommands();\n break;\n case 'layout':\n refreshLayout = true;\n break;\n case 'segmentThumbShape':\n this.updateSelector();\n break;\n case 'dataSourceSettings':\n this.clear();\n if (this.layout.type === 'None') {\n refereshColelction = true;\n }\n else {\n //EJ2-837322- Duplicate nodes and connectors are created after reset for layout type 'None'\n this.initObjects();\n refreshLayout = true;\n }\n break;\n case 'tooltip':\n initTooltip(this);\n break;\n case 'rulerSettings':\n this.updateRulerSettings(newProp);\n break;\n case 'layers':\n this.updateLayer(newProp);\n break;\n case 'scrollSettings':\n this.scrollActions |= ScrollActions.PropertyChange;\n this.updateScrollSettings(newProp);\n this.scrollActions &= ~ScrollActions.PropertyChange;\n this.scrollSettings.horizontalOffset = -this.scroller.horizontalOffset || 0;\n this.scrollSettings.verticalOffset = -this.scroller.verticalOffset || 0;\n break;\n case 'locale':\n if (newProp.locale !== oldProp.locale) {\n this.realActions |= RealAction.PreventDataInit;\n _super.prototype.refresh.call(this);\n this.realActions &= ~RealAction.PreventDataInit;\n }\n break;\n case 'contextMenuSettings':\n if (newProp.contextMenuSettings.showCustomMenuOnly !== undefined) {\n this.contextMenuSettings.showCustomMenuOnly = newProp.contextMenuSettings.showCustomMenuOnly;\n }\n if (newProp.contextMenuSettings.show !== undefined) {\n this.contextMenuSettings.show = newProp.contextMenuSettings.show;\n }\n if (newProp.contextMenuSettings.items) {\n var items = newProp.contextMenuSettings.items;\n for (var _h = 0, _j = Object.keys(items); _h < _j.length; _h++) {\n var key = _j[_h];\n var index = Number(key);\n this.contextMenuSettings.items[parseInt(index.toString(), 10)] = items[parseInt(index.toString(), 10)];\n }\n if (this.contextMenuModule) {\n this.contextMenuModule.refreshItems();\n }\n else {\n console.warn('[WARNING] :: Module \"DiagramContextMenu\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n }\n break;\n case 'serializationSettings':\n if (newProp.serializationSettings.preventDefaults !== undefined) {\n this.serializationSettings.preventDefaults = newProp.serializationSettings.preventDefaults;\n }\n break;\n case 'tool':\n // 912436: Mouse cursor flickers when entering the diagram canvas after the tool is changed at runtime\n if (((newProp.tool === DiagramTools.ZoomPan) && (oldProp.tool === DiagramTools.Default)) ||\n ((oldProp.tool === DiagramTools.ZoomPan) && (newProp.tool === DiagramTools.Default))) {\n this.eventHandler.updateTool();\n }\n break;\n }\n }\n if (refreshLayout && !refereshColelction) {\n if (oldProp.layout && oldProp.layout.connectionPointOrigin === 'DifferentPoint' && newProp.layout.connectionPointOrigin === 'SamePoint'\n || (oldProp.layout && newProp.layout && !newProp.layout.enableRouting && oldProp.layout.enableRouting)) {\n for (var i = 0; i < this.nodes.length; i++) {\n var node = this.nodes[parseInt(i.toString(), 10)];\n if ((node.ports && node.ports.length > 0)) {\n var ports = [];\n for (var j = node.ports.length - 1; j >= 0; j--) {\n if (node.ports[parseInt(j.toString(), 10)].id.split('_')[1] === 'LineDistribution') {\n ports.push(node.ports[parseInt(j.toString(), 10)]);\n }\n }\n this.removePorts(node, ports);\n }\n }\n for (var j = 0; j < this.connectors.length; j++) {\n var connector = this.connectors[parseInt(j.toString(), 10)];\n var sourcePortid = connector.sourcePortID;\n var targetPortId = connector.targetPortID;\n //const oldSegment: OrthogonalSegmentModel = (connector.segments as OrthogonalSegmentModel);\n connector.sourcePortID = '';\n connector.targetPortID = '';\n connector.sourcePortWrapper = undefined;\n connector.targetPortWrapper = undefined;\n connector.segments = [];\n this.connectorPropertyChange(connector, {\n sourcePortID: sourcePortid, targetPortID: targetPortId\n }, { sourcePortID: '', targetPortID: '' });\n }\n }\n this.doLayout();\n this.renderReactTemplates();\n }\n if (isPropertyChanged && this.propertyChange) {\n var args = {\n element: cloneBlazorObject(this), cause: this.diagramActions,\n diagramAction: this.getDiagramAction(this.diagramActions),\n oldValue: cloneBlazorObject(oldProp), newValue: cloneBlazorObject(newProp)\n };\n // Removed isBlazor code\n this.triggerEvent(DiagramEvent.propertyChange, args);\n }\n /**Feature(EJ2-60228): Need to add Object ID in the history change event argument*/\n if (!refereshColelction && (this.canLogChange()) && (this.modelChanged(newProp, oldProp))) {\n var propertyObjects = [];\n var nodeObjects = [];\n var connObjects = [];\n if (newProp.nodes && Object.keys(newProp.nodes).length > 0) {\n for (var _k = 0, _l = Object.keys(newProp.nodes); _k < _l.length; _k++) {\n var key = _l[_k];\n var nodeIndex = parseInt(key, 10);\n nodeObjects.push(this.nodes[parseInt(nodeIndex.toString(), 10)].id);\n }\n }\n if (newProp.connectors && Object.keys(newProp.connectors).length > 0) {\n for (var _m = 0, _o = Object.keys(newProp.connectors); _m < _o.length; _m++) {\n var key = _o[_m];\n var connIndex = parseInt(key, 10);\n connObjects.push(this.connectors[parseInt(connIndex.toString(), 10)].id);\n }\n }\n propertyObjects = nodeObjects.concat(connObjects);\n //To prevent history entry for text annotation connector while dragging node.\n var textCon = connObjects.filter(function (id) { return _this.nameTable[\"\" + id].isBpmnAnnotationConnector; });\n if (textCon.length === 0) {\n var entry = { type: 'PropertyChanged', undoObject: oldProp, redoObject: newProp, category: 'Internal' };\n if (this.historyManager) {\n this.addHistoryEntry(entry, propertyObjects);\n }\n }\n }\n this.resetDiagramActions();\n if (refereshColelction) {\n this.initObjects(true);\n this.refreshDiagramLayer();\n if (refreshLayout) {\n this.doLayout();\n }\n }\n var scrollAlone = ((Object.keys(newProp).length === 1) && newProp.scrollSettings !== undefined);\n if (!refereshColelction) {\n for (var _p = 0, _q = this.views; _p < _q.length; _p++) {\n var temp = _q[_p];\n var view = this.views[\"\" + temp];\n if (!(view instanceof Diagram)) {\n if (newProp.scrollSettings && newProp.scrollSettings.currentZoom !== oldProp.scrollSettings.currentZoom) ;\n if (!scrollAlone) {\n this.refreshCanvasDiagramLayer(view);\n }\n }\n }\n }\n }\n }\n else {\n this.rotateUsingButton = false;\n }\n };\n /* tslint:enable */\n Diagram.prototype.updateSnapSettings = function (newProp) {\n if (newProp.snapSettings.constraints !== undefined || newProp.snapSettings.horizontalGridlines ||\n newProp.snapSettings.verticalGridlines || newProp.snapSettings.gridType) {\n this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n }\n };\n // This private method has been specially provided to update only the node old gradient value in oldProperty.\n // This issue belong to core team but we fixed in our end.\n // https://syncfusion.atlassian.net/browse/EJ2-49232\n Diagram.prototype.updateGradient = function (newProp, oldProp, nodeObj) {\n if (nodeObj.oldGradientValue) {\n var linearNode = nodeObj;\n var radialNode = nodeObj;\n var linearProp = oldProp.style.gradient;\n var radialProp = oldProp.style.gradient;\n for (var _i = 0, _a = Object.keys(newProp.style.gradient); _i < _a.length; _i++) {\n var key = _a[_i];\n switch (key) {\n case 'type':\n if (linearNode.type) {\n linearProp.type = linearNode.type;\n }\n break;\n case 'x1':\n if (linearNode.x1) {\n linearProp.x1 = linearNode.x1;\n }\n break;\n case 'x2':\n if (linearNode.x2) {\n linearProp.x2 = linearNode.x2;\n }\n break;\n case 'y1':\n if (linearNode.y1) {\n linearProp.y1 = linearNode.y1;\n }\n break;\n case 'y2':\n if (linearNode.y2) {\n linearProp.y2 = linearNode.y2;\n }\n break;\n case 'cx':\n if (radialNode.cx) {\n radialProp.cx = radialNode.cx;\n }\n break;\n case 'cy':\n if (radialNode.cy) {\n radialProp.cy = radialNode.cy;\n }\n break;\n case 'fx':\n if (radialNode.fx) {\n radialProp.fx = radialNode.fx;\n }\n break;\n case 'fy':\n if (radialNode.fy) {\n radialProp.fy = radialNode.fy;\n }\n break;\n case 'r':\n if (radialNode.r) {\n radialProp.r = radialNode.r;\n }\n break;\n case 'stops':\n if (nodeObj.oldGradientValue.stops) {\n var stops = (Object.values(cloneObject(nodeObj.oldGradientValue.stops)));\n stops.pop();\n oldProp.style.gradient.stops = stops;\n }\n break;\n }\n }\n }\n };\n Diagram.prototype.updateRulerSettings = function (newProp) {\n if (newProp.rulerSettings.dynamicGrid !== undefined) {\n this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n }\n if (newProp.rulerSettings.showRulers !== undefined) {\n this.intOffPageBackground();\n this.scroller.setSize();\n this.renderRulers();\n }\n else if (newProp.rulerSettings.horizontalRuler !== undefined ||\n newProp.rulerSettings.verticalRuler !== undefined) {\n if (newProp.rulerSettings.horizontalRuler.thickness !== undefined ||\n newProp.rulerSettings.verticalRuler.thickness !== undefined) {\n removeRulerElements(this);\n this.intOffPageBackground();\n this.scroller.setSize();\n this.renderRulers();\n }\n else {\n updateRuler(this);\n }\n }\n this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n Diagram.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initialize nodes, connectors and renderer\n */\n Diagram.prototype.preRender = function () {\n this.initializePrivateVariables();\n this.isProtectedOnChange = true;\n this.serviceLocator = new ServiceLocator;\n this.initializeServices();\n this.setCulture();\n var measureWindowElement = 'measureElement';\n if (window[\"\" + measureWindowElement]) {\n window[\"\" + measureWindowElement] = null;\n }\n this.initDiagram();\n this.initViews();\n this.unWireEvents();\n this.wireEvents();\n this.element.classList.add('e-diagram');\n };\n Diagram.prototype.initializePrivateVariables = function () {\n if (this.element.id === '') {\n var collection = document.getElementsByClassName('e-diagram').length;\n this.element.id = 'diagram_' + this.diagramid + '_' + collection;\n }\n this.defaultLocale = {\n Copy: 'Copy',\n Cut: 'Cut',\n Paste: 'Paste',\n Undo: 'Undo',\n Redo: 'Redo',\n SelectAll: 'Select All',\n Grouping: 'Grouping',\n Group: 'Group',\n UnGroup: 'Un Group',\n Order: 'Order',\n BringToFront: 'Bring To Front',\n MoveForward: 'Move Forward',\n SendToBack: 'Send To Back',\n SendBackward: 'Send Backward'\n };\n this.layerZIndex = -1;\n this.layerZIndexTable = {};\n //878837 : initialize parameter for passing container as a parameter\n if (this.swimlaneChildTable === undefined && this.swimlaneZIndexTable === undefined) {\n this.swimlaneChildTable = {};\n this.swimlaneZIndexTable = {};\n }\n this.nameTable = {};\n this.pathTable = {};\n this.groupTable = {};\n this.commands = {};\n if (!this.isLoading) {\n this.views = [];\n }\n this.commandHandler = new CommandHandler(this);\n this.eventHandler = new DiagramEventHandler(this, this.commandHandler);\n this.spatialSearch = new SpatialSearch(this.nameTable);\n this.scroller = new DiagramScroller(this);\n };\n Diagram.prototype.initializeServices = function () {\n this.serviceLocator.register('localization', this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale));\n };\n /**\n * Method to set culture for chart\n */\n Diagram.prototype.setCulture = function () {\n this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);\n };\n /* tslint:disable */\n /**\n * Renders the diagram control with nodes and connectors\n */\n Diagram.prototype.render = function () {\n if (this.refreshing && this.dataSourceSettings.dataSource && !this.isLoading) {\n this.nodes = [];\n this.connectors = [];\n }\n //830544-Support to add load event to notify before rendering of diagram\n if (!this.refreshing) {\n var loadEventData = {\n diagram: this, name: 'load'\n };\n this.trigger('load', loadEventData);\n }\n // Bug 832897: Need to improve performance while rendering layout with large number of nodes.\n this.isRefreshed = false;\n this.ignoreCollectionWatch = true;\n var domTable = 'domTable';\n window[\"\" + domTable] = {};\n var collapsedNode = [];\n //Removed isBlazor code.\n if (this.dataSourceSettings.crudAction.read) {\n this.renderInitialCrud();\n }\n this.initHistory();\n this.diagramRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), this.mode === 'SVG');\n this.initLayers();\n this.initializeDiagramLayers();\n this.diagramRenderer.setLayers();\n this.initObjects(true);\n // Removed isBlazor code.\n var nodes = this.nodes;\n for (var i = 0; i < nodes.length; i++) {\n if (!nodes[parseInt(i.toString(), 10)].isExpanded) {\n collapsedNode.push(nodes[parseInt(i.toString(), 10)]);\n }\n }\n if (collapsedNode.length) {\n for (var i = collapsedNode.length - 1; i >= 0; i--) {\n if (i === 0) {\n this.commandHandler.expandNode(collapsedNode[parseInt(i.toString(), 10)], this, false);\n }\n else {\n this.commandHandler.expandNode(collapsedNode[parseInt(i.toString(), 10)], this, true);\n }\n }\n }\n if (this.canLayout) {\n this.doLayout();\n }\n if (this.lineRoutingModule) {\n //Removed isBlazor code.\n // EJ2-65876 - Exception occurs on line routing injection module\n if (this.connectors.sourceID !== this.connectors.targetID) {\n this.lineRoutingModule.lineRouting(this);\n }\n // Removed isBlazor code.\n }\n else if (this.constraints & DiagramConstraints.LineRouting) {\n console.warn('[WARNING] :: Module \"LineRouting\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n this.validatePageSize();\n this.renderPageBreaks();\n this.diagramRenderer.renderSvgGridlines(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n this.commandHandler.initSelectorWrapper();\n /**\n * Used to render context menu\n */\n this.notify('initial-load', {});\n /**\n * Used to load context menu\n */\n this.trigger('load');\n this.scroller.setSize();\n this.scroller.updateScrollOffsets();\n // Bug 832897: Need to improve performance while rendering layout with large number of nodes.\n // If diagram not refreshed, then we will refresh the diagram.\n if (!this.isRefreshed) {\n this.refreshDiagramLayer();\n }\n //Bug 855677: After Serialization, Subprocess Node Dragging Faces Problems After Removing Child Node.\n //Removed refreshDiagramLayer() method in this line as it causes the subprocess child node to be rendered twice in wrapper which causes the issue.\n if (this.scrollSettings.verticalOffset > 0 || this.scrollSettings.horizontalOffset > 0) {\n this.updateScrollOffset();\n }\n /**\n * Used to end the context menu rendering\n */\n if (Browser.isDevice) {\n this.tool = DiagramTools.ZoomPan | DiagramTools.SingleSelect;\n }\n this.notify('initial-end', {});\n this.isProtectedOnChange = false;\n this.tooltipObject = initTooltip(this);\n this.diagramActions = DiagramAction.Render;\n this.initCommands();\n var hiddenUserHandleTemplate = document.getElementsByClassName(this.element.id + '_hiddenUserHandleTemplate');\n createUserHandleTemplates(this.userHandleTemplate, hiddenUserHandleTemplate, this.selectedItems, this.element.id);\n //Removed isBlazor code.\n this.isLoading = false;\n this.refreshRoutingConnectors();\n this.renderComplete();\n this.updateFitToPage();\n if (this.refreshing) {\n this.renderReactTemplates();\n }\n };\n /* tslint:enable */\n Diagram.prototype.updateFitToPage = function () {\n if (this.pageSettings && this.pageSettings.fitOptions && this.pageSettings.fitOptions.canFit) {\n this.fitToPage(this.pageSettings.fitOptions);\n }\n };\n Diagram.prototype.updateTemplate = function () {\n //Removed blazor code\n };\n //Call back function to the node template\n // private measureNode(node: NodeModel): void {\n // if (node.shape.type === 'Native' && isBlazor()) {\n // node.wrapper.measure(new Size(node.width, node.height));\n // node.wrapper.arrange(node.wrapper.desiredSize);\n // }\n // }\n Diagram.prototype.renderInitialCrud = function () {\n /* eslint-disable */\n var tempObj = this;\n /* eslint-enable */\n if (tempObj.dataSourceSettings.crudAction.read) {\n var callback = new Fetch(tempObj.dataSourceSettings.crudAction.read, 'GET');\n callback.onSuccess = function (data) {\n if (tempObj.dataSourceSettings.dataManager) {\n tempObj.dataSourceSettings.dataManager = JSON.parse(data);\n }\n else {\n tempObj.dataSourceSettings.dataSource = JSON.parse(data);\n }\n tempObj.dataBind();\n };\n callback.send().then();\n }\n if (tempObj.dataSourceSettings.connectionDataSource.crudAction.read) {\n var callback = new Fetch(tempObj.dataSourceSettings.connectionDataSource.crudAction.read, 'GET');\n callback.onSuccess = function (data) {\n tempObj.dataSourceSettings.connectionDataSource.dataManager = JSON.parse(data);\n tempObj.dataBind();\n };\n callback.send().then();\n }\n };\n /**\n * Retrieves the module name associated with the diagram.\n *\n * @returns {string} Retrieves the module name associated with the diagram.\n */\n Diagram.prototype.getModuleName = function () {\n return 'diagram';\n };\n /**\n *\n * Returns the name of class Diagram\n * @returns {string} Returns the module name of the diagram\n * @private\n */\n Diagram.prototype.getClassName = function () {\n return 'Diagram';\n };\n /* tslint:disable */\n /**\n * To provide the array of modules needed for control rendering\n *\n * @returns {ModuleDeclaration[]} To provide the array of modules needed for control rendering .\\\n * @private\n */\n Diagram.prototype.requiredModules = function () {\n var modules = [];\n modules.push({\n member: 'Bpmn',\n args: []\n });\n modules.push({\n member: 'Bridging',\n args: []\n });\n modules.push({\n member: 'ConnectorEditingTool',\n args: []\n });\n //Removed isBlazor code\n if (this.constraints & DiagramConstraints.UndoRedo) {\n modules.push({\n member: 'UndoRedo',\n args: []\n });\n }\n if (this.layout.type === 'OrganizationalChart' || this.layout.type === 'HierarchicalTree' ||\n this.layout.enableAnimation) {\n modules.push({\n member: 'LayoutAnimate',\n args: []\n });\n }\n if (this.snapSettings.constraints) {\n modules.push({\n member: 'Snapping',\n args: [this]\n });\n }\n modules.push({\n member: 'Ej1Serialization',\n args: [this]\n });\n modules.push({\n member: 'PrintandExport',\n args: [this]\n });\n if (this.contextMenuSettings.show) {\n modules.push({\n member: 'contextMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.layout.type === 'OrganizationalChart' || this.layout.type === 'HierarchicalTree') {\n modules.push({\n member: 'OrganizationalChart',\n args: [this]\n });\n }\n if (this.layout.type === 'ComplexHierarchicalTree') {\n modules.push({\n member: 'ComplexHierarchicalTree',\n args: []\n });\n }\n if (this.layout.type === 'MindMap') {\n modules.push({\n member: 'MindMapChart',\n args: []\n });\n }\n if (this.layout.type === 'RadialTree') {\n modules.push({\n member: 'RadialTree',\n args: []\n });\n }\n if (this.layout.type === 'SymmetricalLayout') {\n modules.push({\n member: 'SymmetricalLayout',\n args: []\n });\n }\n if (this.layout.type === 'Flowchart') {\n modules.push({\n member: 'FlowchartLayout',\n args: []\n });\n }\n if (this.dataSourceSettings.dataManager || this.dataSourceSettings.dataSource ||\n this.dataSourceSettings.crudAction.read || this.dataSourceSettings.connectionDataSource.crudAction.read) {\n modules.push({\n member: 'DataBinding',\n args: []\n });\n }\n if (this.constraints & DiagramConstraints.LineRouting) {\n modules.push({\n member: 'LineRouting',\n args: []\n });\n }\n if ((this.layout && (this.layout.type === 'ComplexHierarchicalTree' || this.layout.type === 'HierarchicalTree')) || (this.layout.arrangement === 'Linear' || (this.layout.enableRouting))) {\n modules.push({\n member: 'LineDistribution',\n args: []\n });\n }\n return modules;\n };\n /* tslint:enable */\n Diagram.prototype.removeUserHandlesTemplate = function () {\n if (this.selectedItems.userHandles.length) {\n for (var i = 0; i < this.selectedItems.userHandles.length; i++) {\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(this.selectedItems.userHandles[parseInt(i.toString(), 10)].name + '_template_hiddenUserHandle', elementId);\n }\n }\n }\n };\n /**\n *Destroys the diagram, freeing up its resources.\n *\n * @returns {void} Destroys the diagram, freeing up its resources.\n */\n Diagram.prototype.destroy = function () {\n clearInterval(this.renderTimer);\n this.renderTimer = null;\n if (this.hRuler && this.vRuler) {\n this.hRuler.destroy();\n this.vRuler.destroy();\n }\n this.tooltipObject.destroy();\n this.droppable.destroy();\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n this.removeUserHandlesTemplate();\n this.clearTemplate();\n if (document.getElementById(this.element.id)) {\n this.element.classList.remove('e-diagram');\n var tooltipelement = document.getElementsByClassName('e-diagram-tooltip');\n while (tooltipelement.length > 0) {\n tooltipelement[0].parentNode.removeChild(tooltipelement[0]);\n }\n var content = document.getElementById(this.element.id + 'content');\n if (content) {\n this.element.removeChild(content);\n }\n var measureWindowElement = 'measureElement';\n if (window[\"\" + measureWindowElement]) {\n window[\"\" + measureWindowElement].usageCount -= 1;\n var measureElementCount = 'measureElementCount';\n window[\"\" + measureElementCount]--;\n if (window[\"\" + measureElementCount] === 0) {\n window[\"\" + measureWindowElement].parentNode.removeChild(window[\"\" + measureWindowElement]);\n window[\"\" + measureWindowElement] = null;\n }\n }\n }\n var domTable = 'domTable';\n window[\"\" + domTable] = {};\n for (var i = 0; i < this.layers.length; i++) {\n var currentLayer = this.layers[parseInt(i.toString(), 10)];\n currentLayer.zIndexTable = {};\n }\n this.diagramActions = undefined;\n };\n //Wires the mouse events with diagram control\n Diagram.prototype.wireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var stopEvent = Browser.touchEndEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var isIE11Pointer = Browser.isPointer;\n var wheelEvent = Browser.info.name === 'mozilla' ?\n (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n EventHandler.add(this.diagramCanvas, startEvent, this.eventHandler.mouseDown, this.eventHandler);\n EventHandler.add(this.diagramCanvas, moveEvent, this.eventHandler.mouseMove, this.eventHandler);\n EventHandler.add(this.diagramCanvas, stopEvent, this.eventHandler.mouseUp, this.eventHandler);\n EventHandler.add(this.diagramCanvas, cancelEvent, this.eventHandler.mouseLeave, this.eventHandler);\n EventHandler.add(this.diagramCanvas, 'keydown', this.eventHandler.keyDown, this.eventHandler);\n EventHandler.add(this.diagramCanvas, 'keyup', this.eventHandler.keyUp, this.eventHandler);\n EventHandler.add(this.diagramCanvas, 'dblclick', this.eventHandler.doubleClick, this.eventHandler);\n EventHandler.add(this.diagramCanvas, 'scroll', this.eventHandler.scrolled, this.eventHandler);\n EventHandler.add(this.diagramCanvas, wheelEvent, this.eventHandler.mouseWheel, this.eventHandler);\n EventHandler.add(window, 'resize', this.eventHandler.windowResize, this.eventHandler);\n this.initDroppables();\n };\n //Unwires the mouse events from diagram control\n Diagram.prototype.unWireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var isIE11Pointer = Browser.isPointer;\n var wheelEvent = Browser.info.name === 'mozilla' ?\n (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n var stopEvent = Browser.touchEndEvent;\n EventHandler.remove(this.diagramCanvas, startEvent, this.eventHandler.mouseDown);\n EventHandler.remove(this.diagramCanvas, moveEvent, this.eventHandler.mouseMove);\n EventHandler.remove(this.diagramCanvas, stopEvent, this.eventHandler.mouseUp);\n EventHandler.remove(this.diagramCanvas, cancelEvent, this.eventHandler.mouseLeave);\n EventHandler.remove(this.diagramCanvas, 'keydown', this.eventHandler.keyDown);\n EventHandler.remove(this.diagramCanvas, 'keyup', this.eventHandler.keyUp);\n EventHandler.remove(this.diagramCanvas, 'dblclick', this.eventHandler.doubleClick);\n EventHandler.remove(this.diagramCanvas, 'scroll', this.eventHandler.scrolled);\n EventHandler.remove(this.diagramCanvas, wheelEvent, this.eventHandler.mouseWheel);\n EventHandler.remove(window, 'resize', this.eventHandler.windowResize);\n };\n //public methods - start region\n /**\n * Select a specified collection of nodes and connectors in the diagram. You can specify whether to clear the existing selection and provide an old value if needed. \\\n *\n * @returns { void } Select a specified collection of nodes and connectors in the diagram. You can specify whether to clear the existing selection and provide an old value if needed.\\\n * @param {NodeModel | ConnectorModel} objects - An array containing the collection of nodes and connectors to be selected.\n * @param {boolean} multipleSelection - Determines whether the existing selection should be cleared (default is false).\n * @param {NodeModel | ConnectorModel} oldValue - Defines the old value\n *\n */\n Diagram.prototype.select = function (objects, multipleSelection, oldValue) {\n //Removed isBlazor code.\n if (objects != null) {\n this.commandHandler.selectObjects(objects, multipleSelection, oldValue);\n }\n };\n /**\n * Returns the diagram action as a string representation.\n * @returns { string }\n * @param { DiagramAction } diagramAction - The diagram action to be converted to a string.\n */\n //Feature (EJ2-18451) : For all client side events, cause argument data type should be string instead of flag enum and value should be easier to understand.\n Diagram.prototype.getDiagramAction = function (diagramAction) {\n var action;\n if (diagramAction === 2 && DiagramAction.Render) {\n action = 'Render';\n }\n else if (diagramAction & DiagramAction.UndoRedo) {\n action = 'UndoRedo';\n }\n else if (diagramAction & DiagramAction.PublicMethod) {\n action = 'PublicMethod';\n }\n else if (diagramAction & DiagramAction.ToolAction) {\n action = 'ToolAction';\n }\n else if (diagramAction & DiagramAction.TextEdit) {\n action = 'TextEdit';\n }\n else if (diagramAction & DiagramAction.Group) {\n action = 'Group';\n }\n else if (diagramAction & DiagramAction.Interactions) {\n action = 'Interactions';\n }\n else if (diagramAction & DiagramAction.PreventHistory) {\n action = 'PreventHistory';\n }\n else if (diagramAction & DiagramAction.DecoratorPropertyChange) {\n action = 'DecoratorPropertyChange';\n }\n else if (diagramAction & DiagramAction.PreventZIndexOnDragging) {\n action = 'PreventZIndexOnDragging';\n }\n else if (diagramAction & DiagramAction.isGroupDragging) {\n action = 'isGroupDragging';\n }\n else if (diagramAction & DiagramAction.DragUsingMouse) {\n action = 'DragUsingMouse';\n }\n return action;\n };\n /**\n * Select all objects, including nodes and connectors, in the diagram. \\\n *\n * @returns { void } Select all objects, including nodes and connectors, in the diagram.\\\n *\n */\n Diagram.prototype.selectAll = function () {\n var selectedItems = [];\n selectedItems = this.getObjectsOfLayer(this.activeLayer.objects);\n this.select(selectedItems);\n };\n /**\n * Remove a specific object from the current selection in the diagram. \\\n *\n * @returns { void } Remove a specific object from the current selection in the diagram.\\\n * @param {NodeModel | ConnectorModel} obj - The object to remove from the selection.\n *\n */\n Diagram.prototype.unSelect = function (obj) {\n //Removed isBlazor code.\n if (obj && isSelected(this, obj)) {\n this.commandHandler.unSelect(obj);\n // this.commandHandler.updateBlazorSelector();\n }\n };\n /**\n * Removes all elements from the selection list, clearing the current selection.\\\n *\n * @returns { void } Removes all elements from the selection list, clearing the current selection.\\\n *\n */\n Diagram.prototype.clearSelection = function () {\n this.commandHandler.clearSelection(true);\n };\n /**\n * Updates the dimensions of the diagram viewport. \\\n *\n * @returns { void } Updates the dimensions of the diagram viewport.\\\n *\n */\n Diagram.prototype.updateViewPort = function () {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n this.eventHandler.updateViewPortSize(this.element);\n this.updateBlazorDiagramProperties(attribute, true);\n };\n Diagram.prototype.cutCommand = function () {\n this.cut();\n };\n /**\n * Removes the selected nodes and connectors from the diagram and moves them to the diagram clipboard for cutting. \\\n *\n * @returns { void } Removes the selected nodes and connectors from the diagram and moves them to the diagram clipboard for cutting. \\\n *\n */\n Diagram.prototype.cut = function () {\n this.commandHandler.cut();\n };\n /**\n * Adds a process into the sub-process. \\\n *\n * @returns { void } Adds a process into the sub-process. \\\n * @param {NodeModel | ConnectorModel} process - A NodeModel representing the process to be added.\n * @param {boolean} parentId - A string representing the parent ID where the process will be added.\n *\n */\n Diagram.prototype.addProcess = function (process, parentId) {\n if (this.bpmnModule) {\n this.bpmnModule.addProcess(process, parentId, this);\n }\n };\n /**\n * Removes a process from the BPMN sub-process. \\\n *\n * @returns { void } Removes a process from the BPMN sub-process.\\\n * @param {string} id - The ID of the process to be removed.\n *\n */\n Diagram.prototype.removeProcess = function (id) {\n if (this.bpmnModule) {\n this.bpmnModule.removeProcess(id, this);\n }\n };\n Diagram.prototype.pasteCommand = function () {\n this.paste();\n };\n /**\n * Adds the given objects or the objects in the diagram clipboard to the diagram control. \\\n *\n * @returns { void } Adds the given objects or the objects in the diagram clipboard to the diagram control. \\\n * @param {NodeModel[] | ConnectorModel[]} obj - An array of nodes or connectors objects to be added to diagram.\n * @deprecated\n *\n */\n Diagram.prototype.paste = function (obj) {\n this.commandHandler.paste(obj);\n };\n /**\n * Fits the diagram to the page with respect to mode and region. \\\n *\n * @returns { void } Fits the diagram to the page with respect to mode and region.\\\n * @param {IFitOptions} options - specify the options for fitting the diagram to the page.\n */\n Diagram.prototype.fitToPage = function (options) {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n this.scroller.fitToPage(options);\n this.updateBlazorDiagramProperties(attribute, true);\n };\n /**\n * Brings the specified bounds into view within the diagram's viewport. \\\n *\n * @returns { void } Brings the specified bounds into view within the diagram's viewport.\\\n * @param {Rect} bound - Representing the bounds to be brought into view.\n *\n */\n Diagram.prototype.bringIntoView = function (bound) {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n // EJ2-69238 - add true as an extra parameter to calcuate the horizontal and vertical offset\n this.scroller.bringIntoView(bound, true);\n this.updateBlazorDiagramProperties(attribute, true);\n };\n /**\n * Brings the specified bounds to the center of the viewport. \\\n *\n * @returns { void } Brings the specified bounds to the center of the viewport.\\\n * @param {Rect} bound - representing the bounds to be centered in the viewport.\n *\n */\n Diagram.prototype.bringToCenter = function (bound) {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n this.scroller.bringToCenter(bound);\n this.updateBlazorDiagramProperties(attribute, true);\n };\n Diagram.prototype.copyCommand = function () {\n this.copy();\n };\n /**\n * Copies the selected nodes and connectors from the diagram to the diagram clipboard for copying. \\\n *\n * @returns { Object } Copies the selected nodes and connectors from the diagram to the diagram clipboard for copying.\\\n *\n */\n Diagram.prototype.copy = function () {\n var obj = this.commandHandler.copy();\n return obj;\n };\n /**\n * Groups the selected nodes and connectors in the diagram. \\\n *\n * @returns { void } Groups the selected nodes and connectors in the diagram.\\\n *\n */\n Diagram.prototype.group = function () {\n var selectedItems = [];\n selectedItems = this.selectedItems.nodes;\n selectedItems = selectedItems.concat(this.selectedItems.connectors);\n if (selectedItems.length > 1) {\n this.callBlazorModel = false;\n this.insertBlazorDiagramObjects(this.selectedItems);\n this.commandHandler.group();\n this.callBlazorModel = true;\n this.commandHandler.getBlazorOldValues();\n }\n };\n /**\n * UnGroup the selected nodes and connectors in diagram \\\n *\n * @returns { void } UnGroup the selected nodes and connectors in diagram.\\\n *\n */\n Diagram.prototype.unGroup = function () {\n this.callBlazorModel = false;\n this.insertBlazorDiagramObjects(this.selectedItems);\n this.commandHandler.unGroup();\n this.callBlazorModel = true;\n this.commandHandler.getBlazorOldValues();\n };\n /**\n * Use this method to move the currently selected nodes or connectors to the back of the drawing order. This effectively places them behind other elements in the diagram. \\\n *\n * @returns { void } Use this method to move the currently selected nodes or connectors to the back of the drawing order. This effectively places them behind other elements in the diagram.\\\n *\n */\n Diagram.prototype.sendToBack = function () {\n this.commandHandler.sendToBack();\n };\n /**\n * Specify which layer in the diagram should be considered the active layer. The active layer is the one where new elements will be added and where user interactions are primarily focused. \\\n *\n * @returns { void } Specify which layer in the diagram should be considered the active layer. The active layer is the one where new elements will be added and where user interactions are primarily focused. \\\n * @param {string} layerName - The name of the layer to set as the active layer.\n *\n */\n Diagram.prototype.setActiveLayer = function (layerName) {\n var layer = this.commandHandler.getLayer(layerName);\n this.activeLayer = layer;\n };\n /**\n * add the layer into diagram\\\n *\n * @returns { void } Adds the specified layer to the diagram control along with its associated objects.\\\n * @param {LayerModel} layer - representing the layer to be added to the diagram.\n * @param {Object[]} layerObject - An optional array of objects associated with the layer.\n * @blazorArgsType layer|DiagramLayer\n * @deprecated\n *\n */\n Diagram.prototype.addLayer = function (layer, layerObject) {\n this.commandHandler.addLayer(layer, layerObject);\n };\n /**\n * remove the layer from diagram \\\n *\n * @returns { void } remove the layer from diagram.\\\n * @param {string} layerId - provide the bound value.\n * @deprecated\n *\n */\n Diagram.prototype.removeLayer = function (layerId) {\n this.commandHandler.removeLayer(layerId, isBlazor());\n };\n // /* eslint-enable */\n /**\n *Moves objects from one layer to another layer within the diagram. \\\n *\n * @returns { void } Moves objects from one layer to another layer within the diagram. \\\n * @param {string[]} objects - An array of object IDs represented as strings to be moved.\n * @param {string} targetLayer - The ID of the target layer to which the objects should be moved.\n */\n Diagram.prototype.moveObjects = function (objects, targetLayer) {\n var oldValues = cloneObject(this.layers);\n this.enableServerDataBinding(false);\n this.commandHandler.moveObjects(objects, targetLayer);\n // const result: object = this.commandHandler.deepDiffer.map(oldValues, cloneObject(this.layers));\n // const diffValue: object = this.commandHandler.deepDiffer.frameObject({}, result);\n // this.oldDiagramObject = { layers: diffValue };\n // // this.commandHandler.updateBlazorProperties();\n };\n /* tslint:disable */\n Diagram.prototype.layerObjectUpdate = function () {\n //Removed isBlazor code.\n };\n /* tslint:enable */\n /**\n * Use this method to change the order of layers in the diagram. This moves the specified layer behind the layer that comes after it in the layer order. \\\n *\n * @returns { void } Use this method to change the order of layers in the diagram. This moves the specified layer behind the layer that comes after it in the layer order.\\\n * @param {string} layerName - The name of the layer to be moved.\n * @param {string} targetLayer - define the objects id of string array\n *\n */\n Diagram.prototype.sendLayerBackward = function (layerName) {\n this.layerObjectUpdate();\n this.commandHandler.sendLayerBackward(layerName);\n // comment blazor code\n // this.commandHandler.updateLayerObject(this.oldDiagramObject, true);\n };\n /**\n * Moves the specified layer forward in the drawing order. \\\n *\n * @returns { void } Moves the specified layer forward in the drawing order.\\\n * @param {string} layerName - A string representing the name of the layer to be moved forward.\n *\n */\n Diagram.prototype.bringLayerForward = function (layerName) {\n this.layerObjectUpdate();\n this.commandHandler.bringLayerForward(layerName);\n // comment blazor code\n // this.commandHandler.updateLayerObject(this.oldDiagramObject);\n };\n /**\n * Clones a layer along with its objects.\\\n *\n * @returns { void } Clones a layer along with its objects.\\\n * @param {string} layerName - A string representing the name of the layer to be cloned.\n *\n */\n Diagram.prototype.cloneLayer = function (layerName) {\n this.commandHandler.cloneLayer(layerName);\n };\n /**\n *Brings the selected nodes or connectors to the front of the drawing order. \\\n *\n * @returns { void } Brings the selected nodes or connectors to the front of the drawing order. \\\n *\n */\n Diagram.prototype.bringToFront = function () {\n this.commandHandler.bringToFront();\n };\n /**\n *Sends the selected nodes or connectors forward in the visual order. \\\n *\n * @returns { void } Sends the selected nodes or connectors forward in the visual order. \\\n *\n */\n Diagram.prototype.moveForward = function () {\n this.commandHandler.sendForward();\n };\n /**\n *Sends the selected nodes or connectors one step backward in the z-order.\\\n *\n * @returns { void } Sends the selected nodes or connectors one step backward in the z-order.\\\n *\n */\n Diagram.prototype.sendBackward = function () {\n this.commandHandler.sendBackward();\n };\n /**\n *gets the node or connector having the given name \\\n *\n * @returns { void } gets the node or connector having the given name.\\\n * @param {string} name - define the name of the layer\n *\n */\n Diagram.prototype.getObject = function (name) {\n return this.nameTable[\"\" + name];\n };\n /**\n *Retrieves the node object for the given node ID. \\\n *\n * @returns { void } Retrieves the node object for the given node ID. \\\n * @param {string} id - The ID of the node for which the node object is to be retrieved.\n *\n */\n Diagram.prototype.getNodeObject = function (id) {\n return cloneObject(this.nameTable[\"\" + id]);\n };\n /**\n *Retrieves the connector object for the given node ID. \\\n *\n * @returns { void } Retrieves the connector object for the given node ID.\\\n * @param {string} id - The ID of the node for which the connector object is to be retrieved.\n *\n */\n Diagram.prototype.getConnectorObject = function (id) {\n return cloneObject(this.nameTable[\"\" + id]);\n };\n /**\n * Retrieves the active layer. \\\n *\n * @returns { void } Retrieves the active layer.\\\n *\n */\n Diagram.prototype.getActiveLayer = function () {\n return this.activeLayer;\n };\n Diagram.prototype.nudgeCommand = function (direction, x, y) {\n if (typeof direction !== 'object' && (this.selectedItems.nodes.length || this.selectedItems.connectors.length) > 0) {\n var type = void 0;\n if (x.type && x.type === 'KEYDOWN') {\n type = x.type;\n }\n this.nudge(direction, undefined, undefined, type);\n }\n };\n /**\n * Moves the selected objects towards the given direction by a specified distance.\n *\n * @returns { void } Moves the selected objects towards the given direction by a specified distance. \\\n * @param {NudgeDirection} direction - Defines the direction in which the objects should be moved.\n * @param {number} x - The horizontal distance by which the selected objects should be moved.\n * @param {number} y - The vertical distance by which the selected objects should be moved.\n * @param {string} type - A string that defines the type of nudge action.\n */\n Diagram.prototype.nudge = function (direction, x, y, type) {\n var tx = 0;\n var ty = 0;\n var negativeDirection;\n if (direction === 'Left' || direction === 'Right') {\n negativeDirection = (direction === 'Left');\n tx = (negativeDirection ? -1 : 1) * (x ? x : 1);\n }\n else {\n negativeDirection = (direction === 'Up');\n ty = (negativeDirection ? -1 : 1) * (y ? y : 1);\n }\n if (type === 'KEYDOWN') {\n tx *= 5;\n ty *= 5;\n }\n var obj = this.selectedItems;\n var annotation = this.selectedItems.wrapper.children[0];\n if (annotation instanceof TextElement) {\n this.commandHandler.labelDrag(obj.nodes[0], annotation, tx, ty);\n }\n else {\n var undoObject = cloneObject(this.selectedItems);\n this.protectPropertyChange(true);\n this.drag(obj, tx, ty);\n this.protectPropertyChange(false);\n var entry = {\n type: 'PositionChanged',\n redoObject: cloneObject(this.selectedItems), undoObject: undoObject, category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n this.refreshCanvasLayers();\n };\n Diagram.prototype.insertBlazorDiagramObjects = function (actualObject) {\n //Removed isBlazor code\n };\n /**\n * Drags the given object (nodes, connectors, or selector) by the specified horizontal and vertical distances.\n *\n * @returns { void } Drags the given object (nodes, connectors, or selector) by the specified horizontal and vertical distances.\\\n * @param {NodeModel | ConnectorModel | SelectorModel} obj - representing the nodes, connectors, or selector to be dragged.\n * @param {number} tx - A number representing the horizontal distance by which the given objects should be moved.\n * @param {number} ty - A number representing the vertical distance by which the given objects should be moved.\n */\n Diagram.prototype.drag = function (obj, tx, ty) {\n this.insertBlazorDiagramObjects(obj);\n //Removed isBlazor code\n if (this.bpmnModule && (obj instanceof Node)) {\n var updated = this.bpmnModule.updateAnnotationDrag(obj, this, tx, ty);\n if (updated) {\n return;\n }\n }\n if (obj instanceof Selector) {\n this.preventConnectorsUpdate = true;\n if (obj.nodes && obj.nodes.length) {\n for (var _i = 0, _a = obj.nodes; _i < _a.length; _i++) {\n var node = _a[_i];\n this.callBlazorModel = false;\n this.drag(node, tx, ty);\n if (node.parentId) {\n var parent_1 = this.nameTable[node.parentId];\n if (parent_1.isLane) {\n var swimlane = this.nameTable[parent_1.parentId];\n updateLaneBoundsAfterAddChild(parent_1, swimlane, node, this);\n }\n }\n }\n this.callBlazorModel = true;\n }\n if (obj.connectors && obj.connectors.length) {\n this.callBlazorModel = false;\n for (var _b = 0, _c = obj.connectors; _b < _c.length; _b++) {\n var conn = _c[_b];\n this.drag(conn, tx, ty);\n if (this.selectionConnectorsList.indexOf(conn) === -1) {\n this.selectionConnectorsList.push(conn);\n }\n }\n this.callBlazorModel = true;\n }\n this.updateSelector();\n if ((this.diagramActions & DiagramAction.DragUsingMouse)) {\n this.updatePage();\n }\n }\n else {\n if (obj instanceof Node) {\n if (this.bpmnModule) {\n this.bpmnModule.updateAnnotationDrag(obj, this, tx, ty);\n }\n }\n this.commandHandler.drag(obj, tx, ty);\n }\n if (obj instanceof Selector) {\n this.preventConnectorsUpdate = false;\n for (var _d = 0, _e = this.selectionConnectorsList; _d < _e.length; _d++) {\n var connectors = _e[_d];\n this.updateConnectorProperties(this.nameTable[connectors.id]);\n if (connectors.shape.type === 'Bpmn' && connectors.shape.sequence === 'Default' && connectors.shape.flow === 'Sequence') {\n this.commandHandler.updatePathElementOffset(connectors);\n }\n }\n this.selectionConnectorsList = [];\n }\n // Bug 832880: Need to improve performance while nudging multiple nodes.\n // Removed one if condition here to improve performance.\n if (this.callBlazorModel && (!(this.blazorActions & BlazorAction.interaction)) &&\n (!(this.blazorActions & BlazorAction.GroupClipboardInProcess))) {\n this.commandHandler.getBlazorOldValues();\n }\n };\n Diagram.prototype.disableStackContainerPadding = function (wrapper, disable) {\n if (wrapper instanceof StackPanel) {\n wrapper.considerPadding = disable;\n }\n if (wrapper.children) {\n for (var _i = 0, _a = wrapper.children; _i < _a.length; _i++) {\n var child = _a[_i];\n this.disableStackContainerPadding(child, false);\n }\n }\n };\n /**\n * Use this method to scale one or more objects in the diagram by specifying the horizontal and vertical scaling ratios. You can also provide a pivot point as a reference for scaling.\n *\n * @returns { void } Use this method to scale one or more objects in the diagram by specifying the horizontal and vertical scaling ratios. You can also provide a pivot point as a reference for scaling.\\\n * @param {NodeModel | ConnectorModel | SelectorModel} obj - The objects to be resized.\n * @param {number} sx - The horizontal scaling ratio.\n * @param {number} sy - The vertical scaling ratio.\n * @param {PointModel} pivot - The reference point with respect to which the objects will be resized.\n */\n Diagram.prototype.scale = function (obj, sx, sy, pivot) {\n this.disableStackContainerPadding(obj.wrapper, false);\n this.insertBlazorDiagramObjects(obj);\n var checkBoundaryConstraints = true;\n if (obj.id) {\n obj = this.nameTable[obj.id] || obj;\n }\n if (obj instanceof Selector) {\n if (obj.nodes && obj.nodes.length) {\n this.callBlazorModel = false;\n for (var _i = 0, _a = obj.nodes; _i < _a.length; _i++) {\n var node = _a[_i];\n checkBoundaryConstraints = this.commandHandler.scale(node, sx, sy, pivot, obj);\n if (!this.commandHandler.checkBoundaryConstraints(undefined, undefined, obj.wrapper.bounds)) {\n this.commandHandler.scale(node, 1 / sx, 1 / sy, pivot, obj);\n }\n }\n this.callBlazorModel = true;\n }\n if (obj.connectors && obj.connectors.length) {\n this.callBlazorModel = false;\n for (var _b = 0, _c = obj.connectors; _b < _c.length; _b++) {\n var conn = _c[_b];\n this.commandHandler.scale(conn, sx, sy, pivot, obj);\n if (!this.commandHandler.checkBoundaryConstraints(undefined, undefined, obj.wrapper.bounds)) {\n this.commandHandler.scale(conn, 1 / sx, 1 / sy, pivot, obj);\n }\n }\n this.callBlazorModel = true;\n }\n var selector = this.selectedItems;\n if (!(selectionHasConnector(this, selector))) {\n this.updateSelector();\n }\n this.refreshCanvasLayers();\n }\n else {\n this.commandHandler.scale(obj, sx, sy, pivot, (obj.children ? obj : undefined));\n }\n if (this.callBlazorModel && (!(this.blazorActions & BlazorAction.interaction)) &&\n (!(this.blazorActions & BlazorAction.GroupClipboardInProcess))) {\n this.commandHandler.getBlazorOldValues();\n }\n this.disableStackContainerPadding(obj.wrapper, true);\n return checkBoundaryConstraints;\n };\n /**\n * Rotates the specified nodes, connectors, or selector by the given angle.\n *\n * @returns { void } Rotates the specified nodes, connectors, or selector by the given angle.\\\n * @param {NodeModel | ConnectorModel | SelectorModel} obj - The objects to be rotated\n * @param {number} angle - The angle by which the objects should be rotated (in degrees).\n * @param {PointModel} pivot - The reference point with respect to which the objects will be rotated.\n * @param {boolean} rotateUsingHandle - Whether to rotate using the handle.\n */\n Diagram.prototype.rotate = function (obj, angle, pivot, rotateUsingHandle) {\n // Bug 842506: After multiple group node rotations, the undo functionality is not working.\n // Added below condition to store the current obj to add it as undo element in rotation changed entry.\n var undoObject;\n var childTable = [];\n if (!rotateUsingHandle) {\n undoObject = cloneObject(obj);\n if (undoObject.nodes && undoObject.nodes.length > 0 && undoObject.nodes[0].children) {\n var elements = [];\n if (!this.fromUndo) {\n this.rotateUsingButton = true;\n }\n var nodes = this.commandHandler.getAllDescendants(undoObject.nodes[0], elements);\n for (var i = 0; i < nodes.length; i++) {\n var node = this.commandHandler.cloneChild(nodes[parseInt(i.toString(), 10)].id);\n childTable[nodes[parseInt(i.toString(), 10)].id] = cloneObject(node);\n }\n }\n if (angle < 0) {\n angle = (angle + 360) % 360;\n }\n }\n this.insertBlazorDiagramObjects(obj);\n var checkBoundaryConstraints;\n if (obj.id) {\n obj = this.nameTable[obj.id] || obj;\n }\n if (obj) {\n pivot = pivot || { x: obj.wrapper.offsetX, y: obj.wrapper.offsetY };\n if (obj instanceof Selector) {\n this.callBlazorModel = false;\n obj.rotateAngle += angle;\n obj.wrapper.rotateAngle += angle;\n var bounds = getBounds(obj.wrapper);\n checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, bounds);\n if (!checkBoundaryConstraints) {\n obj.rotateAngle -= angle;\n obj.wrapper.rotateAngle -= angle;\n return checkBoundaryConstraints;\n }\n var objects = [];\n objects = objects.concat(obj.nodes);\n objects = objects.concat(obj.connectors);\n this.commandHandler.rotateObjects(obj, objects, angle, pivot);\n this.callBlazorModel = true;\n }\n else {\n this.commandHandler.rotateObjects(obj, [obj], angle, pivot);\n }\n }\n if (this.callBlazorModel && (!(this.blazorActions & BlazorAction.interaction))) {\n this.commandHandler.getBlazorOldValues();\n }\n if (!rotateUsingHandle && !this.fromUndo) {\n // To add history entry for group node rotation.\n if (undoObject.nodes && undoObject.nodes.length > 0 && undoObject.nodes[0].children) {\n var entry = {\n type: 'RotationChanged', redoObject: cloneObject(obj), undoObject: cloneObject(undoObject), category: 'Internal',\n childTable: childTable\n };\n this.commandHandler.addHistoryEntry(entry);\n this.commandHandler.updateSelector();\n }\n }\n return checkBoundaryConstraints;\n };\n /**\n * Moves the source point of the given connector by the specified horizontal and vertical distances.\n *\n * @returns { void } Moves the source point of the given connector by the specified horizontal and vertical distances.\\\n * @param {ConnectorModel} obj - representing the connector whose source point needs to be moved.\n * @param {number} tx - A number representing the horizontal distance by which the source point should be moved.\n * @param {number} ty - A number representing the vertical distance by which the source point should be moved.\n */\n Diagram.prototype.dragSourceEnd = function (obj, tx, ty) {\n this.insertBlazorDiagramObjects(obj);\n this.commandHandler.dragSourceEnd(obj, tx, ty);\n if (this.callBlazorModel) {\n this.commandHandler.getBlazorOldValues();\n }\n };\n /**\n * Moves the target point of the given connector by the specified horizontal and vertical distances.\n *\n * @returns { void } Moves the target point of the given connector by the specified horizontal and vertical distances.\\\n * @param {ConnectorModel} obj - representing the connector whose target point needs to be moved.\n * @param {number} tx - A number representing the horizontal distance by which the target point should be moved.\n * @param {number} ty - A number representing the vertical distance by which the target point should be moved.\n */\n Diagram.prototype.dragTargetEnd = function (obj, tx, ty) {\n this.insertBlazorDiagramObjects(obj);\n this.commandHandler.dragTargetEnd(obj, tx, ty);\n if (this.callBlazorModel) {\n this.commandHandler.getBlazorOldValues();\n }\n };\n /**\n * Finds all the objects that are under the given mouse position based on specified criteria.\n *\n * @returns { void } Finds all the objects that are under the given mouse position based on specified criteria.\\\n * @param {PointModel} position - The PointModel that defines the position. The objects under this position will be found.\n * @param {IElement} source - Representing the source object. The objects under this source will be found.\n */\n Diagram.prototype.findObjectsUnderMouse = function (position, source) {\n return this.eventHandler.findObjectsUnderMouse(position, source);\n };\n /**\n * Finds the object that is under the given mouse position based on specified criteria.\n *\n * @returns { void } Finds the object that is under the given mouse position based on specified criteria. \\\n * @param {NodeModel[] | ConnectorModel[]}objects - A collection of NodeModel or ConnectorModel objects, from which the target object has to be found.\n * @param {Actions} action - Defines the action used to find the relevant object.\n * @param {boolean} inAction - A boolean indicating the active state of the action.\n */\n Diagram.prototype.findObjectUnderMouse = function (objects, action, inAction) {\n return this.eventHandler.findObjectUnderMouse(objects, action, inAction);\n };\n /**\n * Finds the object that is under the given active object (source) based on specified criteria.\n *\n * @returns { void } Finds the object that is under the given active object (source) based on specified criteria.\\\n * @param {NodeModel[] | ConnectorModel[]} objects - A collection of node or connector objects, from which the target object has to be found.\n * @param {Actions} action - defines the action used to find the relevant object.\n * @param {boolean} inAction - A boolean indicating the active state of the action.\n * @param {PointModel} position - The PointModel that defines the position\n * @param {IElement} source - Representing the source element.\n */\n Diagram.prototype.findTargetObjectUnderMouse = function (objects, action, inAction, position, source) {\n return this.eventHandler.findTargetUnderMouse(objects, action, inAction, position, source);\n };\n /**\n * Finds the child element of the given object at the given position based on specified criteria.\n *\n * @returns { void } Finds the child element of the given object at the given position based on specified criteria.\\\n * @param {IElement} obj - representing the object, the child element of which has to be found.\n * @param {PointModel} position - defines the position. The child element under this position will be found.\n * @param {Diagram} diagram - defines the diagram value.\n * @param {number} padding - A number representing the padding for the search area around the position.\n */\n Diagram.prototype.findElementUnderMouse = function (obj, position, diagram, padding) {\n return this.eventHandler.findElementUnderMouse(obj, position, diagram, padding);\n };\n /**\n * Defines the action to be done, when the mouse hovers the given element of the given object\n *\n * @returns { void } Defines the action to be done, when the mouse hovers the given element of the given object .\\\n * @param {NodeModel | ConnectorModel} obj - Defines the object under mouse\n * @param {DiagramElement} wrapper - Defines the target element of the object under mouse\n * @param {PointModel} position - Defines the current mouse position\n * @param { NodeModel | PointPortModel | ShapeAnnotationModel | PathAnnotationModel} target - Defines the target\n * @private\n */\n Diagram.prototype.findActionToBeDone = function (obj, wrapper, position, target) {\n return this.eventHandler.findActionToBeDone(obj, wrapper, position, target);\n };\n // Feature 826644: Support to add ports to the connector. Added below method to update connector port on property change.\n Diagram.prototype.updateConnectorPort = function (connector) {\n if (connector.ports.length) {\n var portContent = void 0;\n for (var _i = 0, _a = connector.ports; _i < _a.length; _i++) {\n var port = _a[_i];\n portContent = this.getWrapper(connector.wrapper, port.id);\n connector.initPortWrapper(port, connector.intermediatePoints, connector.wrapper.bounds, portContent);\n }\n }\n connector.wrapper.measure(new Size(connector.wrapper.width, connector.wrapper.height));\n connector.wrapper.arrange(connector.wrapper.desiredSize);\n };\n /**\n * Returns the tool that handles the given action.\n *\n * @returns { ToolBase } Returns the tool that handles the given action. \\\n * @param {string} action - A string that defines the action that is going to be performed.\n */\n Diagram.prototype.getTool = function (action) {\n var tool;\n var getCustomTool = getFunction(this.getCustomTool);\n if (getCustomTool) {\n tool = getCustomTool(action);\n if (tool) {\n return tool;\n }\n }\n return this.eventHandler.getTool(action);\n };\n /**\n * Defines the cursor that corresponds to the given action.\n *\n * @returns { string } Defines the cursor that corresponds to the given action. \\\n * @param {string} action - The action for which the cursor is defined.\n * @param {boolean} active - Indicates whether the action is active.\n */\n Diagram.prototype.getCursor = function (action, active) {\n var cursor;\n var getCustomCursor = getFunction(this.getCustomCursor);\n if (getCustomCursor) {\n cursor = getCustomCursor(action, active);\n if (cursor) {\n return cursor;\n }\n }\n if (this.customCursor.length) {\n for (var i = 0; i < this.customCursor.length; i++) {\n if (this.customCursor[parseInt(i.toString(), 10)].action === action) {\n return this.customCursor[parseInt(i.toString(), 10)].cursor;\n }\n }\n }\n return this.eventHandler.getCursor(action);\n };\n /**\n * Initializes the undo redo actions\n *\n * @returns { void } Initializes the undo redo actions \\\n * @private\n */\n Diagram.prototype.initHistory = function () {\n if (this.undoRedoModule) {\n this.undoRedoModule.initHistory(this);\n }\n };\n /**\n * Adds a history entry for a change in the diagram control to the track.\n *\n * @returns { void } Adds a history entry for a change in the diagram control to the track. \\\n * @param {HistoryEntry} entry - The history entry that describes a change in the diagram.\n * @param {string[]} sourceId - An optional array of source IDs associated with the change.\n */\n Diagram.prototype.addHistoryEntry = function (entry, sourceId) {\n if (this.undoRedoModule && (this.constraints & DiagramConstraints.UndoRedo)\n && (!this.currentSymbol || this.checkCurrentSymbol(this.currentSymbol, entry))) {\n if (entry.undoObject && entry.undoObject.id === 'helper') {\n return;\n }\n var added = this.undoRedoModule.addHistoryEntry(entry, this);\n if (entry.type !== 'StartGroup' && entry.type !== 'EndGroup' && added) {\n this.historyChangeTrigger(entry, 'CustomAction', sourceId);\n }\n }\n };\n Diagram.prototype.checkCurrentSymbol = function (currentSymbol, entry) {\n var check = false;\n if (entry.undoObject && entry.redoObject) {\n var undoObjects = entry.undoObject;\n var redoObject = entry.undoObject;\n if (redoObject.id && undoObjects.id && redoObject.id !== currentSymbol.id && undoObjects.id !== currentSymbol.id) {\n return check = true;\n }\n else {\n return check;\n }\n }\n return check;\n };\n /**\n * Adds the given custom change in the diagram control to the track\n *\n * @returns { void } Adds the given custom change in the diagram control to the track \\\n * @param {HistoryEntry} entry - Defines the entry/information about a change in diagram\n */\n Diagram.prototype.addCustomHistoryEntry = function (entry) {\n //Removed isBlazor code\n };\n /* eslint-disable */\n /** @private */\n Diagram.prototype.historyChangeTrigger = function (entry, action, sourceId) {\n var change = {};\n /* eslint-enable */\n var oldValue = 'oldValue';\n var newValue = 'newValue';\n var type = 'type';\n var source = [];\n if (entry.category === 'Internal') {\n if (entry && entry.redoObject && ((entry.redoObject.nodes) instanceof Array) &&\n ((entry.redoObject.connectors) instanceof Array)) {\n source = entry.redoObject.nodes.concat(entry.redoObject.connectors);\n }\n else {\n if (entry.redoObject) {\n source.push(entry.redoObject);\n }\n }\n change[\"\" + type] = entry.type;\n //Removed isBlazor code\n switch (entry.type) {\n case 'PositionChanged':\n change[\"\" + oldValue] = {\n offsetX: entry.undoObject.offsetX,\n offsetY: entry.undoObject.offsetY\n };\n change[\"\" + newValue] = {\n offsetX: entry.redoObject.offsetX,\n offsetY: entry.redoObject.offsetY\n };\n break;\n case 'RotationChanged':\n change[\"\" + oldValue] = { rotateAngle: entry.undoObject.rotateAngle };\n change[\"\" + newValue] = { rotateAngle: entry.redoObject.rotateAngle };\n break;\n case 'SizeChanged':\n change[\"\" + oldValue] = {\n offsetX: entry.undoObject.offsetX, offsetY: entry.undoObject.offsetY,\n width: entry.undoObject.width, height: entry.undoObject.height\n };\n change[\"\" + newValue] = {\n offsetX: entry.redoObject.offsetX, offsetY: entry.redoObject.offsetY,\n width: entry.redoObject.width, height: entry.redoObject.height\n };\n break;\n case 'CollectionChanged':\n change[entry.changeType] = source;\n break;\n case 'ConnectionChanged':\n change[\"\" + oldValue] = {\n offsetX: entry.undoObject.offsetX,\n offsetY: entry.undoObject.offsetY\n };\n change[\"\" + newValue] = {\n offsetX: entry.redoObject.offsetX,\n offsetY: entry.redoObject.offsetY\n };\n break;\n }\n /**Feature(EJ2-60228): Need to add Object ID in the history change event argument*/\n var nodeSourceId = [];\n var connectorSourceId = [];\n if (sourceId === undefined && entry.type === 'PropertyChanged') {\n for (var i = 0; i < Object.keys(entry.undoObject).length; i++) {\n if (Object.keys(entry.undoObject)[parseInt(i.toString(), 10)] === 'nodes') {\n for (var _i = 0, _a = Object.keys(entry.undoObject.nodes); _i < _a.length; _i++) {\n var key = _a[_i];\n var undoIndex = parseInt(key, 10);\n nodeSourceId.push(this.nodes[parseInt(undoIndex.toString(), 10)].id);\n }\n }\n }\n for (var i = 0; i < Object.keys(entry.undoObject).length; i++) {\n if (Object.keys(entry.undoObject)[parseInt(i.toString(), 10)] === 'connectors') {\n for (var _b = 0, _c = Object.keys(entry.undoObject.connectors); _b < _c.length; _b++) {\n var key = _c[_b];\n var undoIndex = parseInt(key, 10);\n connectorSourceId.push(this.connectors[parseInt(undoIndex.toString(), 10)].id);\n }\n }\n }\n sourceId = nodeSourceId.concat(connectorSourceId);\n }\n var arg = {\n cause: entry.category, source: cloneBlazorObject(source), change: cloneBlazorObject(change),\n action: action, sourceId: sourceId\n };\n //Removed isBlazor code\n if (source.length) {\n this.triggerEvent(DiagramEvent.historyChange, arg);\n }\n }\n };\n /**\n * Use this method to start a group action, allowing multiple actions to be treated as a single unit during undo/redo operations. This is useful when you want to group related actions together.\n *\n * @returns { void } Use this method to start a group action, allowing multiple actions to be treated as a single unit during undo/redo operations. This is useful when you want to group related actions together. \\\n */\n Diagram.prototype.startGroupAction = function () {\n var entry = { type: 'StartGroup', category: 'Internal' };\n if (!(this.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n };\n /**\n * Closes the grouping of actions that will be undone/restored as a whole.\n *\n * @returns { void } Closes the grouping of actions that will be undone/restored as a whole.\\\n */\n Diagram.prototype.endGroupAction = function () {\n var entry = { type: 'EndGroup', category: 'Internal' };\n if (!(this.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n };\n /**\n * Restores the last action that was performed.\n *\n * @returns { void } Restores the last action that was performed. \\\n */\n Diagram.prototype.undo = function () {\n this.canEnableBlazorObject = true;\n this.callBlazorModel = false;\n if (this.undoRedoModule && (this.constraints & DiagramConstraints.UndoRedo)) {\n this.undoRedoModule.undo(this);\n }\n else if (this.constraints & DiagramConstraints.UndoRedo) {\n console.warn('[WARNING] :: Module \"UndoRedo\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n this.commandHandler.getBlazorOldValues();\n this.callBlazorModel = true;\n this.canEnableBlazorObject = false;\n };\n /**\n * Reverse an undo action, essentially restoring the state of the component to a previous state after an undo operation has been performed.\n *\n * @returns { void } Reverse an undo action, essentially restoring the state of the component to a previous state after an undo operation has been performed.\\\n */\n Diagram.prototype.redo = function () {\n this.canEnableBlazorObject = true;\n this.callBlazorModel = false;\n if (this.undoRedoModule && (this.constraints & DiagramConstraints.UndoRedo)) {\n this.undoRedoModule.redo(this);\n }\n else if (this.constraints & DiagramConstraints.UndoRedo) {\n console.warn('[WARNING] :: Module \"UndoRedo\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n this.commandHandler.getBlazorOldValues();\n this.callBlazorModel = true;\n this.canEnableBlazorObject = false;\n };\n Diagram.prototype.getBlazorDiagramObjects = function (objects) {\n if (objects) {\n for (var j = 0; j < objects.length; j++) {\n this.insertBlazorDiagramObjects(objects[parseInt(j.toString(), 10)]);\n }\n }\n else {\n this.insertBlazorDiagramObjects(this.selectedItems);\n }\n this.callBlazorModel = false;\n this.canEnableBlazorObject = true;\n };\n /**\n * Aligns a group of objects with reference to the first object in the group.\n *\n * @returns { void } Aligns a group of objects with reference to the first object in the group.\\\n * @param {AlignmentOptions}option - Defining the factor by which the objects have to be aligned.\n * @param {NodeModel[] | ConnectorModel[]} objects - A collection of node or connector objects to be aligned.\n * @param {AlignmentMode} type - Defines the type to be aligned\n */\n Diagram.prototype.align = function (option, objects, type) {\n this.getBlazorDiagramObjects(objects);\n if (!objects) {\n objects = [];\n objects = objects.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n this.commandHandler.align(objects, option, (type ? type : 'Object'));\n this.commandHandler.getBlazorOldValues();\n this.callBlazorModel = true;\n this.canEnableBlazorObject = false;\n };\n /**\n * Arranges a group of objects with equal intervals within the group.\n *\n * @returns { void } Arranges a group of objects with equal intervals within the group.\\\n * @param {NodeModel[] | ConnectorModel[]} option - Objects that have to be equally spaced within the group.\n * @param {DistributeOptions} objects - Object defining the factor to distribute the shapes.\n */\n Diagram.prototype.distribute = function (option, objects) {\n this.getBlazorDiagramObjects(objects);\n if (!objects) {\n objects = [];\n objects = objects.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n this.commandHandler.distribute(objects, option);\n this.commandHandler.getBlazorOldValues();\n this.canEnableBlazorObject = false;\n this.callBlazorModel = true;\n };\n /**\n * Scales the specified objects to match the size of the first object in the group.\n *\n * @returns { void } Scales the specified objects to match the size of the first object in the group.\\\n * @param {SizingOptions} option - Specifies whether the objects should be horizontally scaled, vertically scaled, or both.\n * @param {NodeModel[] | ConnectorModel[]}objects - The collection of objects to be scaled.\n */\n Diagram.prototype.sameSize = function (option, objects) {\n this.getBlazorDiagramObjects(objects);\n if (!objects) {\n objects = [];\n objects = objects.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n this.commandHandler.sameSize(objects, option);\n this.commandHandler.getBlazorOldValues();\n this.canEnableBlazorObject = false;\n this.callBlazorModel = true;\n };\n Diagram.prototype.updateBlazorDiagramProperties = function (attribute, canCall) {\n };\n Diagram.prototype.getZoomingAttribute = function () {\n var attribute = [];\n attribute.push('scrollSettings');\n attribute.push('snapSettings');\n return attribute;\n };\n /**\n * Scales the diagram control based on the provided zoom factor. You can optionally specify a focused point around which the diagram will be zoomed.\n *\n * @returns { void } Scales the diagram control based on the provided zoom factor. You can optionally specify a focused point around which the diagram will be zoomed.\\\n * @param {number} factor - Defines the factor by which the diagram is zoomed.\n * @param {PointModel} focusedPoint - Defines the point with respect to which the diagram will be zoomed.\n */\n Diagram.prototype.zoom = function (factor, focusedPoint) {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n this.scroller.zoom(factor, 0, 0, focusedPoint);\n if (!(this.blazorActions & BlazorAction.interaction)) {\n this.updateBlazorDiagramProperties(attribute, true);\n }\n };\n /**\n * Scales the diagram control based on the provided options, which include the desired zoom factor, focus point, and zoom type.\n *\n * @returns { void } Scales the diagram control based on the provided options, which include the desired zoom factor, focus point, and zoom type.\\\n * @param {ZoomOptions} options - An object specifying the zoom factor, focus point, and zoom type.\n *\n */\n Diagram.prototype.zoomTo = function (options) {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n var factor = options.zoomFactor ? options.zoomFactor : 0.2;\n factor = options.type === 'ZoomOut' ? 1 / (1 + factor) : (1 + factor);\n this.scroller.zoom(factor, 0, 0, options.focusPoint);\n this.updateBlazorDiagramProperties(attribute, true);\n };\n /**\n * Pans the diagram control to the given horizontal and vertical offsets.\n *\n * @returns { void } Pans the diagram control to the given horizontal and vertical offsets.\\\n * @param {number} horizontalOffset - The horizontal distance to which the diagram should be scrolled.\n * @param {number} verticalOffset - The vertical distance to which the diagram should be scrolled.\n * @param {PointModel} focusedPoint - representing the focused point during panning.\n * @param {boolean} isInteractiveZoomPan - A boolean indicating whether the panning is interactive zoom pan.\n */\n Diagram.prototype.pan = function (horizontalOffset, verticalOffset, focusedPoint, isInteractiveZoomPan) {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n this.setCursor('grabbing');\n this.scroller.zoom(1, horizontalOffset, verticalOffset, focusedPoint, isInteractiveZoomPan);\n this.updateBlazorDiagramProperties(attribute, true);\n };\n /**\n * Resets the zoom and scroller offsets to their default values.\n *\n * @returns { void } Resets the zoom and scroller offsets to their default values.\\\n */\n Diagram.prototype.reset = function () {\n var attribute = this.getZoomingAttribute();\n this.updateBlazorDiagramProperties(attribute);\n this.scroller.zoom(1 / this.scroller.currentZoom, -this.scroller.horizontalOffset, -this.scroller.verticalOffset, { x: 0, y: 0 });\n this.updateBlazorDiagramProperties(attribute, true);\n };\n /**\n * Resets the segments of the connectors to their default state. This removes any custom segments and restores the connectors to their original configuration.\n *\n * @returns { void } Resets the segments of the connectors to their default state. This removes any custom segments and restores the connectors to their original configuration. \\\n */\n Diagram.prototype.resetSegments = function () {\n //Removed isBlazor code\n if (this.constraints & DiagramConstraints.LineRouting && this.lineRoutingModule) {\n this.lineRoutingModule.lineRouting(this);\n }\n else {\n this.protectPropertyChange(true);\n var connector = void 0;\n for (var i = 0; i < this.connectors.length; i++) {\n connector = this.connectors[parseInt(i.toString(), 10)];\n connector.segments = [];\n this.connectorPropertyChange(connector, {}, { segments: connector.segments });\n }\n this.protectPropertyChange(false);\n }\n //Removed isBlazor code\n };\n /**\n * setBlazorDiagramProps method\n *\n * @returns {void} setBlazorDiagramProps method .\\\n * @param {boolean} arg - provide the eventName value.\n * @private\n */\n Diagram.prototype.setBlazorDiagramProps = function (arg) {\n var attribute = this.getZoomingAttribute();\n if (arg) {\n this.updateBlazorDiagramProperties(attribute);\n }\n else {\n this.updateBlazorDiagramProperties(attribute, true);\n }\n };\n /**\n * getDirection method\n *\n * @returns { Promise } getDirection method .\\\n * @param {DiagramEvent} eventName - provide the eventName value.\n * @param {Object} args - provide the args value.\n * @private\n */\n Diagram.prototype.triggerEvent = function (eventName, args) {\n return __awaiter$2(this, void 0, void 0, function () {\n var eventArgs;\n return __generator$2(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (args) {\n this.updateEventValue(args);\n }\n return [4 /*yield*/, this.trigger(DiagramEvent[\"\" + eventName], args)];\n case 1:\n eventArgs = _a.sent();\n //Removed isBlazor code.\n return [2 /*return*/, eventArgs];\n }\n });\n });\n };\n Diagram.prototype.updateEventValue = function (args) {\n var element = args.element;\n if (args.element && element instanceof Selector && (element.nodes.length + element.connectors.length === 1)) {\n args.element = (element.nodes.length === 1) ? element.nodes[0] : element.connectors[0];\n }\n };\n /**\n * Adds the specified node to a lane within a swimlane.\n *\n * @returns { void } Adds the specified node to a lane within a swimlane. \\\n * @param {NodeModel} node - representing the node to be added to the lane.\n * @param {string} swimLane - A string representing the ID of the swimlane containing the lane.\n * @param {string} lane - A string representing the ID of the lane where the node will be added.\n * @deprecated\n */\n Diagram.prototype.addNodeToLane = function (node, swimLane, lane) {\n if (this.nameTable[\"\" + swimLane]) {\n var swimlaneNode = this.nameTable[\"\" + swimLane];\n this.protectPropertyChange(true);\n if (this.undoRedoModule) {\n this.historyManager.startGroupAction();\n }\n if (!this.nameTable[node.id]) {\n node.offsetX = swimlaneNode.wrapper.bounds.width + swimlaneNode.wrapper.bounds.x;\n node.offsetY = swimlaneNode.wrapper.bounds.height + swimlaneNode.wrapper.bounds.y;\n node = this.add(node);\n }\n node.parentId = '';\n if (!swimlaneNode.shape.phases.length) {\n var laneId = swimLane + lane + '0';\n if (this.nameTable[\"\" + laneId]) {\n addChildToContainer(this, this.nameTable[\"\" + laneId], node, undefined, true);\n updateLaneBoundsAfterAddChild(this.nameTable[\"\" + laneId], swimlaneNode, node, this);\n }\n }\n else {\n for (var i = 0; i < swimlaneNode.shape.phases.length; i++) {\n var laneId = swimLane + lane + i;\n if (this.nameTable[\"\" + laneId] && this.nameTable[\"\" + laneId].isLane) {\n var laneNode = this.nameTable[\"\" + laneId].wrapper.bounds;\n var focusPoint = {\n x: laneNode.x +\n (laneNode.x - swimlaneNode.wrapper.bounds.x + node.margin.left + (node.wrapper.bounds.width / 2)),\n y: laneNode.y + swimlaneNode.wrapper.bounds.y - node.margin.top\n };\n if (swimlaneNode.shape.orientation === 'Horizontal') {\n focusPoint.y = laneNode.y;\n }\n else {\n focusPoint.x = laneNode.x;\n var laneHeaderId = this.nameTable[\"\" + laneId].parentId +\n swimlaneNode.shape.lanes[0].id + '_0_header';\n focusPoint.y = laneNode.y +\n (swimlaneNode.wrapper.bounds.y - this.nameTable[\"\" + laneHeaderId].wrapper.bounds.height +\n node.margin.top + (node.wrapper.bounds.height / 2));\n }\n if ((laneId === swimLane + lane + (swimlaneNode.shape.phases.length - 1)) ||\n laneNode.containsPoint(focusPoint)) {\n addChildToContainer(this, this.nameTable[\"\" + laneId], node, undefined, true);\n updateLaneBoundsAfterAddChild(this.nameTable[\"\" + laneId], swimlaneNode, node, this);\n break;\n }\n }\n }\n }\n if (this.undoRedoModule) {\n this.historyManager.endGroupAction();\n }\n this.protectPropertyChange(false);\n }\n this.updateDiagramElementQuad();\n };\n /**\n * Displays a tooltip for the specified diagram object.\n *\n * @param {NodeModel | ConnectorModel} obj - The object for which the tooltip will be shown.\n */\n Diagram.prototype.showTooltip = function (obj) {\n if (obj && obj.id && !obj.wrapper) {\n obj = this.nameTable[obj.id];\n }\n var bounds = getBounds(obj.wrapper);\n var position = { x: 0, y: 0 };\n var content = obj.tooltip.content ?\n obj.tooltip.content : 'X:' + Math.round(bounds.x) + ' ' + 'Y:' + Math.round(bounds.y);\n if (obj && obj.tooltip.openOn === 'Custom') {\n if (obj instanceof Node) {\n position = { x: obj.offsetX + (obj.width / 2), y: obj.offsetY + (obj.height / 2) };\n }\n else {\n position = { x: obj.targetPoint.x, y: obj.targetPoint.x };\n }\n this.commandHandler.showTooltip(obj, position, content, 'SelectTool', true);\n }\n };\n /**\n * Hides the tooltip for the corresponding diagram object.\n *\n * @param {NodeModel | ConnectorModel} obj - The node or connector object for which the tooltip should be hidden.\n */\n Diagram.prototype.hideTooltip = function (obj) {\n if (obj && obj.tooltip.openOn === 'Custom') {\n this.tooltipObject.close();\n }\n };\n /**\n * Adds the specified node to the diagram control.\n *\n * @returns { Node } Adds the specified node to the diagram control.\\\n * @param {NodeModel} obj - representing the node to be added to the diagram.\n * @param {boolean} group - A boolean value indicating whether the node should be added to a group.\n * @blazorArgsType obj|DiagramNode\n */\n Diagram.prototype.addNode = function (obj, group) {\n return this.add(obj, group);\n };\n /**\n * Adds the specified diagram object to the specified group node.\n *\n * @returns { void } Adds the specified diagram object to the specified group node.\\\n * @param {NodeModel} group - The group node to which the diagram object will be added.\n * @param {string | NodeModel | ConnectorModel} child - The diagram object to be added to the group.\n * @blazorArgsType obj|DiagramNode\n */\n Diagram.prototype.addChildToGroup = function (group, child) {\n var severDataBind = this.allowServerDataBinding;\n this.enableServerDataBinding(false);\n var propChange = this.isProtectedOnChange;\n this.protectPropertyChange(true);\n group = this.getObject(group.id);\n //Removed isBlazor code\n var isHistoryAdded = (!(this.diagramActions & DiagramAction.UndoRedo) && !(this.diagramActions & DiagramAction.Group) &&\n !(this.diagramActions & DiagramAction.PreventHistory));\n if (isHistoryAdded) {\n this.startGroupAction();\n }\n var id = this.addChild(group, child);\n if (isHistoryAdded) {\n var childTable = {};\n childTable[\"\" + id] = cloneObject(this.getObject(id));\n var entry = {\n type: 'AddChildToGroupNode', changeType: 'Insert', undoObject: cloneObject(group),\n redoObject: cloneObject(group), category: 'Internal', objectId: id, childTable: childTable\n };\n this.addHistoryEntry(entry);\n this.endGroupAction();\n }\n //880811- Adding child to group node using addChildToGroup method is not working properly.\n var element = this.nameTable[child] ? this.nameTable[child] : child;\n var childElementToMove = document.getElementById(element.id + '_groupElement');\n var targetGroupElement = document.getElementById(group.id + '_groupElement');\n if (targetGroupElement && childElementToMove) {\n targetGroupElement.appendChild(childElementToMove);\n }\n this.protectPropertyChange(propChange);\n this.enableServerDataBinding(severDataBind);\n this.updateSelector();\n //Removed isBlazor code.\n };\n /**\n * Removes the specified diagram object from the specified group node.\n *\n * @returns { void } Removes the specified diagram object from the specified group node.\\\n * @param {NodeModel} group - The group node to which the diagram object will be removed.\n * @param {string | NodeModel | ConnectorModel} child - The diagram object to be removed from the group.\n */\n Diagram.prototype.removeChildFromGroup = function (group, child) {\n var severDataBind = this.allowServerDataBinding;\n this.enableServerDataBinding(false);\n var propChange = this.isProtectedOnChange;\n this.protectPropertyChange(true);\n group = this.getObject(group.id);\n var undoGroup = cloneObject(group);\n var isHistoryAdded = (!(this.diagramActions & DiagramAction.UndoRedo) && !(this.diagramActions & DiagramAction.Group) &&\n !(this.diagramActions & DiagramAction.PreventHistory));\n if (isHistoryAdded) {\n this.startGroupAction();\n }\n var id = this.removeChild(group, child);\n if (isHistoryAdded) {\n var childTable = {};\n childTable[\"\" + id] = cloneObject(this.getObject(id));\n var entry = {\n type: 'RemoveChildFromGroupNode', changeType: 'Remove', undoObject: cloneObject(undoGroup),\n redoObject: cloneObject(group), category: 'Internal', objectId: id, childTable: childTable\n };\n this.addHistoryEntry(entry);\n this.endGroupAction();\n }\n //880811 - diagram elements not updated properly while grouping nodes at runtime\n var element = this.nameTable[child] ? this.nameTable[child] : child;\n var elementZindex = element.zIndex;\n var layerNum = this.layers.indexOf(this.commandHandler.getObjectLayer(element.id));\n var insertBeforeObj = this.layers[parseInt(layerNum.toString(), 10)].objects[elementZindex + 1];\n var insertBeforeElement = document.getElementById(insertBeforeObj + '_groupElement');\n var childElementToMove = document.getElementById(element.id + '_groupElement');\n var targetGroupElement = document.getElementById(group.id + '_groupElement');\n if (targetGroupElement && childElementToMove) {\n if (insertBeforeObj && insertBeforeElement) {\n if (targetGroupElement.contains(insertBeforeElement)) {\n targetGroupElement.insertBefore(childElementToMove, insertBeforeElement);\n }\n else if (targetGroupElement.parentNode.contains(insertBeforeElement) && insertBeforeElement.parentElement\n === targetGroupElement.parentElement) {\n targetGroupElement.parentNode.insertBefore(childElementToMove, insertBeforeElement);\n }\n else {\n targetGroupElement.parentNode.appendChild(childElementToMove);\n }\n }\n else {\n targetGroupElement.parentNode.appendChild(childElementToMove);\n }\n }\n this.protectPropertyChange(propChange);\n this.enableServerDataBinding(severDataBind);\n this.updateSelector();\n };\n /**\n * Retrieves the history stack values for either undo or redo actions.\n *\n * @returns { void } Retrieves the history stack values for either undo or redo actions.\\\n * @param {boolean} isUndoStack - If `true`, retrieves the undo stack values; if `false`, retrieves the redo stack values.\n */\n Diagram.prototype.getHistoryStack = function (isUndoStack) {\n //let temp: HistoryEntry[];\n var historyEntry = [];\n var temp = isUndoStack ? this.historyManager.undoStack : this.historyManager.redoStack;\n if (this.historyManager.stackLimit !== undefined) {\n for (var i = temp.length - 1; i >= 0; i--) {\n historyEntry.push(temp[parseInt(i.toString(), 10)]);\n if (historyEntry.length > this.historyManager.stackLimit) {\n return historyEntry;\n }\n }\n }\n else {\n historyEntry = temp;\n }\n return historyEntry;\n };\n /* tslint:disable */\n /**\n * Returns the edges connected to the given node.\n *\n * @returns { string[] } Returns the edges connected to the given node. \\\n * @deprecated\n * @param {Object} args - An object containing information about the node for which edges are to be retrieved.\n */\n Diagram.prototype.getEdges = function (args) {\n return args['outEdge'] ? this.nameTable[args['id']].outEdges : this.nameTable[args['id']].inEdges;\n };\n /* tslint:enable */\n /**\n * Returns the parent id for the node\n *\n * @returns { string }Returns the parent id for the node .\\\n * @deprecated\n * @param {string} id - returns the parent id\n */\n Diagram.prototype.getParentId = function (id) {\n return this.nameTable[\"\" + id].parentId;\n };\n /**\n * Adds the given connector to diagram control\n * @returns { Connector } Adds the given connector to diagram control .\\\n *\n * @param {ConnectorModel} obj - Defines the connector that has to be added to diagram\n * @blazorArgsType obj|DiagramConnector\n */\n Diagram.prototype.addConnector = function (obj) {\n return this.add(obj);\n };\n /* eslint-disable */\n /** @private */\n Diagram.prototype.UpdateBlazorDiagramModelCollection = function (obj, copiedObject, multiSelectDelete, isBlazorGroupUpdate) {\n /* eslint-enable */\n //Removed isBlazor code\n };\n /**\n * UpdateBlazorDiagramModel method\n *\n * @returns { void } UpdateBlazorDiagramModel method .\\\n * @param {Node | Connector | ShapeAnnotation | PathAnnotation} obj - provide the obj value.\n * @param {string} objectType - provide the objectType value.\n * @param {number} removalIndex - provide the removalIndex value.\n * @param {number} annotationNodeIndex - provide the annotationNodeIndex value.\n *\n * @private\n */\n Diagram.prototype.UpdateBlazorDiagramModel = function (obj, objectType, removalIndex, annotationNodeIndex) {\n //Removed isBlazor code\n };\n // eslint-disable-next-line max-len\n Diagram.prototype.UpdateBlazorLabelOrPortObjects = function (obj, objectType, removalIndex, nodeIndex) {\n //Removed isBlazor code\n };\n /**\n * addBlazorDiagramObjects method\n *\n * @returns { void } addBlazorDiagramObjects method .\\\n *\n * @private\n */\n Diagram.prototype.addBlazorDiagramObjects = function () {\n //Removed isBlazor code\n };\n Diagram.prototype.removeNodeEdges = function (elementId, id, isOutEdges) {\n var node = this.nameTable[\"\" + elementId];\n var edges = isOutEdges ? node.outEdges : node.inEdges;\n if (edges.length > 0) {\n for (var i = 0; i < edges.length; i++) {\n if (edges[parseInt(i.toString(), 10)] === id) {\n edges.splice(i, 1);\n }\n }\n }\n };\n /**\n * insertBlazorConnector method\n *\n * @returns { void } insertBlazorConnector method .\\\n * @param {Connector} obj - provide the nodeId value.\n *\n * @private\n */\n Diagram.prototype.insertBlazorConnector = function (obj) {\n //Removed isBlazor code\n };\n /* tslint:disable */\n /**\n * Adds the provided object, which can be a node, group, or connector, onto the diagram canvas.\n *\n * @returns { Node | Connector } Adds the provided object, which can be a node, group, or connector, onto the diagram canvas.\\\n * @param {NodeModel | ConnectorModel} obj - Specifies the object to be added to the diagram.\n * @param {boolean} group - If a group object is passed, set it to true.\n */\n Diagram.prototype.add = function (obj, group) {\n var newObj;\n var propertyChangeValue = this.isProtectedOnChange;\n this.protectPropertyChange(true);\n var isTextAnnotationNode = false;\n if (obj) {\n obj = cloneObject(obj);\n var args = void 0;\n args = {\n element: obj, cause: this.diagramActions, diagramAction: this.getDiagramAction(this.diagramActions), state: 'Changing', type: 'Addition', cancel: false\n };\n if (this.parentObject) {\n args.parentId = this.parentObject.id;\n }\n //Removed isBlazor code\n if (obj.id !== 'helper' && !(this.diagramActions & DiagramAction.PreventCollectionChangeOnDragOver)) {\n this.triggerEvent(DiagramEvent.collectionChange, args);\n }\n if (args.cancel && this.drawingObject) {\n this.removeElements(args.element);\n this.tooltipObject.close();\n var sourceNodee = this.getObject(args.element.sourceID);\n var isOutEdgee = void 0;\n if (getObjectType(args.element) === Connector) {\n if (args.element.sourceID) {\n this.removeNodeEdges(args.element.sourceID, args.element.id, true);\n if (sourceNodee.ports.length > 0) {\n for (var i = 0; i < sourceNodee.ports.length; i++) {\n var port = sourceNodee.ports[parseInt(i.toString(), 10)];\n if (port.id === args.element.sourcePortID) {\n if (port.outEdges.length > 0) {\n isOutEdgee = false;\n }\n else {\n isOutEdgee = true;\n }\n }\n }\n this.removePortEdges(sourceNodee, args.element.sourcePortID, args.element.id, isOutEdgee);\n }\n }\n if (args.element.targetID) {\n this.removeNodeEdges(args.element.targetID, args.element.id, false);\n }\n }\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n obj.id = obj.id || randomId();\n var layers = this.activeLayer;\n // Bug 890792: Exception thrown when adding a node at runtime in the unit test case.\n // The issue arises only when the diagram is not appended to the DOM. In such cases, the diagram will not be rendered, and the activeLayer property is undefined.\n // Check if activeLayer is defined. If activeLayer is defined, then proceed with the operation.\n if (!args.cancel && layers && !layers.lock) {\n if (layers.objects.indexOf(obj.id) < 0 && !layers.lock) {\n if (!layers.visible) {\n layers.visible = true;\n this.dataBind();\n }\n layers.objects.push(obj.id);\n }\n if (getObjectType(obj) === Connector) {\n newObj = new Connector(this, 'connectors', obj, true);\n newObj.status = 'New';\n if (this.nameTable[newObj.targetID] && this.nameTable[newObj.targetID].shape.shape === 'TextAnnotation') {\n newObj.isBpmnAnnotationConnector = true;\n newObj.constraints = newObj.constraints & ~ConnectorConstraints.Delete;\n }\n updateDefaultValues(newObj, obj, this.connectorDefaults);\n this.connectors.push(newObj);\n this.initObject(newObj);\n //Removed isBlazor code\n if (obj.visible === false) {\n this.updateElementVisibility(newObj.wrapper, newObj, obj.visible);\n }\n this.updateEdges(newObj);\n this.insertBlazorConnector(newObj);\n }\n else {\n newObj = new Node(this, 'nodes', obj, true);\n updateDefaultValues(newObj, obj, this.nodeDefaults);\n newObj.parentId = (obj.parentId) ? obj.parentId : newObj.parentId;\n newObj.umlIndex = obj.umlIndex;\n newObj.status = 'New';\n isTextAnnotationNode = newObj.shape.shape === 'TextAnnotation';\n if (isTextAnnotationNode && !obj.isTextAnnotationCopied) {\n newObj.inEdges = obj.inEdges ? obj.inEdges : newObj.inEdges;\n }\n this.nodes.push(newObj);\n this.initObject(newObj, layers, undefined, group);\n if (isTextAnnotationNode) {\n if (this.bpmnModule) {\n for (var i = 0; i < this.bpmnModule.bpmnTextAnnotationConnector.length; i++) {\n if (this.bpmnModule.bpmnTextAnnotationConnector[parseInt(i.toString(), 10)].wrapper === null) {\n this.initConnectors(this.bpmnModule.bpmnTextAnnotationConnector[parseInt(i.toString(), 10)], undefined, true);\n }\n }\n }\n }\n //Removed isBlazor code\n this.updateTemplate();\n if (this.bpmnModule) {\n if (newObj.shape.activity && newObj.shape.activity.subProcess.processes &&\n newObj.shape.activity.subProcess.processes.length) {\n this.bpmnModule.updateDocks(newObj, this);\n }\n }\n if (this.lineRoutingModule && (this.constraints & DiagramConstraints.LineRouting)) {\n var objects = this.spatialSearch.findObjects(newObj.wrapper.outerBounds);\n for (var i = 0; i < objects.length; i++) {\n var object = objects[parseInt(i.toString(), 10)];\n if (object instanceof Connector) {\n this.connectorPropertyChange(object, {}, {\n sourceID: object.sourceID, targetID: object.targetID, sourcePortID: object.sourcePortID,\n targetPortID: object.targetPortID, sourcePoint: object.sourcePoint, targetPoint: object.targetPoint\n });\n }\n }\n }\n else if (this.constraints & DiagramConstraints.LineRouting) {\n console.warn('[WARNING] :: Module \"LineRouting\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n if (newObj.umlIndex > -1 && obj.parentId && this.nameTable[obj.parentId] &&\n this.nameTable[obj.parentId].shape.type === 'UmlClassifier') {\n var parent_2 = this.nameTable[obj.parentId];\n parent_2.children.splice(newObj.umlIndex, 0, newObj.id);\n parent_2.wrapper.children.splice(newObj.umlIndex, 0, newObj.wrapper);\n parent_2.wrapper.measure(new Size());\n parent_2.wrapper.arrange(parent_2.wrapper.desiredSize);\n this.updateDiagramObject(parent_2);\n }\n }\n args = {\n element: newObj, cause: this.diagramActions, diagramAction: this.getDiagramAction(this.diagramActions), state: 'Changed', type: 'Addition', cancel: false\n };\n if (this.parentObject) {\n args.parentId = this.parentObject.id;\n }\n //Removed isBlazor code\n if (obj.id !== 'helper' && !(this.diagramActions & DiagramAction.PreventCollectionChangeOnDragOver)) {\n this.triggerEvent(DiagramEvent.collectionChange, args);\n }\n if (!(this.diagramActions & DiagramAction.UndoRedo) && !(this.diagramActions & DiagramAction.Group) &&\n !(this.diagramActions & DiagramAction.PreventHistory)) {\n var entry = {\n type: 'CollectionChanged', changeType: 'Insert', undoObject: cloneObject(obj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n this.parentObject = undefined;\n if (this.mode === 'SVG') {\n this.updateSvgNodes(newObj);\n this.updateTextElementValue(newObj);\n this.updateDiagramObject(newObj);\n if (isTextAnnotationNode) {\n var con = this.nameTable[newObj.inEdges[0]];\n this.updateDiagramObject(con);\n }\n if (newObj.shape.activity && newObj.shape.activity.subProcess.processes &&\n newObj.shape.activity.subProcess.processes.length) {\n this.updateProcesses(newObj);\n }\n this.updateBridging();\n }\n }\n }\n this.protectPropertyChange(propertyChangeValue);\n this.resetDiagramActions(DiagramAction.PublicMethod);\n if (newObj && this.layers.length > 1) {\n this.moveNode(newObj);\n }\n // Bug 890792: Exception thrown when adding a node at runtime in the unit test case.\n // The issue arises only when the diagram is not appended to the DOM. In such cases, the diagram will not be rendered, and the views property is undefined.\n // Check if views is defined before iterating. If views is defined, then refresh the canvas for each view.\n if (this.views) {\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view = this.views[\"\" + temp];\n if (!(view instanceof Diagram)) {\n this.refreshCanvasDiagramLayer(view);\n }\n }\n }\n this.renderReactTemplates();\n return newObj;\n };\n /**\n * AddElements method allows us to add diagram elements such as nodes and connectors as a collection into the diagram canvas.\n * @returns {void} -AddElements method.\n * @param { NodeModel[] | ConnectorModel[]} obj -Specifies the colelction object to be added to the diagram.\n * @public method\n **/\n Diagram.prototype.addElements = function (obj) {\n for (var i = 0; i < obj.length; i++) {\n this.add(obj[parseInt(i.toString(), 10)]);\n }\n };\n /* tslint:enable */\n Diagram.prototype.updateSvgNodes = function (node) {\n if (node.children) {\n for (var _i = 0, _a = node.children; _i < _a.length; _i++) {\n var j = _a[_i];\n if (this.nameTable[\"\" + j] && this.nameTable[\"\" + j].parentId) {\n var child = getDiagramElement(j + '_groupElement', this.element.id);\n if (child) {\n child.parentNode.removeChild(child);\n }\n }\n }\n }\n };\n /**\n * updateProcesses method\n *\n * @returns { void } updateProcesses method .\\\n * @param {(Node | Connector)} node - provide the nodeId value.\n *\n * @private\n */\n Diagram.prototype.updateProcesses = function (node) {\n if (this.bpmnModule && node && node.shape && node.shape.activity &&\n node.shape.activity.subProcess.processes &&\n node.shape.activity.subProcess.processes.length) {\n var processes = node.shape.activity.subProcess.processes;\n this.moveSvgNode(node.id);\n for (var _i = 0, processes_1 = processes; _i < processes_1.length; _i++) {\n var j = processes_1[_i];\n this.moveSvgNode(j);\n var edges = [];\n edges = edges.concat(this.nameTable[\"\" + j].outEdges, this.nameTable[\"\" + j].inEdges);\n for (var i = edges.length - 1; i >= 0; i--) {\n this.moveSvgNode(edges[parseInt(i.toString(), 10)]);\n }\n }\n for (var _a = 0, processes_2 = processes; _a < processes_2.length; _a++) {\n var j = processes_2[_a];\n if (this.nameTable[\"\" + j].shape.activity.subProcess.processes &&\n this.nameTable[\"\" + j].shape.activity.subProcess.processes.length) {\n this.updateProcesses(this.nameTable[\"\" + j]);\n }\n }\n }\n else {\n this.moveSvgNode(node.id);\n }\n };\n /**\n * moveSvgNode method\n *\n * @returns { void } moveSvgNode method .\\\n * @param {string} nodeId - provide the nodeId value.\n *\n * @private\n */\n Diagram.prototype.moveSvgNode = function (nodeId) {\n var child = getDiagramElement(nodeId + '_groupElement', this.element.id);\n var parent = child.parentElement;\n child.parentNode.removeChild(child);\n parent.appendChild(child);\n };\n /**\n * Adds the given annotation to the specified node.\n *\n * @returns { void } Adds the given annotation to the specified node.\\\n * @param {BpmnAnnotationModel} annotation - Object representing the annotation to be added.\n * @param {NodeModel} node - object representing the node to which the annotation will be added.\n * @deprecated\n */\n Diagram.prototype.addTextAnnotation = function (annotation, node) {\n if (this.bpmnModule) {\n this.getBPMNTextAnnotation(node, this, annotation, true);\n }\n };\n //Splice the InEdge and OutEdge of the for the node with respect to corresponding connectors that is deleting\n Diagram.prototype.spliceConnectorEdges = function (connector, isSource) {\n //let node: Node;\n var edges = [];\n //let isInEdge: boolean;\n var node = isSource ? this.nameTable[connector.sourceID] : this.nameTable[connector.targetID];\n if (node) {\n edges = isSource ? node.outEdges : node.inEdges;\n for (var i = edges.length - 1; i >= 0; i--) {\n if (edges[parseInt(i.toString(), 10)] === connector.id) {\n edges.splice(i, 1);\n }\n }\n for (var j = 0; node.ports && j < node.ports.length; j++) {\n var isInEdge = isSource ? false : true;\n this.removePortEdges(node, node.ports[parseInt(j.toString(), 10)].id, connector.id, isInEdge);\n }\n }\n };\n /**\n * Remove the dependent connectors if the node is deleted\n * @returns { void } Remove the dependent connectors if the node is deleted .\\\n * @param {Node} obj - provide the node value.\n *\n * @private\n */\n Diagram.prototype.removeDependentConnector = function (obj) {\n if (obj) {\n var connector = void 0;\n var edges = [];\n edges = edges.concat(obj.outEdges, obj.inEdges);\n for (var i = edges.length - 1; i >= 0; i--) {\n connector = this.nameTable[edges[parseInt(i.toString(), 10)]];\n if (connector) {\n this.connectorTable[connector.id] = cloneObject(connector);\n //To check for text annotation connector and remove the dependent text annotation node.\n if (connector.isBpmnAnnotationConnector) {\n var targetNode = this.nameTable[connector.targetID];\n this.removeObjectsFromLayer(connector);\n var index = this.connectors.indexOf(connector);\n if (index !== -1) {\n this.connectors.splice(index, 1);\n }\n this.removeElements(connector);\n this.removeFromAQuad(connector);\n delete this.nameTable[connector.id];\n var sourceNode = this.nameTable[connector.sourceID];\n if (sourceNode) {\n var index_1 = sourceNode.outEdges.indexOf(connector.id);\n if (index_1 !== -1) {\n sourceNode.outEdges.splice(index_1, 1);\n }\n }\n if (obj.id !== connector.targetID) {\n this.remove(targetNode);\n }\n }\n else {\n this.remove(connector);\n }\n }\n }\n }\n };\n /**\n * Remove the dependent connectors if the node is deleted\n * @returns { void } Remove the dependent connectors if the node is deleted .\\\n * @param {(NodeModel | ConnectorModel)} obj - provide the node value.\n *\n * @private\n */\n Diagram.prototype.removeObjectsFromLayer = function (obj) {\n if (obj.children) {\n for (var i = 0; i < obj.children.length; i++) {\n var object = this.nameTable[obj.children[parseInt(i.toString(), 10)]];\n if (object) {\n this.removeObjectsFromLayer(object);\n }\n }\n }\n var layer = this.layers.indexOf(this.commandHandler.getObjectLayer(obj.id));\n var objects = this.layers[parseInt(layer.toString(), 10)].objects;\n var objIndex = objects.indexOf(obj.id);\n if (objIndex > -1) {\n if (isSelected(this, obj)) {\n this.unSelect(obj);\n }\n this.layers[parseInt(layer.toString(), 10)].objects.splice(objIndex, 1);\n delete this.layers[parseInt(layer.toString(), 10)].zIndexTable[this.nameTable[obj.id].zIndex];\n }\n };\n /**\n * removeElements method \\\n *\n * @returns { string } removeElements method .\\\n * @param {NodeModel | ConnectorModel} currentObj - provide the currentObj value.\n *\n * @private\n */\n Diagram.prototype.removeElements = function (currentObj) {\n if (this.mode === 'SVG' || (this.mode === 'Canvas' && currentObj.shape.type === 'Native')) {\n var removeElement_1 = getDiagramElement(currentObj.id + '_groupElement', this.element.id);\n var object = currentObj;\n if ((object).ports && (object).ports.length > 0) {\n for (var i = 0; i < (object).ports.length; i++) {\n var port = (object).ports[parseInt(i.toString(), 10)];\n var removePort = getDiagramElement(object.id + '_' + port.id + '_groupElement', this.element.id);\n if (removePort) {\n removePort.parentNode.removeChild(removePort);\n }\n }\n }\n if (removeElement_1) {\n removeElement_1.parentNode.removeChild(removeElement_1);\n }\n }\n this.refreshCanvasLayers();\n if (currentObj.wrapper) {\n var children = currentObj.wrapper.children;\n var element = void 0;\n if (children) {\n for (var i = 0; i < children.length; i++) {\n if (children[parseInt(i.toString(), 10)] instanceof DiagramNativeElement || ((children[parseInt(i.toString(), 10)].id) && (children[parseInt(i.toString(), 10)].id).indexOf('icon_content') > 0)) {\n if ((children[parseInt(i.toString(), 10)].id).indexOf('icon_content') > 0 && this.mode === 'SVG') {\n element = getDiagramElement(children[parseInt(i.toString(), 10)].id + '_shape_groupElement', this.element.id);\n if (element) {\n element.parentNode.removeChild(element);\n }\n element = getDiagramElement(children[parseInt(i.toString(), 10)].id + '_rect_groupElement', this.element.id);\n if (element) {\n element.parentNode.removeChild(element);\n }\n }\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(children[parseInt(i.toString(), 10)].id + '_groupElement', elementId);\n var nodeIndex = this.scroller.removeCollection.indexOf(currentObj.id);\n this.scroller.removeCollection.splice(nodeIndex, 1);\n }\n }\n else if (children[parseInt(i.toString(), 10)] instanceof DiagramHtmlElement) {\n for (var _b = 0, _c = this.views; _b < _c.length; _b++) {\n var elementId = _c[_b];\n removeElement(currentObj.id + '_html_element', elementId);\n removeElement(children[parseInt(i.toString(), 10)].id + '_html_element', elementId);\n //EJ2-63598 - Added below code to check whether platform is Angular or not.\n // If angular then we do not remove the node html element wrapper to retain the HTML element in it.\n var canUpdate = true;\n var parent_3 = this.nameTable[currentObj.parentId];\n //893691: HTML Template nodes are not visible after Zooming with Virtualisation\n if (((this.isAngular || this.isReact) || this.isVue) &&\n ((parent_3 && parent_3.isLane) || (this.constraints & DiagramConstraints.Virtualization))) {\n canUpdate = false;\n }\n if (canUpdate) {\n this.clearTemplate(['nodeTemplate' + '_' + currentObj.id]);\n if (children[parseInt(i.toString(), 10)].annotationId) {\n this.clearTemplate(['annotationTemplate' + '_' + currentObj.id +\n (children[parseInt(i.toString(), 10)].annotationId)]);\n }\n }\n }\n }\n removeGradient(children[parseInt(i.toString(), 10)].id);\n }\n }\n }\n };\n Diagram.prototype.removeCommand = function () {\n this.remove();\n };\n /**\n * Removes the specified object from the diagram.\n *\n * @param {NodeModel | ConnectorModel} obj - The node or connector object to be removed from the diagram.\n */\n /* tslint:disable */\n Diagram.prototype.remove = function (obj) {\n var selectedItems = [];\n selectedItems = selectedItems.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n var args;\n var groupAction = false;\n if (obj) {\n obj = this.nameTable[obj.id];\n this.insertBlazorConnector(obj);\n if (obj && (canDelete(obj) || (this.diagramActions & DiagramAction.Clear))) {\n args = {\n element: obj, cause: this.diagramActions, diagramAction: this.getDiagramAction(this.diagramActions),\n state: 'Changing', type: 'Removal', cancel: false\n };\n //Removed isBlazor code\n if (!(this.diagramActions & DiagramAction.Clear) && (obj.id !== 'helper')) {\n this.triggerEvent(DiagramEvent.collectionChange, args);\n }\n if (!args.cancel) {\n if (canDelete(obj)) {\n if (obj && obj.shape && obj.shape.type === 'SwimLane') {\n removeSwimLane(this, obj);\n }\n }\n if ((!(this.diagramActions & DiagramAction.UndoRedo)) && !(this.diagramActions & DiagramAction.PreventHistory) &&\n (obj instanceof Node || obj instanceof Connector)) {\n var entry = {\n type: 'CollectionChanged', changeType: 'Remove', undoObject: cloneObject(obj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n if (!(this.diagramActions & DiagramAction.Clear)) {\n if (obj.children && !obj.isLane && !obj.isPhase && obj.children.length > 0 && this.undoRedoModule && this.layout.type === 'None') {\n this.historyManager.startGroupAction();\n groupAction = true;\n }\n }\n //875087 - Restrict removing dependent connectors when moveing between layers\n if ((obj instanceof Node || obj instanceof Connector) && this.deleteDependentConnector) {\n this.removeDependentConnector(obj);\n }\n if (!obj.isLane && !obj.isPhase) {\n if (!(this.diagramActions & DiagramAction.Clear) && !this.isStackChild(obj)) {\n this.addHistoryEntry(entry);\n }\n }\n }\n if (obj.shape.shape === 'TextAnnotation') {\n this.removeDependentConnector(obj);\n }\n if (obj.children && !obj.isLane && !obj.isPhase &&\n (!(this.diagramActions & DiagramAction.UndoRedo) || !isBlazor())) {\n this.deleteGroup(obj);\n }\n if (obj.parentId) {\n this.deleteChild(obj, undefined, true);\n if (this.nameTable[obj.parentId] && this.nameTable[obj.parentId].shape.type === 'UmlClassifier') {\n this.updateDiagramObject(this.nameTable[obj.parentId]);\n this.updateConnectorEdges(this.nameTable[obj.parentId]);\n }\n }\n var index = void 0;\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n var currentObj = this.nameTable[obj.id];\n if (currentObj instanceof Node) {\n if (currentObj.shape.type === 'Bpmn' && this.bpmnModule) {\n this.bpmnModule.removeBpmnProcesses(currentObj, this);\n }\n if (currentObj.isLane || currentObj.isPhase || currentObj.shape.type === 'SwimLane') {\n var swimLaneNode = (currentObj.isLane || currentObj.isPhase) ?\n this.nameTable[currentObj.parentId] : this.nameTable[currentObj.id];\n var grid = swimLaneNode.wrapper.children[0];\n if (currentObj.isLane) {\n removeLane(this, currentObj, swimLaneNode);\n }\n else if (currentObj.isPhase) {\n removePhase(this, currentObj, swimLaneNode);\n }\n }\n index = this.nodes.indexOf(currentObj);\n // Removed isBlazor code\n if (index !== -1) {\n this.crudDeleteNodes.push(this.nameTable[currentObj.id]);\n this.nodes.splice(index, 1);\n this.updateNodeEdges(currentObj);\n }\n }\n else {\n index = this.connectors.indexOf(currentObj);\n //Removed isBlazor code\n if (index !== -1) {\n this.crudDeleteNodes.push(this.nameTable[currentObj.id]);\n this.connectors.splice(index, 1);\n }\n this.updateEdges(currentObj);\n this.spliceConnectorEdges(obj, true);\n this.spliceConnectorEdges(obj, false);\n }\n if ((!this.isServerUpdate) && !(this.blazorActions & BlazorAction.GroupClipboardInProcess)) {\n this.commandHandler.getBlazorOldValues();\n }\n if (groupAction) {\n this.historyManager.endGroupAction();\n }\n if (isSelected(this, currentObj)) {\n this.unSelect(currentObj);\n }\n if (!currentObj.isPhase) {\n this.removeObjectsFromLayer(obj);\n if (this.currentDrawingObject) {\n this.currentDrawingObject.wrapper = undefined;\n }\n delete this.nameTable[obj.id];\n if (selectedItems.length > 0 && selectedItems[0].id === currentObj.id && currentObj.parentId) {\n var parentnode = this.nameTable[currentObj.parentId];\n if (parentnode && parentnode.isLane && this.nameTable[parentnode.parentId].shape.type === 'SwimLane') {\n var swimLaneNode = this.nameTable[parentnode.parentId];\n removeLaneChildNode(this, swimLaneNode, parentnode, currentObj);\n }\n }\n this.removeElements(currentObj);\n this.updateBridging();\n if (this.mode !== 'SVG') {\n this.refreshDiagramLayer();\n }\n if (!(this.diagramActions & DiagramAction.Clear)) {\n this.removeFromAQuad(currentObj);\n args = {\n element: obj, cause: this.diagramActions, diagramAction: this.getDiagramAction(this.diagramActions),\n state: 'Changed', type: 'Removal', cancel: false\n };\n //Removed isBlazor code\n if (obj.id !== 'helper') {\n this.triggerEvent(DiagramEvent.collectionChange, args);\n }\n this.resetTool();\n }\n }\n }\n }\n }\n else if (selectedItems.length > 0) {\n if (this.undoRedoModule) {\n this.historyManager.startGroupAction();\n this.blazorActions |= BlazorAction.GroupingInProgress;\n groupAction = true;\n }\n //Removed isBlazor code\n for (var i = 0; i < selectedItems.length; i++) {\n var node = selectedItems[parseInt(i.toString(), 10)];\n var parent_4 = this.nameTable[node.parentId];\n if (this.nameTable[selectedItems[parseInt(i.toString(), 10)].id]) {\n //Removed isBlazor code\n // 912905: Multi-selecting and deleting swimlane objects causes the diagram to break\n if (parent_4 && parent_4.shape instanceof SwimLane && !node.isPhase) {\n if (node.isLane) {\n var parentHeader = parent_4.shape.header.id ? parent_4.shape.header.height : 0;\n if ((this.selectedItems.wrapper.bounds.x <= parent_4.wrapper.bounds.x &&\n this.selectedItems.wrapper.bounds.width >= parent_4.wrapper.bounds.width &&\n parent_4.shape.orientation === 'Horizontal') ||\n (this.selectedItems.wrapper.bounds.y <= parent_4.wrapper.bounds.y + parentHeader &&\n this.selectedItems.wrapper.bounds.height >= parent_4.wrapper.bounds.height - parentHeader &&\n parent_4.shape.orientation === 'Vertical')) {\n if (canDelete(parent_4) || parent_4.shape.lanes.length > 1) {\n this.remove(selectedItems[parseInt(i.toString(), 10)]);\n }\n }\n }\n }\n else {\n this.remove(selectedItems[parseInt(i.toString(), 10)]);\n }\n //Removed isBlazor code\n }\n }\n if (groupAction) {\n this.blazorActions &= ~BlazorAction.GroupingInProgress;\n this.isServerUpdate = true;\n this.commandHandler.getBlazorOldValues();\n this.UpdateBlazorDiagramModelCollection(undefined, undefined, undefined, true);\n this.historyManager.endGroupAction();\n this.isServerUpdate = false;\n }\n this.clearSelection();\n }\n if (!(obj && (canDelete(obj) || (this.diagramActions & DiagramAction.Clear)))) {\n if ((!(this.diagramActions & DiagramAction.UndoRedo)) && !(this.diagramActions & DiagramAction.PreventHistory) &&\n (obj instanceof Node || obj instanceof Connector)) {\n var entry = {\n type: 'ConnectionChanged', undoObject: cloneObject(obj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n if (!obj.isLane && !obj.isPhase) {\n if (!(this.diagramActions & DiagramAction.Clear) && !this.isStackChild(obj)) {\n this.addHistoryEntry(entry);\n }\n }\n }\n }\n this.tooltipObject.close();\n //Removed isBlazor code\n };\n /* tslint:enable */\n Diagram.prototype.isStackChild = function (obj) {\n var isstack;\n var parent = this.nameTable[obj.parentId];\n if (obj && obj.parentId && parent.container &&\n (parent.container.type === 'Stack' &&\n this.nameTable[obj.parentId].shape.type !== 'UmlClassifier')) {\n isstack = true;\n var redoElement = {\n sourceIndex: parent.wrapper.children.indexOf(obj.wrapper), source: obj,\n target: undefined, targetIndex: undefined\n };\n var entry = {\n type: 'StackChildPositionChanged', redoObject: {\n sourceIndex: undefined, source: obj,\n target: undefined, targetIndex: undefined\n },\n undoObject: redoElement,\n category: 'Internal'\n };\n if (!(this.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n }\n return isstack;\n };\n /** @private */\n Diagram.prototype.deleteChild = function (node, parentNode, allowChildInSwimlane) {\n var id;\n parentNode = parentNode ? this.nameTable[parentNode.id] : this.nameTable[node.parentId];\n if (typeof node === 'string') {\n id = node;\n }\n else {\n id = node.id;\n }\n if (parentNode && parentNode.children) {\n for (var i = 0; i < parentNode.children.length; i++) {\n if (parentNode.children[parseInt(i.toString(), 10)] === id) {\n parentNode.children.splice(i, 1);\n for (var j = 0; j < parentNode.wrapper.children.length; j++) {\n if (parentNode.wrapper.children[parseInt(j.toString(), 10)].id === id) {\n parentNode.wrapper.children.splice(j, 1);\n }\n }\n // Bug 841849: Swimlane child are not positioned properly and throw exception after deleting and then undoing.\n // Added below condition to skip the child deletion inside swimlane when we add phase at runtime and delete swimlane.\n if (!allowChildInSwimlane) {\n // EJ2-57179 - Below lines added to remove the childs to swimlane after Redo.\n var swimlaneNode = this.getObject(parentNode.parentId);\n if (swimlaneNode && swimlaneNode.shape instanceof SwimLane) {\n for (var h = 0; h < swimlaneNode.shape.lanes.length; h++) {\n var laneId = node.parentId.split(swimlaneNode.id);\n if (swimlaneNode.shape.lanes[parseInt(h.toString(), 10)].id\n === laneId[1].slice(0, -1)) {\n for (var y = 0; y < swimlaneNode.shape.lanes[parseInt(h.toString(), 10)].children.length; y++) {\n if (node.id ===\n swimlaneNode.shape.lanes[parseInt(h.toString(), 10)].children[parseInt(y.toString(), 10)].id) {\n swimlaneNode.shape.lanes[parseInt(h.toString(), 10)].children.splice(y, 1);\n break;\n }\n }\n }\n }\n }\n }\n }\n }\n parentNode.wrapper.measure(new Size());\n parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);\n }\n };\n /**\n * addChild method \\\n *\n * @returns { string } addChild method .\\\n * @param {NodeModel} node - provide the node value.\n * @param {string | NodeModel | ConnectorModel} child - provide the child value.\n * @param {number} index - provide the layoutOrientation value.\n *\n * @private\n */\n Diagram.prototype.addChild = function (node, child, index) {\n var id;\n var parentNode = this.nameTable[node.id];\n if (!parentNode.children) {\n parentNode.children = [];\n }\n if (parentNode.children) {\n if (typeof child === 'string') {\n if (this.nameTable[\"\" + child]) {\n id = child;\n }\n }\n else {\n id = child.id = child.id || randomId();\n this.add(child);\n }\n if (id && (!child.umlIndex || child.umlIndex === -1)) {\n var childNode = this.nameTable[\"\" + id];\n childNode.parentId = parentNode.id;\n if (parentNode.container && parentNode.container.type === 'Stack') {\n this.updateStackProperty(parentNode, childNode);\n }\n if (index) {\n parentNode.children.splice(index, 0, id);\n parentNode.wrapper.children.splice(index, 0, childNode.wrapper);\n }\n else {\n parentNode.children.push(id);\n parentNode.wrapper.children.push(childNode.wrapper);\n // SF-362880 - Below lines added for adding the childs to swimlane after Undo.\n var swimlane = this.getObject(node.parentId);\n var childAlreadyInCollection = false;\n if (swimlane && swimlane.shape instanceof SwimLane) {\n for (var h = 0; h < swimlane.shape.lanes.length; h++) {\n var laneId = childNode.parentId.split(node.parentId);\n if (swimlane.shape.lanes[parseInt(h.toString(), 10)].id === laneId[1].slice(0, -1)) {\n //Bug 876330: After performing cut operations followed by an undo, lanes and nodes in the swimlane are not rendered properly.\n // To avoid adding the child node multiple times in the collection.\n for (var i = 0; i < swimlane.shape.lanes[parseInt(h.toString(), 10)].children.length; i++) {\n if (swimlane.shape.lanes[parseInt(h.toString(), 10)].children[parseInt(i.toString(), 10)].id === childNode.id) {\n childAlreadyInCollection = true;\n break;\n }\n }\n if (!childAlreadyInCollection) {\n swimlane.shape.lanes[parseInt(h.toString(), 10)].children.push(childNode);\n }\n break;\n }\n }\n }\n }\n parentNode.wrapper.measure(new Size());\n parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);\n if (!parentNode.isLane) {\n this.nameTable[node.id].width = parentNode.wrapper.actualSize.width;\n this.nameTable[node.id].height = parentNode.wrapper.actualSize.height;\n this.nameTable[node.id].offsetX = parentNode.wrapper.offsetX;\n this.nameTable[node.id].offsetY = parentNode.wrapper.offsetY;\n }\n if (parentNode.container !== undefined) {\n childNode.offsetX = childNode.wrapper.offsetX;\n childNode.offsetY = childNode.wrapper.offsetY;\n }\n if (!parentNode.parentId ||\n (this.nameTable[parentNode.parentId] &&\n this.nameTable[parentNode.parentId].shape.type !== 'SwimLane')) {\n this.updateDiagramObject(parentNode);\n }\n }\n }\n return id;\n };\n /**\n * removeChild method \\\n *\n * @returns { string } removeChild method .\\\n * @param {NodeModel} node - provide the node value.\n * @param {string | NodeModel | ConnectorModel} child - provide the child value.\n *\n * @private\n */\n Diagram.prototype.removeChild = function (node, child) {\n var id;\n var parentNode = this.nameTable[node.id];\n if (!parentNode.children) {\n parentNode.children = [];\n }\n if (parentNode.children) {\n if (typeof child === 'string') {\n if (this.nameTable[\"\" + child]) {\n id = child;\n }\n }\n else {\n id = child.id = child.id || randomId();\n }\n if (id && (!child.umlIndex || child.umlIndex === -1)) {\n var childNode = this.nameTable[\"\" + id];\n childNode.parentId = '';\n if (parentNode.container && parentNode.container.type === 'Stack') {\n this.updateStackProperty(parentNode, childNode);\n }\n for (var i = 0; i < parentNode.children.length; i++) {\n if (parentNode.children[parseInt(i.toString(), 10)] === id) {\n parentNode.children.splice(i, 1);\n for (var j = 0; j < parentNode.wrapper.children.length; j++) {\n if (parentNode.wrapper.children[parseInt(j.toString(), 10)] === childNode.wrapper) {\n parentNode.wrapper.children.splice(j, 1);\n }\n }\n }\n }\n parentNode.wrapper.measure(new Size());\n parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);\n if (!parentNode.isLane) {\n this.nameTable[node.id].width = parentNode.wrapper.actualSize.width;\n this.nameTable[node.id].height = parentNode.wrapper.actualSize.height;\n this.nameTable[node.id].offsetX = parentNode.wrapper.offsetX;\n this.nameTable[node.id].offsetY = parentNode.wrapper.offsetY;\n }\n if (!parentNode.parentId ||\n (this.nameTable[parentNode.parentId] &&\n this.nameTable[parentNode.parentId].shape.type !== 'SwimLane')) {\n this.updateDiagramObject(parentNode);\n }\n }\n }\n return id;\n };\n /**\n * Clears all nodes and objects in the diagram, effectively resetting the diagram to an empty state.\n *\n * @returns { void } Clears all nodes and objects in the diagram, effectively resetting the diagram to an empty state.\\\n * @deprecated\n */\n Diagram.prototype.clear = function () {\n this.clearObjects();\n this.clearLayers();\n };\n //Bug 872106: Layer object in diagram doesnot removed in clear method\n Diagram.prototype.clearLayers = function () {\n var layerCount = this.layers.length;\n for (var i = layerCount - 1; i >= 0; i--) {\n this.removeLayer(this.layers[parseInt(i.toString(), 10)].id);\n }\n //Create default layer\n var defaultLayer = {\n id: 'default_layer', visible: true, lock: false, objects: [], zIndex: 0,\n objectZIndex: -1, zIndexTable: {}\n };\n this.commandHandler.addLayer(defaultLayer, null, true);\n this.setActiveLayer(this.layers[this.layers.length - 1].id);\n };\n Diagram.prototype.clearObjects = function (collection) {\n var objects = [];\n if (!collection) {\n objects = objects.concat(this.nodes);\n objects = objects.concat(this.connectors);\n }\n else {\n objects = collection;\n }\n this.diagramActions = this.diagramActions | DiagramAction.Clear;\n // Removed isBlazor code\n for (var _i = 0, objects_1 = objects; _i < objects_1.length; _i++) {\n var obj = objects_1[_i];\n if (this.nameTable[obj.id]) {\n this.remove(obj);\n }\n }\n this.diagramActions = this.diagramActions & ~DiagramAction.Clear;\n this.spatialSearch = new SpatialSearch(this.nameTable);\n this.initHistory();\n };\n Diagram.prototype.startEditCommad = function () {\n var laneHeader;\n var node = (this.selectedItems.nodes[0]) ? this.selectedItems.nodes[0] : undefined;\n if (node && node instanceof Node) {\n if (node.isLane && node.parentId) {\n var swimlane = this.nameTable[node.parentId];\n var lanes = swimlane.shape.lanes;\n var canvasId = (node.id.slice(swimlane.id.length));\n var currentParentId = canvasId.substring(0, canvasId.length - 1);\n for (var i = 0; i < lanes.length; i++) {\n if (node.isLane && currentParentId === lanes[parseInt(i.toString(), 10)].id) {\n laneHeader = this.nameTable[lanes[parseInt(i.toString(), 10)].header.id];\n }\n }\n }\n else if (node.shape.type === 'SwimLane' && node.shape.header && node.shape.hasHeader) {\n var id = node.wrapper.children[0].rows[0].cells[0].children[0].id;\n laneHeader = this.nameTable[\"\" + id];\n }\n }\n this.startTextEdit(laneHeader);\n };\n /* tslint:disable */\n /**\n * Initiate the editing mode for a specific annotation within a node or connector.\n *\n * @returns { void } Initiate the editing mode for a specific annotation within a node or connector. \\\n * @param {NodeModel | ConnectorModel} node - The node or connector containing the annotation to be edited.\n * @param {string} id - The ID of the annotation to be edited within the node or connector.\n */\n Diagram.prototype.startTextEdit = function (node, id) {\n if ((!canZoomPan(this) && !canMultiSelect(this)) || canSingleSelect(this)) {\n this.textEditing = true;\n var transform = this.scroller.transform;\n var scale = canZoomTextEdit(this) ? transform.scale : 1;\n var minWidth = 90;\n var text = void 0;\n var bounds = void 0;\n var attributes = void 0;\n var x = void 0;\n var y = void 0;\n var textWrapper = void 0;\n if (!node) {\n node = (this.selectedItems.nodes[0]) ? this.selectedItems.nodes[0] : this.selectedItems.connectors[0];\n }\n if (node) {\n //Removed isBlazor code\n //893031: Exception throws while double click on UML Classifier connector\n //Added the condition that the node is not an instance of a connector\n if (node.shape && node.shape.type === 'UmlClassifier' && !(node instanceof Connector)) {\n node = this.nameTable[node.children[0]];\n }\n var bpmnAnnotation = false;\n if (!textWrapper) {\n if (node.shape.type !== 'Text' && node.annotations.length === 0) {\n if (!(node.constraints & NodeConstraints.ReadOnly)) {\n this.activeLabel.isGroup = true;\n this.startGroupAction();\n this.addLabels(node, [{ id: randomId(), content: '' }]);\n }\n }\n if (!id && ((node.shape.type !== 'Text' && node.annotations.length > 0) || (node.shape.type === 'Text'))) {\n //(EJ2-840331)-Double click on node annotation will open the edit of invisible annotation\n if (node.shape.type === 'Text') {\n id = (node.wrapper.children[0].id).split('_')[1];\n }\n else {\n for (var i = node.annotations.length - 1; i >= 0; i--) {\n if (node.annotations[parseInt(i.toString(), 10)].visibility) {\n id = node.annotations[parseInt(i.toString(), 10)].id;\n }\n }\n }\n }\n if (id) {\n textWrapper = this.getWrapper(node.wrapper, id);\n }\n }\n else {\n bpmnAnnotation = true;\n }\n if (node && textWrapper && !(textWrapper instanceof DiagramHtmlElement) &&\n (!enableReadOnly(textWrapper, node) || bpmnAnnotation)) {\n var style = (textWrapper.style);\n var maxWidth = void 0;\n maxWidth = textWrapper.bounds.width < node.wrapper.bounds.width ? textWrapper.bounds.width : node.wrapper.bounds.width;\n maxWidth = minWidth > maxWidth ? minWidth : maxWidth;\n var textEditing = document.getElementById(this.element.id + '_editTextBoxDiv');\n var textArea = document.getElementById(this.element.id + '_editBox');\n text = textArea ? textArea.value : textWrapper.content;\n this.activeLabel.text = text;\n if (!textEditing && !textArea) {\n textEditing = createHtmlElement('div', {});\n textArea = createHtmlElement('textarea', {});\n this.diagramCanvas.appendChild(textEditing);\n textEditing.appendChild(textArea);\n textArea.appendChild(document.createTextNode(text));\n }\n bounds = measureHtmlText(textWrapper.style, text, undefined, undefined, maxWidth);\n if (bounds.isEmpty()) {\n if (node.shape.type !== 'Text') {\n bounds = new Size(findAnnotation(node, (textWrapper.id).split(node.id + '_')[1]).width || 50, textWrapper.style.fontSize);\n }\n else {\n bounds = new Size((node.width > 50) ? 50 : node.width, textWrapper.style.fontSize);\n }\n }\n if (node.parentId && this.nameTable[node.parentId].shape.type === 'UmlClassifier') {\n bounds.width = node.wrapper.bounds.width - 20;\n x = ((((node.wrapper.bounds.center.x + transform.tx) * transform.scale) - (bounds.width / 2) * scale) - 2.5);\n y = ((((node.wrapper.bounds.center.y + transform.ty) * transform.scale) - (bounds.height / 2) * scale) - 3);\n textWrapper.style.textAlign = 'Left';\n }\n else {\n bounds.width = Math.max(bounds.width, 50);\n x = ((((textWrapper.bounds.center.x + transform.tx) * transform.scale) - (bounds.width / 2) * scale) - 2.5);\n y = ((((textWrapper.bounds.center.y + transform.ty) * transform.scale) - (bounds.height / 2) * scale) - 3);\n }\n attributes = {\n 'id': this.element.id + '_editTextBoxDiv', 'style': 'position: absolute' + ';left:' + x + 'px;top:' +\n y + 'px;width:' + ((bounds.width + 1) * scale) + 'px;height:' + (bounds.height * scale) +\n 'px; containerName:' + node.id + ';'\n };\n setAttributeHtml(textEditing, attributes);\n //879137 - aria-label missing in annotation textEdit mode.\n attributes = {\n 'aria-label': text, 'id': this.element.id + '_editBox', 'style': 'width:' + ((bounds.width + 1) * scale) +\n 'px;height:' + (bounds.height * scale) + 'px;resize: none;outline: none;overflow: hidden;' +\n ';font-family:' + style.fontFamily +\n ';font-size:' + (style.fontSize * scale) + 'px;text-align:' +\n (textWrapper.style.textAlign.toLocaleLowerCase()) + ';', 'class': 'e-diagram-text-edit'\n };\n setAttributeHtml(textArea, attributes);\n textArea.style.fontWeight = (style.bold) ? 'bold' : '';\n textArea.style.fontStyle = (style.italic) ? 'italic' : '';\n textArea.style.lineHeight = (style.fontSize * 1.2 + 'px;').toString();\n textArea.style.textDecoration = (style.textDecoration) ? style.textDecoration : '';\n this.activeLabel.parentId = node.id;\n this.activeLabel.id = id;\n textWrapper.visible = false;\n this.updateDiagramObject(node);\n this.diagramActions = this.diagramActions | DiagramAction.TextEdit;\n if (!this.isTriggerEvent) {\n EventHandler.add(textArea, 'input', this.eventHandler.inputChange, this.eventHandler);\n EventHandler.add(textArea, 'focusout', this.focusOutEdit, this);\n textArea.select();\n }\n }\n }\n }\n };\n Diagram.prototype.updateConnectorfixedUserHandles = function (connector) {\n if (connector.fixedUserHandles.length) {\n var fixedUserHandleWrapper = void 0;\n for (var _i = 0, _a = connector.fixedUserHandles; _i < _a.length; _i++) {\n var fixedUserHandle = _a[_i];\n fixedUserHandleWrapper = this.getWrapper(connector.wrapper, fixedUserHandle.id);\n connector.updateAnnotation(fixedUserHandle, connector.intermediatePoints, connector.wrapper.bounds, fixedUserHandleWrapper);\n }\n }\n connector.wrapper.measure(new Size(connector.wrapper.width, connector.wrapper.height));\n connector.wrapper.arrange(connector.wrapper.desiredSize);\n };\n /* tslint:enable */\n Diagram.prototype.updateNodeExpand = function (node, visibility) {\n for (var i = 0; i < node.outEdges.length; i++) {\n var connector = this.nameTable[node.outEdges[parseInt(i.toString(), 10)]];\n var target = this.nameTable[connector.targetID];\n connector.visible = visibility;\n if (target) {\n if (!visibility) {\n this.updateElementVisibility(connector.wrapper, connector, false);\n target.isExpanded = visibility;\n }\n this.updateNodeExpand(target, target.isExpanded);\n target.visible = visibility;\n if (!visibility) {\n this.updateElementVisibility(target.wrapper, target, false);\n }\n }\n }\n };\n Diagram.prototype.updateConnectorAnnotation = function (connector) {\n if (connector.annotations.length) {\n var annotationWrapper = void 0;\n for (var _i = 0, _a = connector.annotations; _i < _a.length; _i++) {\n var annotation = _a[_i];\n annotationWrapper = this.getWrapper(connector.wrapper, annotation.id);\n connector.updateAnnotation(annotation, connector.intermediatePoints, connector.wrapper.bounds, annotationWrapper, (this.diagramActions & DiagramAction.Interactions));\n }\n }\n connector.wrapper.measure(new Size(connector.wrapper.width, connector.wrapper.height));\n connector.wrapper.arrange(connector.wrapper.desiredSize);\n };\n Diagram.prototype.removeChildrenFromLayout = function (nodes) {\n var nodesCollection = [];\n var node;\n var parentId = 'parentId';\n var processId = 'processId';\n for (var i = 0; i < nodes.length; i++) {\n node = nodes[parseInt(i.toString(), 10)];\n if (!node[\"\" + parentId] && !node[\"\" + processId]) {\n nodesCollection.push(node);\n }\n }\n return nodesCollection;\n };\n /* tslint:disable */\n /**\n * Automatically updates the diagram objects based on the type of the layout.\n * @returns { ILayout | boolean } Automatically updates the diagram objects based on the type of the layout.\\\n */\n Diagram.prototype.doLayout = function () {\n var update = false;\n var layout;\n var canDoOverlap = (this.layout.type === 'ComplexHierarchicalTree' || this.layout.type === 'HierarchicalTree');\n var propChange = this.isProtectedOnChange;\n this.protectPropertyChange(true);\n var nodes = this.removeChildrenFromLayout(this.nodes);\n var canEnableRouting = this.layout.enableRouting && this.layout.type === 'ComplexHierarchicalTree';\n var viewPort = { x: this.scroller.viewPortWidth, y: this.scroller.viewPortHeight };\n if (this.layout.type !== 'None') {\n //Bug 862601: Connectors are not rendered properly with lineRouting and lineDistribution enables during doLayout process.\n //Removed initLineDistribution method call here and added it below after the complex hierarchical tree doLayout process.\n if (this.organizationalChartModule) {\n layout = this.organizationalChartModule.updateLayout(nodes, this.nameTable, this.layout, viewPort, this.dataSourceSettings.id, this.diagramActions);\n update = true;\n if (this.canDistribute(canEnableRouting, canDoOverlap)) {\n this.lineDistributionModule.initLineDistribution(this.layout, this);\n }\n if (this.layoutAnimateModule && layout.rootNode && !this.diagramActions) {\n this.updateNodeExpand(layout.rootNode, layout.rootNode.isExpanded);\n }\n // EJ2-58221 - added to render the layout properly based on parent node isExpanded property.\n else if (!this.layoutAnimateModule && layout.rootNode && !layout.rootNode.isExpanded && !this.canExpand) {\n this.updateNodeExpand(layout.rootNode, layout.rootNode.isExpanded);\n }\n }\n else if (this.mindMapChartModule) {\n if (nodes && nodes.length > 0) {\n this.mindMapChartModule.updateLayout(nodes, this.nameTable, this.layout, viewPort, this.dataSourceSettings.id, this.dataSourceSettings.root);\n }\n update = true;\n }\n else if (this.radialTreeModule) {\n this.radialTreeModule.updateLayout(nodes, this.nameTable, this.layout, viewPort);\n update = true;\n }\n else if (this.symmetricalLayoutModule) {\n this.symmetricalLayoutModule.maxIteration = this.layout.maxIteration;\n this.symmetricalLayoutModule.springLength = this.layout.springLength;\n this.symmetricalLayoutModule.springFactor = this.layout.springFactor;\n this.symmetricalLayoutModule.updateLayout(nodes, this.connectors, this.symmetricalLayoutModule, this.nameTable, this.layout, viewPort);\n update = true;\n }\n else if (this.complexHierarchicalTreeModule) {\n //Bug 862601: Connectors are not rendered properly with lineRouting and lineDistribution enables during doLayout process.\n //As the initLineDistribution method call removed from above and added below doLayout, we need to set diagram value and clear obstacle collection\n // of connectors.\n if (this.canDistribute(canEnableRouting, canDoOverlap)) {\n this.lineDistributionModule.diagram = this;\n var obstacleCollection_1 = 'obstaclePointCollection';\n this.connectors.forEach(function (connector) {\n connector[\"\" + obstacleCollection_1] = [];\n });\n }\n var nodes_1 = this.complexHierarchicalTreeModule.getLayoutNodesCollection(this.nodes);\n if (nodes_1.length > 0) {\n // eslint-disable-next-line max-len\n this.complexHierarchicalTreeModule.doLayout(nodes_1, this.nameTable, this.layout, viewPort, this);\n }\n update = true;\n //initLineDistribution method call after doLayout.\n if (this.canDistribute(canEnableRouting, canDoOverlap)) {\n this.lineDistributionModule.initLineDistribution(this.layout, this);\n }\n }\n else if (this.flowchartLayoutModule) {\n this.flowchartLayoutModule.updateLayout(this.nodes, this);\n update = true;\n }\n else {\n var moduleName = this.layout.type === 'OrganizationalChart' ? 'HierarchicalTree' : this.layout.type;\n console.warn('[WARNING] :: Module ' + moduleName + ' is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n if (update) {\n this.preventDiagramUpdate = true;\n var connectors = {};\n var updatedNodes = nodes;\n // BLAZ-22230 - Added condition to check if canUpdateTemplate is false means then we can update the template for blazor\n //Removed isBlazor code\n for (var _i = 0, updatedNodes_1 = updatedNodes; _i < updatedNodes_1.length; _i++) {\n var obj = updatedNodes_1[_i];\n var node = obj;\n if (!this.preventNodesUpdate && (!this.diagramActions || !(this.diagramActions & DiagramAction.PreventIconsUpdate))) {\n this.updateIcon(node);\n this.updateDefaultLayoutIcons(node);\n }\n this.preventNodesUpdate = true;\n this.nodePropertyChange(node, {}, { offsetX: node.offsetX, offsetY: node.offsetY }, true);\n this.preventNodesUpdate = false;\n node.wrapper.measure(new Size(node.wrapper.width, node.wrapper.height));\n node.wrapper.arrange(node.wrapper.desiredSize);\n this.updateDiagramObject(node, true);\n if (node.inEdges.length > 0) {\n for (var j = 0; j < node.inEdges.length; j++) {\n var connector = this.nameTable[node.inEdges[parseInt(j.toString(), 10)]];\n connectors[connector.id] = connector;\n }\n }\n if (node.outEdges.length > 0) {\n for (var k = 0; k < node.outEdges.length; k++) {\n var connection = this.nameTable[node.outEdges[parseInt(k.toString(), 10)]];\n connectors[connection.id] = connection;\n }\n }\n }\n for (var _a = 0, _b = Object.keys(connectors); _a < _b.length; _a++) {\n var conn = _b[_a];\n if (canEnableRouting) {\n this.lineDistributionModule.resetConnectorSegments(this.nameTable[\"\" + conn]);\n }\n var connector = connectors[\"\" + conn];\n var points = this.getPoints(connector);\n if (canEnableRouting) {\n this.lineDistributionModule.resetRoutingSegments(connector, this, points);\n }\n updateConnector(connector, points);\n if (connector.shape.type === 'Bpmn' && connector.shape.sequence === 'Default' && connector.shape.flow === 'Sequence') {\n this.commandHandler.updatePathElementOffset(connector);\n }\n connector.wrapper.measure(new Size(undefined, undefined));\n connector.wrapper.arrange(connector.wrapper.desiredSize);\n this.updateConnectorAnnotation(connector);\n this.updateConnectorfixedUserHandles(connector);\n this.updateQuad(connector);\n this.updateDiagramObject(connector, true);\n }\n if (canEnableRouting || this.layout.connectionPointOrigin === 'DifferentPoint' && this.lineDistributionModule && canDoOverlap) {\n this.lineDistributionModule.distributeLines(this.layout, this);\n }\n this.refreshFlowChartConnectors();\n this.preventDiagramUpdate = false;\n this.updatePage();\n if ((!(this.diagramActions & DiagramAction.Render)) || this.mode === 'Canvas') {\n this.refreshDiagramLayer();\n this.isRefreshed = true;\n }\n }\n if (!propChange) {\n this.protectPropertyChange(propChange);\n }\n }\n if (update) {\n this.updateDiagramElementQuad();\n }\n if ((this.diagramActions & DiagramAction.Render) && this.layout.enableRouting) {\n this.refreshRoutingConnectors();\n }\n return ((this.blazorActions & BlazorAction.expandNode) ? layout : true);\n };\n //Bug 877799: Optimize the routing segment distance while using enableRouting in layout.\n //Stored the routingConnectors in resetRoutingSegments method and then Refresh the routing connectors after layout completion.\n Diagram.prototype.refreshRoutingConnectors = function () {\n this.isProtectedOnChange = true;\n if (this.routingConnectors) {\n for (var i = 0; i < this.routingConnectors.length; i++) {\n var connector = this.routingConnectors[parseInt(i.toString(), 10)];\n var sourceNode = this.nameTable[connector.sourceID];\n var targetNode = this.nameTable[connector.targetID];\n var lineRouting = new LineRouting();\n if (sourceNode.visible && targetNode.visible) {\n lineRouting.renderVirtualRegion(this, true);\n lineRouting.refreshConnectorSegments(this, connector, false, true);\n var points = this.getPoints(connector);\n updateConnector(connector, points);\n connector.wrapper.measure(new Size(undefined, undefined));\n connector.wrapper.arrange(connector.wrapper.desiredSize);\n this.updateDiagramObject(connector, true);\n this.routingConnectors.splice(i, 1);\n i--;\n }\n }\n }\n this.isProtectedOnChange = false;\n };\n //To update new connector points in flowchart layout\n Diagram.prototype.refreshFlowChartConnectors = function () {\n if (this.flowchartLayoutModule) {\n this.flowchartLayoutModule.reRouteFlowChartConnectors(this.layout.flowChartData, this);\n for (var i = 0; i < this.connectors.length; i++) {\n var connector = this.connectors[parseInt(i.toString(), 10)];\n var points = this.getPoints(connector);\n updateConnector(connector, points);\n connector.wrapper.measure(new Size(undefined, undefined));\n connector.wrapper.arrange(connector.wrapper.desiredSize);\n this.updateConnectorAnnotation(connector);\n this.updateConnectorfixedUserHandles(connector);\n this.updateQuad(connector);\n this.updateDiagramObject(connector, true);\n }\n }\n };\n //Checks if line distribution is enabled.\n Diagram.prototype.canDistribute = function (canEnableRouting, canDoOverlap) {\n if ((canEnableRouting && this.lineDistributionModule) || (this.layout.connectionPointOrigin === 'DifferentPoint' && this.lineDistributionModule && canDoOverlap) || (this.layout.arrangement === 'Linear' && this.lineDistributionModule)) {\n return true;\n }\n else {\n if ((canEnableRouting) || (this.layout.connectionPointOrigin === 'DifferentPoint' && canDoOverlap) || (this.layout.arrangement === 'Linear')) {\n console.warn('[WARNING] :: Module \"LineDistribution\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n return false;\n }\n };\n /* tslint:enable */\n /**\n * Serializes the diagram control as a string.\n * @returns { string } Serializes the diagram control as a string. \\\n */\n Diagram.prototype.saveDiagram = function () {\n var children = [];\n var node;\n var grid;\n var childTable;\n var child;\n var gridChild = 'childTable';\n for (var i = 0; i < this.nodes.length; i++) {\n node = this.nodes[parseInt(i.toString(), 10)];\n if (node.shape.type === 'SwimLane') {\n grid = node.wrapper.children[0];\n childTable = grid[\"\" + gridChild];\n for (var _i = 0, _a = Object.keys(childTable); _i < _a.length; _i++) {\n var key = _a[_i];\n child = childTable[\"\" + key];\n children = getChild(child, children);\n }\n for (var i_1 = 0; i_1 < children.length; i_1++) {\n if (this.nameTable[children[parseInt(i_1.toString(), 10)]]) {\n this.swimlaneChildTable[children[parseInt(i_1.toString(), 10)]]\n = this.nameTable[children[parseInt(i_1.toString(), 10)]].zIndex;\n }\n }\n this.swimlaneZIndexTable[node.id] = node.zIndex;\n }\n }\n return serialize(this);\n };\n /**\n * Converts the given string into a Diagram Control.\n *\n * @returns { Object } Converts the given string into a Diagram Control. \\\n * @param {string} data - The string representing the diagram model JSON to be loaded.\n * @param {boolean} isEJ1Data - A boolean indicating whether the JSON data is EJ1 data.\n */\n Diagram.prototype.loadDiagram = function (data, isEJ1Data) {\n if (isEJ1Data && this.ej1SerializationModule) {\n var ejDiagram = JSON.parse(data);\n data = this.ej1SerializationModule.getSerializedData(ejDiagram);\n }\n else if (isEJ1Data) {\n console.warn('[WARNING] :: Module \"Ej1Serialization\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n return deserialize(data, this);\n };\n /**\n * Exports the current diagram to a string in Mermaid format.\n * This method converts the current state of the diagram into Mermaid syntax, allowing it to be saved or shared.\n * @returns {string} - A string containing the Mermaid text representation of the current diagram.\n */\n Diagram.prototype.saveDiagramAsMermaid = function () {\n var mermaidData = '';\n if (this.layout && this.layout.type === 'Flowchart') {\n mermaidData = this.saveFlowDiagramInMermaidFormat();\n }\n else {\n mermaidData = this.saveMindmapDiagramInMermaidFormat();\n }\n return mermaidData;\n };\n /**\n * Converts the diagram to Mermaid format and saves it.\n * If the diagram has a 'MindMap' layout, it will generate a Mermaid mind map.\n * @returns {string} - The Mermaid formatted string representing the diagram.\n */\n Diagram.prototype.saveMindmapDiagramInMermaidFormat = function () {\n var mermaidData = '';\n var dataSourceCollection = [];\n if (this.layout && this.layout.type === 'MindMap') {\n dataSourceCollection.push('mindmap');\n if (this.nodes.length > 0) {\n var rootNode = this.nodes.filter(function (node) { return node.inEdges.length === 0; })[0];\n var content = this.convertMindmapToMermaid(rootNode, 0);\n dataSourceCollection.push(content);\n var outConnectors = rootNode.outEdges;\n this.updateTextDataSource(dataSourceCollection, outConnectors, 1);\n dataSourceCollection = dataSourceCollection.filter(function (data) { return data.trim() !== ''; });\n mermaidData = dataSourceCollection.join('\\n');\n }\n }\n return mermaidData;\n };\n /**\n * Creates a text data source for sub-level children in a Mermaid diagram.\n * @param {string[]} dataSource - The data source to be updated.\n * @param {string[]} outEdges - The out edges of the current node.\n * @param {number} level - The level of the current node.\n * @returns {void} - Creates a text data source for sub-level children in a Mermaid diagram.\n */\n Diagram.prototype.updateTextDataSource = function (dataSource, outEdges, level) {\n var count = 0;\n while (count < outEdges.length) {\n var connector = this.getObject(outEdges[parseInt(count.toString(), 10)]);\n var targetNode = this.getObject(connector.targetID);\n var content = this.convertMindmapToMermaid(targetNode, level);\n dataSource.push(content);\n var childOutConnectors = targetNode.outEdges;\n if (childOutConnectors.length > 0) {\n this.updateTextDataSource(dataSource, childOutConnectors, level + 1);\n }\n count++;\n }\n };\n /**\n * Returns the text data source for the specified node in Mermaid format.\n * @param {NodeModel} node - The node for which the Mermaid data is to be generated.\n * @param {number} level - The level of the node in the diagram.\n * @returns {string} - The text data source for the specified node in Mermaid format.\n */\n Diagram.prototype.convertMindmapToMermaid = function (node, level) {\n var nodeId = node.id;\n var spaceCount = (level + 1) * 2;\n var spaces = ' '.repeat(spaceCount);\n var annotationContent = node.annotations.length > 0\n ? node.annotations[0].content.replace(/\\n/g, ' ')\n : '';\n var content = spaces + annotationContent;\n var spaceWithNodeId = spaces + nodeId;\n if (node.shape && node.shape.type === 'Basic') {\n var basicShape = node.shape;\n if (basicShape.shape === 'Rectangle') {\n content = spaceWithNodeId + '[' + annotationContent + ']';\n }\n else if (basicShape.shape === 'Ellipse') {\n content = spaceWithNodeId + '((' + annotationContent + '))';\n }\n else if (basicShape.shape === 'Hexagon') {\n content = spaceWithNodeId + '{{' + annotationContent + '}}';\n }\n }\n else if (node.shape && node.shape.type === 'Flow') {\n var flowShape = node.shape;\n if (flowShape.shape === 'Terminator') {\n content = spaceWithNodeId + '(' + annotationContent + ')';\n }\n }\n else if (node.shape && node.shape.type === 'Path') {\n var pathShape = node.shape;\n if (pathShape.data === this.bangShape) {\n content = spaceWithNodeId + '))' + annotationContent + '((';\n }\n else if (pathShape.data === this.cloudShape) {\n content = spaceWithNodeId + ')' + annotationContent + '(';\n }\n }\n return content;\n };\n /**\n * Converts the flowchart diagram to Mermaid format.\n * @returns {string} - The exported flowchart diagram as Mermaid data.\n */\n Diagram.prototype.saveFlowDiagramInMermaidFormat = function () {\n var _this = this;\n var existingIds = [];\n var mermaidCode = 'graph TD\\n';\n var graph = { nodes: this.nodes, edges: this.connectors };\n // Create a map of node labels for easy access\n // accumulator - The object that stores the node ID and label pairs.\n var nodeLabels = graph.nodes.reduce(function (accumulator, node) {\n accumulator[node.id] = node.annotations.length ? node.annotations[0].content : '';\n return accumulator;\n }, {});\n // Iterate through edges to create connections and node definitions\n graph.edges.forEach(function (edge) {\n var fromNodeId = edge.sourceID;\n var toNodeId = edge.targetID;\n var fromNodeLabel = nodeLabels[\"\" + fromNodeId];\n var toNodeLabel = nodeLabels[\"\" + toNodeId];\n var fromNode = _this.nameTable[\"\" + fromNodeId];\n var toNode = _this.nameTable[\"\" + toNodeId];\n var fromNodeShape = _this.getNodeShape(fromNode);\n var toNodeShape = _this.getNodeShape(toNode);\n var condition = (edge.annotations[0] && edge.annotations[0].content !== '') ? '|' + edge.annotations[0].content + '|' : '';\n if (existingIds.indexOf(fromNodeId) === -1) {\n existingIds.push(fromNodeId);\n }\n else {\n fromNodeShape = '';\n }\n if (existingIds.indexOf(toNodeId) === -1) {\n existingIds.push(toNodeId);\n }\n else {\n toNodeShape = '';\n }\n var arrow = _this.arrowType(edge);\n mermaidCode += \" \" + fromNodeId + fromNodeShape + \" \" + arrow + condition + \" \" + toNodeId + toNodeShape + \"\\n\";\n });\n // Add styles for each node\n graph.nodes.forEach(function (node) {\n var nodeId = node.id;\n var fill = node.style.fill;\n var stroke = node.style.strokeColor;\n var strokeWidth = node.style.strokeWidth + \"px\";\n mermaidCode += \" style \" + nodeId + \" fill:\" + fill + \",stroke:\" + stroke + \",stroke-width:\" + strokeWidth + \";\\n\";\n });\n return mermaidCode;\n };\n // Method to get the arrow type from connector\n Diagram.prototype.arrowType = function (edge) {\n var decoratorShape = edge.targetDecorator.shape;\n var strokeDash = edge.style.strokeDashArray;\n var strokeWidth = edge.style.strokeWidth;\n var opacity = edge.style.opacity;\n var arrow = '';\n if (opacity < 1) {\n arrow = '~~~';\n }\n else if (strokeDash !== '') {\n arrow = '-.->';\n }\n else if (decoratorShape === 'Arrow') {\n arrow = strokeWidth > 1 ? '==>' : '-->';\n }\n else if (decoratorShape === 'None') {\n arrow = '---';\n }\n else {\n arrow = '-->';\n }\n return arrow;\n };\n // Method to get the node shape\n Diagram.prototype.getNodeShape = function (node) {\n var label = node.annotations.length > 0 ? node.annotations[0].content : '';\n var shape = node.shape.shape;\n if (shape) {\n switch (shape) {\n case 'Terminator':\n return '([' + label + '])';\n case 'Process':\n return '[' + label + ']';\n case 'Decision':\n return '{' + label + '}';\n case 'Parallelogram':\n return '[/' + label + '/]';\n case 'Ellipse':\n return '((' + label + '))';\n case 'PreDefinedProcess':\n return '[[' + label + ']]';\n default:\n return '[' + label + ']';\n }\n }\n else {\n var data = node.shape.data;\n if (data === 'M 0 0 A 1 1 0 0 0 7 0 A 1 1 0 0 0 0 0 M -1 0 A 1 1 0 0 0 8 0 A 1 1 0 0 0 -1 0') {\n return '(((' + label + ')))';\n }\n else if (data === 'M 0 0 L 1 -1 L 5 -1 L 6 0 L 0 0') {\n return '[/' + label + '\\\\]';\n }\n else if (data === 'M 0 1 L 0 6 C 2 7 4 7 6 6 L 6 1 C 5 0 1 0 0 1 C 1 2 5 2 6 1') {\n return '[(' + label + ')]';\n }\n else if (data === 'M 0 0 L 12 0 L 14 2 L 2 2 L 0 0') {\n return '[\\\\' + label + '\\\\]';\n }\n else if (data === 'M 0 0 L 5 0 L 4 1 L 1 1 L 0 0') {\n return '[\\\\' + label + '/]';\n }\n else if (data === 'M 0 0 L 2 -2 L 11 -2 L 13 0 L 11 2 L 2 2 L 0 0') {\n return '{{' + label + '}}';\n }\n else {\n return '>' + label + ']';\n }\n }\n };\n /** Loads a diagram from a string containing Mermaid syntax.\n * This method parses the provided Mermaid text data and updates the current diagram accordingly.\n * Currently, only Mindmap and Flowchart diagrams can be loaded.\n * To render the diagram properly, you should set the `Layout.type` to either `MindMap` or `FlowChart`, and ensure that the respective modules are injected.\n * @param {string} data - The Mermaid text data representing the diagram to be loaded.\n * @returns {void} - No return value. The method updates the diagram in place.\n */\n Diagram.prototype.loadDiagramFromMermaid = function (data) {\n if (this.layout && this.layout.type === 'Flowchart' && this.flowchartLayoutModule) {\n //Task 896394: To load the mermaid data as flowchart\n this.convertMermaidToFlowChart(data);\n }\n else if (this.layout && this.layout.type === 'MindMap' && this.mindMapChartModule) {\n //Task 900266: To load the mermaid data as mindmap\n this.convertMermaidToMindmap(data);\n }\n else {\n console.warn('[WARNING] :: Module \"FlowchartLayout\" or \"MindMap\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n };\n /**\n * Counts the number of leading spaces in the specified string.\n * @param {string} word The string to check for leading spaces.\n * @returns { number } The number of leading spaces.\n */\n Diagram.prototype.countLeadingSpaces = function (word) {\n var i = 0;\n var length = word.length;\n // Loop through the string to count leading spaces\n while (i < length && word.charAt(i) === ' ') {\n i++;\n }\n // Return the number of leading spaces\n return i;\n };\n Diagram.prototype.convertMermaidToMindmap = function (data) {\n if (data && this.layout && this.layout.type === 'MindMap' && this.mindMapChartModule) {\n var dataSource = data.split(/\\r?\\n/).filter(function (s) { return s.trim().length > 0; });\n this.clear();\n this.mermaidNodeBaseCollection = [];\n var dataStack = [];\n var previousItem = { text: '', children: [], currentLevel: 0, branch: 'Left' };\n var spaceAndItsLevels = [];\n var startLevel = 1;\n var haveBackticks = false;\n var isEndBackticks = false;\n var canCreateMindMap = false;\n if (dataSource.length > 0) {\n var _loop_1 = function (index) {\n var word = dataSource[parseInt(index.toString(), 10)];\n var level = 0;\n var text = '';\n var leadingWhiteSpace = this_1.countLeadingSpaces(word);\n var isStartBackticks = word.includes('\"`');\n isEndBackticks = word.includes('`\"');\n haveBackticks = isStartBackticks ? true : haveBackticks;\n canCreateMindMap = (!haveBackticks && !canCreateMindMap) ? leadingWhiteSpace === 0 && index > 0 : canCreateMindMap;\n if (haveBackticks && isEndBackticks && !isStartBackticks) {\n previousItem.text += '\\n' + word;\n haveBackticks = false;\n return \"continue\";\n }\n if (!isStartBackticks && haveBackticks) {\n previousItem.text += '\\n' + word;\n return \"continue\";\n }\n haveBackticks = isEndBackticks ? false : haveBackticks;\n if (word.length > 0 && ((/\\s/.test(word[0]) && index > 0) || (leadingWhiteSpace === 0))) {\n var spaceIndex = spaceAndItsLevels.findIndex(function (space) {\n return space.space === leadingWhiteSpace.toString();\n });\n if (spaceIndex !== -1) {\n for (var i = spaceAndItsLevels.length - 1; i >= 0; i--) {\n var currentSpace = spaceAndItsLevels[parseInt(i.toString(), 10)];\n var currentKey = parseFloat(currentSpace.space);\n if (currentKey > leadingWhiteSpace) {\n spaceAndItsLevels.splice(i, 1); // Remove the element at index i\n }\n else if (currentKey < leadingWhiteSpace) {\n spaceAndItsLevels.push({ space: leadingWhiteSpace.toString(), level: currentSpace.level + 1 });\n level = currentSpace.level + 1;\n break;\n }\n else if (currentKey === leadingWhiteSpace) {\n level = currentSpace.level;\n break;\n }\n }\n }\n else {\n if (spaceAndItsLevels.length === 0) {\n spaceAndItsLevels.push({ space: leadingWhiteSpace.toString(), level: startLevel });\n level = startLevel;\n }\n else {\n for (var i = spaceAndItsLevels.length - 1; i >= 0; i--) {\n var currentElement = spaceAndItsLevels[parseInt(i.toString(), 10)];\n var currentKey = parseFloat(currentElement.space);\n if (currentKey > leadingWhiteSpace) {\n spaceAndItsLevels.splice(i, 1); // Remove the element at index i\n }\n else {\n var lastElement = spaceAndItsLevels[spaceAndItsLevels.length - 1];\n spaceAndItsLevels.push({ space: leadingWhiteSpace.toString(), level: lastElement.level + 1 });\n break;\n }\n }\n level = spaceAndItsLevels[spaceAndItsLevels.length - 1].level;\n }\n }\n text = word.trim().replace(/^[+-]/, '');\n }\n var currentItem = {\n text: text,\n branch: undefined,\n children: [],\n currentLevel: index === 0 ? 0 : level - 1\n };\n if (dataStack.length > 0) {\n while (dataStack.length >= level) {\n if (dataStack.length === 0) {\n break;\n }\n dataStack.pop();\n }\n if (dataStack.length > 0) {\n dataStack[dataStack.length - 1].children.push(currentItem);\n }\n }\n dataStack.push(currentItem);\n previousItem = currentItem;\n };\n var this_1 = this;\n for (var index = 0; index < dataSource.length; index++) {\n _loop_1(index);\n }\n // Create dataSource\n var hierarchyDataSource = dataStack[0];\n if (hierarchyDataSource.text === 'mindmap' || canCreateMindMap) {\n if (canCreateMindMap) {\n var nodeDetails = this.getNodeDetails(hierarchyDataSource);\n var nodeObj = {\n id: nodeDetails.nodeId,\n shape: nodeDetails.nodeShapeData,\n annotations: [\n { content: nodeDetails.annotationContent }\n ]\n };\n this.mermaidNodeBaseCollection.push(nodeObj);\n this.createDataSource(hierarchyDataSource.children, hierarchyDataSource, nodeObj.id);\n }\n else {\n var hierarchyData = hierarchyDataSource.children[0];\n var nodeData = this.getNodeDetails(hierarchyData);\n var node = {\n id: nodeData.nodeId,\n shape: nodeData.nodeShapeData,\n annotations: [\n { content: nodeData.annotationContent }\n ]\n };\n this.mermaidNodeBaseCollection.push(node);\n this.createDataSource(hierarchyData.children, hierarchyData, node.id);\n }\n this.addElements(this.mermaidNodeBaseCollection);\n this.doLayout();\n }\n }\n }\n };\n /**\n * Creates a data source for the Mermaid diagram based on the provided hierarchy data.\n * @param { HierarchyData[] } data The list of hierarchy data to process.\n * @param { HierarchyData } parent The parent hierarchy data.\n * @param { string } parentId The ID of the parent node.\n * @returns { void }\n */\n Diagram.prototype.createDataSource = function (data, parent, parentId) {\n var index = 0;\n while (index < data.length) {\n var child = data[parseInt(index.toString(), 10)];\n var nodeData = this.getNodeDetails(child);\n var node = {\n id: nodeData.nodeId,\n shape: nodeData.nodeShapeData,\n annotations: [\n { content: nodeData.annotationContent }\n ]\n };\n var connector = {\n sourceID: parentId,\n targetID: node.id\n };\n this.mermaidNodeBaseCollection.push(node);\n this.mermaidNodeBaseCollection.push(connector);\n this.createDataSource(child.children, child, node.id);\n index++;\n }\n };\n /**\n * Retrieves the node details based on the provided hierarchy data for a mermaid diagram.\n * @param { HierarchyData } hierarchyData The hierarchy data.\n * @returns { NodeData } The node details.\n */\n Diagram.prototype.getNodeDetails = function (hierarchyData) {\n var pattern = /^(.*?)\\s*([\\\\[\\\\(\\\\{][\\s\\S]*?[\\]\\\\)\\\\}]|[)\\\\(][\\s\\S]*|[)\\\\{][\\s\\S]*|[)\\\\(][^{}()\\\\[\\]]*$)/;\n var annotationContent = hierarchyData.text;\n var match = annotationContent.match(pattern);\n var nodeId = randomId();\n var annotationText = hierarchyData.text;\n var shape = { type: 'Basic', shape: 'Rectangle' };\n if (match) {\n nodeId = match[1] ? match[1] : nodeId;\n var content = match[2].trim().replace(/[\"`]/g, '');\n var firstCharacter = content.charAt(0);\n if (firstCharacter === '[') {\n annotationText = content.slice(1, -1);\n }\n else if (firstCharacter === '(') {\n if (content.startsWith('((')) {\n annotationText = content.slice(2, -1);\n }\n else {\n annotationText = content.slice(1, -1);\n }\n shape = content.startsWith('((') ?\n { type: 'Basic', shape: 'Ellipse' } :\n { type: 'Flow', shape: 'Terminator' };\n }\n else if (firstCharacter === ')') {\n if (content.startsWith('))')) {\n annotationText = content.slice(2, -2);\n }\n else {\n annotationText = content.slice(1, -1);\n }\n shape = content.startsWith('))') ?\n { type: 'Path', data: this.bangShape } :\n { type: 'Path', data: this.cloudShape };\n }\n else if (firstCharacter === '{') {\n annotationText = content.slice(2, -1);\n shape = { type: 'Basic', shape: 'Hexagon' };\n }\n }\n return {\n nodeId: nodeId,\n annotationContent: annotationText,\n nodeShapeData: shape\n };\n };\n /**\n * To convert the Mermaid data to flowchart diagram\n * @param {string} data - The Mermaid data to be converted to a flowchart diagram.\n * @returns {void}\n */\n Diagram.prototype.convertMermaidToFlowChart = function (data) {\n var dataCollection = [];\n this.clear();\n var lines = data.trim().split('\\n');\n for (var i = 1; i < lines.length; i++) {\n var line = lines[parseInt(i.toString(), 10)];\n line = line.trim();\n if (line !== '') {\n if (line.startsWith('style')) {\n this.parseStyle(line, dataCollection);\n }\n else {\n var lineSplit = this.getLineSplitting(line);\n var parts = [lineSplit[0], lineSplit[1]];\n var data_1 = this.getNodeData(parts, dataCollection, lineSplit[2]);\n if (data_1.length > 0) {\n var lastItem = data_1[data_1.length - 1];\n lastItem.arrowType = lineSplit[2];\n if (lineSplit[3] !== '') {\n if (lastItem.label && lastItem.label.some(function (str) { return str.trim().length > 0; })) {\n lastItem.label.push(lineSplit[3]);\n }\n else {\n lastItem.label = [];\n lastItem.label[lastItem.parentId.length - 1] = lineSplit[3];\n }\n }\n }\n data_1.filter(function (flowData) {\n return flowData.parentId && flowData.parentId.length === 0;\n }).forEach(function (node) {\n node.parentId = null;\n });\n dataCollection = dataCollection.concat(data_1);\n }\n }\n }\n this.createFlowChart(dataCollection);\n this.doLayout();\n this.clearHistory();\n };\n /**\n * To convert the dataCollection into flowchart nodes and connectors\n * @param { FlowChartData[] } dataCollection - The data collection to be converted to flowchart nodes and connectors.\n * @returns {void}\n */\n Diagram.prototype.createFlowChart = function (dataCollection) {\n var flowchartNodesAndConnectors = [];\n for (var n = 0; n < dataCollection.length; n++) {\n var data = dataCollection[parseInt(n.toString(), 10)];\n var node = {\n id: data.id,\n shape: data.shape,\n annotations: [{ content: data.name }],\n style: { fill: data.color, strokeColor: data.stroke, strokeWidth: data.strokeWidth }\n };\n flowchartNodesAndConnectors.push(node);\n }\n for (var c = 0; c < dataCollection.length; c++) {\n var data = dataCollection[parseInt(c.toString(), 10)];\n var connectorStyle = getConnectorArrowType(data);\n if (data.parentId && data.parentId.length > 1) {\n for (var i = 0; i < data.parentId.length; i++) {\n var connector = {\n id: randomId(),\n sourceID: data.parentId[parseInt(i.toString(), 10)],\n targetID: data.id,\n annotations: [{ content: data.label ? data.label[parseInt(i.toString(), 10)] : '' }],\n style: {\n strokeWidth: connectorStyle.strokeWidth ? connectorStyle.strokeWidth : 1,\n strokeDashArray: connectorStyle.strokeDashArray ? connectorStyle.strokeDashArray : '',\n opacity: connectorStyle.opacity !== undefined ? connectorStyle.opacity : 1\n },\n targetDecorator: { shape: connectorStyle.targetDecorator }\n };\n flowchartNodesAndConnectors.push(connector);\n }\n }\n else if (data.parentId && data.parentId.length === 1) {\n var connector = {\n id: randomId(),\n sourceID: data.parentId[0],\n targetID: data.id,\n annotations: [{ content: data.label ? data.label[0] : '' }],\n style: {\n strokeWidth: connectorStyle.strokeWidth ? connectorStyle.strokeWidth : 1,\n strokeDashArray: connectorStyle.strokeDashArray ? connectorStyle.strokeDashArray : '',\n opacity: connectorStyle.opacity !== undefined ? connectorStyle.opacity : 1\n },\n targetDecorator: { shape: connectorStyle.targetDecorator }\n };\n flowchartNodesAndConnectors.push(connector);\n }\n }\n this.addElements(flowchartNodesAndConnectors);\n };\n /**\n * Splits the line based on arrow\n * @param { string } line - line to split\n * @returns { string[] } - Splitted line\n */\n Diagram.prototype.getLineSplitting = function (line) {\n var leftPart;\n var rightPart;\n var arrowName;\n var arrowText = '';\n // RegEx to split the line based on arrow\n var regex = /^(.*?)\\s*(-->|---|--\\s*.*?\\s*-->|~~~|==>|===|==\\s*.*?\\s*==>|\\s*-\\.\\s*->|\\s*-\\.\\s*-|\\s*-\\.\\s*.*?\\s*\\.\\s*->|\\s*-\\..*?\\.\\s*->)(.*)$/;\n var match = line.match(regex);\n if (match) {\n leftPart = match[1].trim();\n var arrow = match[2].trim();\n rightPart = match[3].trim();\n // Detect and extract arrow text\n var arrowRegex = /(-\\.|\\\\-\\\\-|==|--|~~)(.*?)(\\1>|\\.->|==>|\\\\->|~~>)/;\n var arrowTextMatch = arrow.match(arrowRegex);\n var arrowDetails = void 0;\n var arrowType = '';\n if (arrowTextMatch) {\n var text = arrowTextMatch[2].trim() || null;\n var arrowType_1 = arrowTextMatch[1] + arrowTextMatch[3];\n arrowDetails = {\n text: text,\n arrowType: arrowType_1\n };\n }\n else {\n arrowDetails = {\n text: null,\n arrowType: arrow\n };\n }\n arrowText = arrowDetails.text !== null ? arrowDetails.text : '';\n arrowType = arrowDetails.arrowType;\n // Identify arrow type\n if (arrowType.includes('-->')) {\n arrowName = 'single-line-arrow';\n }\n else if (arrowType.includes('---')) {\n arrowName = 'single-line';\n }\n else if (arrowType.includes('==>')) {\n arrowName = 'double-line-arrow';\n }\n else if (arrowType.includes('==')) {\n arrowName = 'double-line';\n }\n else if (arrowType.includes('~~~')) {\n arrowName = 'wiggly-arrow';\n }\n else if (arrowType.includes('-.->') || arrowType.includes('.->')) {\n arrowName = 'dotted-arrow';\n }\n else if (arrowType.includes('-.-') || arrowType.includes('.-')) {\n arrowName = 'dotted';\n }\n else {\n arrowName = 'single-line-arrow';\n }\n }\n return [leftPart, rightPart, arrowName, arrowText];\n };\n /**\n * To parse the style of the node\n * @param { string } line - line to parse\n * @param { FlowChartData[] } dataCollection - data collection\n * @returns { void }\n */\n Diagram.prototype.parseStyle = function (line, dataCollection) {\n var styleRegex = /^style\\s+(\\w+)\\s+fill:([^,]+),stroke:([^,]+),stroke-width:(\\d+)px;/;\n if (line.startsWith('style')) {\n var match = line.match(styleRegex);\n if (match) {\n var id = match[1];\n var fill = match[2];\n var stroke = match[3];\n var strokeWidth = parseInt(match[4], 10);\n var data_2 = {\n id: id,\n fill: fill,\n stroke: stroke,\n strokeWidth: strokeWidth\n };\n var matchData = dataCollection.filter(function (x) { return x.id === data_2.id; });\n matchData[0].color = data_2.fill;\n matchData[0].stroke = data_2.stroke;\n matchData[0].strokeWidth = data_2.strokeWidth;\n }\n }\n };\n /**\n * @param {string[]} lines - The lines to be processed.\n * @param {FlowChartData[]} dataCollection - The data collection to be updated.\n * @param {string} arrowType - The type of arrow.\n * @returns { void }\n */\n Diagram.prototype.getNodeData = function (lines, dataCollection, arrowType) {\n var dataArray = [];\n var firstId = null;\n var secondId = null;\n var isExistCount = 0;\n var connectorLabel = '';\n var _loop_2 = function (i) {\n var line1 = lines[parseInt(i.toString(), 10)];\n var text = this_2.splitNested(line1);\n if (text[0].includes('|')) {\n // Extract content outside the '|'\n var match = text[0].match(/\\|([^|]*)\\|/);\n if (match) {\n connectorLabel = match[1];\n }\n var parts = text[0].split('|');\n if (parts.length >= 3) {\n text[0] = parts[2].trim();\n }\n }\n var id = text[0].trim();\n if (i === 0) {\n firstId = id;\n }\n else {\n secondId = id;\n }\n var exsist = dataCollection.find(function (data) { return data.id === id; });\n if (!exsist) {\n var labelShape = text.length > 1 ? text[1] : text[0];\n var shape = this_2.getShape(labelShape);\n var label = labelShape.replace(/[\\\\[\\]\\\\(\\\\)\\\\{\\\\}\\\\{\\\\}\\\\/>]/g, '');\n var data = {\n id: id,\n name: label,\n shape: shape,\n color: 'white',\n parentId: []\n };\n dataArray.push(data);\n }\n else {\n isExistCount++;\n }\n };\n var this_2 = this;\n for (var i = 0; i < lines.length; i++) {\n _loop_2(i);\n }\n if (dataArray.length) {\n var lastItem = dataArray[dataArray.length - 1];\n if (lastItem.id !== firstId) {\n lastItem.parentId.push(firstId);\n if (lastItem.label) {\n lastItem.label.push(connectorLabel);\n }\n else {\n lastItem.label = [connectorLabel];\n }\n }\n else {\n var data = dataCollection.find(function (data) { return data.id === secondId; });\n if (data.parentId) {\n data.parentId.push(firstId);\n }\n else {\n data.parentId = [firstId];\n }\n if (data.label) {\n data.label.push(connectorLabel);\n }\n else {\n data.label = [connectorLabel];\n }\n }\n }\n else if (isExistCount === 2) {\n var filteredData = dataCollection.filter(function (flowData) { return flowData.id === secondId; })[0];\n filteredData.parentId = filteredData.parentId || [];\n filteredData.parentId.push(firstId);\n filteredData.label = filteredData.label || [];\n filteredData.label[filteredData.parentId.length - 1] = connectorLabel;\n }\n if (arrowType) {\n var filteredData = dataCollection.filter(function (flowData) { return flowData.id === secondId; })[0];\n if (filteredData) {\n filteredData.arrowType = arrowType;\n }\n }\n return dataArray;\n };\n /**\n * To split the text based on the nested brackets\n * @param {string} text - The text to be split based on nested brackets.\n * @returns {string[]} An array of strings split based on the nested brackets.\n */\n Diagram.prototype.splitNested = function (text) {\n var result = [];\n var current = '';\n var level = 0;\n var delimiter = '';\n for (var _i = 0, text_1 = text; _i < text_1.length; _i++) {\n var char = text_1[_i];\n if (char === '[' || char === '{' || char === '(' || char === '>') {\n if (level === 0) {\n if (current.trim().length > 0) {\n result.push(current.trim());\n }\n current = char; // Include the delimiter in the current part\n delimiter = char;\n level++;\n }\n else {\n current += char;\n level++;\n }\n }\n else if (char === ']' || char === '}' || char === ')') {\n if (level === 1 && char === delimiter) {\n current += char; // Include the delimiter in the current part\n result.push(current.trim());\n current = '';\n level--;\n }\n else if (level > 1) {\n current += char;\n level--;\n }\n else {\n current += char;\n }\n }\n else {\n current += char;\n }\n }\n if (current.trim().length > 0) {\n result.push(current.trim());\n }\n return result;\n };\n // Get shape based on the bracket\n Diagram.prototype.getShape = function (text) {\n var shape = {};\n if (text.startsWith('(((')) {\n shape = { type: 'Path', data: 'M 0 0 A 1 1 0 0 0 7 0 A 1 1 0 0 0 0 0 M -1 0 A 1 1 0 0 0 8 0 A 1 1 0 0 0 -1 0' };\n }\n else if (text.startsWith('((')) {\n shape = { shape: 'Ellipse', type: 'Basic' };\n }\n else if (text.startsWith('([')) {\n shape = { type: 'Flow', shape: 'Terminator' };\n }\n else if (text.startsWith('(')) {\n shape = { type: 'Flow', shape: 'Process' };\n }\n else if (text.startsWith('[[')) {\n shape = { type: 'Flow', shape: 'PreDefinedProcess' };\n }\n else if (text.startsWith('[/')) {\n if (text.endsWith('/]')) {\n shape = { type: 'Basic', shape: 'Parallelogram' };\n }\n else {\n shape = { type: 'Path', data: 'M 0 0 L 1 -1 L 5 -1 L 6 0 L 0 0' };\n }\n }\n else if (text.startsWith('[(')) {\n shape = { type: 'Path', data: 'M 0 1 L 0 6 C 2 7 4 7 6 6 L 6 1 C 5 0 1 0 0 1 C 1 2 5 2 6 1' };\n }\n else if (text.startsWith('[\\\\')) {\n if (text.endsWith('\\\\]')) {\n shape = { type: 'Path', data: 'M 0 0 L 12 0 L 14 2 L 2 2 L 0 0' };\n }\n else {\n shape = { type: 'Path', data: 'M 0 0 L 5 0 L 4 1 L 1 1 L 0 0' };\n }\n }\n else if (text.startsWith('[')) {\n shape = { type: 'Basic', shape: 'Rectangle' };\n }\n else if (text.startsWith('{{')) {\n shape = { type: 'Path', data: 'M 0 0 L 2 -2 L 11 -2 L 13 0 L 11 2 L 2 2 L 0 0' };\n }\n else if (text.startsWith('{')) {\n shape = { type: 'Flow', shape: 'Decision' };\n }\n else if (text.startsWith('>')) {\n shape = { type: 'Path', data: 'M 0 0 L 8 0 L 8 2 L 0 2 L 2 1 L 0 0' };\n }\n return shape;\n };\n /**\n * To get the html diagram content\n *\n * @returns { string } getDirection method .\\\n * @param {StyleSheetList} styleSheets - defines the collection of style files to be considered while exporting.\n */\n Diagram.prototype.getDiagramContent = function (styleSheets) {\n if (this.printandExportModule) {\n var data = this.printandExportModule.getDiagramContent(styleSheets);\n return data;\n }\n else {\n console.warn('[WARNING] :: Module \"PrintAndExport\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n return '';\n }\n };\n /**\n * Exports a diagram as a image.\n *\n * @returns { void } Exports a diagram as a image.\\\n * @param {string} image - A string representing the image content to be exported.\n * @param {IExportOptions} options -An object defining the properties of the image export.\n */\n Diagram.prototype.exportImage = function (image, options) {\n if (this.printandExportModule) {\n this.printandExportModule.exportImages(image, options);\n }\n else {\n console.warn('[WARNING] :: Module \"PrintAndExport\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n };\n /**\n * Prints the native or HTML nodes of the diagram as an image.\n *\n * @returns { void } Prints the native or HTML nodes of the diagram as an image. \\\n * @param {string} image - A string that defines the image content to be printed.\n * @param {IExportOptions} options - An IExportOptions object that defines the properties of the image and printing options.\n */\n Diagram.prototype.printImage = function (image, options) {\n if (this.printandExportModule) {\n options.printOptions = true;\n this.printandExportModule.exportImages(image, options);\n }\n else {\n console.warn('[WARNING] :: Module \"PrintAndExport\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n };\n /**\n * Define a limit on the number of history entries that the diagram's history manager can store. This can help manage memory usage and control the undo/redo history size. Or\n * Sets the limit for the history entries in the diagram.\n *\n * @returns { void } Define a limit on the number of history entries that the diagram's history manager can store. This can help manage memory usage and control the undo/redo history size. Or Sets the limit for the history entries in the diagram.\n * @param {number} stackLimit - The limit for the history manager's stack.\n */\n Diagram.prototype.setStackLimit = function (stackLimit) {\n if (this.undoRedoModule && stackLimit) {\n this.historyManager.stackLimit = stackLimit;\n this.undoRedoModule.applyLimit(this.historyManager.currentEntry, stackLimit, this, true);\n }\n };\n /**\n * Clears the history of the diagram, removing all the recorded actions from the undo and redo history.\n * @returns { void } Clears the history of the diagram, removing all the recorded actions from the undo and redo history.\\\n */\n Diagram.prototype.clearHistory = function () {\n if (this.undoRedoModule) {\n this.undoRedoModule.clearHistory(this);\n }\n };\n /**\n * Retrieves the bounding rectangle that encloses the entire diagram.\n * @returns { void } TRetrieves the bounding rectangle that encloses the entire diagram. \\\n */\n Diagram.prototype.getDiagramBounds = function () {\n if (this.printandExportModule) {\n var bounds = this.printandExportModule.getDiagramBounds('', {});\n bounds.width = bounds.width > this.scrollSettings.viewPortWidth ?\n bounds.width + (bounds.x > 0 ? bounds.x : 0) : this.scrollSettings.viewPortWidth;\n bounds.height = bounds.height > this.scrollSettings.viewPortHeight ?\n bounds.height + (bounds.y > 0 ? bounds.y : 0) : this.scrollSettings.viewPortHeight;\n bounds.x = bounds.x > 0 ? 0 : bounds.x;\n bounds.y = bounds.y > 0 ? 0 : bounds.y;\n return bounds;\n }\n else {\n console.warn('[WARNING] :: Module \"PrintAndExport\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n return new Rect();\n }\n };\n /**\n * Exports the diagram as an image or SVG element based on the specified options.\n *\n * @returns { void } Exports the diagram as an image or SVG element based on the specified options.\\\n * @param {IExportOptions} options - An object defining how the diagram image should be exported.\n */\n Diagram.prototype.exportDiagram = function (options) {\n if (this.printandExportModule) {\n var data = this.printandExportModule.exportDiagram(options);\n return data;\n }\n else {\n console.warn('[WARNING] :: Module \"PrintAndExport\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n return '';\n }\n };\n /**\n * Prints the diagram.\n *\n * @returns { void } Prints the diagram.\\\n * @param {IPrintOptions} optons - An IPrintOptions object that defines how the diagram is to be printed.\n */\n Diagram.prototype.print = function (options) {\n if (this.printandExportModule) {\n this.printandExportModule.print(options);\n }\n else {\n console.warn('[WARNING] :: Module \"PrintAndExport\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n };\n /**\n * Adds ports to a node or connector at runtime. \\\n *\n * @returns { void } Adds ports to a node or connector at runtime.\\\n * @param { Node | ConnectorModel} obj - object representing the node or connector to which ports will be added.\n * @param {ShapeAnnotationModel[] | PathAnnotationModel[]} ports - objects representing the ports to be added.\n * @blazorArgsType obj|DiagramNode\n */\n Diagram.prototype.addPorts = function (obj, ports) {\n this.protectPropertyChange(true);\n var exist = false;\n //Removed isBlazor code\n obj = this.nameTable[obj.id] || obj;\n var newObj;\n if (ports.length > 1) {\n this.startGroupAction();\n }\n var _loop_3 = function (i) {\n //907755 - Issue in add/remove port on runtime\n exist = obj.ports.some(function (port) { return port.id === ports[parseInt(i.toString(), 10)].id; });\n if (exist) {\n return \"continue\";\n }\n if (obj instanceof Node) {\n newObj = new PointPort(obj, 'ports', ports[parseInt(i.toString(), 10)], true);\n obj.ports.push(newObj);\n }\n else if (obj instanceof Connector) {\n newObj = new PathPort(obj, 'ports', ports[parseInt(i.toString(), 10)], true);\n obj.ports.push(newObj);\n }\n //Removed isBlazor code\n if (obj.children) {\n // 907773: Add port to Group at runtime Issue Fix\n var container = obj.wrapper;\n for (var k = 0; k < container.children.length; k++) {\n var wrapper = container.children[parseInt(k.toString(), 10)];\n if ((wrapper.id).match(container.id)) {\n obj.initPort(this_3.getDescription, wrapper, newObj);\n break;\n }\n }\n }\n else {\n var canvas = obj.wrapper;\n if (obj instanceof Node) {\n canvas.children.push(obj.initPortWrapper(obj.ports[obj.ports.length - 1]));\n }\n else if (obj instanceof Connector) {\n var points = obj.type === 'Bezier' ? obj.intermediatePoints : obj.getConnectorPoints(obj.type);\n points = obj.clipDecorators(obj, points);\n var bounds = Rect.toBounds(points);\n // eslint-disable-next-line max-len\n canvas.children.push(obj.initPort(obj.ports[obj.ports.length - 1], points, bounds, undefined));\n }\n }\n if (!(this_3.diagramActions & DiagramAction.UndoRedo) && !(this_3.diagramActions & DiagramAction.Group)) {\n var entry = {\n type: 'PortCollectionChanged', changeType: 'Insert', undoObject: cloneObject(newObj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this_3.addHistoryEntry(entry);\n }\n };\n var this_3 = this;\n for (var i = 0; i < ports.length; i++) {\n _loop_3(i);\n }\n if (ports.length > 1) {\n this.endGroupAction();\n }\n //Removed isBlazor code\n obj.wrapper.measure(new Size(obj.width, obj.height));\n obj.wrapper.arrange(obj.wrapper.desiredSize);\n this.updateDiagramObject(obj);\n this.protectPropertyChange(false);\n };\n /**\n * Adds constraints at run time. \\\n *\n * @returns { void }Add constraints at run time .\\\n * @param {number} constraintsType - The source value for constraints.\n * @param {number} constraintsValue - The target value for constraints.\n *\n */\n Diagram.prototype.addConstraints = function (constraintsType, constraintsValue) {\n return constraintsType | constraintsValue;\n };\n /**\n * Remove constraints at run time. \\\n *\n * @returns { void }Remove constraints at run time.\\\n * @param {number} constraintsType - The type of constraints to be removed.\n * @param {number} constraintsValue - The value of constraints to be removed.\n *\n */\n Diagram.prototype.removeConstraints = function (constraintsType, constraintsValue) {\n return constraintsType & ~constraintsValue;\n };\n /**\n * Add labels in node at the run time in the blazor platform \\\n *\n * @returns { void } Add labels in node at the run time in the blazor platform \\\n * @param {NodeModel} obj - provide the obj value.\n * @param {ShapeAnnotationModel[]} labels - provide the labels value.\n *\n */\n Diagram.prototype.addNodeLabels = function (obj, labels) {\n this.addLabels(obj, labels);\n };\n /**\n * Adds labels to a connector at runtime in the Blazor platform.\\\n *\n * @returns { void } Adds labels to a connector at runtime in the Blazor platform.\\\n * @param {ConnectorModel} obj - The connector to which labels will be added.\n * @param {PathAnnotationModel[]} labels - An array of labels to add to the connector.\n *\n */\n Diagram.prototype.addConnectorLabels = function (obj, labels) {\n this.addLabels(obj, labels);\n };\n /**\n * Adds labels to a node or connector at runtime. \\\n *\n * @returns { void } Adds labels to a node or connector at runtime.\\\n * @param {NodeModel | ConnectorModel} obj - The node or connector to which labels will be added.\n * @param {ShapeAnnotationModel[] | PathAnnotation[] | PathAnnotationModel[]} labels - An array of label objects to be added.\n *\n */\n Diagram.prototype.addLabels = function (obj, labels) {\n this.protectPropertyChange(true);\n //Removed isBlazor code\n obj = this.nameTable[obj.id] || obj;\n var canvas = obj.wrapper;\n var newObj;\n if (labels.length > 1) {\n this.startGroupAction();\n }\n for (var i = 0; i < labels.length; i++) {\n if (obj instanceof Node) {\n newObj = new ShapeAnnotation(obj, 'annotations', labels[parseInt(i.toString(), 10)], true);\n obj.annotations.push(newObj);\n //Removed isBlazor code\n if (obj.children) {\n var node = obj;\n for (var i_2 = 0; i_2 < node.wrapper.children.length; i_2++) {\n if (node.wrapper.children[parseInt(i_2.toString(), 10)].id === node.id + 'group_container') {\n var container = node.wrapper.children[parseInt(i_2.toString(), 10)];\n container.children.push(obj.initAnnotationWrapper(obj.annotations[obj.annotations.length - 1], this.element.id));\n }\n }\n }\n else {\n canvas.children.push(obj.initAnnotationWrapper(obj.annotations[obj.annotations.length - 1], this.element.id));\n }\n }\n else if (obj instanceof Connector) {\n newObj = new PathAnnotation(obj, 'annotations', labels[parseInt(i.toString(), 10)], true);\n obj.annotations.push(newObj);\n //Removed isBlazor code\n var segment = canvas.children[0];\n var bounds = new Rect(segment.offsetX - segment.width / 2, segment.offsetY - segment.height / 2, segment.width, segment.height);\n canvas.children.push(obj.getAnnotationElement(obj.annotations[obj.annotations.length - 1], obj.intermediatePoints, bounds, this.getDescription, this.element.id));\n }\n if (!(this.diagramActions & DiagramAction.UndoRedo) && !(this.diagramActions & DiagramAction.Group)) {\n var entry = {\n type: 'LabelCollectionChanged', changeType: 'Insert', undoObject: cloneObject(newObj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n }\n if (labels.length > 1) {\n this.endGroupAction();\n }\n //Removed isBlazor code\n obj.wrapper.measure(new Size(canvas.width, canvas.height));\n obj.wrapper.arrange(canvas.desiredSize);\n this.updateDiagramObject(obj);\n this.protectPropertyChange(false);\n //EJ2-908488 - Added for Update annotations in overview\n this.refreshCanvasLayers();\n };\n /**\n *addChildToUmlNode - Add methods, members and attributes into a UML class runtime. \\\n *\n * @returns { void } Add.\n * @param {NodeModel} node - Specifies the existing UmlClass node in the diagram to which you intend to add child elements.\n * @param {UmlClassMethodModel | UmlClassAttributeModel | UmlEnumerationMemberModel} child - Specify the child elements, such as attributes, members, or methods, to be added to the UML class.\n * @param {UmlClassChildType} umlChildType - Specify the enum that you intend to add to the UML class.\n *\n */\n Diagram.prototype.addChildToUmlNode = function (node, child, umlChildType) {\n var classifier;\n var method;\n var attribute;\n var member;\n var textWrap = 'NoWrap';\n //Members and attributes are exclusively added to the classShape and interfaceShape within the UML node\n if (node.shape.classifier === 'Class' || node.shape.classifier === 'Interface') {\n if (umlChildType === 'Method') {\n method = new UmlClassMethod(node, '', child);\n if (node.shape.classifier === 'Class') {\n node.shape.classShape.methods.push(method);\n classifier = node.shape.classShape;\n }\n else if (node.shape.classifier === 'Interface') {\n node.shape.interfaceShape.methods.push(method);\n classifier = node.shape.interfaceShape;\n }\n //this method triggers for adding methods at runtime\n getClassMembersChild(node, this, classifier, textWrap);\n }\n else if (umlChildType === 'Attribute') {\n attribute = new UmlClassAttribute(node, '', child);\n if (node.shape.classifier === 'Class') {\n node.shape.classShape.attributes.push(attribute);\n classifier = node.shape.classShape;\n }\n else if (node.shape.classifier === 'Interface') {\n node.shape.interfaceShape.attributes.push(attribute);\n classifier = node.shape.interfaceShape;\n }\n //this method triggers for adding attributes at runtime\n getClassAttributesChild(node, this, classifier, textWrap);\n }\n }\n else if (node.shape.classifier === 'Enumeration' && umlChildType === 'Member') {\n member = new UmlEnumerationMember(node, '', child);\n node.shape.enumerationShape.members.push(member);\n classifier = node.shape.enumerationShape;\n //this method triggers for adding members at runtime\n getClassNodesChild(node, this, classifier, textWrap);\n }\n //The clearSelection methods is invoked to update the newly added child type dynamically at runtime\n this.clearSelection();\n this.updateSelector();\n };\n /**\n * Dynamically add lanes to a swimlane at runtime. You can specify the swimlane (node), the lanes to be added (lane), and an optional index to determine where the lanes should be inserted. \\\n *\n * @returns { void } Dynamically add lanes to a swimlane at runtime. You can specify the swimlane (node), the lanes to be added (lane), and an optional index to determine where the lanes should be inserted.\\\n * @param {NodeModel} node - The swimlane to which lanes will be added.\n * @param {LaneModel[]} lane -An array of LaneModel objects representing the lanes to be added.\n * @param {number} index - The index at which the lanes should be inserted.\n *\n */\n Diagram.prototype.addLanes = function (node, lane, index) {\n node = this.nameTable[node.id] || node;\n for (var i = 0; i < lane.length; i++) {\n addLane(this, node, lane[parseInt(i.toString(), 10)], index);\n if (index !== undefined) {\n index += 1;\n }\n }\n this.updateDiagramElementQuad();\n };\n /**\n * Adds phases to a swimlane at runtime. \\\n *\n * @returns { void } Adds phases to a swimlane at runtime. \\\n * @param {NodeModel} node - object representing the swimlane to which phases will be added.\n * @param {PhaseModel[]} phases - objects representing the phases to be added.\n *\n */\n Diagram.prototype.addPhases = function (node, phases) {\n node = this.nameTable[node.id] || node;\n for (var i = 0; i < phases.length; i++) {\n //897967-Exception thrown when adding Phases at runtime and perform undo Action\n this.protectPropertyChange(true);\n addPhase(this, node, phases[parseInt(i.toString(), 10)]);\n this.protectPropertyChange(false);\n }\n this.updateDiagramElementQuad();\n };\n /**\n *Removes a dynamic lane from a swimlane at runtime. \\\n *\n * @returns { void } Removes a dynamic lane from a swimlane at runtime.\\\n * @param {NodeModel} node - representing the swimlane to remove the lane from.\n * @param {LaneModel} lane - representing the dynamic lane to be removed.\n *\n */\n Diagram.prototype.removeLane = function (node, lane) {\n removeLane(this, undefined, node, lane);\n this.updateDiagramElementQuad();\n };\n /**\n *Removes a phase from a swimlane at runtime.\\\n *\n * @returns { void } Removes a phase from a swimlane at runtime.\\\n * @param {NodeModel} node - representing the swimlane to remove the phase from.\n * @param {PhaseModel} phase - representing the phase to be removed.\n *\n */\n Diagram.prototype.removePhase = function (node, phase) {\n removePhase(this, undefined, node, phase);\n this.updateDiagramElementQuad();\n };\n //827745-support to edit Segment for Straight connector at runtime.\n /**\n * Used to add or remove intermediate segments to the straight connector.\n *\n * @returns { void } Used to add or remove intermediate segments to the straight connector.\n * @param {IEditSegmentOptions} editOptions - An object containing various options for adding/removing segments.\n *\n */\n Diagram.prototype.editSegment = function (editOptions) {\n if (editOptions.connector.type === 'Straight') {\n var connector = editOptions.connector;\n var mode = editOptions && editOptions.SegmentEditing ? editOptions.SegmentEditing : 'Toggle';\n var point = editOptions.point;\n var hasPoint = void 0;\n var allowEdit = void 0;\n for (var i = 0; i < connector.segments.length; i++) {\n var segment = (connector.segments)[parseInt(i.toString(), 10)];\n if (contains(point, segment.point, connector.hitPadding)) {\n hasPoint = true;\n break;\n }\n }\n if ((hasPoint && mode === 'Remove') || (!hasPoint && mode === 'Add')) {\n allowEdit = true;\n }\n if ((connector.type === 'Straight') && (allowEdit || mode === 'Toggle')) {\n this.connectorEditingToolModule.addOrRemoveSegment(connector, point, this.commandHandler);\n }\n }\n };\n Diagram.prototype.removelabelExtension = function (obj, labels, j, wrapper) {\n for (var i = 0; i < wrapper.children.length; i++) {\n var canvas = wrapper.children[parseInt(i.toString(), 10)];\n if ((canvas instanceof TextElement) || (canvas instanceof DiagramHtmlElement)) {\n if (canvas.id.match('_' + labels[parseInt(j.toString(), 10)].id + '$')) {\n for (var k = 0; k < obj.annotations.length; k++) {\n if (canvas.id.match('_' + obj.annotations[parseInt(k.toString(), 10)].id + '$')) {\n if (!(this.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'LabelCollectionChanged', changeType: 'Remove', undoObject: cloneObject(obj.annotations[parseInt(k.toString(), 10)]),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n obj.annotations.splice(k, 1);\n }\n }\n wrapper.children.splice(i, 1);\n if (this.mode === 'SVG') {\n var element = getDiagramElement(canvas.id, this.element.id);\n if (element) {\n var element_1 = getDiagramElement(canvas.id, this.element.id);\n element_1.parentNode.removeChild(element_1);\n }\n var textElement = getDiagramElement(canvas.id + '_text', this.element.id);\n if (textElement) {\n element = getDiagramElement(canvas.id + '_text', this.element.id);\n element.parentNode.removeChild(element);\n }\n var htmlElement = getDiagramElement(canvas.id + '_html_element', this.element.id);\n if (htmlElement) {\n htmlElement.parentNode.removeChild(htmlElement);\n }\n }\n else {\n this.refreshCanvasLayers();\n }\n }\n }\n }\n };\n /**\n * Removes labels from a node or connector at runtime. \\\n *\n * @returns { string } Removes labels from a node or connector at runtime. \\\n * @param { Node | ConnectorModel} obj - Representing the node or connector to remove labels from.\n * @param {ShapeAnnotationModel[] | PathAnnotationModel[]} labels - objects representing the labels to be removed.\n *\n */\n Diagram.prototype.removeLabels = function (obj, labels) {\n //Removed isBlazor code\n obj = this.nameTable[obj.id] || obj;\n // Removed isBlazor code\n if (labels.length > 1) {\n this.startGroupAction();\n }\n for (var j = labels.length - 1; j >= 0; j--) {\n if (obj.children && obj.children.length > 0) {\n //Bug 886881: Exception throws while ungrouping a group node with annotations.\n //Added the condition to check the wrapper id is same as the obj id to remove the group node label alone while unGroup.\n var groupWrapper = obj.wrapper.children.filter(function (wrapper) { return wrapper.id === obj.id + 'group_container'; });\n if (groupWrapper && groupWrapper.length > 0) {\n this.removelabelExtension(obj, labels, j, groupWrapper[0]);\n }\n }\n else {\n this.removelabelExtension(obj, labels, j, obj.wrapper);\n }\n }\n if (labels.length > 1) {\n this.endGroupAction();\n }\n //EJ2-908488 - Added for Update annotations in overview\n this.refreshCanvasLayers();\n };\n Diagram.prototype.removePortsExtenion = function (obj, ports, j, wrapper) {\n for (var i = 0; i < wrapper.children.length; i++) {\n var canvas = wrapper.children[parseInt(i.toString(), 10)];\n if (canvas instanceof PathElement) {\n if (canvas.id.match('_' + ports[parseInt(j.toString(), 10)].id + '$')) {\n for (var k = 0; k < obj.ports.length; k++) {\n if (canvas.id.match('_' + obj.ports[parseInt(k.toString(), 10)].id + '$')) {\n if (!(this.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'PortCollectionChanged', changeType: 'Remove', undoObject: cloneObject(obj.ports[parseInt(k.toString(), 10)]),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n obj.ports.splice(k, 1);\n }\n }\n wrapper.children.splice(i, 1);\n if (this.mode === 'SVG') {\n var element = getDiagramElement(canvas.id, this.element.id);\n // 905159: undo redo the multi-node after the group and ungrouping the multi nodes Issue fix\n if (element) {\n element.parentNode.removeChild(element);\n }\n }\n else {\n this.refreshCanvasLayers();\n }\n }\n }\n }\n };\n /**\n * Removes Ports at run time. \\\n *\n * @returns { void } Removes Ports at run time.\\\n * @param {Node} obj - The node or connector to remove ports from.\n * @param {PointPortModel[]} ports - An array of ports to be removed.\n *\n */\n Diagram.prototype.removePorts = function (obj, ports) {\n //Removed isBlazor code\n obj = this.nameTable[obj.id] || obj;\n //Removed isBlazor code\n if (ports.length > 1) {\n this.startGroupAction();\n }\n for (var j = ports.length - 1; j >= 0; j--) {\n if (obj.children && obj.children.length > 0) {\n for (var k = 0; k < obj.wrapper.children.length; k++) {\n //EJ2-66928 Bug- added for ungroup Issue to only remove the grouping ports and not to remove ports of the children nodes\n var wrapper = obj.wrapper.children[parseInt(k.toString(), 10)];\n if ((wrapper.id).match(obj.wrapper.id)) {\n this.removePortsExtenion(obj, ports, j, obj.wrapper.children[parseInt(k.toString(), 10)]);\n }\n }\n }\n else {\n this.removePortsExtenion(obj, ports, j, obj.wrapper);\n }\n }\n if (ports.length > 1) {\n this.endGroupAction();\n }\n };\n //public methods - end region\n /**\n * getSizeValue method \\\n *\n * @returns { string } getSizeValue method .\\\n * @param {string | number} real - provide the real value.\n * @param {string | number} rulerSize - provide the rulerSize value.\n *\n * @private\n */\n Diagram.prototype.getSizeValue = function (real, rulerSize) {\n var value;\n if (real.toString().indexOf('px') > 0) {\n value = real.toString();\n }\n else if (real.toString().indexOf('%') > 0) {\n value = rulerSize !== undefined ? '100%' : real.toString();\n }\n else {\n value = real.toString() + 'px';\n }\n if (rulerSize) {\n var position = getRulerSize(this);\n value = 'calc(' + value + ' - ' + rulerSize + 'px)';\n }\n return value;\n };\n Diagram.prototype.renderRulers = function () {\n if (this.rulerSettings.showRulers) {\n renderOverlapElement(this);\n renderRuler(this, true);\n renderRuler(this, false);\n }\n else {\n removeRulerElements(this);\n }\n };\n Diagram.prototype.intOffPageBackground = function () {\n var position = new Size();\n position = getRulerSize(this);\n var element = document.getElementById(this.element.id + 'content');\n var width = this.getSizeValue(this.width, position.width);\n var height = this.getSizeValue(this.height, position.height);\n var style = this.rulerSettings.showRulers ?\n 'width:' + width + '; height:' + height + ';' +\n 'top:' + position.height + 'px;left:' + position.width + 'px;' +\n 'overflow: scroll;position:absolute;overflow:auto;' :\n 'width:' + width + '; height:' + height + ';position:absolute;' +\n ' left:0px; top:0px;overflow: auto;';\n var attr = {\n 'id': this.element.id + 'content',\n 'tabindex': '0',\n 'style': style\n };\n if (!element) {\n this.diagramCanvas = createHtmlElement('div', attr);\n this.element.appendChild(this.diagramCanvas);\n }\n else {\n this.diagramCanvas = element;\n applyStyleAgainstCsp(this.diagramCanvas, style);\n }\n this.diagramCanvas.style.background = this.backgroundColor;\n };\n Diagram.prototype.initDiagram = function () {\n this.intOffPageBackground();\n setAttributeHtml(this.element, {\n style: 'width:' + this.getSizeValue(this.width) + '; height:'\n + this.getSizeValue(this.height) + ';position:relative;overflow:hidden;'\n });\n };\n Diagram.prototype.renderHiddenUserHandleTemplateLayer = function (bounds) {\n //let element: HTMLElement;\n var attributes = {\n 'class': this.element.id + '_hiddenUserHandleTemplate',\n 'style': 'width:' + bounds.width + 'px; height:' + bounds.height + 'px;' + 'visibility:hidden ; overflow: hidden;'\n };\n var element = createHtmlElement('div', attributes);\n this.element.appendChild(element);\n };\n Diagram.prototype.renderBackgroundLayer = function (bounds, commonStyle) {\n var bgLayer = this.createSvg(this.element.id + '_backgroundLayer_svg', bounds.width, bounds.height);\n applyStyleAgainstCsp(bgLayer, commonStyle);\n var backgroundImage = createSvgElement('g', {\n 'id': this.element.id + '_backgroundImageLayer',\n 'class': 'e-background-image-layer'\n });\n bgLayer.appendChild(backgroundImage);\n var attr = { 'id': this.element.id + '_backgroundLayer', 'class': 'e-background-layer' };\n var background = createSvgElement('g', attr);\n bgLayer.appendChild(background);\n this.diagramCanvas.appendChild(bgLayer);\n };\n Diagram.prototype.renderGridLayer = function (bounds, commonStyle) {\n var svgGridSvg = this.createSvg(this.element.id + '_gridline_svg', bounds.width, bounds.height);\n svgGridSvg.setAttribute('class', 'e-grid-layer');\n var svgGrid = createSvgElement('g', { 'id': this.element.id + '_gridline' });\n var rect = createSvgElement('rect', {\n 'id': this.element.id + '_grid_rect', 'x': '0', 'y': '0', 'width': '100%', 'height': '100%'\n });\n if (checkBrowserInfo()) {\n //EJ2-832888-To remove the black grid lines appearing in the safari browser.\n var url = new URL(window.location.href);\n // Check if the URL contains a query string\n if (url.search !== '') {\n rect.setAttribute('fill', 'url(#' + this.element.id + '_pattern)');\n }\n else {\n rect.setAttribute('fill', 'url(' + location.protocol + '//' + location.host + location.pathname +\n '#' + this.element.id + '_pattern)');\n }\n }\n else {\n rect.setAttribute('fill', 'url(#' + this.element.id + '_pattern)');\n }\n svgGrid.appendChild(rect);\n svgGridSvg.appendChild(svgGrid);\n this.diagramCanvas.appendChild(svgGridSvg);\n setAttributeSvg(svgGridSvg, { 'style': commonStyle });\n };\n Diagram.prototype.renderDiagramLayer = function (bounds, commonStyle) {\n var attributes = {\n 'id': this.element.id + '_diagramLayer_div',\n 'style': 'width:' + bounds.width + 'px; height:' + bounds.height + 'px;' + commonStyle\n };\n this.diagramLayerDiv = createHtmlElement('div', attributes);\n if (this.mode === 'SVG') {\n var diagramSvg = this.createSvg(this.element.id + '_diagramLayer_svg', bounds.width, bounds.height);\n diagramSvg.style['pointer-events'] = 'none';\n diagramSvg.setAttribute('class', 'e-diagram-layer');\n var diagramLayer = createSvgElement('g', { 'id': this.element.id + '_diagramLayer' });\n var transformationLayer = createSvgElement('g', {});\n this.diagramLayer = diagramLayer;\n diagramSvg.style['pointer-events'] = 'all';\n transformationLayer.appendChild(diagramLayer);\n diagramSvg.appendChild(transformationLayer);\n this.diagramLayerDiv.appendChild(diagramSvg);\n }\n else {\n this.diagramLayer = CanvasRenderer.createCanvas(this.element.id + '_diagram', bounds.width, bounds.height);\n applyStyleAgainstCsp(this.diagramLayer, 'position:absolute;left:0px;top:0px;');\n this.diagramLayerDiv.appendChild(this.diagramLayer);\n }\n this.diagramCanvas.appendChild(this.diagramLayerDiv);\n };\n Diagram.prototype.initLayers = function () {\n var commonStyle = 'position:absolute;top:0px;left:0px;overflow:hidden;pointer-events:none;';\n var container = document.getElementById(this.element.id);\n var bounds = container.getBoundingClientRect();\n var scrollerSize = getScrollerWidth();\n this.scroller.scrollerWidth = scrollerSize;\n this.scroller.setViewPortSize(bounds.width, bounds.height);\n this.renderRulers();\n var measureWindowElement = 'measureElement';\n if (window[\"\" + measureWindowElement]) {\n window[\"\" + measureWindowElement] = null;\n var measureElements = document.getElementById('measureElement');\n measureElements.remove();\n }\n createMeasureElements();\n // this.renderBackgroundImageLayer(bounds, commonStyle);\n this.renderBackgroundLayer(bounds, commonStyle);\n this.renderGridLayer(bounds, commonStyle);\n this.renderDiagramLayer(bounds, commonStyle);\n this.renderHTMLLayer(bounds, commonStyle);\n this.renderPortsExpandLayer(bounds, commonStyle);\n this.renderNativeLayer(bounds, commonStyle);\n this.renderAdornerLayer(bounds, commonStyle);\n this.renderHiddenUserHandleTemplateLayer(bounds);\n };\n Diagram.prototype.renderAdornerLayer = function (bounds, commonStyle) {\n var divElement = createHtmlElement('div', {\n 'id': this.element.id + '_diagramAdornerLayer',\n 'style': 'width:' + bounds.width + 'px;height:' + bounds.height + 'px;' + commonStyle\n });\n var element = createHtmlElement('div', {\n 'id': this.element.id + '_diagramUserHandleLayer',\n 'style': 'width:' + bounds.width + 'px;height:' + bounds.height + 'px;' + commonStyle\n });\n element.setAttribute('class', 'e-userHandle-layer');\n divElement.appendChild(element);\n var svgAdornerSvg = this.createSvg(this.element.id + '_diagramAdorner_svg', bounds.width, bounds.height);\n svgAdornerSvg.setAttribute('class', 'e-adorner-layer');\n svgAdornerSvg.style['pointer-events'] = 'none';\n this.adornerLayer = createSvgElement('g', { 'id': this.element.id + '_diagramAdorner' });\n this.adornerLayer.style[' pointer-events'] = 'all';\n svgAdornerSvg.appendChild(this.adornerLayer);\n divElement.appendChild(svgAdornerSvg);\n this.diagramCanvas.appendChild(divElement);\n var svgSelector = createSvgElement('g', { 'id': this.element.id + '_SelectorElement' });\n this.adornerLayer.appendChild(svgSelector);\n setAttributeSvg(svgAdornerSvg, { style: 'pointer-events:none;' });\n };\n Diagram.prototype.renderPortsExpandLayer = function (bounds, commonStyle) {\n var svgPortsSvg = this.createSvg(this.element.id + '_diagramPorts_svg', bounds.width, bounds.height);\n svgPortsSvg.setAttribute('class', 'e-ports-expand-layer');\n var svgPortsLayer = createSvgElement('g', {\n 'id': this.element.id + '_diagramPorts',\n 'class': 'e-ports-layer',\n 'style': 'pointer-events: all;'\n });\n svgPortsSvg.appendChild(svgPortsLayer);\n var svgExpandLayer = createSvgElement('g', {\n 'id': this.element.id + '_diagramExpander',\n 'class': 'e-expand-layer',\n 'style': 'pointer-events: all;'\n });\n svgPortsSvg.appendChild(svgExpandLayer);\n this.diagramCanvas.appendChild(svgPortsSvg);\n setAttributeSvg(svgPortsSvg, { 'style': commonStyle });\n };\n Diagram.prototype.renderHTMLLayer = function (bounds, commonStyle) {\n this.htmlLayer = createHtmlElement('div', {\n 'id': this.element.id + '_htmlLayer',\n 'style': 'width:' + bounds.width + 'px; height:' + bounds.height + 'px;position:absolute;top:0px;' +\n 'left:0px;overflow:hidden;pointer-events:none;',\n 'class': 'e-html-layer'\n });\n var htmlLayerDiv = createHtmlElement('div', {\n 'id': this.element.id + '_htmlLayer_div',\n 'style': 'position:absolute;top:0px;left:0px;pointer-events:all;'\n });\n this.htmlLayer.appendChild(htmlLayerDiv);\n this.diagramCanvas.appendChild(this.htmlLayer);\n };\n Diagram.prototype.renderNativeLayer = function (bounds, commonStyle) {\n var nativeLayerSvg = this.createSvg(this.element.id + '_nativeLayer_svg', bounds.width, bounds.height);\n var nativeLayer = createSvgElement('g', { 'id': this.element.id + '_nativeLayer', 'style': 'pointer-events:all;' });\n nativeLayerSvg.appendChild(nativeLayer);\n this.diagramLayerDiv.appendChild(nativeLayerSvg);\n setAttributeSvg(nativeLayerSvg, { 'class': 'e-native-layer', 'style': commonStyle });\n };\n /**\n * createSvg method \\\n *\n * @returns { void } createSvg method .\\\n * @param {string} id - provide the source value.\n * @param {string | number} width - provide the source value.\n * @param {string | number} height - provide the source value.\n *\n * @private\n */\n Diagram.prototype.createSvg = function (id, width, height) {\n var svgObj = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n setAttributeSvg(svgObj, { 'id': id, 'width': width, 'height': height });\n return svgObj;\n };\n Diagram.prototype.updateBazorShape = function () {\n for (var i = 0; i < this.nodes.length; i++) {\n var node = this.nodes[parseInt(i.toString(), 10)];\n switch (node.shape.type) {\n case 'Bpmn':\n node.shape.bpmnShape =\n node.shape.shape;\n break;\n case 'UmlActivity':\n node.shape.umlActivityShape =\n node.shape.shape;\n break;\n case 'Flow':\n node.shape.flowShape =\n node.shape.shape;\n break;\n case 'Basic':\n node.shape.basicShape =\n node.shape.shape;\n break;\n case 'Text':\n node.shape.textContent =\n node.shape.content;\n break;\n }\n }\n };\n Diagram.prototype.initObjects = function (isLoad) {\n this.updateBazorShape();\n if (!this.isLoading) {\n this.initData();\n }\n this.initLayerObjects();\n this.updateBridging(isLoad);\n };\n /**\n * initLayerObjects method \\\n *\n * @returns { void } initLayerObjects method .\\\n *\n * @private\n */\n Diagram.prototype.initLayerObjects = function () {\n var hasLayers = this.layers.length > 1; //const set: boolean = false;\n var connectors = [];\n //Removed isBlazor code\n var tempTabel = {};\n var bpmnTable = {};\n var groups = [];\n //Removed isBlazor code\n for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {\n var obj = _a[_i];\n obj.id = obj.id || randomId();\n this.addToLayer(obj, hasLayers);\n tempTabel[obj.id] = obj;\n }\n for (var _b = 0, _c = this.connectors; _b < _c.length; _b++) {\n var obj = _c[_b];\n obj.id = obj.id || randomId();\n this.addToLayer(obj, hasLayers);\n tempTabel[obj.id] = obj;\n }\n for (var _d = 0, _e = this.layers; _d < _e.length; _d++) {\n var layer = _e[_d];\n for (var _f = 0, _g = layer.objects; _f < _g.length; _f++) {\n var obj = _g[_f];\n if (tempTabel[\"\" + obj]) {\n if (!(tempTabel[\"\" + obj] instanceof Connector)) {\n if (tempTabel[\"\" + obj].children) {\n groups.push(obj);\n }\n else if ((tempTabel[\"\" + obj].shape instanceof BpmnShape) &&\n tempTabel[\"\" + obj].shape.activity.subProcess.processes &&\n tempTabel[\"\" + obj].shape.activity.subProcess.processes.length > 0) {\n bpmnTable[tempTabel[\"\" + obj].id] = obj;\n }\n else {\n this.initNodes(tempTabel[\"\" + obj], layer);\n }\n }\n else {\n var connector = tempTabel[\"\" + obj];\n if (connector.sourceID && connector.targetID) {\n var sourceNode = tempTabel[connector.sourceID];\n var targetNode = tempTabel[connector.targetID];\n var flag = true;\n if (this.isLoading && ((sourceNode && sourceNode.children && sourceNode.children.length > 0) ||\n (targetNode && targetNode.children && targetNode.children.length > 0))) {\n flag = false;\n }\n if ((sourceNode && sourceNode.wrapper && targetNode && targetNode.wrapper) && flag) {\n this.initConnectors(tempTabel[\"\" + obj], layer);\n }\n else {\n connectors.push(tempTabel[\"\" + obj]);\n }\n }\n else {\n // 908150: Connector not rendered properly when one end is a group and other end is an endpoint\n var sourceNode = tempTabel[connector.sourceID];\n var targetNode = tempTabel[connector.targetID];\n if ((sourceNode && sourceNode.children && sourceNode.children.length > 0) ||\n (targetNode && targetNode.children && targetNode.children.length > 0)) {\n connectors.push(tempTabel[\"\" + obj]);\n }\n else {\n this.initConnectors(tempTabel[\"\" + obj], layer);\n }\n }\n }\n }\n }\n if (this.bpmnModule) {\n for (var _h = 0, _j = this.bpmnModule.bpmnTextAnnotationConnector; _h < _j.length; _h++) {\n var obj = _j[_h];\n this.initConnectors(obj, undefined, true);\n }\n }\n }\n for (var _k = 0, _l = Object.keys(bpmnTable); _k < _l.length; _k++) {\n var obj = _l[_k];\n this.initObject(tempTabel[\"\" + obj]);\n this.bpmnModule.updateDocks(tempTabel[\"\" + obj], this);\n }\n var alignedGroups = this.alignGroup(groups, tempTabel);\n for (var _m = 0, alignedGroups_1 = alignedGroups; _m < alignedGroups_1.length; _m++) {\n var obj = alignedGroups_1[_m];\n var layer = this.commandHandler.getObjectLayer(obj);\n this.initNodes(tempTabel[\"\" + obj], layer);\n }\n for (var _o = 0, connectors_1 = connectors; _o < connectors_1.length; _o++) {\n var connector = connectors_1[_o];\n var layer = this.commandHandler.getObjectLayer(connector.id);\n this.initConnectors(connector, layer);\n }\n //Removed isBlazor code\n };\n Diagram.prototype.alignGroup = function (parents, tempTabel) {\n var newList = [];\n var parentist = [];\n var child;\n var childNode;\n var i;\n var j;\n for (i = 0; i < parents.length; i++) {\n child = parents[parseInt(i.toString(), 10)];\n childNode = tempTabel[\"\" + child];\n var node = void 0;\n if (childNode && childNode.children.length) {\n for (j = 0; j < childNode.children.length; j++) {\n node = childNode.children[parseInt(j.toString(), 10)];\n if (parents.indexOf(node) > -1 && (newList.indexOf(node) === -1) &&\n (parentist.indexOf(node) === -1)) {\n newList.splice(0, 0, node);\n }\n }\n }\n if (newList.indexOf(child) === -1) {\n parentist.push(child);\n }\n }\n newList = newList.concat(parentist);\n return newList;\n };\n Diagram.prototype.addToLayer = function (obj, hasLayers) {\n var layer;\n if (hasLayers) {\n layer = this.commandHandler.getObjectLayer(obj.id);\n }\n if (!hasLayers || !layer) {\n if (this.activeLayer.objects.indexOf(obj.id) === -1) {\n this.activeLayer.objects.push(obj.id);\n }\n }\n if ((obj instanceof Node || obj instanceof Connector) &&\n (obj.shape.type !== 'SwimLane' || (obj.children && obj.children.length > 0))) {\n if (obj.parentId) {\n var zIndex = this.swimlaneZIndexTable[obj.parentId];\n //EJ2-69247 - Unable to select node in swimlane after save and load\n var childzIndex = this.swimlaneChildTable[obj.id];\n if ((zIndex && zIndex !== -1) || ((childzIndex && childzIndex !== -1))) {\n obj.zIndex = this.swimlaneChildTable[obj.id];\n }\n }\n if (obj instanceof Connector && (obj.sourceID && obj.targetID)) {\n //EJ2-69577 - We have removed findNodeInLane method to improve the performance.\n if (this.activeLayer.objects.indexOf(obj.sourceID) !== -1 &&\n this.activeLayer.objects.indexOf(obj.targetID) !== -1) {\n this.setZIndex(layer || this.activeLayer, obj);\n }\n }\n else {\n this.setZIndex(layer || this.activeLayer, obj);\n }\n }\n };\n Diagram.prototype.updateLayer = function (newProp) {\n for (var _i = 0, _a = Object.keys(newProp.layers); _i < _a.length; _i++) {\n var key = _a[_i];\n var layerObject = this.layers[\"\" + key].objects;\n for (var _b = 0, layerObject_1 = layerObject; _b < layerObject_1.length; _b++) {\n var obj = layerObject_1[_b];\n var node = this.nameTable[\"\" + obj];\n if (newProp.layers[\"\" + key].visible !== undefined) {\n this.updateElementVisibility(node.wrapper, node, newProp.layers[\"\" + key].visible);\n }\n else if (newProp.layers[\"\" + key].lock === true) {\n this.unSelect(node);\n }\n }\n if (newProp.layers[\"\" + key].lock !== undefined) {\n this.layers[\"\" + key].lock = newProp.layers[\"\" + key].lock;\n }\n }\n if (this.mode !== 'SVG') {\n this.refreshDiagramLayer();\n }\n };\n Diagram.prototype.updateScrollSettings = function (newProp) {\n var hPan = (-this.scroller.horizontalOffset + newProp.scrollSettings.horizontalOffset || 0);\n var vPan = (-this.scroller.verticalOffset + newProp.scrollSettings.verticalOffset || 0);\n var oldValue = {\n VerticalOffset: this.scrollSettings.verticalOffset, HorizontalOffset: this.scrollSettings.horizontalOffset,\n ViewportHeight: this.scrollSettings.viewPortHeight, ViewportWidth: this.scrollSettings.viewPortWidth,\n CurrentZoom: this.scroller.currentZoom\n };\n if (hPan !== 0 || vPan !== 0) {\n this.pan(hPan, vPan);\n }\n var newValue = {\n VerticalOffset: this.scrollSettings.verticalOffset, HorizontalOffset: this.scrollSettings.horizontalOffset,\n ViewportHeight: this.scrollSettings.viewPortHeight, ViewportWidth: this.scrollSettings.viewPortWidth,\n CurrentZoom: this.scroller.currentZoom\n };\n var panStatus = 'Start';\n if (this.realActions & RealAction.PanInProgress) {\n panStatus = 'Progress';\n }\n var arg = {\n oldValue: oldValue,\n newValue: newValue, source: this,\n panState: panStatus\n };\n //Removed isBlazor code\n this.triggerEvent(DiagramEvent.scrollChange, arg);\n this.commandHandler.updatePanState(true);\n if (this.mode === 'Canvas' && (this.constraints & DiagramConstraints.Virtualization)) {\n this.refreshDiagramLayer();\n }\n };\n Diagram.prototype.initData = function () {\n var dataSourceSettings = this.dataSourceSettings.dataManager || this.dataSourceSettings.dataSource;\n var adapter = 'adaptorName';\n if (this.dataBindingModule && !(this.realActions & RealAction.PreventDataInit)) {\n if (dataSourceSettings && this.dataSourceSettings.connectionDataSource.dataManager) {\n var dataManager = this.dataSourceSettings.dataManager || this.dataSourceSettings.dataSource;\n this.nodes = this.generateData(dataManager, true);\n this.connectors = this.generateData(this.dataSourceSettings.connectionDataSource.dataManager, false);\n }\n else if (dataSourceSettings && dataSourceSettings.dataSource &&\n (dataSourceSettings.dataSource.url || (dataSourceSettings[\"\" + adapter] === 'BlazorAdaptor' &&\n !dataSourceSettings.dataSource.url))) {\n this.dataBindingModule.initSource(this.dataSourceSettings, this);\n }\n else {\n this.dataBindingModule.initData(this.dataSourceSettings, this);\n }\n }\n else if (dataSourceSettings && !this.dataBindingModule) {\n console.warn('[WARNING] :: Module \"DataBinding\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n };\n Diagram.prototype.generateData = function (dataSource, isNode) {\n var nodes = [];\n var i;\n for (i = 0; i < dataSource.length; i++) {\n var row = dataSource[parseInt(i.toString(), 10)];\n var node = isNode ? this.makeData(row, true) : this.makeData(row, false);\n if (node && node.id && (!findNodeByName(nodes, node.id))) {\n nodes.push(node);\n }\n }\n return (nodes);\n };\n Diagram.prototype.makeData = function (row, isNode) {\n var i;\n var fields = isNode ? this.dataSourceSettings : this.dataSourceSettings.connectionDataSource;\n var data = {};\n data.id = row[fields.id] ? row[fields.id] : randomId();\n if (fields.sourceID) {\n data.sourceID = row[fields.sourceID];\n }\n if (fields.targetID) {\n data.targetID = row[fields.targetID];\n }\n if (row[fields.sourcePointX] && row[fields.sourcePointY]) {\n data.sourcePoint = { 'x': Number(row[fields.sourcePointX]), 'y': Number(row[fields.sourcePointY]) };\n }\n if (row[fields.targetPointX] && row[fields.targetPointY]) {\n data.targetPoint = { 'x': Number(row[fields.targetPointX]), 'y': Number(row[fields.targetPointY]) };\n }\n if (fields.crudAction.customFields && fields.crudAction.customFields.length > 0) {\n for (i = 0; i < fields.crudAction.customFields.length; i++) {\n data[fields.crudAction.customFields[parseInt(i.toString(), 10)]]\n = row[fields.crudAction.customFields[parseInt(i.toString(), 10)]];\n }\n }\n return data;\n };\n Diagram.prototype.initNodes = function (obj, layer) {\n this.preventDiagramUpdate = true;\n this.initObject(obj, layer);\n this.preventDiagramUpdate = false;\n };\n Diagram.prototype.initConnectors = function (obj, layer, independentObj) {\n this.preventDiagramUpdate = true;\n this.initObject(obj, layer, independentObj);\n this.updateEdges(obj);\n this.preventDiagramUpdate = false;\n };\n Diagram.prototype.setZIndex = function (layer, obj) {\n //should be changed\n var currentLayer = layer;\n if ((obj).zIndex === Number.MIN_VALUE) {\n while (currentLayer.zIndexTable[currentLayer.objectZIndex + 1]) {\n layer.objectZIndex++;\n }\n obj.zIndex = ++currentLayer.objectZIndex;\n }\n else {\n var index = obj.zIndex;\n if (currentLayer.zIndexTable[parseInt(index.toString(), 10)]) {\n var tabelLength = Object.keys(currentLayer.zIndexTable).length;\n for (var i = 0; i < tabelLength; i++) {\n if (i === index) {\n for (var j_1 = tabelLength; j_1 > index; j_1--) {\n currentLayer.zIndexTable[parseInt(j_1.toString(), 10)] = currentLayer.zIndexTable[j_1 - 1];\n if (this.nameTable[currentLayer.zIndexTable[parseInt(j_1.toString(), 10)]]) {\n this.nameTable[currentLayer.zIndexTable[parseInt(j_1.toString(), 10)]].zIndex = j_1;\n }\n }\n currentLayer.zIndexTable[parseInt(i.toString(), 10)] = obj.id;\n }\n }\n }\n }\n };\n Diagram.prototype.initializeDiagramLayers = function () {\n //const tempLayers: LayerModel[] = this.layers;\n for (var i = 0; i < this.layers.length; i++) {\n if (this.layers[parseInt(i.toString(), 10)].zIndex !== -1) {\n var temp = this.layers[parseInt(i.toString(), 10)];\n this.layers[parseInt(i.toString(), 10)] = this.layers[this.layers[parseInt(i.toString(), 10)].zIndex];\n this.layers[temp.zIndex] = temp;\n }\n }\n for (var _i = 0, _a = this.layers; _i < _a.length; _i++) {\n var layer = _a[_i];\n layer.zIndex = layer.zIndex !== -1 ? layer.zIndex : this.layers.indexOf(layer);\n this.layerZIndexTable[layer.zIndex] = layer.id;\n }\n for (var i = 0; i < this.layers.length; i++) {\n for (var j = i + 1; j < this.layers.length; j++) {\n if (this.layers[parseInt(i.toString(), 10)].zIndex > this.layers[parseInt(j.toString(), 10)].zIndex) {\n var temp = this.layers[parseInt(i.toString(), 10)];\n this.layers[parseInt(i.toString(), 10)] = this.layers[parseInt(j.toString(), 10)];\n this.layers[parseInt(j.toString(), 10)] = temp;\n }\n }\n }\n if (this.layers.length === 0) {\n var defaultLayer = {\n id: 'default_layer', visible: true, lock: false, objects: [], zIndex: 0,\n objectZIndex: -1, zIndexTable: {}\n };\n this.commandHandler.addLayer(defaultLayer, null, true);\n }\n this.setActiveLayer(this.layers[this.layers.length - 1].id);\n };\n /**\n * resetTool method \\\n *\n * @returns { void } resetTool method .\\\n *\n * @private\n */\n Diagram.prototype.resetTool = function () {\n this.eventHandler.resetTool();\n };\n Diagram.prototype.initObjectExtend = function (obj, layer, independentObj) {\n if (independentObj) {\n var checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, obj.wrapper.bounds, true);\n //EJ2-71853 - Need to improve performance of diagram while rendering large number of nodes and connectors.\n // Removed the for loop which is iterating through the zindex table and removing the object from the table as it is not covered in any scenario.\n //EJ2-840575 - Order commands not working between Swimlane and other nodes while drag and drop from the palette\n if (obj.shape.type === 'SwimLane') {\n for (var i = 0, a = Object.keys(layer.zIndexTable); i < a.length; i++) {\n if (layer.zIndexTable[a[parseInt(i.toString(), 10)]] &&\n layer.zIndexTable[a[parseInt(i.toString(), 10)]] === obj.id) {\n delete layer.zIndexTable[a[parseInt(i.toString(), 10)]];\n }\n }\n }\n layer.zIndexTable[obj.zIndex] = obj.id;\n if (!checkBoundaryConstraints) {\n var node = obj instanceof Node ? this.nodes : this.connectors;\n for (var i = 0; i <= node.length; i++) {\n if (node[parseInt(i.toString(), 10)] && obj.id\n === node[parseInt(i.toString(), 10)].id) {\n node.splice(i, 1);\n }\n }\n delete layer.zIndexTable[obj.zIndex];\n }\n }\n };\n /* tslint:disable */\n /**\n * initObject method \\\n *\n * @returns { void } initObject method .\\\n * @param {End} obj - provide the obj value.\n * @param {End} layer - provide the layer value.\n * @param {LayoutOrientation} independentObj - provide the independentObj value.\n * @param {boolean} group - provide the independentObj value.\n *\n * @private\n */\n Diagram.prototype.initObject = function (obj, layer, independentObj, group) {\n if (independentObj === void 0) { independentObj = true; }\n if (obj !== undefined) {\n if (independentObj) {\n if (!layer) {\n this.addToLayer(obj, false);\n layer = this.activeLayer;\n }\n //Move the common properties like zindex and id to an abstract class\n if ((obj instanceof Node || obj instanceof Connector) &&\n (obj.shape.type !== 'SwimLane' || (obj.children && obj.children.length > 0))) {\n this.setZIndex(layer, obj);\n }\n }\n if (obj instanceof Node) {\n if (independentObj) {\n if (obj.id !== 'helper') {\n var getDefaults = getFunction(this.getNodeDefaults);\n if (getDefaults) {\n var defaults = getDefaults(obj, this);\n if (defaults && defaults.ports) {\n for (var i = 0; i < defaults.ports.length; i++) {\n defaults.ports[parseInt(i.toString(), 10)].inEdges = [];\n defaults.ports[parseInt(i.toString(), 10)].outEdges = [];\n }\n }\n if (defaults && defaults !== obj) {\n extendObject(defaults, obj);\n }\n }\n }\n this.initNode(obj, this.element.id);\n }\n }\n else if (obj instanceof Connector) {\n var getDefaults = getFunction(this.getConnectorDefaults);\n if (getDefaults) {\n var defaults = getDefaults(obj, this);\n if (defaults && defaults !== obj) {\n extendObject(defaults, obj);\n }\n if (obj.segments.length) {\n if (obj.type !== obj.segments[0].type) {\n obj.segments = [];\n }\n }\n }\n var sourceNode = this.nameTable[obj.sourceID];\n var targetNode = this.nameTable[obj.targetID];\n var port = this.getConnectedPort(sourceNode, obj, true);\n var targetPort = this.getConnectedPort(targetNode, obj);\n var outPort = this.findInOutConnectPorts(sourceNode, false);\n var inPort = this.findInOutConnectPorts(targetNode, true);\n if ((sourceNode !== undefined && canOutConnect(sourceNode)) || (obj.sourcePortID !== ''\n && canPortOutConnect(outPort))) {\n obj.sourceWrapper = this.getEndNodeWrapper(sourceNode, obj, true);\n if (obj.sourcePortID) {\n // eslint-disable-next-line max-len\n if (port && port.constraints && !(port.constraints & PortConstraints.None) && (port.constraints & PortConstraints.OutConnect)) {\n obj.sourcePortWrapper = this.getWrapper(sourceNode.wrapper, obj.sourcePortID);\n }\n }\n }\n if ((targetNode !== undefined && canInConnect(targetNode)) || (obj.targetPortID !== ''\n && canPortInConnect(inPort))) {\n obj.targetWrapper = this.getEndNodeWrapper(targetNode, obj, false);\n if (obj.targetPortID) {\n // eslint-disable-next-line max-len\n if (targetPort && targetPort.constraints && !(targetPort.constraints & PortConstraints.None) && (targetPort.constraints & PortConstraints.InConnect)) {\n obj.targetPortWrapper = this.getWrapper(targetNode.wrapper, obj.targetPortID);\n }\n }\n }\n if (!independentObj) {\n var points = obj.getConnectorPoints(obj.type);\n updateConnector(obj, points);\n }\n if (independentObj) {\n obj.init(this);\n }\n for (var k = 0; k < obj.wrapper.children.length; k++) {\n if (this.pathTable[obj.wrapper.children[parseInt(k.toString(), 10)].data]) {\n obj.wrapper.children[parseInt(k.toString(), 10)].absoluteBounds =\n this.pathTable[obj.wrapper.children[parseInt(k.toString(), 10)].data].absoluteBounds;\n }\n }\n obj.wrapper.measure(new Size(undefined, undefined));\n obj.wrapper.arrange(obj.wrapper.desiredSize);\n if (obj instanceof Connector && obj.type === 'Bezier') {\n this.updateConnectorAnnotation(obj);\n this.updateConnectorfixedUserHandles(obj);\n }\n for (var j = 0; j < obj.wrapper.children.length; j++) {\n this.pathTable[obj.wrapper.children[parseInt(j.toString(), 10)].data] = {};\n this.pathTable[obj.wrapper.children[parseInt(j.toString(), 10)].data].absoluteBounds =\n obj.wrapper.children[parseInt(j.toString(), 10)].absoluteBounds;\n }\n }\n if (obj instanceof Node && obj.children && obj.container) {\n for (var i = 0; i < obj.children.length; i++) {\n this.nameTable[obj.children[parseInt(i.toString(), 10)]].offsetX\n = this.nameTable[obj.children[parseInt(i.toString(), 10)]].wrapper.offsetX;\n this.nameTable[obj.children[parseInt(i.toString(), 10)]].offsetY\n = this.nameTable[obj.children[parseInt(i.toString(), 10)]].wrapper.offsetY;\n }\n }\n // 908606: The nodes goes outside the subprocess while node rotation Issue Fix\n if (obj instanceof Node && obj.shape &&\n obj.shape.shape === 'Activity' && obj.shape.activity.activity === 'SubProcess') {\n if (obj.shape.activity.subProcess.processes) {\n var children = obj.shape.activity.subProcess.processes;\n for (var i = 0; i < children.length; i++) {\n if (this.nameTable[children[parseInt(i.toString(), 10)]]) {\n this.nameTable[children[parseInt(i.toString(), 10)]].offsetX\n = this.nameTable[children[parseInt(i.toString(), 10)]].wrapper.offsetX;\n this.nameTable[children[parseInt(i.toString(), 10)]].offsetY\n = this.nameTable[children[parseInt(i.toString(), 10)]].wrapper.offsetY;\n }\n }\n }\n }\n this.initObjectExtend(obj, layer, independentObj);\n this.nameTable[obj.id] = obj;\n if (!this.refreshing) {\n //To create text annotation node if we define shape annotations in parent node.\n if (obj.shape.annotations && obj.shape.annotations.length > 0) {\n for (var i = 0; i < obj.shape.annotations.length\n && obj.shape.annotations[parseInt(i.toString(), 10)].text; i++) {\n this.getBPMNTextAnnotation(obj, this, obj.shape.annotations[parseInt(i.toString(), 10)], false);\n }\n }\n }\n if (obj instanceof Node && obj.children) {\n this.preventNodesUpdate = true;\n this.preventConnectorsUpdate = true;\n if (!group && !obj.container) {\n this.updateGroupOffset(obj, true);\n }\n this.groupTable[obj.id] = obj.children;\n for (var i = 0; i < obj.children.length; i++) {\n var node = (this.nameTable[obj.children[parseInt(i.toString(), 10)]]);\n if (node) {\n node.parentId = obj.id;\n }\n }\n if (!this.isLoading && obj.rotateAngle && !obj.container) {\n this.commandHandler.rotateObjects(obj, [obj], obj.rotateAngle, { x: obj.offsetX, y: obj.offsetY }, false);\n }\n this.preventNodesUpdate = false;\n this.preventConnectorsUpdate = false;\n }\n if (this['enterObject'] === undefined) {\n this.updateQuad(obj);\n }\n }\n if (obj.visible === false) {\n this.updateElementVisibility(obj.wrapper, obj, false);\n }\n };\n /* tslint:enable */\n Diagram.prototype.getConnectedPort = function (node, connector, isSource) {\n if (node && node.ports) {\n for (var _i = 0, _a = node.ports; _i < _a.length; _i++) {\n var port = _a[_i];\n if (port.id === connector.sourcePortID && isSource) {\n return port;\n }\n else if (port.id === connector.targetPortID && !isSource) {\n return port;\n }\n }\n }\n return null;\n };\n Diagram.prototype.scaleObject = function (obj, size, isWidth) {\n var actualSize = isWidth ? obj.wrapper.actualSize.width : obj.wrapper.actualSize.height;\n var sw = (isWidth) ? 1 + ((size - actualSize) / actualSize) : 1;\n var sh = (isWidth) ? 1 : 1 + ((size - actualSize) / actualSize);\n //const groupOffsetX: number = obj.offsetX; const groupOffsetY: number = obj.offsetY;\n this.realActions |= RealAction.PreventDrag;\n this.scale(obj, sw, sh, { x: 0.5, y: 0.5 });\n this.realActions &= ~RealAction.PreventDrag;\n };\n Diagram.prototype.updateDefaultLayoutIcons = function (node) {\n if (this.layout.type === 'OrganizationalChart' || this.layout.type === 'HierarchicalTree' ||\n this.layout.type === 'ComplexHierarchicalTree') {\n {\n this.updateDefaultLayoutIcon(node, node.expandIcon);\n this.updateDefaultLayoutIcon(node, node.collapseIcon);\n }\n }\n };\n Diagram.prototype.updateDefaultLayoutIcon = function (node, icon) {\n if (icon.shape !== 'None') {\n if (icon.horizontalAlignment === 'Auto' && icon.verticalAlignment === 'Auto' &&\n icon.offset.x === .5 && icon.offset.y === 1) {\n var iconWrapper = this.getWrapper(node.wrapper, 'icon_content');\n var offsetX = void 0;\n var offsetY = void 0;\n if (this.layout.orientation === 'TopToBottom' || this.layout.orientation === 'BottomToTop') {\n offsetX = .5;\n offsetY = this.layout.orientation === 'TopToBottom' ? 1 : 0;\n }\n else if (this.layout.orientation === 'RightToLeft' || this.layout.orientation === 'LeftToRight') {\n offsetX = this.layout.orientation === 'LeftToRight' ? 1 : 0;\n offsetY = .5;\n }\n iconWrapper.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n iconWrapper.horizontalAlignment = 'Center';\n iconWrapper.verticalAlignment = 'Center';\n node.wrapper.measure(new Size(node.wrapper.width, node.wrapper.height));\n node.wrapper.arrange(node.wrapper.desiredSize);\n }\n }\n };\n /**\n * updateGroupOffset method \\\n *\n * @returns { void } updateGroupOffset method .\\\n * @param {NodeModel | ConnectorModel} node - provide the source value.\n * @param {boolean} isUpdateSize - provide the target value.\n *\n * @private\n */\n Diagram.prototype.updateGroupOffset = function (node, isUpdateSize) {\n if ((node.children && node.children.length > 0 && (!node.container)) || (node.processId)) {\n var node1 = this.nameTable[node.id];\n if (!(this.realActions & RealAction.PreventScale) && !(this.realActions & RealAction.PreventDrag)) {\n if (node1.offsetX && ((this.realActions & RealAction.EnableGroupAction) ||\n ((!(this.diagramActions & DiagramAction.UndoRedo)) && (!(this.diagramActions & DiagramAction.ToolAction)\n && !(this.diagramActions & DiagramAction.PublicMethod))))) {\n this.realActions |= RealAction.PreventScale;\n var diffX = (node1.offsetX - node.wrapper.offsetX);\n node1.offsetX = node.wrapper.offsetX;\n var diffY = (node1.offsetY - node.wrapper.offsetY);\n node1.offsetY = node.wrapper.offsetY;\n if ((diffX + diffY) !== 0) {\n this.drag(node1, diffX, diffY);\n }\n this.realActions &= ~RealAction.PreventScale;\n }\n else {\n //Removed isBlazor code\n node1.offsetX = node.wrapper.offsetX;\n }\n if (node1.offsetY && ((this.realActions & RealAction.EnableGroupAction) ||\n ((!(this.diagramActions & DiagramAction.UndoRedo)) && (!(this.diagramActions & DiagramAction.ToolAction)\n && !(this.diagramActions & DiagramAction.PublicMethod))))) {\n this.realActions |= RealAction.PreventScale;\n var diffY = (node1.offsetY - node.wrapper.offsetY);\n node1.offsetY = node.wrapper.offsetY;\n this.drag(node1, 0, diffY);\n this.realActions &= ~RealAction.PreventScale;\n }\n else {\n //Removed isBlazor code\n node1.offsetY = node.wrapper.offsetY;\n }\n if (this.diagramActions) {\n //Removed isBlazor code\n node1.width = node.wrapper.actualSize.width;\n node1.height = node.wrapper.actualSize.height;\n }\n }\n }\n if (isUpdateSize) {\n if ((node.children && node.children.length > 0)) {\n if (this.nameTable[node.id].width !== undefined) {\n this.scaleObject(node, this.nameTable[node.id].width, true);\n }\n else {\n //Removed isBlazor code\n this.nameTable[node.id].width = node.wrapper.actualSize.width;\n }\n if (this.nameTable[node.id].height !== undefined) {\n this.scaleObject(node, this.nameTable[node.id].height, false);\n }\n else {\n //Removed isBlazor code\n this.nameTable[node.id].height = node.wrapper.actualSize.height;\n }\n }\n }\n //Removed Blazor code\n };\n /* eslint-disable */\n Diagram.prototype.initNode = function (obj, diagramId, group) {\n var canvas = obj.initContainer();\n var portContainer = new Canvas();\n var content;\n if (!this.diagramSettings.inversedAlignment) {\n canvas.inversedAlignment = false;\n }\n if (!canvas.children) {\n canvas.children = [];\n }\n if (obj.children) {\n canvas.measureChildren = false;\n portContainer.id = obj.id + 'group_container';\n // Bug 853721: Grid lines remain hidden when lane fill is set to transparent.\n // Added below code to set swimlane fill while dragging from palette to diagram.\n if (obj.shape && obj.shape.type === 'SwimLane') {\n portContainer.style.fill = obj.style.fill;\n }\n else {\n portContainer.style.fill = 'none';\n }\n portContainer.style.strokeColor = 'none';\n portContainer.horizontalAlignment = 'Stretch';\n portContainer.verticalAlignment = 'Stretch';\n //EJ2-865476 - Issue with Pivot Point in group node during resizing\n portContainer.pivot = obj.pivot;\n canvas.style = obj.style;\n canvas.padding.left = obj.padding.left;\n canvas.padding.right = obj.padding.right;\n canvas.padding.top = obj.padding.top;\n canvas.padding.bottom = obj.padding.bottom;\n portContainer.children = [];\n portContainer.preventContainer = true;\n if (obj.container) {\n portContainer.relativeMode = 'Object';\n }\n var checkPorts = (obj.ports && obj.ports.length > 0) ? true : false;\n if (isNullOrUndefined(obj.container) && !checkPorts) {\n canvas.children.push(portContainer);\n }\n if (obj.container && (obj.container.type === 'Grid')) {\n for (var i = 0; i < obj.children.length; i++) {\n var childCollection = new Canvas();\n var child = this.nameTable[obj.children[i]];\n childCollection.children = [];\n childCollection.children.push(child.wrapper);\n if (child) {\n canvas.addObject(child.wrapper, child.rowIndex, child.columnIndex, child.rowSpan, child.columnSpan);\n }\n }\n }\n else {\n for (var i = 0; i < obj.children.length; i++) {\n if (this.nameTable[obj.children[i]]) {\n var child = this.nameTable[obj.children[i]];\n this.updateStackProperty(obj, child, i);\n canvas.children.push(child.wrapper);\n canvas.elementActions = canvas.elementActions | ElementAction.ElementIsGroup;\n child.wrapper.flip = child.wrapper.flip === 'None' ?\n obj.wrapper.flip : child.wrapper.flip;\n }\n }\n }\n if (checkPorts || (obj.container && (obj.container.type !== 'Grid'))) {\n canvas.children.push(portContainer);\n }\n }\n else {\n var setNodeTemplate = getFunction(this.setNodeTemplate);\n if (setNodeTemplate && obj.id !== 'helper') {\n content = setNodeTemplate(obj, this);\n }\n if (!content) {\n content = obj.init(this);\n }\n canvas.children.push(content);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var wrapperContent;\n wrapperContent = getFunction(this.getDescription);\n if (wrapperContent) {\n (obj.children ? canvas : content).description = wrapperContent;\n }\n else {\n (obj.children ? canvas : content).description = obj.annotations.length ? obj.annotations[0].content : obj.id;\n }\n var container = obj.children ? portContainer : canvas;\n obj.initAnnotations(this.getDescription, container, this.element.id, canVitualize(this) ? true : false, this.annotationTemplate);\n obj.initPorts(this.getDescription, container);\n obj.initIcons(this.getDescription, this.layout, container, diagramId);\n for (var i = 0; obj.fixedUserHandles !== undefined, i < obj.fixedUserHandles.length; i++) {\n var fixedUserHandles = obj.initFixedUserHandles(obj.fixedUserHandles[i], this.fixedUserHandleTemplate, this.element.id);\n container.children.push(fixedUserHandles);\n }\n if (obj.shape.type === 'SwimLane' && obj.wrapper && obj.wrapper.children.length > 0 &&\n obj.wrapper.children[0] instanceof GridPanel) {\n this.setZIndex(this.activeLayer, obj);\n if (this.connectors.length > 0) {\n for (var i = 0; i < this.connectors.length; i++) {\n var obj_1 = this.connectors[i];\n if ((obj_1.sourceID && obj_1.targetID) && (this.activeLayer.objects.indexOf(obj_1.sourceID) === -1 &&\n this.activeLayer.objects.indexOf(obj_1.targetID) === -1)) {\n this.setZIndex(this.activeLayer, obj_1);\n }\n }\n }\n swimLaneMeasureAndArrange(obj);\n arrangeChildNodesInSwimLane(this, obj);\n this.updateDiagramElementQuad();\n }\n else {\n canvas.measure(new Size(obj.width, obj.height), obj.id, this.onLoadImageSize.bind(this));\n if (canvas instanceof GridPanel) {\n canvas.arrange(canvas.desiredSize, true);\n }\n else {\n canvas.arrange(canvas.desiredSize);\n }\n }\n if (obj.wrapper.flip !== 'None' && obj.wrapper.elementActions & ElementAction.ElementIsGroup) {\n alignElement(obj.wrapper, obj.wrapper.offsetX, obj.wrapper.offsetY, this, obj.wrapper.flip);\n }\n if (obj.shape.type === 'Bpmn') {\n if (obj.shape.shape === 'TextAnnotation') {\n var isbpmnTextConnector = false;\n for (var i = 0; i < this.connectors.length; i++) {\n if (this.connectors[parseInt(i.toString(), 10)].id === (obj.id + \"_connector\")) {\n this.connectors[parseInt(i.toString(), 10)].isBpmnAnnotationConnector = true;\n isbpmnTextConnector = true;\n break;\n }\n }\n if (!isbpmnTextConnector) {\n this.addBpmnAnnotationConnector(obj, canvas);\n }\n }\n }\n if (obj instanceof Node && obj.container && (obj.width < canvas.outerBounds.width || obj.height < canvas.outerBounds.height) &&\n canvas.bounds.x <= canvas.outerBounds.x && canvas.bounds.y <= canvas.outerBounds.y) {\n obj.width = canvas.width = canvas.outerBounds.width;\n obj.height = canvas.height = canvas.outerBounds.height;\n canvas.measure(new Size(obj.width, obj.height));\n canvas.arrange(canvas.desiredSize);\n }\n if (obj.container && obj.container.type === 'Grid' && obj.children && obj.children.length > 0) {\n this.updateChildPosition(obj);\n }\n };\n Diagram.prototype.addBpmnAnnotationConnector = function (node, wrapper) {\n if (node.parentObj instanceof Diagram || node.parentObj instanceof Lane) {\n var bpmnAnnotation = node.shape;\n var direction = bpmnAnnotation.textAnnotation.textAnnotationDirection;\n var hasTarget = (bpmnAnnotation.textAnnotation.textAnnotationTarget !== '' && this.nameTable[bpmnAnnotation.textAnnotation.textAnnotationTarget]);\n var targetNode = hasTarget ? this.nameTable[bpmnAnnotation.textAnnotation.textAnnotationTarget] : null;\n var targetWrapper = targetNode != null ? targetNode.wrapper : null;\n var port = node.ports[0];\n var sourcePoint = { x: 0, y: 0 };\n switch (direction) {\n case 'Left':\n port.offset = { x: 0, y: 0.5 };\n sourcePoint.x = wrapper.bounds.left - 40;\n sourcePoint.y = wrapper.bounds.bottom + 30;\n break;\n case 'Right':\n port.offset = { x: 1, y: 0.5 };\n sourcePoint.x = wrapper.bounds.right + 40;\n sourcePoint.y = wrapper.bounds.bottom + 30;\n break;\n case 'Top':\n port.offset = { x: 0.5, y: 0 };\n sourcePoint.x = wrapper.bounds.right + 30;\n sourcePoint.y = wrapper.bounds.top - 40;\n break;\n case 'Bottom':\n port.offset = { x: 0.5, y: 1 };\n sourcePoint.x = wrapper.bounds.right + 30;\n sourcePoint.y = wrapper.bounds.bottom + 40;\n break;\n default:\n port.offset = { x: 0, y: 0.5 };\n sourcePoint.x = wrapper.bounds.left - 40;\n sourcePoint.y = wrapper.bounds.bottom + 30;\n if (hasTarget && wrapper != null && targetWrapper != null) {\n if (wrapper.bounds.left > targetWrapper.bounds.right) {\n port.offset = { x: 0, y: 0.5 };\n }\n else if (wrapper.bounds.right < targetWrapper.bounds.left) {\n port.offset = { x: 1, y: 0.5 };\n }\n else if (wrapper.bounds.bottom > targetWrapper.bounds.top) {\n port.offset = { x: 0.5, y: 0 };\n }\n else if (wrapper.bounds.top < targetWrapper.bounds.bottom) {\n port.offset = { x: 0.5, y: 1 };\n }\n }\n break;\n }\n var connector = new Connector(this, 'connectors', {\n id: node.id + \"_connector\",\n targetID: node.id,\n targetPortID: port.id,\n type: 'Straight',\n shape: {\n type: \"Bpmn\", flow: 'Association'\n },\n constraints: ConnectorConstraints.Default & ~(ConnectorConstraints.DragTargetEnd | ConnectorConstraints.Delete),\n isBpmnAnnotationConnector: true,\n }, true);\n if (hasTarget) {\n connector.sourceID = bpmnAnnotation.textAnnotation.textAnnotationTarget;\n }\n else {\n connector.sourcePoint = sourcePoint;\n }\n var oldProtectOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n node.constraints |= NodeConstraints.InConnect;\n this.connectors.push(connector);\n if (!(this.bpmnModule).bpmnTextAnnotationConnector) {\n (this.bpmnModule).bpmnTextAnnotationConnector = [];\n }\n (this.bpmnModule).bpmnTextAnnotationConnector.push(connector);\n node.constraints = NodeConstraints.Default & ~(NodeConstraints.OutConnect | NodeConstraints.InConnect);\n this.isProtectedOnChange = oldProtectOnChange;\n }\n };\n /** @private */\n Diagram.prototype.getBPMNTextAnnotation = function (node, diagram, annotation, isDynamic) {\n // create new text annotation node\n var obj = {\n id: annotation.id || randomId(),\n height: annotation.height || 100,\n width: annotation.width || 100,\n annotations: [{ id: (annotation.id ? annotation.id : randomId()) + annotation.text, content: annotation.text }],\n offsetX: node.offsetX + annotation.length *\n Math.cos(annotation.angle * (Math.PI / 180)),\n offsetY: node.offsetY + annotation.length *\n Math.sin(annotation.angle * (Math.PI / 180)),\n shape: { type: 'Bpmn', shape: 'TextAnnotation', textAnnotation: { textAnnotationDirection: 'Auto', textAnnotationTarget: node.id } },\n constraints: NodeConstraints.Default & ~(NodeConstraints.OutConnect | NodeConstraints.InConnect)\n };\n var parentBounds = node.wrapper.bounds;\n var position = { x: obj.offsetX, y: obj.offsetY };\n var direction = getPortDirection(position, parentBounds, parentBounds);\n var segment;\n switch (direction) {\n case 'Right':\n segment = {\n x1: parentBounds.right, y1: parentBounds.top,\n x2: parentBounds.right, y2: parentBounds.bottom\n };\n break;\n case 'Left':\n segment = {\n x1: parentBounds.left, y1: parentBounds.top,\n x2: parentBounds.left, y2: parentBounds.bottom\n };\n break;\n case 'Bottom':\n segment = {\n x1: parentBounds.right, y1: parentBounds.bottom,\n x2: parentBounds.left, y2: parentBounds.bottom\n };\n break;\n case 'Top':\n segment = {\n x1: parentBounds.right, y1: parentBounds.top,\n x2: parentBounds.left, y2: parentBounds.top\n };\n break;\n }\n var center = parentBounds.center;\n var endPoint = Point.transform(position, annotation.angle, Math.max(parentBounds.width, parentBounds.height));\n var point = getIntersectionPoints(segment, [center, endPoint], false, center);\n if (annotation.length !== undefined && annotation.angle !== undefined && point) {\n point = Point.transform(point, annotation.angle, annotation.length);\n obj.offsetX = point.x;\n obj.offsetY = point.y;\n }\n if (direction === 'Right') {\n obj.offsetX += obj.width / 2;\n }\n else if (direction === 'Left') {\n obj.offsetX -= obj.width / 2;\n }\n else if (direction === 'Bottom') {\n obj.offsetY += obj.height / 2;\n }\n else {\n obj.offsetY -= obj.height / 2;\n }\n if (isDynamic) {\n this.add(obj);\n }\n else {\n var bpmnTextNode = new Node(this, 'nodes', obj, true);\n diagram.initObject(bpmnTextNode, undefined, undefined, true);\n diagram.nodes.push(bpmnTextNode);\n }\n };\n /* eslint-enable */\n /**\n * updateDiagramElementQuad method \\\n *\n * @returns { void } updateDiagramElementQuad method .\\\n *\n * @private\n */\n Diagram.prototype.updateDiagramElementQuad = function () {\n for (var i = 0; i < this.nodes.length; i++) {\n if (this.nodes[parseInt(i.toString(), 10)].wrapper && (this.nodes[parseInt(i.toString(), 10)].wrapper instanceof Container)) {\n this.updateQuad(this.nodes[parseInt(i.toString(), 10)]);\n }\n }\n };\n Diagram.prototype.onLoadImageSize = function (id, size) {\n var obj = this.getObject(id);\n var image = document.getElementById(id + 'sf-imageNode');\n if (image) {\n image.parentNode.removeChild(image);\n }\n this.nodePropertyChange(obj, {}, { width: size.width, height: size.height });\n var args = { element: cloneObject(obj), size: size };\n this.triggerEvent(DiagramEvent.onImageLoad, args);\n };\n Diagram.prototype.updateChildPosition = function (obj) {\n for (var i = 0; i < obj.children.length; i++) {\n var child = this.getObject(obj.children[parseInt(i.toString(), 10)]);\n child.offsetX = child.wrapper.offsetX;\n child.offsetY = child.wrapper.offsetY;\n if (child.children && child.children.length > 0) {\n this.updateChildPosition(child);\n }\n }\n };\n Diagram.prototype.canExecute = function () {\n return true;\n };\n Diagram.prototype.updateStackProperty = function (obj, child, index) {\n if (obj.container && obj.container.type === 'Stack') {\n if (!child.width) {\n child.wrapper.horizontalAlignment = 'Stretch';\n child.horizontalAlignment = 'Stretch';\n }\n if (!child.height) {\n child.verticalAlignment = 'Stretch';\n child.wrapper.verticalAlignment = 'Stretch';\n }\n if (index && obj.shape.type === 'UmlClassifier') {\n child.umlIndex = index;\n }\n }\n };\n Diagram.prototype.initViews = function () {\n if (!this.isLoading) {\n this.views.push(this.element.id);\n this.views[this.element.id] = this;\n }\n };\n Diagram.prototype.initCommands = function () {\n var newCommands = this.commandManager.commands;\n var commands = {\n 'copy': {\n execute: this.copyCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.C, keyModifiers: KeyModifiers.Control }\n },\n 'paste': {\n execute: this.pasteCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.V, keyModifiers: KeyModifiers.Control }\n },\n 'cut': {\n execute: this.cutCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.X, keyModifiers: KeyModifiers.Control }\n },\n 'delete': {\n execute: this.removeCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Delete }\n },\n 'selectAll': {\n execute: this.selectAll.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.A, keyModifiers: KeyModifiers.Control }\n },\n 'undo': {\n execute: this.undo.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Z, keyModifiers: KeyModifiers.Control }\n },\n 'redo': {\n execute: this.redo.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Y, keyModifiers: KeyModifiers.Control }\n },\n 'nudgeUp': {\n execute: this.nudgeCommand.bind(this, 'Up'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Up },\n parameter: 'up'\n },\n 'nudgeRight': {\n execute: this.nudgeCommand.bind(this, 'Right'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Right },\n parameter: 'right'\n },\n 'nudgeDown': {\n execute: this.nudgeCommand.bind(this, 'Down'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Down },\n parameter: 'down'\n },\n 'nudgeLeft': {\n execute: this.nudgeCommand.bind(this, 'Left'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Left },\n parameter: 'left'\n },\n 'startEdit': {\n execute: this.startEditCommad.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.F2 }\n },\n 'endEdit': {\n execute: this.endEditCommand.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Escape }\n },\n //EJ2-866418-keyboard shortcut keys\n 'focusToNextItem': {\n execute: this.navigateItems.bind(this, true),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Tab }\n },\n 'focusToPreviousItem': {\n execute: this.navigateItems.bind(this, false), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Tab, keyModifiers: KeyModifiers.Shift }\n },\n 'selectFocusedItem': {\n execute: this.startEditCommad.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Enter }\n },\n 'bold': {\n execute: this.fontStyleCommand.bind(this, 'bold'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.B, keyModifiers: KeyModifiers.Control }\n },\n 'italic': {\n execute: this.fontStyleCommand.bind(this, 'italic'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.I, keyModifiers: KeyModifiers.Control }\n },\n 'underline': {\n execute: this.fontStyleCommand.bind(this, 'underline'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.U, keyModifiers: KeyModifiers.Control }\n },\n 'duplicate': {\n execute: this.duplicateCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.D, keyModifiers: KeyModifiers.Control }\n },\n 'group': {\n execute: this.groupCommand.bind(this, 'group'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.G, keyModifiers: KeyModifiers.Control }\n },\n 'ungroup': {\n execute: this.groupCommand.bind(this, 'ungroup'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.U, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'rotateClockwise': {\n execute: this.rotateCommand.bind(this, 'clockwise'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.R, keyModifiers: KeyModifiers.Control }\n },\n 'rotateAntiClockwise': {\n execute: this.rotateCommand.bind(this, 'antiClockwise'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.L, keyModifiers: KeyModifiers.Control }\n },\n 'flipHorizontal': {\n execute: this.flipCommand.bind(this, 'horizontal'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.H, keyModifiers: KeyModifiers.Control }\n },\n 'flipVertical': {\n execute: this.flipCommand.bind(this, 'vertical'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.J, keyModifiers: KeyModifiers.Control }\n },\n 'pointerTool': {\n execute: this.toolCommand.bind(this, 'pointer'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Number1, keyModifiers: KeyModifiers.Control }\n },\n 'textTool': {\n execute: this.toolCommand.bind(this, 'text'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Number2, keyModifiers: KeyModifiers.Control }\n },\n 'connectTool': {\n execute: this.toolCommand.bind(this, 'connect'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Number3, keyModifiers: KeyModifiers.Control }\n },\n 'freeForm': {\n execute: this.toolCommand.bind(this, 'freeForm'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Number5, keyModifiers: KeyModifiers.Control }\n },\n 'lineTool': {\n execute: this.toolCommand.bind(this, 'line'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Number6, keyModifiers: KeyModifiers.Control }\n },\n 'rectangleTool': {\n execute: this.toolCommand.bind(this, 'rectangle'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Number8, keyModifiers: KeyModifiers.Control }\n },\n 'ellipseTool': {\n execute: this.toolCommand.bind(this, 'ellipse'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Number9, keyModifiers: KeyModifiers.Control }\n },\n 'zoomIn': {\n execute: this.zoomCommand.bind(this, 'zoomIn'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Plus, keyModifiers: KeyModifiers.Control }\n },\n 'zoomOut': {\n execute: this.zoomCommand.bind(this, 'zoomOut'), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Minus, keyModifiers: KeyModifiers.Control }\n },\n 'shiftUp': {\n execute: this.shiftCommand.bind(this, 'Up'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Up, keyModifiers: KeyModifiers.Shift }\n },\n 'shiftDown': {\n execute: this.shiftCommand.bind(this, 'Down'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Down, keyModifiers: KeyModifiers.Shift }\n },\n 'shiftLeft': {\n execute: this.shiftCommand.bind(this, 'Left'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Left, keyModifiers: KeyModifiers.Shift }\n },\n 'shiftRight': {\n execute: this.shiftCommand.bind(this, 'Right'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Right, keyModifiers: KeyModifiers.Shift }\n },\n 'alignTextCenter': {\n execute: this.alignCommand.bind(this, 'center'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.C, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'alignTextLeft': {\n execute: this.alignCommand.bind(this, 'right'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.L, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'alignTextRight': {\n execute: this.alignCommand.bind(this, 'left'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.R, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'alignTextTop': {\n execute: this.alignCommand.bind(this, 'top'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.E, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'alignTextCenterVertical': {\n execute: this.alignCommand.bind(this, 'centerVertical'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.M, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'alignTextBottom': {\n execute: this.alignCommand.bind(this, 'bottom'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.V, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'alignJustify': {\n execute: this.alignCommand.bind(this, 'justify'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.J, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'sendToBack': {\n execute: this.orderCommand.bind(this, 'sendToBack'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.B, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'bringToFront': {\n execute: this.orderCommand.bind(this, 'bringToFront'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.F, keyModifiers: KeyModifiers.Control | KeyModifiers.Shift }\n },\n 'sendBackward': {\n execute: this.orderCommand.bind(this, 'sendBackward'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.BracketLeft, keyModifiers: KeyModifiers.Control }\n },\n 'bringForward': {\n execute: this.orderCommand.bind(this, 'bringForward'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.BracketRight, keyModifiers: KeyModifiers.Control }\n }\n };\n this.initCommandManager(newCommands, commands);\n };\n Diagram.prototype.overrideCommands = function (newCommand, commands) {\n var command;\n for (var _i = 0, _a = Object.keys(commands); _i < _a.length; _i++) {\n var key = _a[_i];\n command = commands[\"\" + key];\n if (newCommand.gesture.key === command.gesture.key && newCommand.gesture.keyModifiers === command.gesture.keyModifiers) {\n delete commands[\"\" + key];\n break;\n }\n }\n };\n Diagram.prototype.initCommandManager = function (newCommands, commands) {\n var i = 0;\n if (newCommands) {\n for (i = 0; i < newCommands.length; i++) {\n if (commands[newCommands[parseInt(i.toString(), 10)].name] && newCommands[parseInt(i.toString(), 10)]) {\n if (newCommands[parseInt(i.toString(), 10)].canExecute) {\n commands[newCommands[parseInt(i.toString(), 10)].name].canExecute\n = newCommands[parseInt(i.toString(), 10)].canExecute;\n }\n if (newCommands[parseInt(i.toString(), 10)].execute) {\n commands[newCommands[parseInt(i.toString(), 10)].name].execute\n = newCommands[parseInt(i.toString(), 10)].execute;\n }\n if (newCommands[parseInt(i.toString(), 10)].gesture.key\n || newCommands[parseInt(i.toString(), 10)].gesture.keyModifiers) {\n commands[newCommands[parseInt(i.toString(), 10)].name].gesture\n = newCommands[parseInt(i.toString(), 10)].gesture;\n }\n if (newCommands[parseInt(i.toString(), 10)].parameter !== '') {\n commands[newCommands[parseInt(i.toString(), 10)].name].parameter\n = newCommands[parseInt(i.toString(), 10)].parameter;\n }\n }\n else {\n this.overrideCommands(newCommands[parseInt(i.toString(), 10)], commands);\n commands[newCommands[parseInt(i.toString(), 10)].name] = {\n execute: newCommands[parseInt(i.toString(), 10)].execute,\n canExecute: newCommands[parseInt(i.toString(), 10)].canExecute,\n gesture: newCommands[parseInt(i.toString(), 10)].gesture,\n parameter: newCommands[parseInt(i.toString(), 10)].parameter\n };\n }\n }\n }\n this.commands = commands;\n };\n /**\n * updateNodeEdges method \\\n *\n * @returns { void } updateNodeEdges method .\\\n * @param {Node} node - provide the source value.\n *\n * @private\n */\n Diagram.prototype.updateNodeEdges = function (node) {\n for (var _i = 0, _a = node.inEdges; _i < _a.length; _i++) {\n var edge = _a[_i];\n if (this.nameTable[\"\" + edge]) {\n this.nameTable[\"\" + edge].targetID = '';\n }\n }\n for (var _b = 0, _c = node.outEdges; _b < _c.length; _b++) {\n var edge = _c[_b];\n if (this.nameTable[\"\" + edge]) {\n this.nameTable[\"\" + edge].sourceID = '';\n }\n }\n node.inEdges = [];\n node.outEdges = [];\n };\n /**\n * updateIconVisibility method \\\n *\n * @returns { void } updateIconVisibility method .\\\n * @param {Node} node - provide the source value.\n * @param {boolean} visibility - provide the source value.\n *\n * @private\n */\n Diagram.prototype.updateIconVisibility = function (node, visibility) {\n for (var i = 0; i < node.wrapper.children.length; i++) {\n var child = node.wrapper.children[parseInt(i.toString(), 10)];\n if (child.id) {\n var id = child.id.split(node.id)[1];\n if (id && id.match('^_icon')) {\n child.visible = visibility;\n this.updateDiagramContainerVisibility(child, visibility);\n }\n }\n }\n };\n /**\n * updateEdges method \\\n *\n * @returns { void } updateEdges method .\\\n * @param {Connector} obj - provide the source value.\n *\n * @private\n */\n Diagram.prototype.updateEdges = function (obj) {\n if (obj.sourceID !== undefined && obj.sourceID !== '') {\n var object = this.nameTable[obj.sourceID];\n if (object && object.outEdges && object.outEdges.length === 0) {\n object.outEdges = [];\n }\n if (object && object.outEdges && object.outEdges.indexOf(obj.id) === -1) {\n object.outEdges.push(obj.id);\n }\n this.updatePortEdges(object, obj, false);\n }\n if (obj.targetID !== undefined && obj.targetID !== '') {\n var node = this.nameTable[obj.targetID];\n if (node && node.inEdges && node.inEdges.length === 0) {\n node.inEdges = [];\n }\n if (node && node.inEdges && node.inEdges.indexOf(obj.id) === -1) {\n node.inEdges.push(obj.id);\n }\n this.updatePortEdges(node, obj, true);\n if (node && node.visible && node.outEdges) {\n var value = node.outEdges.length === 0 ? false : true;\n this.updateIconVisibility(node, value);\n }\n }\n };\n /**\n * updatePortEdges method \\\n *\n * @returns { void } updatePortEdges method .\\\n * @param {NodeModel} node - provide the source value.\n * @param {ConnectorModel} obj - provide the target value.\n * @param {boolean} isInEdges - provide the layoutOrientation value.\n *\n * @private\n */\n Diagram.prototype.updatePortEdges = function (node, obj, isInEdges) {\n if (node) {\n for (var i = 0; i < node.ports.length; i++) {\n var port = node.ports[parseInt(i.toString(), 10)];\n var portId = (isInEdges) ? obj.targetPortID : obj.sourcePortID;\n if (port.id === portId) {\n var portEdges = (isInEdges) ? port.inEdges : port.outEdges;\n if (portEdges.indexOf(obj.id) === -1) {\n portEdges.push(obj.id);\n }\n }\n }\n }\n };\n /**\n * refreshDiagram method \\\n *\n * @returns { void } refreshDiagram method .\\\n *\n * @private\n */\n Diagram.prototype.refreshDiagram = function () {\n this.initLayerObjects();\n this.doLayout();\n this.updateBridging();\n this.scroller.setSize();\n this.addBlazorDiagramObjects();\n //Removed isBlazor code\n this.updateFitToPage();\n };\n Diagram.prototype.updateCanupdateStyle = function (element, value) {\n for (var j = 0; j < element.length; j++) {\n if (element[parseInt(j.toString(), 10)].children) {\n this.updateCanupdateStyle(element[parseInt(j.toString(), 10)].children, value);\n }\n element[parseInt(j.toString(), 10)].canApplyStyle = value;\n }\n };\n Diagram.prototype.getZindexPosition = function (obj, viewId) {\n var objects = [];\n var index = undefined;\n objects = objects.concat(this.nodes);\n objects = objects.concat(this.connectors);\n var type;\n if (obj.zIndex !== Number.MIN_VALUE) {\n for (var i = 0; i < objects.length; i++) {\n if (objects[parseInt(i.toString(), 10)].zIndex > obj.zIndex) {\n if (obj.shape.type === 'HTML' || obj.shape.type === 'Native') {\n type = obj.shape.type === 'HTML' ? 'html' : 'native';\n }\n index = getDomIndex(viewId, objects[parseInt(i.toString(), 10)].id, type);\n break;\n }\n }\n }\n return index;\n };\n /**\n *updateDiagramObject method \\\n *\n * @returns { void } updateDiagramObject method .\\\n * @param { (NodeModel | ConnectorModel) } obj - provide the obj value.\n * @param { boolean } canIgnoreIndex - provide the canIgnoreIndex value.\n * @param { boolean } isUpdateObject - provide the isUpdateObject value.\n *\n * @private\n */\n Diagram.prototype.updateDiagramObject = function (obj, canIgnoreIndex, isUpdateObject) {\n var view;\n var domTable = 'domTable';\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n view = this.views[\"\" + temp];\n if (this.diagramActions) {\n if (view.mode === 'SVG') {\n var hasLayers = this.layers.length > 1;\n var layer = void 0;\n if (hasLayers) {\n layer = this.commandHandler.getObjectLayer(obj.id);\n }\n if ((layer === undefined || (layer && layer.visible)) || isUpdateObject) {\n var htmlLayer = getHTMLLayer(this.element.id);\n if (!window[\"\" + domTable][view.element.id + '_diagramLayer']) {\n window[\"\" + domTable][view.element.id + '_diagramLayer'] =\n document.getElementById(view.element.id + '_diagramLayer');\n }\n var diagramElementsLayer = window[\"\" + domTable][view.element.id + '_diagramLayer'];\n if (this.diagramActions & DiagramAction.Interactions) {\n this.updateCanupdateStyle(obj.wrapper.children, true);\n }\n var centerPoint = this.getMidPoint(obj);\n this.diagramRenderer.updateNode(obj.wrapper, diagramElementsLayer, htmlLayer, undefined, canIgnoreIndex ? undefined : this.getZindexPosition(obj, view.element.id), centerPoint, this.portCenterPoint);\n this.updateCanupdateStyle(obj.wrapper.children, true);\n }\n }\n }\n }\n };\n //Method used to apply margin for Bezier Curve points.\n Diagram.prototype.applyMarginBezier = function (obj, centerPoint) {\n centerPoint.cx = centerPoint.cx + obj.margin.left;\n centerPoint.cx = centerPoint.cx - obj.margin.right;\n centerPoint.cy = centerPoint.cy + obj.margin.top;\n centerPoint.cy = centerPoint.cy - obj.margin.bottom;\n };\n //Method used to get mid point of Bezier Curve\n Diagram.prototype.getMidPoint = function (obj) {\n var finalPoint;\n if (obj instanceof Connector && obj.type === 'Bezier') {\n finalPoint = [];\n var totalPoints = this.getBezierPoints(obj);\n var totalLength = Point.getLengthFromListOfPoints(totalPoints);\n // Bug 905077: Fixed improper positioning of multiple annotations for Bezier connectors.\n // Iterated through annotations and ports to correctly determine their positions.\n for (var i = 0; i < obj.annotations.length; i++) {\n var centerPoint = obj.annotations[parseInt(i.toString(), 10)].offset;\n var absoluteLength = centerPoint * totalLength;\n var position = this.commandHandler.getPointAtLength(absoluteLength, totalPoints, 0);\n var annotationPosition = { cx: position.x, cy: position.y };\n // EJ2-64114 -Horizontal and Vertical alignment not applied properly for the bezier connector annotation\n for (var j = 0; j < obj.wrapper.children.length; j++) {\n if (obj.wrapper && obj.wrapper.children[parseInt(j.toString(), 10)] instanceof TextElement) {\n if (obj.wrapper.children[parseInt(j.toString(), 10)].id === obj.id + '_' + obj.annotations[parseInt(i.toString(), 10)].id) {\n this.applyMarginBezier(obj.wrapper.children[parseInt(j.toString(), 10)], annotationPosition);\n finalPoint[obj.id + '_' + obj.annotations[parseInt(i.toString(), 10)].id] =\n this.applyAlignment(obj.wrapper.children[parseInt(j.toString(), 10)], annotationPosition, obj.annotations[parseInt(i.toString(), 10)].displacement);\n }\n }\n }\n }\n // Bug 835525: Connector Port feature. Below code is used to get the port position for bezier connector.\n for (var i = 0; i < obj.ports.length; i++) {\n var portOffset = obj.ports[parseInt(i.toString(), 10)].offset;\n var length_1 = portOffset * totalLength;\n var portPosition = this.commandHandler.getPointAtLength(length_1, totalPoints, 0);\n var portPoint = { cx: portPosition.x, cy: portPosition.y };\n for (var j = 0; j < obj.wrapper.children.length; j++) {\n if (obj.wrapper && obj.wrapper.children[parseInt(j.toString(), 10)] instanceof PathElement &&\n obj.wrapper.children[parseInt(j.toString(), 10)].isPathPort) {\n if (obj.wrapper.children[parseInt(j.toString(), 10)].id === obj.id + '_' + obj.ports[parseInt(i.toString(), 10)].id) {\n this.applyMarginBezier(obj.wrapper.children[parseInt(j.toString(), 10)], portPoint);\n this.portCenterPoint[obj.id + '_' + obj.ports[parseInt(i.toString(), 10)].id] =\n this.applyAlignment(obj.wrapper.children[parseInt(j.toString(), 10)], portPoint, obj.ports[parseInt(i.toString(), 10)].displacement);\n }\n }\n }\n }\n }\n return finalPoint;\n };\n /**\n * Apply alignment to bezier port\n * @returns {PointModel} return the port alignment points\n * @param {PathElement | TextElement} child - provide the obj value.\n * @param {any} finalPoint - provide final point value.\n * @param {PointModel} displacement - provide displacement value.\n */\n Diagram.prototype.applyAlignment = function (child, finalPoint, displacement) {\n switch (child.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n finalPoint.cx = child.inversedAlignment ? finalPoint.cx : (finalPoint.cx - child.desiredSize.width);\n finalPoint.cx += displacement.x;\n break;\n case 'Stretch':\n case 'Center':\n finalPoint.cx -= child.desiredSize.width * child.pivot.x;\n break;\n case 'Right':\n finalPoint.cx = child.inversedAlignment ? (finalPoint.cx - child.desiredSize.width) : finalPoint.cx;\n finalPoint.cx -= displacement.x;\n break;\n }\n switch (child.verticalAlignment) {\n case 'Auto':\n case 'Top':\n finalPoint.cy = child.inversedAlignment ? finalPoint.cy : (finalPoint.cy - child.desiredSize.height);\n finalPoint.cy += displacement.y;\n break;\n case 'Stretch':\n case 'Center':\n finalPoint.cy -= child.desiredSize.height * child.pivot.y;\n break;\n case 'Bottom':\n finalPoint.cy = child.inversedAlignment ? (finalPoint.cy - child.desiredSize.height) : finalPoint.cy;\n finalPoint.cy -= displacement.y;\n break;\n }\n return finalPoint;\n };\n //(EJ2-62683) Method used to get total points in bezier connector\n Diagram.prototype.getBezierPoints = function (obj) {\n var points = [];\n var i;\n var source = { x: obj.sourcePoint.x, y: obj.sourcePoint.y };\n points.push(source);\n for (i = 0; i < obj.segments.length; i++) {\n var total = obj.segments[parseInt(i.toString(), 10)].getPoints(obj.segments[parseInt(i.toString(), 10)], source);\n // 878719: Resolve ESLint errors\n // eslint-disable-next-line prefer-spread\n points.push.apply(points, total);\n source = points[points.length - 1];\n }\n return points;\n };\n /**\n *updateGridContainer method \\\n *\n * @returns { void } updateGridContainer method .\\\n * @param { GridPanel } grid - provide the objectArray value.\n *\n * @private\n */\n Diagram.prototype.updateGridContainer = function (grid) {\n var view;\n var htmlLayer = getHTMLLayer(this.element.id);\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n view = this.views[\"\" + temp];\n if (view.mode === 'SVG' && this.diagramActions) {\n var diagramElementsLayer = document.getElementById(view.element.id + '_diagramLayer');\n this.diagramRenderer.updateNode(grid, diagramElementsLayer, htmlLayer, undefined);\n }\n else {\n this.refreshCanvasDiagramLayer(view);\n }\n }\n };\n /**\n *Retrieves the node or connector with the given id. \\\n *\n * @returns { (NodeModel | ConnectorModel)[] } Retrieves the node or connector with the given id.\\\n * @param { string[] } objectArray - The id of the node or connector to be retrieved.\n *\n * @private\n */\n Diagram.prototype.getObjectsOfLayer = function (objectArray) {\n var nodeArray = [];\n for (var _i = 0, objectArray_1 = objectArray; _i < objectArray_1.length; _i++) {\n var obj = objectArray_1[_i];\n if (this.nameTable[\"\" + obj]) {\n nodeArray.push(this.nameTable[\"\" + obj]);\n }\n }\n return nodeArray;\n };\n /**\n *refreshDiagramLayer method \\\n *\n * @returns { void } refreshDiagramLayer method .\\\n *\n * @private\n */\n Diagram.prototype.refreshDiagramLayer = function () {\n var view;\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n view = this.views[\"\" + temp];\n switch (view.mode) {\n case 'SVG':\n this.refreshSvgDiagramLayer(view);\n break;\n case 'Canvas':\n this.refreshCanvasLayers(view);\n break;\n }\n }\n };\n /**\n *refreshCanvasLayers method \\\n *\n * @returns { void } refreshCanvasLayers method .\\\n * @param { View } view - provide the view value.\n *\n * @private\n */\n Diagram.prototype.refreshCanvasLayers = function (view) {\n if (!view) {\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view_1 = this.views[\"\" + temp];\n this.refreshCanvasDiagramLayer(view_1);\n }\n }\n else {\n this.refreshCanvasDiagramLayer(view);\n }\n };\n Diagram.prototype.renderBasicElement = function (view) {\n var htmlLayer = getHTMLLayer(view.element.id);\n for (var i = 0; i < this.basicElements.length; i++) {\n var element = this.basicElements[parseInt(i.toString(), 10)];\n if (element instanceof Container) {\n element.prevRotateAngle = 0;\n }\n element.measure(new Size(element.width, element.height));\n element.arrange(element.desiredSize);\n view.diagramRenderer.renderElement(element, view.diagramLayer, htmlLayer);\n }\n };\n Diagram.prototype.refreshElements = function (view) {\n var isOverView = false;\n if (!this.isDestroyed) {\n this.clearCanvas(view);\n if (view instanceof Diagram) {\n view.diagramLayer.getContext('2d').setTransform(view.scroller.currentZoom, 0, 0, view.scroller.currentZoom, 0, 0);\n view.diagramLayer.getContext('2d').scale(1.5, 1.5);\n }\n else {\n isOverView = true;\n var element = document.getElementById(view.element.id + '_nativeLayer');\n if (element.children.length > 0) {\n view.updateView(view);\n }\n }\n var htmlLayer = getHTMLLayer(view.element.id);\n //const bounds: Rect = this.spatialSearch.getPageBounds();\n this.renderDiagramElements(view.diagramLayer, view.diagramRenderer, htmlLayer, undefined, undefined, isOverView);\n for (var i = 0; i < this.basicElements.length; i++) {\n var element = this.basicElements[parseInt(i.toString(), 10)];\n element.measure(new Size(element.width, element.height));\n element.arrange(element.desiredSize);\n view.diagramRenderer.renderElement(element, view.diagramLayer, htmlLayer);\n }\n if (view instanceof Diagram) {\n view.diagramLayer.style.transform = 'scale(' + (2 / 3) + ')';\n view.diagramLayer.style.transformOrigin = '0 0';\n }\n this.renderTimer = null;\n }\n };\n /**\n *refreshCanvasDiagramLayer method \\\n *\n * @returns { void } refreshCanvasDiagramLayer method .\\\n * @param { View } view - provide the view value.\n *\n * @private\n */\n Diagram.prototype.refreshCanvasDiagramLayer = function (view) {\n var _this = this;\n if (view.mode !== 'SVG' && !this.isDestroyed) {\n if (this.basicElements.length > 0) {\n this.renderBasicElement(view);\n }\n if ((!this.diagramActions || (this.diagramActions & DiagramAction.Render) === 0)\n || (DiagramAction.ToolAction & this.diagramActions) || canVitualize(this) || (this.scroller.currentZoom !== 1)) {\n this.refreshElements(view);\n }\n else if (!this.renderTimer) {\n this.renderTimer = setTimeout(function () {\n _this.refreshElements(view);\n }, 40);\n }\n }\n };\n /**\n *updatePortVisibility method \\\n *\n * @returns { void } updatePortVisibility method .\\\n * @param { Node } obj - provide the node value.\n * @param { PortVisibility } portVisibility - provide the portVisibility value.\n * @param { Boolean } inverse - provide the inverse value.\n *\n * @private\n */\n Diagram.prototype.updatePortVisibility = function (obj, portVisibility, inverse) {\n var portElement;\n var drawingObject = !(this.drawingObject && this.drawingObject.shape) ? true : false;\n if ((obj instanceof Node || obj instanceof Connector) && drawingObject && canMove(obj)) {\n var ports = obj.ports;\n var changed = false;\n for (var i = 0; i < ports.length; i++) {\n portElement = this.getWrapper(obj.wrapper, ports[parseInt(i.toString(), 10)].id);\n if ((portVisibility & PortVisibility.Hover || portVisibility & PortVisibility.Connect)) {\n if (checkPortRestriction(ports[parseInt(i.toString(), 10)], portVisibility)) {\n portElement.visible = !inverse;\n changed = true;\n }\n }\n }\n if (changed) {\n this.updateDiagramObject(obj);\n }\n //EJ2-59672 - Added the below code to render the ports while hovering over the node\n if (this.mode === 'Canvas') {\n this.refreshCanvasLayers();\n }\n }\n };\n /**\n *refreshSvgDiagramLayer method \\\n *\n * @returns { void } refreshSvgDiagramLayer method .\\\n * @param { View } view - provide the object value.\n *\n * @private\n */\n Diagram.prototype.refreshSvgDiagramLayer = function (view) {\n var element;\n var diagramElementsLayer = document.getElementById(view.element.id + '_diagramLayer');\n var htmlLayer = getHTMLLayer(view.element.id);\n if (!canVitualize(this)) {\n for (var i = 0; i < this.basicElements.length; i++) {\n element = this.basicElements[parseInt(i.toString(), 10)];\n element.measure(new Size(element.width, element.height));\n element.arrange(element.desiredSize, (!(this.diagramActions & DiagramAction.Render) ? true : false));\n this.diagramRenderer.renderElement(element, diagramElementsLayer, htmlLayer);\n }\n this.renderDiagramElements(diagramElementsLayer, this.diagramRenderer, htmlLayer);\n }\n else {\n this.scroller.virtualizeElements();\n }\n };\n /**\n *removeVirtualObjects method \\\n *\n * @returns { void } removeVirtualObjects method .\\\n * @param { Object } clearIntervalVal - provide the object value.\n *\n * @private\n */\n Diagram.prototype.removeVirtualObjects = function (clearIntervalVal) {\n if (this.deleteVirtualObject) {\n for (var i = 0; i < this.scroller.removeCollection.length; i++) {\n var obj = this.nameTable[this.scroller.removeCollection[parseInt(i.toString(), 10)]];\n //EJ2-840437 - Exception occurs When Removing connector with Virtualization Enabled\n if (obj !== undefined) {\n this.removeElements(obj);\n }\n }\n this.deleteVirtualObject = false;\n }\n clearInterval(clearIntervalVal);\n };\n /**\n *updateTextElementValue method \\\n *\n * @returns { void } updateTextElementValue method .\\\n * @param { NodeModel | ConnectorModel } object - provide the object value.\n *\n * @private\n */\n Diagram.prototype.updateTextElementValue = function (object) {\n for (var j = 0; j < object.wrapper.children.length; j++) {\n var element = object.wrapper.children[parseInt(j.toString(), 10)];\n if (element instanceof TextElement) {\n element.canMeasure = true;\n //866384-Annotation Alignment is wrong when virtualisation constraints enabled\n var viewPortHeight = this.scroller.viewPortHeight;\n var viewPortWidth = this.scroller.viewPortWidth;\n var measureText = false;\n if (object.offsetX < viewPortWidth && object.offsetY < viewPortHeight) {\n measureText = true;\n }\n if (measureText && canVitualize(this) && element.actualSize.height === undefined\n && element.actualSize.width === undefined) {\n object.wrapper.measure(new Size(object.width, object.height), object.id, this.onLoadImageSize.bind(this));\n object.wrapper.arrange(object.wrapper.desiredSize);\n }\n element.measure(new Size(object.width, object.height));\n element.arrange(element.desiredSize);\n }\n }\n };\n /**\n *updateVirtualObjects method \\\n *\n * @returns { void } updateVirtualObjects method .\\\n * @param { string[] } collection - provide the collection value.\n * @param { boolean } remove - provide the remove value.\n * @param { string[] } tCollection - provide the htmlLayer value.\n *\n * @private\n */\n Diagram.prototype.updateVirtualObjects = function (collection, remove, tCollection) {\n var diagramElementsLayer = document.getElementById(this.element.id + '_diagramLayer');\n var htmlLayer = getHTMLLayer(this.element.id);\n if (this.mode === 'SVG') {\n for (var i = 0; i < collection.length; i++) {\n var index = this.scroller.removeCollection.indexOf(collection[parseInt(i.toString(), 10)]);\n if (index >= 0) {\n this.scroller.removeCollection.splice(index, 1);\n }\n var object = this.nameTable[collection[parseInt(i.toString(), 10)]];\n this.updateTextElementValue(object);\n this.diagramRenderer.renderElement(object.wrapper, diagramElementsLayer, htmlLayer, undefined, undefined, undefined, undefined, object.zIndex);\n }\n for (var k = 0; k < tCollection.length; k++) {\n this.scroller.removeCollection.push(tCollection[parseInt(k.toString(), 10)]);\n }\n if (this.scroller.currentZoom !== 1) {\n this.eventHandler.updateVirtualization();\n }\n }\n else if (this.diagramActions) {\n this.refreshDiagramLayer();\n }\n };\n /**\n *renderDiagramElements method \\\n *\n * @returns { void } renderDiagramElements method .\\\n * @param { HTMLCanvasElement | SVGElement} canvas - provide the canvas value.\n * @param { DiagramRenderer } renderer - provide the renderer value.\n * @param { HTMLElement } htmlLayer - provide the htmlLayer value.\n * @param {boolean } transform - provide the transform value.\n * @param {boolean } fromExport - provide the fromExport value.\n * @param { boolean } isOverView - provide the isOverView value.\n *\n * @private\n */\n Diagram.prototype.renderDiagramElements = function (canvas, renderer, htmlLayer, transform, fromExport, isOverView) {\n if (transform === void 0) { transform = true; }\n var pageBounds = this.scroller.getPageBounds();\n pageBounds.x *= this.scroller.currentZoom;\n pageBounds.y *= this.scroller.currentZoom;\n pageBounds.width *= this.scroller.currentZoom;\n pageBounds.height *= this.scroller.currentZoom;\n var difX = -this.scroller.horizontalOffset - pageBounds.x;\n var difY = -this.scroller.verticalOffset - pageBounds.y;\n var getCenterPoint;\n for (var _i = 0, _a = Object.keys(this.layerZIndexTable); _i < _a.length; _i++) {\n var layerId = _a[_i];\n var layer = this.commandHandler.getLayer(this.layerZIndexTable[\"\" + layerId]);\n var left = void 0;\n var top_1 = void 0;\n if (this.mode === 'Canvas' && canVitualize(this) && !this.diagramActions) {\n this.scroller.virtualizeElements();\n }\n var id = (this.mode === 'Canvas' && canVitualize(this) &&\n this.scroller.oldCollectionObjects.length > 0) ?\n this.scroller.oldCollectionObjects : undefined;\n // Sort layer objects to arrange nodes with negative zIndex values at the beginning of the array.\n // Due to the new implementation with order commands, the zIndex of a node may become negative.\n // Therefore, we need to sort the zIndex values, with the least negative values coming first, followed by positive values.\n var layerObjects = Object.keys(id || layer.zIndexTable);\n layerObjects.sort(function (a, b) { return parseInt(\"\" + a, 10) - parseInt(\"\" + b, 10); });\n for (var _b = 0, layerObjects_1 = layerObjects; _b < layerObjects_1.length; _b++) {\n var node = layerObjects_1[_b];\n var renderNode = id ? this.nameTable[id[\"\" + node]] : this.nameTable[layer.zIndexTable[\"\" + node]];\n if (renderNode && !(renderNode.parentId) && layer.visible &&\n (!(renderNode.processId) || this.refreshing)) {\n //EJ2-68738 - Overview content not updated properly on zoom out the diagram\n var transformValue = void 0;\n //828826 - In canvas mode diagram transform values are not updated properly while Zoom out action\n if (this.scroller.currentZoom < 1 && this.mode === 'SVG') {\n transformValue = {\n tx: (-pageBounds.x) / this.scroller.currentZoom,\n ty: (-pageBounds.y) / this.scroller.currentZoom,\n scale: this.scroller.transform.scale\n };\n }\n else {\n transformValue = {\n tx: this.scroller.transform.tx,\n ty: this.scroller.transform.ty,\n scale: this.scroller.transform.scale\n };\n }\n // Bug 880945: Overview is not updated properly with 4k monitor.\n //To render the overview elements based on the pageBounds.\n if (isOverView) {\n transformValue = {\n tx: (-pageBounds.x) / this.scroller.currentZoom,\n ty: (-pageBounds.y) / this.scroller.currentZoom,\n scale: this.scroller.transform.scale\n };\n }\n if (canVitualize(this)) {\n if (this.scroller.currentZoom < 1) {\n if (pageBounds.x < 0 || this.scroller.horizontalOffset < 0) {\n var verticalValue = this.scroller.verticalOffset < 0 ? this.scroller.verticalOffset : 0;\n left = (difX > 0 ? difX : 0) + 'px';\n top_1 = ((this.realActions & RealAction.vScrollbarMoved) ? 0 : -verticalValue) + 'px';\n }\n else {\n left = 0 + 'px';\n top_1 = 0 + 'px';\n }\n if (this.realActions & RealAction.hScrollbarMoved) {\n this.realActions = this.realActions & ~RealAction.hScrollbarMoved;\n }\n if (this.realActions & RealAction.vScrollbarMoved) {\n this.realActions = this.realActions & ~RealAction.vScrollbarMoved;\n }\n }\n else {\n left = (pageBounds.x < 0 ? difX : -this.scroller.horizontalOffset) + 'px';\n top_1 = (pageBounds.y < 0 ? difY : -this.scroller.verticalOffset) + 'px';\n }\n this.diagramLayer.style.left = left;\n this.diagramLayer.style.top = top_1;\n //EJ2-69578 - Overview is not updated properly when we enable virtualization.\n transformValue.tx = (-pageBounds.x) / transformValue.scale;\n transformValue.ty = (-pageBounds.y) / transformValue.scale;\n }\n var status_1 = true;\n if (fromExport) {\n status_1 = false;\n }\n this.updateTextElementValue(renderNode);\n if (this.refreshing) {\n if (renderNode.shape.activity && renderNode.shape.activity.subProcess\n && renderNode.shape.activity.subProcess.processes) {\n for (var i = 0; i < renderNode.shape.activity.subProcess.processes.length; i++) {\n var process = renderNode.shape.activity.subProcess.processes[parseInt(i.toString(), 10)];\n renderNode.wrapper.children.push(this.nameTable[\"\" + process].wrapper);\n }\n renderNode.wrapper.measure(new Size(renderNode.wrapper.bounds.width, renderNode.wrapper.bounds.height));\n renderNode.wrapper.arrange(renderNode.wrapper.desiredSize);\n }\n }\n if (renderNode instanceof Connector && renderNode.type === 'Bezier') {\n getCenterPoint = this.getMidPoint(renderNode);\n // (EJ2-58802) - Added the below code to add the transform x and y values to center point value in canvas mode\n if (this.mode === 'Canvas' && transform) {\n getCenterPoint.cx += transformValue.tx;\n getCenterPoint.cy += transformValue.ty;\n }\n }\n else {\n getCenterPoint = null;\n }\n renderer.renderElement(renderNode.wrapper, canvas, htmlLayer, (!renderer.isSvgMode && transform) ? transformValue : undefined, undefined, undefined, status_1 && (!this.diagramActions || isOverView), undefined, undefined, getCenterPoint, this.portCenterPoint);\n }\n }\n }\n };\n /**\n *updateBridging method \\\n *\n * @returns { void } updateBridging method .\\\n * @param {string} isLoad - provide the isLoad value.\n *\n * @private\n */\n Diagram.prototype.updateBridging = function (isLoad) {\n if (this.bridgingModule) {\n for (var i = 0; i < this.connectors.length; i++) {\n var connector = this.connectors[parseInt(i.toString(), 10)];\n this.bridgingModule.updateBridging(connector, this);\n var canvas = this.connectors[parseInt(i.toString(), 10)].wrapper;\n if (canvas && canvas.children && canvas.children.length > 0) {\n var pathSegment = canvas.children[0];\n var data = pathSegment.data;\n if (connector.isBezierEditing && this.selectedItems.connectors[0].id === connector.id || connector.type !== 'Bezier') {\n connector.getSegmentElement(connector, pathSegment, this.layout.type === 'ComplexHierarchicalTree' || this.layout.type === 'HierarchicalTree' ?\n this.layout.orientation : undefined, undefined, false);\n }\n if (pathSegment.data !== data) {\n canvas.measure(new Size());\n canvas.arrange(canvas.desiredSize);\n if (this.mode === 'SVG' && !isLoad) {\n this.updateDiagramObject(connector);\n }\n }\n }\n }\n }\n else if (this.constraints & DiagramConstraints.Bridging) {\n console.warn('[WARNING] :: Module \"ConnectorBridging\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n };\n /**\n *setCursor method \\\n *\n * @returns { void } setCursor method .\\\n * @param {string} cursor - provide the width value.\n *\n * @private\n */\n Diagram.prototype.setCursor = function (cursor) {\n this.diagramRenderer.setCursor(this.diagramCanvas, cursor);\n };\n /**\n *clearCanvas method \\\n *\n * @returns { void } clearCanvas method .\\\n * @param {View} view - provide the width value.\n *\n * @private\n */\n Diagram.prototype.clearCanvas = function (view) {\n //let width: number;\n //let height: number;\n var width = view.contentWidth || view.diagramLayer.width / this.scroller.currentZoom;\n var height = view.contentHeight || view.diagramLayer.height / this.scroller.currentZoom;\n if (view.mode !== 'SVG') {\n var ctx = CanvasRenderer.getContext(view.diagramLayer);\n ctx.clearRect(0, 0, width, height);\n }\n };\n /**\n *updateScrollOffset method \\\n *\n * @returns { void } updateScrollOffset method .\\\n *\n * @private\n */\n Diagram.prototype.updateScrollOffset = function () {\n this.scroller.setScrollOffset(this.diagramCanvas.scrollLeft, this.diagramCanvas.scrollTop);\n updateRuler(this);\n if (canVitualize(this)) {\n this.scroller.virtualizeElements();\n }\n };\n /**\n *setOffset method \\\n *\n * @returns { void } setOffset method .\\\n * @param {number} offsetX - provide the width value.\n * @param {number} offsetY - provide the height value.\n *\n * @private\n */\n Diagram.prototype.setOffset = function (offsetX, offsetY) {\n var domTable = 'domTable';\n if (!window[\"\" + domTable][this.element.id + 'content']) {\n window[\"\" + domTable][this.element.id + 'content'] = document.getElementById(this.element.id + 'content');\n }\n var container = window[\"\" + domTable][this.element.id + 'content'];\n if (container) {\n container.scrollLeft = offsetX;\n container.scrollTop = offsetY;\n }\n };\n /**\n *setSize method \\\n *\n * @returns { void } setSize method .\\\n * @param {number} width - provide the width value.\n * @param {number} height - provide the height value.\n *\n * @private\n */\n Diagram.prototype.setSize = function (width, height) {\n if (this.diagramLayer && !this.preventDiagramUpdate) {\n var position = getRulerSize(this);\n width -= position.width;\n height -= position.height;\n var bounds = this.spatialSearch.getPageBounds();\n bounds.x *= this.scroller.currentZoom;\n bounds.y *= this.scroller.currentZoom;\n bounds.width *= this.scroller.currentZoom;\n bounds.height *= this.scroller.currentZoom;\n var factor = this.mode === 'SVG' ? 1 : 1.5;\n var diagramLayer = this.mode === 'SVG' ?\n getDiagramLayerSvg(this.element.id) : this.diagramLayer;\n var w = (this.mode === 'Canvas' &&\n (this.constraints & DiagramConstraints.Virtualization)) ? this.scroller.viewPortWidth : width;\n var h = (this.mode === 'Canvas' &&\n (this.constraints & DiagramConstraints.Virtualization)) ? this.scroller.viewPortHeight : height;\n diagramLayer.setAttribute('width', (factor * w).toString());\n diagramLayer.setAttribute('height', (factor * h).toString());\n var hiddenUserHandleTemplate = document.getElementById(this.element.id + '_diagramUserHandleLayer');\n if (hiddenUserHandleTemplate) {\n hiddenUserHandleTemplate.style.width = width + 'px';\n hiddenUserHandleTemplate.style.height = height + 'px';\n }\n var attr = { 'width': width.toString(), 'height': height.toString() };\n this.diagramLayerDiv.style.width = width + 'px';\n this.diagramLayerDiv.style.height = height + 'px';\n setAttributeSvg(getNativeLayerSvg(this.element.id), attr);\n setAttributeSvg(getPortLayerSvg(this.element.id), attr);\n var adornerSVG = getAdornerLayerSvg(this.element.id);\n setAttributeSvg(adornerSVG, attr);\n adornerSVG.parentNode.style.width = width + 'px';\n adornerSVG.parentNode.style.height = height + 'px';\n var gridLayer = getGridLayerSvg(this.element.id);\n setAttributeSvg(gridLayer, attr);\n this.diagramRenderer.updateGrid(this.snapSettings, gridLayer, this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n setAttributeSvg(getBackgroundLayerSvg(this.element.id), attr);\n this.htmlLayer.style.width = width + 'px';\n this.htmlLayer.style.height = height + 'px';\n if (this.mode !== 'SVG' && !(canVitualize(this))) {\n this.refreshDiagramLayer();\n }\n if (this.mode === 'SVG' && canVitualize(this)) {\n this.scroller.virtualizeElements();\n }\n }\n };\n /**\n *transformLayers method \\\n *\n * @returns { void } Defines how to remove the Page breaks .\\\n *\n * @private\n */\n Diagram.prototype.transformLayers = function () {\n var bounds = this.spatialSearch.getPageBounds();\n bounds.x *= this.scroller.currentZoom;\n bounds.y *= this.scroller.currentZoom;\n bounds.width *= this.scroller.currentZoom;\n bounds.height *= this.scroller.currentZoom;\n this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n this.diagramRenderer.transformLayers(this.scroller.transform, this.mode === 'SVG');\n if (!(this.diagramActions & DiagramAction.DragUsingMouse)) {\n this.updateSelector();\n }\n this.renderPageBreaks(bounds);\n };\n /**\n *Defines how to remove the Page breaks \\\n *\n * @returns { void } Defines how to remove the Page breaks .\\\n *\n * @private\n */\n Diagram.prototype.removePageBreaks = function () {\n if (this.diagramLayer) {\n var line = getBackgroundLayer(this.element.id);\n if (line && line.childNodes) {\n var length_2 = line.childNodes.length;\n for (var i = 0; i < length_2; i++) {\n line.removeChild(line.childNodes[0]);\n }\n }\n }\n };\n /**\n * Defines how the page breaks has been rendered \\\n *\n * @returns { void } Defines how the page breaks has been rendered .\\\n * @param {Rect} bounds - provide the overview value.\n *\n * @private\n */\n Diagram.prototype.renderPageBreaks = function (bounds) {\n this.removePageBreaks();\n var backgroundLayer = getBackgroundLayer(this.element.id);\n if (backgroundLayer) {\n var i = 0;\n bounds = this.scroller.getPageBounds(true);\n var x = (this.scroller.transform.tx + bounds.x) * this.scroller.currentZoom;\n var y = (this.scroller.transform.ty + bounds.y) * this.scroller.currentZoom;\n var height = bounds.height * this.scroller.currentZoom;\n var width = bounds.width * this.scroller.currentZoom;\n DiagramRenderer.renderSvgBackGroundImage(this.pageSettings.background, this.element, x, y, width, height);\n var options = {\n id: backgroundLayer.id + 'rect', x: x,\n y: y,\n height: height,\n width: width, angle: 0, stroke: '', strokeWidth: 1,\n fill: this.pageSettings.background.color, opacity: 1,\n pivotX: 0, pivotY: 0, visible: true, dashArray: '0'\n };\n this.diagramRenderer.drawRect(backgroundLayer, options);\n if (this.pageSettings.showPageBreaks) {\n var collection = this.scroller.getPageBreak(bounds);\n for (i = 0; i < collection.length; i++) {\n this.diagramRenderer.drawLine(backgroundLayer, {\n class: 'e-diagram-page-break',\n fill: 'none', stroke: '#aaaaaa', strokeWidth: 1, dashArray: '10 10',\n opacity: 2, x: 0, y: 0, width: 0, height: 0, angle: 0, pivotX: 0, pivotY: 0, visible: true,\n startPoint: {\n x: (collection[parseInt(i.toString(), 10)].x1 + this.scroller.transform.tx) * this.scroller.currentZoom,\n y: (collection[parseInt(i.toString(), 10)].y1 + this.scroller.transform.ty) * this.scroller.currentZoom\n },\n endPoint: {\n x: (collection[parseInt(i.toString(), 10)].x2 + this.scroller.transform.tx) * this.scroller.currentZoom,\n y: (collection[parseInt(i.toString(), 10)].y2 + this.scroller.transform.ty) * this.scroller.currentZoom\n }, id: collection[parseInt(i.toString(), 10)].y1 === collection[parseInt(i.toString(), 10)].y2 ? 'HorizontalLines' : 'VerticalLines'\n });\n }\n }\n }\n };\n Diagram.prototype.validatePageSize = function () {\n var temp = 0;\n if (this.pageSettings.orientation === 'Portrait') {\n if (this.pageSettings.width > this.pageSettings.height) {\n temp = this.pageSettings.height;\n this.pageSettings.height = this.pageSettings.width;\n this.pageSettings.width = temp;\n }\n }\n else {\n if (this.pageSettings.height > this.pageSettings.width) {\n temp = this.pageSettings.width;\n this.pageSettings.width = this.pageSettings.height;\n this.pageSettings.height = temp;\n }\n }\n };\n /**\n * setOverview method \\\n *\n * @returns { void } setOverview method .\\\n * @param {View} overview - provide the overview value.\n * @param {string} id - provide the boolean value.\n *\n * @private\n */\n Diagram.prototype.setOverview = function (overview, id) {\n if (overview) {\n if (overview) {\n this.views.push(overview.id);\n this.views[overview.id] = overview;\n overview.renderDocument(overview);\n overview.diagramRenderer.setLayers();\n overview.updateView(overview);\n this.renderNodes(overview);\n }\n }\n else {\n for (var i = 0; i < this.views.length; i++) {\n if (this.views[parseInt(i.toString(), 10)] === id) {\n overview = (this.views[\"\" + id]);\n }\n }\n this.views[\"\" + id] = undefined;\n var index = this.views.indexOf(id);\n this.views.splice(index, 1);\n }\n };\n Diagram.prototype.renderNodes = function (overview) {\n if (overview) {\n var renderer = new DiagramRenderer(overview.id, new SvgRenderer(), false);\n var g = document.getElementById(overview.element.id + '_diagramLayer');\n var htmlLayer = getHTMLLayer(overview.element.id);\n this.renderDiagramElements(g, overview.diagramRenderer || renderer, htmlLayer, undefined, undefined, true);\n }\n };\n Diagram.prototype.updateThumbConstraints = function (node, selectorModel, canInitialize) {\n var length = node.length;\n for (var i = 0; i < length; i++) {\n var obj = node[parseInt(i.toString(), 10)];\n var hideRotate = false;\n var hideResize = false;\n var thumbConstraints = selectorModel.thumbsConstraints;\n if (obj instanceof Node) {\n hideRotate = (obj.shape.type === 'Bpmn' && (obj.shape.shape === 'Activity' &&\n (obj.shape.activity.subProcess.collapsed === false)));\n // hideResize = (obj.shape.type === 'Bpmn' && (obj.shape as BpmnShapeModel).shape === 'TextAnnotation');\n if (!canRotate(obj) || !(thumbConstraints & ThumbsConstraints.Rotate) || hideRotate) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.Rotate;\n }\n if (!canResize(obj, 'SouthEast') || !(thumbConstraints & ThumbsConstraints.ResizeSouthEast) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeSouthEast;\n }\n if (!canResize(obj, 'NorthWest') || !(thumbConstraints & ThumbsConstraints.ResizeNorthWest) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeNorthWest;\n }\n if (!canResize(obj, 'East') || !(thumbConstraints & ThumbsConstraints.ResizeEast) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeEast;\n }\n if (!canResize(obj, 'West') || !(thumbConstraints & ThumbsConstraints.ResizeWest) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeWest;\n }\n if (!canResize(obj, 'North') || !(thumbConstraints & ThumbsConstraints.ResizeNorth) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeNorth;\n }\n if (!canResize(obj, 'South') || !(thumbConstraints & ThumbsConstraints.ResizeSouth) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeSouth;\n }\n if (!canResize(obj, 'NorthEast') || !(thumbConstraints & ThumbsConstraints.ResizeNorthEast) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeNorthEast;\n }\n if (!canResize(obj, 'SouthWest') || !(thumbConstraints & ThumbsConstraints.ResizeSouthWest) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeSouthWest;\n }\n }\n else if (obj instanceof Connector) {\n if (!canInitialize) {\n thumbConstraints = thumbConstraints | ThumbsConstraints.Default;\n }\n if (canDragSourceEnd(obj)) {\n thumbConstraints = thumbConstraints | ThumbsConstraints.ConnectorSource;\n }\n else {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ConnectorSource;\n }\n if (canDragTargetEnd(obj)) {\n thumbConstraints = thumbConstraints | ThumbsConstraints.ConnectorTarget;\n }\n else {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ConnectorTarget;\n }\n }\n else {\n if (!canInitialize) {\n thumbConstraints = thumbConstraints | ThumbsConstraints.Default;\n }\n if (!canResize(obj)) {\n thumbConstraints = thumbConstraints & ~(ThumbsConstraints.ResizeSouthEast | ThumbsConstraints.ResizeSouthWest |\n ThumbsConstraints.ResizeSouth | ThumbsConstraints.ResizeEast | ThumbsConstraints.ResizeWest |\n ThumbsConstraints.ResizeNorth | ThumbsConstraints.ResizeNorthEast | ThumbsConstraints.ResizeNorthWest);\n }\n if (!canRotate(obj)) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.Rotate;\n }\n }\n selectorModel.thumbsConstraints = thumbConstraints;\n }\n };\n /**\n * renderSelector method \\\n *\n * @returns { void } renderSelector method .\\\n * @param {boolean} multipleSelection - provide the multipleSelection value.\n * @param {boolean} isSwimLane - provide the boolean value.\n * @param { Canvas } canvas - provide the lane or swimlane canvas\n *\n * @private\n */\n Diagram.prototype.renderSelector = function (multipleSelection, isSwimLane, canvas) {\n var isProtectedOnChangeValue = this.isProtectedOnChange;\n //Removed isBlazor code\n var size = new Size();\n var selectorModel = this.selectedItems;\n var selectorConstraints = selectorModel.constraints;\n var rendererActions = this.diagramRenderer.rendererActions;\n var innertemplate = document.getElementsByClassName('blazor-inner-template');\n this.diagramRenderer.rendererActions = this.currentSymbol ?\n this.addConstraints(rendererActions, RendererAction.DrawSelectorBorder) :\n this.removeConstraints(rendererActions, RendererAction.DrawSelectorBorder);\n this.clearSelectorLayer();\n if (this.commandHandler.hasSelection()) {\n if (selectorModel.nodes.length === 1 && selectorModel.connectors.length === 0) {\n selectorModel.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.pivot = selectorModel.nodes[0].pivot;\n }\n selectorModel.wrapper.measure(size);\n selectorModel.wrapper.arrange(selectorModel.wrapper.desiredSize);\n selectorModel.width = selectorModel.wrapper.actualSize.width;\n selectorModel.height = selectorModel.wrapper.actualSize.height;\n selectorModel.offsetX = selectorModel.wrapper.offsetX;\n selectorModel.offsetY = selectorModel.wrapper.offsetY;\n if (selectorModel.rotateAngle !== 0) {\n for (var _i = 0, _a = selectorModel.nodes; _i < _a.length; _i++) {\n var obj = _a[_i];\n obj.offsetX = obj.wrapper.offsetX;\n obj.offsetY = obj.wrapper.offsetY;\n }\n for (var _b = 0, _c = selectorModel.connectors; _b < _c.length; _b++) {\n var conn = _c[_b];\n //update connections\n }\n }\n var bounds = this.spatialSearch.getPageBounds();\n //let selectorElement: (SVGElement | HTMLCanvasElement);\n var selectorElement = getSelectorElement(this.element.id);\n //let diagramUserHandlelayer: (SVGElement | HTMLElement);\n var diagramUserHandlelayer = getUserHandleLayer(this.element.id);\n selectorModel.thumbsConstraints = ThumbsConstraints.Default;\n if (selectorModel.annotation) {\n this.updateThumbConstraints([selectorModel.annotation], selectorModel);\n }\n else {\n this.updateThumbConstraints(selectorModel.nodes, selectorModel);\n this.updateThumbConstraints(selectorModel.connectors, selectorModel, true);\n }\n if (selectorModel.annotation) {\n this.renderSelectorForAnnotation(selectorModel, selectorElement);\n }\n else if (selectorModel.nodes.length + selectorModel.connectors.length === 1 || this.nameTable['helper']) {\n if (selectorModel.nodes[0] instanceof Node) {\n var node = selectorModel.nodes[0];\n if (checkParentAsContainer(this, node)) {\n if (!isSwimLane && (node.shape.type !== 'UmlClassifier' && !(node.parentId &&\n this.nameTable[node.parentId]\n && this.nameTable[node.parentId].shape.type === 'UmlClassifier'))) {\n selectorModel.thumbsConstraints &= ~ThumbsConstraints.Rotate;\n }\n }\n var constraints = isSwimLane ? true : ((node.constraints & NodeConstraints.HideThumbs) ? true : false);\n var swimlane = (node.shape.type === 'SwimLane' || node.isLane || node.isPhase || isSwimLane) ? true : false;\n this.diagramRenderer.renderResizeHandle(isSwimLane ? canvas : selectorModel.wrapper.children[0], selectorElement, selectorModel.thumbsConstraints, this.scroller.currentZoom, selectorModel.constraints, this.scroller.transform, undefined, canMove(node), constraints, swimlane, selectorModel.handleSize);\n }\n else if (selectorModel.connectors[0] instanceof Connector && canDrawThumbs(this.diagramRenderer.rendererActions)) {\n var connector = selectorModel.connectors[0];\n this.diagramRenderer.renderEndPointHandle(connector, selectorElement, selectorModel.thumbsConstraints, selectorModel.constraints, this.scroller.transform, connector.sourceWrapper !== undefined, connector.targetWrapper !== undefined, (this.connectorEditingToolModule && canDragSegmentThumb(connector)) ? true : false, this.connectorEditingToolModule ? true : false, selectorModel.handleSize);\n }\n }\n else {\n this.diagramRenderer.renderResizeHandle(selectorModel.wrapper, selectorElement, selectorModel.thumbsConstraints, this.scroller.currentZoom, selectorModel.constraints, this.scroller.transform, undefined, canMove(selectorModel), null, null, selectorModel.handleSize);\n }\n if (!(selectorModel.annotation) && !this.currentSymbol) {\n this.diagramRenderer.renderUserHandler(selectorModel, selectorElement, this.scroller.transform, diagramUserHandlelayer, this.eventHandler.currentAction, this.eventHandler.inAction);\n //Removed isBlazor code\n }\n }\n // EJ2-56919 - Add below code to render the selection rectangle for node if selected objects length is greater than one\n if (this.selectedItems.selectedObjects.length > 1) {\n this.updateSelectionRectangle();\n }\n this.isProtectedOnChange = isProtectedOnChangeValue;\n };\n Diagram.prototype.updateSelectionRectangle = function () {\n var selectorElement = getSelectorElement(this.element.id);\n var isFirst = false;\n for (var i = 0; i < this.selectedItems.selectedObjects.length; i++) {\n // EJ2-56919 - For first selected object we need to set stroke as 2, so check below condition as i is zero or not\n // For first element we passed isFirst argument(last arg) as true in both render selection line and rectangle method\n isFirst = i === 0 ? true : false;\n if (getObjectType(this.selectedItems.selectedObjects[parseInt(i.toString(), 10)]) === Connector) {\n // EJ2-56919 - If selected object type is connector means then render selection line for connector\n this.diagramRenderer.renderSelectionLine(this.selectedItems.selectedObjects[parseInt(i.toString(), 10)].wrapper.children[0], selectorElement, this.scroller.transform, isFirst);\n }\n else {\n // EJ2-56919 - If selected object type is node means then render selection rectangle for node\n this.diagramRenderer.renderSelectionRectangle(this.selectedItems.selectedObjects[parseInt(i.toString(), 10)].wrapper, selectorElement, this.scroller.transform, isFirst);\n }\n }\n };\n /**\n * updateSelector method \\\n *\n * @returns { void } updateSelector method .\\\n *\n * @private\n */\n Diagram.prototype.updateSelector = function () {\n var severDataBind = this.allowServerDataBinding;\n this.enableServerDataBinding(false);\n var size = new Size();\n var selector = this.selectedItems;\n var selectorConstraints = selector.constraints;\n var innertemplate = document.getElementsByClassName('blazor-inner-template');\n if (!(this.diagramActions & DiagramAction.ToolAction) && this.selectedItems.nodes.length === 1) {\n this.selectedItems.rotateAngle = this.selectedItems.nodes[0].rotateAngle;\n this.selectedItems.wrapper.rotateAngle = this.selectedItems.nodes[0].rotateAngle;\n }\n if (this.selectedItems !== undefined) {\n this.clearSelectorLayer();\n if (selector.wrapper !== null && selector.wrapper.children && selector.wrapper.children.length) {\n var canUpdate = true;\n var canRender = true;\n if (selectionHasConnector(this, selector)) {\n var eventHandler = 'eventHandler';\n var rotate = this[\"\" + eventHandler].action;\n var isRotate = rotate.includes('Rotate');\n var isSelect = rotate.includes('None') || rotate.includes('Select') || rotate.includes('Drag');\n if (isRotate || isSelect) {\n canRender = false;\n }\n if (!isSelect) {\n canUpdate = false;\n }\n }\n if (canUpdate) {\n selector.wrapper.measure(size);\n selector.wrapper.arrange(selector.wrapper.desiredSize);\n }\n if (selector.rotateAngle !== 0 || selector.rotateAngle !== selector.wrapper.prevRotateAngle) {\n for (var _i = 0, _a = selector.nodes; _i < _a.length; _i++) {\n var obj = _a[_i];\n obj.offsetX = obj.wrapper.offsetX;\n obj.offsetY = obj.wrapper.offsetY;\n }\n }\n selector.width = selector.wrapper.actualSize.width;\n selector.height = selector.wrapper.actualSize.height;\n selector.offsetX = selector.wrapper.offsetX;\n selector.offsetY = selector.wrapper.offsetY;\n //let selectorEle: (SVGElement | HTMLCanvasElement);\n var selectorEle = getSelectorElement(this.element.id);\n //let diagramUserHandlelayer: (SVGElement | HTMLElement);\n var diagramUserHandlelayer = getUserHandleLayer(this.element.id);\n var canHideResizers = this.eventHandler.canHideResizers();\n selector.thumbsConstraints = ThumbsConstraints.Default;\n if (selector.annotation) {\n this.updateThumbConstraints([selector.annotation], selector);\n }\n else {\n this.updateThumbConstraints(selector.nodes, selector);\n this.updateThumbConstraints(selector.connectors, selector, true);\n }\n if ((this.selectedItems.constraints & SelectorConstraints.UserHandle) && (!(selector.annotation)) && !this.currentSymbol) {\n this.diagramRenderer.renderUserHandler(selector, selectorEle, this.scroller.transform, diagramUserHandlelayer, this.eventHandler.currentAction, this.eventHandler.inAction);\n //Removed isBlazor code\n }\n if (selector.annotation) {\n this.renderSelectorForAnnotation(selector, selectorEle);\n }\n else if (selector.nodes.length + selector.connectors.length === 1) {\n if (selector.connectors[0] instanceof Connector && canDrawThumbs(this.diagramRenderer.rendererActions)) {\n var connector = selector.connectors[0];\n this.diagramRenderer.renderEndPointHandle(connector, selectorEle, selector.thumbsConstraints, selectorConstraints, this.scroller.transform, connector.sourceWrapper !== undefined, connector.targetWrapper !== undefined, (this.connectorEditingToolModule && canDragSegmentThumb(connector)) ? true : false, this.connectorEditingToolModule ? true : false, selector.handleSize);\n }\n else if (selector.nodes[0] instanceof Node) {\n var stackPanel = selector.nodes[0];\n if (checkParentAsContainer(this, selector.nodes[0])) {\n if (stackPanel.shape.type !== 'UmlClassifier' && !(stackPanel.parentId &&\n this.nameTable[stackPanel.parentId]\n && this.nameTable[stackPanel.parentId].shape.type === 'UmlClassifier')) {\n selector.thumbsConstraints &= ~ThumbsConstraints.Rotate;\n }\n }\n var swimlane = (stackPanel.shape.type === 'SwimLane' || stackPanel.isLane ||\n stackPanel.isPhase) ? true : false;\n this.diagramRenderer.renderResizeHandle(selector.wrapper.children[0], selectorEle, selector.thumbsConstraints, this.scroller.currentZoom, selector.constraints, this.scroller.transform, canHideResizers, canMove(selector.nodes[0]), (selector.nodes[0].constraints & NodeConstraints.HideThumbs) ? true : false, swimlane, selector.handleSize);\n }\n }\n else {\n if (this.diagramActions & DiagramAction.Interactions) {\n this.diagramRenderer.rendererActions = this.diagramRenderer.rendererActions | RendererAction.PreventRenderSelector;\n }\n if (!(selectionHasConnector(this, selector) && canRender)) {\n this.diagramRenderer.renderResizeHandle(selector.wrapper, selectorEle, selector.thumbsConstraints, this.scroller.currentZoom, selector.constraints, this.scroller.transform, canHideResizers, canMove(selector), null, null, selector.handleSize);\n }\n this.diagramRenderer.rendererActions = this.diagramRenderer.rendererActions & ~RendererAction.PreventRenderSelector;\n }\n }\n }\n // EJ2-56919 - Add below code to render selection rectangle for node if selected objects length is greater than one\n if (this.selectedItems.selectedObjects.length > 1) {\n this.updateSelectionRectangle();\n }\n this.enableServerDataBinding(severDataBind);\n };\n /**\n * renderSelectorForAnnotation method \\\n *\n * @returns { void } renderSelectorForAnnotation method .\\\n * @param {Selector} selectorModel - provide the x value.\n * @param {(SVGElement | HTMLCanvasElement)} selectorElement - provide the y value.\n *\n * @private\n */\n //(EJ2-66036)- Annotation interaction not rendered properly\n Diagram.prototype.renderSelectorForAnnotation = function (selectorModel, selectorElement) {\n this.diagramRenderer.renderResizeHandle(selectorModel.wrapper.children[0], selectorElement, selectorModel.thumbsConstraints, this.scroller.currentZoom, selectorModel.constraints, this.scroller.transform, undefined, canMove(selectorModel.annotation), undefined, undefined, selectorModel.handleSize);\n };\n /**\n * drawSelectionRectangle method \\\n *\n * @returns { void } drawSelectionRectangle method .\\\n * @param {number} x - provide the x value.\n * @param {number} y - provide the y value.\n * @param {number} width - provide the width value.\n * @param {number} height - provide the height value.\n *\n * @private\n */\n Diagram.prototype.drawSelectionRectangle = function (x, y, width, height) {\n this.clearSelectorLayer();\n this.diagramRenderer.drawSelectionRectangle(x, y, width, height, this.adornerLayer, this.scroller.transform);\n };\n /**\n * renderHighlighter method \\\n *\n * @returns { void } renderHighlighter method .\\\n * @param {DiagramElement} element - provide the node value.\n *\n * @private\n */\n Diagram.prototype.renderHighlighter = function (element) {\n var adornerSvg = getAdornerLayerSvg(this.element.id);\n this.diagramRenderer.renderHighlighter(element, adornerSvg, this.scroller.transform);\n };\n /**\n * clearHighlighter method \\\n *\n * @returns { void } clearHighlighter method .\\\n *\n * @private\n */\n Diagram.prototype.clearHighlighter = function () {\n var adornerSvg = getAdornerLayerSvg(this.element.id);\n var highlighter = adornerSvg.getElementById(adornerSvg.id + '_highlighter');\n if (highlighter) {\n highlighter.parentNode.removeChild(highlighter);\n }\n };\n /**\n * getNodesConnectors method \\\n *\n * @returns { (NodeModel | ConnectorModel)[] } getNodesConnectors method .\\\n * @param {(NodeModel | ConnectorModel)[]} selectedItems - provide the node value.\n *\n * @private\n */\n Diagram.prototype.getNodesConnectors = function (selectedItems) {\n for (var i = 0; i < this.nodes.length; i++) {\n var node = this.nodes[parseInt(i.toString(), 10)];\n selectedItems.push(node);\n }\n for (var i = 0; i < this.connectors.length; i++) {\n var conn = this.connectors[parseInt(i.toString(), 10)];\n selectedItems.push(conn);\n }\n return selectedItems;\n };\n /**\n * clearSelectorLayer method \\\n *\n * @returns { void } clearSelectorLayer method .\\\n *\n * @private\n */\n Diagram.prototype.clearSelectorLayer = function () {\n var adornerSvg = getAdornerLayerSvg(this.element.id);\n var innertemplate = document.getElementsByClassName('blazor-inner-template');\n var i;\n if (!this.currentSymbol) {\n var selectionRect = adornerSvg.getElementById(this.adornerLayer.id + '_selected_region');\n if (selectionRect) {\n selectionRect.parentNode.removeChild(selectionRect);\n }\n this.clearHighlighter();\n var childNodes = getSelectorElement(this.element.id).childNodes;\n var child = void 0;\n //Bug 914365: Node is not resizable using touch interaction\n //Added below code to get the target which we are dragging using touch interaction\n var handleId = this.eventHandler.touchArgs ? this.eventHandler.touchArgs.target.id : undefined;\n if (handleId && handleId.includes('bezierLine')) {\n handleId = undefined;\n }\n for (var i_3 = childNodes.length; i_3 > 0; i_3--) {\n //Added below code to prevent the removal of target element from DOM while doing touch move interaction\n if (this.eventHandler && this.eventHandler.touchArgs && this.eventHandler.touchArgs.type === 'touchmove') {\n this.diagramRenderer.touchMove = true;\n if (!(handleId && handleId === childNodes[i_3 - 1].id)) {\n child = childNodes[i_3 - 1];\n child.parentNode.removeChild(child);\n }\n }\n else {\n child = childNodes[i_3 - 1];\n child.parentNode.removeChild(child);\n }\n }\n //Removed isBlazor code\n if (!isBlazor()) {\n var templates = getUserHandleLayer(this.element.id).childNodes;\n for (i = templates.length; i > 0; i--) {\n templates[i - 1].parentNode.removeChild(templates[i - 1]);\n }\n }\n }\n else {\n var symbolBorder = adornerSvg.getElementById('borderRect_symbol');\n if (symbolBorder) {\n symbolBorder.parentNode.removeChild(symbolBorder);\n }\n }\n };\n /**\n * getWrapper method \\\n *\n * @returns { void } getWrapper method .\\\n * @param {Container} nodes - provide the node value.\n * @param {string} id - provide the childernCollection value.\n *\n * @private\n */\n Diagram.prototype.getWrapper = function (nodes, id) {\n var wrapper;\n id = nodes.id + '_' + id;\n var container = nodes instanceof Canvas ? nodes : this.getPortContainer(this.nameTable[nodes.id]);\n for (var i = 0; i < container.children.length; i++) {\n if (id === container.children[parseInt(i.toString(), 10)].id) {\n wrapper = container.children[parseInt(i.toString(), 10)];\n }\n }\n return wrapper;\n };\n /**\n * DiagramElement method \\\n *\n * @returns { void } getEndNodeWrapper method .\\\n * @param {NodeModel | ConnectorModel} node - provide the node value.\n * @param {ConnectorModel} connector - provide the childernCollection value.\n * @param {boolean} source - provide the childernCollection value.\n *\n * @private\n */\n Diagram.prototype.getEndNodeWrapper = function (node, connector, source) {\n if (node.shape.type === 'Bpmn' && node.wrapper.children[0] instanceof Canvas) {\n if ((!isBlazor() && node.shape.shape === 'Activity')) {\n if (source && node.shape.activity.subProcess.type === 'Transaction'\n && connector.sourcePortID) {\n var portId = connector.sourcePortID;\n var parent_5 = node.wrapper.children[0].children[0].children[2];\n if (parent_5.children) {\n for (var _i = 0, _a = parent_5.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child.visible && child.id === node.id + '_' + portId) {\n return child.children[0];\n }\n }\n }\n }\n return node.wrapper.children[0].children[0].children[0];\n }\n return node.wrapper.children[0].children[0];\n }\n if (!this.containsMargin(node.wrapper.children[0])) {\n if (!node.children) {\n return node.wrapper.children[0];\n }\n }\n return node.wrapper;\n };\n Diagram.prototype.containsMargin = function (node) {\n return node.margin && (node.margin.left !== 0 || node.margin.top !== 0 || node.margin.right !== 0 || node.margin.bottom !== 0);\n };\n Diagram.prototype.focusOutEdit = function () {\n this.endEdit();\n // EJ2-57743 - Added below code to refresh the diagram layer after the annotation gets edited in canvas mode.\n if (this.mode === 'Canvas' && this.scroller.currentZoom !== 1) {\n this.refreshDiagramLayer();\n }\n };\n Diagram.prototype.endEditCommand = function () {\n this.endEdit();\n this.textEditing = false;\n // EJ2-57743 - Added below code to refresh the diagram layer after the annotation gets edited in canvas mode.\n if (this.mode === 'Canvas' && this.scroller.currentZoom !== 1) {\n this.refreshDiagramLayer();\n }\n };\n // EJ2-866418-keyboard shortcut keys method starting\n //Change the text style of nodes,swimlane,textnode\n Diagram.prototype.fontStyleCommand = function (format) {\n for (var i = 0; i < this.selectedItems.nodes.length; i++) {\n var node = this.selectedItems.nodes[parseInt(i.toString(), 10)];\n if (node.shape.type === 'SwimLane') {\n if (node.shape.hasHeader) {\n this.applyStyleText(format, node.shape.header.annotation);\n }\n }\n if (node.isLane) {\n var laneHeader = this.getObject(node.shape.header[0].id);\n this.applyStyle(format, laneHeader.annotations);\n }\n if (node.shape.type === 'Text') {\n var textNode = node;\n this.applyStyleText(format, textNode);\n }\n if (node.annotations.length > 0) {\n var annotationLength = node.annotations;\n this.applyStyle(format, annotationLength);\n }\n }\n for (var i = 0; i < this.selectedItems.connectors.length; i++) {\n if (this.selectedItems.connectors[parseInt(i.toString(), 10)].annotations.length > 0) {\n var annotationLength = this.selectedItems.connectors[parseInt(i.toString(), 10)].annotations;\n this.applyStyle(format, annotationLength);\n }\n }\n };\n Diagram.prototype.applyStyle = function (format, annotationLength) {\n for (var j = 0; j < annotationLength.length; j++) {\n switch (format) {\n case 'bold':\n annotationLength[parseInt(j.toString(), 10)].style.bold = !annotationLength[parseInt(j.toString(), 10)].style.bold;\n break;\n case 'italic':\n annotationLength[parseInt(j.toString(), 10)].style.italic = !annotationLength[parseInt(j.toString(), 10)].style.italic;\n break;\n case 'underline':\n if (annotationLength[parseInt(j.toString(), 10)].style.textDecoration === 'None') {\n annotationLength[parseInt(j.toString(), 10)].style.textDecoration = 'Underline';\n }\n else if (annotationLength[parseInt(j.toString(), 10)].style.textDecoration === 'Underline') {\n annotationLength[parseInt(j.toString(), 10)].style.textDecoration = 'None';\n }\n break;\n }\n }\n this.dataBind();\n };\n Diagram.prototype.applyStyleText = function (format, textNode) {\n switch (format) {\n case 'bold':\n textNode.style.bold = !textNode.style.bold;\n break;\n case 'italic':\n textNode.style.italic = !textNode.style.italic;\n break;\n case 'underline':\n if (textNode.style.textDecoration === 'None') {\n textNode.style.textDecoration = 'Underline';\n }\n else if (textNode.style.textDecoration === 'Underline') {\n textNode.style.textDecoration = 'None';\n }\n break;\n }\n this.dataBind();\n };\n //To duplicate the elements on clicking Ctrl+D\n Diagram.prototype.duplicateCommand = function () {\n var selectedItems = [];\n selectedItems = selectedItems.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n this.copy();\n this.paste();\n };\n //To group and ungroup the elements\n Diagram.prototype.groupCommand = function (group) {\n switch (group) {\n case 'group':\n this.group();\n break;\n case 'ungroup':\n this.unGroup();\n break;\n }\n };\n //To rotate clockwise and anti-clockwise the elements\n Diagram.prototype.rotateCommand = function (rotateValue) {\n var selectedItems = this.selectedItems;\n switch (rotateValue) {\n case 'clockwise':\n this.rotate(selectedItems, 90);\n break;\n case 'antiClockwise':\n this.rotate(selectedItems, -90);\n break;\n }\n };\n //To flip horizontally and vertically the elements\n Diagram.prototype.flipCommand = function (flipValue) {\n var selectedItems = [];\n selectedItems = selectedItems.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n for (var i = 0; i < selectedItems.length; i++) {\n switch (flipValue) {\n case 'horizontal':\n selectedItems[parseInt(i.toString(), 10)].flip = 'Horizontal';\n break;\n case 'vertical':\n selectedItems[parseInt(i.toString(), 10)].flip = 'Vertical';\n break;\n }\n }\n this.dataBind();\n };\n //To exceute the tool commands\n Diagram.prototype.toolCommand = function (tool) {\n switch (tool) {\n case 'pointer': {\n this.tool = DiagramTools.Default;\n this.dataBind();\n break;\n }\n case 'text': {\n var textnode = {\n shape: { type: 'Text' }\n };\n this.drawingObject = textnode;\n this.tool = DiagramTools.DrawOnce;\n this.dataBind();\n break;\n }\n case 'connect': {\n var connectors = {\n id: 'connector1',\n type: 'Straight'\n };\n this.drawingObject = connectors;\n this.tool = DiagramTools.DrawOnce;\n this.dataBind();\n break;\n }\n case 'freeForm': {\n var freeform = { id: 'connector1', type: 'Freehand' };\n this.drawingObject = freeform;\n this.tool = DiagramTools.DrawOnce;\n this.dataBind();\n break;\n }\n case 'line': {\n var polyline = { id: 'connector1', type: 'Polyline' };\n this.drawingObject = polyline;\n this.tool = DiagramTools.DrawOnce;\n this.dataBind();\n break;\n }\n case 'rectangle': {\n var drawingshape = { type: 'Basic', shape: 'Rectangle' };\n var basicNode = {\n shape: drawingshape\n };\n this.drawingObject = basicNode;\n this.tool = DiagramTools.DrawOnce;\n this.dataBind();\n break;\n }\n case 'ellipse': {\n var drawingNode = { type: 'Basic', shape: 'Ellipse' };\n var ellipseNode = {\n shape: drawingNode\n };\n this.drawingObject = ellipseNode;\n this.tool = DiagramTools.DrawOnce;\n this.dataBind();\n break;\n }\n }\n };\n //To zoomin and zoom-out the diagram\n Diagram.prototype.zoomCommand = function (zoomValue) {\n switch (zoomValue) {\n case 'zoomIn':\n this.zoomTo({ type: 'ZoomIn', zoomFactor: 0.2 });\n break;\n case 'zoomOut':\n this.zoomTo({ type: 'ZoomOut', zoomFactor: 0.2 });\n break;\n }\n };\n //To move the diagram elements five pixel based on the arrow keys\n Diagram.prototype.shiftCommand = function (direction) {\n for (var i = 0; i < this.selectedItems.nodes.length; i++) {\n var pixel = 5;\n if (direction === 'Up') {\n this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetY\n = this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetY - pixel;\n }\n else if (direction === 'Down') {\n this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetY\n = this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetY + pixel;\n }\n else if (direction === 'Left') {\n this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetX\n = this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetX - pixel;\n }\n else if (direction === 'Right') {\n this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetX\n = this.selectedItems.nodes[parseInt(i.toString(), 10)].offsetX + pixel;\n }\n }\n for (var i = 0; i < this.selectedItems.connectors.length; i++) {\n var connector = this.selectedItems;\n if (direction === 'Up') {\n this.drag(connector, 0, -5);\n }\n else if (direction === 'Down') {\n this.drag(connector, 0, 5);\n }\n else if (direction === 'Left') {\n this.drag(connector, -5, 0);\n }\n else if (direction === 'Right') {\n this.drag(connector, 5, 0);\n }\n }\n };\n //To execute the text align\n Diagram.prototype.alignCommand = function (alignDirection) {\n if (this.selectedItems.nodes.length > 0) {\n for (var i = 0; i < this.selectedItems.nodes.length; i++) {\n this.updateNodesAndConnectorAnnotation(this.selectedItems.nodes[parseInt(i.toString(), 10)], alignDirection);\n }\n }\n };\n Diagram.prototype.updateNodesAndConnectorAnnotation = function (object, alignDirection) {\n var annotation;\n for (var i = 0; i < object.annotations.length; i++) {\n annotation = object.annotations[parseInt(i.toString(), 10)];\n switch (alignDirection) {\n case 'left':\n annotation.horizontalAlignment = 'Left';\n break;\n case 'center':\n annotation.horizontalAlignment = 'Center';\n break;\n case 'right':\n annotation.horizontalAlignment = 'Right';\n break;\n case 'justify':\n annotation.style.textAlign = 'Justify';\n break;\n case 'top':\n annotation.verticalAlignment = 'Top';\n break;\n case 'centerVertical':\n annotation.verticalAlignment = 'Center';\n break;\n case 'bottom':\n annotation.verticalAlignment = 'Bottom';\n break;\n }\n this.dataBind();\n }\n };\n //To execute ordercommands using keyboard shortcuts\n Diagram.prototype.orderCommand = function (orderCommand) {\n switch (orderCommand) {\n case 'sendToBack':\n this.sendToBack();\n break;\n case 'bringToFront':\n this.bringToFront();\n break;\n case 'sendBackward':\n this.sendBackward();\n break;\n case 'bringForward':\n this.moveForward();\n break;\n }\n };\n //To execute the selection of elements on clicking tab key\n Diagram.prototype.navigateItems = function (tabCommand) {\n var currentSelectedNodeIndex = 0;\n var selectedItems = [];\n selectedItems = selectedItems.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n if (selectedItems.length > 0) {\n currentSelectedNodeIndex = selectedItems[0].zIndex + (tabCommand ? 1 : -1);\n }\n else {\n currentSelectedNodeIndex = tabCommand ? 0 : this.nodes.length + this.connectors.length - 1;\n }\n if (currentSelectedNodeIndex < 0) {\n currentSelectedNodeIndex = this.nodes.length + this.connectors.length - 1;\n }\n else if (currentSelectedNodeIndex === this.nodes.length + this.connectors.length) {\n currentSelectedNodeIndex = 0;\n }\n for (var i = 0; i < this.nodes.length; i++) {\n if (currentSelectedNodeIndex === this.nodes[parseInt(i.toString(), 10)].zIndex) {\n var nextNode = this.nodes[parseInt(i.toString(), 10)];\n this.clearSelection();\n this.select([nextNode]);\n }\n }\n for (var j = 0; j < this.connectors.length; j++) {\n if (currentSelectedNodeIndex === this.connectors[parseInt(j.toString(), 10)].zIndex) {\n var nextConnector = this.connectors[parseInt(j.toString(), 10)];\n this.clearSelection();\n this.select([nextConnector]);\n }\n }\n };\n /**\n * @private\n */\n /* tslint:disable */\n Diagram.prototype.endEdit = function () {\n return __awaiter$2(this, void 0, void 0, function () {\n var oldValues, changedvalues, annotations, textArea, text, element, node, annotation, args, textWrapper, index, deleteNode, contentModified, index, changesAnnotation, nodeIndex, oldnodes, newnodes, clonedObject, selectedNode, swimLaneNode, laneHeader, phaseHeader, collection, j;\n return __generator$2(this, function (_a) {\n if (this.diagramActions & DiagramAction.TextEdit) {\n oldValues = void 0;\n changedvalues = void 0;\n annotations = {};\n this.enableServerDataBinding(false);\n textArea = document.getElementById(this.element.id + '_editBox');\n if (!isBlazor()) {\n text = textArea.value;\n EventHandler.remove(textArea, 'input', this.eventHandler.inputChange);\n EventHandler.remove(textArea, 'focusout', this.focusOutEdit);\n element = document.getElementById(this.element.id + '_editTextBoxDiv');\n node = void 0;\n node = this.nameTable[this.activeLabel.parentId];\n annotation = findAnnotation(node, this.activeLabel.id);\n args = { oldValue: this.activeLabel.text, newValue: text, cancel: false, element: node, annotation: annotation };\n //Removed isBlazor code\n element.parentNode.removeChild(element);\n textWrapper = void 0;\n if (annotation && !(annotation instanceof Text)) {\n index = findObjectIndex(node, annotation.id, true);\n annotations[\"\" + index] = { content: annotation.content };\n oldValues = { annotations: annotations };\n }\n else {\n //Removed isBlazor code\n oldValues = { shape: { content: node.shape.content } };\n }\n deleteNode = false;\n if (this.eventHandler['currentAction'] === 'Draw') {\n deleteNode = this.eventHandler.isAddTextNode(node, true);\n }\n if (!deleteNode && (element.textContent !== text || text !== this.activeLabel.text)) {\n //Removed isBlaor code\n this.triggerEvent(DiagramEvent.textEdit, args);\n }\n if (!textWrapper) {\n textWrapper = this.getWrapper(node.wrapper, this.activeLabel.id);\n }\n contentModified = false;\n if (annotation.content !== text && !args.cancel) {\n contentModified = true;\n if (!this.activeLabel.isGroup) {\n this.startGroupAction();\n }\n if (node.parentId && this.nameTable[node.parentId].shape.type === 'UmlClassifier'\n && text.indexOf('+') === -1 && text.indexOf('-') === -1 && text.indexOf('#') === -1\n && text.indexOf('~') === -1 && node.id.indexOf('_umlClass_header') === -1) {\n text = ' + ' + text;\n }\n if (node.isLane || node.isPhase) {\n this.protectPropertyChange(true);\n }\n if (!(annotation instanceof Text)) {\n index = findObjectIndex(node, annotation.id, true);\n changesAnnotation = {};\n changesAnnotation[\"\" + index] = { content: text };\n changedvalues = { annotations: changesAnnotation };\n }\n else {\n //Removed isBlazor code\n changedvalues = { shape: { content: text } };\n }\n nodeIndex = this.getIndex(node, node.id);\n if (nodeIndex) {\n oldnodes = {};\n oldnodes[\"\" + nodeIndex] = oldValues;\n newnodes = {};\n newnodes[\"\" + nodeIndex] = changedvalues;\n if (getObjectType(node) === Node) {\n this.onPropertyChanged({ nodes: newnodes }, { nodes: oldnodes });\n }\n else {\n this.onPropertyChanged({ connectors: newnodes }, { connectors: oldnodes });\n }\n }\n this.protectPropertyChange(true);\n //Removed isBlazor code\n annotation.content = text;\n this.protectPropertyChange(false);\n this.updateSelector();\n if (node.isLane || node.isPhase) {\n this.protectPropertyChange(false);\n }\n }\n if (deleteNode) {\n this.removeObjectsFromLayer(node);\n this.removeFromAQuad(node);\n delete this.nameTable[this.activeLabel.parentId];\n if (text !== '') {\n this.clearSelection();\n clonedObject = cloneObject(node);\n node = this.add(clonedObject);\n this.updateDiagramObject(node);\n this.commandHandler.oldSelectedObjects = cloneSelectedObjects(this);\n this.commandHandler.select(this.nameTable[node.id]);\n // this.commandHandler.updateBlazorSelector();\n }\n }\n if (this.selectedItems.nodes.length) {\n selectedNode = this.nameTable[this.activeLabel.parentId];\n swimLaneNode = this.nameTable[selectedNode.parentId];\n if ((swimLaneNode && swimLaneNode.shape.type === 'SwimLane') || (selectedNode.shape.type === 'SwimLane')) {\n laneHeader = 'LaneHeaderParent';\n phaseHeader = 'PhaseHeaderParent';\n if ((selectedNode.shape.type === 'SwimLane')) {\n swimLaneNode = this.nameTable[this.activeLabel.parentId];\n selectedNode = node;\n }\n if ((selectedNode.isLane || selectedNode.isPhase)) {\n collection = selectedNode.isLane ?\n swimLaneNode.shape.lanes : swimLaneNode.shape.phases;\n for (j = 0; j < collection.length; j++) {\n if (collection[parseInt(j.toString(), 10)].id === (selectedNode[\"\" + laneHeader] || selectedNode[\"\" + phaseHeader])) {\n collection[parseInt(j.toString(), 10)].header.annotation.content = selectedNode.annotations[0].content;\n }\n }\n }\n else if (selectedNode.isHeader && swimLaneNode.shape.hasHeader) {\n swimLaneNode.shape.header.annotation.content = selectedNode.annotations[0].content;\n }\n }\n this.dataBind();\n }\n textWrapper.visible = true;\n this.updateDiagramObject(node);\n this.diagramActions = this.diagramActions & ~DiagramAction.TextEdit;\n if (this.activeLabel.isGroup || contentModified) {\n this.endGroupAction();\n }\n this.activeLabel = { id: '', parentId: '', isGroup: false, text: undefined };\n this.commandHandler.getBlazorOldValues();\n //Removed isBlazor code\n this.enableServerDataBinding(true);\n }\n }\n return [2 /*return*/];\n });\n });\n };\n /**\n * getIndex method \\\n *\n * @returns { void } getIndex method .\\\n * @param {NodeModel | ConnectorModel} node - provide the node value.\n * @param {string} id - provide the childernCollection value.\n *\n * @private\n */\n Diagram.prototype.getIndex = function (node, id) {\n //let index: number;\n var collection = (getObjectType(node) === Node) ? this.nodes : this.connectors;\n for (var i = 0; i < collection.length; i++) {\n if (collection[parseInt(i.toString(), 10)].id.toString() === id.toString()) {\n return i.toString();\n }\n }\n return null;\n };\n /* tslint:enable */\n //Removed getBlazorTextEditArgs method\n /**\n * canLogChange method \\\n *\n * @returns { void } canLogChange method .\\\n *\n * @private\n */\n Diagram.prototype.canLogChange = function () {\n if ((this.diagramActions & DiagramAction.Render) && (!(this.diagramActions & DiagramAction.ToolAction)) &&\n (!(this.diagramActions & DiagramAction.UndoRedo)) && (!(this.diagramActions & DiagramAction.PublicMethod))) {\n return true;\n }\n else {\n return false;\n }\n };\n Diagram.prototype.modelChanged = function (newProp, oldProp) {\n if (newProp.connectors || oldProp.connectors || newProp.nodes || oldProp.connectors\n || newProp.pageSettings || oldProp.pageSettings || newProp.bridgeDirection || oldProp.bridgeDirection) {\n return true;\n }\n return false;\n };\n Diagram.prototype.resetDiagramActions = function (action) {\n var isAction = action ? true : false;\n if (this.diagramActions & DiagramAction.UndoRedo && (!isAction || (action === DiagramAction.UndoRedo))) {\n this.diagramActions = this.diagramActions & ~DiagramAction.UndoRedo;\n }\n if (this.diagramActions & DiagramAction.PublicMethod && (!isAction || action === DiagramAction.PublicMethod)) {\n this.diagramActions = this.diagramActions & ~DiagramAction.PublicMethod;\n }\n };\n /**\n * removeNode method \\\n *\n * @returns { void } removeNode method .\\\n * @param {NodeModel} node - provide the node value.\n * @param {NodeModel} childrenCollection - provide the childrenCollection value.\n *\n * @private\n */\n Diagram.prototype.removeNode = function (node, childrenCollection) {\n this.removeObjectsFromLayer(node);\n this.removeFromAQuad(this.nameTable[node.id]);\n var groupElement = document.getElementById(node.id + '_groupElement');\n delete this.nameTable[node.id];\n if (node.children) {\n delete this.groupTable[node.id];\n }\n //Removed isBlazor code\n this.nodes.splice(this.nodes.indexOf(node), 1);\n if (groupElement && groupElement.children && groupElement.children.length > 0) {\n var beforeElement = undefined;\n for (var j = groupElement.children.length - 1; j >= 0; j--) {\n var childElement = groupElement.children[parseInt(j.toString(), 10)];\n //EJ2-863636 - Nodes Removed from Diagram upon Ungrouping\n if (childrenCollection.length > 0 && childrenCollection.indexOf(childElement.id.split('_groupElement')[0]) !== -1) {\n if (!beforeElement) {\n groupElement.parentNode.insertBefore(childElement, groupElement);\n }\n else {\n groupElement.parentNode.insertBefore(childElement, beforeElement);\n }\n beforeElement = childElement;\n }\n }\n }\n if (groupElement) {\n groupElement.parentNode.removeChild(groupElement);\n }\n };\n /**\n * deleteGroup method \\\n *\n * @returns { void } deleteGroup method .\\\n * @param {NodeModel} node - provide the source value.\n *\n * @private\n */\n Diagram.prototype.deleteGroup = function (node) {\n var elements = [];\n var tempNode = [];\n if (node.children) {\n tempNode = this.commandHandler.getChildren(node, elements);\n }\n this.UpdateBlazorDiagramModelCollection(node);\n for (var _i = 0, tempNode_1 = tempNode; _i < tempNode_1.length; _i++) {\n var nodes = tempNode_1[_i];\n if (this.nameTable[nodes.id]) {\n this.remove(nodes);\n }\n }\n };\n //helper methods - end region\n //property changes - start region\n /** @private */\n /**\n * updateObject method \\\n *\n * @returns { void } updateObject method .\\\n * @param {Node | Connector} actualObject - provide the source value.\n * @param {Node | Connector} oldObject - provide the target value.\n * @param {Node | Connector} changedProp - provide the layoutOrientation value.\n *\n * @private\n */\n Diagram.prototype.updateObject = function (actualObject, oldObject, changedProp) {\n if (!(this.diagramActions & DiagramAction.ToolAction)) {\n var bound = actualObject.wrapper.children[0].bounds;\n var checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, bound, true);\n if (!checkBoundaryConstraints) {\n if (actualObject instanceof Node) {\n var oldNode = oldObject;\n for (var _i = 0, _a = Object.keys(changedProp); _i < _a.length; _i++) {\n var key = _a[_i];\n switch (key) {\n case 'width':\n actualObject.width = oldNode.width;\n break;\n case 'height':\n actualObject.height = oldNode.height;\n break;\n case 'offsetX':\n actualObject.offsetX = oldNode.offsetX;\n break;\n case 'offsetY':\n actualObject.offsetY = oldNode.offsetY;\n break;\n case 'rotateAngle':\n actualObject.rotateAngle = oldNode.rotateAngle;\n break;\n }\n }\n this.nodePropertyChange(actualObject, changedProp, oldObject);\n }\n else {\n for (var _b = 0, _c = Object.keys(changedProp); _b < _c.length; _b++) {\n var key = _c[_b];\n var oldConnector = oldObject;\n var actualSourcePoint = actualObject.sourcePoint;\n var actualTargetPoint = actualObject.targetPoint;\n switch (key) {\n case 'sourcePoint':\n actualSourcePoint.x = oldConnector.sourcePoint.x || actualSourcePoint.x;\n actualSourcePoint.y = oldConnector.sourcePoint.y || actualSourcePoint.y;\n break;\n case 'targetPoint':\n actualTargetPoint.x = oldConnector.targetPoint.x || actualTargetPoint.x;\n actualTargetPoint.y = oldConnector.targetPoint.y || actualTargetPoint.y;\n }\n }\n this.connectorPropertyChange(actualObject, changedProp, oldObject);\n }\n }\n }\n };\n Diagram.prototype.nodePropertyChangeExtend = function (actualObject, oldObject, node, update) {\n if (node.style !== undefined && actualObject.shape.type !== 'Bpmn') {\n updateStyle(node.style, actualObject.wrapper.children[0]);\n update = true;\n }\n if (node.shadow !== undefined) {\n this.updateShadow(actualObject.shadow, node.shadow);\n update = true;\n }\n if (node.constraints !== undefined) {\n if ((oldObject.constraints & NodeConstraints.Select) &&\n (!(node.constraints & NodeConstraints.Select)) && isSelected(this, actualObject)) {\n this.clearSelection();\n }\n else {\n this.updateThumbConstraints(this.selectedItems.nodes, this.selectedItems);\n this.updateSelector();\n update = true;\n }\n }\n this.updateTextAnnotationInSwimlane(actualObject, node);\n this.swimLaneNodePropertyChange(actualObject, oldObject, node, update);\n return update;\n };\n //To update text annotation node inside swimlane while dragging the text annotation parent.\n Diagram.prototype.updateTextAnnotationInSwimlane = function (actualObject, node) {\n if (actualObject.hasTextAnnotation && this.isPositionUndo) {\n for (var i = 0; i < actualObject.outEdges.length; i++) {\n var con = this.nameTable[actualObject.outEdges[parseInt(i.toString(), 10)]];\n if (con.isBpmnAnnotationConnector) {\n var textNode = this.nameTable[con.targetID];\n this.isProtectedOnChange = true;\n if (actualObject.laneMargin && textNode) {\n var dx = actualObject.margin.left - actualObject.laneMargin.left;\n var dy = actualObject.margin.top - actualObject.laneMargin.top;\n textNode.margin.left += dx;\n textNode.margin.top += dy;\n textNode.offsetX += dx;\n textNode.offsetY += dy;\n textNode.wrapper.offsetX += dx;\n textNode.wrapper.offsetY += dy;\n textNode.wrapper.measure(new Size(textNode.wrapper.width, textNode.wrapper.height));\n textNode.wrapper.arrange(textNode.wrapper.desiredSize);\n this.updateDiagramObject(textNode);\n }\n this.isProtectedOnChange = false;\n }\n }\n }\n };\n /* tslint:disable */\n Diagram.prototype.swimLaneNodePropertyChange = function (actualObject, oldObject, node, update) {\n if (actualObject.shape.type === 'SwimLane' && !this.currentSymbol) {\n if (oldObject.shape) {\n var shape = node.shape;\n var actualShape = actualObject.shape;\n var orientation_1 = (actualShape.orientation === 'Horizontal') ? true : false;\n var padding = actualShape.padding;\n var oldShape = oldObject.shape;\n var grid = actualObject.wrapper.children[0];\n var oldObjects = void 0;\n var newObjects = void 0;\n var id = void 0;\n if (oldShape.lanes || oldShape.phases) {\n if (oldShape.lanes) {\n for (var _i = 0, _a = Object.keys(shape.lanes); _i < _a.length; _i++) {\n var count = _a[_i];\n var indexValue = Number(count);\n var lane = oldShape.lanes[parseInt(indexValue.toString(), 10)];\n var laneIndex = void 0;\n var newLane = shape.lanes[parseInt(indexValue.toString(), 10)];\n if (newLane && newLane.header) {\n id = actualShape.lanes[parseInt(indexValue.toString(), 10)].header.id;\n oldObjects = lane.header;\n newObjects = newLane.header;\n this.nodePropertyChange(this.nameTable[\"\" + id], oldObjects, newObjects);\n }\n if (lane.children) {\n for (var _b = 0, _c = Object.keys(lane.children); _b < _c.length; _b++) {\n var childNodeIndex = _c[_b];\n id = actualShape.lanes[parseInt(indexValue.toString(), 10)].children[Number(childNodeIndex)].id;\n var node_1 = this.nameTable[\"\" + id];\n oldObjects = lane.children[Number(childNodeIndex)];\n newObjects = newLane.children[Number(childNodeIndex)];\n this.nodePropertyChange(node_1, oldObjects, newObjects);\n }\n }\n if (lane.width && !orientation_1) {\n laneIndex = (actualShape.phases && actualShape.phaseSize) ? indexValue + 1 : indexValue;\n grid.updateColumnWidth(laneIndex, newLane.width, true, padding);\n this.updateDiagramElementQuad();\n }\n if (lane.height && orientation_1) {\n laneIndex = (actualShape.header && actualShape.hasHeader) ? indexValue + 1 : indexValue;\n laneIndex += (actualShape.phases && actualShape.phaseSize) ? 1 : 0;\n grid.updateRowHeight(laneIndex, newLane.height, true, padding);\n this.updateDiagramElementQuad();\n }\n }\n }\n if (shape.phases) {\n for (var _d = 0, _e = Object.keys(shape.phases); _d < _e.length; _d++) {\n var key = _e[_d];\n var indexValue = Number(key);\n var phase = shape.phases[parseInt(indexValue.toString(), 10)];\n var size = void 0;\n var rowIndex = (actualShape.header && actualShape.hasHeader) ? 1 : 0;\n if (phase && phase.header) {\n id = actualShape.phases[parseInt(indexValue.toString(), 10)].header.id;\n oldObjects = oldShape.phases[parseInt(indexValue.toString(), 10)].header;\n newObjects = phase.header;\n this.nodePropertyChange(this.nameTable[\"\" + id], oldObjects, newObjects);\n }\n if (phase.offset) {\n if (indexValue === 0) {\n size = phase.offset;\n }\n else {\n var previousPhase = actualShape.phases[indexValue - 1];\n size = phase.offset - previousPhase.offset;\n if (size <= 0) {\n size = phase.offset;\n }\n }\n if (orientation_1) {\n grid.updateColumnWidth(indexValue, size, true, padding);\n updatePhaseMaxWidth(actualObject, this, grid.rows[parseInt(rowIndex.toString(), 10)].cells[parseInt(indexValue.toString(), 10)], indexValue);\n }\n else {\n grid.updateRowHeight(rowIndex + indexValue, size, true, padding);\n }\n }\n }\n }\n }\n if (shape.phaseSize !== undefined && actualShape.phases.length) {\n if (shape.phaseSize === 0 || oldShape.phaseSize === 0) {\n if (oldShape.phaseSize) {\n if (orientation_1) {\n grid.removeRow((actualShape.header && actualShape.hasHeader) ? 1 : 0);\n actualObject.height = actualObject.wrapper.height = grid.height;\n }\n else {\n if (actualShape.header && actualShape.hasHeader) {\n grid.rows[0].cells[1].children = grid.rows[0].cells[0].children;\n grid.rows[0].cells[1].columnSpan = grid.rows[0].cells[0].columnSpan - 1;\n grid.rows[0].cells[0].children = [];\n }\n grid.removeColumn(0);\n }\n }\n else {\n if (orientation_1) {\n var rowDef = new RowDefinition();\n rowDef.height = shape.phaseSize;\n grid.addRow((actualShape.header && actualShape.hasHeader) ? 1 : 0, rowDef, true);\n actualObject.height = actualObject.wrapper.height += shape.phaseSize;\n }\n else {\n var colDef = new ColumnDefinition();\n colDef.width = shape.phaseSize;\n grid.addColumn(0, colDef, true);\n if (actualShape.header && actualShape.hasHeader) {\n grid.rows[0].cells[0].children = grid.rows[0].cells[1].children;\n grid.rows[0].cells[1].children = [];\n grid.rows[0].cells[1].columnSpan = 1;\n grid.rows[0].cells[1].minWidth = undefined;\n grid.rows[0].cells[0].columnSpan = actualShape.lanes.length + 1;\n }\n }\n for (var k = 0; k < actualShape.phases.length; k++) {\n if (actualShape.phases[parseInt(k.toString(), 10)].id === '') {\n actualShape.phases[parseInt(k.toString(), 10)].id = randomId();\n }\n phaseDefine(grid, this, actualObject, (actualShape.header && actualShape.hasHeader) ? 1 : 0, orientation_1, k);\n }\n }\n }\n else {\n if (orientation_1) {\n grid.updateRowHeight((actualShape.header && actualShape.hasHeader) ? 1 : 0, shape.phaseSize, false);\n }\n else {\n grid.updateColumnWidth(0, shape.phaseSize, false);\n }\n }\n }\n if (actualShape.header && actualShape.hasHeader && oldShape.header) {\n var id_1 = grid.rows[0].cells[0].children[0].id;\n var headerNode = this.nameTable[\"\" + id_1];\n this.nodePropertyChange(headerNode, (oldShape.header), shape.header);\n }\n actualObject.height = actualObject.wrapper.height = grid.height;\n actualObject.width = actualObject.wrapper.width = grid.width;\n }\n else if (oldObject.constraints) {\n var oldSelectConstraints = (oldObject.constraints & NodeConstraints.Select);\n var newSelectConstraints = (node.constraints & NodeConstraints.Select);\n if (oldSelectConstraints !== newSelectConstraints) {\n var shape = actualObject.shape;\n // Header - constraints\n var headerNode = this.nameTable[actualObject.id + shape.header.id];\n headerNode.constraints = (!newSelectConstraints) ? headerNode.constraints & ~NodeConstraints.Select :\n headerNode.constraints | NodeConstraints.Select;\n // Phase - Constraints\n var phaseNode = void 0;\n if (shape.phaseSize > 0) {\n for (var i = 0; i < shape.phases.length; i++) {\n phaseNode = this.nameTable[actualObject.id + shape.phases[parseInt(i.toString(), 10)].id + '_header'];\n phaseNode.constraints = (!newSelectConstraints) ? phaseNode.constraints & ~NodeConstraints.Select :\n phaseNode.constraints | NodeConstraints.Select;\n }\n }\n // Header - Constraints\n var laneNode = void 0;\n var laneHeader = void 0;\n var value = shape.phases.length || 1;\n for (var i = 0; i < shape.lanes.length; i++) {\n for (var l = 0; l < value; l++) {\n laneNode = this.nameTable[actualObject.id + shape.lanes[parseInt(i.toString(), 10)].id + l];\n laneNode.constraints = (!newSelectConstraints) ? laneNode.constraints & ~NodeConstraints.Select :\n laneNode.constraints | NodeConstraints.Select;\n if (l === 0) {\n laneHeader = this.nameTable[actualObject.id + shape.lanes[parseInt(i.toString(), 10)].id + '_' + l + '_header'];\n laneHeader.constraints = (!newSelectConstraints) ? laneHeader.constraints & ~NodeConstraints.Select :\n laneHeader.constraints | NodeConstraints.Select;\n }\n }\n }\n }\n }\n update = true;\n }\n return update;\n };\n /** @private */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Diagram.prototype.insertValue = function (oldNodeObject, isNode) {\n if (!(this.blazorActions & BlazorAction.GroupClipboardInProcess)) {\n var value = void 0;\n var oldObjects = isNode ? this.oldNodeObjects : this.oldConnectorObjects;\n for (var i = 0; i < oldObjects.length; i++) {\n if (oldObjects[parseInt(i.toString(), 10)].id === oldNodeObject.id) {\n value = true;\n }\n }\n if (!value) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n isNode ? (this.oldNodeObjects.push(oldNodeObject)) : this.oldConnectorObjects.push(oldNodeObject);\n }\n }\n };\n /* tslint:disable */\n /** @private */\n // eslint-disable-next-line max-len\n Diagram.prototype.nodePropertyChange = function (actualObject, oldObject, node, isLayout, rotate, propertyChange) {\n if (this.canEnableBlazorObject && actualObject.id !== 'helper') {\n var node_2 = cloneObject(actualObject);\n this.insertValue(node_2, true);\n }\n var existingBounds = actualObject.wrapper.outerBounds;\n var existingInnerBounds = actualObject.wrapper.bounds;\n var updateConnector = false;\n var update;\n var oldBpmnOffsetX = 0;\n var newBpmnOffsetX = 0;\n var oldBpmnOffsetY = 0;\n var newBpmnOffsetY = 0;\n var sizeChanged = false;\n var offsetChanged = false;\n var angleChanged = false;\n if (node.width !== undefined) {\n if (!actualObject.children) {\n actualObject.wrapper.children[0].width = node.width;\n update = true;\n updateConnector = true;\n }\n else if (!actualObject.container) {\n this.scaleObject(actualObject, node.width, true);\n }\n else {\n actualObject.wrapper.width = node.width;\n }\n sizeChanged = true;\n }\n if (node.height !== undefined) {\n if (!actualObject.children) {\n actualObject.wrapper.children[0].height = node.height;\n update = true;\n updateConnector = true;\n }\n else if (!actualObject.container) {\n this.scaleObject(actualObject, node.height, false);\n }\n else {\n actualObject.wrapper.height = node.height;\n }\n sizeChanged = true;\n }\n update = this.nodePropertyChangeExtend(actualObject, oldObject, node, update);\n if (node.constraints !== undefined && canShadow(oldObject) !== canShadow(node)) {\n actualObject.wrapper.children[0].shadow = canShadow(actualObject) ? actualObject.shadow : null;\n }\n if (node.offsetX !== undefined) {\n oldBpmnOffsetX = oldObject.offsetX;\n newBpmnOffsetX = node.offsetX;\n if (actualObject.wrapper.flip !== 'None') {\n if (actualObject.offsetX !== actualObject.wrapper.offsetX && oldObject.offsetX !== undefined) {\n var offsetX_1 = node.offsetX - oldObject.offsetX;\n actualObject.wrapper.offsetX = actualObject.wrapper.offsetX + offsetX_1;\n this.updateFlipOffset(actualObject.wrapper, offsetX_1, 0, actualObject.wrapper.flip);\n }\n //EJ2-895070: Flipping and moving the node are not working properly\n else {\n actualObject.wrapper.offsetX = node.offsetX;\n }\n }\n else {\n actualObject.wrapper.offsetX = node.offsetX;\n }\n update = true;\n updateConnector = true;\n offsetChanged = true;\n }\n if (node.offsetY !== undefined) {\n oldBpmnOffsetY = oldObject.offsetY;\n newBpmnOffsetY = node.offsetY;\n if (actualObject.wrapper.flip !== 'None') {\n if (actualObject.offsetY !== actualObject.wrapper.offsetY && oldObject.offsetY !== undefined) {\n var offsetY_1 = node.offsetY - oldObject.offsetY;\n actualObject.wrapper.offsetY = actualObject.wrapper.offsetY + offsetY_1;\n this.updateFlipOffset(actualObject.wrapper, 0, offsetY_1, actualObject.wrapper.flip);\n }\n //EJ2-895070: Flipping and moving the node are not working properly\n else {\n actualObject.wrapper.offsetY = node.offsetY;\n }\n }\n else {\n actualObject.wrapper.offsetY = node.offsetY;\n }\n update = true;\n updateConnector = true;\n offsetChanged = true;\n }\n if (node.padding !== undefined) {\n actualObject.wrapper.padding.left = node.padding.left !== undefined ? node.padding.left : actualObject.wrapper.padding.left;\n actualObject.wrapper.padding.right = node.padding.right !== undefined ? node.padding.right : actualObject.wrapper.padding.right;\n actualObject.wrapper.padding.top = node.padding.top !== undefined ? node.padding.top : actualObject.wrapper.padding.top;\n actualObject.wrapper.padding.bottom = node.padding.bottom !== undefined ? node.padding.bottom\n : actualObject.wrapper.padding.bottom;\n update = true;\n }\n if (node.pivot !== undefined) {\n actualObject.wrapper.pivot = node.pivot;\n update = true;\n }\n if (node.minWidth !== undefined) {\n actualObject.wrapper.minWidth = actualObject.wrapper.children[0].minWidth = node.minWidth;\n update = true;\n updateConnector = true;\n sizeChanged = true;\n }\n if (node.minHeight !== undefined) {\n actualObject.wrapper.minHeight = actualObject.wrapper.children[0].minHeight = node.minHeight;\n update = true;\n updateConnector = true;\n sizeChanged = true;\n }\n if (node.maxWidth !== undefined) {\n actualObject.wrapper.maxWidth = node.maxWidth;\n update = true;\n updateConnector = true;\n sizeChanged = true;\n }\n if (node.maxHeight !== undefined) {\n actualObject.wrapper.maxHeight = node.maxHeight;\n update = true;\n updateConnector = true;\n sizeChanged = true;\n }\n if (node.flip !== undefined) {\n actualObject.wrapper.flip = node.flip;\n update = true;\n updateConnector = true;\n if (actualObject.wrapper.elementActions & ElementAction.ElementIsGroup) {\n alignElement(actualObject.wrapper, actualObject.offsetX, actualObject.offsetY, this, node.flip);\n if (actualObject && actualObject.children) {\n for (var _i = 0, _a = actualObject.children; _i < _a.length; _i++) {\n var child = _a[_i];\n var updateNode = this.nameTable[\"\" + child];\n updateNode.wrapper.flip = node.flip;\n this.updatePorts(updateNode, node.flip);\n }\n }\n //EJ2-826617 - Flip option for BPMN node\n else {\n this.updatePorts(actualObject, actualObject.flip);\n }\n }\n else {\n // flips the port according to node flip direction\n if (actualObject.flipMode && (actualObject.flipMode === 'Port' || actualObject.flipMode === 'All' ||\n actualObject.flipMode === 'PortAndLabel' || actualObject.flipMode === 'PortAndLabelText')) {\n this.updatePorts(actualObject, node.flip);\n }\n //EJ2-826617 - Flip 'None' is not working properly\n else if (actualObject.flip === 'None') {\n this.updatePorts(actualObject, node.flip);\n }\n }\n }\n // EJ2-71981 - Flip mode \"Port\" is not working properly while dragging multiselected node\n if (node.flipMode !== undefined) {\n actualObject.wrapper.flipMode = node.flipMode;\n update = true;\n updateConnector = true;\n // flips the port according to node flip direction\n if (actualObject.flipMode && (actualObject.flipMode === 'Port' || actualObject.flipMode === 'All' ||\n actualObject.flipMode === 'PortAndLabel' || actualObject.flipMode === 'PortAndLabelText')) {\n this.updatePorts(actualObject, actualObject.flip);\n }\n //EJ2-826617 - Flip mode 'Label' does not triggers the port\n else if (actualObject.flipMode === 'Label' || actualObject.flipMode === 'LabelText' ||\n actualObject.flipMode === 'LabelAndLabelText') {\n this.updatePorts(actualObject, 'None');\n }\n //EJ2-826617 - Flip mode 'None' is not working properly\n else if (actualObject.flipMode === 'None') {\n this.updatePorts(actualObject, actualObject.flipMode);\n }\n }\n if (node.rotateAngle !== undefined && (actualObject.constraints & NodeConstraints.Rotate)) {\n if (actualObject.children && rotate) {\n // eslint-disable-next-line max-len\n this.commandHandler.rotateObjects(actualObject, [actualObject], actualObject.rotateAngle - actualObject.wrapper.rotateAngle, { x: actualObject.offsetX, y: actualObject.offsetY }, false);\n }\n actualObject.wrapper.rotateAngle = node.rotateAngle;\n update = true;\n updateConnector = true;\n angleChanged = true;\n }\n if (node.backgroundColor !== undefined) {\n actualObject.wrapper.style.fill = node.backgroundColor;\n }\n if (node.visible !== undefined) {\n this.updateElementVisibility(actualObject.wrapper, actualObject, actualObject.visible);\n }\n if (node.shape !== undefined && actualObject.shape.type !== 'Bpmn') {\n update = true;\n updateShape(node, actualObject, oldObject, this);\n updateConnector = true;\n }\n if (node.margin) {\n update = true;\n this.updateMargin(actualObject, node);\n updateConnector = true;\n offsetChanged = true;\n }\n if ((((node.shape !== undefined && (node.shape.type === undefined)) || node.width !== undefined\n || node.height !== undefined || node.style !== undefined) && actualObject.shape.type === 'Bpmn' && this.bpmnModule)) {\n update = true;\n updateConnector = true;\n this.bpmnModule.updateBPMN(node, oldObject, actualObject, this);\n }\n if (actualObject.shape.type === 'UmlActivity' && ((!isBlazor() && actualObject.shape.shape === 'FinalNode'))) {\n update = true;\n updateConnector = true;\n this.updateUMLActivity(node, oldObject, actualObject, this);\n }\n if ((actualObject.shape && actualObject.shape.type === 'UmlClassifier') || (actualObject.parentId &&\n this.nameTable[actualObject.parentId] && this.nameTable[actualObject.parentId].shape.type === 'UmlClassifier')) {\n update = true;\n updateConnector = true;\n }\n if (node.ports !== undefined) {\n for (var _b = 0, _c = Object.keys(node.ports); _b < _c.length; _b++) {\n var key = _c[_b];\n var index = Number(key);\n update = true;\n var changedObject = node.ports[\"\" + key];\n var actualPort = actualObject.ports[parseInt(index.toString(), 10)];\n this.updatePort(changedObject, actualPort, actualObject.wrapper);\n updateConnector = true;\n }\n }\n if (node.annotation !== undefined || node.annotations !== undefined || node.width !== undefined) {\n for (var _d = 0, _e = Object.keys(node.annotations || actualObject.annotations); _d < _e.length; _d++) {\n var key = _e[_d];\n var index = Number(key);\n update = true;\n var changedObject = void 0;\n if (node.annotation) {\n changedObject = node.annotation;\n }\n else {\n changedObject = node.annotations ? node.annotations[\"\" + key] : actualObject.annotations;\n }\n var actualAnnotation = actualObject.annotations[parseInt(index.toString(), 10)];\n if (actualAnnotation) {\n var updateSize = actualObject.width ? true : false;\n this.updateAnnotation(changedObject, actualAnnotation, actualObject.wrapper, actualObject, updateSize);\n var swimLaneNode = this.nameTable[actualObject.parentId];\n if ((swimLaneNode && swimLaneNode.shape.type === 'SwimLane')) {\n var laneHeader = 'LaneHeaderParent';\n var phaseHeader = 'PhaseHeaderParent';\n if ((actualObject.isLane || actualObject.isPhase)) {\n var collection = actualObject.isLane ?\n swimLaneNode.shape.lanes : swimLaneNode.shape.phases;\n for (var j_2 = 0; j_2 < collection.length; j_2++) {\n if (collection[parseInt(j_2.toString(), 10)].id === (actualObject[\"\" + laneHeader] || actualObject[\"\" + phaseHeader])) {\n collection[parseInt(j_2.toString(), 10)].header.annotation.content = actualObject.annotations[0].content;\n collection[parseInt(j_2.toString(), 10)].header.annotation.style = actualObject.annotations[0].style;\n break;\n }\n }\n }\n }\n }\n }\n }\n if (node.expandIcon !== undefined || node.collapseIcon !== undefined || node.isExpanded !== undefined) {\n this.updateIcon(actualObject);\n this.updateDefaultLayoutIcons(actualObject);\n if (node.isExpanded !== undefined) {\n this.canExpand = true;\n //EJ2-844814 - Expand and collapse not working properly at runtime\n this.diagramActions |= DiagramAction.PreventIconsUpdate;\n this.commandHandler.expandNode(actualObject, this);\n this.diagramActions = this.diagramActions & ~DiagramAction.PreventIconsUpdate;\n }\n update = true;\n this.canExpand = false;\n }\n if (node.fixedUserHandles !== undefined) {\n var index = void 0;\n var changedObject = void 0;\n var actualfixedUserHandle = void 0;\n for (var _f = 0, _g = Object.keys(node.fixedUserHandles); _f < _g.length; _f++) {\n var key = _g[_f];\n index = Number(key);\n update = true;\n if (node.fixedUserHandles[parseInt(index.toString(), 10)]) {\n changedObject = node.fixedUserHandles[parseInt(index.toString(), 10)];\n }\n actualfixedUserHandle = actualObject.fixedUserHandles[parseInt(index.toString(), 10)];\n if (actualfixedUserHandle) {\n this.updateNodefixedUserHandle(changedObject, actualfixedUserHandle, actualObject.wrapper, actualObject);\n }\n }\n }\n if (node.tooltip !== undefined) {\n this.updateTooltip(actualObject, node);\n }\n if (update) {\n if (this.bpmnModule !== undefined && offsetChanged && !sizeChanged && !angleChanged && !this.sizeUndo) {\n // eslint-disable-next-line max-len\n this.updateBpmnAnnotationPosition(oldBpmnOffsetX, oldBpmnOffsetY, newBpmnOffsetX, newBpmnOffsetY, actualObject, actualObject.wrapper, actualObject.shape, actualObject.shape.shape === 'TextAnnotation');\n }\n if (this.checkSelectedItem(actualObject) && actualObject.wrapper.children[0] instanceof TextElement) {\n actualObject.wrapper.children[0].refreshTextElement();\n }\n actualObject.wrapper.measure(new Size(actualObject.wrapper.bounds.width, actualObject.wrapper.bounds.height), actualObject.id, this.onLoadImageSize.bind(this));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n this.updateObject(actualObject, oldObject, node);\n if (actualObject.shape.type === 'SwimLane' && !this.currentSymbol && !(this.diagramActions & DiagramAction.ToolAction)) {\n updateHeaderMaxWidth(this, actualObject);\n var grid = actualObject.wrapper.children[0];\n var shape = actualObject.shape;\n var column = grid.columnDefinitions().length;\n if (shape.orientation === 'Horizontal') {\n var index = (shape.header && shape.hasHeader) ? 1 : 0;\n updatePhaseMaxWidth(actualObject, this, grid.rows[parseInt(index.toString(), 10)].cells[column - 1], column - 1);\n }\n actualObject.wrapper.measure(new Size(actualObject.wrapper.bounds.width, actualObject.wrapper.bounds.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n }\n if ((!(this.diagramActions & DiagramAction.ToolAction)) || (this.diagramActions & DiagramAction.UndoRedo)) {\n if (this.checkSelectedItem(actualObject)) {\n this.updateSelector();\n }\n }\n if (existingBounds.equals(existingBounds, actualObject.wrapper.outerBounds) === false) {\n this.updateQuad(actualObject);\n // EJ2-57436 - Added the below code to check if node has parent id or not.\n // If node has parentId means then send the parent node to updatequad method to add the parent node in negative quadrant\n if (actualObject.parentId && this.nameTable[actualObject.parentId]) {\n var parentNode = this.nameTable[actualObject.parentId];\n this.updateQuad(parentNode);\n }\n }\n if (!isLayout) {\n // eslint-disable-next-line max-len\n this.commandHandler.connectorSegmentChange(actualObject, existingInnerBounds, (node.rotateAngle !== undefined) ? true : false);\n // if (updateConnector) {\n // this.updateConnectorEdges(actualObject);\n // }\n }\n else {\n if (actualObject && actualObject.visible && actualObject.outEdges) {\n this.updateIconVisibility(actualObject, (actualObject.outEdges.length === 0 ? false : true));\n }\n }\n if (this.bpmnModule !== undefined) {\n this.bpmnModule.updateDocks(actualObject, this);\n }\n if (!node.annotations || !actualObject.processId) {\n this.updateGroupOffset(actualObject);\n }\n // if (existingBounds.equals(existingBounds, actualObject.wrapper.outerBounds) === false) { this.updateQuad(actualObject); }\n // EJ2-42005 - The parent of the actualObject is not measured and arranged when a node or connector is selected.\n // The condition restricts the measure and arrange of the actualObject whenever a node or connector is selected.\n // Commented @Dheepshiva\n // let objects: (NodeModel | ConnectorModel)[] = [];\n // objects = objects.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n // if (objects.length === 0) {\n if (actualObject.parentId && this.nameTable[actualObject.parentId]) {\n var parent_6 = this.nameTable[actualObject.parentId];\n parent_6.wrapper.measure(new Size(parent_6.wrapper.width, actualObject.wrapper.height));\n parent_6.wrapper.arrange(parent_6.wrapper.desiredSize);\n parent_6.offsetX = parent_6.wrapper.offsetX;\n parent_6.offsetY = parent_6.wrapper.offsetY;\n }\n // }\n if (existingInnerBounds.equals(existingInnerBounds, actualObject.wrapper.bounds) === false) {\n if (this.eventHandler.currentAction !== 'Drag') {\n this.updateGroupSize(actualObject);\n }\n if (actualObject.children) {\n this.updateGroupOffset(actualObject);\n }\n }\n if (actualObject.shape.type === 'SwimLane' && !this.currentSymbol && (this.diagramActions & DiagramAction.Render)) {\n var connectors = getConnectors(this, actualObject.wrapper.children[0]);\n updateConnectorsProperties(connectors, this);\n }\n if (!this.preventNodesUpdate) {\n if (!canVitualize(this) || (canVitualize(this) && this.scroller.oldCollectionObjects.indexOf(actualObject.id) > -1)) {\n if (this.diagramActions & DiagramAction.PreventZIndexOnDragging) {\n this.updateDiagramObject(actualObject, true);\n }\n else {\n this.updateDiagramObject(actualObject);\n }\n }\n if (!isLayout && updateConnector) {\n if (this.lineRoutingModule && this.diagramActions && (this.constraints & DiagramConstraints.LineRouting) && actualObject.id !== 'helper') {\n if (!(this.diagramActions & DiagramAction.ToolAction)) {\n this.lineRoutingModule.renderVirtualRegion(this, true);\n }\n }\n else if (this.diagramActions && (this.constraints & DiagramConstraints.LineRouting) && actualObject.id !== 'helper') {\n console.warn('[WARNING] :: Module \"LineRouting\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n this.updateConnectorEdges(actualObject);\n if (actualObject.id !== 'helper' && !(this.diagramActions & DiagramAction.ToolAction)) {\n var objects = this.spatialSearch.findObjects(actualObject.wrapper.outerBounds);\n for (var i_4 = 0; i_4 < objects.length; i_4++) {\n var object = objects[parseInt(i_4.toString(), 10)];\n if (object instanceof Connector) {\n this.connectorPropertyChange(objects[parseInt(i_4.toString(), 10)], {}, {\n sourceID: object.sourceID,\n targetID: object.targetID,\n sourcePortID: object.sourcePortID,\n targetPortID: object.targetPortID,\n sourcePoint: object.sourcePoint,\n targetPoint: object.targetPoint\n });\n }\n }\n }\n }\n }\n if (actualObject.status !== 'New' && this.diagramActions) {\n actualObject.status = 'Update';\n }\n }\n if (!propertyChange) {\n var element = actualObject;\n var args = {\n element: element, cause: this.diagramActions, diagramAction: this.getDiagramAction(this.diagramActions),\n oldValue: oldObject, newValue: node\n };\n //Removed isBlazor code\n this.triggerEvent(DiagramEvent.propertyChange, args);\n }\n };\n //To update text annotation position while dragging the text annotation's parent node.\n Diagram.prototype.updateBpmnAnnotationPosition = function (oldX, oldY, newX, newY, node, wrapper, shape, isTextAnnotation) {\n var x = newX > oldX ? Math.abs(newX - oldX) : Math.abs(oldX - newX);\n var y = newY > oldY ? Math.abs(newY - oldY) : Math.abs(oldY - newY);\n var laneX;\n var laneY;\n if ((x === 0 && y === 0) || (Number.isNaN(x) && Number.isNaN(y))) {\n if (node.laneMargin) {\n laneX = node.margin.left - node.laneMargin.left;\n laneY = node.margin.top - node.laneMargin.top;\n }\n }\n var width = node.width;\n var height = node.height;\n var bounds = new Rect(0, 0, 0, 0);\n if (width !== 0 && height !== 0) {\n bounds = new Rect((newX !== 0 ? newX : node.offsetX) - width / 2, (newY !== 0 ? newY : node.offsetY) - height / 2, width, height);\n }\n //To update text annotation position\n if (isTextAnnotation) {\n var bpmnAnnotation = shape;\n var hasTarget = bpmnAnnotation.textAnnotation.textAnnotationTarget !== '' && this.nameTable[bpmnAnnotation.textAnnotation.textAnnotationTarget];\n var selectedNode = this.selectedItems.nodes ? this.selectedItems.nodes[0] : undefined;\n var isTextNodeSelected = selectedNode && selectedNode.shape && selectedNode.shape.shape === 'TextAnnotation';\n if (hasTarget) {\n //To check whether the text annotation inside the swimlane\n if (node.parentId === '' || isTextNodeSelected) {\n if (bpmnAnnotation.textAnnotation.textAnnotationDirection === 'Auto') {\n if (wrapper.children[0] instanceof Canvas && wrapper.children[0].children[0] instanceof PathElement) {\n var diagramCanvas = wrapper.children[0];\n var parentElement = document.getElementById(diagramCanvas.id + '_groupElement');\n var elementToRemove = document.getElementById(diagramCanvas.children[0].id + '_groupElement');\n parentElement.removeChild(elementToRemove);\n diagramCanvas.children.splice(0, 1);\n this.isProtectedOnChange = true;\n this.bpmnModule.setAnnotationPath(bounds, diagramCanvas, node, bpmnAnnotation, bpmnAnnotation.textAnnotation.textAnnotationDirection, this);\n this.isProtectedOnChange = false;\n }\n }\n }\n else {\n this.isPositionUndo = true;\n this.updateTextAnnotationInSwimlane(node, node);\n this.isPositionUndo = false;\n }\n }\n else { //To update text annotation connector source point.\n if (node.inEdges.length > 0) {\n var connectorID = node.inEdges[0];\n var connector = this.nameTable[\"\" + connectorID];\n if (connector && connector.isBpmnAnnotationConnector) {\n connector.sourcePoint =\n {\n x: newX > oldX ? connector.sourcePoint.x + x : connector.sourcePoint.x - x,\n y: newY > oldY ? connector.sourcePoint.y + y : connector.sourcePoint.y - y\n };\n }\n }\n }\n var newValue = { ports: [{ offset: node.ports[0].offset }] };\n //To update port offset of text annotation node\n this.nodePropertyChange(node, {}, newValue);\n }\n else {\n for (var _i = 0, _a = node.outEdges; _i < _a.length; _i++) {\n var id = _a[_i];\n var connector = this.nameTable[\"\" + id];\n if (connector && connector.isBpmnAnnotationConnector) {\n var targetNode = this.nameTable[connector.targetID];\n if (targetNode.shape.shape === 'TextAnnotation') {\n var oldValue = void 0;\n var newValue = void 0;\n if (laneX !== undefined && laneY !== undefined) {\n if (targetNode.parentId) {\n oldValue = { margin: { left: targetNode.margin.left, top: targetNode.margin.top } };\n targetNode.margin.left += laneX;\n targetNode.margin.top += laneY;\n newValue = { margin: { left: targetNode.margin.left, top: targetNode.margin.top } };\n }\n else {\n oldValue = { offsetX: targetNode.offsetX, offsetY: targetNode.offsetY };\n targetNode.offsetX += laneX;\n targetNode.offsetY += laneY;\n newValue = { offsetX: targetNode.offsetX, offsetY: targetNode.offsetY };\n }\n }\n else {\n oldValue = { offsetX: targetNode.offsetX, offsetY: targetNode.offsetY };\n targetNode.offsetX = newX > oldX ? targetNode.offsetX + x : targetNode.offsetX - x;\n targetNode.offsetY = newY > oldY ? targetNode.offsetY + y : targetNode.offsetY - y;\n newValue = { offsetX: targetNode.offsetX, offsetY: targetNode.offsetY };\n }\n this.nodePropertyChange(targetNode, oldValue, newValue);\n }\n }\n }\n }\n };\n Diagram.prototype.updatePorts = function (actualObject, flip) {\n if (actualObject && actualObject.ports.length > 0) {\n for (var _i = 0, _a = Object.keys(actualObject.ports); _i < _a.length; _i++) {\n var key = _a[_i];\n var index = Number(key);\n var actualPort = actualObject.ports[parseInt(index.toString(), 10)];\n var portWrapper = this.getWrapper(actualObject.wrapper, actualPort.id);\n portWrapper = updatePortEdges(portWrapper, flip, actualPort);\n portWrapper.relativeMode = 'Point';\n portWrapper.measure(new Size(portWrapper.width, portWrapper.height));\n portWrapper.arrange(portWrapper.desiredSize);\n }\n }\n };\n Diagram.prototype.updateFlipOffset = function (element, diffX, diffY, flip) {\n if (element.hasChildren()) {\n for (var _i = 0, _a = element.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (flip === 'Horizontal' || flip === 'Both') {\n child.flipOffset.x = child.flipOffset.x + diffX;\n }\n if (flip === 'Vertical' || flip === 'Both') {\n child.flipOffset.y = child.flipOffset.y + diffY;\n }\n if (child instanceof Canvas || child instanceof Container) {\n this.updateFlipOffset(child, diffX, diffY, flip);\n }\n }\n }\n };\n Diagram.prototype.updateUMLActivity = function (changedProp, oldObject, actualObject, diagram) {\n var sizeChanged = changedProp.width !== undefined || changedProp.height !== undefined;\n if (sizeChanged) {\n var innerFinalNode = actualObject.wrapper.children[0].children[0];\n innerFinalNode.width = changedProp.width;\n innerFinalNode.height = changedProp.height;\n var outerFinalNode = actualObject.wrapper.children[0].children[1];\n outerFinalNode.width = changedProp.width / 1.5;\n outerFinalNode.height = changedProp.height / 1.5;\n }\n };\n Diagram.prototype.updateConnectorProperties = function (connector) {\n if (this.preventConnectorsUpdate) {\n var index = this.selectionConnectorsList.indexOf(connector);\n if (index === -1 && connector) {\n this.selectionConnectorsList.push(connector);\n }\n }\n else {\n var conn = {\n sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint, sourceID: connector.sourceID,\n targetID: connector.targetID, sourcePortID: connector.sourcePortID, targetPortID: connector.targetPortID\n };\n this.connectorPropertyChange(connector, {}, conn, undefined, true);\n }\n };\n /**\n * updateConnectorEdges method \\\n *\n * @returns { void } Updates the connectorPropertyChange of the diagram container .\\\n * @param {Node} actualObject - provide the actualObject value.\n *\n * @private\n */\n Diagram.prototype.updateConnectorEdges = function (actualObject) {\n if (actualObject.inEdges.length > 0) {\n for (var j = 0; j < actualObject.inEdges.length; j++) {\n this.updateConnectorProperties(this.nameTable[actualObject.inEdges[parseInt(j.toString(), 10)]]);\n }\n }\n if (actualObject.outEdges.length > 0) {\n for (var k = 0; k < actualObject.outEdges.length; k++) {\n this.updateConnectorProperties(this.nameTable[actualObject.outEdges[parseInt(k.toString(), 10)]]);\n }\n }\n if (actualObject.parentId && this.nameTable[actualObject.parentId]) {\n this.updateConnectorEdges(this.nameTable[actualObject.parentId]);\n }\n };\n /* tslint:enable */\n Diagram.prototype.connectorProprtyChangeExtend = function (actualObject, oldProp, newProp, updateSelector) {\n if (newProp.type !== undefined && newProp.type !== oldProp.type) {\n if (actualObject.segments.length > 0 && newProp.segments === undefined) {\n actualObject.segments = [];\n }\n }\n if ((newProp.shape !== undefined) && actualObject.shape !== undefined &&\n actualObject.shape && actualObject.shape.type === 'Bpmn' && this.bpmnModule) {\n this.bpmnModule.updateBPMNConnector(actualObject, oldProp, newProp, this);\n }\n if (actualObject.constraints !== undefined) {\n this.updateThumbConstraints(this.selectedItems.connectors, this.selectedItems);\n return updateSelector = true;\n }\n return updateSelector;\n };\n /* tslint:disable */\n /**\n * Updates the connectorPropertyChange of the diagram container \\\n *\n * @returns { void } Updates the connectorPropertyChange of the diagram container .\\\n * @param {DiagramElement} actualObject - provide the actualObject value.\n * @param {boolean} oldProp - provide the oldProp value.\n * @param {boolean} newProp - provide the newProp value.\n * @param {boolean} disableBridging - provide the disableBridging value.\n * @param {boolean} propertyChange - provide the propertyChange value.\n *\n * @private\n */\n Diagram.prototype.connectorPropertyChange = function (actualObject, oldProp, newProp, disableBridging, propertyChange) {\n if (this.canEnableBlazorObject) {\n var node = cloneObject(actualObject);\n this.insertValue(node, false);\n }\n var existingBounds = actualObject.wrapper.bounds;\n var updateSelector = false;\n var points = [];\n updateSelector = this.connectorProprtyChangeExtend(actualObject, oldProp, newProp, updateSelector);\n var inPort;\n var outPort;\n var source;\n var target;\n if (newProp.visible !== undefined) {\n this.updateElementVisibility(actualObject.wrapper, actualObject, actualObject.visible);\n }\n if (newProp.sourcePoint !== undefined || newProp.targetPoint !== undefined\n || newProp.sourceID !== undefined || newProp.targetID !== undefined || newProp.targetPadding !== undefined ||\n newProp.sourcePortID !== undefined || newProp.targetPortID !== undefined || newProp.sourcePadding !== undefined ||\n newProp.type !== undefined || newProp.segments !== undefined || newProp.flip !== undefined) {\n if ((newProp.sourceID !== undefined && newProp.sourceID !== oldProp.sourceID) || newProp.sourcePortID) {\n var sourceNode = this.nameTable[actualObject.sourceID];\n outPort = this.findInOutConnectPorts(sourceNode, false);\n if (!sourceNode || (canOutConnect(sourceNode) || (actualObject.sourcePortID !== '' && canPortOutConnect(outPort)))) {\n actualObject.sourceWrapper = sourceNode ? this.getEndNodeWrapper(sourceNode, actualObject, true) : undefined;\n if (actualObject.sourcePortID && newProp.sourcePortID === undefined) {\n actualObject.sourcePortWrapper = sourceNode ? this.getWrapper(sourceNode.wrapper, actualObject.sourcePortID) : undefined;\n }\n this.removePortEdges(this.nameTable[oldProp.sourceID] || sourceNode, oldProp.sourcePortID || actualObject.sourcePortID, actualObject.id, false);\n }\n if (newProp.sourceID !== undefined && oldProp.sourceID !== undefined && oldProp.sourceID !== '') {\n var oldSource = this.nameTable[oldProp.sourceID];\n if (oldSource !== undefined && oldSource.outEdges && oldSource.outEdges.indexOf(actualObject.id) !== -1) {\n removeItem(oldSource.outEdges, actualObject.id);\n }\n }\n this.updateEdges(actualObject);\n }\n if (newProp.targetID !== undefined && newProp.targetID !== oldProp.targetID) {\n var targetNode = this.nameTable[newProp.targetID];\n inPort = this.findInOutConnectPorts(targetNode, true);\n if (!targetNode || (canInConnect(targetNode) || (actualObject.targetPortID !== '' && canPortInConnect(inPort)))) {\n actualObject.targetWrapper = targetNode ? this.getEndNodeWrapper(targetNode, actualObject, false) : undefined;\n if (actualObject.targetPortID && newProp.targetPortID === undefined) {\n actualObject.targetPortWrapper = targetNode ? this.getWrapper(targetNode.wrapper, actualObject.targetPortID) : undefined;\n }\n this.removePortEdges(this.nameTable[oldProp.targetID] || targetNode, oldProp.targetPortID || actualObject.targetPortID, actualObject.id, true);\n }\n if (oldProp !== undefined && oldProp.targetID !== undefined && oldProp.targetID !== '') {\n var oldTarget = this.nameTable[oldProp.targetID];\n if (oldTarget !== undefined && oldTarget.inEdges && oldTarget.inEdges.indexOf(actualObject.id) !== -1) {\n removeItem(oldTarget.inEdges, actualObject.id);\n }\n }\n this.updateEdges(actualObject);\n }\n if (newProp.sourcePortID !== undefined && newProp.sourcePortID !== oldProp.sourcePortID) {\n if (actualObject.sourceID && this.nameTable[actualObject.sourceID]) {\n source = this.nameTable[actualObject.sourceID].wrapper;\n }\n var sourceNode = this.nameTable[actualObject.sourceID];\n if (!sourceNode || (canOutConnect(sourceNode) || (actualObject.sourcePortID !== '' && canPortOutConnect(outPort)))) {\n actualObject.sourcePortWrapper = source ? this.getWrapper(source, newProp.sourcePortID) : undefined;\n }\n else if (actualObject.sourcePortID === '' && !canOutConnect(sourceNode)) {\n actualObject.sourcePortWrapper = undefined;\n }\n }\n if (newProp.targetPortID !== undefined && newProp.targetPortID !== oldProp.targetPortID) {\n var targetNode = this.nameTable[actualObject.targetID];\n if (actualObject.targetID && this.nameTable[actualObject.targetID]) {\n target = this.nameTable[actualObject.targetID].wrapper;\n }\n if (!targetNode || (canInConnect(targetNode) || (actualObject.targetPortID !== '' && canPortInConnect(inPort)))) {\n actualObject.targetPortWrapper = target ? this.getWrapper(target, newProp.targetPortID) : undefined;\n }\n else if (actualObject.targetPortID === '' && !canInConnect(targetNode)) {\n actualObject.targetPortWrapper = undefined;\n }\n }\n if (newProp.flip !== undefined) {\n actualObject.flip = newProp.flip;\n flipConnector(actualObject);\n }\n //EJ2-867479 - Performance issue in complexhierarchical layout due to linerouting injection\n if (actualObject.type === 'Orthogonal' && this.lineRoutingModule && this.diagramActions &&\n (this.constraints & DiagramConstraints.LineRouting) && !(this.diagramActions & DiagramAction.ToolAction) && this.layout.type !== 'ComplexHierarchicalTree') {\n this.lineRoutingModule.renderVirtualRegion(this, true);\n // EJ2-65876 - Exception occurs on line routing injection module\n if (actualObject.sourceID !== actualObject.targetID && actualObject.segments.length > 1) {\n //EJ2-69573 - Excecption occurs when calling doLayout method with the lineRouting module\n this.lineRoutingModule.refreshConnectorSegments(this, actualObject, false);\n }\n }\n points = this.getPoints(actualObject);\n } //Add prop change for zindex, alignments and margin\n if (newProp.style !== undefined) {\n updateStyle(newProp.style, actualObject.wrapper.children[0]);\n }\n if (points.length > 0 || newProp.sourceDecorator !== undefined || (newProp.targetDecorator !== undefined\n && (canMeasureDecoratorPath(Object.keys(newProp.targetDecorator)))) || newProp.cornerRadius !== undefined) {\n updateConnector(actualObject, points.length > 0 ? points : actualObject.intermediatePoints, this.diagramActions);\n if (newProp.type !== undefined) {\n updateSelector = true;\n }\n if (points.length > 0) {\n actualObject.wrapper.measure(new Size(actualObject.wrapper.width, actualObject.wrapper.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n // eslint-disable-next-line max-len\n this.updateConnectorAnnotation(actualObject);\n this.updateConnectorPort(actualObject);\n this.updateConnectorfixedUserHandles(actualObject);\n this.updateObject(actualObject, oldProp, newProp);\n } //work-around to update intersected connector bridging\n }\n if ((newProp.sourcePoint || newProp.targetPoint || newProp.segments)\n && this.diagramActions === DiagramAction.Render) {\n updateSelector = true;\n }\n if (actualObject.shape.type === 'Bpmn' && actualObject.shape.sequence === 'Default' && actualObject.shape.flow === 'Sequence') {\n this.commandHandler.updatePathElementOffset(actualObject);\n }\n // eslint-disable-next-line max-len\n if (!disableBridging) {\n this.updateBridging();\n }\n this.updateAnnotations(newProp, actualObject);\n this.updateConnectorPorts(newProp, actualObject);\n this.updatefixedUserHandle(newProp, actualObject);\n actualObject.wrapper.measure(new Size(actualObject.wrapper.width, actualObject.wrapper.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n if (existingBounds.equals(existingBounds, actualObject.wrapper.bounds) === false) {\n this.updateQuad(actualObject);\n if (this.eventHandler.currentAction !== 'Drag') {\n this.updateGroupSize(actualObject);\n }\n }\n if (updateSelector === true && this.checkSelectedItem(actualObject) && (!(this.diagramActions & DiagramAction.ToolAction)\n || (this.diagramActions & DiagramAction.UndoRedo))) {\n this.updateSelector();\n }\n if (!this.preventConnectorsUpdate) {\n if (!canVitualize(this) || (canVitualize(this) && this.scroller.oldCollectionObjects.indexOf(actualObject.id) > -1)) {\n if (this.diagramActions & DiagramAction.PreventZIndexOnDragging) {\n this.updateDiagramObject(actualObject, true);\n }\n else {\n this.updateDiagramObject(actualObject);\n }\n }\n }\n this.updateConnectorEdges(actualObject);\n if (this.diagramActions && actualObject.status !== 'New') {\n actualObject.status = 'Update';\n }\n this.triggerPropertyChange(propertyChange, actualObject, oldProp, newProp);\n };\n /* tslint:enable */\n /**\n * getDirection methods \\\n *\n * @returns { void } getDirection methods .\\\n * @param {NodeModel} node - provide the node value.\n * @param {string} portId - provide the portId value.\n * @param {string} item - provide the item value.\n * @param {number} isInEdges - provide the isInEdges value.\n *\n * @private\n */\n Diagram.prototype.removePortEdges = function (node, portId, item, isInEdges) {\n if (node) {\n for (var i = 0; i < node.ports.length; i++) {\n var port = node.ports[parseInt(i.toString(), 10)];\n if (port.id === portId) {\n var portEdge = (isInEdges) ? port.inEdges : port.outEdges;\n removeItem(portEdge, item);\n }\n }\n }\n };\n //Removed blazor getpropertyChangeArgs method\n // Feature 826644: Support to add ports to the connector. Added below method to update connector ports\n // on connector property change.\n Diagram.prototype.updateConnectorPorts = function (newProp, actualObject) {\n if (newProp.ports !== undefined) {\n for (var _i = 0, _a = Object.keys(newProp.ports); _i < _a.length; _i++) {\n var key = _a[_i];\n var index = Number(key);\n var changedObject = newProp.ports[\"\" + key];\n var actualPort = actualObject.ports[parseInt(index.toString(), 10)];\n this.updatePort(changedObject, actualPort, actualObject.wrapper, actualObject);\n }\n }\n };\n Diagram.prototype.triggerPropertyChange = function (propertyChange, actualObject, oldProp, newProp) {\n if (!propertyChange) {\n var element = actualObject;\n var args = {\n element: cloneBlazorObject(element), cause: this.diagramActions, diagramAction: this.getDiagramAction(this.diagramActions),\n oldValue: cloneBlazorObject(oldProp), newValue: cloneBlazorObject(newProp)\n };\n //Removed isBlazor code\n this.triggerEvent(DiagramEvent.propertyChange, args);\n }\n };\n Diagram.prototype.findInOutConnectPorts = function (node, isInconnect) {\n var port = {};\n if (node) {\n port = getInOutConnectPorts(node, isInconnect);\n }\n return port;\n };\n Diagram.prototype.getPoints = function (actualObject, points) {\n //let pts: PointModel[];\n //871158: Connector splitting point change with line distribution module injection\n var lineDistributionModule = (this.lineDistributionModule && this.layout.connectionPointOrigin === 'DifferentPoint') ? true : false;\n var pts = actualObject.getConnectorPoints(actualObject.type, points, this.layout.type === 'ComplexHierarchicalTree' || this.layout.type === 'HierarchicalTree' ?\n this.layout.orientation : undefined, lineDistributionModule);\n return pts;\n };\n /**\n * update the opacity and visibility for the node once the layout animation starts \\\n *\n * @returns { void } update the opacity and visibility for the node once the layout animation starts .\\\n * @param {Container} element - provide the element value.\n * @param {boolean} visible - provide the visible value.\n * @param {number} opacity - provide the opacity value.\n *\n * @private\n */\n Diagram.prototype.updateNodeProperty = function (element, visible, opacity) {\n if (visible === undefined) {\n this.updateElementVisibility(element, this.nameTable[element.id], visible);\n }\n else {\n element.style.opacity = opacity;\n for (var i = 0; i < element.children.length; i++) {\n if (element.children[parseInt(i.toString(), 10)] instanceof Container) {\n this.updateNodeProperty(element.children[parseInt(i.toString(), 10)], undefined, opacity);\n }\n element.children[parseInt(i.toString(), 10)].style.opacity = opacity;\n }\n }\n };\n /**\n * checkSelected Item for Connector \\\n *\n * @returns { void } checkSelected Item for Connector .\\\n * @param {Connector | Node} actualObject - provide the element value.\n *\n * @private\n */\n Diagram.prototype.checkSelectedItem = function (actualObject) {\n var selectorModel = this.selectedItems;\n var isSelected = false;\n var selItems = [];\n selItems = selItems.concat(selectorModel.nodes, selectorModel.connectors);\n if (selItems.length > 0) {\n if (actualObject.id === selItems[selItems.length - 1].id) {\n isSelected = true;\n }\n }\n return isSelected;\n };\n /**\n * Updates the visibility of the diagram container \\\n *\n * @returns { void } Updates the visibility of the diagram container .\\\n * @param {DiagramElement} element - provide the element value.\n * @param {boolean} visible - provide the target value.\n *\n * @private\n */\n Diagram.prototype.updateDiagramContainerVisibility = function (element, visible) {\n if (element instanceof Container) {\n for (var i = 0; i < element.children.length; i++) {\n this.updateDiagramContainerVisibility(element.children[parseInt(i.toString(), 10)], visible);\n }\n }\n element.visible = visible;\n };\n /**\n * Updates the visibility of the node/connector \\\n *\n * @returns { void } Updates the visibility of the node/connector .\\\n * @param {Container} element - provide the element value.\n * @param {Connector | Node} obj - provide the obj value.\n * @param {boolean} visible - provide the visible value.\n *\n * @private\n */\n Diagram.prototype.updateElementVisibility = function (element, obj, visible) {\n if (visible !== undefined) {\n element.visible = visible;\n if (obj instanceof Node) {\n //content\n if (!obj.children) {\n element.children[0].visible = visible;\n this.updateDiagramContainerVisibility(element.children[0], visible);\n if (obj.shape.type === 'Bpmn' && this.bpmnModule) {\n this.bpmnModule.updateElementVisibility(obj, visible, this);\n }\n }\n else {\n for (var _i = 0, _a = obj.children; _i < _a.length; _i++) {\n var child = _a[_i];\n this.updateElementVisibility(this.nameTable[\"\" + child].wrapper, this.nameTable[\"\" + child], visible);\n }\n }\n //ports\n if (obj.ports) {\n for (var _b = 0, _c = obj.ports; _b < _c.length; _b++) {\n var port = _c[_b];\n if (port.visibility & PortVisibility.Visible) {\n var wrapper = this.getWrapper(element, port.id);\n wrapper.visible = visible;\n }\n }\n }\n if (obj.annotations) {\n for (var _d = 0, _e = obj.annotations; _d < _e.length; _d++) {\n var annotation = _e[_d];\n var wrapper = this.getWrapper(element, annotation.id);\n if (visible) {\n wrapper.visible = wrapper.annotationVisibility === 'Visible' ? true : false;\n }\n else {\n wrapper.visible = visible;\n }\n }\n }\n }\n else {\n //path and decorators\n for (var i = 0; i < 3; i++) {\n element.children[parseInt(i.toString(), 10)].visible = visible;\n }\n }\n if (obj.annotations) {\n //annotations\n for (var _f = 0, _g = obj.annotations; _f < _g.length; _f++) {\n var annotation = _g[_f];\n var wrapper = this.getWrapper(element, annotation.id);\n //Bug 855273: Annotation visible property is not working while changing node visibility at runtime.\n if (visible) {\n wrapper.visible = wrapper.annotationVisibility === 'Visible' ? true : false;\n }\n else {\n wrapper.visible = visible;\n }\n }\n }\n if (obj.expandIcon || obj.collapseIcon) {\n var wrapper = this.getWrapper(element, 'icon_content');\n if (wrapper) {\n for (var i = 0; i < wrapper.children.length; i++) {\n wrapper.children[parseInt(i.toString(), 10)].visible = visible;\n }\n wrapper.visible = visible;\n }\n if (obj && obj.visible && obj.outEdges) {\n this.updateIconVisibility(obj, (obj.outEdges.length === 0 ? false : true));\n }\n }\n if (visible === false) {\n this.unSelect(this.nameTable[element.id]);\n }\n if ((obj instanceof Node && !this.preventNodesUpdate) || (obj instanceof Connector && !this.preventConnectorsUpdate)) {\n //Avoid calling updateDiagramObject method during rendering\n if (this.diagramActions) {\n this.updateDiagramObject(this.nameTable[element.id], undefined, true);\n }\n }\n }\n };\n Diagram.prototype.updateAnnotations = function (newProp, actualObject) {\n if (newProp.annotations !== undefined) {\n for (var _i = 0, _a = Object.keys(newProp.annotations); _i < _a.length; _i++) {\n var key = _a[_i];\n var index = Number(key);\n var changedObject = newProp.annotations[\"\" + key];\n var actualAnnotation = actualObject.annotations[parseInt(index.toString(), 10)];\n this.updateAnnotation(changedObject, actualAnnotation, actualObject.wrapper, actualObject);\n }\n }\n };\n Diagram.prototype.updatefixedUserHandle = function (newProp, actualObject) {\n if (newProp.fixedUserHandles !== undefined) {\n var index = void 0;\n var changedObject = void 0;\n var actualAnnotation = void 0;\n for (var _i = 0, _a = Object.keys(newProp.fixedUserHandles); _i < _a.length; _i++) {\n var key = _a[_i];\n index = Number(key);\n changedObject = newProp.fixedUserHandles[\"\" + key];\n actualAnnotation = actualObject.fixedUserHandles[parseInt(index.toString(), 10)];\n this.updateConnectorfixedUserHandle(changedObject, actualAnnotation, actualObject.wrapper, actualObject);\n }\n }\n };\n /**\n * updateConnectorfixedUserHandle method \\\n *\n * @returns { void } updateConnectorfixedUserHandle method .\\\n * @param {ConnectorFixedUserHandleModel} changedObject - provide the changedObject value.\n * @param {ConnectorFixedUserHandleModel} actualfixedUserHandle - provide the actualfixedUserHandle value.\n * @param {Container} nodes - provide the nodes value.\n * @param {Object} actualObject - provide the actualObject value.\n * @param {boolean} canUpdateSize - provide the canUpdateSize value.\n *\n * @private\n */\n Diagram.prototype.updateConnectorfixedUserHandle = function (changedObject, actualfixedUserHandle, nodes, actualObject, canUpdateSize) {\n var isMeasure = false;\n var fixedUserHandleWrapper = this.getWrapper(nodes, actualfixedUserHandle.id);\n if (fixedUserHandleWrapper !== undefined) {\n if (changedObject.width !== undefined) {\n fixedUserHandleWrapper.width = changedObject.width;\n isMeasure = true;\n }\n if (changedObject.height !== undefined) {\n fixedUserHandleWrapper.height = changedObject.height;\n isMeasure = true;\n }\n if (actualfixedUserHandle instanceof ConnectorFixedUserHandle &&\n (changedObject.offset !== undefined)) {\n actualObject.updateAnnotation(actualfixedUserHandle, actualObject.intermediatePoints, actualObject.wrapper.bounds, fixedUserHandleWrapper);\n }\n if ((actualfixedUserHandle instanceof ConnectorFixedUserHandle) && changedObject.displacement) {\n if (changedObject.displacement.x !== undefined ||\n changedObject.displacement.y !== undefined) {\n isMeasure = true;\n }\n }\n if (changedObject.fill !== undefined) {\n fixedUserHandleWrapper.style.fill = changedObject.fill;\n }\n if (changedObject.handleStrokeColor !== undefined) {\n fixedUserHandleWrapper.style.strokeColor = changedObject.handleStrokeColor;\n }\n if (changedObject.handleStrokeWidth !== undefined) {\n fixedUserHandleWrapper.style.strokeWidth = changedObject.handleStrokeWidth;\n }\n if (changedObject.visibility !== undefined) {\n fixedUserHandleWrapper.visible = changedObject.visibility;\n }\n if (changedObject.cornerRadius !== undefined) {\n fixedUserHandleWrapper.cornerRadius = changedObject.cornerRadius;\n }\n this.updatefixedUserHandleContent(changedObject, isMeasure, fixedUserHandleWrapper, actualObject, actualfixedUserHandle, nodes);\n if (isMeasure === true) {\n fixedUserHandleWrapper.measure(new Size(fixedUserHandleWrapper.width, fixedUserHandleWrapper.height));\n fixedUserHandleWrapper.arrange(fixedUserHandleWrapper.desiredSize);\n }\n }\n };\n /**\n * updateAnnotation method \\\n *\n * @returns { void } updateAnnotation method .\\\n * @param {AnnotationModel} changedObject - provide the changedObject value.\n * @param {ShapeAnnotationModel} actualAnnotation - provide the actualAnnotation value.\n * @param {Container} nodes - provide the nodes value.\n * @param {Object} actualObject - provide the actualObject value.\n * @param {boolean} canUpdateSize - provide the canUpdateSize value.\n *\n * @private\n */\n Diagram.prototype.updateAnnotation = function (changedObject, actualAnnotation, nodes, actualObject, canUpdateSize) {\n var isMeasure = false;\n // eslint-disable-next-line max-len\n var annotationWrapper = this.getWrapper(nodes, actualAnnotation.id);\n if (annotationWrapper !== undefined) {\n if (changedObject.width !== undefined && changedObject.height !== undefined) {\n annotationWrapper.width = changedObject.width;\n annotationWrapper.height = changedObject.height;\n isMeasure = true;\n }\n if (changedObject.rotateAngle !== undefined) {\n annotationWrapper.rotateAngle = changedObject.rotateAngle;\n }\n if (canUpdateSize && !(annotationWrapper instanceof DiagramHtmlElement)) {\n annotationWrapper.refreshTextElement();\n }\n if (actualAnnotation instanceof PathAnnotation && changedObject.segmentAngle !== undefined) {\n annotationWrapper.rotateAngle = actualAnnotation.rotateAngle;\n }\n if ((changedObject).rotationReference !== undefined) {\n annotationWrapper.rotationReference = changedObject.rotationReference;\n }\n if (actualAnnotation instanceof ShapeAnnotation &&\n changedObject.offset !== undefined) {\n var offset = changedObject.offset;\n isMeasure = true;\n var offsetX = offset.x !== undefined ? offset.x :\n actualAnnotation.offset.x;\n var offsetY = offset.y !== undefined ? offset.y :\n actualAnnotation.offset.y;\n annotationWrapper.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n annotationWrapper.relativeMode = 'Point';\n }\n else if (actualAnnotation instanceof PathAnnotation &&\n (changedObject.offset !== undefined ||\n changedObject.segmentAngle !== undefined)) {\n actualObject.updateAnnotation(actualAnnotation, actualObject.intermediatePoints, actualObject.wrapper.bounds, annotationWrapper);\n }\n if ((actualAnnotation instanceof PathAnnotation) && changedObject.displacement) {\n if (changedObject.displacement.x !== undefined ||\n changedObject.displacement.y !== undefined) {\n isMeasure = true;\n actualObject.updateAnnotation(actualAnnotation, actualObject.intermediatePoints, actualObject.wrapper.bounds, annotationWrapper);\n }\n }\n if (changedObject.margin !== undefined) {\n isMeasure = true;\n if (changedObject.margin.bottom !== undefined) {\n annotationWrapper.margin.bottom = changedObject.margin.bottom;\n }\n if (changedObject.margin.top !== undefined) {\n annotationWrapper.margin.top = changedObject.margin.top;\n }\n if (changedObject.margin.left !== undefined) {\n annotationWrapper.margin.left = changedObject.margin.left;\n }\n if (changedObject.margin.right !== undefined) {\n annotationWrapper.margin.right = changedObject.margin.right;\n }\n }\n if (isMeasure || canUpdateSize) {\n annotationWrapper.width = (actualAnnotation.width || actualObject.width);\n if (actualAnnotation.template) {\n annotationWrapper.width = (annotationWrapper.width || annotationWrapper.actualSize.width);\n annotationWrapper.height = (actualAnnotation.height || actualObject.height ||\n annotationWrapper.actualSize.height);\n }\n }\n if (changedObject.horizontalAlignment !== undefined) {\n annotationWrapper.horizontalAlignment = changedObject.horizontalAlignment;\n isMeasure = true;\n }\n if (changedObject.verticalAlignment !== undefined) {\n annotationWrapper.verticalAlignment = changedObject.verticalAlignment;\n isMeasure = true;\n }\n if (changedObject.visibility !== undefined) {\n annotationWrapper.visible = (nodes.visible && changedObject.visibility) ? true : false;\n annotationWrapper.annotationVisibility = annotationWrapper.visible ? 'Visible' : 'Collapsed';\n }\n if (changedObject.constraints !== undefined) {\n var updateSelector = false;\n if ((annotationWrapper.constraints & AnnotationConstraints.Select) &&\n (!(changedObject.constraints & AnnotationConstraints.Select)) &&\n isSelected(this, actualObject, false, annotationWrapper)) ;\n annotationWrapper.constraints = changedObject.constraints;\n if (updateSelector) {\n this.clearSelection();\n }\n }\n if (changedObject.style !== undefined) {\n updateStyle(changedObject.style, annotationWrapper);\n }\n if (changedObject.hyperlink !== undefined) {\n updateHyperlink(changedObject.hyperlink, annotationWrapper, actualAnnotation);\n }\n this.updateAnnotationContent(changedObject, isMeasure, annotationWrapper, actualObject, actualAnnotation, nodes);\n if (isMeasure === true) {\n annotationWrapper.measure(new Size(annotationWrapper.width, annotationWrapper.height));\n annotationWrapper.arrange(annotationWrapper.desiredSize);\n }\n if (!(annotationWrapper instanceof DiagramHtmlElement)) {\n annotationWrapper.refreshTextElement();\n }\n // this.refresh(); this.refreshDiagramLayer();\n }\n };\n Diagram.prototype.updatefixedUserHandleContent = function (changedObject, isMeasure, fixedUserHandleWrapper, actualObject, fixedUserHandleAnnotation, nodes) {\n if (changedObject !== undefined) {\n this.updateConnectorfixedUserHandleWrapper(fixedUserHandleWrapper, actualObject, fixedUserHandleAnnotation, nodes);\n }\n };\n Diagram.prototype.updateConnectorfixedUserHandleWrapper = function (fixedUserHandleWrapper, actualObject, actualAnnotation, nodes) {\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(fixedUserHandleWrapper.id + '_groupElement', elementId);\n removeElement(fixedUserHandleWrapper.id + '_html_element', elementId);\n }\n if (actualObject instanceof Connector) {\n var canvas = actualObject.wrapper;\n var segment = canvas.children[0];\n var bounds = new Rect(segment.offsetX - segment.width / 2, segment.offsetY - segment.height / 2, segment.width, segment.height);\n fixedUserHandleWrapper =\n actualObject.getFixedUserHandle(actualObject.fixedUserHandles[actualObject.fixedUserHandles.length - 1], actualObject.intermediatePoints, bounds, undefined, undefined);\n }\n for (var i = 0; i < nodes.children.length; i++) {\n if (fixedUserHandleWrapper.id === nodes.children[parseInt(i.toString(), 10)].id) {\n nodes.children.splice(i, 1, fixedUserHandleWrapper);\n }\n }\n };\n Diagram.prototype.updateAnnotationContent = function (changedObject, isMeasure, annotationWrapper, actualObject, actualAnnotation, nodes) {\n if (changedObject.content !== undefined) {\n if (annotationWrapper) {\n if (actualObject.shape.type === 'UmlActivity' &&\n ((!isBlazor() && actualObject.shape.shape === 'StructuredNode'))) {\n annotationWrapper.content = '<<' + changedObject.content + '>>';\n }\n else {\n annotationWrapper.content = changedObject.content;\n }\n }\n if (annotationWrapper instanceof DiagramHtmlElement) {\n this.updateAnnotationWrapper(annotationWrapper, actualObject, actualAnnotation, nodes);\n }\n }\n if (changedObject.template !== undefined) {\n annotationWrapper.content = changedObject.template;\n this.updateAnnotationWrapper(annotationWrapper, actualObject, actualAnnotation, nodes);\n }\n };\n Diagram.prototype.updateAnnotationWrapper = function (annotationWrapper, actualObject, actualAnnotation, nodes) {\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(annotationWrapper.id + '_groupElement', elementId);\n removeElement(annotationWrapper.id + '_html_element', elementId);\n }\n if (actualObject instanceof Node) {\n annotationWrapper =\n actualObject.initAnnotationWrapper(actualAnnotation, this.element.id);\n }\n else if (actualObject instanceof Connector) {\n var canvas = actualObject.wrapper;\n var segment = canvas.children[0];\n var bounds = new Rect(segment.offsetX - segment.width / 2, segment.offsetY - segment.height / 2, segment.width, segment.height);\n annotationWrapper =\n actualObject.getAnnotationElement(actualObject.annotations[actualObject.annotations.length - 1], actualObject.intermediatePoints, bounds, this.getDescription, this.element.id);\n }\n for (var i = 0; i < nodes.children.length; i++) {\n if (annotationWrapper.id === nodes.children[parseInt(i.toString(), 10)].id) {\n nodes.children.splice(i, 1, annotationWrapper);\n }\n }\n };\n /**\n * updateNodefixedUserHandle method \\\n *\n * @returns { void } updateNodefixedUserHandle method .\\\n * @param {NodeFixedUserHandleModel} changedObject - provide the changedObject value.\n * @param {NodeFixedUserHandleModel} actualfixedUserHandle - provide the actualfixedUserHandle value.\n * @param {Container} nodes - provide the changedObject value.\n * @param {Object} actualObject - provide the changedObject value.\n *\n * @private\n */\n Diagram.prototype.updateNodefixedUserHandle = function (changedObject, actualfixedUserHandle, nodes, actualObject) {\n //let fixedUserHandleWrapper: Canvas;\n var isMeasure = false;\n var fixedUserHandleWrapper = this.getWrapper(nodes, actualfixedUserHandle.id);\n if (fixedUserHandleWrapper !== undefined) {\n if (changedObject.width !== undefined) {\n fixedUserHandleWrapper.actualSize.width = changedObject.width;\n isMeasure = true;\n }\n if (changedObject.height !== undefined) {\n fixedUserHandleWrapper.height = changedObject.height;\n isMeasure = true;\n }\n if (actualfixedUserHandle instanceof NodeFixedUserHandle &&\n changedObject.offset !== undefined) {\n var offset = changedObject.offset;\n isMeasure = true;\n var offsetX = offset.x !== undefined ? offset.x :\n actualfixedUserHandle.offset.x;\n var offsetY = offset.y !== undefined ? offset.y :\n actualfixedUserHandle.offset.y;\n fixedUserHandleWrapper.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n fixedUserHandleWrapper.relativeMode = 'Point';\n }\n if (changedObject.margin !== undefined) {\n isMeasure = true;\n if (changedObject.margin.bottom !== undefined) {\n fixedUserHandleWrapper.margin.bottom = changedObject.margin.bottom;\n }\n if (changedObject.margin.top !== undefined) {\n fixedUserHandleWrapper.margin.top = changedObject.margin.top;\n }\n if (changedObject.margin.left !== undefined) {\n fixedUserHandleWrapper.margin.left = changedObject.margin.left;\n }\n if (changedObject.margin.right !== undefined) {\n fixedUserHandleWrapper.margin.right = changedObject.margin.right;\n }\n }\n if (changedObject.visibility !== undefined) {\n fixedUserHandleWrapper.visible = changedObject.visibility;\n }\n if (changedObject.fill !== undefined) {\n fixedUserHandleWrapper.style.fill = changedObject.fill;\n }\n if (changedObject.handleStrokeColor !== undefined) {\n fixedUserHandleWrapper.style.strokeColor = changedObject.handleStrokeColor;\n }\n if (changedObject.handleStrokeWidth !== undefined) {\n fixedUserHandleWrapper.style.strokeWidth = changedObject.handleStrokeWidth;\n }\n if (changedObject.cornerRadius !== undefined) {\n fixedUserHandleWrapper.cornerRadius = changedObject.cornerRadius;\n }\n this.updatefixedUserHandleWrapper(fixedUserHandleWrapper, actualObject, actualfixedUserHandle, nodes);\n if (isMeasure === true) {\n fixedUserHandleWrapper.measure(new Size(fixedUserHandleWrapper.width, fixedUserHandleWrapper.height));\n fixedUserHandleWrapper.arrange(fixedUserHandleWrapper.desiredSize);\n }\n }\n };\n Diagram.prototype.updatefixedUserHandleWrapper = function (fixedUserHandleWrapper, actualObject, actualAnnotation, nodes) {\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(fixedUserHandleWrapper.id + '_groupElement', elementId);\n removeElement(fixedUserHandleWrapper.id + '_html_element', elementId);\n }\n if (actualObject instanceof Node) {\n fixedUserHandleWrapper = actualObject.initFixedUserHandles(actualAnnotation, undefined, undefined);\n }\n for (var i = 0; i < nodes.children.length; i++) {\n if (fixedUserHandleWrapper.id === nodes.children[parseInt(i.toString(), 10)].id) {\n nodes.children.splice(i, 1, fixedUserHandleWrapper);\n }\n }\n };\n /**\n * updatePort method \\\n *\n * @returns { void } updatePort method .\\\n * @param {PointPortModel} changedObject - provide the changedObject value.\n * @param {PointPortModel} actualPort - provide the changedObject value.\n * @param {Container} nodes - provide the changedObject value.\n * @param {Connector} actualObject - The actual connector object to be used.\n * @private\n */\n Diagram.prototype.updatePort = function (changedObject, actualPort, nodes, actualObject) {\n var isMeasure = false;\n var portWrapper = this.getWrapper(nodes, actualPort.id);\n if (portWrapper !== undefined) {\n if (changedObject.offset !== undefined) {\n isMeasure = true;\n if (!actualObject) {\n var offsetX = changedObject.offset.x !== undefined ? changedObject.offset.x :\n actualPort.offset.x;\n var offsetY = changedObject.offset.y !== undefined ? changedObject.offset.y :\n actualPort.offset.y;\n portWrapper.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n portWrapper.relativeMode = 'Point';\n }\n else {\n if (changedObject.offset !== undefined) {\n actualObject.updateAnnotation(actualPort, actualObject.intermediatePoints, actualObject.wrapper.bounds, portWrapper);\n }\n }\n }\n if (changedObject.width !== undefined) {\n isMeasure = true;\n portWrapper.width = changedObject.width;\n }\n if (changedObject.height !== undefined) {\n isMeasure = true;\n portWrapper.height = changedObject.height;\n }\n if (changedObject.connectionDirection !== undefined) {\n portWrapper.connectionDirection = changedObject.connectionDirection;\n }\n if (changedObject.visibility !== undefined) {\n portWrapper.visible = (nodes.visible && checkPortRestriction(actualPort, PortVisibility.Visible)) ? true : false;\n }\n if (changedObject.margin !== undefined) {\n isMeasure = true;\n if (changedObject.margin.bottom !== undefined) {\n portWrapper.margin.bottom = changedObject.margin.bottom;\n }\n if (changedObject.margin.top !== undefined) {\n portWrapper.margin.top = changedObject.margin.top;\n }\n if (changedObject.margin.right !== undefined) {\n portWrapper.margin.right = changedObject.margin.right;\n }\n if (changedObject.margin.left !== undefined) {\n portWrapper.margin.left = changedObject.margin.left;\n }\n }\n if (changedObject.horizontalAlignment !== undefined) {\n isMeasure = true;\n portWrapper.horizontalAlignment = changedObject.horizontalAlignment;\n }\n if (changedObject.verticalAlignment !== undefined) {\n isMeasure = true;\n portWrapper.verticalAlignment = changedObject.verticalAlignment;\n }\n if (changedObject.style !== undefined) {\n if (changedObject.style.fill !== undefined) {\n portWrapper.style.fill = changedObject.style.fill;\n }\n if (changedObject.style.opacity !== undefined) {\n portWrapper.style.opacity = changedObject.style.opacity;\n }\n if (changedObject.style.strokeColor !== undefined) {\n portWrapper.style.strokeColor = changedObject.style.strokeColor;\n }\n if (changedObject.style.strokeWidth !== undefined) {\n portWrapper.style.strokeWidth = changedObject.style.strokeWidth;\n }\n if (changedObject.style.strokeDashArray !== undefined) {\n portWrapper.style.strokeDashArray = changedObject.style.strokeDashArray;\n }\n }\n if (changedObject.shape !== undefined) {\n if (portWrapper) {\n var pathdata = getPortShape(changedObject.shape);\n portWrapper.data = pathdata;\n portWrapper.canMeasurePath = true;\n }\n }\n if (changedObject.pathData !== undefined) {\n portWrapper.data = String(changedObject.pathData);\n isMeasure = true;\n }\n if (isMeasure === true) {\n portWrapper.measure(new Size(portWrapper.width, portWrapper.height));\n portWrapper.arrange(portWrapper.desiredSize);\n }\n //this.refresh(); this.refreshDiagramLayer();\n }\n };\n /**\n * updateIcon method \\\n *\n * @returns { void } updateIcon method .\\\n * @param {Node} actualObject - provide the obj value.\n *\n * @private\n */\n Diagram.prototype.updateIcon = function (actualObject) {\n var iconContainer = this.getWrapper(actualObject.wrapper, 'icon_content');\n var diagramId = (this.diagramActions & DiagramAction.Render) ? this.element.id : undefined;\n if (iconContainer) {\n if (this.mode === 'SVG') {\n var icon = getDiagramElement(actualObject.wrapper.id + '_icon_content', diagramId);\n if (icon) {\n var iconRect = getDiagramElement(icon.id + '_rect', diagramId);\n var iconShape = getDiagramElement(icon.id + '_shape', diagramId);\n var nativeContent = getDiagramElement(iconShape.id + '_native_element', diagramId);\n if (nativeContent) {\n nativeContent.parentNode.removeChild(nativeContent);\n }\n iconShape.parentNode.removeChild(iconShape);\n iconRect.parentNode.removeChild(iconRect);\n icon.parentNode.removeChild(icon);\n }\n }\n var index = actualObject.wrapper.children.indexOf(iconContainer);\n actualObject.wrapper.children.splice(index, 1);\n }\n var portContainer = this.getPortContainer(actualObject);\n actualObject.initIcons(this.getDescription, this.layout, portContainer, this.element.id);\n };\n Diagram.prototype.getPortContainer = function (actualObject) {\n if (actualObject.children) {\n for (var i = 0; i < actualObject.wrapper.children.length; i++) {\n if (actualObject.wrapper.children[parseInt(i.toString(), 10)].id === actualObject.id + 'group_container') {\n return actualObject.wrapper.children[parseInt(i.toString(), 10)];\n }\n }\n }\n return actualObject.wrapper;\n };\n Diagram.prototype.updateTooltip = function (actualObject, node) {\n if (node.tooltip.content !== undefined) {\n actualObject.tooltip.content = node.tooltip.content;\n }\n if (node.tooltip.position !== undefined) {\n actualObject.tooltip.position = node.tooltip.position;\n }\n if (node.tooltip.height !== undefined) {\n actualObject.tooltip.height = node.tooltip.height;\n }\n if (node.tooltip.width !== undefined) {\n actualObject.tooltip.width = node.tooltip.width;\n }\n if (node.tooltip.showTipPointer !== undefined) {\n actualObject.tooltip.showTipPointer = node.tooltip.showTipPointer;\n }\n if (node.tooltip.relativeMode !== undefined) {\n actualObject.tooltip.relativeMode = node.tooltip.relativeMode;\n }\n };\n /**\n * updateQuad method \\\n *\n * @returns { void } updateQuad method .\\\n * @param {IElement} obj - provide the obj value.\n *\n * @private\n */\n Diagram.prototype.updateQuad = function (obj) {\n var modified = this.spatialSearch.updateQuad(obj.wrapper);\n if (modified && !this.preventDiagramUpdate) {\n this.updatePage();\n }\n };\n /**\n * removeFromAQuad method \\\n *\n * @returns { void } removeFromAQuad method .\\\n * @param {IElement} obj - provide the node value.\n *\n * @private\n */\n Diagram.prototype.removeFromAQuad = function (obj) {\n if (obj.children) {\n var child = void 0;\n var children = obj.children;\n for (var i = 0; i < children.length; i++) {\n child = this.nameTable[children[parseInt(i.toString(), 10)]];\n if (child) {\n this.removeFromAQuad(child);\n }\n }\n }\n this.spatialSearch.removeFromAQuad(obj.wrapper);\n var isSwimLane = obj.shape.type === 'SwimLane' ? true : false;\n var modified = this.spatialSearch.updateBounds(obj.wrapper, isSwimLane);\n if (modified && !this.preventDiagramUpdate) {\n this.updatePage();\n }\n };\n /**\n * updateGroupSize method \\\n *\n * @returns { void } updateGroupSize method .\\\n * @param {NodeModel | ConnectorModel} node - provide the node value.\n *\n * @private\n */\n Diagram.prototype.updateGroupSize = function (node) {\n var tempNode;\n if (node.parentId) {\n tempNode = this.nameTable[node.parentId];\n if (tempNode) {\n if (tempNode.parentId) {\n this.updateGroupSize(tempNode);\n }\n else {\n tempNode.wrapper.measure(new Size());\n tempNode.wrapper.arrange(tempNode.wrapper.desiredSize);\n this.updateGroupOffset(tempNode);\n this.updateDiagramObject(tempNode);\n }\n }\n }\n };\n Diagram.prototype.updatePage = function () {\n if ((this.diagramActions & DiagramAction.Render) &&\n !(this.diagramActions & DiagramAction.DragUsingMouse)) {\n this.scroller.updateScrollOffsets();\n this.scroller.setSize();\n //updating overview\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view = this.views[\"\" + temp];\n if (!(view instanceof Diagram)) {\n view.updateView(view);\n }\n }\n }\n if (this.diagramActions & DiagramAction.DragUsingMouse) {\n this.renderPageBreaks();\n // EJ2-826378 - Scroller not updated properly when dragging a node outside the viewport.\n // We need to update the scroller while dragging.\n // If pageSize is defined, we don't need to update the scrollbar.\n // If pageSize is not defined, we need to update the scrollbar because the content is treated as page bounds, and if the content goes beyond the viewport, the scrollbar should be updated.\n if (!(this.pageSettings.width && this.pageSettings.height) || this.pageSettings.multiplePage) {\n this.scroller.updateScrollOffsets();\n this.scroller.setSize();\n }\n }\n };\n /**\n * protectPropertyChange method \\\n *\n * @returns { void } protectPropertyChange method .\\\n * @param {boolean} enable - provide the enable value.\n *\n * @private\n */\n Diagram.prototype.protectPropertyChange = function (enable) {\n this.isProtectedOnChange = enable;\n };\n /**\n * getProtectPropertyChangeValue method \\\n *\n * @returns { boolean } getProtectPropertyChangeValue method .\\\n *\n * @private\n */\n Diagram.prototype.getProtectPropertyChangeValue = function () {\n return this.isProtectedOnChange;\n };\n /**\n * enableServerDataBinding method \\\n *\n * @returns { void } enableServerDataBinding method .\\\n * @param {boolean} enable - provide the node value.\n *\n * @private\n */\n Diagram.prototype.enableServerDataBinding = function (enable) {\n //Removed isBlazor code\n };\n /**\n * updateShadow method \\\n *\n * @returns { void } updateShadow method .\\\n * @param {ShadowModel} nodeShadow - provide the node value.\n * @param {ShadowModel} changedShadow - provide the Node value.\n *\n * @private\n */\n Diagram.prototype.updateShadow = function (nodeShadow, changedShadow) {\n if (changedShadow.angle !== undefined) {\n nodeShadow.angle = changedShadow.angle;\n }\n if (changedShadow.color !== undefined) {\n nodeShadow.color = changedShadow.color;\n }\n if (changedShadow.distance !== undefined) {\n nodeShadow.distance = changedShadow.distance;\n }\n if (changedShadow.opacity !== undefined) {\n nodeShadow.opacity = changedShadow.opacity;\n }\n };\n /**\n * updateMargin method \\\n *\n * @returns { void } updateMargin method .\\\n * @param {Node} node - provide the node value.\n * @param {Node} changes - provide the Node value.\n *\n * @private\n */\n Diagram.prototype.updateMargin = function (node, changes) {\n if (changes.margin.top !== undefined) {\n node.margin.top = changes.margin.top;\n }\n if (changes.margin.bottom !== undefined) {\n node.margin.bottom = changes.margin.bottom;\n }\n if (changes.margin.left !== undefined) {\n node.margin.left = changes.margin.left;\n }\n if (changes.margin.right !== undefined) {\n node.margin.right = changes.margin.right;\n }\n };\n Diagram.prototype.removePreviewChildren = function (preview) {\n if (preview.children && preview.children.length &&\n preview.shape && preview.shape.type === 'SwimLane') {\n for (var z = 0; z < preview.children.length; z++) {\n var previewChildId = preview.children[parseInt(z.toString(), 10)];\n var previewIndex_1 = this.nodes.indexOf(this.nameTable[\"\" + previewChildId]);\n if (previewIndex_1 >= 0) {\n this.nodes.splice(previewIndex_1, 1);\n }\n delete this.nameTable[\"\" + previewChildId];\n }\n var previewIndex = this.nodes.indexOf(this.nameTable[this.currentSymbol.id]);\n if (previewIndex >= 0) {\n this.nodes.splice(previewIndex, 1);\n }\n }\n };\n Diagram.prototype.selectDragedNode = function (newObj, args, selectedSymbol) {\n this.currentSymbol = newObj;\n if (this.mode !== 'SVG') {\n this.refreshDiagramLayer();\n }\n this.commandHandler.oldSelectedObjects = cloneSelectedObjects(this);\n this.commandHandler.select(newObj);\n // this.commandHandler.updateBlazorSelector();\n this.eventHandler.mouseDown(args.event);\n this.eventHandler.mouseMove(args.event, args);\n this.preventDiagramUpdate = false;\n this.updatePage();\n selectedSymbol.style.opacity = '0';\n };\n //property changes - end region\n /* tslint:disable */\n Diagram.prototype.initDroppables = function () {\n var _this = this;\n // initiates droppable event\n var childTable = {};\n var entryTable = {};\n var header;\n var lane;\n var selectedSymbols = 'selectedSymbols';\n this.droppable = new Droppable(this.element);\n var dragLeft = 5;\n // this.droppable.accept = '.e-dragclone';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.droppable.over = function (args) {\n //Bug 855292: Swimlane dragging from palette jumps out of viewport when multiple page is set as true.\n // Added below code to prevent the negative x value of swimlane bounds when multiple page and ruler is enabled to prevent swimlane jump.\n if (_this.rulerSettings.showRulers) {\n var vRuler = document.getElementById(_this.element.id + '_vRuler');\n var vRulerWidth = parseFloat(vRuler.style.width);\n dragLeft = vRulerWidth + 1;\n }\n //EJ2-59341- SelectionChange OldValue argument is null\n if (_this.previousSelectedObjects.length === 0 && !_this.currentSymbol) {\n _this.previousSelectedObjects = _this.commandHandler.getSelectedObject();\n }\n _this.commandHandler.PreventConnectorSplit = true;\n if (!_this.currentSymbol) {\n var dragDataHelper = null;\n if (!args.dragData && args.name === 'drag') {\n var helper = document.getElementsByClassName('e-dragclone')[0];\n if (helper) {\n dragDataHelper = helper;\n }\n }\n if (args.dragData || dragDataHelper) {\n var newObj = void 0;\n var isHorizontal = void 0;\n document.getElementById(_this.element.id + 'content').focus();\n var position = _this.eventHandler.getMousePosition(args.event);\n var clonedObject = void 0;\n var selectedSymbol = dragDataHelper || args.dragData.helper;\n var paletteId = selectedSymbol.getAttribute('paletteId');\n var nodeDragSize = void 0;\n var nodePreviewSize = void 0;\n var paletteDragSize = void 0;\n var preview = void 0;\n if (!paletteId && args.dragData) {\n var arg = {\n source: null, element: newObj, cancel: false,\n diagram: _this,\n dragData: args.dragData.draggedElement.ej2_instances[0].dragData,\n dragItem: newObj\n };\n _this.triggerEvent(DiagramEvent.dragEnter, arg);\n var newNode = void 0;\n var newConnector = void 0;\n // EJ2-61664 - Check whether dragItem is returned from dragEnter event or not.\n // If it does not returned means then we do not change the treeview object as node\n if (arg.dragItem) {\n if (arg.dragItem.sourcePoint && arg.dragItem.targetPoint) {\n newConnector = new Connector(_this, 'connectors', arg.dragItem, true);\n }\n else {\n newNode = new Node(_this, 'nodes', arg.dragItem, true);\n }\n newObj = newNode ? newNode : newConnector;\n _this.initObject(newObj, undefined, undefined, true);\n _this['enterObject'] = newObj;\n _this['enterTable'] = entryTable;\n if (newObj instanceof Node) {\n newNode.offsetX = position.x + 5 + (newNode.width) * newNode.pivot.x;\n newNode.offsetY = position.y + (newNode.height) * newNode.pivot.y;\n }\n else if (newObj instanceof Connector) {\n var newObjBounds = Rect.toBounds([newObj.sourcePoint, newObj.targetPoint]);\n var diffx = position.x - newObjBounds.left;\n var diffy = position.y - newObjBounds.top;\n newObj.sourcePoint.x += diffx;\n newObj.sourcePoint.y += diffy;\n newObj.targetPoint.x += diffx;\n newObj.targetPoint.y += diffy;\n }\n _this.preventDiagramUpdate = true;\n _this.currentSymbol = newObj;\n if (_this.mode !== 'SVG') {\n _this.refreshDiagramLayer();\n }\n _this.selectDragedNode(newObj, args, selectedSymbol);\n delete _this['enterObject'];\n delete _this['enterTable'];\n _this.droppable[\"\" + selectedSymbols] = selectedSymbol;\n _this.allowServerDataBinding = true;\n }\n }\n if (paletteId) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var sourceElement = document.getElementById(paletteId).ej2_instances[0];\n var source = 'sourceElement';\n _this.droppable[\"\" + source] = sourceElement;\n var childtable = 'childTable';\n if (sourceElement) {\n var obj = sourceElement[\"\" + selectedSymbols];\n _this.allowServerDataBinding = false;\n clonedObject = cloneObject(sourceElement[\"\" + selectedSymbols]);\n childTable = sourceElement[\"\" + childtable];\n var wrapper = obj.wrapper.children[0].children[0];\n preview = getPreviewSize(sourceElement, clonedObject, wrapper);\n if (sourceElement[\"\" + selectedSymbols] instanceof Node) {\n if (obj.shape.shape === 'TextAnnotation') {\n // eslint-disable-next-line max-len\n clonedObject.offsetX = position.x + 11 + (preview.width) * clonedObject.pivot.x;\n // eslint-disable-next-line max-len\n clonedObject.offsetY = position.y + 11 + (preview.height) * clonedObject.pivot.y;\n }\n else {\n // eslint-disable-next-line max-len\n clonedObject.offsetX = position.x + 5 + (preview.width) * clonedObject.pivot.x;\n // eslint-disable-next-line max-len\n clonedObject.offsetY = position.y + (preview.height) * clonedObject.pivot.y;\n }\n var newNode = new Node(_this, 'nodes', clonedObject, true);\n if (newNode.shape.type === 'Bpmn' && newNode.shape.activity.subProcess.processes\n && newNode.shape.activity.subProcess.processes.length) {\n newNode.shape.activity.subProcess.processes = [];\n }\n nodeDragSize = newNode.dragSize;\n nodePreviewSize = newNode.previewSize;\n paletteDragSize = sourceElement['symbolDragSize'];\n var palettePreview = sourceElement['symbolPreview'];\n // eslint-disable-next-line max-len\n newNode.width = nodeDragSize.width || paletteDragSize.width || nodePreviewSize.width || palettePreview.width || newNode.width;\n // eslint-disable-next-line max-len\n newNode.height = nodeDragSize.height || paletteDragSize.height || nodePreviewSize.height || palettePreview.height || newNode.height;\n if (newNode.shape.type === 'SwimLane') {\n _this.diagramActions |= DiagramAction.PreventHistory;\n if (newNode.shape.isLane) {\n newNode.children = [];\n header = {\n id: 'header' + randomId()\n };\n if (newNode.shape.orientation === 'Horizontal') {\n header.width = newNode.shape.lanes[0].header.width;\n header.height = newNode.shape.lanes[0].height;\n }\n else {\n header.width = newNode.shape.lanes[0].width;\n header.height = newNode.shape.lanes[0].header.height;\n }\n header.style = newNode.shape.lanes[0].header.style;\n header.offsetX = position.x + dragLeft + header.width / 2;\n header.offsetY = position.y + header.height / 2;\n _this.diagramActions |= DiagramAction.PreventCollectionChangeOnDragOver;\n header = _this.add(header);\n lane = {\n id: 'body' + randomId()\n };\n if (newNode.shape.orientation === 'Horizontal') {\n lane.width = newNode.shape.lanes[0].width - header.width;\n lane.height = newNode.shape.lanes[0].height;\n // eslint-disable-next-line max-len\n lane.offsetX = position.x + dragLeft + (newNode.shape.lanes[0].header.width + (lane.width / 2));\n lane.offsetY = position.y + lane.height / 2;\n }\n else {\n lane.width = newNode.shape.lanes[0].width;\n lane.height = newNode.shape.lanes[0].height - header.height;\n lane.offsetX = position.x + dragLeft + lane.width / 2;\n // eslint-disable-next-line max-len\n lane.offsetY = position.y + (newNode.shape.lanes[0].header.height + (lane.height / 2));\n }\n lane.style = newNode.shape.lanes[0].style;\n lane = _this.add(lane);\n var group = {\n id: 'group' + randomId(),\n children: [header.id, lane.id]\n };\n group.shape = newNode.shape;\n group.width = newNode.shape.lanes[0].width;\n group.height = newNode.shape.lanes[0].height;\n group.previewSize = newNode.previewSize;\n group.dragSize = newNode.dragSize;\n group.addInfo = newNode.addInfo;\n newNode = _this.add(group);\n _this.diagramActions &= ~DiagramAction.PreventCollectionChangeOnDragOver;\n }\n _this.diagramActions &= ~DiagramAction.PreventHistory;\n }\n if (newNode.shape.isPhase) {\n isHorizontal = (newNode.shape.orientation === 'Horizontal') ? true : false;\n if (isHorizontal) {\n newNode.offsetX = position.x + dragLeft + (newNode.width || wrapper.actualSize.width) / 2;\n newNode.offsetY = position.y;\n newNode.shape.data =\n 'M' + 20 + ',' + (newNode.height / 2) + ' L' + (newNode.width - 20) + ',' +\n (newNode.height / 2) + 'z';\n newNode.height = 1;\n }\n else {\n newNode.offsetX = position.x + 5;\n newNode.offsetY = position.y + (newNode.height || wrapper.actualSize.height) / 2;\n newNode.shape.data =\n 'M' + (newNode.width / 2) + ',' + 20 + ' L' + (newNode.width / 2) +\n ',' + (newNode.height - 20) + 'z';\n newNode.width = 1;\n }\n }\n if (newNode.shape.type === 'UmlClassifier') {\n //When dragging a node from the palette to the diagram, set the children, width, and height values to undefined to avoid incorrect values.\n newNode.children = newNode.width = newNode.height = undefined;\n clonedObject.children = undefined;\n //An empty child type is added during drag enter for every node if no child types are specified in the palette.\n if (newNode.shape.classifier === 'Class') {\n if (newNode.shape.classShape.methods.length <= 0\n && newNode.shape.classShape.attributes.length <= 0) {\n newNode.shape.classShape.attributes = [\n { name: 'Name', type: 'Type', style: {} }\n ];\n }\n }\n if (newNode.shape.classifier === 'Enumeration') {\n if (newNode.shape.enumerationShape.members.length <= 0) {\n newNode.shape.enumerationShape.members = [\n {\n name: 'Name'\n }\n ];\n }\n }\n if (newNode.shape.classifier === 'Interface') {\n if (newNode.shape.interfaceShape.methods.length <= 0\n && newNode.shape.interfaceShape.attributes.length <= 0) {\n newNode.shape.interfaceShape.attributes = [\n { name: 'Name', type: 'Type', style: {} }\n ];\n }\n }\n }\n newObj = newNode;\n if (clonedObject.children) {\n var parentNode = clonedObject;\n var tempTable = {};\n entryTable = _this.getChildren(parentNode, tempTable, childTable);\n arrangeChild(parentNode, -parentNode.offsetX, -parentNode.offsetY, entryTable, true, _this);\n }\n }\n else if (sourceElement[\"\" + selectedSymbols] instanceof Connector) {\n newObj = new Connector(_this, 'connectors', clonedObject, true);\n var bounds = Rect.toBounds([newObj.sourcePoint, newObj.targetPoint]);\n var tx = position.x - bounds.left;\n var ty = position.y - bounds.top;\n newObj.sourcePoint.x += tx;\n newObj.sourcePoint.y += ty;\n newObj.targetPoint.x += tx;\n newObj.targetPoint.y += ty;\n }\n if (!newObj.shape.isLane) {\n newObj.id += randomId();\n }\n var arg = {\n source: sourceElement, element: newObj, cancel: false,\n diagram: _this, dragData: null, dragItem: newObj\n };\n //Removed isBlazor code\n _this['enterObject'] = newObj;\n _this['enterTable'] = entryTable;\n _this.triggerEvent(DiagramEvent.dragEnter, arg);\n if ((newObj instanceof Node) && newObj.shape.type === 'SwimLane' && newObj.shape.isLane) {\n var swimLaneObj = arg.element;\n var laneObj = swimLaneObj.shape.lanes[0];\n //let child1: NodeModel; let child2: NodeModel;\n isHorizontal = (swimLaneObj.shape.orientation === 'Horizontal') ? true : false;\n var child1 = _this.nameTable[newObj.children[0]];\n var child2 = _this.nameTable[newObj.children[1]];\n nodeDragSize = newObj.dragSize;\n nodePreviewSize = newObj.previewSize;\n paletteDragSize = sourceElement['symbolDragSize'];\n laneObj.width = nodeDragSize.width || paletteDragSize.width || nodePreviewSize.width || laneObj.width;\n laneObj.height = nodeDragSize.height || paletteDragSize.height || nodePreviewSize.height || laneObj.height;\n if (isHorizontal) {\n header.width = laneObj.header.width;\n header.height = laneObj.height;\n lane.width = laneObj.width - header.width;\n lane.height = laneObj.height;\n lane.offsetX = position.x + dragLeft + (laneObj.header.width + (child2.width / 2));\n lane.offsetY = position.y + child2.height / 2;\n }\n else {\n header.width = laneObj.width;\n header.height = laneObj.header.height;\n lane.width = laneObj.width;\n lane.height = laneObj.height - header.height;\n lane.offsetX = position.x + dragLeft + child2.width / 2;\n lane.offsetY = position.y + (laneObj.header.height + (child2.height / 2));\n }\n header.offsetX = position.x + dragLeft + child1.width / 2;\n header.offsetY = position.y + child1.height / 2;\n newObj.width = laneObj.width;\n newObj.height = laneObj.height;\n }\n if ((newObj instanceof Node) && newObj.shape.isPhase) {\n if (isHorizontal) {\n newObj.height = 1;\n }\n else {\n newObj.width = 1;\n }\n }\n if (!_this.activeLayer.lock && !arg.cancel) {\n _this.preventDiagramUpdate = true;\n if (newObj.children) {\n _this.findChild(newObj, entryTable);\n }\n _this.preventDiagramUpdate = true;\n if (newObj.zIndex !== Number.MIN_VALUE) {\n newObj.zIndex = Number.MIN_VALUE;\n }\n _this.initObject(newObj, undefined, undefined, true);\n if (_this.bpmnModule) {\n for (var i = 0; i < _this.bpmnModule.bpmnTextAnnotationConnector.length; i++) {\n if (_this.bpmnModule.bpmnTextAnnotationConnector[parseInt(i.toString(), 10)].wrapper === null) {\n _this.initConnectors(_this.bpmnModule.bpmnTextAnnotationConnector[parseInt(i.toString(), 10)], undefined, true);\n }\n }\n }\n _this.selectDragedNode(newObj, args, selectedSymbol);\n }\n delete _this['enterObject'];\n delete _this['enterTable'];\n }\n _this.droppable[\"\" + selectedSymbols] = selectedSymbol;\n _this.allowServerDataBinding = true;\n }\n }\n }\n else {\n if (args.event.touches && args.event.touches.length) {\n _this.eventHandler.mouseMove(args.event, args.event.touches);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.droppable.drop = function (args) { return __awaiter$2(_this, void 0, void 0, function () {\n var source, value, isPhase, orientation_2, isConnector, arg, id, clonedObject, nodeId, newObj, arg, clonedObject, id, selectedSymbols, draggableElement, i;\n return __generator$2(this, function (_a) {\n this.allowServerDataBinding = false;\n source = 'sourceElement';\n if (this.currentSymbol) {\n isPhase = false;\n isConnector = (this.currentSymbol instanceof Connector) ? true : false;\n if (args.event.touches) {\n this.eventHandler.mouseUp(args.event);\n }\n arg = {\n source: this.droppable[\"\" + source],\n element: this.currentSymbol,\n //EJ2-895314: Connector splits while dropping node on diagram, even after moving node away from connector highlighter\n target: this.eventHandler['hoverNode'] ||\n (this.findObjectsUnderMouse(this.eventHandler.getMousePosition(args.event))[0]) || this,\n cancel: false,\n position: { x: this.currentSymbol.wrapper.offsetX, y: this.currentSymbol.wrapper.offsetY }\n };\n // Removed isBlazor code\n this.commandHandler.PreventConnectorSplit = false;\n this.triggerEvent(DiagramEvent.drop, arg);\n id = 'id';\n clonedObject = cloneObject(this.currentSymbol);\n clonedObject['hasTarget'] = this.currentSymbol['hasTarget'];\n this.removeFromAQuad(this.currentSymbol);\n this.removeObjectsFromLayer(this.nameTable[this.currentSymbol.id]);\n this.removeElements(this.currentSymbol);\n //887625-UML class nodes cloned in diagram canvas while dragging nodes outside diagram page\n if ((this.currentSymbol.shape.isLane ||\n this.currentSymbol.shape.isPhase) || this.currentSymbol.shape.type === 'UmlClassifier') {\n this.removeChildInNodes(this.currentSymbol);\n }\n if (arg.cancel) {\n removeChildNodes(this.currentSymbol, this);\n }\n if (this.currentSymbol.shape.isPhase) {\n isPhase = true;\n orientation_2 = this.currentSymbol.shape.orientation;\n clonedObject.shape.phases = this.currentSymbol.shape.phases;\n }\n this.removePreviewChildren(this.currentSymbol);\n delete this.nameTable[this.currentSymbol.id];\n this.currentSymbol = null;\n this.protectPropertyChange(true);\n if (!arg.cancel) {\n this.startGroupAction();\n if (clonedObject && (clonedObject.shape.isLane || isPhase)) {\n if (isPhase) {\n clonedObject.shape.isPhase = isPhase;\n clonedObject.shape.orientation = orientation_2;\n }\n this.eventHandler.addSwimLaneObject(clonedObject);\n }\n //The following condition is designed to ensure that only UML nodes are added to the diagram during the drop operation\n if (clonedObject && clonedObject.shape.type === 'UmlClassifier' && !clonedObject.shape.relationship) {\n clonedObject.children = undefined;\n this.clearSelectorLayer();\n this.add(clonedObject);\n }\n if (clonedObject.shape.type === 'Bpmn' && clonedObject.shape.annotation\n && clonedObject['hasTarget']) {\n nodeId = clonedObject.shape.annotation.nodeId;\n clonedObject.shape.annotation.id = clonedObject.id;\n this.addTextAnnotation(clonedObject.shape.annotation, this.nameTable[\"\" + nodeId]);\n clonedObject.nodeId = '';\n }\n if (!clonedObject.shape.isLane && !isPhase && (clonedObject.type !== undefined || clonedObject.shape.type !== 'UmlClassifier')) {\n if (clonedObject.children) {\n this.addChildNodes(clonedObject);\n }\n //Bug 880814: Adding element to bpmn expanded subprocess located in swimlane throws an exception.\n // isTargetSubProcess is checked.\n if (arg.target && (arg.target instanceof Node) && !isConnector && checkParentAsContainer(this, arg.target)\n && canAllowDrop(arg.target) && !this.commandHandler.isTargetSubProcess(arg.target)) {\n addChildToContainer(this, arg.target, clonedObject);\n }\n else {\n // EJ2-62652 - Added below code to empty the segment collection if connector type is bezier\n if (clonedObject.type === 'Bezier' && clonedObject.segments.length > 0) {\n clonedObject.segments = [];\n }\n value = this.add(clonedObject, true);\n }\n //EJ2-864543 - Added symbols don't get correctly selected in MultipleSelect mode in Diagram\n if ((clonedObject || value) && (canSingleSelect(this) || canMultiSelect(this))) {\n this.select([this.nameTable[clonedObject[\"\" + id]]], false, this.previousSelectedObjects);\n }\n if (arg.target && arg.target instanceof Connector) {\n if (this.enableConnectorSplit === true) {\n if (this.nameTable[clonedObject[\"\" + id]] instanceof Node) {\n this.commandHandler.connectorSplit(this.nameTable[clonedObject[\"\" + id]], arg.target);\n this.commandHandler.PreventConnectorSplit = false;\n }\n }\n }\n }\n }\n else {\n this.clearSelectorLayer();\n }\n this.protectPropertyChange(false);\n newObj = this.nameTable[clonedObject[\"\" + id]];\n if (clonedObject['hasTarget']) {\n clonedObject.nodeId = clonedObject['hasTarget'];\n this.remove(clonedObject);\n }\n if (this.bpmnModule && newObj instanceof Node && clonedObject.processId) {\n newObj.processId = clonedObject.processId;\n this.bpmnModule.dropBPMNchild(this.nameTable[newObj.processId], newObj, this);\n }\n if (!arg.cancel) {\n this.endGroupAction();\n }\n if (this.mode !== 'SVG') {\n this.refreshDiagramLayer();\n }\n delete this.droppable[\"\" + source];\n }\n else {\n arg = {\n source: cloneBlazorObject(args.droppedElement),\n element: undefined,\n target: cloneBlazorObject(this.eventHandler['hoverNode'] || (this.eventHandler['lastObjectUnderMouse']) || this), cancel: false,\n position: undefined\n };\n //Removed is Blazor code.\n this.triggerEvent(DiagramEvent.drop, arg);\n clonedObject = void 0;\n id = 'id';\n }\n selectedSymbols = 'selectedSymbols';\n // eslint-disable-next-line max-len\n if (this.droppable[\"\" + selectedSymbols] && this.droppable[\"\" + selectedSymbols].parentNode) {\n remove(this.droppable[\"\" + selectedSymbols]);\n }\n else {\n draggableElement = document.getElementsByClassName('e-dragclone');\n for (i = 0; i < draggableElement.length; i++) {\n draggableElement[parseInt(i.toString(), 10)].remove();\n }\n }\n this.allowServerDataBinding = true;\n this.previousSelectedObjects = [];\n return [2 /*return*/];\n });\n }); };\n this.droppable.out = function (args) {\n // EJ2-57221 - Added the below code to check if we drag the node from symbol palette using touch or mouse.\n if (args.evt.type === 'touchmove') {\n _this.eventHandler.mouseLeave(args.evt);\n }\n if (_this.currentSymbol && (!_this.eventHandler.focus)) {\n _this.unSelect(_this.currentSymbol);\n _this.removeFromAQuad(_this.currentSymbol);\n if (_this.mode !== 'SVG' && _this.currentSymbol.shape.type === 'Native') {\n _this.removeElements(_this.currentSymbol);\n }\n _this.removeObjectsFromLayer(_this.nameTable[_this.currentSymbol.id]);\n if (_this.currentSymbol.shape && _this.currentSymbol.shape.shape === 'TextAnnotation') {\n var con = _this.nameTable[_this.currentSymbol.inEdges[0]];\n _this.removeObjectsFromLayer(_this.nameTable[con.id]);\n _this.removeFromAQuad(con);\n _this.removePreviewChildren(con);\n delete _this.nameTable[con.id];\n var index = _this.connectors.indexOf(con);\n _this.connectors.splice(index, 1);\n _this.removeElements(con);\n }\n _this.removePreviewChildren(_this.currentSymbol);\n delete _this.nameTable[_this.currentSymbol.id];\n var args_1 = {\n element: cloneBlazorObject(_this.currentSymbol),\n diagram: _this\n };\n //Removed is Blazor code\n _this.triggerEvent(DiagramEvent.dragLeave, args_1);\n if (_this.mode !== 'SVG') {\n _this.refreshDiagramLayer();\n }\n else {\n _this.removeElements(_this.currentSymbol);\n //EJ2-833020-To remove the child element from the group node while dragging the group node from palette\n //EJ2-842739- Error When Dragging Swimlane from Palette to Diagram and Exiting Without Dropping\n if (_this.currentSymbol.shape.type !== 'SwimLane' && _this.currentSymbol.children && _this.currentSymbol.children.length > 0) {\n for (var i = 0; i < _this.currentSymbol.children.length; i++) {\n var child = _this.nameTable[_this.currentSymbol.children[parseInt(i.toString(), 10)]];\n _this.removeElements(child);\n delete _this.nameTable[_this.currentSymbol.children[parseInt(i.toString(), 10)]];\n }\n }\n }\n _this.currentSymbol = null;\n var selectedSymbols_1 = 'selectedSymbols';\n _this.droppable[\"\" + selectedSymbols_1].style.opacity = '1';\n var source = 'sourceElement';\n delete _this.droppable[\"\" + source];\n _this.diagramRenderer.rendererActions =\n _this.removeConstraints(_this.diagramRenderer.rendererActions, RendererAction.DrawSelectorBorder);\n if (_this.previousSelectedObject) {\n _this.select(_this.previousSelectedObject, _this.previousSelectedObject.length > 1 ? true : false);\n }\n _this.previousSelectedObject = null;\n }\n };\n };\n // Removed Blazor getBlazorDragLeaveEventArgs method\n Diagram.prototype.getDropEventArgs = function (arg) {\n if ((this.eventHandler['lastObjectUnderMouse'] || this.eventHandler['hoverNode'])) {\n var object = this.eventHandler['lastObjectUnderMouse'] || this.eventHandler['hoverNode'];\n // eslint-disable-next-line max-len\n arg.target = getObjectType(object) === Connector ? { connector: cloneBlazorObject(object) } : { node: cloneBlazorObject(object) };\n }\n else {\n arg.target.diagramId = this.element.id;\n }\n };\n Diagram.prototype.removeChildInNodes = function (node) {\n if (node) {\n if (node.children) {\n for (var i = 0; i < node.children.length; i++) {\n this.removeChildInNodes(this.nameTable[node.children[parseInt(i.toString(), 10)]]);\n }\n }\n var index = this.nodes.indexOf(node);\n if (index !== -1) {\n this.nodes.splice(index, 1);\n }\n }\n };\n Diagram.prototype.getBlazorDragEventArgs = function (args) {\n args = {\n // eslint-disable-next-line max-len\n source: cloneBlazorObject(args.source), element: getObjectType(args.element) === Connector ? { connector: cloneBlazorObject(args.element) }\n : { node: cloneBlazorObject(args.element) },\n cancel: args.cancel, diagramId: this.element.id\n };\n return args;\n };\n Diagram.prototype.findChild = function (node, childTable) {\n var group;\n var newNode;\n for (var i = 0; i < node.children.length; i++) {\n group = childTable[node.children[parseInt(i.toString(), 10)]];\n if (group) {\n if (group.children) {\n this.findChild(group, childTable);\n }\n group.id = group.id + randomId();\n childTable[group.id] = group;\n node.children[parseInt(i.toString(), 10)] = group.id;\n newNode = new Node(this, 'nodes', group, true);\n this.initObject(newNode, undefined, undefined, true);\n //this.add(group, true);\n }\n }\n };\n Diagram.prototype.getChildren = function (node, entryTable, childTable) {\n var temp;\n for (var i = 0; i < node.children.length; i++) {\n temp = (childTable[node.children[parseInt(i.toString(), 10)]]);\n if (temp) {\n if (temp.children) {\n entryTable = this.getChildren(temp, entryTable, childTable);\n }\n entryTable[temp.id] = cloneObject(temp);\n }\n }\n return entryTable;\n };\n Diagram.prototype.addChildNodes = function (node) {\n var temp;\n for (var i = 0; i < node.children.length; i++) {\n temp = (this.nameTable[node.children[parseInt(i.toString(), 10)]]);\n if (temp) {\n if (temp.children) {\n this.addChildNodes(temp);\n }\n this.add(temp, true);\n }\n }\n };\n Diagram.prototype.moveNode = function (node) {\n var currentLayer = this.commandHandler.getObjectLayer(node.id);\n var index = currentLayer.zIndex;\n var length = currentLayer.objects.length;\n var targetLayer;\n for (var i = 0; i < this.layers.length; i++) {\n if (index === this.layers[parseInt(i.toString(), 10)].zIndex) {\n targetLayer = this.layers[i + 1];\n }\n }\n if (length > 1) {\n // Bug 830365: Exception raised on adding group node in layers dynamically.\n // Added below code to check the group node and iterate its children in layer to find the last object in the layer.\n var num = 2;\n if (node.children && node.children.length > 0) {\n while (node.children.indexOf(currentLayer.objects[length - num]) > -1) {\n num++;\n }\n }\n this.commandHandler.moveSvgNode(node.id, currentLayer.objects[length - num]);\n this.commandHandler.moveSvgNode(currentLayer.objects[length - num], node.id);\n }\n else {\n if (targetLayer) {\n var targetObject = this.commandHandler.getLayer(this.layerZIndexTable[targetLayer.zIndex]).objects[0];\n if (targetObject) {\n this.commandHandler.moveSvgNode(node.id, targetObject);\n this.commandHandler.updateNativeNodeIndex(node.id, targetObject);\n }\n else {\n this.moveObjectsUp(node, currentLayer);\n }\n }\n else {\n this.moveObjectsUp(node, currentLayer);\n }\n }\n };\n /**\n * Moves the node or connector forward within the given layer. \\\n *\n * @returns { void } Moves the node or connector forward within the given layer.\\\n * @param {Node | Connector} node - The node or connector to be moved forward within the layer.\n * @param {LayerModel} currentLayer - representing the layer in which the node or connector should be moved.\n *\n */\n Diagram.prototype.moveObjectsUp = function (node, currentLayer) {\n var targetLayer;\n for (var i = this.layers.length - 1; i >= 0; i--) {\n targetLayer = this.layers[parseInt(i.toString(), 10)];\n if (currentLayer.id !== targetLayer.id) {\n // eslint-disable-next-line max-len\n var targetObject = this.commandHandler.getLayer(this.layerZIndexTable[targetLayer.zIndex]).objects[targetLayer.objects.length - 1];\n if (targetObject) {\n this.commandHandler.moveSvgNode(node.id, targetObject);\n this.commandHandler.moveSvgNode(targetObject, node.id);\n break;\n }\n }\n }\n };\n /**\n * Inserts a newly added element into the database. \\\n *\n * @returns { void } Inserts a newly added element into the database.\\\n * @param {Node | Connector} node - The node or connector to be inserted into the database.\n *\n */\n Diagram.prototype.insertData = function (node) {\n return this.crudOperation(node, 'create', this.getNewUpdateNodes('New'));\n };\n /**\n * Updates user-defined element properties in the existing database. \\\n *\n * @returns { void } Updates user-defined element properties in the existing database.\\\n * @param {Node | Connector} node - The source value representing the element to update.\n *\n */\n Diagram.prototype.updateData = function (node) {\n return this.crudOperation(node, 'update', this.getNewUpdateNodes('Update'));\n };\n /**\n * Removes the user-deleted element from the existing database.\\\n *\n * @returns { void } Removes the user-deleted element from the existing database.\\\n * @param {Node | Connector} node - The node or connector to be removed from the database.\n *\n */\n Diagram.prototype.removeData = function (node) {\n return this.crudOperation(node, 'destroy', this.getDeletedNodes());\n };\n Diagram.prototype.crudOperation = function (node, crud, getNodesCollection) {\n if (node) {\n var data = this.parameterMap(node, node instanceof Connector ? false : true);\n if (data) {\n // eslint-disable-next-line max-len\n var url = node instanceof Connector ? this.dataSourceSettings.connectionDataSource.crudAction[\"\" + crud] : this.dataSourceSettings.crudAction[\"\" + crud];\n this.raiseAjaxPost(JSON.stringify(data), url);\n }\n return data;\n }\n else {\n var newObjects = getNodesCollection;\n // eslint-disable-next-line max-len\n this.processCrudCollection(newObjects, this.dataSourceSettings.crudAction[\"\" + crud], this.dataSourceSettings.connectionDataSource.crudAction[\"\" + crud]);\n return newObjects;\n }\n };\n Diagram.prototype.processCrudCollection = function (newObjects, nodeCrudAction, connectorCrudAction) {\n if (newObjects.nodes) {\n var data = [];\n var i = void 0;\n for (i = 0; i < newObjects.nodes.length; i++) {\n data.push(this.parameterMap(newObjects.nodes[parseInt(i.toString(), 10)], true));\n }\n if (data && data.length > 0) {\n this.raiseAjaxPost(JSON.stringify(data), nodeCrudAction);\n }\n }\n if (newObjects.connectors) {\n var data = [];\n var i = void 0;\n for (i = 0; i < newObjects.connectors.length; i++) {\n data.push(this.parameterMap(newObjects.connectors[parseInt(i.toString(), 10)], false));\n }\n if (data && data.length > 0) {\n this.raiseAjaxPost(JSON.stringify(data), connectorCrudAction);\n }\n }\n };\n Diagram.prototype.parameterMap = function (object, isNode) {\n var mappingObj = {};\n var i;\n var fields = isNode ? this.dataSourceSettings : this.dataSourceSettings.connectionDataSource;\n if (fields.id) {\n mappingObj[fields.id] = object.id;\n }\n if (fields.sourcePointX && fields.sourcePointY) {\n mappingObj[fields.sourcePointX] = object.sourcePoint.x;\n mappingObj[fields.sourcePointY] = object.sourcePoint.y;\n }\n if (fields.targetPointX && fields.targetPointY) {\n mappingObj[fields.targetPointX] = object.targetPoint.x;\n mappingObj[fields.targetPointY] = object.targetPoint.y;\n }\n if (fields.sourceID) {\n mappingObj[fields.sourceID] = object.sourceID;\n }\n if (fields.targetID) {\n mappingObj[fields.targetID] = object.targetID;\n }\n if (fields.crudAction && fields.crudAction.customFields && fields.crudAction.customFields.length > 0) {\n for (i = 0; i < fields.crudAction.customFields.length; i++) {\n mappingObj[fields.crudAction.customFields[parseInt(i.toString(), 10)]]\n = object[fields.crudAction.customFields[parseInt(i.toString(), 10)]];\n }\n }\n return mappingObj;\n };\n Diagram.prototype.getNewUpdateNodes = function (status) {\n var nodes = [];\n var connectors = [];\n // eslint-disable-next-line guard-for-in\n for (var name_1 in this.nameTable) {\n var node = this.nameTable[\"\" + name_1];\n if (node.status === status) {\n if (node && node instanceof Connector) {\n node.status = 'None';\n connectors.push(node);\n }\n else {\n node.status = 'None';\n nodes.push(node);\n }\n }\n }\n return { nodes: nodes, connectors: connectors };\n };\n Diagram.prototype.getDeletedNodes = function () {\n var nodes = [];\n var connectors = [];\n var i;\n for (i = 0; i < this.crudDeleteNodes.length; i++) {\n var node = this.crudDeleteNodes[parseInt(i.toString(), 10)];\n if (node && node.segments) {\n connectors.push(node);\n }\n else if (node) {\n nodes.push(node);\n }\n }\n this.crudDeleteNodes = [];\n return { nodes: nodes, connectors: connectors };\n };\n Diagram.prototype.raiseAjaxPost = function (value, url) {\n var callback = new Fetch(url, 'POST', 'application/json');\n var data = JSON.stringify(JSON.parse(value));\n callback.send(data).then();\n /* eslint-disable */\n callback.onSuccess = function (data) {\n };\n /* eslint-enable */\n };\n Diagram.prototype.getHiddenItems = function (args) {\n var hiddenItems = [];\n if (this.contextMenuModule) {\n this.contextMenuModule.hiddenItems = [];\n for (var _i = 0, _a = args.items; _i < _a.length; _i++) {\n var item = _a[_i];\n this.contextMenuModule.ensureItems(item, args.event);\n if (item.items && item.items.length) {\n for (var _b = 0, _c = item.items; _b < _c.length; _b++) {\n var newItem = _c[_b];\n this.contextMenuModule.ensureItems(newItem, args.event);\n }\n }\n }\n return this.contextMenuModule.hiddenItems;\n }\n return hiddenItems;\n };\n __decorate$q([\n Property('100%')\n ], Diagram.prototype, \"width\", void 0);\n __decorate$q([\n Property(false)\n ], Diagram.prototype, \"enableConnectorSplit\", void 0);\n __decorate$q([\n Property('SVG')\n ], Diagram.prototype, \"mode\", void 0);\n __decorate$q([\n Property('100%')\n ], Diagram.prototype, \"height\", void 0);\n __decorate$q([\n Property('Circle')\n ], Diagram.prototype, \"segmentThumbShape\", void 0);\n __decorate$q([\n Property(10)\n ], Diagram.prototype, \"segmentThumbSize\", void 0);\n __decorate$q([\n Complex({}, ContextMenuSettings)\n ], Diagram.prototype, \"contextMenuSettings\", void 0);\n __decorate$q([\n Property(DiagramConstraints.Default)\n ], Diagram.prototype, \"constraints\", void 0);\n __decorate$q([\n Property(DiagramTools.Default)\n ], Diagram.prototype, \"tool\", void 0);\n __decorate$q([\n Property('Top')\n ], Diagram.prototype, \"bridgeDirection\", void 0);\n __decorate$q([\n Property('transparent')\n ], Diagram.prototype, \"backgroundColor\", void 0);\n __decorate$q([\n Complex({}, SnapSettings)\n ], Diagram.prototype, \"snapSettings\", void 0);\n __decorate$q([\n Complex({}, RulerSettings)\n ], Diagram.prototype, \"rulerSettings\", void 0);\n __decorate$q([\n Complex({}, PageSettings)\n ], Diagram.prototype, \"pageSettings\", void 0);\n __decorate$q([\n Complex({}, SerializationSettings)\n ], Diagram.prototype, \"serializationSettings\", void 0);\n __decorate$q([\n Collection([], Node)\n ], Diagram.prototype, \"nodes\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"drawingObject\", void 0);\n __decorate$q([\n Collection([], Connector)\n ], Diagram.prototype, \"connectors\", void 0);\n __decorate$q([\n Property([])\n ], Diagram.prototype, \"basicElements\", void 0);\n __decorate$q([\n Complex({}, DiagramTooltip)\n ], Diagram.prototype, \"tooltip\", void 0);\n __decorate$q([\n Complex({}, DataSource)\n ], Diagram.prototype, \"dataSourceSettings\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"addInfo\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"historyManager\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"nodeTemplate\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"annotationTemplate\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"userHandleTemplate\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"fixedUserHandleTemplate\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"getNodeDefaults\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"nodeDefaults\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"getConnectorDefaults\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"connectorDefaults\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"setNodeTemplate\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"getDescription\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"getCustomProperty\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"getCustomTool\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"getCustomCursor\", void 0);\n __decorate$q([\n Collection([], CustomCursorAction)\n ], Diagram.prototype, \"customCursor\", void 0);\n __decorate$q([\n Property()\n ], Diagram.prototype, \"updateSelection\", void 0);\n __decorate$q([\n Complex({}, DiagramSettings)\n ], Diagram.prototype, \"diagramSettings\", void 0);\n __decorate$q([\n Complex({}, Selector)\n ], Diagram.prototype, \"selectedItems\", void 0);\n __decorate$q([\n Complex({}, ScrollSettings)\n ], Diagram.prototype, \"scrollSettings\", void 0);\n __decorate$q([\n Complex({}, Layout)\n ], Diagram.prototype, \"layout\", void 0);\n __decorate$q([\n Complex({}, CommandManager)\n ], Diagram.prototype, \"commandManager\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"dataLoaded\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"dragEnter\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"dragLeave\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"dragOver\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"click\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"historyChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"historyStateChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"doubleClick\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"textEdit\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"scrollChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"mouseWheel\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"selectionChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"sizeChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"connectionChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"sourcePointChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"targetPointChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"propertyChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"positionChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"keyUp\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"keyDown\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"animationComplete\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"rotateChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"collectionChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"fixedUserHandleClick\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onUserHandleMouseDown\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onUserHandleMouseUp\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onUserHandleMouseEnter\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onUserHandleMouseLeave\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onFixedUserHandleMouseDown\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onFixedUserHandleMouseUp\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onFixedUserHandleMouseEnter\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onFixedUserHandleMouseLeave\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"segmentCollectionChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"onImageLoad\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"expandStateChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"load\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"created\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"mouseEnter\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"mouseLeave\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"mouseOver\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"elementDraw\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"contextMenuOpen\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"contextMenuBeforeItemRender\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"contextMenuClick\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"commandExecute\", void 0);\n __decorate$q([\n Collection([], Layer)\n ], Diagram.prototype, \"layers\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"drop\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"segmentChange\", void 0);\n __decorate$q([\n Event()\n ], Diagram.prototype, \"loaded\", void 0);\n return Diagram;\n}(Component));\n\n/* eslint-disable jsdoc/require-param */\nvar storeFormat;\n/**\n * Print and Export Settings\n */\nvar PrintAndExport = /** @__PURE__ @class */ (function () {\n function PrintAndExport(diagram) {\n var _this = this;\n this.printWindow = undefined;\n //833683 - Method for closing the newly opened print window.\n this.closePrintWindow = function () {\n if (_this.printWindow && !_this.printWindow.closed) {\n _this.printWindow.close();\n }\n };\n this.diagram = diagram;\n }\n /**\n * To Export the diagram\n *\n * @private\n */\n PrintAndExport.prototype.exportDiagram = function (options) {\n var fileType;\n var customBounds;\n var content;\n var data = 'data';\n //let mode: string;\n var buffers = [];\n var margin = options.margin || {};\n var region = options && options.region ? options.region : 'Content';\n // isBlazor code removed\n var mode = options && options.mode ? options.mode : 'Download';\n var bounds = this.getDiagramBounds(region, options);\n if (options.bounds) {\n customBounds = true;\n bounds.x = options.bounds.x ? options.bounds.x : bounds.x;\n bounds.y = options.bounds.y ? options.bounds.y : bounds.y;\n bounds.width = options.bounds.width || bounds.width;\n bounds.height = options.bounds.height || bounds.height;\n }\n margin = {\n top: margin.top !== undefined ? margin.top : 25,\n bottom: margin.bottom !== undefined ? margin.bottom : 25,\n right: margin.right !== undefined ? margin.right : 25,\n left: margin.left !== undefined ? margin.left : 25\n };\n var nodes = this.diagram.nodes;\n if (region !== 'PageSettings') {\n bounds.x -= margin.left;\n bounds.y -= margin.top;\n bounds.width += margin.left + margin.right;\n bounds.height += margin.top + margin.bottom;\n }\n var fileName = options.fileName || 'diagram';\n if (options.format !== 'SVG') {\n data = this.setCanvas(options, bounds, margin, mode, customBounds, region, fileName);\n if (data !== null) {\n return data;\n }\n }\n else {\n fileType = options.format;\n options.bounds = bounds;\n options.margin = margin;\n var svg = content = this.diagramAsSvg(options, margin);\n if (mode === 'Data') {\n // isBlazor code removed\n return content;\n }\n var buffer = new XMLSerializer().serializeToString(svg);\n buffers.push(buffer);\n }\n if (mode === 'Download' && data !== null) {\n // Ensure this for Safari\n // if (Browser.info.name === 'msie' && Number(Browser.info.version) < 10 || Browser.info.name === 'webkit') {\n // let info: string = Browser.info.name === 'webkit' ? 'Safari' : 'IE-9';\n // alert('Downloading option is not supported in ' + info + ', Please use the returned data');\n // return content;\n // } else {\n for (var b = 0; b < buffers.length; b++) {\n var blob = new Blob([buffers[parseInt(b.toString(), 10)]], { type: 'application/octet-stream' });\n if (Browser.info.name === 'msie') {\n window.navigator.msSaveOrOpenBlob(blob, fileName + '.' + fileType);\n }\n else {\n var pom = createHtmlElement('a', { 'download': fileName + '.' + fileType });\n var url = URL.createObjectURL(blob);\n pom.href = url;\n var e = document.createEvent('MouseEvents');\n e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n pom.dispatchEvent(e);\n }\n }\n }\n return null;\n };\n PrintAndExport.prototype.setCanvas = function (options, bounds, margin, mode, customBounds, region, fileName) {\n var content;\n options.bounds = bounds;\n options.region = region;\n var scaleX = 'scaleX';\n var scaleY = 'scaleY';\n var scaleOffsetX = 'scaleOffsetX';\n var scaleOffsetY = 'scaleOffsetY';\n this.setScaleValueforCanvas(options, bounds);\n var canvas = this.diagramAsCanvas({\n bounds: bounds, margin: margin, region: region, scaleX: options[\"\" + scaleX],\n scaleY: options[\"\" + scaleY], scaleOffsetX: options[\"\" + scaleOffsetX], scaleOffsetY: options[\"\" + scaleOffsetY]\n }, customBounds);\n var image;\n if (options.format === 'JPG') {\n image = content = storeFormat = canvas.toDataURL('image/jpeg');\n }\n else if (options.format === 'BMP') {\n image = content = storeFormat = canvas.toDataURL('image/bmp');\n }\n else {\n image = content = storeFormat = canvas.toDataURL();\n }\n if (mode === 'Data') {\n return content;\n }\n this.canvasMultiplePage(options, canvas, margin, image, fileName);\n return null;\n };\n PrintAndExport.prototype.canvasMultiplePage = function (options, canvas, margin, image, fileName) {\n var _this = this;\n var images = [];\n var imageData = image.substring(image.indexOf(':') + 1, image.indexOf(';'));\n var imageFormat = imageData.substring(imageData.indexOf('/') + 1);\n if (imageFormat === 'jpeg') {\n imageFormat = undefined;\n }\n else {\n imageFormat = imageFormat.toUpperCase();\n }\n var fileType = imageFormat || 'JPG';\n if (options.multiplePage) {\n options.pageHeight = options.pageHeight ? options.pageHeight : this.diagram.pageSettings.height;\n options.pageWidth = options.pageWidth ? options.pageWidth : this.diagram.pageSettings.width;\n options.pageHeight = options.pageHeight ? options.pageHeight : canvas.width;\n options.pageWidth = options.pageWidth ? options.pageWidth : canvas.height;\n margin = options.margin || {};\n if (options.pageOrientation) {\n if ((options.pageOrientation === 'Landscape' && options.pageHeight > options.pageWidth) ||\n options.pageOrientation === 'Portrait' && options.pageWidth > options.pageHeight) {\n var temp = options.pageWidth;\n options.pageWidth = options.pageHeight;\n options.pageHeight = temp;\n }\n }\n options.margin = {\n top: !isNaN(margin.top) ? margin.top : 0,\n bottom: !isNaN(margin.bottom) ? margin.bottom : 0,\n left: !isNaN(margin.left) ? margin.left : 0,\n right: !isNaN(margin.right) ? margin.right : 0\n };\n var attr = {\n 'id': this.diagram.element.id + '_printImage',\n 'src': image\n };\n var img_1 = createHtmlElement('img', attr);\n img_1.onload = function () {\n images = _this.getMultipleImage(img_1, options, true);\n _this.exportImage(images, fileName, fileType, image);\n };\n }\n else {\n images = [image];\n this.exportImage(images, fileName, fileType, image);\n }\n };\n PrintAndExport.prototype.exportImage = function (images, fileName, fileType, image) {\n var buffers = [];\n var length = (!(images instanceof HTMLElement)) ? images.length : 0;\n for (var g = 0; g < length; g++) {\n image = images[parseInt(g.toString(), 10)];\n image = image.replace(/^data:[a-z]*;,/, '');\n var image1 = image.split(',');\n var byteString = atob(image1[1]);\n var buffer = new ArrayBuffer(byteString.length);\n var intArray = new Uint8Array(buffer);\n for (var i = 0; i < byteString.length; i++) {\n intArray[parseInt(i.toString(), 10)] = byteString.charCodeAt(i);\n }\n buffers.push(buffer);\n }\n var _loop_1 = function (j) {\n var b = new Blob([buffers[parseInt(j.toString(), 10)]], { type: 'application/octet-stream' });\n if (Browser.info.name === 'msie') {\n window.navigator.msSaveOrOpenBlob(b, fileName + '.' + fileType);\n }\n else {\n var htmlElement_1 = createHtmlElement('a', { 'download': fileName + '.' + fileType });\n var urlLink = URL.createObjectURL(b);\n htmlElement_1.href = urlLink;\n var mouseEvent_1 = document.createEvent('MouseEvents');\n mouseEvent_1.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n setTimeout(function () {\n htmlElement_1.dispatchEvent(mouseEvent_1);\n }, ((j + 1) * 5));\n }\n };\n // Ensure this for safari\n // if (Browser.info.name === 'msie' && Number(Browser.info.version) < 10 || Browser.info.name === 'webkit') {\n // let browserInfo: string = Browser.info.name === 'webkit' ? 'Safari' : 'IE-9';\n // alert('Downloading option is not supported in ' + browserInfo + ', Please use the returned data');\n // return content;\n // } else {\n for (var j = 0; j < buffers.length; j++) {\n _loop_1(j);\n }\n };\n /** @private */\n PrintAndExport.prototype.getObjectsBound = function (options) {\n var nodes = this.diagram.nodes;\n var nodebounds;\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var node = nodes_1[_i];\n if (node.visible) {\n if (((options.format !== 'SVG' && !(node instanceof DiagramNativeElement) && !(node instanceof DiagramHtmlElement))\n || (options.format === 'SVG' && !(node instanceof DiagramHtmlElement)))) {\n if (!nodebounds) {\n nodebounds = node.wrapper.outerBounds;\n }\n else {\n nodebounds = nodebounds.uniteRect(node.wrapper.outerBounds);\n }\n }\n }\n }\n var connectors = this.diagram.connectors;\n for (var _a = 0, connectors_1 = connectors; _a < connectors_1.length; _a++) {\n var connector = connectors_1[_a];\n if (connector.visible) {\n if (!nodebounds) {\n nodebounds = connector.wrapper.outerBounds;\n }\n else {\n nodebounds = nodebounds.uniteRect(connector.wrapper.outerBounds);\n }\n }\n }\n return nodebounds || new Rect(0, 0, 0, 0);\n };\n /** @private */\n PrintAndExport.prototype.getDiagramBounds = function (mode, options) {\n var rect = this.getObjectsBound(options);\n var left = rect.left;\n var top = rect.top;\n var right = rect.right - rect.left;\n var bottom = rect.bottom - rect.top;\n if (mode !== 'Content') {\n if (this.diagram.pageSettings && this.diagram.pageSettings.multiplePage) {\n left = rect.left;\n top = rect.top;\n if (this.diagram.pageSettings.width) {\n left = Math.floor(left / this.diagram.pageSettings.width) * this.diagram.pageSettings.width;\n right = Math.ceil(rect.right / this.diagram.pageSettings.width) * this.diagram.pageSettings.width - left;\n }\n if (this.diagram.pageSettings.height) {\n top = Math.floor(top / this.diagram.pageSettings.height) * this.diagram.pageSettings.height;\n bottom = Math.ceil(rect.bottom / this.diagram.pageSettings.height) * this.diagram.pageSettings.height - top;\n }\n if ((rect.width === 0) && this.diagram.pageSettings.width !== null) {\n right = this.diagram.pageSettings.width;\n }\n if ((rect.height === 0) && this.diagram.pageSettings.height !== null) {\n bottom = this.diagram.pageSettings.height;\n }\n }\n else {\n if (this.diagram.pageSettings.width) {\n left = 0;\n right = this.diagram.pageSettings.width;\n }\n if (this.diagram.pageSettings.height) {\n top = 0;\n bottom = this.diagram.pageSettings.height;\n }\n }\n }\n //884801-After zooming and exporting the HTML content, the scroll Padding value is not considered\n if (this.diagram.scrollSettings.padding) {\n var scrollpadding = this.diagram.scrollSettings.padding;\n left -= scrollpadding.left;\n top -= scrollpadding.top;\n right += (scrollpadding.left + scrollpadding.right);\n bottom += (scrollpadding.top + scrollpadding.bottom);\n }\n var svgBounds = new Rect();\n svgBounds.x = left;\n svgBounds.y = top;\n svgBounds.width = right;\n svgBounds.height = bottom;\n return svgBounds;\n };\n PrintAndExport.prototype.setScaleValueforCanvas = function (options, bounds) {\n var scaleX = 'scaleX';\n var scaleY = 'scaleY';\n var scaleOffsetX = 'scaleOffsetX';\n var scaleOffsetY = 'scaleOffsetY';\n options[\"\" + scaleX] = 1;\n options[\"\" + scaleY] = 1;\n options[\"\" + scaleOffsetX] = 0;\n options[\"\" + scaleOffsetY] = 0;\n options.pageHeight = options.pageHeight || this.diagram.pageSettings.height;\n options.pageWidth = options.pageWidth || this.diagram.pageSettings.width;\n var pageOrientation = options.pageOrientation || this.diagram.pageSettings.orientation;\n if (!pageOrientation) {\n pageOrientation = 'Portrait';\n }\n if (pageOrientation === 'Portrait') {\n if (options.pageWidth > options.pageHeight) {\n var temp = options.pageHeight;\n options.pageHeight = options.pageWidth;\n options.pageWidth = temp;\n }\n }\n else {\n if (options.pageHeight > options.pageWidth) {\n var temp = options.pageWidth;\n options.pageWidth = options.pageHeight;\n options.pageHeight = temp;\n }\n }\n if (options.pageWidth && options.pageHeight && !options.multiplePage) {\n options.stretch = 'Meet';\n }\n var height = options.pageHeight || bounds.height;\n var width = options.pageWidth || bounds.width;\n if (options.stretch === 'Stretch' || options.stretch === 'Meet' || options.stretch === 'Slice') {\n options[\"\" + scaleX] = width / bounds.width;\n options[\"\" + scaleY] = height / bounds.height;\n if (options.stretch === 'Meet') {\n options[\"\" + scaleX] = options[\"\" + scaleY] = Math.min(options[\"\" + scaleX], options[\"\" + scaleY]);\n options[\"\" + scaleOffsetY] = (options.pageHeight - bounds.height * options[\"\" + scaleX]) / 2;\n options[\"\" + scaleOffsetX] = (options.pageWidth - bounds.width * options[\"\" + scaleX]) / 2;\n }\n else if (options.stretch === 'Slice') {\n options[\"\" + scaleX] = options[\"\" + scaleY] = Math.max(options[\"\" + scaleX], options[\"\" + scaleY]);\n }\n bounds.width = width;\n bounds.height = height;\n }\n bounds.x *= options[\"\" + scaleX];\n bounds.y *= options[\"\" + scaleY];\n };\n PrintAndExport.prototype.diagramAsSvg = function (options, margin) {\n var svg = this.diagram.createSvg(this.diagram.element.id + '_diagram_svg', options.bounds.width, options.bounds.height);\n document.body.appendChild(svg);\n var g = createSvgElement('g', { 'id': this.diagram.element.id + '_pageBackground' });\n var region = options && options.region ? options.region : 'Content';\n var bounds = this.getDiagramBounds(region, options);\n var left = bounds.x;\n var top = bounds.y;\n var width = bounds.width;\n var height = bounds.height;\n svg.appendChild(g);\n var attr = {\n 'x': String(left),\n 'y': String(top), 'width': String(width), 'height': String(height)\n };\n setAttributeSvg(g, attr);\n this.setTransform(g, options.bounds, margin);\n var gradient = document.getElementById(this.diagram.element.id + 'gradient_pattern');\n if (gradient) {\n // 914031: Export function breaks gradient background of nodes in the diagram\n svg.appendChild(gradient.cloneNode(true));\n }\n attr = {\n 'x': String(left),\n 'y': String(top), 'width': String(width + margin.left + margin.right), 'height': String(height + margin.top + margin.bottom)\n };\n var backimage = document.getElementById(this.diagram.element.id + '_backgroundImageLayer').cloneNode(true);\n setAttributeSvg(backimage, attr);\n svg.appendChild(backimage);\n this.setTransform(backimage, bounds, margin);\n var backRect = document.getElementById(this.diagram.element.id + '_backgroundLayerrect').cloneNode(true);\n setAttributeSvg(backRect, attr);\n svg.appendChild(backRect);\n this.setTransform(backRect, bounds, margin);\n if (this.diagram.mode === 'SVG') {\n var element = void 0;\n var i = void 0;\n var diagramLayerSVG = getDiagramLayerSvg(this.diagram.element.id);\n svg.appendChild(diagramLayerSVG.getElementById(this.diagram.diagramLayer.id).cloneNode(true));\n for (i = 0; i < svg.childNodes.length; i++) {\n element = svg.childNodes[parseInt(i.toString(), 10)];\n if (element.id === this.diagram.element.id + '_diagramLayer') {\n this.setTransform(element, bounds, margin);\n }\n }\n }\n else {\n g = createSvgElement('g', { 'id': this.diagram.element.id + '_diagramLayer' });\n svg.appendChild(g);\n this.setTransform(g, options.bounds, margin);\n //renderLabels\n var renderer = new DiagramRenderer('', null, true);\n var htmlLayer = getHTMLLayer(this.diagram.element.id);\n this.diagram.renderDiagramElements(svg, renderer, htmlLayer, false);\n }\n document.body.removeChild(svg);\n return svg;\n };\n PrintAndExport.prototype.setTransform = function (element, bounds, margin) {\n element.setAttribute('transform', 'translate(' + (-bounds.x + margin.left) + ', ' +\n (-bounds.y + margin.top) + ')');\n };\n PrintAndExport.prototype.diagramAsCanvas = function (options, customBounds) {\n var scaleX = 'scaleX';\n var scaleY = 'scaleY';\n var scaleOffsetX = 'scaleOffsetX';\n var scaleOffsetY = 'scaleOffsetY';\n var region = options.bounds;\n var margin = options.margin;\n var mode = options.region;\n var pageBounds = this.getDiagramBounds(mode, options);\n var bgColor = this.diagram.pageSettings.background.color;\n var canvas = CanvasRenderer.createCanvas(this.diagram.element.id + '_diagram', options.bounds.width, options.bounds.height);\n //canvas.setAttribute('style', 'position:absolute;top:135px;left:160px;');\n var context = canvas.getContext('2d');\n context.translate(-region.x, -region.y);\n context.save();\n context.fillStyle = (this.diagram.pageSettings.background.color === 'transparent') ? 'white' :\n this.diagram.pageSettings.background.color;\n region = mode === 'Content' ? pageBounds : region;\n context.fillRect(region.x, region.y, region.width, region.height);\n var bgImg = this.diagram.pageSettings.background;\n if (bgImg && bgImg.source) {\n pageBounds = this.getDiagramBounds(mode, options);\n var image = new Image();\n image.src = bgImg.source;\n var proportionX = pageBounds.width / image.width;\n var proportionY = pageBounds.height / image.height;\n var x = pageBounds.x;\n var y = pageBounds.y;\n var width = pageBounds.width;\n var height = pageBounds.height;\n var exportable = this.isImageExportable(bgImg);\n if (bgImg.scale !== 'None' && bgImg.align !== 'None') {\n var proportion = bgImg.scale === 'Meet' ? Math.min(proportionX, proportionY) : Math.max(proportionX, proportionY);\n width = proportion * image.width;\n height = proportion * image.height;\n if (bgImg.align.indexOf('xmid') > -1) {\n x += (pageBounds.width - width) / 2;\n }\n else if (bgImg.align.indexOf('xmax') > -1) {\n x = x + pageBounds.width - width;\n }\n if (bgImg.align.indexOf('ymid') > -1) {\n y += (pageBounds.height - height) / 2;\n }\n else if (bgImg.align.indexOf('ymax') > -1) {\n y = y + pageBounds.height - height;\n }\n if (this.diagram.pageSettings.background.color === 'none' || this.diagram.pageSettings.background.color === 'transparent') {\n context.fillStyle = 'white';\n context.fillRect(pageBounds.x * options[\"\" + scaleX], pageBounds.y * options[\"\" + scaleY], pageBounds.width * options[\"\" + scaleX], pageBounds.height * options[\"\" + scaleY]);\n }\n if (exportable) {\n context.drawImage(image, x, y, proportion * image.width, proportion * image.height);\n }\n }\n else if (exportable) {\n context.drawImage(image, x, y, pageBounds.width, pageBounds.height);\n }\n }\n else {\n context.fillStyle = bgColor === 'transparent' ? 'white' : bgColor;\n context.fillRect((pageBounds.x * options[\"\" + scaleX]) - margin.left, (pageBounds.y * options[\"\" + scaleY]) - margin.top, (pageBounds.width * options[\"\" + scaleX]) + margin.left + margin.right, (options[\"\" + scaleY] * pageBounds.height) + margin.top + margin.bottom);\n }\n var brColor = this.diagram.pageSettings.background.color;\n var brWidth = this.diagram.pageSettings.width;\n if (brWidth) {\n context.strokeStyle = brColor === 'none' ? 'transparent' : brColor;\n context.lineWidth = brWidth;\n context.strokeRect(pageBounds.x * options[\"\" + scaleX], pageBounds.y * options[\"\" + scaleY], pageBounds.width * options[\"\" + scaleX], pageBounds.height * options[\"\" + scaleY]);\n }\n context.restore();\n var htmlLayer = getHTMLLayer(this.diagram.element.id);\n var renderer = new DiagramRenderer('', null, false);\n this.updateObjectValue(options[\"\" + scaleX], options[\"\" + scaleOffsetX], options[\"\" + scaleOffsetY], true);\n this.diagram.renderDiagramElements(canvas, renderer, htmlLayer, false, true);\n this.updateObjectValue(options[\"\" + scaleX], options[\"\" + scaleOffsetX], options[\"\" + scaleOffsetY], false);\n return canvas;\n };\n PrintAndExport.prototype.updateWrapper = function (canvas, value, scaleOffsetX, scaleOffsetY, isExport) {\n if (canvas && canvas.length > 0) {\n for (var j = 0; j < canvas.length; j++) {\n if (canvas[parseInt(j.toString(), 10)].children) {\n this.updateWrapper(canvas[parseInt(j.toString(), 10)].children, value, scaleOffsetX, scaleOffsetY, isExport);\n }\n canvas[parseInt(j.toString(), 10)].exportScaleValue.x = value;\n canvas[parseInt(j.toString(), 10)].exportScaleValue.y = value;\n canvas[parseInt(j.toString(), 10)].exportScaleOffset.x = scaleOffsetX;\n canvas[parseInt(j.toString(), 10)].exportScaleOffset.y = scaleOffsetY;\n canvas[parseInt(j.toString(), 10)].isExport = isExport;\n }\n }\n };\n PrintAndExport.prototype.scaleGradientValue = function (node, scaleValue, isExport) {\n if (node.style.gradient.stops.length > 0) {\n var gradients = node.style.gradient;\n if (node.style.gradient instanceof LinearGradient) {\n gradients.x1 = isExport ? gradients.x1 * scaleValue : gradients.x1 / scaleValue;\n gradients.y1 = isExport ? gradients.y1 * scaleValue : gradients.y1 / scaleValue;\n gradients.x2 = isExport ? gradients.x2 * scaleValue : gradients.x2 / scaleValue;\n gradients.y2 = isExport ? gradients.y2 * scaleValue : gradients.y2 / scaleValue;\n }\n else {\n gradients.fx = isExport ? gradients.fx * scaleValue : gradients.fx / scaleValue;\n gradients.fy = isExport ? gradients.fy * scaleValue : gradients.fy / scaleValue;\n gradients.cx = isExport ? gradients.cx * scaleValue : gradients.cx / scaleValue;\n gradients.cy = isExport ? gradients.cy * scaleValue : gradients.cy / scaleValue;\n gradients.r = isExport ? gradients.r * scaleValue : gradients.r / scaleValue;\n }\n }\n };\n PrintAndExport.prototype.updateObjectValue = function (value, scaleOffsetX, scaleOffsetY, isExport) {\n var wrapper;\n for (var i = 0; i < this.diagram.nodes.length; i++) {\n wrapper = this.diagram.nodes[parseInt(i.toString(), 10)].wrapper;\n this.scaleGradientValue(this.diagram.nodes[parseInt(i.toString(), 10)], value, isExport);\n this.updateWrapper(wrapper.children, value, scaleOffsetX, scaleOffsetY, isExport);\n wrapper.exportScaleValue.x = value;\n wrapper.exportScaleValue.y = value;\n wrapper.exportScaleOffset.x = scaleOffsetX;\n wrapper.exportScaleOffset.y = scaleOffsetY;\n wrapper.isExport = isExport;\n }\n for (var j = 0; j < this.diagram.connectors.length; j++) {\n wrapper = this.diagram.connectors[parseInt(j.toString(), 10)].wrapper;\n for (var k = 0; k < wrapper.children.length; k++) {\n wrapper.children[parseInt(k.toString(), 10)].isExport = isExport;\n if (isExport) {\n wrapper.children[parseInt(k.toString(), 10)].exportScaleValue.x = value;\n wrapper.children[parseInt(k.toString(), 10)].exportScaleValue.y = value;\n wrapper.children[parseInt(k.toString(), 10)].exportScaleOffset.x = scaleOffsetX;\n wrapper.children[parseInt(k.toString(), 10)].exportScaleOffset.y = scaleOffsetY;\n }\n }\n }\n };\n PrintAndExport.prototype.isImageExportable = function (backgroundImage) {\n var state = true;\n var content;\n var canvas;\n if (backgroundImage.source) {\n try {\n canvas = CanvasRenderer.createCanvas(this.diagram.element.id + 'temp_canvas', 100, 100);\n var ctx = canvas.getContext('2d');\n ctx.save();\n var image = new Image();\n image.src = backgroundImage.source;\n ctx.drawImage(image, 0, 0, 100, 100);\n ctx.restore();\n content = canvas.toDataURL();\n }\n catch (e) {\n state = false;\n }\n }\n return state;\n };\n PrintAndExport.prototype.getPrintCanvasStyle = function (img, options) {\n var width = 0;\n var height = 0;\n var size = new Size();\n width = img.width;\n height = img.height;\n if (options.pageHeight || options.pageWidth) {\n height = options.pageHeight ? options.pageHeight : height;\n width = options.pageWidth ? options.pageWidth : width;\n }\n if (options.pageOrientation) {\n if ((options.pageOrientation === 'Landscape' && height > width) || options.pageOrientation === 'Portrait' && width > height) {\n var temp = width;\n width = height;\n height = temp;\n }\n }\n size.height = height;\n size.width = width;\n return size;\n };\n PrintAndExport.prototype.getMultipleImage = function (img, options, isExport) {\n var imageArray = [];\n var div = createHtmlElement('div', {});\n var pageSize = this.getPrintCanvasStyle(img, options);\n //let pageWidth: number;\n //let pageHeight: number;\n var margin = options.margin;\n var mLeft = margin.left;\n var mTop = margin.top;\n var mRight = margin.right;\n var mBottom = margin.bottom;\n var x = 0;\n var y = 0;\n var pageWidth = pageSize.width + x;\n var pageHeight = pageSize.height + y;\n var drawnX = 0;\n var drawnY = 0;\n if (options && options.multiplePage) {\n div.style.height = 'auto';\n div.style.width = 'auto';\n var imgHeight = img.height;\n var imgWidth = img.width;\n //if (img) {\n var i = 0;\n var j = 0;\n var url = void 0;\n var clipWidth = 0;\n var clipHeight = 0;\n var ctx = void 0;\n var canvas = void 0;\n do {\n do {\n clipWidth = pageSize.width;\n clipHeight = pageSize.height;\n if ((drawnX + pageSize.width) >= imgWidth) {\n clipWidth = (imgWidth - drawnX);\n }\n if ((drawnY + pageSize.height) >= imgHeight) {\n clipHeight = (imgHeight - drawnY);\n }\n canvas = CanvasRenderer.createCanvas(this.diagram.element.id + '_multiplePrint', pageSize.width, pageSize.height);\n ctx = canvas.getContext('2d');\n ctx.drawImage(img, x + drawnX + mLeft, y + drawnY + mTop, clipWidth - mRight - mLeft, clipHeight - mBottom - mTop, 0 + mLeft, 0 + mTop, clipWidth - mRight - mLeft, clipHeight - mBottom - mTop);\n if ((drawnX + pageSize.width) >= imgWidth) {\n drawnX -= (drawnX - imgWidth);\n }\n url = canvas.toDataURL();\n ctx.restore();\n drawnX += pageWidth;\n if (isExport) {\n imageArray.push(url);\n }\n else {\n this.printImage(div, url, i + '' + j, pageWidth + 'px;', pageHeight + 'px;');\n }\n i++;\n } while (drawnX < imgWidth);\n j++;\n i = x = drawnX = 0;\n if ((drawnY + pageSize.height) >= imgHeight) {\n drawnY -= (drawnY - imgHeight);\n }\n drawnY += pageHeight;\n } while (drawnY < imgHeight);\n //}\n }\n else {\n var x_1 = 0;\n var y_1 = 0;\n var pageSize_1 = this.getPrintCanvasStyle(img, options);\n ///let pageWidth: number; let pageHeight: number;\n var pageWidth_1 = pageSize_1.width;\n var pageHeight_1 = pageSize_1.height;\n //let ctx: CanvasRenderingContext2D;\n //let canvas: HTMLCanvasElement;\n //let url: string;\n var canvas = CanvasRenderer.createCanvas(this.diagram.element.id + '_diagram', pageWidth_1, pageHeight_1);\n var ctx = canvas.getContext('2d');\n ctx.drawImage(img, x_1 + mLeft, y_1 + mTop, img.width - (mRight + mLeft), img.height - (mTop + mBottom), 0 + mLeft, 0 + mTop, pageWidth_1 - (mRight + mLeft), pageHeight_1 - (mTop + mBottom));\n var url = canvas.toDataURL();\n ctx.restore();\n if (isExport) {\n imageArray.push(url);\n }\n else {\n this.printImage(div, url, 0);\n }\n }\n if (isExport) {\n return imageArray;\n }\n else {\n return div;\n }\n };\n PrintAndExport.prototype.printImage = function (div, url, i, pageWidth, pageHeight) {\n var attr = { 'class': 'e-diagram-print-page', 'style': 'width:' + pageWidth + 'height:' + pageHeight };\n var img = createHtmlElement('img', attr);\n var innerDiv = createHtmlElement('div', attr);\n attr = { 'id': this.diagram.element.id + '_multiplePrint_img' + i, 'style': 'float:left', 'src': url };\n setAttributeHtml(img, attr);\n innerDiv.appendChild(img);\n div.appendChild(innerDiv);\n };\n /**\n * To print the image\n *\n * @private\n */\n PrintAndExport.prototype.print = function (options) {\n options.mode = 'Data';\n var url = this.exportDiagram(options);\n this.printImages(url, options);\n };\n PrintAndExport.prototype.printImages = function (url, options) {\n var _this = this;\n var attr = {\n 'id': this.diagram.element.id + '_printImage',\n 'src': url\n };\n options.margin = { top: 0, bottom: 0, right: 0, left: 0 };\n var img = createHtmlElement('img', attr);\n img.onload = function () {\n var div = _this.getMultipleImage(img, options);\n // specify window parameters\n var printWind = window.open('');\n _this.printWindow = printWind;\n if (printWind != null) {\n if ((div instanceof HTMLElement)) {\n printWind.document.write('' + div.innerHTML + ' ');\n printWind.document.close();\n }\n }\n };\n };\n PrintAndExport.prototype.getContent = function (styleSheets) {\n var snapConstraints = this.diagram.snapSettings.constraints;\n this.diagram.snapSettings.constraints = (this.diagram.snapSettings.constraints & ~SnapConstraints.ShowLines);\n this.diagram.dataBind();\n this.diagram.clearSelection();\n styleSheets = styleSheets || document.styleSheets;\n var styleSheetRef = '';\n for (var i = 0; i < styleSheets.length; i++) {\n if (styleSheets[parseInt(i.toString(), 10)].href || typeof styleSheets[parseInt(i.toString(), 10)] === 'string') {\n styleSheetRef += '';\n }\n }\n var htmlData = document.getElementById(this.diagram.element.id + 'content').innerHTML;\n var marginStyle = 'margin-left:' + 0 + 'px;margin-top:' + 0 + 'px;margin-right:'\n + 0 + 'px;margin-bottom:' + 0 + 'px;';\n htmlData = styleSheetRef + '} rankList - provide the rankList value.\n * @private\n */\n FlowchartModel.prototype.visit = function (dfsRoots, trackAncestors, rankList) {\n if (rankList === void 0) { rankList = null; }\n if (dfsRoots) {\n for (var i = 0; i < dfsRoots.length; i++) {\n var internalNode = dfsRoots[parseInt(i.toString(), 10)];\n if (internalNode) {\n var seenNodes = new Map();\n if (trackAncestors) {\n internalNode.hashCode = [this.dfsCount, i];\n this.extendedDfs(null, internalNode, null, seenNodes, i);\n }\n else {\n this.depthFirstSearch(null, internalNode, null, seenNodes, rankList);\n }\n }\n }\n this.dfsCount++;\n }\n };\n FlowchartModel.prototype.extendedDfs = function (parent, root, connectingEdge, seen, childHash) {\n var _this = this;\n if (parent) {\n if (!root.hashCode || root.hashCode[0] !== parent.hashCode[0]) {\n root.hashCode = parent.hashCode.concat([childHash]);\n }\n }\n var rootId = root.id;\n if (!seen.has(rootId)) {\n seen.set(rootId, root);\n this.removeConnectionEdge(parent, root, connectingEdge);\n var outgoingEdges = root.internalOutEdges.slice();\n outgoingEdges.forEach(function (internalEdge, i) {\n var targetNode = internalEdge.target;\n _this.extendedDfs(root, targetNode, internalEdge, seen, i);\n });\n }\n else {\n this.removeConnectionEdge(parent, root, connectingEdge);\n }\n };\n FlowchartModel.prototype.removeConnectionEdge = function (parent, node, connectingEdge) {\n if (parent && this.isAncestor(node, parent)) {\n this.invert(connectingEdge);\n this.remove(connectingEdge, parent.internalOutEdges);\n parent.internalInEdges.push(connectingEdge);\n this.remove(connectingEdge, node.internalInEdges);\n node.internalOutEdges.push(connectingEdge);\n }\n };\n FlowchartModel.prototype.invert = function (edge) {\n var temp = edge.source;\n edge.source = edge.target;\n edge.target = temp;\n edge.isReversed = !edge.isReversed;\n };\n FlowchartModel.prototype.remove = function (edge, edges) {\n var index = edges.indexOf(edge);\n edges.splice(index, 1);\n };\n FlowchartModel.prototype.isAncestor = function (node, otherNode) {\n // Firstly, the hash code of this node needs to be shorter than the other node\n if (otherNode !== null && node.hashCode !== null && otherNode.hashCode !== null\n && node.hashCode.length < otherNode.hashCode.length) {\n if (node.hashCode === otherNode.hashCode) {\n return true;\n }\n for (var i = 0; i < node.hashCode.length; i++) {\n if (node.hashCode[parseInt(i.toString(), 10)] !== otherNode.hashCode[parseInt(i.toString(), 10)]) {\n return false;\n }\n }\n return true;\n }\n return false;\n };\n FlowchartModel.prototype.depthFirstSearch = function (parent, root, connectingEdge, seen, rankList) {\n var _this = this;\n var rootId = root.id;\n if (!seen.has(rootId)) {\n seen.set(rootId, root);\n this.updateMinMaxRank(parent, root, connectingEdge, 0, rankList);\n var outgoingEdges = root.internalOutEdges.slice();\n outgoingEdges.forEach(function (internalEdge) {\n var targetNode = internalEdge.target;\n _this.depthFirstSearch(root, targetNode, internalEdge, seen, rankList);\n });\n }\n else {\n this.updateMinMaxRank(parent, root, connectingEdge, 1, rankList);\n }\n };\n FlowchartModel.prototype.updateMinMaxRank = function (parent, node, edge, seen, rankList) {\n var rankListArray = Array.from(rankList.values());\n if (node.maxRank == null && node.maxRank !== 0) {\n node.maxRank = -1;\n }\n if (node.minRank == null && node.minRank !== 0) {\n node.minRank = -1;\n }\n if (seen === 0 && node.maxRank < 0 && node.minRank < 0) {\n if (node.tempRank >= 0) {\n var rank = node.tempRank;\n rankListArray[parseInt(rank.toString(), 10)].push(node);\n node.maxRank = rank;\n node.minRank = rank;\n node.tempRank = rankListArray[node.maxRank].length - 1;\n }\n }\n if (parent !== null && edge !== null) {\n var parentToCellRankDifference = parent.maxRank - node.maxRank;\n if (parentToCellRankDifference > 1) {\n edge.maxRank = parent.maxRank;\n edge.minRank = node.maxRank;\n for (var i = edge.minRank + 1; i < edge.maxRank; i++) {\n rankListArray[parseInt(i.toString(), 10)].push(edge);\n // CheckMe\n // this.layout.setTempVariable(edge, i, rankList[i].length - 1);\n }\n }\n else if (edge.isReversed) {\n edge.maxRank = parent.maxRank;\n edge.minRank = node.maxRank;\n for (var i = edge.minRank; i <= edge.maxRank; i++) {\n rankListArray[parseInt(i.toString(), 10)].push(edge);\n }\n }\n }\n };\n return FlowchartModel;\n}());\n\nvar MatrixModel$1 = /** @__PURE__ @class */ (function () {\n function MatrixModel(model) {\n this.flowchartModel = model;\n this.matrix = [];\n this.rowOffset = [];\n this.rowMaxDimension = [];\n this.siblingModel = null;\n }\n /**\n * @private\n * @returns {void} - Arranges the elements in the flowchart layout\n */\n MatrixModel.prototype.arrangeElements = function () {\n if (this.flowchartModel === null) {\n return;\n }\n var layoutSettings = this.flowchartModel.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight';\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n this.groupLayoutCells();\n this.createMatrixCells();\n for (var _i = 0, _a = this.matrix; _i < _a.length; _i++) {\n var matrixRow = _a[_i];\n for (var i = 1; i < matrixRow.length; i++) {\n var cell = matrixRow[parseInt(i.toString(), 10)];\n var prevCell = matrixRow[i - 1];\n cell.offset += prevCell.offset + (prevCell.size / 2) + spacing + (cell.size / 2);\n }\n }\n for (var _b = 0, _c = this.matrix[0]; _b < _c.length; _b++) {\n var root = _c[_b];\n this.arrangeMatrix(root, null);\n }\n for (var _d = 0, _e = this.matrix; _d < _e.length; _d++) {\n var row = _e[_d];\n for (var i = 0; i < row.length; i++) {\n var cell = row[parseInt(i.toString(), 10)];\n if (cell.visitedParents.length > 1) {\n var firstParent = cell.visitedParents[0];\n var lastParent = cell.visitedParents[cell.visitedParents.length - 1];\n var firstVertexParent = this.findParentVertexCellGroup(firstParent);\n var lastVertexParent = this.findParentVertexCellGroup(lastParent);\n if (firstParent !== firstVertexParent && firstVertexParent.offset < firstParent.offset) {\n firstParent = firstVertexParent;\n }\n if (lastParent !== lastVertexParent && lastVertexParent.offset > lastParent.offset) {\n lastParent = firstVertexParent;\n }\n var newOffset = (firstParent.offset + lastParent.offset) / 2;\n var interVertex = cell.cells.find(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; });\n if (this.flowchartModel.layout.yesBranchDirection === 'SameAsFlow') {\n var tempVisitedParents = cell.visitedParents.slice();\n if (interVertex && interVertex.cell.isYesChild) {\n for (var _f = 0, tempVisitedParents_1 = tempVisitedParents; _f < tempVisitedParents_1.length; _f++) {\n var tempParent = tempVisitedParents_1[_f];\n var tempParentVertex = tempParent.cells.find(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; });\n if (!tempParentVertex) {\n newOffset = tempParent.offset;\n break;\n }\n }\n }\n else {\n if (this.flowchartModel.layout.noBranchDirection === 'LeftInFlow') {\n tempVisitedParents.reverse();\n }\n for (var _g = 0, tempVisitedParents_2 = tempVisitedParents; _g < tempVisitedParents_2.length; _g++) {\n var tempParent = tempVisitedParents_2[_g];\n var tempParentVertex = tempParent.cells.find(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; });\n if (tempParentVertex) {\n if (tempParentVertex.cell.isYesChild) {\n newOffset = tempParent.offset;\n break;\n }\n }\n else {\n var tempSuperParent = this.findParentVertexCellGroup(tempParent);\n if (tempSuperParent) {\n var superParentVertex = tempSuperParent.cells.find(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; });\n if (superParentVertex && superParentVertex.cell.isYesChild) {\n newOffset = tempParent.offset;\n break;\n }\n }\n }\n }\n }\n }\n else if (this.flowchartModel.layout.noBranchDirection === 'SameAsFlow') {\n var tempVisitedParents = cell.visitedParents.slice();\n if (interVertex && interVertex.cell.isNoChild) {\n for (var _h = 0, tempVisitedParents_3 = tempVisitedParents; _h < tempVisitedParents_3.length; _h++) {\n var tempParent = tempVisitedParents_3[_h];\n var tempParentVertex = tempParent.cells.find(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; });\n if (!tempParentVertex) {\n newOffset = tempParent.offset;\n break;\n }\n }\n }\n else {\n if (this.flowchartModel.layout.yesBranchDirection === 'LeftInFlow') {\n tempVisitedParents.reverse();\n }\n for (var _j = 0, tempVisitedParents_4 = tempVisitedParents; _j < tempVisitedParents_4.length; _j++) {\n var tempParent = tempVisitedParents_4[_j];\n var tempParentVertex = tempParent.cells.find(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; });\n if (tempParentVertex) {\n if (tempParentVertex.cell.isNoChild) {\n newOffset = tempParent.offset;\n break;\n }\n }\n else {\n var tempSuperParent = this.findParentVertexCellGroup(tempParent);\n if (tempSuperParent) {\n var superParentVertex = tempSuperParent.cells.find(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; });\n if (superParentVertex && superParentVertex.cell.isNoChild) {\n newOffset = tempParent.offset;\n break;\n }\n }\n }\n }\n }\n }\n var availOffsetMin = cell.initialOffset;\n var availOffsetMax = cell.offset;\n if (availOffsetMax !== availOffsetMin) {\n if (newOffset >= availOffsetMin && newOffset <= availOffsetMax) {\n this.translateMatrixCells(newOffset - cell.offset, cell);\n }\n else if (newOffset < availOffsetMin) {\n this.translateMatrixCells(availOffsetMin - cell.offset, cell);\n }\n }\n }\n }\n }\n this.setXYForMatrixCell();\n };\n MatrixModel.prototype.arrangeMatrix = function (cell, parent) {\n var layoutSettings = this.flowchartModel.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight';\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n var matrixRow = this.matrix[cell.level];\n var matrixIndex = matrixRow.indexOf(cell);\n if (cell.visitedParents.length) {\n if (cell.visitedParents.length === 1) {\n cell.initialOffset = cell.offset;\n }\n if (matrixIndex + 1 < matrixRow.length) {\n var nextCell = matrixRow[matrixIndex + 1];\n if (nextCell.visitedParents.length) {\n if (cell.visitedParents.indexOf(parent) === -1) {\n if (cell.level !== parent.level) {\n cell.visitedParents.push(parent);\n parent.ignoredChildren.push(cell);\n }\n return;\n }\n }\n }\n }\n if (!cell.children.length) {\n var validOffset = cell.offset;\n if (matrixIndex > 0) {\n var prevCell = matrixRow[matrixIndex - 1];\n validOffset = prevCell.offset + (prevCell.size / 2) + spacing + (cell.size / 2);\n }\n this.shiftMatrixCells(validOffset - cell.offset, cell);\n }\n else {\n for (var _i = 0, _a = cell.children; _i < _a.length; _i++) {\n var matrixCellChild = _a[_i];\n if (cell.visitedChildren.indexOf(matrixCellChild)) {\n this.arrangeMatrix(matrixCellChild, cell);\n if (cell.level !== matrixCellChild.level) {\n cell.visitedChildren.push(matrixCellChild);\n }\n else {\n cell.loopChildren.push(matrixCellChild);\n }\n }\n }\n if (cell.visitedChildren.length) {\n var children = cell.visitedChildren.slice();\n var _loop_1 = function (cellIgnoredChild) {\n children = children.filter(function (child) { return child !== cellIgnoredChild; });\n };\n for (var _b = 0, _c = cell.ignoredChildren; _b < _c.length; _b++) {\n var cellIgnoredChild = _c[_b];\n _loop_1(cellIgnoredChild);\n }\n if (children.length) {\n var firstChild = children[0];\n var lastChild = children[children.length - 1];\n var x1 = firstChild.offset;\n var x2 = lastChild.offset;\n var newOffset = (x1 + x2) / 2;\n if (cell.cells.length) {\n var interVertex = cell.cells.filter(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; })[0];\n var firstChildVertex = firstChild.cells.filter(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; })[0];\n var lastChildVertex = lastChild.cells.filter(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; })[0];\n if (interVertex && interVertex.cell.isDecisionNode) {\n if (this.flowchartModel.layout.yesBranchDirection === 'SameAsFlow') {\n if (firstChildVertex) {\n newOffset = firstChildVertex.cell.isYesChild ? firstChild.offset : lastChild.offset;\n }\n else if (lastChildVertex) {\n newOffset = lastChildVertex.cell.isYesChild ? lastChild.offset : firstChild.offset;\n }\n }\n else if (this.flowchartModel.layout.noBranchDirection === 'SameAsFlow') {\n if (firstChildVertex) {\n newOffset = firstChildVertex.cell.isNoChild ? firstChild.offset : lastChild.offset;\n }\n else if (lastChildVertex) {\n newOffset = lastChildVertex.cell.isNoChild ? lastChild.offset : firstChild.offset;\n }\n }\n }\n }\n if (newOffset < cell.offset) {\n this.shiftMatrixCells(cell.offset - newOffset, firstChild, true, cell);\n }\n else if (newOffset > cell.offset) {\n this.shiftMatrixCells(newOffset - cell.offset, cell);\n }\n }\n }\n }\n if (cell.visitedParents.indexOf(parent) === -1) {\n if (parent !== null && cell.level !== parent.level) {\n cell.visitedParents.push(parent);\n }\n }\n };\n MatrixModel.prototype.shiftMatrixCells = function (value, startingCell, shiftChildren, parentCell) {\n if (shiftChildren === void 0) { shiftChildren = false; }\n if (parentCell === void 0) { parentCell = null; }\n if (value !== 0) {\n var matrixRow = this.matrix[startingCell.level];\n var index = matrixRow.indexOf(startingCell);\n for (var i = index; i < matrixRow.length; i++) {\n matrixRow[parseInt(i.toString(), 10)].offset += value;\n }\n if (shiftChildren) {\n if (startingCell.visitedChildren.length) {\n this.shiftMatrixCells(value, startingCell.visitedChildren[0], true, startingCell);\n }\n else {\n var i = 1;\n var nextSiblingWithChild = null;\n while (index + i < matrixRow.length) {\n var nextCell = matrixRow[index + i];\n if (parentCell !== null && nextCell.visitedParents.indexOf(parentCell) !== -1) {\n if (nextCell.visitedChildren.length) {\n nextSiblingWithChild = nextCell;\n }\n else {\n i++;\n continue;\n }\n }\n break;\n }\n if (nextSiblingWithChild !== null) {\n this.shiftMatrixCells(value, nextSiblingWithChild.visitedChildren[0], true, nextSiblingWithChild);\n }\n }\n }\n }\n };\n MatrixModel.prototype.findParentVertexCellGroup = function (cell) {\n if ('internalInEdges' in cell.cells[0] && 'internalOutEdges' in cell.cells[0]) {\n return cell;\n }\n if (cell.parents.length) {\n return this.findParentVertexCellGroup(cell.parents[0]);\n }\n return cell;\n };\n MatrixModel.prototype.translateMatrixCells = function (value, cell) {\n if (value !== 0) {\n cell.offset += value;\n if (cell.visitedChildren.length) {\n for (var _i = 0, _a = cell.visitedChildren; _i < _a.length; _i++) {\n var child = _a[_i];\n this.translateMatrixCells(value, child);\n }\n for (var _b = 0, _c = cell.loopChildren; _b < _c.length; _b++) {\n var loopChild = _c[_b];\n this.translateMatrixCells(value, loopChild);\n }\n }\n }\n };\n MatrixModel.prototype.getObjectValues = function (obj) {\n var values = [];\n for (var key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n values.push(obj[\"\" + key]);\n }\n }\n return values;\n };\n MatrixModel.prototype.setXYForMatrixCell = function () {\n var layoutSettings = this.flowchartModel.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight';\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n var siblingSize = 0;\n if (this.siblingModel) {\n var rowMaxValues = this.getObjectValues(this.rowMaxDimension);\n var maxRowValue = Math.max.apply(Math, rowMaxValues);\n siblingSize = this.siblingModel.getSiblingDimension(maxRowValue);\n }\n for (var _i = 0, _a = this.getObjectValues(this.matrix); _i < _a.length; _i++) {\n var matrixRow1 = _a[_i];\n for (var _b = 0, matrixRow1_1 = matrixRow1; _b < matrixRow1_1.length; _b++) {\n var matrixCell = matrixRow1_1[_b];\n var start = matrixCell.offset - (matrixCell.size / 2);\n if (siblingSize !== 0) {\n start += siblingSize + spacing;\n }\n for (var _c = 0, _d = matrixCell.cells; _c < _d.length; _c++) {\n var cell = _d[_c];\n if ('internalInEdges' in cell && 'internalOutEdges' in cell) {\n var internalVertex = cell;\n var width = internalVertex.cell.geometry.width;\n var height = internalVertex.cell.geometry.height;\n if (isHorizontal) {\n internalVertex.cell.geometry = new Rect(this.rowOffset[matrixCell.level] - (width / 2), start, width, height);\n }\n else {\n internalVertex.cell.geometry = new Rect(start, this.rowOffset[matrixCell.level] - (height / 2), width, height);\n }\n start += (isHorizontal ? height : width) + spacing;\n }\n else if ('edges' in cell) {\n var internalEdges = cell;\n var isContainSiblingVertex = internalEdges.isReversed;\n if (!isContainSiblingVertex) {\n var parent_1 = matrixCell.visitedParents[0];\n if (parent_1) {\n for (var _e = 0, _f = parent_1.visitedChildren; _e < _f.length; _e++) {\n var child = _f[_e];\n if (child.cells.some(function (c) { return 'internalInEdges' in c && 'internalOutEdges' in c; })) {\n isContainSiblingVertex = true;\n break;\n }\n }\n }\n }\n var lineWidth = 1;\n var edgeSpacing = 5;\n for (var _g = 0, _h = internalEdges.edges; _g < _h.length; _g++) {\n var internalConnector = _h[_g];\n if (isContainSiblingVertex) {\n var pt = { x: start + (lineWidth / 2.0), y: this.rowOffset[matrixCell.level] };\n if (isHorizontal) {\n pt = { x: this.rowOffset[matrixCell.level], y: start + (lineWidth / 2.0) };\n }\n if (this.flowchartModel.layout.edgesMapper.has(internalConnector)) {\n this.flowchartModel.layout.edgesMapper.get(internalConnector).push(pt);\n this.flowchartModel.layout.loopedgesMapper.set(internalConnector, internalEdges.isReversed);\n }\n }\n start += lineWidth + edgeSpacing;\n }\n start += spacing;\n }\n }\n }\n }\n };\n MatrixModel.prototype.getSiblingDimension = function (maxHeight) {\n var layoutSettings = this.flowchartModel.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight';\n var spacing = isHorizontal ? layoutSettings.horizontalSpacing : layoutSettings.verticalSpacing;\n var commonRowIndex = 0;\n for (var key in this.rowMaxDimension) {\n if (Object.prototype.hasOwnProperty.call(this.rowMaxDimension, key)) {\n var value = this.rowMaxDimension[\"\" + key];\n if (value < maxHeight) {\n commonRowIndex = parseInt(key, 10);\n }\n else {\n break;\n }\n }\n }\n if (this.rowMaxDimension[parseInt(commonRowIndex.toString(), 10)] + spacing <= maxHeight\n && this.rowMaxDimension[commonRowIndex + 1]) {\n commonRowIndex++;\n }\n var commonRows = [];\n for (var key in this.matrix) {\n if (Object.prototype.hasOwnProperty.call(this.matrix, key) && parseInt(key, 10) <= commonRowIndex) {\n commonRows[\"\" + key] = this.matrix[\"\" + key];\n }\n }\n var maxSize = 0;\n for (var key in commonRows) {\n if (Object.prototype.hasOwnProperty.call(commonRows, key)) {\n var matrixRow1 = commonRows[\"\" + key];\n if (matrixRow1.length) {\n var firstCell = matrixRow1[0].cells[0];\n var rowStart = 0;\n if (firstCell && 'cell' in firstCell) {\n var geometry = firstCell.cell.geometry;\n rowStart = isHorizontal ? geometry.y : geometry.x;\n }\n else if (firstCell && 'edges' in firstCell) {\n var internalConnector = firstCell.edges[firstCell.edges.length - 1];\n var edgePts = this.flowchartModel.layout.edgesMapper.get(internalConnector);\n if (edgePts.length) {\n rowStart = isHorizontal ? edgePts[0].y : edgePts[0].x;\n }\n }\n var rowEnd = 0;\n var lastCell = matrixRow1[matrixRow1.length - 1]\n .cells[matrixRow1[matrixRow1.length - 1].cells.length - 1];\n if (lastCell && 'cell' in lastCell) {\n var geometry = lastCell.cell.geometry;\n rowEnd = isHorizontal ? geometry.y + geometry.height : geometry.x + geometry.width;\n }\n else if (lastCell && 'edges' in lastCell) {\n var internalConnector = lastCell.edges[lastCell.edges.length - 1];\n var edgePts = this.flowchartModel.layout.edgesMapper.get(internalConnector);\n if (edgePts.length) {\n rowEnd = isHorizontal ? edgePts[0].y : edgePts[0].x;\n }\n }\n maxSize = Math.max(maxSize, rowEnd - rowStart);\n }\n }\n }\n return maxSize;\n };\n MatrixModel.prototype.createMatrixCells = function () {\n var layoutSettings = this.flowchartModel.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight';\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n var spacingInverse = isHorizontal ? layoutSettings.horizontalSpacing : layoutSettings.verticalSpacing;\n var rank = this.flowchartModel.ranks;\n var ranks = Array.from(rank.values());\n var matrixCellMapper = {};\n var matrixRowOffset = -spacingInverse;\n for (var j = ranks.length - 1; j >= 0; j--) {\n var maxDimension = 0.0;\n var index = (ranks.length - 1) - j;\n var rank_1 = ranks[parseInt(j.toString(), 10)].slice();\n // Creating new row and adding it to matrix\n var matrixRow = [];\n this.matrix[parseInt(index.toString(), 10)] = matrixRow;\n // Creating new row mapper\n var tempMatrixRow = {};\n matrixCellMapper[parseInt(index.toString(), 10)] = tempMatrixRow;\n while (rank_1.length > 0) {\n var layoutCell = rank_1[0];\n var matrixCell = {\n parents: [],\n children: [],\n visitedParents: [],\n visitedChildren: [],\n ignoredChildren: [],\n loopChildren: [],\n cells: [],\n level: index,\n initialOffset: 0,\n size: 0,\n offset: 0\n };\n matrixRow.push(matrixCell);\n if ('internalInEdges' in layoutCell && 'internalOutEdges' in layoutCell) {\n matrixCell.cells.push(layoutCell);\n if (layoutCell.identicalSibling) {\n for (var i = 0; i < rank_1.length; i++) {\n var internalVertex = rank_1[parseInt(i.toString(), 10)];\n if ('internalInEdges' in internalVertex && 'internalOutEdges' in internalVertex) {\n if (layoutCell.identicalSibling.indexOf(internalVertex.id) !== -1) {\n matrixCell.cells.push(internalVertex);\n if (matrixCell.cells.length > layoutCell.identicalSibling.length) {\n break;\n }\n }\n }\n }\n }\n var cells = matrixCell.cells;\n for (var i = 0; i < cells.length; i++) {\n var internalVertex = cells[parseInt(i.toString(), 10)];\n if ('internalInEdges' in internalVertex && 'internalOutEdges' in internalVertex) {\n var geometry = internalVertex.cell.geometry;\n matrixCell.size += isHorizontal ? geometry.height : geometry.width;\n maxDimension = Math.max(maxDimension, isHorizontal ? geometry.width : geometry.height);\n tempMatrixRow[internalVertex.id] = matrixCell;\n if (internalVertex.internalInEdges.length) {\n var internalInEdges = internalVertex.internalInEdges;\n for (var j_1 = 0; j_1 < internalInEdges.length; j_1++) {\n var internalEdges = internalInEdges[parseInt(j_1.toString(), 10)];\n if (internalEdges.isReversed) {\n continue;\n }\n var key = null;\n if (matrixCellMapper[index - 1] &&\n Object.prototype.hasOwnProperty.call(matrixCellMapper[index - 1], internalEdges.ids)) {\n key = internalEdges.ids;\n }\n else if (matrixCellMapper[index - 1] &&\n Object.prototype.hasOwnProperty.call(matrixCellMapper[index - 1], internalEdges.source.id)) {\n key = internalEdges.source.id;\n }\n if (key !== null) {\n var parentMatrixCell = matrixCellMapper[index - 1][\"\" + key];\n if (matrixCell.parents.indexOf(parentMatrixCell) === -1) {\n matrixCell.parents.push(parentMatrixCell);\n }\n if (parentMatrixCell.children.indexOf(matrixCell) === -1) {\n if (parentMatrixCell.children.length) {\n if (parentMatrixCell.children[0].level === parentMatrixCell.level) {\n parentMatrixCell.children.unshift(matrixCell);\n }\n else {\n parentMatrixCell.children.push(matrixCell);\n }\n }\n else {\n parentMatrixCell.children.push(matrixCell);\n }\n }\n }\n }\n }\n rank_1.splice(rank_1.indexOf(internalVertex), 1);\n }\n }\n matrixCell.size += (matrixCell.cells.length - 1) * spacing;\n }\n else if ('edges' in layoutCell) {\n matrixCell.cells.push(layoutCell);\n var cells = matrixCell.cells;\n for (var i = 0; i < cells.length; i++) {\n var internalEdge = cells[parseInt(i.toString(), 10)];\n if ('edges' in internalEdge && internalEdge.edges) {\n var lineWidth = 1;\n var edgeSpacing = 5;\n var cellSize = -edgeSpacing;\n for (var j_2 = 0; j_2 < internalEdge.edges.length; j_2++) {\n var internalConnector = internalEdge.edges[parseInt(j_2.toString(), 10)];\n cellSize += lineWidth + edgeSpacing;\n }\n matrixCell.size += cellSize;\n }\n var key = null;\n if (internalEdge.isReversed) {\n if (matrixCellMapper[parseInt(index.toString(), 10)][internalEdge.ids]) {\n key = internalEdge.ids;\n }\n else if (matrixCellMapper[parseInt(index.toString(), 10)][internalEdge.source.id]) {\n key = internalEdge.source.id;\n }\n }\n else {\n if (matrixCellMapper[index - 1][internalEdge.ids]) {\n key = internalEdge.ids;\n }\n else if (matrixCellMapper[index - 1][internalEdge.source.id]) {\n key = internalEdge.source.id;\n }\n }\n if (key !== null) {\n var parentMatrixCell = matrixCellMapper[internalEdge.isReversed ?\n index : index - 1][\"\" + key];\n if (matrixCell.parents.indexOf(parentMatrixCell) === -1) {\n matrixCell.parents.push(parentMatrixCell);\n }\n if (parentMatrixCell.children.indexOf(matrixCell) === -1) {\n parentMatrixCell.children.push(matrixCell);\n }\n }\n tempMatrixRow[internalEdge.ids] = matrixCell;\n rank_1.splice(rank_1.indexOf(internalEdge), 1);\n }\n matrixCell.size += (matrixCell.cells.length - 1) * spacing;\n }\n }\n this.rowOffset[parseInt(index.toString(), 10)] = matrixRowOffset + (maxDimension / 2) + spacingInverse;\n this.rowMaxDimension[parseInt(index.toString(), 10)] = this.rowOffset[parseInt(index.toString(), 10)] + maxDimension / 2;\n matrixRowOffset += maxDimension + spacingInverse;\n }\n };\n MatrixModel.prototype.groupLayoutCells = function () {\n var rank = this.flowchartModel.ranks;\n var ranks = Array.from(rank.values());\n ranks.reverse();\n for (var j = ranks.length - 1; j >= 0; j--) {\n var vertices = ranks[parseInt(j.toString(), 10)].filter(function (v) { return 'internalInEdges' in v && 'internalOutEdges' in v; });\n var edges = ranks[parseInt(j.toString(), 10)].filter(function (e) { return 'edges' in e && 'edges' in e; });\n while (vertices.length > 1) {\n var vertex1 = vertices[0];\n if (vertex1.cell.isYesChild || vertex1.cell.isNoChild) {\n vertices.shift();\n continue;\n }\n var parentSet1 = vertex1.internalInEdges.map(function (e) { return e.source.id; });\n var childSet1 = vertex1.internalOutEdges.map(function (e) { return e.target.id; });\n while (vertices.length > 1) {\n var vertex2 = vertices[1];\n var parentSet2 = vertex2.internalInEdges.map(function (e) { return e.source.id; });\n var childSet2 = vertex2.internalOutEdges.map(function (e) { return e.target.id; });\n var parentEquals = this.compareLists(parentSet1, parentSet2);\n var childEquals = this.compareLists(childSet1, childSet2);\n if (parentEquals && childEquals) {\n this.updateMutualSharing(vertices[0], vertex2.id);\n this.updateMutualSharing(vertices[1], vertex1.id);\n vertices.splice(1, 1);\n continue;\n }\n break;\n }\n vertices.shift();\n }\n var _loop_2 = function () {\n var internalEdge = edges[0];\n var parentSet = internalEdge.source;\n var childSet = internalEdge.target;\n if (parentSet.identicalSibling) {\n var groupEdges = edges.filter(function (e) { return e.target === childSet; });\n for (var _i = 0, groupEdges_1 = groupEdges; _i < groupEdges_1.length; _i++) {\n var internalEdges = groupEdges_1[_i];\n if ((parentSet.identicalSibling).indexOf(internalEdges.source.id) !== -1) {\n internalEdges.source.identicalSibling = null;\n }\n }\n internalEdge.source.identicalSibling = null;\n }\n edges.shift();\n };\n while (edges.length > 1) {\n _loop_2();\n }\n }\n };\n MatrixModel.prototype.updateMutualSharing = function (cell, id) {\n if (cell.identicalSibling) {\n cell.identicalSibling.push(id);\n }\n else {\n cell.identicalSibling = [id];\n }\n };\n MatrixModel.prototype.compareLists = function (list1, list2) {\n var newList1 = list1.slice();\n var newList2 = list2.slice();\n if (newList1.length === newList2.length) {\n if (newList1.length === 0) {\n return true;\n }\n for (var _i = 0, newList2_1 = newList2; _i < newList2_1.length; _i++) {\n var o = newList2_1[_i];\n if (newList1.indexOf(o) === -1) {\n return false;\n }\n }\n return true;\n }\n return false;\n };\n return MatrixModel;\n}());\n\n/**\n * Defines the Flowchart Layout\n */\nvar FlowchartLayout = /** @__PURE__ @class */ (function () {\n function FlowchartLayout() {\n this.rootNodes = [];\n this.vertexMapper = new Map();\n this.edgesMapper = new Map();\n this.loopedgesMapper = new Map();\n this.anchorX = 0;\n this.anchorY = 0;\n this.verticalSpacing = 50;\n this.horizontalSpacing = 50;\n this.horizontalAlignment = 'Center';\n this.verticalAlignment = 'Top';\n this.margin = { top: 50, right: 50, bottom: 50, left: 50 };\n this.orientation = 'TopToBottom';\n this.yesBranchDirection = 'SameAsFlow';\n this.noBranchDirection = 'RightInFlow';\n this.yesBranchValues = ['Yes', 'True'];\n this.noBranchValues = ['No', 'False'];\n this.diagram = new Diagram();\n }\n /**\n * To update the layout of the diagram.\n * @private\n * @param {NodeModel[]} nodes - provide the node value.\n * @param {Diagram} diagram - provide the diagram value.\n * @returns { void }\n */\n FlowchartLayout.prototype.updateLayout = function (nodes, diagram) {\n this.diagram = diagram;\n this.yesBranchDirection = this.diagram.layout.flowchartLayoutSettings.yesBranchDirection;\n this.noBranchDirection = this.diagram.layout.flowchartLayoutSettings.noBranchDirection;\n this.yesBranchValues = this.diagram.layout.flowchartLayoutSettings.yesBranchValues;\n this.noBranchValues = this.diagram.layout.flowchartLayoutSettings.noBranchValues;\n this.orientation = this.diagram.layout.orientation === 'TopToBottom' || this.diagram.layout.orientation === 'BottomToTop' ? 'TopToBottom' : 'LeftToRight';\n this.horizontalAlignment = this.diagram.layout.horizontalAlignment;\n this.verticalAlignment = this.diagram.layout.verticalAlignment;\n this.verticalSpacing = this.diagram.layout.verticalSpacing;\n this.horizontalSpacing = this.diagram.layout.horizontalSpacing;\n this.margin = this.diagram.layout.margin;\n var firstLevelNodes = [];\n var unseenVertices = [];\n this.rootNodes = [];\n this.vertexMapper.clear();\n this.edgesMapper.clear();\n this.loopedgesMapper.clear();\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var item = nodes_1[_i];\n if (!item.excludeFromLayout) {\n var vertex = this.createVertex(item);\n this.vertexMapper.set(vertex.id, vertex);\n unseenVertices.push(vertex);\n if (!vertex.inEdges || vertex.inEdges.length === 0) {\n firstLevelNodes.push(vertex);\n this.rootNodes.push(item);\n }\n }\n }\n var previousModel = null;\n for (var _a = 0, firstLevelNodes_1 = firstLevelNodes; _a < firstLevelNodes_1.length; _a++) {\n var firstLevelNode = firstLevelNodes_1[_a];\n var vertexSet = [];\n this.getTreeVertices(firstLevelNode, vertexSet, unseenVertices);\n var layoutModel = new FlowchartModel(this, firstLevelNode, vertexSet);\n layoutModel.layeringStage();\n var matrixModel = new MatrixModel$1(layoutModel);\n matrixModel.siblingModel = previousModel;\n matrixModel.arrangeElements();\n previousModel = matrixModel;\n }\n var vertices = Array.from(this.vertexMapper.values());\n var modelBounds = this.getModelBounds(vertices);\n this.updateAnchor(modelBounds);\n var isHorizontal = this.orientation === 'LeftToRight';\n var inverseSpacing = !isHorizontal ? this.verticalSpacing : this.horizontalSpacing;\n var nodeWithMultiEdges = [];\n for (var _b = 0, vertices_1 = vertices; _b < vertices_1.length; _b++) {\n var vertex = vertices_1[_b];\n if (vertex) {\n var node = vertex.item;\n if (node) {\n node.offsetX = vertex.geometry.x + (vertex.geometry.width / 2) + this.anchorX;\n node.offsetY = vertex.geometry.y + (vertex.geometry.height / 2) + this.anchorY;\n if ((vertex.inEdges && vertex.inEdges.length > 0) || (vertex.outEdges && vertex.outEdges.length > 0)) {\n nodeWithMultiEdges.push(node);\n }\n }\n diagram.dataBind();\n }\n }\n var transModelBounds = new Rect(modelBounds.x + this.anchorX, modelBounds.y\n + this.anchorY, modelBounds.width, modelBounds.height);\n this.nodeWithMultiEdges = nodeWithMultiEdges;\n this.inverseSpacing = inverseSpacing;\n this.transModelBounds = transModelBounds;\n this.diagram.layout.flowChartData = this;\n };\n /**\n * To re-rout the flowchart connectors.\n * @private\n * @param {FlowchartLayout} layoutData - provide the layoutData value.\n * @param {Diagram} diagram - provide the diagram value.\n * @returns { void }\n */\n FlowchartLayout.prototype.reRouteFlowChartConnectors = function (layoutData, diagram) {\n this.diagram = diagram;\n var nodeWithMultiEdges = layoutData.nodeWithMultiEdges;\n var inverseSpacing = layoutData.inverseSpacing;\n this.orientation = layoutData.orientation;\n var isVertical = this.orientation === 'TopToBottom';\n var transModelBounds = layoutData.transModelBounds;\n this.vertexMapper = layoutData.vertexMapper;\n this.loopedgesMapper = layoutData.loopedgesMapper;\n this.edgesMapper = layoutData.edgesMapper;\n this.anchorX = layoutData.anchorX;\n this.anchorY = layoutData.anchorY;\n var modifiedConnectors = [];\n for (var _i = 0, nodeWithMultiEdges_1 = nodeWithMultiEdges; _i < nodeWithMultiEdges_1.length; _i++) {\n var node = nodeWithMultiEdges_1[_i];\n if (node.outEdges && node.outEdges.length > 0) {\n for (var _a = 0, _b = node.outEdges; _a < _b.length; _a++) {\n var edge = _b[_a];\n var internalConnector = this.diagram.nameTable[\"\" + edge];\n if (this.loopedgesMapper.has(internalConnector) && this.loopedgesMapper.get(internalConnector)) {\n if (modifiedConnectors.indexOf(internalConnector) === -1) {\n this.updateLoopConnector(internalConnector);\n modifiedConnectors.push(internalConnector);\n }\n }\n else {\n var updatedPts = [];\n if (node.outEdges.length > 1) {\n var segmentSize = inverseSpacing / 2.0;\n var intermediatePoint = null;\n if (this.edgesMapper.has(internalConnector)) {\n var edgePt = this.edgesMapper.get(internalConnector)[0];\n if (edgePt) {\n intermediatePoint = { x: edgePt.x + this.anchorX, y: edgePt.y + this.anchorY };\n }\n }\n internalConnector.segments = [];\n internalConnector.intermediatePoints = [];\n var pts = [internalConnector.sourcePoint, internalConnector.targetPoint];\n if (isVertical) {\n updatedPts = this.updateVerticalConnectorSegments(internalConnector, pts);\n pts = this.updateConnectorPoints(updatedPts, segmentSize, intermediatePoint, transModelBounds);\n }\n else {\n updatedPts = this.updateHorizontalSegments(internalConnector, pts);\n pts = this.updateConnectorPoints(updatedPts, segmentSize, intermediatePoint, transModelBounds);\n }\n if (pts.length > 2) {\n this.updatePoints(pts, internalConnector);\n }\n modifiedConnectors.push(internalConnector);\n }\n }\n }\n }\n if (node.inEdges && node.inEdges.length > 1) {\n for (var _c = 0, _d = node.inEdges; _c < _d.length; _c++) {\n var edge = _d[_c];\n var internalConnector = this.diagram.nameTable[\"\" + edge];\n if (modifiedConnectors.indexOf(internalConnector) === -1) {\n internalConnector.segments[0].points = [];\n if (this.loopedgesMapper.has(internalConnector) && this.loopedgesMapper.get(internalConnector)) {\n this.updateLoopConnector(internalConnector);\n modifiedConnectors.push(internalConnector);\n }\n else {\n if (node.inEdges.length > 1) {\n var segmentSize = inverseSpacing / 2.0;\n var intermediatePoint = null;\n if (this.edgesMapper.has(internalConnector) && modifiedConnectors.indexOf(internalConnector) === -1) {\n var edgePt = this.edgesMapper.get(internalConnector)[0];\n if (edgePt) {\n intermediatePoint = { x: edgePt.x + this.anchorX, y: edgePt.y + this.anchorY };\n }\n }\n internalConnector.segments = [];\n internalConnector.intermediatePoints = [];\n var pts = [internalConnector.targetPoint, internalConnector.sourcePoint];\n var updatedPts = [];\n if (isVertical) {\n updatedPts = this.updateVerticalConnectorSegments(internalConnector, pts);\n }\n else {\n updatedPts = this.updateHorizontalSegments(internalConnector, pts);\n }\n pts = this.updateConnectorPoints(updatedPts, segmentSize, intermediatePoint, transModelBounds);\n pts.reverse();\n if (pts.length > 2) {\n this.updatePoints(pts, internalConnector);\n }\n }\n }\n }\n }\n }\n }\n };\n FlowchartLayout.prototype.updateAnchor = function (bounds) {\n var viewPort = {\n width: this.diagram.scrollSettings.viewPortWidth,\n height: this.diagram.scrollSettings.viewPortHeight\n };\n if (this.orientation === 'TopToBottom') {\n this.anchorX = viewPort.width / 2 - bounds.width / 2 - bounds.x;\n this.anchorY = this.margin.top;\n }\n else {\n this.anchorX = this.margin.left;\n this.anchorY = viewPort.height / 2 - bounds.height / 2 - bounds.y;\n }\n if (this.rootNodes.length === 1) {\n var fixedNode = this.rootNodes[0]; // Assuming rootNodes is defined elsewhere\n var fixedNodeGeometry = this.vertexMapper.get(fixedNode.id).geometry; // Assuming vertexMapper and its usage are defined elsewhere\n var offsetX = fixedNodeGeometry.x + fixedNodeGeometry.width / 2;\n var offsetY = fixedNodeGeometry.y + fixedNodeGeometry.height / 2;\n var dx = offsetX - (bounds.x + bounds.width / 2);\n var dy = offsetY - (bounds.y + bounds.height / 2);\n if (this.orientation === 'TopToBottom') {\n this.anchorX -= dx;\n }\n else {\n this.anchorY -= dy;\n }\n }\n };\n FlowchartLayout.prototype.updateConnectorPoints = function (connectorPoints, startSegmentSize, intermediatePoint, layoutBounds) {\n var isHorizontal = this.orientation === 'LeftToRight';\n var pts = connectorPoints.slice();\n // Helper function to find angle between two points\n function findAngle(point1, point2) {\n return Math.atan2(point2.y - point1.y, point2.x - point1.x) * (180 / Math.PI);\n }\n // Function to find the distance (length) between two points\n function findLength(point1, point2) {\n var dx = point2.x - point1.x;\n var dy = point2.y - point1.y;\n return Math.sqrt(dx * dx + dy * dy);\n }\n // Helper function to transform a point\n function transform(point, length, angle) {\n var rad = angle * (Math.PI / 180);\n var newX = point.x + length * Math.cos(rad);\n var newY = point.y + length * Math.sin(rad);\n return { x: newX, y: newY };\n }\n if (pts.length > 2) {\n var newPt = transform(pts[0], startSegmentSize, findAngle(pts[0], pts[1]));\n var nextPt = transform(newPt, findLength(newPt, pts[1]), findAngle(newPt, pts[2]));\n pts.splice(1, 0, nextPt);\n pts.splice(1, 0, newPt);\n pts.splice(3, 2);\n if (intermediatePoint != null) {\n var index = 2;\n var ptsCount = pts.length;\n var newPt1 = transform(pts[ptsCount - 1], startSegmentSize, findAngle(pts[ptsCount - 1], pts[ptsCount - 2]));\n pts.splice(ptsCount - 1, 0, newPt1);\n while (index < pts.length - 2) {\n pts.splice(index, 1);\n }\n var edgePt = intermediatePoint;\n this.inflate(layoutBounds, layoutBounds.width, layoutBounds.height);\n if (isHorizontal) {\n var line1 = [{ x: layoutBounds.left, y: edgePt.y }, { x: layoutBounds.right, y: edgePt.y }];\n var line2 = [{ x: pts[1].x, y: layoutBounds.top }, { x: pts[1].x, y: layoutBounds.bottom }];\n var line3 = [{ x: newPt1.x, y: layoutBounds.top }, { x: newPt1.x, y: layoutBounds.bottom }];\n var intercepts1 = [];\n var intercepts2 = [];\n // Dummy function calls, replace with actual implementation or mock\n intercepts1 = this.diagram.commandHandler.intersect(line1, line2, false);\n intercepts2 = this.diagram.commandHandler.intersect(line1, line3, false);\n if (intercepts2.length) {\n pts.splice(2, 0, intercepts2[0]);\n }\n if (intercepts1.length) {\n pts.splice(2, 0, intercepts1[0]);\n }\n }\n else {\n var line1 = [{ x: edgePt.x, y: layoutBounds.top }, { x: edgePt.x, y: layoutBounds.bottom }];\n var line2 = [{ x: layoutBounds.left, y: pts[1].y }, { x: layoutBounds.right, y: pts[1].y }];\n var line3 = [{ x: layoutBounds.left, y: newPt1.y }, { x: layoutBounds.right, y: newPt1.y }];\n var intercepts1 = [];\n var intercepts2 = [];\n // Dummy function calls, replace with actual implementation or mock\n intercepts1 = this.diagram.commandHandler.intersect(line1, line2, false);\n intercepts2 = this.diagram.commandHandler.intersect(line1, line3, false);\n if (intercepts2.length) {\n pts.splice(2, 0, intercepts2[0]);\n }\n if (intercepts1.length) {\n pts.splice(2, 0, intercepts1[0]);\n }\n }\n }\n }\n else if (pts.length === 2 && intermediatePoint != null) {\n var startPt = pts[0];\n var endPt = pts[1];\n var lineAngle = findAngle(pts[0], pts[1]);\n var newPt1 = transform(startPt, startSegmentSize, lineAngle);\n var newPt2 = transform(endPt, startSegmentSize, (lineAngle + 180) % 360);\n pts.splice(1, 0, newPt2);\n if (isHorizontal) {\n var nextPt1 = { x: newPt1.x, y: intermediatePoint.y };\n var nextPt2 = { x: newPt2.x, y: intermediatePoint.y };\n pts.splice(1, 0, nextPt2);\n pts.splice(1, 0, nextPt1);\n }\n else {\n var nextPt1 = { x: intermediatePoint.x, y: newPt1.y };\n var nextPt2 = { x: intermediatePoint.x, y: newPt2.y };\n pts.splice(1, 0, nextPt2);\n pts.splice(1, 0, nextPt1);\n }\n pts.splice(1, 0, newPt1);\n }\n return pts;\n };\n FlowchartLayout.prototype.inflate = function (rect, width, height) {\n rect.x -= width;\n rect.y -= height;\n rect.width += 2 * width;\n rect.height += 2 * height;\n };\n FlowchartLayout.prototype.updateHorizontalSegments = function (internalConnector, pts) {\n var updatedPts = [];\n var sourcenode = this.diagram.nameTable[internalConnector.sourceID];\n var targetnode = this.diagram.nameTable[internalConnector.targetID];\n var decisionNode = this.vertexMapper.get(sourcenode.id).isDecisionNode;\n if (decisionNode && !this.contains({ x: sourcenode.offsetX, y: targetnode.offsetY }, sourcenode.wrapper.bounds)) {\n if (sourcenode.offsetY < targetnode.offsetY) {\n var spoint1 = sourcenode.wrapper.bounds.bottom;\n var spoint2 = sourcenode.offsetX;\n var tpoint1 = targetnode.wrapper.bounds.left;\n var tpoint2 = targetnode.offsetY;\n updatedPts.push({ x: spoint2, y: spoint1 });\n updatedPts.push({ x: spoint2, y: tpoint2 });\n updatedPts.push({ x: tpoint1, y: tpoint2 });\n }\n else if (sourcenode.offsetY > targetnode.offsetY) {\n var spoint1 = sourcenode.wrapper.bounds.top;\n var spoint2 = sourcenode.offsetX;\n var tpoint1 = targetnode.wrapper.bounds.left;\n var tpoint2 = targetnode.offsetY;\n updatedPts.push({ x: spoint2, y: spoint1 });\n updatedPts.push({ x: spoint2, y: tpoint2 });\n updatedPts.push({ x: tpoint1, y: tpoint2 });\n }\n else {\n updatedPts = pts;\n }\n }\n else {\n updatedPts = pts;\n }\n return updatedPts;\n };\n FlowchartLayout.prototype.updateVerticalConnectorSegments = function (internalConnector, pts) {\n var _this = this;\n var updatedPts = [];\n var sourcenode = this.diagram.nameTable[internalConnector.sourceID];\n var targetnode = this.diagram.nameTable[internalConnector.targetID];\n var decisionNode = this.vertexMapper.get(sourcenode.id).isDecisionNode;\n if (decisionNode && !this.contains({ x: targetnode.offsetX, y: sourcenode.offsetY }, sourcenode.wrapper.bounds)) {\n if (sourcenode.offsetX < targetnode.offsetX) {\n var spoint1 = sourcenode.wrapper.bounds.right;\n var spoint2 = sourcenode.offsetY;\n var tpoint1 = targetnode.wrapper.bounds.top;\n var tpoint2 = targetnode.offsetY;\n updatedPts.push({ x: spoint1, y: spoint2 });\n updatedPts.push({ x: targetnode.offsetX, y: spoint2 });\n updatedPts.push({ x: tpoint1, y: tpoint2 });\n }\n else if (sourcenode.offsetX > targetnode.offsetX) {\n var spoint1 = sourcenode.wrapper.bounds.left;\n var spoint2 = sourcenode.offsetY;\n var tpoint1 = targetnode.wrapper.bounds.top;\n var tpoint2 = targetnode.offsetY;\n updatedPts.push({ x: spoint1, y: spoint2 });\n updatedPts.push({ x: targetnode.offsetX, y: spoint2 });\n updatedPts.push({ x: tpoint1, y: tpoint2 });\n }\n else {\n updatedPts = pts;\n }\n }\n else {\n updatedPts = pts;\n }\n if (updatedPts.length > 2) {\n var point_1 = updatedPts[1];\n this.diagram.nodes.forEach(function (node) {\n if (_this.contains(point_1, node.wrapper.bounds)) {\n updatedPts[1] = { x: node.wrapper.bounds.left - 5, y: node.offsetY };\n updatedPts.splice(2, 0, { x: node.wrapper.bounds.left - 5, y: node.wrapper.bounds.bottom + 5 });\n }\n });\n }\n return updatedPts;\n };\n FlowchartLayout.prototype.getModelBounds = function (nodes) {\n var rect = new Rect(0, 0, 0, 0);\n nodes = Array.from(nodes);\n nodes.forEach(function (vertex) {\n var geo = vertex.geometry;\n rect.uniteRect(geo);\n });\n return rect;\n };\n FlowchartLayout.prototype.createVertex = function (node) {\n var _this = this;\n var nodeWidth = isNaN(node.width) ? node.wrapper.bounds.width : node.width;\n var nodeHeight = isNaN(node.height) ? node.wrapper.bounds.height : node.height;\n var geometry = new Rect(0, 0, nodeWidth, nodeHeight);\n var inEdges = [];\n var outEdges = [];\n var branches = { isYesBranch: false, isNoBranch: false };\n if (node.inEdges != null) {\n for (var _i = 0, _a = node.inEdges; _i < _a.length; _i++) {\n var edge = _a[_i];\n var con = this.diagram.nameTable[\"\" + edge];\n if (con) {\n inEdges.push(con);\n }\n }\n }\n if (node.outEdges != null) {\n for (var _b = 0, _c = node.outEdges; _b < _c.length; _b++) {\n var edge = _c[_b];\n var con = this.diagram.nameTable[\"\" + edge];\n if (con) {\n outEdges.push(con);\n }\n }\n }\n var isYesBranch = branches.isYesBranch;\n var isNoBranch = branches.isNoBranch;\n if (inEdges != null) {\n inEdges.forEach(function (inEdge) {\n branches = _this.checkForYesOrNoBranch(inEdge, isYesBranch, isNoBranch);\n });\n }\n if (outEdges != null) {\n outEdges.forEach(function (outEdge) {\n _this.edgesMapper.set(outEdge, []);\n _this.loopedgesMapper.set(outEdge, false);\n });\n }\n var vert = {\n id: node.id,\n geometry: geometry,\n inEdges: inEdges,\n layoutObjectId: {},\n outEdges: outEdges,\n item: node,\n isDecisionNode: false,\n isYesChild: branches.isYesBranch,\n isNoChild: branches.isNoBranch\n };\n return vert;\n };\n FlowchartLayout.prototype.updatePoints = function (pts, internalConnector) {\n var pointSets = [];\n var segCollection = [];\n for (var i = 0; i < pts.length; i++) {\n if (pts[i + 2]) {\n pointSets.push(pts[parseInt(i.toString(), 10)]);\n pointSets.push(pts[i + 1]);\n var seg = {\n type: 'Orthogonal',\n points: pointSets,\n length: pointSets[0].x === pointSets[1].x ? Math.abs(pointSets[0].y - pointSets[1].y)\n : Math.abs(pointSets[0].x - pointSets[1].x),\n direction: pointSets[0].x === pointSets[1].x ? pointSets[0].y > pointSets[1].y ? 'Top' : 'Bottom'\n : pointSets[0].x > pointSets[1].x ? 'Left' : 'Right'\n };\n pointSets = [];\n segCollection.push(seg);\n }\n }\n internalConnector.segments = segCollection;\n };\n FlowchartLayout.prototype.contains = function (point, bounds) {\n return (point.x >= bounds.left && point.x <= bounds.right && point.y >= bounds.top && point.y <= bounds.bottom);\n };\n FlowchartLayout.prototype.updateLoopConnector = function (internalConnector) {\n var loopPts = [];\n if (this.edgesMapper.has(internalConnector)) {\n var loopPoints = this.edgesMapper.get(internalConnector);\n if (loopPoints) {\n for (var _i = 0, loopPoints_1 = loopPoints; _i < loopPoints_1.length; _i++) {\n var loopPt = loopPoints_1[_i];\n var pointX = loopPt.x + this.anchorX;\n var pointY = loopPt.y + this.anchorY;\n loopPts.push({ x: pointX, y: pointY });\n }\n }\n }\n loopPts.reverse();\n var pts = [];\n var firstPt = loopPts[0];\n var lastPt = loopPts[loopPts.length - 1];\n var sourceNode = this.diagram.nameTable[internalConnector.sourceID];\n var targetNode = this.diagram.nameTable[internalConnector.targetID];\n var srcBounds = sourceNode.wrapper.bounds;\n var tarBounds = targetNode.wrapper.bounds;\n var srcNode = sourceNode;\n var tarNode = targetNode;\n if (this.orientation === 'TopToBottom') {\n var target = Array.from(this.vertexMapper.values()).filter(function (e) {\n return e.item.wrapper.bounds.containsPoint({ x: e.item.wrapper.bounds.x, y: srcNode.offsetY }) &&\n srcNode.id !== e.item.id;\n });\n var max = Math.max(firstPt.x, lastPt.x);\n var isSiblingsInRight = (target.length > 0 && target[0].item.wrapper.bounds.x > srcBounds.x);\n pts.push({ x: (!isSiblingsInRight && max > srcBounds.right) ? srcBounds.right : srcBounds.left, y: srcNode.offsetY });\n pts.push({ x: isSiblingsInRight ? pts[0].x - (srcBounds.width / 2) : max, y: srcNode.offsetY });\n pts.push({ x: isSiblingsInRight ? pts[0].x - (srcBounds.width / 2) : max, y: tarNode.offsetY });\n pts.push({ x: (!isSiblingsInRight && max > tarBounds.right) ? tarBounds.right : tarBounds.left, y: tarNode.offsetY });\n }\n else {\n var target = Array.from(this.vertexMapper.values()).filter(function (e) {\n return e.item.wrapper.bounds.containsPoint({ x: srcNode.offsetX, y: e.item.wrapper.bounds.y }) &&\n srcNode.id !== e.item.id;\n });\n var isSiblingsInBottom = (target.length > 0 && target[0].item.wrapper.bounds.y > srcBounds.y);\n var max = Math.max(firstPt.y, lastPt.y);\n pts.push({ x: srcNode.offsetX, y: (!isSiblingsInBottom && max > srcBounds.bottom) ? srcBounds.bottom : srcBounds.top });\n pts.push({ x: srcNode.offsetX, y: isSiblingsInBottom ? pts[0].y - (srcBounds.height / 2) : max });\n pts.push({ x: tarNode.offsetX, y: isSiblingsInBottom ? pts[0].y - (srcBounds.height / 2) : max });\n pts.push({ x: tarNode.offsetX, y: (!isSiblingsInBottom && max > tarBounds.bottom) ? tarBounds.bottom : tarBounds.top });\n }\n this.updatePoints(pts, internalConnector);\n };\n FlowchartLayout.prototype.checkForYesOrNoBranch = function (edge, isYesBranch, isNoBranch) {\n var _this = this;\n if (edge.annotations && edge.annotations.length) {\n edge.annotations.forEach(function (annotation) {\n if (typeof annotation.content === 'string') {\n var text_1 = annotation.content.toString();\n _this.yesBranchValues.forEach(function (branchText) {\n if (text_1.localeCompare(branchText, undefined, { sensitivity: 'accent' }) === 0) {\n isYesBranch = true;\n return;\n }\n });\n _this.noBranchValues.forEach(function (branchText) {\n if (text_1.localeCompare(branchText, undefined, { sensitivity: 'accent' }) === 0) {\n isNoBranch = true;\n return;\n }\n });\n }\n });\n }\n return { isYesBranch: isYesBranch, isNoBranch: isNoBranch };\n };\n FlowchartLayout.prototype.getTreeVertices = function (root, seenVertices, unseenVertices) {\n var _this = this;\n if (root != null && seenVertices.indexOf(root) === -1) {\n seenVertices.push(root);\n unseenVertices = unseenVertices.filter(function (vertex) { return vertex !== root; });\n var children = root.item.outEdges;\n if (children.length === 2) {\n var c1 = this.diagram.nameTable[this.diagram.nameTable[children[0]].targetID];\n var c2 = this.diagram.nameTable[this.diagram.nameTable[children[1]].targetID];\n var childVertex1 = this.vertexMapper.get(c1.id);\n var childVertex2 = this.vertexMapper.get(c2.id);\n if (childVertex1 && childVertex2) {\n var hasYesChild = childVertex1.isYesChild || childVertex2.isYesChild;\n var hasNoChild = childVertex1.isNoChild || childVertex2.isNoChild;\n if (hasYesChild && !hasNoChild) {\n if (childVertex1.isYesChild) {\n childVertex2.isNoChild = true;\n }\n else {\n childVertex1.isNoChild = true;\n }\n hasNoChild = true;\n }\n else if (!hasYesChild && hasNoChild) {\n if (childVertex1.isNoChild) {\n childVertex2.isYesChild = true;\n }\n else {\n childVertex1.isYesChild = true;\n }\n hasYesChild = true;\n }\n root.isDecisionNode = hasYesChild;\n }\n }\n root.outEdges.forEach(function (outConnector) {\n var child = _this.diagram.nameTable[outConnector.targetID];\n var childVertex = _this.vertexMapper.get(child.id);\n if (childVertex != null) {\n if (!root.isDecisionNode) {\n childVertex.isYesChild = false;\n childVertex.isNoChild = false;\n }\n _this.getTreeVertices(childVertex, seenVertices, unseenVertices);\n }\n });\n }\n };\n /**\n * Initializes the edges collection of the vertices\\\n *\n * @returns { IConnector[] } Initializes the edges collection of the vertices\\\n * @param {FlowChartVertex} node - provide the node value.\n * @private\n */\n FlowchartLayout.prototype.getEdges = function (node) {\n var edges = [];\n if (node !== null && node !== undefined) {\n for (var _i = 0, _a = node.inEdges; _i < _a.length; _i++) {\n var inEdge = _a[_i];\n edges.push(inEdge);\n }\n for (var _b = 0, _c = node.outEdges; _b < _c.length; _b++) {\n var outEdge = _c[_b];\n edges.push(outEdge);\n }\n }\n return edges;\n };\n /**\n * Returns the source/target vertex of the given connector \\\n *\n * @returns { FlowChartVertex } Returns the source/target vertex of the given connector \\\n * @param {IConnector} edge - provide the node value.\n * @param {boolean} source - provide the node value.\n * @private\n */\n FlowchartLayout.prototype.getVisibleTerminal = function (edge, source) {\n //differ from complex-hierarchical-tree.ts\n var nodeWrapper = source ? edge.sourceID : edge.targetID;\n return this.vertexMapper.get(nodeWrapper);\n };\n /**\n * used to get the edges between the given source and target \\\n *\n * @returns { IConnector[] } used to get the edges between the given source and target .\\\n * @param {FlowChartVertex} source - provide the angle value.\n * @param { FlowChartVertex} target - provide the angle value.\n * @param { boolean} directed - provide the angle value.\n * @private\n */\n FlowchartLayout.prototype.getEdgesBetween = function (source, target, directed) {\n var edges = this.getEdges(source);\n var result = [];\n for (var i = 0; i < edges.length; i++) {\n var src = this.getVisibleTerminal(edges[parseInt(i.toString(), 10)], true);\n var trg = this.getVisibleTerminal(edges[parseInt(i.toString(), 10)], false);\n if ((src.id === source.id && trg.id === target.id)) {\n result.push(edges[parseInt(i.toString(), 10)]);\n }\n }\n return result;\n };\n /**\n *To destroy the FlowchartLayout\n *\n * @returns {void} To destroy the FlowchartLayout\n */\n FlowchartLayout.prototype.destroy = function () {\n /**\n * Destroys the FlowchartLayout module\n */\n };\n /**\n * @returns { string } toBounds method .\\\n * Get getModuleName name.\n */\n FlowchartLayout.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'FlowchartLayout';\n };\n return FlowchartLayout;\n}());\n\nvar ConnectorProperties = /** @__PURE__ @class */ (function () {\n function ConnectorProperties(labelProperties) {\n this.labelProperties = labelProperties;\n }\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Convert and render the connector collection from EJ1 to EJ2\n ConnectorProperties.prototype.renderConnectorsCollection = function (convertedData, data) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n convertedData.connectors = [];\n var connectors = [];\n for (var i = 0; i < data.connectors.length; i++) {\n var connector = data.connectors[parseInt(i.toString(), 10)];\n var newConnector = this.convertToConnector(connector);\n connectors.push(newConnector);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n convertedData.connectors = connectors;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Convert and render the connector properties from EJ1 to EJ2\n ConnectorProperties.prototype.convertToConnector = function (connector) {\n var newConnector = {};\n newConnector.style = {};\n if (connector.name) {\n newConnector.id = connector.name;\n }\n if (connector.addInfo) {\n newConnector.addInfo = connector.addInfo;\n }\n if (connector.bridgeSpace) {\n newConnector.bridgeSpace = connector.bridgeSpace;\n }\n if (connector.constraints) {\n newConnector.constraints = this.setConnectorConstraints(connector.constraints);\n }\n if (connector.cornerRadius) {\n newConnector.cornerRadius = connector.cornerRadius;\n }\n if (connector.labels) {\n newConnector.annotations = this.labelProperties.setLabelProperties(connector.labels, connector);\n }\n if (connector.lineColor) {\n newConnector.style.fill = connector.lineColor;\n }\n if (connector.lineWidth) {\n newConnector.style.strokeWidth = connector.lineWidth;\n }\n if (connector.lineDashArray) {\n newConnector.style.strokeDashArray = connector.lineDashArray;\n }\n if (connector.opacity) {\n newConnector.style.opacity = connector.opacity;\n }\n if (connector.lineHitPadding) {\n newConnector.hitPadding = connector.lineHitPadding;\n }\n if (connector.margin) {\n // eslint-disable-next-line max-len\n newConnector.margin = { left: connector.margin.left, right: connector.margin.right, top: connector.margin.top, bottom: connector.margin.bottom };\n }\n if (connector.segments) {\n newConnector.type = connector.segments[0].type.charAt(0).toUpperCase() + (connector.segments[0].type).slice(1);\n newConnector.segments = this.setConnectorSegments(connector.segments);\n }\n if (connector.shape) {\n newConnector.shape = this.getConnectorShape(connector.shape);\n }\n if (connector.sourceDecorator) {\n newConnector.sourceDecorator = {\n height: connector.sourceDecorator.height,\n width: connector.sourceDecorator.width,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n shape: (this.getDecoratorShape(connector.sourceDecorator.shape)),\n pathData: connector.sourceDecorator.pathData,\n style: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n fill: connector.sourceDecorator.fillColor,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n strokeColor: connector.sourceDecorator.lineColor,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n strokeWidth: connector.sourceDecorator.lineWidth\n }\n };\n }\n if (connector.targetDecorator) {\n newConnector.targetDecorator = {\n height: connector.targetDecorator.height,\n width: connector.targetDecorator.width,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n shape: this.getDecoratorShape(connector.targetDecorator.shape),\n pathData: connector.targetDecorator.pathData,\n style: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n fill: connector.targetDecorator.fillColor,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n strokeColor: connector.targetDecorator.lineColor,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n strokeWidth: connector.targetDecorator.lineWidth\n }\n };\n }\n if (connector.sourceNode) {\n newConnector.sourceID = connector.sourceNode;\n }\n if (connector.targetNode) {\n newConnector.targetID = connector.targetNode;\n }\n if (connector.sourcePoint) {\n newConnector.sourcePoint = { x: connector.sourcePoint.x, y: connector.sourcePoint.y };\n }\n if (connector.targetPoint) {\n newConnector.targetPoint = { x: connector.targetPoint.x, y: connector.targetPoint.y };\n }\n if (connector.sourcePort) {\n newConnector.sourcePortID = connector.sourcePort;\n }\n if (connector.targetPort) {\n newConnector.targetPortID = connector.targetPort;\n }\n if (connector.tooltip) {\n newConnector.tooltip = {\n content: connector.tooltip.content,\n relativeMode: connector.tooltip.relativeMode\n };\n }\n if (connector.visible) {\n newConnector.visible = connector.visible;\n }\n if (connector.zOrder) {\n newConnector.zIndex = connector.zOrder;\n }\n return newConnector;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Convert and assign the connector shapes from EJ1 to EJ2\n ConnectorProperties.prototype.getConnectorShape = function (shape) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var connectorShape = null;\n if (shape) {\n if (shape.type === 'bpmn') {\n connectorShape = {\n type: 'Bpmn',\n flow: (shape.flow).charAt(0).toUpperCase() + (shape.flow).slice(1)\n };\n if (shape.flow === 'sequence') {\n connectorShape.sequence = (shape.sequence).charAt(0).toUpperCase() + (shape.sequence).slice(1);\n }\n else if (shape.flow === 'association') {\n connectorShape.association = (shape.association).charAt(0).toUpperCase() + (shape.association).slice(1);\n }\n else {\n connectorShape.message = (shape.message).charAt(0).toUpperCase() + (shape.message).slice(1);\n }\n }\n if (shape.type === 'umlclassifier') {\n connectorShape = {\n type: 'UmlClassifier',\n relationship: (shape.relationship).charAt(0).toUpperCase() + (shape.relationship).slice(1),\n multiplicity: {\n type: (shape.multiplicity.type).charAt(0).toUpperCase() + (shape.multiplicity.type).slice(1),\n source: {\n upperBounds: shape.multiplicity.source.upperBounds,\n optional: shape.multiplicity.source.optional,\n lowerBounds: shape.multiplicity.source.lowerBounds\n },\n target: {\n upperBounds: shape.multiplicity.target.upperBounds,\n optional: shape.multiplicity.target.optional,\n lowerBounds: shape.multiplicity.target.lowerBounds\n }\n }\n };\n }\n if (shape.type === 'umlactivity') {\n connectorShape = {\n type: 'UmlActivity',\n flow: (shape.flow).charAt(0).toUpperCase() + (shape.flow).slice(1)\n };\n }\n }\n return connectorShape;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the connector decorator shapes from EJ1 to EJ2\n ConnectorProperties.prototype.getDecoratorShape = function (shape) {\n var decoratorShape = 'None';\n if (shape === 'path') {\n decoratorShape = 'Custom';\n }\n else {\n decoratorShape = (shape).charAt(0).toUpperCase() + (shape).slice(1);\n }\n return decoratorShape;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Convert and render the connector collection from EJ1 to EJ2\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ConnectorProperties.prototype.setConnectorSegments = function (segments) {\n var connectorSegments = [];\n if (segments.length > 0) {\n for (var i = 0; i < segments.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var segment = {};\n var segmentProp = segments[parseInt(i.toString(), 10)];\n // eslint-disable-next-line max-len\n segment.direction = segmentProp.direction ? segmentProp.direction.charAt(0).toUpperCase() + segmentProp.direction.slice(1) : segmentProp._direction ? segmentProp._direction.charAt(0).toUpperCase() + segmentProp._direction.slice(1) : null;\n segment.length = segmentProp.length ? segmentProp.length : segmentProp._length ? segmentProp._length : null;\n segment.point = segmentProp.point ? { x: segmentProp.point.x, y: segmentProp.point.y } : null;\n segment.point1 = segmentProp.point1 ? { x: segmentProp.point1.x, y: segmentProp.point1.y } : null;\n segment.point2 = segmentProp.point2 ? { x: segmentProp.point2.x, y: segmentProp.point2.y } : null;\n // eslint-disable-next-line max-len\n segment.vector1 = segmentProp.vector1 ? { angle: segmentProp.vector1.angle, distance: segmentProp.vector1.distance } : null;\n // eslint-disable-next-line max-len\n segment.vector2 = segmentProp.vector2 ? { angle: segmentProp.vector2.angle, distance: segmentProp.vector2.distance } : null;\n if (segmentProp.points) {\n segment.points = this.getSegmentPoints(segmentProp.points);\n }\n if (segmentProp.type) {\n segment.type = (segmentProp.type).charAt(0).toUpperCase() + (segmentProp.type).slice(1);\n }\n connectorSegments.push(segment);\n }\n }\n return connectorSegments;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Render the connector Segment points from EJ1 to EJ2\n ConnectorProperties.prototype.getSegmentPoints = function (points) {\n var pointsCollection = [];\n if (points.length > 0) {\n for (var i = 0; i < points.length; i++) {\n var newPoint = {};\n var point = points[parseInt(i.toString(), 10)];\n newPoint.x = point.x;\n newPoint.y = point.y;\n pointsCollection.push(newPoint);\n }\n }\n return pointsCollection;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the connector constraints\n ConnectorProperties.prototype.setConnectorConstraints = function (constraints) {\n var connectorConstraints = ConnectorConstraints.None;\n if (constraints & ConnectorConstraints.Select) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.Select;\n }\n if (constraints & ConnectorConstraints.Delete) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.Delete;\n }\n if (constraints & ConnectorConstraints.Drag) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.Drag;\n }\n if (constraints & ConnectorConstraints.DragSourceEnd) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.DragSourceEnd;\n }\n if (constraints & ConnectorConstraints.DragTargetEnd) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.DragTargetEnd;\n }\n if (constraints & ConnectorConstraints.DragSegmentThumb) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.DragSegmentThumb;\n }\n if (constraints & ConnectorConstraints.Bridging) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.Bridging;\n }\n if (constraints & ConnectorConstraints.InheritBridging) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.InheritBridging;\n }\n if (constraints & ConnectorConstraints.AllowDrop) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.AllowDrop;\n }\n if (constraints & ConnectorConstraints.InheritTooltip) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.InheritTooltip;\n }\n if (constraints & ConnectorConstraints.PointerEvents) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.PointerEvents;\n }\n if (constraints & ConnectorConstraints.BridgeObstacle) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.BridgeObstacle;\n }\n if (constraints & ConnectorConstraints.Interaction) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.Interaction;\n }\n if (constraints & ConnectorConstraints.Default) {\n connectorConstraints = connectorConstraints | ConnectorConstraints.Default;\n }\n return connectorConstraints;\n };\n /**\n * Get module name.\n *\n * @returns {string} Returns the module name\n */\n ConnectorProperties.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'ConnectorProperties';\n };\n return ConnectorProperties;\n}());\n\nvar LabelProperties = /** @__PURE__ @class */ (function () {\n function LabelProperties(modelProperties) {\n this.modelProperties = modelProperties;\n }\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update and assign the annotation properties from EJ1 to EJ2\n LabelProperties.prototype.setLabelProperties = function (oldLabels, item) {\n var labelCollection = [];\n if (oldLabels.length > 0) {\n for (var i = 0; i < oldLabels.length; i++) {\n var label = oldLabels[parseInt(i.toString(), 10)];\n var newLabel = {};\n (newLabel).style = {};\n if (label.name) {\n newLabel.id = label.name;\n }\n if (label.addInfo) {\n newLabel.addInfo = label.addInfo;\n }\n if (label.text) {\n newLabel.content = label.text;\n }\n if (label.constraints) {\n newLabel.constraints = this.setLabelConstraints(label.constraints);\n }\n if (label.readOnly) {\n newLabel.constraints = newLabel.constraints | AnnotationConstraints.ReadOnly;\n }\n if (label.dragLimit) {\n newLabel.dragLimit = {\n left: label.dragLimit.left, right: label.dragLimit.right,\n top: label.dragLimit.top, bottom: label.dragLimit.bottom\n };\n }\n if (label.height) {\n newLabel.height = label.height;\n }\n if (label.horizontalAlignment) {\n newLabel.horizontalAlignment = label.horizontalAlignment.charAt(0).toUpperCase() +\n label.horizontalAlignment.slice(1).toLowerCase();\n }\n if (label.verticalAlignment) {\n newLabel.verticalAlignment = label.verticalAlignment.charAt(0).toUpperCase() +\n label.verticalAlignment.slice(1).toLowerCase();\n }\n if (label.hyperlink) {\n newLabel.hyperlink = { link: label.hyperlink, color: 'blue' };\n }\n if (label.margin) {\n newLabel.margin = {\n left: label.margin.left, right: label.margin.right,\n top: label.margin.top, bottom: label.margin.bottom\n };\n }\n newLabel.rotateAngle = label.rotateAngle;\n if (label.offset) {\n if (item) {\n newLabel.offset = label.offset.x;\n }\n else {\n newLabel.offset = { x: label.offset.x, y: label.offset.y };\n }\n }\n newLabel.style.color = label.fontColor;\n newLabel.style.fontFamily = label.fontFamily;\n newLabel.style.fontSize = label.fontSize;\n newLabel.style.italic = label.italic;\n newLabel.style.bold = label.bold;\n if (label.borderColor) {\n newLabel.style.strokeColor = label.borderColor;\n }\n if (label.borderWidth) {\n newLabel.style.strokeWidth = label.borderWidth;\n }\n if (label.textWrapping) {\n newLabel.style.textWrapping = label.textWrapping;\n }\n if (label.textAlign) {\n newLabel.style.textAlign = label.textAlign.charAt(0).toUpperCase() +\n label.textAlign.slice(1).toLowerCase();\n }\n if (label.textDecoration) {\n newLabel.style.textDecoration = label.textDecoration.charAt(0).toUpperCase() +\n label.textDecoration.slice(1).toLowerCase();\n if (newLabel.style.textDecoration === 'Linethrough') {\n newLabel.style.textDecoration = 'LineThrough';\n }\n }\n var appearance = this.setLabelAppearance(newLabel, label);\n newLabel.style.fill = appearance.fill;\n newLabel.style.opacity = appearance.opacity;\n // if (label.templateId)\n // newLabel.template = getTemplateContent(label.templateId);\n newLabel.visibility = appearance.visibility;\n if (label.width) {\n newLabel.width = label.width;\n }\n labelCollection.push(newLabel);\n }\n }\n return labelCollection;\n };\n LabelProperties.prototype.setLabelAppearance = function (newLabel, label) {\n var appearance = {};\n if (label.fillColor) {\n appearance.fill = label.fillColor === 'white' ? 'transparent' : label.fillColor;\n }\n if (label.opacity) {\n appearance.opacity = label.opacity;\n }\n // if (label.templateId)\n // newLabel.template = getTemplateContent(label.templateId);\n if (label.visible) {\n appearance.visibility = label.visible;\n }\n return appearance;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the annotation constraints from EJ1 to EJ2\n LabelProperties.prototype.setLabelConstraints = function (constraints) {\n var annotationConstraints = AnnotationConstraints.None;\n if (constraints & AnnotationConstraints.Select) {\n annotationConstraints = annotationConstraints | AnnotationConstraints.Select;\n }\n if (constraints & AnnotationConstraints.Drag) {\n annotationConstraints = annotationConstraints | AnnotationConstraints.Drag;\n }\n if (constraints & AnnotationConstraints.Resize) {\n annotationConstraints = annotationConstraints | AnnotationConstraints.Resize;\n }\n if (constraints & AnnotationConstraints.Rotate) {\n annotationConstraints = annotationConstraints | AnnotationConstraints.Rotate;\n }\n return annotationConstraints;\n };\n /**\n * Get module name.\n * @returns {string} returns Module name\n */\n LabelProperties.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'LabelProperties';\n };\n return LabelProperties;\n}());\n\nvar NodeProperties = /** @__PURE__ @class */ (function () {\n function NodeProperties(labelProperties, portProperties) {\n this.labelProperties = labelProperties;\n this.portProperties = portProperties;\n }\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Convert and render the node collection from EJ1 to EJ2\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n NodeProperties.prototype.renderNodesCollection = function (convertedData, data) {\n convertedData.nodes = [];\n var nodes = [];\n for (var i = 0; i < data.nodes.length; i++) {\n var node = data.nodes[parseInt(i.toString(), 10)];\n var processCollection = [];\n var newNode = this.convertToNode(node);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n // eslint-disable-next-line max-len\n if (newNode.shape && newNode.shape.activity && newNode.shape.activity.subProcess && newNode.shape.activity.subProcess.processes && newNode.shape.activity.subProcess.processes.length > 0) {\n var processName = [];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (var k = 0; k < newNode.shape.activity.subProcess.processes.length; k++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var processes = newNode.shape.activity.subProcess.processes[parseInt(k.toString(), 10)];\n processes.margin.right = 0;\n processes.margin.bottom = 0;\n processes.processId = newNode.id;\n processName.push(processes.id);\n processCollection.push(processes);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newNode.shape.activity.subProcess.processes = processName;\n }\n if (node.type === 'group' && !node.isSwimlane) {\n var childCollection = [];\n if (newNode.children && newNode.children.length > 0) {\n for (var j = 0; j < newNode.children.length; j++) {\n var child = newNode.children[parseInt(j.toString(), 10)];\n nodes.push(child);\n childCollection.push(child.id);\n }\n newNode.children = childCollection;\n }\n }\n nodes.push(newNode);\n if (processCollection && processCollection.length > 0) {\n nodes = nodes.concat(processCollection);\n }\n }\n convertedData.nodes = nodes;\n return convertedData.nodes;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Convert the node from EJ1 to EJ2 and assign all the properties\n NodeProperties.prototype.convertToNode = function (node) {\n var newNode = {};\n newNode.style = {};\n newNode.margin = {};\n if (node.name) {\n newNode.id = node.name;\n }\n if (node.fillColor) {\n newNode.style.fill = node.fillColor;\n }\n if (node.borderColor) {\n newNode.style.strokeColor = node.borderColor;\n }\n if (node.borderWidth) {\n newNode.style.strokeWidth = node.borderWidth;\n }\n if (node.borderDashArray) {\n newNode.style.strokeDashArray = node.borderDashArray;\n }\n if (node.opacity) {\n newNode.style.opacity = node.opacity;\n }\n if (node.gradient) {\n newNode.style.gradient = this.setGradient(node.gradient);\n }\n if (node.isExpanded) {\n newNode.isExpanded = node.isExpanded;\n }\n if (node.width) {\n newNode.width = node.width;\n }\n if (node.height) {\n newNode.height = node.height;\n }\n if (node.offsetX) {\n newNode.offsetX = node.offsetX;\n }\n if (node.offsetY) {\n newNode.offsetY = node.offsetY;\n }\n if (node.visible) {\n newNode.visible = node.visible;\n }\n newNode.zIndex = node.zOrder === -1 ? -1 : node.zOrder;\n if (node.excludeFromLayout) {\n newNode.excludeFromLayout = node.excludeFromLayout;\n }\n if (node.rotateAngle) {\n newNode.rotateAngle = node.rotateAngle;\n }\n if (node.pivot) {\n newNode.pivot = node.pivot;\n }\n if (node.addInfo) {\n newNode.addInfo = node.addInfo;\n }\n if (node.marginLeft) {\n newNode.margin.left = node.marginLeft;\n }\n if (node.marginRight) {\n newNode.margin.right = node.marginRight;\n }\n if (node.marginTop) {\n newNode.margin.top = node.marginTop;\n }\n if (node.marginBottom) {\n newNode.margin.bottom = node.marginBottom;\n }\n if (node.horizontalAlign) {\n newNode.horizontalAlignment = node.horizontalAlign;\n }\n if (node.verticalAlign) {\n newNode.verticalAlignment = node.verticalAlign;\n }\n if (node.constraints) {\n newNode.constraints = this.setNodeConstraints(node.constraints);\n }\n if (node.labels) {\n newNode.annotations = this.labelProperties.setLabelProperties(node.labels, undefined);\n }\n if (node.shadow) {\n newNode.shadow = {\n angle: node.shadow.angle, opacity: node.shadow.opacity, distance: node.shadow.distance\n };\n }\n if (node.tooltip) {\n newNode.tooltip = {\n // content: this.getTemplateContent(node.tooltip.templateId),\n relativeMode: node.tooltip.relativeMode\n };\n }\n if (node.expandIcon) {\n newNode.expandIcon = {\n shape: node.expandIcon.shape.charAt(0).toUpperCase() + (node.expandIcon.shape).slice(1),\n width: node.expandIcon.width, height: node.expandIcon.height,\n margin: {\n left: node.expandIcon.margin.left,\n right: node.expandIcon.margin.right,\n top: node.expandIcon.margin.top,\n bottom: node.expandIcon.margin.bottom\n },\n offset: {\n x: node.expandIcon.offset.x,\n y: node.expandIcon.offset.y\n },\n borderColor: node.expandIcon.borderColor, borderWidth: node.expandIcon.borderWidth,\n cornerRadius: node.expandIcon.cornerRadius,\n //fill: (node.expandIcon as any).fillColor,\n pathData: node.expandIcon.pathData\n // content: getTemplateContent(node.expandIcon.templateId)\n };\n if (newNode.expandIcon.shape === 'Arrowup') {\n newNode.expandIcon.shape = 'ArrowUp';\n }\n else if (newNode.expandIcon.shape === 'Arrowdown') {\n newNode.expandIcon.shape = 'ArrowDown';\n }\n }\n if (node.collapseIcon) {\n newNode.collapseIcon = {\n shape: node.collapseIcon.shape.charAt(0).toUpperCase() + (node.collapseIcon.shape).slice(1),\n width: node.collapseIcon.width, height: node.collapseIcon.height,\n margin: {\n left: node.collapseIcon.margin.left,\n right: node.collapseIcon.margin.right,\n top: node.collapseIcon.margin.top,\n bottom: node.collapseIcon.margin.bottom\n },\n offset: {\n x: node.collapseIcon.offset.x,\n y: node.collapseIcon.offset.y\n },\n borderColor: node.collapseIcon.borderColor, borderWidth: node.collapseIcon.borderWidth,\n cornerRadius: node.collapseIcon.cornerRadius,\n // fill: (node.collapseIcon as any).fillColor,\n pathData: node.collapseIcon.pathData\n // content: getTemplateContent(node.collapseIcon.templateId)\n };\n if (newNode.collapseIcon.shape === 'Arrowup') {\n newNode.collapseIcon.shape = 'ArrowUp';\n }\n else if (newNode.collapseIcon.shape === 'Arrowdown') {\n newNode.collapseIcon.shape = 'ArrowDown';\n }\n }\n if (node.ports) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newNode.ports = this.portProperties.setPortProperties(node.ports);\n }\n if (node.children) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (node.type !== 'bpmn' && !node.isSwimlane) {\n newNode.children = this.getChildren(newNode, node);\n }\n }\n if (!(node.children && node.children.length > 0)) {\n newNode.maxWidth = node.maxWidth;\n newNode.maxHeight = node.maxHeight;\n newNode.minWidth = node.minWidth;\n newNode.minHeight = node.minHeight;\n }\n if (node.shape || node.type) {\n newNode = this.setShape(newNode, node);\n }\n return newNode;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Iterate the swimlane child nodes and assign all the node properties from the EJ1 to EJ2\n NodeProperties.prototype.getChildren = function (newNode, node) {\n if (node.children && node.children.length > 0) {\n var newChild = [];\n for (var i = 0; i < node.children.length; i++) {\n var child = this.convertToNode(node.children[parseInt(i.toString(), 10)]);\n if (child.children) {\n this.getChildren(newNode, child);\n }\n newChild.push(child);\n }\n newNode.children = newChild;\n }\n return newNode.children;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the shapes for all the node from conversion\n NodeProperties.prototype.setShape = function (newNode, node) {\n switch (node.type) {\n case 'basic': {\n var basicShape = (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1);\n if (node.shape === 'path') {\n newNode.shape = { type: 'Path', data: node.pathData };\n }\n else {\n newNode.shape = {\n type: 'Basic', shape: basicShape, cornerRadius: node.cornerRadius, points: node.points\n };\n }\n break;\n }\n case 'flow': {\n var flowShape = (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1);\n newNode.shape = {\n type: 'Flow', shape: flowShape\n };\n break;\n }\n case 'umlactivity':\n newNode.shape = {\n type: 'UmlActivity', shape: (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1)\n };\n break;\n case 'image':\n newNode.shape = {\n type: 'Image', source: node.source, align: this.getImageContentAlignment(node.contentAlignment),\n scale: (node.scale).charAt(0).toUpperCase() + (node.scale).slice(1)\n };\n break;\n case 'html':\n newNode.shape = { type: 'HTML' };\n break;\n case 'native':\n newNode.shape = { type: 'Native' };\n break;\n case 'text':\n newNode.shape = { type: 'Text', content: node.textBlock.text };\n break;\n case 'bpmn':\n newNode.shape = this.renderBpmnShape(newNode, node);\n break;\n case 'group':\n if (node.isSwimlane) {\n newNode.shape = this.renderSwimlaneShape(newNode, node);\n }\n }\n return newNode;\n };\n NodeProperties.prototype.getImageContentAlignment = function (option) {\n if (option) {\n switch (option) {\n case 'xminymin':\n return 'XMinYMin';\n case 'xminymid':\n return 'XMinYMid';\n case 'xminymax':\n return 'XMinYMax';\n case 'xmidymin':\n return 'XMidYMin';\n case 'xmidymid':\n return 'XMidYMid';\n case 'xmidymax':\n return 'XMidYMax';\n case 'xmaxymin':\n return 'XMaxYMin';\n case 'xmaxymid':\n return 'XMaxYMid';\n case 'xmaxymax':\n return 'XMaxYMax';\n case 'none':\n return 'None';\n }\n }\n return 'None';\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n // Sets the node constraints from EJ1 to EJ2\n NodeProperties.prototype.setNodeConstraints = function (constraints) {\n var nodeConstraints = NodeConstraints.None;\n if (constraints & NodeConstraints.Select) {\n nodeConstraints = nodeConstraints | NodeConstraints.Select;\n }\n if (constraints & NodeConstraints.Delete) {\n nodeConstraints = nodeConstraints | NodeConstraints.Delete;\n }\n if (constraints & NodeConstraints.Drag) {\n nodeConstraints = nodeConstraints | NodeConstraints.Drag;\n }\n if (constraints & NodeConstraints.Rotate) {\n nodeConstraints = nodeConstraints | NodeConstraints.Rotate;\n }\n if (constraints & NodeConstraints.ResizeNorthEast) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeNorthEast;\n }\n if (constraints & NodeConstraints.ResizeEast) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeEast;\n }\n if (constraints & NodeConstraints.OutConnect) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeSouthEast;\n }\n if (constraints & NodeConstraints.Expandable) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeSouth;\n }\n if (constraints & NodeConstraints.AllowDrop) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeSouthWest;\n }\n if (constraints & NodeConstraints.ResizeNorthEast) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeWest;\n }\n if (constraints & NodeConstraints.ResizeEast) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeNorthWest;\n }\n if (constraints & NodeConstraints.ResizeNorth) {\n nodeConstraints = nodeConstraints | NodeConstraints.ResizeNorth;\n }\n if (constraints & NodeConstraints.Resize) {\n nodeConstraints = nodeConstraints | NodeConstraints.Resize;\n }\n if (constraints & NodeConstraints.Shadow) {\n nodeConstraints = nodeConstraints | NodeConstraints.Shadow;\n }\n if (constraints & NodeConstraints.AspectRatio) {\n nodeConstraints = nodeConstraints | NodeConstraints.AspectRatio;\n }\n if (constraints & NodeConstraints.AllowDrop) {\n nodeConstraints = nodeConstraints | NodeConstraints.AllowDrop;\n }\n if (constraints & NodeConstraints.InheritTooltip) {\n nodeConstraints = nodeConstraints | NodeConstraints.InheritTooltip;\n }\n if (constraints & NodeConstraints.PointerEvents) {\n nodeConstraints = nodeConstraints | NodeConstraints.PointerEvents;\n }\n if (constraints & NodeConstraints.Inherit) {\n nodeConstraints = nodeConstraints | NodeConstraints.Inherit;\n }\n if (constraints & NodeConstraints.Default) {\n nodeConstraints = nodeConstraints | NodeConstraints.Default;\n }\n return nodeConstraints;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the gradient for the nodes\n NodeProperties.prototype.setGradient = function (gradient) {\n var newGradient = {};\n if (gradient) {\n if (gradient.type === 'linear') {\n newGradient = {\n type: 'Linear',\n x1: gradient.x1, x2: gradient.x2, y1: gradient.y1, y2: gradient.y2,\n stops: this.getGradientStops(gradient.stops)\n };\n }\n else if (gradient.type === 'radial') {\n newGradient = {\n type: 'Radial',\n cx: gradient.cx, cy: gradient.cy, fx: gradient.fx, fy: gradient.fy,\n stops: this.getGradientStops(gradient.stops)\n };\n }\n }\n return newGradient;\n };\n NodeProperties.prototype.getGradientStops = function (gradientStops) {\n var stopsCollection = [];\n for (var i = 0; i < gradientStops.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var newStop = {};\n var stop_1 = gradientStops[parseInt(i.toString(), 10)];\n newStop.color = stop_1.color;\n newStop.offset = stop_1.offset;\n stopsCollection.push(newStop);\n }\n return stopsCollection;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Assign the BPMN shape values from the EJ1\n NodeProperties.prototype.renderBpmnShape = function (newNode, node) {\n if (node.shape === 'event') {\n newNode.shape = {\n type: 'Bpmn',\n shape: (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1),\n event: {\n event: (node.event).charAt(0).toUpperCase() + (node.event).slice(1),\n trigger: (node.trigger).charAt(0).toUpperCase() + (node.trigger).slice(1)\n }\n };\n }\n else if (node.shape === 'gateway') {\n newNode.shape = {\n type: 'Bpmn',\n shape: (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1),\n gateway: {\n type: (node.gateway).charAt(0).toUpperCase() + (node.gateway).slice(1)\n }\n };\n }\n else if (node.shape === 'activity') {\n newNode.shape = {\n type: 'Bpmn',\n shape: (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1),\n activity: {\n activity: (node.activity).charAt(0).toUpperCase() + (node.activity).slice(1)\n }\n };\n newNode.shape.activity.activity = newNode.shape.activity.activity === 'Subprocess' ? 'SubProcess' : newNode.shape.activity.activity;\n if (node.activity === 'task') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newNode.shape.activity.task = {\n type: (node.task.type).charAt(0).toUpperCase() + (node.task.type).slice(1),\n loop: (node.task.loop).charAt(0).toUpperCase() + (node.task.loop).slice(1),\n compensation: node.task.compensation,\n call: node.task.call\n };\n }\n if (node.activity === 'subprocess') {\n if (node.subProcess.type === 'event') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newNode.shape.activity.subProcess = {\n collapsed: node.subProcess.collapsed,\n compensation: node.subProcess.compensation,\n adhoc: node.subProcess.adhoc,\n loop: (node.subProcess.loop).charAt(0).toUpperCase() + (node.subProcess.loop).slice(1),\n boundary: (node.subProcess.boundary).charAt(0).toUpperCase() + (node.subProcess.boundary).slice(1),\n type: (node.subProcess.type).charAt(0).toUpperCase() + (node.subProcess.type).slice(1),\n event: {\n event: (node.subProcess.event).charAt(0).toUpperCase() + (node.subProcess.event).slice(1),\n trigger: (node.subProcess.trigger).charAt(0).toUpperCase() + (node.subProcess.trigger).slice(1)\n }\n };\n }\n else if (node.subProcess.type === 'transaction') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newNode.shape.activity.subProcess = {\n collapsed: node.subProcess.collapsed,\n compensation: node.subProcess.compensation,\n adhoc: node.subProcess.adhoc,\n loop: (node.subProcess.loop).charAt(0).toUpperCase() + (node.subProcess.loop).slice(1),\n boundary: (node.subProcess.boundary).charAt(0).toUpperCase() + (node.subProcess.boundary).slice(1),\n type: (node.subProcess.type).charAt(0).toUpperCase() + (node.subProcess.type).slice(1),\n events: this.renderEventsCollection(node.subProcess.events),\n processes: this.renderProcessesCollection(node)\n };\n }\n }\n }\n else if (node.shape === 'dataobject') {\n newNode.shape = {\n type: 'Bpmn',\n shape: (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1)\n // data: {\n // type: this.getKeyByValue(node.data.type),\n // collection: true\n // }\n };\n if (node.annotation) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newNode.shape.annotation = {\n text: node.annotation.text,\n angle: node.annotation.angle,\n width: node.annotation.width,\n height: node.annotation.height,\n length: node.annotation.length\n };\n }\n }\n else {\n newNode.shape = {\n type: 'Bpmn',\n shape: (node.shape).charAt(0).toUpperCase() + (node.shape).slice(1)\n };\n }\n return newNode.shape;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Renders the swimlane from the conversion\n NodeProperties.prototype.renderSwimlaneShape = function (newNode, node) {\n newNode.shape = {\n type: 'SwimLane', orientation: (node.orientation).charAt(0).toUpperCase() + (node.orientation).slice(1),\n header: {\n annotation: { content: node.header.text },\n height: 50, style: { fontSize: node.header.fontSize, color: node.header.fontColor, fill: node.header.fillColor }\n }\n };\n var lanes = [];\n var phases = [];\n for (var i = 0; i < node.lanes.length; i++) {\n lanes[parseInt(i.toString(), 10)] = {\n header: {\n annotation: {\n content: node.lanes[parseInt(i.toString(), 10)].header.text,\n width: node.lanes[parseInt(i.toString(), 10)].header.width,\n style: {\n fontSize: node.lanes[parseInt(i.toString(), 10)].header.fontSize,\n color: node.lanes[parseInt(i.toString(), 10)].header.fontColor\n }\n }\n },\n style: { fill: node.lanes[parseInt(i.toString(), 10)].fillColor },\n children: []\n };\n for (var j = 0; j < node.lanes[parseInt(i.toString(), 10)].children.length; j++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var childNode = this.convertToNode(node.lanes[parseInt(i.toString(), 10)].children[parseInt(j.toString(), 10)]);\n if (childNode.wrapper == null) {\n childNode.wrapper = {\n actualSize: { width: childNode.width, height: childNode.height },\n offsetX: childNode.offsetX, offsetY: childNode.offsetY\n };\n }\n lanes[parseInt(i.toString(), 10)].children.push(childNode);\n }\n }\n for (var i = 0; i < node.phases.length; i++) {\n phases[parseInt(i.toString(), 10)] = {\n header: {\n annotation: {\n content: node.phases[parseInt(i.toString(), 10)].label.text,\n // eslint-disable-next-line max-len\n style: { fill: node.phases[parseInt(i.toString(), 10)].label.fillColor, fontSize: node.phases[parseInt(i.toString(), 10)].label.fontSize, color: node.phases[parseInt(i.toString(), 10)].label.fontColor }\n }\n },\n offset: node.phases[parseInt(i.toString(), 10)].offset,\n // eslint-disable-next-line max-len\n style: { fill: node.phases[parseInt(i.toString(), 10)].fillColor, strokeColor: node.phases[parseInt(i.toString(), 10)].lineColor, strokeDashArray: node.phases[parseInt(i.toString(), 10)].lineDashArray }\n };\n }\n newNode.shape.lanes = lanes;\n newNode.shape.phases = phases;\n return newNode.shape;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Rendered the event collections for the node properties\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n NodeProperties.prototype.renderEventsCollection = function (subProcessEvents) {\n var eventsCollection = [];\n if (subProcessEvents.length > 0) {\n for (var i = 0; i < subProcessEvents.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var newEvent = {};\n var eventObject = subProcessEvents[parseInt(i.toString(), 10)];\n newEvent.event = (eventObject.event).charAt(0).toUpperCase() + (eventObject.event).slice(1);\n newEvent.trigger = (eventObject.trigger).charAt(0).toUpperCase() + (eventObject.trigger).slice(1);\n newEvent.offset = { x: eventObject.offset.x, y: eventObject.offset.y };\n eventsCollection.push(newEvent);\n }\n }\n return eventsCollection;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Rendered the process collections for the node properties\n NodeProperties.prototype.renderProcessesCollection = function (node) {\n var processesCollection = [];\n if (node.subProcess && node.subProcess.processes.length > 0) {\n for (var i = 0; i < node.subProcess.processes.length; i++) {\n var processObject = node.subProcess.processes[parseInt(i.toString(), 10)];\n var data = this.convertToNode(processObject);\n processesCollection.push(data);\n }\n }\n return processesCollection;\n };\n /**\n * Get module name.\n * @returns {string} Returns the module name\n */\n NodeProperties.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'NodeProperties';\n };\n return NodeProperties;\n}());\n\nvar PortProperties = /** @__PURE__ @class */ (function () {\n function PortProperties(modelProperties) {\n this.modelProperties = modelProperties;\n }\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Convert and assign EJ1 to EJ2 port properties\n PortProperties.prototype.setPortProperties = function (oldPorts) {\n var portCollection = [];\n if (oldPorts.length > 0) {\n for (var i = 0; i < oldPorts.length; i++) {\n var port = oldPorts[parseInt(i.toString(), 10)];\n var newPort = {};\n newPort.style = {};\n newPort.id = port.name;\n if (port.addInfo) {\n newPort.addInfo = port.addInfo;\n }\n newPort.height = port.size;\n newPort.width = port.size;\n if (port.horizontalAlignment) {\n newPort.horizontalAlignment = port.horizontalAlignment.charAt(0).toUpperCase() +\n port.horizontalAlignment.slice(1);\n }\n if (port.verticalAlignment) {\n newPort.verticalAlignment = port.verticalAlignment.charAt(0).toUpperCase() +\n port.verticalAlignment.slice(1);\n }\n // eslint-disable-next-line max-len\n newPort.margin = { left: port.margin.left, right: port.margin.right, top: port.margin.top, bottom: port.margin.bottom };\n newPort.offset = { x: port.offset.x, y: port.offset.y };\n newPort.style.strokeColor = port.borderColor;\n newPort.style.strokeWidth = port.borderWidth;\n newPort.style.fill = port.fillColor;\n newPort.constraints = this.setPortConstraints(port.constraints);\n if (port.pathData) {\n newPort.pathData = port.pathData;\n }\n if (port.shape === 'path') {\n newPort.shape = 'Custom';\n }\n else {\n newPort.shape = port.shape.charAt(0).toUpperCase() + (port.shape).slice(1);\n }\n newPort.visibility = this.setPortVisibility(port.visibility);\n portCollection.push(newPort);\n }\n }\n return portCollection;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the port constraints from EJ1 to EJ2\n PortProperties.prototype.setPortConstraints = function (constraints) {\n var portConstraints = PortConstraints.Default;\n // if (constraints & PortConstraints.Drag) {\n // portConstraints = portConstraints | PortConstraints.Drag;\n // }\n if (constraints & PortConstraints.Draw) {\n portConstraints = portConstraints | PortConstraints.Draw;\n }\n if (constraints & PortConstraints.None) {\n portConstraints = PortConstraints.None;\n }\n return portConstraints;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the portVisibility from EJ1 to EJ2\n PortProperties.prototype.setPortVisibility = function (visibility) {\n var portVisibility;\n if (visibility & PortVisibility.Visible) {\n portVisibility = portVisibility | PortVisibility.Visible;\n }\n if (visibility & PortVisibility.Hidden) {\n portVisibility = portVisibility | PortVisibility.Hidden;\n }\n if (visibility & PortVisibility.Hover) {\n portVisibility = portVisibility | PortVisibility.Hover;\n }\n if (visibility & PortVisibility.Connect) {\n portVisibility = portVisibility | PortVisibility.Connect;\n }\n return portVisibility;\n };\n /**\n * Get module name.\n * @returns {string} Returns the module name\n */\n PortProperties.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'PortProperties';\n };\n return PortProperties;\n}());\n\nvar Ej1Serialization = /** @__PURE__ @class */ (function () {\n function Ej1Serialization(diagram) {\n this.labelProperties = new LabelProperties(this);\n this.connectorProperties = new ConnectorProperties(this.labelProperties);\n this.portProperties = new PortProperties(this);\n this.nodeProperties = new NodeProperties(this.labelProperties, this.portProperties);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.convertedData = {};\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.items = [];\n this.diagram = diagram;\n }\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Getting the object data from the load diagram and serialize it into from EJ1 to EJ2\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.getSerializedData = function (data) {\n this.convertedData.mode = 'SVG';\n this.convertedData.basicElements = [];\n this.convertedData.width = data.width;\n this.convertedData.height = data.height;\n if (data.nodes && data.nodes.length > 0) {\n this.nodeProperties.renderNodesCollection(this.convertedData, data);\n }\n else {\n this.convertedData.nodes = data.nodes;\n }\n if (data.connectors && data.connectors.length > 0) {\n this.connectorProperties.renderConnectorsCollection(this.convertedData, data);\n }\n else {\n this.convertedData.connectors = data.connectors;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (data.defaultSettings !== undefined) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.convertedData.getNodeDefaults = this.getNodeDefaults(data.defaultSettings.node);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.convertedData.getConnectorDefaults = this.getConnectorDefaults(data.defaultSettings.connector);\n }\n //this.convertedData.setNodeTemplate = this.getNodeTemplate((data as Diagram).nodeTemplate);\n this.setLayers(this.convertedData, data);\n this.setDataSourceSettings(this.convertedData, data);\n this.setRulerSettings(this.convertedData, data);\n this.setSnapSettings(this.convertedData, data);\n if (data.snapSettings.enableSnapToObject) {\n this.convertedData.snapSettings.constraints = this.convertedData.snapSettings.constraints | SnapConstraints.SnapToObject;\n }\n else {\n this.convertedData.snapSettings.constraints = this.convertedData.snapSettings.constraints & ~SnapConstraints.SnapToObject;\n }\n if (data.pageSettings.backgroundImage === undefined) {\n data.pageSettings.pageBackgroundColor = 'transparent';\n data.pageSettings.backgroundImage = {\n source: '',\n scale: 'meet',\n alignment: 'xmidymid'\n };\n data.pageSettings.showPageBreak = false;\n }\n this.setScrollSettings(this.convertedData, data);\n this.setPageSettings(this.convertedData, data);\n this.setContextMenu(this.convertedData, data);\n this.setTooltip(this.convertedData, data);\n this.setModelLayout(this.convertedData, data);\n this.setSelectedItems(this.convertedData, data);\n this.convertedData.constraints = this.setDiagramConstraints(data.constraints);\n this.convertedData.tool = this.setDiagramTool(data.tool);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.convertedData.drawType = data.drawType;\n this.convertedData.commandManager = data.commandManager;\n return this.convertedData;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //declare the node default properties\n Ej1Serialization.prototype.getNodeDefaults = function (node) {\n if (node) {\n return this.nodeProperties.convertToNode(node);\n }\n else {\n return null;\n }\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //declare the node default properties\n Ej1Serialization.prototype.getConnectorDefaults = function (connector) {\n if (connector) {\n return this.connectorProperties.convertToConnector(connector);\n }\n else {\n return null;\n }\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the layers from the EJ1 JSON\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setLayers = function (convertedData, data) {\n convertedData.layers = [];\n if (data.layers.length > 0) {\n for (var i = 0; i < data.layers.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var newLayer = {};\n var layer = data.layers[parseInt(i.toString(), 10)];\n newLayer.id = layer.name;\n newLayer.visible = layer.visible;\n newLayer.lock = layer.lock;\n newLayer.objects = layer.objects;\n convertedData.layers.push(newLayer);\n }\n }\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the dataSourceSettings from EJ1 to EJ2\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setDataSourceSettings = function (convertedData, data) {\n convertedData.dataSourceSettings = {};\n convertedData.dataSourceSettings.id = data.dataSourceSettings.id;\n convertedData.dataSourceSettings.dataManager = data.dataSourceSettings.dataSource;\n convertedData.dataSourceSettings.root = data.dataSourceSettings.root;\n convertedData.dataSourceSettings.parentId = data.dataSourceSettings.parent;\n convertedData.dataSourceSettings.crudAction = {\n read: data.dataSourceSettings.crudAction.read,\n create: data.dataSourceSettings.crudAction.create,\n update: data.dataSourceSettings.crudAction.update,\n destroy: data.dataSourceSettings.crudAction.destroy,\n customFields: data.dataSourceSettings.customFields\n };\n if (data.dataSourceSettings.connectionDataSource) {\n convertedData.dataSourceSettings.connectionDataSource = {};\n convertedData.dataSourceSettings.connectionDataSource.id = data.dataSourceSettings.connectionDataSource.id;\n convertedData.dataSourceSettings.connectionDataSource.dataManager = data.dataSourceSettings.connectionDataSource.dataSource;\n convertedData.dataSourceSettings.connectionDataSource.sourceID = data.dataSourceSettings.connectionDataSource.sourceNode;\n convertedData.dataSourceSettings.connectionDataSource.targetID = data.dataSourceSettings.connectionDataSource.targetNode;\n convertedData.dataSourceSettings.connectionDataSource.sourcePointX = data.dataSourceSettings.connectionDataSource.sourcePointX;\n convertedData.dataSourceSettings.connectionDataSource.sourcePointY = data.dataSourceSettings.connectionDataSource.sourcePointY;\n convertedData.dataSourceSettings.connectionDataSource.targetPointX = data.dataSourceSettings.connectionDataSource.targetPointX;\n convertedData.dataSourceSettings.connectionDataSource.targetPointY = data.dataSourceSettings.connectionDataSource.targetPointY;\n convertedData.dataSourceSettings.connectionDataSource.crudAction = {\n read: data.dataSourceSettings.connectionDataSource.crudAction.read,\n create: data.dataSourceSettings.connectionDataSource.crudAction.create,\n update: data.dataSourceSettings.connectionDataSource.crudAction.update,\n destroy: data.dataSourceSettings.connectionDataSource.crudAction.destroy,\n customFields: data.dataSourceSettings.connectionDataSource.customFields\n };\n }\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the ruler settings\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setRulerSettings = function (convertedData, data) {\n convertedData.rulerSettings = {};\n convertedData.rulerSettings.showRulers = data.rulerSettings.showRulers;\n convertedData.rulerSettings.horizontalRuler = this.setRulerProperties(data.rulerSettings.horizontalRuler);\n convertedData.rulerSettings.verticalRuler = this.setRulerProperties(data.rulerSettings.verticalRuler);\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the orientation of the ruler\n Ej1Serialization.prototype.setRulerProperties = function (ruler) {\n var rulerProperties = {};\n rulerProperties.interval = ruler.interval;\n rulerProperties.segmentWidth = ruler.segmentWidth;\n // rulerProperties.tickAlignment = ruler.tickAlignment === 'rightorbottom' ? 'RightOrBottom' : 'LeftOrTop';\n rulerProperties.markerColor = ruler.markerColor;\n rulerProperties.thickness = ruler.thickness;\n rulerProperties.arrangeTick = ruler.arrangeTick;\n return rulerProperties;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the snap settings\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setSnapSettings = function (convertedData, data) {\n convertedData.snapSettings = {};\n if (data.snapSettings) {\n convertedData.snapSettings.horizontalGridLines = this.setGridLines(data.snapSettings.horizontalGridLines);\n convertedData.snapSettings.verticalGridLines = this.setGridLines(data.snapSettings.verticalGridLines);\n convertedData.snapSettings.snapAngle = data.snapSettings.snapAngle;\n convertedData.snapSettings.snapObjectDistance = data.snapSettings.snapObjectDistance;\n convertedData.snapSettings.constraints = this.setSnapConstraints(data.snapSettings.snapConstraints);\n }\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the snap constraints from EJ1 to EJ2\n Ej1Serialization.prototype.setSnapConstraints = function (constraints) {\n var snapConstraints = SnapConstraints.None;\n if (constraints & SnapConstraints.ShowHorizontalLines) {\n snapConstraints = snapConstraints | SnapConstraints.ShowHorizontalLines;\n }\n if (constraints & SnapConstraints.ShowVerticalLines) {\n snapConstraints = snapConstraints | SnapConstraints.ShowVerticalLines;\n }\n if (constraints & SnapConstraints.ShowLines) {\n snapConstraints = snapConstraints | SnapConstraints.ShowLines;\n }\n if (constraints & SnapConstraints.SnapToHorizontalLines) {\n snapConstraints = snapConstraints | SnapConstraints.SnapToHorizontalLines;\n }\n if (constraints & SnapConstraints.SnapToVerticalLines) {\n snapConstraints = snapConstraints | SnapConstraints.SnapToVerticalLines;\n }\n if (constraints & SnapConstraints.SnapToLines) {\n snapConstraints = snapConstraints | SnapConstraints.SnapToLines;\n }\n return snapConstraints;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the gridlines\n Ej1Serialization.prototype.setGridLines = function (gridlines) {\n var gridLinesProperties = {};\n gridLinesProperties.lineColor = gridlines.lineColor;\n gridLinesProperties.lineDashArray = gridlines.lineDashArray;\n gridLinesProperties.lineIntervals = gridlines.lineInterval;\n gridLinesProperties.snapIntervals = gridlines.snapInterval;\n return gridLinesProperties;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the scroll-settings\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setScrollSettings = function (convertedData, data) {\n convertedData.scrollSettings = {\n horizontalOffset: data.scrollSettings.horizontalOffset,\n verticalOffset: data.scrollSettings.verticalOffset,\n currentZoom: data.scrollSettings.currentZoom,\n viewPortWidth: data.scrollSettings.viewPortWidth,\n viewPortHeight: data.scrollSettings.viewPortHeight,\n minZoom: data.scrollSettings.minZoom,\n maxZoom: data.scrollSettings.maxZoom,\n scrollLimit: (data.pageSettings.scrollLimit).charAt(0).toUpperCase() + (data.pageSettings.scrollLimit).slice(1),\n scrollableArea: data.pageSettings.scrollableArea,\n canAutoScroll: data.enableAutoScroll,\n autoScrollBorder: data.pageSettings.autoScrollBorder\n };\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the page settings\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setPageSettings = function (convertedData, data) {\n convertedData.pageSettings = {\n width: data.pageSettings.pageWidth,\n height: data.pageSettings.pageHeight,\n // eslint-disable-next-line max-len\n margin: { left: data.pageSettings.pageMargin, right: data.pageSettings.pageMargin, top: data.pageSettings.pageMargin, bottom: data.pageSettings.pageMargin },\n orientation: (data.pageSettings.pageOrientation).charAt(0).toUpperCase() + (data.pageSettings.pageOrientation).slice(1),\n // eslint-disable-next-line max-len\n boundaryConstraints: (data.pageSettings.boundaryConstraints).charAt(0).toUpperCase() + (data.pageSettings.boundaryConstraints).slice(1),\n // eslint-disable-next-line max-len\n background: { color: data.pageSettings.pageBackgroundColor, source: data.backgroundImage.source, scale: data.backgroundImage.scale, align: data.backgroundImage.align },\n multiplePage: data.pageSettings.multiplePage,\n showPageBreaks: data.pageSettings.showPageBreak\n };\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the contextmenu settings\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setContextMenu = function (convertedData, data) {\n convertedData.contextMenuSettings = {};\n convertedData.contextMenuSettings.show = data.enableContextMenu;\n if (data.contextMenu !== undefined) {\n convertedData.contextMenuSettings.showCustomMenuOnly = data.contextMenu.showCustomMenuItemsOnly;\n convertedData.contextMenuSettings.items = this.getContextMenuItems(data.contextMenu.items);\n }\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the contextmenu items\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.getContextMenuItems = function (contextMenuItems) {\n var menuItem = {};\n for (var i = 0; i < contextMenuItems.length; i++) {\n var oldMenuItem = contextMenuItems[parseInt(i.toString(), 10)];\n menuItem.id = oldMenuItem.name;\n menuItem.text = oldMenuItem.text;\n this.items.push(menuItem);\n if (contextMenuItems.subItems && contextMenuItems.subItems.length > 0) {\n this.getContextMenuItems(contextMenuItems.subItems);\n }\n }\n return this.items;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the tooltip items\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setTooltip = function (convertedData, data) {\n convertedData.tooltip = {\n content: data.tooltip.templateId,\n relativeMode: data.tooltip.relativeMode\n };\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the model layout for the converted data\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setModelLayout = function (convertedData, data) {\n convertedData.layout = {\n fixedNode: data.layout.fixedNode,\n horizontalSpacing: data.layout.horizontalSpacing,\n verticalSpacing: data.layout.verticalSpacing,\n maxIteration: data.layout.maxIteration,\n springFactor: data.layout.springFactor,\n springLength: data.layout.springLength,\n // eslint-disable-next-line max-len\n margin: { left: data.layout.margin.left, right: data.layout.margin.right, top: data.layout.margin.top, bottom: data.layout.margin.bottom },\n horizontalAlignment: (data.layout.horizontalAlignment).charAt(0).toUpperCase() + (data.layout.horizontalAlignment).slice(1),\n verticalAlignment: (data.layout.verticalAlignment).charAt(0).toUpperCase() + (data.layout.verticalAlignment).slice(1),\n orientation: data.layout.orientation === 'toptobottom' ? 'TopToBottom' : data.layout.orientation === 'bottomtotop' ? 'BottomToTop' : data.layout.orientation === 'righttoleft' ? 'RightToLeft' : 'LeftToRight',\n connectorSegments: data.layout.getConnectorSegments,\n type: (data.layout.type).charAt(0).toUpperCase() + (data.layout.type).slice(1),\n getLayoutInfo: data.layout.getLayoutInfo,\n bounds: data.layout.bounds,\n root: data.layout.root\n };\n if (convertedData.layout && convertedData.layout.type === 'Hierarchicaltree') {\n convertedData.layout.type = 'HierarchicalTree';\n }\n else if (convertedData.layout && convertedData.layout.type === 'Organizationalchart') {\n convertedData.layout.type = 'OrganizationalChart';\n }\n else if (convertedData.layout && convertedData.layout.type === 'Radialtree') {\n convertedData.layout.type = 'RadialTree';\n }\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Sets the selected items to convert the data\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Ej1Serialization.prototype.setSelectedItems = function (convertedData, data) {\n convertedData.selectedItems = {};\n var nodes = [];\n var connectors = [];\n convertedData.selectedItems.nodes = nodes;\n convertedData.selectedItems.connectors = connectors;\n convertedData.selectedItems.offsetX = data.selectedItems.offsetX;\n convertedData.selectedItems.offsetY = data.selectedItems.offsetY;\n convertedData.selectedItems.width = data.selectedItems.width;\n convertedData.selectedItems.height = data.selectedItems.height;\n convertedData.selectedItems.rotateAngle = data.selectedItems.rotateAngle;\n convertedData.selectedItems.constraints = this.setSelectorConstraints(data.selectedItems.constraints);\n convertedData.selectedItems.userHandles = data.selectedItems.userHandles;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the selector constraints from EJ1 to EJ2\n Ej1Serialization.prototype.setSelectorConstraints = function (constraints) {\n var selectorConstraints = SelectorConstraints.None;\n if (constraints & SelectorConstraints.ConnectorSourceThumb) {\n selectorConstraints = selectorConstraints | SelectorConstraints.Rotate;\n }\n if (constraints & SelectorConstraints.ResizeAll) {\n selectorConstraints = selectorConstraints | SelectorConstraints.ResizeAll;\n }\n if (constraints & SelectorConstraints.ResizeSouthEast) {\n selectorConstraints = selectorConstraints | SelectorConstraints.UserHandle;\n }\n if (constraints & SelectorConstraints.ToolTip) {\n selectorConstraints = selectorConstraints | SelectorConstraints.ToolTip;\n }\n if (constraints & SelectorConstraints.All) {\n selectorConstraints = selectorConstraints | SelectorConstraints.All;\n }\n return selectorConstraints;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the diagram constraints from EJ1 to EJ2\n Ej1Serialization.prototype.setDiagramConstraints = function (constraints) {\n var diagramConstraints = DiagramConstraints.None;\n if (constraints & DiagramConstraints.UserInteraction) {\n diagramConstraints = diagramConstraints | DiagramConstraints.UserInteraction;\n }\n if (constraints & DiagramConstraints.ApiUpdate) {\n diagramConstraints = diagramConstraints | DiagramConstraints.ApiUpdate;\n }\n if (constraints & DiagramConstraints.PageEditable) {\n diagramConstraints = diagramConstraints | DiagramConstraints.PageEditable;\n }\n if (constraints & DiagramConstraints.LineRouting) {\n diagramConstraints = diagramConstraints | DiagramConstraints.Bridging;\n }\n if (constraints & DiagramConstraints.Zoom) {\n diagramConstraints = diagramConstraints | DiagramConstraints.Zoom;\n }\n if (constraints & DiagramConstraints.PanX) {\n diagramConstraints = diagramConstraints | DiagramConstraints.PanX;\n }\n if (constraints & DiagramConstraints.PanY) {\n diagramConstraints = diagramConstraints | DiagramConstraints.PanY;\n }\n if (constraints & DiagramConstraints.Pan) {\n diagramConstraints = diagramConstraints | DiagramConstraints.Pan;\n }\n if (constraints & DiagramConstraints.UndoRedo) {\n diagramConstraints = diagramConstraints | DiagramConstraints.UndoRedo;\n }\n if (constraints & DiagramConstraints.ZoomTextEdit) {\n diagramConstraints = diagramConstraints | DiagramConstraints.ZoomTextEdit;\n }\n return diagramConstraints;\n };\n //(EJ2-272287) Provide support to convert the EJ1 diagram to EJ2 diagram\n //Update the diagram tool from EJ1 to EJ2\n Ej1Serialization.prototype.setDiagramTool = function (tool) {\n var diagramTool = DiagramTools.None;\n if (tool & DiagramTools.MultipleSelect) {\n diagramTool = diagramTool | DiagramTools.SingleSelect;\n }\n if (tool & DiagramTools.ZoomPan) {\n diagramTool = diagramTool | DiagramTools.MultipleSelect;\n }\n if (tool & DiagramTools.DrawOnce) {\n diagramTool = diagramTool | DiagramTools.ZoomPan;\n }\n if (tool & DiagramTools.ContinuousDraw) {\n diagramTool = diagramTool | DiagramTools.DrawOnce;\n }\n if (tool & DiagramTools.ContinuousDraw) {\n diagramTool = diagramTool | DiagramTools.ContinuousDraw;\n }\n return diagramTool;\n };\n // /* tslint:disable */\n // /**\n // * To provide the array of modules needed for control rendering\n // *\n // * @returns {ModuleDeclaration[]} To provide the array of modules needed for control rendering .\\\n // * @private\n // */\n // public requiredModules(): ModuleDeclaration[] {\n // const modules: ModuleDeclaration[] = [];\n // modules.push({\n // member: 'NodeProperties',\n // args: []\n // });\n // return modules;\n // }\n /**\n * To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n Ej1Serialization.prototype.destroy = function () {\n /**\n * Destroys the Print and Export module\n */\n };\n /**\n * Get module name.\n *\n * @returns {string} Returns the module name\n */\n Ej1Serialization.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Ej1Serialization';\n };\n return Ej1Serialization;\n}());\n\nvar __extends$C = (undefined && undefined.__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$r = (undefined && undefined.__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\nvar getObjectType$1 = function (obj) {\n var conn = obj;\n if (conn.sourcePoint || conn.targetPoint || conn.sourceID || conn.targetID\n || conn.sourcePortID || conn.targetPortID || conn.sourceDecorator || conn.targetDecorator) {\n return Connector;\n }\n if (obj.shape && (obj.shape instanceof Shape || obj.shape.type)) {\n return Node;\n }\n return Node;\n};\n/**\n * A palette allows to display a group of related symbols and it textually annotates the group with its header.\n */\nvar Palette = /** @__PURE__ @class */ (function (_super) {\n __extends$C(Palette, _super);\n // eslint-disable-next-line\n function Palette(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n __decorate$r([\n Property('')\n ], Palette.prototype, \"id\", void 0);\n __decorate$r([\n Property()\n ], Palette.prototype, \"height\", void 0);\n __decorate$r([\n Property(true)\n ], Palette.prototype, \"expanded\", void 0);\n __decorate$r([\n Property('')\n ], Palette.prototype, \"iconCss\", void 0);\n __decorate$r([\n Property('')\n ], Palette.prototype, \"title\", void 0);\n __decorate$r([\n CollectionFactory(getObjectType$1)\n ], Palette.prototype, \"symbols\", void 0);\n return Palette;\n}(ChildProperty));\n/**\n * customize the drag size of the individual palette items.\n */\nvar SymbolDragSize = /** @__PURE__ @class */ (function (_super) {\n __extends$C(SymbolDragSize, _super);\n function SymbolDragSize() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$r([\n Property()\n ], SymbolDragSize.prototype, \"width\", void 0);\n __decorate$r([\n Property()\n ], SymbolDragSize.prototype, \"height\", void 0);\n return SymbolDragSize;\n}(ChildProperty));\n/**\n * customize the preview size and position of the individual palette items.\n */\nvar SymbolPreview = /** @__PURE__ @class */ (function (_super) {\n __extends$C(SymbolPreview, _super);\n function SymbolPreview() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$r([\n Property()\n ], SymbolPreview.prototype, \"width\", void 0);\n __decorate$r([\n Property()\n ], SymbolPreview.prototype, \"height\", void 0);\n __decorate$r([\n Complex({}, Point)\n ], SymbolPreview.prototype, \"offset\", void 0);\n return SymbolPreview;\n}(ChildProperty));\n/**\n * Represents the Symbol Palette Component.\n * ```html\n * \n * \n * ```\n */\n/**\n * The symbol palette control allows to predefine the frequently used nodes and connectors\n * and to drag and drop those nodes/connectors to drawing area\n */\nvar SymbolPalette = /** @__PURE__ @class */ (function (_super) {\n __extends$C(SymbolPalette, _super);\n //region - protected methods\n /**\n * Constructor for creating the symbol palette Component\n *\n * @param {SymbolPaletteModel} options The symbol palette model.\n * @param {string | HTMLElement} element The symbol palette element.\n */\n function SymbolPalette(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.symbolTable = {};\n /** @private */\n _this.childTable = {};\n _this.info = 'info';\n _this.oldObject = null;\n _this.laneTable = {};\n _this.isExpand = false;\n _this.isExpandMode = false;\n _this.isMethod = false;\n _this.paletteid = 88123;\n _this.checkOnRender = false;\n _this.symbolTooltipObject = null;\n // eslint-disable\n _this.helper = function (e) {\n var clonedElement;\n var id = (_this.selectedSymbol && _this.selectedSymbol.id) || e.sender.target.id.split('_container')[0];\n var symbol = _this.symbolTable[\"\" + id];\n if (symbol && _this.selectedSymbol) {\n _this.selectedSymbols = _this.selectedSymbol.id === symbol.id ? symbol : _this.selectedSymbol;\n //const position: PointModel = this.getMousePosition(e.sender);\n clonedElement = _this.getSymbolPreview(_this.selectedSymbols, e.sender, _this.element);\n clonedElement.setAttribute('paletteId', _this.element.id);\n }\n return clonedElement;\n };\n var child;\n var node;\n for (var i = 0; _this && _this.palettes && i < _this.palettes.length; i++) {\n for (var j = 0; j < _this.palettes[parseInt(i.toString(), 10)].symbols.length; j++) {\n child = _this.palettes[parseInt(i.toString(), 10)].symbols[parseInt(j.toString(), 10)];\n node = options.palettes[parseInt(i.toString(), 10)].symbols[parseInt(j.toString(), 10)];\n if (child && child.shape.type === 'UmlActivity') {\n setUMLActivityDefaults(node, child);\n }\n if (_this.nodeDefaults || _this.connectorDefaults) {\n updateDefaultValues(child, node, child instanceof Node ? _this.nodeDefaults : _this.connectorDefaults);\n }\n }\n }\n return _this;\n }\n /**\n * Refreshes the panel when the symbol palette properties are updated\\\n *\n * @returns { void} Refreshes the panel when the symbol palette properties are updated .\\\n * @param {SymbolPaletteModel} newProp - Defines the new values of the changed properties.\n * @param {SymbolPaletteModel} oldProp - Defines the old values of the changed properties.\n */\n // eslint-disable-next-line\n SymbolPalette.prototype.onPropertyChanged = function (newProp, oldProp) {\n var refresh = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n this.element.style.width = this.width.toString();\n break;\n case 'height':\n this.element.style.height = this.height.toString();\n break;\n case 'symbolPreview':\n break;\n case 'symbolWidth':\n case 'symbolHeight':\n case 'getSymbolInfo':\n if (this.isReact) {\n refresh = false;\n }\n else {\n refresh = true;\n }\n break;\n case 'enableSearch':\n if (newProp.enableSearch && !isBlazor()) {\n this.createTextbox();\n }\n else {\n var divElement = document.getElementById(this.element.id + '_search');\n if (divElement) {\n divElement.parentNode.removeChild(divElement);\n }\n }\n break;\n case 'palettes':\n for (var _b = 0, _c = Object.keys(newProp.palettes); _b < _c.length; _b++) {\n var i = _c[_b];\n var index = Number(i);\n if (!isBlazor() && !this.accordionElement.items[parseInt(index.toString(), 10)]) {\n this.accordionElement.items[parseInt(index.toString(), 10)] = {\n header: newProp.palettes[parseInt(index.toString(), 10)].title || '',\n expanded: newProp.palettes[parseInt(index.toString(), 10)].expanded,\n iconCss: newProp.palettes[parseInt(index.toString(), 10)].iconCss || ''\n };\n }\n if (newProp.palettes[parseInt(index.toString(), 10)].height) {\n var paletteDiv = document.getElementById(this.palettes[parseInt(index.toString(), 10)].id + '_content');\n paletteDiv.style.height = newProp.palettes[parseInt(index.toString(), 10)].height + 'px';\n }\n if (newProp.palettes[parseInt(index.toString(), 10)].iconCss !== undefined) {\n if (!isBlazor()) {\n this.accordionElement.items[parseInt(index.toString(), 10)].iconCss = newProp.palettes[parseInt(index.toString(), 10)].iconCss || '';\n refresh = true;\n }\n }\n if (newProp.palettes[parseInt(index.toString(), 10)].expanded !== undefined && !isBlazor()) {\n if (!this.palettes[parseInt(index.toString(), 10)].isInteraction) {\n this.accordionElement.items[parseInt(index.toString(), 10)].expanded\n = newProp.palettes[parseInt(index.toString(), 10)].expanded;\n this.isExpand = true;\n }\n else {\n this.palettes[parseInt(index.toString(), 10)].isInteraction = false;\n }\n if (!this.isExpandMode && !this.isMethod && !this.isExpand) {\n this.isExpand = true;\n }\n }\n }\n break;\n case 'enableAnimation':\n if (!isBlazor()) {\n if (!this.enableAnimation) {\n this.accordionElement.animation = { expand: { duration: 0 }, collapse: { duration: 0 } };\n }\n else {\n this.accordionElement.animation = { expand: { duration: 400 }, collapse: { duration: 400 } };\n }\n }\n break;\n case 'expandMode':\n if (!isBlazor()) {\n this.accordionElement.expandMode = this.expandMode;\n refresh = true;\n this.isExpandMode = true;\n }\n break;\n case 'allowDrag':\n this.allowDrag = newProp.allowDrag;\n if (!this.allowDrag) {\n this.draggable.helper = function () {\n return null;\n };\n }\n else {\n this.initDraggable();\n this.draggable.helper = this.helper;\n }\n break;\n }\n }\n if (refresh) {\n this.refreshPalettes();\n }\n if (this.isExpand && !refresh) {\n this.refresh();\n this.isExpand = false;\n for (var p = 0; p < this.palettes.length; p++) {\n var paletteElement = this.palettes[parseInt(p.toString(), 10)].id;\n if (window[\"\" + paletteElement]) {\n if (window[\"\" + paletteElement].length > 1) {\n window[\"\" + paletteElement][1].parentNode.removeChild(window[\"\" + paletteElement][1]);\n window[\"\" + paletteElement][1] = null;\n }\n }\n }\n }\n this.isMethod = false;\n };\n /**\n * updateBlazorProperties method\\\n *\n * @returns {void} updateBlazorProperties method .\\\n * @param {SymbolPaletteModel} newProp - provide the scale value.\n *\n * @private\n */\n // public updateBlazorProperties(newProp: SymbolPaletteModel): void {\n // const blazorInterop: string = 'sfBlazor';\n // const blazor: string = 'Blazor';\n // if (window && window[`${blazor}`]) {\n // const palObj: object = { palette: newProp.palettes };\n // const obj: object = { 'methodName': 'UpdateBlazorProperties', 'paletteobj': palObj };\n // window[`${blazorInterop}`].updateBlazorProperties(obj, this);\n // }\n // }\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Get the properties to be maintained in the persisted state.\n */\n SymbolPalette.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initializes the values of private members.\n *\n * @returns {void} Initializes the values of private members.\n * @private\n */\n SymbolPalette.prototype.preRender = function () {\n var _this = this;\n this.l10n = new L10n(this.getModuleName(), this.defaultLocale(), this.locale);\n if (this.element.id === '') {\n var collection = document.getElementsByClassName('e-symbolpalette').length;\n this.element.id = 'symbolpalette_' + this.paletteid + '_' + collection;\n }\n this.element.style.overflow = 'auto';\n this.element.style.height = this.height.toString();\n this.element.style.width = this.width.toString();\n if (this.enableSearch && !isBlazor()) {\n this.createTextbox();\n }\n //create accordion element\n if (!isBlazor()) {\n var accordionDiv = createHtmlElement('div', { id: this.element.id + '_container' });\n this.accordionElement = new Accordion({\n expandMode: this.expandMode\n });\n if (!this.enableAnimation) {\n this.accordionElement.animation = { expand: { duration: 0 }, collapse: { duration: 0 } };\n }\n this.accordionElement.created = function () {\n _this.checkOnRender = true;\n };\n this.accordionElement.expanded = function (args) {\n var index = _this.accordionElement.items.indexOf(args.item);\n var isAllowDatabind = _this.allowServerDataBinding;\n _this.allowServerDataBinding = false;\n _this.palettes[parseInt(index.toString(), 10)].expanded = args.isExpanded;\n _this.palettes[parseInt(index.toString(), 10)].isInteraction = true;\n _this.allowServerDataBinding = isAllowDatabind;\n };\n this.accordionElement.expanding = function (args) {\n if (_this.checkOnRender) {\n // eslint-disable-next-line\n var diagramArgs = {\n element: args.element, content: args.content, index: args.index, cancel: false,\n isExpanded: args.isExpanded, palette: _this.palettes[args.index]\n };\n var event_1 = 'paletteExpanding';\n _this.trigger(event_1, diagramArgs);\n args.cancel = diagramArgs.cancel;\n }\n };\n this.element.appendChild(accordionDiv);\n }\n var measureWindowElement = 'measureElement';\n if (window[\"\" + measureWindowElement]) {\n window[\"\" + measureWindowElement] = null;\n }\n createMeasureElements();\n this.unWireEvents();\n this.wireEvents();\n };\n /**\n * EJ2-61531- Localization support for the symbol palette search box placeholder.\n * @returns {Object} defaultLocale\n */\n SymbolPalette.prototype.defaultLocale = function () {\n return { SearchShapes: 'Search Shapes' };\n };\n /**\n * Renders the rulers.\n *\n * @returns {void} Renders the rulers.\n * @private\n */\n SymbolPalette.prototype.render = function () {\n this.diagramRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), false);\n this.svgRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), true);\n this.updatePalettes();\n if (!isBlazor()) {\n this.accordionElement.appendTo('#' + this.element.id + '_container');\n }\n this.renderComplete();\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n SymbolPalette.prototype.getModuleName = function () {\n return 'SymbolPalette';\n };\n /**\n * To provide the array of modules needed for control rendering.\n *\n * @returns {ModuleDeclaration[]} To provide the array of modules needed for control rendering .\n * @private\n */\n SymbolPalette.prototype.requiredModules = function () {\n var modules = [];\n modules.push({\n member: 'Bpmn',\n args: []\n });\n return modules;\n };\n /**\n *To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n SymbolPalette.prototype.destroy = function () {\n if (this.allowDrag) {\n this.draggable.destroy();\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n var content = document.getElementById(this.element.id + '_container');\n if (content) {\n this.element.removeChild(content);\n var measureElemnt = 'measureElement';\n if (window[\"\" + measureElemnt]) {\n window[\"\" + measureElemnt].usageCount -= 1;\n var measureElementCount = 'measureElementCount';\n window[\"\" + measureElementCount]--;\n if (window[\"\" + measureElementCount] === 0) {\n window[\"\" + measureElemnt].parentNode.removeChild(window[\"\" + measureElemnt]);\n window[\"\" + measureElemnt] = null;\n }\n }\n }\n content = document.getElementById(this.element.id + '_search');\n if (content) {\n content.parentNode.removeChild(content);\n }\n }\n };\n /**\n * Add particular palettes to symbol palette at runtime.\\\n *\n * @returns { void} Refreshes the ruler when the Ruler properties are updated .\\\n * @param { PaletteModel[]} palettes -Defines the collection of palettes to be added.\n */\n SymbolPalette.prototype.addPalettes = function (palettes) {\n var palette;\n for (var i = 0; i < palettes.length; i++) {\n var isEnableServerDatabind = this.allowServerDataBinding;\n this.isProtectedOnChange = true;\n this.allowServerDataBinding = false;\n palette = new Palette(this, 'palettes', palettes[parseInt(i.toString(), 10)], true);\n this.palettes.push(palette);\n this.initSymbols(palette);\n this.allowServerDataBinding = isEnableServerDatabind;\n this.isProtectedOnChange = false;\n this.renderPalette(palette);\n }\n this.bulkChanges = {};\n if (!isBlazor()) {\n this.accordionElement.refresh();\n }\n };\n /**\n * removePalette method\\\n *\n * @returns {void} removePalette method .\\\n * @param {string} paletteId - provide the scale value.\n *\n * @private\n */\n SymbolPalette.prototype.removePalette = function (paletteId) {\n for (var i = 0; i < this.palettes.length; i++) {\n if (this.palettes[parseInt(i.toString(), 10)].id === paletteId) {\n this.palettes.splice(i, 1);\n if (!isBlazor()) {\n this.accordionElement.items.splice(i, 1);\n }\n break;\n }\n }\n };\n /**\n * Remove particular palettes to symbol palette at runtime \\\n *\n * @returns {void} Remove particular palettes to symbol palette at runtime .\\\n * @param {string[]} palettes - provide the scale value.\n */\n SymbolPalette.prototype.removePalettes = function (palettes) {\n var isEnableServerDatabind = this.allowServerDataBinding;\n this.allowServerDataBinding = false;\n for (var i = 0; i < palettes.length; i++) {\n this.removePalette(palettes[parseInt(i.toString(), 10)]);\n }\n if (!isBlazor()) {\n this.accordionElement.refresh();\n }\n else {\n this.updatePalettes();\n }\n this.allowServerDataBinding = isEnableServerDatabind;\n };\n //end region - protected methods\n //region - private methods to render symbols\n /**\n * Method to initialize the items in the symbols \\\n *\n * @returns {void} Method to initialize the items in the symbols .\\\n * @param {PaletteModel} symbolGroup - provide the scale value.\n *\n */\n SymbolPalette.prototype.initSymbols = function (symbolGroup) {\n var group = [];\n var laneHeight = 0;\n var laneWidth = 0;\n for (var _i = 0, _a = symbolGroup.symbols; _i < _a.length; _i++) {\n var symbol = _a[_i];\n if (symbol.shape.type === 'SwimLane') {\n var swimLaneObj = symbol;\n var swimLaneShape = symbol.shape;\n var isHorizontal = (swimLaneShape.orientation === 'Horizontal') ? true : false;\n if (swimLaneShape.isLane) {\n laneHeight = isHorizontal ? this.symbolHeight - this.symbolHeight / 2 : this.symbolHeight - this.symbolHeight / 4;\n laneWidth = isHorizontal ? this.symbolWidth - this.symbolWidth / 4 : this.symbolWidth - this.symbolWidth / 2;\n this.laneTable[symbol.id] = { height: laneHeight, width: laneWidth };\n var header = swimLaneShape.lanes[0].header;\n var laneStyle = swimLaneShape.lanes[0].style;\n var headerStyle = header.style;\n var headerObj = {\n id: 'header' + randomId(), shape: { type: 'Basic', shape: 'Rectangle' },\n width: isHorizontal ? header.width : swimLaneObj.width,\n height: isHorizontal ? swimLaneObj.height : header.height,\n style: headerStyle,\n annotations: [{ content: header.annotation.content }]\n };\n headerObj.offsetX = headerObj.width / 2;\n headerObj.offsetY = headerObj.height / 2;\n this.addPaletteItem(symbolGroup.id, headerObj);\n var laneObj = {\n id: 'lane' + randomId(), shape: { type: 'Basic', shape: 'Rectangle' },\n width: isHorizontal ? (swimLaneObj.width - header.width) : swimLaneObj.width,\n height: isHorizontal ? swimLaneObj.height : (swimLaneObj.height - header.height),\n style: laneStyle\n };\n laneObj.offsetX = isHorizontal ? (headerObj.width + (laneObj.width / 2)) : laneObj.width / 2;\n laneObj.offsetY = isHorizontal ? laneObj.height / 2 : (headerObj.height + (laneObj.height / 2));\n this.addPaletteItem(symbolGroup.id, laneObj);\n swimLaneObj.children = [headerObj.id, laneObj.id];\n }\n else if (swimLaneShape.isPhase) {\n laneHeight = swimLaneObj.height ? swimLaneObj.height : this.symbolHeight;\n laneWidth = swimLaneObj.width ? swimLaneObj.width : this.symbolWidth;\n symbol.shape.type = 'Path';\n if (isHorizontal) {\n symbol.shape.data = 'M0,0 L' + laneWidth + ',' + '0';\n }\n else {\n symbol.shape.data = 'M0,0 L0,' + laneWidth;\n }\n }\n }\n //Rendering the UML node as an HTML group node ensures that it is visually represented exactly as intended in the diagram\n if (symbol.shape.type === 'UmlClassifier' && !symbol.shape.relationship) {\n var umlObj = symbol;\n var newObj = void 0;\n var getStyle = void 0;\n if (symbol.style.fill === 'white') {\n getStyle = {\n fill: '#26A0DA'\n };\n }\n else {\n getStyle = {\n fill: symbol.style.fill\n };\n }\n if (symbol.shape.classifier === 'Class') {\n newObj = {\n id: 'node' + randomId(), shape: {\n type: 'HTML', content: ''\n },\n width: umlObj.width ? umlObj.width : 100,\n height: umlObj.height ? umlObj.height : 100,\n style: getStyle,\n offsetX: umlObj.width ? umlObj.width / 2 : 50,\n offsetY: umlObj.height ? umlObj.height / 2 : 50\n };\n this.addPaletteItem(symbolGroup.id, newObj);\n }\n else if (symbol.shape.classifier === 'Enumeration') {\n newObj = {\n id: 'node' + randomId(), shape: {\n type: 'HTML', content: ''\n },\n width: umlObj.width ? umlObj.width : 100,\n height: umlObj.height ? umlObj.height : 100,\n style: getStyle,\n offsetX: umlObj.width ? umlObj.width / 2 : 50,\n offsetY: umlObj.height ? umlObj.height / 2 : 50\n };\n this.addPaletteItem(symbolGroup.id, newObj);\n }\n else if (symbol.shape.classifier === 'Interface') {\n newObj = {\n id: 'node' + randomId(), shape: {\n type: 'HTML', content: ''\n },\n width: umlObj.width ? umlObj.width : 100,\n height: umlObj.height ? umlObj.height : 100,\n style: getStyle,\n offsetX: umlObj.width ? umlObj.width / 2 : 50,\n offsetY: umlObj.height ? umlObj.height / 2 : 50\n };\n this.addPaletteItem(symbolGroup.id, newObj);\n }\n var memberObj = {\n id: 'member' + randomId(), shape: { type: 'HTML', content: '' },\n width: umlObj.width ? umlObj.width : 100,\n height: umlObj.height ? umlObj.height : 100,\n offsetX: umlObj.width ? umlObj.width / 2 : 50,\n offsetY: umlObj.height ? umlObj.height / 2 + (newObj.height / 2) : 50 + (newObj.height / 2)\n };\n this.addPaletteItem(symbolGroup.id, memberObj);\n umlObj.children = [newObj.id, memberObj.id];\n }\n //Set the strokeDashArray for specific connectors to ensure that it is visually represented exactly as intended in the diagram\n if (symbol.shape.type === 'UmlClassifier' && symbol.shape.relationship) {\n if (symbol.shape.relationship === 'Inheritance') {\n symbol.style.strokeDashArray = symbol.style.strokeDashArray ? symbol.style.strokeDashArray : '4 4';\n }\n if (symbol.shape.relationship === 'Dependency') {\n symbol.style.strokeDashArray = symbol.style.strokeDashArray ? symbol.style.strokeDashArray : '4 4';\n }\n }\n if (symbol instanceof Node) {\n var getNodeDefaults = getFunction(this.getNodeDefaults);\n if (getNodeDefaults) {\n getNodeDefaults(symbol, this);\n }\n }\n else if (symbol instanceof Connector) {\n var getConnectorDefaults = getFunction(this.getConnectorDefaults);\n if (getConnectorDefaults) {\n getConnectorDefaults(symbol, this);\n }\n }\n this.symbolTable[symbol.id] = symbol;\n if (symbol instanceof Node && symbol.children) {\n group.push(symbol);\n }\n }\n for (var i = 0; i < group.length; i++) {\n var node = void 0;\n for (var j = 0; j < group[parseInt(i.toString(), 10)].children.length; j++) {\n node = (this.symbolTable[group[parseInt(i.toString(), 10)].children[parseInt(j.toString(), 10)]]);\n if (node) {\n this.childTable[node.id] = node;\n node.parentId = group[parseInt(i.toString(), 10)].id;\n }\n }\n }\n for (var _b = 0, _c = symbolGroup.symbols; _b < _c.length; _b++) {\n var symbol = _c[_b];\n if (!(symbol instanceof Node && symbol.children)) {\n this.prepareSymbol(symbol);\n }\n }\n for (var _d = 0, group_1 = group; _d < group_1.length; _d++) {\n var symbol = group_1[_d];\n this.prepareSymbol(symbol);\n }\n };\n SymbolPalette.prototype.renderPalette = function (symbolGroup) {\n var style = 'display:none;overflow:auto;';\n if (symbolGroup.height) {\n style += 'height:' + symbolGroup.height + 'px';\n }\n var paletteParentDiv = document.getElementById(symbolGroup.id);\n var paletteDiv = createHtmlElement('div', { 'id': symbolGroup.id, style: style, class: 'e-remove-palette' });\n this.element.appendChild(paletteDiv);\n if (!isBlazor()) {\n var item = {\n header: symbolGroup.title, expanded: symbolGroup.expanded,\n content: '#' + symbolGroup.id, iconCss: symbolGroup.iconCss\n };\n this.accordionElement.items.push(item);\n }\n this.renderSymbols(symbolGroup, paletteDiv);\n };\n /**\n * Used to add the palette item as nodes or connectors in palettes \\\n *\n * @returns {void} Used to add the palette item as nodes or connectors in palettes .\\\n * @param {string} paletteName - provide the scale value.\n * @param {NodeModel | ConnectorModel} paletteSymbol - provide the scale value.\n * @param {boolean} isChild - provide the scale value.\n */\n SymbolPalette.prototype.addPaletteItem = function (paletteName, paletteSymbol, isChild) {\n paletteSymbol = cloneObject(paletteSymbol);\n //let refresh: boolean;\n for (var i = 0; i < this.palettes.length; i++) {\n var symbolPaletteGroup = this.palettes[parseInt(i.toString(), 10)];\n if (symbolPaletteGroup.id.indexOf(paletteName) !== -1) {\n // eslint-disable-next-line\n var param = [undefined, symbolPaletteGroup, 'symbols', {}, true];\n // eslint-disable-next-line\n var obj = new (Function.prototype.bind.apply(getObjectType$1(paletteSymbol), param));\n for (var i_1 = 0; i_1 < Object.keys(paletteSymbol).length; i_1++) {\n var isEnableServerDatabind_1 = this.allowServerDataBinding;\n this.allowServerDataBinding = false;\n obj[Object.keys(paletteSymbol)[parseInt(i_1.toString(), 10)]]\n = paletteSymbol[Object.keys(paletteSymbol)[parseInt(i_1.toString(), 10)]];\n this.allowServerDataBinding = isEnableServerDatabind_1;\n }\n updateDefaultValues(obj, paletteSymbol, obj instanceof Node ? this.nodeDefaults : this.connectorDefaults);\n symbolPaletteGroup.symbols.push(obj);\n var isEnableServerDatabind = this.allowServerDataBinding;\n this.allowServerDataBinding = false;\n this.prepareSymbol(obj);\n this.allowServerDataBinding = isEnableServerDatabind;\n this.symbolTable[obj.id] = obj;\n if (isChild) {\n this.childTable[obj.id] = obj;\n }\n else {\n var paletteDiv = document.getElementById(symbolPaletteGroup.id);\n if (paletteDiv) {\n paletteDiv.appendChild(this.getSymbolContainer(obj, paletteDiv));\n }\n }\n break;\n }\n }\n };\n /**\n * Used to remove the palette item as nodes or connectors in palettes \\\n *\n * @returns {void} Used to remove the palette item as nodes or connectors in palettes .\\\n * @param {string} paletteName - provide the scale value.\n * @param {string} symbolId - provide the scale value.\n */\n SymbolPalette.prototype.removePaletteItem = function (paletteName, symbolId) {\n var refresh;\n for (var i = 0; i < this.palettes.length; i++) {\n var symbolPaletteGroup = this.palettes[parseInt(i.toString(), 10)];\n if (symbolPaletteGroup.id.indexOf(paletteName) !== -1) {\n for (var _i = 0, _a = symbolPaletteGroup.symbols; _i < _a.length; _i++) {\n var symbol = _a[_i];\n if (symbol.id.indexOf(symbolId) !== -1) {\n var index = symbolPaletteGroup.symbols.indexOf(symbol);\n symbolPaletteGroup.symbols.splice(index, 1);\n if (symbol.children) {\n var parentNode = symbol.children;\n for (var i_2 = 0; i_2 < parentNode.length; i_2++) {\n delete this.symbolTable[(parentNode[parseInt(i_2.toString(), 10)])];\n }\n }\n delete this.symbolTable[symbol.id];\n var element = document.getElementById(symbol.id + '_container');\n element.parentNode.removeChild(element);\n refresh = true;\n break;\n }\n }\n }\n if (refresh) {\n break;\n }\n }\n };\n SymbolPalette.prototype.prepareSymbol = function (symbol) {\n var width;\n var sw;\n var height;\n var sh;\n var stackPanel = new StackPanel();\n var obj = symbol;\n var content;\n var symbolContainer = new Canvas();\n var container = (symbol instanceof Node) ? symbol.initContainer() : null;\n if (container && !container.children) {\n container.children = [];\n }\n //preparing objects\n var getSymbolTemplate = getFunction(this.getSymbolTemplate);\n if (getSymbolTemplate) {\n content = getSymbolTemplate(symbol);\n }\n if (!content) {\n if (obj.children) {\n content = this.getContainer(obj, container);\n }\n else {\n if (symbol instanceof Connector && symbol.shape.type === 'UmlClassifier' && symbol.shape.relationship) {\n content = symbol.init(this);\n for (var i = content.children.length - 1; i >= 0; i--) {\n if (content.children[parseInt(i.toString(), 10)] instanceof TextElement) {\n content.children.splice(i, 1);\n }\n }\n }\n else {\n content = symbol.init(this);\n }\n if (symbol instanceof Node && symbol.parentId) {\n container.children.push(content);\n }\n }\n }\n if (!symbol.parentId) {\n var symbolInfo = { width: this.symbolWidth, height: this.symbolHeight };\n var getSymbolInfo = getFunction(this.getSymbolInfo);\n if (getSymbolInfo) {\n symbolInfo = getSymbolInfo(symbol);\n }\n symbolInfo = symbolInfo || this.symbolInfo || {};\n if (symbol.shape && symbol.shape.isPhase) {\n symbolInfo.width = symbolInfo.width || this.symbolWidth;\n symbolInfo.height = symbolInfo.height || this.symbolHeight;\n }\n //defining custom templates\n content.relativeMode = 'Object';\n content.horizontalAlignment = content.verticalAlignment = 'Center';\n symbolContainer.style.strokeColor = symbolContainer.style.fill = 'none';\n symbolContainer.children = [content];\n content.measure(new Size());\n content.arrange(content.desiredSize);\n width = symbolInfo.width = symbolInfo.width ||\n (obj.width !== undefined ? content.actualSize.width : undefined) || this.symbolWidth;\n height = symbolInfo.height = symbolInfo.height ||\n (obj.height !== undefined ? content.actualSize.height : undefined) || this.symbolHeight;\n if (width !== undefined && height !== undefined) {\n var actualWidth = width;\n var actualHeight = height;\n //let isLane: boolean = (symbol.shape as SwimLane).isLane ? true : false;\n var isPhase = symbol.shape.isPhase ? true : false;\n if (this.symbolWidth !== undefined) {\n actualWidth = this.symbolWidth - this.symbolMargin.left - this.symbolMargin.right;\n }\n else {\n width += obj.style.strokeWidth;\n }\n if (this.symbolHeight !== undefined) {\n actualHeight = this.symbolHeight - this.symbolMargin.top - this.symbolMargin.bottom;\n }\n else {\n height += obj.style.strokeWidth;\n }\n //Bug 873843: Issue with node height and width in the symbol palette. Checked !== Bpmn to avoid the actual height decrement for bpmn nodes\n if (symbol.shape && symbol.shape.type !== 'Bpmn' && symbolInfo.description && symbolInfo.description.text !== '') {\n actualHeight -= 20; // default height of the text have been reduced from the container.\n }\n sw = actualWidth / ((!isPhase && content.width) || width);\n sh = actualHeight / ((!isPhase && content.height) || height);\n if (symbolInfo.fit) {\n sw = actualWidth / symbolInfo.width;\n sh = actualHeight / symbolInfo.height;\n }\n width = actualWidth;\n height = actualHeight;\n sw = sh = Math.min(sw, sh);\n symbolContainer.width = width;\n symbolContainer.height = height;\n content.width = symbolInfo.width;\n content.height = symbolInfo.height;\n this.scaleSymbol(symbol, symbolContainer, sw, sh, width, height);\n }\n else {\n var outerBounds = void 0;\n if (symbol instanceof Connector) {\n outerBounds = getOuterBounds(symbol);\n }\n content.width = symbol.width || (outerBounds) ? outerBounds.width : content.actualSize.width;\n content.height = symbol.height || (outerBounds) ? outerBounds.height : content.actualSize.height;\n }\n symbol.wrapper = stackPanel;\n stackPanel.children = [symbolContainer];\n content.pivot = stackPanel.pivot = { x: 0, y: 0 };\n stackPanel.id = content.id + '_symbol';\n stackPanel.style.fill = stackPanel.style.strokeColor = 'transparent';\n if (symbol instanceof Node) {\n stackPanel.offsetX = symbol.style.strokeWidth / 2;\n stackPanel.offsetY = symbol.style.strokeWidth / 2;\n }\n else {\n stackPanel.offsetX = 0.5;\n stackPanel.offsetY = 0.5;\n }\n //symbol description-textElement\n this.getSymbolDescription(symbolInfo, width, stackPanel, symbol);\n //EJ2-867827 - In diagram palette symbols, part of the symbol is not visible in left and top side\n stackPanel.padding = { left: 1, right: 1, bottom: 1, top: 1 };\n stackPanel.measure(new Size());\n stackPanel.arrange(stackPanel.desiredSize);\n symbolInfo.width = symbolInfo.width || content.actualSize.width;\n symbolInfo.height = symbolInfo.height || content.actualSize.height;\n symbol[this.info] = symbolInfo;\n }\n if (symbol.parentId) {\n container.measure(new Size(obj.width, obj.height));\n container.arrange(container.desiredSize);\n }\n };\n // private getBlazorSymbolInfo(symbol: NodeModel | ConnectorModel, symbolInfo: SymbolInfo): SymbolInfo {\n // const node: NodeModel | ConnectorModel = symbol as NodeModel | ConnectorModel;\n // const shapeSymbolInfo: SymbolPaletteInfoModel = node.symbolInfo;\n // if (shapeSymbolInfo) {\n // symbolInfo.description = shapeSymbolInfo.description || this.symbolInfo.description;\n // symbolInfo.fit = shapeSymbolInfo.fit || this.symbolInfo.fit;\n // symbolInfo.height = shapeSymbolInfo.height || this.symbolInfo.height;\n // symbolInfo.width = shapeSymbolInfo.width || this.symbolInfo.width;\n // symbolInfo.tooltip = shapeSymbolInfo.tooltip || this.symbolInfo.tooltip;\n // symbolInfo.template = shapeSymbolInfo.template || this.symbolInfo.template;\n // }\n // return symbolInfo;\n // }\n SymbolPalette.prototype.getContainer = function (obj, container) {\n container.measureChildren = false;\n var bounds;\n var child = obj.children;\n container.children = [];\n for (var i = 0; i < child.length; i++) {\n if (this.symbolTable[child[parseInt(i.toString(), 10)]]) {\n container.children.push(this.symbolTable[child[parseInt(i.toString(), 10)]].wrapper);\n }\n }\n container.measure(new Size(obj.width, obj.height));\n container.arrange(container.desiredSize);\n if (container.bounds.x !== 0 || container.bounds.y !== 0) {\n bounds = container.bounds;\n arrangeChild(obj, bounds.x, bounds.y, this.symbolTable, false, this);\n container = this.getContainer(obj, container);\n }\n return container;\n };\n /**\n * Feature [EJ2- 47318] - Support for the change of the symbol description\n * Feature [EJ2- 50705] - Support to add margin between the text and symbols\n */\n SymbolPalette.prototype.getSymbolDescription = function (symbolInfo, width, parent, symbol) {\n if (symbolInfo && symbolInfo.description && symbolInfo.description.text) {\n var textElement = new TextElement();\n //symbol description-textElement\n symbolInfo.description.overflow = symbolInfo.description.overflow || 'Ellipsis';\n symbolInfo.description.wrap = symbolInfo.description.wrap || 'WrapWithOverflow';\n textElement.id = parent.id + '_text';\n textElement.content = symbolInfo.description.text;\n textElement.width = width;\n textElement.height = 20;\n textElement.style.strokeColor = 'transparent';\n textElement.style.color = symbolInfo.description.color || 'black';\n textElement.style.fill = symbolInfo.description.fill || 'transparent';\n textElement.style.fontFamily = symbolInfo.description.fontFamily || 'Arial';\n textElement.style.fontSize = symbolInfo.description.fontSize || 12;\n textElement.style.bold = symbolInfo.description.bold || false;\n textElement.style.italic = symbolInfo.description.italic || false;\n textElement.style.textDecoration = symbolInfo.description.textDecoration || 'None';\n textElement.style.strokeWidth = 0;\n textElement.style.textWrapping = symbolInfo.description.wrap;\n textElement.style.textOverflow = symbolInfo.description.overflow;\n //Bug 873843: Issue with node height and width in the symbol palette. Added below to set margin bottom value for bpmn symbol with description.\n if (symbol.shape && symbol.shape.type === 'Bpmn') {\n textElement.margin = {\n left: 0, right: 0,\n top: symbolInfo.description.margin ? symbolInfo.description.margin.top : 0,\n bottom: symbolInfo.description.margin ? symbolInfo.description.margin.bottom : this.symbolMargin.bottom\n };\n }\n else {\n textElement.margin = {\n left: 0, right: 0,\n top: symbolInfo.description.margin ? symbolInfo.description.margin.top : 0,\n bottom: symbolInfo.description.margin ? symbolInfo.description.margin.bottom : 5\n };\n }\n parent.children.push(textElement);\n }\n };\n SymbolPalette.prototype.renderSymbols = function (symbolGroup, parentDiv) {\n for (var _i = 0, _a = symbolGroup.symbols; _i < _a.length; _i++) {\n var symbol = _a[_i];\n if (!symbol.parentId) {\n this.getSymbolContainer(symbol, parentDiv);\n }\n }\n };\n SymbolPalette.prototype.getSymbolPreview = function (\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n symbol, evt, parentDiv) {\n this.allowServerDataBinding = false;\n var canvas;\n var sw;\n var sh;\n var symbolPreviewWidth = symbol.wrapper.children[0].desiredSize.width + symbol.style.strokeWidth;\n var symbolPreviewHeight = symbol.wrapper.children[0].desiredSize.height + symbol.style.strokeWidth;\n var content = symbol.wrapper.children[0].children[0];\n var symbolPreview = symbol.previewSize;\n if ((symbol && (symbolPreview.width || symbolPreview.height)) ||\n this.symbolPreview.width !== undefined || this.symbolPreview.height !== undefined) {\n symbolPreviewWidth = (symbolPreview.width || this.symbolPreview.width || symbolPreviewWidth) - symbol.style.strokeWidth;\n symbolPreviewHeight = (symbolPreview.height || this.symbolPreview.height || symbolPreviewHeight) - symbol.style.strokeWidth;\n // EJ2-56887 - Connector do not get rendered properly in symbol palette.\n // Added below code to check if connector width is less than strokewidth means then set symbol width for connector.\n if (symbol instanceof Connector) {\n if (content.actualSize.width <= symbol.style.strokeWidth) {\n content.actualSize.width = this.symbolWidth;\n }\n if (content.actualSize.height <= symbol.style.strokeWidth) {\n content.actualSize.height = this.symbolHeight;\n }\n }\n sw = symbolPreviewWidth / content.actualSize.width;\n sh = symbolPreviewHeight / content.actualSize.height;\n sw = sh = Math.min(sw, sh);\n var symbolWidth = content.actualSize.width * sw;\n var symbolHeight = content.actualSize.height * sh;\n symbol.wrapper.children[0].width = symbolPreviewWidth;\n symbol.wrapper.children[0].height = symbolPreviewHeight;\n this.measureAndArrangeSymbol(content, symbol instanceof Node);\n this.scaleSymbol(symbol, symbol.wrapper.children[0], sw, sh, symbolWidth, symbolHeight, true);\n symbolPreviewWidth = symbolWidth;\n symbolPreviewHeight = symbolHeight;\n }\n var prevPosition = { x: content.offsetX, y: content.offsetY };\n content.offsetX = content.offsetY = symbol.style.strokeWidth / 2;\n content.pivot = { x: 0, y: 0 };\n this.measureAndArrangeSymbol(content, symbol instanceof Node);\n var previewContainer = createHtmlElement('div', { 'draggable': 'true', 'class': 'e-dragclone', 'style': 'pointer-events:none' });\n var div;\n document.body.appendChild(previewContainer);\n var style = 'margin:5px;';\n if (symbol.shape.type === 'Native') {\n canvas = createSvgElement('svg', {\n id: symbol.id + '_preview',\n width: Math.ceil(symbolPreviewWidth) + 1,\n height: Math.ceil(symbolPreviewHeight) + 1\n });\n var gElement = createSvgElement('g', { id: symbol.id + '_g' });\n canvas.appendChild(gElement);\n previewContainer.appendChild(canvas);\n this.svgRenderer.renderElement(content, gElement, undefined, undefined, canvas);\n //EJ2-838575 - for refreshing the symbols after dragged\n this.prepareSymbol(symbol);\n }\n else if (symbol.shape.type === 'HTML') {\n div = this.getHtmlSymbol(symbol, canvas, previewContainer, symbolPreviewHeight, symbolPreviewWidth, true);\n //EJ2-838575 - for refreshing the symbols after dragged\n this.prepareSymbol(symbol);\n }\n else if (symbol.shape.type === 'UmlClassifier' && !symbol.shape.relationship) {\n if (symbol.children &&\n symbol.children.length > 0 && groupHasType(symbol, 'HTML', this.childTable)) {\n div = this.getHtmlSymbol(symbol, canvas, previewContainer, symbol.wrapper.actualSize.height, symbol.wrapper.actualSize.width, true);\n this.prepareSymbol(symbol);\n }\n }\n else {\n if (symbol.children &&\n symbol.children.length > 0 && groupHasType(symbol, 'HTML', this.childTable)) {\n div = this.getGroupParent(symbol, canvas, previewContainer, symbol.wrapper.actualSize.height, symbol.wrapper.actualSize.width, true);\n //EJ2-838575 - for refreshing the symbols after dragged\n this.prepareSymbol(symbol);\n }\n else {\n canvas = CanvasRenderer.createCanvas(symbol.id + '_preview', (Math.ceil(symbolPreviewWidth) + symbol.style.strokeWidth + 1) * 2, (Math.ceil(symbolPreviewHeight) + symbol.style.strokeWidth + 1) * 2);\n previewContainer.appendChild(canvas);\n // BLAZ-3223: translate applied only for Basic and Flow now and need to add for remaining shapes in future\n if (symbol.shape.type === 'Basic' || symbol.shape.type === 'Flow') {\n style += 'transform: scale(0.5) translate(-' + canvas.width / 2 + 'px, -' + canvas.height / 2 + 'px);';\n }\n else {\n style += 'transform:scale(0.5);';\n }\n canvas.setAttribute('transform-origin', '0 0');\n var index = 2;\n if (symbol instanceof Connector) {\n index = 1.9;\n }\n canvas.getContext('2d').setTransform(index, 0, 0, index, 0, 0);\n this.diagramRenderer.renderElement(content, canvas, undefined);\n //EJ2-838575 - for refreshing the symbols after dragged\n this.prepareSymbol(symbol);\n }\n }\n applyStyleAgainstCsp(((div && (symbol.shape.type === 'HTML' || symbol.children\n && symbol.children.length > 0)) ? div : canvas), style);\n content.offsetX = prevPosition.x;\n content.offsetY = prevPosition.y;\n this.allowServerDataBinding = true;\n return previewContainer;\n };\n SymbolPalette.prototype.measureAndArrangeSymbol = function (content, isNode) {\n if (content.children && !isNode) {\n content.children[0].transform = Transform.Self;\n }\n content.measure(new Size());\n content.arrange(content.desiredSize);\n if (content.children && content.children.length > 0) {\n content.children[0].transform = Transform.Parent;\n }\n };\n SymbolPalette.prototype.updateSymbolSize = function (symbol, width, height) {\n var element = symbol.wrapper.children[0].children[0];\n var strokeWidth = symbol.style.strokeWidth;\n element.width = (width || element.width) - (strokeWidth + 1);\n element.height = (height || element.height) - (strokeWidth + 1);\n symbol.wrapper.measure(new Size());\n symbol.wrapper.arrange(symbol.wrapper.desiredSize);\n };\n SymbolPalette.prototype.getSymbolContainer = function (symbol, parentDiv, preview) {\n var symbolInfo = this.symbolTable[symbol.id][this.info];\n var size = this.getSymbolSize(symbol, symbolInfo);\n var width = size.width + 1;\n var height = size.height + 1;\n //Bug 857673: Symbol palette tooltip is not rendered properly after search symbols and hover over palette shapes\n // If the shape is to be rendered in search palette, then the id of the shape is appended with 'SearchSymbol'\n // To create a unique id for the shape in search palette to avoid tooltip issue.\n var symbolId = parentDiv.id === 'SearchPalette' ? symbol.id + 'SearchSymbol' : symbol.id;\n var container = createHtmlElement('div', {\n id: symbolId + '_container',\n style: 'width:' + width + 'px;height:' + height + 'px;float:left;overflow:hidden'\n // title: symbolInfo.tooltip ? symbolInfo.tooltip : symbol.id\n });\n parentDiv.appendChild(container);\n var canvas;\n var gElement;\n var div;\n if (symbol.shape.type === 'Native') {\n canvas = createSvgElement('svg', {\n id: symbolId,\n width: Math.ceil(symbol.wrapper.actualSize.width) + 1,\n height: Math.ceil(symbol.wrapper.actualSize.height) + 1\n });\n gElement = createSvgElement('g', { id: symbolId + '_g' });\n canvas.appendChild(gElement);\n container.appendChild(canvas);\n this.updateSymbolSize(symbol);\n this.svgRenderer.renderElement(symbol.wrapper, gElement, undefined, undefined, canvas);\n }\n else if (symbol.shape.type === 'HTML') {\n div = this.getHtmlSymbol(symbol, canvas, container, symbol.wrapper.actualSize.height, symbol.wrapper.actualSize.width, false, parentDiv.id === 'SearchPalette');\n }\n //This method is responsible for rendering the UML node, as the UML node is displayed as an HTML group node.\n else if (symbol.shape.type === 'UmlClassifier' && !symbol.shape.relationship) {\n if (symbol.children &&\n symbol.children.length > 0 && groupHasType(symbol, 'HTML', this.childTable)) {\n div = this.getHtmlSymbol(symbol, canvas, container, symbol.wrapper.actualSize.height, symbol.wrapper.actualSize.width, false);\n }\n }\n else {\n if (symbol.children &&\n symbol.children.length > 0 && groupHasType(symbol, 'HTML', this.childTable)) {\n div = this.getGroupParent(symbol, canvas, container, symbol.wrapper.actualSize.height, symbol.wrapper.actualSize.width, false);\n }\n else {\n canvas = CanvasRenderer.createCanvas(symbolId, Math.ceil((symbol.wrapper.actualSize.width + symbol.style.strokeWidth) * 2) + 1, Math.ceil((symbol.wrapper.actualSize.height + symbol.style.strokeWidth) * 2) + 1);\n container.appendChild(canvas);\n var index = 2;\n if (symbol instanceof Connector) {\n index = 1.9;\n }\n canvas.getContext('2d').setTransform(index, 0, 0, index, 0, 0);\n this.diagramRenderer.renderElement(symbol.wrapper, gElement || canvas, undefined, undefined, undefined, undefined, true, undefined, true);\n }\n }\n if (!preview) {\n var actualWidth = symbol.wrapper.actualSize.width + symbol.style.strokeWidth;\n var actualHeight = symbol.wrapper.actualSize.height + symbol.style.strokeWidth;\n var style = 'pointer-events:none;transform-origin:0 0;overflow:hidden;';\n if (symbol.shape.isPhase) {\n if (symbol.shape.orientation === 'Horizontal') {\n style += 'margin-left:' +\n Math.max(this.symbolMargin.left, ((width - actualWidth) / 2))\n + 'px;margin-top:' + size.height / 2\n + 'px;';\n }\n else {\n style += 'margin-left:' +\n size.width / 2\n + 'px;margin-top:' + Math.max(this.symbolMargin.top, ((height - actualHeight) / 2))\n + 'px;';\n }\n }\n else {\n style += 'margin-left:' +\n Math.max(this.symbolMargin.left, ((width - actualWidth) / 2))\n + 'px;margin-top:' + Math.max(this.symbolMargin.top, ((height - actualHeight) / 2))\n + 'px;';\n }\n if (canvas instanceof HTMLCanvasElement) {\n style += 'transform:scale(.5,.5);';\n }\n applyStyleAgainstCsp(((div && (symbol.shape.type === 'HTML' || symbol.children &&\n symbol.children.length > 0)) ? div : canvas), style);\n container.classList.add('e-symbol-draggable');\n return container;\n }\n return canvas;\n };\n SymbolPalette.prototype.getGroupParent = function (item, canvas, container, height, width, isPreview) {\n var div = createHtmlElement('div', { 'id': item.id + (isPreview ? '_html_div_preview' : '_html_div') });\n var htmlLayer = createHtmlElement('div', {\n 'id': item.id + (isPreview ? '_htmlLayer_preview' : '_htmlLayer'),\n 'style': 'width:' + Math.ceil(width + 1) + 'px;' +\n 'height:' + Math.ceil(height + 1) + 'px;position:absolute',\n 'class': 'e-html-layer'\n });\n var htmlLayerDiv = createHtmlElement('div', {\n 'id': item.id + (isPreview ? '_htmlLayer_div_preview' : '_htmlLayer_div'),\n 'style': 'width:' + Math.ceil(width + 1) + 'px;' +\n 'height:' + Math.ceil(height + 1) + 'px;position:absolute'\n });\n htmlLayer.appendChild(htmlLayerDiv);\n div.appendChild(htmlLayer);\n canvas = CanvasRenderer.createCanvas((isPreview ? (item.id + '_preview') : item.id), Math.ceil(width) + 1, Math.ceil(height) + 1);\n div.appendChild(canvas);\n container.appendChild(div);\n this.diagramRenderer.renderElement(item.wrapper.children[0].children[0], canvas, htmlLayer);\n return div;\n };\n SymbolPalette.prototype.getHtmlSymbol = function (symbol, canvas, container, height, width, isPreview, isSearchSymbol) {\n //Bug 857673: Symbol palette tooltip is not rendered properly after search symbols and hover over palette shapes\n // If the shape is to be rendered in search palette, then the id of the shape is appended with 'SearchSymbol'\n // To create a unique id for the shape in search palette to avoid tooltip issue.\n var symbolId = isSearchSymbol ? symbol.id + 'SearchSymbol' : symbol.id;\n var div = createHtmlElement('div', {\n 'id': symbolId + (isPreview ? '_html_div_preview' : '_html_div')\n });\n var htmlLayer = createHtmlElement('div', {\n 'id': symbolId + (isPreview ? '_htmlLayer_preview' : '_htmlLayer'),\n 'style': 'width:' + Math.ceil(width + 1) + 'px;' +\n 'height:' + Math.ceil(height + 1) + 'px;position:absolute',\n 'class': 'e-html-layer'\n });\n var htmlLayerDiv = createHtmlElement('div', {\n 'id': symbolId + (isPreview ? '_htmlLayer_div_preview' : '_htmlLayer_div'),\n 'style': 'width:' + Math.ceil(width + 1) + 'px;' +\n 'height:' + Math.ceil(height + 1) + 'px;position:absolute'\n });\n htmlLayer.appendChild(htmlLayerDiv);\n div.appendChild(htmlLayer);\n //EJ2-841339 - Html shapes in palette are not rendered properly\n var actualWidth = symbol.wrapper.actualSize.width + symbol.style.strokeWidth;\n var actualHeight = symbol.wrapper.actualSize.height + symbol.style.strokeWidth;\n var style = 'pointer-events:none;transform-origin:0 0;overflow:hidden;';\n style += 'margin-left:' +\n Math.max(this.symbolMargin.left, ((width - actualWidth) / 2))\n + 'px;margin-top:' + Math.max(this.symbolMargin.top, ((height - actualHeight) / 2))\n + 'px;';\n style += 'transform:scale(.5,.5);position:absolute';\n canvas = CanvasRenderer.createCanvas(symbolId, Math.ceil((symbol.wrapper.actualSize.width + symbol.style.strokeWidth) * 2) + 1, Math.ceil((symbol.wrapper.actualSize.height + symbol.style.strokeWidth) * 2) + 1);\n container.appendChild(canvas);\n canvas.getContext('2d').setTransform(2, 0, 0, 2, 0, 0);\n applyStyleAgainstCsp(canvas, style);\n container.appendChild(div);\n //EJ2-70280 - Text description in symbol palette for HTML nodes is not visible.\n if (isPreview) {\n //When dragging the UML node from the palette, set the preview specifically for that UML node\n if (symbol.shape.type === 'UmlClassifier') {\n if (symbol.shape.classifier === 'Class') {\n symbol.wrapper.children[0].children[0].children[0].content = '';\n }\n else if (symbol.shape.classifier === 'Enumeration') {\n symbol.wrapper.children[0].children[0].children[0].content = '';\n }\n else if (symbol.shape.classifier === 'Interface') {\n symbol.wrapper.children[0].children[0].children[0].content = '';\n }\n }\n this.diagramRenderer.renderElement(symbol.wrapper.children[0].children[0], canvas, htmlLayer);\n }\n else {\n this.diagramRenderer.renderElement(symbol.wrapper, canvas, htmlLayer);\n }\n return div;\n };\n // eslint-disable-next-line\n SymbolPalette.prototype.getSymbolSize = function (symbol, symbolInfo) {\n var width = symbol.wrapper.actualSize.width;\n var height = symbol.wrapper.actualSize.height;\n if (!this.symbolWidth && !this.symbolHeight) {\n width += this.symbolMargin.left + this.symbolMargin.right + symbol.style.strokeWidth;\n height += this.symbolMargin.top + this.symbolMargin.bottom + symbol.style.strokeWidth;\n }\n else {\n width = this.symbolWidth;\n height = Math.max(this.symbolHeight, height);\n }\n return new Size(width, height);\n };\n //end region - rendering symbols\n //region event handlers\n SymbolPalette.prototype.getMousePosition = function (e) {\n var offsetY;\n var offsetX;\n var touchArg;\n if (e.type.indexOf('touch') !== -1) {\n touchArg = e;\n var pageY = touchArg.changedTouches[0].clientY;\n var pageX = touchArg.changedTouches[0].clientX;\n offsetY = pageY - this.element.offsetTop;\n offsetX = pageX - this.element.offsetLeft;\n }\n else {\n offsetY = e.clientY - this.element.offsetTop;\n offsetX = e.clientX - this.element.offsetLeft;\n }\n return { x: offsetX, y: offsetY };\n };\n /** Gets the default content of the Tooltip\n *\n * @returns {string | HTMLElement} Returns the default content of the Tooltip.\\\n * @param {object} obj - provide the Symbol object.\n */\n SymbolPalette.prototype.getContent = function (obj) {\n var isPrivateTooltip = ((this.hoverElement instanceof Node) &&\n this.hoverElement.constraints & NodeConstraints.Tooltip) ||\n ((this.hoverElement instanceof Connector) &&\n this.hoverElement.constraints & ConnectorConstraints.Tooltip);\n var content = isPrivateTooltip ? this.hoverElement.tooltip.content :\n obj.id;\n return content;\n };\n /**\n * Initialize the basic properties of Toolip object\n *\n * @returns {Tooltip} Returns the basic properties of Toolip object.\\\n * @param {NodeModel | ConnectorModel} element - provide the Symbol object.\n */\n SymbolPalette.prototype.initTooltip = function (element) {\n var tooltip;\n if (!isBlazor()) {\n var tooltipOption = new Tooltip;\n tooltipOption = this.updateTooltipContent(this.hoverElement.tooltip, tooltipOption);\n tooltip = new Tooltip(tooltipOption);\n tooltip.cssClass = 'e-symbolPalette-tooltip';\n tooltip.opensOn = 'custom';\n tooltip.appendTo('#' + element.id);\n tooltip.close();\n }\n return tooltip;\n };\n /**Method to update Tooltip Content\n *\n * @returns { Tooltip } Returns the basic properties of Toolip object.\\\n *\n * @param {TooltipModel} tooltip - provide the Symbol object.\n * @param {Tooltip} tooltipObject - provide the Symbol object.\n */\n SymbolPalette.prototype.updateTooltipContent = function (tooltip, tooltipObject) {\n tooltipObject.content = tooltip.content;\n tooltipObject.position = 'BottomRight';\n tooltipObject.showTipPointer = tooltip.showTipPointer;\n tooltipObject.width = tooltip.width;\n tooltipObject.height = tooltip.height;\n if (!tooltip.animation) {\n tooltipObject.animation = { close: { effect: 'None' } };\n }\n else {\n tooltipObject.animation = tooltip.animation;\n }\n return tooltipObject;\n };\n /**\n * To open the Tooltip element relevant to the target and relative mode\n *\n * @returns { void} opens the Tooltip element relevant to the target and relative mode.\\\n *\n * @param {PointModel} mousePosition - provide the mousePosition value.\n * @param {boolean} elementOver - provide the elementOver value.\n * @param {boolean} isSearchSymbol - provide the isSearchSymbol value.\n */\n SymbolPalette.prototype.elementEnter = function (mousePosition, elementOver, isSearchSymbol) {\n if (!elementOver) {\n //set the collision target element to given position if enabled\n this.symbolTooltipObject.windowCollision = true;\n //840454 - support to provide isSticky property for tooltip in diagram control\n if (this.hoverElement.tooltip.isSticky) {\n this.symbolTooltipObject.isSticky = true;\n }\n if (this.hoverElement instanceof Node) {\n if (!(this.hoverElement.constraints & (NodeConstraints.Default && NodeConstraints.Tooltip))) {\n this.hoverElement.tooltip.content = this.hoverElement.id;\n //Task 834121: Content-Security-Policy support for diagram\n this.symbolTooltipObject.content = initializeCSPTemplate(function () {\n return this.hoverElement.id;\n }, this);\n }\n }\n else if (this.hoverElement instanceof Connector) {\n if (!(this.hoverElement.constraints & (ConnectorConstraints.Default && ConnectorConstraints.Tooltip))) {\n this.hoverElement.tooltip.content = this.hoverElement.id;\n this.symbolTooltipObject.content = initializeCSPTemplate(function () {\n return this.hoverElement.id;\n }, this);\n }\n }\n if (this.hoverElement.tooltip.content) {\n if (this.hoverElement.tooltip.relativeMode === 'Mouse') {\n //To set relative mode only to object for Symbol Palatte\n this.hoverElement.tooltip.relativeMode = 'Object';\n this.symbolTooltipObject.offsetX = 0;\n this.symbolTooltipObject.offsetY = 0;\n }\n else {\n this.symbolTooltipObject.offsetX = 0;\n this.symbolTooltipObject.offsetY = 0;\n }\n }\n //Bug 857673: Symbol palette tooltip is not rendered properly after search symbols and hover over palette shapes\n // To render tooltip for the symbol in search palette, the id of the shape is appended with 'SearchSymbol'.\n var targetId = isSearchSymbol ? this.hoverElement.id + 'SearchSymbol' : this.hoverElement.id;\n var targetEle = document.getElementById(targetId);\n if (this.hoverElement.tooltip.openOn === 'Auto' && this.hoverElement.tooltip.content !== '') {\n this.symbolTooltipObject.close();\n this.symbolTooltipObject.opensOn = this.hoverElement.tooltip.openOn;\n this.symbolTooltipObject.dataBind();\n }\n if (this.hoverElement.tooltip.openOn === 'Auto') {\n this.symbolTooltipObject.target = this.hoverElement.id;\n this.symbolTooltipObject.open(targetEle);\n }\n }\n };\n // eslint-disable-next-line\n SymbolPalette.prototype.mouseMove = function (e, touches) {\n if (this.highlightedSymbol && (!this.selectedSymbol\n || this.selectedSymbol.id + '_container' !== this.highlightedSymbol.id)) {\n this.highlightedSymbol.classList.remove('e-symbol-hover');\n this.highlightedSymbol.style.backgroundColor = '';\n this.highlightedSymbol = null;\n }\n var id = e.target.id.split('_container')[0];\n //Bug 857673: Symbol palette tooltip is not rendered properly after search symbols and hover over palette shapes\n // To render highlighter for the search symbols while hovering over the symbol in search palette.\n if (this.symbolTable[\"\" + id] || (id !== 'SearchPalette' && e.target && e.target.id.includes('SearchSymbol'))) {\n var container = document.getElementById(id + '_container');\n container.classList.add('e-symbol-hover');\n this.highlightedSymbol = container;\n }\n e.preventDefault();\n var isSearchSymbol = false;\n if (e.target && e.target.id.includes('SearchSymbol')) {\n isSearchSymbol = true;\n id = id.split('SearchSymbol')[0];\n }\n //EJ2-66311-tooltip support for Symbolpalette\n var obj = this.symbolTable[\"\" + id];\n if (this.symbolTable[\"\" + id] && obj !== this.hoverElement) {\n this.currentPosition = this.getMousePosition(e);\n var content = this.getContent(obj);\n if (this.hoverElement && this.hoverElement.tooltip.openOn === 'Auto' && content !== '') {\n this.elementLeave();\n }\n this.hoverElement = obj;\n this.symbolTooltipObject = this.initTooltip(this.hoverElement);\n if (content === '') {\n content = this.hoverElement.id;\n }\n if (this.hoverElement.tooltip && content !== '') {\n this.elementEnter(this.currentPosition, false, isSearchSymbol);\n }\n }\n if (obj === undefined && this.hoverElement && !this.hoverElement.tooltip.isSticky && this.hoverElement.tooltip.openOn === 'Auto') {\n this.hoverElement = null;\n this.elementLeave();\n }\n };\n /**\n * When Mouse pointer leaves the symbol palette object Mouse leave event is called and closes Tooltip\n * @returns {void} Function to close symbol tooltip on mouse leave.\n */\n SymbolPalette.prototype.elementLeave = function () {\n if (this.symbolTooltipObject && this.symbolTooltipObject.opensOn !== 'Custom') {\n this.symbolTooltipObject.close();\n }\n };\n /** @private\n * @returns {void} Handles mouse leave events\n * @param {PointerEvent} evt - provide event name\n */\n SymbolPalette.prototype.mouseLeave = function (evt) {\n this.elementLeave();\n evt.preventDefault();\n };\n // eslint-enable\n SymbolPalette.prototype.mouseUp = function (evt) {\n this.isMethod = true;\n if (evt && evt.target) {\n if (evt.srcElement.id === 'iconSearch') {\n var element = document.getElementById('iconSearch');\n if (element.classList.contains('e-clear-searchtext')) {\n element.className = 'e-input-group-icon e-search e-icons';\n document.getElementById('textEnter').value = '';\n this.searchPalette('');\n }\n }\n else {\n var id = evt.target.id.split('_container')[0];\n if (id && this.selectedSymbol) {\n var args = { oldValue: this.oldObject, newValue: id };\n var event_2 = 'paletteSelectionChange';\n this.trigger(event_2, args);\n this.oldObject = id;\n evt.preventDefault();\n }\n else if (this.oldObject !== '') {\n this.oldObject = '';\n }\n }\n }\n };\n SymbolPalette.prototype.keyUp = function (evt) {\n var _this = this;\n if (this.enableSearch) {\n // eslint-disable-next-line\n var palette_1 = this;\n var element = document.getElementById('iconSearch');\n element.className = 'e-input-group-icon e-clear-searchtext e-icons';\n if (evt && (evt.key === 'Enter' || evt.keyCode === 13)) {\n if (evt.target instanceof HTMLInputElement) {\n this.searchPalette(evt.target.value);\n }\n }\n else {\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.timer = setTimeout(function () {\n if (evt.target instanceof HTMLInputElement) {\n palette_1.searchPalette(evt.target.value);\n _this.timer = null;\n }\n }, 500);\n }\n }\n };\n SymbolPalette.prototype.mouseDown = function (evt) {\n var id = evt.target.id.split('_container')[0];\n var isSearchSymbol = false;\n //Bug 857673: Symbol palette tooltip is not rendered properly after search symbols and hover over palette shapes\n // To split the original id of shape to find it in symbol table.\n if (id.includes('SearchSymbol')) {\n id = id.split('SearchSymbol')[0];\n isSearchSymbol = true;\n }\n if (this.selectedSymbol) {\n var oldSymbol = document.getElementById(this.selectedSymbol.id + '_container');\n //Bug 857673: Symbol palette tooltip is not rendered properly after search symbols and hover over palette shapes\n // To highlight and remove highlight of the selected symbol in search palette on mouse down.\n var oldSearchSymbol = document.getElementById(this.selectedSymbol.id + 'SearchSymbol' + '_container');\n if ((oldSymbol || oldSearchSymbol)) {\n oldSymbol.classList.remove('e-symbol-selected');\n if (oldSearchSymbol) {\n oldSearchSymbol.classList.remove('e-symbol-selected');\n }\n }\n var container = document.getElementById(this.selectedSymbol.id + '_container');\n if (container) {\n container.style.backgroundColor = '';\n }\n this.selectedSymbol = null;\n }\n if (this.symbolTable[\"\" + id]) {\n var containerId = id;\n if (isSearchSymbol) {\n containerId = id + 'SearchSymbol';\n }\n var container = document.getElementById(containerId + '_container');\n container.classList.add('e-symbol-selected');\n this.selectedSymbol = this.symbolTable[\"\" + id];\n evt.preventDefault();\n }\n };\n SymbolPalette.prototype.keyDown = function (evt) {\n // eslint-disable-next-line\n var palette = this;\n var helperElement = 'helperElement';\n var intDestroy = 'intDestroy';\n if (evt && (evt.key === 'Escape')) {\n var element = palette.draggable[\"\" + helperElement];\n if (element && element.parentNode) {\n element.parentNode.removeChild(element);\n palette.draggable[\"\" + intDestroy]();\n }\n }\n };\n //end region - event handlers\n // region - draggable\n SymbolPalette.prototype.initDraggable = function () {\n if (this.allowDrag) {\n //let drag: Draggable;\n this.draggable = new Draggable(this.element, {\n dragTarget: '.e-symbol-draggable',\n helper: this.helper,\n dragStart: this.dragStart,\n preventDefault: false,\n dragStop: this.dragStop,\n drag: function (args) {\n var target = 'target';\n var parent = parentsUntil(args[\"\" + target], 'e-droppable');\n if (parent && parent.classList.contains('e-diagram')) {\n var e2eInstance = 'ej2_instances';\n parent[\"\" + e2eInstance][0].droppable.over(args);\n }\n },\n cursorAt: { left: this.symbolPreview.offset.x, top: this.symbolPreview.offset.y }\n });\n }\n };\n // eslint-enable\n SymbolPalette.prototype.dragStart = function (e) {\n var element = this.helper[0];\n if (element) {\n element.setAttribute('paletteId', this.element.id);\n }\n };\n SymbolPalette.prototype.dragStop = function (e) {\n if (!parentsUntil(e.target, 'e-diagram')) {\n remove(e.helper);\n }\n };\n //end region - draggable\n //region - helper methods\n SymbolPalette.prototype.scaleSymbol = function (symbol, symbolContainer, sw, sh, width, height, preview) {\n if (symbol instanceof Connector) {\n var wrapper = symbol.wrapper;\n symbol.wrapper = symbolContainer.children[0];\n var point = symbol.scale(sw, sh, width, height, symbolContainer.children[0]);\n var difX = width / 2 - symbolContainer.children[0].children[0].offsetX + point.x / 2;\n var difY = height / 2 - symbolContainer.children[0].children[0].offsetY + point.y / 2;\n for (var _i = 0, _a = symbolContainer.children[0].children; _i < _a.length; _i++) {\n var child = _a[_i];\n child.offsetX += difX;\n child.offsetY += difY;\n child.staticSize = false;\n }\n symbol.wrapper = wrapper;\n }\n else if (symbol.shape.type === 'Bpmn' && this.bpmnModule) {\n var wrapper = symbol.wrapper;\n symbol.wrapper = symbolContainer;\n symbolContainer.children[0].width = width;\n symbolContainer.children[0].height = height;\n this.bpmnModule.updateBPMN({ width: width, height: height }, symbol, symbol, null);\n symbol.wrapper = wrapper;\n }\n else {\n if (symbol.children) {\n var parentNode = symbol.children;\n var w = 0;\n var h = 0;\n if (!preview) {\n var node = void 0;\n var container = void 0;\n for (var i = 0; i < parentNode.length; i++) {\n container = symbolContainer.children[0].children[parseInt(i.toString(), 10)];\n if (container) {\n if (container.children[0].children) {\n this.measureChild(container);\n }\n node = this.symbolTable[container.id];\n container.width = node.width;\n container.height = node.height;\n container.measure(new Size());\n container.arrange(container.children[0].desiredSize);\n }\n }\n }\n w = width / symbolContainer.children[0].desiredSize.width;\n h = height / symbolContainer.children[0].desiredSize.height;\n symbolContainer.children[0].measure(new Size());\n symbolContainer.children[0].arrange(symbolContainer.children[0].desiredSize);\n if (!preview) {\n var children = void 0;\n for (var i = 0; i < parentNode.length; i++) {\n children = symbolContainer.children[0].children[parseInt(i.toString(), 10)];\n if (children) {\n if (children.children[0].children) {\n this.scaleChildren(children, w, h, symbol);\n }\n this.scaleGroup(children, w, h, symbol);\n }\n }\n }\n if (preview) {\n ///let node: Node;\n var scaleWidth = void 0;\n var scaleHeight = void 0;\n var children = void 0;\n for (var i = 0; i < parentNode.length; i++) {\n //const node: Node = this.symbolTable[parentNode[i]];\n scaleWidth = width / symbol.wrapper.children[0].desiredSize.width;\n scaleHeight = height / symbol.wrapper.children[0].desiredSize.height;\n children = symbolContainer.children[0].children[parseInt(i.toString(), 10)];\n if (children) {\n if (children.children[0].children) {\n this.scaleChildren(children, scaleWidth, scaleHeight, symbol, true);\n }\n this.scaleGroup(children, scaleWidth, scaleHeight, symbol, true);\n }\n }\n symbol.wrapper.children[0].measure(new Size());\n symbol.wrapper.children[0].arrange(symbol.wrapper.children[0].desiredSize);\n }\n }\n else {\n scaleElement(symbolContainer.children[0], sw, sh, symbolContainer);\n }\n }\n };\n SymbolPalette.prototype.scaleChildren = function (container, w, h, symbol, preview) {\n var child;\n for (var i = 0; i < container.children.length; i++) {\n child = container.children[parseInt(i.toString(), 10)];\n if (!child.children[0].children) {\n this.scaleGroup(child, w, h, symbol, preview);\n }\n else {\n this.scaleChildren(child, w, h, symbol, preview);\n }\n }\n };\n SymbolPalette.prototype.measureChild = function (container) {\n var childContainer;\n var node;\n for (var i = 0; i < container.children.length; i++) {\n childContainer = container.children[parseInt(i.toString(), 10)];\n if (!childContainer.children[0].children) {\n node = this.symbolTable[childContainer.id];\n childContainer.width = node.width;\n childContainer.height = node.height;\n childContainer.measure(new Size());\n childContainer.arrange(childContainer.children[0].desiredSize);\n }\n else {\n this.measureChild(childContainer);\n }\n }\n };\n SymbolPalette.prototype.scaleGroup = function (child, w, h, symbol, preview) {\n child.width = child.width * w;\n child.height = (child.height * h);\n child.offsetX = preview ? (child.offsetX * w) - symbol.style.strokeWidth : (child.offsetX * w) + symbol.style.strokeWidth / 2;\n child.offsetY = preview ? (child.offsetY * h) - symbol.style.strokeWidth : (child.offsetY * h) + symbol.style.strokeWidth / 2;\n child.measure(new Size());\n child.arrange(child.children[0].desiredSize);\n };\n SymbolPalette.prototype.refreshPalettes = function () {\n if (!isBlazor()) {\n this.accordionElement.items = [];\n }\n removeElementsByClass('e-remove-palette', this.element.id);\n this.updatePalettes();\n if (!isBlazor()) {\n this.accordionElement.dataBind();\n }\n };\n SymbolPalette.prototype.updatePalettes = function () {\n for (var i = 0; i < this.palettes.length; i++) {\n var symGroup = this.palettes[parseInt(i.toString(), 10)];\n //Bug 857693: Collapsing the palettes after searching shapes throws wrong arguments in paletteExpanding event.\n //To remove search palette from palette collection.\n if (symGroup.id === 'search_palette') {\n this.palettes.splice(i, 1);\n i--;\n }\n else {\n this.initSymbols(symGroup);\n this.renderPalette(symGroup);\n }\n }\n };\n SymbolPalette.prototype.createTextbox = function () {\n var searchDiv = createHtmlElement('div', { id: this.element.id + '_search' });\n applyStyleAgainstCsp(searchDiv, 'height:30px');\n // searchDiv.setAttribute('style', 'backgroundColor:white;height:30px');\n searchDiv.className = 'e-input-group';\n this.element.appendChild(searchDiv);\n var textBox = createHtmlElement('input', {});\n textBox.placeholder = this.l10n.getConstant('SearchShapes');\n textBox.id = 'textEnter';\n applyStyleAgainstCsp(textBox, 'width:100%;height:auto');\n //textBox.setAttribute('style', 'width:100%;height:auto');\n textBox.className = 'e-input';\n searchDiv.appendChild(textBox);\n var span = createHtmlElement('span', { id: 'iconSearch', className: 'e-input-group-icon e-search e-icons' });\n searchDiv.appendChild(span);\n };\n SymbolPalette.prototype.getFilterSymbol = function (symbol) {\n var _this = this;\n var items = [];\n //884490: filter the symbol based on ignoreSymbolsOnSearch property\n items = symbol.filter(function (element) { return !_this.ignoreSymbolsOnSearch.includes(element.id); });\n return items;\n };\n SymbolPalette.prototype.searchPalette = function (value) {\n var symbolGroup = [];\n var element = document.getElementById('SearchPalette');\n var paletteDiv;\n //remove the existing child in palette\n if (element) {\n for (var i = element.children.length - 1; i >= 0; i--) {\n element.removeChild(element.children[parseInt(i.toString(), 10)]);\n }\n //Bug-857693: Collapsing the palettes after searching shapes throws wrong arguments in paletteExpanding event.\n //To remove search palette from palette collection.\n this.palettes.splice(0, 1);\n }\n //add the searched item in array collection\n for (var i = 0; i < this.palettes.length; i++) {\n var symbolPaletteGroup = this.palettes[parseInt(i.toString(), 10)];\n for (var j = 0; j < symbolPaletteGroup.symbols.length; j++) {\n var item = symbolPaletteGroup.symbols[parseInt(j.toString(), 10)];\n if (value !== '' && item.id.toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n symbolGroup.push(item);\n }\n }\n }\n var filterSymbols = getFunction(this.filterSymbols);\n if (filterSymbols) {\n symbolGroup = filterSymbols(symbolGroup) || [];\n }\n if (this.ignoreSymbolsOnSearch && this.ignoreSymbolsOnSearch.length > 0) {\n symbolGroup = this.getFilterSymbol(symbolGroup);\n }\n //Bug 857693: Collapsing the palettes after searching shapes throws wrong arguments in paletteExpanding event.\n //To render search palette and add it to the palettes collection.\n if (value !== '') {\n var searchPalette = { id: 'search_palette', expanded: true, symbols: symbolGroup, title: 'Search Shapes' };\n var palette = new Palette(this, 'palettes', searchPalette, true);\n this.palettes.splice(0, 0, palette);\n }\n //create a palette collection\n if (!element && !isBlazor()) {\n paletteDiv = this.createSearchPalette(paletteDiv);\n element = paletteDiv;\n }\n //add the symbols into search palette\n if (symbolGroup.length > 0) {\n for (var _i = 0, symbolGroup_1 = symbolGroup; _i < symbolGroup_1.length; _i++) {\n var symbol = symbolGroup_1[_i];\n if (symbol.parentId === '') {\n this.getSymbolContainer(symbol, element);\n }\n }\n }\n else if (value !== '') {\n var emptyDiv = createHtmlElement('div', { 'id': 'EmptyDiv', 'style': 'text-align:center;font-style:italic' });\n emptyDiv.innerHTML = 'No Items To Display';\n element.appendChild(emptyDiv);\n }\n else {\n var element_1 = document.getElementById('iconSearch');\n element_1.className = 'e-input-group-icon e-search e-icons';\n if (!isBlazor()) {\n this.accordionElement.removeItem(0);\n var searchPalette = document.getElementById('SearchPalette');\n if (searchPalette) {\n searchPalette.remove();\n }\n }\n }\n };\n SymbolPalette.prototype.createSearchPalette = function (paletteDiv) {\n paletteDiv = createHtmlElement('div', { 'id': 'SearchPalette', 'style': 'display:none;overflow:auto;' });\n this.element.appendChild(paletteDiv);\n var paletteCollection = {\n header: 'Search Results', expanded: true,\n content: '#SearchPalette'\n };\n this.accordionElement.addItem(paletteCollection, 0);\n return paletteDiv;\n };\n SymbolPalette.prototype.wireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var stopEvent = Browser.touchEndEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = 'mouseleave';\n var keyEvent = 'keyup';\n var keyDownEvent = 'keydown';\n EventHandler.add(this.element, startEvent, this.mouseDown, this);\n EventHandler.add(this.element, moveEvent, this.mouseMove, this);\n EventHandler.add(this.element, stopEvent, this.mouseUp, this);\n EventHandler.add(this.element, cancelEvent, this.mouseLeave, this);\n EventHandler.add(this.element, keyEvent, this.keyUp, this);\n EventHandler.add(document, keyDownEvent, this.keyDown, this);\n // initialize the draggable component\n this.initDraggable();\n };\n SymbolPalette.prototype.unWireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var stopEvent = Browser.touchEndEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var keyEvent = 'keyup';\n var keyDownEvent = 'keydown';\n EventHandler.remove(this.element, startEvent, this.mouseDown);\n EventHandler.remove(this.element, moveEvent, this.mouseMove);\n EventHandler.remove(this.element, stopEvent, this.mouseUp);\n EventHandler.remove(this.element, cancelEvent, this.mouseLeave);\n EventHandler.remove(this.element, keyEvent, this.keyUp);\n EventHandler.remove(document, keyDownEvent, this.keyDown);\n };\n __decorate$r([\n Property('S')\n ], SymbolPalette.prototype, \"accessKey\", void 0);\n __decorate$r([\n Property('100%')\n ], SymbolPalette.prototype, \"width\", void 0);\n __decorate$r([\n Property('100%')\n ], SymbolPalette.prototype, \"height\", void 0);\n __decorate$r([\n Collection([], Palette)\n ], SymbolPalette.prototype, \"palettes\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"getSymbolInfo\", void 0);\n __decorate$r([\n Property({ fit: true })\n ], SymbolPalette.prototype, \"symbolInfo\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"filterSymbols\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"ignoreSymbolsOnSearch\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"getSymbolTemplate\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"symbolWidth\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"symbolHeight\", void 0);\n __decorate$r([\n Complex({ left: 10, right: 10, top: 10, bottom: 10 }, Margin)\n ], SymbolPalette.prototype, \"symbolMargin\", void 0);\n __decorate$r([\n Property(true)\n ], SymbolPalette.prototype, \"allowDrag\", void 0);\n __decorate$r([\n Complex({}, SymbolPreview)\n ], SymbolPalette.prototype, \"symbolPreview\", void 0);\n __decorate$r([\n Complex({}, SymbolDragSize)\n ], SymbolPalette.prototype, \"symbolDragSize\", void 0);\n __decorate$r([\n Property(false)\n ], SymbolPalette.prototype, \"enableSearch\", void 0);\n __decorate$r([\n Property(true)\n ], SymbolPalette.prototype, \"enableAnimation\", void 0);\n __decorate$r([\n Property('Multiple')\n ], SymbolPalette.prototype, \"expandMode\", void 0);\n __decorate$r([\n Event()\n ], SymbolPalette.prototype, \"paletteSelectionChange\", void 0);\n __decorate$r([\n Event()\n ], SymbolPalette.prototype, \"paletteExpanding\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"getNodeDefaults\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"nodeDefaults\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"getConnectorDefaults\", void 0);\n __decorate$r([\n Property()\n ], SymbolPalette.prototype, \"connectorDefaults\", void 0);\n return SymbolPalette;\n}(Component));\n\nexport { ActivityFlow, Annotation, AnnotationConstraints, BasicShape, BezierSegment, BezierSettings, BezierSmoothness, BlazorAction, BpmnActivity, BpmnAnnotation, BpmnDataObject, BpmnDiagrams, BpmnEvent, BpmnFlow, BpmnGateway, BpmnShape, BpmnSubEvent, BpmnSubProcess, BpmnTask, BpmnTextAnnotation, BpmnTransactionSubProcess, Canvas, CanvasRenderer, ChildArrangement, ChildContainer, ClassifierMultiplicity, ColumnDefinition, Command, CommandHandler, CommandManager, ComplexHierarchicalTree, ConnectTool, ConnectionDataSource, ConnectionPointOrigin, Connector, ConnectorBridging, ConnectorConstraints, ConnectorDrawingTool, ConnectorEditing, ConnectorFixedUserHandle, ConnectorProperties, ConnectorSegment, ConnectorShape, Container, ContextMenuSettings, ControlPointsVisibility, CrudAction, CustomCursorAction, DataBinding, DataMappingItems, DataSource, Decorator, Diagram, DiagramAction, DiagramConnectorSegment, DiagramConnectorShape, DiagramConstraints, DiagramContextMenu, DiagramElement, DiagramEvent, DiagramEventHandler, DiagramGradient, DiagramRenderer, DiagramShape, DiagramShapeStyle, DiagramTools, DiagramTooltip, Ej1Serialization, ElementAction, ExpandTool, FixedUserHandle, FixedUserHandleTool, FlowShape, FlowchartLayout, FlowchartLayoutSettings, FreeHandTool, Gradient, GraphForceNode, GraphLayoutManager, GridCell, GridPanel, GridRow, Gridlines, Header, HierarchicalTree, Html, Hyperlink, Image$1 as Image, ImageElement, KeyGesture, KeyModifiers, Keys, LabelDragTool, LabelProperties, LabelResizeTool, LabelRotateTool, LabelTool, Lane, Layout, LayoutAnimation, LineDistribution, LineRouting, LinearGradient, Margin, Matrix, MatrixTypes, MethodArguments, MindMap, MoveTool, MultiplicityLabel, Native, NoOfSegments, Node, NodeConstraints, NodeDrawingTool, NodeFixedUserHandle, NodeProperties, OrthogonalSegment, Overview, Palette, Path, PathAnnotation, PathElement, PathPort, Phase, Point, PointPort, PolyLineDrawingTool, PolygonDrawingTool, Port, PortConstraints, PortProperties, PortVisibility, PrintAndExport, RadialGradient, RadialTree, RealAction, Rect, RelationShip, RenderMode, RendererAction, ResizeTool, RotateTool, RowDefinition, Ruler, ScrollActions, SelectTool, Selector, SelectorConstraints, Shadow, Shape, ShapeAnnotation, ShapeStyle, Size, SnapConstraints, SnapSettings, Snapping, StackPanel, Stop, StraightSegment, StrokeStyle, SwimLane, SymbolDragSize, SymbolPalette, SymbolPaletteInfo, SymbolPreview, SymbolSize, SymmetricLayout, Text, TextDrawingTool, TextElement, TextStyle, Thickness, ThumbsConstraints, ToolBase, Transform, UmlActivityShape, UmlClass, UmlClassAttribute, UmlClassMethod, UmlClassifierShape, UmlEnumeration, UmlEnumerationMember, UmlInterface, UndoRedo, UserHandle, Vector, ZoomPanTool, addChildToContainer, alignElement, alignLabelOnSegments, arrangeChild, bBoxText, bezierPoints, canMeasureDecoratorPath, canResizeCorner, canShowControlPoints, canShowCorner, checkBrowserInfo, checkChildNodeInContainer, checkParentAsContainer, checkPort, checkPortRestriction, cloneArray, cloneBlazorObject, cloneObject, cloneSelectedObjects, completeRegion, contains, contextMenuBeforeItemRender, contextMenuClick, contextMenuOpen, cornersPointsBeforeRotation, createHelper, deserialize, extendArray, extendObject, findAngle, findAnnotation, findBounds, findConnectorPoints, findDistance, findMargin, findNearestPoint, findNodeByName, findObjectIndex, findObjectType, findParentInSwimlane, findPath, findPoint, findPort, findPortIndex, findPortToolToActivate, findToolToActivate, flipConnector, getAlignedPosition, getAlignedPositionForPorts, getAnnotationPosition, getBasicShape, getBezierBounds, getBezierDirection, getBezierPoints, getBounds, getBpmnGatewayShapePathData, getBpmnLoopShapePathData, getBpmnShapePathData, getBpmnTaskShapePathData, getBpmnTriggerShapePathData, getChild, getCollectionChangeEventArguements, getConnectorArrowType, getConnectorDirection, getCursor, getDecoratorShape, getDirection$1 as getDirection, getDropEventArguements, getElement, getFlowShape, getFreeHandPath, getFunction, getIconShape, getInOutConnectPorts, getIndex, getInternalProperties, getIntersection, getIntersectionPoints, getInterval, getLineSegment, getObjectFromCollection, getObjectType, getOffset, getOffsetOfConnector, getOffsetOfPorts, getOppositeDirection, getOuterBounds, getPathOffset, getPathString, getPoint, getPoints, getPolygonPath, getPortDirection, getPortShape, getPortsPosition, getPreviewSize, getRectanglePath, getSegmentThumbShapeHorizontal, getSegmentThumbShapeVertical, getSpaceValue, getString, getSymbolSize, getTooltipOffset, getUMLActivityShapes, getUMLFinalNode, getUserHandlePosition, groupHasType, hasSelection, hasSingleConnection, identityMatrix, initFixedUserHandlesSymbol, initTooltip, insertObject, intersect2, intersect3, isDiagramChild, isEmptyVector, isPointOverConnector, isSelected, menuClass, middleElement, moveChildInStack, multiplyMatrix, orthoConnection2Segment, overFlow, parsePathData, pathSegmentCollection, processPathData, randomId, removeChildInContainer, removeChildNodes, removeGradient, removeItem, renderContainerHelper, renderStackHighlighter, rotateMatrix, rotatePoint, rotateSize, scaleElement, scaleMatrix, scalePathData, selectionHasConnector, serialize, setConnectorDefaults, setPortsEdges, setSwimLaneDefaults, setUMLActivityDefaults, sort, splitArrayCollection, swapBounds, templateCompiler, textAlignToString, transformPath, transformPointByMatrix, transformPointsByMatrix, translateMatrix, updateCanvasBounds, updateConnector, updateContent, updateDefaultValues, updateHyperlink, updateLaneBoundsAfterAddChild, updateLayoutValue, updatePathElement, updatePortEdges, updateShape, updateShapeContent, updateStyle, updateTooltip, updateUmlActivityNode, updatedSegment, upgrade, whiteSpaceToString, wordBreakToString };\n","import { Property, ChildProperty, Complex, setStyleAttribute, isNullOrUndefined, detach, Browser, extend, getUniqueID, Touch, closest, isUndefined, classList, formatUnit, SanitizeHtmlHelper, compile, initializeCSPTemplate, isBlazor, animationMode, Animation, attributes, L10n, EventHandler, removeClass, Collection, Event, NotifyPropertyChanges, Component, createElement, append, addClass } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { getZindexPartial } from '@syncfusion/ej2-popups';\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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};\nvar ROOT = 'e-toast';\nvar CONTAINER = 'e-toast-container';\nvar TITLE = 'e-toast-title';\nvar WIDTHFULL = 'e-toast-full-width';\nvar CONTENT = 'e-toast-content';\nvar MESSAGE = 'e-toast-message';\nvar ICON = 'e-toast-icon';\nvar PROGRESS = 'e-toast-progress';\nvar ACTIOBUTTONS = 'e-toast-actions';\nvar CLOSEBTN = 'e-toast-close-icon';\nvar RTL = 'e-rtl';\nvar TOAST_BLAZOR_HIDDEN = 'e-blazor-toast-hidden';\n/**\n * An object that is used to configure the Toast X Y positions.\n */\nvar ToastPosition = /** @__PURE__ @class */ (function (_super) {\n __extends(ToastPosition, _super);\n function ToastPosition() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Left')\n ], ToastPosition.prototype, \"X\", void 0);\n __decorate([\n Property('Top')\n ], ToastPosition.prototype, \"Y\", void 0);\n return ToastPosition;\n}(ChildProperty));\n/**\n * An object that is used to configure the action button model properties and event.\n */\nvar ButtonModelProps = /** @__PURE__ @class */ (function (_super) {\n __extends(ButtonModelProps, _super);\n function ButtonModelProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], ButtonModelProps.prototype, \"model\", void 0);\n __decorate([\n Property(null)\n ], ButtonModelProps.prototype, \"click\", void 0);\n return ButtonModelProps;\n}(ChildProperty));\n/**\n * An object that is used to configure the animation object of Toast.\n */\nvar ToastAnimations = /** @__PURE__ @class */ (function (_super) {\n __extends(ToastAnimations, _super);\n function ToastAnimations() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('FadeIn')\n ], ToastAnimations.prototype, \"effect\", void 0);\n __decorate([\n Property(600)\n ], ToastAnimations.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], ToastAnimations.prototype, \"easing\", void 0);\n return ToastAnimations;\n}(ChildProperty));\n/**\n * An object that is used to configure the show/hide animation settings of Toast.\n */\nvar ToastAnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends(ToastAnimationSettings, _super);\n function ToastAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'FadeIn', duration: 600, easing: 'ease' }, ToastAnimations)\n ], ToastAnimationSettings.prototype, \"show\", void 0);\n __decorate([\n Complex({ effect: 'FadeOut', duration: 600, easing: 'ease' }, ToastAnimations)\n ], ToastAnimationSettings.prototype, \"hide\", void 0);\n return ToastAnimationSettings;\n}(ChildProperty));\n/**\n * The Toast is a notification pop-up that showing on desired position which can provide an information to the user.\n * ```html\n *
\n * let dataManager: DataManager = new DataManager([{ ID: '10' }, { ID: '2' }, { ID: '1' }, { ID: '20' }]);\n * let query: Query = new Query();\n * query.sortBy('ID', (x: string, y: string): number => { return parseInt(x, 10) - parseInt(y, 10) });\n * let promise: Promise< Object > = query.execute(dataManager);\n * promise.then((e: { result: Object }) => { });\n * \n */\n Query.prototype.execute = function (dataManager, done, fail, always) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeQuery(this, done, fail, always);\n }\n return DataUtil.throwError('Query - execute() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Executes query with the local datasource.\n *\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.executeLocal = function (dataManager) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeLocal(this);\n }\n return DataUtil.throwError('Query - executeLocal() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Creates deep copy of the Query object.\n */\n Query.prototype.clone = function () {\n var cloned = new Query();\n cloned.queries = this.queries.slice(0);\n cloned.key = this.key;\n cloned.isChild = this.isChild;\n cloned.dataManager = this.dataManager;\n cloned.fromTable = this.fromTable;\n cloned.params = this.params.slice(0);\n cloned.expands = this.expands.slice(0);\n cloned.sortedColumns = this.sortedColumns.slice(0);\n cloned.groupedColumns = this.groupedColumns.slice(0);\n cloned.subQuerySelector = this.subQuerySelector;\n cloned.subQuery = this.subQuery;\n cloned.fKey = this.fKey;\n cloned.isCountRequired = this.isCountRequired;\n cloned.distincts = this.distincts.slice(0);\n cloned.lazyLoad = this.lazyLoad.slice(0);\n return cloned;\n };\n /**\n * Specifies the name of table to retrieve data in query execution.\n *\n * @param {string} tableName - Defines the table name.\n */\n Query.prototype.from = function (tableName) {\n this.fromTable = tableName;\n return this;\n };\n /**\n * Adds additional parameter which will be sent along with the request which will be generated while DataManager execute.\n *\n * @param {string} key - Defines the key of additional parameter.\n * @param {Function|string} value - Defines the value for the key.\n */\n Query.prototype.addParams = function (key, value) {\n if (typeof value === 'function') {\n this.params.push({ key: key, fn: value });\n }\n else {\n this.params.push({ key: key, value: value });\n }\n return this;\n };\n /**\n * @param fields\n * @hidden\n */\n Query.prototype.distinct = function (fields) {\n if (typeof fields === 'string') {\n this.distincts = [].slice.call([fields], 0);\n }\n else {\n this.distincts = fields.slice(0);\n }\n return this;\n };\n /**\n * Expands the related table.\n *\n * @param {string|Object[]} tables\n */\n Query.prototype.expand = function (tables) {\n if (typeof tables === 'string') {\n this.expands = [].slice.call([tables], 0);\n }\n else {\n this.expands = tables.slice(0);\n }\n return this;\n };\n /**\n * Filter data with given filter criteria.\n *\n * @param {string|Predicate} fieldName - Defines the column field or Predicate.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string|number|boolean} value - Defines the values to match with data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n * @param ignoreAccent\n * @param matchCase\n */\n Query.prototype.where = function (fieldName, operator, value, ignoreCase, ignoreAccent, matchCase) {\n operator = operator ? (operator).toLowerCase() : null;\n var predicate = null;\n if (typeof fieldName === 'string') {\n predicate = new Predicate(fieldName, operator, value, ignoreCase, ignoreAccent, matchCase);\n }\n else if (fieldName instanceof Predicate) {\n predicate = fieldName;\n }\n this.queries.push({\n fn: 'onWhere',\n e: predicate\n });\n return this;\n };\n /**\n * Search data with given search criteria.\n *\n * @param {string|number|boolean} searchKey - Defines the search key.\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n * @param {string} operator - Defines the operator how to search data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n * @param ignoreAccent\n */\n Query.prototype.search = function (searchKey, fieldNames, operator, ignoreCase, ignoreAccent) {\n if (typeof fieldNames === 'string') {\n fieldNames = [fieldNames];\n }\n if (!operator || operator === 'none') {\n operator = 'contains';\n }\n var comparer = DataUtil.fnOperators[operator];\n this.queries.push({\n fn: 'onSearch',\n e: {\n fieldNames: fieldNames,\n operator: operator,\n searchKey: searchKey,\n ignoreCase: ignoreCase,\n ignoreAccent: ignoreAccent,\n comparer: comparer\n }\n });\n return this;\n };\n /**\n * Sort the data with given sort criteria.\n * By default, sort direction is ascending.\n *\n * @param {string|string[]} fieldName - Defines the single or collection of column fields.\n * @param {string|Function} comparer - Defines the sort direction or custom sort comparer function.\n * @param isFromGroup\n */\n Query.prototype.sortBy = function (fieldName, comparer, isFromGroup) {\n return this.sortByForeignKey(fieldName, comparer, isFromGroup);\n };\n /**\n * Sort the data with given sort criteria.\n * By default, sort direction is ascending.\n *\n * @param {string|string[]} fieldName - Defines the single or collection of column fields.\n * @param {string|Function} comparer - Defines the sort direction or custom sort comparer function.\n * @param isFromGroup\n * @param {string} direction - Defines the sort direction .\n */\n Query.prototype.sortByForeignKey = function (fieldName, comparer, isFromGroup, direction) {\n var order = !isNullOrUndefined(direction) ? direction : 'ascending';\n var sorts;\n var temp;\n if (typeof fieldName === 'string' && DataUtil.endsWith(fieldName.toLowerCase(), ' desc')) {\n fieldName = fieldName.replace(/ desc$/i, '');\n comparer = 'descending';\n }\n if (!comparer || typeof comparer === 'string') {\n order = comparer ? comparer.toLowerCase() : 'ascending';\n comparer = DataUtil.fnSort(comparer);\n }\n if (isFromGroup) {\n sorts = Query.filterQueries(this.queries, 'onSortBy');\n for (var i = 0; i < sorts.length; i++) {\n temp = sorts[i].e.fieldName;\n if (typeof temp === 'string') {\n if (temp === fieldName) {\n return this;\n }\n }\n else if (temp instanceof Array) {\n for (var j = 0; j < temp.length; j++) {\n if (temp[j] === fieldName || fieldName.toLowerCase() === temp[j] + ' desc') {\n return this;\n }\n }\n }\n }\n }\n this.queries.push({\n fn: 'onSortBy',\n e: {\n fieldName: fieldName,\n comparer: comparer,\n direction: order\n }\n });\n return this;\n };\n /**\n * Sorts data in descending order.\n *\n * @param {string} fieldName - Defines the column field.\n */\n Query.prototype.sortByDesc = function (fieldName) {\n return this.sortBy(fieldName, 'descending');\n };\n /**\n * Groups data with the given field name.\n *\n * @param {string} fieldName - Defines the column field.\n * @param fn\n * @param format\n */\n Query.prototype.group = function (fieldName, fn, format) {\n this.sortBy(fieldName, null, true);\n this.queries.push({\n fn: 'onGroup',\n e: {\n fieldName: fieldName,\n comparer: fn ? fn : null,\n format: format ? format : null\n }\n });\n return this;\n };\n /**\n * Gets data based on the given page index and size.\n *\n * @param {number} pageIndex - Defines the current page index.\n * @param {number} pageSize - Defines the no of records per page.\n */\n Query.prototype.page = function (pageIndex, pageSize) {\n this.queries.push({\n fn: 'onPage',\n e: {\n pageIndex: pageIndex,\n pageSize: pageSize\n }\n });\n return this;\n };\n /**\n * Gets data based on the given start and end index.\n *\n * @param {number} start - Defines the start index of the datasource.\n * @param {number} end - Defines the end index of the datasource.\n */\n Query.prototype.range = function (start, end) {\n this.queries.push({\n fn: 'onRange',\n e: {\n start: start,\n end: end\n }\n });\n return this;\n };\n /**\n * Gets data from the top of the data source based on given number of records count.\n *\n * @param {number} nos - Defines the no of records to retrieve from datasource.\n */\n Query.prototype.take = function (nos) {\n this.queries.push({\n fn: 'onTake',\n e: {\n nos: nos\n }\n });\n return this;\n };\n /**\n * Skips data with given number of records count from the top of the data source.\n *\n * @param {number} nos - Defines the no of records skip in the datasource.\n */\n Query.prototype.skip = function (nos) {\n this.queries.push({\n fn: 'onSkip',\n e: { nos: nos }\n });\n return this;\n };\n /**\n * Selects specified columns from the data source.\n *\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n */\n Query.prototype.select = function (fieldNames) {\n if (typeof fieldNames === 'string') {\n fieldNames = [].slice.call([fieldNames], 0);\n }\n this.queries.push({\n fn: 'onSelect',\n e: { fieldNames: fieldNames }\n });\n return this;\n };\n /**\n * Gets the records in hierarchical relationship from two tables. It requires the foreign key to relate two tables.\n *\n * @param {Query} query - Defines the query to relate two tables.\n * @param {Function} selectorFn - Defines the custom function to select records.\n */\n Query.prototype.hierarchy = function (query, selectorFn) {\n this.subQuerySelector = selectorFn;\n this.subQuery = query;\n return this;\n };\n /**\n * Sets the foreign key which is used to get data from the related table.\n *\n * @param {string} key - Defines the foreign key.\n */\n Query.prototype.foreignKey = function (key) {\n this.fKey = key;\n return this;\n };\n /**\n * It is used to get total number of records in the DataManager execution result.\n */\n Query.prototype.requiresCount = function () {\n this.isCountRequired = true;\n return this;\n };\n //type - sum, avg, min, max\n /**\n * Aggregate the data with given type and field name.\n *\n * @param {string} type - Defines the aggregate type.\n * @param {string} field - Defines the column field to aggregate.\n */\n Query.prototype.aggregate = function (type, field) {\n this.queries.push({\n fn: 'onAggregates',\n e: { field: field, type: type }\n });\n return this;\n };\n /**\n * Pass array of filterColumn query for performing filter operation.\n *\n * @param {QueryOptions[]} queries\n * @param {string} name\n * @hidden\n */\n Query.filterQueries = function (queries, name) {\n return queries.filter(function (q) {\n return q.fn === name;\n });\n };\n /**\n * To get the list of queries which is already filtered in current data source.\n *\n * @param {Object[]} queries\n * @param {string[]} singles\n * @hidden\n */\n Query.filterQueryLists = function (queries, singles) {\n var filtered = queries.filter(function (q) {\n return singles.indexOf(q.fn) !== -1;\n });\n var res = {};\n for (var i = 0; i < filtered.length; i++) {\n if (!res[filtered[i].fn]) {\n res[filtered[i].fn] = filtered[i].e;\n }\n }\n return res;\n };\n return Query;\n}());\n/**\n * Predicate class is used to generate complex filter criteria.\n * This will be used by DataManager to perform multiple filtering operation.\n */\nvar Predicate = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for Predicate class.\n *\n * @param {string|Predicate} field\n * @param {string} operator\n * @param {string|number|boolean|Predicate|Predicate[]} value\n * @param {boolean=false} ignoreCase\n * @param ignoreAccent\n * @param {boolean} matchCase\n * @hidden\n */\n function Predicate(field, operator, value, ignoreCase, ignoreAccent, matchCase) {\n if (ignoreCase === void 0) { ignoreCase = false; }\n /** @hidden */\n this.ignoreAccent = false;\n /** @hidden */\n this.isComplex = false;\n if (typeof field === 'string') {\n this.field = field;\n this.operator = operator.toLowerCase();\n this.value = value;\n this.matchCase = matchCase;\n this.ignoreCase = ignoreCase;\n this.ignoreAccent = ignoreAccent;\n this.isComplex = false;\n this.comparer = DataUtil.fnOperators.processOperator(this.operator);\n }\n else if (field instanceof Predicate && value instanceof Predicate || value instanceof Array) {\n this.isComplex = true;\n this.condition = operator.toLowerCase();\n this.predicates = [field];\n this.matchCase = field.matchCase;\n this.ignoreCase = field.ignoreCase;\n this.ignoreAccent = field.ignoreAccent;\n if (value instanceof Array) {\n [].push.apply(this.predicates, value);\n }\n else {\n this.predicates.push(value);\n }\n }\n return this;\n }\n /**\n * Adds n-number of new predicates on existing predicate with “and” condition.\n *\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.and = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'and');\n };\n /**\n * Adds new predicate on existing predicate with “and” condition.\n *\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n * @param ignoreCase\n * @param ignoreAccent\n */\n Predicate.prototype.and = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'and', ignoreCase, ignoreAccent);\n };\n /**\n * Adds n-number of new predicates on existing predicate with “or” condition.\n *\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.or = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'or');\n };\n /**\n * Adds new predicate on existing predicate with “or” condition.\n *\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n * @param ignoreCase\n * @param ignoreAccent\n */\n Predicate.prototype.or = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'or', ignoreCase, ignoreAccent);\n };\n /**\n * Adds n-number of new predicates on existing predicate with “and not” condition.\n *\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.ornot = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'or not');\n };\n /**\n * Adds new predicate on existing predicate with “and not” condition.\n *\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n * @param ignoreCase\n * @param ignoreAccent\n */\n Predicate.prototype.ornot = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'ornot', ignoreCase, ignoreAccent);\n };\n /**\n * Adds n-number of new predicates on existing predicate with “and not” condition.\n *\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.andnot = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'and not');\n };\n /**\n * Adds new predicate on existing predicate with “and not” condition.\n *\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n * @param ignoreCase\n * @param ignoreAccent\n */\n Predicate.prototype.andnot = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'andnot', ignoreCase, ignoreAccent);\n };\n /**\n * Converts plain JavaScript object to Predicate object.\n *\n * @param {Predicate[]|Predicate} json - Defines single or collection of Predicate.\n */\n Predicate.fromJson = function (json) {\n if (json instanceof Array) {\n var res = [];\n for (var i = 0, len = json.length; i < len; i++) {\n res.push(this.fromJSONData(json[i]));\n }\n return res;\n }\n var pred = json;\n return this.fromJSONData(pred);\n };\n /**\n * Validate the record based on the predicates.\n *\n * @param {Object} record - Defines the datasource record.\n */\n Predicate.prototype.validate = function (record) {\n var predicate = this.predicates ? this.predicates : [];\n var ret;\n var isAnd;\n if (!this.isComplex && this.comparer) {\n if (this.condition && this.condition.indexOf('not') !== -1) {\n this.condition = this.condition.split('not')[0] === '' ? undefined : this.condition.split('not')[0];\n return !this.comparer.call(this, DataUtil.getObject(this.field, record), this.value, this.ignoreCase, this.ignoreAccent);\n }\n else {\n return this.comparer.call(this, DataUtil.getObject(this.field, record), this.value, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (this.condition && this.condition.indexOf('not') !== -1) {\n isAnd = this.condition.indexOf('and') !== -1;\n }\n else {\n isAnd = this.condition === 'and';\n }\n for (var i = 0; i < predicate.length; i++) {\n if (i > 0 && this.condition && this.condition.indexOf('not') !== -1) {\n predicate[i].condition = predicate[i].condition ? predicate[i].condition + 'not' : 'not';\n }\n ret = predicate[i].validate(record);\n if (isAnd) {\n if (!ret) {\n return false;\n }\n }\n else {\n if (ret) {\n return true;\n }\n }\n }\n return isAnd;\n };\n /**\n * Converts predicates to plain JavaScript.\n * This method is uses Json stringify when serializing Predicate object.\n */\n Predicate.prototype.toJson = function () {\n var predicates;\n var p;\n if (this.isComplex) {\n predicates = [];\n p = this.predicates;\n for (var i = 0; i < p.length; i++) {\n predicates.push(p[i].toJson());\n }\n }\n return {\n isComplex: this.isComplex,\n field: this.field,\n operator: this.operator,\n value: this.value,\n ignoreCase: this.ignoreCase,\n ignoreAccent: this.ignoreAccent,\n condition: this.condition,\n predicates: predicates,\n matchCase: this.matchCase\n };\n };\n Predicate.combinePredicates = function (predicates, operator) {\n if (predicates.length === 1) {\n if (!(predicates[0] instanceof Array)) {\n return predicates[0];\n }\n predicates = predicates[0];\n }\n return new Predicate(predicates[0], operator, predicates.slice(1));\n };\n Predicate.combine = function (pred, field, operator, value, condition, ignoreCase, ignoreAccent) {\n if (field instanceof Predicate) {\n return Predicate[condition](pred, field);\n }\n if (typeof field === 'string') {\n return Predicate[condition](pred, new Predicate(field, operator, value, ignoreCase, ignoreAccent));\n }\n return DataUtil.throwError('Predicate - ' + condition + ' : invalid arguments');\n };\n Predicate.fromJSONData = function (json) {\n var preds = json.predicates || [];\n var len = preds.length;\n var predicates = [];\n var result;\n for (var i = 0; i < len; i++) {\n predicates.push(this.fromJSONData(preds[i]));\n }\n if (!json.isComplex) {\n result = new Predicate(json.field, json.operator, json.value, json.ignoreCase, json.ignoreAccent);\n }\n else {\n result = new Predicate(predicates[0], json.condition, predicates.slice(1));\n }\n return result;\n };\n return Predicate;\n}());\n\n/* eslint-disable valid-jsdoc */\nvar consts = { GroupGuid: '{271bbba0-1ee7}' };\n/**\n * Data manager common utility methods.\n *\n * @hidden\n */\nvar DataUtil = /** @__PURE__ @class */ (function () {\n function DataUtil() {\n }\n /**\n * Returns the value by invoking the provided parameter function.\n * If the paramater is not of type function then it will be returned as it is.\n *\n * @param {Function|string|string[]|number} value\n * @param {Object} inst?\n * @param inst\n * @hidden\n */\n DataUtil.getValue = function (value, inst) {\n if (typeof value === 'function') {\n return value.call(inst || {});\n }\n return value;\n };\n /**\n * Returns true if the input string ends with given string.\n *\n * @param {string} input\n * @param {string} substr\n */\n DataUtil.endsWith = function (input, substr) {\n return input.slice && input.slice(-substr.length) === substr;\n };\n /**\n * Returns true if the input string not ends with given string.\n *\n * @param {string} input\n * @param {string} substr\n */\n DataUtil.notEndsWith = function (input, substr) {\n return input.slice && input.slice(-substr.length) !== substr;\n };\n /**\n * Returns true if the input string starts with given string.\n *\n * @param {string} str\n * @param {string} startstr\n * @param input\n * @param start\n */\n DataUtil.startsWith = function (input, start) {\n return input.slice(0, start.length) === start;\n };\n /**\n * Returns true if the input string not starts with given string.\n *\n * @param {string} str\n * @param {string} startstr\n * @param input\n * @param start\n */\n DataUtil.notStartsWith = function (input, start) {\n return input.slice(0, start.length) !== start;\n };\n /**\n * Returns true if the input string pattern(wildcard) matches with given string.\n *\n * @param {string} str\n * @param {string} startstr\n * @param input\n * @param pattern\n */\n DataUtil.wildCard = function (input, pattern) {\n var asteriskSplit;\n var optionalSplit;\n // special character allowed search\n if (pattern.indexOf('[') !== -1) {\n pattern = pattern.split('[').join('[[]');\n }\n if (pattern.indexOf('(') !== -1) {\n pattern = pattern.split('(').join('[(]');\n }\n if (pattern.indexOf(')') !== -1) {\n pattern = pattern.split(')').join('[)]');\n }\n if (pattern.indexOf('\\\\') !== -1) {\n pattern = pattern.split('\\\\').join('[\\\\\\\\]');\n }\n if (pattern.indexOf('*') !== -1) {\n if (pattern.charAt(0) !== '*') {\n pattern = '^' + pattern;\n }\n if (pattern.charAt(pattern.length - 1) !== '*') {\n pattern = pattern + '$';\n }\n asteriskSplit = pattern.split('*');\n for (var i = 0; i < asteriskSplit.length; i++) {\n if (asteriskSplit[i].indexOf('.') === -1) {\n asteriskSplit[i] = asteriskSplit[i] + '.*';\n }\n else {\n asteriskSplit[i] = asteriskSplit[i] + '*';\n }\n }\n pattern = asteriskSplit.join('');\n }\n if (pattern.indexOf('%3f') !== -1 || pattern.indexOf('?') !== -1) {\n optionalSplit = pattern.indexOf('%3f') !== -1 ? pattern.split('%3f') : pattern.split('?');\n pattern = optionalSplit.join('.');\n }\n // eslint-disable-next-line security/detect-non-literal-regexp\n var regexPattern = new RegExp(pattern, 'g');\n return regexPattern.test(input);\n };\n /**\n * Returns true if the input string pattern(like) matches with given string.\n *\n * @param {string} str\n * @param {string} startstr\n * @param input\n * @param pattern\n */\n DataUtil.like = function (input, pattern) {\n if (pattern.indexOf('%') !== -1) {\n if (pattern.charAt(0) === '%' && pattern.lastIndexOf('%') < 2) {\n pattern = pattern.substring(1, pattern.length);\n return DataUtil.startsWith(DataUtil.toLowerCase(input), DataUtil.toLowerCase(pattern));\n }\n else if (pattern.charAt(pattern.length - 1) === '%' && pattern.indexOf('%') > pattern.length - 3) {\n pattern = pattern.substring(0, pattern.length - 1);\n return DataUtil.endsWith(DataUtil.toLowerCase(input), DataUtil.toLowerCase(pattern));\n }\n else if (pattern.lastIndexOf('%') !== pattern.indexOf('%') && pattern.lastIndexOf('%') > pattern.indexOf('%') + 1) {\n pattern = pattern.substring(pattern.indexOf('%') + 1, pattern.lastIndexOf('%'));\n return input.indexOf(pattern) !== -1;\n }\n else {\n return input.indexOf(pattern) !== -1;\n }\n }\n else {\n return false;\n }\n };\n /**\n * To return the sorting function based on the string.\n *\n * @param {string} order\n * @hidden\n */\n DataUtil.fnSort = function (order) {\n order = order ? DataUtil.toLowerCase(order) : 'ascending';\n if (order === 'ascending') {\n return this.fnAscending;\n }\n return this.fnDescending;\n };\n /**\n * Comparer function which is used to sort the data in ascending order.\n *\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnAscending = function (x, y) {\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n return -1;\n }\n if (y === null || y === undefined) {\n return -1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y);\n }\n if (x === null || x === undefined) {\n return 1;\n }\n return x - y;\n };\n /**\n * Comparer function which is used to sort the data in descending order.\n *\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnDescending = function (x, y) {\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n return -1;\n }\n if (y === null || y === undefined) {\n return 1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y) * -1;\n }\n if (x === null || x === undefined) {\n return -1;\n }\n return y - x;\n };\n DataUtil.extractFields = function (obj, fields) {\n var newObj = {};\n for (var i = 0; i < fields.length; i++) {\n newObj = this.setValue(fields[i], this.getObject(fields[i], obj), newObj);\n }\n return newObj;\n };\n /**\n * Select objects by given fields from jsonArray.\n *\n * @param {Object[]} jsonArray\n * @param {string[]} fields\n */\n DataUtil.select = function (jsonArray, fields) {\n var newData = [];\n for (var i = 0; i < jsonArray.length; i++) {\n newData.push(this.extractFields(jsonArray[i], fields));\n }\n return newData;\n };\n /**\n * Group the input data based on the field name.\n * It also performs aggregation of the grouped records based on the aggregates paramater.\n *\n * @param {Object[]} jsonArray\n * @param {string} field?\n * @param {Object[]} agg?\n * @param {number} level?\n * @param {Object[]} groupDs?\n * @param field\n * @param aggregates\n * @param level\n * @param groupDs\n * @param format\n * @param isLazyLoad\n */\n DataUtil.group = function (jsonArray, field, aggregates, level, groupDs, format, isLazyLoad) {\n level = level || 1;\n var jsonData = jsonArray;\n var guid = 'GroupGuid';\n if (jsonData.GroupGuid === consts[guid]) {\n var _loop_1 = function (j) {\n if (!isNullOrUndefined(groupDs)) {\n var indx = -1;\n var temp = groupDs.filter(function (e) { return e.key === jsonData[j].key; });\n indx = groupDs.indexOf(temp[0]);\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, groupDs[indx].items, format, isLazyLoad);\n jsonData[j].count = groupDs[indx].count;\n }\n else {\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, null, format, isLazyLoad);\n jsonData[j].count = jsonData[j].items.length;\n }\n };\n var this_1 = this;\n for (var j = 0; j < jsonData.length; j++) {\n _loop_1(j);\n }\n jsonData.childLevels += 1;\n return jsonData;\n }\n var grouped = {};\n var groupedArray = [];\n groupedArray.GroupGuid = consts[guid];\n groupedArray.level = level;\n groupedArray.childLevels = 0;\n groupedArray.records = jsonData;\n var _loop_2 = function (i) {\n var val = this_2.getVal(jsonData, i, field);\n if (!isNullOrUndefined(format)) {\n val = format(val, field);\n }\n if (!grouped[val]) {\n grouped[val] = {\n key: val,\n count: 0,\n items: [],\n aggregates: {},\n field: field\n };\n groupedArray.push(grouped[val]);\n if (!isNullOrUndefined(groupDs)) {\n var tempObj = groupDs.filter(function (e) { return e.key === grouped[val].key; });\n grouped[val].count = tempObj[0].count;\n }\n }\n grouped[val].count = !isNullOrUndefined(groupDs) ? grouped[val].count : grouped[val].count += 1;\n if (!isLazyLoad || (isLazyLoad && aggregates.length)) {\n grouped[val].items.push(jsonData[i]);\n }\n };\n var this_2 = this;\n for (var i = 0; i < jsonData.length; i++) {\n _loop_2(i);\n }\n if (aggregates && aggregates.length) {\n var _loop_3 = function (i) {\n var res = {};\n var fn = void 0;\n var aggs = aggregates;\n for (var j = 0; j < aggregates.length; j++) {\n fn = DataUtil.aggregates[aggregates[j].type];\n if (!isNullOrUndefined(groupDs)) {\n var temp = groupDs.filter(function (e) { return e.key === groupedArray[i].key; });\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(temp[0].items, aggs[j].field);\n }\n }\n else {\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(groupedArray[i].items, aggs[j].field);\n }\n }\n }\n groupedArray[i].aggregates = res;\n };\n for (var i = 0; i < groupedArray.length; i++) {\n _loop_3(i);\n }\n }\n if (isLazyLoad && groupedArray.length && aggregates.length) {\n for (var i = 0; i < groupedArray.length; i++) {\n groupedArray[i].items = [];\n }\n }\n return jsonData.length && groupedArray || jsonData;\n };\n /**\n * It is used to categorize the multiple items based on a specific field in jsonArray.\n * The hierarchical queries are commonly required when you use foreign key binding.\n *\n * @param {string} fKey\n * @param {string} from\n * @param {Object[]} source\n * @param {Group} lookup?\n * @param {string} pKey?\n * @param lookup\n * @param pKey\n * @hidden\n */\n DataUtil.buildHierarchy = function (fKey, from, source, lookup, pKey) {\n var i;\n var grp = {};\n var temp;\n if (lookup.result) {\n lookup = lookup.result;\n }\n if (lookup.GroupGuid) {\n this.throwError('DataManager: Do not have support Grouping in hierarchy');\n }\n for (i = 0; i < lookup.length; i++) {\n var fKeyData = this.getObject(fKey, lookup[i]);\n temp = grp[fKeyData] || (grp[fKeyData] = []);\n temp.push(lookup[i]);\n }\n for (i = 0; i < source.length; i++) {\n var fKeyData = this.getObject(pKey || fKey, source[i]);\n source[i][from] = grp[fKeyData];\n }\n };\n /**\n * The method used to get the field names which started with specified characters.\n *\n * @param {Object} obj\n * @param {string[]} fields?\n * @param {string} prefix?\n * @param fields\n * @param prefix\n * @hidden\n */\n DataUtil.getFieldList = function (obj, fields, prefix) {\n if (prefix === undefined) {\n prefix = '';\n }\n if (fields === undefined || fields === null) {\n return this.getFieldList(obj, [], prefix);\n }\n var copyObj = obj;\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n if (typeof copyObj[prop] === 'object' && !(copyObj[prop] instanceof Array)) {\n this.getFieldList(copyObj[prop], fields, prefix + prop + '.');\n }\n else {\n fields.push(prefix + prop);\n }\n }\n return fields;\n };\n /**\n * Gets the value of the property in the given object.\n * The complex object can be accessed by providing the field names concatenated with dot(.).\n *\n * @param {string} nameSpace - The name of the property to be accessed.\n * @param {Object} from - Defines the source object.\n */\n DataUtil.getObject = function (nameSpace, from) {\n if (!nameSpace) {\n return from;\n }\n if (!from) {\n return undefined;\n }\n if (nameSpace.indexOf('.') === -1) {\n var lowerCaseNameSpace = nameSpace.charAt(0).toLowerCase() + nameSpace.slice(1);\n var upperCaseNameSpace = nameSpace.charAt(0).toUpperCase() + nameSpace.slice(1);\n if (!isNullOrUndefined(from[nameSpace])) {\n return from[nameSpace];\n }\n else {\n if (!isNullOrUndefined(from[lowerCaseNameSpace])) {\n return from[lowerCaseNameSpace];\n }\n else if (!isNullOrUndefined(from[upperCaseNameSpace])) {\n return from[upperCaseNameSpace];\n }\n else {\n return null;\n }\n }\n }\n var value = from;\n var splits = nameSpace.split('.');\n for (var i = 0; i < splits.length; i++) {\n if (value == null) {\n break;\n }\n value = value[splits[i]];\n if (value === undefined) {\n var casing = splits[i].charAt(0).toUpperCase() + splits[i].slice(1);\n value = from[casing] || from[casing.charAt(0).toLowerCase() + casing.slice(1)] || null;\n }\n from = value;\n }\n return value;\n };\n /**\n * To set value for the nameSpace in desired object.\n *\n * @param {string} nameSpace - String value to the get the inner object.\n * @param {Object} value - Value that you need to set.\n * @param {Object} obj - Object to get the inner object value.\n * @return { [key: string]: Object; } | Object\n * @hidden\n */\n DataUtil.setValue = function (nameSpace, value, obj) {\n var keys = nameSpace.toString().split('.');\n var start = obj || {};\n var fromObj = start;\n var i;\n var length = keys.length;\n var key;\n for (i = 0; i < length; i++) {\n key = keys[i];\n if (i + 1 === length) {\n fromObj[key] = value === undefined ? undefined : value;\n }\n else if (isNullOrUndefined(fromObj[key])) {\n fromObj[key] = {};\n }\n fromObj = fromObj[key];\n }\n return start;\n };\n /**\n * Sort the given data based on the field and comparer.\n *\n * @param {Object[]} ds - Defines the input data.\n * @param {string} field - Defines the field to be sorted.\n * @param {Function} comparer - Defines the comparer function used to sort the records.\n */\n DataUtil.sort = function (ds, field, comparer) {\n if (ds.length <= 1) {\n return ds;\n }\n var middle = parseInt((ds.length / 2).toString(), 10);\n var left = ds.slice(0, middle);\n var right = ds.slice(middle);\n left = this.sort(left, field, comparer);\n right = this.sort(right, field, comparer);\n return this.merge(left, right, field, comparer);\n };\n DataUtil.ignoreDiacritics = function (value) {\n if (typeof value !== 'string') {\n return value;\n }\n var result = value.split('');\n var newValue = result.map(function (temp) { return temp in DataUtil.diacritics ? DataUtil.diacritics[temp] : temp; });\n return newValue.join('');\n };\n DataUtil.merge = function (left, right, fieldName, comparer) {\n var result = [];\n var current;\n while (left.length > 0 || right.length > 0) {\n if (left.length > 0 && right.length > 0) {\n if (comparer) {\n current = comparer(this.getVal(left, 0, fieldName), this.getVal(right, 0, fieldName), left[0], right[0]) <= 0 ? left : right;\n }\n else {\n current = left[0][fieldName] < left[0][fieldName] ? left : right;\n }\n }\n else {\n current = left.length > 0 ? left : right;\n }\n result.push(current.shift());\n }\n return result;\n };\n DataUtil.getVal = function (array, index, field) {\n return field ? this.getObject(field, array[index]) : array[index];\n };\n DataUtil.toLowerCase = function (val) {\n return val ? typeof val === 'string' ? val.toLowerCase() : val.toString() : (val === 0 || val === false) ? val.toString() : '';\n };\n /**\n * To perform the filter operation with specified adaptor and returns the result.\n *\n * @param {Object} adaptor\n * @param {string} fnName\n * @param {Object} param1?\n * @param {Object} param2?\n * @param param1\n * @param param2\n * @hidden\n */\n DataUtil.callAdaptorFunction = function (adaptor, fnName, param1, param2) {\n if (fnName in adaptor) {\n var res = adaptor[fnName](param1, param2);\n if (!isNullOrUndefined(res)) {\n param1 = res;\n }\n }\n return param1;\n };\n DataUtil.getAddParams = function (adp, dm, query) {\n var req = {};\n DataUtil.callAdaptorFunction(adp, 'addParams', {\n dm: dm,\n query: query,\n params: query ? query.params : [],\n reqParams: req\n });\n return req;\n };\n /**\n * Checks wheather the given input is a plain object or not.\n *\n * @param {Object|Object[]} obj\n */\n DataUtil.isPlainObject = function (obj) {\n return (!!obj) && (obj.constructor === Object);\n };\n /**\n * Returns true when the browser cross origin request.\n */\n DataUtil.isCors = function () {\n var xhr = null;\n var request = 'XMLHttpRequest';\n try {\n xhr = new window[request]();\n }\n catch (e) {\n // No exception handling\n }\n return !!xhr && ('withCredentials' in xhr);\n };\n /**\n * Generate random GUID value which will be prefixed with the given value.\n *\n * @param {string} prefix\n */\n DataUtil.getGuid = function (prefix) {\n var hexs = '0123456789abcdef';\n var rand;\n return (prefix || '') + '00000000-0000-4000-0000-000000000000'.replace(/0/g, function (val, i) {\n if ('crypto' in window && 'getRandomValues' in crypto) {\n var arr = new Uint8Array(1);\n window.crypto.getRandomValues(arr);\n rand = arr[0] % 16 | 0;\n }\n else {\n rand = Math.random() * 16 | 0;\n }\n return hexs[i === 19 ? rand & 0x3 | 0x8 : rand];\n });\n };\n /**\n * Checks wheather the given value is null or not.\n *\n * @param {string|Object} val\n * @returns boolean\n */\n DataUtil.isNull = function (val) {\n return val === undefined || val === null;\n };\n /**\n * To get the required items from collection of objects.\n *\n * @param {Object[]} array\n * @param {string} field\n * @param {Function} comparer\n * @returns Object\n * @hidden\n */\n DataUtil.getItemFromComparer = function (array, field, comparer) {\n var keyVal;\n var current;\n var key;\n var i = 0;\n var castRequired = typeof DataUtil.getVal(array, 0, field) === 'string';\n if (array.length) {\n while (isNullOrUndefined(keyVal) && i < array.length) {\n keyVal = DataUtil.getVal(array, i, field);\n key = array[i++];\n }\n }\n for (; i < array.length; i++) {\n current = DataUtil.getVal(array, i, field);\n if (isNullOrUndefined(current)) {\n continue;\n }\n if (castRequired) {\n keyVal = +keyVal;\n current = +current;\n }\n if (comparer(keyVal, current) > 0) {\n keyVal = current;\n key = array[i];\n }\n }\n return key;\n };\n /**\n * To get distinct values of Array or Array of Objects.\n *\n * @param {Object[]} json\n * @param {string} field\n * @param fieldName\n * @param {boolean} requiresCompleteRecord\n * @returns Object[]\n * * distinct array of objects is return when requiresCompleteRecord set as true.\n * @hidden\n */\n DataUtil.distinct = function (json, fieldName, requiresCompleteRecord) {\n requiresCompleteRecord = isNullOrUndefined(requiresCompleteRecord) ? false : requiresCompleteRecord;\n var result = [];\n var val;\n var tmp = {};\n json.forEach(function (data, index) {\n val = typeof (json[index]) === 'object' ? DataUtil.getVal(json, index, fieldName) : json[index];\n if (!(val in tmp)) {\n result.push(!requiresCompleteRecord ? val : json[index]);\n tmp[val] = 1;\n }\n });\n return result;\n };\n /**\n * Process the given records based on the datamanager string.\n *\n * @param {string} datamanager\n * @param dm\n * @param {Object[]} records\n */\n DataUtil.processData = function (dm, records) {\n var query = this.prepareQuery(dm);\n var sampledata = new DataManager(records);\n if (dm.requiresCounts) {\n query.requiresCount();\n }\n /* eslint-disable @typescript-eslint/no-explicit-any */\n // tslint:disable-next-line:no-any\n var result = sampledata.executeLocal(query);\n /* eslint-enable @typescript-eslint/no-explicit-any */\n var returnValue = {\n result: dm.requiresCounts ? result.result : result,\n count: result.count,\n aggregates: JSON.stringify(result.aggregates)\n };\n return dm.requiresCounts ? returnValue : result;\n };\n DataUtil.prepareQuery = function (dm) {\n var _this = this;\n var query = new Query();\n if (dm.select) {\n query.select(dm.select);\n }\n if (dm.where) {\n var where = DataUtil.parse.parseJson(dm.where);\n where.filter(function (pred) {\n if (isNullOrUndefined(pred.condition)) {\n query.where(pred.field, pred.operator, pred.value, pred.ignoreCase, pred.ignoreAccent);\n }\n else {\n var predicateList = [];\n if (pred.field) {\n predicateList.push(new Predicate(pred.field, pred.operator, pred.value, pred.ignoreCase, pred.ignoreAccent));\n }\n else {\n predicateList = predicateList.concat(_this.getPredicate(pred.predicates));\n }\n if (pred.condition === 'or') {\n query.where(Predicate.or(predicateList));\n }\n else if (pred.condition === 'and') {\n query.where(Predicate.and(predicateList));\n }\n }\n });\n }\n if (dm.search) {\n var search = DataUtil.parse.parseJson(dm.search);\n // tslint:disable-next-line:no-string-literal\n search.filter(function (e) { return query.search(e.key, e.fields, e['operator'], \n // tslint:disable-next-line:no-string-literal\n e['ignoreCase'], e['ignoreAccent']); });\n }\n if (dm.aggregates) {\n dm.aggregates.filter(function (e) { return query.aggregate(e.type, e.field); });\n }\n if (dm.sorted) {\n dm.sorted.filter(function (e) { return query.sortBy(e.name, e.direction); });\n }\n if (dm.skip) {\n query.skip(dm.skip);\n }\n if (dm.take) {\n query.take(dm.take);\n }\n if (dm.group) {\n dm.group.filter(function (grp) { return query.group(grp); });\n }\n return query;\n };\n DataUtil.getPredicate = function (pred) {\n var mainPred = [];\n for (var i = 0; i < pred.length; i++) {\n var e = pred[i];\n if (e.field) {\n mainPred.push(new Predicate(e.field, e.operator, e.value, e.ignoreCase, e.ignoreAccent));\n }\n else {\n var childPred = [];\n // tslint:disable-next-line:typedef\n var cpre = this.getPredicate(e.predicates);\n for (var _i = 0, _a = Object.keys(cpre); _i < _a.length; _i++) {\n var prop = _a[_i];\n childPred.push(cpre[prop]);\n }\n mainPred.push(e.condition === 'or' ? Predicate.or(childPred) : Predicate.and(childPred));\n }\n }\n return mainPred;\n };\n /**\n * Specifies the value which will be used to adjust the date value to server timezone.\n *\n * @default null\n */\n DataUtil.serverTimezoneOffset = null;\n /**\n * Species whether are not to be parsed with serverTimezoneOffset value.\n *\n * @hidden\n */\n DataUtil.timeZoneHandling = true;\n /**\n * Throw error with the given string as message.\n *\n * @param {string} er\n * @param error\n */\n DataUtil.throwError = function (error) {\n try {\n throw new Error(error);\n }\n catch (e) {\n // eslint-disable-next-line no-throw-literal\n throw e.message + '\\n' + e.stack;\n }\n };\n DataUtil.aggregates = {\n /**\n * Calculate sum of the given field in the data.\n *\n * @param {Object[]} ds\n * @param {string} field\n */\n sum: function (ds, field) {\n var result = 0;\n var val;\n var castRequired = typeof DataUtil.getVal(ds, 0, field) !== 'number';\n for (var i = 0; i < ds.length; i++) {\n val = DataUtil.getVal(ds, i, field);\n if (!isNaN(val) && val !== null) {\n if (castRequired) {\n val = +val;\n }\n result += val;\n }\n }\n return result;\n },\n /**\n * Calculate average value of the given field in the data.\n *\n * @param {Object[]} ds\n * @param {string} field\n */\n average: function (ds, field) {\n return DataUtil.aggregates.sum(ds, field) / ds.length;\n },\n /**\n * Returns the min value of the data based on the field.\n *\n * @param {Object[]} ds\n * @param {string|Function} field\n */\n min: function (ds, field) {\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n return DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnAscending));\n },\n /**\n * Returns the max value of the data based on the field.\n *\n * @param {Object[]} ds\n * @param {string} field\n * @returns number\n */\n max: function (ds, field) {\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n return DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnDescending));\n },\n /**\n * Returns the total number of true value present in the data based on the given boolean field name.\n *\n * @param {Object[]} ds\n * @param {string} field\n */\n truecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', true, true)).length;\n },\n /**\n * Returns the total number of false value present in the data based on the given boolean field name.\n *\n * @param {Object[]} ds\n * @param {string} field\n */\n falsecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', false, true)).length;\n },\n /**\n * Returns the length of the given data.\n *\n * @param {Object[]} ds\n * @param {string} field?\n * @param field\n * @returns number\n */\n count: function (ds, field) {\n return ds.length;\n }\n };\n /**\n * Specifies the Object with filter operators.\n */\n DataUtil.operatorSymbols = {\n '<': 'lessthan',\n '>': 'greaterthan',\n '<=': 'lessthanorequal',\n '>=': 'greaterthanorequal',\n '==': 'equal',\n '!=': 'notequal',\n '*=': 'contains',\n '$=': 'endswith',\n '^=': 'startswith'\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * * It will be used for date/number type filter query.\n */\n DataUtil.odBiOperator = {\n '<': ' lt ',\n '>': ' gt ',\n '<=': ' le ',\n '>=': ' ge ',\n '==': ' eq ',\n '!=': ' ne ',\n 'lessthan': ' lt ',\n 'lessthanorequal': ' le ',\n 'greaterthan': ' gt ',\n 'greaterthanorequal': ' ge ',\n 'equal': ' eq ',\n 'notequal': ' ne '\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odUniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'substringof',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'substringof',\n 'doesnotendwith': 'not endswith',\n 'doesnotstartwith': 'not startswith',\n 'doesnotcontain': 'not substringof',\n 'wildcard': 'wildcard',\n 'like': 'like'\n };\n /**\n * Specifies the Object with filter operators which will be used for ODataV4 filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odv4UniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'contains',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'contains',\n 'doesnotendwith': 'not endswith',\n 'doesnotstartwith': 'not startswith',\n 'doesnotcontain': 'not contains',\n 'wildcard': 'wildcard',\n 'like': 'like'\n };\n DataUtil.diacritics = {\n '\\u24B6': 'A',\n '\\uFF21': 'A',\n '\\u00C0': 'A',\n '\\u00C1': 'A',\n '\\u00C2': 'A',\n '\\u1EA6': 'A',\n '\\u1EA4': 'A',\n '\\u1EAA': 'A',\n '\\u1EA8': 'A',\n '\\u00C3': 'A',\n '\\u0100': 'A',\n '\\u0102': 'A',\n '\\u1EB0': 'A',\n '\\u1EAE': 'A',\n '\\u1EB4': 'A',\n '\\u1EB2': 'A',\n '\\u0226': 'A',\n '\\u01E0': 'A',\n '\\u00C4': 'A',\n '\\u01DE': 'A',\n '\\u1EA2': 'A',\n '\\u00C5': 'A',\n '\\u01FA': 'A',\n '\\u01CD': 'A',\n '\\u0200': 'A',\n '\\u0202': 'A',\n '\\u1EA0': 'A',\n '\\u1EAC': 'A',\n '\\u1EB6': 'A',\n '\\u1E00': 'A',\n '\\u0104': 'A',\n '\\u023A': 'A',\n '\\u2C6F': 'A',\n '\\uA732': 'AA',\n '\\u00C6': 'AE',\n '\\u01FC': 'AE',\n '\\u01E2': 'AE',\n '\\uA734': 'AO',\n '\\uA736': 'AU',\n '\\uA738': 'AV',\n '\\uA73A': 'AV',\n '\\uA73C': 'AY',\n '\\u24B7': 'B',\n '\\uFF22': 'B',\n '\\u1E02': 'B',\n '\\u1E04': 'B',\n '\\u1E06': 'B',\n '\\u0243': 'B',\n '\\u0182': 'B',\n '\\u0181': 'B',\n '\\u24B8': 'C',\n '\\uFF23': 'C',\n '\\u0106': 'C',\n '\\u0108': 'C',\n '\\u010A': 'C',\n '\\u010C': 'C',\n '\\u00C7': 'C',\n '\\u1E08': 'C',\n '\\u0187': 'C',\n '\\u023B': 'C',\n '\\uA73E': 'C',\n '\\u24B9': 'D',\n '\\uFF24': 'D',\n '\\u1E0A': 'D',\n '\\u010E': 'D',\n '\\u1E0C': 'D',\n '\\u1E10': 'D',\n '\\u1E12': 'D',\n '\\u1E0E': 'D',\n '\\u0110': 'D',\n '\\u018B': 'D',\n '\\u018A': 'D',\n '\\u0189': 'D',\n '\\uA779': 'D',\n '\\u01F1': 'DZ',\n '\\u01C4': 'DZ',\n '\\u01F2': 'Dz',\n '\\u01C5': 'Dz',\n '\\u24BA': 'E',\n '\\uFF25': 'E',\n '\\u00C8': 'E',\n '\\u00C9': 'E',\n '\\u00CA': 'E',\n '\\u1EC0': 'E',\n '\\u1EBE': 'E',\n '\\u1EC4': 'E',\n '\\u1EC2': 'E',\n '\\u1EBC': 'E',\n '\\u0112': 'E',\n '\\u1E14': 'E',\n '\\u1E16': 'E',\n '\\u0114': 'E',\n '\\u0116': 'E',\n '\\u00CB': 'E',\n '\\u1EBA': 'E',\n '\\u011A': 'E',\n '\\u0204': 'E',\n '\\u0206': 'E',\n '\\u1EB8': 'E',\n '\\u1EC6': 'E',\n '\\u0228': 'E',\n '\\u1E1C': 'E',\n '\\u0118': 'E',\n '\\u1E18': 'E',\n '\\u1E1A': 'E',\n '\\u0190': 'E',\n '\\u018E': 'E',\n '\\u24BB': 'F',\n '\\uFF26': 'F',\n '\\u1E1E': 'F',\n '\\u0191': 'F',\n '\\uA77B': 'F',\n '\\u24BC': 'G',\n '\\uFF27': 'G',\n '\\u01F4': 'G',\n '\\u011C': 'G',\n '\\u1E20': 'G',\n '\\u011E': 'G',\n '\\u0120': 'G',\n '\\u01E6': 'G',\n '\\u0122': 'G',\n '\\u01E4': 'G',\n '\\u0193': 'G',\n '\\uA7A0': 'G',\n '\\uA77D': 'G',\n '\\uA77E': 'G',\n '\\u24BD': 'H',\n '\\uFF28': 'H',\n '\\u0124': 'H',\n '\\u1E22': 'H',\n '\\u1E26': 'H',\n '\\u021E': 'H',\n '\\u1E24': 'H',\n '\\u1E28': 'H',\n '\\u1E2A': 'H',\n '\\u0126': 'H',\n '\\u2C67': 'H',\n '\\u2C75': 'H',\n '\\uA78D': 'H',\n '\\u24BE': 'I',\n '\\uFF29': 'I',\n '\\u00CC': 'I',\n '\\u00CD': 'I',\n '\\u00CE': 'I',\n '\\u0128': 'I',\n '\\u012A': 'I',\n '\\u012C': 'I',\n '\\u0130': 'I',\n '\\u00CF': 'I',\n '\\u1E2E': 'I',\n '\\u1EC8': 'I',\n '\\u01CF': 'I',\n '\\u0208': 'I',\n '\\u020A': 'I',\n '\\u1ECA': 'I',\n '\\u012E': 'I',\n '\\u1E2C': 'I',\n '\\u0197': 'I',\n '\\u24BF': 'J',\n '\\uFF2A': 'J',\n '\\u0134': 'J',\n '\\u0248': 'J',\n '\\u24C0': 'K',\n '\\uFF2B': 'K',\n '\\u1E30': 'K',\n '\\u01E8': 'K',\n '\\u1E32': 'K',\n '\\u0136': 'K',\n '\\u1E34': 'K',\n '\\u0198': 'K',\n '\\u2C69': 'K',\n '\\uA740': 'K',\n '\\uA742': 'K',\n '\\uA744': 'K',\n '\\uA7A2': 'K',\n '\\u24C1': 'L',\n '\\uFF2C': 'L',\n '\\u013F': 'L',\n '\\u0139': 'L',\n '\\u013D': 'L',\n '\\u1E36': 'L',\n '\\u1E38': 'L',\n '\\u013B': 'L',\n '\\u1E3C': 'L',\n '\\u1E3A': 'L',\n '\\u0141': 'L',\n '\\u023D': 'L',\n '\\u2C62': 'L',\n '\\u2C60': 'L',\n '\\uA748': 'L',\n '\\uA746': 'L',\n '\\uA780': 'L',\n '\\u01C7': 'LJ',\n '\\u01C8': 'Lj',\n '\\u24C2': 'M',\n '\\uFF2D': 'M',\n '\\u1E3E': 'M',\n '\\u1E40': 'M',\n '\\u1E42': 'M',\n '\\u2C6E': 'M',\n '\\u019C': 'M',\n '\\u24C3': 'N',\n '\\uFF2E': 'N',\n '\\u01F8': 'N',\n '\\u0143': 'N',\n '\\u00D1': 'N',\n '\\u1E44': 'N',\n '\\u0147': 'N',\n '\\u1E46': 'N',\n '\\u0145': 'N',\n '\\u1E4A': 'N',\n '\\u1E48': 'N',\n '\\u0220': 'N',\n '\\u019D': 'N',\n '\\uA790': 'N',\n '\\uA7A4': 'N',\n '\\u01CA': 'NJ',\n '\\u01CB': 'Nj',\n '\\u24C4': 'O',\n '\\uFF2F': 'O',\n '\\u00D2': 'O',\n '\\u00D3': 'O',\n '\\u00D4': 'O',\n '\\u1ED2': 'O',\n '\\u1ED0': 'O',\n '\\u1ED6': 'O',\n '\\u1ED4': 'O',\n '\\u00D5': 'O',\n '\\u1E4C': 'O',\n '\\u022C': 'O',\n '\\u1E4E': 'O',\n '\\u014C': 'O',\n '\\u1E50': 'O',\n '\\u1E52': 'O',\n '\\u014E': 'O',\n '\\u022E': 'O',\n '\\u0230': 'O',\n '\\u00D6': 'O',\n '\\u022A': 'O',\n '\\u1ECE': 'O',\n '\\u0150': 'O',\n '\\u01D1': 'O',\n '\\u020C': 'O',\n '\\u020E': 'O',\n '\\u01A0': 'O',\n '\\u1EDC': 'O',\n '\\u1EDA': 'O',\n '\\u1EE0': 'O',\n '\\u1EDE': 'O',\n '\\u1EE2': 'O',\n '\\u1ECC': 'O',\n '\\u1ED8': 'O',\n '\\u01EA': 'O',\n '\\u01EC': 'O',\n '\\u00D8': 'O',\n '\\u01FE': 'O',\n '\\u0186': 'O',\n '\\u019F': 'O',\n '\\uA74A': 'O',\n '\\uA74C': 'O',\n '\\u01A2': 'OI',\n '\\uA74E': 'OO',\n '\\u0222': 'OU',\n '\\u24C5': 'P',\n '\\uFF30': 'P',\n '\\u1E54': 'P',\n '\\u1E56': 'P',\n '\\u01A4': 'P',\n '\\u2C63': 'P',\n '\\uA750': 'P',\n '\\uA752': 'P',\n '\\uA754': 'P',\n '\\u24C6': 'Q',\n '\\uFF31': 'Q',\n '\\uA756': 'Q',\n '\\uA758': 'Q',\n '\\u024A': 'Q',\n '\\u24C7': 'R',\n '\\uFF32': 'R',\n '\\u0154': 'R',\n '\\u1E58': 'R',\n '\\u0158': 'R',\n '\\u0210': 'R',\n '\\u0212': 'R',\n '\\u1E5A': 'R',\n '\\u1E5C': 'R',\n '\\u0156': 'R',\n '\\u1E5E': 'R',\n '\\u024C': 'R',\n '\\u2C64': 'R',\n '\\uA75A': 'R',\n '\\uA7A6': 'R',\n '\\uA782': 'R',\n '\\u24C8': 'S',\n '\\uFF33': 'S',\n '\\u1E9E': 'S',\n '\\u015A': 'S',\n '\\u1E64': 'S',\n '\\u015C': 'S',\n '\\u1E60': 'S',\n '\\u0160': 'S',\n '\\u1E66': 'S',\n '\\u1E62': 'S',\n '\\u1E68': 'S',\n '\\u0218': 'S',\n '\\u015E': 'S',\n '\\u2C7E': 'S',\n '\\uA7A8': 'S',\n '\\uA784': 'S',\n '\\u24C9': 'T',\n '\\uFF34': 'T',\n '\\u1E6A': 'T',\n '\\u0164': 'T',\n '\\u1E6C': 'T',\n '\\u021A': 'T',\n '\\u0162': 'T',\n '\\u1E70': 'T',\n '\\u1E6E': 'T',\n '\\u0166': 'T',\n '\\u01AC': 'T',\n '\\u01AE': 'T',\n '\\u023E': 'T',\n '\\uA786': 'T',\n '\\uA728': 'TZ',\n '\\u24CA': 'U',\n '\\uFF35': 'U',\n '\\u00D9': 'U',\n '\\u00DA': 'U',\n '\\u00DB': 'U',\n '\\u0168': 'U',\n '\\u1E78': 'U',\n '\\u016A': 'U',\n '\\u1E7A': 'U',\n '\\u016C': 'U',\n '\\u00DC': 'U',\n '\\u01DB': 'U',\n '\\u01D7': 'U',\n '\\u01D5': 'U',\n '\\u01D9': 'U',\n '\\u1EE6': 'U',\n '\\u016E': 'U',\n '\\u0170': 'U',\n '\\u01D3': 'U',\n '\\u0214': 'U',\n '\\u0216': 'U',\n '\\u01AF': 'U',\n '\\u1EEA': 'U',\n '\\u1EE8': 'U',\n '\\u1EEE': 'U',\n '\\u1EEC': 'U',\n '\\u1EF0': 'U',\n '\\u1EE4': 'U',\n '\\u1E72': 'U',\n '\\u0172': 'U',\n '\\u1E76': 'U',\n '\\u1E74': 'U',\n '\\u0244': 'U',\n '\\u24CB': 'V',\n '\\uFF36': 'V',\n '\\u1E7C': 'V',\n '\\u1E7E': 'V',\n '\\u01B2': 'V',\n '\\uA75E': 'V',\n '\\u0245': 'V',\n '\\uA760': 'VY',\n '\\u24CC': 'W',\n '\\uFF37': 'W',\n '\\u1E80': 'W',\n '\\u1E82': 'W',\n '\\u0174': 'W',\n '\\u1E86': 'W',\n '\\u1E84': 'W',\n '\\u1E88': 'W',\n '\\u2C72': 'W',\n '\\u24CD': 'X',\n '\\uFF38': 'X',\n '\\u1E8A': 'X',\n '\\u1E8C': 'X',\n '\\u24CE': 'Y',\n '\\uFF39': 'Y',\n '\\u1EF2': 'Y',\n '\\u00DD': 'Y',\n '\\u0176': 'Y',\n '\\u1EF8': 'Y',\n '\\u0232': 'Y',\n '\\u1E8E': 'Y',\n '\\u0178': 'Y',\n '\\u1EF6': 'Y',\n '\\u1EF4': 'Y',\n '\\u01B3': 'Y',\n '\\u024E': 'Y',\n '\\u1EFE': 'Y',\n '\\u24CF': 'Z',\n '\\uFF3A': 'Z',\n '\\u0179': 'Z',\n '\\u1E90': 'Z',\n '\\u017B': 'Z',\n '\\u017D': 'Z',\n '\\u1E92': 'Z',\n '\\u1E94': 'Z',\n '\\u01B5': 'Z',\n '\\u0224': 'Z',\n '\\u2C7F': 'Z',\n '\\u2C6B': 'Z',\n '\\uA762': 'Z',\n '\\u24D0': 'a',\n '\\uFF41': 'a',\n '\\u1E9A': 'a',\n '\\u00E0': 'a',\n '\\u00E1': 'a',\n '\\u00E2': 'a',\n '\\u1EA7': 'a',\n '\\u1EA5': 'a',\n '\\u1EAB': 'a',\n '\\u1EA9': 'a',\n '\\u00E3': 'a',\n '\\u0101': 'a',\n '\\u0103': 'a',\n '\\u1EB1': 'a',\n '\\u1EAF': 'a',\n '\\u1EB5': 'a',\n '\\u1EB3': 'a',\n '\\u0227': 'a',\n '\\u01E1': 'a',\n '\\u00E4': 'a',\n '\\u01DF': 'a',\n '\\u1EA3': 'a',\n '\\u00E5': 'a',\n '\\u01FB': 'a',\n '\\u01CE': 'a',\n '\\u0201': 'a',\n '\\u0203': 'a',\n '\\u1EA1': 'a',\n '\\u1EAD': 'a',\n '\\u1EB7': 'a',\n '\\u1E01': 'a',\n '\\u0105': 'a',\n '\\u2C65': 'a',\n '\\u0250': 'a',\n '\\uA733': 'aa',\n '\\u00E6': 'ae',\n '\\u01FD': 'ae',\n '\\u01E3': 'ae',\n '\\uA735': 'ao',\n '\\uA737': 'au',\n '\\uA739': 'av',\n '\\uA73B': 'av',\n '\\uA73D': 'ay',\n '\\u24D1': 'b',\n '\\uFF42': 'b',\n '\\u1E03': 'b',\n '\\u1E05': 'b',\n '\\u1E07': 'b',\n '\\u0180': 'b',\n '\\u0183': 'b',\n '\\u0253': 'b',\n '\\u24D2': 'c',\n '\\uFF43': 'c',\n '\\u0107': 'c',\n '\\u0109': 'c',\n '\\u010B': 'c',\n '\\u010D': 'c',\n '\\u00E7': 'c',\n '\\u1E09': 'c',\n '\\u0188': 'c',\n '\\u023C': 'c',\n '\\uA73F': 'c',\n '\\u2184': 'c',\n '\\u24D3': 'd',\n '\\uFF44': 'd',\n '\\u1E0B': 'd',\n '\\u010F': 'd',\n '\\u1E0D': 'd',\n '\\u1E11': 'd',\n '\\u1E13': 'd',\n '\\u1E0F': 'd',\n '\\u0111': 'd',\n '\\u018C': 'd',\n '\\u0256': 'd',\n '\\u0257': 'd',\n '\\uA77A': 'd',\n '\\u01F3': 'dz',\n '\\u01C6': 'dz',\n '\\u24D4': 'e',\n '\\uFF45': 'e',\n '\\u00E8': 'e',\n '\\u00E9': 'e',\n '\\u00EA': 'e',\n '\\u1EC1': 'e',\n '\\u1EBF': 'e',\n '\\u1EC5': 'e',\n '\\u1EC3': 'e',\n '\\u1EBD': 'e',\n '\\u0113': 'e',\n '\\u1E15': 'e',\n '\\u1E17': 'e',\n '\\u0115': 'e',\n '\\u0117': 'e',\n '\\u00EB': 'e',\n '\\u1EBB': 'e',\n '\\u011B': 'e',\n '\\u0205': 'e',\n '\\u0207': 'e',\n '\\u1EB9': 'e',\n '\\u1EC7': 'e',\n '\\u0229': 'e',\n '\\u1E1D': 'e',\n '\\u0119': 'e',\n '\\u1E19': 'e',\n '\\u1E1B': 'e',\n '\\u0247': 'e',\n '\\u025B': 'e',\n '\\u01DD': 'e',\n '\\u24D5': 'f',\n '\\uFF46': 'f',\n '\\u1E1F': 'f',\n '\\u0192': 'f',\n '\\uA77C': 'f',\n '\\u24D6': 'g',\n '\\uFF47': 'g',\n '\\u01F5': 'g',\n '\\u011D': 'g',\n '\\u1E21': 'g',\n '\\u011F': 'g',\n '\\u0121': 'g',\n '\\u01E7': 'g',\n '\\u0123': 'g',\n '\\u01E5': 'g',\n '\\u0260': 'g',\n '\\uA7A1': 'g',\n '\\u1D79': 'g',\n '\\uA77F': 'g',\n '\\u24D7': 'h',\n '\\uFF48': 'h',\n '\\u0125': 'h',\n '\\u1E23': 'h',\n '\\u1E27': 'h',\n '\\u021F': 'h',\n '\\u1E25': 'h',\n '\\u1E29': 'h',\n '\\u1E2B': 'h',\n '\\u1E96': 'h',\n '\\u0127': 'h',\n '\\u2C68': 'h',\n '\\u2C76': 'h',\n '\\u0265': 'h',\n '\\u0195': 'hv',\n '\\u24D8': 'i',\n '\\uFF49': 'i',\n '\\u00EC': 'i',\n '\\u00ED': 'i',\n '\\u00EE': 'i',\n '\\u0129': 'i',\n '\\u012B': 'i',\n '\\u012D': 'i',\n '\\u00EF': 'i',\n '\\u1E2F': 'i',\n '\\u1EC9': 'i',\n '\\u01D0': 'i',\n '\\u0209': 'i',\n '\\u020B': 'i',\n '\\u1ECB': 'i',\n '\\u012F': 'i',\n '\\u1E2D': 'i',\n '\\u0268': 'i',\n '\\u0131': 'i',\n '\\u24D9': 'j',\n '\\uFF4A': 'j',\n '\\u0135': 'j',\n '\\u01F0': 'j',\n '\\u0249': 'j',\n '\\u24DA': 'k',\n '\\uFF4B': 'k',\n '\\u1E31': 'k',\n '\\u01E9': 'k',\n '\\u1E33': 'k',\n '\\u0137': 'k',\n '\\u1E35': 'k',\n '\\u0199': 'k',\n '\\u2C6A': 'k',\n '\\uA741': 'k',\n '\\uA743': 'k',\n '\\uA745': 'k',\n '\\uA7A3': 'k',\n '\\u24DB': 'l',\n '\\uFF4C': 'l',\n '\\u0140': 'l',\n '\\u013A': 'l',\n '\\u013E': 'l',\n '\\u1E37': 'l',\n '\\u1E39': 'l',\n '\\u013C': 'l',\n '\\u1E3D': 'l',\n '\\u1E3B': 'l',\n '\\u017F': 'l',\n '\\u0142': 'l',\n '\\u019A': 'l',\n '\\u026B': 'l',\n '\\u2C61': 'l',\n '\\uA749': 'l',\n '\\uA781': 'l',\n '\\uA747': 'l',\n '\\u01C9': 'lj',\n '\\u24DC': 'm',\n '\\uFF4D': 'm',\n '\\u1E3F': 'm',\n '\\u1E41': 'm',\n '\\u1E43': 'm',\n '\\u0271': 'm',\n '\\u026F': 'm',\n '\\u24DD': 'n',\n '\\uFF4E': 'n',\n '\\u01F9': 'n',\n '\\u0144': 'n',\n '\\u00F1': 'n',\n '\\u1E45': 'n',\n '\\u0148': 'n',\n '\\u1E47': 'n',\n '\\u0146': 'n',\n '\\u1E4B': 'n',\n '\\u1E49': 'n',\n '\\u019E': 'n',\n '\\u0272': 'n',\n '\\u0149': 'n',\n '\\uA791': 'n',\n '\\uA7A5': 'n',\n '\\u01CC': 'nj',\n '\\u24DE': 'o',\n '\\uFF4F': 'o',\n '\\u00F2': 'o',\n '\\u00F3': 'o',\n '\\u00F4': 'o',\n '\\u1ED3': 'o',\n '\\u1ED1': 'o',\n '\\u1ED7': 'o',\n '\\u1ED5': 'o',\n '\\u00F5': 'o',\n '\\u1E4D': 'o',\n '\\u022D': 'o',\n '\\u1E4F': 'o',\n '\\u014D': 'o',\n '\\u1E51': 'o',\n '\\u1E53': 'o',\n '\\u014F': 'o',\n '\\u022F': 'o',\n '\\u0231': 'o',\n '\\u00F6': 'o',\n '\\u022B': 'o',\n '\\u1ECF': 'o',\n '\\u0151': 'o',\n '\\u01D2': 'o',\n '\\u020D': 'o',\n '\\u020F': 'o',\n '\\u01A1': 'o',\n '\\u1EDD': 'o',\n '\\u1EDB': 'o',\n '\\u1EE1': 'o',\n '\\u1EDF': 'o',\n '\\u1EE3': 'o',\n '\\u1ECD': 'o',\n '\\u1ED9': 'o',\n '\\u01EB': 'o',\n '\\u01ED': 'o',\n '\\u00F8': 'o',\n '\\u01FF': 'o',\n '\\u0254': 'o',\n '\\uA74B': 'o',\n '\\uA74D': 'o',\n '\\u0275': 'o',\n '\\u01A3': 'oi',\n '\\u0223': 'ou',\n '\\uA74F': 'oo',\n '\\u24DF': 'p',\n '\\uFF50': 'p',\n '\\u1E55': 'p',\n '\\u1E57': 'p',\n '\\u01A5': 'p',\n '\\u1D7D': 'p',\n '\\uA751': 'p',\n '\\uA753': 'p',\n '\\uA755': 'p',\n '\\u24E0': 'q',\n '\\uFF51': 'q',\n '\\u024B': 'q',\n '\\uA757': 'q',\n '\\uA759': 'q',\n '\\u24E1': 'r',\n '\\uFF52': 'r',\n '\\u0155': 'r',\n '\\u1E59': 'r',\n '\\u0159': 'r',\n '\\u0211': 'r',\n '\\u0213': 'r',\n '\\u1E5B': 'r',\n '\\u1E5D': 'r',\n '\\u0157': 'r',\n '\\u1E5F': 'r',\n '\\u024D': 'r',\n '\\u027D': 'r',\n '\\uA75B': 'r',\n '\\uA7A7': 'r',\n '\\uA783': 'r',\n '\\u24E2': 's',\n '\\uFF53': 's',\n '\\u00DF': 's',\n '\\u015B': 's',\n '\\u1E65': 's',\n '\\u015D': 's',\n '\\u1E61': 's',\n '\\u0161': 's',\n '\\u1E67': 's',\n '\\u1E63': 's',\n '\\u1E69': 's',\n '\\u0219': 's',\n '\\u015F': 's',\n '\\u023F': 's',\n '\\uA7A9': 's',\n '\\uA785': 's',\n '\\u1E9B': 's',\n '\\u24E3': 't',\n '\\uFF54': 't',\n '\\u1E6B': 't',\n '\\u1E97': 't',\n '\\u0165': 't',\n '\\u1E6D': 't',\n '\\u021B': 't',\n '\\u0163': 't',\n '\\u1E71': 't',\n '\\u1E6F': 't',\n '\\u0167': 't',\n '\\u01AD': 't',\n '\\u0288': 't',\n '\\u2C66': 't',\n '\\uA787': 't',\n '\\uA729': 'tz',\n '\\u24E4': 'u',\n '\\uFF55': 'u',\n '\\u00F9': 'u',\n '\\u00FA': 'u',\n '\\u00FB': 'u',\n '\\u0169': 'u',\n '\\u1E79': 'u',\n '\\u016B': 'u',\n '\\u1E7B': 'u',\n '\\u016D': 'u',\n '\\u00FC': 'u',\n '\\u01DC': 'u',\n '\\u01D8': 'u',\n '\\u01D6': 'u',\n '\\u01DA': 'u',\n '\\u1EE7': 'u',\n '\\u016F': 'u',\n '\\u0171': 'u',\n '\\u01D4': 'u',\n '\\u0215': 'u',\n '\\u0217': 'u',\n '\\u01B0': 'u',\n '\\u1EEB': 'u',\n '\\u1EE9': 'u',\n '\\u1EEF': 'u',\n '\\u1EED': 'u',\n '\\u1EF1': 'u',\n '\\u1EE5': 'u',\n '\\u1E73': 'u',\n '\\u0173': 'u',\n '\\u1E77': 'u',\n '\\u1E75': 'u',\n '\\u0289': 'u',\n '\\u24E5': 'v',\n '\\uFF56': 'v',\n '\\u1E7D': 'v',\n '\\u1E7F': 'v',\n '\\u028B': 'v',\n '\\uA75F': 'v',\n '\\u028C': 'v',\n '\\uA761': 'vy',\n '\\u24E6': 'w',\n '\\uFF57': 'w',\n '\\u1E81': 'w',\n '\\u1E83': 'w',\n '\\u0175': 'w',\n '\\u1E87': 'w',\n '\\u1E85': 'w',\n '\\u1E98': 'w',\n '\\u1E89': 'w',\n '\\u2C73': 'w',\n '\\u24E7': 'x',\n '\\uFF58': 'x',\n '\\u1E8B': 'x',\n '\\u1E8D': 'x',\n '\\u24E8': 'y',\n '\\uFF59': 'y',\n '\\u1EF3': 'y',\n '\\u00FD': 'y',\n '\\u0177': 'y',\n '\\u1EF9': 'y',\n '\\u0233': 'y',\n '\\u1E8F': 'y',\n '\\u00FF': 'y',\n '\\u1EF7': 'y',\n '\\u1E99': 'y',\n '\\u1EF5': 'y',\n '\\u01B4': 'y',\n '\\u024F': 'y',\n '\\u1EFF': 'y',\n '\\u24E9': 'z',\n '\\uFF5A': 'z',\n '\\u017A': 'z',\n '\\u1E91': 'z',\n '\\u017C': 'z',\n '\\u017E': 'z',\n '\\u1E93': 'z',\n '\\u1E95': 'z',\n '\\u01B6': 'z',\n '\\u0225': 'z',\n '\\u0240': 'z',\n '\\u2C6C': 'z',\n '\\uA763': 'z',\n '\\u0386': '\\u0391',\n '\\u0388': '\\u0395',\n '\\u0389': '\\u0397',\n '\\u038A': '\\u0399',\n '\\u03AA': '\\u0399',\n '\\u038C': '\\u039F',\n '\\u038E': '\\u03A5',\n '\\u03AB': '\\u03A5',\n '\\u038F': '\\u03A9',\n '\\u03AC': '\\u03B1',\n '\\u03AD': '\\u03B5',\n '\\u03AE': '\\u03B7',\n '\\u03AF': '\\u03B9',\n '\\u03CA': '\\u03B9',\n '\\u0390': '\\u03B9',\n '\\u03CC': '\\u03BF',\n '\\u03CD': '\\u03C5',\n '\\u03CB': '\\u03C5',\n '\\u03B0': '\\u03C5',\n '\\u03C9': '\\u03C9',\n '\\u03C2': '\\u03C3'\n };\n DataUtil.fnOperators = {\n /**\n * Returns true when the actual input is equal to the given input.\n *\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param {boolean} ignoreAccent?\n * @param ignoreCase\n * @param ignoreAccent\n */\n equal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) === DataUtil.toLowerCase(expected);\n }\n return actual === expected;\n },\n /**\n * Returns true when the actual input is not equal to the given input.\n *\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n * @param ignoreAccent\n */\n notequal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n return !DataUtil.fnOperators.equal(actual, expected, ignoreCase);\n },\n /**\n * Returns true when the actual input is less than to the given input.\n *\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n */\n lessthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) < DataUtil.toLowerCase(expected);\n }\n if (isNullOrUndefined(actual)) {\n actual = undefined;\n }\n return actual < expected;\n },\n /**\n * Returns true when the actual input is greater than to the given input.\n *\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n */\n greaterthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) > DataUtil.toLowerCase(expected);\n }\n return actual > expected;\n },\n /**\n * Returns true when the actual input is less than or equal to the given input.\n *\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n */\n lessthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) <= DataUtil.toLowerCase(expected);\n }\n if (isNullOrUndefined(actual)) {\n actual = undefined;\n }\n return actual <= expected;\n },\n /**\n * Returns true when the actual input is greater than or equal to the given input.\n *\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n */\n greaterthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) >= DataUtil.toLowerCase(expected);\n }\n return actual >= expected;\n },\n /**\n * Returns true when the actual input contains the given string.\n *\n * @param {string|number} actual\n * @param {string|number} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n * @param ignoreAccent\n */\n contains: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n DataUtil.toLowerCase(actual).indexOf(DataUtil.toLowerCase(expected)) !== -1;\n }\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n actual.toString().indexOf(expected) !== -1;\n },\n /**\n * Returns true when the actual input not contains the given string.\n *\n * @param {string|number} actual\n * @param {string|number} expected\n * @param {boolean} ignoreCase?\n */\n doesnotcontain: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n DataUtil.toLowerCase(actual).indexOf(DataUtil.toLowerCase(expected)) === -1;\n }\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n actual.toString().indexOf(expected) === -1;\n },\n /**\n * Returns true when the given input value is not null.\n *\n * @param {string|number} actual\n * @returns boolean\n */\n isnotnull: function (actual) {\n return actual !== null && actual !== undefined;\n },\n /**\n * Returns true when the given input value is null.\n *\n * @param {string|number} actual\n * @returns boolean\n */\n isnull: function (actual) {\n return actual === null || actual === undefined;\n },\n /**\n * Returns true when the actual input starts with the given string\n *\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n * @param ignoreAccent\n */\n startswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.startsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.startsWith(actual, expected);\n },\n /**\n * Returns true when the actual input not starts with the given string\n *\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n doesnotstartwith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.notStartsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.notStartsWith(actual, expected);\n },\n /**\n * Returns true when the actual input like with the given string.\n *\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n like: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.like(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.like(actual, expected);\n },\n /**\n * Returns true when the given input value is empty.\n *\n * @param {string|number} actual\n * @returns boolean\n */\n isempty: function (actual) {\n return actual === undefined || actual === '';\n },\n /**\n * Returns true when the given input value is not empty.\n *\n * @param {string|number} actual\n * @returns boolean\n */\n isnotempty: function (actual) {\n return actual !== undefined && actual !== '';\n },\n /**\n * Returns true when the actual input pattern(wildcard) matches with the given string.\n *\n * @param {string|Date} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n wildcard: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return (actual || typeof actual === 'boolean') && expected && typeof actual !== 'object' &&\n DataUtil.wildCard(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return (actual || typeof actual === 'boolean') && expected && DataUtil.wildCard(actual, expected);\n },\n /**\n * Returns true when the actual input ends with the given string.\n *\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n * @param ignoreCase\n * @param ignoreAccent\n */\n endswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.endsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.endsWith(actual, expected);\n },\n /**\n * Returns true when the actual input not ends with the given string.\n *\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n doesnotendwith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.notEndsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.notEndsWith(actual, expected);\n },\n /**\n * It will return the filter operator based on the filter symbol.\n *\n * @param {string} operator\n * @hidden\n */\n processSymbols: function (operator) {\n var fnName = DataUtil.operatorSymbols[operator];\n if (fnName) {\n var fn = DataUtil.fnOperators[fnName];\n return fn;\n }\n return DataUtil.throwError('Query - Process Operator : Invalid operator');\n },\n /**\n * It will return the valid filter operator based on the specified operators.\n *\n * @param {string} operator\n * @hidden\n */\n processOperator: function (operator) {\n var fn = DataUtil.fnOperators[operator];\n if (fn) {\n return fn;\n }\n return DataUtil.fnOperators.processSymbols(operator);\n }\n };\n /**\n * To perform the parse operation on JSON data, like convert to string from JSON or convert to JSON from string.\n */\n DataUtil.parse = {\n /**\n * Parse the given string to the plain JavaScript object.\n *\n * @param {string|Object|Object[]} jsonText\n */\n parseJson: function (jsonText) {\n if (typeof jsonText === 'string' && (/^[\\s]*\\[|^[\\s]*\\{(.)+:/g.test(jsonText) || jsonText.indexOf('\"') === -1)) {\n jsonText = JSON.parse(jsonText, DataUtil.parse.jsonReviver);\n }\n else if (jsonText instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(jsonText);\n }\n else if (typeof jsonText === 'object' && jsonText !== null) {\n DataUtil.parse.iterateAndReviveJson(jsonText);\n }\n return jsonText;\n },\n /**\n * It will perform on array of values.\n *\n * @param {string[]|Object[]} array\n * @hidden\n */\n iterateAndReviveArray: function (array) {\n for (var i = 0; i < array.length; i++) {\n if (typeof array[i] === 'object' && array[i] !== null) {\n DataUtil.parse.iterateAndReviveJson(array[i]);\n // eslint-disable-next-line no-useless-escape\n }\n else if (typeof array[i] === 'string' && (!/^[\\s]*\\[|^[\\s]*\\{(.)+:|\\\"/g.test(array[i]) ||\n array[i].toString().indexOf('\"') === -1)) {\n array[i] = DataUtil.parse.jsonReviver('', array[i]);\n }\n else {\n array[i] = DataUtil.parse.parseJson(array[i]);\n }\n }\n },\n /**\n * It will perform on JSON values\n *\n * @param {JSON} json\n * @hidden\n */\n iterateAndReviveJson: function (json) {\n var value;\n var keys = Object.keys(json);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var prop = keys_2[_i];\n if (DataUtil.startsWith(prop, '__')) {\n continue;\n }\n value = json[prop];\n if (typeof value === 'object') {\n if (value instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(value);\n }\n else if (value) {\n DataUtil.parse.iterateAndReviveJson(value);\n }\n }\n else {\n json[prop] = DataUtil.parse.jsonReviver(json[prop], value);\n }\n }\n },\n /**\n * It will perform on JSON values\n *\n * @param {string} field\n * @param {string|Date} value\n * @hidden\n */\n jsonReviver: function (field, value) {\n if (typeof value === 'string') {\n // eslint-disable-next-line security/detect-unsafe-regex\n var ms = /^\\/Date\\(([+-]?[0-9]+)([+-][0-9]{4})?\\)\\/$/.exec(value);\n var offSet = DataUtil.timeZoneHandling ? DataUtil.serverTimezoneOffset : null;\n if (ms) {\n return DataUtil.dateParse.toTimeZone(new Date(parseInt(ms[1], 10)), offSet, true);\n // eslint-disable-next-line no-useless-escape, security/detect-unsafe-regex\n }\n else if (/^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n var isUTC = value.indexOf('Z') > -1 || value.indexOf('z') > -1;\n var arr = value.split(/[^0-9.]/);\n if (isUTC) {\n if (arr[5].indexOf('.') > -1) {\n var secondsMs = arr[5].split('.');\n arr[5] = secondsMs[0];\n arr[6] = new Date(value).getUTCMilliseconds().toString();\n }\n else {\n arr[6] = '00';\n }\n value = DataUtil.dateParse\n .toTimeZone(new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5] ? arr[5] : '00', 10), parseInt(arr[6], 10)), DataUtil.serverTimezoneOffset, false);\n }\n else {\n var utcFormat = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5] ? arr[5] : '00', 10));\n var hrs = parseInt(arr[6], 10);\n var mins = parseInt(arr[7], 10);\n if (isNaN(hrs) && isNaN(mins)) {\n return utcFormat;\n }\n if (value.indexOf('+') > -1) {\n utcFormat.setHours(utcFormat.getHours() - hrs, utcFormat.getMinutes() - mins);\n }\n else {\n utcFormat.setHours(utcFormat.getHours() + hrs, utcFormat.getMinutes() + mins);\n }\n value = DataUtil.dateParse\n .toTimeZone(utcFormat, DataUtil.serverTimezoneOffset, false);\n }\n if (DataUtil.serverTimezoneOffset == null) {\n value = DataUtil.dateParse.addSelfOffset(value);\n }\n }\n }\n return value;\n },\n /**\n * Check wheather the given value is JSON or not.\n *\n * @param {Object[]} jsonData\n */\n isJson: function (jsonData) {\n if (typeof jsonData[0] === 'string') {\n return jsonData;\n }\n return DataUtil.parse.parseJson(jsonData);\n },\n /**\n * Checks wheather the given value is GUID or not.\n *\n * @param {string} value\n */\n isGuid: function (value) {\n // eslint-disable-next-line security/detect-unsafe-regex\n var regex = /[A-Fa-f0-9]{8}(?:-[A-Fa-f0-9]{4}){3}-[A-Fa-f0-9]{12}/i;\n var match = regex.exec(value);\n return match != null;\n },\n /**\n * The method used to replace the value based on the type.\n *\n * @param {Object} value\n * @param {boolean} stringify\n * @hidden\n */\n replacer: function (value, stringify) {\n if (DataUtil.isPlainObject(value)) {\n return DataUtil.parse.jsonReplacer(value, stringify);\n }\n if (value instanceof Array) {\n return DataUtil.parse.arrayReplacer(value);\n }\n if (value instanceof Date) {\n return DataUtil.parse.jsonReplacer({ val: value }, stringify).val;\n }\n return value;\n },\n /**\n * It will replace the JSON value.\n *\n * @param {string} key\n * @param {Object} val\n * @param stringify\n * @hidden\n */\n jsonReplacer: function (val, stringify) {\n var value;\n var keys = Object.keys(val);\n for (var _i = 0, keys_3 = keys; _i < keys_3.length; _i++) {\n var prop = keys_3[_i];\n value = val[prop];\n if (!(value instanceof Date)) {\n continue;\n }\n var d = value;\n if (DataUtil.serverTimezoneOffset == null) {\n val[prop] = DataUtil.dateParse.toTimeZone(d, null).toJSON();\n }\n else {\n d = new Date(+d + DataUtil.serverTimezoneOffset * 3600000);\n val[prop] = DataUtil.dateParse.toTimeZone(DataUtil.dateParse.addSelfOffset(d), null).toJSON();\n }\n }\n return val;\n },\n /**\n * It will replace the Array of value.\n *\n * @param {string} key\n * @param {Object[]} val\n * @hidden\n */\n arrayReplacer: function (val) {\n for (var i = 0; i < val.length; i++) {\n if (DataUtil.isPlainObject(val[i])) {\n val[i] = DataUtil.parse.jsonReplacer(val[i]);\n }\n else if (val[i] instanceof Date) {\n val[i] = DataUtil.parse.jsonReplacer({ date: val[i] }).date;\n }\n }\n return val;\n },\n /**\n * It will replace the Date object with respective to UTC format value.\n *\n * @param {string} key\n * @param {any} value\n * @hidden\n */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n /* tslint:disable-next-line:no-any */\n jsonDateReplacer: function (key, value) {\n /* eslint-enable @typescript-eslint/no-explicit-any */\n if (key === 'value' && value) {\n if (typeof value === 'string') {\n // eslint-disable-next-line security/detect-unsafe-regex\n var ms = /^\\/Date\\(([+-]?[0-9]+)([+-][0-9]{4})?\\)\\/$/.exec(value);\n if (ms) {\n value = DataUtil.dateParse.toTimeZone(new Date(parseInt(ms[1], 10)), null, true);\n // eslint-disable-next-line no-useless-escape, security/detect-unsafe-regex\n }\n else if (/^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n var arr = value.split(/[^0-9]/);\n value = DataUtil.dateParse\n .toTimeZone(new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10)), null, true);\n }\n }\n if (value instanceof Date) {\n value = DataUtil.dateParse.addSelfOffset(value);\n if (DataUtil.serverTimezoneOffset === null) {\n return DataUtil.dateParse.toTimeZone(DataUtil.dateParse.addSelfOffset(value), null).toJSON();\n }\n else {\n value = DataUtil.dateParse.toTimeZone(value, ((value.getTimezoneOffset() / 60)\n - DataUtil.serverTimezoneOffset), false);\n return value.toJSON();\n }\n }\n }\n return value;\n }\n };\n /**\n * @hidden\n */\n DataUtil.dateParse = {\n addSelfOffset: function (input) {\n return new Date(+input - (input.getTimezoneOffset() * 60000));\n },\n toUTC: function (input) {\n return new Date(+input + (input.getTimezoneOffset() * 60000));\n },\n toTimeZone: function (input, offset, utc) {\n if (offset === null) {\n return input;\n }\n var unix = utc ? DataUtil.dateParse.toUTC(input) : input;\n return new Date(+unix - (offset * 3600000));\n },\n toLocalTime: function (input) {\n var datefn = input;\n var timeZone = -datefn.getTimezoneOffset();\n var differenceString = timeZone >= 0 ? '+' : '-';\n var localtimefn = function (num) {\n var norm = Math.floor(Math.abs(num));\n return (norm < 10 ? '0' : '') + norm;\n };\n var val = datefn.getFullYear() + '-' + localtimefn(datefn.getMonth() + 1) + '-' + localtimefn(datefn.getDate()) +\n 'T' + localtimefn(datefn.getHours()) +\n ':' + localtimefn(datefn.getMinutes()) +\n ':' + localtimefn(datefn.getSeconds()) +\n differenceString + localtimefn(timeZone / 60) +\n ':' + localtimefn(timeZone % 60);\n return val;\n }\n };\n return DataUtil;\n}());\n\nvar __extends = (undefined && undefined.__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 consts$1 = { GroupGuid: '{271bbba0-1ee7}' };\n/**\n * Adaptors are specific data source type aware interfaces that are used by DataManager to communicate with DataSource.\n * This is the base adaptor class that other adaptors can extend.\n *\n * @hidden\n */\nvar Adaptor = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for Adaptor class\n *\n * @param {DataOptions} ds?\n * @param ds\n * @hidden\n * @returns aggregates\n */\n function Adaptor(ds) {\n // common options for all the adaptors\n this.options = {\n from: 'table',\n requestType: 'json',\n sortBy: 'sorted',\n select: 'select',\n skip: 'skip',\n group: 'group',\n take: 'take',\n search: 'search',\n count: 'requiresCounts',\n where: 'where',\n aggregates: 'aggregates',\n expand: 'expand'\n };\n /**\n * Specifies the type of adaptor.\n *\n * @default Adaptor\n */\n this.type = Adaptor;\n this.dataSource = ds;\n this.pvt = {};\n }\n /**\n * Returns the data from the query processing.\n *\n * @param {Object} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {Request} xhr?\n * @param ds\n * @param query\n * @param xhr\n * @returns Object\n */\n Adaptor.prototype.processResponse = function (data, ds, query, xhr) {\n return data;\n };\n return Adaptor;\n}());\n/**\n * JsonAdaptor is used to process JSON data. It contains methods to process the given JSON data based on the queries.\n *\n * @hidden\n */\nvar JsonAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(JsonAdaptor, _super);\n function JsonAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the JSON data based on the provided queries.\n *\n * @param {DataManager} dataManager\n * @param {Query} query\n * @returns Object\n */\n JsonAdaptor.prototype.processQuery = function (dataManager, query) {\n var result = dataManager.dataSource.json.slice(0);\n var count = result.length;\n var countFlg = true;\n var ret;\n var key;\n var lazyLoad = {};\n var keyCount = 0;\n var group = [];\n var sort = [];\n var page;\n for (var i = 0; i < query.lazyLoad.length; i++) {\n keyCount++;\n lazyLoad[query.lazyLoad[i].key] = query.lazyLoad[i].value;\n }\n var agg = {};\n var isGroupByFormat = false;\n if (query.lazyLoad.length) {\n for (var i = 0; i < query.queries.length; i++) {\n key = query.queries[i];\n if (key.fn === 'onGroup' && !isNullOrUndefined(key.e.format)) {\n isGroupByFormat = true;\n break;\n }\n }\n }\n for (var i = 0; i < query.queries.length; i++) {\n key = query.queries[i];\n if ((key.fn === 'onPage' || key.fn === 'onGroup' || (key.fn === 'onSortBy' && !isGroupByFormat)) && query.lazyLoad.length) {\n if (key.fn === 'onGroup') {\n group.push(key.e);\n }\n if (key.fn === 'onPage') {\n page = key.e;\n }\n if (key.fn === 'onSortBy') {\n sort.unshift(key.e);\n }\n continue;\n }\n ret = this[key.fn].call(this, result, key.e, query);\n if (key.fn === 'onAggregates') {\n agg[key.e.field + ' - ' + key.e.type] = ret;\n }\n else {\n result = ret !== undefined ? ret : result;\n }\n if (key.fn === 'onPage' || key.fn === 'onSkip' || key.fn === 'onTake' || key.fn === 'onRange') {\n countFlg = false;\n }\n if (countFlg) {\n count = result.length;\n }\n }\n if (keyCount) {\n var args = {\n query: query, lazyLoad: lazyLoad, result: result, group: group, page: page, sort: sort\n };\n var lazyLoadData = this.lazyLoadGroup(args);\n result = lazyLoadData.result;\n count = lazyLoadData.count;\n }\n if (query.isCountRequired) {\n result = {\n result: result,\n count: count,\n aggregates: agg\n };\n }\n return result;\n };\n /**\n * Perform lazy load grouping in JSON array based on the given query and lazy load details.\n *\n * @param {LazyLoadGroupArgs} args\n */\n JsonAdaptor.prototype.lazyLoadGroup = function (args) {\n var count = 0;\n var agg = this.getAggregate(args.query);\n var result = args.result;\n if (!isNullOrUndefined(args.lazyLoad.onDemandGroupInfo)) {\n var req = args.lazyLoad.onDemandGroupInfo;\n for (var i = req.where.length - 1; i >= 0; i--) {\n result = this.onWhere(result, req.where[i]);\n }\n if (args.group.length !== req.level) {\n var field = args.group[req.level].fieldName;\n result = DataUtil.group(result, field, agg, null, null, args.group[req.level].comparer, true);\n if (args.sort.length) {\n result = this.onSortBy(result, args.sort[parseInt(req.level.toString(), 10)], args.query, true);\n }\n }\n else {\n for (var i = args.sort.length - 1; i >= req.level; i--) {\n result = this.onSortBy(result, args.sort[parseInt(i.toString(), 10)], args.query, false);\n }\n }\n count = result.length;\n var data = result;\n result = result.slice(req.skip);\n result = result.slice(0, req.take);\n if (args.group.length !== req.level) {\n this.formGroupResult(result, data);\n }\n }\n else {\n var field_1 = args.group[0].fieldName;\n result = DataUtil.group(result, field_1, agg, null, null, args.group[0].comparer, true);\n count = result.length;\n var data = result;\n if (args.sort.length) {\n var sort = args.sort.length > 1 ?\n args.sort.filter(function (x) { return x.fieldName === field_1; })[0] : args.sort[0];\n result = this.onSortBy(result, sort, args.query, true);\n }\n if (args.page) {\n result = this.onPage(result, args.page, args.query);\n }\n this.formGroupResult(result, data);\n }\n return { result: result, count: count };\n };\n JsonAdaptor.prototype.formGroupResult = function (result, data) {\n if (result.length && data.length) {\n var uid = 'GroupGuid';\n var childLevel = 'childLevels';\n var level = 'level';\n var records = 'records';\n result[uid] = data[uid];\n result[childLevel] = data[childLevel];\n result[level] = data[level];\n result[records] = data[records];\n }\n return result;\n };\n /**\n * Separate the aggregate query from the given queries\n *\n * @param {Query} query\n */\n JsonAdaptor.prototype.getAggregate = function (query) {\n var aggQuery = Query.filterQueries(query.queries, 'onAggregates');\n var agg = [];\n if (aggQuery.length) {\n var tmp = void 0;\n for (var i = 0; i < aggQuery.length; i++) {\n tmp = aggQuery[i].e;\n agg.push({ type: tmp.type, field: DataUtil.getValue(tmp.field, query) });\n }\n }\n return agg;\n };\n /**\n * Performs batch update in the JSON array which add, remove and update records.\n *\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n JsonAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var i;\n var deletedRecordsLen = changes.deletedRecords.length;\n for (i = 0; i < changes.addedRecords.length; i++) {\n this.insert(dm, changes.addedRecords[i]);\n }\n for (i = 0; i < changes.changedRecords.length; i++) {\n this.update(dm, e.key, changes.changedRecords[i]);\n }\n for (i = 0; i < deletedRecordsLen; i++) {\n this.remove(dm, e.key, changes.deletedRecords[i]);\n }\n return changes;\n };\n /**\n * Performs filter operation with the given data and where query.\n *\n * @param {Object[]} ds\n * @param {{validate:Function}} e\n * @param e.validate\n */\n JsonAdaptor.prototype.onWhere = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.filter(function (obj) {\n if (e) {\n return e.validate(obj);\n }\n });\n };\n /**\n * Returns aggregate function based on the aggregate type.\n *\n * @param {Object[]} ds\n * @param e\n * @param {string} } type\n * @param e.field\n * @param e.type\n */\n JsonAdaptor.prototype.onAggregates = function (ds, e) {\n var fn = DataUtil.aggregates[e.type];\n if (!ds || !fn || ds.length === 0) {\n return null;\n }\n return fn(ds, e.field);\n };\n /**\n * Performs search operation based on the given query.\n *\n * @param {Object[]} ds\n * @param {QueryOptions} e\n */\n JsonAdaptor.prototype.onSearch = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n if (e.fieldNames.length === 0) {\n DataUtil.getFieldList(ds[0], e.fieldNames);\n }\n return ds.filter(function (obj) {\n for (var j = 0; j < e.fieldNames.length; j++) {\n if (e.comparer.call(obj, DataUtil.getObject(e.fieldNames[j], obj), e.searchKey, e.ignoreCase, e.ignoreAccent)) {\n return true;\n }\n }\n return false;\n });\n };\n /**\n * Sort the data with given direction and field.\n *\n * @param {Object[]} ds\n * @param e\n * @param {Object} b\n * @param e.comparer\n * @param e.fieldName\n * @param query\n * @param isLazyLoadGroupSort\n */\n JsonAdaptor.prototype.onSortBy = function (ds, e, query, isLazyLoadGroupSort) {\n if (!ds || !ds.length) {\n return ds;\n }\n var fnCompare;\n var field = DataUtil.getValue(e.fieldName, query);\n if (!field) {\n return ds.sort(e.comparer);\n }\n if (field instanceof Array) {\n field = field.slice(0);\n for (var i = field.length - 1; i >= 0; i--) {\n if (!field[i]) {\n continue;\n }\n fnCompare = e.comparer;\n if (DataUtil.endsWith(field[i], ' desc')) {\n fnCompare = DataUtil.fnSort('descending');\n field[i] = field[i].replace(' desc', '');\n }\n ds = DataUtil.sort(ds, field[i], fnCompare);\n }\n return ds;\n }\n return DataUtil.sort(ds, isLazyLoadGroupSort ? 'key' : field, e.comparer);\n };\n /**\n * Group the data based on the given query.\n *\n * @param {Object[]} ds\n * @param {QueryOptions} e\n * @param {Query} query\n */\n JsonAdaptor.prototype.onGroup = function (ds, e, query) {\n if (!ds || !ds.length) {\n return ds;\n }\n var agg = this.getAggregate(query);\n return DataUtil.group(ds, DataUtil.getValue(e.fieldName, query), agg, null, null, e.comparer);\n };\n /**\n * Retrieves records based on the given page index and size.\n *\n * @param {Object[]} ds\n * @param e\n * @param {number} } pageIndex\n * @param e.pageSize\n * @param {Query} query\n * @param e.pageIndex\n */\n JsonAdaptor.prototype.onPage = function (ds, e, query) {\n var size = DataUtil.getValue(e.pageSize, query);\n var start = (DataUtil.getValue(e.pageIndex, query) - 1) * size;\n var end = start + size;\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(start, end);\n };\n /**\n * Retrieves records based on the given start and end index from query.\n *\n * @param {Object[]} ds\n * @param e\n * @param {number} } end\n * @param e.start\n * @param e.end\n */\n JsonAdaptor.prototype.onRange = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.start), DataUtil.getValue(e.end));\n };\n /**\n * Picks the given count of records from the top of the datasource.\n *\n * @param {Object[]} ds\n * @param {{nos:number}} e\n * @param e.nos\n */\n JsonAdaptor.prototype.onTake = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(0, DataUtil.getValue(e.nos));\n };\n /**\n * Skips the given count of records from the data source.\n *\n * @param {Object[]} ds\n * @param {{nos:number}} e\n * @param e.nos\n */\n JsonAdaptor.prototype.onSkip = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.nos));\n };\n /**\n * Selects specified columns from the data source.\n *\n * @param {Object[]} ds\n * @param {{fieldNames:string}} e\n * @param e.fieldNames\n */\n JsonAdaptor.prototype.onSelect = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return DataUtil.select(ds, DataUtil.getValue(e.fieldNames));\n };\n /**\n * Inserts new record in the table.\n *\n * @param {DataManager} dm\n * @param {Object} data\n * @param tableName\n * @param query\n * @param {number} position\n */\n JsonAdaptor.prototype.insert = function (dm, data, tableName, query, position) {\n if (isNullOrUndefined(position)) {\n return dm.dataSource.json.push(data);\n }\n else {\n return dm.dataSource.json.splice(position, 0, data);\n }\n };\n /**\n * Remove the data from the dataSource based on the key field value.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @param tableName\n * @returns null\n */\n JsonAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n if (typeof value === 'object' && !(value instanceof Date)) {\n value = DataUtil.getObject(keyField, value);\n }\n for (i = 0; i < ds.length; i++) {\n if (DataUtil.getObject(keyField, ds[i]) === value) {\n break;\n }\n }\n return i !== ds.length ? ds.splice(i, 1) : null;\n };\n /**\n * Updates existing record and saves the changes to the table.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @param tableName\n * @returns null\n */\n JsonAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n var key;\n if (!isNullOrUndefined(keyField)) {\n key = getValue(keyField, value);\n }\n for (i = 0; i < ds.length; i++) {\n if (!isNullOrUndefined(keyField) && (getValue(keyField, ds[i])) === key) {\n break;\n }\n }\n return i < ds.length ? merge(ds[i], value) : null;\n };\n return JsonAdaptor;\n}(Adaptor));\n/**\n * URL Adaptor of DataManager can be used when you are required to use remote service to retrieve data.\n * It interacts with server-side for all DataManager Queries and CRUD operations.\n *\n * @hidden\n */\nvar UrlAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(UrlAdaptor, _super);\n function UrlAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the query to generate request body.\n *\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @param hierarchyFilters\n * @returns p\n */\n // tslint:disable-next-line:max-func-body-length\n UrlAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var params = query.params;\n var url = dm.dataSource.url;\n var temp;\n var skip;\n var take = null;\n var options = this.options;\n var request = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n // calc Paging & Range\n if ('onPage' in singles) {\n temp = singles.onPage;\n skip = DataUtil.getValue(temp.pageIndex, query);\n take = DataUtil.getValue(temp.pageSize, query);\n skip = (skip - 1) * take;\n }\n else if ('onRange' in singles) {\n temp = singles.onRange;\n skip = temp.start;\n take = temp.end - temp.start;\n }\n // Sorting\n for (var i = 0; i < queries.sorts.length; i++) {\n temp = DataUtil.getValue(queries.sorts[i].e.fieldName, query);\n request.sorts.push(DataUtil.callAdaptorFunction(this, 'onEachSort', { name: temp, direction: queries.sorts[i].e.direction }, query));\n }\n // hierarchy\n if (hierarchyFilters) {\n temp = this.getFiltersFrom(hierarchyFilters, query);\n if (temp) {\n request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', temp.toJson(), query));\n }\n }\n // Filters\n for (var i = 0; i < queries.filters.length; i++) {\n var res = DataUtil.callAdaptorFunction(this, 'onEachWhere', queries.filters[i].e.toJson(), query);\n if ((this.getModuleName &&\n this.getModuleName() === 'ODataV4Adaptor') &&\n !isNullOrUndefined(queries.filters[i].e.key) && queries.filters.length > 1) {\n res = '(' + res + ')';\n }\n request.filters.push(res);\n var keys_3 = typeof request.filters[i] === 'object' ? Object.keys(request.filters[i]) : [];\n for (var _i = 0, keys_1 = keys_3; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n if (DataUtil.isNull((request)[prop])) {\n delete request[prop];\n }\n }\n }\n // Searches\n for (var i = 0; i < queries.searches.length; i++) {\n temp = queries.searches[i].e;\n request.searches.push(DataUtil.callAdaptorFunction(this, 'onEachSearch', {\n fields: temp.fieldNames,\n operator: temp.operator,\n key: temp.searchKey,\n ignoreCase: temp.ignoreCase\n }, query));\n }\n // Grouping\n for (var i = 0; i < queries.groups.length; i++) {\n request.groups.push(DataUtil.getValue(queries.groups[i].e.fieldName, query));\n }\n // aggregates\n for (var i = 0; i < queries.aggregates.length; i++) {\n temp = queries.aggregates[i].e;\n request.aggregates.push({ type: temp.type, field: DataUtil.getValue(temp.field, query) });\n }\n var req = {};\n this.getRequestQuery(options, query, singles, request, req);\n // Params\n DataUtil.callAdaptorFunction(this, 'addParams', { dm: dm, query: query, params: params, reqParams: req });\n if (query.lazyLoad.length) {\n for (var i = 0; i < query.lazyLoad.length; i++) {\n req[query.lazyLoad[i].key] = query.lazyLoad[i].value;\n }\n }\n // cleanup\n var keys = Object.keys(req);\n for (var _a = 0, keys_2 = keys; _a < keys_2.length; _a++) {\n var prop = keys_2[_a];\n if (DataUtil.isNull(req[prop]) || req[prop] === '' || req[prop].length === 0) {\n delete req[prop];\n }\n }\n if (!(options.skip in req && options.take in req) && take !== null) {\n req[options.skip] = DataUtil.callAdaptorFunction(this, 'onSkip', skip, query);\n req[options.take] = DataUtil.callAdaptorFunction(this, 'onTake', take, query);\n }\n var p = this.pvt;\n this.pvt = {};\n if (this.options.requestType === 'json') {\n return {\n data: JSON.stringify(req, DataUtil.parse.jsonDateReplacer),\n url: url,\n pvtData: p,\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n }\n temp = this.convertToQueryString(req, query, dm);\n temp = (dm.dataSource.url.indexOf('?') !== -1 ? '&' : '/') + temp;\n return {\n type: 'GET', url: temp.length ? url.replace(/\\/*$/, temp) : url, pvtData: p\n };\n };\n UrlAdaptor.prototype.getRequestQuery = function (options, query, singles, request, request1) {\n var param = 'param';\n var req = request1;\n req[options.from] = query.fromTable;\n if (options.apply && query.distincts.length) {\n req[options.apply] = 'onDistinct' in this ? DataUtil.callAdaptorFunction(this, 'onDistinct', query.distincts) : '';\n }\n if (!query.distincts.length && options.expand) {\n req[options.expand] = 'onExpand' in this && 'onSelect' in singles ?\n DataUtil.callAdaptorFunction(this, 'onExpand', { selects: DataUtil.getValue(singles.onSelect.fieldNames, query), expands: query.expands }, query) : query.expands;\n }\n req[options.select] = 'onSelect' in singles && !query.distincts.length ?\n DataUtil.callAdaptorFunction(this, 'onSelect', DataUtil.getValue(singles.onSelect.fieldNames, query), query) : '';\n req[options.count] = query.isCountRequired ? DataUtil.callAdaptorFunction(this, 'onCount', query.isCountRequired, query) : '';\n req[options.search] = request.searches.length ? DataUtil.callAdaptorFunction(this, 'onSearch', request.searches, query) : '';\n req[options.skip] = 'onSkip' in singles ?\n DataUtil.callAdaptorFunction(this, 'onSkip', DataUtil.getValue(singles.onSkip.nos, query), query) : '';\n req[options.take] = 'onTake' in singles ?\n DataUtil.callAdaptorFunction(this, 'onTake', DataUtil.getValue(singles.onTake.nos, query), query) : '';\n req[options.where] = request.filters.length || request.searches.length ?\n DataUtil.callAdaptorFunction(this, 'onWhere', request.filters, query) : '';\n req[options.sortBy] = request.sorts.length ? DataUtil.callAdaptorFunction(this, 'onSortBy', request.sorts, query) : '';\n req[options.group] = request.groups.length ? DataUtil.callAdaptorFunction(this, 'onGroup', request.groups, query) : '';\n req[options.aggregates] = request.aggregates.length ?\n DataUtil.callAdaptorFunction(this, 'onAggregates', request.aggregates, query) : '';\n req[param] = [];\n };\n /**\n * Convert the object from processQuery to string which can be added query string.\n *\n * @param {Object} req\n * @param request\n * @param {Query} query\n * @param {DataManager} dm\n */\n UrlAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n return '';\n // this needs to be overridden\n };\n /**\n * Return the data from the data manager processing.\n *\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {Request} xhr?\n * @param {Object} request?\n * @param {CrudOptions} changes?\n * @param ds\n * @param query\n * @param xhr\n * @param request\n * @param changes\n */\n UrlAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n if (xhr && xhr.headers.get('Content-Type') &&\n xhr.headers.get('Content-Type').indexOf('application/json') !== -1) {\n var handleTimeZone = DataUtil.timeZoneHandling;\n if (ds && !ds.timeZoneHandling) {\n DataUtil.timeZoneHandling = false;\n }\n data = DataUtil.parse.parseJson(data);\n DataUtil.timeZoneHandling = handleTimeZone;\n }\n var requests = request;\n var pvt = requests.pvtData || {};\n var groupDs = data ? data.groupDs : [];\n if (xhr && xhr.headers.get('Content-Type') &&\n xhr.headers.get('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n var d = JSON.parse(requests.data);\n if (d && d.action === 'batch' && data && data.addedRecords && !isNullOrUndefined(changes)) {\n changes.addedRecords = data.addedRecords;\n return changes;\n }\n if (data && data.d) {\n data = data.d;\n }\n var args = {};\n if (data && 'count' in data) {\n args.count = data.count;\n }\n args.result = data && data.result ? data.result : data;\n var isExpand = false;\n if (Array.isArray(data.result) && data.result.length) {\n var key = 'key';\n var val = 'value';\n var level = 'level';\n if (!isNullOrUndefined(data.result[0][key])) {\n args.result = this.formRemoteGroupedData(args.result, 1, pvt.groups.length - 1);\n }\n if (query && query.lazyLoad.length && pvt.groups.length) {\n for (var i = 0; i < query.lazyLoad.length; i++) {\n if (query.lazyLoad[i][key] === 'onDemandGroupInfo') {\n var value = query.lazyLoad[i][val][level];\n if (pvt.groups.length === value) {\n isExpand = true;\n }\n }\n }\n }\n }\n if (!isExpand) {\n this.getAggregateResult(pvt, data, args, groupDs, query);\n }\n return DataUtil.isNull(args.count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n UrlAdaptor.prototype.formRemoteGroupedData = function (data, level, childLevel) {\n for (var i = 0; i < data.length; i++) {\n if (data[i].items.length && Object.keys(data[i].items[0]).indexOf('key') > -1) {\n this.formRemoteGroupedData(data[i].items, level + 1, childLevel - 1);\n }\n }\n var uid = 'GroupGuid';\n var childLvl = 'childLevels';\n var lvl = 'level';\n var records = 'records';\n data[uid] = consts$1[uid];\n data[lvl] = level;\n data[childLvl] = childLevel;\n data[records] = data[0].items.length ? this.getGroupedRecords(data, !isNullOrUndefined(data[0].items[records])) : [];\n return data;\n };\n UrlAdaptor.prototype.getGroupedRecords = function (data, hasRecords) {\n var childGroupedRecords = [];\n var records = 'records';\n for (var i = 0; i < data.length; i++) {\n if (!hasRecords) {\n for (var j = 0; j < data[i].items.length; j++) {\n childGroupedRecords.push(data[i].items[j]);\n }\n }\n else {\n childGroupedRecords = childGroupedRecords.concat(data[i].items[records]);\n }\n }\n return childGroupedRecords;\n };\n /**\n * Add the group query to the adaptor`s option.\n *\n * @param {Object[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return e;\n };\n /**\n * Add the aggregate query to the adaptor`s option.\n *\n * @param {Aggregates[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n *\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {Object} e\n * @param query\n * @param original\n */\n UrlAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var url;\n var key;\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.removeUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify(extend({}, {\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e[url],\n key: e[key]\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n *\n * @param {DataManager} dm\n * @param {Request} request\n * @param {Fetch} settings?\n * @returns void\n */\n UrlAdaptor.prototype.beforeSend = function (dm, request, settings) {\n // need to extend this method\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n *\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName\n * @param query\n */\n UrlAdaptor.prototype.insert = function (dm, data, tableName, query) {\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: data,\n table: tableName,\n action: 'insert'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number|string} value\n * @param {string} tableName\n * @param query\n */\n UrlAdaptor.prototype.remove = function (dm, keyField, value, tableName, query) {\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n key: value,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n * @param query\n */\n UrlAdaptor.prototype.update = function (dm, keyField, value, tableName, query) {\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: value,\n action: 'update',\n keyColumn: keyField,\n key: DataUtil.getObject(keyField, value),\n table: tableName\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * To generate the predicate based on the filtered query.\n *\n * @param {Object[]|string[]|number[]} data\n * @param {Query} query\n * @hidden\n */\n UrlAdaptor.prototype.getFiltersFrom = function (data, query) {\n var key = query.fKey;\n var value;\n var prop = key;\n var pKey = query.key;\n var predicats = [];\n if (typeof data[0] !== 'object') {\n prop = null;\n }\n for (var i = 0; i < data.length; i++) {\n if (typeof data[0] === 'object') {\n value = DataUtil.getObject(pKey || prop, data[i]);\n }\n else {\n value = data[i];\n }\n predicats.push(new Predicate(key, 'equal', value));\n }\n return Predicate.or(predicats);\n };\n UrlAdaptor.prototype.getAggregateResult = function (pvt, data, args, groupDs, query) {\n var pData = data;\n if (data && data.result) {\n pData = data.result;\n }\n if (pvt && pvt.aggregates && pvt.aggregates.length) {\n var agg = pvt.aggregates;\n var fn = void 0;\n var aggregateData = pData;\n var res = {};\n if (data.aggregate) {\n aggregateData = data.aggregate;\n }\n for (var i = 0; i < agg.length; i++) {\n fn = DataUtil.aggregates[agg[i].type];\n if (fn) {\n res[agg[i].field + ' - ' + agg[i].type] = fn(aggregateData, agg[i].field);\n }\n }\n args.aggregates = res;\n }\n var key = 'key';\n var isServerGrouping = Array.isArray(data.result) && data.result.length && !isNullOrUndefined(data.result[0][key]);\n if (pvt && pvt.groups && pvt.groups.length && !isServerGrouping) {\n var groups = pvt.groups;\n for (var i = 0; i < groups.length; i++) {\n var level = null;\n if (!isNullOrUndefined(groupDs)) {\n groupDs = DataUtil.group(groupDs, groups[i]);\n }\n var groupQuery = Query.filterQueries(query.queries, 'onGroup')[i].e;\n pData = DataUtil.group(pData, groups[i], pvt.aggregates, level, groupDs, groupQuery.comparer);\n }\n args.result = pData;\n }\n return args;\n };\n UrlAdaptor.prototype.getQueryRequest = function (query) {\n var req = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n req.sorts = Query.filterQueries(query.queries, 'onSortBy');\n req.groups = Query.filterQueries(query.queries, 'onGroup');\n req.filters = Query.filterQueries(query.queries, 'onWhere');\n req.searches = Query.filterQueries(query.queries, 'onSearch');\n req.aggregates = Query.filterQueries(query.queries, 'onAggregates');\n return req;\n };\n UrlAdaptor.prototype.addParams = function (options) {\n var req = options.reqParams;\n if (options.params.length) {\n req.params = {};\n }\n for (var _i = 0, _a = options.params; _i < _a.length; _i++) {\n var tmp = _a[_i];\n if (req[tmp.key]) {\n throw new Error('Query() - addParams: Custom Param is conflicting other request arguments');\n }\n req[tmp.key] = tmp.value;\n if (tmp.fn) {\n req[tmp.key] = tmp.fn.call(options.query, tmp.key, options.query, options.dm);\n }\n req.params[tmp.key] = req[tmp.key];\n }\n };\n return UrlAdaptor;\n}(Adaptor));\n/**\n * OData Adaptor that is extended from URL Adaptor, is used for consuming data through OData Service.\n *\n * @hidden\n */\nvar ODataAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(ODataAdaptor, _super);\n function ODataAdaptor(props) {\n var _this = _super.call(this) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$inlinecount',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 ',\n updateType: 'PUT'\n });\n extend(_this.options, props || {});\n return _this;\n }\n ODataAdaptor.prototype.getModuleName = function () {\n return 'ODataAdaptor';\n };\n /**\n * Generate request string based on the filter criteria from query.\n *\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n * @param predicate\n * @param query\n * @param requiresCast\n */\n ODataAdaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var operator;\n var guid;\n var val = predicate.value;\n var type = typeof val;\n var field = predicate.field ? ODataAdaptor.getField(predicate.field) : null;\n if (val instanceof Date) {\n val = 'datetime\\'' + DataUtil.parse.replacer(val) + '\\'';\n }\n if (type === 'string') {\n val = val.replace(/'/g, '\\'\\'');\n if (predicate.ignoreCase) {\n val = val.toLowerCase();\n }\n if (predicate.operator !== 'like') {\n val = encodeURIComponent(val);\n }\n if (predicate.operator !== 'wildcard' && predicate.operator !== 'like') {\n val = '\\'' + val + '\\'';\n }\n if (requiresCast) {\n field = 'cast(' + field + ', \\'Edm.String\\')';\n }\n if (DataUtil.parse.isGuid(val)) {\n guid = 'guid';\n }\n if (predicate.ignoreCase) {\n if (!guid) {\n field = 'tolower(' + field + ')';\n }\n val = val.toLowerCase();\n }\n }\n if (predicate.operator === 'isempty' || predicate.operator === 'isnull' || predicate.operator === 'isnotempty' ||\n predicate.operator === 'isnotnull') {\n operator = predicate.operator.indexOf('isnot') !== -1 ? DataUtil.odBiOperator['notequal'] : DataUtil.odBiOperator['equal'];\n val = predicate.operator === 'isnull' || predicate.operator === 'isnotnull' ? null : '\\'\\'';\n }\n else {\n operator = DataUtil.odBiOperator[predicate.operator];\n }\n if (operator) {\n returnValue += field;\n returnValue += operator;\n if (guid) {\n returnValue += guid;\n }\n return returnValue + val;\n }\n if (!isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor') {\n operator = DataUtil.odv4UniOperator[predicate.operator];\n }\n else {\n operator = DataUtil.odUniOperator[predicate.operator];\n }\n if (operator === 'like') {\n val = val;\n if (val.indexOf('%') !== -1) {\n if (val.charAt(0) === '%' && val.lastIndexOf('%') < 2) {\n val = val.substring(1, val.length);\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['startswith'] : DataUtil.odUniOperator['startswith'];\n }\n else if (val.charAt(val.length - 1) === '%' && val.indexOf('%') > val.length - 3) {\n val = val.substring(0, val.length - 1);\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['endswith'] : DataUtil.odUniOperator['endswith'];\n }\n else if (val.lastIndexOf('%') !== val.indexOf('%') && val.lastIndexOf('%') > val.indexOf('%') + 1) {\n val = val.substring(val.indexOf('%') + 1, val.lastIndexOf('%'));\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['contains'] : DataUtil.odUniOperator['contains'];\n }\n else {\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['contains'] : DataUtil.odUniOperator['contains'];\n }\n }\n val = encodeURIComponent(val);\n val = '\\'' + val + '\\'';\n }\n else if (operator === 'wildcard') {\n val = val;\n if (val.indexOf('*') !== -1) {\n var splittedStringValue = val.split('*');\n var splittedValue = void 0;\n var count = 0;\n if (val.indexOf('*') !== 0 && splittedStringValue[0].indexOf('%3f') === -1 &&\n splittedStringValue[0].indexOf('?') === -1) {\n splittedValue = splittedStringValue[0];\n splittedValue = '\\'' + splittedValue + '\\'';\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['startswith'] : DataUtil.odUniOperator['startswith'];\n returnValue += operator + '(';\n returnValue += field + ',';\n if (guid) {\n returnValue += guid;\n }\n returnValue += splittedValue + ')';\n count++;\n }\n if (val.lastIndexOf('*') !== val.length - 1 && splittedStringValue[splittedStringValue.length - 1].indexOf('%3f') === -1 &&\n splittedStringValue[splittedStringValue.length - 1].indexOf('?') === -1) {\n splittedValue = splittedStringValue[splittedStringValue.length - 1];\n splittedValue = '\\'' + splittedValue + '\\'';\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['endswith'] : DataUtil.odUniOperator['endswith'];\n if (count > 0) {\n returnValue += ' and ';\n }\n returnValue += operator + '(';\n returnValue += field + ',';\n if (guid) {\n returnValue += guid;\n }\n returnValue += splittedValue + ')';\n count++;\n }\n if (splittedStringValue.length > 2) {\n for (var i = 1; i < splittedStringValue.length - 1; i++) {\n if (splittedStringValue[i].indexOf('%3f') === -1 && splittedStringValue[i].indexOf('?') === -1) {\n splittedValue = splittedStringValue[i];\n splittedValue = '\\'' + splittedValue + '\\'';\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['contains'] : DataUtil.odUniOperator['contains'];\n if (count > 0) {\n returnValue += ' and ';\n }\n if (operator === 'substringof' || operator === 'not substringof') {\n var temp = splittedValue;\n splittedValue = field;\n field = temp;\n }\n returnValue += operator + '(';\n returnValue += field + ',';\n if (guid) {\n returnValue += guid;\n }\n returnValue += splittedValue + ')';\n count++;\n }\n }\n }\n if (count === 0) {\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['contains'] : DataUtil.odUniOperator['contains'];\n if (val.indexOf('?') !== -1 || val.indexOf('%3f') !== -1) {\n val = val.indexOf('?') !== -1 ? val.split('?').join('') : val.split('%3f').join('');\n }\n val = '\\'' + val + '\\'';\n }\n else {\n operator = 'wildcard';\n }\n }\n else {\n operator = !isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor' ?\n DataUtil.odv4UniOperator['contains'] : DataUtil.odUniOperator['contains'];\n if (val.indexOf('?') !== -1 || val.indexOf('%3f') !== -1) {\n val = val.indexOf('?') !== -1 ? val.split('?').join('') : val.split('%3f').join('');\n }\n val = '\\'' + val + '\\'';\n }\n }\n if (operator === 'substringof' || operator === 'not substringof') {\n var temp = val;\n val = field;\n field = temp;\n }\n if (operator !== 'wildcard') {\n returnValue += operator + '(';\n returnValue += field + ',';\n if (guid) {\n returnValue += guid;\n }\n returnValue += val + ')';\n }\n return returnValue;\n };\n ODataAdaptor.prototype.addParams = function (options) {\n _super.prototype.addParams.call(this, options);\n delete options.reqParams.params;\n };\n /**\n * Generate request string based on the multiple filter criteria from query.\n *\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n * @param predicate\n * @param query\n * @param requiresCast\n */\n ODataAdaptor.prototype.onComplexPredicate = function (predicate, query, requiresCast) {\n var res = [];\n for (var i = 0; i < predicate.predicates.length; i++) {\n res.push('(' + this.onEachWhere(predicate.predicates[i], query, requiresCast) + ')');\n }\n return res.join(' ' + predicate.condition + ' ');\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n *\n * @param {Predicate} filter\n * @param {boolean} requiresCast?\n * @param query\n * @param requiresCast\n */\n ODataAdaptor.prototype.onEachWhere = function (filter, query, requiresCast) {\n return filter.isComplex ? this.onComplexPredicate(filter, query, requiresCast) : this.onPredicate(filter, query, requiresCast);\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n *\n * @param {string[]} filters\n */\n ODataAdaptor.prototype.onWhere = function (filters) {\n if (this.pvt.search) {\n filters.push(this.onEachWhere(this.pvt.search, null, true));\n }\n return filters.join(' and ');\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n *\n * @param e\n * @param {string} operator\n * @param {string} key\n * @param {boolean} } ignoreCase\n * @param e.fields\n * @param e.operator\n * @param e.key\n * @param e.ignoreCase\n */\n ODataAdaptor.prototype.onEachSearch = function (e) {\n if (e.fields && e.fields.length === 0) {\n DataUtil.throwError('Query() - Search : oData search requires list of field names to search');\n }\n var filter = this.pvt.search || [];\n for (var i = 0; i < e.fields.length; i++) {\n filter.push(new Predicate(e.fields[i], e.operator, e.key, e.ignoreCase));\n }\n this.pvt.search = filter;\n };\n /**\n * Generate query string based on the search criteria from query.\n *\n * @param {Object} e\n */\n ODataAdaptor.prototype.onSearch = function (e) {\n this.pvt.search = Predicate.or(this.pvt.search);\n return '';\n };\n /**\n * Generate query string based on multiple sort criteria from query.\n *\n * @param {QueryOptions} e\n */\n ODataAdaptor.prototype.onEachSort = function (e) {\n var res = [];\n if (e.name instanceof Array) {\n for (var i = 0; i < e.name.length; i++) {\n res.push(ODataAdaptor.getField(e.name[i]) + (e.direction === 'descending' ? ' desc' : ''));\n }\n }\n else {\n res.push(ODataAdaptor.getField(e.name) + (e.direction === 'descending' ? ' desc' : ''));\n }\n return res.join(',');\n };\n /**\n * Returns sort query string.\n *\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSortBy = function (e) {\n return e.reverse().join(',');\n };\n /**\n * Adds the group query to the adaptor option.\n *\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return [];\n };\n /**\n * Returns the select query string.\n *\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSelect = function (e) {\n for (var i = 0; i < e.length; i++) {\n e[i] = ODataAdaptor.getField(e[i]);\n }\n return e.join(',');\n };\n /**\n * Add the aggregate query to the adaptor option.\n *\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n return '';\n };\n /**\n * Returns the query string which requests total count from the data source.\n *\n * @param {boolean} e\n * @returns string\n */\n ODataAdaptor.prototype.onCount = function (e) {\n return e === true ? 'allpages' : '';\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n *\n * @param {DataManager} dm\n * @param {Request} request\n * @param {Fetch} settings?\n * @param settings\n */\n ODataAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (DataUtil.endsWith(settings.url, this.options.batch) && settings.type.toLowerCase() === 'post') {\n request.headers.set('Accept', this.options.multipartAccept);\n request.headers.set('DataServiceVersion', '2.0');\n //request.overrideMimeType('text/plain; charset=x-user-defined');\n }\n else {\n request.headers.set('Accept', this.options.accept);\n }\n request.headers.set('DataServiceVersion', '2.0');\n request.headers.set('MaxDataServiceVersion', '2.0');\n };\n /**\n * Returns the data from the query processing.\n *\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {Request} xhr?\n * @param {Fetch} request?\n * @param {CrudOptions} changes?\n * @param ds\n * @param query\n * @param xhr\n * @param request\n * @param changes\n * @returns aggregateResult\n */\n ODataAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var metaCheck = 'odata.metadata';\n if ((request && request.type === 'GET') && !this.rootUrl && data[metaCheck]) {\n var dataUrls = data[metaCheck].split('/$metadata#');\n this.rootUrl = dataUrls[0];\n this.resourceTableName = dataUrls[1];\n }\n var pvtData = 'pvtData';\n if (!isNullOrUndefined(data.d)) {\n var dataCopy = ((query && query.isCountRequired) ? data.d.results : data.d);\n var metaData = '__metadata';\n if (!isNullOrUndefined(dataCopy)) {\n for (var i = 0; i < dataCopy.length; i++) {\n if (!isNullOrUndefined(dataCopy[i][metaData])) {\n delete dataCopy[i][metaData];\n }\n }\n }\n }\n var pvt = request && request[pvtData];\n var emptyAndBatch = this.processBatchResponse(data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var versionCheck = xhr && request.fetchRequest.headers.get('DataServiceVersion');\n var count = null;\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n var oDataCount = '__count';\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n if (data.d) {\n data = data.d;\n }\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n }\n if (version === 3 && data.value) {\n data = data.value;\n }\n if (data.d) {\n data = data.d;\n }\n if (version < 3 && data.results) {\n data = data.results;\n }\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n /**\n * Converts the request object to query string.\n *\n * @param {Object} req\n * @param request\n * @param {Query} query\n * @param {DataManager} dm\n * @returns tableName\n */\n ODataAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n var res = [];\n var table = 'table';\n var tableName = request[table] || '';\n var format = '$format';\n delete request[table];\n if (dm.dataSource.requiresFormat) {\n request[format] = 'json';\n }\n var keys = Object.keys(request);\n for (var _i = 0, keys_4 = keys; _i < keys_4.length; _i++) {\n var prop = keys_4[_i];\n res.push(prop + '=' + request[prop]);\n }\n res = res.join('&');\n if (dm.dataSource.url && dm.dataSource.url.indexOf('?') !== -1 && !tableName) {\n return res;\n }\n return res.length ? tableName + '?' + res : tableName || '';\n };\n ODataAdaptor.prototype.localTimeReplacer = function (key, convertObj) {\n for (var _i = 0, _a = !isNullOrUndefined(convertObj) ? Object.keys(convertObj) : []; _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((convertObj[prop] instanceof Date)) {\n convertObj[prop] = DataUtil.dateParse.toLocalTime(convertObj[prop]);\n }\n }\n return convertObj;\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n *\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n * @param tableName\n */\n ODataAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n url: (dm.dataSource.insertUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : ''),\n data: JSON.stringify(data, this.options.localTime ? this.localTimeReplacer : null)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n * @param tableName\n */\n ODataAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n var url;\n if (typeof value === 'string' && !DataUtil.parse.isGuid(value)) {\n url = \"('\" + value + \"')\";\n }\n else {\n url = \"(\" + value + \")\";\n }\n return {\n type: 'DELETE',\n url: (dm.dataSource.removeUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : '') + url\n };\n };\n /**\n * Updates existing record and saves the changes to the table.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @param tableName\n * @param query\n * @param original\n * @returns this\n */\n ODataAdaptor.prototype.update = function (dm, keyField, value, tableName, query, original) {\n if (this.options.updateType === 'PATCH' && !isNullOrUndefined(original)) {\n value = this.compareAndRemove(value, original, keyField);\n }\n var url;\n if (typeof value[keyField] === 'string' && !DataUtil.parse.isGuid(value[keyField])) {\n url = \"('\" + value[keyField] + \"')\";\n }\n else {\n url = \"(\" + value[keyField] + \")\";\n }\n return {\n type: this.options.updateType,\n url: (dm.dataSource.updateUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : '') + url,\n data: JSON.stringify(value, this.options.localTime ? this.localTimeReplacer : null),\n accept: this.options.accept\n };\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n *\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n * @param query\n * @param original\n * @returns {Object}\n */\n ODataAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var initialGuid = e.guid = DataUtil.getGuid(this.options.batchPre);\n var url = (dm.dataSource.batchUrl || this.rootUrl) ?\n (dm.dataSource.batchUrl || this.rootUrl) + '/' + this.options.batch :\n (dm.dataSource.batchUrl || dm.dataSource.url).replace(/\\/*$/, '/' + this.options.batch);\n e.url = this.resourceTableName ? this.resourceTableName : e.url;\n var args = {\n url: e.url,\n key: e.key,\n cid: 1,\n cSet: DataUtil.getGuid(this.options.changeSet)\n };\n var req = '--' + initialGuid + '\\n';\n req += 'Content-Type: multipart/mixed; boundary=' + args.cSet.replace('--', '') + '\\n';\n this.pvt.changeSet = 0;\n req += this.generateInsertRequest(changes.addedRecords, args, dm);\n req += this.generateUpdateRequest(changes.changedRecords, args, dm, original ? original.changedRecords : []);\n req += this.generateDeleteRequest(changes.deletedRecords, args, dm);\n req += args.cSet + '--\\n';\n req += '--' + initialGuid + '--';\n return {\n type: 'POST',\n url: url,\n dataType: 'json',\n contentType: 'multipart/mixed; charset=UTF-8;boundary=' + initialGuid,\n data: req\n };\n };\n /**\n * Generate the string content from the removed records.\n * The result will be send during batch update.\n *\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n * @param dm\n * @returns this\n */\n ODataAdaptor.prototype.generateDeleteRequest = function (arr, e, dm) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'DELETE ',\n 'url': function (data, i, key) {\n var url = DataUtil.getObject(key, data[i]);\n if (typeof url === 'number' || DataUtil.parse.isGuid(url)) {\n return '(' + url + ')';\n }\n else if (url instanceof Date) {\n var dateTime = data[i][key];\n return '(' + dateTime.toJSON() + ')';\n }\n else {\n return \"('\" + url + \"')\";\n }\n },\n 'data': function (data, i) { return ''; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req + '\\n';\n };\n /**\n * Generate the string content from the inserted records.\n * The result will be send during batch update.\n *\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n * @param dm\n */\n ODataAdaptor.prototype.generateInsertRequest = function (arr, e, dm) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'POST ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req;\n };\n /**\n * Generate the string content from the updated records.\n * The result will be send during batch update.\n *\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n * @param dm\n * @param org\n */\n ODataAdaptor.prototype.generateUpdateRequest = function (arr, e, dm, org) {\n var _this = this;\n if (!arr) {\n return '';\n }\n var req = '';\n arr.forEach(function (change) { return change = _this.compareAndRemove(change, org.filter(function (o) { return DataUtil.getObject(e.key, o) === DataUtil.getObject(e.key, change); })[0], e.key); });\n var stat = {\n 'method': this.options.updateType + ' ',\n 'url': function (data, i, key) {\n if (typeof data[i][key] === 'number' || DataUtil.parse.isGuid(data[i][key])) {\n return '(' + data[i][key] + ')';\n }\n else if (data[i][key] instanceof Date) {\n var date = data[i][key];\n return '(' + date.toJSON() + ')';\n }\n else {\n return \"('\" + data[i][key] + \"')\";\n }\n },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req;\n };\n ODataAdaptor.getField = function (prop) {\n return prop.replace(/\\./g, '/');\n };\n ODataAdaptor.prototype.generateBodyContent = function (arr, e, stat, dm) {\n var req = '';\n for (var i = 0; i < arr.length; i++) {\n req += '\\n' + e.cSet + '\\n';\n req += this.options.changeSetContent + '\\n\\n';\n req += stat.method;\n if (stat.method === 'POST ') {\n req += (dm.dataSource.insertUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n else if (stat.method === 'PUT ' || stat.method === 'PATCH ') {\n req += (dm.dataSource.updateUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n else if (stat.method === 'DELETE ') {\n req += (dm.dataSource.removeUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n req += 'Accept: ' + this.options.accept + '\\n';\n req += 'Content-Id: ' + this.pvt.changeSet++ + '\\n';\n req += this.options.batchChangeSetContentType + '\\n';\n if (!isNullOrUndefined(arr[i]['@odata.etag'])) {\n req += 'If-Match: ' + arr[i]['@odata.etag'] + '\\n\\n';\n delete arr[i]['@odata.etag'];\n }\n else {\n req += '\\n';\n }\n req += stat.data(arr, i);\n }\n return req;\n };\n ODataAdaptor.prototype.processBatchResponse = function (data, query, xhr, request, changes) {\n if (xhr && xhr.headers.get('Content-Type') && xhr.headers.get('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n if (request && this.options.batch && DataUtil.endsWith(request.url, this.options.batch) && request.type.toLowerCase() === 'post') {\n var guid = xhr.headers.get('Content-Type');\n var cIdx = void 0;\n var jsonObj = void 0;\n var d = data + '';\n guid = guid.substring(guid.indexOf('=batchresponse') + 1);\n d = d.split(guid);\n if (d.length < 2) {\n return {};\n }\n d = d[1];\n var exVal = /(?:\\bContent-Type.+boundary=)(changesetresponse.+)/i.exec(d);\n if (exVal) {\n d.replace(exVal[0], '');\n }\n var changeGuid = exVal ? exVal[1] : '';\n d = d.split(changeGuid);\n for (var i = d.length; i > -1; i--) {\n if (!/\\bContent-ID:/i.test(d[i]) || !/\\bHTTP.+201/.test(d[i])) {\n continue;\n }\n cIdx = parseInt(/\\bContent-ID: (\\d+)/i.exec(d[i])[1], 10);\n if (changes.addedRecords[cIdx]) {\n jsonObj = DataUtil.parse.parseJson(/^\\{.+\\}/m.exec(d[i])[0]);\n extend({}, changes.addedRecords[cIdx], this.processResponse(jsonObj));\n }\n }\n return changes;\n }\n return null;\n };\n ODataAdaptor.prototype.compareAndRemove = function (data, original, key) {\n var _this = this;\n if (isNullOrUndefined(original)) {\n return data;\n }\n Object.keys(data).forEach(function (prop) {\n if (prop !== key && prop !== '@odata.etag') {\n if (DataUtil.isPlainObject(data[prop])) {\n _this.compareAndRemove(data[prop], original[prop]);\n var final = Object.keys(data[prop]).filter(function (data) { return data !== '@odata.etag'; });\n if (final.length === 0) {\n delete data[prop];\n }\n }\n else if (data[prop] === original[prop]) {\n delete data[prop];\n }\n else if (data[prop] && original[prop] && data[prop].valueOf() === original[prop].valueOf()) {\n delete data[prop];\n }\n }\n });\n return data;\n };\n return ODataAdaptor;\n}(UrlAdaptor));\n/**\n * The OData v4 is an improved version of OData protocols.\n * The DataManager uses the ODataV4Adaptor to consume OData v4 services.\n *\n * @hidden\n */\nvar ODataV4Adaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(ODataV4Adaptor, _super);\n function ODataV4Adaptor(props) {\n var _this = _super.call(this, props) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json, text/javascript, */*; q=0.01',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$count',\n search: '$search',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 ',\n updateType: 'PATCH',\n localTime: false,\n apply: '$apply'\n });\n extend(_this.options, props || {});\n return _this;\n }\n /**\n * @hidden\n */\n ODataV4Adaptor.prototype.getModuleName = function () {\n return 'ODataV4Adaptor';\n };\n /**\n * Returns the query string which requests total count from the data source.\n *\n * @param {boolean} e\n * @returns string\n */\n ODataV4Adaptor.prototype.onCount = function (e) {\n return e === true ? 'true' : '';\n };\n /**\n * Generate request string based on the filter criteria from query.\n *\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n * @param predicate\n * @param query\n * @param requiresCast\n */\n ODataV4Adaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var val = predicate.value;\n var isDate = val instanceof Date;\n if (query instanceof Query) {\n var queries = this.getQueryRequest(query);\n for (var i = 0; i < queries.filters.length; i++) {\n if (queries.filters[i].e.key === predicate.value) {\n requiresCast = true;\n }\n }\n }\n returnValue = _super.prototype.onPredicate.call(this, predicate, query, requiresCast);\n if (isDate) {\n returnValue = returnValue.replace(/datetime'(.*)'$/, '$1');\n }\n if (DataUtil.parse.isGuid(val)) {\n returnValue = returnValue.replace('guid', '').replace(/'/g, '');\n }\n return returnValue;\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n *\n * @param e\n * @param {string} operator\n * @param {string} key\n * @param {boolean} } ignoreCase\n * @param e.fields\n * @param e.operator\n * @param e.key\n * @param e.ignoreCase\n */\n ODataV4Adaptor.prototype.onEachSearch = function (e) {\n var search = this.pvt.searches || [];\n search.push(e.key);\n this.pvt.searches = search;\n };\n /**\n * Generate query string based on the search criteria from query.\n *\n * @param {Object} e\n */\n ODataV4Adaptor.prototype.onSearch = function (e) {\n return this.pvt.searches.join(' OR ');\n };\n /**\n * Returns the expand query string.\n *\n * @param {string} e\n * @param e.selects\n * @param e.expands\n */\n ODataV4Adaptor.prototype.onExpand = function (e) {\n var _this = this;\n var selected = {};\n var expanded = {};\n var expands = e.expands.slice();\n var exArr = [];\n var selects = e.selects.filter(function (item) { return item.indexOf('.') > -1; });\n selects.forEach(function (select) {\n var splits = select.split('.');\n if (!(splits[0] in selected)) {\n selected[splits[0]] = [];\n }\n if (splits.length === 2) {\n if (selected[splits[0]].length && Object.keys(selected).indexOf(splits[0]) !== -1) {\n if (selected[splits[0]][0].indexOf('$expand') !== -1 && selected[splits[0]][0].indexOf(';$select=') === -1) {\n selected[splits[0]][0] = selected[splits[0]][0] + ';' + '$select=' + splits[1];\n }\n else {\n selected[splits[0]][0] = selected[splits[0]][0] + ',' + splits[1];\n }\n }\n else {\n selected[splits[0]].push('$select=' + splits[1]);\n }\n }\n else {\n var sel = '$select=' + splits[splits.length - 1];\n var exp = '';\n var close_1 = '';\n for (var i = 1; i < splits.length - 1; i++) {\n exp = exp + '$expand=' + splits[i] + '(';\n close_1 = close_1 + ')';\n }\n var combineVal = exp + sel + close_1;\n if (selected[splits[0]].length && Object.keys(selected).indexOf(splits[0]) !== -1 &&\n _this.expandQueryIndex(selected[splits[0]], true)) {\n var idx = _this.expandQueryIndex(selected[splits[0]]);\n selected[splits[0]][idx] = selected[splits[0]][idx] + combineVal.replace('$expand=', ',');\n }\n else {\n selected[splits[0]].push(combineVal);\n }\n }\n });\n //Auto expand from select query\n Object.keys(selected).forEach(function (expand) {\n if ((expands.indexOf(expand) === -1)) {\n expands.push(expand);\n }\n });\n expands.forEach(function (expand) {\n expanded[expand] = expand in selected ? expand + \"(\" + selected[expand].join(';') + \")\" : expand;\n });\n Object.keys(expanded).forEach(function (ex) { return exArr.push(expanded[ex]); });\n return exArr.join(',');\n };\n ODataV4Adaptor.prototype.expandQueryIndex = function (query, isExpand) {\n for (var i = 0; i < query.length; i++) {\n if (query[i].indexOf('$expand') !== -1) {\n return isExpand ? true : i;\n }\n }\n return isExpand ? false : 0;\n };\n /**\n * Returns the groupby query string.\n *\n * @param {string} e\n * @param distinctFields\n */\n ODataV4Adaptor.prototype.onDistinct = function (distinctFields) {\n var fields = distinctFields.map(function (field) { return ODataAdaptor.getField(field); }).join(',');\n return \"groupby((\" + fields + \"))\";\n };\n /**\n * Returns the select query string.\n *\n * @param {string[]} e\n */\n ODataV4Adaptor.prototype.onSelect = function (e) {\n return _super.prototype.onSelect.call(this, e.filter(function (item) { return item.indexOf('.') === -1; }));\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n *\n * @param {DataManager} dm\n * @param {Request} request\n * @param {Fetch} settings\n * @returns void\n */\n ODataV4Adaptor.prototype.beforeSend = function (dm, request, settings) {\n if (settings.type === 'POST' || settings.type === 'PUT' || settings.type === 'PATCH') {\n request.headers.set('Prefer', 'return=representation');\n }\n request.headers.set('Accept', this.options.accept);\n };\n /**\n * Returns the data from the query processing.\n *\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {Request} xhr?\n * @param {Fetch} request?\n * @param {CrudOptions} changes?\n * @param ds\n * @param query\n * @param xhr\n * @param request\n * @param changes\n * @returns aggregateResult\n */\n ODataV4Adaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var metaName = '@odata.context';\n var metaV4Name = '@context';\n if ((request && request.type === 'GET') && !this.rootUrl && (data[metaName] || data[metaV4Name])) {\n var dataUrl = data[metaName] ? data[metaName].split('/$metadata#') : data[metaV4Name].split('/$metadata#');\n this.rootUrl = dataUrl[0];\n this.resourceTableName = dataUrl[1];\n }\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var emptyAndBatch = _super.prototype.processBatchResponse.call(this, data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var count = null;\n var dataCount = '@odata.count';\n var dataV4Count = '@count';\n if (query && query.isCountRequired) {\n if (dataCount in data) {\n count = data[dataCount];\n }\n else if (dataV4Count in data) {\n count = data[dataV4Count];\n }\n }\n data = !isNullOrUndefined(data.value) ? data.value : data;\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: count, aggregates: args.aggregates };\n };\n return ODataV4Adaptor;\n}(ODataAdaptor));\n/**\n * The Web API is a programmatic interface to define the request and response messages system that is mostly exposed in JSON or XML.\n * The DataManager uses the WebApiAdaptor to consume Web API.\n * Since this adaptor is targeted to interact with Web API created using OData endpoint, it is extended from ODataAdaptor\n *\n * @hidden\n */\nvar WebApiAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(WebApiAdaptor, _super);\n function WebApiAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n WebApiAdaptor.prototype.getModuleName = function () {\n return 'WebApiAdaptor';\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n *\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n * @param tableName\n */\n WebApiAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n type: 'POST',\n url: dm.dataSource.url,\n data: JSON.stringify(data)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n * @param tableName\n */\n WebApiAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n return {\n type: 'DELETE',\n url: dm.dataSource.url + '/' + value,\n data: JSON.stringify(value)\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @param tableName\n */\n WebApiAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n return {\n type: 'PUT',\n url: dm.dataSource.url,\n data: JSON.stringify(value)\n };\n };\n WebApiAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var _this = this;\n var initialGuid = e.guid = DataUtil.getGuid(this.options.batchPre);\n var url = dm.dataSource.url.replace(/\\/*$/, '/' + this.options.batch);\n e.url = this.resourceTableName ? this.resourceTableName : e.url;\n var req = [];\n var _loop_1 = function (i, x) {\n changes.addedRecords.forEach(function (j, d) {\n var stat = {\n 'method': 'POST ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('POST ' + '/api/' + (dm.dataSource.insertUrl || dm.dataSource.crudUrl || e.url)\n + stat.url(changes.addedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //insertion\n for (var i = 0, x = changes.addedRecords.length; i < x; i++) {\n _loop_1(i);\n }\n var _loop_2 = function (i, x) {\n changes.changedRecords.forEach(function (j, d) {\n var stat = {\n 'method': _this.options.updateType + ' ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('PUT ' + '/api/' + (dm.dataSource.updateUrl || dm.dataSource.crudUrl || e.url)\n + stat.url(changes.changedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //updation\n for (var i = 0, x = changes.changedRecords.length; i < x; i++) {\n _loop_2(i);\n }\n var _loop_3 = function (i, x) {\n changes.deletedRecords.forEach(function (j, d) {\n var state = {\n 'mtd': 'DELETE ',\n 'url': function (data, i, key) {\n var url = DataUtil.getObject(key, data[i]);\n if (typeof url === 'number' || DataUtil.parse.isGuid(url)) {\n return '/' + url;\n }\n else if (url instanceof Date) {\n var datTime = data[i][key];\n return '/' + datTime.toJSON();\n }\n else {\n return \"/'\" + url + \"'\";\n }\n },\n 'data': function (data, i) { return ''; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('DELETE ' + '/api/' + (dm.dataSource.removeUrl || dm.dataSource.crudUrl || e.url)\n + state.url(changes.deletedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //deletion\n for (var i = 0, x = changes.deletedRecords.length; i < x; i++) {\n _loop_3(i);\n }\n req.push('--' + initialGuid + '--', '');\n return {\n type: 'POST',\n url: url,\n contentType: 'multipart/mixed; boundary=' + initialGuid,\n data: req.join('\\r\\n')\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n *\n * @param {DataManager} dm\n * @param {Request} request\n * @param {Fetch} settings\n * @returns void\n */\n WebApiAdaptor.prototype.beforeSend = function (dm, request, settings) {\n request.headers.set('Accept', 'application/json, text/javascript, */*; q=0.01');\n };\n /**\n * Returns the data from the query processing.\n *\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {Request} xhr?\n * @param {Fetch} request?\n * @param {CrudOptions} changes?\n * @param ds\n * @param query\n * @param xhr\n * @param request\n * @param changes\n * @returns aggregateResult\n */\n WebApiAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var count = null;\n var args = {};\n if (request && request.type.toLowerCase() !== 'post') {\n var versionCheck = xhr && request.fetchRequest.headers.get('DataServiceVersion');\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n if (!DataUtil.isNull(data.Count)) {\n count = data.Count;\n }\n }\n if (version < 3 && data.Items) {\n data = data.Items;\n }\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n }\n args.result = args.result || data;\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n return WebApiAdaptor;\n}(ODataAdaptor));\n/**\n * WebMethodAdaptor can be used by DataManager to interact with web method.\n *\n * @hidden\n */\nvar WebMethodAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(WebMethodAdaptor, _super);\n function WebMethodAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Prepare the request body based on the query.\n * The query information can be accessed at the WebMethod using variable named `value`.\n *\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @param hierarchyFilters\n * @returns application\n */\n WebMethodAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var obj = new UrlAdaptor().processQuery(dm, query, hierarchyFilters);\n var getData = 'data';\n var data = DataUtil.parse.parseJson(obj[getData]);\n var result = {};\n var value = 'value';\n if (data.param) {\n for (var i = 0; i < data.param.length; i++) {\n var param = data.param[i];\n var key = Object.keys(param)[0];\n result[key] = param[key];\n }\n }\n result[value] = data;\n var pvtData = 'pvtData';\n var url = 'url';\n return {\n data: JSON.stringify(result, DataUtil.parse.jsonDateReplacer),\n url: obj[url],\n pvtData: obj[pvtData],\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n };\n return WebMethodAdaptor;\n}(UrlAdaptor));\n/**\n * RemoteSaveAdaptor, extended from JsonAdaptor and it is used for binding local data and performs all DataManager queries in client-side.\n * It interacts with server-side only for CRUD operations.\n *\n * @hidden\n */\nvar RemoteSaveAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(RemoteSaveAdaptor, _super);\n /**\n * @hidden\n */\n function RemoteSaveAdaptor() {\n var _this = _super.call(this) || this;\n setValue('beforeSend', UrlAdaptor.prototype.beforeSend, _this);\n return _this;\n }\n RemoteSaveAdaptor.prototype.insert = function (dm, data, tableName, query, position) {\n this.pvt.position = position;\n this.updateType = 'add';\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: data,\n table: tableName,\n action: 'insert'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.remove = function (dm, keyField, val, tableName, query) {\n _super.prototype.remove.call(this, dm, keyField, val);\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n key: val,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.update = function (dm, keyField, val, tableName, query) {\n this.updateType = 'update';\n this.updateKey = keyField;\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: val,\n action: 'update',\n keyColumn: keyField,\n key: val[keyField],\n table: tableName\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes, e) {\n var i;\n var newData = request ? JSON.parse(request.data) : data;\n data = newData.action === 'batch' ? DataUtil.parse.parseJson(data) : data;\n if (this.updateType === 'add') {\n _super.prototype.insert.call(this, ds, data, null, null, this.pvt.position);\n }\n if (this.updateType === 'update') {\n _super.prototype.update.call(this, ds, this.updateKey, data);\n }\n this.updateType = undefined;\n if (data.added) {\n for (i = 0; i < data.added.length; i++) {\n _super.prototype.insert.call(this, ds, data.added[i]);\n }\n }\n if (data.changed) {\n for (i = 0; i < data.changed.length; i++) {\n _super.prototype.update.call(this, ds, e.key, data.changed[i]);\n }\n }\n if (data.deleted) {\n for (i = 0; i < data.deleted.length; i++) {\n _super.prototype.remove.call(this, ds, e.key, data.deleted[i]);\n }\n }\n return data;\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * Also perform the changes in the locally cached data to sync with the remote data.\n * The result is used by the batch request.\n *\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n * @param query\n * @param original\n */\n RemoteSaveAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify(extend({}, {\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e.url,\n key: e.key\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.addParams = function (options) {\n var urlParams = new UrlAdaptor();\n urlParams.addParams(options);\n };\n return RemoteSaveAdaptor;\n}(JsonAdaptor));\n/**\n * Fetch Adaptor that is extended from URL Adaptor, is used for handle data operations with user defined functions.\n *\n * @hidden\n */\nvar CustomDataAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(CustomDataAdaptor, _super);\n function CustomDataAdaptor(props) {\n var _this = _super.call(this) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n getData: function () { },\n addRecord: function () { },\n updateRecord: function () { },\n deleteRecord: function () { },\n batchUpdate: function () { }\n });\n extend(_this.options, props || {});\n return _this;\n }\n CustomDataAdaptor.prototype.getModuleName = function () {\n return 'CustomDataAdaptor';\n };\n return CustomDataAdaptor;\n}(UrlAdaptor));\n/**\n * The GraphqlAdaptor that is extended from URL Adaptor, is used for retrieving data from the Graphql server.\n * It interacts with the Graphql server with all the DataManager Queries and performs CRUD operations.\n *\n * @hidden\n */\nvar GraphQLAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(GraphQLAdaptor, _super);\n function GraphQLAdaptor(options) {\n var _this = _super.call(this) || this;\n _this.opt = options;\n _this.schema = _this.opt.response;\n _this.query = _this.opt.query;\n /* eslint-disable @typescript-eslint/no-empty-function */\n // tslint:disable-next-line:no-empty\n _this.getVariables = _this.opt.getVariables ? _this.opt.getVariables : function () { };\n /* eslint-enable @typescript-eslint/no-empty-function */\n _this.getQuery = function () { return _this.query; };\n return _this;\n }\n GraphQLAdaptor.prototype.getModuleName = function () {\n return 'GraphQLAdaptor';\n };\n /**\n * Process the JSON data based on the provided queries.\n *\n * @param {DataManager} dm\n * @param {Query} query?\n * @param datamanager\n * @param query\n */\n GraphQLAdaptor.prototype.processQuery = function (datamanager, query) {\n var urlQuery = _super.prototype.processQuery.apply(this, arguments);\n var dm = JSON.parse(urlQuery.data);\n // constructing GraphQL parameters\n var keys = ['skip', 'take', 'sorted', 'table', 'select', 'where',\n 'search', 'requiresCounts', 'aggregates', 'params'];\n var temp = {};\n var str = 'searchwhereparams';\n keys.filter(function (e) {\n temp[e] = str.indexOf(e) > -1 ? JSON.stringify(dm[e]) : dm[e];\n });\n var vars = this.getVariables() || {};\n // tslint:disable-next-line:no-string-literal\n vars['datamanager'] = temp;\n var data = JSON.stringify({\n query: this.getQuery(),\n variables: vars\n });\n urlQuery.data = data;\n return urlQuery;\n };\n /**\n * Returns the data from the query processing.\n * It will also cache the data for later usage.\n *\n * @param {DataResult} data\n * @param {DataManager} ds?\n * @param {Query} query?\n * @param {Request} xhr?\n * @param {Object} request?\n * @param resData\n * @param ds\n * @param query\n * @param xhr\n * @param request\n * @returns DataResult\n */\n GraphQLAdaptor.prototype.processResponse = function (resData, ds, query, xhr, request) {\n var res = resData;\n var count;\n var aggregates;\n var result = getValue(this.schema.result, res.data);\n if (this.schema.count) {\n count = getValue(this.schema.count, res.data);\n }\n if (this.schema.aggregates) {\n aggregates = getValue(this.schema.aggregates, res.data);\n aggregates = !isNullOrUndefined(aggregates) ? DataUtil.parse.parseJson(aggregates) : aggregates;\n }\n var pvt = request.pvtData || {};\n var args = { result: result, aggregates: aggregates };\n var data = args;\n if (pvt && pvt.groups && pvt.groups.length) {\n this.getAggregateResult(pvt, data, args, null, query);\n }\n return !isNullOrUndefined(count) ? { result: args.result, count: count, aggregates: aggregates } : args.result;\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n */\n GraphQLAdaptor.prototype.insert = function () {\n var inserted = _super.prototype.insert.apply(this, arguments);\n return this.generateCrudData(inserted, 'insert');\n };\n /**\n * Prepare and returns request body which is used to update a new record in the table.\n */\n GraphQLAdaptor.prototype.update = function () {\n var inserted = _super.prototype.update.apply(this, arguments);\n return this.generateCrudData(inserted, 'update');\n };\n /**\n * Prepare and returns request body which is used to remove a new record in the table.\n */\n GraphQLAdaptor.prototype.remove = function () {\n var inserted = _super.prototype.remove.apply(this, arguments);\n return this.generateCrudData(inserted, 'remove');\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n *\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {Object} e\n * @param e.key\n * @param {Query} query\n * @param {Object} original\n */\n GraphQLAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var batch = _super.prototype.batchRequest.apply(this, arguments);\n // tslint:disable-next-line:typedef\n var bData = JSON.parse(batch.data);\n bData.key = e.key;\n batch.data = JSON.stringify(bData);\n return this.generateCrudData(batch, 'batch');\n };\n GraphQLAdaptor.prototype.generateCrudData = function (crudData, action) {\n var parsed = JSON.parse(crudData.data);\n crudData.data = JSON.stringify({\n query: this.opt.getMutation(action),\n variables: parsed\n });\n return crudData;\n };\n return GraphQLAdaptor;\n}(UrlAdaptor));\n/**\n * Cache Adaptor is used to cache the data of the visited pages. It prevents new requests for the previously visited pages.\n * You can configure cache page size and duration of caching by using cachingPageSize and timeTillExpiration properties of the DataManager\n *\n * @hidden\n */\nvar CacheAdaptor = /** @__PURE__ @class */ (function (_super) {\n __extends(CacheAdaptor, _super);\n /**\n * Constructor for CacheAdaptor class.\n *\n * @param {CacheAdaptor} adaptor?\n * @param {number} timeStamp?\n * @param {number} pageSize?\n * @param adaptor\n * @param timeStamp\n * @param pageSize\n * @hidden\n */\n function CacheAdaptor(adaptor, timeStamp, pageSize) {\n var _this = _super.call(this) || this;\n _this.isCrudAction = false;\n _this.isInsertAction = false;\n if (!isNullOrUndefined(adaptor)) {\n _this.cacheAdaptor = adaptor;\n }\n _this.pageSize = pageSize;\n _this.guidId = DataUtil.getGuid('cacheAdaptor');\n var obj = { keys: [], results: [] };\n window.localStorage.setItem(_this.guidId, JSON.stringify(obj));\n var guid = _this.guidId;\n if (!isNullOrUndefined(timeStamp)) {\n setInterval(function () {\n var data = DataUtil.parse.parseJson(window.localStorage.getItem(guid));\n var forDel = [];\n for (var i = 0; i < data.results.length; i++) {\n var currentTime = +new Date();\n var requestTime = +new Date(data.results[i].timeStamp);\n data.results[i].timeStamp = currentTime - requestTime;\n if (currentTime - requestTime > timeStamp) {\n forDel.push(i);\n }\n }\n for (var i = 0; i < forDel.length; i++) {\n data.results.splice(forDel[i], 1);\n data.keys.splice(forDel[i], 1);\n }\n window.localStorage.removeItem(guid);\n window.localStorage.setItem(guid, JSON.stringify(data));\n }, timeStamp);\n }\n return _this;\n }\n /**\n * It will generate the key based on the URL when we send a request to server.\n *\n * @param {string} url\n * @param {Query} query?\n * @param query\n * @hidden\n */\n CacheAdaptor.prototype.generateKey = function (url, query) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var key = url;\n var page = 'onPage';\n if (page in singles) {\n key += singles[page].pageIndex;\n }\n queries.sorts.forEach(function (obj) {\n key += obj.e.direction + obj.e.fieldName;\n });\n queries.groups.forEach(function (obj) {\n key += obj.e.fieldName;\n });\n queries.searches.forEach(function (obj) {\n key += obj.e.searchKey;\n });\n for (var filter = 0; filter < queries.filters.length; filter++) {\n var currentFilter = queries.filters[filter];\n if (currentFilter.e.isComplex) {\n var newQuery = query.clone();\n newQuery.queries = [];\n for (var i = 0; i < currentFilter.e.predicates.length; i++) {\n newQuery.queries.push({ fn: 'onWhere', e: currentFilter.e.predicates[i], filter: query.queries.filter });\n }\n key += currentFilter.e.condition + this.generateKey(url, newQuery);\n }\n else {\n key += currentFilter.e.field + currentFilter.e.operator + currentFilter.e.value;\n }\n }\n return key;\n };\n /**\n * Process the query to generate request body.\n * If the data is already cached, it will return the cached data.\n *\n * @param {DataManager} dm\n * @param {Query} query?\n * @param {Object[]} hierarchyFilters?\n * @param query\n * @param hierarchyFilters\n */\n CacheAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var key = this.generateKey(dm.dataSource.url, query);\n var cachedItems = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var data = cachedItems ? cachedItems.results[cachedItems.keys.indexOf(key)] : null;\n if (data != null && !this.isCrudAction && !this.isInsertAction) {\n return data;\n }\n this.isCrudAction = null;\n this.isInsertAction = null;\n /* eslint-disable prefer-spread */\n return this.cacheAdaptor.processQuery.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n /* eslint-enable prefer-spread */\n };\n /**\n * Returns the data from the query processing.\n * It will also cache the data for later usage.\n *\n * @param {DataResult} data\n * @param {DataManager} ds?\n * @param {Query} query?\n * @param {Request} xhr?\n * @param {Fetch} request?\n * @param {CrudOptions} changes?\n * @param ds\n * @param query\n * @param xhr\n * @param request\n * @param changes\n */\n CacheAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n if (this.isInsertAction || (request && this.cacheAdaptor.options.batch &&\n DataUtil.endsWith(request.url, this.cacheAdaptor.options.batch) && request.type.toLowerCase() === 'post')) {\n return this.cacheAdaptor.processResponse(data, ds, query, xhr, request, changes);\n }\n /* eslint-disable prefer-spread */\n data = this.cacheAdaptor.processResponse.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n /* eslint-enable prefer-spread */\n var key = query ? this.generateKey(ds.dataSource.url, query) : ds.dataSource.url;\n var obj = {};\n obj = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var index = obj.keys.indexOf(key);\n if (index !== -1) {\n obj.results.splice(index, 1);\n obj.keys.splice(index, 1);\n }\n obj.results[obj.keys.push(key) - 1] = { keys: key, result: data.result, timeStamp: new Date(), count: data.count };\n while (obj.results.length > this.pageSize) {\n obj.results.splice(0, 1);\n obj.keys.splice(0, 1);\n }\n window.localStorage.setItem(this.guidId, JSON.stringify(obj));\n return data;\n };\n /**\n * Method will trigger before send the request to server side. Used to set the custom header or modify the request options.\n *\n * @param {DataManager} dm\n * @param {Request} request\n * @param {Fetch} settings?\n * @param settings\n */\n CacheAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (!isNullOrUndefined(this.cacheAdaptor.options.batch) && DataUtil.endsWith(settings.url, this.cacheAdaptor.options.batch)\n && settings.type.toLowerCase() === 'post') {\n request.headers.set('Accept', this.cacheAdaptor.options.multipartAccept);\n }\n if (!dm.dataSource.crossDomain) {\n request.headers.set('Accept', this.cacheAdaptor.options.accept);\n }\n };\n /**\n * Updates existing record and saves the changes to the table.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n */\n CacheAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.update(dm, keyField, value, tableName);\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n *\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n * @param tableName\n */\n CacheAdaptor.prototype.insert = function (dm, data, tableName) {\n this.isInsertAction = true;\n return this.cacheAdaptor.insert(dm, data, tableName);\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n *\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @param tableName\n */\n CacheAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.remove(dm, keyField, value, tableName);\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n *\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n CacheAdaptor.prototype.batchRequest = function (dm, changes, e) {\n return this.cacheAdaptor.batchRequest(dm, changes, e);\n };\n return CacheAdaptor;\n}(UrlAdaptor));\n\n/* eslint-disable valid-jsdoc */\n/**\n * DataManager is used to manage and manipulate relational data.\n */\nvar DataManager = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for DataManager class\n *\n * @param {DataOptions|JSON[]} dataSource?\n * @param {Query} query?\n * @param {AdaptorOptions|string} adaptor?\n * @param dataSource\n * @param query\n * @param adaptor\n * @hidden\n */\n function DataManager(dataSource, query, adaptor) {\n var _this = this;\n /** @hidden */\n this.dateParse = true;\n /** @hidden */\n this.timeZoneHandling = true;\n this.persistQuery = {};\n this.isInitialLoad = false;\n this.requests = [];\n this.isInitialLoad = true;\n if (!dataSource && !this.dataSource) {\n dataSource = [];\n }\n adaptor = adaptor || dataSource.adaptor;\n if (dataSource && dataSource.timeZoneHandling === false) {\n this.timeZoneHandling = dataSource.timeZoneHandling;\n }\n var data;\n if (dataSource instanceof Array) {\n data = {\n json: dataSource,\n offline: true\n };\n }\n else if (typeof dataSource === 'object') {\n if (!dataSource.json) {\n dataSource.json = [];\n }\n if (!dataSource.enablePersistence) {\n dataSource.enablePersistence = false;\n }\n if (!dataSource.id) {\n dataSource.id = '';\n }\n if (!dataSource.ignoreOnPersist) {\n dataSource.ignoreOnPersist = [];\n }\n data = {\n url: dataSource.url,\n insertUrl: dataSource.insertUrl,\n removeUrl: dataSource.removeUrl,\n updateUrl: dataSource.updateUrl,\n crudUrl: dataSource.crudUrl,\n batchUrl: dataSource.batchUrl,\n json: dataSource.json,\n headers: dataSource.headers,\n accept: dataSource.accept,\n data: dataSource.data,\n timeTillExpiration: dataSource.timeTillExpiration,\n cachingPageSize: dataSource.cachingPageSize,\n enableCaching: dataSource.enableCaching,\n requestType: dataSource.requestType,\n key: dataSource.key,\n crossDomain: dataSource.crossDomain,\n jsonp: dataSource.jsonp,\n dataType: dataSource.dataType,\n offline: dataSource.offline !== undefined ? dataSource.offline\n : dataSource.adaptor instanceof RemoteSaveAdaptor || dataSource.adaptor instanceof CustomDataAdaptor ?\n false : dataSource.url ? false : true,\n requiresFormat: dataSource.requiresFormat,\n enablePersistence: dataSource.enablePersistence,\n id: dataSource.id,\n ignoreOnPersist: dataSource.ignoreOnPersist\n };\n }\n else {\n DataUtil.throwError('DataManager: Invalid arguments');\n }\n if (data.requiresFormat === undefined && !DataUtil.isCors()) {\n data.requiresFormat = isNullOrUndefined(data.crossDomain) ? true : data.crossDomain;\n }\n if (data.dataType === undefined) {\n data.dataType = 'json';\n }\n this.dataSource = data;\n this.defaultQuery = query;\n if (this.dataSource.enablePersistence && this.dataSource.id) {\n window.addEventListener('unload', this.setPersistData.bind(this));\n }\n if (data.url && data.offline && !data.json.length) {\n this.isDataAvailable = false;\n this.adaptor = adaptor || new ODataAdaptor();\n this.dataSource.offline = false;\n this.ready = this.executeQuery(query || new Query());\n this.ready.then(function (e) {\n _this.dataSource.offline = true;\n _this.isDataAvailable = true;\n data.json = e.result;\n _this.adaptor = new JsonAdaptor();\n });\n }\n else {\n this.adaptor = data.offline ? new JsonAdaptor() : new ODataAdaptor();\n }\n if (!data.jsonp && this.adaptor instanceof ODataAdaptor) {\n data.jsonp = 'callback';\n }\n this.adaptor = adaptor || this.adaptor;\n if (data.enableCaching) {\n this.adaptor = new CacheAdaptor(this.adaptor, data.timeTillExpiration, data.cachingPageSize);\n }\n return this;\n }\n Object.defineProperty(DataManager.prototype, \"moduleName\", {\n /** @hidden */\n get: function () { return 'datamanager'; },\n enumerable: true,\n configurable: true\n });\n /**\n * Get the queries maintained in the persisted state.\n * @param {string} id - The identifier of the persisted query to retrieve.\n * @returns {object} The persisted data object.\n */\n DataManager.prototype.getPersistedData = function (id) {\n var persistedData = localStorage.getItem(id || this.dataSource.id);\n return JSON.parse(persistedData);\n };\n /**\n * Set the queries to be maintained in the persisted state.\n * @param {Event} e - The event parameter that triggers the setPersistData method.\n * @param {string} id - The identifier of the persisted query to set.\n * @param {object} persistData - The data to be persisted.\n * @returns {void} .\n */\n DataManager.prototype.setPersistData = function (e, id, persistData) {\n localStorage.setItem(id || this.dataSource.id, JSON.stringify(persistData || this.persistQuery));\n };\n DataManager.prototype.setPersistQuery = function (query) {\n var _this = this;\n var persistedQuery = this.getPersistedData();\n if (this.isInitialLoad && persistedQuery && Object.keys(persistedQuery).length) {\n this.persistQuery = persistedQuery;\n this.persistQuery.queries = this.persistQuery.queries.filter(function (query) {\n if (_this.dataSource.ignoreOnPersist && _this.dataSource.ignoreOnPersist.length) {\n if (query.fn && _this.dataSource.ignoreOnPersist.some(function (keyword) { return query.fn === keyword; })) {\n return false; // Exclude the matching query\n }\n }\n if (query.fn === 'onWhere') {\n var e = query.e;\n if (e && e.isComplex && e.predicates instanceof Array) {\n var allPredicates = e.predicates.map(function (predicateObj) {\n if (predicateObj.predicates && predicateObj.predicates instanceof Array) {\n // Process nested predicate array\n var nestedPredicates = predicateObj.predicates.map(function (nestedPredicate) {\n var field = nestedPredicate.field, operator = nestedPredicate.operator, value = nestedPredicate.value, ignoreCase = nestedPredicate.ignoreCase, ignoreAccent = nestedPredicate.ignoreAccent, matchCase = nestedPredicate.matchCase;\n return new Predicate(field, operator, value, ignoreCase, ignoreAccent, matchCase);\n });\n return predicateObj.condition === 'and' ? Predicate.and(nestedPredicates) : Predicate.or(nestedPredicates);\n }\n else {\n // Process individual predicate\n var field = predicateObj.field, operator = predicateObj.operator, value = predicateObj.value, ignoreCase = predicateObj.ignoreCase, ignoreAccent = predicateObj.ignoreAccent, matchCase = predicateObj.matchCase;\n return new Predicate(field, operator, value, ignoreCase, ignoreAccent, matchCase);\n }\n });\n query.e = new Predicate(allPredicates[0], e.condition, allPredicates.slice(1));\n }\n }\n return true; // Keep all other queries\n });\n var newQuery = extend(new Query(), this.persistQuery);\n this.isInitialLoad = false;\n return (newQuery);\n }\n else {\n this.persistQuery = query;\n this.isInitialLoad = false;\n return query;\n }\n };\n /**\n * Overrides DataManager's default query with given query.\n *\n * @param {Query} query - Defines the new default query.\n */\n DataManager.prototype.setDefaultQuery = function (query) {\n this.defaultQuery = query;\n return this;\n };\n /**\n * Executes the given query with local data source.\n *\n * @param {Query} query - Defines the query to retrieve data.\n */\n DataManager.prototype.executeLocal = function (query) {\n if (!this.defaultQuery && !(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeLocal() : A query is required to execute');\n }\n if (!this.dataSource.json) {\n DataUtil.throwError('DataManager - executeLocal() : Json data is required to execute');\n }\n if (this.dataSource.enablePersistence && this.dataSource.id) {\n query = this.setPersistQuery(query);\n }\n query = query || this.defaultQuery;\n var result = this.adaptor.processQuery(this, query);\n if (query.subQuery) {\n var from = query.subQuery.fromTable;\n var lookup = query.subQuery.lookups;\n var res = query.isCountRequired ? result.result :\n result;\n if (lookup && lookup instanceof Array) {\n DataUtil.buildHierarchy(query.subQuery.fKey, from, res, lookup, query.subQuery.key);\n }\n for (var j = 0; j < res.length; j++) {\n if (res[j][from] instanceof Array) {\n res[j] = extend({}, {}, res[j]);\n res[j][from] = this.adaptor.processResponse(query.subQuery.using(new DataManager(res[j][from].slice(0))).executeLocal(), this, query);\n }\n }\n }\n return this.adaptor.processResponse(result, this, query);\n };\n /**\n * Executes the given query with either local or remote data source.\n * It will be executed as asynchronously and returns Promise object which will be resolved or rejected after action completed.\n *\n * @param {Query|Function} query - Defines the query to retrieve data.\n * @param {Function} done - Defines the callback function and triggers when the Promise is resolved.\n * @param {Function} fail - Defines the callback function and triggers when the Promise is rejected.\n * @param {Function} always - Defines the callback function and triggers when the Promise is resolved or rejected.\n */\n DataManager.prototype.executeQuery = function (query, done, fail, always) {\n var _this = this;\n var makeRequest = 'makeRequest';\n if (this.dataSource.enablePersistence && this.dataSource.id) {\n query = this.setPersistQuery(query);\n }\n if (typeof query === 'function') {\n always = fail;\n fail = done;\n done = query;\n query = null;\n }\n if (!query) {\n query = this.defaultQuery;\n }\n if (!(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeQuery() : A query is required to execute');\n }\n var deffered = new Deferred();\n var args = { query: query };\n if (!this.dataSource.offline && (this.dataSource.url !== undefined && this.dataSource.url !== '')\n || (!isNullOrUndefined(this.adaptor[makeRequest])) || this.isCustomDataAdaptor(this.adaptor)) {\n var result = this.adaptor.processQuery(this, query);\n if (!isNullOrUndefined(this.adaptor[makeRequest])) {\n this.adaptor[makeRequest](result, deffered, args, query);\n }\n else if (!isNullOrUndefined(result.url) || this.isCustomDataAdaptor(this.adaptor)) {\n this.requests = [];\n this.makeRequest(result, deffered, args, query);\n }\n else {\n args = DataManager.getDeferedArgs(query, result, args);\n deffered.resolve(args);\n }\n }\n else {\n DataManager.nextTick(function () {\n var res = _this.executeLocal(query);\n args = DataManager.getDeferedArgs(query, res, args);\n deffered.resolve(args);\n });\n }\n if (done || fail) {\n deffered.promise.then(done, fail);\n }\n if (always) {\n deffered.promise.then(always, always);\n }\n return deffered.promise;\n };\n DataManager.getDeferedArgs = function (query, result, args) {\n if (query.isCountRequired) {\n args.result = result.result;\n args.count = result.count;\n args.aggregates = result.aggregates;\n }\n else {\n args.result = result;\n }\n return args;\n };\n DataManager.nextTick = function (fn) {\n /* eslint-disable @typescript-eslint/no-explicit-any */\n // tslint:disable-next-line:no-any\n (window.setImmediate || window.setTimeout)(fn, 0);\n /* eslint-enable @typescript-eslint/no-explicit-any */\n };\n DataManager.prototype.extendRequest = function (url, fnSuccess, fnFail) {\n return extend({}, {\n type: 'GET',\n dataType: this.dataSource.dataType,\n crossDomain: this.dataSource.crossDomain,\n jsonp: this.dataSource.jsonp,\n cache: true,\n processData: false,\n onSuccess: fnSuccess,\n onFailure: fnFail\n }, url);\n };\n // tslint:disable-next-line:max-func-body-length\n DataManager.prototype.makeRequest = function (url, deffered, args, query) {\n var _this = this;\n var isSelector = !!query.subQuerySelector;\n var fnFail = function (e) {\n args.error = e;\n deffered.reject(args);\n };\n var process = function (data, count, xhr, request, actual, aggregates, virtualSelectRecords) {\n args.xhr = xhr;\n args.count = count ? parseInt(count.toString(), 10) : 0;\n args.result = data;\n args.request = request;\n args.aggregates = aggregates;\n args.actual = actual;\n args.virtualSelectRecords = virtualSelectRecords;\n deffered.resolve(args);\n };\n var fnQueryChild = function (data, selector) {\n var subDeffer = new Deferred();\n var childArgs = { parent: args };\n query.subQuery.isChild = true;\n var subUrl = _this.adaptor.processQuery(_this, query.subQuery, data ? _this.adaptor.processResponse(data) : selector);\n var childReq = _this.makeRequest(subUrl, subDeffer, childArgs, query.subQuery);\n if (!isSelector) {\n subDeffer.then(function (subData) {\n if (data) {\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, data, subData, query.subQuery.key);\n process(data, subData.count, subData.xhr);\n }\n }, fnFail);\n }\n return childReq;\n };\n var fnSuccess = function (data, request) {\n if (_this.isGraphQLAdaptor(_this.adaptor)) {\n // tslint:disable-next-line:no-string-literal\n if (!isNullOrUndefined(data['errors'])) {\n // tslint:disable-next-line:no-string-literal\n return fnFail(data['errors']);\n }\n }\n if (_this.isCustomDataAdaptor(_this.adaptor)) {\n request = extend({}, _this.fetchReqOption, request);\n }\n if (request.contentType.indexOf('xml') === -1 && _this.dateParse) {\n data = DataUtil.parse.parseJson(data);\n }\n var result = _this.adaptor.processResponse(data, _this, query, request.fetchRequest, request);\n var count = 0;\n var aggregates = null;\n var virtualSelectRecords = 'virtualSelectRecords';\n var virtualRecords = data[virtualSelectRecords];\n if (query.isCountRequired) {\n count = result.count;\n aggregates = result.aggregates;\n result = result.result;\n }\n if (!query.subQuery) {\n process(result, count, request.fetchRequest, request.type, data, aggregates, virtualRecords);\n return;\n }\n if (!isSelector) {\n fnQueryChild(result, request);\n }\n };\n var req = this.extendRequest(url, fnSuccess, fnFail);\n if (!this.isCustomDataAdaptor(this.adaptor)) {\n var fetch_1 = new Fetch(req);\n fetch_1.beforeSend = function () {\n _this.beforeSend(fetch_1.fetchRequest, fetch_1);\n };\n req = fetch_1.send();\n req.catch(function (e) { return true; }); // to handle failure remote requests.\n this.requests.push(fetch_1);\n }\n else {\n this.fetchReqOption = req;\n var request = req;\n this.adaptor.options.getData({\n data: request.data,\n onSuccess: request.onSuccess, onFailure: request.onFailure\n });\n }\n if (isSelector) {\n var promise = void 0;\n var res = query.subQuerySelector.call(this, { query: query.subQuery, parent: query });\n if (res && res.length) {\n promise = Promise.all([req, fnQueryChild(null, res)]);\n promise.then(function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var result = args[0];\n var pResult = _this.adaptor.processResponse(result[0], _this, query, _this.requests[0].fetchRequest, _this.requests[0]);\n var count = 0;\n if (query.isCountRequired) {\n count = pResult.count;\n pResult = pResult.result;\n }\n var cResult = _this.adaptor.processResponse(result[1], _this, query.subQuery, _this.requests[1].fetchRequest, _this.requests[1]);\n count = 0;\n if (query.subQuery.isCountRequired) {\n count = cResult.count;\n cResult = cResult.result;\n }\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, pResult, cResult, query.subQuery.key);\n isSelector = false;\n process(pResult, count, _this.requests[0].fetchRequest);\n });\n }\n else {\n isSelector = false;\n }\n }\n return req;\n };\n DataManager.prototype.beforeSend = function (request, settings) {\n this.adaptor.beforeSend(this, request, settings);\n var headers = this.dataSource.headers;\n var props;\n for (var i = 0; headers && i < headers.length; i++) {\n props = [];\n var keys = Object.keys(headers[i]);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n props.push(prop);\n request.headers.set(prop, headers[i][prop]);\n }\n }\n };\n /**\n * Save bulk changes to the given table name.\n * User can add a new record, edit an existing record, and delete a record at the same time.\n * If the datasource from remote, then updated in a single post.\n *\n * @param {Object} changes - Defines the CrudOptions.\n * @param {string} key - Defines the column field.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n * @param original\n */\n DataManager.prototype.saveChanges = function (changes, key, tableName, query, original) {\n var _this = this;\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var args = {\n url: tableName,\n key: key || this.dataSource.key\n };\n var req = this.adaptor.batchRequest(this, changes, args, query || new Query(), original);\n var dofetchRequest = 'dofetchRequest';\n if (this.dataSource.offline) {\n return req;\n }\n if (!isNullOrUndefined(this.adaptor[dofetchRequest])) {\n return this.adaptor[dofetchRequest](req);\n }\n else if (!this.isCustomDataAdaptor(this.adaptor)) {\n var deff_1 = new Deferred();\n var fetch_2 = new Fetch(req);\n fetch_2.beforeSend = function () {\n _this.beforeSend(fetch_2.fetchRequest, fetch_2);\n };\n fetch_2.onSuccess = function (data, request) {\n if (_this.isGraphQLAdaptor(_this.adaptor)) {\n // tslint:disable-next-line:no-string-literal\n if (!isNullOrUndefined(data['errors'])) {\n // tslint:disable-next-line:no-string-literal\n fetch_2.onFailure(JSON.stringify(data['errors']));\n }\n }\n deff_1.resolve(_this.adaptor.processResponse(data, _this, null, request.fetchRequest, request, changes, args));\n };\n fetch_2.onFailure = function (e) {\n deff_1.reject([{ error: e }]);\n };\n fetch_2.send().catch(function (e) { return true; }); // to handle the failure requests.\n return deff_1.promise;\n }\n else {\n return this.dofetchRequest(req, this.adaptor.options.batchUpdate, changes);\n }\n };\n /**\n * Inserts new record in the given table.\n *\n * @param {Object} data - Defines the data to insert.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n * @param position\n */\n DataManager.prototype.insert = function (data, tableName, query, position) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var req = this.adaptor.insert(this, data, tableName, query, position);\n var dofetchRequest = 'dofetchRequest';\n if (this.dataSource.offline) {\n return req;\n }\n if (!isNullOrUndefined(this.adaptor[dofetchRequest])) {\n return this.adaptor[dofetchRequest](req);\n }\n else {\n return this.dofetchRequest(req, this.adaptor.options.addRecord);\n }\n };\n /**\n * Removes data from the table with the given key.\n *\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.remove = function (keyField, value, tableName, query) {\n if (typeof value === 'object') {\n value = DataUtil.getObject(keyField, value);\n }\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.remove(this, keyField, value, tableName, query);\n var dofetchRequest = 'dofetchRequest';\n if (this.dataSource.offline) {\n return res;\n }\n if (!isNullOrUndefined(this.adaptor[dofetchRequest])) {\n return this.adaptor[dofetchRequest](res);\n }\n else {\n var remove = this.adaptor.options.deleteRecord;\n return this.dofetchRequest(res, remove);\n }\n };\n /**\n * Updates existing record in the given table.\n *\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n * @param original\n */\n DataManager.prototype.update = function (keyField, value, tableName, query, original) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.update(this, keyField, value, tableName, query, original);\n var dofetchRequest = 'dofetchRequest';\n if (this.dataSource.offline) {\n return res;\n }\n if (!isNullOrUndefined(this.adaptor[dofetchRequest])) {\n return this.adaptor[dofetchRequest](res);\n }\n else {\n var update = this.adaptor.options.updateRecord;\n return this.dofetchRequest(res, update);\n }\n };\n DataManager.prototype.isCustomDataAdaptor = function (dataSource) {\n return this.adaptor.getModuleName &&\n this.adaptor.getModuleName() === 'CustomDataAdaptor';\n };\n DataManager.prototype.isGraphQLAdaptor = function (dataSource) {\n return this.adaptor.getModuleName &&\n this.adaptor.getModuleName() === 'GraphQLAdaptor';\n };\n DataManager.prototype.successFunc = function (record, request, changes) {\n if (this.isGraphQLAdaptor(this.adaptor)) {\n var data = typeof record === 'object' ? record : JSON.parse(record);\n // tslint:disable-next-line:no-string-literal\n if (!isNullOrUndefined(data['errors'])) {\n // tslint:disable-next-line:no-string-literal\n this.failureFunc(JSON.stringify(data['errors']));\n }\n }\n if (this.isCustomDataAdaptor(this.adaptor)) {\n request = extend({}, this.fetchReqOption, request);\n }\n try {\n DataUtil.parse.parseJson(record);\n }\n catch (e) {\n record = [];\n }\n record = this.adaptor.processResponse(DataUtil.parse.parseJson(record), this, null, request.fetchRequest, request, changes);\n this.fetchDeffered.resolve(record);\n };\n DataManager.prototype.failureFunc = function (e) {\n this.fetchDeffered.reject([{ error: e }]);\n };\n DataManager.prototype.dofetchRequest = function (res, fetchFunc, changes) {\n var _this = this;\n res = extend({}, {\n type: 'POST',\n contentType: 'application/json; charset=utf-8',\n processData: false\n }, res);\n this.fetchDeffered = new Deferred();\n if (!this.isCustomDataAdaptor(this.adaptor)) {\n var fetch_3 = new Fetch(res);\n fetch_3.beforeSend = function () {\n _this.beforeSend(fetch_3.fetchRequest, fetch_3);\n };\n fetch_3.onSuccess = this.successFunc.bind(this);\n fetch_3.onFailure = this.failureFunc.bind(this);\n fetch_3.send().catch(function (e) { return true; }); // to handle the failure requests.\n }\n else {\n this.fetchReqOption = res;\n fetchFunc.call(this, {\n data: res.data, onSuccess: this.successFunc.bind(this),\n onFailure: this.failureFunc.bind(this),\n changes: changes\n });\n }\n return this.fetchDeffered.promise;\n };\n DataManager.prototype.clearPersistence = function () {\n window.removeEventListener('unload', this.setPersistData.bind(this));\n this.dataSource.enablePersistence = false;\n this.persistQuery = {};\n window.localStorage.setItem(this.dataSource.id, '[]');\n };\n return DataManager;\n}());\n/**\n * Deferred is used to handle asynchronous operation.\n */\nvar Deferred = /** @__PURE__ @class */ (function () {\n function Deferred() {\n var _this = this;\n /**\n * Promise is an object that represents a value that may not be available yet, but will be resolved at some point in the future.\n */\n this.promise = new Promise(function (resolve, reject) {\n _this.resolve = resolve;\n _this.reject = reject;\n });\n /**\n * Defines the callback function triggers when the Deferred object is resolved.\n */\n this.then = this.promise.then.bind(this.promise);\n /**\n * Defines the callback function triggers when the Deferred object is rejected.\n */\n this.catch = this.promise.catch.bind(this.promise);\n }\n return Deferred;\n}());\n\nexport { Adaptor, CacheAdaptor, CustomDataAdaptor, DataManager, DataUtil, Deferred, GraphQLAdaptor, JsonAdaptor, ODataAdaptor, ODataV4Adaptor, Predicate, Query, RemoteSaveAdaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor };\n","import { Property, ChildProperty, Collection, ComplexFactory, initializeCSPTemplate, Complex, isBlazor, compile, CollectionFactory, Component, Browser, EventHandler, Event, isNullOrUndefined, createElement, getValue, remove, L10n, Fetch, Droppable, Draggable } from '@syncfusion/ej2-base';\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { ContextMenu, Accordion } from '@syncfusion/ej2-navigations';\n\n/**\n * Size defines and processes the size(width/height) of the objects\n */\nvar Size = /** @__PURE__ @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n /**\n * isEmpty method \\\n *\n * @returns { boolean } isEmpty method .\\\n *\n * @private\n */\n Size.prototype.isEmpty = function () {\n return this.height === 0 && this.width === 0;\n };\n // public static get empty(): Size {\n // return new Size();\n // }\n // public get isEmpty(): boolean {\n // return this.equals(Size.empty);\n // }\n // public equals(size2: Size): boolean {\n // return this.width === size2.width && this.height === size2.height;\n // }\n // public union(size: Size): void {\n // size.width = Math.max(size.width, this.width);\n // size.height = Math.max(size.height, this.height);\n // }\n /**\n * clone method \\\n *\n * @returns { Size } clone method .\\\n *\n * @private\n */\n Size.prototype.clone = function () {\n return new Size(this.width, this.height);\n };\n return Size;\n}());\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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/**\n * Defines and processes coordinates\n */\nvar Point = /** @__PURE__ @class */ (function (_super) {\n __extends(Point, _super);\n function Point() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * equals method \\\n *\n * @returns { boolean } equals method .\\\n * @param {PointModel} point1 - provide the point1 value.\n * @param {PointModel} point2 - provide the point1 value.\n *\n * @private\n */\n Point.equals = function (point1, point2) {\n if (point1 === point2) {\n return true;\n }\n if (!point1 || !point2) {\n return false;\n }\n return !point1 || !point2 || point1.x === point2.x && point1.y === point2.y;\n };\n /**\n * isEmptyPoint method \\\n *\n * @returns { boolean } isEmptyPoint method .\\\n * @param {PointModel} point - provide the points value.\n *\n * @private\n */\n Point.isEmptyPoint = function (point) {\n if (point.x && point.y) {\n return false;\n }\n return true;\n };\n // public add(point1: PointModel, point2: PointModel): PointModel {\n // return { x: point1.x + point2.x, y: point1.y + point2.y };\n // }\n // public subtract(point1: PointModel, point2: PointModel): PointModel {\n // return { x: point1.x - point2.x, y: point1.y - point2.y };\n // }\n // public multiply(point1: PointModel, point2: PointModel): PointModel {\n // return {\n // x: point1.x * point2.x, y: point1.y * point2.y\n // };\n // }\n // public crossProduct(point1: PointModel, point2: PointModel): PointModel {\n // return {\n // x: point1.x * point2.y, y: point2.x * point1.y\n // };\n // }\n // public offset(offsetX: number, offsetY: number): void {\n // this.x += offsetX;\n // this.y += offsetY;\n // }\n // public rotate(angle: number): PointModel {\n // let c: number = Math.cos(angle);\n // let s: number = Math.sin(angle);\n // return {\n // x: c * this.x - s * this.y, y: s * this.x + c * this.y\n // };\n // }\n // public distance(point2: PointModel): number {\n // return Math.sqrt(Math.pow(this.x - point2.x, 2) + Math.pow(this.y - point2.y, 2));\n // }\n /**\n * transform method \\\n *\n * @returns { PointModel } transform method .\\\n * @param {PointModel} point - provide the points value.\n * @param {number} angle - provide the points value.\n * @param {number} length - provide the points value.\n *\n * @private\n */\n Point.transform = function (point, angle, length) {\n var pt = { x: 0, y: 0 };\n pt.x = Math.round((point.x + length * Math.cos(angle * Math.PI / 180)) * 100) / 100;\n pt.y = Math.round((point.y + length * Math.sin(angle * Math.PI / 180)) * 100) / 100;\n return pt;\n };\n /**\n * findLength method \\\n *\n * @returns { number } findLength method .\\\n * @param {PointModel} s - provide the points value.\n * @param {PointModel} e - provide the points value.\n *\n * @private\n */\n Point.findLength = function (s, e) {\n var length = Math.sqrt(Math.pow((s.x - e.x), 2) + Math.pow((s.y - e.y), 2));\n return length;\n };\n /**\n * findAngle method \\\n *\n * @returns { number } findAngle method .\\\n * @param {PointModel} point1 - provide the points value.\n * @param {PointModel} point2 - provide the points value.\n *\n * @private\n */\n Point.findAngle = function (point1, point2) {\n var angle = Math.atan2(point2.y - point1.y, point2.x - point1.x);\n angle = (180 * angle / Math.PI);\n angle %= 360;\n if (angle < 0) {\n angle += 360;\n }\n return angle;\n };\n /**\n * distancePoints method \\\n *\n * @returns { number } distancePoints method .\\\n * @param {PointModel} pt1 - provide the points value.\n * @param {PointModel} pt2 - provide the points value.\n *\n * @private\n */\n Point.distancePoints = function (pt1, pt2) {\n return Math.sqrt(Math.pow(pt2.x - pt1.x, 2) + Math.pow(pt2.y - pt1.y, 2));\n };\n /**\n * getLengthFromListOfPoints method \\\n *\n * @returns { number } getLengthFromListOfPoints method .\\\n * @param {PointModel[]} points - provide the points value.\n *\n * @private\n */\n Point.getLengthFromListOfPoints = function (points) {\n var length = 0;\n for (var j = 0; j < points.length - 1; j++) {\n length += this.distancePoints(points[parseInt(j.toString(), 10)], points[j + 1]);\n }\n return length;\n };\n /**\n * adjustPoint method \\\n *\n * @returns { PointModel } adjustPoint method .\\\n * @param {PointModel} source - provide the points value.\n * @param {PointModel} target - provide the points value.\n * @param {boolean} isStart - provide the isStart value.\n * @param {number} length - provide the length value.\n *\n * @private\n */\n Point.adjustPoint = function (source, target, isStart, length) {\n var pt = isStart ? { x: source.x, y: source.y } : { x: target.x, y: target.y };\n var angle;\n if (source.x === target.x) {\n if (source.y < target.y && isStart || source.y > target.y && !isStart) {\n pt.y += length;\n }\n else {\n pt.y -= length;\n }\n }\n else if (source.y === target.y) {\n if (source.x < target.x && isStart || source.x > target.x && !isStart) {\n pt.x += length;\n }\n else {\n pt.x -= length;\n }\n }\n else {\n if (isStart) {\n angle = this.findAngle(source, target);\n pt = this.transform(source, angle, length);\n }\n else {\n angle = this.findAngle(target, source);\n pt = this.transform(target, angle, length);\n }\n }\n return pt;\n };\n /**\n * direction method \\\n *\n * @returns { string } direction method .\\\n * @param {PointModel} pt1 - provide the points value.\n * @param {PointModel} pt2 - provide the points value.\n *\n * @private\n */\n Point.direction = function (pt1, pt2) {\n if (Math.abs(pt2.x - pt1.x) > Math.abs(pt2.y - pt1.y)) {\n return pt1.x < pt2.x ? 'Right' : 'Left';\n }\n else {\n return pt1.y < pt2.y ? 'Bottom' : 'Top';\n }\n };\n //Move these methods to util\n //public CompareTo(point: PointModel): number {\n // let result: number = this.X.CompareTo(point.X);\n // return result != 0 ? result : this.Y.CompareTo(point.Y);\n //}\n //public CompareOnYAxis(point: PointModel): number {\n // let result: number = this.X.CompareTo(point.X);\n // return result != 0 ? result : this.Y.CompareTo(point.Y);\n //}\n //public CompareOnXAxis(point: PointModel): number {\n // let result: number = this.Y.CompareTo(point.Y);\n // return result != 0 ? result : this.X.CompareTo(point.X);\n //}\n // public round(): void {\n // this.x = Math.round(this.x);\n // this.y = Math.round(this.y);\n // }\n /**\n * getClassName method \\\n *\n * @returns { string } getClassName method .\\\n *\n * @private\n */\n Point.prototype.getClassName = function () {\n return 'Point';\n };\n __decorate([\n Property(0)\n ], Point.prototype, \"x\", void 0);\n __decorate([\n Property(0)\n ], Point.prototype, \"y\", void 0);\n return Point;\n}(ChildProperty));\n\n/**\n * These utility methods help to process the data and to convert it to desired dimensions\n */\n/**\n * processPathData method \\\n *\n * @returns {Object[]} processPathData method .\\\n * @param { string } data - provide the data value.\n * @private\n */\nfunction processPathData(data) {\n var collection = [];\n var j;\n var arrayCollection = parsePathData(data);\n if (arrayCollection.length > 0) {\n for (var i = 0; i < arrayCollection.length; i++) {\n var ob = arrayCollection[parseInt(i.toString(), 10)];\n var char = '';\n char = ob[0];\n switch (char.toLowerCase()) {\n case 'm':\n for (j = 1; j < ob.length; j++) {\n collection.push({ command: char, x: ob[parseInt(j.toString(), 10)], y: ob[j + 1] });\n j = j + 1;\n if (char === 'm') {\n char = 'l';\n }\n else if (char === 'M') {\n char = 'L';\n }\n }\n break;\n case 'l':\n case 't':\n for (j = 1; j < ob.length; j++) {\n collection.push({ command: char, x: ob[parseInt(j.toString(), 10)], y: ob[j + 1] });\n j = j + 1;\n }\n break;\n case 'h':\n for (j = 1; j < ob.length; j++) {\n collection.push({ command: char, x: ob[parseInt(j.toString(), 10)] });\n }\n break;\n case 'v':\n for (j = 1; j < ob.length; j++) {\n collection.push({ command: char, y: ob[parseInt(j.toString(), 10)] });\n }\n break;\n case 'z':\n collection.push({ command: char });\n break;\n case 'c':\n for (j = 1; j < ob.length; j++) {\n collection.push({\n command: char, x1: ob[parseInt(j.toString(), 10)], y1: ob[j + 1], x2: ob[j + 2],\n y2: ob[j + 3], x: ob[j + 4], y: ob[j + 5]\n });\n j = j + 5;\n }\n break;\n case 's':\n for (j = 1; j < ob.length; j++) {\n collection.push({ command: char, x2: ob[parseInt(j.toString(), 10)], y2: ob[j + 1], x: ob[j + 2], y: ob[j + 3] });\n j = j + 3;\n }\n break;\n case 'q':\n for (j = 1; j < ob.length; j++) {\n collection.push({ command: char, x1: ob[parseInt(j.toString(), 10)], y1: ob[j + 1], x: ob[j + 2], y: ob[j + 3] });\n j = j + 3;\n }\n break;\n case 'a':\n for (j = 1; j < ob.length; j++) {\n collection.push({\n command: char, r1: ob[parseInt(j.toString(), 10)], r2: ob[j + 1], angle: ob[j + 2], largeArc: ob[j + 3],\n sweep: ob[j + 4], x: ob[j + 5], y: ob[j + 6]\n });\n j = j + 6;\n }\n break;\n }\n }\n }\n return collection;\n}\n/**\n * parsePathData method \\\n *\n * @returns {Object[]} parsePathData method .\\\n * @param { string } data - provide the data value.\n * @private\n */\nfunction parsePathData(data) {\n var tokenizer = /([a-z]+)|([+-]?(?:\\d+\\.?\\d*|\\.\\d+))/gi;\n var current = [];\n var commands = [];\n var match = {};\n tokenizer.lastIndex = 0;\n var isExponential = false;\n match = tokenizer.exec(data);\n while (match) {\n if (match[1] === 'e') {\n //let s1: string = '';\n isExponential = true;\n }\n else if (match[1]) {\n if (match[1].toLowerCase() === 'zm') {\n if (current.length) {\n commands.push(current);\n }\n commands.push(['Z']);\n current = [match[1].substring(1, 2)];\n }\n else {\n if (current.length) {\n commands.push(current);\n }\n current = [match[1]];\n }\n isExponential = false;\n }\n else {\n if (!current.length) {\n current = [];\n }\n if (!isExponential) {\n current.push(Number(match[2]));\n }\n isExponential = false;\n }\n match = tokenizer.exec(data);\n }\n if (current.length) {\n commands.push(current);\n }\n return commands;\n}\n/**\n * getRectanglePath method \\\n *\n * @returns {string} getRectanglePath method .\\\n * @param { number } cornerRadius - provide the data value.\n * @param { number } height - provide the height value.\n * @param { number } width - provide the width value.\n * @private\n */\nfunction getRectanglePath(cornerRadius, height, width) {\n var x = 0;\n var y = 0;\n var path = '';\n var points = [{ x: x + cornerRadius, y: y }, { x: x + width - cornerRadius, y: y },\n { x: x + width, y: y + cornerRadius }, { x: x + width, y: y + height - cornerRadius },\n { x: x + width - cornerRadius, y: y + height }, { x: x + cornerRadius, y: y + height },\n { x: x, y: y + height - cornerRadius }, { x: x, y: y + cornerRadius }\n ];\n var corners = [{ x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }, { x: x, y: y }];\n var corner = 0;\n var point2;\n var next;\n path = 'M' + points[0].x + ' ' + points[0].y;\n var i;\n for (i = 0; i < points.length; i = i + 2) {\n point2 = points[i + 1];\n path += 'L' + point2.x + ' ' + point2.y;\n next = points[i + 2] || points[0];\n path += 'Q' + corners[parseInt(corner.toString(), 10)].x + ' ' + corners[parseInt(corner.toString(), 10)].y + ' ' + next.x + ' ' + next.y;\n corner++;\n }\n return path;\n}\n/**\n * getPolygonPath method \\\n *\n * @returns {string} getPolygonPath method .\\\n * @param { PointModel[] } collection - provide the data value.\n * @private\n */\nfunction getPolygonPath(collection) {\n var path = '';\n var seg;\n path = 'M' + collection[0].x + ' ' + collection[0].y;\n var i;\n for (i = 1; i < collection.length; i++) {\n seg = collection[parseInt(i.toString(), 10)];\n path += 'L' + seg.x + ' ' + seg.y;\n }\n path += 'Z';\n return path;\n}\n/**\n * getFreeHandPath method \\\n *\n * @returns {string} getFreeHandPath method .\\\n * @param { PointModel[] } collection - provide the data value.\n * @private\n */\nfunction getFreeHandPath(collection) {\n var k;\n for (k = 0; k < collection.length; k++) {\n collection[parseInt(k.toString(), 10)].x = Math.round(collection[parseInt(k.toString(), 10)].x);\n collection[parseInt(k.toString(), 10)].y = Math.round(collection[parseInt(k.toString(), 10)].y);\n }\n var path = '';\n var seg;\n path = 'M' + collection[0].x + ' ' + collection[0].y;\n var i;\n for (i = 1; i < collection.length; i++) {\n seg = collection[parseInt(i.toString(), 10)];\n path += 'L' + seg.x + ' ' + seg.y;\n }\n return path;\n}\n/* eslint-disable */\n/**\n * pathSegmentCollection method \\\n *\n * @returns {string} pathSegmentCollection method .\\\n * @param { Object[]} collection - provide the collection value.\n * @private\n */\nfunction pathSegmentCollection(collection) {\n var x0;\n var y0;\n var x1;\n var y1;\n var x2;\n var y2;\n var x;\n var y;\n var length;\n var i;\n var segments = [];\n for (x = 0, y = 0, i = 0, length = collection.length; i < length; ++i) {\n var obj = collection[i];\n var seg = obj;\n var char = '';\n char = seg.command;\n if ('y1' in seg) {\n y1 = seg.y1;\n }\n if ('y2' in seg) {\n y2 = seg.y2;\n }\n if ('x1' in seg) {\n x1 = seg.x1;\n }\n if ('x2' in seg) {\n x2 = seg.x2;\n }\n if ('x' in seg) {\n x = seg.x;\n }\n if ('y' in seg) {\n y = seg.y;\n }\n var prev = segments[segments.length - 1];\n switch (char) {\n case 'M':\n segments.push({ command: 'M', x: x, y: y });\n break;\n case 'L':\n segments.push({ command: 'L', x0: x0, y0: y0, x: x, y: y });\n break;\n case 'H':\n segments.push({ command: 'L', x0: x0, y0: y0, x: x, y: y0 });\n break;\n case 'V':\n segments.push({ command: 'L', x0: x0, y0: y0, x: x0, y: y });\n break;\n case 'C':\n segments.push({ command: 'C', x0: x0, y0: y0, x1: x1, y1: y1, x2: x2, y2: y2, x: x, y: y });\n break;\n case 'S':\n if (prev) {\n var ctrl = void 0;\n if (prev.command === 'C' || prev.command === 'S') {\n ctrl = { x: prev.x2, y: prev.y2 };\n }\n else {\n ctrl = { x: x0, y: y0 };\n }\n var cpt2 = { x: 2 * x0 - ctrl.x, y: 2 * y0 - ctrl.y };\n segments.push({ command: 'C', x0: x0, y0: y0, x1: cpt2.x, y1: cpt2.y, x2: x2, y2: y2, x: x, y: y });\n }\n break;\n case 'Q':\n //ctx.quadraticCurveTo(x1, y1, x, y);\n segments.push({ command: 'Q', x0: x0, y0: y0, x1: x1, y1: y1, x: x, y: y });\n break;\n case 'T':\n if (prev) {\n var ctrl = void 0;\n if (prev.command === 'Q') {\n ctrl = { x: prev.x1, y: prev.y1 };\n }\n else {\n ctrl = { x: x0, y: y0 };\n }\n var cpt2 = { x: 2 * x0 - ctrl.x, y: 2 * y0 - ctrl.y };\n segments.push({ command: 'Q', x0: x0, y0: y0, x1: cpt2.x, y1: cpt2.y, x: x, y: y });\n }\n break;\n case 'A':\n var newSeg = seg;\n newSeg.command = 'A';\n segments.push(newSeg);\n break;\n case 'Z':\n case 'z':\n segments.push({ command: 'Z' });\n x = x0;\n y = y0;\n break;\n }\n x0 = x;\n y0 = y;\n }\n return segments;\n}\n/**\n * transformPath method \\\n *\n * @returns {string} transformPath method .\\\n * @param { Object[]} arr - provide the collection value.\n * @param { number} sX - provide the collection value.\n * @param { number} sY - provide the collection value.\n * @param { boolean} s - provide the collection value.\n * @param {number} bX - provide the collection value.\n * @param { number} bY - provide the collection value.\n * @param { number} iX - provide the collection value.\n * @param { number} iY - provide the collection value.\n * @private\n */\nfunction transformPath(arr, sX, sY, s, bX, bY, iX, iY) {\n var x1;\n var y1;\n var x2;\n var y2;\n var x;\n var y;\n var length;\n var i;\n var newSeg;\n for (x = 0, y = 0, i = 0, length = arr.length; i < length; ++i) {\n var obj = arr[i];\n var seg = obj;\n var char = seg.command;\n if ('x' in seg) {\n x = seg.x;\n }\n if ('y' in seg) {\n y = seg.y;\n }\n if ('y1' in seg) {\n y1 = seg.y1;\n }\n if ('y2' in seg) {\n y2 = seg.y2;\n }\n if ('x1' in seg) {\n x1 = seg.x1;\n }\n if ('x2' in seg) {\n x2 = seg.x2;\n }\n if (s) {\n if (x !== undefined) {\n x = scalePathData(x, sX, bX, iX);\n }\n if (y !== undefined) {\n y = scalePathData(y, sY, bY, iY);\n }\n if (x1 !== undefined) {\n x1 = scalePathData(x1, sX, bX, iX);\n }\n if (y1 !== undefined) {\n y1 = scalePathData(y1, sY, bY, iY);\n }\n if (x2 !== undefined) {\n x2 = scalePathData(x2, sX, bX, iX);\n }\n if (y2 !== undefined) {\n y2 = scalePathData(y2, sY, bY, iY);\n }\n }\n else {\n if (x !== undefined) {\n x = Number((x + sX).toFixed(2));\n }\n if (y !== undefined) {\n y = Number((y + sY).toFixed(2));\n }\n if (x1 !== undefined) {\n x1 = Number((x1 + sX).toFixed(2));\n }\n if (y1 !== undefined) {\n y1 = Number((y1 + sY).toFixed(2));\n }\n if (x2 !== undefined) {\n x2 = Number((x2 + sX).toFixed(2));\n }\n if (y2 !== undefined) {\n y2 = Number((y2 + sY).toFixed(2));\n }\n }\n var scaledPath = { x: x, y: y, x1: x1, y1: y1, x2: x2, y2: y2, r1: seg.r1, r2: seg.r2 };\n newSeg = updatedSegment(seg, char, scaledPath, s, sX, sY);\n if (newSeg) {\n arr[i] = newSeg;\n }\n }\n var pathData = getPathString(arr);\n return pathData;\n}\n/**\n * updatedSegment method \\\n *\n * @returns {string} updatedSegment method .\\\n * @param { PathSegment} segment - provide the collection value.\n * @param { PathSegment} char - provide the collection value.\n * @param { number} obj - provide the collection value.\n * @param { boolean} isScale - provide the collection value.\n * @param {number} sX - provide the collection value.\n * @param { number} sY - provide the collection value.\n * @private\n */\nfunction updatedSegment(segment, char, obj, isScale, sX, sY) {\n switch (char) {\n case 'M':\n segment.x = obj.x;\n segment.y = obj.y;\n break;\n case 'L':\n segment.x = obj.x;\n segment.y = obj.y;\n break;\n case 'H':\n segment.x = obj.x;\n break;\n case 'V':\n segment.y = obj.y;\n break;\n case 'C':\n segment.x = obj.x;\n segment.y = obj.y;\n segment.x1 = obj.x1;\n segment.y1 = obj.y1;\n segment.x2 = obj.x2;\n segment.y2 = obj.y2;\n break;\n case 'S':\n segment.x = obj.x;\n segment.y = obj.y;\n segment.x2 = obj.x2;\n segment.y2 = obj.y2;\n break;\n case 'Q':\n segment.x = obj.x;\n segment.y = obj.y;\n segment.x1 = obj.x1;\n segment.y1 = obj.y1;\n break;\n case 'T':\n segment.x = obj.x;\n segment.y = obj.y;\n break;\n case 'A':\n var r1 = obj.r1;\n var r2 = obj.r2;\n if (isScale) {\n obj.r1 = r1 = (r1 * sX);\n obj.r2 = r2 = (r2 * sY);\n }\n segment.x = obj.x;\n segment.y = obj.y;\n segment.r1 = obj.r1;\n segment.r2 = obj.r2;\n break;\n case 'z':\n case 'Z':\n segment = { command: 'Z' };\n break;\n }\n return segment;\n}\n/* eslint-enable */\n/**\n * scalePathData method \\\n *\n * @returns {string} scalePathData method .\\\n * @param { number} val - provide the val value.\n * @param { number} scaleFactor - provide the scaleFactor value.\n * @param { number} oldOffset - provide the oldOffset value.\n * @param { number} newOffset - provide the newOffset value.\n * @private\n */\nfunction scalePathData(val, scaleFactor, oldOffset, newOffset) {\n if (val !== oldOffset) {\n if (newOffset !== oldOffset) {\n val = (((val * scaleFactor) - (Number(oldOffset) * scaleFactor - Number(oldOffset)))\n + (newOffset - Number(oldOffset)));\n }\n else {\n val = ((Number(val) * scaleFactor) - (Number(oldOffset) * scaleFactor - Number(oldOffset)));\n }\n }\n else {\n if (newOffset !== oldOffset) {\n val = newOffset;\n }\n }\n return Number(val.toFixed(2));\n}\n/**\n * splitArrayCollection method \\\n *\n * @returns {Object[]} splitArrayCollection method .\\\n * @param { Object[]} arrayCollection - provide the val value.\n * @private\n */\nfunction splitArrayCollection(arrayCollection) {\n var x0;\n var y0;\n var x1;\n var y1;\n var x2;\n var y2;\n var x;\n var y;\n var length;\n var i;\n for (x = 0, y = 0, i = 0, length = arrayCollection.length; i < length; ++i) {\n var path = arrayCollection[parseInt(i.toString(), 10)];\n var seg = path;\n var char = seg.command;\n if (/[MLHVCSQTA]/.test(char)) {\n if ('x' in seg) {\n seg.x = x = seg.x;\n }\n if ('y' in seg) {\n seg.y = y = seg.y;\n }\n }\n else {\n if ('x1' in seg) {\n seg.x1 = x1 = x + seg.x1;\n }\n if ('x2' in seg) {\n seg.x2 = x2 = x + seg.x2;\n }\n if ('y1' in seg) {\n seg.y1 = y1 = y + seg.y1;\n }\n if ('y2' in seg) {\n seg.y2 = y2 = y + seg.y2;\n }\n if ('x' in seg) {\n seg.x = x += seg.x;\n }\n if ('y' in seg) {\n seg.y = y += seg.y;\n }\n var newSeg = void 0;\n switch (char) {\n case 'm':\n case 'M':\n newSeg = { command: 'M', x: x, y: y };\n break;\n case 'l':\n case 'L':\n newSeg = { command: 'L', x: x, y: y };\n break;\n case 'h':\n case 'H':\n newSeg = { command: 'H', x: x };\n break;\n case 'v':\n case 'V':\n newSeg = { command: 'V', y: y };\n break;\n case 'c':\n case 'C':\n newSeg = { command: 'C', x: x, y: y, x1: x1, y1: y1, x2: x2, y2: y2 };\n break;\n case 's':\n case 'S':\n newSeg = { command: 'S', x: x, y: y, x2: x2, y2: y2 };\n break;\n case 'q':\n case 'Q':\n newSeg = { command: 'Q', x: x, y: y, x1: x1, y1: y1 };\n break;\n case 't':\n case 'T':\n newSeg = { command: 'T', x: x, y: y };\n break;\n case 'a':\n case 'A':\n newSeg = { command: 'A', x: x, y: y };\n newSeg.r1 = seg.r1;\n newSeg.r2 = seg.r2;\n newSeg.angle = seg.angle;\n newSeg.largeArc = seg.largeArc;\n newSeg.sweep = seg.sweep;\n break;\n case 'z':\n case 'Z':\n newSeg = { command: 'Z' };\n x = x0;\n y = y0;\n newSeg = arrayCollection[parseInt(i.toString(), 10)];\n break;\n }\n if (newSeg) {\n arrayCollection[parseInt(i.toString(), 10)] = newSeg;\n }\n }\n if (char === 'M' || char === 'm') {\n x0 = x;\n y0 = y;\n }\n }\n return arrayCollection;\n}\n/**\n * getPathString method \\\n *\n * @returns {string} getPathString method .\\\n * @param { Object[]} arrayCollection - provide the val value.\n * @private\n */\nfunction getPathString(arrayCollection) {\n var getNewString = '';\n var i;\n for (i = 0; i < arrayCollection.length; i++) {\n if (i === 0) {\n getNewString += getString(arrayCollection[parseInt(i.toString(), 10)]);\n }\n else {\n getNewString += ' ' + getString(arrayCollection[parseInt(i.toString(), 10)]);\n }\n }\n return getNewString;\n}\n/* eslint-disable */\n/**\n * getString method \\\n *\n * @returns {string} getString method .\\\n * @param { PathSegment} arrayCollection - provide the val value.\n * @private\n */\nfunction getString(obj) {\n var string = '';\n switch (obj.command) {\n case 'Z':\n case 'z':\n string = obj.command;\n break;\n case 'M':\n case 'm':\n case 'L':\n case 'l':\n string = obj.command + ' ' + obj.x + ' ' + obj.y;\n break;\n case 'C':\n case 'c':\n string = obj.command + ' ' + obj.x1 + ' ' + obj.y1 + ' ' + obj.x2 + ' ' + obj.y2 + ' ' + obj.x + ' ' + obj.y;\n break;\n case 'Q':\n case 'q':\n string = obj.command + ' ' + obj.x1 + ' ' + obj.y1 + ' ' + obj.x + ' ' + obj.y;\n break;\n case 'A':\n case 'a':\n var cmd = obj.command;\n var ang = obj.angle;\n var l = (obj.largeArc ? '1' : '0');\n var s = (obj.sweep ? '1' : '0');\n string = cmd + ' ' + obj.r1 + ' ' + obj.r2 + ' ' + ang + ' ' + l + ' ' + s + ' ' + obj.x + ' ' + obj.y;\n break;\n case 'H':\n case 'h':\n string = obj.command + ' ' + obj.x;\n break;\n case 'V':\n case 'v':\n string = obj.command + ' ' + obj.y;\n break;\n case 'S':\n case 's':\n string = obj.command + ' ' + obj.x2 + ' ' + obj.y2 + ' ' + obj.x + ' ' + obj.y;\n break;\n case 'T':\n case 't':\n string = obj.command + ' ' + obj.x + ' ' + obj.y;\n }\n return string;\n}\n\n/**\n * Rect defines and processes rectangular regions\n */\nvar Rect = /** @__PURE__ @class */ (function () {\n function Rect(x, y, width, height) {\n /**\n * Sets the x-coordinate of the starting point of a rectangular region\n *\n * @default 0\n */\n this.x = Number.MAX_VALUE;\n /**\n * Sets the y-coordinate of the starting point of a rectangular region\n *\n * @default 0\n */\n this.y = Number.MAX_VALUE;\n /**\n * Sets the width of a rectangular region\n *\n * @default 0\n */\n this.width = 0;\n /**\n * Sets the height of a rectangular region\n *\n * @default 0\n */\n this.height = 0;\n if (x === undefined || y === undefined) {\n x = y = Number.MAX_VALUE;\n width = height = 0;\n }\n else {\n if (width === undefined) {\n width = 0;\n }\n if (height === undefined) {\n height = 0;\n }\n }\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n Object.defineProperty(Rect.prototype, \"left\", {\n // eslint-disable-next-line jsdoc/require-returns\n /** @private */\n get: function () {\n return this.x;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"right\", {\n /**\n * right method \\\n *\n * @returns { Rect } right method .\\\n *\n * @private\n */\n get: function () {\n return this.x + this.width;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"top\", {\n /**\n * toBounds method \\\n *\n * @returns { Rect } toBounds method .\\\n *\n * @private\n */\n get: function () {\n return this.y;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottom\", {\n /**\n * bottom method \\\n *\n * @returns { Rect } bottom method .\\\n *\n * @private\n */\n get: function () {\n return this.y + this.height;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"topLeft\", {\n /**\n * topLeft method \\\n *\n * @returns { Rect } topLeft method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.left, y: this.top };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"topRight\", {\n /**\n * topRight method \\\n *\n * @returns { Rect } topRight method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.right, y: this.top };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottomLeft\", {\n /**\n * bottomLeft method \\\n *\n * @returns { Rect } bottomLeft method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.left, y: this.bottom };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottomRight\", {\n /**\n * bottomRight method \\\n *\n * @returns { Rect } bottomRight method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.right, y: this.bottom };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"middleLeft\", {\n /**\n * middleLeft method \\\n *\n * @returns { Rect } middleLeft method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.left, y: this.y + this.height / 2 };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"middleRight\", {\n /**\n * middleRight method \\\n *\n * @returns { Rect } middleRight method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.right, y: this.y + this.height / 2 };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"topCenter\", {\n /**\n * topCenter method \\\n *\n * @returns { Rect } topCenter method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.x + this.width / 2, y: this.top };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottomCenter\", {\n /**\n * bottomCenter method \\\n *\n * @returns { Rect } bottomCenter method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.x + this.width / 2, y: this.bottom };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"center\", {\n /**\n * center method \\\n *\n * @returns { PointModel } center method .\\\n *\n * @private\n */\n get: function () {\n return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n },\n enumerable: true,\n configurable: true\n });\n /**\n * equals method \\\n *\n * @returns { boolean } equals method .\\\n * @param {Rect} rect1 - provide the rect1 value.\n * @param {Rect} rect2 - provide the rect2 value.\n *\n * @private\n */\n Rect.prototype.equals = function (rect1, rect2) {\n return rect1.x === rect2.x && rect1.y === rect2.y && rect1.width === rect2.width && rect1.height === rect2.height;\n };\n /**\n * uniteRect method \\\n *\n * @returns { Rect } uniteRect method .\\\n * @param {Rect} rect - provide the points value.\n *\n * @private\n */\n Rect.prototype.uniteRect = function (rect) {\n var right = Math.max(isNaN(this.right) || this.x === Number.MAX_VALUE ? rect.right : this.right, rect.right);\n var bottom = Math.max(isNaN(this.bottom) || this.y === Number.MAX_VALUE ? rect.bottom : this.bottom, rect.bottom);\n this.x = Math.min(this.left, rect.left);\n this.y = Math.min(this.top, rect.top);\n this.width = right - this.x;\n this.height = bottom - this.y;\n return this;\n };\n /**\n * unitePoint method \\\n *\n * @returns { void } unitePoint method .\\\n * @param {PointModel} point - provide the points value.\n *\n * @private\n */\n Rect.prototype.unitePoint = function (point) {\n if (this.x === Number.MAX_VALUE) {\n this.x = point.x;\n this.y = point.y;\n return;\n }\n var x = Math.min(this.left, point.x);\n var y = Math.min(this.top, point.y);\n var right = Math.max(this.right, point.x);\n var bottom = Math.max(this.bottom, point.y);\n this.x = x;\n this.y = y;\n this.width = right - this.x;\n this.height = bottom - this.y;\n };\n // public intersection(rect: Rect): Rect {\n // if (this.intersects(rect)) {\n // let left: number = Math.max(this.left, rect.left);\n // let top: number = Math.max(this.top, rect.top);\n // let right: number = Math.min(this.right, rect.right);\n // let bottom: number = Math.min(this.bottom, rect.bottom);\n // return new Rect(left, top, right - left, bottom - top);\n // }\n // return Rect.empty;\n // }\n /**\n * Inflate method \\\n *\n * @returns { Rect } Inflate method .\\\n * @param {number} padding - provide the points value.\n *\n * @private\n */\n Rect.prototype.Inflate = function (padding) {\n this.x -= padding;\n this.y -= padding;\n this.width += padding * 2;\n this.height += padding * 2;\n return this;\n };\n //public Inflate(size: Size): Rect {\n // this.x -= size.Width;\n // this.y -= size.Height;\n // this.width += size.Width * 2;\n // this.height += size.Height * 2;\n // return this;\n //}\n // public inflate(width: number, height: number): void {\n // this.x -= width;\n // this.y -= height;\n // this.width += width * 2;\n // this.height += height * 2;\n // }\n /**\n * intersects method \\\n *\n * @returns { boolean } intersects method .\\\n * @param {Rect} rect - provide the points value.\n *\n * @private\n */\n Rect.prototype.intersects = function (rect) {\n if (this.right < rect.left || this.left > rect.right || this.top > rect.bottom || this.bottom < rect.top) {\n return false;\n }\n return true;\n };\n /**\n * containsRect method \\\n *\n * @returns { boolean } containsRect method .\\\n * @param {Rect} rect - provide the points value.\n *\n * @private\n */\n Rect.prototype.containsRect = function (rect) {\n return this.left <= rect.left && this.right >= rect.right && this.top <= rect.top && this.bottom >= rect.bottom;\n };\n /**\n * containsPoint method \\\n *\n * @returns { boolean } containsPoint method .\\\n * @param {PointModel} point - provide the points value.\n * @param {number} padding - provide the padding value.\n *\n * @private\n */\n Rect.prototype.containsPoint = function (point, padding) {\n if (padding === void 0) { padding = 0; }\n return this.left - padding <= point.x && this.right + padding >= point.x\n && this.top - padding <= point.y && this.bottom + padding >= point.y;\n };\n // public toPoints(): PointModel[] {\n // let points: PointModel[] = [];\n // points.push(this.topLeft);\n // points.push(this.topRight);\n // points.push(this.bottomLeft);\n // points.push(this.bottomRight);\n // return points;\n // }\n /**\n * toBounds method \\\n *\n * @returns { Rect } toBounds method .\\\n * @param {PointModel[]} points - provide the points value.\n *\n * @private\n */\n Rect.toBounds = function (points) {\n var rect = new Rect();\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var pt = points_1[_i];\n rect.unitePoint(pt);\n }\n return rect;\n };\n /** @private */\n Rect.empty = new Rect(Number.MAX_VALUE, Number.MIN_VALUE, 0, 0);\n return Rect;\n}());\n\n/**\n * Matrix module is used to transform points based on offsets, angle\n */\n/** @private */\nvar MatrixTypes;\n(function (MatrixTypes) {\n MatrixTypes[MatrixTypes[\"Identity\"] = 0] = \"Identity\";\n MatrixTypes[MatrixTypes[\"Translation\"] = 1] = \"Translation\";\n MatrixTypes[MatrixTypes[\"Scaling\"] = 2] = \"Scaling\";\n MatrixTypes[MatrixTypes[\"Unknown\"] = 4] = \"Unknown\";\n})(MatrixTypes || (MatrixTypes = {}));\n/** @private */\nvar Matrix = /** @__PURE__ @class */ (function () {\n function Matrix(m11, m12, m21, m22, offsetX, offsetY, type) {\n this.m11 = m11;\n this.m12 = m12;\n this.m21 = m21;\n this.m22 = m22;\n this.offsetX = offsetX;\n this.offsetY = offsetY;\n // if (type === undefined) {\n // this.type = MatrixTypes.Unknown;\n // } else {\n // this.type = type;\n // }\n this.type = type;\n }\n return Matrix;\n}());\n/**\n * Will identify the matrix .\\\n *\n * @returns {Matrix} Will identify the matrix .\n * @private\n */\nfunction identityMatrix() {\n return new Matrix(1, 0, 0, 1, 0, 0, MatrixTypes.Identity);\n}\n/**\n * Will transform the points by matrix .\\\n *\n * @returns {PointModel[]} Will transform the points by matrix .\n *\n * @param {Matrix} matrix - provide the matrix value .\n * @param {number} point - provide the points value.\n * @private\n */\nfunction transformPointByMatrix(matrix, point) {\n var pt = multiplyPoint(matrix, point.x, point.y);\n return { x: Math.round(pt.x * 100) / 100, y: Math.round(pt.y * 100) / 100 };\n}\n/**\n * Will transform the points by matrix .\\\n *\n * @returns {PointModel[]} Will transform the points by matrix .\n *\n * @param {Matrix} matrix - provide the matrix value .\n * @param {number} points - provide the points value.\n * @private\n */\nfunction transformPointsByMatrix(matrix, points) {\n var transformedPoints = [];\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n transformedPoints.push(transformPointByMatrix(matrix, point));\n }\n return transformedPoints;\n}\n/**\n * Will rotate the matrix .\\\n *\n * @returns {void} Will rotate the matrix .\n *\n * @param {Matrix} matrix - provide the matrix value .\n * @param {number} angle - provide the angle value.\n * @param {number} centerX - provide the centerX value .\n * @param {number} centerY - provide the centerY value .\n * @private\n */\nfunction rotateMatrix(matrix, angle, centerX, centerY) {\n angle %= 360.0;\n multiplyMatrix(matrix, createRotationRadians(angle * 0.017453292519943295, centerX ? centerX : 0, centerY ? centerY : 0));\n}\n/**\n * Will scale the matrix .\\\n *\n * @returns {void} Will scale the matrix .\n *\n * @param {Matrix} matrix - provide the matrix value .\n * @param {number} scaleX - provide the scaleXvalue.\n * @param {number} scaleY - provide the scaleY value .\n * @param {number} centerX - provide the centerX value .\n * @param {number} centerY - provide the centerY value .\n * @private\n */\nfunction scaleMatrix(matrix, scaleX, scaleY, centerX, centerY) {\n if (centerX === void 0) { centerX = 0; }\n if (centerY === void 0) { centerY = 0; }\n multiplyMatrix(matrix, createScaling(scaleX, scaleY, centerX, centerY));\n}\n/**\n * Will translate the matrix .\\\n *\n * @returns {void} Will translate the matrix .\n *\n * @param {Matrix} matrix - provide the matrix value .\n * @param {number} offsetX - provide the offset x value.\n * @param {number} offsetY - provide the offset y value .\n * @private\n */\nfunction translateMatrix(matrix, offsetX, offsetY) {\n //Removed identity and unknown matrix type checking\n matrix.offsetX += offsetX;\n matrix.offsetY += offsetY;\n matrix.type |= MatrixTypes.Translation;\n}\n/**\n * Will create scaling value .\\\n *\n * @returns {Matrix} Will create scaling value . .\n *\n * @param {Matrix} scaleX - provide the scale x value .\n * @param {number} scaleY - provide the scale y value.\n * @param {number} centerX - provide the centerX x value .\n * @param {number} centerY - provide the centerX y value .\n * @private\n */\nfunction createScaling(scaleX, scaleY, centerX, centerY) {\n var result = identityMatrix();\n result.type = !(centerX || centerY) ? MatrixTypes.Scaling : MatrixTypes.Scaling | MatrixTypes.Translation;\n setMatrix(result, scaleX, 0.0, 0.0, scaleY, centerX - scaleX * centerX, centerY - scaleY * centerY);\n return result;\n}\n/**\n * Will create the rotation radians.\\\n *\n * @returns {Matrix} Will create the rotation radians .\n *\n * @param {Matrix} angle - provide the angle .\n * @param {number} centerX - provide the x value .\n * @param {number} centerY - provide the y value .\n * @private\n */\nfunction createRotationRadians(angle, centerX, centerY) {\n var result = identityMatrix();\n var num = Math.sin(angle);\n var num2 = Math.cos(angle);\n var offsetX = centerX * (1.0 - num2) + centerY * num;\n var offsetY = centerY * (1.0 - num2) - centerX * num;\n result.type = MatrixTypes.Unknown;\n setMatrix(result, num2, num, -num, num2, offsetX, offsetY);\n return result;\n}\n/**\n * Multiply the point .\\\n *\n * @returns {void} Multiply the point .\n *\n * @param {Matrix} matrix - Provide the matrix .\n * @param {number} x - provide the x value .\n * @param {number} y - provide the y value .\n * @private\n */\nfunction multiplyPoint(matrix, x, y) {\n switch (matrix.type) {\n //Removed identity and translation and scaling matrix type checking\n case MatrixTypes.Translation | MatrixTypes.Scaling:\n x *= matrix.m11;\n x += matrix.offsetX;\n y *= matrix.m22;\n y += matrix.offsetY;\n break;\n default:\n // eslint-disable-next-line no-case-declarations\n var num = y * matrix.m21 + matrix.offsetX;\n // eslint-disable-next-line no-case-declarations\n var num2 = x * matrix.m12 + matrix.offsetY;\n x *= matrix.m11;\n x += num;\n y *= matrix.m22;\n y += num2;\n break;\n }\n return { x: x, y: y };\n}\n/**\n * Will multiply the matrix .\\\n *\n * @returns {void} Will multiply the matrix .\n *\n * @param {Matrix} matrix1 - Provide the matrix 1 value .\n * @param {Matrix} matrix2 - Provide the matrix 2 value .\n * @private\n */\nfunction multiplyMatrix(matrix1, matrix2) {\n var type = matrix1.type;\n var type2 = matrix2.type;\n //Removed identity matrix type checking\n if (type === MatrixTypes.Identity) {\n assignMatrix(matrix1, matrix2);\n matrix1.type = matrix2.type;\n return;\n }\n //Removed translation matrix type checking\n if (type !== MatrixTypes.Translation) {\n var num = type << 4 | type2;\n //Removed num 34,35,36\n switch (num) {\n case 50:\n matrix1.m11 *= matrix2.m11;\n matrix1.m22 *= matrix2.m22;\n matrix1.offsetX *= matrix2.m11;\n matrix1.offsetY *= matrix2.m22;\n return;\n case 51:\n matrix1.m11 *= matrix2.m11;\n matrix1.m22 *= matrix2.m22;\n matrix1.offsetX = matrix2.m11 * matrix1.offsetX + matrix2.offsetX;\n matrix1.offsetY = matrix2.m22 * matrix1.offsetY + matrix2.offsetY;\n return;\n case 52: break;\n default:\n switch (num) {\n case 66:\n case 67:\n case 68: break;\n default: return;\n }\n break;\n }\n var result = identityMatrix();\n var m11New = matrix1.m11 * matrix2.m11 + matrix1.m12 * matrix2.m21;\n var m12New = matrix1.m11 * matrix2.m12 + matrix1.m12 * matrix2.m22;\n var m21New = matrix1.m21 * matrix2.m11 + matrix1.m22 * matrix2.m21;\n var m22New = matrix1.m21 * matrix2.m12 + matrix1.m22 * matrix2.m22;\n var offsetX_1 = matrix1.offsetX * matrix2.m11 + matrix1.offsetY * matrix2.m21 + matrix2.offsetX;\n var offsetY_1 = matrix1.offsetX * matrix2.m12 + matrix1.offsetY * matrix2.m22 + matrix2.offsetY;\n setMatrix(result, m11New, m12New, m21New, m22New, offsetX_1, offsetY_1);\n if (result.m21 || result.m12) {\n result.type = MatrixTypes.Unknown;\n }\n else {\n if (result.m11 && result.m11 !== 1.0 || result.m22 && result.m22 !== 1.0) {\n result.type = MatrixTypes.Scaling;\n }\n if (result.offsetX || result.offsetY) {\n result.type |= MatrixTypes.Translation;\n }\n if ((result.type & (MatrixTypes.Translation | MatrixTypes.Scaling)) === MatrixTypes.Identity) {\n result.type = MatrixTypes.Identity;\n }\n result.type = MatrixTypes.Scaling | MatrixTypes.Translation;\n }\n assignMatrix(matrix1, result);\n matrix1.type = result.type;\n return;\n }\n var offsetX = matrix1.offsetX;\n var offsetY = matrix1.offsetY;\n matrix1.offsetX = offsetX * matrix2.m11 + offsetY * matrix2.m21 + matrix2.offsetX;\n matrix1.offsetY = offsetX * matrix2.m12 + offsetY * matrix2.m22 + matrix2.offsetY;\n if (type2 === MatrixTypes.Unknown) {\n matrix1.type = MatrixTypes.Unknown;\n return;\n }\n matrix1.type = (MatrixTypes.Translation | MatrixTypes.Scaling);\n}\n/**\n * set the matrix .\\\n *\n * @returns {void} set the matrix .\n *\n * @param {Matrix} mat - Provide the matrix 1 value .\n * @param {number} m11 - Provide the matrix m11 value .\n * @param {number} m12 - Provide the matrix m11 value .\n * @param {number} m21 - Provide the matrix m11 value .\n * @param {number} m22 - Provide the matrix m11 value .\n * @param {number} x - Provide the matrix m11 value .\n * @param {number} y - Provide the matrix m11 value .\n * @private\n */\nfunction setMatrix(mat, m11, m12, m21, m22, x, y) {\n mat.m11 = m11;\n mat.m12 = m12;\n mat.m21 = m21;\n mat.m22 = m22;\n mat.offsetX = x;\n mat.offsetY = y;\n}\n/**\n * Assign the matrix .\\\n *\n * @returns {void} Assign the matrix .\n *\n * @param {Matrix} matrix1 - Provide the element type as string .\n * @param {Matrix} matrix2 - Provide the element type as string .\n * @private\n */\nfunction assignMatrix(matrix1, matrix2) {\n matrix1.m11 = matrix2.m11;\n matrix1.m12 = matrix2.m12;\n matrix1.m21 = matrix2.m21;\n matrix1.m22 = matrix2.m22;\n matrix1.offsetX = matrix2.offsetX;\n matrix1.offsetY = matrix2.offsetY;\n matrix1.type = matrix2.type;\n}\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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/** @private */\n// eslint-disable-next-line prefer-const\nvar getGradientType = function (obj) {\n if (obj) {\n //Removed isBlazor code\n switch (obj.type) {\n case 'Linear':\n return LinearGradient;\n case 'Radial':\n return RadialGradient;\n default:\n return LinearGradient;\n }\n }\n return LinearGradient;\n};\n/**\n * Layout Model module defines the styles and types to arrange objects in containers\n */\nvar Thickness = /** @__PURE__ @class */ (function () {\n function Thickness(left, right, top, bottom) {\n this.left = left;\n this.right = right;\n this.top = top;\n this.bottom = bottom;\n }\n return Thickness;\n}());\n/**\n * Defines the space to be left between an object and its immediate parent\n */\nvar Margin = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Margin, _super);\n function Margin() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property(0)\n ], Margin.prototype, \"left\", void 0);\n __decorate$1([\n Property(0)\n ], Margin.prototype, \"right\", void 0);\n __decorate$1([\n Property(0)\n ], Margin.prototype, \"top\", void 0);\n __decorate$1([\n Property(0)\n ], Margin.prototype, \"bottom\", void 0);\n return Margin;\n}(ChildProperty));\n/**\n * Defines the Shadow appearance of the objects\n * ```html\n * \n * ```\n * ```typescript\n * let nodes: NodeModel[] = [{ id: 'node2', width: 100, height: 100,\n * constraints: NodeConstraints.Default | NodeConstraints.Shadow,\n * shadow: { angle: 45, distance: 5, opacity: 0.7, color: 'grey'}\n * }];\n * let diagram: Diagram = new Diagram({\n * ...\n * nodes: nodes,\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n */\nvar Shadow = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Shadow, _super);\n function Shadow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property(45)\n ], Shadow.prototype, \"angle\", void 0);\n __decorate$1([\n Property(5)\n ], Shadow.prototype, \"distance\", void 0);\n __decorate$1([\n Property(0.7)\n ], Shadow.prototype, \"opacity\", void 0);\n __decorate$1([\n Property('lightgrey')\n ], Shadow.prototype, \"color\", void 0);\n return Shadow;\n}(ChildProperty));\n/**\n * Defines the different colors and the region of color transitions\n * ```html\n * \n * ```\n * ```typescript\n * let stopscol: StopModel[] = [];\n * let stops1: StopModel = { color: 'white', offset: 0, opacity: 0.7 };\n * stopscol.push(stops1);\n * let stops2: StopModel = { color: 'red', offset: 0, opacity: 0.3 };\n * stopscol.push(stops2);\n * let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stopscol, type: 'Radial' };\n * let nodes: NodeModel[] = [{ id: 'node1', width: 100, height: 100,\n * style: { gradient: gradient }\n * }];\n * let diagram: Diagram = new Diagram({\n * ...\n * nodes: nodes,\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n */\nvar Stop = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Stop, _super);\n function Stop() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * @private\n * Returns the name of class Stop\n */\n Stop.prototype.getClassName = function () {\n return 'Stop';\n };\n __decorate$1([\n Property('')\n ], Stop.prototype, \"color\", void 0);\n __decorate$1([\n Property(0)\n ], Stop.prototype, \"offset\", void 0);\n __decorate$1([\n Property(1)\n ], Stop.prototype, \"opacity\", void 0);\n return Stop;\n}(ChildProperty));\n/**\n * Paints the node with a smooth transition from one color to another color\n */\nvar Gradient = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Gradient, _super);\n function Gradient() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Collection([], Stop)\n ], Gradient.prototype, \"stops\", void 0);\n __decorate$1([\n Property('None')\n ], Gradient.prototype, \"type\", void 0);\n __decorate$1([\n Property('')\n ], Gradient.prototype, \"id\", void 0);\n return Gradient;\n}(ChildProperty));\n/**\n * Defines the linear gradient of styles\n * ```html\n * \n * ```\n * ```typescript\n * let stopscol: StopModel[] = [];\n * let stops1: StopModel = { color: 'white', offset: 0, opacity: 0.7 };\n * stopscol.push(stops1);\n * let stops2: StopModel = { color: 'red', offset: 0, opacity: 0.3 };\n * stopscol.push(stops2);\n * let gradient: LinearGradientModel = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopscol, type: 'Linear' };\n * let nodes: NodeModel[] = [{ id: 'node1', width: 100, height: 100,\n * style: { gradient: gradient }\n * }];\n * let diagram: Diagram = new Diagram({\n * ...\n * nodes: nodes,\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n */\n/**\n * Paints the node with linear color transitions\n */\nvar DiagramGradient = /** @__PURE__ @class */ (function (_super) {\n __extends$1(DiagramGradient, _super);\n function DiagramGradient() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"x1\", void 0);\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"x2\", void 0);\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"y1\", void 0);\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"y2\", void 0);\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"cx\", void 0);\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"cy\", void 0);\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"fx\", void 0);\n __decorate$1([\n Property(0)\n ], DiagramGradient.prototype, \"fy\", void 0);\n __decorate$1([\n Property(50)\n ], DiagramGradient.prototype, \"r\", void 0);\n return DiagramGradient;\n}(Gradient));\n/**\n * Paints the node with linear color transitions\n */\nvar LinearGradient = /** @__PURE__ @class */ (function (_super) {\n __extends$1(LinearGradient, _super);\n function LinearGradient() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property(0)\n ], LinearGradient.prototype, \"x1\", void 0);\n __decorate$1([\n Property(0)\n ], LinearGradient.prototype, \"x2\", void 0);\n __decorate$1([\n Property(0)\n ], LinearGradient.prototype, \"y1\", void 0);\n __decorate$1([\n Property(0)\n ], LinearGradient.prototype, \"y2\", void 0);\n return LinearGradient;\n}(Gradient));\n/**\n * A focal point defines the beginning of the gradient, and a circle defines the end point of the gradient\n * ```html\n * \n * ```\n * ```typescript\n * let stopscol: StopModel[] = [];\n * let stops1: StopModel = { color: 'white', offset: 0, opacity: 0.7 };\n * stopscol.push(stops1);\n * let stops2: StopModel = { color: 'red', offset: 0, opacity: 0.3 };\n * stopscol.push(stops2);\n * let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stopscol, type: 'Radial' };\n * let nodes: NodeModel[] = [{ id: 'node1', width: 100, height: 100,\n * style: { gradient: gradient }\n * }];\n * let diagram: Diagram = new Diagram({\n * ...\n * nodes: nodes,\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n */\nvar RadialGradient = /** @__PURE__ @class */ (function (_super) {\n __extends$1(RadialGradient, _super);\n function RadialGradient() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property(0)\n ], RadialGradient.prototype, \"cx\", void 0);\n __decorate$1([\n Property(0)\n ], RadialGradient.prototype, \"cy\", void 0);\n __decorate$1([\n Property(0)\n ], RadialGradient.prototype, \"fx\", void 0);\n __decorate$1([\n Property(0)\n ], RadialGradient.prototype, \"fy\", void 0);\n __decorate$1([\n Property(50)\n ], RadialGradient.prototype, \"r\", void 0);\n return RadialGradient;\n}(Gradient));\n/**\n * Defines the style of shape/path\n */\nvar ShapeStyle = /** @__PURE__ @class */ (function (_super) {\n __extends$1(ShapeStyle, _super);\n function ShapeStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property('white')\n ], ShapeStyle.prototype, \"fill\", void 0);\n __decorate$1([\n Property('black')\n ], ShapeStyle.prototype, \"strokeColor\", void 0);\n __decorate$1([\n Property('')\n ], ShapeStyle.prototype, \"strokeDashArray\", void 0);\n __decorate$1([\n Property(1)\n ], ShapeStyle.prototype, \"strokeWidth\", void 0);\n __decorate$1([\n Property(1)\n ], ShapeStyle.prototype, \"opacity\", void 0);\n __decorate$1([\n ComplexFactory(getGradientType)\n ], ShapeStyle.prototype, \"gradient\", void 0);\n return ShapeStyle;\n}(ChildProperty));\n/**\n * Defines the stroke style of a path\n */\nvar StrokeStyle = /** @__PURE__ @class */ (function (_super) {\n __extends$1(StrokeStyle, _super);\n function StrokeStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property('transparent')\n ], StrokeStyle.prototype, \"fill\", void 0);\n return StrokeStyle;\n}(ShapeStyle));\n/**\n * Defines the appearance of text\n * ```html\n * \n * ```\n * ```typescript\n * let style: TextStyleModel = { strokeColor: 'black', opacity: 0.5, whiteSpace:'CollapseSpace', strokeWidth: 1 };\n * let node: NodeModel;\n * node = {\n * ...\n * id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,\n * annotations : [{\n * content: 'text', style: style }];\n * ...\n * };\n * let diagram: Diagram = new Diagram({\n * ...\n * nodes: [node],\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n */\nvar TextStyle = /** @__PURE__ @class */ (function (_super) {\n __extends$1(TextStyle, _super);\n function TextStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property('black')\n ], TextStyle.prototype, \"color\", void 0);\n __decorate$1([\n Property('Arial')\n ], TextStyle.prototype, \"fontFamily\", void 0);\n __decorate$1([\n Property(12)\n ], TextStyle.prototype, \"fontSize\", void 0);\n __decorate$1([\n Property(false)\n ], TextStyle.prototype, \"italic\", void 0);\n __decorate$1([\n Property(false)\n ], TextStyle.prototype, \"bold\", void 0);\n __decorate$1([\n Property('CollapseSpace')\n ], TextStyle.prototype, \"whiteSpace\", void 0);\n __decorate$1([\n Property('WrapWithOverflow')\n ], TextStyle.prototype, \"textWrapping\", void 0);\n __decorate$1([\n Property('Center')\n ], TextStyle.prototype, \"textAlign\", void 0);\n __decorate$1([\n Property('None')\n ], TextStyle.prototype, \"textDecoration\", void 0);\n __decorate$1([\n Property('Wrap')\n ], TextStyle.prototype, \"textOverflow\", void 0);\n __decorate$1([\n Property('transparent')\n ], TextStyle.prototype, \"fill\", void 0);\n return TextStyle;\n}(ShapeStyle));\n/**\n * Defines the style of shape/path\n */\nvar DiagramShapeStyle = /** @__PURE__ @class */ (function (_super) {\n __extends$1(DiagramShapeStyle, _super);\n function DiagramShapeStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property('white')\n ], DiagramShapeStyle.prototype, \"fill\", void 0);\n __decorate$1([\n Property('Wrap')\n ], DiagramShapeStyle.prototype, \"textOverflow\", void 0);\n __decorate$1([\n Property(1)\n ], DiagramShapeStyle.prototype, \"strokeWidth\", void 0);\n __decorate$1([\n ComplexFactory(getGradientType)\n ], DiagramShapeStyle.prototype, \"gradient\", void 0);\n __decorate$1([\n Property(1)\n ], DiagramShapeStyle.prototype, \"opacity\", void 0);\n __decorate$1([\n Property(false)\n ], DiagramShapeStyle.prototype, \"italic\", void 0);\n __decorate$1([\n Property('')\n ], DiagramShapeStyle.prototype, \"strokeDashArray\", void 0);\n __decorate$1([\n Property('black')\n ], DiagramShapeStyle.prototype, \"color\", void 0);\n __decorate$1([\n Property(12)\n ], DiagramShapeStyle.prototype, \"fontSize\", void 0);\n __decorate$1([\n Property('Arial')\n ], DiagramShapeStyle.prototype, \"fontFamily\", void 0);\n __decorate$1([\n Property('CollapseSpace')\n ], DiagramShapeStyle.prototype, \"whiteSpace\", void 0);\n __decorate$1([\n Property('Center')\n ], DiagramShapeStyle.prototype, \"textAlign\", void 0);\n __decorate$1([\n Property('None')\n ], DiagramShapeStyle.prototype, \"textDecoration\", void 0);\n __decorate$1([\n Property(false)\n ], DiagramShapeStyle.prototype, \"bold\", void 0);\n __decorate$1([\n Property('black')\n ], DiagramShapeStyle.prototype, \"strokeColor\", void 0);\n __decorate$1([\n Property('WrapWithOverflow')\n ], DiagramShapeStyle.prototype, \"textWrapping\", void 0);\n return DiagramShapeStyle;\n}(ChildProperty));\n\n/**\n * enum module defines the public enumerations\n */\n/**\n * @private\n */\nvar BlazorAction;\n(function (BlazorAction) {\n /** Return the layout value is true when doLayout is called */\n BlazorAction[BlazorAction[\"Default\"] = 0] = \"Default\";\n /** Need to return the layout value when doLayout is called */\n BlazorAction[BlazorAction[\"expandNode\"] = 2] = \"expandNode\";\n /** Enabled during the mouse interaction */\n BlazorAction[BlazorAction[\"interaction\"] = 4] = \"interaction\";\n /** Enable when the group action start in history */\n BlazorAction[BlazorAction[\"GroupingInProgress\"] = 8] = \"GroupingInProgress\";\n /** Enable when the group action start to clone another group node */\n BlazorAction[BlazorAction[\"GroupClipboardInProcess\"] = 16] = \"GroupClipboardInProcess\";\n /** Enable when the clear the object to prevent the server update */\n BlazorAction[BlazorAction[\"ClearObject\"] = 32] = \"ClearObject\";\n})(BlazorAction || (BlazorAction = {}));\n/**\n * Constraints to define when a port has to be visible\n * Visible - Always shows the port\n * Hidden - Always hides the port\n * Hover - Shows the port when the mouse hovers over a node\n * Connect - Shows the port when a connection end point is dragged over a node\n * Default - By default the ports will be visible when a node is hovered and being tried to connect\n *\n * @aspNumberEnum\n */\nvar PortVisibility;\n(function (PortVisibility) {\n /** Always shows the port */\n PortVisibility[PortVisibility[\"Visible\"] = 1] = \"Visible\";\n /** Always hides the port */\n PortVisibility[PortVisibility[\"Hidden\"] = 2] = \"Hidden\";\n /** Shows the port when the mouse hovers over a node */\n PortVisibility[PortVisibility[\"Hover\"] = 4] = \"Hover\";\n /** Shows the port when a connection end point is dragged over a node */\n PortVisibility[PortVisibility[\"Connect\"] = 8] = \"Connect\";\n})(PortVisibility || (PortVisibility = {}));\n/**\n * Defines the constraints to Enables / Disables some features of Snapping.\n * None - Snapping does not happen\n * ShowHorizontalLines - Displays only the horizontal gridlines in diagram.\n * ShowVerticalLines - Displays only the Vertical gridlines in diagram.\n * ShowLines - Display both Horizontal and Vertical gridlines.\n * SnapToHorizontalLines - Enables the object to snap only with horizontal gridlines.\n * SnapToVerticalLines - Enables the object to snap only with horizontal gridlines.\n * SnapToLines - Enables the object to snap with both horizontal and Vertical gridlines.\n * snapToObject - Enables the object to snap with the other objects in the diagram.\n *\n * @IgnoreSingular\n * @aspNumberEnum\n */\nvar SnapConstraints;\n(function (SnapConstraints) {\n /** None - Snapping does not happen */\n SnapConstraints[SnapConstraints[\"None\"] = 0] = \"None\";\n /** ShowHorizontalLines - Displays only the horizontal gridlines in diagram. */\n SnapConstraints[SnapConstraints[\"ShowHorizontalLines\"] = 1] = \"ShowHorizontalLines\";\n /** ShowVerticalLines - Displays only the Vertical gridlines in diagram */\n SnapConstraints[SnapConstraints[\"ShowVerticalLines\"] = 2] = \"ShowVerticalLines\";\n /** ShowLines - Display both Horizontal and Vertical gridlines */\n SnapConstraints[SnapConstraints[\"ShowLines\"] = 3] = \"ShowLines\";\n /** SnapToHorizontalLines - Enables the object to snap only with horizontal gridlines */\n SnapConstraints[SnapConstraints[\"SnapToHorizontalLines\"] = 4] = \"SnapToHorizontalLines\";\n /** SnapToVerticalLines - Enables the object to snap only with horizontal gridlines */\n SnapConstraints[SnapConstraints[\"SnapToVerticalLines\"] = 8] = \"SnapToVerticalLines\";\n /** SnapToLines - Enables the object to snap with both horizontal and Vertical gridlines */\n SnapConstraints[SnapConstraints[\"SnapToLines\"] = 12] = \"SnapToLines\";\n /** SnapToObject - Enables the object to snap with the other objects in the diagram. */\n SnapConstraints[SnapConstraints[\"SnapToObject\"] = 16] = \"SnapToObject\";\n /** Shows gridlines and enables snapping */\n SnapConstraints[SnapConstraints[\"All\"] = 31] = \"All\";\n})(SnapConstraints || (SnapConstraints = {}));\n/**\n * Defines the visibility of the selector handles\n * None - Hides all the selector elements\n * ConnectorSourceThumb - Shows/hides the source thumb of the connector\n * ConnectorTargetThumb - Shows/hides the target thumb of the connector\n * ResizeSouthEast - Shows/hides the bottom right resize handle of the selector\n * ResizeSouthWest - Shows/hides the bottom left resize handle of the selector\n * ResizeNorthEast - Shows/hides the top right resize handle of the selector\n * ResizeNorthWest - Shows/hides the top left resize handle of the selector\n * ResizeEast - Shows/hides the middle right resize handle of the selector\n * ResizeWest - Shows/hides the middle left resize handle of the selector\n * ResizeSouth - Shows/hides the bottom center resize handle of the selector\n * ResizeNorth - Shows/hides the top center resize handle of the selector\n * Rotate - Shows/hides the rotate handle of the selector\n * UserHandles - Shows/hides the user handles of the selector\n * Resize - Shows/hides all resize handles of the selector\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar SelectorConstraints;\n(function (SelectorConstraints) {\n /** Hides all the selector elements */\n SelectorConstraints[SelectorConstraints[\"None\"] = 1] = \"None\";\n /** Shows/hides the source thumb of the connector */\n SelectorConstraints[SelectorConstraints[\"ConnectorSourceThumb\"] = 2] = \"ConnectorSourceThumb\";\n /** Shows/hides the target thumb of the connector */\n SelectorConstraints[SelectorConstraints[\"ConnectorTargetThumb\"] = 4] = \"ConnectorTargetThumb\";\n /** Shows/hides the bottom right resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeSouthEast\"] = 8] = \"ResizeSouthEast\";\n /** Shows/hides the bottom left resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeSouthWest\"] = 16] = \"ResizeSouthWest\";\n /** Shows/hides the top right resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeNorthEast\"] = 32] = \"ResizeNorthEast\";\n /** Shows/hides the top left resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeNorthWest\"] = 64] = \"ResizeNorthWest\";\n /** Shows/hides the middle right resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeEast\"] = 128] = \"ResizeEast\";\n /** Shows/hides the middle left resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeWest\"] = 256] = \"ResizeWest\";\n /** Shows/hides the bottom center resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeSouth\"] = 512] = \"ResizeSouth\";\n /** Shows/hides the top center resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeNorth\"] = 1024] = \"ResizeNorth\";\n /** Shows/hides the rotate handle of the selector */\n SelectorConstraints[SelectorConstraints[\"Rotate\"] = 2048] = \"Rotate\";\n /** Shows/hides the user handles of the selector */\n SelectorConstraints[SelectorConstraints[\"UserHandle\"] = 4096] = \"UserHandle\";\n /** Shows/hides the default tooltip of nodes and connectors */\n SelectorConstraints[SelectorConstraints[\"ToolTip\"] = 8192] = \"ToolTip\";\n /** Shows/hides all resize handles of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeAll\"] = 2046] = \"ResizeAll\";\n /** Shows all handles of the selector */\n SelectorConstraints[SelectorConstraints[\"All\"] = 16382] = \"All\";\n})(SelectorConstraints || (SelectorConstraints = {}));\n/**\n * Defines the connection point of the connectors in the layout\n * SamePoint - Connectors will connect with same point in the layout\n * DifferentPoint - Connectors will connect with different points in the layout\n */\nvar ConnectionPointOrigin;\n(function (ConnectionPointOrigin) {\n /** SamePoint - Connectors will connect with same point in the layout */\n ConnectionPointOrigin[\"SamePoint\"] = \"SamePoint\";\n /** DifferentPoint - Connectors will connect with different points in the layout */\n ConnectionPointOrigin[\"DifferentPoint\"] = \"DifferentPoint\";\n})(ConnectionPointOrigin || (ConnectionPointOrigin = {}));\n/**\n * Defines the child nodes need to arranged in linear manner in layout\n * Linear - Child nodes will be arranged in linear manner\n * Nonlinear - Child nodes will be arranged in not linear manner\n */\nvar ChildArrangement;\n(function (ChildArrangement) {\n /** Linear - Child nodes will be arranged in linear manner */\n ChildArrangement[\"Linear\"] = \"Linear\";\n /** Nonlinear - Child nodes will be arranged in not linear manner */\n ChildArrangement[\"Nonlinear\"] = \"Nonlinear\";\n})(ChildArrangement || (ChildArrangement = {}));\n/**\n * Defines the constraints to enable/disable certain features of connector.\n * * None - Interaction of the connectors cannot be done.\n * * Select - Selects the connector.\n * * Delete - Delete the connector.\n * * Drag - Drag the connector.\n * * DragSourceEnd - Drag the source end of the connector.\n * * DragTargetEnd - Drag the target end of the connector.\n * * DragSegmentThump - Drag the segment thumb of the connector.\n * * AllowDrop - Allow to drop a node.\n * * Bridging - Creates bridge on intersection of two connectors.\n * * BridgeObstacle -\n * * InheritBridging - Creates bridge on intersection of two connectors.\n * * PointerEvents - Sets the pointer events.\n * * Tooltip - Displays a tooltip for the connectors.\n * * InheritToolTip - Displays a tooltip for the connectors.\n * * Interaction - Features of the connector used for interaction.\n * * ReadOnly - Enables ReadOnly\n * * InheritSegmentThumbShape - Enables or disables to inherit the value of segmentThumbShape\n * * InheritSegmentThumbSize - Enables or disables to inherit the value of segmentThumbSize\n * * Default - Default features of the connector.\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar ConnectorConstraints;\n(function (ConnectorConstraints) {\n /** Disable all connector Constraints. */\n ConnectorConstraints[ConnectorConstraints[\"None\"] = 1] = \"None\";\n /** Enables connector to be selected. */\n ConnectorConstraints[ConnectorConstraints[\"Select\"] = 2] = \"Select\";\n /** Enables connector to be Deleted. */\n ConnectorConstraints[ConnectorConstraints[\"Delete\"] = 4] = \"Delete\";\n /** Enables connector to be Dragged. */\n ConnectorConstraints[ConnectorConstraints[\"Drag\"] = 8] = \"Drag\";\n /** Enables connectors source end to be selected. */\n ConnectorConstraints[ConnectorConstraints[\"DragSourceEnd\"] = 16] = \"DragSourceEnd\";\n /** Enables connectors target end to be selected. */\n ConnectorConstraints[ConnectorConstraints[\"DragTargetEnd\"] = 32] = \"DragTargetEnd\";\n /** Enables control point and end point of every segment in a connector for editing. */\n ConnectorConstraints[ConnectorConstraints[\"DragSegmentThumb\"] = 64] = \"DragSegmentThumb\";\n /** Enables AllowDrop constraints to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"AllowDrop\"] = 128] = \"AllowDrop\";\n /** Enables bridging to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"Bridging\"] = 256] = \"Bridging\";\n /** Enables or Disables Bridge Obstacles with overlapping of connectors. */\n ConnectorConstraints[ConnectorConstraints[\"BridgeObstacle\"] = 512] = \"BridgeObstacle\";\n /** Enables bridging to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"InheritBridging\"] = 1024] = \"InheritBridging\";\n /** Used to set the pointer events. */\n ConnectorConstraints[ConnectorConstraints[\"PointerEvents\"] = 2048] = \"PointerEvents\";\n /** Enables or disables tool tip for the connectors */\n ConnectorConstraints[ConnectorConstraints[\"Tooltip\"] = 4096] = \"Tooltip\";\n /** Enables or disables tool tip for the connectors */\n ConnectorConstraints[ConnectorConstraints[\"InheritTooltip\"] = 8192] = \"InheritTooltip\";\n /** Enables Interaction. */\n ConnectorConstraints[ConnectorConstraints[\"Interaction\"] = 4218] = \"Interaction\";\n /** Enables ReadOnly */\n ConnectorConstraints[ConnectorConstraints[\"ReadOnly\"] = 16384] = \"ReadOnly\";\n /** Enables or disables routing to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"LineRouting\"] = 32768] = \"LineRouting\";\n /** Enables or disables routing to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"InheritLineRouting\"] = 65536] = \"InheritLineRouting\";\n /** Enables or disables near node padding to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"ConnectToNearByNode\"] = 131072] = \"ConnectToNearByNode\";\n /** Enables or disables near port padding to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"ConnectToNearByPort\"] = 262144] = \"ConnectToNearByPort\";\n /** Enables or disables Enables or disables near port and node padding to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"ConnectToNearByElement\"] = 393216] = \"ConnectToNearByElement\";\n /**Enables or disables to inherit the value of segmentThumbShape */\n ConnectorConstraints[ConnectorConstraints[\"InheritSegmentThumbShape\"] = 524288] = \"InheritSegmentThumbShape\";\n /**Enables or disables to inherit the value of segmentThumbSize */\n ConnectorConstraints[ConnectorConstraints[\"InheritSegmentThumbSize\"] = 1048576] = \"InheritSegmentThumbSize\";\n /** Enables all constraints. */\n ConnectorConstraints[ConnectorConstraints[\"Default\"] = 2043454] = \"Default\";\n})(ConnectorConstraints || (ConnectorConstraints = {}));\n/**\n * Enables/Disables the annotation constraints\n * ReadOnly - Enables/Disables the ReadOnly Constraints\n * InheritReadOnly - Enables/Disables the InheritReadOnly Constraints\n * Select -Enables/Disable select support for the annotation\n * Drag - Enables/Disable drag support for the annotation\n * Resize - Enables/Disable resize support for the annotation\n * Rotate - Enables/Disable rotate support for the annotation\n * Interaction - Enables annotation to inherit the interaction option\n * None - Disable all annotation constraints\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar AnnotationConstraints;\n(function (AnnotationConstraints) {\n /** Enables/Disables the ReadOnly Constraints */\n AnnotationConstraints[AnnotationConstraints[\"ReadOnly\"] = 2] = \"ReadOnly\";\n /** Enables/Disables the InheritReadOnly Constraints */\n AnnotationConstraints[AnnotationConstraints[\"InheritReadOnly\"] = 4] = \"InheritReadOnly\";\n /** Enables/Disable select support for the annotation */\n AnnotationConstraints[AnnotationConstraints[\"Select\"] = 8] = \"Select\";\n /** Enables/Disable drag support for the annotation */\n AnnotationConstraints[AnnotationConstraints[\"Drag\"] = 16] = \"Drag\";\n /** Enables/Disable resize support for the annotation */\n AnnotationConstraints[AnnotationConstraints[\"Resize\"] = 32] = \"Resize\";\n /** Enables/Disable rotate support for the annotation */\n AnnotationConstraints[AnnotationConstraints[\"Rotate\"] = 64] = \"Rotate\";\n /** Enables or disables tool tip for the annotation */\n AnnotationConstraints[AnnotationConstraints[\"Tooltip\"] = 128] = \"Tooltip\";\n /** Enables annotation to inherit the interaction option */\n AnnotationConstraints[AnnotationConstraints[\"Interaction\"] = 120] = \"Interaction\";\n /** Disable all annotation Constraints */\n AnnotationConstraints[AnnotationConstraints[\"None\"] = 0] = \"None\";\n})(AnnotationConstraints || (AnnotationConstraints = {}));\n/**\n * Enables/Disables certain features of node\n * None - Disable all node Constraints\n * Select - Enables node to be selected\n * Drag - Enables node to be Dragged\n * Rotate - Enables node to be Rotate\n * Shadow - Enables node to display shadow\n * PointerEvents - Enables node to provide pointer option\n * Delete - Enables node to delete\n * InConnect - Enables node to provide in connect option\n * OutConnect - Enables node to provide out connect option\n * Individual - Enables node to provide individual resize option\n * Expandable - Enables node to provide Expandable option\n * AllowDrop - Enables node to provide allow to drop option\n * Inherit - Enables node to inherit the interaction option\n * ResizeNorthEast - Enable ResizeNorthEast of the node\n * ResizeEast - Enable ResizeEast of the node\n * ResizeSouthEast - Enable ResizeSouthEast of the node\n * ResizeSouth - Enable ResizeSouthWest of the node\n * ResizeSouthWest - Enable ResizeSouthWest of the node\n * ResizeSouth - Enable ResizeSouth of the node\n * ResizeSouthWest - Enable ResizeSouthWest of the node\n * ResizeWest - Enable ResizeWest of the node\n * ResizeNorth - Enable ResizeNorth of the node\n * Resize - Enables the Aspect ratio fo the node\n * AspectRatio - Enables the Aspect ratio fo the node\n * Tooltip - Enables or disables tool tip for the Nodes\n * InheritTooltip - Enables or disables tool tip for the Nodes\n * ReadOnly - Enables the ReadOnly support for Annotation\n * Default - Enables all constraints\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar NodeConstraints;\n(function (NodeConstraints) {\n /** Disable all node Constraints. */\n NodeConstraints[NodeConstraints[\"None\"] = 0] = \"None\";\n /** Enables node to be selected. */\n NodeConstraints[NodeConstraints[\"Select\"] = 2] = \"Select\";\n /** Enables node to be Dragged. */\n NodeConstraints[NodeConstraints[\"Drag\"] = 4] = \"Drag\";\n /** Enables node to be Rotate. */\n NodeConstraints[NodeConstraints[\"Rotate\"] = 8] = \"Rotate\";\n /** Enables node to display shadow. */\n NodeConstraints[NodeConstraints[\"Shadow\"] = 16] = \"Shadow\";\n /** Enables node to provide pointer option */\n NodeConstraints[NodeConstraints[\"PointerEvents\"] = 32] = \"PointerEvents\";\n /** Enables node to delete */\n NodeConstraints[NodeConstraints[\"Delete\"] = 64] = \"Delete\";\n /** Enables node to provide in connect option */\n NodeConstraints[NodeConstraints[\"InConnect\"] = 128] = \"InConnect\";\n /** Enables node to provide out connect option */\n NodeConstraints[NodeConstraints[\"OutConnect\"] = 256] = \"OutConnect\";\n /** Enables node to provide individual resize option */\n NodeConstraints[NodeConstraints[\"Individual\"] = 512] = \"Individual\";\n /** Enables node to provide Expandable option */\n NodeConstraints[NodeConstraints[\"Expandable\"] = 1024] = \"Expandable\";\n /** Enables node to provide allow to drop option */\n NodeConstraints[NodeConstraints[\"AllowDrop\"] = 2048] = \"AllowDrop\";\n /** Enables node to inherit the interaction option */\n NodeConstraints[NodeConstraints[\"Inherit\"] = 78] = \"Inherit\";\n /** Enable ResizeNorthEast of the node */\n NodeConstraints[NodeConstraints[\"ResizeNorthEast\"] = 4096] = \"ResizeNorthEast\";\n /** Enable ResizeEast of the node */\n NodeConstraints[NodeConstraints[\"ResizeEast\"] = 8192] = \"ResizeEast\";\n /** Enable ResizeSouthEast of the node */\n NodeConstraints[NodeConstraints[\"ResizeSouthEast\"] = 16384] = \"ResizeSouthEast\";\n /** Enable ResizeSouth of the node */\n NodeConstraints[NodeConstraints[\"ResizeSouth\"] = 32768] = \"ResizeSouth\";\n /** Enable ResizeSouthWest of the node */\n NodeConstraints[NodeConstraints[\"ResizeSouthWest\"] = 65536] = \"ResizeSouthWest\";\n /** Enable ResizeWest of the node */\n NodeConstraints[NodeConstraints[\"ResizeWest\"] = 131072] = \"ResizeWest\";\n /** Enable ResizeNorthWest of the node */\n NodeConstraints[NodeConstraints[\"ResizeNorthWest\"] = 262144] = \"ResizeNorthWest\";\n /** Enable ResizeNorth of the node */\n NodeConstraints[NodeConstraints[\"ResizeNorth\"] = 524288] = \"ResizeNorth\";\n /** Enable Resize of the node */\n NodeConstraints[NodeConstraints[\"Resize\"] = 1044480] = \"Resize\";\n /** Enables the Aspect ratio fo the node */\n NodeConstraints[NodeConstraints[\"AspectRatio\"] = 1048576] = \"AspectRatio\";\n /** Enables or disables tool tip for the Nodes */\n NodeConstraints[NodeConstraints[\"Tooltip\"] = 2097152] = \"Tooltip\";\n /** Enables or disables tool tip for the Nodes */\n NodeConstraints[NodeConstraints[\"InheritTooltip\"] = 4194304] = \"InheritTooltip\";\n /** Enables the ReadOnly support for Annotation */\n NodeConstraints[NodeConstraints[\"ReadOnly\"] = 8388608] = \"ReadOnly\";\n /** hide all resize support for node */\n NodeConstraints[NodeConstraints[\"HideThumbs\"] = 16777216] = \"HideThumbs\";\n /** Enables or disables child in parent for the swimLane node */\n NodeConstraints[NodeConstraints[\"AllowMovingOutsideLane\"] = 33554432] = \"AllowMovingOutsideLane\";\n /** Enables all constraints */\n NodeConstraints[NodeConstraints[\"Default\"] = 5240814] = \"Default\";\n})(NodeConstraints || (NodeConstraints = {}));\n/** Enables/Disables The element actions\n * None - Diables all element actions are none\n * ElementIsPort - Enable element action is port\n * ElementIsGroup - Enable element action as Group\n *\n * @private\n */\nvar ElementAction;\n(function (ElementAction) {\n /** Disables all element actions are none */\n ElementAction[ElementAction[\"None\"] = 0] = \"None\";\n /** Enable the element action is Port */\n ElementAction[ElementAction[\"ElementIsPort\"] = 2] = \"ElementIsPort\";\n /** Enable the element action as Group */\n ElementAction[ElementAction[\"ElementIsGroup\"] = 4] = \"ElementIsGroup\";\n /** Enable the element action if swimlaneHeader is rendered */\n ElementAction[ElementAction[\"HorizontalLaneHeader\"] = 8] = \"HorizontalLaneHeader\";\n})(ElementAction || (ElementAction = {}));\n/** Enables/Disables the handles of the selector\n * Rotate - Enable Rotate Thumb\n * ConnectorSource - Enable Connector source point\n * ConnectorTarget - Enable Connector target point\n * ResizeNorthEast - Enable ResizeNorthEast Resize\n * ResizeEast - Enable ResizeEast Resize\n * ResizeSouthEast - Enable ResizeSouthEast Resize\n * ResizeSouth - Enable ResizeSouth Resize\n * ResizeSouthWest - Enable ResizeSouthWest Resize\n * ResizeWest - Enable ResizeWest Resize\n * ResizeNorthWest - Enable ResizeNorthWest Resize\n * ResizeNorth - Enable ResizeNorth Resize\n * Default - Enables all constraints\n *\n * @private\n */\nvar ThumbsConstraints;\n(function (ThumbsConstraints) {\n /** Enable Rotate Thumb */\n ThumbsConstraints[ThumbsConstraints[\"Rotate\"] = 2] = \"Rotate\";\n /** Enable Connector source point */\n ThumbsConstraints[ThumbsConstraints[\"ConnectorSource\"] = 4] = \"ConnectorSource\";\n /** Enable Connector target point */\n ThumbsConstraints[ThumbsConstraints[\"ConnectorTarget\"] = 8] = \"ConnectorTarget\";\n /** Enable ResizeNorthEast Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeNorthEast\"] = 16] = \"ResizeNorthEast\";\n /** Enable ResizeEast Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeEast\"] = 32] = \"ResizeEast\";\n /** Enable ResizeSouthEast Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeSouthEast\"] = 64] = \"ResizeSouthEast\";\n /** Enable ResizeSouth Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeSouth\"] = 128] = \"ResizeSouth\";\n /** Enable ResizeSouthWest Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeSouthWest\"] = 256] = \"ResizeSouthWest\";\n /** Enable ResizeWest Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeWest\"] = 512] = \"ResizeWest\";\n /** Enable ResizeNorthWest Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeNorthWest\"] = 1024] = \"ResizeNorthWest\";\n /** Enable ResizeNorth Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeNorth\"] = 2048] = \"ResizeNorth\";\n /** Enables all constraints */\n ThumbsConstraints[ThumbsConstraints[\"Default\"] = 4094] = \"Default\";\n})(ThumbsConstraints || (ThumbsConstraints = {}));\n/**\n * Enables/Disables certain features of diagram\n * None - Disable DiagramConstraints constraints\n * Bridging - Enables/Disable Bridging support for connector\n * UndoRedo - Enables/Disable the Undo/Redo support\n * Tooltip - Enables/Disable Tooltip support\n * UserInteraction - Enables/Disable UserInteraction support for the diagram\n * ApiUpdate - Enables/Disable ApiUpdate support for the diagram\n * PageEditable - Enables/Disable PageEditable support for the diagram\n * Zoom - Enables/Disable Zoom support for the diagram\n * PanX - Enables/Disable PanX support for the diagram\n * PanY - Enables/Disable PanY support for the diagram\n * Pan - Enables/Disable Pan support the diagram\n * ZoomTextEdit - Enables/Disables zooming the text box while editing the text\n * Virtualization - Enables/Disable Virtualization support the diagram\n * Default - Enables/Disable all constraints\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar DiagramConstraints;\n(function (DiagramConstraints) {\n /** Disable DiagramConstraints constraints */\n DiagramConstraints[DiagramConstraints[\"None\"] = 1] = \"None\";\n /** Enables/Disable Bridging support for connector */\n DiagramConstraints[DiagramConstraints[\"Bridging\"] = 2] = \"Bridging\";\n /** Enables/Disable the Undo/Redo support */\n DiagramConstraints[DiagramConstraints[\"UndoRedo\"] = 4] = \"UndoRedo\";\n /** Enables/Disable Tooltip support */\n DiagramConstraints[DiagramConstraints[\"Tooltip\"] = 8] = \"Tooltip\";\n /** Enables/Disable UserInteraction support for the diagram */\n DiagramConstraints[DiagramConstraints[\"UserInteraction\"] = 16] = \"UserInteraction\";\n /** Enables/Disable ApiUpdate support for the diagram */\n DiagramConstraints[DiagramConstraints[\"ApiUpdate\"] = 32] = \"ApiUpdate\";\n /** Enables/Disable PageEditable support for the diagram */\n DiagramConstraints[DiagramConstraints[\"PageEditable\"] = 48] = \"PageEditable\";\n /** Enables/Disable Zoom support for the diagram */\n DiagramConstraints[DiagramConstraints[\"Zoom\"] = 64] = \"Zoom\";\n /** Enables/Disable PanX support for the diagram */\n DiagramConstraints[DiagramConstraints[\"PanX\"] = 128] = \"PanX\";\n /** Enables/Disable PanY support for the diagram */\n DiagramConstraints[DiagramConstraints[\"PanY\"] = 256] = \"PanY\";\n /** Enables/Disable Pan support the diagram */\n DiagramConstraints[DiagramConstraints[\"Pan\"] = 384] = \"Pan\";\n /** Enables/Disables zooming the text box while editing the text */\n DiagramConstraints[DiagramConstraints[\"ZoomTextEdit\"] = 512] = \"ZoomTextEdit\";\n /** Enables/Disable Virtualization support the diagram */\n DiagramConstraints[DiagramConstraints[\"Virtualization\"] = 1024] = \"Virtualization\";\n /** Enables/ Disable the line routing */\n DiagramConstraints[DiagramConstraints[\"LineRouting\"] = 2048] = \"LineRouting\";\n /** Enables/Disable all constraints */\n DiagramConstraints[DiagramConstraints[\"Default\"] = 500] = \"Default\";\n})(DiagramConstraints || (DiagramConstraints = {}));\n/**\n * Activates the diagram tools\n * None - Enables/Disable single select support for the diagram\n * SingleSelect - Enables/Disable single select support for the diagram\n * MultipleSelect - Enables/Disable MultipleSelect select support for the diagram\n * ZoomPan - Enables/Disable ZoomPan support for the diagram\n * DrawOnce - Enables/Disable continuousDraw support for the diagram\n * ContinuousDraw - Enables/Disable continuousDraw support for the diagram\n * Default - Enables/Disable all constraints\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar DiagramTools;\n(function (DiagramTools) {\n /** Disable all constraints */\n DiagramTools[DiagramTools[\"None\"] = 0] = \"None\";\n /** Enables/Disable single select support for the diagram */\n DiagramTools[DiagramTools[\"SingleSelect\"] = 1] = \"SingleSelect\";\n /** Enables/Disable MultipleSelect select support for the diagram */\n DiagramTools[DiagramTools[\"MultipleSelect\"] = 2] = \"MultipleSelect\";\n /** Enables/Disable ZoomPan support for the diagram */\n DiagramTools[DiagramTools[\"ZoomPan\"] = 4] = \"ZoomPan\";\n /** Enables/Disable DrawOnce support for the diagram */\n DiagramTools[DiagramTools[\"DrawOnce\"] = 8] = \"DrawOnce\";\n /** Enables/Disable continuousDraw support for the diagram */\n DiagramTools[DiagramTools[\"ContinuousDraw\"] = 16] = \"ContinuousDraw\";\n /** Enables/Disable all constraints */\n DiagramTools[DiagramTools[\"Default\"] = 3] = \"Default\";\n})(DiagramTools || (DiagramTools = {}));\n/**\n * Defines the container/canvas transform\n * Self - Sets the transform type as Self\n * Parent - Sets the transform type as Parent\n */\nvar Transform;\n(function (Transform) {\n /** Self - Sets the transform type as Self */\n Transform[Transform[\"Self\"] = 1] = \"Self\";\n /** Parent - Sets the transform type as Parent */\n Transform[Transform[\"Parent\"] = 2] = \"Parent\";\n})(Transform || (Transform = {}));\n/**\n * Defines the rendering mode for diagram\n * Canvas - Sets the rendering mode type as Canvas\n * Svg - Sets the rendering mode type as Svg\n */\nvar RenderMode;\n(function (RenderMode) {\n /** Canvas - Sets the rendering mode type as Canvas */\n RenderMode[RenderMode[\"Canvas\"] = 0] = \"Canvas\";\n /** Svg - Sets the rendering mode type as Svg */\n RenderMode[RenderMode[\"Svg\"] = 1] = \"Svg\";\n})(RenderMode || (RenderMode = {}));\n/**\n * Sets a combination of key modifiers, on recognition of which the command will be executed.They are\n * * None - no modifiers are pressed\n * * Control - ctrl key\n * * Meta - meta key im mac\n * * Alt - alt key\n * * Shift - shift key\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar KeyModifiers;\n(function (KeyModifiers) {\n /** No modifiers are pressed */\n KeyModifiers[KeyModifiers[\"None\"] = 0] = \"None\";\n /** The CTRL key */\n KeyModifiers[KeyModifiers[\"Control\"] = 1] = \"Control\";\n /** The Meta key pressed in Mac */\n KeyModifiers[KeyModifiers[\"Meta\"] = 1] = \"Meta\";\n /** The ALT key */\n KeyModifiers[KeyModifiers[\"Alt\"] = 2] = \"Alt\";\n /** The Shift key */\n KeyModifiers[KeyModifiers[\"Shift\"] = 4] = \"Shift\";\n})(KeyModifiers || (KeyModifiers = {}));\n/**\n * Sets the key value, on recognition of which the command will be executed. They are\n * * none - no key\n * * Number0 = The 0 key\n * * Number1 = The 1 key\n * * Number2 = The 2 key\n * * Number3 = The 3 key\n * * Number4 = The 4 key\n * * Number5 = The 5 key\n * * Number6 = The 6 key\n * * Number7 = The 7 key\n * * Number8 = The 8 key\n * * Number9 = The 9 key\n * * Number0 = The 0 key\n * * BackSpace = The BackSpace key\n * * F1 = The f1 key\n * * F2 = The f2 key\n * * F3 = The f3 key\n * * F4 = The f4 key\n * * F5 = The f5 key\n * * F6 = The f6 key\n * * F7 = The f7 key\n * * F8 = The f8 key\n * * F9 = The f9 key\n * * F10 = The f10 key\n * * F11 = The f11 key\n * * F12 = The f12 key\n * * A = The a key\n * * B = The b key\n * * C = The c key\n * * D = The d key\n * * E = The e key\n * * F = The f key\n * * G = The g key\n * * H = The h key\n * * I = The i key\n * * J = The j key\n * * K = The k key\n * * L = The l key\n * * M = The m key\n * * N = The n key\n * * O = The o key\n * * P = The p key\n * * Q = The q key\n * * R = The r key\n * * S = The s key\n * * T = The t key\n * * U = The u key\n * * V = The v key\n * * W = The w key\n * * X = The x key\n * * Y = The y key\n * * Z = The z key\n * * Left = The left key\n * * Right = The right key\n * * Top = The top key\n * * Bottom = The bottom key\n * * Escape = The Escape key\n * * Tab = The tab key\n * * Delete = The delete key\n * * Enter = The enter key\n * * The Space key\n * * The page up key\n * * The page down key\n * * The end key\n * * The home key\n * * The Minus\n * * The Plus\n * * The Star\n * * The Open Square Bracket\n * * The close Square Bracket\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar Keys;\n(function (Keys) {\n /** No key pressed */\n Keys[Keys[\"None\"] = null] = \"None\";\n /** The 0 key */\n Keys[Keys[\"Number0\"] = 0] = \"Number0\";\n /** The 1 key */\n Keys[Keys[\"Number1\"] = 1] = \"Number1\";\n /** The 2 key */\n Keys[Keys[\"Number2\"] = 2] = \"Number2\";\n /** The 3 key */\n Keys[Keys[\"Number3\"] = 3] = \"Number3\";\n /** The 4 key */\n Keys[Keys[\"Number4\"] = 4] = \"Number4\";\n /** The 5 key */\n Keys[Keys[\"Number5\"] = 5] = \"Number5\";\n /** The 6 key */\n Keys[Keys[\"Number6\"] = 6] = \"Number6\";\n /** The 7 key */\n Keys[Keys[\"Number7\"] = 7] = \"Number7\";\n /** The 8 key */\n Keys[Keys[\"Number8\"] = 8] = \"Number8\";\n /** The 9 key */\n Keys[Keys[\"Number9\"] = 9] = \"Number9\";\n /** The A key */\n Keys[Keys[\"A\"] = 65] = \"A\";\n /** The B key */\n Keys[Keys[\"B\"] = 66] = \"B\";\n /** The C key */\n Keys[Keys[\"C\"] = 67] = \"C\";\n /** The D key */\n Keys[Keys[\"D\"] = 68] = \"D\";\n /** The E key */\n Keys[Keys[\"E\"] = 69] = \"E\";\n /** The F key */\n Keys[Keys[\"F\"] = 70] = \"F\";\n /** The G key */\n Keys[Keys[\"G\"] = 71] = \"G\";\n /** The H key */\n Keys[Keys[\"H\"] = 72] = \"H\";\n /** The I key */\n Keys[Keys[\"I\"] = 73] = \"I\";\n /** The J key */\n Keys[Keys[\"J\"] = 74] = \"J\";\n /** The K key */\n Keys[Keys[\"K\"] = 75] = \"K\";\n /** The L key */\n Keys[Keys[\"L\"] = 76] = \"L\";\n /** The M key */\n Keys[Keys[\"M\"] = 77] = \"M\";\n /** The N key */\n Keys[Keys[\"N\"] = 78] = \"N\";\n /** The O key */\n Keys[Keys[\"O\"] = 79] = \"O\";\n /** The P key */\n Keys[Keys[\"P\"] = 80] = \"P\";\n /** The Q key */\n Keys[Keys[\"Q\"] = 81] = \"Q\";\n /** The R key */\n Keys[Keys[\"R\"] = 82] = \"R\";\n /** The S key */\n Keys[Keys[\"S\"] = 83] = \"S\";\n /** The T key */\n Keys[Keys[\"T\"] = 84] = \"T\";\n /** The U key */\n Keys[Keys[\"U\"] = 85] = \"U\";\n /** The V key */\n Keys[Keys[\"V\"] = 86] = \"V\";\n /** The W key */\n Keys[Keys[\"W\"] = 87] = \"W\";\n /** The X key */\n Keys[Keys[\"X\"] = 88] = \"X\";\n /** The Y key */\n Keys[Keys[\"Y\"] = 89] = \"Y\";\n /** The Z key */\n Keys[Keys[\"Z\"] = 90] = \"Z\";\n /** The left arrow key */\n Keys[Keys[\"Left\"] = 37] = \"Left\";\n /** The up arrow key */\n Keys[Keys[\"Up\"] = 38] = \"Up\";\n /** The right arrow key */\n Keys[Keys[\"Right\"] = 39] = \"Right\";\n /** The down arrow key */\n Keys[Keys[\"Down\"] = 40] = \"Down\";\n /** The Escape key */\n Keys[Keys[\"Escape\"] = 27] = \"Escape\";\n /** The Space key */\n Keys[Keys[\"Space\"] = 32] = \"Space\";\n /** The page up key */\n Keys[Keys[\"PageUp\"] = 33] = \"PageUp\";\n /** The Space key */\n Keys[Keys[\"PageDown\"] = 34] = \"PageDown\";\n /** The Space key */\n Keys[Keys[\"End\"] = 35] = \"End\";\n /** The Space key */\n Keys[Keys[\"Home\"] = 36] = \"Home\";\n /** The delete key */\n Keys[Keys[\"Delete\"] = 46] = \"Delete\";\n /** The tab key */\n Keys[Keys[\"Tab\"] = 9] = \"Tab\";\n /** The enter key */\n Keys[Keys[\"Enter\"] = 13] = \"Enter\";\n /** The BackSpace key */\n Keys[Keys[\"BackSpace\"] = 8] = \"BackSpace\";\n /** The F1 key */\n Keys[Keys[\"F1\"] = 112] = \"F1\";\n /** The F2 key */\n Keys[Keys[\"F2\"] = 113] = \"F2\";\n /** The F3 key */\n Keys[Keys[\"F3\"] = 114] = \"F3\";\n /** The F4 key */\n Keys[Keys[\"F4\"] = 115] = \"F4\";\n /** The F5 key */\n Keys[Keys[\"F5\"] = 116] = \"F5\";\n /** The F6 key */\n Keys[Keys[\"F6\"] = 117] = \"F6\";\n /** The F7 key */\n Keys[Keys[\"F7\"] = 118] = \"F7\";\n /** The F8 key */\n Keys[Keys[\"F8\"] = 119] = \"F8\";\n /** The F9 key */\n Keys[Keys[\"F9\"] = 120] = \"F9\";\n /** The F10 key */\n Keys[Keys[\"F10\"] = 121] = \"F10\";\n /** The F111 key */\n Keys[Keys[\"F11\"] = 122] = \"F11\";\n /** The F12 key */\n Keys[Keys[\"F12\"] = 123] = \"F12\";\n /** The Star */\n Keys[Keys[\"Star\"] = 56] = \"Star\";\n /** The Plus */\n Keys[Keys[\"Plus\"] = 187] = \"Plus\";\n /** The Minus */\n Keys[Keys[\"Minus\"] = 189] = \"Minus\";\n /** The Open Square bracket */\n Keys[Keys[\"BracketLeft\"] = 219] = \"BracketLeft\";\n /** The close Square bracket */\n Keys[Keys[\"BracketRight\"] = 221] = \"BracketRight\";\n})(Keys || (Keys = {}));\n/**\n * Enables/Disables certain actions of diagram\n * * Render - Indicates the diagram is in render state.\n * * PublicMethod - Indicates the diagram public method is in action.\n * * ToolAction - Indicates the diagram Tool is in action.\n * * UndoRedo - Indicates the diagram undo/redo is in action.\n * * TextEdit - Indicates the text editing is in progress.\n * * Group - Indicates the group is in progress.\n * * Clear - Indicates diagram have clear all.\n * * PreventClearSelection - prevents diagram from clear selection\n */\nvar DiagramAction;\n(function (DiagramAction) {\n /** Indicates the diagram is in render state.r */\n DiagramAction[DiagramAction[\"Render\"] = 2] = \"Render\";\n /** Indicates the diagram public method is in action. */\n DiagramAction[DiagramAction[\"PublicMethod\"] = 4] = \"PublicMethod\";\n /** Indicates the diagram Tool is in action. */\n DiagramAction[DiagramAction[\"ToolAction\"] = 8] = \"ToolAction\";\n /** Indicates the diagram undo/redo is in action. */\n DiagramAction[DiagramAction[\"UndoRedo\"] = 16] = \"UndoRedo\";\n /** Indicates the text editing is in progress. */\n DiagramAction[DiagramAction[\"TextEdit\"] = 32] = \"TextEdit\";\n /** Indicates the group is in progress. */\n DiagramAction[DiagramAction[\"Group\"] = 64] = \"Group\";\n /** Indicates diagram have clear all. */\n DiagramAction[DiagramAction[\"Clear\"] = 128] = \"Clear\";\n /** prevents diagram from clear selection. */\n DiagramAction[DiagramAction[\"PreventClearSelection\"] = 256] = \"PreventClearSelection\";\n /** Indicates whether drag or rotate tool has been activated */\n DiagramAction[DiagramAction[\"Interactions\"] = 512] = \"Interactions\";\n /** Use to prevent the history during some action in diagram */\n DiagramAction[DiagramAction[\"PreventHistory\"] = 1024] = \"PreventHistory\";\n /** Use to prevent the icon while expand a node in diagram */\n DiagramAction[DiagramAction[\"PreventIconsUpdate\"] = 2048] = \"PreventIconsUpdate\";\n /** Use to prevent the collection change event while dragging lane from palette and over it in diagram */\n DiagramAction[DiagramAction[\"PreventCollectionChangeOnDragOver\"] = 4096] = \"PreventCollectionChangeOnDragOver\";\n /** Use to prevent the z order on dragging the diagram elements */\n DiagramAction[DiagramAction[\"PreventZIndexOnDragging\"] = 8192] = \"PreventZIndexOnDragging\";\n /** Indicates whether group dragging has been activated */\n DiagramAction[DiagramAction[\"isGroupDragging\"] = 16384] = \"isGroupDragging\";\n /** Indicates whether drag is initiated by mouse */\n DiagramAction[DiagramAction[\"DragUsingMouse\"] = 32768] = \"DragUsingMouse\";\n /** Indicates whether decorator property is changed or not */\n DiagramAction[DiagramAction[\"DecoratorPropertyChange\"] = 65536] = \"DecoratorPropertyChange\";\n /** Avoid dropping of child nodes into the swim lane */\n DiagramAction[DiagramAction[\"PreventLaneContainerUpdate\"] = 131072] = \"PreventLaneContainerUpdate\";\n})(DiagramAction || (DiagramAction = {}));\n/**\n * Defines the Selector type to be drawn\n * None - Draws Normal selector with resize handles\n * Symbol - Draws only the rectangle for the selector\n */\nvar RendererAction;\n(function (RendererAction) {\n /** None - Draws Normal selector with resize handles */\n RendererAction[RendererAction[\"None\"] = 2] = \"None\";\n /** DrawSelectorBorder - Draws only the Border for the selector */\n RendererAction[RendererAction[\"DrawSelectorBorder\"] = 4] = \"DrawSelectorBorder\";\n /** PreventRenderSelector - Avoid the render of selector during interaction */\n RendererAction[RendererAction[\"PreventRenderSelector\"] = 8] = \"PreventRenderSelector\";\n})(RendererAction || (RendererAction = {}));\nvar RealAction;\n(function (RealAction) {\n RealAction[RealAction[\"None\"] = 0] = \"None\";\n RealAction[RealAction[\"PreventDrag\"] = 2] = \"PreventDrag\";\n RealAction[RealAction[\"PreventScale\"] = 4] = \"PreventScale\";\n RealAction[RealAction[\"PreventDataInit\"] = 8] = \"PreventDataInit\";\n /** Indicates when the diagram is scrolled horizontal using scroll bar */\n RealAction[RealAction[\"hScrollbarMoved\"] = 16] = \"hScrollbarMoved\";\n /** Indicates when the diagram is scrolled vertical using scroll bar */\n RealAction[RealAction[\"vScrollbarMoved\"] = 32] = \"vScrollbarMoved\";\n /** Indicates whether animation happens or not */\n RealAction[RealAction[\"AnimationClick\"] = 64] = \"AnimationClick\";\n /** Enable the group action */\n RealAction[RealAction[\"EnableGroupAction\"] = 128] = \"EnableGroupAction\";\n /** Indicate action in Progress */\n RealAction[RealAction[\"PanInProgress\"] = 256] = \"PanInProgress\";\n /** Indicate overview action */\n RealAction[RealAction[\"OverViewAction\"] = 512] = \"OverViewAction\";\n})(RealAction || (RealAction = {}));\n/** @private */\nvar ScrollActions;\n(function (ScrollActions) {\n ScrollActions[ScrollActions[\"None\"] = 0] = \"None\";\n /** Indicates when the scroll properties are changed using property change */\n ScrollActions[ScrollActions[\"PropertyChange\"] = 1024] = \"PropertyChange\";\n /** Indicates when the scroll properties are changed using interaction */\n ScrollActions[ScrollActions[\"Interaction\"] = 2048] = \"Interaction\";\n})(ScrollActions || (ScrollActions = {}));\n/** @private */\nvar NoOfSegments;\n(function (NoOfSegments) {\n NoOfSegments[NoOfSegments[\"Zero\"] = 0] = \"Zero\";\n NoOfSegments[NoOfSegments[\"One\"] = 1] = \"One\";\n NoOfSegments[NoOfSegments[\"Two\"] = 2] = \"Two\";\n NoOfSegments[NoOfSegments[\"Three\"] = 3] = \"Three\";\n NoOfSegments[NoOfSegments[\"Four\"] = 4] = \"Four\";\n NoOfSegments[NoOfSegments[\"Five\"] = 5] = \"Five\";\n})(NoOfSegments || (NoOfSegments = {}));\n/**\n * events of diagram\n *\n * @private\n */\nvar DiagramEvent;\n(function (DiagramEvent) {\n DiagramEvent[DiagramEvent[\"collectionChange\"] = 0] = \"collectionChange\";\n DiagramEvent[DiagramEvent[\"rotateChange\"] = 1] = \"rotateChange\";\n DiagramEvent[DiagramEvent[\"positionChange\"] = 2] = \"positionChange\";\n DiagramEvent[DiagramEvent[\"propertyChange\"] = 3] = \"propertyChange\";\n DiagramEvent[DiagramEvent[\"selectionChange\"] = 4] = \"selectionChange\";\n DiagramEvent[DiagramEvent[\"sizeChange\"] = 5] = \"sizeChange\";\n DiagramEvent[DiagramEvent[\"drop\"] = 6] = \"drop\";\n DiagramEvent[DiagramEvent[\"sourcePointChange\"] = 7] = \"sourcePointChange\";\n DiagramEvent[DiagramEvent[\"targetPointChange\"] = 8] = \"targetPointChange\";\n DiagramEvent[DiagramEvent[\"connectionChange\"] = 9] = \"connectionChange\";\n DiagramEvent[DiagramEvent[\"animationComplete\"] = 10] = \"animationComplete\";\n DiagramEvent[DiagramEvent[\"click\"] = 11] = \"click\";\n DiagramEvent[DiagramEvent[\"doubleClick\"] = 12] = \"doubleClick\";\n DiagramEvent[DiagramEvent[\"scrollChange\"] = 13] = \"scrollChange\";\n DiagramEvent[DiagramEvent[\"dragEnter\"] = 14] = \"dragEnter\";\n DiagramEvent[DiagramEvent[\"dragLeave\"] = 15] = \"dragLeave\";\n DiagramEvent[DiagramEvent[\"dragOver\"] = 16] = \"dragOver\";\n DiagramEvent[DiagramEvent[\"textEdit\"] = 17] = \"textEdit\";\n DiagramEvent[DiagramEvent[\"paletteSelectionChange\"] = 18] = \"paletteSelectionChange\";\n DiagramEvent[DiagramEvent[\"historyChange\"] = 19] = \"historyChange\";\n DiagramEvent[DiagramEvent[\"mouseEnter\"] = 20] = \"mouseEnter\";\n DiagramEvent[DiagramEvent[\"mouseLeave\"] = 21] = \"mouseLeave\";\n DiagramEvent[DiagramEvent[\"mouseOver\"] = 22] = \"mouseOver\";\n DiagramEvent[DiagramEvent[\"expandStateChange\"] = 23] = \"expandStateChange\";\n DiagramEvent[DiagramEvent[\"segmentCollectionChange\"] = 24] = \"segmentCollectionChange\";\n DiagramEvent[DiagramEvent[\"commandExecute\"] = 25] = \"commandExecute\";\n DiagramEvent[DiagramEvent[\"historyStateChange\"] = 26] = \"historyStateChange\";\n DiagramEvent[DiagramEvent[\"onUserHandleMouseDown\"] = 27] = \"onUserHandleMouseDown\";\n DiagramEvent[DiagramEvent[\"onUserHandleMouseUp\"] = 28] = \"onUserHandleMouseUp\";\n DiagramEvent[DiagramEvent[\"onUserHandleMouseEnter\"] = 29] = \"onUserHandleMouseEnter\";\n DiagramEvent[DiagramEvent[\"onUserHandleMouseLeave\"] = 30] = \"onUserHandleMouseLeave\";\n DiagramEvent[DiagramEvent[\"onImageLoad\"] = 31] = \"onImageLoad\";\n DiagramEvent[DiagramEvent[\"onDoBindingInit\"] = 32] = \"onDoBindingInit\";\n DiagramEvent[DiagramEvent[\"keyUp\"] = 33] = \"keyUp\";\n DiagramEvent[DiagramEvent[\"keyDown\"] = 34] = \"keyDown\";\n DiagramEvent[DiagramEvent[\"fixedUserHandleClick\"] = 35] = \"fixedUserHandleClick\";\n DiagramEvent[DiagramEvent[\"elementDraw\"] = 36] = \"elementDraw\";\n DiagramEvent[DiagramEvent[\"mouseWheel\"] = 37] = \"mouseWheel\";\n DiagramEvent[DiagramEvent[\"segmentChange\"] = 38] = \"segmentChange\";\n DiagramEvent[DiagramEvent[\"onFixedUserHandleMouseDown\"] = 39] = \"onFixedUserHandleMouseDown\";\n DiagramEvent[DiagramEvent[\"onFixedUserHandleMouseUp\"] = 40] = \"onFixedUserHandleMouseUp\";\n DiagramEvent[DiagramEvent[\"onFixedUserHandleMouseEnter\"] = 41] = \"onFixedUserHandleMouseEnter\";\n DiagramEvent[DiagramEvent[\"onFixedUserHandleMouseLeave\"] = 42] = \"onFixedUserHandleMouseLeave\";\n DiagramEvent[DiagramEvent[\"loaded\"] = 43] = \"loaded\";\n})(DiagramEvent || (DiagramEvent = {}));\n/** Enables/Disables certain features of port connection\n *\n * @aspNumberEnum\n * @IgnoreSingular\n */\nvar PortConstraints;\n(function (PortConstraints) {\n /** Disable all constraints */\n PortConstraints[PortConstraints[\"None\"] = 1] = \"None\";\n /** Enables connections with connector */\n PortConstraints[PortConstraints[\"Drag\"] = 2] = \"Drag\";\n /** Enables to create the connection when mouse hover on the port */\n PortConstraints[PortConstraints[\"Draw\"] = 4] = \"Draw\";\n /** Enables to only connect the target end of connector */\n PortConstraints[PortConstraints[\"InConnect\"] = 8] = \"InConnect\";\n /** Enables to only connect the source end of connector */\n PortConstraints[PortConstraints[\"OutConnect\"] = 16] = \"OutConnect\";\n /**Enables or disables the Tooltip for the ports*/\n PortConstraints[PortConstraints[\"ToolTip\"] = 32] = \"ToolTip\";\n /** Enables or disables the Tooltip for the ports */\n PortConstraints[PortConstraints[\"InheritTooltip\"] = 64] = \"InheritTooltip\";\n /** Enables all constraints */\n PortConstraints[PortConstraints[\"Default\"] = 24] = \"Default\";\n})(PortConstraints || (PortConstraints = {}));\n/**\n * Defines the context menu click\n * contextMenuClick - Sets the context menu click as contextMenuClick\n */\nvar contextMenuClick = \n/** contextMenuClick - Sets the context menu click as contextMenuClick */\n'contextMenuClick';\n/**\n * Defines the context menu open\n * contextMenuOpen - Sets the context menu open as contextMenuOpen\n */\nvar contextMenuOpen = \n/** contextMenuOpen - Sets the context menu open as contextMenuOpen */\n'contextMenuOpen';\n/**\n * Defines the context menu Before Item Render\n * contextMenuBeforeItemRender - Sets the context menu open as contextMenuBeforeItemRender\n */\nvar contextMenuBeforeItemRender = \n/** contextMenuBeforeItemRender - Sets the context menu open as contextMenuBeforeItemRender */\n'contextMenuBeforeItemRender';\n/**\n * Defines the visibility of the control points in the Bezier connector\n */\nvar ControlPointsVisibility;\n(function (ControlPointsVisibility) {\n /** None - Hides all the control points of the Bezier connector*/\n ControlPointsVisibility[ControlPointsVisibility[\"None\"] = 1] = \"None\";\n /** Source - Shows the source control point*/\n ControlPointsVisibility[ControlPointsVisibility[\"Source\"] = 2] = \"Source\";\n /** Target - Shows the target control point*/\n ControlPointsVisibility[ControlPointsVisibility[\"Target\"] = 4] = \"Target\";\n /** Intermediate - Shows the intermediate control points*/\n ControlPointsVisibility[ControlPointsVisibility[\"Intermediate\"] = 8] = \"Intermediate\";\n /** All - Shows all the control points of the Bezier connector*/\n ControlPointsVisibility[ControlPointsVisibility[\"All\"] = 14] = \"All\";\n})(ControlPointsVisibility || (ControlPointsVisibility = {}));\nvar BezierSmoothness;\n(function (BezierSmoothness) {\n /** Disable all smoothness Constraints. */\n BezierSmoothness[BezierSmoothness[\"None\"] = 0] = \"None\";\n /** Enables the SymmetricAngle for a bezier segment to the angle between the control point as same. */\n BezierSmoothness[BezierSmoothness[\"SymmetricAngle\"] = 2] = \"SymmetricAngle\";\n /** Enables the SymmetricDistance for bezier segment to the distance between the control point as same. */\n BezierSmoothness[BezierSmoothness[\"SymmetricDistance\"] = 4] = \"SymmetricDistance\";\n /** Enables the symmetric for bezier segment to the distance and angle between the control point as same. */\n BezierSmoothness[BezierSmoothness[\"Default\"] = 6] = \"Default\";\n})(BezierSmoothness || (BezierSmoothness = {}));\n\n/**\n * DiagramElement module defines the basic unit of diagram\n */\nvar DiagramElement = /** @__PURE__ @class */ (function () {\n function DiagramElement() {\n /**\n * Sets/Gets the reference point of the element\n * ```html\n * \n * ```\n * ```typescript\n * let stackPanel: StackPanel = new StackPanel();\n * stackPanel.offsetX = 300; stackPanel.offsetY = 200;\n * stackPanel.width = 100; stackPanel.height = 100;\n * stackPanel.style.fill = 'red';\n * stackPanel.pivot = { x: 0.5, y: 0.5 };\n * let diagram: Diagram = new Diagram({\n * ...\n * basicElements: [stackPanel],\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n */\n this.pivot = { x: 0.5, y: 0.5 };\n /**\n * Sets or gets whether the content of the element needs to be measured\n */\n this.isDirt = true;\n /**\n * set to true during print and eport\n */\n /** @private */\n this.isExport = false;\n /**\n * set scaling value for print and export\n */\n /** @private */\n this.exportScaleValue = { x: 0, y: 0 };\n /**\n * set scaling value for print and export\n */\n /** @private */\n this.exportScaleOffset = { x: 0, y: 0 };\n /**\n * Check whether style need to be apply or not\n */\n /** @private */\n this.canApplyStyle = true;\n /**\n * Sets or gets whether the content of the element to be visible\n */\n this.visible = true;\n /**\n * Sets/Gets the x-coordinate of the element\n */\n this.offsetX = 0;\n /**\n * Sets/Gets the y-coordinate of the element\n */\n this.offsetY = 0;\n /**\n * Set the corner of the element\n */\n this.cornerRadius = 0;\n /**\n * Sets/Gets the minimum height of the element\n */\n this.minHeight = undefined;\n /**\n * Sets/Gets the minimum width of the element\n */\n this.minWidth = undefined;\n /**\n * Sets/Gets the maximum width of the element\n */\n this.maxWidth = undefined;\n /**\n * Sets/Gets the maximum height of the element\n */\n this.maxHeight = undefined;\n /**\n * Sets/Gets the width of the element\n */\n this.width = undefined;\n /**\n * Sets/Gets the height of the element\n */\n this.height = undefined;\n /**\n * Sets/Gets the rotate angle of the element\n */\n this.rotateAngle = 0;\n /**\n * Sets/Gets the margin of the element\n */\n this.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n /**\n * Sets/Gets the allowed direction for connections to the port\n */\n this.connectionDirection = 'Auto';\n /**\n * Sets/Gets how the element has to be horizontally arranged with respect to its immediate parent\n * * Stretch - Stretches the diagram element throughout its immediate parent\n * * Left - Aligns the diagram element at the left of its immediate parent\n * * Right - Aligns the diagram element at the right of its immediate parent\n * * Center - Aligns the diagram element at the center of its immediate parent\n * * Auto - Aligns the diagram element based on the characteristics of its immediate parent\n */\n this.horizontalAlignment = 'Auto';\n /**\n * Sets/Gets how the element has to be vertically arranged with respect to its immediate parent\n * * Stretch - Stretches the diagram element throughout its immediate parent\n * * Top - Aligns the diagram element at the top of its immediate parent\n * * Bottom - Aligns the diagram element at the bottom of its immediate parent\n * * Center - Aligns the diagram element at the center of its immediate parent\n * * Auto - Aligns the diagram element based on the characteristics of its immediate parent\n */\n this.verticalAlignment = 'Auto';\n /**\n * Sets/Gets the mirror image of diagram element in both horizontal and vertical directions\n * * FlipHorizontal - Translate the diagram element throughout its immediate parent\n * * FlipVertical - Rotate the diagram element throughout its immediate parent\n */\n this.flip = 'None';\n /**\n * Sets/Gets the element that is to be flipped in assigned flip direction along with the node\n */\n this.flipMode = 'All';\n /**\n * Sets whether the element has to be aligned with respect to a point/with respect to its immediate parent\n * * Point - Diagram elements will be aligned with respect to a point\n * * Object - Diagram elements will be aligned with respect to its immediate parent\n */\n this.relativeMode = 'Point';\n /**\n * Sets whether the element has to be transformed based on its parent or not\n * * Self - Sets the transform type as Self\n * * Parent - Sets the transform type as Parent\n */\n this.transform = Transform.Self | Transform.Parent;\n /**\n * Sets the style of the element\n */\n this.style = { fill: 'white', strokeColor: 'black', opacity: 1, strokeWidth: 1 };\n /**\n * Gets the minimum size that is required by the element\n */\n this.desiredSize = new Size();\n /**\n * Gets the size that the element will be rendered\n */\n this.actualSize = new Size();\n /**\n * Gets the rotate angle that is set to the immediate parent of the element\n */\n this.parentTransform = 0;\n /** @private */\n this.preventContainer = false;\n /**\n * Gets/Set the boolean value for the element\n */\n this.isSvgRender = false;\n /**\n * Gets/Sets the boundary of the element\n */\n this.bounds = new Rect(0, 0, 0, 0);\n /**\n * Defines the appearance of the shadow of the element\n */\n this.shadow = null;\n /**\n * Defines the description of the diagram element\n */\n this.description = '';\n /**\n * Defines whether the element has to be measured or not\n */\n this.staticSize = false;\n /**\n * Defines the shape of the diagram element\n */\n this.shapeType = '';\n /**\n * check whether the element is rect or not\n */\n this.isRectElement = false;\n /** @private */\n this.isCalculateDesiredSize = true;\n /**\n * Set the offset values for container in flipping\n */\n /** @private */\n this.flipOffset = { x: 0, y: 0 };\n /**\n * Defines whether the element is group or port\n */\n /** @private */\n this.elementActions = ElementAction.None;\n /** @private */\n this.inversedAlignment = true;\n //private variables\n this.position = undefined;\n this.unitMode = undefined;\n /** @private */\n this.float = false;\n this.floatingBounds = undefined;\n }\n // public constructor() {\n // this.id = randomId();\n // }\n /**\n * Sets the offset of the element with respect to its parent \\\n *\n * @returns { void }Sets the offset of the element with respect to its parent\\\n * @param {number} x - provide the x value.\n * @param {number} y - provide the y value.\n * @param {UnitMode} mode - provide the id value.\n *\n * @private\n */\n DiagramElement.prototype.setOffsetWithRespectToBounds = function (x, y, mode) {\n this.unitMode = mode;\n this.position = { x: x, y: y };\n };\n /**\n * Gets the position of the element with respect to its parent \\\n *\n * @returns { PointModel } Gets the position of the element with respect to its parent\\\n * @param {Size} size - provide the x value.\n *\n * @private\n */\n DiagramElement.prototype.getAbsolutePosition = function (size) {\n if (this.position !== undefined) {\n if (this.unitMode === 'Absolute') {\n return this.position;\n }\n else {\n return {\n x: this.position.x * size.width, y: this.position.y * size.height\n };\n }\n }\n return undefined;\n };\n Object.defineProperty(DiagramElement.prototype, \"outerBounds\", {\n get: function () {\n return this.floatingBounds || this.bounds;\n },\n /**\n * used to set the outer bounds value \\\n *\n * @returns { void } used to set the outer bounds value.\\\n * @param {Rect} bounds - provide the id value.\n *\n * @private\n */\n set: function (bounds) {\n this.floatingBounds = bounds;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Measures the minimum space that the element requires \\\n *\n * @returns { void } Measures the minimum space that the element requires.\\\n * @param {Size} availableSize - provide the id value.\n * @param {Object} obj - provide the id value.\n * @param {Function} callback - provide the id value.\n *\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/ban-types\n DiagramElement.prototype.measure = function (availableSize, obj, callback) {\n var width = this.width !== undefined ? this.width : (availableSize.width || 0) - this.margin.left - this.margin.right;\n var height = this.height !== undefined ? this.height : (availableSize.height || 0) - this.margin.top - this.margin.bottom;\n if (this.id) {\n if (height === 0 && (this.elementActions & ElementAction.HorizontalLaneHeader)) {\n height = this.actualSize.height;\n }\n }\n this.desiredSize = new Size(width, height);\n if (this.isCalculateDesiredSize) {\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n }\n return this.desiredSize;\n };\n /**\n * Arranges the element \\\n *\n * @returns { PointModel } Arranges the element\\\n * @param {Size} desiredSize - provide the x value.\n *\n * @private\n */\n DiagramElement.prototype.arrange = function (desiredSize) {\n this.actualSize = desiredSize;\n this.updateBounds();\n return this.actualSize;\n };\n /**\n * Updates the bounds of the element \\\n *\n * @returns { void } Updates the bounds of the element\\\n *\n * @private\n */\n DiagramElement.prototype.updateBounds = function () {\n this.bounds = getBounds(this);\n };\n /**\n * Validates the size of the element with respect to its minimum and maximum size \\\n *\n * @returns { Size } Validates the size of the element with respect to its minimum and maximum size.\\\n * @param {Size} desiredSize - provide the id value.\n * @param {Size} availableSize - provide the id value.\n *\n * @private\n */\n DiagramElement.prototype.validateDesiredSize = function (desiredSize, availableSize) {\n //Empty canvas\n if (this.isRectElement && !this.width && !this.minWidth && !this.maxWidth) {\n desiredSize.width = 50;\n }\n if (this.isRectElement && !this.height && !this.minHeight && !this.maxHeight) {\n desiredSize.height = 50;\n }\n if (desiredSize === undefined || this.width !== undefined &&\n this.height !== undefined) {\n desiredSize = desiredSize || new Size();\n desiredSize.width = this.width === undefined ? (availableSize.width || 0)\n - this.margin.left - this.margin.right : this.width;\n desiredSize.height = this.height === undefined ? (availableSize.height || 0)\n - this.margin.top - this.margin.bottom : this.height;\n }\n //Considering min values\n if (this.minWidth !== undefined) {\n desiredSize.width = Math.max(desiredSize.width, this.minWidth);\n }\n if (this.minHeight !== undefined) {\n desiredSize.height = Math.max(desiredSize.height, this.minHeight);\n }\n //Considering max values\n if (this.maxWidth !== undefined && this.maxWidth !== 0) {\n desiredSize.width = Math.min(desiredSize.width, this.maxWidth);\n }\n if (this.maxHeight !== undefined && this.maxHeight !== 0) {\n desiredSize.height = Math.min(desiredSize.height, this.maxHeight);\n }\n return desiredSize;\n };\n return DiagramElement;\n}());\n\nvar __extends$2 = (undefined && undefined.__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})();\n/**\n * Container module is used to group related objects\n */\nvar Container = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Container, _super);\n function Container() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * Gets/Sets the space between the container and its immediate children\n */\n _this.padding = new Thickness(0, 0, 0, 0);\n //private members\n _this.desiredBounds = undefined;\n /** @private */\n _this.measureChildren = true;\n /** @private */\n _this.prevRotateAngle = 0;\n return _this;\n }\n /**\n * returns whether the container has child elements or not\n */\n Container.prototype.hasChildren = function () {\n if (this.children !== undefined && this.children.length > 0) {\n return true;\n }\n return false;\n };\n /**\n * Measures the minimum space that the container requires\n *\n * @param {Size} availableSize\n * @param {string} id\n * @param {Function} callback\n */\n Container.prototype.measure = function (availableSize, id, callback) {\n // measure the element and find the desired size\n this.desiredBounds = undefined;\n var desired = undefined;\n var child;\n var childBounds;\n if (this.hasChildren()) {\n //Measuring the children\n for (var i = 0; i < this.children.length; i++) {\n child = this.children[parseInt(i.toString(), 10)];\n if (child.horizontalAlignment === 'Stretch' && !availableSize.width) {\n availableSize.width = child.bounds.width;\n }\n if (child.verticalAlignment === 'Stretch' && !availableSize.height) {\n availableSize.height = child.bounds.height;\n }\n var force = child.horizontalAlignment === 'Stretch' || child.verticalAlignment === 'Stretch';\n if (this.measureChildren || force || (child instanceof Container && child.measureChildren !== undefined)) {\n child.measure(availableSize, id, callback);\n }\n childBounds = this.GetChildrenBounds(child);\n if (child.horizontalAlignment !== 'Stretch' && child.verticalAlignment !== 'Stretch') {\n if (this.desiredBounds === undefined) {\n this.desiredBounds = childBounds;\n }\n else {\n this.desiredBounds.uniteRect(childBounds);\n }\n }\n else if (this.actualSize && !this.actualSize.width && !this.actualSize.height &&\n !child.preventContainer && child.horizontalAlignment === 'Stretch' && child.verticalAlignment === 'Stretch') {\n if (this.desiredBounds === undefined) {\n this.desiredBounds = child.bounds;\n }\n else {\n this.desiredBounds.uniteRect(child.bounds);\n }\n }\n }\n if (this.desiredBounds !== undefined && this.rotateAngle !== 0) {\n var offsetPt = {\n x: this.desiredBounds.x + this.desiredBounds.width * this.pivot.x,\n y: this.desiredBounds.y + this.desiredBounds.height * this.pivot.y\n };\n var newPoint = rotatePoint(this.rotateAngle, undefined, undefined, offsetPt);\n this.desiredBounds.x = newPoint.x - this.desiredBounds.width * this.pivot.x;\n this.desiredBounds.y = newPoint.y - this.desiredBounds.height * this.pivot.y;\n }\n /**\n * Adding padding to the group bounds during initial rendering and for the group selection\n */\n if (this.desiredBounds !== undefined) {\n this.desiredBounds.width += this.padding.left + this.padding.right;\n this.desiredBounds.height += this.padding.top + this.padding.bottom;\n this.desiredBounds.x -= this.padding.left;\n this.desiredBounds.y -= this.padding.top;\n }\n if (this.desiredBounds) {\n desired = new Size(this.desiredBounds.width, this.desiredBounds.height);\n }\n }\n desired = this.validateDesiredSize(desired, availableSize);\n this.stretchChildren(desired);\n this.desiredSize = desired;\n return desired;\n };\n /**\n * Arranges the container and its children\n *\n * @param {Size} desiredSize - provide the desiredSize value\n */\n Container.prototype.arrange = function (desiredSize) {\n var child;\n var childBounds = this.desiredBounds;\n if (childBounds) {\n var x = this.offsetX;\n var y = this.offsetY;\n this.offsetX = childBounds.x + childBounds.width * this.pivot.x;\n this.offsetY = childBounds.y + childBounds.height * this.pivot.y;\n // container has rotateAngle\n if (this.hasChildren()) {\n //Measuring the children\n for (var i = 0; i < this.children.length; i++) {\n child = this.children[parseInt(i.toString(), 10)];\n var arrange = false;\n if (child.horizontalAlignment === 'Stretch') {\n child.offsetX = this.offsetX;\n child.parentTransform = this.parentTransform + this.rotateAngle;\n if (this.flip && (this.elementActions & ElementAction.ElementIsGroup)) {\n child.parentTransform = (this.flip === 'Horizontal' || this.flip === 'Vertical') ?\n -child.parentTransform : child.parentTransform;\n }\n arrange = true;\n }\n if (child.verticalAlignment === 'Stretch') {\n child.offsetY = this.offsetY;\n child.parentTransform = this.parentTransform + this.rotateAngle;\n arrange = true;\n }\n if (arrange || this.measureChildren || (child instanceof Container && child.measureChildren !== undefined)) {\n child.arrange(child.desiredSize);\n }\n //EJ2-839298 - Connector draw cursor is not enabled while hover the group node port\n if (i === 0) {\n this.outerBounds = child.outerBounds;\n }\n else {\n this.outerBounds.uniteRect(child.outerBounds);\n }\n }\n }\n }\n this.actualSize = desiredSize;\n this.updateBounds();\n this.prevRotateAngle = this.rotateAngle;\n return desiredSize;\n };\n //protected methods\n /**\n * Stretches the child elements based on the size of the container\n *\n * @param {Size} size - provide the size value\n */\n Container.prototype.stretchChildren = function (size) {\n if (this.hasChildren()) {\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child.horizontalAlignment === 'Stretch' || child.desiredSize.width === undefined) {\n child.desiredSize.width = size.width - child.margin.left - child.margin.right;\n }\n if (child.verticalAlignment === 'Stretch' || child.desiredSize.height === undefined) {\n child.desiredSize.height = size.height - child.margin.top - child.margin.bottom;\n }\n if (child instanceof Container) {\n child.stretchChildren(child.desiredSize);\n }\n }\n }\n };\n /**\n * Considers the padding of the element when measuring its desired size\n * @param {Size} size - provide the size value\n */\n Container.prototype.applyPadding = function (size) {\n size.width += this.padding.left + this.padding.right;\n size.height += this.padding.top + this.padding.bottom;\n };\n /**\n * Finds the offset of the child element with respect to the container\n *\n * @param {DiagramElement} child - provide the child value\n * @param {PointModel} center - provide the center value\n */\n Container.prototype.findChildOffsetFromCenter = function (child, center) {\n var topLeft = { x: center.x - child.desiredSize.width / 2, y: center.y - child.desiredSize.height / 2 };\n var offset = getOffset(topLeft, child);\n //Rotate based on child rotate angle\n offset = rotatePoint(child.rotateAngle, center.x, center.y, offset);\n //Rotate based on parent pivot\n offset = rotatePoint(this.rotateAngle + this.parentTransform, this.offsetX, this.offsetY, offset);\n child.offsetX = offset.x;\n child.offsetY = offset.y;\n };\n //private methods - check its need\n Container.prototype.GetChildrenBounds = function (child) {\n var childSize = child.desiredSize.clone();\n var diffAngle = child.rotateAngle - this.rotateAngle;\n var refPoint = { x: child.offsetX, y: child.offsetY };\n var left = refPoint.x - childSize.width * child.pivot.x;\n var top = refPoint.y - childSize.height * child.pivot.y;\n var right = left + childSize.width;\n var bottom = top + childSize.height;\n var topLeft = { x: left, y: top };\n var topRight = { x: right, y: top };\n var bottomLeft = { x: left, y: bottom };\n var bottomRight = { x: right, y: bottom };\n topLeft = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, topLeft);\n topRight = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, topRight);\n bottomLeft = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, bottomLeft);\n bottomRight = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, bottomRight);\n if (this.rotateAngle !== 0) {\n topLeft = rotatePoint(-this.rotateAngle, undefined, undefined, topLeft);\n topRight = rotatePoint(-this.rotateAngle, undefined, undefined, topRight);\n bottomLeft = rotatePoint(-this.rotateAngle, undefined, undefined, bottomLeft);\n bottomRight = rotatePoint(-this.rotateAngle, undefined, undefined, bottomRight);\n }\n return Rect.toBounds([topLeft, topRight, bottomLeft, bottomRight]);\n };\n return Container;\n}(DiagramElement));\n\nvar __extends$3 = (undefined && undefined.__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})();\n/**\n * TextElement is used to display text/annotations\n */\nvar TextElement = /** @__PURE__ @class */ (function (_super) {\n __extends$3(TextElement, _super);\n /**\n * set the id for each element\n */\n function TextElement() {\n var _this = _super.call(this) || this;\n /**\n * sets or gets the image source\n */\n _this.textContent = '';\n /** @private */\n _this.canMeasure = true;\n /**Gets or sets the reference mode for annotation rotation. */\n /** @private */\n _this.rotationReference = 'Parent';\n /** @private */\n _this.isLaneOrientation = false;\n /** @private */\n _this.canConsiderBounds = true;\n /** @private */\n _this.annotationVisibility = 'Visible';\n /**\n * sets the hyperlink color to blue\n */\n _this.hyperlink = {\n color: 'blue'\n };\n /** @private */\n _this.doWrap = true;\n _this.textNodes = [];\n /**\n * Defines the appearance of the text element\n */\n _this.style = {\n color: 'black', fill: 'transparent', strokeColor: 'black',\n strokeWidth: 1, fontFamily: 'Arial', fontSize: 12, whiteSpace: 'CollapseSpace',\n textWrapping: 'WrapWithOverflow', textAlign: 'Center', italic: false, bold: false,\n textDecoration: 'None', strokeDashArray: '', opacity: 5, gradient: null,\n textOverflow: 'Wrap'\n };\n _this.style.fill = 'transparent';\n _this.style.strokeColor = 'transparent';\n return _this;\n }\n Object.defineProperty(TextElement.prototype, \"content\", {\n /**\n * gets the content for the text element \\\n *\n * @returns { string | SVGElement } gets the content for the text element.\\\n *\n * @private\n */\n get: function () {\n return this.textContent;\n },\n /**\n * sets the content for the text element \\\n *\n * @returns { void } sets the content for the text element.\\\n * @param {string} value - provide the id value.\n *\n * @private\n */\n set: function (value) {\n if (this.textContent !== value) {\n this.textContent = value;\n this.isDirt = true;\n this.doWrap = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextElement.prototype, \"childNodes\", {\n /**\n * gets the content for the text element \\\n *\n * @returns { string | SVGElement } gets the content for the text element.\\\n *\n * @private\n */\n get: function () {\n return this.textNodes;\n },\n /**\n * sets the content for the text element \\\n *\n * @returns { void } sets the content for the text element.\\\n * @param {SubTextElement[]} value - provide the id value.\n *\n * @private\n */\n set: function (value) {\n this.textNodes = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextElement.prototype, \"wrapBounds\", {\n /**\n * gets the wrapBounds for the text \\\n *\n * @returns { string | SVGElement } gets the wrapBounds for the text.\\\n *\n * @private\n */\n get: function () {\n return this.textWrapBounds;\n },\n /**\n * sets the wrapBounds for the text \\\n *\n * @returns { void } sets the wrapBounds for the text.\\\n * @param {TextBounds} value - provide the id value.\n *\n * @private\n */\n set: function (value) {\n this.textWrapBounds = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * sets the wrapBounds for the text \\\n *\n * @returns { void } sets the wrapBounds for the text.\\\n *\n * @private\n */\n TextElement.prototype.refreshTextElement = function () {\n this.isDirt = true;\n };\n /**\n *Measures the minimum size that is required for the text element\\\n *\n * @returns { Size } Measures the minimum size that is required for the text element.\\\n * @param {Size} availableSize - provide the id value.\n *\n * @private\n */\n TextElement.prototype.measure = function (availableSize) {\n var size;\n if (this.isDirt && this.canMeasure) {\n size = measureText(this, this.style, this.content, this.isLaneOrientation ?\n availableSize.height : (this.width || availableSize.width));\n }\n else {\n size = this.desiredSize;\n }\n if (this.width === undefined || this.height === undefined) {\n this.desiredSize = new Size(size.width, size.height);\n }\n else {\n this.desiredSize = new Size(this.width, this.height);\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n * Arranges the text element\\\n *\n * @returns { Size } Arranges the text element.\\\n * @param {Size} desiredSize - provide the id value.\n *\n * @private\n */\n TextElement.prototype.arrange = function (desiredSize) {\n if (desiredSize.width !== this.actualSize.width || desiredSize.height !== this.actualSize.height || this.isDirt) {\n this.doWrap = true;\n }\n this.actualSize = desiredSize;\n this.updateBounds();\n this.isDirt = false;\n return this.actualSize;\n };\n return TextElement;\n}(DiagramElement));\n\nvar __extends$4 = (undefined && undefined.__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})();\n/**\n * Canvas module is used to define a plane(canvas) and to arrange the children based on margin\n */\nvar Canvas = /** @__PURE__ @class */ (function (_super) {\n __extends$4(Canvas, _super);\n function Canvas() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * Not applicable for canvas\n *\n * @private\n */\n _this.measureChildren = undefined;\n return _this;\n }\n /**\n * Measures the minimum space that the canvas requires \\\n *\n * @returns { Size } Measures the minimum space that the canvas requires .\\\n * @param {string} id - provide the id value.\n * @param {Function} callback - provide the Connector value.\n *\n * @private\n */\n Canvas.prototype.measure = function (availableSize, id, callback) {\n var desired = undefined;\n var desiredBounds = undefined;\n if (this.hasChildren()) {\n //Measuring the children\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child instanceof TextElement) {\n if (child.canMeasure) {\n availableSize.width = availableSize.width || this.maxWidth || this.minWidth;\n child.measure(availableSize);\n }\n }\n else if (!(child instanceof TextElement)) {\n child.measure(availableSize, id, callback);\n }\n var childSize = child.desiredSize.clone();\n if (child.rotateAngle !== 0) {\n childSize = rotateSize(childSize, child.rotateAngle);\n }\n var right = childSize.width + child.margin.right;\n var bottom = childSize.height + child.margin.bottom;\n var childBounds = new Rect(child.margin.left, child.margin.top, right, bottom);\n if (child.float) {\n var position = child.getAbsolutePosition(childSize);\n if (position !== undefined) {\n continue;\n }\n }\n if ((!(child instanceof TextElement)) || (child instanceof TextElement && child.canConsiderBounds)) {\n if (desiredBounds === undefined) {\n desiredBounds = childBounds;\n }\n else {\n desiredBounds.uniteRect(childBounds);\n }\n }\n }\n if (desiredBounds) {\n var leftMargin = 0;\n var topMargin = 0;\n leftMargin = Math.max(desiredBounds.left, 0);\n topMargin = Math.max(desiredBounds.top, 0);\n desired = new Size(desiredBounds.width + leftMargin, desiredBounds.height + topMargin);\n }\n }\n desired = _super.prototype.validateDesiredSize.call(this, desired, availableSize);\n _super.prototype.stretchChildren.call(this, desired);\n //Considering padding values\n desired.width += this.padding.left + this.padding.right;\n desired.height += this.padding.top + this.padding.bottom;\n this.desiredSize = desired;\n return desired;\n };\n /**\n * Arranges the child elements of the canvas\n */\n Canvas.prototype.arrange = function (desiredSize, isStack) {\n this.outerBounds = new Rect();\n if (this.hasChildren()) {\n //let y: number;\n //let x: number;\n var y = this.offsetY - desiredSize.height * this.pivot.y + this.padding.top;\n var x = this.offsetX - desiredSize.width * this.pivot.x + this.padding.left;\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if ((child.transform & Transform.Parent) !== 0) {\n child.parentTransform = this.parentTransform + this.rotateAngle;\n if (this.flip !== 'None' || this.elementActions & ElementAction.ElementIsGroup) {\n // EJ2-911095 - Restrict negative rotate angle for the non flipped text\n child.parentTransform = ((this.flip === 'Horizontal' || this.flip === 'Vertical') && (!(child instanceof TextElement && (this.flipMode === 'Port' || this.flipMode === 'Label' || this.flipMode === 'PortAndLabel' || this.flipMode === 'None')))) ?\n -child.parentTransform : child.parentTransform;\n }\n var childSize = child.desiredSize.clone();\n var topLeft = void 0;\n var center = { x: 0, y: 0 };\n var childX = x;\n var childY = y;\n if (child.relativeMode === 'Point') {\n var position = child.getAbsolutePosition(desiredSize);\n if (position !== undefined) {\n childX += position.x;\n childY += position.y;\n }\n }\n if (child.relativeMode === 'Object') {\n topLeft = this.alignChildBasedOnParent(child, childSize, desiredSize, childX, childY);\n // 896059: Update the flip position of the node to get the docking point of node and connector\n child.flip = this.flip;\n }\n else {\n topLeft = this.alignChildBasedOnaPoint(child, childX, childY);\n }\n center = { x: topLeft.x + childSize.width / 2, y: topLeft.y + childSize.height / 2 };\n _super.prototype.findChildOffsetFromCenter.call(this, child, center);\n }\n if (isStack && (child.horizontalAlignment === 'Stretch' || child.verticalAlignment === 'Stretch')) {\n child.arrange(desiredSize);\n }\n else {\n if (child instanceof TextElement && child.canMeasure) {\n child.arrange(child.desiredSize);\n this.outerBounds.uniteRect(child.outerBounds);\n }\n else if (!(child instanceof TextElement)) {\n child.arrange(child.desiredSize);\n this.outerBounds.uniteRect(child.outerBounds);\n }\n }\n }\n }\n this.actualSize = desiredSize;\n this.updateBounds();\n this.outerBounds.uniteRect(this.bounds);\n return desiredSize;\n };\n //Aligns the child element based on its parent\n Canvas.prototype.alignChildBasedOnParent = function (child, childSize, parentSize, x, y) {\n switch (child.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n x += child.margin.left;\n break;\n case 'Right':\n x += parentSize.width - childSize.width - child.margin.right;\n break;\n case 'Stretch':\n case 'Center':\n x += parentSize.width / 2 - childSize.width / 2;\n break;\n }\n switch (child.verticalAlignment) {\n case 'Auto':\n case 'Top':\n y += child.margin.top;\n break;\n case 'Bottom':\n y += parentSize.height - childSize.height - child.margin.bottom;\n break;\n case 'Stretch':\n case 'Center':\n y += parentSize.height / 2 - childSize.height / 2;\n break;\n }\n return { x: x, y: y };\n };\n //Aligns the child elements based on a point\n Canvas.prototype.alignChildBasedOnaPoint = function (child, x, y) {\n x += child.margin.left - child.margin.right;\n y += child.margin.top - child.margin.bottom;\n switch (child.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n x = child.inversedAlignment ? x : (x - child.desiredSize.width);\n break;\n case 'Stretch':\n case 'Center':\n x -= child.desiredSize.width * child.pivot.x;\n break;\n case 'Right':\n x = child.inversedAlignment ? (x - child.desiredSize.width) : x;\n break;\n }\n switch (child.verticalAlignment) {\n case 'Auto':\n case 'Top':\n y = child.inversedAlignment ? y : (y - child.desiredSize.height);\n break;\n case 'Stretch':\n case 'Center':\n y -= child.desiredSize.height * child.pivot.y;\n break;\n case 'Bottom':\n y = child.inversedAlignment ? (y - child.desiredSize.height) : y;\n break;\n }\n return { x: x, y: y };\n };\n return Canvas;\n}(Container));\n\n/**\n * BasicShapeDictionary defines the shape of the built-in basic shapes \\\n *\n * @returns { string } BasicShapeDictionary defines the shape of the built-in basic shapes .\\\n * @param {string} shape - provide the element value.\n *\n * @private\n */\nfunction getBasicShape(shape) {\n return basicShapes[shape.toString()];\n}\n// eslint-disable-next-line prefer-const\nvar basicShapes = {\n //Rectangle,\n 'Rectangle': 'M0,0 L50,0 L50,50 L0,50 z',\n //Ellipse,\n 'Ellipse': 'M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5' +\n 'C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z',\n //Hexagon,\n 'Hexagon': 'M30,0 L60,0 L90,30 L60,60 L30,60 L0,30 L30,0 z',\n //Parallelogram,\n 'Parallelogram': 'M30,0 L60,0 L45,30 L15,30 z',\n //Triangle,\n 'Triangle': 'M45,0 L90,45 L0,45 L45,0 z',\n //Plus,\n 'Plus': 'M696.6084,158.2656 L674.8074,158.2656 L674.8074,136.4656 L658.4084,136.4656 L658.4084,158.2656 L636.6084,158.2656' +\n 'L636.6084,174.6646 L658.4084,174.6646 L658.4084,196.4656 L674.8074,196.4656 L674.8074,174.6646 L696.6084,174.6646' +\n 'L696.6084,158.2656 z',\n //Star,\n 'Star': 'M540.3643,137.9336 L546.7973,159.7016 L570.3633,159.7296 L550.7723,171.9366 L558.9053,194.9966 L540.3643,179.4996' +\n 'L521.8223,194.9966 L529.9553,171.9366 L510.3633,159.7296 L533.9313,159.7016 L540.3643,137.9336 z',\n //Pentagon,\n 'Pentagon': 'M30,0 L60,30 L50,70 L10,70 L0,30 L30,0 z',\n //Heptagon,\n 'Heptagon': 'M223.7783,195.7134 L207.1303,174.8364 L213.0713,148.8034 L237.1303,137.2174 L261.1883,148.8034 L267.1303,174.8364' +\n 'L250.4813,195.7134 L223.7783,195.7134 z',\n //Octagon,\n 'Octagon': 'M98.7319,196.4653 L81.1579,178.8923 L81.1579,154.0393 L98.7319,136.4653 L123.5849,136.4653' +\n 'L141.1579,154.0393 L141.1579,178.8923 L123.5849,196.4653 L98.7319,196.4653 z',\n //Trapezoid,\n 'Trapezoid': 'M127.2842,291.4492 L95.0322,291.4492 L81.1582,256.3152 L141.1582,256.3152 L127.2842,291.4492 z',\n //Decagon,\n 'Decagon': 'M657.3379,302.4141 L642.3369,291.5161 L636.6089,273.8821 L642.3369,256.2481 L657.3379,245.3511 L675.8789,245.3511' +\n 'L690.8789,256.2481 L696.6089,273.8821' +\n 'L690.8789,291.5161 L675.8789,302.4141 L657.3379,302.4141 z',\n //RightTriangle,\n 'RightTriangle': 'M836.293,292.9238 L776.293,292.9238 L776.293,254.8408 L836.293,292.9238 z',\n //Cylinder,\n 'Cylinder': 'M 542.802,362.009C 542.802,368.452 525.341,373.676 503.802,373.676C 482.263,373.676 464.802,368.452 464.802,362.009' +\n 'L 464.802,466.484C 464.802,472.928 482.263,478.151 503.802,478.151' +\n 'C 525.341,478.151 542.802,472.928 542.802,466.484L 542.802,362.016C 542.802,368.459 525.341,373.534 503.802,373.534' +\n 'C 482.263,373.534 464.802,368.31 464.802,361.867' +\n 'L 464.802,362.016C 464.802,355.572 482.263,350.349 503.802,350.349C 525.341,350.349 542.802,355.572 542.802,362.016',\n //Diamond,\n 'Diamond': 'M397.784,287.875 L369.5,316.159 L341.216,287.875 L369.5,259.591 L397.784,287.875 z'\n};\n\nvar __extends$5 = (undefined && undefined.__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})();\n/**\n * PathElement takes care of how to align the path based on offsetX and offsetY\n */\nvar PathElement = /** @__PURE__ @class */ (function (_super) {\n __extends$5(PathElement, _super);\n /**\n * set the id for each element\n */\n function PathElement() {\n var _this = _super.call(this) || this;\n /**\n * Gets or sets the geometry of the path element\n */\n _this.pathData = '';\n /**\n * Gets/Sets whether the path has to be transformed to fit the given x,y, width, height\n */\n _this.transformPath = true;\n /**\n * Gets/Sets the equivalent path, that will have the origin as 0,0\n */\n _this.absolutePath = '';\n /** @private */\n _this.canMeasurePath = false;\n //Private variables\n /** @private */\n _this.absoluteBounds = new Rect();\n return _this;\n }\n Object.defineProperty(PathElement.prototype, \"data\", {\n /**\n * Gets the geometry of the path element\\\n *\n * @returns { string | SVGElement } Gets the geometry of the path element.\\\n *\n * @private\n */\n get: function () {\n return this.pathData;\n },\n /**\n * Sets the geometry of the path element \\\n *\n * @returns { void } Sets the geometry of the path element.\\\n * @param {string} value - provide the id value.\n *\n * @private\n */\n set: function (value) {\n if (this.pathData !== value) {\n this.pathData = value;\n this.isDirt = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * getPoints methods \\\n *\n * @returns { PointModel[] } Sets the geometry of the path element.\\\n *\n * @private\n */\n PathElement.prototype.getPoints = function () {\n var _this = this;\n if (!this.pointTimer) {\n this.pointTimer = setTimeout(function () {\n _this.points = null;\n _this.pointTimer = null;\n }, 200);\n }\n this.points = this.points || findSegmentPoints(this);\n return translatePoints(this, this.points);\n };\n /**\n * Measures the minimum space that is required to render the element \\\n *\n * @returns { Size } Measures the minimum space that is required to render the element.\\\n * @param {Size} availableSize - provide the id value.\n *\n * @private\n */\n PathElement.prototype.measure = function (availableSize) {\n //Performance issue - Avoiding measuring the connector path\n if (this.staticSize && this.width !== undefined && this.height !== undefined) {\n this.absoluteBounds = new Rect(this.offsetX - this.width * this.pivot.x, this.offsetY - this.height * this.pivot.y, this.width, this.height);\n }\n else if (this.isDirt && (this.transformPath || (this.width === undefined || this.height === undefined))\n && (!this.absoluteBounds || this.absoluteBounds.height === 0) || this.canMeasurePath) {\n //Measure the element only whent the path data is changed/ size is not specified\n this.absoluteBounds = measurePath(this.data ? this.data : '');\n }\n if (this.width === undefined) {\n this.desiredSize = new Size(this.absoluteBounds.width, this.height || this.absoluteBounds.height);\n }\n else if (this.height === undefined) {\n this.desiredSize = new Size(this.width || this.absoluteBounds.width, this.absoluteBounds.height);\n }\n else {\n this.desiredSize = new Size(this.width, this.height);\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n this.canMeasurePath = false;\n return this.desiredSize;\n };\n /**\n * Arranges the path element \\\n *\n * @returns { Size } Arranges the path element.\\\n * @param {Size} desiredSize - provide the id value.\n *\n * @private\n */\n PathElement.prototype.arrange = function (desiredSize) {\n if (this.isDirt || this.actualSize.width !== desiredSize.width || this.actualSize.height !== desiredSize.height) {\n this.isDirt = true;\n this.absolutePath = this.updatePath(this.data, this.absoluteBounds, desiredSize);\n if (!this.staticSize) {\n this.points = null;\n }\n }\n this.actualSize = this.desiredSize;\n this.updateBounds();\n this.isDirt = false;\n return this.actualSize;\n };\n /**\n * Translates the path to 0,0 and scales the path based on the actual size \\\n *\n * @returns { Size } Arranges the path element.\\\n * @param {string} pathData - provide the id value.\n * @param {Rect} bounds - provide the id value.\n * @param {Size} actualSize - provide the id value.\n *\n * @private\n */\n PathElement.prototype.updatePath = function (pathData, bounds, actualSize) {\n var isScale = false;\n var newPathString = '';\n var scaleX = -bounds.x;\n var scaleY = -bounds.y;\n var arrayCollection = [];\n if (actualSize.width !== bounds.width || actualSize.height !== bounds.height) {\n scaleX = actualSize.width / Number(bounds.width ? bounds.width : 1);\n scaleY = actualSize.height / Number(bounds.height ? bounds.height : 1);\n isScale = true;\n }\n arrayCollection = processPathData(pathData);\n arrayCollection = splitArrayCollection(arrayCollection);\n if ((isScale || this.isDirt) && this.transformPath) {\n newPathString = transformPath(arrayCollection, scaleX, scaleY, isScale, bounds.x, bounds.y, 0, 0);\n }\n else {\n newPathString = getPathString(arrayCollection);\n }\n isScale = false;\n return newPathString;\n };\n return PathElement;\n}(DiagramElement));\n\nvar __extends$6 = (undefined && undefined.__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})();\n/**\n * ImageElement defines a basic image elements\n */\nvar ImageElement = /** @__PURE__ @class */ (function (_super) {\n __extends$6(ImageElement, _super);\n /**\n * set the id for each element\n */\n function ImageElement() {\n var _this = _super.call(this) || this;\n /**\n * sets or gets the image source\n */\n _this.imageSource = '';\n /**\n * sets scaling factor of the image\n */\n _this.imageScale = 'None';\n /**\n * sets the alignment of the image\n */\n _this.imageAlign = 'None';\n /**\n * Sets how to stretch the image\n */\n _this.stretch = 'Stretch';\n return _this;\n }\n Object.defineProperty(ImageElement.prototype, \"source\", {\n /**\n * Gets the source for the image element\n */\n /**\n * Gets the source for the image element \\\n *\n * @returns { void }Gets the source for the image element.\\\n *\n * @private\n */\n get: function () {\n return this.imageSource;\n },\n /**\n * Sets the source for the image element \\\n *\n * @returns { void }Sets the source for the image element.\\\n * @param {string} value - provide the id value.\n *\n * @private\n */\n set: function (value) {\n this.imageSource = value;\n this.isDirt = true;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Measures minimum space that is required to render the image \\\n *\n * @returns { Size }Measures minimum space that is required to render the image.\\\n * @param {Size} availableSize - provide the id value.\n * @param {Object} id - provide the id value.\n * @param {Function} callback - provide the id value.\n *\n * @private\n */\n ImageElement.prototype.measure = function (availableSize, id, callback) {\n if (this.isDirt && (this.stretch !== 'Stretch' || this.width === undefined && this.height === undefined)) {\n this.contentSize = measureImage(this.source, this.contentSize, id, callback);\n this.isDirt = false;\n }\n if (this.width !== undefined && this.height !== undefined) {\n this.desiredSize = new Size(this.width, this.height);\n this.contentSize = this.desiredSize;\n }\n else {\n this.desiredSize = this.contentSize;\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n * Arranges the image\n * @param {Size} desiredSize\n */\n /**\n * Arranges the image \\\n *\n * @returns { Size }Arranges the image.\\\n * @param {Size} desiredSize - provide the id value.\n *\n * @private\n */\n ImageElement.prototype.arrange = function (desiredSize) {\n this.actualSize = new Size(this.desiredSize.width, this.desiredSize.height);\n this.updateBounds();\n return this.actualSize;\n };\n return ImageElement;\n}(DiagramElement));\n\nvar __extends$7 = (undefined && undefined.__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})();\n/**\n * NativeElement defines the basic native elements\n */\nvar DiagramNativeElement = /** @__PURE__ @class */ (function (_super) {\n __extends$7(DiagramNativeElement, _super);\n /**\n * set the id for each element \\\n *\n * @returns { void } set the id for each element.\\\n * @param {string} nodeId - provide the id value.\n * @param {string} diagramId - provide the id value.\n *\n * @private\n */\n function DiagramNativeElement(nodeId, diagramId) {\n var _this = _super.call(this) || this;\n _this.data = '';\n /**\n * set the node id\n */\n _this.nodeId = '';\n /**\n * set the diagram id\n */\n _this.diagramId = '';\n /**\n * sets scaling factor of the Native Element\n */\n _this.scale = 'Stretch';\n _this.diagramId = diagramId;\n _this.nodeId = nodeId;\n return _this;\n }\n Object.defineProperty(DiagramNativeElement.prototype, \"content\", {\n /**\n * get the id for each element \\\n *\n * @returns { string | SVGElement } get the id for each element.\\\n *\n * @private\n */\n get: function () {\n return this.data;\n },\n /**\n * sets the geometry of the native element \\\n *\n * @returns { void } sets the geometry of the native element.\\\n * @param {string | SVGElement} value - provide the id value.\n *\n * @private\n */\n set: function (value) {\n this.data = value;\n if (!this.canReset) {\n this.canReset = true;\n this.template = getContent(this, false);\n this.canReset = false;\n this.isDirt = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n *Measures minimum space that is required to render the Native Element \\\n *\n * @returns { Size }Measures minimum space that is required to render the Native Element.\\\n * @param {Size} availableSize - provide the id value.\n *\n * @private\n */\n DiagramNativeElement.prototype.measure = function (availableSize) {\n if (this.isDirt) {\n var rect = measureNativeContent(this.template);\n this.contentSize = new Size();\n this.contentSize.width = rect.width;\n this.contentSize.height = rect.height;\n var x = rect.x;\n var y = rect.y;\n this.templatePosition = { x: x, y: y };\n this.isDirt = false;\n }\n if (this.width === undefined || this.height === undefined) {\n var getAvailableSize = measureNativeSvg(this.template);\n this.desiredSize = new Size(getAvailableSize.width, getAvailableSize.height);\n }\n else {\n this.desiredSize = new Size(this.width, this.height);\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n *Arranges the Native Element \\\n *\n * @returns { Size }Arranges the Native Element.\\\n * @param {Size} desiredSize - provide the id value.\n *\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DiagramNativeElement.prototype.arrange = function (desiredSize) {\n this.actualSize = new Size(this.desiredSize.width, this.desiredSize.height);\n this.updateBounds();\n return this.actualSize;\n };\n return DiagramNativeElement;\n}(DiagramElement));\n\nvar __extends$8 = (undefined && undefined.__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$2 = (undefined && undefined.__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/**\n * Defines the tooltip that should be shown when the mouse hovers over node.\n * An object that defines the description, appearance and alignments of tooltip\n */\nvar DiagramTooltip = /** @__PURE__ @class */ (function (_super) {\n __extends$8(DiagramTooltip, _super);\n function DiagramTooltip() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property('')\n ], DiagramTooltip.prototype, \"content\", void 0);\n __decorate$2([\n Property('TopLeft')\n ], DiagramTooltip.prototype, \"position\", void 0);\n __decorate$2([\n Property('Mouse')\n ], DiagramTooltip.prototype, \"relativeMode\", void 0);\n __decorate$2([\n Property(true)\n ], DiagramTooltip.prototype, \"showTipPointer\", void 0);\n __decorate$2([\n Property('auto')\n ], DiagramTooltip.prototype, \"width\", void 0);\n __decorate$2([\n Property('auto')\n ], DiagramTooltip.prototype, \"height\", void 0);\n __decorate$2([\n Property('Auto')\n ], DiagramTooltip.prototype, \"openOn\", void 0);\n __decorate$2([\n Property()\n ], DiagramTooltip.prototype, \"animation\", void 0);\n __decorate$2([\n Property(false)\n ], DiagramTooltip.prototype, \"isSticky\", void 0);\n return DiagramTooltip;\n}(ChildProperty));\n/**\n * initTooltip method \\\n *\n * @returns { Tooltip } initTooltip method .\\\n * @param {Diagram} diagram - provide the points value.\n *\n * @private\n */\nfunction initTooltip(diagram) {\n var tooltipOption = new Tooltip;\n tooltipOption = updateTooltipContent(diagram.tooltip, tooltipOption);\n var tooltip = new Tooltip(tooltipOption);\n tooltip.beforeCollision = beforeCollision;\n tooltip.beforeOpen = beforeOpen;\n tooltip.cssClass = 'e-diagram-tooltip';\n tooltip.opensOn = 'custom';\n tooltip.appendTo('#' + diagram.element.id);\n tooltip.close();\n return tooltip;\n}\n/**\n * beforeOpen method \\\n *\n * @returns { void } beforeOpen method .\\\n * @param {TooltipEventArgs} args - provide the points value.\n *\n * @private\n */\nfunction beforeOpen(args) {\n if ((this.content === '' || this.content === undefined)) {\n args.element.style.display = 'none';\n }\n}\n/**\n * beforeCollision method \\\n *\n * @returns { void } beforeCollision method .\\\n * @param {TooltipEventArgs} args - provide the points value.\n *\n * @private\n */\nfunction beforeCollision(args) {\n if ((args.collidedPosition && args.collidedPosition !== this.position)) {\n args.element.style.display = 'none';\n }\n}\n/**\n * updateTooltip method \\\n *\n * @returns { Tooltip } updateTooltip method .\\\n * @param {Diagram} diagram - provide the points value.\n * @param {NodeModel | ConnectorModel} node - provide the points value.\n *\n * @private\n */\nfunction updateTooltip(diagram, node) {\n //let tooltip: DiagramTooltipModel;\n var tooltipObject = diagram.tooltipObject;\n var tooltip = node ? node.tooltip : diagram.tooltip;\n updateTooltipContent(tooltip, tooltipObject);\n return tooltipObject;\n}\n/**\n * updateTooltipContent method \\\n *\n * @returns { Tooltip } updateTooltipContent method .\\\n * @param {DiagramTooltipModel} tooltip - provide the points value.\n * @param {Tooltip} tooltipObject - provide the points value.\n *\n * @private\n */\nfunction updateTooltipContent(tooltip, tooltipObject) {\n if (tooltip.content) {\n tooltipObject.content = tooltip.content;\n //Task 834121: Content-Security-Policy support for diagram\n if (typeof tooltip.content === 'string') {\n var contentTemp = function () {\n return tooltip.content;\n };\n tooltipObject.content = initializeCSPTemplate(contentTemp);\n }\n tooltipObject.position = tooltip.position;\n tooltipObject.showTipPointer = tooltip.showTipPointer;\n tooltipObject.width = tooltip.width;\n tooltipObject.height = tooltip.height;\n if (!tooltip.animation) {\n tooltipObject.animation = { close: { effect: 'None' } };\n }\n else {\n tooltipObject.animation = tooltip.animation;\n }\n }\n else {\n tooltipObject.close();\n }\n return tooltipObject;\n}\n\nvar __extends$9 = (undefined && undefined.__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$3 = (undefined && undefined.__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/**\n * Defines the behavior of connection ports\n */\nvar Port = /** @__PURE__ @class */ (function (_super) {\n __extends$9(Port, _super);\n // tslint:disable-next-line:no-any\n function Port(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n _this.inEdges = [];\n _this.outEdges = [];\n return _this;\n }\n __decorate$3([\n Property('')\n ], Port.prototype, \"id\", void 0);\n __decorate$3([\n Property('Center')\n ], Port.prototype, \"horizontalAlignment\", void 0);\n __decorate$3([\n Property('Center')\n ], Port.prototype, \"verticalAlignment\", void 0);\n __decorate$3([\n Complex({}, Margin)\n ], Port.prototype, \"margin\", void 0);\n __decorate$3([\n Property(12)\n ], Port.prototype, \"width\", void 0);\n __decorate$3([\n Property(12)\n ], Port.prototype, \"height\", void 0);\n __decorate$3([\n Complex({}, ShapeStyle)\n ], Port.prototype, \"style\", void 0);\n __decorate$3([\n Property('Square')\n ], Port.prototype, \"shape\", void 0);\n __decorate$3([\n Property('Auto')\n ], Port.prototype, \"connectionDirection\", void 0);\n __decorate$3([\n Property(PortVisibility.Connect)\n ], Port.prototype, \"visibility\", void 0);\n __decorate$3([\n Property('')\n ], Port.prototype, \"pathData\", void 0);\n __decorate$3([\n Property(PortConstraints.Default)\n ], Port.prototype, \"constraints\", void 0);\n __decorate$3([\n Property()\n ], Port.prototype, \"addInfo\", void 0);\n __decorate$3([\n Property()\n ], Port.prototype, \"outEdges\", void 0);\n __decorate$3([\n Property()\n ], Port.prototype, \"inEdges\", void 0);\n __decorate$3([\n Complex({}, DiagramTooltip)\n ], Port.prototype, \"tooltip\", void 0);\n return Port;\n}(ChildProperty));\n/**\n * Defines the behavior of a port, that sticks to a point\n */\nvar PointPort = /** @__PURE__ @class */ (function (_super) {\n __extends$9(PointPort, _super);\n function PointPort(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n /**\n * getClassName method \\\n *\n * @returns { string } toBounds method .\\\n *\n * @private\n */\n PointPort.prototype.getClassName = function () {\n return 'PointPort';\n };\n __decorate$3([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], PointPort.prototype, \"offset\", void 0);\n return PointPort;\n}(Port));\n/**\n * Defines the behavior of a port, that sticks to a point\n */\nvar PathPort = /** @__PURE__ @class */ (function (_super) {\n __extends$9(PathPort, _super);\n function PathPort(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n /**\n * getClassName method \\\n *\n * @returns { string } toBounds method .\\\n *\n * @private\n */\n PathPort.prototype.getClassName = function () {\n return 'PathPort';\n };\n __decorate$3([\n Property(0.5)\n ], PathPort.prototype, \"offset\", void 0);\n __decorate$3([\n Complex({ x: 0, y: 0 }, Point)\n ], PathPort.prototype, \"displacement\", void 0);\n __decorate$3([\n Property('Center')\n ], PathPort.prototype, \"alignment\", void 0);\n return PathPort;\n}(Port));\n\nvar __extends$a = (undefined && undefined.__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$4 = (undefined && undefined.__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/**\n * Defines the hyperlink for the annotations in the nodes/connectors\n */\nvar Hyperlink = /** @__PURE__ @class */ (function (_super) {\n __extends$a(Hyperlink, _super);\n function Hyperlink() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$4([\n Property('blue')\n ], Hyperlink.prototype, \"color\", void 0);\n __decorate$4([\n Property('')\n ], Hyperlink.prototype, \"content\", void 0);\n __decorate$4([\n Property('')\n ], Hyperlink.prototype, \"link\", void 0);\n __decorate$4([\n Property('None')\n ], Hyperlink.prototype, \"textDecoration\", void 0);\n __decorate$4([\n Property('NewTab')\n ], Hyperlink.prototype, \"hyperlinkOpenState\", void 0);\n return Hyperlink;\n}(ChildProperty));\n/**\n * Defines the textual description of nodes/connectors\n */\nvar Annotation = /** @__PURE__ @class */ (function (_super) {\n __extends$a(Annotation, _super);\n // tslint:disable-next-line:no-any\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function Annotation(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n if (!defaultValue.id) {\n if (parent.parentObj && parent.parentObj.propName && parent.parentObj.propName === 'phases') {\n _this.id = parent.parentObj.id;\n }\n else {\n _this.id = randomId();\n }\n }\n return _this;\n }\n __decorate$4([\n Property('')\n ], Annotation.prototype, \"content\", void 0);\n __decorate$4([\n Property(undefined)\n ], Annotation.prototype, \"template\", void 0);\n __decorate$4([\n Property('String')\n ], Annotation.prototype, \"annotationType\", void 0);\n __decorate$4([\n Property(true)\n ], Annotation.prototype, \"visibility\", void 0);\n __decorate$4([\n Property(AnnotationConstraints.InheritReadOnly)\n ], Annotation.prototype, \"constraints\", void 0);\n __decorate$4([\n Complex(undefined, Hyperlink)\n ], Annotation.prototype, \"hyperlink\", void 0);\n __decorate$4([\n Property('')\n ], Annotation.prototype, \"id\", void 0);\n __decorate$4([\n Property()\n ], Annotation.prototype, \"width\", void 0);\n __decorate$4([\n Property()\n ], Annotation.prototype, \"height\", void 0);\n __decorate$4([\n Property(0)\n ], Annotation.prototype, \"rotateAngle\", void 0);\n __decorate$4([\n Property('Parent')\n ], Annotation.prototype, \"rotationReference\", void 0);\n __decorate$4([\n Complex({ strokeWidth: 0, strokeColor: 'transparent', fill: 'transparent' }, TextStyle)\n ], Annotation.prototype, \"style\", void 0);\n __decorate$4([\n Property('Center')\n ], Annotation.prototype, \"horizontalAlignment\", void 0);\n __decorate$4([\n Property('Center')\n ], Annotation.prototype, \"verticalAlignment\", void 0);\n __decorate$4([\n Complex({}, Margin)\n ], Annotation.prototype, \"margin\", void 0);\n __decorate$4([\n Complex({ top: undefined, bottom: undefined, left: undefined, right: undefined }, Margin)\n ], Annotation.prototype, \"dragLimit\", void 0);\n __decorate$4([\n Property('Shape')\n ], Annotation.prototype, \"type\", void 0);\n __decorate$4([\n Complex({}, DiagramTooltip)\n ], Annotation.prototype, \"tooltip\", void 0);\n __decorate$4([\n Property()\n ], Annotation.prototype, \"addInfo\", void 0);\n return Annotation;\n}(ChildProperty));\n/**\n * Defines the textual description of nodes/connectors with respect to bounds\n */\nvar ShapeAnnotation = /** @__PURE__ @class */ (function (_super) {\n __extends$a(ShapeAnnotation, _super);\n /* eslint-disable */\n function ShapeAnnotation(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n // eslint-disable-next-line valid-jsdoc\n /**\n * @private\n * Returns the module of class ShapeAnnotation\n */\n ShapeAnnotation.prototype.getClassName = function () {\n return 'ShapeAnnotation';\n };\n __decorate$4([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], ShapeAnnotation.prototype, \"offset\", void 0);\n return ShapeAnnotation;\n}(Annotation));\n/**\n * Defines the connector annotation\n */\nvar PathAnnotation = /** @__PURE__ @class */ (function (_super) {\n __extends$a(PathAnnotation, _super);\n /* eslint-disable */\n function PathAnnotation(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n /* eslint-enable */\n /**\n * Returns the module of class PathAnnotation.\n *\n * @returns {string} Returns the module of class PathAnnotation.\n * @private\n */\n PathAnnotation.prototype.getClassName = function () {\n return 'PathAnnotation';\n };\n __decorate$4([\n Property(0.5)\n ], PathAnnotation.prototype, \"offset\", void 0);\n __decorate$4([\n Complex({ x: 0, y: 0 }, Point)\n ], PathAnnotation.prototype, \"displacement\", void 0);\n __decorate$4([\n Property('Center')\n ], PathAnnotation.prototype, \"alignment\", void 0);\n __decorate$4([\n Property(false)\n ], PathAnnotation.prototype, \"segmentAngle\", void 0);\n return PathAnnotation;\n}(Annotation));\n\n/**\n *ShapeDictionary defines the shape of the default nodes and ports \\\n *\n * @returns { string } ShapeDictionary defines the shape of the default nodes and ports.\\\n * @param {PortShapes} shape - provide the element value.\n *\n * @private\n */\nfunction getPortShape(shape) {\n return portShapes[shape.toString()];\n}\n/**\n *ShapeDictionary defines the shape of the default nodes and ports \\\n *\n * @returns { string } ShapeDictionary defines the shape of the default nodes and ports.\\\n * @param {DecoratorShapes} shape - provide the element value.\n * @param {DecoratorModel} decorator - provide the element value.\n *\n * @private\n */\nfunction getDecoratorShape(shape, decorator) {\n if (shape === 'Custom') {\n return decorator.pathData;\n }\n return decoratorShapes[\"\" + shape];\n}\nfunction getSegmentThumbShapeHorizontal(shapes) {\n return segmentThumbShapeHorizontal[\"\" + shapes];\n}\nfunction getSegmentThumbShapeVertical(shapes) {\n return segmentThumbShapeVertical[\"\" + shapes];\n}\n/**\n *sets the path data for different icon shapes \\\n *\n * @returns { string } sets the path data for different icon shapes\\\n * @param {IconShapeModel} icon - provide the element value.\n *\n * @private\n */\nfunction getIconShape(icon) {\n var data;\n switch (icon.shape) {\n case 'Minus':\n data = 'M0,50 L100,50';\n break;\n case 'Plus':\n data = 'M0,-50 L0,50 M-50,0 L50,0';\n break;\n case 'ArrowUp':\n data = 'M0,100 L50,0 L100,100 Z';\n break;\n case 'ArrowDown':\n data = 'M0,0 L50,100 L100,0 Z';\n break;\n case 'Path':\n data = icon.pathData;\n break;\n }\n return data;\n}\n// eslint-disable-next-line prefer-const\nvar portShapes = {\n 'X': 'M14,14 L106,106 M106,14 L14,106',\n 'Circle': 'M0,50 A50,50,0 1 1 100,50 A50,50,0 1 1 0,50 Z',\n 'Square': 'M0,0 L10,0 L10,10 L0,10 z'\n};\n// eslint-disable-next-line prefer-const\nvar decoratorShapes = {\n 'OpenArrow': 'M15.9,23 L5,16 L15.9,9 L17,10.7 L8.7,16 L17,21.3Z',\n 'Square': 'M0,0 L10,0 L10,10 L0,10 z',\n 'Fletch': 'M14.8,10c0,0-3.5,6,0.2,12c0,0-2.5-6-10.9-6C4.1,16,11.3,16,14.8,10z',\n 'OpenFetch': 'M6,17c-0.6,0-1-0.4-1-1s0.4-1,1-1c10.9,0,11-5,11-5' +\n 'c0-0.6,0.4-1,1-1s1,0.4,1,1C19,10.3,18.9,17,6,17C6,17,6,17,6,17z ' +\n 'M18,23c-0.5,0-1-0.4-1-1c0-0.2-0.3-5-11-5c-0.6,0-1-0.5-1-1s0.4-1,1-1c0,0,0,0,0,0' +\n 'c12.9,0,13,6.7,13,7 C19,22.6,18.6,23,18,23z',\n 'IndentedArrow': 'M17,10c0,0-4.5,5.5,0,12L5,16L17,10z',\n 'OutdentedArrow': 'M14.6,10c0,0,5.4,6,0,12L5,16L14.6,10z',\n 'DoubleArrow': 'M19,10 L19,22 L13,16Z M12,10 L12,22 L6,16Z',\n 'Arrow': 'M15,10 L15,22 L5,16Z',\n 'Diamond': 'M12,23l-7-7l7-7l6.9,7L12,23z',\n 'Circle': 'M0,50 A50,50,0 1 1 100,50 A50,50,0 1 1 0,50 Z'\n};\nvar segmentThumbShapeHorizontal = {\n 'Square': 'M0,0 L10,0 L10,10 L0,10 z',\n 'Rhombus': 'M10,5 L5,10 L0,5 L5,0 L10,5 Z ',\n 'Rectangle': 'M0,0 L15,0 L15,10 L0,10 z ',\n 'OpenArrow': 'M15.9,23 L5,16 L15.9,9 L17,10.7 L8.7,16 L17,21.3Z',\n 'Fletch': 'M9.82,0 C9.82,0,6.61,5,10,10 C10,10,7.71,5,0,5 C0,5,6.61,5,9.82,0 Z ',\n 'OpenFetch': 'M0.71,5.71 C0.29,5.71,0,5.43,0,5 C0,4.57,0.29,4.29,0.71,4.29 C8.5,4.29,8.57,0.71,8.57,0.71 C8.57,0.29,8.86,0,9.29,0 C9.719999999999999,0,10,0.29,10,0.71 C10,0.93,9.93,5.71,0.71,5.71 C0.71,5.71,0.71,5.71,0.71,5.71 Z M9.29,10 C8.93,10,8.57,9.71,8.57,9.29 C8.57,9.14,8.36,5.71,0.71,5.71 C0.29,5.71,0,5.36,0,5 C0,4.64,0.29,4.29,0.71,4.29 C0.71,4.29,0.71,4.29,0.71,4.29 C9.93,4.29,10,9.07,10,9.29 C10,9.71,9.71,10,9.29,10 Z ',\n 'IndentedArrow': 'M10,0 C10,0,6.25,4.58,10,10 L0,5 L10,0 Z ',\n 'OutdentedArrow': 'M8,0 C8,0,12.5,5,8,10 L0,5 L8,0 Z ',\n 'DoubleArrow': 'M19,10 L19,22 L13,16Z M12,10 L12,22 L6,16Z',\n 'Arrow': 'M15,10 L15,22 L5,16Z',\n 'Diamond': 'M10,5 L5,10 L0,5 L5,0 L10,5 Z ',\n 'Circle': 'M10,5 C10,7.76,7.76,10,5,10 C2.24,10,0,7.76,0,5 C0,2.24,2.24,0,5,0 C7.76,0,10,2.24,10,5 Z ',\n 'Ellipse': 'M15,5 C15,7.76,11.64,10,7.5,10 C3.36,10,0,7.76,0,5 C0,2.24,3.36,0,7.5,0 C11.64,0,15,2.24,15,5 Z '\n};\nvar segmentThumbShapeVertical = {\n 'Square': 'M0,0 L10,0 L10,10 L0,10 z',\n 'Rhombus': 'M10,5 L5,10 L0,5 L5,0 L10,5 Z ',\n 'Rectangle': 'M0,0 L15,0 L15,10 L0,10 z',\n 'OpenArrow': 'M23,15.9 L16,5 L9,15.9 L10.7,17 L16,8.7 L21,17.3Z',\n 'Fletch': 'M9.82,0 C9.82,0,6.61,5,10,10 C10,10,7.71,5,0,5 C0,5,6.61,5,9.82,0 Z ',\n 'OpenFetch': 'M0.71,5.71 C0.29,5.71,0,5.43,0,5 C0,4.57,0.29,4.29,0.71,4.29 C8.5,4.29,8.57,0.71,8.57,0.71 C8.57,0.29,8.86,0,9.29,0 C9.719999999999999,0,10,0.29,10,0.71 C10,0.93,9.93,5.71,0.71,5.71 C0.71,5.71,0.71,5.71,0.71,5.71 Z M9.29,10 C8.93,10,8.57,9.71,8.57,9.29 C8.57,9.14,8.36,5.71,0.71,5.71 C0.29,5.71,0,5.36,0,5 C0,4.64,0.29,4.29,0.71,4.29 C0.71,4.29,0.71,4.29,0.71,4.29 C9.93,4.29,10,9.07,10,9.29 C10,9.71,9.71,10,9.29,10 Z ',\n 'IndentedArrow': 'M10,0 C10,0,6.25,4.58,10,10 L0,5 L10,0 Z ',\n 'OutdentedArrow': 'M8,0 C8,0,12.5,5,8,10 L0,5 L8,0 Z ',\n 'DoubleArrow': 'M10,19 L22,19 L16,13Z M10,12 L22,12 L16,6Z',\n 'Arrow': 'M10,15 L22,15 L16,5Z',\n 'Diamond': 'M10,5 L5,10 L0,5 L5,0 L10,5 Z ',\n 'Circle': 'M10,5 C10,7.76,7.76,10,5,10 C2.24,10,0,7.76,0,5 C0,2.24,2.24,0,5,0 C7.76,0,10,2.24,10,5 Z ',\n 'Ellipse': 'M15,5 C15,7.76,11.64,10,7.5,10 C3.36,10,0,7.76,0,5 C0,2.24,3.36,0,7.5,0 C11.64,0,15,2.24,15,5 Z '\n};\n\n/**\n * FlowShapeDictionary defines the shape of the built-in flow shapes \\\n *\n * @returns { string } FlowShapeDictionary defines the shape of the built-in flow shapes .\\\n * @param {string} shape - provide the element value.\n *\n * @private\n */\nfunction getFlowShape(shape) {\n return flowShapes[shape.toString()];\n}\n/* eslint-disable */\nvar flowShapes = {\n // Process,\n 'Process': 'M419.511,76.687L359.511,76.687L359.511,43.086L419.511,43.086z',\n // Decision,\n 'Decision': 'M 253.005,115.687L 200.567,146.071L 148.097,115.687L 200.534,85.304L 253.005,115.687 Z',\n // Document,\n 'Document': 'M 60 31.9 c 0 0 -11 -7.7 -30 0 s -30 0 -30 0 V 0 h 60 V 31.9 Z',\n // PreDefinedProcess,\n 'PreDefinedProcess': 'M 0,0 L 50,0 L 50,50 L 0,50 Z M 8.334,0 L 8.334,50 M 41.667,0 L 41.667,50',\n // Terminator,\n 'Terminator': 'M 269.711,29.33C 269.71,44.061 257.77,56 243.04,56L 158.058,56C 143.33,56 131.39,44.061 131.39,29.33L 131.39,29.33' +\n 'C 131.391,14.6057 143.33,2.669 158.058,2.669L 243.044,2.669C 257.772,2.669 269.711,14.6057 269.711,29.333 Z',\n // PaperTap,\n 'PaperTap': 'M0.0009,17.2042 L0.0009,47.165 C0.001,47.165 14.403,53.5455 25.00,47.165 C35.599,40.7852 44.403,43.5087 50.00,47.165' +\n 'L50.001,17.2042 M50.001,32.7987 L50.001,2.8405 C50.001,2.8405 35.599,-3.5427 25.001,2.8405' +\n 'C14.403,9.2237 5.599,6.494 0.0009,2.8405 L0.0009,32.7987',\n // DirectData,\n 'DirectData': 'M 132.62 0 L 17.38 0 C 7.78 0 0 13.43 0 30 C 0 46.57 7.78 60 17.38 60 L 132.62 60 M 132.62 0' +\n 'C 123.02 0 115.24 13.43 115.24 30 C 115.24 46.57 123.02 60 132.62 60 C 142.22 60 150 46.57 150 30 C 150 13.43 142.22 0 132.62 0 z ',\n // SequentialData,\n 'SequentialData': 'M0.0029,24.999 C0.0029,11.1922 10.433,0.0021 23.295,0.0021 C36.159,0.00216 46.585,11.1922 46.585,24.999' +\n 'C46.585,38.8057 36.159,49.9979 23.295,49.9979 C10.433,49.9979 0.0029,38.8057 0.0029,24.999 z M23.294,49.999 L50.002,49.999',\n // Sort,\n 'Sort': 'M50.001,24.9971 L25.001,49.9971 L0.00097,24.9971 L25.001,-0.00286865 L50.001,24.9971 z' +\n ' M0.000976562,24.9971 L50.001,24.9971',\n // MultiDocument,\n 'MultiDocument': 'M43.6826,40 C44.8746,40.6183 45.8586,41.3502 46.8366,42.1122 L46.8366,4.74487 L3.09857,4.74487 L3.09857,10.9544' +\n ' M46.837,35.143 C48.027,35.765 49.025,36.604 50.003,37.369 L50.003,0.002 L6.264,0.002 L6.264,4.744 M43.682,47.113 L43.682,10.765' +\n ' L0.0025,10.7652 L0.0025,47.1132 C0.0025,47.1132 12.5846,53.6101 21.8426,47.1132 C31.1006,40.6163 38.792,43.393 43.6826,47.1132 z',\n // Collate,\n 'Collate': 'M50.001,0.0028 L25.001,25.0029 L0.00097,0.0028 L50.001,0.002 z M0.0009,50.002 L25.001,25.002' +\n 'L50.001,50.002 L0.0009,50.0029 z',\n // SummingJunction,\n 'SummingJunction': 'M7.3252,42.6768 L42.6772,7.3247 M42.6768,42.6768 L7.3248,7.3247 M0.0009,25.001 ' +\n 'C0.0009,11.193 11.197,0.0009 25.001,0.0009' +\n ' C38.809,0.0009 50.001,11.193 50.001,25.001 C50.001,38.809 38.809,50.001 25.001,50.001 C11.197,50.00 0.0009,38.809 0.0009,25.00 z',\n // Or,\n 'Or': 'M 0 50 L 100 50 M 50 100 L 50 0.0 M 0 50 C 0 22.384 22.392 0 50 0 C 77.616 0 100 22.384 100 50' +\n ' C 100 77.616 77.616 100 50 100 C 22.392 100 0 77.616 0 50 Z',\n // InternalStorage,\n 'InternalStorage': 'M 0 3.81946A 2.5,3.81946 0 0,1 2.5,0L 47.5 0A 2.5,3.81946 0 0,1 50,3.81946' +\n 'L 50 45.836A 2.5,3.819446 0 0,1 47.5,49.652778' +\n 'L 2.5 49.652778A 2.5,3.819446 0 0,1 0,45.8336L 0 3.819446ZM 0 11.45834L 50 11.4583334M 12.5 0L 12.5 49.652778',\n // Extract,\n 'Extract': 'M0,35 L30,0 L60,35 Z',\n // ManualOperation,\n 'ManualOperation': 'M46.4,28.8 L14.8,28.8 L0,0 L60,0 Z',\n // Merge,\n 'Merge': 'M60,0 L30,35 L0,0 Z',\n // OffPageReference,\n 'OffPageReference': 'M60,33.3 L30.1,39 L0,33.3 L0,0 L60,0 Z',\n // SequentialAccessStorage,\n 'SequentialAccessStorage': 'M 60 30 C 60 13.4 46.6 0 30 0 S 0 13.4 0 30 s 13.4 30 30 30 h 28.6 v -6.5 h -9.9' +\n 'C 55.5 48 60 39.5 60 30 Z',\n // Annotation,\n 'Annotation': 'M49.9984,50.0029 L-0.00271199,50.0029 L-0.00271199,0.00286865 L49.9984,0.00286865',\n // Annotation2,\n 'Annotation2': 'M49.9977,50.0029 L25.416,50.0029 L25.416,0.00286865 L49.9977,0.00286865 M25.4166,25.0029 L-0.00227869,25.0029',\n // Data,\n 'Data': 'M 10 0 L 40 0 L 30 40 L 0 40 Z',\n // Card,\n 'Card': 'M275,60 L400,60 L400,110 L260,110 L260,75 Z',\n // Delay,\n 'Delay': 'M0,0 L12.029,0 C14.212999,0 16,1.7869979 16,3.9709952 C16,6.1549926 14.212999,7.9409904 12.029,7.9409904 L0,7.9409904 z',\n // Preparation,\n 'Preparation': 'M 1048.17 572 C 1051.06 568.86 1055.17 567.05 1059.5 567 L 1094.51 567'\n + ' C 1098.84 567.05 1102.95 568.86 1105.84 572' +\n ' L 1126.43 595 C 1127.01 596.28 1127.01 597.72 1126.43 599 L 1105.84 622 C 1102.95 625.14 1098.84 626.95 1094.51 627' +\n ' L 1059.5 627 C 1055.17 626.95 1051.06 625.14 1048.17 622 L 1027.58 599 C 1027 597.72 1027 596.28 1027.58 595 L 1048.17 572 Z',\n // Display,\n 'Display': 'M47.8809,19.2914 L32.7968,-0.00594145 L11.3902,-0.00594145 C7.93166,-0.00594145 0.00124586,11.187 0.00124586,24.9968' +\n 'C0.00124586,38.8032 7.93166,49.9962 11.3902,49.9962 L32.7968,49.99 L47.615,31.038 C47.615,31.0388 52.798,24.9968 47.880,19.2914 z',\n // ManualInput,\n 'ManualInput': 'M 912 732 L 1006.85 707 C 1008.2 707 1009.5 707.53 1010.46 708.46 C 1011.41 709.4 1011.95 710.67 1011.95 712' +\n ' L 1011.95 762C 1012 764.41 1010.28 766.52 1007.87 767 L 917.1 767 C 915.75 767 914.45 766.47 913.49 765.54' +\n ' C 912.54 764.6 912 763.33 912 762 L 912 732 Z',\n // LoopLimit,\n 'LoopLimit': 'M 8 9 L 27 9 L 33 15 L 33 26 C 33 27 33 27 32 27 L 4 27 C 3 27 2 27 2 26 L 2 15 L 8 9 Z',\n // StoredData\n 'StoredData': 'M 5.55 0L 50 0A 1.5,30 0 0,1 50,0A 5.555,25 0 0,0 50,50A 1.5,30 0 0,1 50,50L 5.555 50A 5.55,25 0 0,1 5.555,0Z',\n};\n/* eslint-enable */\n\n/* eslint-disable jsdoc/require-returns-check */\n/**\n * Connector modules are used to dock and update the connectors\n */\n/**\n * intermeditatePoints method\\\n *\n * @returns { Function } getFunction method .\\\n * @param {PointModel} element - provide the angle value.\n * @param {PointModel} layoutOrientation - provide the angle value.\n * @param {PointModel} lineDistribution - provide the angle value.\n * @private\n */\nfunction findConnectorPoints(element, layoutOrientation, lineDistribution) {\n //const intermeditatePoints: PointModel[];\n var sourcePoint;\n if (element.type === 'Straight' || !element.sourceWrapper) {\n sourcePoint = getSourcePoint(element);\n }\n else {\n sourcePoint = element.sourceWrapper.corners.center;\n }\n // eslint-disable-next-line\n var intermeditatePoints = terminateConnection(element, sourcePoint, element.targetPoint, layoutOrientation, lineDistribution);\n setLineEndPoint(element, intermeditatePoints[0], false);\n setLineEndPoint(element, intermeditatePoints[intermeditatePoints.length - 1], true);\n return intermeditatePoints;\n}\n/**\n * getSourcePoint method\\\n *\n * @returns { PointModel } getFunction method .\\\n * @param {PointModel} element - provide the angle value.\n * @private\n */\nfunction getSourcePoint(element) {\n var srcPoint;\n if (element.sourcePortWrapper) {\n var srcPort = element.sourcePortWrapper;\n //const srcNode: DiagramElement = element.sourceWrapper;\n var pt = { x: srcPort.offsetX, y: srcPort.offsetY };\n //const direction: string = getPortDirection(pt, cornersPointsBeforeRotation(srcNode), srcNode.bounds, false);\n srcPoint = pt;\n }\n else if (element.sourceID && element.sourceWrapper) {\n if (element.targetWrapper) {\n var sPoint = element.sourceWrapper.corners.center;\n var tPoint = element.targetWrapper.corners.center;\n srcPoint = getIntersection(element, element.sourceWrapper, sPoint, tPoint, false);\n }\n else {\n srcPoint = element.sourcePoint;\n }\n }\n else {\n srcPoint = element.sourcePoint;\n }\n return srcPoint;\n}\n/**\n * getDirection method \\\n *\n * @returns { void } getDirection method .\\\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @param {LayoutOrientation} layoutOrientation - provide the layoutOrientation value.\n *\n * @private\n */\nfunction getDirection(source, target, layoutOrientation) {\n if (layoutOrientation === 'LeftToRight') {\n source.direction = source.direction ? source.direction : 'Right';\n target.direction = target.direction ? target.direction : 'Left';\n }\n else if (layoutOrientation === 'RightToLeft') {\n source.direction = source.direction ? source.direction : 'Left';\n target.direction = target.direction ? target.direction : 'Right';\n }\n else if (layoutOrientation === 'TopToBottom') {\n source.direction = source.direction ? source.direction : 'Bottom';\n target.direction = target.direction ? target.direction : 'Top';\n }\n else if (layoutOrientation === 'BottomToTop') {\n source.direction = source.direction ? source.direction : 'Top';\n target.direction = target.direction ? target.direction : 'Bottom';\n }\n}\n/**\n * terminateConnection method \\\n *\n * @returns { PointModel[] } terminateConnection method .\\\n * @param {Connector} element - provide the element value.\n * @param {PointModel} srcPoint - provide the srcPoint value.\n * @param {PointModel} tarPoint - provide the tarPoint value.\n * @param {LayoutOrientation} layoutOrientation - provide the layoutOrientation value.\n * @param {boolean} lineDistribution - provide the lineDistribution value.\n *\n * @private\n */\nfunction terminateConnection(element, srcPoint, tarPoint, layoutOrientation, lineDistribution) {\n var sourceNode = element.sourceWrapper;\n var targetNode = element.targetWrapper;\n var sourcePort = element.sourcePortWrapper;\n var targetPort = element.targetPortWrapper;\n var srcCorner;\n var tarCorner;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var intermeditatePoints = [];\n var srcDir;\n var tarDir;\n var minSpace = findMargin(element);\n var sourceMargin = { left: 5, right: 5, bottom: 5, top: 5 };\n var targetMargin = { left: 5, right: 5, bottom: 5, top: 5 };\n var source = { corners: srcCorner, point: srcPoint, direction: srcDir, margin: sourceMargin };\n var target = { corners: tarCorner, point: tarPoint, direction: tarDir, margin: targetMargin };\n var sourceCorners;\n var targetCorners;\n if (sourceNode !== undefined && targetNode !== undefined) {\n sourceCorners = cornersPointsBeforeRotation(sourceNode);\n targetCorners = cornersPointsBeforeRotation(targetNode);\n source.corners = sourceNode.corners;\n target.corners = targetNode.corners;\n }\n if (sourcePort !== undefined) {\n var port = { x: sourcePort.offsetX, y: sourcePort.offsetY };\n if (sourcePort.connectionDirection === 'Left' || sourcePort.connectionDirection === 'Top' || sourcePort.connectionDirection === 'Bottom' || sourcePort.connectionDirection === 'Right') {\n source.direction = sourcePort.connectionDirection;\n }\n else {\n source.direction = getPortDirection(port, sourceCorners, sourceNode.bounds);\n }\n }\n if (targetPort !== undefined) {\n var tarPortPt = { x: targetPort.offsetX, y: targetPort.offsetY };\n if (targetPort.connectionDirection === 'Left' || targetPort.connectionDirection === 'Right' || targetPort.connectionDirection === 'Bottom' || targetPort.connectionDirection === 'Top') {\n target.direction = targetPort.connectionDirection;\n }\n else {\n target.direction = getPortDirection(tarPortPt, targetCorners, targetNode.bounds);\n }\n }\n if (element.type === 'Bezier') {\n if (!element.isBezierEditing) {\n if (element.segments.length > 0) {\n var i = element.segments.length - 1;\n while (i >= 0) {\n var seg = element.segments[parseInt(i.toString(), 10)];\n if (seg.isInternalSegment) {\n element.segments.pop();\n }\n i--;\n }\n }\n }\n }\n if (sourceNode !== undefined && targetNode !== undefined) {\n if (source.direction === undefined || target.direction === undefined) {\n if (layoutOrientation) {\n getDirection(source, target, layoutOrientation);\n }\n else {\n if (source.corners.top > target.corners.bottom &&\n Math.abs(source.corners.top - target.corners.bottom) > minSpace) {\n source.direction = source.direction ? source.direction : 'Top';\n target.direction = target.direction ? target.direction : 'Bottom';\n }\n else if (source.corners.bottom < target.corners.top &&\n Math.abs(source.corners.bottom - target.corners.top) > minSpace) {\n source.direction = source.direction ? source.direction : 'Bottom';\n target.direction = target.direction ? target.direction : 'Top';\n }\n else if ((source.corners.right < target.corners.left &&\n Math.abs(source.corners.right - target.corners.left) > minSpace) ||\n ((source.corners.right + minSpace < target.corners.left) ||\n (target.corners.right >= source.corners.left - minSpace && source.corners.left > target.corners.left))) {\n source.direction = source.direction ? source.direction : 'Right';\n target.direction = target.direction ? target.direction : 'Left';\n }\n else if ((source.corners.left > target.corners.right &&\n Math.abs(source.corners.left - target.corners.right) > (source.margin.left + source.margin.right)) ||\n ((target.corners.right + minSpace < source.corners.left ||\n (source.corners.right >= target.corners.left - minSpace\n && source.corners.left < target.corners.left)))) {\n source.direction = source.direction ? source.direction : 'Left';\n target.direction = target.direction ? target.direction : 'Right';\n }\n else {\n if (sourceNode.id !== targetNode.id && (!sourceCorners.equals(sourceCorners, targetCorners)) &&\n targetCorners.containsPoint(sourceCorners.topCenter, source.margin.top)) {\n source.direction = source.direction ? source.direction : 'Bottom';\n target.direction = target.direction ? target.direction : 'Top';\n }\n else {\n source.direction = source.direction ? source.direction : 'Top';\n target.direction = target.direction ? target.direction : 'Bottom';\n }\n }\n }\n }\n return defaultOrthoConnection(element, source.direction, target.direction, source.point, target.point, lineDistribution);\n }\n //It will be called only when there is only one end node\n checkLastSegmentasTerminal(element);\n if (element.sourceWrapper || element.targetWrapper) {\n connectToOneEnd(element, source, target);\n }\n if (element.type === 'Straight' || element.type === 'Bezier') {\n intermeditatePoints = intermeditatePointsForStraight(element, source, target);\n }\n else {\n if (element.type === 'Orthogonal' && element.segments && element.segments.length > 0 &&\n element.segments[0].length !== null &&\n element.segments[0].direction !== null) {\n intermeditatePoints = findPointToPointOrtho(element, source, target, sourceNode, targetNode, sourcePort, targetPort);\n }\n else {\n var extra = void 0;\n if (!source.direction) {\n source.direction = (target.direction) ? ((element.targetPortWrapper !== undefined) ? target.direction : getOppositeDirection(target.direction)) :\n Point.direction(source.point, target.point);\n }\n else {\n extra = adjustSegmentLength(sourceNode.bounds, source, 20);\n }\n element.segments[0].points = intermeditatePoints = orthoConnection3Segment(element, source, target, extra);\n }\n }\n return intermeditatePoints;\n}\n/**\n * updateSegmentPoints method \\\n *\n * @returns { PointModel[] } updateSegmentPoints method .\\\n * @param {End} source - provide the source value.\n * @param {OrthogonalSegment} segment - provide the segment value.\n *\n * @private\n */\nfunction updateSegmentPoints(source, segment) {\n //let segPoint: PointModel; //let angle: number; //let extra: number;\n source.direction = segment.direction;\n segment.points = [];\n segment.points.push(source.point);\n var extra = (segment.direction === 'Left' || segment.direction === 'Top') ? -(segment.length) : segment.length;\n var angle = (segment.direction === 'Left' || segment.direction === 'Right') ? 0 : 90;\n var segPoint = addLineSegment(source.point, extra, angle);\n segment.points.push(segPoint);\n return segPoint;\n}\n/**\n * pointToPoint method \\\n *\n * @returns { void } pointToPoint method .\\\n * @param {Connector} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n *\n * @private\n */\nfunction pointToPoint(element, source, target) {\n var point;\n var direction;\n var portdirection;\n source.corners = (element.sourceWrapper) ? element.sourceWrapper.corners : undefined;\n if (element.sourcePortWrapper) {\n var port = { x: element.sourcePortWrapper.offsetX, y: element.sourcePortWrapper.offsetY };\n portdirection = getPortDirection(port, cornersPointsBeforeRotation(element.sourceWrapper), element.sourceWrapper.bounds);\n if (source.corners && (source.direction === 'Bottom' || source.direction === 'Top')) {\n if (target.point.x > source.corners.left && target.point.x < source.corners.right) {\n direction = (source.point.y > target.point.y) ? 'Top' : 'Bottom';\n }\n }\n else if (source.corners && (source.direction === 'Left' || source.direction === 'Right')) {\n if (target.point.y > source.corners.top && target.point.y < source.corners.bottom) {\n direction = (source.point.x > target.point.x) ? 'Left' : 'Right';\n }\n }\n }\n if (element.sourcePortWrapper && portdirection === getOppositeDirection(direction)) {\n var length_1;\n if ((portdirection === 'Left' || portdirection === 'Right') && (source.point.y >= source.corners.top\n && source.point.y <= source.corners.center.y) &&\n (target.point.y >= source.corners.top && target.point.y <= source.corners.center.y)) {\n source.direction = 'Top';\n length_1 = source.point.y - source.corners.top + 20;\n }\n else if ((portdirection === 'Left' || portdirection === 'Right') && (source.point.y > source.corners.center.y\n && source.point.y <= source.corners.bottom) &&\n (target.point.y > source.corners.center.y && target.point.y <= source.corners.bottom)) {\n source.direction = 'Bottom';\n length_1 = source.corners.bottom - source.point.y + 20;\n }\n else if ((portdirection === 'Top' || portdirection === 'Bottom') && (source.point.x >= source.corners.left\n && source.point.x <= source.corners.center.x) &&\n (target.point.x >= source.corners.left && target.point.x <= source.corners.center.x)) {\n source.direction = 'Left';\n length_1 = source.point.x - source.corners.left + 20;\n }\n else if ((portdirection === 'Top' || portdirection === 'Bottom') && (source.point.x <= source.corners.right\n && source.point.x > source.corners.center.x) &&\n (target.point.x <= source.corners.right && target.point.x < source.corners.center.x)) {\n source.direction = 'Right';\n length_1 = source.corners.right - source.point.x + 20;\n }\n if (source.direction && length_1) {\n point = orthoConnection3Segment(element, source, target, length_1, true);\n }\n }\n else {\n source.direction = (direction) ? direction : findSourceDirection(source.direction, source.point, target.point);\n point = orthoConnection2Segment(source, target);\n }\n return point;\n}\n/**\n * pointToNode method \\\n *\n * @returns { void } pointToNode method .\\\n * @param {Connector} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n *\n * @private\n */\nfunction pointToNode(element, source, target) {\n var point;\n target.corners = element.targetWrapper.corners;\n findDirection(element.targetWrapper, source, target, element);\n var direction = findSourceDirection(target.direction, source.point, target.point);\n if (source.direction === target.direction && (source.direction === 'Left' || source.direction === 'Right')) {\n source.direction = direction;\n point = orthoConnection3Segment(element, source, target, element.targetWrapper.width / 2 + 20);\n var source1 = source;\n source1.point = point[1];\n findDirection(element.targetWrapper, source, target, element);\n point = orthoConnection3Segment(element, source, target);\n }\n else {\n source.direction = direction;\n point = orthoConnection2Segment(source, target);\n }\n return point;\n}\n/**\n * addPoints method \\\n *\n * @returns { void } addPoints method .\\\n * @param {Connector} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n *\n * @private\n */\nfunction addPoints(element, source, target) {\n target.corners = element.targetWrapper.corners;\n var direction;\n var length;\n if (source.direction !== 'Left' && source.direction !== 'Right') {\n if (target.corners.center.y === source.point.y &&\n (!(target.corners.left <= source.point.x && source.point.x <= target.corners.right))) {\n direction = 'Top';\n length = target.corners.height / 2 + 20;\n }\n else if ((target.corners.center.y === source.point.y &&\n element.segments[element.segments.length - 2].direction === 'Bottom') ||\n (target.corners.center.y > source.point.y && source.point.y >= target.corners.top)) {\n direction = 'Top';\n length = (source.point.y - target.corners.top) + 20;\n }\n else if ((target.corners.center.y === source.point.y &&\n element.segments[element.segments.length - 2].direction === 'Top') ||\n (target.corners.center.y < source.point.y && source.point.y <= target.corners.bottom)) {\n direction = 'Bottom';\n length = (target.corners.bottom - source.point.y) + 20;\n }\n else if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined &&\n source.corners.top <= source.point.y && source.point.y <= source.corners.bottom) {\n direction = source.direction;\n length = (source.point.y > target.point.y) ? (source.point.y - source.corners.top + 20) :\n (source.corners.bottom - source.point.y + 20);\n }\n }\n else {\n if (target.corners.center.x === source.point.x &&\n (!(target.corners.top < source.point.y && source.point.y <= target.corners.bottom))) {\n direction = 'Left';\n length = target.corners.width / 2 + 20;\n }\n else if ((target.corners.center.x === source.point.x &&\n element.segments[element.segments.length - 2].direction === 'Right')\n || (target.corners.center.x > source.point.x && source.point.x >= target.corners.left)) {\n direction = 'Left';\n length = (source.point.x - target.corners.left) + 20;\n }\n else if ((target.corners.center.x === source.point.x &&\n element.segments[element.segments.length - 2].direction === 'Left') ||\n (target.corners.center.x <= source.point.x && source.point.x <= target.corners.right)) {\n direction = 'Right';\n length = (target.corners.right - source.point.x) + 20;\n }\n else if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined &&\n source.corners.left <= source.point.x && source.point.x <= source.corners.right) {\n direction = source.direction;\n length = (source.point.x > target.point.x) ? (source.point.x - source.corners.left + 20) :\n (source.corners.right - source.point.x + 20);\n }\n }\n var extra = (direction === 'Left' || direction === 'Top') ? -(length) : length;\n var angle = (direction === 'Left' || direction === 'Right') ? 0 : 90;\n var refPoint = source.point;\n source.point = addLineSegment(source.point, extra, angle);\n source.direction = Point.direction(source.point, target.point);\n if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined &&\n (source.corners.center.x === target.corners.center.x || source.corners.center.y === target.corners.center.y)) {\n source.direction = target.direction;\n }\n var point = orthoConnection3Segment(element, source, target);\n point.splice(0, 0, refPoint);\n return point;\n}\n/**\n * findSegmentDirection method \\\n *\n * @returns { void } findSegmentDirection method .\\\n * @param {Connector} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @param {Direction} portDir - provide the target value.\n *\n * @private\n */\nfunction findSegmentDirection(element, source, target, portDir) {\n var update = false;\n switch (target.direction) {\n case 'Left':\n if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined && (portDir === 'Right' &&\n source.point.x > target.point.x && source.point.y >= source.corners.top &&\n source.point.y <= source.corners.bottom)\n || (((portDir === 'Bottom' && source.point.y > target.point.y) ||\n (portDir === 'Top' && source.point.y < target.point.y)) &&\n source.point.x >= source.corners.left && source.point.x <= source.corners.right)) {\n source.direction = (portDir === 'Right') ? ((source.point.y > target.point.y) ? 'Top' : 'Bottom') :\n (source.point.x < target.point.x ? 'Right' : 'Left');\n update = true;\n }\n else if (source.point.x > target.point.x && (source.point.y > target.point.y || source.point.y < target.point.y)\n && (!(target.corners.top > source.point.y && target.corners.bottom < source.point.y))) {\n source.direction = 'Left';\n }\n else if ((source.point.x < target.point.x && source.point.y > target.point.y) ||\n (source.point.x > target.point.x && (source.point.y <= target.point.y)\n && ((target.corners.top < source.point.y && target.corners.center.y >= source.point.y)))) {\n source.direction = 'Top';\n }\n else if ((source.point.x < target.point.x && source.point.y < target.point.y) ||\n (source.point.x > target.point.x && (source.point.y > target.point.y)\n && ((target.corners.bottom < source.point.y && target.corners.center.y > source.point.y)))) {\n source.direction = 'Bottom';\n }\n else if (source.point.y === target.point.y && source.point.x < target.point.x) {\n source.direction = 'Right';\n }\n break;\n case 'Right':\n if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined &&\n ((portDir === 'Bottom' && source.point.y > target.point.y) ||\n (portDir === 'Top' && source.point.y < target.point.y)) && source.point.x > target.point.x &&\n (source.point.x >= source.corners.left && source.point.x <= source.corners.right)) {\n source.direction = (source.point.x > target.point.x) ? 'Left' : 'Right';\n update = true;\n }\n else if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined &&\n portDir === 'Left' && source.point.x < target.point.x && (source.point.y >= source.corners.top &&\n source.point.y <= source.corners.bottom)) {\n source.direction = (source.point.y > target.point.y) ? 'Top' : 'Bottom';\n update = true;\n }\n else if (source.point.x < target.point.x && target.corners.top <= source.point.y\n && target.corners.bottom >= source.point.y && source.point.y === target.point.y) {\n source.direction = 'Top';\n }\n else if (source.point.y > target.point.y && source.point.x > target.point.x) {\n source.direction = 'Top';\n }\n else if (source.point.y < target.point.y && source.point.x > target.point.x) {\n source.direction = 'Bottom';\n }\n else if (source.point.x < target.point.x && (source.point.y > target.point.y ||\n source.point.y < target.point.y)) {\n source.direction = 'Right';\n }\n else if (source.point.y === target.point.y && source.point.x > target.point.x) {\n source.direction = 'Left';\n }\n break;\n case 'Top':\n if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined && (portDir === 'Bottom' &&\n source.point.y > target.point.y && source.point.x >= source.corners.left &&\n source.point.x <= source.corners.right) || (((portDir === 'Right' && source.point.x > target.point.x) ||\n (portDir === 'Left' && target.point.y > source.point.y && target.point.x > source.point.x)) &&\n (source.point.y >= source.corners.top && source.point.y <= source.corners.bottom))) {\n source.direction = (portDir === 'Bottom') ? ((source.point.x > target.point.x) ? 'Left' : 'Right') :\n (source.point.y < target.point.y) ? 'Bottom' : 'Top';\n update = true;\n }\n else if (source.point.x === target.point.x && source.point.y < target.point.y) {\n source.direction = 'Bottom';\n }\n else if (source.point.y > target.point.y && source.point.x > target.corners.left &&\n source.point.x < target.corners.right) {\n source.direction = 'Left';\n }\n else if (source.point.y >= target.point.y) {\n source.direction = 'Top';\n }\n else if (source.point.y < target.point.y && source.point.x > target.point.x) {\n source.direction = 'Left';\n }\n else if (source.point.y < target.point.y && source.point.x < target.point.x) {\n source.direction = 'Right';\n }\n break;\n case 'Bottom':\n if (element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined && ((((portDir === 'Right') ||\n (portDir === 'Left' && target.point.x > source.point.x)) && (source.point.y > target.point.y) &&\n source.point.y >= source.corners.top && source.point.y <= source.corners.bottom) ||\n (((portDir === 'Top' && source.point.y < target.point.y)) &&\n (source.point.x >= source.corners.left && source.point.x <= source.corners.right)))) {\n if (portDir === 'Right' || portDir === 'Left') {\n source.direction = (source.point.y > target.point.y) ? 'Top' : 'Bottom';\n }\n else {\n source.direction = (source.point.x > target.point.x) ? 'Left' : 'Right';\n }\n update = true;\n }\n else if (source.point.y < target.point.y && source.point.x > target.corners.left &&\n target.corners.right > source.point.x) {\n if (source.point.y < target.point.y && source.point.x > target.corners.left &&\n target.corners.center.x >= source.point.x) {\n source.direction = 'Left';\n }\n else if (source.point.y < target.point.y && source.point.x < target.corners.right &&\n target.corners.center.x < source.point.x) {\n source.direction = 'Right';\n }\n }\n else if (source.point.y > target.point.y && source.point.x > target.point.x) {\n source.direction = 'Left';\n }\n else if (source.point.y > target.point.y && source.point.x < target.point.x) {\n source.direction = 'Right';\n }\n else if (source.point.y <= target.point.y && (source.point.x > target.point.x || target.point.x > source.point.x)) {\n source.direction = 'Bottom';\n }\n break;\n }\n return update;\n}\n/**\n * pointToPort method \\\n *\n * @returns { void } pointToPort method .\\\n * @param {Connector} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n *\n * @private\n */\nfunction pointToPort(element, source, target) {\n var point;\n target.corners = element.targetWrapper.corners;\n var portdirection;\n var length;\n if (element.sourcePortWrapper !== undefined) {\n var port = { x: element.sourcePortWrapper.offsetX, y: element.sourcePortWrapper.offsetY };\n portdirection = getPortDirection(port, cornersPointsBeforeRotation(element.sourceWrapper), element.sourceWrapper.bounds);\n }\n var update = findSegmentDirection(element, source, target, portdirection);\n // EJ2-65063 - Added below condition !selectedSegmentIndex to prevent the connector segment to split from two points into four points\n if ((!element.selectedSegmentIndex) && element.sourcePortWrapper !== undefined && element.targetPortWrapper !== undefined &&\n target.direction === getOppositeDirection(portdirection) &&\n ((((target.direction === 'Left' && source.point.x > target.point.x) || (target.direction === 'Right' &&\n source.point.x < target.point.x)) && source.point.y >= source.corners.top &&\n source.point.y <= source.corners.bottom) || (target.direction === 'Bottom' && source.point.y < target.point.y &&\n (source.point.x >= source.corners.left && source.point.x <= source.corners.right)))) {\n point = addPoints(element, source, target);\n }\n else if ((!element.selectedSegmentIndex) && source.direction === target.direction) {\n point = orthoConnection3Segment(element, source, target);\n }\n else if ((!element.selectedSegmentIndex) && (((target.direction === 'Left' && source.point.x > target.point.x) ||\n (target.direction === 'Right' && source.point.x < target.point.x)) && (source.direction === 'Top' || source.direction === 'Bottom')\n && ((source.point.y <= target.point.y) &&\n ((target.corners.top <= source.point.y && target.corners.bottom >= source.point.y)))) ||\n ((target.direction === 'Top' && source.point.y > target.point.y) ||\n (target.direction === 'Bottom' && source.point.y < target.point.y) &&\n ((target.corners.left <= source.point.x && target.corners.right >= source.point.x)))) {\n // EJ2-69304 - Return the 2 segment points if allowNodeOverlap is set as true.\n if (!element.selectedSegmentIndex) {\n point = addPoints(element, source, target);\n }\n else {\n point = orthoConnection2Segment(source, target);\n }\n }\n else {\n if ((!element.selectedSegmentIndex) && element.sourceWrapper !== undefined && element.targetWrapper !== undefined\n && element.targetPortWrapper !== undefined && ((source.direction === 'Left' || source.direction === 'Right')\n && (source.point.y >= source.corners.top && source.point.y <= source.corners.bottom)\n && (target.direction === 'Top' || target.direction === 'Bottom') &&\n (target.corners.center.x === source.corners.center.x))) {\n source.direction = (target.direction === 'Top') ? 'Bottom' : 'Top';\n length = (target.direction === 'Top') ? (source.corners.bottom - source.point.y + 20) :\n (source.point.y - source.corners.top + 20);\n point = orthoConnection3Segment(element, source, target, length);\n }\n else if ((!element.selectedSegmentIndex) && element.sourceWrapper !== undefined && element.targetWrapper !== undefined\n && element.targetPortWrapper !== undefined && ((source.direction === 'Top' || source.direction === 'Bottom') &&\n (source.point.x >= source.corners.left && source.point.x <= source.corners.right) &&\n (target.direction === 'Left' || target.direction === 'Right') && (target.corners.center.y === source.corners.center.y))) {\n source.direction = (target.direction === 'Left') ? 'Right' : 'Left';\n length = (target.direction === 'Left') ? (source.corners.right - source.point.x + 20) :\n (source.point.x - source.corners.left + 20);\n point = orthoConnection3Segment(element, source, target, length);\n }\n else if (update) {\n if (source.direction === 'Left' || source.direction === 'Right') {\n length = (source.direction === 'Left') ? (source.point.x - source.corners.left + 20) :\n (source.corners.right - source.point.x + 20);\n }\n else {\n length = (source.direction === 'Top') ? (source.point.y - source.corners.top + 20) :\n (source.corners.bottom - source.point.y + 20);\n }\n point = orthoConnection3Segment(element, source, target, length);\n }\n else {\n point = orthoConnection2Segment(source, target);\n }\n }\n return point;\n}\n/**\n * findPointToPointOrtho method \\\n *\n * @returns { void } findPointToPointOrtho method .\\\n * @param {Connector} element - provide the element value.\n * @param {DiagramElement} source - provide the source value.\n * @param {DiagramElement} target - provide the target value.\n * @param {DiagramElement} sourceNode - provide the target value.\n * @param {DiagramElement} targetNode - provide the target value.\n * @param {DiagramElement} sourcePort - provide the sourcePort value.\n * @param {DiagramElement} targetPort - provide the targetPort value.\n *\n * @private\n */\nfunction findPointToPointOrtho(element, source, target, sourceNode, targetNode, sourcePort, targetPort) {\n var j;\n var point;\n var intermeditatePoints = [];\n var direction;\n var port; //let seg: OrthogonalSegment;\n checkLastSegmentasTerminal(element);\n var removeSegment;\n if (element.segments.length > 0) {\n for (var i = 0; i < element.segments.length; i++) {\n var seg = element.segments[parseInt(i.toString(), 10)];\n if (i === 0 && element.sourcePortWrapper !== undefined) {\n port = { x: sourcePort.offsetX, y: sourcePort.offsetY };\n direction = getPortDirection(port, cornersPointsBeforeRotation(sourceNode), sourceNode.bounds);\n if (seg.direction === getOppositeDirection(direction)) {\n seg.direction = direction;\n }\n }\n if (i > 0 && element.segments[i - 1].direction === seg.direction) {\n i = checkConsectiveSegmentAsSame(element, i, source);\n }\n else {\n var lastSegment = element.segments[i - 1];\n source.point = (seg.direction) ? updateSegmentPoints(source, seg) :\n lastSegment.points[lastSegment.points.length - 1];\n }\n if (i === element.segments.length - 1) {\n if (!targetPort && !targetNode) {\n point = pointToPoint(element, source, target);\n }\n else if (element.targetWrapper && element.targetPortWrapper === undefined) {\n checkSourcePointInTarget(element, source);\n point = pointToNode(element, source, target);\n }\n else {\n point = pointToPort(element, source, target);\n }\n if (point) {\n checkPreviousSegment(point, element);\n seg.points = [];\n if (point.length >= 2) {\n for (j = 0; j < point.length; j++) {\n seg.points.push(point[parseInt(j.toString(), 10)]);\n }\n }\n else {\n removeSegment = i;\n }\n }\n }\n if (sourcePort && i === 0) {\n var sourcePoint = checkPortdirection(element, sourcePort, sourceNode);\n if (sourcePoint) {\n source.point = sourcePoint;\n }\n }\n }\n if (removeSegment !== undefined) {\n if (removeSegment === element.segments.length - 1) {\n element.segments[removeSegment - 1].direction = null;\n element.segments[removeSegment - 1].length = null;\n }\n element.segments.splice(removeSegment, 1);\n }\n intermeditatePoints = returnIntermeditatePoints(element, intermeditatePoints);\n }\n return intermeditatePoints;\n}\n/**\n * checkPortdirection method \\\n *\n * @returns { PointModel } checkPortdirection method .\\\n * @param {Connector} element - provide the element value.\n * @param {DiagramElement} sourcePort - provide the target value.\n * @param {DiagramElement} sourceNode - provide the target value.\n *\n * @private\n */\nfunction checkPortdirection(element, sourcePort, sourceNode) {\n var port = { x: sourcePort.offsetX, y: sourcePort.offsetY };\n var point;\n var bounds = cornersPointsBeforeRotation(sourceNode);\n var direction = getPortDirection(port, bounds, sourceNode.bounds);\n var seg = element.segments[0];\n if (seg.direction !== direction) {\n pointsFromNodeToPoint(seg, direction, bounds, seg.points[0], seg.points[seg.points.length - 1], false);\n point = seg.points[seg.points.length - 1];\n seg.direction = Point.direction(seg.points[seg.points.length - 2], seg.points[seg.points.length - 1]);\n }\n return point;\n}\n/**\n * checkPreviousSegment method \\\n *\n * @returns { PointModel } checkPreviousSegment method .\\\n * @param {Connector} tPoints - provide the element value.\n * @param {DiagramElement} connector - provide the target value.\n * @param {DiagramElement} source - provide the target value.\n *\n * @private\n */\nfunction checkPreviousSegment(tPoints, connector, source) {\n var actualSegment = connector.segments[connector.segments.length - 2];\n var actualLastPoint = actualSegment.points[actualSegment.points.length - 1];\n var direction;\n if (((actualSegment.direction === 'Top' || actualSegment.direction === 'Bottom') && (actualLastPoint.x === tPoints[1].x)) ||\n ((actualSegment.direction === 'Left' || actualSegment.direction === 'Right') && (actualLastPoint.y === tPoints[1].y))) {\n actualSegment.points[actualSegment.points.length - 1] = tPoints[1];\n direction = Point.direction(actualSegment.points[0], actualSegment.points[actualSegment.points.length - 1]);\n if (connector.sourceWrapper !== undefined && connector.sourcePortWrapper === undefined &&\n direction === getOppositeDirection(actualSegment.direction)) {\n if (actualSegment.direction === 'Left' || actualSegment.direction === 'Right') {\n actualSegment.points[0].x = (actualSegment.direction === 'Right') ?\n actualSegment.points[0].x - connector.sourceWrapper.corners.width :\n actualSegment.points[0].x + connector.sourceWrapper.corners.width;\n }\n else {\n actualSegment.points[0].y = (actualSegment.direction === 'Bottom') ?\n actualSegment.points[0].y - connector.sourceWrapper.corners.height :\n actualSegment.points[0].y + connector.sourceWrapper.corners.height;\n }\n }\n actualSegment.direction = direction;\n actualSegment.length = Point.distancePoints(actualSegment.points[0], actualSegment.points[actualSegment.points.length - 1]);\n tPoints.splice(0, 1);\n }\n}\n/**\n * connectToOneEnd method \\\n *\n * @returns { void } connectToOneEnd method .\\\n * @param {Connector} element - provide the element value.\n * @param {DiagramElement} source - provide the target value.\n * @param {DiagramElement} target - provide the target value.\n *\n * @private\n */\nfunction connectToOneEnd(element, source, target) {\n var sourcePort = element.sourcePortWrapper;\n var targetPort = element.targetPortWrapper;\n var node = element.sourceWrapper;\n var fixedPoint = source.point;\n var nodeMargin = { left: 0, right: 0, top: 0, bottom: 0 };\n var nodeConnectingPoint = { x: 0, y: 0 };\n var refPoint;\n var nodeDirection = 'Top';\n if (!node) {\n node = element.targetWrapper;\n nodeMargin = target.margin;\n }\n else {\n fixedPoint = target.point;\n nodeMargin = source.margin;\n }\n if (element.type === 'Orthogonal') {\n if ((element.segments && element.segments.length > 0) && element.sourceWrapper &&\n element.segments[0].direction) {\n source.direction = element.segments[0].direction;\n nodeConnectingPoint = findPoint(node.corners, source.direction);\n refPoint = findPoint(node.corners, getOppositeDirection(source.direction));\n nodeConnectingPoint = getIntersection(element, node, nodeConnectingPoint, refPoint, false);\n }\n else {\n var source_1 = { corners: null, direction: null, point: fixedPoint, margin: nodeMargin };\n var target_1 = { corners: null, direction: null, point: null, margin: null };\n findDirection(node, source_1, target_1, element);\n nodeConnectingPoint = target_1.point;\n nodeDirection = target_1.direction;\n }\n }\n else {\n var segmentPoint = void 0;\n if (element.segments && element.segments.length > 1) {\n if (node === element.sourceWrapper) {\n segmentPoint = element.segments[0].point;\n }\n else {\n segmentPoint = element.segments[element.segments.length - 2].point;\n }\n }\n nodeConnectingPoint = getIntersection(element, node, node.bounds.center, (element.segments && element.segments.length > 1) ? segmentPoint : fixedPoint, node === element.targetWrapper);\n }\n if (node === element.sourceWrapper) {\n source.direction = source.direction || nodeDirection;\n source.point = nodeConnectingPoint;\n if (element.sourcePortWrapper) {\n source.point = { x: sourcePort.offsetX, y: sourcePort.offsetY };\n if (element.sourcePadding) {\n source.point = addPaddingToConnector(element, source, target, false);\n }\n }\n }\n else {\n target.direction = target.direction || nodeDirection;\n target.point = nodeConnectingPoint;\n if (element.targetPortWrapper) {\n target.point = { x: targetPort.offsetX, y: targetPort.offsetY };\n if (element.targetPadding) {\n target.point = addPaddingToConnector(element, source, target, true);\n }\n }\n }\n}\n/**\n * addPaddingToConnector method \\\n *\n * @returns { void } addPaddingToConnector method .\\\n * @param {Connector} element - provide the element value.\n * @param {DiagramElement} source - provide the target value.\n * @param {DiagramElement} target - provide the target value.\n * @param {DiagramElement} isTarget - provide the target value.\n *\n * @private\n */\nfunction addPaddingToConnector(element, source, target, isTarget) {\n var sourcePort = element.sourcePortWrapper;\n var targetPort = element.targetPortWrapper;\n var padding = (isTarget) ? element.targetPadding : element.sourcePadding;\n var paddingPort = (isTarget) ? targetPort : sourcePort;\n var rect = new Rect(paddingPort.bounds.x - padding, paddingPort.bounds.y - padding, paddingPort.actualSize.width + 2 * padding, paddingPort.actualSize.height + 2 * padding);\n var segmentPoints = [rect.topLeft, rect.topRight, rect.bottomRight, rect.bottomLeft];\n segmentPoints[segmentPoints.length] = segmentPoints[0];\n //const length: number = segmentPoints.length;\n var thisSegment = { x1: source.point.x, y1: source.point.y, x2: target.point.x, y2: target.point.y };\n var point = (isTarget) ? target.point : source.point;\n return getIntersectionPoints(thisSegment, segmentPoints, true, point) || point;\n}\n/**\n * checkSourceAndTargetIntersect method \\\n *\n * @returns { void } checkSourceAndTargetIntersect method .\\\n * @param {DiagramElement} sourceWrapper - provide the sourceWrapper value.\n * @param {DiagramElement} targetWrapper - provide the targetWrapper value.\n * @param {Connector} connector - provide the Connector value.\n *\n * @private\n */\nfunction checkSourceAndTargetIntersect(sourceWrapper, targetWrapper, connector) {\n var sourceSegment = createSegmentsCollection(sourceWrapper, connector.sourcePadding);\n var targetSegment = createSegmentsCollection(targetWrapper, connector.targetPadding);\n for (var i = 0; i < sourceSegment.length - 1; i++) {\n var srcSegment = sourceSegment[parseInt(i.toString(), 10)];\n for (var j = 0; j < targetSegment.length - 1; j++) {\n var tarSegmet = targetSegment[parseInt(j.toString(), 10)];\n if (intersect3(srcSegment, tarSegmet).enabled) {\n return true;\n }\n }\n }\n return false;\n}\n/**\n * createSegmentsCollection method \\\n *\n * @returns { Segment[] } createSegmentsCollection method .\\\n * @param {DiagramElement} sourceWrapper - provide the sourceWrapper value.\n * @param {number} padding - provide the padding value.\n *\n * @private\n */\nfunction createSegmentsCollection(sourceWrapper, padding) {\n var segments = [];\n var points = getPoints(sourceWrapper, sourceWrapper.corners, padding);\n points.push(points[0]);\n for (var i = 0; i < points.length - 1; i++) {\n segments.push(createLineSegment(points[parseInt(i.toString(), 10)], points[i + 1]));\n }\n return segments;\n}\n/**\n * createLineSegment method \\\n *\n * @returns { Segment } createLineSegment method .\\\n * @param {PointModel} sPt - provide the sourceWrapper value.\n * @param {PointModel} tPt - provide the padding value.\n *\n * @private\n */\nfunction createLineSegment(sPt, tPt) {\n var line = { x1: sPt.x, y1: sPt.y, x2: tPt.x, y2: tPt.y };\n return line;\n}\n/**\n * swapBounds method \\\n *\n * @returns { Corners } swapBounds method .\\\n * @param {PointModel} object - provide the sourceWrapper value.\n * @param {PointModel} bounds - provide the padding value.\n * @param {Rect} outerBounds - provide the padding value.\n *\n * @private\n */\nfunction swapBounds(object, bounds, outerBounds) {\n var rectBounds;\n var rotateAngle = object.rotateAngle + object.parentTransform;\n if (rotateAngle) {\n if (rotateAngle < 45) {\n return bounds;\n }\n else if (rotateAngle <= 135) {\n rectBounds = {\n width: bounds.width, height: bounds.height,\n topLeft: bounds.bottomLeft, topCenter: bounds.middleLeft, topRight: bounds.topLeft,\n middleLeft: bounds.bottomCenter, center: outerBounds.center, middleRight: bounds.topCenter,\n bottomLeft: bounds.bottomRight, bottomCenter: bounds.middleRight, bottomRight: bounds.topRight,\n left: outerBounds.left, right: outerBounds.right, top: outerBounds.top, bottom: outerBounds.bottom\n };\n }\n else if (rotateAngle <= 225) {\n rectBounds = {\n width: bounds.width, height: bounds.height,\n topLeft: bounds.bottomLeft, topCenter: bounds.bottomCenter, topRight: bounds.bottomRight,\n middleLeft: bounds.middleRight, center: outerBounds.center, middleRight: bounds.middleLeft,\n bottomLeft: bounds.topLeft, bottomCenter: bounds.topCenter, bottomRight: bounds.topRight,\n left: outerBounds.left, right: outerBounds.right, top: outerBounds.top,\n bottom: outerBounds.bottom\n };\n }\n else if (rotateAngle <= 315) {\n rectBounds = {\n width: bounds.width, height: bounds.height,\n topLeft: bounds.topRight, topCenter: bounds.middleRight, topRight: bounds.bottomRight,\n middleLeft: bounds.topCenter, center: outerBounds.center, middleRight: bounds.bottomCenter,\n bottomLeft: bounds.topLeft, bottomCenter: bounds.middleLeft, bottomRight: bounds.bottomLeft,\n left: outerBounds.left, right: outerBounds.right, top: outerBounds.top, bottom: outerBounds.bottom\n };\n }\n else {\n return bounds;\n }\n return rectBounds;\n }\n return bounds;\n}\n/**\n * defaultOrthoConnection method \\\n *\n * @returns { PointModel[] } defaultOrthoConnection method .\\\n * @param {Connector} ele - provide the Connector value.\n * @param {Direction} srcDir - provide the srcDir value.\n * @param {Direction} tarDir - provide the srcDir value.\n * @param {PointModel} sPt - provide the sPt value.\n * @param {PointModel} tPt - provide the tPt value.\n * @param {Rect} lineDistribution - provide the padding value.\n *\n * @private\n */\n/* tslint:disable */\n// eslint-disable-next-line\nfunction defaultOrthoConnection(ele, srcDir, tarDir, sPt, tPt, lineDistribution) {\n var sourceEle = ele.sourceWrapper;\n var targetEle = ele.targetWrapper;\n var srcPort = ele.sourcePortWrapper;\n var tarPort = ele.targetPortWrapper;\n var intermeditatePoints = [];\n var refPoint;\n var srcCor = sourceEle.corners;\n // eslint-disable-next-line\n var tarCor = targetEle.corners;\n var point = tarCor.center; //const i: number;\n var sourceMargin = { left: 5, right: 5, bottom: 5, top: 5 };\n var targetMargin = { left: 5, right: 5, bottom: 5, top: 5 };\n var source = { corners: srcCor, point: sPt, direction: srcDir, margin: sourceMargin };\n // eslint-disable-next-line\n var target = { corners: tarCor, point: tPt, direction: tarDir, margin: targetMargin };\n var srcBounds = swapBounds(sourceEle, srcCor, ele.sourceWrapper.bounds);\n var tarBounds = swapBounds(targetEle, tarCor, ele.targetWrapper.bounds);\n var isInterSect = false;\n if (ele.sourceWrapper && ele.targetWrapper) {\n isInterSect = checkSourceAndTargetIntersect(ele.sourceWrapper, ele.targetWrapper, ele);\n }\n if (srcPort !== undefined) {\n source.point = { x: srcPort.offsetX, y: srcPort.offsetY };\n switch (source.direction) {\n case 'Bottom':\n case 'Top':\n // eslint-disable-next-line\n source.point.y = source.point.y;\n break;\n case 'Left':\n case 'Right':\n // eslint-disable-next-line\n source.point.x = source.point.x;\n break;\n }\n if (ele.sourcePadding && !isInterSect) {\n if (tarPort) {\n target.point = {\n x: tarPort.offsetX,\n y: tarPort.offsetY\n };\n }\n source.point = addPaddingToConnector(ele, source, target, false);\n }\n }\n else {\n if (ele.type === 'Orthogonal' || ele.type === 'Bezier') {\n if (ele.segments && ele.segments.length > 0 && ele.segments[0].direction) {\n source.direction = ele.segments[0].direction;\n }\n source.point = findPoint(srcBounds, source.direction);\n refPoint = findPoint(srcBounds, getOppositeDirection(source.direction));\n source.point = getIntersection(ele, sourceEle, source.point, refPoint, false);\n }\n else {\n source.point = sourceEle.corners.center;\n }\n }\n if (tarPort !== undefined) {\n target.point = {\n x: tarPort.offsetX,\n y: tarPort.offsetY\n };\n switch (target.direction) {\n case 'Bottom':\n case 'Top':\n // eslint-disable-next-line\n target.point.y = target.point.y;\n break;\n case 'Left':\n case 'Right':\n // eslint-disable-next-line\n target.point.x = target.point.x;\n break;\n }\n if (ele.targetPadding && !isInterSect) {\n target.point = addPaddingToConnector(ele, source, target, true);\n }\n }\n else {\n if (ele.type === 'Orthogonal' || ele.type === 'Bezier') {\n target.point = findPoint(tarBounds, target.direction);\n refPoint = findPoint(tarBounds, getOppositeDirection(target.direction));\n target.point = getIntersection(ele, targetEle, target.point, refPoint, true);\n }\n else {\n target.point = targetEle.corners.center;\n }\n }\n if (ele.type !== 'Orthogonal') {\n var segment = void 0;\n var first = void 0;\n if (ele.type === 'Bezier') {\n //EJ2-67651 - Bezier segment points are static when we move the connector's source or target node.\n if ((ele.bezierSettings.allowSegmentsReset || (ele.segments.length === 0 ||\n (!Point.isEmptyPoint(ele.segments[ele.segments.length - 1].point))))) {\n intermeditatePoints = findOrthoSegments(ele, source, target, undefined, lineDistribution);\n intermeditatePoints = intermeditatePointsForStraight(ele, source, target);\n return intermeditatePoints;\n }\n else {\n checkLastSegmentasTerminal(ele);\n }\n }\n else {\n checkLastSegmentasTerminal(ele);\n }\n if (ele.sourcePortWrapper === undefined) {\n source.point = source.corners.center;\n if (ele.segments && ele.segments.length > 0) {\n first = ele.segments[0];\n segment = (!Point.isEmptyPoint(first.point)) ? first : undefined;\n }\n var tarPoint = (segment !== undefined) ? segment.point : target.point;\n if (ele.type === 'Bezier' && ele.segments.length > 0 &&\n ele.segments[0].vector1.angle && ele.segments[0].vector1.distance) {\n var value = Math.max(source.corners.width, source.corners.height);\n tarPoint = Point.transform(source.point, ele.segments[0].vector1.angle, value / 2);\n }\n source.point = isInterSect ? ele.sourceWrapper.bounds.center : getIntersection(ele, sourceEle, source.point, tarPoint, false);\n }\n if (ele.targetPortWrapper === undefined) {\n target.point = target.corners.center;\n if (ele.segments && ele.segments.length > 1) {\n first = ele.segments[ele.segments.length - 2];\n segment = (!Point.isEmptyPoint(first.point)) ? first : undefined;\n }\n var srcPoint = (segment) ? segment.point : source.point;\n if (ele.type === 'Bezier' && ele.segments.length > 0 &&\n ele.segments[ele.segments.length - 1].vector2.angle &&\n ele.segments[ele.segments.length - 1].vector2.distance) {\n var value = Math.max(source.corners.width, source.corners.height);\n srcPoint = Point.transform(target.point, ele.segments[0].vector2.angle, value / 2);\n }\n target.point = isInterSect ? ele.targetWrapper.bounds.center : getIntersection(ele, targetEle, srcPoint, target.point, true);\n }\n intermeditatePoints = intermeditatePointsForStraight(ele, source, target);\n }\n else {\n if (ele.type === 'Orthogonal' && (ele.segments && ele.segments.length > 0) &&\n ele.segments[0].direction !== null) {\n intermeditatePoints = findIntermeditatePoints(ele, source, target, srcPort, tarPort, sourceEle);\n }\n else {\n if (!ele.segments[0]) {\n var segment = new OrthogonalSegment(ele, 'segments', { type: 'Orthogonal' }, true);\n ele.segments.push(segment);\n }\n // eslint-disable-next-line\n ele.segments[0].points = intermeditatePoints = findOrthoSegments(ele, source, target, undefined, lineDistribution);\n }\n }\n return intermeditatePoints;\n}\n/**\n * intermeditatePointsForStraight method \\\n *\n * @returns { PointModel[] } intermeditatePointsForStraight method .\\\n * @param {Connector} element - provide the Connector value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n *\n * @private\n */\nfunction intermeditatePointsForStraight(element, source, target) {\n var intermeditatePoints = [];\n if (element.segments && element.segments.length > 0) {\n var i = void 0;\n var segPoint = [];\n var srcPoint = source.point;\n for (i = 0; i < element.segments.length; i++) {\n var seg = element.segments[parseInt(i.toString(), 10)];\n segPoint = [];\n segPoint.push(srcPoint);\n if (i !== element.segments.length - 1) {\n segPoint.push(seg.point);\n srcPoint = seg.point;\n }\n else {\n segPoint.push(target.point);\n }\n element.segments[parseInt(i.toString(), 10)].points = segPoint;\n if (element.segments.length > 1 && Point.equals(seg.points[0], seg.points[1])) {\n (element.segments).splice(i, 1);\n }\n if (seg) {\n for (var j = 0; j < seg.points.length; j++) {\n if (j > 0 || i === 0) {\n intermeditatePoints.push(seg.points[parseInt(j.toString(), 10)]);\n }\n }\n }\n }\n }\n return intermeditatePoints;\n}\n/**\n * findSourceDirection method \\\n *\n * @returns { PointModel[] } findSourceDirection method .\\\n * @param {Direction} dir - provide the dir value.\n * @param {PointModel} srcPoint - provide the srcPoint value.\n * @param {PointModel} tarPoint - provide the tarPoint value.\n *\n * @private\n */\nfunction findSourceDirection(dir, srcPoint, tarPoint) {\n var direction = (dir === 'Top' || dir === 'Bottom') ?\n ((tarPoint.x > srcPoint.x) ? 'Right' : 'Left') :\n ((tarPoint.y > srcPoint.y) ? 'Bottom' : 'Top');\n return direction;\n}\n/**\n * checkLastSegmentasTerminal method \\\n *\n * @returns { void } checkLastSegmentasTerminal method .\\\n * @param {Connector} ele - provide the Connector value.\n *\n * @private\n */\nfunction checkLastSegmentasTerminal(ele) {\n if (ele.type === 'Straight' || ele.type === 'Bezier') {\n if ((ele.segments.length === 0 || (ele.segments.length > 0 &&\n (!Point.isEmptyPoint(ele.segments[ele.segments.length - 1].point))))) {\n //let segment: BezierSegmentModel | StraightSegmentModel;\n if (ele.type === 'Bezier') {\n var segment = new BezierSegment(ele, 'segments', { type: 'Bezier', isInternalSegment: true }, true);\n (ele.segments).push(segment);\n }\n else {\n var segment = new StraightSegment(ele, 'segments', { type: 'Straight' }, true);\n (ele.segments).push(segment);\n }\n }\n }\n else {\n if (ele.segments.length > 0) {\n var isInvalid = false;\n var i = 0;\n while (i < ele.segments.length) {\n var seg = ele.segments[parseInt(i.toString(), 10)];\n if (isInvalid ||\n (seg && !(seg instanceof OrthogonalSegment || seg instanceof StraightSegment || seg instanceof BezierSegment))) {\n ele.segments.splice(i, 1);\n isInvalid = true;\n }\n else {\n i++;\n }\n }\n }\n if (ele.segments.length === 0 || ele.segments[ele.segments.length - 1].direction) {\n var segment = new OrthogonalSegment(ele, 'segments', { type: 'Orthogonal' }, true);\n ele.segments.push(segment);\n }\n }\n}\n/**\n * checkConsectiveSegmentAsSame method \\\n *\n * @returns { number } checkConsectiveSegmentAsSame method .\\\n * @param {Connector} ele - provide the Connector value.\n * @param {Connector} i - provide the Connector value.\n * @param {Connector} source - provide the Connector value.\n *\n * @private\n */\nfunction checkConsectiveSegmentAsSame(ele, i, source) {\n var seg = ele.segments[parseInt(i.toString(), 10)];\n var extra = (seg.direction === 'Left' || seg.direction === 'Top') ? -(seg.length) : seg.length;\n var angle = (seg.direction === 'Left' || seg.direction === 'Right') ? 0 : 90;\n var segPoint = addLineSegment(source.point, extra, angle);\n ele.segments[i - 1].length += seg.length;\n ele.segments[i - 1].points[1] = source.point = segPoint;\n ele.segments.splice(i, 1);\n i--;\n return i;\n}\n/**\n * nodeOrPortToNode method \\\n *\n * @returns { PointModel[] } nodeOrPortToNode method .\\\n * @param {Connector} ele - provide the Connector value.\n * @param {End} source - provide the Connector value.\n * @param {End} target - provide the Connector value.\n *\n * @private\n */\nfunction nodeOrPortToNode(ele, source, target) {\n var point;\n var portdirection;\n if (ele.sourcePortWrapper) {\n var port = { x: ele.sourcePortWrapper.offsetX, y: ele.sourcePortWrapper.offsetY };\n portdirection = getPortDirection(port, cornersPointsBeforeRotation(ele.sourceWrapper), ele.sourceWrapper.bounds);\n }\n findDirection(ele.targetWrapper, source, target, ele);\n var direction = findSourceDirection(target.direction, source.point, target.point);\n if (ele.sourcePortWrapper !== undefined && source.direction === target.direction &&\n ((source.direction === 'Top' || source.direction === 'Bottom') && (source.corners.center.x === target.corners.center.x)\n || (source.direction === 'Left' || source.direction === 'Right') && (source.corners.center.y === target.corners.center.y))) {\n source.direction = direction;\n point = (direction === 'Top' || direction === 'Bottom') ?\n orthoConnection3Segment(ele, source, target, ele.sourceWrapper.height / 2 + 20) :\n orthoConnection3Segment(ele, source, target, ele.sourceWrapper.width / 2 + 20);\n var source1 = source;\n source1.point = point[1];\n if (direction === 'Left' || direction === 'Right') {\n target.direction = direction;\n target.point = (direction === 'Left') ? target.corners.middleLeft : target.corners.middleRight;\n }\n else {\n findDirection(ele.targetWrapper, source, target, ele);\n }\n point = orthoConnection3Segment(ele, source, target);\n }\n else if (target.point.x >= source.corners.left && target.point.x <= source.corners.right &&\n source.point.y >= source.corners.top && source.point.y <= source.corners.bottom) {\n source.direction = (target.point.y > source.point.y) ? 'Bottom' : 'Top';\n var length_2 = (source.direction === 'Top') ? (source.point.y - source.corners.top + 20) :\n (source.corners.bottom - source.point.y + 20);\n point = orthoConnection3Segment(ele, source, target, length_2);\n }\n else if (ele.sourcePortWrapper && portdirection === getOppositeDirection(direction)) {\n var length_3;\n if ((portdirection === 'Left' || portdirection === 'Right') && (source.point.y >= source.corners.top\n && source.point.y <= source.corners.bottom)) {\n source.direction = (target.point.y > source.point.y) ? 'Bottom' : 'Top';\n length_3 = source.corners.height / 2 + 20;\n }\n else if ((portdirection === 'Top' || portdirection === 'Bottom') && (source.point.x >= source.corners.left\n && source.point.x <= source.corners.right)) {\n source.direction = (target.point.x > source.point.x) ? 'Right' : 'Left';\n length_3 = source.corners.width / 2 + 20;\n }\n if (source.direction && length_3) {\n point = orthoConnection3Segment(ele, source, target, length_3, true);\n }\n else {\n source.direction = direction;\n point = orthoConnection2Segment(source, target);\n }\n }\n else if (ele.sourcePortWrapper && portdirection === target.direction && (portdirection === 'Top' || portdirection === 'Bottom') &&\n (source.corners.center.x === target.corners.center.x)) {\n source.direction = (target.point.y > source.point.y) ? 'Bottom' : 'Top';\n var len = (source.direction === 'Bottom') ? (source.corners.bottom - source.point.y + 20) :\n (source.point.y - source.corners.top + 20);\n point = orthoConnection3Segment(ele, source, target, len);\n }\n else { //901771- Connector routing is not proper while setting the segment direction as \"Left\"\n if (source.direction === target.direction) {\n if (((source.direction === 'Left' || source.direction === 'Right') &&\n target.point.y > source.corners.top - 20 && target.point.y < source.corners.bottom + 20) ||\n ((source.direction === 'Top' || source.direction === 'Bottom') &&\n target.point.x > source.corners.left - 20 && target.point.x < source.corners.right + 20)) {\n var prevdirection = source.direction;\n source.direction = direction;\n point = orthoConnection4Segment(source, target, prevdirection, point, 20, false);\n }\n else {\n source.direction = direction;\n point = orthoConnection2Segment(source, target);\n }\n }\n else {\n source.direction = direction;\n point = orthoConnection2Segment(source, target);\n }\n }\n return point;\n}\n/**\n * checkSourcePointInTarget method \\\n *\n * @returns { void } checkSourcePointInTarget method .\\\n * @param {Connector} ele - provide the Connector value.\n * @param {End} source - provide the Connector value.\n *\n * @private\n */\nfunction checkSourcePointInTarget(ele, source) {\n if (ele.targetWrapper !== undefined && ele.targetPortWrapper === undefined) {\n var padding = 1;\n if (cornersPointsBeforeRotation(ele.targetWrapper).containsPoint(source.point, padding)) {\n var target = ele.targetWrapper;\n var segment = ele.segments[ele.segments.length - 2];\n var lastPoint = segment.points[segment.points.length - 1];\n var direction = getOppositeDirection(segment.direction);\n if (direction === 'Bottom') {\n if (lastPoint.y < target.corners.bottom + padding) {\n segment.points[segment.points.length - 1].y = target.corners.bottom + 20;\n segment.length = Point.distancePoints(segment.points[0], segment.points[segment.points.length - 1]);\n }\n }\n else if (direction === 'Top') {\n if (lastPoint.y > target.corners.top - padding) {\n segment.points[segment.points.length - 1].y = target.corners.top - 20;\n segment.length = Point.distancePoints(segment.points[0], segment.points[segment.points.length - 1]);\n }\n }\n else if (direction === 'Left') {\n if (lastPoint.x > target.corners.left - padding) {\n segment.points[segment.points.length - 1].x = target.corners.left - 20;\n segment.length = Point.distancePoints(segment.points[0], segment.points[segment.points.length - 1]);\n }\n }\n else if (direction === 'Right') {\n if (lastPoint.x < target.corners.right + padding) {\n segment.points[segment.points.length - 1].x = target.corners.right + 20;\n segment.length = Point.distancePoints(segment.points[0], segment.points[segment.points.length - 1]);\n }\n }\n source.point = segment.points[segment.points.length - 1];\n }\n }\n}\n/**\n * findIntermeditatePoints method \\\n *\n * @returns { void } findIntermeditatePoints method .\\\n * @param {Connector} ele - provide the ele value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the source value.\n * @param {DiagramElement} srcPort - provide the srcPort value.\n * @param {DiagramElement} tarPort - provide the tarPort value.\n * @param {DiagramElement} sourceEle - provide the sourceEle value.\n * @param {DiagramElement} targetEle - provide the targetEle value.\n * @private\n */\nfunction findIntermeditatePoints(ele, source, target, srcPort, tarPort, sourceEle, targetEle) {\n var point;\n var intermeditatePoints = [];\n var seg;\n var j;\n var removeSegment;\n checkLastSegmentasTerminal(ele);\n for (var i = 0; i < ele.segments.length; i++) {\n seg = ele.segments[parseInt(i.toString(), 10)];\n if (srcPort && source.direction === getOppositeDirection(seg.direction)) {\n seg.direction = source.direction;\n }\n if (i > 0 && ele.segments[i - 1].direction === seg.direction) {\n i = checkConsectiveSegmentAsSame(ele, i, source);\n }\n else {\n if (seg.direction) {\n source.point = updateSegmentPoints(source, ele.segments[parseInt(i.toString(), 10)]);\n }\n else {\n var segment = ele.segments[i - 1];\n if (segment && segment.points && segment.points.length > 0) {\n source.point = segment.points[segment.points.length - 1];\n }\n }\n }\n if (i === ele.segments.length - 1) {\n checkSourcePointInTarget(ele, source);\n if (tarPort === undefined) {\n point = nodeOrPortToNode(ele, source, target);\n }\n else {\n point = pointToPort(ele, source, target);\n }\n checkPreviousSegment(point, ele);\n seg.points = [];\n if (point.length >= 2) {\n for (j = 0; j < point.length; j++) {\n if (!ele.selectedSegmentIndex) {\n seg.points.push(point[parseInt(j.toString(), 10)]);\n }\n else {\n // EJ2-65063 - If point length is greater then 2 means then empty the last segment points and set it as two points instead of four points\n if (j === point.length - 1 && point.length > 2 && ele.segments.length > 2) {\n // EJ2-69304 - Change the point calculation to work for all port combination\n var point2 = { x: point[parseInt(j.toString(), 10)].x, y: source.point.y };\n // EJ2 - 65063 - Empty the segment points\n seg.points = [];\n // EJ2-69304 - Calculate the point for segment and manually push the point in segment point calculation\n seg.points.push(point2);\n seg.points.push(point[parseInt(j.toString(), 10)]);\n var segment = ele.segments[i - 1];\n //EJ2 - Orthogonal connector gets broken when dragging segment thumb\n if (ele.segments.length < 4) {\n segment.points.pop();\n }\n // Bug 834713: Orthogonal connector routing is not proper, When allowNodeOverlap is Set to true.\n segment.points = segment.points.concat(seg.points);\n }\n else {\n seg.points.push(point[parseInt(j.toString(), 10)]);\n }\n }\n }\n }\n else {\n removeSegment = i;\n }\n }\n // EJ2-65063 - Added below condition !selectedSegmentIndex to restrict the connector segment to remove from its collection.\n if (removeSegment !== undefined && !ele.selectedSegmentIndex) {\n if (removeSegment === ele.segments.length - 1) {\n ele.segments[removeSegment - 1].direction = null;\n ele.segments[removeSegment - 1].length = null;\n }\n ele.segments.splice(removeSegment, 1);\n }\n if (srcPort && i === 0) {\n var sourcePoint = checkPortdirection(ele, srcPort, sourceEle);\n if (sourcePoint) {\n source.point = sourcePoint;\n }\n }\n }\n return returnIntermeditatePoints(ele, intermeditatePoints);\n}\n/**\n * returnIntermeditatePoints method \\\n *\n * @returns { PointModel[] } returnIntermeditatePoints method .\\\n * @param {Connector} element - provide the ele value.\n * @param {PointModel[]} intermeditatePoints - provide the source value.\n * @private\n */\nfunction returnIntermeditatePoints(element, intermeditatePoints) {\n for (var i = 0; i < element.segments.length; i++) {\n var seg = element.segments[parseInt(i.toString(), 10)];\n for (var j = 0; j < seg.points.length; j++) {\n if (j > 0 || i === 0) {\n intermeditatePoints.push(seg.points[parseInt(j.toString(), 10)]);\n }\n }\n }\n return intermeditatePoints;\n}\n/**\n * findDirection method \\\n *\n * @returns { void } findDirection method .\\\n * @param {DiagramElement} node - provide the ele value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the source value.\n * @param {Connector} ele - provide the source value.\n * @private\n */\nfunction findDirection(node, source, target, ele) {\n var nodeDirection;\n var nodeConnectingPoint = { x: 0, y: 0 };\n var nodeCorners = swapBounds(node, node.corners, node.bounds);\n var nodeMargin = source.margin;\n var fixedPoint = source.point;\n if (nodeCorners.bottomCenter.y + nodeMargin.bottom < fixedPoint.y) {\n nodeDirection = 'Bottom';\n nodeConnectingPoint = nodeCorners.bottomCenter;\n }\n else if (nodeCorners.topCenter.y - nodeMargin.top > fixedPoint.y) {\n nodeDirection = 'Top';\n nodeConnectingPoint = nodeCorners.topCenter;\n }\n else if (nodeCorners.middleLeft.x - nodeMargin.left > fixedPoint.x) {\n nodeDirection = 'Left';\n nodeConnectingPoint = nodeCorners.middleLeft;\n }\n else if (nodeCorners.middleRight.x + nodeMargin.right < fixedPoint.x) {\n nodeDirection = 'Right';\n nodeConnectingPoint = nodeCorners.middleRight;\n }\n else {\n var top_1 = Math.abs(fixedPoint.y - nodeCorners.topCenter.y);\n var right = Math.abs(fixedPoint.x - nodeCorners.middleRight.x);\n var bottom = Math.abs(fixedPoint.y - nodeCorners.bottomCenter.y);\n var left = Math.abs(fixedPoint.x - nodeCorners.middleLeft.x);\n var shortes = Number.MAX_VALUE;\n shortes = top_1;\n nodeDirection = 'Top';\n nodeConnectingPoint = nodeCorners.topCenter;\n if (shortes > right) {\n shortes = right;\n nodeDirection = 'Right';\n nodeConnectingPoint = nodeCorners.middleRight;\n }\n if (shortes > bottom) {\n shortes = bottom;\n nodeDirection = 'Bottom';\n nodeConnectingPoint = nodeCorners.bottomCenter;\n }\n if (shortes > left) {\n //shortes = left;\n nodeDirection = 'Left';\n nodeConnectingPoint = nodeCorners.middleLeft;\n }\n }\n target.point = nodeConnectingPoint;\n target.direction = nodeDirection;\n var refPoint = findPoint(nodeCorners, getOppositeDirection(target.direction));\n target.point = getIntersection(ele, node, target.point, refPoint, node === ele.targetWrapper);\n}\n/**\n * findOrthoSegments method \\\n *\n * @returns { PointModel[] } findOrthoSegments method .\\\n * @param {DiagramElement} ele - provide the ele value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @param {Connector} extra - provide the extra value.\n * @param {boolean} lineDistribution - provide the lineDistribution value.\n * @private\n */\nfunction findOrthoSegments(ele, source, target, extra, lineDistribution) {\n var swap = false;\n var intermeditatePoints = [];\n var seg;\n swap = getSwapping(source.direction, target.direction);\n if (swap) {\n swapPoints(source, target);\n }\n if (source.direction === 'Right' && target.direction === 'Left') {\n seg = getRightToLeftSegmentCount(ele, source, target, swap);\n }\n else if (source.direction === 'Right' && target.direction === 'Right') {\n seg = getRightToRightSegmentCount(ele, source, target);\n }\n else if (source.direction === 'Right' && target.direction === 'Top') {\n seg = getRightToTopSegmentCount(ele, source, target, swap);\n }\n else if (source.direction === 'Right' && target.direction === 'Bottom') {\n seg = getRightToBottomSegmentCount(ele, source, target, swap);\n }\n else if (source.direction === 'Bottom' && target.direction === 'Top') {\n seg = getBottomToTopSegmentCount(ele, source, target);\n }\n else if (source.direction === 'Bottom' && target.direction === 'Bottom') {\n /**\n * EJ2-56920-Option to adjust the distance between source node and target node.\n */\n var margin = findMargin(ele);\n source.margin = { left: margin, right: margin, top: margin, bottom: margin };\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n seg = getBottomToBottomSegmentCount(ele, source, target);\n }\n else if (source.direction === 'Bottom' && target.direction === 'Left') {\n seg = getBottomToLeftSegmentCount(ele, source, target, swap);\n }\n else if (source.direction === 'Left' && target.direction === 'Left') {\n seg = getLeftToLeftSegmentCount(ele, source, target);\n }\n else if (source.direction === 'Left' && target.direction === 'Top') {\n seg = getLeftToTopSegmentCount(ele, source, target, swap);\n }\n else if (source.direction === 'Top' && target.direction === 'Top') {\n seg = getTopToTopSegmentCount(ele, source, target);\n }\n if (swap) {\n swapPoints(source, target);\n }\n intermeditatePoints = addOrthoSegments(ele, seg, source, target, extra, lineDistribution);\n if (ele.type === 'Bezier') {\n convertPointToBezierSegment(ele, seg, intermeditatePoints);\n }\n return intermeditatePoints;\n}\n/**\n * Returns the margin of source node and the target node\n *\n * @returns { number } - findMargin method .\\\n * @param { Connector } element - provide the element value\n * @private\n */\nfunction findMargin(element) {\n var margin;\n if (element.connectorSpacing >= 13) {\n margin = 13;\n }\n else if (element.connectorSpacing <= 1) {\n margin = 1;\n }\n else {\n margin = element.connectorSpacing;\n }\n return margin;\n}\n/**\n * findAngle method \\\n *\n * @returns { number } findAngle method .\\\n * @param {DiagramElement} s - provide the s value.\n * @param {End} e - provide the e value.\n * @private\n */\nfunction findAngle(s, e) {\n var r = { x: e.x, y: s.y };\n //const sr: number = Point.findLength(s, r);\n var re = Point.findLength(r, e);\n var es = Point.findLength(e, s);\n var ang = Math.asin(re / es);\n ang = ang * 180 / Math.PI;\n if (s.x < e.x) {\n if (s.y > e.y) {\n ang = 360 - ang;\n }\n }\n else {\n if (s.y < e.y) {\n ang = 180 - ang;\n }\n else {\n ang = 180 + ang;\n }\n }\n return ang;\n}\n/**\n * findPoint method \\\n *\n * @returns { number } findPoint method .\\\n * @param {Corners} cor - provide the cor value.\n * @param {string} direction - provide the direction value.\n * @private\n */\nfunction findPoint(cor, direction) {\n var point;\n switch (direction) {\n case 'Left':\n point = cor.middleLeft;\n break;\n case 'Top':\n point = cor.topCenter;\n break;\n case 'Right':\n point = cor.middleRight;\n break;\n case 'Bottom':\n point = cor.bottomCenter;\n break;\n }\n return point;\n}\n/**\n * pointsFromNodeToPoint method \\\n *\n * @returns { number } pointsFromNodeToPoint method .\\\n * @param {OrthogonalSegment} seg - provide the seg value.\n * @param {string} direction - provide the direction value.\n * @param {Rect} bounds - provide the bounds value.\n * @param {PointModel} point - provide the point value.\n * @param {PointModel} endPoint - provide the endPoint value.\n * @param {boolean} isTarget - provide the isTarget value.\n * @private\n */\nfunction pointsFromNodeToPoint(seg, direction, bounds, point, endPoint, isTarget) {\n var minSpace = 13;\n var x;\n var points = [];\n var y;\n points.push(point);\n //let straight: boolean;\n var straight = (point.y === endPoint.y && (direction === 'Left' && endPoint.x < point.x ||\n direction === 'Right' && endPoint.x > point.x)) ||\n (point.x === endPoint.x && (direction === 'Top' && endPoint.y < point.y ||\n direction === 'Bottom' && endPoint.y > point.y));\n if (!straight) {\n if (direction === 'Top' || direction === 'Bottom') {\n if (direction === 'Top' && endPoint.y < point.y && endPoint.y > point.y - minSpace ||\n direction === 'Bottom' && endPoint.y > point.y && endPoint.y < point.y + minSpace) {\n y = direction === 'Top' ? bounds.top - minSpace : bounds.bottom + minSpace;\n points.push({ x: point.x, y: y });\n points.push({ x: point.x + (endPoint.x - point.x) / 2, y: y });\n points.push({ x: point.x + (endPoint.x - point.x) / 2, y: endPoint.y });\n }\n else if (Math.abs(point.x - endPoint.x) > minSpace &&\n (direction === 'Top' && endPoint.y < point.y || direction === 'Bottom' && endPoint.y > point.y)) {\n //twosegments\n points.push({ x: point.x, y: endPoint.y });\n }\n else {\n y = direction === 'Top' ? bounds.top - minSpace : bounds.bottom + minSpace;\n x = (endPoint.x < point.x) ? bounds.left - minSpace : bounds.right + minSpace;\n points.push({ x: point.x, y: y });\n points.push({ x: endPoint.x, y: y });\n }\n }\n else {\n if (direction === 'Left' && endPoint.x < point.x && endPoint.x > point.x - minSpace || direction === 'right' &&\n endPoint.x > point.x && endPoint.x < point.x + minSpace) {\n x = direction === 'Left' ? bounds.left - minSpace : bounds.right + minSpace;\n points.push({ x: x, y: point.y });\n points.push({ x: x, y: point.y + (endPoint.y - point.y) / 2 });\n points.push({ x: endPoint.x, y: point.y + (endPoint.y - point.y) / 2 });\n }\n else if (Math.abs(point.y - endPoint.y) > minSpace &&\n (direction === 'Left' && endPoint.x < point.x || direction === 'Right' && endPoint.x > point.x)) {\n points.push({ x: endPoint.x, y: point.y });\n //twosegments\n }\n else {\n x = direction === 'Left' ? bounds.left - minSpace : bounds.right + minSpace;\n points.push({ x: x, y: point.y });\n points.push({ x: x, y: endPoint.y });\n }\n }\n if (isTarget) {\n points.push(seg.points[0]);\n points.reverse();\n }\n seg.points = points;\n }\n}\n/**\n * addLineSegment method \\\n *\n * @returns { PointModel } addLineSegment method .\\\n * @param {PointModel} point - provide the seg value.\n * @param {number} extra - provide the direction value.\n * @param {number} angle - provide the bounds value.\n * @private\n */\nfunction addLineSegment(point, extra, angle) {\n var segEnd = Point.transform(point, angle, extra);\n return segEnd;\n}\n/**\n * getIntersection method \\\n *\n * @returns { PointModel } getIntersection method .\\\n * @param {PointModel} ele - provide the ele value.\n * @param {number} bounds - provide the bounds value.\n * @param {number} sPt - provide the sPt value.\n * @param {number} tPt - provide the tPt value.\n * @param {number} isTar - provide the isTar value.\n * @private\n */\nfunction getIntersection(ele, bounds, sPt, tPt, isTar) {\n sPt = { x: sPt.x, y: sPt.y };\n tPt = { x: tPt.x, y: tPt.y };\n //const angle: number = Point.findAngle(tPt, sPt); ///let child: PathElement;// let intersection: PointModel;\n var wrapper = isTar ? ele.targetWrapper : ele.sourceWrapper;\n var padding = (isTar ? ele.targetPadding : ele.sourcePadding);\n var rect;\n var segmentPoints;\n var point = isTar || (ele.type === 'Orthogonal' || ele.type === 'Bezier') ? sPt : tPt;\n //const sourcePoint: PointModel = Point.transform(sPt, angle, Math.max(wrapper.actualSize.height / 2, wrapper.actualSize.width / 2));\n var child = wrapper;\n var sPt1 = rotatePoint(-wrapper.parentTransform, wrapper.offsetX, wrapper.offsetY, sPt);\n var tPt1 = rotatePoint(-wrapper.parentTransform, wrapper.offsetX, wrapper.offsetY, tPt);\n if (ele.type === 'Orthogonal' || ele.type === 'Bezier') {\n var constValue = 5;\n if (sPt1.x === tPt1.x) {\n if (sPt1.y < tPt1.y) {\n sPt1.y -= constValue;\n }\n else {\n sPt1.y += constValue;\n }\n }\n if (sPt1.y === tPt1.y) {\n if (sPt1.x < tPt1.x) {\n sPt1.x -= constValue;\n }\n else {\n sPt1.x += constValue;\n }\n }\n sPt = rotatePoint(wrapper.parentTransform, wrapper.offsetX, wrapper.offsetY, sPt1);\n }\n else {\n //const angle: number = isTar ? Point.findAngle(sPt, tPt) : Point.findAngle(tPt, sPt);\n if (isTar) {\n var angle = Point.findAngle(sPt, tPt);\n tPt = Point.transform({ x: tPt.x, y: tPt.y }, angle, Math.max(wrapper.actualSize.width, wrapper.actualSize.height));\n }\n else {\n var angle = Point.findAngle(tPt, sPt);\n sPt = Point.transform({ x: sPt.x, y: sPt.y }, angle, Math.max(wrapper.actualSize.width, wrapper.actualSize.height));\n }\n }\n if ((ele.sourcePadding || ele.targetPadding)) {\n rect = new Rect(wrapper.bounds.x - padding, wrapper.bounds.y - padding, wrapper.actualSize.width + 2 * padding, wrapper.actualSize.height + 2 * padding);\n }\n if (wrapper instanceof PathElement && wrapper.data) {\n segmentPoints = rect ? [rect.topLeft, rect.topRight, rect.bottomRight, rect.bottomLeft] : child.getPoints();\n if (((child.data.split('m').length - 1) + (child.data.split('M').length - 1)) === 1) {\n segmentPoints[segmentPoints.length] = segmentPoints[0];\n }\n }\n else {\n segmentPoints = rect ? [rect.topLeft, rect.topRight, rect.bottomRight, rect.bottomLeft] : getPoints(wrapper, wrapper.corners);\n segmentPoints[segmentPoints.length] = segmentPoints[0];\n }\n //const length: number = segmentPoints.length;\n var thisSegment = { x1: sPt.x, y1: sPt.y, x2: tPt.x, y2: tPt.y };\n return getIntersectionPoints(thisSegment, segmentPoints, true, point) || sPt;\n}\n/**\n * setLineEndPoint method \\\n *\n * @returns { PointModel } setLineEndPoint method .\\\n * @param {PointModel} element - provide the ele value.\n * @param {number} point - provide the bounds value.\n * @param {number} isTarget - provide the sPt value.\n * @private\n */\nfunction setLineEndPoint(element, point, isTarget) {\n point.x = Math.round(point.x * 100) / 100;\n point.y = Math.round(point.y * 100) / 100;\n if (isTarget) {\n element.targetPoint = point;\n }\n else {\n element.sourcePoint = point;\n }\n return point;\n}\n/**\n * getIntersectionPoints method \\\n *\n * @returns { PointModel } getIntersectionPoints method .\\\n * @param {Segment} thisSegment - provide the ele value.\n * @param {Object[]} pts - provide the bounds value.\n * @param {boolean} minimal - provide the sPt value.\n * @param {PointModel} point - provide the sPt value.\n * @private\n */\nfunction getIntersectionPoints(thisSegment, pts, minimal, point) {\n var length = pts.length;\n var min;\n var segment = {\n x1: pts[0].x, y1: pts[0].y, x2: pts[1].x,\n y2: pts[1].y\n };\n var intersection = intersectSegment(thisSegment, segment);\n if (intersection) {\n // if (!minimal) { return intersection; } //commented because minimal is always true\n min = Point.distancePoints(intersection, point);\n }\n if (isNaN(min) || min > 0) {\n for (var i = 1; i < length - 1; i++) {\n segment = {\n x1: pts[parseInt(i.toString(), 10)].x, y1: pts[parseInt(i.toString(), 10)].y,\n x2: pts[i + 1].x, y2: pts[i + 1].y\n };\n var intersect = intersectSegment(thisSegment, segment);\n if (intersect) {\n // if (!minimal) { return intersect; }//commented because minimal is always true\n var dist = Point.distancePoints(intersect, point);\n if (isNaN(min) || min > dist) {\n min = dist;\n intersection = intersect;\n }\n if (min >= 0 && min <= 1) {\n break;\n }\n }\n }\n }\n return intersection;\n}\n/**\n * intersectSegment method \\\n *\n * @returns { PointModel } intersectSegment method .\\\n * @param {Segment} segment1 - provide the ele value.\n * @param {Segment} segment2 - provide the bounds value.\n * @private\n */\nfunction intersectSegment(segment1, segment2) {\n var x1 = segment1.x1;\n var y1 = segment1.y1;\n var x2 = segment1.x2;\n var y2 = segment1.y2;\n var x3 = segment2.x1;\n var y3 = segment2.y1;\n var x4 = segment2.x2;\n var y4 = segment2.y2;\n var a1;\n var a2;\n var b1;\n var b2;\n var c1;\n var c2;\n var x;\n var y;\n var r1;\n var r2;\n var r3;\n var r4;\n var offset;\n var num;\n // eslint-disable-next-line\n a1 = y2 - y1;\n b1 = x1 - x2;\n c1 = (x2 * y1) - (x1 * y2);\n // eslint-disable-next-line\n r3 = ((a1 * x3) + (b1 * y3) + c1);\n r4 = ((a1 * x4) + (b1 * y4) + c1);\n if ((r3 !== 0) && (r4 !== 0) && sameSign(r3, r4)) {\n return null;\n }\n // eslint-disable-next-line\n a2 = y4 - y3;\n b2 = x3 - x4;\n c2 = (x4 * y3) - (x3 * y4);\n // eslint-disable-next-line\n r1 = (a2 * x1) + (b2 * y1) + c2;\n r2 = (a2 * x2) + (b2 * y2) + c2;\n if ((r1 !== 0) && (r2 !== 0) && (sameSign(r1, r2))) {\n return null;\n }\n var denom = (a1 * b2) - (a2 * b1);\n if (denom === 0) {\n return null;\n }\n if (denom < 0) {\n offset = -denom / 2;\n }\n else {\n offset = denom / 2;\n }\n offset = 0;\n num = (b1 * c2) - (b2 * c1);\n if (num < 0) {\n x = (num - offset) / denom;\n }\n else {\n x = (num + offset) / denom;\n }\n num = (a2 * c1) - (a1 * c2);\n if (num < 0) {\n y = (num - offset) / denom;\n }\n else {\n y = (num + offset) / denom;\n }\n return { x: x, y: y };\n}\n/**\n * sameSign method \\\n *\n * @returns { boolean } sameSign method .\\\n * @param {Connector} a - provide the Connector value.\n * @param {End} b - provide the source End value.\n * @private\n */\nfunction sameSign(a, b) {\n return ((a * b) >= 0);\n}\n/**\n * getRightToLeftSegmentCount method \\\n *\n * @returns { NoOfSegments } getRightToLeftSegmentCount method .\\\n * @param {Connector} element - provide the Connector value.\n * @param {End} source - provide the source End value.\n * @param {End} target - provide the target End value.\n * @param {boolean} swap - provide the swap value.\n * @private\n */\nfunction getRightToLeftSegmentCount(element, source, target, swap) {\n var srcPort = element.sourcePortWrapper;\n //let targetPort: DiagramElement = element.targetPortWrapper;\n var pts;\n var diffY = Math.round(Math.abs(source.point.y - target.point.y));\n //let diffX: number = Math.round(Math.abs(source.point.x - target.point.x));\n var right = { x: Math.max(source.point.x, source.corners.right), y: source.point.y };\n var left = { x: Math.min(target.point.x, target.corners.left), y: target.point.y };\n var margin = findMargin(element);\n if (swap) {\n //let point: PointModel;\n var point = left;\n left = right;\n right = point;\n }\n if (!(source.corners.bottom + margin < target.corners.top - margin ||\n source.corners.top - margin > target.corners.bottom + margin)) {\n if (element.type !== 'Bezier') {\n margin = 0;\n }\n else if (target.corners.left - source.corners.right <= margin * 2 && target.corners.left - source.corners.right >= 5) {\n margin = 0;\n }\n }\n source.margin = { left: margin, right: margin, top: margin, bottom: margin };\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n if (diffY === 0 && (source.corners.right < target.corners.left\n || (swap && source.corners.right < target.corners.left))) {\n pts = NoOfSegments.One;\n }\n else if (source.point.x + source.margin.right < target.point.x - target.margin.left) {\n pts = NoOfSegments.Three;\n }\n else if (element.sourceWrapper !== element.targetWrapper &&\n (cornersPointsBeforeRotation(element.sourceWrapper).containsPoint(left) ||\n cornersPointsBeforeRotation(element.targetWrapper).containsPoint(right))) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.bottom <= target.corners.top) {\n pts = NoOfSegments.Five;\n }\n else if (source.corners.top >= target.corners.top) {\n pts = NoOfSegments.Five;\n }\n else if ((srcPort !== undefined && srcPort.offsetY <= target.corners.top) ||\n (srcPort === undefined && source.corners.right <= target.corners.top)) {\n pts = NoOfSegments.Five;\n }\n else if ((srcPort !== undefined && srcPort.offsetY >= target.corners.bottom) ||\n (srcPort === undefined && source.corners.right >= target.corners.bottom)) {\n pts = NoOfSegments.Five;\n }\n else {\n pts = NoOfSegments.Five;\n }\n return pts;\n}\n/**\n * getRightToRightSegmentCount method \\\n *\n * @returns { NoOfSegments } getRightToRightSegmentCount method .\\\n * @param {Connector} element - provide the Connector value.\n * @param {End} sourceObj - provide the source End value.\n * @param {End} targetObj - provide the target End value.\n * @private\n */\nfunction getRightToRightSegmentCount(element, sourceObj, targetObj) {\n var sourcePort = element.sourcePortWrapper;\n var tarPort = element.targetPortWrapper;\n var pts;\n var diffX = sourceObj.point.x - targetObj.point.x;\n var diffY = sourceObj.point.y - targetObj.point.y;\n var margin = findMargin(element);\n targetObj.margin = { left: margin, right: margin, top: margin, bottom: margin };\n sourceObj.margin = { left: margin, right: margin, top: margin, bottom: margin };\n if (sourceObj.corners.right >= targetObj.corners.right) {\n if ((sourcePort !== undefined && (sourcePort.offsetY < targetObj.corners.top - targetObj.margin.top ||\n sourcePort.offsetY > targetObj.corners.bottom + targetObj.margin.bottom)) ||\n (sourcePort === undefined && sourceObj.corners.middleRight.y < targetObj.corners.top)) {\n pts = NoOfSegments.Three;\n }\n else if ((sourcePort !== undefined && sourcePort.offsetY > targetObj.corners.bottom + targetObj.margin.bottom\n && sourceObj.corners.top > targetObj.corners.bottom) ||\n (sourcePort === undefined && sourceObj.corners.middleRight.y > targetObj.corners.bottom)) {\n pts = NoOfSegments.Three;\n }\n else if ((sourcePort !== undefined && sourcePort.offsetY < targetObj.corners.top - targetObj.margin.top\n && sourceObj.corners.bottom > targetObj.corners.top) ||\n (sourcePort === undefined && sourceObj.corners.middleRight.y > targetObj.corners.bottom)) {\n pts = NoOfSegments.Three;\n }\n else if (sourceObj.corners.right < targetObj.corners.left ||\n targetObj.corners.right < sourceObj.corners.left) {\n pts = NoOfSegments.Five;\n }\n else if (diffX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n }\n else if ((tarPort !== undefined && sourceObj.corners.bottom < tarPort.offsetY - targetObj.margin.top) ||\n (tarPort === undefined && sourceObj.corners.bottom < targetObj.corners.middleRight.y)) {\n pts = NoOfSegments.Three;\n }\n else if ((tarPort !== undefined && sourceObj.corners.top > tarPort.offsetY + targetObj.margin.right) ||\n (tarPort === undefined && sourceObj.corners.top > targetObj.corners.middleRight.y)) {\n pts = NoOfSegments.Three;\n }\n else if ((tarPort !== undefined && ((sourcePort !== undefined && sourcePort.offsetX < targetObj.corners.left &&\n sourcePort.offsetX !== tarPort.offsetX && (Math.abs(sourceObj.corners.right - targetObj.corners.left) <= 20)) ||\n (sourcePort === undefined && sourceObj.corners.right < targetObj.corners.left &&\n sourceObj.corners.center.x !== targetObj.corners.center.x && sourceObj.corners.center.y !== targetObj.corners.center.y)))) {\n pts = NoOfSegments.Three;\n }\n else if (sourceObj.corners.right < targetObj.corners.left) {\n pts = NoOfSegments.Five;\n }\n else if (diffX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n return pts;\n}\n/**\n * getRightToTopSegmentCount method \\\n *\n * @returns { NoOfSegments } getRightToTopSegmentCount method .\\\n * @param {Connector} element - provide the element value.\n * @param {End} source - provide the target value.\n * @param {End} target - provide the target value.\n * @param {End} swap - provide the swap value.\n * @private\n */\nfunction getRightToTopSegmentCount(element, source, target, swap) {\n var tarPort = element.targetPortWrapper;\n var srcPort = element.sourcePortWrapper;\n var right = { x: Math.max(source.point.x, source.corners.right), y: source.point.y };\n var top = { x: target.point.x, y: Math.min(target.point.y, target.corners.top) };\n var margin = findMargin(element);\n var pts;\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n source.margin = { top: margin, bottom: margin, left: margin, right: margin };\n if (swap) {\n //let port: DiagramElement;\n var port = srcPort;\n srcPort = tarPort;\n tarPort = port;\n var point = right;\n right = top;\n top = point;\n }\n if ((srcPort !== undefined && srcPort.offsetY < target.corners.top - target.margin.top) ||\n (srcPort === undefined && source.corners.bottom < target.corners.top - target.margin.top)) {\n if (source.corners.bottom < target.corners.top) {\n if ((tarPort !== undefined && source.corners.right + source.margin.right < tarPort.offsetX) ||\n (tarPort === undefined && source.corners.right + source.margin.right < target.corners.topCenter.x)) {\n pts = NoOfSegments.Two;\n }\n else {\n pts = NoOfSegments.Four;\n }\n }\n else if ((tarPort !== undefined && source.corners.left > tarPort.offsetX) ||\n (tarPort === undefined && source.corners.left > target.corners.topCenter.x)) {\n pts = NoOfSegments.Four;\n }\n else {\n pts = NoOfSegments.Two;\n }\n }\n else if (srcPort !== undefined && Math.abs(source.corners.right - target.corners.left) <= 5 &&\n Math.abs(srcPort.offsetY - target.corners.top) <= 5) {\n pts = NoOfSegments.Two;\n }\n else if (tarPort !== undefined && source.corners.right < target.corners.left\n && Math.abs(tarPort.offsetX - source.corners.topCenter.x) >= 25\n && source.corners.middleRight.y + source.margin.right < tarPort.offsetY) {\n pts = NoOfSegments.Two;\n }\n else if (source.corners.right < target.corners.left) {\n pts = NoOfSegments.Four;\n }\n else if (element.sourceWrapper !== element.targetWrapper &&\n (cornersPointsBeforeRotation(element.sourceWrapper).containsPoint(top) ||\n cornersPointsBeforeRotation(element.targetWrapper).containsPoint(right))) {\n pts = NoOfSegments.Two;\n }\n else {\n pts = NoOfSegments.Four;\n }\n return pts;\n}\n/**\n * getRightToTopSegmentCount method \\\n *\n * @returns { NoOfSegments } getRightToTopSegmentCount method .\\\n * @param {Connector} element - provide the element value.\n * @param {End} source - provide the target value.\n * @param {End} target - provide the target value.\n * @param {End} swap - provide the swap value.\n * @private\n */\nfunction getRightToBottomSegmentCount(element, source, target, swap) {\n var margin = findMargin(element);\n source.margin = { left: margin, right: margin, top: margin, bottom: margin };\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n var pts;\n var srcPort = element.sourcePortWrapper;\n var tarPort = element.targetPortWrapper;\n //let right: PointModel = { x: Math.max(source.point.x, source.corners.right), y: source.point.y };\n //let bottom: PointModel = { x: target.point.x, y: Math.max(target.point.y, target.corners.bottom) };\n if (swap) {\n //let port: DiagramElement;\n var port = srcPort;\n srcPort = tarPort;\n tarPort = port;\n }\n if ((srcPort !== undefined && srcPort.offsetY > target.corners.bottom + target.margin.bottom) ||\n (srcPort === undefined && source.corners.middleRight.y > target.corners.bottom + target.margin.bottom)) {\n if (source.corners.top > target.corners.bottom) {\n if ((tarPort !== undefined && source.corners.right + source.margin.right < tarPort.offsetX) ||\n (tarPort === undefined && source.corners.right + source.margin.right < target.corners.bottomCenter.x)) {\n pts = NoOfSegments.Two;\n }\n else {\n pts = NoOfSegments.Four;\n }\n }\n else if ((tarPort !== undefined && source.corners.left > tarPort.offsetX) ||\n (tarPort === undefined && source.corners.left > target.corners.bottomCenter.x)) {\n pts = NoOfSegments.Four;\n }\n else {\n pts = NoOfSegments.Two;\n }\n }\n else if (srcPort !== undefined &&\n Math.abs(source.corners.right - target.corners.left) <= 25 &&\n Math.abs(srcPort.offsetY - target.corners.bottom) <= 25) {\n pts = NoOfSegments.Two;\n }\n else if (source.corners.right < target.corners.left) {\n pts = NoOfSegments.Four;\n }\n else {\n pts = NoOfSegments.Four;\n }\n return pts;\n}\n/**\n * getBottomToTopSegmentCount method \\\n *\n * @returns { NoOfSegments } getBottomToTopSegmentCount method .\\\n * @param {Connector} element - provide the connector value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @private\n */\nfunction getBottomToTopSegmentCount(element, source, target) {\n var pts;\n var diffX = source.point.x - target.point.x;\n //const diffY: number = source.point.y - target.point.y;\n //let bottom: PointModel = { x: source.point.x, y: Math.max(source.point.y, source.corners.bottom) };\n //let top: PointModel = { x: target.point.x, y: Math.min(target.point.y, target.corners.top) };\n var margin = findMargin(element);\n if (!(source.corners.right + margin < target.corners.left - margin ||\n source.corners.left - margin > target.corners.right + margin)) {\n if (element.type !== 'Bezier') {\n margin = 0;\n }\n else if (target.corners.top - source.corners.bottom <= margin * 2 && target.corners.top - source.corners.bottom >= 5) {\n margin = 0;\n }\n }\n source.margin = { left: margin, right: margin, top: margin, bottom: margin };\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n if (diffX === 0 && source.corners.bottom < target.corners.top) {\n pts = NoOfSegments.One;\n }\n else if (source.corners.bottom + source.margin.bottom < target.corners.top - target.margin.top) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.right + source.margin.right < target.corners.left - target.margin.left) {\n pts = NoOfSegments.Five;\n }\n else if (source.corners.left - source.margin.left > target.corners.right + target.margin.right) {\n pts = NoOfSegments.Five;\n }\n else {\n pts = NoOfSegments.Five;\n }\n return pts;\n}\n/**\n * getBottomToLeftSegmentCount method \\\n *\n * @returns { NoOfSegments } getBottomToLeftSegmentCount method .\\\n * @param {End} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @param {End} swap - provide the swap value.\n * @private\n */\nfunction getBottomToLeftSegmentCount(element, source, target, swap) {\n var srcPort = element.sourcePortWrapper;\n var tarPort = element.targetPortWrapper;\n //let bottom: PointModel = { x: source.point.x, y: Math.max(source.point.y, source.corners.bottom) };\n //let left: PointModel = { x: Math.min(target.point.x, target.corners.left), y: target.point.y };\n var margin = findMargin(element);\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n source.margin = { top: margin, bottom: margin, left: margin, right: margin };\n var pts;\n if (swap) {\n //let port: DiagramElement;\n var port = srcPort;\n srcPort = tarPort;\n tarPort = port;\n }\n if ((srcPort !== undefined && srcPort.offsetX < target.corners.left - target.margin.left) ||\n (srcPort === undefined && source.corners.bottomCenter.x < target.corners.bottomLeft.x - target.margin.left)) {\n if (source.corners.right < target.corners.left) {\n if ((tarPort !== undefined && source.corners.bottom + source.margin.bottom < tarPort.offsetY) ||\n (tarPort === undefined && source.corners.bottom + source.margin.bottom < target.corners.middleLeft.y)) {\n pts = NoOfSegments.Two;\n }\n else {\n pts = NoOfSegments.Four;\n }\n }\n else if ((tarPort !== undefined && source.corners.top > tarPort.offsetY) ||\n (tarPort === undefined && source.corners.top > target.corners.middleLeft.y)) {\n pts = NoOfSegments.Four;\n }\n else {\n pts = NoOfSegments.Two;\n }\n }\n else if (tarPort !== undefined &&\n Math.abs(source.corners.right - target.corners.left) <= 25 &&\n Math.abs(tarPort.offsetY - source.corners.bottom) <= 25) {\n pts = NoOfSegments.Two;\n }\n else {\n pts = NoOfSegments.Four;\n }\n return pts;\n}\n/**\n * getBottomToBottomSegmentCount method \\\n *\n * @returns { NoOfSegments } getBottomToBottomSegmentCount method .\\\n * @param {End} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @private\n */\nfunction getBottomToBottomSegmentCount(element, source, target) {\n var srcPort = element.sourcePortWrapper;\n var tarPort = element.targetPortWrapper;\n var difX = Math.round(Math.abs(source.point.x - target.point.x));\n var diffY = Math.round(Math.abs(target.point.y - target.point.y));\n var pts;\n if (source.corners.bottom < target.corners.bottom) {\n if ((srcPort !== undefined && srcPort.offsetX < target.corners.left - target.margin.left) ||\n (srcPort === undefined && source.corners.bottomCenter.x < target.corners.left - target.margin.left)) {\n pts = NoOfSegments.Three;\n }\n else if ((srcPort !== undefined && srcPort.offsetX > target.corners.right + target.margin.right) ||\n (srcPort === undefined && source.corners.bottomCenter.x > target.corners.right + target.margin.right)) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.bottom < target.corners.top) {\n pts = NoOfSegments.Five;\n }\n else if (difX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n }\n else if ((tarPort !== undefined && source.corners.left - source.margin.left > tarPort.offsetX) ||\n (tarPort === undefined && source.corners.left > target.corners.left)) {\n pts = NoOfSegments.Three;\n }\n else if ((tarPort !== undefined && source.corners.right + source.margin.right < tarPort.offsetX) ||\n (tarPort === undefined &&\n source.corners.right < target.corners.right)) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.top > target.corners.bottom) {\n pts = NoOfSegments.Five;\n }\n else if (difX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n return pts;\n}\n/**\n * getLeftToTopSegmentCount method \\\n *\n * @returns { NoOfSegments } getLeftToTopSegmentCount method .\\\n * @param {End} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @param {End} swap - provide the swap value.\n * @private\n */\nfunction getLeftToTopSegmentCount(element, source, target, swap) {\n var pts;\n var sourcePort = element.sourcePortWrapper;\n var margin = findMargin(element);\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n source.margin = { top: margin, bottom: margin, left: margin, right: margin };\n var tarPort = element.targetPortWrapper;\n var left = { x: Math.min(source.point.x, source.corners.left), y: source.point.y };\n var top = { x: target.point.x, y: Math.min(target.point.y, target.corners.top) };\n if (swap) {\n //let port: DiagramElement;\n var port = sourcePort;\n sourcePort = tarPort;\n tarPort = port;\n var point = left;\n left = top;\n top = point;\n }\n if ((sourcePort !== undefined && sourcePort.offsetY < target.corners.top - target.margin.top) ||\n (sourcePort === undefined && (source.corners.bottom < target.corners.top - target.margin.top ||\n source.corners.middleLeft.y < target.corners.top - target.margin.top))) {\n if (source.corners.bottom < target.corners.top) {\n if ((tarPort !== undefined && source.corners.left - source.margin.left > tarPort.offsetX) ||\n (tarPort === undefined && source.corners.left - source.margin.left > target.corners.topCenter.x)) {\n pts = NoOfSegments.Two;\n }\n else {\n pts = NoOfSegments.Four;\n }\n }\n else if ((tarPort !== undefined && source.corners.right < tarPort.offsetX) ||\n (tarPort === undefined && source.corners.right < target.corners.topCenter.x)) {\n pts = NoOfSegments.Four;\n }\n else {\n pts = NoOfSegments.Two;\n }\n }\n else if (sourcePort !== undefined &&\n Math.abs(source.corners.left - target.corners.right) <= 25 &&\n Math.abs(sourcePort.offsetY - target.corners.top) <= 25) {\n pts = NoOfSegments.Two;\n }\n else if (element.sourceWrapper !== element.targetWrapper &&\n (cornersPointsBeforeRotation(element.sourceWrapper).containsPoint(top) ||\n cornersPointsBeforeRotation(element.targetWrapper).containsPoint(left))) {\n pts = NoOfSegments.Two;\n }\n else if (source.corners.left > target.corners.right) {\n pts = NoOfSegments.Four;\n }\n else {\n pts = NoOfSegments.Four;\n }\n return pts;\n}\n/**\n * getLeftToLeftSegmentCount method \\\n *\n * @returns { NoOfSegments } getLeftToLeftSegmentCount method .\\\n * @param {End} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @private\n */\nfunction getLeftToLeftSegmentCount(element, source, target) {\n var srcPort = element.sourcePortWrapper;\n var targetPort = element.targetPortWrapper;\n var margin = findMargin(element);\n source.margin = { left: margin, right: margin, top: margin, bottom: margin };\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n var diffX = Math.round(Math.abs(source.point.x - target.point.x));\n var diffY = Math.round(Math.abs(source.point.y - target.point.y));\n var pts;\n if (source.corners.left < target.corners.left) {\n if ((targetPort !== undefined && source.corners.bottom + source.margin.bottom < targetPort.offsetY) ||\n (targetPort === undefined && source.corners.bottom + source.margin.bottom < target.corners.middleLeft.y)) {\n pts = NoOfSegments.Three;\n }\n else if ((targetPort !== undefined && source.corners.top - source.margin.top > targetPort.offsetY) ||\n (targetPort === undefined && source.corners.top - source.margin.top > target.corners.middleLeft.y)) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.right < target.corners.left ||\n target.corners.right < source.corners.left) {\n pts = NoOfSegments.Five;\n }\n else if (diffX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n }\n else if ((srcPort !== undefined && srcPort.offsetY < target.corners.top - target.margin.top) ||\n (srcPort === undefined && source.corners.middleLeft.y < target.corners.top)) {\n pts = NoOfSegments.Three;\n }\n else if ((srcPort !== undefined && srcPort.offsetY > target.corners.bottom + target.margin.bottom) ||\n (srcPort === undefined && source.corners.middleLeft.y > target.corners.bottom + target.margin.bottom)) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.left > target.corners.right) {\n pts = NoOfSegments.Five;\n }\n else if (diffX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n return pts;\n}\n/**\n * getTopToTopSegmentCount method \\\n *\n * @returns { NoOfSegments } getTopToTopSegmentCount method .\\\n * @param {End} element - provide the element value.\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @private\n */\nfunction getTopToTopSegmentCount(element, source, target) {\n var srcPort = element.sourcePortWrapper;\n var targetPort = element.targetPortWrapper;\n var diffX = Math.round(Math.abs(source.point.x - target.point.x));\n var diffY = Math.round(Math.abs(source.point.y - target.point.y));\n var margin = findMargin(element);\n target.margin = { left: margin, right: margin, top: margin, bottom: margin };\n source.margin = { top: margin, bottom: margin, left: margin, right: margin };\n var pts;\n if (source.corners.top < target.corners.top) {\n if ((targetPort !== undefined && source.corners.left - source.margin.left > targetPort.offsetX) ||\n (targetPort === undefined && source.corners.left > target.corners.left)) {\n pts = NoOfSegments.Three;\n }\n else if ((targetPort !== undefined && source.corners.right + source.margin.right < targetPort.offsetX) ||\n (targetPort === undefined && source.corners.right < target.corners.right)) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.bottom < target.corners.top) {\n pts = NoOfSegments.Five;\n }\n else if (diffX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n }\n else if ((srcPort !== undefined && srcPort.offsetX > target.corners.right + target.margin.right) ||\n (srcPort === undefined && source.corners.left > target.corners.right)) {\n pts = NoOfSegments.Three;\n }\n else if ((srcPort !== undefined && srcPort.offsetX < target.corners.left - target.margin.left) ||\n (srcPort === undefined && source.corners.bottomRight.x < target.corners.left)) {\n pts = NoOfSegments.Three;\n }\n else if (source.corners.top > target.corners.bottom) {\n pts = NoOfSegments.Five;\n }\n else if (diffX === 0 || diffY === 0) {\n pts = NoOfSegments.One;\n }\n else {\n pts = NoOfSegments.Three;\n }\n return pts;\n}\n/**\n * addOrthoSegments method \\\n *\n * @returns { PointModel[] } addOrthoSegments method .\\\n * @param {Connector} element - provide the element value.\n * @param {NoOfSegments} seg - provide the seg value.\n * @param {End} sourceEnd - provide the source value.\n * @param {End} targetEnd - provide the target value.\n * @param {number} segLength - provide the segLength value.\n * @param {boolean} lineDistribution - provide the lineDistribution value.\n * @private\n */\nfunction addOrthoSegments(element, seg, sourceEnd, targetEnd, segLength, lineDistribution) {\n var src = element.sourceWrapper;\n var tar = element.targetWrapper;\n //let tarPort: DiagramElement = element.targetPortWrapper;\n var intermeditatePoints;\n var srcCorner = src.corners;\n var tarCorner = tar.corners;\n var value;\n var extra = 20;\n var source = { corners: sourceEnd.corners, point: sourceEnd.point, direction: sourceEnd.direction, margin: sourceEnd.margin };\n var target = { corners: targetEnd.corners, point: targetEnd.point, direction: targetEnd.direction, margin: targetEnd.margin };\n if (source.direction !== target.direction || seg === NoOfSegments.Five) {\n if (source.direction === getOppositeDirection(target.direction) || seg === NoOfSegments.Three) {\n switch (source.direction) {\n case 'Left':\n if (srcCorner.middleLeft.x > tarCorner.middleRight.x) {\n value = (srcCorner.middleLeft.x - tarCorner.middleRight.x) / 2;\n extra = !lineDistribution ? Math.min(extra, value) : value;\n }\n break;\n case 'Right':\n if (srcCorner.middleRight.x < tarCorner.middleLeft.x) {\n value = (tarCorner.middleLeft.x - srcCorner.middleRight.x) / 2;\n extra = !lineDistribution ? Math.min(extra, value) : value;\n }\n break;\n case 'Top':\n if (srcCorner.topCenter.y > tarCorner.bottomCenter.y) {\n value = (srcCorner.topCenter.y - tarCorner.bottomCenter.y) / 2;\n extra = !lineDistribution ? Math.min(extra, value) : value;\n }\n break;\n case 'Bottom':\n if (srcCorner.bottomCenter.y < tarCorner.topCenter.y) {\n value = (tarCorner.topCenter.y - srcCorner.bottomCenter.y) / 2;\n extra = !lineDistribution ? Math.min(extra, value) : value;\n }\n break;\n }\n }\n }\n extra = adjustSegmentLength(srcCorner, source, extra);\n var isBezier = element.type === 'Bezier';\n if (segLength) {\n extra = Math.max(extra, segLength);\n }\n if (seg === NoOfSegments.One) {\n intermeditatePoints = [source.point, target.point];\n }\n if (seg === NoOfSegments.Two) {\n intermeditatePoints = orthoConnection2Segment(source, target);\n }\n if (seg === NoOfSegments.Three) {\n intermeditatePoints = orthoConnection3Segment(element, source, target, extra, undefined, isBezier);\n }\n if (seg === NoOfSegments.Four) {\n var prevDir = undefined;\n intermeditatePoints = orthoConnection4Segment(source, target, prevDir, intermeditatePoints, extra, isBezier);\n }\n if (seg === NoOfSegments.Five) {\n intermeditatePoints = orthoConnection5Segment(source, target, extra, isBezier);\n }\n return intermeditatePoints;\n}\n/**\n * adjustSegmentLength method \\\n *\n * @returns { PointModel[] } adjustSegmentLength method .\\\n * @param {Rect | Corners} bounds - provide the element value.\n * @param {End} source - provide the seg value.\n * @param {number} extra - provide the source value.\n * @private\n */\nfunction adjustSegmentLength(bounds, source, extra) {\n switch (source.direction) {\n case 'Left':\n if (source.point.x > bounds.left) {\n extra = (source.point.x - bounds.left) > extra ? ((source.point.x - bounds.left) + extra) : extra;\n }\n break;\n case 'Right':\n if (source.point.x < bounds.right) {\n extra = (bounds.right - source.point.x) > extra ? ((bounds.right - source.point.x) + extra) : extra;\n }\n break;\n case 'Top':\n if (source.point.y > bounds.top) {\n extra = (source.point.y - bounds.top) > extra ? ((source.point.y - bounds.top) + extra) : extra;\n }\n break;\n case 'Bottom':\n if (source.point.y < bounds.bottom) {\n extra = (bounds.bottom - source.point.y) > extra ? ((bounds.bottom - source.point.y) + extra) : extra;\n }\n break;\n }\n return extra;\n}\n/**\n * orthoConnection2Segment method \\\n *\n * @returns { PointModel[] } orthoConnection2Segment method .\\\n * @param {Rect | Corners} source - provide the source value.\n * @param {End} target - provide the target value.\n * @private\n */\nfunction orthoConnection2Segment(source, target) {\n var intermeditatePoints;\n switch (source.direction) {\n case 'Left':\n case 'Right':\n // eslint-disable-next-line\n var point1 = { x: target.point.x, y: source.point.y };\n intermeditatePoints = (Point.equals(source.point, point1) || Point.equals(target.point, point1)) ?\n [source.point, target.point] : [source.point, point1, target.point];\n break;\n case 'Top':\n case 'Bottom':\n // eslint-disable-next-line no-case-declarations\n var point2 = { x: source.point.x, y: target.point.y };\n intermeditatePoints = (Point.equals(source.point, point2) || Point.equals(target.point, point2)) ?\n [source.point, target.point] : [source.point, point2, target.point];\n break;\n }\n return intermeditatePoints;\n}\n/**\n * orthoConnection3Segment method \\\n *\n * @returns { PointModel[] } orthoConnection2Segment method .\\\n * @param {Connector} element - provide the source value.\n * @param {End} source - provide the target value.\n * @param {End} target - provide the target value.\n * @param {number} extra - provide the target value.\n * @param {boolean} allow - provide the target value.\n * @param {boolean} isBezier - provide the isBezier boolean value.\n * @private\n */\nfunction orthoConnection3Segment(element, source, target, extra, allow, isBezier) {\n if (isBezier === void 0) { isBezier = false; }\n if (!extra) {\n extra = 20;\n }\n if (isBezier) {\n if (source.direction !== target.direction) {\n if (source.direction === 'Left' || source.direction === 'Right') {\n extra = Math.floor(Math.abs(source.point.x - target.point.x) * 0.5);\n }\n else {\n extra = Math.floor(Math.abs(source.point.y - target.point.y) * 0.5);\n }\n }\n }\n var srcPort = element.sourcePortWrapper;\n var intermeditatePoints;\n var segmentValue;\n var next;\n var diffx = target.point.x - source.point.x;\n var diffy = target.point.y - source.point.y;\n var temp;\n if (!allow && (Math.abs(diffx) < 0.001 || Math.abs(diffy) < 0.001)) {\n if (target.direction === undefined) {\n intermeditatePoints = [source.point, target.point];\n return intermeditatePoints;\n }\n }\n if (element.targetWrapper === undefined && Math.abs(diffx) <= 31 && Math.abs(diffy) <= 31) {\n if ((source.direction === 'Left' || source.direction === 'Right')) {\n if (Math.abs(diffy) < 12) {\n source.direction = (source.point.y > target.point.y) ? 'Top' : 'Bottom';\n }\n }\n else {\n if (Math.abs(diffx) < 12) {\n source.direction = (source.point.x > target.point.x) ? 'Left' : 'Right';\n }\n }\n if (Math.abs(diffx) > 12 || Math.abs(diffy) > 12) {\n return orthoConnection2Segment(source, target);\n }\n else {\n extra += 5;\n }\n }\n if (source.direction === 'Left' || source.direction === 'Right') {\n if (source.direction === 'Right') {\n if (target.direction !== undefined && target.direction === 'Right') {\n extra = Math.max(source.point.x, target.point.x) - source.point.x + extra;\n }\n if (source.point.x > target.point.x && srcPort === undefined) {\n extra = -extra;\n }\n }\n else {\n if (target.direction !== undefined && target.direction === 'Left') {\n extra = source.point.x - Math.min(source.point.x, target.point.x) + extra;\n }\n if (source.point.x > target.point.x || srcPort !== undefined || source.direction === 'Left') {\n extra = -extra;\n }\n }\n temp = target.point.y - source.point.y;\n segmentValue = addLineSegment(source.point, extra, 0);\n temp = target.point.y - segmentValue.y;\n if (temp !== 0) {\n next = addLineSegment(segmentValue, target.point.y - segmentValue.y, 90);\n }\n }\n else if (source.direction === 'Top' || source.direction === 'Bottom') {\n if (source.direction === 'Bottom') {\n if (target.direction !== undefined && target.direction === 'Bottom') {\n extra = Math.max(source.point.y, target.point.y) - source.point.y + extra;\n }\n }\n else {\n if (target.direction !== undefined && target.direction === 'Top') {\n extra = source.point.y - Math.min(source.point.y, target.point.y) + extra;\n }\n if (source.point.y > target.point.y || (srcPort !== undefined) || source.direction === 'Top') {\n extra = -extra;\n }\n }\n temp = target.point.x - source.point.x;\n if (source.direction === 'Top') {\n segmentValue = addLineSegment(source.point, extra, 90);\n }\n else {\n segmentValue = addLineSegment(source.point, extra, 90);\n }\n temp = target.point.x - segmentValue.x;\n if (temp !== 0) {\n next = addLineSegment(segmentValue, target.point.x - segmentValue.x, 0);\n }\n }\n if (temp === 0) {\n return intermeditatePoints = [\n source.point,\n target.point\n ];\n }\n intermeditatePoints = [\n source.point,\n segmentValue,\n next,\n target.point\n ];\n return intermeditatePoints;\n}\n/**\n * orthoConnection5Segment method \\\n *\n * @returns { PointModel[] } orthoConnection5Segment method .\\\n * @param {Connector} source - provide the source value.\n * @param {End} target - provide the target value.\n * @param {End} extra - provide the extra value.\n * @param {boolean} isBezier - provide the isBezier value.\n * @private\n */\nfunction orthoConnection5Segment(source, target, extra, isBezier) {\n if (extra === void 0) { extra = 20; }\n if (isBezier === void 0) { isBezier = false; }\n if (isBezier) {\n extra = 20;\n }\n var intermeditatePoints;\n var length = extra;\n var sLeft = source.corners.left - source.margin.left;\n var sRight = source.corners.right + source.margin.right;\n var sBottom = source.corners.bottom + source.margin.bottom;\n var sTop = source.corners.top - source.margin.top;\n var tLeft = target.corners.left - target.margin.left;\n var tRight = target.corners.right + target.margin.right;\n var tBottom = target.corners.bottom + target.margin.bottom;\n var tTop = target.corners.top - target.margin.top;\n var segmentValue;\n switch (source.direction) {\n case 'Left':\n if ((sTop > tTop && sTop < tBottom || sBottom < tBottom && sBottom > tTop) &&\n sLeft > tLeft && sLeft <= tRight && extra >= 20) {\n length = source.point.x - target.corners.left + length;\n }\n if (isBezier && source.direction === target.direction) {\n if (source.corners.left > target.corners.left && source.corners.left - target.corners.right >= 20) {\n length = (source.corners.left - target.corners.right) / 2;\n }\n }\n segmentValue = addLineSegment(source.point, length, 180);\n break;\n case 'Top':\n if ((sLeft > tLeft && sLeft < tRight || sRight < tRight && sRight > tLeft) &&\n sTop > tTop && sTop <= tBottom && extra >= 20) {\n length = source.point.y - target.corners.top + length;\n }\n if (isBezier && source.direction === target.direction) {\n if (source.corners.top > target.corners.top && source.corners.top - target.corners.bottom >= 20) {\n length = (source.corners.top - target.corners.bottom) / 2;\n }\n }\n segmentValue = addLineSegment(source.point, length, 270);\n break;\n case 'Right':\n if ((sTop > tTop && sTop < tBottom || sBottom < tBottom && sBottom > tTop) &&\n sRight < tRight && sRight >= tLeft && extra >= 20) {\n length = target.corners.right - source.point.x + length;\n }\n if (isBezier && source.direction === target.direction) {\n if (source.corners.right < target.corners.right && target.corners.left - source.corners.right >= 20) {\n length = (target.corners.left - source.corners.right) / 2;\n }\n }\n segmentValue = addLineSegment(source.point, length, 0);\n break;\n case 'Bottom':\n if ((sLeft > tLeft && sLeft < tRight || sRight < tRight && sRight > tLeft) &&\n sBottom < tBottom && sBottom >= tTop && extra >= 20) {\n length = target.corners.bottom - source.point.y + length;\n }\n if (isBezier && source.direction === target.direction) {\n if (source.corners.bottom < target.corners.bottom && target.corners.top - source.corners.bottom >= 20) {\n length = (target.corners.top - source.corners.bottom) / 2;\n }\n }\n segmentValue = addLineSegment(source.point, length, 90);\n break;\n }\n intermeditatePoints = [\n source.point,\n segmentValue\n ];\n var newExtra = undefined;\n if (source.direction === 'Top' || source.direction === 'Bottom') {\n var prevDir = source.direction;\n source.direction = segmentValue.x > target.point.x ? 'Left' : 'Right';\n source.point = segmentValue;\n newExtra = isBezier ? Math.abs(segmentValue.x - target.point.x) * 0.5 : newExtra;\n intermeditatePoints = orthoConnection4Segment(source, target, prevDir, intermeditatePoints, newExtra, isBezier);\n }\n else {\n var prevDir = source.direction;\n source.direction = segmentValue.y > target.point.y ? 'Top' : 'Bottom';\n source.point = segmentValue;\n newExtra = isBezier ? Math.abs(segmentValue.y - target.point.y) * 0.5 : newExtra;\n intermeditatePoints = orthoConnection4Segment(source, target, prevDir, intermeditatePoints, newExtra, isBezier);\n }\n return intermeditatePoints;\n}\n/**\n * orthoConnection4Segment method \\\n *\n * @returns { PointModel[] } orthoConnection4Segment method .\\\n * @param {End} source - provide the target value.\n * @param {End} target - provide the target value.\n * @param {string} prevDir - provide the target value.\n * @param {PointModel[]} interPt - provide the target value.\n * @param {number} e - provide the target value.\n * @param {boolean} isBezier - provide the target value.\n * @private\n */\nfunction orthoConnection4Segment(source, target, prevDir, interPt, e, isBezier) {\n if (e === void 0) { e = 20; }\n if (isBezier === void 0) { isBezier = false; }\n var segmentValue;\n if (prevDir === undefined) {\n source.margin = { left: 2, right: 2, top: 2, bottom: 2 };\n target.margin = { left: 0, right: 5, top: 0, bottom: 5 };\n if (isBezier) {\n source.margin = { left: 10, right: 10, top: 10, bottom: 10 };\n target.margin = { left: 10, right: 10, top: 10, bottom: 10 };\n if (source.direction === 'Left') {\n e = getLeftLength(source, target, prevDir, e);\n if (source.corners.left - target.corners.right >= 5) {\n e = Math.abs(source.point.x - source.corners.left) + Math.floor(source.corners.left - target.corners.right) * 0.5;\n }\n }\n else if (source.direction === 'Right') {\n e = getRightLength(source, target, e, prevDir);\n if (target.corners.left - source.corners.right >= 5) {\n e = Math.abs(source.point.x - source.corners.right) + Math.floor(target.corners.left - source.corners.right) * 0.5;\n }\n }\n else if (source.direction === 'Top') {\n e = getTopLength(source, target, prevDir, e);\n if (source.corners.top - target.corners.bottom >= 5) {\n e = Math.abs(source.point.y - source.corners.top) + Math.floor(source.corners.top - target.corners.bottom) * 0.5;\n }\n }\n else if (source.direction === 'Bottom') {\n e = getBottomLength(source, target, e, prevDir);\n if (target.corners.top - source.corners.bottom >= 5) {\n e = Math.abs(source.point.y - source.corners.bottom) + Math.floor(target.corners.top - source.corners.bottom) * 0.5;\n }\n }\n }\n }\n else {\n if (source.direction === 'Bottom') {\n if (isBezier) {\n if (target.corners.top - source.corners.bottom < 20) {\n e = (target.corners.bottom - source.point.y) + 25;\n }\n }\n else {\n if (target.corners.top > source.corners.bottom && target.corners.top - source.corners.bottom < 20) {\n e = (target.corners.top - source.corners.bottom) / 2;\n }\n }\n }\n else if (source.direction === 'Top') {\n if (isBezier) {\n if (source.corners.top - target.corners.bottom < 20) {\n e = (source.point.y - target.corners.top) + 25;\n }\n }\n else {\n if (target.corners.bottom < source.corners.top && source.corners.top - target.corners.bottom < 20) {\n e = (source.corners.top - target.corners.bottom) / 2;\n }\n }\n }\n else if (source.direction === 'Right') {\n if (isBezier) {\n if (target.corners.left - source.corners.right < 20) {\n e = (target.corners.right - source.point.x) + 25;\n }\n }\n else {\n if (target.corners.left > source.corners.right && target.corners.left - source.corners.right < 20) {\n e = (target.corners.left - source.corners.right) / 2;\n }\n }\n }\n else if (source.direction === 'Left') {\n if (isBezier) {\n if (source.corners.left - target.corners.right < 20) {\n e = (source.point.x - target.corners.left) + 25;\n }\n }\n else {\n if (target.corners.right < source.corners.left && source.corners.left - target.corners.right < 20) {\n e = (source.corners.left - target.corners.right) / 2;\n }\n }\n }\n if (prevDir === target.direction && isBezier) {\n if ((target.direction === 'Bottom' && source.point.y > target.point.y) ||\n (target.direction === 'Top' && source.point.y < target.point.y)) {\n if (source.direction === 'Left') {\n e = getLeftLength(source, target, prevDir, 20);\n }\n else if (source.direction === 'Right') {\n e = getRightLength(source, target, 20, prevDir);\n }\n }\n else if ((target.direction === 'Right' && source.point.x > target.point.x) ||\n (target.direction === 'Left' && source.point.x < target.point.x)) {\n if (source.direction === 'Top') {\n e = getTopLength(source, target, prevDir, 20);\n }\n else if (source.direction === 'Bottom') {\n e = getBottomLength(source, target, 20, prevDir);\n }\n }\n }\n }\n switch (source.direction) {\n case 'Left':\n e = isBezier ? e : getLeftLength(source, target, prevDir, e);\n segmentValue = addLineSegment(source.point, e, 180);\n break;\n case 'Right':\n e = isBezier ? e : getRightLength(source, target, e, prevDir);\n segmentValue = addLineSegment(source.point, e, 0);\n break;\n case 'Top':\n e = isBezier ? e : getTopLength(source, target, prevDir, e);\n segmentValue = addLineSegment(source.point, e, 270);\n break;\n case 'Bottom':\n e = isBezier ? e : getBottomLength(source, target, e, prevDir);\n segmentValue = addLineSegment(source.point, e, 90);\n }\n if (interPt !== undefined) {\n interPt.push(segmentValue);\n }\n else {\n interPt = [\n source.point,\n segmentValue\n ];\n }\n if (source.direction === 'Top' || source.direction === 'Bottom') {\n getOrtho3Seg(segmentValue, 'horizontal', source, target, interPt, isBezier);\n }\n else if (source.direction === 'Right' || source.direction === 'Left') {\n getOrtho3Seg(segmentValue, 'vertical', source, target, interPt, isBezier);\n }\n return interPt;\n}\n/**\n * getOrtho3Seg method \\\n *\n * @returns { void } getOrtho3Seg method .\\\n * @param {PointModel} sPt - provide the sPt value.\n * @param {string} orientation - provide the orientation value.\n * @param {End} src - provide the src value.\n * @param {End} tar - provide the tar value.\n * @param {PointModel[]} points - provide the points value.\n * @param {boolean} isBezier - provide the isBezier value.\n * @private\n */\nfunction getOrtho3Seg(sPt, orientation, src, tar, points, isBezier) {\n var point1;\n var point2;\n var point3;\n if (orientation === 'horizontal') {\n src.margin = { left: 0, right: 10, top: 0, bottom: 10 };\n tar.margin = { left: 0, right: 10, top: 0, bottom: 10 };\n }\n else if (orientation === 'vertical') {\n src.margin = { left: 10, right: 0, top: 10, bottom: 0 };\n tar.margin = { left: 10, right: 0, top: 10, bottom: 0 };\n }\n var extra = 20;\n if (orientation === 'horizontal') {\n switch (tar.direction) {\n case 'Left':\n if (src.corners.right + src.margin.right < tar.corners.left - tar.margin.left &&\n (tar.corners.left - src.margin.right - src.corners.right > extra || (src.corners.top - src.margin.top <= tar.point.y &&\n src.corners.bottom + src.margin.bottom >= tar.point.y))) {\n if (isBezier && (src.direction === 'Top' || src.direction === 'Bottom')) {\n var gap = Math.abs(tar.corners.left - src.corners.right) / 2;\n extra = src.corners.right - sPt.x + gap;\n }\n else {\n var gap = Math.min(Math.abs(tar.corners.left - src.corners.right) / 2, 20);\n extra = src.corners.right - sPt.x + gap;\n }\n }\n else {\n if ((src.direction === 'Top' && sPt.y > tar.point.y) || (src.direction === 'Bottom' && sPt.y < tar.point.y)) {\n extra = Math.min(tar.corners.left, sPt.x) - sPt.x - 20;\n }\n else if (sPt.x >= src.corners.left - src.margin.left && sPt.x <= src.corners.right + src.margin.right) {\n extra = Math.min(tar.corners.left, src.corners.left) - sPt.x - 20;\n }\n else {\n extra = tar.corners.left - sPt.x - 20;\n }\n }\n break;\n case 'Right':\n if (src.corners.left - src.margin.left > tar.corners.right + tar.margin.right &&\n (src.corners.left - src.margin.right - tar.corners.right > extra || (src.corners.top - src.margin.top <= tar.point.y &&\n src.corners.bottom + src.margin.bottom >= tar.point.y))) {\n if (isBezier && (src.direction === 'Top' || src.direction === 'Bottom')) {\n var gap = Math.abs(src.corners.left - tar.corners.right) / 2;\n extra = src.corners.left - sPt.x - gap;\n }\n else {\n var gap = Math.min(Math.abs(src.corners.left - tar.corners.right) / 2, 20);\n extra = src.corners.left - sPt.x - gap;\n }\n }\n else {\n if ((src.direction === 'Top' && sPt.y > tar.point.y) || (src.direction === 'Bottom' && sPt.y < tar.point.y)) {\n extra = Math.max(tar.corners.right, sPt.x) - sPt.x + 20;\n }\n else if (sPt.x >= src.corners.left - src.margin.left && sPt.x <= src.corners.right + src.margin.right) {\n extra = Math.max(tar.corners.right, src.corners.right) - sPt.x + 20;\n }\n else {\n extra = tar.corners.right - sPt.x + 20;\n }\n }\n break;\n }\n point1 = addLineSegment(sPt, extra, 0);\n point2 = addLineSegment(point1, tar.point.y - sPt.y, 90);\n point3 = tar.point;\n }\n else if (orientation === 'vertical') {\n switch (tar.direction) {\n case 'Top':\n if (src.corners.bottom + src.margin.bottom < tar.corners.top - tar.margin.top &&\n (tar.corners.top - src.margin.top - src.corners.bottom > extra || (src.corners.left - src.margin.left <= tar.point.x &&\n src.corners.right + src.margin.right >= tar.point.x))) {\n if (isBezier && (src.direction === 'Right' || src.direction === 'Left')) {\n var gap = Math.abs(tar.corners.top - src.corners.bottom) / 2;\n extra = src.corners.bottom - sPt.y + gap;\n }\n else {\n var gap = Math.min(Math.abs(tar.corners.top - src.corners.bottom) / 2, 20);\n extra = src.corners.bottom - sPt.y + gap;\n }\n }\n else {\n if ((src.direction === 'Left' && sPt.x > tar.point.x) || (src.direction === 'Right' && sPt.x < tar.point.x)) {\n extra = Math.min(tar.corners.top, sPt.y) - sPt.y - 20;\n }\n else if (sPt.y >= src.corners.top - src.margin.top && sPt.y <= src.corners.bottom + src.margin.bottom) {\n extra = Math.min(tar.corners.top, src.corners.top) - sPt.y - 20;\n }\n else {\n extra = tar.corners.top - sPt.y - 20;\n }\n }\n break;\n case 'Bottom':\n if (src.corners.top - src.margin.top > tar.corners.bottom + tar.margin.bottom &&\n (src.corners.top - src.margin.top - tar.corners.bottom > extra || (src.corners.left - src.margin.left <= tar.point.x &&\n src.corners.right + src.margin.right >= tar.point.x))) {\n if (isBezier && (src.direction === 'Right' || src.direction === 'Left')) {\n var gap = Math.abs(src.corners.top - tar.corners.bottom) / 2;\n extra = src.corners.top - sPt.y - gap;\n }\n else {\n var gap = Math.min(Math.abs(src.corners.top - tar.corners.bottom) / 2, 20);\n extra = src.corners.top - sPt.y - gap;\n }\n }\n else {\n if ((src.direction === 'Left' && sPt.x > tar.point.x) || (src.direction === 'Right' && sPt.x < tar.point.x)) {\n extra = Math.max(tar.corners.bottom, sPt.y) - sPt.y + 20;\n }\n else if (sPt.y >= src.corners.top - src.margin.top && sPt.y <= src.corners.bottom + src.margin.bottom) {\n extra = Math.max(tar.corners.bottom, src.corners.bottom) - sPt.y + 20;\n }\n else {\n extra = tar.corners.bottom - sPt.y + 20;\n }\n }\n break;\n }\n point1 = addLineSegment(sPt, extra, 90);\n point2 = addLineSegment(point1, tar.point.x - sPt.x, 0);\n point3 = tar.point;\n }\n points.push(point1);\n points.push(point2);\n points.push(point3);\n}\n/**\n * getTopLength method \\\n *\n * @returns { number } getTopLength method .\\\n * @param {End} source - provide the sPt value.\n * @param {End} target - provide the sPt value.\n * @param {string} preDir - provide the orientation value.\n * @param {number} length - provide the src value.\n * @private\n */\nfunction getTopLength(source, target, preDir, length) {\n if (source.corners.top - source.margin.top > target.corners.top + target.margin.top &&\n source.corners.top - source.margin.top <= target.corners.bottom + target.margin.bottom) {\n if (target.direction === 'Right' && source.point.x < target.point.x) {\n length += source.corners.top - target.corners.top;\n }\n else if (target.direction === 'Left' && source.point.x > target.point.x) {\n length += source.corners.top - target.corners.top;\n }\n length += source.point.y - source.corners.top;\n }\n else {\n if ((preDir !== undefined && preDir !== 'Left') && target.direction === 'Right' && source.point.x < target.point.x) {\n length += Math.abs(source.point.y - target.corners.bottom);\n }\n else if ((preDir !== undefined && preDir !== 'Right') && target.direction === 'Left'\n && target.point.x < source.point.x) {\n length += Math.abs(source.point.y - target.corners.bottom);\n }\n else {\n length += source.point.y - source.corners.top;\n }\n }\n return length;\n}\n/**\n * getLeftLength method \\\n *\n * @returns { number } getLeftLength method .\\\n * @param {End} source - provide the sPt value.\n * @param {End} target - provide the sPt value.\n * @param {string} prevDir - provide the orientation value.\n * @param {number} segLength - provide the src value.\n * @private\n */\nfunction getLeftLength(source, target, prevDir, segLength) {\n if (source.corners.left - source.margin.left > target.corners.left - target.margin.left &&\n source.corners.left - source.margin.left <= target.corners.right + target.margin.right) {\n if (target.direction === 'Bottom' && source.point.y < target.point.y) {\n segLength += source.corners.left - target.corners.left;\n }\n else if (target.direction === 'Top' && source.point.y > target.point.y) {\n segLength += source.corners.left - target.corners.left;\n }\n segLength += source.point.x - source.corners.left;\n }\n else {\n if ((prevDir !== undefined && prevDir !== 'Top') && target.direction === 'Bottom' && source.point.y < target.point.y) {\n segLength += Math.abs(source.point.x - target.corners.right);\n }\n else if ((prevDir !== undefined && prevDir !== 'Bottom') &&\n target.direction === 'Top' && target.point.y < source.point.y) {\n segLength += Math.abs(source.point.x - target.corners.right);\n }\n else {\n segLength += source.point.x - source.corners.left;\n }\n }\n return segLength;\n}\n/**\n * getRightLength method \\\n *\n * @returns { number } getRightLength method .\\\n * @param {End} source - provide the sPt value.\n * @param {End} target - provide the orientation value.\n * @param {number} length - provide the src value.\n * @param {string} prevDir - provide the src value.\n * @private\n */\nfunction getRightLength(source, target, length, prevDir) {\n if (source.corners.right + source.margin.right < target.corners.right + target.margin.right &&\n source.corners.right + source.margin.right >= target.corners.left - target.margin.left) {\n if (target.direction === 'Bottom' && source.point.y < target.point.y) {\n length += target.corners.right - source.corners.right;\n }\n else if (target.direction === 'Top' && source.point.y > target.point.y) {\n length += target.corners.right - source.corners.right;\n }\n length += source.corners.right - source.point.x;\n }\n else {\n if ((prevDir !== undefined && prevDir !== 'Top') && target.direction === 'Bottom' && source.point.y < target.point.y) {\n length += Math.abs(source.point.x - target.corners.right);\n }\n else if ((prevDir !== undefined && prevDir !== 'Bottom') && target.direction === 'Top' && target.point.y < source.point.y) {\n length += Math.abs(source.point.x - target.corners.right);\n }\n else {\n length += source.corners.right - source.point.x;\n }\n }\n return length;\n}\n/**\n * getBottomLength method \\\n *\n * @returns { number } getBottomLength method .\\\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @param {number} segLength - provide the segLength value.\n * @param {string} prevDir - provide the src value.\n * @private\n */\nfunction getBottomLength(source, target, segLength, prevDir) {\n if (source.corners.bottom + source.margin.bottom < target.corners.bottom + target.margin.bottom &&\n source.corners.bottom + source.margin.bottom >= target.corners.top - target.margin.top) {\n if (target.direction === 'Right' && source.point.x < target.point.x) {\n segLength += target.corners.bottom - source.corners.bottom;\n }\n else if (target.direction === 'Left' && source.point.x > target.point.x) {\n segLength += target.corners.bottom - source.corners.bottom;\n }\n segLength += source.corners.bottom - source.point.y;\n }\n else {\n if ((prevDir !== undefined && prevDir !== 'Left') &&\n target.direction === 'Right' && source.point.x < target.point.x) {\n segLength += Math.abs(source.point.y - target.corners.bottom);\n }\n else if ((prevDir !== undefined && prevDir !== 'Right') &&\n target.direction === 'Left' && target.point.x < source.point.x) {\n segLength += Math.abs(source.point.y - target.corners.bottom);\n }\n else {\n segLength += source.corners.bottom - source.point.y;\n }\n }\n return segLength;\n}\nfunction convertPointToBezierSegment(element, segCount, pts) {\n if (element.type === 'Bezier') {\n if (element.segments.length === 0) {\n var start = pts[0];\n var end = pts[pts.length - 1];\n if (segCount === NoOfSegments.One) {\n var distance = Math.min(20, Point.findLength(start, end) * 0.5);\n var vector1 = { angle: findAngle(start, end), distance: distance };\n var vector2 = { angle: findAngle(end, start), distance: distance };\n var dir = Point.direction(start, end);\n var ori = dir === 'Left' || dir === 'Right' ? 'Horizontal' : 'Vertical';\n var segment = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector1, vector2: vector2, orientation: ori }, true);\n (element.segments).push(segment);\n }\n else if (segCount === NoOfSegments.Two) {\n var mid = pts[1];\n var vector1 = { angle: findAngle(start, mid), distance: Point.findLength(start, mid) * 0.5 };\n var vector2 = { angle: findAngle(end, mid), distance: Point.findLength(end, mid) * 0.5 };\n var dir = Point.direction(start, mid);\n var ori = dir === 'Left' || dir === 'Right' ? 'Horizontal' : 'Vertical';\n var segment = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector1, vector2: vector2, orientation: ori }, true);\n (element.segments).push(segment);\n }\n else if (segCount === NoOfSegments.Three) {\n var mid1 = pts[1];\n var mid2 = pts[pts.length - 2];\n var mid = { x: (mid1.x + mid2.x) * 0.5, y: (mid1.y + mid2.y) * 0.5 };\n var vector1 = { angle: findAngle(start, mid1), distance: Point.findLength(start, mid1) * 0.5 };\n var vector2 = { angle: findAngle(mid, mid1), distance: Point.findLength(mid, mid1) * 0.5 };\n var dir1 = Point.direction(start, mid1);\n var ori1 = dir1 === 'Left' || dir1 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment1 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector1, vector2: vector2, point: mid, orientation: ori1 }, true);\n (element.segments).push(segment1);\n var vector3 = { angle: findAngle(mid, mid2), distance: Point.findLength(mid, mid2) * 0.5 };\n var vector4 = { angle: findAngle(end, mid2), distance: Point.findLength(end, mid2) * 0.5 };\n var dir2 = Point.direction(mid, mid2);\n var ori2 = dir2 === 'Left' || dir2 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment2 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector3, vector2: vector4, orientation: ori2 }, true);\n (element.segments).push(segment2);\n }\n else if (segCount === NoOfSegments.Four) {\n var mid1 = pts[1];\n var mid2 = pts[2];\n var mid3 = pts[3];\n var center1 = { x: (mid1.x + mid2.x) * 0.5, y: (mid1.y + mid2.y) * 0.5 };\n var center2 = { x: (mid2.x + mid3.x) * 0.5, y: (mid2.y + mid3.y) * 0.5 };\n var vector1 = { angle: findAngle(start, mid1), distance: Point.findLength(start, mid1) * 0.5 };\n var vector2 = { angle: findAngle(center1, mid1), distance: Point.findLength(center1, mid1) * 0.5 };\n var dir1 = Point.direction(start, mid1);\n var ori1 = dir1 === 'Left' || dir1 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment1 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector1, vector2: vector2, point: center1, orientation: ori1 }, true);\n (element.segments).push(segment1);\n var vector3 = { angle: findAngle(center1, mid2), distance: Point.findLength(center1, mid2) * 0.5 };\n var vector4 = { angle: findAngle(center2, mid2), distance: Point.findLength(center2, mid2) * 0.5 };\n var dir2 = Point.direction(center1, mid2);\n var ori2 = dir2 === 'Left' || dir2 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment2 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector3, vector2: vector4, point: center2, orientation: ori2 }, true);\n (element.segments).push(segment2);\n var vector5 = { angle: findAngle(center2, mid3), distance: Point.findLength(center2, mid3) * 0.5 };\n var vector6 = { angle: findAngle(end, mid3), distance: Point.findLength(end, mid3) * 0.5 };\n var dir3 = Point.direction(center2, mid3);\n var ori3 = dir3 === 'Left' || dir3 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment3 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector5, vector2: vector6, orientation: ori3 }, true);\n (element.segments).push(segment3);\n }\n else if (segCount === NoOfSegments.Five) {\n var mid1 = pts[1];\n var mid2 = pts[2];\n var mid3 = pts[3];\n var mid4 = pts[4];\n var center1 = { x: (mid1.x + mid2.x) * 0.5, y: (mid1.y + mid2.y) * 0.5 };\n var center2 = { x: (mid2.x + mid3.x) * 0.5, y: (mid2.y + mid3.y) * 0.5 };\n var center3 = { x: (mid3.x + mid4.x) * 0.5, y: (mid3.y + mid4.y) * 0.5 };\n var vector1 = { angle: findAngle(start, mid1), distance: Point.findLength(start, mid1) * 0.5 };\n var vector2 = { angle: findAngle(center1, mid1), distance: Point.findLength(center1, mid1) * 0.5 };\n var dir1 = Point.direction(start, mid1);\n var ori1 = dir1 === 'Left' || dir1 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment1 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector1, vector2: vector2, point: center1, orientation: ori1 }, true);\n (element.segments).push(segment1);\n var vector3 = { angle: findAngle(center1, mid2), distance: Point.findLength(center1, mid2) * 0.5 };\n var vector4 = { angle: findAngle(center2, mid2), distance: Point.findLength(center2, mid2) * 0.5 };\n var dir2 = Point.direction(center1, mid2);\n var ori2 = dir2 === 'Left' || dir2 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment2 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector3, vector2: vector4, point: center2, orientation: ori2 }, true);\n (element.segments).push(segment2);\n var vector5 = { angle: findAngle(center2, mid3), distance: Point.findLength(center2, mid3) * 0.5 };\n var vector6 = { angle: findAngle(center3, mid3), distance: Point.findLength(center3, mid3) * 0.5 };\n var dir3 = Point.direction(center2, mid3);\n var ori3 = dir3 === 'Left' || dir3 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment3 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector5, vector2: vector6, point: center3, orientation: ori3 }, true);\n (element.segments).push(segment3);\n var vector7 = { angle: findAngle(center3, mid4), distance: Point.findLength(center3, mid4) * 0.5 };\n var vector8 = { angle: findAngle(end, mid4), distance: Point.findLength(end, mid4) * 0.5 };\n var dir4 = Point.direction(center3, mid4);\n var ori4 = dir4 === 'Left' || dir4 === 'Right' ? 'Horizontal' : 'Vertical';\n var segment4 = new BezierSegment(element, 'segments', { type: 'Bezier', isInternalSegment: true, vector1: vector7, vector2: vector8, orientation: ori4 }, true);\n (element.segments).push(segment4);\n }\n else {\n var segment = new BezierSegment(element, 'segments', { type: 'Bezier' }, true);\n (element.segments).push(segment);\n }\n }\n else {\n for (var i = 0; i < element.segments.length; i++) {\n if (element.bezierSettings.allowSegmentsReset) {\n element.segments[parseInt(i.toString(), 10)].isInternalSegment = true;\n }\n }\n }\n }\n}\n/**\n * getSwapping method \\\n *\n * @returns { boolean } getSwapping method .\\\n * @param {string} srcDir - provide the source value.\n * @param {string} tarDir - provide the target value.\n * @private\n */\nfunction getSwapping(srcDir, tarDir) {\n var swap = false;\n switch (srcDir) {\n case 'Left':\n switch (tarDir) {\n case 'Right':\n case 'Bottom':\n swap = true;\n break;\n }\n break;\n case 'Top':\n switch (tarDir) {\n case 'Left':\n case 'Right':\n case 'Bottom':\n swap = true;\n break;\n }\n break;\n case 'Bottom':\n switch (tarDir) {\n case 'Right':\n swap = true;\n break;\n }\n break;\n }\n return swap;\n}\n/**\n * swapPoints method \\\n *\n * @returns { void } swapPoints method .\\\n * @param {End} source - provide the source value.\n * @param {End} target - provide the target value.\n * @private\n */\nfunction swapPoints(source, target) {\n var direction = source.direction;\n source.direction = target.direction;\n target.direction = direction;\n var point = source.point;\n source.point = target.point;\n target.point = point;\n var corner = source.corners;\n source.corners = target.corners;\n target.corners = corner;\n}\n/**\n * getPortDirection method \\\n *\n * @returns { boolean } getPortDirection method .\\\n * @param {PointModel} point - provide the point value.\n * @param {Corners} corner - provide the corner value.\n * @param {Rect} bounds - provide the bounds value.\n * @param {boolean} closeEdge - provide the closeEdge value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction getPortDirection(point, corner, bounds, closeEdge) {\n var direction;\n var boundsValue = corner === undefined ? bounds : corner;\n var one = boundsValue.topLeft;\n var two = boundsValue.topRight;\n var three = boundsValue.bottomRight;\n var four = boundsValue.bottomLeft;\n var center = boundsValue.center;\n var angle = findAngle(center, point);\n var fourty5 = findAngle(center, three);\n var one35 = findAngle(center, four);\n var two25 = findAngle(center, one);\n var three15 = findAngle(center, two);\n if (angle > two25 && angle < three15) {\n direction = 'Top';\n // if (bounds.width < bounds.height && closeEdge) {\n // let height: number = (bounds.height - bounds.width) / 2;\n // let width: number = bounds.width;\n // if (Math.abs(point.x - one.x) < Math.abs(point.x - two.x)) {\n // direction = checkCloseEdge(direction, new Rect(one.x, one.y, width, height), point, 'Left');\n // } else {\n // direction = checkCloseEdge(direction, new Rect(two.x - bounds.width, two.y, width, height), point, 'Right');\n // }\n // }\n }\n else if (angle >= fourty5 && angle < one35) {\n direction = 'Bottom';\n // if (bounds.width < bounds.height && closeEdge) {\n // let height: number = (bounds.height - bounds.width) / 2;\n // let width: number = bounds.width;\n // if (Math.abs(point.x - four.x) < Math.abs(point.x - three.x)) {\n // direction = checkCloseEdge(direction, new Rect(four.x, four.y - height, width, height), point, 'Left');\n // } else {\n // let value: Rect = new Rect(three.x - bounds.width, three.y - bounds.height / 4, bounds.width, bounds.height / 4);\n // direction = checkCloseEdge(direction, value, point, 'Right');\n // }\n // }\n }\n else if (angle >= one35 && angle <= two25) {\n direction = 'Left';\n // if (bounds.width > bounds.height && closeEdge) {\n // let width: number = (bounds.width - bounds.height) / 2;\n // let height: number = bounds.height;\n // if (Math.abs(point.y - one.y) < Math.abs(point.y - four.y)) {\n // direction = checkCloseEdge(direction, new Rect(one.x, one.y, width, height), point, 'Top');\n // } else {\n // direction = checkCloseEdge(direction, new Rect(four.x, four.y - height, width, height), point, 'Bottom');\n // }\n // }\n }\n else if (angle >= three15 || angle < fourty5) {\n direction = 'Right';\n // if (bounds.width > bounds.height && closeEdge) {\n // let width: number = (bounds.width - bounds.height) / 2;\n // let height: number = bounds.height;\n // if (Math.abs(point.y - two.y) < Math.abs(point.y - three.y)) {\n // direction = checkCloseEdge(direction, new Rect(two.x - width, two.y, width, height), point, 'Top');\n // } else {\n // direction = checkCloseEdge(direction,\n //new Rect(three.x - width, three.y - height, width, height), point, 'Bottom');\n // }\n // }\n }\n else {\n direction = 'Right';\n }\n return direction;\n}\n// function checkCloseEdge(direction: string, threshold: Rect, port: PointModel, nearest: string): string {\n// if (threshold) {\n// switch (direction) {\n// case 'Bottom':\n// case 'Top':\n// let left: number = Math.abs(threshold.left - port.x);\n// let right: number = Math.abs(threshold.right - port.x);\n// let ver: number = direction === 'Top' ? Math.abs(threshold.top - port.y) : Math.abs(threshold.bottom - port.y);\n// if (left < right) {\n// if (left < ver) {\n// return 'Left';\n// }\n// } else {\n// if (right < ver) {\n// return 'Right';\n// }\n// }\n// break;\n// case 'Left':\n// case 'Right':\n// let top: number = Math.abs(threshold.top - port.y);\n// let bottom: number = Math.abs(threshold.bottom - port.y);\n// let hor: number = direction === 'Left' ? Math.abs(threshold.left - port.x) : Math.abs(threshold.right - port.x);\n// if (top < bottom) {\n// if (top < hor) {\n// return 'Top';\n// }\n// } else {\n// if (bottom < hor) {\n// return 'Bottom';\n// }\n// }\n// break;\n// }\n// }\n//Meant for dock port\n// return direction;\n// }\n/**\n * getOuterBounds method \\\n *\n * @returns { Rect } getOuterBounds method .\\\n * @param {Connector} obj - provide the point value.\n * @private\n */\nfunction getOuterBounds(obj) {\n //let outerBounds: Rect;\n var outerBounds = obj.wrapper.children[0].bounds;\n if (obj.sourceDecorator.shape !== 'None') {\n outerBounds.uniteRect(obj.wrapper.children[1].bounds);\n }\n if (obj.targetDecorator.shape !== 'None') {\n outerBounds.uniteRect(obj.wrapper.children[2].bounds);\n }\n return outerBounds;\n}\n/**\n * getOppositeDirection method \\\n *\n * @returns { string } getOppositeDirection method .\\\n * @param {string} direction - provide the direction value.\n * @private\n */\nfunction getOppositeDirection(direction) {\n switch (direction) {\n case 'Top':\n return 'Bottom';\n case 'Bottom':\n return 'Top';\n case 'Left':\n return 'Right';\n case 'Right':\n return 'Left';\n }\n return 'auto';\n}\n\nvar __extends$b = (undefined && undefined.__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$5 = (undefined && undefined.__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/**\n * customize the size of the individual palette items.\n */\nvar SymbolSize = /** @__PURE__ @class */ (function (_super) {\n __extends$b(SymbolSize, _super);\n function SymbolSize() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$5([\n Property()\n ], SymbolSize.prototype, \"width\", void 0);\n __decorate$5([\n Property()\n ], SymbolSize.prototype, \"height\", void 0);\n return SymbolSize;\n}(ChildProperty));\n/**\n * Defines the size and description of a symbol\n */\nvar SymbolPaletteInfo = /** @__PURE__ @class */ (function (_super) {\n __extends$b(SymbolPaletteInfo, _super);\n function SymbolPaletteInfo() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$5([\n Property()\n ], SymbolPaletteInfo.prototype, \"width\", void 0);\n __decorate$5([\n Property()\n ], SymbolPaletteInfo.prototype, \"height\", void 0);\n __decorate$5([\n Property()\n ], SymbolPaletteInfo.prototype, \"fit\", void 0);\n __decorate$5([\n Property()\n ], SymbolPaletteInfo.prototype, \"description\", void 0);\n __decorate$5([\n Property()\n ], SymbolPaletteInfo.prototype, \"template\", void 0);\n __decorate$5([\n Property()\n ], SymbolPaletteInfo.prototype, \"tooltip\", void 0);\n return SymbolPaletteInfo;\n}(ChildProperty));\n\nvar __extends$c = (undefined && undefined.__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$6 = (undefined && undefined.__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/**\n * Defines the common behavior of nodes, connectors and groups\n */\nvar NodeBase = /** @__PURE__ @class */ (function (_super) {\n __extends$c(NodeBase, _super);\n function NodeBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$6([\n Property('')\n ], NodeBase.prototype, \"id\", void 0);\n __decorate$6([\n Property(Number.MIN_VALUE)\n ], NodeBase.prototype, \"zIndex\", void 0);\n __decorate$6([\n Complex({}, Margin)\n ], NodeBase.prototype, \"margin\", void 0);\n __decorate$6([\n Property(true)\n ], NodeBase.prototype, \"visible\", void 0);\n __decorate$6([\n Complex({}, DiagramTooltip)\n ], NodeBase.prototype, \"tooltip\", void 0);\n __decorate$6([\n Property(false)\n ], NodeBase.prototype, \"excludeFromLayout\", void 0);\n __decorate$6([\n Property()\n ], NodeBase.prototype, \"addInfo\", void 0);\n __decorate$6([\n Property('None')\n ], NodeBase.prototype, \"flip\", void 0);\n __decorate$6([\n Property('All')\n ], NodeBase.prototype, \"flipMode\", void 0);\n __decorate$6([\n Complex({}, SymbolPaletteInfo)\n ], NodeBase.prototype, \"symbolInfo\", void 0);\n return NodeBase;\n}(ChildProperty));\n\nvar __extends$d = (undefined && undefined.__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})();\n/**\n * HTMLElement defines the basic html elements\n */\nvar DiagramHtmlElement = /** @__PURE__ @class */ (function (_super) {\n __extends$d(DiagramHtmlElement, _super);\n /**\n * set the id for each element \\\n *\n * @returns { void }set the id for each element\\\n * @param {string} nodeId - provide the x value.\n * @param {string} diagramId - provide the y value.\n * @param {string} annotationId - provide the id value.\n * @param {string} nodeTemplate - provide the id value.\n *\n * @private\n */\n function DiagramHtmlElement(nodeId, diagramId, annotationId, nodeTemplate) {\n var _this = _super.call(this) || this;\n _this.data = '';\n /**\n * Gets the node id for the element\n */\n _this.nodeId = '';\n /**\n * defines the id of the annotation on rendering template on label.\n * @private\n */\n _this.annotationId = '';\n /**\n * Gets the diagram id for the html element\n */\n _this.diagramId = '';\n _this.diagramId = diagramId;\n _this.nodeId = nodeId;\n _this.annotationId = annotationId;\n _this.templateFn = templateCompiler(nodeTemplate);\n return _this;\n }\n /**\n * getNodeTemplate method \\\n *\n * @returns { Function } getNodeTemplate method .\\\n *\n * @private\n */\n DiagramHtmlElement.prototype.getNodeTemplate = function () {\n return this.templateFn;\n };\n Object.defineProperty(DiagramHtmlElement.prototype, \"content\", {\n /**\n * Gets or sets the geometry of the html element \\\n *\n * @returns { string | HTMLElement } Gets or sets the geometry of the html element \\\n *\n * @private\n */\n get: function () {\n return this.data;\n },\n /**\n * Gets or sets the value of the html element \\\n *\n * @returns { void }Gets or sets the value of the html element\\\n * @param {string | HTMLElement} value - provide the value value.\n *\n * @private\n */\n set: function (value) {\n this.data = value;\n if (!this.canReset) {\n this.canReset = true;\n if (!this.isTemplate) {\n this.template = getContent(this, true);\n }\n this.canReset = false;\n this.isDirt = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n return DiagramHtmlElement;\n}(DiagramElement));\n\nvar __extends$e = (undefined && undefined.__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$7 = (undefined && undefined.__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/**\n * Specifies the behavior of fixedUserHandles\n */\n/** @private */\nvar FixedUserHandle = /** @__PURE__ @class */ (function (_super) {\n __extends$e(FixedUserHandle, _super);\n function FixedUserHandle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$7([\n Property('')\n ], FixedUserHandle.prototype, \"id\", void 0);\n __decorate$7([\n Property('transparent')\n ], FixedUserHandle.prototype, \"fill\", void 0);\n __decorate$7([\n Property('black')\n ], FixedUserHandle.prototype, \"iconStrokeColor\", void 0);\n __decorate$7([\n Property(0)\n ], FixedUserHandle.prototype, \"iconStrokeWidth\", void 0);\n __decorate$7([\n Property(true)\n ], FixedUserHandle.prototype, \"visibility\", void 0);\n __decorate$7([\n Property(10)\n ], FixedUserHandle.prototype, \"width\", void 0);\n __decorate$7([\n Property(10)\n ], FixedUserHandle.prototype, \"height\", void 0);\n __decorate$7([\n Property('transparent')\n ], FixedUserHandle.prototype, \"handleStrokeColor\", void 0);\n __decorate$7([\n Property(1)\n ], FixedUserHandle.prototype, \"handleStrokeWidth\", void 0);\n __decorate$7([\n Property('')\n ], FixedUserHandle.prototype, \"pathData\", void 0);\n __decorate$7([\n Property(0)\n ], FixedUserHandle.prototype, \"cornerRadius\", void 0);\n __decorate$7([\n Complex({ left: 0, right: 0, top: 0, bottom: 0 }, Margin)\n ], FixedUserHandle.prototype, \"padding\", void 0);\n __decorate$7([\n Complex({}, DiagramTooltip)\n ], FixedUserHandle.prototype, \"tooltip\", void 0);\n return FixedUserHandle;\n}(ChildProperty));\n/**\n * Defines the node Fixed User Handle\n */\nvar NodeFixedUserHandle = /** @__PURE__ @class */ (function (_super) {\n __extends$e(NodeFixedUserHandle, _super);\n function NodeFixedUserHandle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$7([\n Complex({ x: 0, y: 0 }, Point)\n ], NodeFixedUserHandle.prototype, \"offset\", void 0);\n __decorate$7([\n Complex({}, Margin)\n ], NodeFixedUserHandle.prototype, \"margin\", void 0);\n return NodeFixedUserHandle;\n}(FixedUserHandle));\n/**\n * Defines the connector Fixed User Handle\n */\nvar ConnectorFixedUserHandle = /** @__PURE__ @class */ (function (_super) {\n __extends$e(ConnectorFixedUserHandle, _super);\n function ConnectorFixedUserHandle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$7([\n Property(0.5)\n ], ConnectorFixedUserHandle.prototype, \"offset\", void 0);\n __decorate$7([\n Property('Center')\n ], ConnectorFixedUserHandle.prototype, \"alignment\", void 0);\n __decorate$7([\n Complex({ x: 0, y: 0 }, Point)\n ], ConnectorFixedUserHandle.prototype, \"displacement\", void 0);\n return ConnectorFixedUserHandle;\n}(FixedUserHandle));\n\n/**\n * constraints-util module contains the common constraints \\\n *\n * @returns { number } constraints-util module contains the common constraints .\\\n *\n * @param {ConnectorModel | NodeModel | PathAnnotationModel | ShapeAnnotationModel} node - Provide the DiagramElement value.\n * @private\n */\nfunction canSelect(node) {\n if (node) {\n var state = 0;\n if ((node instanceof ShapeAnnotation) || (node instanceof PathAnnotation)) {\n state = node.constraints & AnnotationConstraints.Select;\n }\n else if (node instanceof Connector) {\n state = node.constraints & ConnectorConstraints.Select;\n }\n else {\n state = node.constraints & NodeConstraints.Select;\n }\n return state;\n }\n return 1;\n}\n/**\n * Used to check whether we can move the objects ot not\\\n *\n * @returns { number } Used to check whether we can move the objects ot not .\\\n *\n * @param {ConnectorModel | NodeModel | PathAnnotationModel | ShapeAnnotationModel} node - Used to check whether we can move the objects ot not.\n * @private\n */\nfunction canMove(node) {\n if (node) {\n var state = 0;\n if ((node instanceof ShapeAnnotation) || (node instanceof PathAnnotation)) {\n state = node.constraints & AnnotationConstraints.Drag;\n }\n else if (node instanceof Connector) {\n state = node.constraints & ConnectorConstraints.Drag;\n }\n else if (node instanceof Selector) {\n state = 1;\n }\n else {\n state = node.constraints & NodeConstraints.Drag;\n }\n return state;\n }\n return 1;\n}\n/**\n * Used to check the canEnablePointerEvents\\\n *\n * @returns { number } Used to check whether we can move the objects ot not .\\\n *\n * @param {ConnectorModel | NodeModel} node - Used to check whether we can move the objects ot not.\n * @param {Diagram} diagram - Used to check whether we can move the objects ot not.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction canEnablePointerEvents(node, diagram) {\n var state = 0;\n if (node instanceof Connector) {\n state = node.constraints & ConnectorConstraints.PointerEvents;\n }\n else {\n state = node.constraints & NodeConstraints.PointerEvents;\n }\n return state;\n}\n/**\n * Used to check the canDelete of the element \\\n *\n * @returns { number } Used to check the canDelete of the element .\\\n *\n * @param {ConnectorModel | NodeModel} node - Used to check whether we can move the objects ot not.\n * @private\n */\nfunction canDelete(node) {\n var state = 0;\n if (node instanceof Connector) {\n state = node.constraints & ConnectorConstraints.Delete;\n }\n else {\n state = node.constraints & NodeConstraints.Delete;\n }\n return state;\n}\n/**\n * Used to check the bridging of the element \\\n *\n * @returns { number } Used to check the bridging of the element .\\\n *\n * @param {ConnectorModel | NodeModel} connector - provide the connector value.\n * @param {ConnectorModel | NodeModel} diagram - provide the diagram value.\n * @private\n */\nfunction canBridge(connector, diagram) {\n var state = 0;\n if (connector.constraints & ConnectorConstraints.Bridging) {\n state = connector.constraints & ConnectorConstraints.Bridging;\n }\n else if (connector.constraints & ConnectorConstraints.InheritBridging) {\n state = diagram.constraints & DiagramConstraints.Bridging;\n }\n else {\n state = 0;\n }\n return state;\n}\n/**\n * Used to check the routing of the element \\\n *\n * @returns { number } Used to check the routing of the element .\\\n *\n * @param {ConnectorModel | NodeModel} connector - provide the connector value.\n * @param {ConnectorModel | NodeModel} diagram - provide the diagram value.\n * @private\n */\nfunction canEnableRouting(connector, diagram) {\n var state = 0;\n if (connector.constraints & ConnectorConstraints.LineRouting) {\n state = connector.constraints & ConnectorConstraints.LineRouting;\n }\n else if (connector.constraints & ConnectorConstraints.InheritLineRouting) {\n state = diagram.constraints & DiagramConstraints.LineRouting;\n }\n return state;\n}\n/**\n * Used to check the source end dragof the element \\\n *\n * @returns { number } Used to check the source end dragof the element. \\\n *\n * @param {ConnectorModel | NodeModel} connector - provide the connector value.\n * @private\n */\nfunction canDragSourceEnd(connector) {\n return connector.constraints & ConnectorConstraints.DragSourceEnd;\n}\n/**\n * Used to check the target end drag of the element \\\n *\n * @returns { number } Used to check the target end drag of the element .\\\n *\n * @param {ConnectorModel | NodeModel} connector - provide the connector value.\n * @private\n */\nfunction canDragTargetEnd(connector) {\n return connector.constraints & ConnectorConstraints.DragTargetEnd;\n}\n/**\n * Used to check the segment drag of the element \\\n *\n * @returns { number } Used to check the segment drag of the element .\\\n *\n * @param {ConnectorModel | NodeModel} connector - provide the connector value.\n * @private\n */\nfunction canDragSegmentThumb(connector) {\n return connector.constraints & ConnectorConstraints.DragSegmentThumb;\n}\n/**\n * Used to check the routing drag of the element \\\n *\n * @returns { number } Used to check the segment drag of the element .\\\n *\n * @param {NodeModel | ShapeAnnotationModel | PathAnnotationModel} node - provide the connector value.\n * @private\n */\nfunction canRotate(node) {\n if ((node instanceof ShapeAnnotation) || (node instanceof PathAnnotation)) {\n return node.constraints & AnnotationConstraints.Rotate;\n }\n else {\n return node.constraints & NodeConstraints.Rotate;\n }\n}\n/**\n * Used to check shadown constraints of the element \\\n *\n * @returns { number } Used to check shadown constraints of the element .\\\n *\n * @param {NodeModel} node - provide the connector value.\n * @private\n */\nfunction canShadow(node) {\n return node.constraints & NodeConstraints.Shadow;\n}\n/**\n * Used to check canInConnect constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {NodeModel} node - provide the node value.\n * @private\n */\nfunction canInConnect(node) {\n if ((node instanceof Node) && (node.constraints & NodeConstraints.InConnect)) {\n return node.constraints & NodeConstraints.InConnect;\n }\n return 0;\n}\n/**\n * Used to check canPortInConnect constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {PointPortModel} port - provide the PointPortModel value.\n * @private\n */\nfunction canPortInConnect(port) {\n if (port && port.constraints) {\n if (!(port.constraints & PortConstraints.None) && (port.constraints & PortConstraints.InConnect)) {\n return port.constraints & PortConstraints.InConnect;\n }\n }\n return 0;\n}\n/**\n * Used to check canOutConnect constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {NodeModel} node - provide the node value.\n * @private\n */\nfunction canOutConnect(node) {\n if ((node instanceof Node) && (node.constraints & NodeConstraints.OutConnect)) {\n return node.constraints & NodeConstraints.OutConnect;\n }\n return 0;\n}\n/**\n * Used to check canPortOutConnect constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {PointPortModel} port - provide the node value.\n * @private\n */\nfunction canPortOutConnect(port) {\n if (port && port.constraints) {\n if (!(port.constraints & PortConstraints.None) && (port.constraints & PortConstraints.OutConnect)) {\n return port.constraints & PortConstraints.OutConnect;\n }\n }\n return 0;\n}\n/**\n * Used to check canResize constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {NodeModel | ShapeAnnotationModel | PathAnnotationModel} node - provide the node value.\n * @param {NodeModel | ShapeAnnotationModel | PathAnnotationModel} direction - provide the node value.\n * @private\n */\nfunction canResize(node, direction) {\n var returnValue = 0;\n if (node instanceof ShapeAnnotation || node instanceof PathAnnotation) {\n returnValue = node.constraints & AnnotationConstraints.Resize;\n }\n else if (node) {\n if (direction === 'SouthEast') {\n returnValue = node.constraints & NodeConstraints.ResizeSouthEast;\n }\n else if (direction === 'East') {\n returnValue = node.constraints & NodeConstraints.ResizeEast;\n }\n else if (direction === 'NorthEast') {\n returnValue = node.constraints & NodeConstraints.ResizeNorthEast;\n }\n else if (direction === 'South') {\n returnValue = node.constraints & NodeConstraints.ResizeSouth;\n }\n else if (direction === 'North') {\n returnValue = node.constraints & NodeConstraints.ResizeNorth;\n }\n else if (direction === 'SouthWest') {\n returnValue = node.constraints & NodeConstraints.ResizeSouthWest;\n }\n else if (direction === 'West') {\n returnValue = node.constraints & NodeConstraints.ResizeWest;\n }\n else if (direction === 'NorthWest') {\n returnValue = node.constraints & NodeConstraints.ResizeNorthWest;\n }\n }\n return returnValue;\n}\n/**\n * Used to check canAllowDrop constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {ConnectorModel | NodeModel} node - provide the node value.\n * @private\n */\nfunction canAllowDrop(node) {\n var state = 0;\n if (node instanceof Connector) {\n state = node.constraints & ConnectorConstraints.AllowDrop;\n }\n else {\n state = node.constraints & NodeConstraints.AllowDrop;\n }\n return state;\n}\n/**\n * Used to check canVitualize constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} diagram - provide the Diagram value.\n * @private\n */\nfunction canVitualize(diagram) {\n return diagram.constraints & DiagramConstraints.Virtualization;\n}\n/**\n * Used to check canEnableToolTip constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {ConnectorModel | NodeModel} node - provide the node value.\n * @param {Diagram} diagram - provide the Diagram value.\n * @private\n */\nfunction canEnableToolTip(node, diagram) {\n var state = 0;\n if (node instanceof Connector) {\n if (node.constraints & ConnectorConstraints.Tooltip) {\n state = node.constraints & ConnectorConstraints.Tooltip;\n }\n else if (node.constraints & ConnectorConstraints.InheritTooltip) {\n state = diagram.constraints & DiagramConstraints.Tooltip;\n }\n }\n else if (node instanceof PointPort || node instanceof PathPort) {\n if (node.constraints & PortConstraints.ToolTip) {\n state = node.constraints & PortConstraints.ToolTip;\n }\n else if (node.constraints & PortConstraints.InheritTooltip) {\n state = diagram.constraints & DiagramConstraints.Tooltip;\n }\n }\n else if (node instanceof ShapeAnnotation || node instanceof PathAnnotation) {\n if (node.constraints & AnnotationConstraints.Tooltip) {\n state = node.constraints & AnnotationConstraints.Tooltip;\n }\n }\n else {\n if (node.constraints & NodeConstraints.Tooltip) {\n state = node.constraints & NodeConstraints.Tooltip;\n }\n else if (node.constraints & NodeConstraints.InheritTooltip) {\n state = diagram.constraints & DiagramConstraints.Tooltip;\n }\n }\n return state;\n}\n/**\n * Used to check canSingleSelect constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canSingleSelect(model) {\n return model.tool & DiagramTools.SingleSelect;\n}\n/**\n * Used to check canMultiSelect constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canMultiSelect(model) {\n return model.tool & DiagramTools.MultipleSelect;\n}\n/**\n * Used to check canZoomPan constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canZoomPan(model) {\n return model.tool & DiagramTools.ZoomPan;\n}\n/**\n * Used to check canContinuousDraw constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canContinuousDraw(model) {\n return model.tool & DiagramTools.ContinuousDraw;\n}\n/**\n * Used to check canDrawOnce constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canDrawOnce(model) {\n return model.tool & DiagramTools.DrawOnce;\n}\n/**\n * Used to check defaultTool constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction defaultTool(model) {\n return (model.tool & DiagramTools.SingleSelect) || (model.tool & DiagramTools.MultipleSelect);\n}\n/**\n * Used to check canZoom constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canZoom(model) {\n return model.constraints & DiagramConstraints.Zoom;\n}\n/**\n * Used to check canPan constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canPan(model) {\n return model.constraints & DiagramConstraints.Pan;\n}\n/**\n * Used to check canUserInteract constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canUserInteract(model) {\n return model.constraints & DiagramConstraints.UserInteraction;\n}\n/**\n * Used to check canApiInteract constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canApiInteract(model) {\n return model.constraints & DiagramConstraints.ApiUpdate;\n}\n/**\n * Used to check canPanX constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canPanX(model) {\n return ((model.constraints & DiagramConstraints.PanX));\n}\n/**\n * Used to check canPanY constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canPanY(model) {\n return ((model.constraints & DiagramConstraints.PanY));\n}\n/**\n * Used to check canZoomTextEdit constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} diagram - provide the Diagram value.\n * @private\n */\nfunction canZoomTextEdit(diagram) {\n return ((diagram.constraints & DiagramConstraints.ZoomTextEdit));\n}\n/**\n * Used to check canPageEditable constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} model - provide the Diagram value.\n * @private\n */\nfunction canPageEditable(model) {\n return canApiInteract(model) || (model.diagramActions & DiagramAction.ToolAction);\n}\n/**\n * Used to check enableReadOnly constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {Diagram} annotation - provide the annotation value.\n * @param {Diagram} node - provide the node value.\n * @private\n */\nfunction enableReadOnly(annotation, node) {\n var enumValue = 0;\n enumValue = (node instanceof Connector) ? ConnectorConstraints.ReadOnly : NodeConstraints.ReadOnly;\n if (node.shape.type === 'Text') {\n return node.constraints & NodeConstraints.ReadOnly;\n }\n else if (node.constraints & enumValue) {\n if (annotation.constraints & AnnotationConstraints.InheritReadOnly) {\n return 1;\n }\n else {\n return 0;\n }\n }\n else if (annotation.constraints & AnnotationConstraints.ReadOnly) {\n return 1;\n }\n return 0;\n}\n/**\n * Used to check canDraw constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {PointPortModel | NodeModel} port - provide the Diagram value.\n * @param {Diagram} diagram - provide the Diagram value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction canDraw(port, diagram) {\n return port.constraints & PortConstraints.Draw;\n}\n/**\n * Used to check canDrag constraints of the element \\\n *\n * @returns { number } Used to check canInConnect constraints of the element .\\\n *\n * @param {PointPortModel | NodeModel} port - provide the Diagram value.\n * @param {Diagram} diagram - provide the Diagram value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction canDrag(port, diagram) {\n return port.constraints & PortConstraints.Drag;\n}\n/**\n * Used to check canPreventClearSelection constraints of the element \\\n *\n * @returns { boolean } Used to check canInConnect constraints of the element .\\\n *\n * @param {PointPortModel | NodeModel} diagramActions - provide the diagramActions value.\n * @private\n */\nfunction canPreventClearSelection(diagramActions) {\n if (diagramActions & DiagramAction.PreventClearSelection) {\n return true;\n }\n else {\n return false;\n }\n}\n/**\n * Used to check canDrawThumbs \\\n *\n * @returns { boolean } Used to check canInConnect constraints of the element .\\\n *\n * @param {RendererAction} rendererActions - provide the RendererAction value.\n * @private\n */\nfunction canDrawThumbs(rendererActions) {\n if (!(rendererActions & RendererAction.DrawSelectorBorder)) {\n return true;\n }\n else {\n return false;\n }\n}\n/**\n * Used to check avoidDrawSelector \\\n *\n * @returns { boolean } Used to check canInConnect constraints of the element .\\\n *\n * @param {RendererAction} rendererActions - provide the RendererAction value.\n * @private\n */\nfunction avoidDrawSelector(rendererActions) {\n if ((rendererActions & RendererAction.PreventRenderSelector)) {\n return true;\n }\n else {\n return false;\n }\n}\n\nvar __extends$f = (undefined && undefined.__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})();\n/**\n * Grid panel is used to arrange the children in a table like structure\n */\nvar GridPanel = /** @__PURE__ @class */ (function (_super) {\n __extends$f(GridPanel, _super);\n function GridPanel() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.childTable = [];\n _this.cellStyle = {};\n _this.desiredRowHeight = [];\n _this.desiredCellWidth = [];\n return _this;\n }\n /**\n * rowDefinitions method \\\n *\n * @returns { RowDefinition[] } columnDefinitions method .\\\n *\n * @private\n */\n GridPanel.prototype.rowDefinitions = function () {\n return this.rowDefns;\n };\n /**\n * columnDefinitions method \\\n *\n * @returns { ColumnDefinition[] } columnDefinitions method .\\\n *\n * @private\n */\n GridPanel.prototype.columnDefinitions = function () {\n return this.colDefns;\n };\n GridPanel.prototype.addObject = function (obj, rowId, columnId, rowSpan, columnSpan) {\n //check if exists\n if (this.rows.length >= rowId) {\n var row = this.rows[parseInt(rowId.toString(), 10)];\n if (row.cells.length > columnId) {\n columnSpan = columnSpan || 1;\n rowSpan = rowSpan || 1;\n var cell = row.cells[parseInt(columnId.toString(), 10)];\n cell.columnSpan = Math.max(columnSpan, cell.columnSpan);\n cell.rowSpan = Math.max(rowSpan, cell.rowSpan);\n var object = new GridCellItem();\n object = obj;\n object.rowId = rowId;\n object.columnId = columnId;\n object.columnSpan = columnSpan;\n this.childTable[object.id] = object;\n this.addObjectToCell(object, cell);\n }\n }\n };\n // public setCellStyle(rowId: number, columnId: number, cellStyle: ShapeStyleModel): void {\n // if (this.rows.length > rowId) {\n // let row: GridRow = this.rows[rowId];\n // if (row.cells.length > columnId) {\n // let cell: GridCell = row.cells[columnId];\n // cell.style = cellStyle;\n // }\n // }\n // }\n // public getRowId(obj: DiagramElement): number {\n // return (this.childTable[obj.id] as GridCellItem).rowId;\n // }\n // public getColumnId(obj: DiagramElement): number {\n // return (this.childTable[obj.id] as GridCellItem).columnId;\n // }\n // public getRowSpan(obj: DiagramElement): number {\n // return (this.childTable[obj.id] as GridCellItem).rowSpan;\n // }\n // public getColumnSpan(obj: DiagramElement): number {\n // return (this.childTable[obj.id] as GridCellItem).columnSpan;\n // }\n GridPanel.prototype.addObjectToCell = function (obj, cell) {\n if (!cell.children) {\n cell.children = [];\n }\n // obj.minWidth = cell.desiredCellWidth; obj.minHeight = cell.desiredCellHeight;\n obj.style.strokeColor = 'black';\n obj.style.strokeWidth = 1;\n //Bug 853721: Grid lines remain hidden when lane fill is set to transparent.\n // Removed below code in which the fill set as white.\n // obj.style.fill = 'white';\n cell.children.push(obj);\n };\n /**\n * updateProperties method \\\n *\n * @returns { void } updateProperties method .\\\n * @param {number} offsetX - provide the Connector value.\n * @param {number} offsetY - provide the Connector value.\n * @param {number} width - provide the Connector value.\n * @param {number} height - provide the Connector value.\n *\n * @private\n */\n GridPanel.prototype.updateProperties = function (offsetX, offsetY, width, height) {\n this.offsetX = offsetX;\n this.offsetY = offsetY;\n this.width = width;\n this.height = height;\n };\n /**\n * setDefinitions method \\\n *\n * @returns { void } setDefinitions method .\\\n * @param {RowDefinition[]} rows - provide the rows value.\n * @param {ColumnDefinition[]} columns - provide the Connector value.\n *\n * @private\n */\n GridPanel.prototype.setDefinitions = function (rows, columns) {\n this.rowDefns = rows;\n this.colDefns = columns;\n this.children = [];\n this.rows = this.rows || [];\n for (var i = 0; i < rows.length; i++) {\n var rowDefn = rows[parseInt(i.toString(), 10)];\n var row = new GridRow();\n row.cells = [];\n var defaultCell = new ColumnDefinition();\n //replace this 100 with a proper property\n defaultCell.width = this.width;\n var columns_1 = this.colDefns;\n if (columns_1 === undefined || columns_1.length < 1) {\n columns_1 = [defaultCell];\n }\n this.addCellInRow(columns_1, rowDefn, row);\n this.rows.push(row);\n }\n };\n /**\n * addCellInRow method \\\n *\n * @returns { void } addCellInRow method .\\\n * @param {ColumnDefinition[]} columns - provide the rows value.\n * @param {RowDefinition} rowDefn - provide the Connector value.\n * @param {GridRow} row - provide the Connector value.\n *\n * @private\n */\n GridPanel.prototype.addCellInRow = function (columns, rowDefn, row) {\n for (var j = 0; j < columns.length; j++) {\n var colDefn = columns[parseInt(j.toString(), 10)];\n var cell = new GridCell();\n cell.children = [];\n this.cellStyle.fill = 'none';\n this.cellStyle.strokeColor = 'none';\n cell.id = randomId();\n cell.style = this.cellStyle;\n cell.desiredCellWidth = cell.minWidth = colDefn.width;\n cell.desiredCellHeight = cell.minHeight = rowDefn.height;\n row.cells.push(cell);\n this.children.push(cell);\n }\n };\n /**\n * calculateSize method \\\n *\n * @returns { void } calculateSize method .\\\n *\n * @private\n */\n GridPanel.prototype.calculateSize = function () {\n var rows = this.rows || [];\n var calculateHeight = 0;\n var calculateWidth = 0;\n for (var i = 0; i < rows.length; i++) {\n var row = this.rows[parseInt(i.toString(), 10)];\n calculateWidth = 0;\n for (var j = 0; j < row.cells.length; j++) {\n calculateWidth += row.cells[parseInt(j.toString(), 10)].desiredCellWidth;\n if (j === row.cells.length - 1) {\n if (this.width && this.width !== calculateWidth) {\n row.cells[parseInt(j.toString(), 10)].desiredCellWidth += (this.width - calculateWidth);\n row.cells[parseInt(j.toString(), 10)].minWidth = row.cells[parseInt(j.toString(), 10)].desiredCellWidth;\n if (row.cells[parseInt(j.toString(), 10)].children && row.cells[parseInt(j.toString(), 10)].children.length) {\n row.cells[parseInt(j.toString(), 10)].children[0].width =\n row.cells[parseInt(j.toString(), 10)].desiredCellWidth;\n }\n this.colDefns[parseInt(j.toString(), 10)].width = row.cells[parseInt(j.toString(), 10)].desiredCellWidth;\n }\n calculateHeight += row.cells[parseInt(j.toString(), 10)].desiredCellHeight;\n if (i === rows.length - 1) {\n if (this.height && this.height !== calculateHeight) {\n var height = (this.height - calculateHeight);\n if (height > 0) {\n for (var k = 0; k < row.cells.length; k++) {\n row.cells[parseInt(k.toString(), 10)].desiredCellHeight += height;\n row.cells[parseInt(k.toString(), 10)].minHeight =\n row.cells[parseInt(k.toString(), 10)].desiredCellHeight =\n row.cells[parseInt(k.toString(), 10)].desiredCellHeight;\n if (row.cells[parseInt(k.toString(), 10)].children\n && row.cells[parseInt(k.toString(), 10)].children.length) {\n row.cells[parseInt(k.toString(), 10)].children[0].height =\n row.cells[parseInt(k.toString(), 10)].desiredCellHeight;\n }\n }\n this.rowDefns[parseInt(i.toString(), 10)].height += height;\n }\n }\n }\n }\n }\n }\n };\n /**\n * updateRowHeight method \\\n *\n * @returns { void } updateRowHeight method .\\\n * @param {number} rowId - provide the rows value.\n * @param {number} height - provide the Connector value.\n * @param {boolean} isConsiderChild - provide the Connector value.\n * @param {number} padding - provide the Connector value.\n *\n * @private\n */\n GridPanel.prototype.updateRowHeight = function (rowId, height, isConsiderChild, padding) {\n var row = this.rows[parseInt(rowId.toString(), 10)];\n this.rowDefns[parseInt(rowId.toString(), 10)].height = height;\n if (this.height !== undefined) {\n this.height += height - row.cells[0].desiredCellHeight;\n }\n for (var i = 0; i < row.cells.length; i++) {\n row.cells[parseInt(i.toString(), 10)].desiredCellHeight = row.cells[parseInt(i.toString(), 10)].minHeight = height;\n if (row.cells[parseInt(i.toString(), 10)].children && row.cells[parseInt(i.toString(), 10)].children.length) {\n row.cells[parseInt(i.toString(), 10)].children[0].height = height;\n this.setTextRefresh(row.cells[parseInt(i.toString(), 10)].children[0]);\n }\n }\n this.desiredRowHeight[parseInt(rowId.toString(), 10)] = height;\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n if (isConsiderChild) {\n var minHeight = (padding !== undefined) ? this.calculateCellHeightBasedOnChildren(rowId, padding) :\n this.calculateCellHeight(rowId);\n if (minHeight > height) {\n this.updateRowHeight(rowId, minHeight, false);\n }\n }\n };\n GridPanel.prototype.setTextRefresh = function (canvas) {\n if (canvas.children && canvas.children.length) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var children = canvas.children;\n for (var i = 0; i < children.length; i++) {\n if (children[parseInt(i.toString(), 10)] instanceof TextElement) {\n children[parseInt(i.toString(), 10)].refreshTextElement();\n }\n if (children[parseInt(i.toString(), 10)] instanceof Canvas) {\n this.setTextRefresh(children[parseInt(i.toString(), 10)]);\n }\n }\n }\n };\n /**\n * updateColumnWidth method \\\n *\n * @returns { void } updateColumnWidth method .\\\n * @param {number} colId - provide the rows value.\n * @param {number} width - provide the Connector value.\n * @param {boolean} isConsiderChild - provide the Connector value.\n * @param {number} padding - provide the Connector value.\n *\n * @private\n */\n GridPanel.prototype.updateColumnWidth = function (colId, width, isConsiderChild, padding) {\n this.colDefns[parseInt(colId.toString(), 10)].width = width;\n if (this.width !== undefined) {\n this.width += width - this.rows[this.rows.length - 1].cells[parseInt(colId.toString(), 10)].desiredCellWidth;\n }\n for (var i = 0; i < this.rows.length; i++) {\n this.setTextRefresh(this.rows[parseInt(i.toString(), 10)].cells[0]);\n this.rows[parseInt(i.toString(), 10)].cells[parseInt(colId.toString(), 10)].desiredCellWidth =\n this.rows[parseInt(i.toString(), 10)].cells[parseInt(colId.toString(), 10)].minWidth = width;\n if (this.rows[parseInt(i.toString(), 10)].cells[parseInt(colId.toString(), 10)].children\n && this.rows[parseInt(i.toString(), 10)].cells[parseInt(colId.toString(), 10)].children.length) {\n this.rows[parseInt(i.toString(), 10)].cells[parseInt(colId.toString(), 10)].children[0].width = width;\n }\n }\n this.desiredCellWidth[parseInt(colId.toString(), 10)] = width;\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n if (isConsiderChild) {\n var minWidth = (padding !== undefined) ? this.calculateCellWidthBasedOnChildren(colId, padding) :\n this.calculateCellWidth(colId);\n if (minWidth > width) {\n this.updateColumnWidth(colId, minWidth, false);\n }\n }\n };\n GridPanel.prototype.calculateCellWidth = function (colIndex) {\n var maxWidth;\n var width;\n var cell;\n for (var i = 0; i < this.rows.length; i++) {\n cell = this.rows[parseInt(i.toString(), 10)].cells[parseInt(colIndex.toString(), 10)];\n if (cell.columnSpan === 1) {\n width = (cell.outerBounds.width > cell.bounds.width &&\n (cell.children.length === 0 || cell.children[0].maxWidth === undefined)) ? cell.outerBounds.width : cell.bounds.width;\n if (maxWidth) {\n maxWidth = (maxWidth < width) ? width : maxWidth;\n }\n else {\n maxWidth = width;\n }\n }\n }\n return maxWidth;\n };\n GridPanel.prototype.calculateCellHeight = function (rowIndex) {\n var maxHeight;\n var height;\n var cell;\n var row = this.rows[parseInt(rowIndex.toString(), 10)];\n for (var i = 0; i < row.cells.length; i++) {\n cell = row.cells[parseInt(i.toString(), 10)];\n height = (cell.outerBounds.height > cell.bounds.height) ? cell.outerBounds.height : cell.bounds.height;\n if (maxHeight) {\n maxHeight = (maxHeight < height) ? height : maxHeight;\n }\n else {\n maxHeight = height;\n }\n }\n return maxHeight;\n };\n GridPanel.prototype.calculateCellSizeBasedOnChildren = function (cell, option, padding, maxSize) {\n var maxBounds;\n var canvas = (cell && cell.children.length > 0) ? cell.children[0] : undefined;\n if (canvas && cell.columnSpan === 1) {\n maxBounds = (option === 'Width') ? canvas.bounds.right : canvas.bounds.bottom;\n if (!maxSize) {\n maxSize = (option === 'Width') ? canvas.bounds.width : canvas.bounds.height;\n }\n for (var j = 0; j < canvas.children.length; j++) {\n var children = canvas.children[parseInt(j.toString(), 10)];\n if (children instanceof Canvas) {\n if (children.id.indexOf('header') === -1) {\n var bounds = ((option === 'Width') ? children.bounds.right : children.bounds.bottom) + padding;\n if (bounds > maxBounds) {\n var size = (bounds - maxBounds) + ((option === 'Width') ? canvas.bounds.width : canvas.bounds.height);\n if (maxSize) {\n maxSize = (maxSize < size) ? size : maxSize;\n }\n }\n }\n }\n }\n }\n return maxSize;\n };\n GridPanel.prototype.calculateCellWidthBasedOnChildren = function (colIndex, padding) {\n var maxWidth; //let width: number; let maxBounds: number; let canvas: Canvas;\n var cell;\n for (var i = 0; i < this.rows.length; i++) {\n cell = this.rows[parseInt(i.toString(), 10)].cells[parseInt(colIndex.toString(), 10)];\n maxWidth = this.calculateCellSizeBasedOnChildren(cell, 'Width', padding, maxWidth);\n }\n return maxWidth;\n };\n GridPanel.prototype.calculateCellHeightBasedOnChildren = function (rowIndex, padding) {\n var maxHeight;\n var cell;\n // let maxBounds: number; let canvas: Canvas;\n var row = this.rows[parseInt(rowIndex.toString(), 10)];\n for (var i = 0; i < row.cells.length; i++) {\n cell = row.cells[parseInt(i.toString(), 10)];\n maxHeight = this.calculateCellSizeBasedOnChildren(cell, 'Height', padding, maxHeight);\n }\n return maxHeight;\n };\n /**\n * addRow method \\\n *\n * @returns { void } addRow method .\\\n * @param {number} rowId - provide the rowId value.\n * @param {number} rowDefn - provide the rowDefn value.\n * @param {boolean} isMeasure - provide the isMeasure value.\n *\n * @private\n */\n GridPanel.prototype.addRow = function (rowId, rowDefn, isMeasure) {\n if (this.rowDefns.length > 0) {\n this.rowDefns.splice(rowId, 0, rowDefn);\n }\n else {\n this.rowDefns.push(rowDefn);\n }\n var row = new GridRow();\n row.cells = [];\n var defaultCell = new ColumnDefinition();\n defaultCell.width = this.width;\n var columns = this.colDefns;\n this.addCellInRow(columns, rowDefn, row);\n if (rowId > this.rows.length - 1) {\n this.rows.push(row);\n }\n else {\n this.rows.splice(rowId, 0, row);\n }\n if (isMeasure) {\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n }\n };\n /**\n * addColumn method \\\n *\n * @returns { void } addColumn method .\\\n * @param {number} columnId - provide the rowId value.\n * @param {number} column - provide the rowDefn value.\n * @param {boolean} isMeasure - provide the isMeasure value.\n *\n * @private\n */\n GridPanel.prototype.addColumn = function (columnId, column, isMeasure) {\n var row;\n var rowDefn;\n var colDefn;\n var cell;\n var rows = this.rows;\n if (this.colDefns.length > 0) {\n this.colDefns.splice(columnId, 0, column);\n }\n else {\n this.colDefns.push(column);\n }\n if (this.width !== undefined) {\n this.width += column.width;\n }\n for (var i = 0; i < rows.length; i++) {\n row = rows[parseInt(i.toString(), 10)];\n rowDefn = this.rowDefns[parseInt(i.toString(), 10)];\n colDefn = column;\n cell = new GridCell();\n cell.style = this.cellStyle;\n cell.desiredCellWidth = cell.minWidth = colDefn.width;\n cell.desiredCellHeight = cell.minHeight = rowDefn.height;\n cell.children = [];\n if (columnId > row.cells.length - 1) {\n row.cells.push(cell);\n }\n else {\n row.cells.splice(columnId, 0, cell);\n }\n this.children.push(cell);\n }\n if (isMeasure) {\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n }\n };\n /**\n * removeRow method \\\n *\n * @returns { void } removeRow method .\\\n * @param {number} rowId - provide the rowId value.\n *\n * @private\n */\n GridPanel.prototype.removeRow = function (rowId) {\n var cell;\n var element;\n var rows = this.rows;\n var removeRow = rows[parseInt(rowId.toString(), 10)];\n this.height -= this.rowDefns[parseInt(rowId.toString(), 10)].height;\n for (var i = 0; i < removeRow.cells.length; i++) {\n cell = removeRow.cells[parseInt(i.toString(), 10)];\n this.children.splice(this.children.indexOf(cell), 1);\n element = document.getElementById(cell.id + '_groupElement');\n if (element && element.parentElement) {\n element.parentElement.removeChild(element);\n }\n }\n this.rows.splice(rowId, 1);\n this.rowDefns.splice(rowId, 1);\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n };\n /**\n * removeColumn method \\\n *\n * @returns { void } removeColumn method .\\\n * @param {number} columnId - provide the rowId value.\n *\n * @private\n */\n GridPanel.prototype.removeColumn = function (columnId) {\n var cell;\n var element;\n var rows = this.rows;\n this.width -= this.colDefns[parseInt(columnId.toString(), 10)].width;\n for (var i = 0; i < rows.length; i++) {\n cell = rows[parseInt(i.toString(), 10)].cells[parseInt(columnId.toString(), 10)];\n this.children.splice(this.children.indexOf(cell), 1);\n element = document.getElementById(cell.id + '_groupElement');\n if (element && element.parentElement) {\n element.parentElement.removeChild(element);\n }\n rows[parseInt(i.toString(), 10)].cells.splice(columnId, 1);\n }\n this.colDefns.splice(columnId, 1);\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n };\n /**\n * updateRowIndex method \\\n *\n * @returns { void } updateRowIndex method .\\\n * @param {number} currentIndex - provide the rowId value.\n * @param {number} newIndex - provide the rowId value.\n *\n * @private\n */\n GridPanel.prototype.updateRowIndex = function (currentIndex, newIndex) {\n //const rows: GridRow[] = this.rows;\n var temp = this.rows[parseInt(currentIndex.toString(), 10)];\n this.rows.splice(currentIndex, 1);\n this.rows.splice(newIndex, 0, temp);\n var tempRow = this.rowDefns[parseInt(currentIndex.toString(), 10)];\n this.rowDefns.splice(currentIndex, 1);\n this.rowDefns.splice(newIndex, 0, tempRow);\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n };\n /**\n * updateColumnIndex method \\\n *\n * @returns { void } updateColumnIndex method .\\\n * @param {number} startRowIndex - provide the startRowIndex value.\n * @param {number} currentIndex - provide the currentIndex value.\n * @param {number} newIndex - provide the newIndex value.\n *\n * @private\n */\n GridPanel.prototype.updateColumnIndex = function (startRowIndex, currentIndex, newIndex) {\n var temp;\n var cell;\n for (var i = startRowIndex; i < this.rows.length; i++) {\n temp = this.rows[parseInt(i.toString(), 10)];\n cell = this.rows[parseInt(i.toString(), 10)].cells[parseInt(currentIndex.toString(), 10)];\n temp.cells.splice(currentIndex, 1);\n temp.cells.splice(newIndex, 0, cell);\n }\n var tempCol = this.colDefns[parseInt(currentIndex.toString(), 10)];\n this.colDefns.splice(currentIndex, 1);\n this.colDefns.splice(newIndex, 0, tempCol);\n var tempSize = this.desiredCellWidth[parseInt(currentIndex.toString(), 10)];\n this.desiredCellWidth.splice(currentIndex, 1);\n this.desiredCellWidth.splice(newIndex, 0, tempSize);\n this.measure(new Size(this.width, this.height));\n this.arrange(this.desiredSize);\n };\n /**\n * measure method \\\n *\n * @returns { Size } measure method .\\\n * @param {Size} availableSize - provide the startRowIndex value.\n *\n * @private\n */\n GridPanel.prototype.measure = function (availableSize) {\n var desired = undefined;\n if (this.rows !== undefined && this.rows.length > 0) {\n var i = 0;\n var j = 0;\n desired = new Size(0, 0);\n this.calculateSize();\n for (var _i = 0, _a = this.rows; _i < _a.length; _i++) {\n var row = _a[_i];\n j = 0;\n for (var _b = 0, _c = row.cells; _b < _c.length; _b++) {\n var cell = _c[_b];\n var size = cell.measure(new Size(cell.desiredCellWidth, cell.desiredCellHeight));\n if (cell.rowSpan === 1) {\n if (j === 0 || this.desiredRowHeight[parseInt(i.toString(), 10)] === undefined) {\n this.desiredRowHeight[parseInt(i.toString(), 10)] = size.height;\n }\n else {\n this.desiredRowHeight[parseInt(i.toString(), 10)] =\n Math.max(size.height, this.desiredRowHeight[parseInt(i.toString(), 10)]);\n }\n }\n if (cell.columnSpan === 1) {\n if (i === 0 || this.desiredCellWidth[parseInt(j.toString(), 10)] === undefined) {\n this.desiredCellWidth[parseInt(j.toString(), 10)] = size.width;\n }\n else {\n this.desiredCellWidth[parseInt(j.toString(), 10)] =\n Math.max(size.width, this.desiredCellWidth[parseInt(j.toString(), 10)]);\n }\n if (i === this.rows.length - 1) {\n desired.width += this.desiredCellWidth[parseInt(j.toString(), 10)];\n }\n }\n j++;\n }\n desired.height += this.desiredRowHeight[parseInt(i.toString(), 10)];\n i++;\n }\n //to-do update definitions\n i = j = 0;\n var rowIndex = 0;\n for (var _d = 0, _e = this.rows; _d < _e.length; _d++) {\n var row = _e[_d];\n j = 0;\n var cellIndex = 0;\n for (var _f = 0, _g = row.cells; _f < _g.length; _f++) {\n var cell = _g[_f];\n if (cell.columnSpan !== 1) {\n cell.desiredSize.width = 0;\n for (var start = 0; start < cell.columnSpan; start++) {\n if ((start + j) < row.cells.length) {\n cell.desiredSize.width += this.desiredCellWidth[start + j];\n cell.minWidth = cell.desiredSize.width;\n cell.measure(cell.desiredSize);\n }\n }\n j++;\n }\n else {\n cell.desiredSize.width = this.desiredCellWidth[parseInt(cellIndex.toString(), 10)];\n cell.measure(cell.desiredSize);\n }\n if (cell.rowSpan !== 1) {\n cell.desiredSize.height = 0;\n for (var start = 0; start < cell.rowSpan; start++) {\n if ((start + rowIndex) < this.rows.length) {\n cell.desiredSize.height += this.desiredRowHeight[start + rowIndex];\n cell.minHeight = cell.desiredSize.height;\n cell.measure(cell.desiredSize);\n }\n }\n }\n else {\n cell.desiredSize.height = this.desiredRowHeight[parseInt(rowIndex.toString(), 10)];\n cell.measure(cell.desiredSize);\n }\n i++;\n cellIndex++;\n }\n rowIndex++;\n }\n }\n if (desired === undefined) {\n desired = _super.prototype.validateDesiredSize.call(this, desired, availableSize);\n }\n _super.prototype.stretchChildren.call(this, desired);\n this.desiredSize = desired;\n return desired;\n };\n /**\n * arrange method \\\n *\n * @returns { Size } arrange method .\\\n * @param {Size} desiredSize - provide the startRowIndex value.\n * @param {boolean} isChange - provide the startRowIndex value.\n *\n * @private\n */\n GridPanel.prototype.arrange = function (desiredSize, isChange) {\n var j = 0;\n var i = 0;\n if (this.rows !== undefined && this.rows.length > 0) {\n var x = this.offsetX - desiredSize.width * this.pivot.x;\n var y = this.offsetY - desiredSize.height * this.pivot.y;\n var cellX = x;\n for (var _i = 0, _a = this.rows; _i < _a.length; _i++) {\n var row = _a[_i];\n cellX = x;\n j = 0;\n for (var _b = 0, _c = row.cells; _b < _c.length; _b++) {\n var cell = _c[_b];\n var cellWidth = Math.max(this.desiredCellWidth[parseInt(j.toString(), 10)], cell.desiredSize.width);\n var cellHeight = Math.max(this.desiredRowHeight[parseInt(i.toString(), 10)], cell.desiredSize.height);\n cell.offsetX = cellX + cellWidth * cell.pivot.x;\n cell.offsetY = y + cellHeight * cell.pivot.y;\n cellX += this.desiredCellWidth[parseInt(j.toString(), 10)];\n cell.arrange(new Size(cellWidth, cellHeight));\n j++;\n }\n y += this.desiredRowHeight[parseInt(i.toString(), 10)];\n i++;\n }\n if (isChange) {\n // Need to remove the unwanted the child elements in the grid\n // Used for row span and column span.\n var cell = void 0;\n var row = void 0;\n var k = void 0;\n var z = void 0;\n var removeCell = void 0;\n for (i = 0; i < this.rows.length; i++) {\n row = this.rows[parseInt(i.toString(), 10)];\n for (j = 0; j < row.cells.length; j++) {\n cell = row.cells[parseInt(j.toString(), 10)];\n if (cell.columnSpan > 1) {\n // remove a child element when a column span is greater than 1\n this.children.splice((this.children.indexOf(cell)) + 1, cell.columnSpan - 1);\n }\n if (cell.rowSpan > 1) {\n for (k = i, z = 0; ((k + cell.rowSpan - 1) < this.rows.length && z < cell.rowSpan - 1); k++, z++) {\n removeCell = this.rows[k + 1].cells[parseInt(j.toString(), 10)];\n // remove a child element when a row span is greater than 1\n this.children.splice(this.children.indexOf(removeCell), 1);\n }\n }\n }\n }\n }\n }\n this.actualSize = desiredSize;\n this.updateBounds();\n return desiredSize;\n };\n return GridPanel;\n}(Container));\n/**\n * Defines the behavior of the RowDefinition of node\n */\nvar RowDefinition = /** @__PURE__ @class */ (function () {\n function RowDefinition() {\n /** returns the height of node */\n this.height = undefined;\n }\n return RowDefinition;\n}());\n/**\n * Defines the behavior of the ColumnDefinition of node\n */\nvar ColumnDefinition = /** @__PURE__ @class */ (function () {\n function ColumnDefinition() {\n /** returns the width of node */\n this.width = undefined;\n }\n return ColumnDefinition;\n}());\n/** @private */\nvar GridRow = /** @__PURE__ @class */ (function () {\n function GridRow() {\n this.cells = null;\n }\n return GridRow;\n}());\n/** @private */\nvar GridCell = /** @__PURE__ @class */ (function (_super) {\n __extends$f(GridCell, _super);\n function GridCell() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.columnSpan = 1;\n _this.rowSpan = 1;\n return _this;\n }\n return GridCell;\n}(Canvas));\nvar GridCellItem = /** @__PURE__ @class */ (function (_super) {\n __extends$f(GridCellItem, _super);\n function GridCellItem() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.rowId = 0;\n _this.columnId = 0;\n _this.rowSpan = 1;\n _this.columnSpan = 1;\n return _this;\n }\n return GridCellItem;\n}(DiagramElement));\n\n/**\n * SwimLane modules are used to rendering and interaction.\n */\n/** @private */\n/**\n * initSwimLane method \\\n *\n * @returns {void} initSwimLane method .\\\n * @param { GridPanel} grid - provide the grid value.\n * @param { Diagram} diagram - provide the diagram value.\n * @param {NodeModel} node - provide the node value.\n * @private\n */\nfunction initSwimLane(grid, diagram, node) {\n if (!node.width && node.shape.phases.length === 0) {\n node.width = 100;\n }\n var row = [];\n var columns = [];\n var index = 0;\n var shape = node.shape;\n var orientation = shape.orientation === 'Horizontal' ? true : false;\n if (shape.header && shape.hasHeader) {\n createRow(row, shape.header.height);\n }\n initGridRow(row, orientation, node);\n initGridColumns(columns, orientation, node);\n grid.setDefinitions(row, columns);\n if (shape.header && shape.hasHeader) {\n headerDefine(grid, diagram, node);\n index++;\n }\n if (shape.phases.length > 0 && shape.phaseSize) {\n for (var k = 0; k < shape.phases.length; k++) {\n if (shape.phases[parseInt(k.toString(), 10)].id === '') {\n shape.phases[parseInt(k.toString(), 10)].id = randomId();\n }\n phaseDefine(grid, diagram, node, index, orientation, k);\n }\n index++;\n }\n if (shape.lanes.length > 0) {\n for (var k = 0; k < shape.lanes.length; k++) {\n if (shape.lanes[parseInt(k.toString(), 10)].id === '') {\n shape.lanes[parseInt(k.toString(), 10)].id = randomId();\n }\n laneCollection(grid, diagram, node, index, k, orientation);\n index++;\n }\n }\n}\n/**\n * addObjectToGrid method \\\n *\n * @returns {Container} addObjectToGrid method .\\\n * @param { Diagram} diagram - provide the diagram value.\n * @param { GridPanel} grid - provide the grid value.\n * @param {NodeModel} parent - provide the parent value.\n * @param {NodeModel} object - provide the object value.\n * @param {boolean} isHeader - provide the isHeader value.\n * @param {boolean} isPhase - provide the isPhase value.\n * @param {boolean} isLane - provide the isLane value.\n * @param {string} canvas - provide the canvas value.\n * @private\n */\nfunction addObjectToGrid(diagram, grid, parent, object, isHeader, isPhase, isLane, canvas) {\n var node = new Node(diagram, 'nodes', object, true);\n node.parentId = parent.id;\n node.isHeader = (isHeader) ? true : false;\n node.isPhase = (isPhase) ? true : false;\n node.isLane = (isLane) ? true : false;\n var id = (isPhase) ? 'PhaseHeaderParent' : 'LaneHeaderParent';\n if (canvas) {\n node[\"\" + id] = canvas;\n }\n node.constraints &= ~(NodeConstraints.InConnect | NodeConstraints.OutConnect);\n node.constraints |= NodeConstraints.HideThumbs;\n diagram.initObject(node);\n diagram.nodes.push(node);\n if (node.wrapper.children.length > 0) {\n for (var i = 0; i < node.wrapper.children.length; i++) {\n var child = node.wrapper.children[parseInt(i.toString(), 10)];\n if (child instanceof DiagramElement) {\n child.isCalculateDesiredSize = false;\n }\n if (child instanceof TextElement) {\n child.canConsiderBounds = false;\n if (!isHeader && (parent.shape.orientation === 'Vertical' && isPhase) ||\n (parent.shape.orientation !== 'Vertical' && isLane)) {\n child.isLaneOrientation = true;\n child.refreshTextElement();\n }\n }\n }\n node.wrapper.measure(new Size(undefined, undefined));\n node.wrapper.arrange(node.wrapper.desiredSize);\n }\n return node.wrapper;\n}\n/**\n * headerDefine method \\\n *\n * @returns {void} headerDefine method .\\\n * @param { GridPanel} grid - provide the grid value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} object - provide the object value.\n * @private\n */\nfunction headerDefine(grid, diagram, object) {\n var maxWidth = 0;\n var columns = grid.columnDefinitions();\n var shape = object.shape;\n for (var i = 0; i < columns.length; i++) {\n maxWidth += columns[parseInt(i.toString(), 10)].width;\n }\n shape.header.id = shape.header.id || randomId();\n var node = {\n id: object.id + shape.header.id,\n annotations: [cloneObject(shape.header.annotation)],\n style: shape.header.style ? shape.header.style : undefined,\n offsetX: object.offsetX, offsetY: object.offsetY,\n rowIndex: 0, columnIndex: 0,\n maxWidth: maxWidth,\n container: { type: 'Canvas', orientation: 'Horizontal' }\n };\n if (!canSelect(object)) {\n node.constraints &= ~NodeConstraints.Select;\n }\n var wrapper = addObjectToGrid(diagram, grid, object, node, true);\n grid.addObject(wrapper, 0, 0, 1, grid.columnDefinitions().length);\n}\n/**\n * phaseDefine method \\\n *\n * @returns {void} phaseDefine method .\\\n * @param { GridPanel} grid - provide the grid value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} object - provide the object value.\n * @param {number} indexValue - provide the indexValue value.\n * @param {boolean} orientation - provide the orientation value.\n * @param {number} phaseIndex - provide the phaseIndex value.\n * @private\n */\nfunction phaseDefine(grid, diagram, object, indexValue, orientation, phaseIndex) {\n var rowValue = 0;\n var colValue = 0;\n var maxWidth;\n var shape = object.shape;\n if (orientation) {\n colValue = phaseIndex;\n rowValue = indexValue;\n maxWidth = grid.columnDefinitions()[parseInt(phaseIndex.toString(), 10)].width;\n }\n else {\n rowValue = shape.header && shape.hasHeader ? phaseIndex + 1 : phaseIndex;\n }\n var phaseObject = {\n annotations: [cloneObject(shape.phases[parseInt(phaseIndex.toString(), 10)].header.annotation)],\n maxWidth: maxWidth,\n id: object.id + shape.phases[parseInt(phaseIndex.toString(), 10)].id + '_header',\n addInfo: shape.phases[parseInt(phaseIndex.toString(), 10)].addInfo,\n offsetX: object.offsetX, offsetY: object.offsetY,\n style: shape.phases[parseInt(phaseIndex.toString(), 10)].style,\n rowIndex: rowValue, columnIndex: colValue,\n container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }\n };\n phaseObject.annotations[0].rotateAngle = orientation ? 0 : 270;\n if (!canSelect(object)) {\n phaseObject.constraints &= ~NodeConstraints.Select;\n }\n shape.phases[parseInt(phaseIndex.toString(), 10)].header.id = phaseObject.id;\n var wrapper = addObjectToGrid(diagram, grid, object, phaseObject, false, true, false, shape.phases[parseInt(phaseIndex.toString(), 10)].id);\n grid.addObject(wrapper, rowValue, colValue);\n}\n/**\n * laneCollection method \\\n *\n * @returns {void} laneCollection method .\\\n * @param { GridPanel} grid - provide the grid value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} object - provide the object value.\n * @param {number} indexValue - provide the indexValue value.\n * @param {number} laneIndex - provide the laneIndex value.\n * @param {boolean} orientation - provide the orientation value.\n * @private\n */\nfunction laneCollection(grid, diagram, object, indexValue, laneIndex, orientation) {\n var laneNode;\n var parentWrapper;\n var gridCell;\n var canvas;\n var childWrapper;\n var shape = object.shape;\n var value = shape.phases.length || 1;\n var isHeader = (shape.header && shape.hasHeader) ? 1 : 0;\n var rowValue = orientation ? indexValue : isHeader;\n var phaseCount = (shape.phaseSize && shape.phases.length > 0) ? 1 : 0;\n for (var l = 0; l < value; l++) {\n var colValue = orientation ? l : laneIndex + phaseCount;\n gridCell = grid.rows[parseInt(rowValue.toString(), 10)].cells[parseInt(colValue.toString(), 10)];\n canvas = {\n id: object.id + shape.lanes[parseInt(laneIndex.toString(), 10)].id + l,\n rowIndex: rowValue, columnIndex: colValue,\n width: gridCell.minWidth, height: gridCell.minHeight,\n offsetX: object.offsetX, offsetY: object.offsetY,\n style: shape.lanes[parseInt(laneIndex.toString(), 10)].style,\n addInfo: shape.lanes[parseInt(laneIndex.toString(), 10)].addInfo,\n constraints: NodeConstraints.Default | NodeConstraints.ReadOnly | NodeConstraints.AllowDrop,\n container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }\n };\n if (!canSelect(object)) {\n canvas.constraints &= ~NodeConstraints.Select;\n }\n parentWrapper = addObjectToGrid(diagram, grid, object, canvas, false, false, true);\n parentWrapper.children[0].isCalculateDesiredSize = false;\n if (l === 0) {\n laneNode = {\n id: object.id + shape.lanes[parseInt(laneIndex.toString(), 10)].id + '_' + l + '_header',\n style: shape.lanes[parseInt(laneIndex.toString(), 10)].header.style,\n annotations: [cloneObject(shape.lanes[parseInt(laneIndex.toString(), 10)].header.annotation)],\n offsetX: object.offsetX, offsetY: object.offsetY,\n rowIndex: rowValue, columnIndex: colValue,\n container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }\n };\n laneNode.annotations[0].rotateAngle = orientation ? 270 : 0;\n shape.lanes[parseInt(laneIndex.toString(), 10)].header.id = laneNode.id;\n // eslint-disable-next-line\n (orientation) ? laneNode.width = shape.lanes[laneIndex].header.width :\n laneNode.height = shape.lanes[parseInt(laneIndex.toString(), 10)].header.height;\n if (!canSelect(object)) {\n laneNode.constraints &= ~NodeConstraints.Select;\n }\n childWrapper = addObjectToGrid(diagram, grid, object, laneNode, false, false, true, shape.lanes[parseInt(laneIndex.toString(), 10)].id);\n if (orientation) {\n childWrapper.children[0].elementActions = childWrapper.children[0].elementActions | ElementAction.HorizontalLaneHeader;\n }\n parentWrapper.children.push(childWrapper);\n }\n grid.addObject(parentWrapper, rowValue, colValue);\n if (!orientation) {\n rowValue++;\n }\n colValue = orientation ? l : laneIndex + 1;\n }\n}\n/**\n * createRow method \\\n *\n * @returns {void} createRow method .\\\n * @param { RowDefinition[]} row - provide the row value.\n * @param {number} height - provide the height value.\n * @private\n */\nfunction createRow(row, height) {\n var rows = new RowDefinition();\n rows.height = height;\n row.push(rows);\n}\n/**\n * createColumn method \\\n *\n * @returns {void} createColumn method .\\\n * @param {number} width - provide the width value.\n * @private\n */\nfunction createColumn(width) {\n var cols = new ColumnDefinition();\n cols.width = width;\n return cols;\n}\n/**\n * initGridRow method \\\n *\n * @returns {void} initGridRow method .\\\n * @param {RowDefinition[]} row - provide the row value.\n * @param {boolean} orientation - provide the row value.\n * @param {NodeModel} object - provide the row value.\n * @private\n */\nfunction initGridRow(row, orientation, object) {\n var totalHeight = 0;\n var height;\n var shape = object.shape;\n if (row.length > 0) {\n for (var i = 0; i < row.length; i++) {\n totalHeight += row[parseInt(i.toString(), 10)].height;\n }\n }\n if (orientation) {\n if (shape.phases.length > 0 && shape.phaseSize) {\n totalHeight += shape.phaseSize;\n createRow(row, shape.phaseSize);\n }\n if (shape.lanes.length > 0) {\n for (var i = 0; i < shape.lanes.length; i++) {\n height = shape.lanes[parseInt(i.toString(), 10)].height;\n totalHeight += height;\n if (i === shape.lanes.length - 1 && totalHeight < object.height) {\n height += object.height - totalHeight;\n }\n createRow(row, height);\n }\n }\n }\n else {\n if (shape.phases.length > 0) {\n var phaseHeight = 0;\n for (var i = 0; i < shape.phases.length; i++) {\n var phaseOffset = shape.phases[parseInt(i.toString(), 10)].offset;\n if (i === 0) {\n phaseHeight += phaseOffset;\n }\n else {\n phaseOffset -= phaseHeight;\n phaseHeight += phaseOffset;\n }\n height = phaseOffset;\n totalHeight += height;\n if (i === shape.phases.length - 1 && totalHeight < object.height) {\n height += object.height - totalHeight;\n }\n createRow(row, height);\n }\n }\n else {\n createRow(row, object.height);\n }\n }\n}\n/**\n * initGridColumns method \\\n *\n * @returns {void} initGridRow method .\\\n * @param {ColumnDefinition[]} columns - provide the row value.\n * @param {boolean} orientation - provide the row value.\n * @param {NodeModel} object - provide the row value.\n * @private\n */\nfunction initGridColumns(columns, orientation, object) {\n var totalWidth = 0;\n var shape = object.shape;\n var phaseOffset;\n var cols;\n var k;\n var j;\n var value;\n if (shape.phases.length > 0 && shape.orientation === 'Horizontal') {\n for (j = 0; j < shape.phases.length; j++) {\n phaseOffset = shape.phases[parseInt(j.toString(), 10)].offset;\n if (j === 0) {\n totalWidth += phaseOffset;\n }\n else {\n phaseOffset -= totalWidth;\n totalWidth += phaseOffset;\n }\n cols = createColumn(phaseOffset);\n if (j === shape.phases.length - 1 && totalWidth < object.width) {\n cols.width += object.width - totalWidth;\n }\n columns.push(cols);\n }\n }\n else if (!orientation) {\n value = (shape.phaseSize && shape.phases.length > 0) ? shape.lanes.length\n + 1 : shape.lanes.length;\n if (shape.phaseSize && shape.phases.length > 0) {\n totalWidth += shape.phaseSize;\n cols = createColumn(shape.phaseSize);\n columns.push(cols);\n }\n for (k = 0; k < shape.lanes.length; k++) {\n totalWidth += shape.lanes[parseInt(k.toString(), 10)].width;\n cols = createColumn(shape.lanes[parseInt(k.toString(), 10)].width);\n if (k === shape.lanes.length - 1 && totalWidth < object.width) {\n cols.width += object.width - totalWidth;\n }\n columns.push(cols);\n }\n if ((shape.phases.length === 0 && shape.lanes.length === 0)) {\n cols = createColumn(object.width);\n columns.push(cols);\n }\n }\n else {\n cols = createColumn(object.width);\n columns.push(cols);\n }\n}\n/**\n * getConnectors method \\\n *\n * @returns {void} getConnectors method .\\\n * @param {Diagram} diagram - provide the row value.\n * @param {GridPanel} grid - provide the row value.\n * @param {number} rowIndex - provide the row value.\n * @param {boolean} isRowUpdate - provide the row value.\n * @private\n */\nfunction getConnectors(diagram, grid, rowIndex, isRowUpdate) {\n var connectors = [];\n var conn = 0;\n var childNode;\n var node;\n var k;\n var j;\n var canvas;\n var row;\n var length = grid.rowDefinitions().length;\n var edges;\n for (var i_1 = 0; i_1 < length; i_1++) {\n row = grid.rows[parseInt(i_1.toString(), 10)];\n for (j = 0; j < row.cells.length; j++) {\n canvas = row.cells[parseInt(j.toString(), 10)].children[0];\n if (canvas && canvas.children && canvas.children.length) {\n for (k = 1; k < canvas.children.length; k++) {\n childNode = canvas.children[parseInt(k.toString(), 10)];\n node = diagram.getObject(childNode.id);\n if (node && (node.inEdges.length > 0 || node.outEdges.length > 0)) {\n edges = node.inEdges.concat(node.outEdges);\n for (conn = 0; conn < edges.length; conn++) {\n if (connectors.indexOf(edges[parseInt(conn.toString(), 10)]) === -1) {\n connectors.push(edges[parseInt(conn.toString(), 10)]);\n }\n }\n }\n }\n }\n }\n }\n return connectors;\n}\n/**\n * swimLaneMeasureAndArrange method \\\n *\n * @returns {void} swimLaneMeasureAndArrange method .\\\n * @param {NodeModel} obj - provide the row value.\n * @private\n */\nfunction swimLaneMeasureAndArrange(obj) {\n var canvas = obj.wrapper;\n canvas.measure(new Size(obj.width, obj.height));\n if (canvas.children[0] instanceof GridPanel) {\n var grid = canvas.children[0];\n var isMeasure = false;\n if (grid.width && grid.width < grid.desiredSize.width) {\n isMeasure = true;\n grid.width = grid.desiredSize.width;\n }\n if (grid.height && grid.height < grid.desiredSize.height) {\n isMeasure = true;\n grid.height = grid.desiredSize.height;\n }\n if (isMeasure) {\n grid.measure(new Size(grid.width, grid.height));\n }\n }\n canvas.arrange(canvas.desiredSize);\n}\n/**\n * ChangeLaneIndex method \\\n *\n * @returns {void} ChangeLaneIndex method .\\\n * @param {Diagram} diagram - provide the row value.\n * @param {NodeModel} obj - provide the row value.\n * @param {number} startRowIndex - provide the row value.\n * @private\n */\nfunction ChangeLaneIndex(diagram, obj, startRowIndex) {\n var container = obj.wrapper.children[0];\n var i;\n var j;\n var k;\n var l;\n var object;\n var subChild;\n var row;\n var cell;\n var child;\n for (i = startRowIndex; i < container.rows.length; i++) {\n row = container.rows[parseInt(i.toString(), 10)];\n for (j = 0; j < row.cells.length; j++) {\n cell = row.cells[parseInt(j.toString(), 10)];\n if (cell.children && cell.children.length > 0) {\n for (k = 0; k < cell.children.length; k++) {\n child = cell.children[parseInt(k.toString(), 10)];\n object = diagram.nameTable[child.id];\n if (object.isLane && child.children.length > 1) {\n // 912905: Multi-selecting and deleting swimlane objects causes the diagram to break\n for (l = 1; l < child.children.length; l++) {\n subChild = diagram.nameTable[child.children[parseInt(l.toString(), 10)].id];\n if (subChild && subChild.isLane) {\n subChild.rowIndex = i;\n subChild.columnIndex = j;\n }\n }\n }\n object.rowIndex = i;\n object.columnIndex = j;\n }\n }\n }\n }\n}\n/**\n * arrangeChildNodesInSwimLane method \\\n *\n * @returns {void} arrangeChildNodesInSwimLane method .\\\n * @param {Diagram} diagram - provide the row value.\n * @param {NodeModel} obj - provide the row value.\n * @private\n */\nfunction arrangeChildNodesInSwimLane(diagram, obj) {\n var grid = obj.wrapper.children[0];\n var shape = obj.shape;\n var padding = shape.padding;\n var lanes = shape.lanes;\n var top = grid.bounds.y;\n var rowvalue;\n var columnValue;\n var phaseCount = (shape.phaseSize > 0) ? shape.phases.length : 0;\n var node;\n var canvas;\n var cell;\n var i;\n var j;\n var k;\n var orientation = shape.orientation === 'Horizontal' ? true : false;\n var col = orientation ? shape.phases.length || 1 : lanes.length + 1;\n var row = orientation ? ((shape.header && shape.hasHeader) ? 1 : 0) +\n (shape.phases.length > 0 ? 1 : 0) + (shape.lanes.length)\n : (shape.header && shape.hasHeader ? 1 : 0) + shape.phases.length;\n if (phaseCount === 0 && !orientation && shape.lanes.length) {\n row += 1;\n }\n if (orientation) {\n rowvalue = (shape.header && shape.hasHeader ? 1 : 0) + (phaseCount > 0 ? 1 : 0);\n columnValue = 0;\n }\n else {\n rowvalue = (shape.header && shape.hasHeader ? 1 : 0);\n columnValue = phaseCount > 0 ? 1 : 0;\n }\n if (lanes.length > 0) {\n top += (shape.header && shape.hasHeader) ? shape.header.height : 0;\n for (i = 0; i < lanes.length; i++) {\n for (j = 0; j < lanes[parseInt(i.toString(), 10)].children.length; j++) {\n node = lanes[parseInt(i.toString(), 10)].children[parseInt(j.toString(), 10)];\n node.offsetX = lanes[parseInt(i.toString(), 10)].width;\n node.offsetY = lanes[parseInt(i.toString(), 10)].height;\n diagram.initObject(node);\n diagram.nodes.push(node);\n canvas = node.wrapper;\n if (orientation) {\n for (k = columnValue; k < col; k++) {\n cell = grid.rows[parseInt(rowvalue.toString(), 10)].cells[parseInt(k.toString(), 10)];\n if (canvas.margin.left < (cell.bounds.right - grid.bounds.x)) {\n node.parentId = cell.children[0].id;\n if (k > columnValue) {\n canvas.margin.left = canvas.margin.left - (cell.bounds.left - grid.bounds.left);\n }\n else {\n if ((cell.children[0].children[1].actualSize.width + padding) >= canvas.margin.left) {\n canvas.margin.left = cell.children[0].children[1].actualSize.width + padding;\n }\n }\n if (canvas.margin.left < padding) {\n canvas.margin.left = padding;\n }\n if (canvas.margin.top < padding) {\n canvas.margin.top = padding;\n }\n addChildToLane(canvas, node, diagram);\n break;\n }\n }\n }\n else {\n for (var k_1 = rowvalue; k_1 < row; k_1++) {\n cell = grid.rows[parseInt(k_1.toString(), 10)].cells[parseInt(columnValue.toString(), 10)];\n if (canvas.margin.top < (cell.bounds.bottom - top)) {\n node.parentId = cell.children[0].id;\n if (k_1 > rowvalue) {\n canvas.margin.top = canvas.margin.top - (cell.bounds.top - top);\n }\n else {\n if ((cell.children[0].children[1].actualSize.height + padding) >= canvas.margin.top) {\n canvas.margin.top = cell.children[0].children[1].actualSize.height + padding;\n }\n }\n if (canvas.margin.left < padding) {\n canvas.margin.left = padding;\n }\n if (canvas.margin.top < padding) {\n canvas.margin.top = padding;\n }\n addChildToLane(canvas, node, diagram);\n break;\n }\n }\n }\n }\n // eslint-disable-next-line\n orientation ? rowvalue++ : columnValue++;\n }\n }\n grid.measure(new Size(obj.width, obj.height));\n grid.arrange(grid.desiredSize);\n updateChildOuterBounds(grid, obj);\n obj.width = obj.wrapper.width = grid.width;\n obj.height = obj.wrapper.height = grid.height;\n updateHeaderMaxWidth(diagram, obj);\n obj.wrapper.measure(new Size(obj.width, obj.height));\n obj.wrapper.arrange(grid.desiredSize);\n checkLaneChildrenOffset(obj);\n checkPhaseOffset(obj, diagram);\n checkLaneSize(obj);\n}\n/**\n * addChildToLane method \\\n *\n * @returns {void} addChildToLane method .\\\n * @param {Container} canvas - provide the row value.\n * @param {NodeModel} node - provide the row value.\n * @param {Diagram} diagram - provide the row value.\n * @private\n */\nfunction addChildToLane(canvas, node, diagram) {\n canvas.measure(new Size(node.width, node.height));\n canvas.arrange(canvas.desiredSize);\n var parent = diagram.getObject(node.parentId);\n diagram.addChild(parent, node.id);\n}\n/**\n * updateChildOuterBounds method \\\n *\n * @returns {void} updateChildOuterBounds method .\\\n * @param {GridPanel} grid - provide the row value.\n * @param {NodeModel} obj - provide the row value.\n * @private\n */\nfunction updateChildOuterBounds(grid, obj) {\n var columnDefinitions = grid.columnDefinitions();\n var rowDefinitions = grid.rowDefinitions();\n var i;\n var k;\n var j;\n var cell;\n var child;\n var row;\n var rowIndex = findStartLaneIndex(obj);\n if (obj.shape.orientation === 'Vertical') {\n if (rowIndex === 0) {\n rowIndex = (obj.shape.header && obj.shape.hasHeader) ? 1 : 0;\n }\n }\n var padding = obj.shape.padding;\n for (i = 0; i < columnDefinitions.length; i++) {\n grid.updateColumnWidth(i, columnDefinitions[parseInt(i.toString(), 10)].width, true, padding);\n }\n for (i = rowIndex; i < rowDefinitions.length; i++) {\n grid.updateRowHeight(i, rowDefinitions[parseInt(i.toString(), 10)].height, true, padding);\n }\n for (k = 0; k < rowDefinitions.length; k++) {\n row = grid.rows[parseInt(k.toString(), 10)];\n for (i = 0; i < columnDefinitions.length; i++) {\n cell = row.cells[parseInt(i.toString(), 10)];\n if (cell.children && cell.children.length > 0) {\n for (j = 0; j < cell.children.length; j++) {\n child = cell.children[parseInt(j.toString(), 10)];\n if (child.maxWidth) {\n child.maxWidth = cell.actualSize.width;\n }\n if (child.maxHeight) {\n child.maxHeight = cell.actualSize.height;\n }\n }\n }\n }\n }\n}\n/**\n * checkLaneSize method \\\n *\n * @returns {void} checkLaneSize method .\\\n * @param {NodeModel} obj - provide the row value.\n * @private\n */\nfunction checkLaneSize(obj) {\n if (obj.shape.type === 'SwimLane' && !obj.shape.isLane && !obj.shape.isPhase) {\n // 910832 - Lane height updating to negative values wrongly during resizing\n var lane = void 0;\n var i = void 0;\n var j = void 0;\n var k = void 0;\n var size = void 0; //let laneCount: number = 0;\n var lanes = obj.shape.lanes;\n var laneIndex = findStartLaneIndex(obj);\n var rows = obj.wrapper.children[0].rowDefinitions();\n var columns = obj.wrapper.children[0].columnDefinitions();\n var widthSize = void 0;\n var heightSize = void 0;\n for (i = 0; i < lanes.length; i++, laneIndex++) {\n lane = lanes[parseInt(i.toString(), 10)];\n if (obj.shape.orientation === 'Horizontal') {\n size = rows[parseInt(laneIndex.toString(), 10)].height;\n if (lane.height !== size) {\n lane.height = size;\n }\n for (j = 0; j < columns.length; j++) {\n widthSize = columns[parseInt(j.toString(), 10)].width;\n if (lane.width !== widthSize) {\n lane.width = widthSize;\n }\n }\n }\n else {\n size = columns[parseInt(laneIndex.toString(), 10)].width;\n if (lane.width !== size) {\n lane.width = size;\n }\n for (k = 0; k < rows.length; k++) {\n heightSize = rows[parseInt(k.toString(), 10)].height;\n if (lane.height !== heightSize) {\n lane.height = heightSize;\n }\n }\n }\n }\n }\n}\n/**\n * checkPhaseOffset method \\\n *\n * @returns {void} checkPhaseOffset method .\\\n * @param {NodeModel} obj - provide the obj value.\n * @param {Diagram} diagram - provide the obj value.\n * @private\n */\nfunction checkPhaseOffset(obj, diagram) {\n var shape = obj.shape;\n var phases = shape.phases;\n var i;\n var offset;\n var phaseRow;\n var phase;\n var gridRowIndex = (shape.header && shape.hasHeader) ? 1 : 0;\n var grid = obj.wrapper.children[0];\n var top = grid.bounds.y + ((shape.header && shape.hasHeader) ? shape.header.height : 0);\n if (obj.shape.type === 'SwimLane') {\n obj = diagram.getObject(obj.id) || obj;\n if (phases.length > 0) {\n grid = obj.wrapper.children[0];\n if (shape.orientation === 'Horizontal') {\n phaseRow = (shape.header && shape.hasHeader) ? grid.rows[1] : grid.rows[0];\n for (i = 0; i < phases.length; i++) {\n phase = phaseRow.cells[parseInt(i.toString(), 10)].children[0];\n offset = phase.bounds.right - grid.bounds.x;\n if (phases[parseInt(i.toString(), 10)].offset !== offset) {\n phases[parseInt(i.toString(), 10)].offset = offset;\n }\n diagram.nameTable[phase.id].maxWidth = phase.maxWidth;\n }\n }\n else {\n for (i = 0; i < phases.length; i++) {\n phase = grid.rows[gridRowIndex + i].cells[0].children[0];\n offset = phase.bounds.bottom - top;\n if (phases[parseInt(i.toString(), 10)].offset !== offset) {\n phases[parseInt(i.toString(), 10)].offset = offset;\n }\n diagram.nameTable[phase.id].maxWidth = phase.maxWidth;\n }\n }\n }\n }\n}\n/**\n * updateConnectorsProperties method \\\n *\n * @returns {void} checkPhaseOffset method .\\\n * @param {string[]} connectors - provide the obj value.\n * @param {Diagram} diagram - provide the obj value.\n * @private\n */\nfunction updateConnectorsProperties(connectors, diagram) {\n if (connectors && connectors.length > 0) {\n var edges = void 0;\n if (diagram.lineRoutingModule && (diagram.constraints & DiagramConstraints.LineRouting)) {\n diagram.lineRoutingModule.renderVirtualRegion(diagram, true);\n }\n for (var i = 0; i < connectors.length; i++) {\n edges = diagram.getObject(connectors[parseInt(i.toString(), 10)]);\n if (diagram.lineRoutingModule && (diagram.constraints & DiagramConstraints.LineRouting) && edges.type === 'Orthogonal') {\n diagram.lineRoutingModule.refreshConnectorSegments(diagram, edges, true);\n }\n else {\n diagram.connectorPropertyChange(edges, {}, {\n sourceID: edges.sourceID, targetID: edges.targetID\n });\n }\n }\n }\n}\n/**\n * laneInterChanged method \\\n *\n * @returns {void} laneInterChanged method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} obj - provide the obj value.\n * @param {NodeModel} target - provide the target value.\n * @param {PointModel} position - provide the position value.\n * @private\n */\nfunction laneInterChanged(diagram, obj, target, position) {\n var index;\n var undoElement;\n var entry;\n var redoElement;\n var sourceIndex;\n var targetIndex;\n var temp;\n var sourceLaneIndex;\n var targetLaneIndex;\n var rowIndex;\n var swimLane = (diagram.getObject(obj.parentId));\n var shape = swimLane.shape;\n var grid = swimLane.wrapper.children[0];\n var lanes = shape.lanes;\n var connectors = getConnectors(diagram, grid, obj.rowIndex);\n if ((shape.orientation === 'Horizontal' && obj.rowIndex !== target.rowIndex) ||\n (shape.orientation === 'Vertical' && obj.columnIndex !== target.columnIndex)) {\n if (shape.orientation === 'Horizontal') {\n sourceIndex = obj.rowIndex;\n targetIndex = target.rowIndex;\n index = ((shape.header && shape.hasHeader) ? 1 : 0) + (shape.phases.length && shape.phaseSize ? 1 : 0);\n sourceLaneIndex = obj.rowIndex - index;\n targetLaneIndex = target.rowIndex - index;\n if (lanes[parseInt(sourceLaneIndex.toString(), 10)].canMove) {\n if (sourceLaneIndex < targetLaneIndex) {\n if (position && target.wrapper.offsetY > position.y) {\n targetIndex += (targetLaneIndex > 0) ? -1 : 1;\n targetLaneIndex += (targetLaneIndex > 0) ? -1 : 1;\n }\n }\n else {\n if (position && target.wrapper.offsetY < position.y) {\n targetIndex += 1;\n targetLaneIndex += 1;\n }\n }\n if (sourceIndex !== targetIndex) {\n grid.updateRowIndex(sourceIndex, targetIndex);\n }\n }\n }\n else {\n sourceIndex = obj.columnIndex;\n targetIndex = target.columnIndex;\n index = (shape.phases.length && shape.phaseSize) ? 1 : 0;\n sourceLaneIndex = obj.columnIndex - index;\n targetLaneIndex = target.columnIndex - index;\n rowIndex = (shape.header && shape.hasHeader) ? 1 : 0;\n if (lanes[parseInt(sourceLaneIndex.toString(), 10)].canMove) {\n if (sourceLaneIndex < targetLaneIndex) {\n if (position && target.wrapper.offsetX > position.x) {\n targetIndex += (targetLaneIndex > 0) ? -1 : 1;\n targetLaneIndex += (targetLaneIndex > 0) ? -1 : 1;\n }\n }\n else {\n if (position && target.wrapper.offsetX < position.x) {\n targetIndex += 1;\n targetLaneIndex += 1;\n }\n }\n if (sourceIndex !== targetIndex) {\n if ((shape.phaseSize === 0 || shape.phases.length === 0) && (targetIndex === 0 || sourceIndex === 0)) {\n if (shape.header && shape.hasHeader) {\n var changeHeaderIndex = (targetIndex === 0) ? sourceIndex : targetIndex;\n grid.rows[0].cells[parseInt(changeHeaderIndex.toString(), 10)].children = grid.rows[0].cells[0].children;\n grid.rows[0].cells[parseInt(changeHeaderIndex.toString(), 10)].columnSpan = grid.rows[0].cells[0].columnSpan;\n grid.rows[0].cells[0].children = [];\n }\n }\n grid.updateColumnIndex(0, sourceIndex, targetIndex);\n }\n }\n }\n if (sourceIndex !== targetIndex) {\n temp = lanes[parseInt(sourceLaneIndex.toString(), 10)];\n if (temp.canMove) {\n undoElement = {\n target: cloneObject(target), source: cloneObject(obj)\n };\n temp = lanes[parseInt(sourceLaneIndex.toString(), 10)];\n lanes.splice(sourceLaneIndex, 1);\n lanes.splice(targetLaneIndex, 0, temp);\n redoElement = {\n target: cloneObject(undoElement.source), source: cloneObject(undoElement.target)\n };\n entry = {\n type: 'LanePositionChanged', redoObject: redoElement,\n undoObject: undoElement, category: 'Internal'\n };\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n diagram.commandHandler.addHistoryEntry(entry);\n }\n ChangeLaneIndex(diagram, swimLane, 0);\n updateConnectorsProperties(connectors, diagram);\n updateSwimLaneChildPosition(lanes, diagram);\n swimLane.wrapper.measure(new Size(swimLane.width, swimLane.height));\n swimLane.wrapper.arrange(swimLane.wrapper.desiredSize);\n diagram.updateDiagramObject(swimLane);\n }\n }\n }\n diagram.updateDiagramElementQuad();\n}\n/**\n * updateSwimLaneObject method \\\n *\n * @returns {void} updateSwimLaneObject method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {Node} obj - provide the obj value.\n * @param {NodeModel} swimLane - provide the target value.\n * @param {NodeModel} helperObject - provide the position value.\n * @private\n */\nfunction updateSwimLaneObject(diagram, obj, swimLane, helperObject) {\n var parentNode = diagram.getObject(swimLane.id);\n var shape = parentNode.shape;\n var index = (shape.header && shape.hasHeader) ? 1 : 0;\n var lanes = shape.lanes;\n var phases = shape.phases;\n var helperWidth = helperObject.wrapper.actualSize.width;\n var helperHeight = helperObject.wrapper.actualSize.height;\n var objWidth = obj.wrapper.actualSize.width;\n var objHeight = obj.wrapper.actualSize.height;\n var i;\n var j;\n // 910832 - Lane height updating to negative values wrongly during resizing\n if (parentNode.shape.type === 'SwimLane') {\n if (shape.orientation === 'Horizontal') {\n if (obj.isPhase) {\n phases[obj.columnIndex].offset = obj.wrapper.width;\n for (i = 0; i < lanes.length; i++) {\n lanes[parseInt(i.toString(), 10)].width = obj.wrapper.width;\n }\n }\n else {\n index = (shape.phaseSize && shape.phases.length > 0) ? index + 1 : index;\n lanes[(obj.rowIndex - index)].height = obj.wrapper.height;\n }\n }\n else {\n if (obj.isPhase) {\n phases[(obj.rowIndex - index)].offset = obj.wrapper.height;\n for (j = 0; j < lanes.length; j++) {\n lanes[parseInt(j.toString(), 10)].height = obj.wrapper.height;\n }\n }\n else {\n index = (shape.phaseSize && shape.phases.length > 0) ? 1 : 0;\n lanes[(obj.columnIndex - index)].width = obj.wrapper.width;\n }\n }\n }\n}\n/**\n * findLaneIndex method \\\n *\n * @returns {number} findLaneIndex method .\\\n * @param {NodeModel} swimLane - provide the diagram value.\n * @param {NodeModel} laneObj - provide the obj value.\n * @private\n */\nfunction findLaneIndex(swimLane, laneObj) {\n var laneIndex;\n var shape = swimLane.shape;\n var index = (shape.header && shape.hasHeader) ? 1 : 0;\n if (shape.orientation === 'Horizontal') {\n index += shape.phases.length > 0 ? 1 : 0;\n laneIndex = laneObj.rowIndex - index;\n }\n else {\n laneIndex = laneObj.columnIndex - (shape.phaseSize && shape.phases.length > 0 ? 1 : 0);\n }\n return laneIndex;\n}\n/**\n * findPhaseIndex method \\\n *\n * @returns {number} findPhaseIndex method .\\\n * @param {NodeModel} phase - provide the diagram value.\n * @param {NodeModel} swimLane - provide the obj value.\n * @private\n */\nfunction findPhaseIndex(phase, swimLane) {\n var shape = swimLane.shape;\n var index = (shape.header && shape.hasHeader) ? 1 : 0;\n var phaseIndex = (shape.orientation === 'Horizontal') ? phase.columnIndex : phase.rowIndex - index;\n return phaseIndex;\n}\n/**\n * findStartLaneIndex method \\\n *\n * @returns {number} findStartLaneIndex method .\\\n * @param {NodeModel} swimLane - provide the obj value.\n * @private\n */\nfunction findStartLaneIndex(swimLane) {\n var index = 0;\n var shape = swimLane.shape;\n if (shape.orientation === 'Horizontal') {\n index = (shape.header && shape.hasHeader) ? 1 : 0;\n }\n if (shape.phases.length > 0 && shape.phaseSize) {\n index += 1;\n }\n return index;\n}\n/**\n * updatePhaseMaxWidth method \\\n *\n * @returns {void} updatePhaseMaxWidth method .\\\n * @param {NodeModel} parent - provide the obj value.\n * @param {Diagram} diagram - provide the obj value.\n * @param {Canvas} wrapper - provide the obj value.\n * @param {number} columnIndex - provide the obj value.\n * @private\n */\nfunction updatePhaseMaxWidth(parent, diagram, wrapper, columnIndex) {\n var shape = parent.shape;\n if (shape.phases.length > 0) {\n var node = diagram.nameTable[shape.phases[parseInt(columnIndex.toString(), 10)].header.id];\n if (node && node.maxWidth < wrapper.outerBounds.width) {\n node.maxWidth = wrapper.outerBounds.width;\n node.wrapper.maxWidth = wrapper.outerBounds.width;\n }\n }\n}\n/**\n * updateHeaderMaxWidth method \\\n *\n * @returns {void} updateHeaderMaxWidth method .\\\n * @param {NodeModel} diagram - provide the obj value.\n * @param {NodeModel} swimLane - provide the obj value.\n * @private\n */\nfunction updateHeaderMaxWidth(diagram, swimLane) {\n if (swimLane.shape.header && swimLane.shape.hasHeader) {\n var grid = swimLane.wrapper.children[0];\n var id = grid.rows[0].cells[0].children[0].id;\n var headerNode = diagram.nameTable[\"\" + id];\n if (headerNode && headerNode.isHeader && (headerNode.maxWidth < swimLane.width || headerNode.wrapper.maxWidth < swimLane.width)) {\n headerNode.maxWidth = swimLane.width;\n headerNode.wrapper.maxWidth = swimLane.width;\n }\n }\n}\n/**\n * addLane method \\\n *\n * @returns {void} addLane method .\\\n * @param {Diagram} diagram - provide the obj value.\n * @param {NodeModel} parent - provide the obj value.\n * @param {LaneModel} lane - provide the obj value.\n * @param {number} count - provide the obj value.\n * @private\n */\nfunction addLane(diagram, parent, lane, count) {\n var args;\n var swimLane = diagram.nameTable[parent.id];\n if (swimLane.shape.type === 'SwimLane') {\n diagram.protectPropertyChange(true);\n var grid = swimLane.wrapper.children[0];\n var bounds = grid.bounds;\n var shape = swimLane.shape;\n var redoObj = void 0;\n var orientation_1 = false;\n var entry = void 0;\n var index = void 0;\n var children = void 0;\n var j = void 0;\n var i = void 0;\n var c = void 0;\n var cell = void 0;\n var child = void 0;\n var point = void 0;\n var laneObj = new Lane(shape, 'lanes', lane, true);\n index = (shape.header && shape.hasHeader) ? 1 : 0;\n if (shape.orientation === 'Horizontal') {\n orientation_1 = true;\n index = shape.phases.length > 0 ? index + 1 : index;\n }\n var connectors = getConnectors(diagram, grid);\n var laneIndex = (count !== undefined) ? count : shape.lanes.length;\n index += laneIndex;\n args = {\n element: laneObj, cause: diagram.diagramActions, diagramAction: diagram.getDiagramAction(diagram.diagramActions), state: 'Changing', type: 'Addition', cancel: false, laneIndex: laneIndex\n };\n diagram.triggerEvent(DiagramEvent.collectionChange, args);\n if (!args.cancel) {\n if (orientation_1) {\n var rowDef = new RowDefinition();\n rowDef.height = lane.height;\n grid.addRow(index, rowDef, false);\n swimLane.height = (swimLane.height !== undefined) ? swimLane.height + lane.height : swimLane.height;\n swimLane.wrapper.height = grid.height = swimLane.height;\n }\n else {\n var colDef = new ColumnDefinition();\n colDef.width = lane.width;\n grid.addColumn(laneIndex + 1, colDef, false);\n if (swimLane.width) {\n swimLane.width += lane.width;\n swimLane.wrapper.width = grid.width = swimLane.width;\n }\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n grid.rows[0].cells[0].columnSpan += 1;\n }\n }\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n laneObj.id = (laneObj.id === '') ? randomId() : laneObj.id;\n }\n if (count !== undefined) {\n shape.lanes.splice(count, 0, laneObj);\n }\n else {\n shape.lanes.push(laneObj);\n }\n args = {\n element: laneObj, cause: diagram.diagramActions, diagramAction: diagram.getDiagramAction(diagram.diagramActions), state: 'Changed', type: 'Addition', cancel: false, laneIndex: laneIndex\n };\n diagram.triggerEvent(DiagramEvent.collectionChange, args);\n laneCollection(grid, diagram, swimLane, index, laneIndex, orientation_1);\n redoObj = (shape.orientation === 'Horizontal') ?\n diagram.nameTable[grid.rows[parseInt(index.toString(), 10)].cells[0].children[0].id] :\n ((shape.header && shape.hasHeader) ?\n diagram.nameTable[grid.rows[1].cells[parseInt(index.toString(), 10)].children[0].id] :\n diagram.nameTable[grid.rows[0].cells[parseInt(index.toString(), 10)].children[0].id]);\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n entry = {\n type: 'LaneCollectionChanged', changeType: 'Insert', undoObject: cloneObject(laneObj),\n redoObject: cloneObject(redoObj), category: 'Internal'\n };\n diagram.addHistoryEntry(entry);\n }\n var startRowIndex = (shape.orientation === 'Horizontal') ?\n index : ((shape.header && shape.hasHeader) ? 1 : 0);\n ChangeLaneIndex(diagram, swimLane, startRowIndex);\n swimLaneMeasureAndArrange(swimLane);\n updateHeaderMaxWidth(diagram, swimLane);\n children = lane.children;\n var childAdded = false;\n if (children && children.length > 0) {\n for (j = 0; j < children.length; j++) {\n childAdded = false;\n child = children[parseInt(j.toString(), 10)];\n point = { x: child.wrapper.offsetX, y: child.wrapper.offsetY };\n var padding = { left: 0, right: 0, top: 0, bottom: 0 };\n if (shape.orientation === 'Horizontal') {\n padding.bottom = bounds.y - grid.bounds.y;\n //839579 - swimlane delete Lane and perform undo redo issue\n cell = grid.rows[parseInt(index.toString(), 10)].cells[parseInt(j.toString(), 10)];\n for (i = 0; i < grid.rows[parseInt(index.toString(), 10)].cells.length; i++) {\n addChildNodeToNewLane(diagram, grid.rows[parseInt(index.toString(), 10)].cells[parseInt(i.toString(), 10)], point, child, padding);\n }\n }\n else {\n //Bug 876330: After performing cut operations followed by an undo, lanes and nodes in the swimlane are not rendered properly.\n // To iterate the lane and check whether the child node is inside the vertical lane. If so then we cut the loop.\n // eslint-disable-next-line no-labels\n childAddBreak: for (var r = 0; r <= grid.rows.length; r++) {\n for (c = 0; c < grid.rows[parseInt(r.toString(), 10)].cells.length; c++) {\n //Padding to compensate the original position of swimlane before drag.\n padding.right = bounds.x - grid.bounds.x;\n cell = grid.rows[parseInt(r.toString(), 10)].cells[parseInt(c.toString(), 10)];\n childAdded = addChildNodeToNewLane(diagram, cell, point, child, padding);\n if (childAdded) {\n // eslint-disable-next-line no-labels\n break childAddBreak;\n }\n }\n }\n }\n }\n }\n updateConnectorsProperties(connectors, diagram);\n diagram.drag(swimLane, bounds.x - grid.bounds.x, bounds.y - grid.bounds.y);\n }\n diagram.protectPropertyChange(false);\n }\n}\n/**\n * addChildNodeToNewLane method \\\n *\n * @returns {void} addChildNodeToNewLane method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {GridCell} cell - provide the cell value.\n * @param {PointModel} point - provide the point value.\n * @param {NodeModel} child - provide the child value.\n * @param {MarginModel | number} padding - provide the padding value.\n * @private\n */\nfunction addChildNodeToNewLane(diagram, cell, point, child, padding) {\n var childAdded = false;\n if (cell.children && cell.children.length > 0) {\n var canvas = cell.children[0];\n var parent_1 = diagram.nameTable[canvas.id];\n if (containsChildPoint(canvas.bounds, point, padding)) {\n diagram.addChild(parent_1, child);\n childAdded = true;\n }\n }\n return childAdded;\n}\n/**\n * containsChildPoint method \\\n *\n * @returns {boolean} containsChildPoint method .\\\n * @param {Rect} bounds - provide the bounds value.\n * @param {PointModel} point - provide the point value.\n * @param {MarginModel} padding - provide the padding value.\n * @private\n */\nfunction containsChildPoint(bounds, point, padding) {\n var leftPadding = padding.left || 0;\n var rightPadding = padding.right || 0;\n var topPadding = padding.top || 0;\n var bottomPadding = padding.bottom || 0;\n return bounds.left - leftPadding <= point.x && bounds.right + rightPadding >= point.x\n && bounds.top - topPadding <= point.y && bounds.bottom + bottomPadding >= point.y;\n}\n/**\n * addPhase method \\\n *\n * @returns {void} addPhase method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} parent - provide the cell value.\n * @param {PhaseModel} newPhase - provide the point value.\n * @private\n */\nfunction addPhase(diagram, parent, newPhase) {\n if (parent.shape.type === 'SwimLane') {\n var gridRowIndex = void 0;\n var phaseNode = void 0;\n var phase = void 0;\n var previousPhase = void 0;\n var nextPhase = void 0;\n var phaseIndex = void 0;\n var i = void 0;\n var x = parent.wrapper.bounds.x;\n var y = parent.wrapper.bounds.y;\n var shape = parent.shape;\n var padding = shape.padding;\n var phasesCollection = shape.phases;\n var width = void 0;\n var grid = parent.wrapper.children[0];\n var orientation_2 = shape.orientation === 'Horizontal' ? true : false;\n gridRowIndex = (shape.header && shape.hasHeader) ? 0 : -1;\n if (shape.phases.length > 0) {\n gridRowIndex += 1;\n }\n var laneHeaderSize = (orientation_2) ? shape.lanes[0].header.width : shape.lanes[0].header.height;\n if (newPhase.offset > laneHeaderSize) {\n for (i = 0; i < phasesCollection.length; i++) {\n phase = phasesCollection[parseInt(i.toString(), 10)];\n previousPhase = (i > 0) ? phasesCollection[i - 1] : phase;\n if (phase.offset > newPhase.offset) {\n width = (i > 0) ? newPhase.offset - previousPhase.offset : newPhase.offset;\n if (orientation_2) {\n var nextCol = grid.columnDefinitions()[parseInt(i.toString(), 10)];\n nextCol.width -= width;\n nextPhase = diagram.nameTable[shape.phases[parseInt(i.toString(), 10)].header.id];\n nextPhase.maxWidth = nextPhase.wrapper.maxWidth = nextCol.width;\n grid.updateColumnWidth(i, nextCol.width, false);\n var addPhase_1 = new ColumnDefinition();\n addPhase_1.width = width;\n phaseIndex = i;\n grid.addColumn(i, addPhase_1, false);\n break;\n }\n else {\n var nextRow = grid.rowDefinitions()[i + gridRowIndex];\n nextRow.height -= width;\n nextPhase = diagram.nameTable[shape.phases[parseInt(i.toString(), 10)].header.id];\n grid.updateRowHeight(i + gridRowIndex, nextRow.height, false);\n var addPhase_2 = new RowDefinition();\n addPhase_2.height = width;\n phaseIndex = i;\n grid.addRow(i + gridRowIndex, addPhase_2, false);\n break;\n }\n }\n }\n if (diagram.diagramActions & DiagramAction.UndoRedo && phaseIndex === undefined) {\n var entry = diagram.historyManager.currentEntry.next;\n if (entry.isLastPhase) {\n phaseIndex = phasesCollection.length;\n addLastPhase(phaseIndex, parent, entry, grid, orientation_2);\n }\n }\n //897967: Exception throws while perform addPhase with offset higher than existing phases offset\n if (phaseIndex >= 0) {\n var phaseObj = new Phase((parent.shape), 'phases', newPhase, true);\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n phaseObj.id += randomId();\n }\n shape.phases.splice(phaseIndex, 0, phaseObj);\n phaseDefine(grid, diagram, parent, gridRowIndex, orientation_2, phaseIndex);\n if (orientation_2) {\n phaseNode = diagram.nameTable[grid.rows[parseInt(gridRowIndex.toString(), 10)].cells[parseInt(phaseIndex.toString(), 10)].children[0].id];\n if (phaseIndex === 0 && shape.header && shape.hasHeader) {\n grid.rows[0].cells[0].children = grid.rows[0].cells[1].children;\n grid.rows[0].cells[1].children = [];\n var fristRow = grid.rows[0];\n for (var i_2 = 0; i_2 < fristRow.cells.length; i_2++) {\n fristRow.cells[parseInt(i_2.toString(), 10)].minWidth = undefined;\n if (i_2 === 0) {\n fristRow.cells[parseInt(i_2.toString(), 10)].columnSpan = grid.rows[0].cells.length;\n }\n else {\n fristRow.cells[parseInt(i_2.toString(), 10)].columnSpan = 1;\n }\n }\n }\n addHorizontalPhase(diagram, parent, grid, phaseIndex);\n var col = grid.columnDefinitions();\n grid.updateColumnWidth(phaseIndex, col[parseInt(phaseIndex.toString(), 10)].width, true, padding);\n phaseNode.maxWidth = phaseNode.wrapper.maxWidth = col[parseInt(phaseIndex.toString(), 10)].width;\n if (col.length > phaseIndex + 1) {\n var nextPhaseNode = diagram.nameTable[grid.rows[parseInt(gridRowIndex.toString(), 10)].cells[phaseIndex + 1].children[0].id];\n grid.updateColumnWidth(phaseIndex + 1, col[phaseIndex + 1].width, true, padding);\n nextPhaseNode.maxWidth = nextPhaseNode.wrapper.maxWidth = col[phaseIndex + 1].width;\n }\n parent.width = parent.wrapper.width = parent.wrapper.children[0].width = grid.width;\n }\n else {\n phaseNode = diagram.nameTable[grid.rows[gridRowIndex + phaseIndex].cells[0].children[0].id];\n var row = grid.rowDefinitions();\n var size = row[gridRowIndex + phaseIndex].height;\n addVerticalPhase(diagram, parent, grid, gridRowIndex + phaseIndex);\n grid.updateRowHeight(gridRowIndex + phaseIndex, size, true, padding);\n if (row.length > gridRowIndex + phaseIndex + 1) {\n size = row[gridRowIndex + phaseIndex + 1].height;\n grid.updateRowHeight(gridRowIndex + phaseIndex + 1, size, true, padding);\n }\n parent.height = parent.wrapper.height = parent.wrapper.children[0].height = grid.actualSize.height;\n }\n swimLaneMeasureAndArrange(parent);\n parent.width = parent.wrapper.actualSize.width;\n updateHeaderMaxWidth(diagram, parent);\n diagram.drag(parent, x - parent.wrapper.bounds.x, y - parent.wrapper.bounds.y);\n checkPhaseOffset(parent, diagram);\n //911372-Lane Selector not updated after adding new phase at runtime\n diagram.commandHandler.select(phaseNode);\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'PhaseCollectionChanged', changeType: 'Insert', undoObject: cloneObject(phaseObj),\n redoObject: cloneObject(phaseNode), category: 'Internal'\n };\n diagram.addHistoryEntry(entry);\n }\n diagram.updateDiagramObject(parent);\n }\n }\n }\n}\n/**\n * addLastPhase method \\\n *\n * @returns {void} addLastPhase method .\\\n * @param {number} phaseIndex - provide the diagram value.\n * @param {NodeModel} parent - provide the cell value.\n * @param {HistoryEntry} entry - provide the point value.\n * @param {GridPanel} grid - provide the grid value.\n * @param {boolean} orientation - provide the orientation value.\n * @param {PhaseModel} newPhase - provide the newPhase value.\n * @private\n */\nfunction addLastPhase(phaseIndex, parent, entry, grid, orientation, newPhase) {\n var shape = parent.shape;\n var prevPhase = shape.phases[phaseIndex - 2];\n var prevOffset = entry.previousPhase.offset;\n if (orientation) {\n var nextCol = grid.columnDefinitions()[phaseIndex - 1];\n var addPhase_3 = new ColumnDefinition();\n if (phaseIndex > 1) {\n addPhase_3.width = (nextCol.width) - (prevOffset - prevPhase.offset);\n nextCol.width = prevOffset - prevPhase.offset;\n }\n else {\n addPhase_3.width = nextCol.width - prevOffset;\n nextCol.width = prevOffset;\n }\n grid.updateColumnWidth(phaseIndex - 1, nextCol.width, false);\n grid.addColumn(phaseIndex, addPhase_3, false);\n }\n else {\n var nextCol = grid.rowDefinitions()[parseInt(phaseIndex.toString(), 10)];\n var addPhase_4 = new RowDefinition();\n if (phaseIndex > 1) {\n addPhase_4.height = entry.undoObject.offset - prevOffset;\n nextCol.height = prevOffset - prevPhase.offset;\n }\n else {\n addPhase_4.height = nextCol.height - prevOffset;\n nextCol.height = prevOffset;\n }\n grid.updateRowHeight(phaseIndex, nextCol.height, false);\n grid.addRow(1 + phaseIndex, addPhase_4, false);\n }\n}\n/**\n * addHorizontalPhase method \\\n *\n * @returns {void} addHorizontalPhase method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} node - provide the cell value.\n * @param {GridPanel} grid - provide the point value.\n * @param {number} index - provide the point value.\n * @param {boolean} orientation - provide the point value.\n * @private\n */\nfunction addHorizontalPhase(diagram, node, grid, index, orientation) {\n var shape = node.shape;\n var nextCell;\n var i;\n var prevCell;\n var gridCell;\n var row;\n var laneIndex = findStartLaneIndex(node);\n if (shape.header && shape.hasHeader) {\n grid.rows[0].cells[0].columnSpan = grid.rows[0].cells.length;\n }\n for (i = laneIndex; i < grid.rows.length; i++) {\n row = grid.rows[parseInt(i.toString(), 10)];\n prevCell = row.cells[index - 1];\n gridCell = row.cells[parseInt(index.toString(), 10)];\n nextCell = row.cells[index + 1];\n addSwimlanePhases(diagram, node, prevCell, gridCell, nextCell, i, index);\n }\n ChangeLaneIndex(diagram, node, 1);\n}\n/**\n * addVerticalPhase method \\\n *\n * @returns {void} addVerticalPhase method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} node - provide the cell value.\n * @param {GridPanel} grid - provide the point value.\n * @param {number} rowIndex - provide the point value.\n * @param {boolean} orientation - provide the point value.\n * @private\n */\nfunction addVerticalPhase(diagram, node, grid, rowIndex, orientation) {\n var prevCell;\n var gridCell;\n var nextCell;\n var row = grid.rows[parseInt(rowIndex.toString(), 10)];\n var nextRow = grid.rows[rowIndex + 1];\n var prevRow = grid.rows[rowIndex - 1];\n for (var i = 1; i < row.cells.length; i++) {\n gridCell = row.cells[parseInt(i.toString(), 10)];\n nextCell = (nextRow) ? nextRow.cells[parseInt(i.toString(), 10)] : undefined;\n prevCell = prevRow.cells[parseInt(i.toString(), 10)];\n addSwimlanePhases(diagram, node, prevCell, gridCell, nextCell, rowIndex, i);\n }\n ChangeLaneIndex(diagram, node, 1);\n}\n/**\n * addSwimlanePhases method \\\n *\n * @returns {void} addSwimlanePhases method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} node - provide the node value.\n * @param {GridPanel} prevCell - provide the prevCell value.\n * @param {number} gridCell - provide the gridCell value.\n * @param {boolean} nextCell - provide the nextCell value.\n * @param {boolean} rowIndex - provide the rowIndex value.\n * @param {boolean} columnIndex - provide the columnIndex value.\n * @private\n */\nfunction addSwimlanePhases(diagram, node, prevCell, gridCell, nextCell, rowIndex, columnIndex) {\n var x;\n var y;\n var shape = node.shape;\n var orientation = shape.orientation === 'Horizontal' ? true : false;\n var grid = node.wrapper.children[0];\n var width = gridCell.desiredCellWidth;\n var height = gridCell.desiredCellHeight;\n //const col: number = (orientation) ? rowIndex : columnIndex;\n //let parentWrapper: Container;\n var j;\n var i = (orientation) ? rowIndex : columnIndex;\n if (prevCell) {\n x = orientation ? prevCell.bounds.x + prevCell.bounds.width : prevCell.bounds.x;\n y = orientation ? prevCell.bounds.y : prevCell.bounds.y + prevCell.bounds.height;\n }\n else {\n x = grid.bounds.x;\n y = nextCell.bounds.y;\n }\n var rect = new Rect(x, y, width, height);\n var canvas = {\n id: node.id + ((orientation) ? shape.lanes[i - 2] : shape.lanes[i - 1]).id + randomId()[0],\n rowIndex: rowIndex, columnIndex: columnIndex,\n width: gridCell.minWidth, height: gridCell.minHeight,\n style: ((orientation) ? shape.lanes[i - 2] : shape.lanes[i - 1]).style,\n constraints: NodeConstraints.Default | NodeConstraints.AllowDrop,\n container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }\n };\n var parentWrapper = addObjectToGrid(diagram, grid, node, canvas, false, false, true);\n parentWrapper.children[0].isCalculateDesiredSize = false;\n grid.addObject(parentWrapper, rowIndex, columnIndex);\n if (nextCell && nextCell.children && nextCell.children.length) {\n for (j = 0; j < nextCell.children.length; j++) {\n if (orientation) {\n diagram.nameTable[nextCell.children[parseInt(j.toString(), 10)].id].columnIndex += 1;\n }\n else {\n diagram.nameTable[nextCell.children[parseInt(j.toString(), 10)].id].rowIndex += 1;\n }\n }\n }\n arrangeChildInGrid(diagram, nextCell, gridCell, rect, parentWrapper, orientation, prevCell);\n}\n/**\n * arrangeChildInGrid method \\\n *\n * @returns {void} arrangeChildInGrid method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {GridCell} nextCell - provide the nextCell value.\n * @param {GridPanel} gridCell - provide the gridCell value.\n * @param {Rect} rect - provide the rect value.\n * @param {Container} parentWrapper - provide the parentWrapper value.\n * @param {boolean} orientation - provide the orientation value.\n * @param {GridCell} prevCell - provide the prevCell value.\n * @private\n */\nfunction arrangeChildInGrid(diagram, nextCell, gridCell, rect, parentWrapper, orientation, prevCell) {\n var child;\n var point;\n var childNode;\n var parent = diagram.nameTable[parentWrapper.id];\n var changeCell = (!nextCell) ? prevCell : nextCell;\n var swimLane = diagram.nameTable[parent.parentId];\n var padding = swimLane.shape.padding;\n if (changeCell.children && changeCell.children[0].children.length > 1) {\n for (var j = 1; j < changeCell.children[0].children.length; j++) {\n child = changeCell.children[0].children[parseInt(j.toString(), 10)];\n childNode = diagram.nameTable[child.id];\n point = (orientation) ? { x: child.bounds.x, y: child.bounds.center.y } :\n { x: child.bounds.center.x, y: child.bounds.top };\n if (rect.containsPoint(point)) {\n gridCell.children[0].children.push(child);\n changeCell.children[0].children.splice(j, 1);\n j--;\n diagram.deleteChild(childNode, undefined, true);\n if (!childNode.isLane) {\n childNode.parentId = parentWrapper.id;\n }\n if (!parent.children) {\n parent.children = [];\n }\n if (!nextCell) {\n if (orientation) {\n childNode.margin.left = childNode.wrapper.bounds.x - changeCell.children[0].bounds.right;\n }\n else {\n childNode.margin.top = childNode.wrapper.bounds.y - changeCell.children[0].bounds.bottom;\n }\n }\n parent.children.push(child.id);\n childNode.zIndex = parent.zIndex + 1;\n diagram.removeElements(childNode);\n }\n else if (nextCell) {\n if (orientation) {\n childNode.margin.left -= gridCell.desiredCellWidth;\n if (padding > childNode.margin.left) {\n childNode.margin.left = padding;\n }\n }\n else {\n childNode.margin.top -= gridCell.desiredCellHeight;\n if (padding > childNode.margin.top) {\n childNode.margin.top = padding;\n }\n }\n }\n }\n }\n}\n/**\n * swimLaneSelection method \\\n *\n * @returns {void} swimLaneSelection method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} node - provide the node value.\n * @param {string} corner - provide the corner value.\n * @private\n */\nfunction swimLaneSelection(diagram, node, corner) {\n if (node.shape.type === 'SwimLane' && (corner === 'ResizeSouth' || corner === 'ResizeEast')) {\n var shape = node.shape;\n var wrapper = node.wrapper.children[0];\n var child = void 0;\n var index = void 0;\n if (corner === 'ResizeSouth') {\n if (shape.orientation === 'Vertical') {\n child = wrapper.rows[wrapper.rows.length - 1].cells[0];\n }\n else {\n index = wrapper.rows.length - 1;\n child = wrapper.rows[parseInt(index.toString(), 10)].cells[wrapper.rows[parseInt(index.toString(), 10)].cells.length - 1];\n }\n }\n else {\n index = (shape.header && shape.hasHeader) ? 1 : 0;\n child = wrapper.rows[parseInt(index.toString(), 10)].cells[wrapper.rows[parseInt(index.toString(), 10)].cells.length - 1];\n }\n diagram.commandHandler.select(diagram.nameTable[child.children[0].id]);\n }\n}\n/**\n * pasteSwimLane method \\\n *\n * @returns {void} pasteSwimLane method .\\\n * @param {Diagram} swimLane - provide the diagram value.\n * @param {NodeModel} diagram - provide the diagram value.\n * @param {string} clipboardData - provide the clipboardData value.\n * @param {string} laneNode - provide the laneNode value.\n * @param {string} isLane - provide the isLane value.\n * @param {string} isUndo - provide the isUndo value.\n * @private\n */\nfunction pasteSwimLane(swimLane, diagram, clipboardData, laneNode, isLane, isUndo) {\n var i;\n var j;\n var lane;\n var phase;\n var node;\n var ranId = randomId();\n var cloneLane;\n var childX;\n var childY;\n var shape = swimLane.shape; //let lanes: LaneModel[];\n var phases = shape.phases;\n var nodeX = swimLane.offsetX - swimLane.wrapper.actualSize.width / 2;\n var nodeY = swimLane.offsetY - swimLane.wrapper.actualSize.height / 2;\n if (shape.orientation === 'Vertical') {\n nodeY += (shape.header && shape.hasHeader) ? shape.header.height : 0;\n }\n if (!isUndo) {\n if (!isLane) {\n swimLane.id += ranId;\n if (shape && shape.header && shape.hasHeader) {\n shape.header.id += ranId;\n }\n else {\n shape.header = undefined;\n }\n }\n for (i = 0; phases && i < phases.length; i++) {\n phase = phases[parseInt(i.toString(), 10)];\n phase.id += ranId;\n }\n }\n var lanes = (isLane) ? [clipboardData.childTable[laneNode.id]] : shape.lanes;\n for (i = 0; lanes && i < lanes.length; i++) {\n lane = lanes[parseInt(i.toString(), 10)];\n if (!isUndo) {\n lane.id += ranId;\n }\n for (j = 0; lane.children && j < lane.children.length; j++) {\n node = lane.children[parseInt(j.toString(), 10)];\n childX = node.wrapper.offsetX - node.width / 2;\n childY = node.wrapper.offsetY - node.height / 2;\n node.zIndex = Number.MIN_VALUE;\n node.inEdges = node.outEdges = [];\n if (isUndo || (clipboardData && (clipboardData.pasteIndex === 1 || clipboardData.pasteIndex === 0))) {\n if (shape.orientation === 'Vertical') {\n node.margin.top = childY - nodeY;\n }\n else {\n node.margin.left = childX - nodeX;\n }\n }\n if (!isUndo) {\n node.id += ranId;\n }\n }\n }\n if (!isUndo) {\n if (isLane) {\n var newShape = {\n lanes: lanes,\n phases: phases, phaseSize: shape.phaseSize,\n type: 'SwimLane', orientation: shape.orientation,\n header: { annotation: { content: 'Title' }, height: 50 }\n };\n cloneLane = { shape: newShape };\n if (shape.orientation === 'Horizontal') {\n cloneLane.width = swimLane.wrapper.actualSize.width;\n cloneLane.height = laneNode.wrapper.actualSize.height + shape.header.height + shape.phaseSize;\n cloneLane.offsetX = swimLane.wrapper.offsetX + (clipboardData.pasteIndex * 10);\n cloneLane.offsetY = laneNode.wrapper.offsetY + (clipboardData.pasteIndex * 10);\n }\n else {\n cloneLane.width = laneNode.wrapper.actualSize.width;\n cloneLane.height = swimLane.wrapper.actualSize.height;\n cloneLane.offsetX = laneNode.wrapper.offsetX + (clipboardData.pasteIndex * 10);\n cloneLane.offsetY = swimLane.wrapper.offsetY + (clipboardData.pasteIndex * 10);\n }\n swimLane = cloneLane;\n }\n if (clipboardData.pasteIndex !== 0) {\n swimLane.offsetX += 10;\n swimLane.offsetY += 10;\n }\n swimLane.zIndex = Number.MIN_VALUE;\n swimLane = diagram.add(swimLane);\n if (!isLane) {\n for (var _i = 0, _a = Object.keys(clipboardData.childTable); _i < _a.length; _i++) {\n var i_3 = _a[_i];\n var connector = clipboardData.childTable[\"\" + i_3];\n connector.id += ranId;\n connector.sourceID += ranId;\n connector.targetID += ranId;\n connector.zIndex = Number.MIN_VALUE;\n diagram.add(connector);\n }\n }\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n diagram.select([swimLane]);\n }\n return swimLane;\n}\n/**\n * gridSelection method \\\n *\n * @returns {void} gridSelection method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {SelectorModel} selectorModel - provide the selectorModel value.\n * @param {string} id - provide the id value.\n * @param {boolean} isSymbolDrag - provide the isSymbolDrag value.\n * @private\n */\nfunction gridSelection(diagram, selectorModel, id, isSymbolDrag) {\n var canvas;\n var node = selectorModel.nodes[0];\n if (isSymbolDrag || checkParentAsContainer(diagram, node, true)) {\n var targetnode = void 0;\n var bounds = void 0;\n var swimLaneId = void 0;\n var element = new DiagramElement();\n if (id) {\n swimLaneId = (diagram.nameTable[\"\" + id].parentId);\n targetnode = node = diagram.nameTable[\"\" + id];\n }\n var wrapper = !id ? node.wrapper : targetnode.wrapper;\n var parentNode = diagram.nameTable[swimLaneId || node.parentId];\n if (parentNode && parentNode.container.type === 'Grid') {\n canvas = new Canvas();\n canvas.children = [];\n if (isSymbolDrag || !(node.isHeader)) {\n if ((parentNode.container.orientation === 'Horizontal' && node.isPhase) ||\n (parentNode.container.orientation === 'Vertical' &&\n (node.rowIndex > 0 && node.columnIndex > 0 || node.isLane))) {\n bounds = findBounds(parentNode, (targetnode) ? targetnode.columnIndex : node.columnIndex, (parentNode.shape.header && parentNode.shape.hasHeader) ? true : false);\n canvas.offsetX = bounds.center.x;\n canvas.offsetY = bounds.center.y;\n element.width = bounds.width;\n element.height = bounds.height;\n }\n else {\n canvas.offsetX = parentNode.offsetX;\n canvas.offsetY = wrapper.offsetY;\n element.width = parentNode.wrapper.actualSize.width;\n element.height = wrapper.actualSize.height;\n }\n }\n canvas.children.push(element);\n canvas.measure(new Size());\n canvas.arrange(canvas.desiredSize);\n }\n }\n return canvas;\n}\n/**\n * removeLaneChildNode method \\\n *\n * @returns {void} removeLaneChildNode method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} swimLaneNode - provide the diagram value.\n * @param {NodeModel} currentObj - provide the currentObj value.\n * @param {NodeModel} isChildNode - provide the isChildNode value.\n * @param {number} laneIndex - provide the laneIndex value.\n * @private\n */\nfunction removeLaneChildNode(diagram, swimLaneNode, currentObj, isChildNode, laneIndex) {\n laneIndex = (laneIndex !== undefined) ? laneIndex : findLaneIndex(swimLaneNode, currentObj);\n var preventHistory = false;\n var lanenode = swimLaneNode.shape.lanes[parseInt(laneIndex.toString(), 10)];\n for (var j = lanenode.children.length - 1; j >= 0; j--) {\n if (isChildNode) {\n if (isChildNode.id === lanenode.children[parseInt(j.toString(), 10)].id) {\n lanenode.children.splice(j, 1);\n }\n }\n else {\n diagram.removeDependentConnector(lanenode.children[parseInt(j.toString(), 10)]);\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n diagram.diagramActions = diagram.diagramActions | DiagramAction.UndoRedo;\n preventHistory = true;\n }\n diagram.remove(lanenode.children[parseInt(j.toString(), 10)]);\n lanenode.children.splice(j, 1);\n if (preventHistory) {\n diagram.diagramActions = diagram.diagramActions & ~DiagramAction.UndoRedo;\n }\n }\n }\n}\n/**\n * getGridChildren method \\\n *\n * @returns {DiagramElement} getGridChildren method .\\\n * @param {Diagram} obj - provide the obj value.\n * @private\n */\nfunction getGridChildren(obj) {\n var children = obj.children[0];\n return children;\n}\n/**\n * removeSwimLane method \\\n *\n * @returns {void} removeSwimLane method .\\\n * @param {Diagram} diagram - provide the obj value.\n * @param {NodeModel} obj - provide the obj value.\n * @private\n */\nfunction removeSwimLane(diagram, obj) {\n var rows = obj.wrapper.children[0].rows;\n //let preventHistory: boolean = false;\n var node;\n var i;\n var j;\n var k;\n var child;\n var removeNode;\n for (i = 0; i < rows.length; i++) {\n for (j = 0; j < rows[parseInt(i.toString(), 10)].cells.length; j++) {\n child = getGridChildren(rows[parseInt(i.toString(), 10)].cells[parseInt(j.toString(), 10)]);\n if (child && child.children) {\n for (k = child.children.length - 1; k >= 0; k--) {\n if (child.children[parseInt(k.toString(), 10)].children) {\n removeNode = diagram.nameTable[child.children[parseInt(k.toString(), 10)].id];\n if (removeNode) {\n if (removeNode.isLane) {\n deleteNode(diagram, removeNode);\n }\n else {\n diagram.removeDependentConnector(removeNode);\n diagram.diagramActions |= DiagramAction.PreventHistory;\n if ((removeNode.constraints & NodeConstraints.Delete)) {\n diagram.remove(removeNode);\n }\n else {\n removeChildInContainer(diagram, removeNode, {}, false);\n }\n diagram.diagramActions &= ~DiagramAction.PreventHistory;\n }\n }\n }\n }\n }\n if (child) {\n node = diagram.nameTable[child.id];\n if (node) {\n deleteNode(diagram, node);\n }\n }\n }\n }\n}\n/**\n * deleteNode method \\\n *\n * @returns {void} deleteNode method .\\\n * @param {Diagram} diagram - provide the obj value.\n * @param {NodeModel} node - provide the obj value.\n * @private\n */\nfunction deleteNode(diagram, node) {\n if (node) {\n diagram.nodes.splice(diagram.nodes.indexOf(node), 1);\n diagram.removeFromAQuad(node);\n diagram.removeObjectsFromLayer(node);\n delete diagram.nameTable[node.id];\n diagram.removeElements(node);\n }\n}\n/**\n * removeLane method \\\n *\n * @returns {void} removeLane method .\\\n * @param {Diagram} diagram - provide the obj value.\n * @param {NodeModel} lane - provide the obj value.\n * @param {NodeModel} swimLane - provide the obj value.\n * @param {LaneModel} lanes - provide the obj value.\n * @private\n */\nfunction removeLane(diagram, lane, swimLane, lanes) {\n var args;\n if (swimLane.shape.type === 'SwimLane') {\n var shape = swimLane.shape;\n var laneIndex = void 0;\n if (shape.lanes.length === 1) {\n diagram.remove(swimLane);\n }\n else {\n var x = swimLane.wrapper.bounds.x;\n var y = swimLane.wrapper.bounds.y;\n var row = void 0;\n var i = void 0;\n var cell = void 0;\n var j = void 0;\n var child = void 0;\n var grid = swimLane.wrapper.children[0];\n laneIndex = (lanes) ? (shape.lanes.indexOf(lanes)) : findLaneIndex(swimLane, lane);\n args = {\n element: lane, cause: diagram.diagramActions, diagramAction: diagram.getDiagramAction(diagram.diagramActions), state: 'Changing', type: 'Removal', cancel: false, laneIndex: laneIndex\n };\n diagram.triggerEvent(DiagramEvent.collectionChange, args);\n if (!args.cancel) {\n var removableLane = shape.lanes[parseInt(laneIndex.toString(), 10)];\n //Bug 876330: After performing cut operations followed by an undo, lanes and nodes in the swimlane are not rendered properly.\n //Here we are removing the children from lane and re-adding it to the lane after getting it from diagram nodes collection.\n //Because the wrapper of nodes are not updated properly after undo operation.\n var removableLaneChild = removableLane.children;\n removableLane.children = [];\n for (var i_4 = 0; i_4 < removableLaneChild.length; i_4++) {\n var child_1 = diagram.getObject(removableLaneChild[parseInt(i_4.toString(), 10)].id);\n if (child_1) {\n removableLane.children.push(child_1);\n }\n }\n var undoObj = cloneObject(shape.lanes[parseInt(laneIndex.toString(), 10)]);\n removeLaneChildNode(diagram, swimLane, lane, undefined, laneIndex);\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'LaneCollectionChanged', changeType: 'Remove', undoObject: undoObj,\n redoObject: cloneObject(lane), category: 'Internal'\n };\n diagram.addHistoryEntry(entry);\n }\n shape.lanes.splice(laneIndex, 1);\n var index = (lane) ? (shape.orientation === 'Horizontal' ? lane.rowIndex : lane.columnIndex) :\n (findStartLaneIndex(swimLane) + laneIndex);\n if (shape.orientation === 'Horizontal') {\n row = grid.rows[parseInt(index.toString(), 10)];\n for (i = 0; i < row.cells.length; i++) {\n cell = row.cells[parseInt(i.toString(), 10)];\n if (cell && cell.children.length > 0) {\n for (j = 0; j < cell.children.length; j++) {\n child = cell.children[parseInt(j.toString(), 10)];\n removeChildren(diagram, child);\n }\n }\n }\n grid.removeRow(index);\n }\n else {\n swimLane.width = (swimLane.width !== undefined) ?\n swimLane.width - grid.rows[0].cells[parseInt(index.toString(), 10)].actualSize.width : swimLane.width;\n for (i = 0; i < grid.rows.length; i++) {\n cell = grid.rows[parseInt(i.toString(), 10)].cells[parseInt(index.toString(), 10)];\n if (cell && cell.children.length > 0) {\n for (j = 0; j < cell.children.length; j++) {\n child = cell.children[parseInt(j.toString(), 10)];\n removeChildren(diagram, child);\n }\n }\n }\n grid.removeColumn(index);\n }\n args = {\n element: lane, cause: diagram.diagramActions, diagramAction: diagram.getDiagramAction(diagram.diagramActions), state: 'Changed', type: 'Removal', cancel: false, laneIndex: laneIndex\n };\n diagram.triggerEvent(DiagramEvent.collectionChange, args);\n swimLane.width = swimLane.wrapper.width = grid.width;\n swimLane.height = swimLane.wrapper.height = grid.height;\n swimLaneMeasureAndArrange(swimLane);\n if (swimLane.shape.orientation === 'Vertical') {\n index = 0;\n }\n ChangeLaneIndex(diagram, swimLane, index);\n diagram.drag(swimLane, x - swimLane.wrapper.bounds.x, y - swimLane.wrapper.bounds.y);\n diagram.updateDiagramObject(swimLane);\n }\n }\n }\n}\n/**\n * removeChildren method \\\n *\n * @returns {void} removeChildren method .\\\n * @param {Diagram} diagram - provide the obj value.\n * @param {Canvas} canvas - provide the obj value.\n * @private\n */\nfunction removeChildren(diagram, canvas) {\n var i;\n var node;\n if (canvas instanceof Canvas) {\n if (canvas.children.length > 0) {\n for (i = 0; i < canvas.children.length; i++) {\n if (canvas.children[parseInt(i.toString(), 10)] instanceof Canvas) {\n removeChildren(diagram, canvas.children[parseInt(i.toString(), 10)]);\n }\n }\n }\n node = diagram.getObject(canvas.id);\n deleteNode(diagram, node);\n }\n}\n/**\n * removePhase method \\\n *\n * @returns {void} removePhase method .\\\n * @param {Diagram} diagram - provide the obj value.\n * @param {NodeModel} phase - provide the obj value.\n * @param {NodeModel} swimLane - provide the obj value.\n * @param {PhaseModel} swimLanePhases - provide the obj value.\n * @private\n */\nfunction removePhase(diagram, phase, swimLane, swimLanePhases) {\n diagram.protectPropertyChange(true);\n var x = swimLane.wrapper.bounds.x;\n var y = swimLane.wrapper.bounds.y;\n var isLastPhase = false;\n var previousPhase;\n var shape = swimLane.shape;\n var grid = swimLane.wrapper.children[0];\n var phaseIndex = swimLanePhases ? shape.phases.indexOf(swimLanePhases) : findPhaseIndex(phase, swimLane);\n var phaseLength = shape.phases.length;\n if (shape.phases.length > 1) {\n if (phaseIndex === phaseLength - 1) {\n isLastPhase = true;\n previousPhase = cloneObject(shape.phases[phaseIndex - 1]);\n }\n var undoObj = cloneObject(shape.phases[parseInt(phaseIndex.toString(), 10)]);\n shape.phases.splice(phaseIndex, 1);\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'PhaseCollectionChanged', changeType: 'Remove', undoObject: undoObj, previousPhase: previousPhase,\n redoObject: cloneObject(phase), category: 'Internal', isLastPhase: isLastPhase\n };\n diagram.addHistoryEntry(entry);\n }\n if (shape.orientation === 'Horizontal') {\n removeHorizontalPhase(diagram, grid, phase, phaseIndex);\n }\n else {\n removeVerticalPhase(diagram, grid, phase, phaseIndex, swimLane);\n }\n updateHeaderMaxWidth(diagram, swimLane);\n //878835- selecting swimlane phase after deleting first phase wihtout header throws error\n ChangeLaneIndex(diagram, swimLane, swimLane.isHeader ? 1 : 0);\n checkPhaseOffset(swimLane, diagram);\n diagram.protectPropertyChange(false);\n diagram.updateDiagramObject(swimLane);\n }\n}\n/**\n * removeHorizontalPhase method \\\n *\n * @returns {void} removeHorizontalPhase method .\\\n * @param {Diagram} diagram - provide the obj value.\n * @param {GridPanel} grid - provide the obj value.\n * @param {NodeModel} phase - provide the obj value.\n * @param {number} phaseIndex - provide the obj value.\n * @private\n */\nfunction removeHorizontalPhase(diagram, grid, phase, phaseIndex) {\n var row;\n var cell;\n var prevCell;\n var actualChild; //let prevChild: Canvas;\n var prevCanvas;\n var width;\n phaseIndex = (phaseIndex !== undefined) ? phaseIndex : phase.columnIndex;\n var i;\n var j;\n var k;\n var child;\n var node;\n var object;\n for (i = 0; i < grid.rows.length; i++) {\n row = grid.rows[parseInt(i.toString(), 10)];\n if (row.cells.length > 1) {\n cell = row.cells[parseInt(phaseIndex.toString(), 10)];\n prevCell = (row.cells.length - 1 === phaseIndex) ? row.cells[phaseIndex - 1] :\n row.cells[phaseIndex + 1];\n prevCanvas = prevCell.children[0];\n if (cell.children.length > 0) {\n actualChild = cell.children[0];\n node = diagram.nameTable[actualChild.id];\n if (prevCell.children.length === 0 && cell.children.length > 0) {\n prevCell.children = cell.children;\n prevCell.columnSpan = cell.columnSpan - 1;\n }\n else {\n for (j = 0; j < actualChild.children.length; j++) {\n child = actualChild.children[parseInt(j.toString(), 10)];\n if (child instanceof Canvas) {\n object = diagram.nameTable[child.id];\n if (!object.isLane) {\n object.parentId = prevCanvas.id;\n }\n if ((row.cells.length - 1 === phaseIndex)) {\n object.margin.left = object.wrapper.bounds.x - prevCanvas.bounds.x;\n child.margin.left = object.wrapper.bounds.x - prevCanvas.bounds.x;\n }\n prevCanvas.children.push(child);\n if (diagram.nameTable[prevCanvas.id]) {\n var parentNode = diagram.nameTable[prevCanvas.id];\n if (!parentNode.children) {\n parentNode.children = [];\n }\n parentNode.children.push(child.id);\n }\n actualChild.children.splice(j, 1);\n j--;\n if (node && node.children && node.children.indexOf(object.id) !== -1) {\n node.children.splice(node.children.indexOf(object.id), 1);\n }\n }\n if ((row.cells.length - 1 !== phaseIndex)) {\n for (k = 0; k < prevCanvas.children.length; k++) {\n var prevChild = prevCanvas.children[parseInt(k.toString(), 10)];\n if (prevChild instanceof Canvas) {\n var prevNode = diagram.nameTable[prevChild.id];\n prevNode.margin.left = prevNode.wrapper.bounds.x - actualChild.bounds.x;\n prevChild.margin.left = prevNode.wrapper.bounds.x - actualChild.bounds.x;\n }\n }\n }\n }\n if (node && node.isPhase) {\n var object_1 = diagram.nameTable[prevCanvas.id];\n if (object_1) {\n prevCanvas.maxWidth = object_1.wrapper.maxWidth = object_1.wrapper.maxWidth += node.wrapper.maxWidth;\n }\n }\n deleteNode(diagram, node);\n }\n }\n }\n }\n var prevWidth = grid.columnDefinitions()[parseInt(phaseIndex.toString(), 10)].width;\n grid.removeColumn(phaseIndex);\n if ((phaseIndex < grid.columnDefinitions().length)) {\n width = grid.columnDefinitions()[parseInt(phaseIndex.toString(), 10)].width;\n width += prevWidth;\n grid.updateColumnWidth(phaseIndex, width, true);\n }\n else {\n width = grid.columnDefinitions()[phaseIndex - 1].width;\n width += prevWidth;\n grid.updateColumnWidth(phaseIndex - 1, width, true);\n }\n}\n/**\n * removeVerticalPhase method \\\n *\n * @returns {void} removeVerticalPhase method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {GridPanel} grid - provide the grid value.\n * @param {NodeModel} phase - provide the phase value.\n * @param {number} phaseIndex - provide the phaseIndex value.\n * @param {number} swimLane - provide the swimLane value.\n * @private\n */\nfunction removeVerticalPhase(diagram, grid, phase, phaseIndex, swimLane) {\n var cell;\n var height;\n var i;\n var j;\n var k;\n var prevCell;\n var prevChild;\n var shape = swimLane.shape;\n var child;\n var object;\n var phaseRowIndex = (phaseIndex !== undefined) ? ((shape.header) ? phaseIndex + 1 : phaseIndex) : phase.rowIndex;\n var row = grid.rows[parseInt(phaseRowIndex.toString(), 10)];\n var top = swimLane.wrapper.bounds.y;\n var phaseCount = shape.phases.length;\n if (shape.header !== undefined && shape.hasHeader) {\n top += grid.rowDefinitions()[0].height;\n }\n var prevRow = (phaseIndex === phaseCount) ? grid.rows[phaseRowIndex - 1] : grid.rows[phaseRowIndex + 1];\n for (i = 0; i < row.cells.length; i++) {\n cell = row.cells[parseInt(i.toString(), 10)];\n prevCell = prevRow.cells[parseInt(i.toString(), 10)];\n prevChild = prevCell.children[0];\n if (cell.children.length > 0) {\n var children = cell.children[0];\n var node = diagram.nameTable[children.id];\n if (phaseIndex < phaseCount) {\n for (k = 0; k < prevChild.children.length; k++) {\n child = prevChild.children[parseInt(k.toString(), 10)];\n if (child instanceof Canvas) {\n object = diagram.nameTable[child.id];\n object.margin.top = object.wrapper.bounds.y - (phaseIndex === 0 ? top : children.bounds.y);\n child.margin.top = object.wrapper.bounds.y - (phaseIndex === 0 ? top : children.bounds.y);\n }\n }\n }\n for (j = 0; j < children.children.length; j++) {\n child = children.children[parseInt(j.toString(), 10)];\n if (child instanceof Canvas) {\n object = diagram.nameTable[child.id];\n object.parentId = prevChild.id;\n if (phaseIndex === phaseCount) {\n object.margin.top = object.wrapper.bounds.y - (phaseIndex === 0 ? top : prevChild.bounds.y);\n child.margin.top = object.wrapper.bounds.y - (phaseIndex === 0 ? top : prevChild.bounds.y);\n }\n prevChild.children.push(child);\n children.children.splice(j, 1);\n j--;\n if (node.children && node.children.indexOf(object.id) !== -1) {\n node.children.splice(node.children.indexOf(object.id), 1);\n }\n }\n }\n deleteNode(diagram, node);\n }\n }\n var prevHeight = grid.rowDefinitions()[parseInt(phaseRowIndex.toString(), 10)].height;\n grid.removeRow(phaseRowIndex);\n if ((phaseRowIndex < grid.rowDefinitions().length)) {\n height = grid.rowDefinitions()[parseInt(phaseRowIndex.toString(), 10)].height;\n height += prevHeight;\n grid.updateRowHeight(phaseRowIndex, height, true);\n }\n else {\n height = grid.rowDefinitions()[phaseRowIndex - 1].height;\n height += prevHeight;\n grid.updateRowHeight(phaseRowIndex - 1, height, true);\n }\n}\n/**\n * considerSwimLanePadding method \\\n *\n * @returns {void} considerSwimLanePadding method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} node - provide the grid value.\n * @param {number} padding - provide the phase value.\n * @private\n */\nfunction considerSwimLanePadding(diagram, node, padding) {\n var lane = diagram.nameTable[node.parentId];\n if (lane && lane.isLane) {\n var swimLane = diagram.nameTable[lane.parentId];\n var grid = swimLane.wrapper.children[0];\n //let x: number = swimLane.wrapper.bounds.x; let y: number = swimLane.wrapper.bounds.y;\n grid.updateColumnWidth(lane.columnIndex, grid.columnDefinitions()[lane.columnIndex].width, true, padding);\n grid.updateRowHeight(lane.rowIndex, grid.rowDefinitions()[lane.rowIndex].height, true, padding);\n var canvas = lane.wrapper;\n var laneHeader = void 0;\n if (node.margin.left < padding) {\n node.margin.left = padding;\n }\n if (node.margin.top < padding) {\n node.margin.top = padding;\n }\n for (var i = 0; i < canvas.children.length; i++) {\n var child = canvas.children[parseInt(i.toString(), 10)];\n if (child instanceof Canvas) {\n var childNode = diagram.nameTable[child.id];\n if (childNode.isLane) {\n laneHeader = childNode.wrapper;\n break;\n }\n }\n }\n if (laneHeader) {\n if (swimLane.shape.orientation === 'Horizontal') {\n if (node.margin.left < padding + laneHeader.actualSize.width) {\n node.margin.left = padding + laneHeader.actualSize.width;\n }\n }\n else {\n if (node.margin.top < padding + laneHeader.actualSize.height) {\n node.margin.top = padding + laneHeader.actualSize.height;\n }\n }\n }\n swimLane.wrapper.measure(new Size(swimLane.width, swimLane.height));\n swimLane.wrapper.arrange(swimLane.wrapper.desiredSize);\n node.offsetX = node.wrapper.offsetX;\n node.offsetY = node.wrapper.offsetY;\n diagram.nodePropertyChange(node, {}, { margin: { left: node.margin.left, top: node.margin.top } });\n //EJ2-68372- Text-Annotation in event node is not positioned properly while drag the swimlane\n // if (diagram.bpmnModule && node.shape.type === 'Bpmn' && (node.shape as BpmnShapeModel).annotations && (node.shape as BpmnShapeModel).annotations.length > 0) {\n // diagram.nodePropertyChange(node as Node, {} as Node, { margin: { left: node.margin.left, top: node.margin.top } } as Node);\n // }\n grid.measure(new Size(grid.width, grid.height));\n grid.arrange(grid.desiredSize);\n swimLane.width = swimLane.wrapper.width = swimLane.wrapper.children[0].actualSize.width;\n swimLane.height = swimLane.wrapper.height = swimLane.wrapper.children[0].actualSize.height;\n }\n}\n/**\n * checkLaneChildrenOffset method \\\n *\n * @returns {void} checkLaneChildrenOffset method .\\\n * @param {NodeModel} swimLane - provide the diagram value.\n * @private\n */\nfunction checkLaneChildrenOffset(swimLane) {\n if (swimLane.shape.type === 'SwimLane') {\n var lanes = swimLane.shape.lanes;\n var lane = void 0;\n var child = void 0;\n for (var i = 0; i < lanes.length; i++) {\n lane = lanes[parseInt(i.toString(), 10)];\n for (var j = 0; j < lane.children.length; j++) {\n child = lane.children[parseInt(j.toString(), 10)];\n child.offsetX = child.wrapper.offsetX;\n child.offsetY = child.wrapper.offsetY;\n }\n }\n }\n}\n/**\n * findLane method \\\n *\n * @returns {LaneModel} findLane method .\\\n * @param {Node} laneNode - provide the laneNode value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction findLane(laneNode, diagram) {\n var lane;\n if (laneNode.isLane) {\n var swimLane = diagram.getObject(laneNode.parentId);\n if (swimLane && swimLane.shape.type === 'SwimLane' && laneNode.isLane) {\n var laneIndex = findLaneIndex(swimLane, laneNode);\n lane = swimLane.shape.lanes[parseInt(laneIndex.toString(), 10)];\n }\n }\n return lane;\n}\n/**\n * canLaneInterchange method \\\n *\n * @returns {boolean} canLaneInterchange method .\\\n * @param {Node} laneNode - provide the laneNode value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction canLaneInterchange(laneNode, diagram) {\n if (laneNode.isLane) {\n var lane = findLane(laneNode, diagram);\n var eventHandler = 'eventHandler';\n var resize = diagram[\"\" + eventHandler].action;\n var canResize = resize.includes('Resize');\n if (canResize || lane.canMove) {\n return true;\n }\n }\n return false;\n}\n/**\n * updateSwimLaneChildPosition method \\\n *\n * @returns {void} updateSwimLaneChildPosition method .\\\n * @param {Lane[]} lanes - provide the laneNode value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction updateSwimLaneChildPosition(lanes, diagram) {\n var lane;\n var node;\n for (var i = 0; i < lanes.length; i++) {\n lane = lanes[parseInt(i.toString(), 10)];\n for (var j = 0; j < lane.children.length; j++) {\n node = diagram.nameTable[lane.children[parseInt(j.toString(), 10)].id];\n node.offsetX = node.wrapper.offsetX;\n node.offsetY = node.wrapper.offsetY;\n }\n }\n}\n\n/**\n * Interaction for Container\n */\n//#region canvas Container interaction\n/**\n * updateCanvasBounds method\\\n *\n * @returns { void } updateCanvasBounds method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel | ConnectorModel} obj - provide the isVertical value.\n * @param {PointModel} position - provide the position value.\n * @param {boolean} isBoundsUpdate - provide the isBoundsUpdate value.\n * @private\n */\nfunction updateCanvasBounds(diagram, obj, position, isBoundsUpdate) {\n var container;\n var connectorList = [];\n var groupAction = false;\n if (checkParentAsContainer(diagram, obj, true)) {\n diagram.protectPropertyChange(true);\n container = diagram.nameTable[obj.parentId];\n var wrapper = container.wrapper;\n if (container && container.container.type === 'Canvas') {\n if ((isBoundsUpdate || (wrapper.bounds.x <= position.x && wrapper.bounds.right >= position.x &&\n (wrapper.bounds.y <= position.y && wrapper.bounds.bottom >= position.y)))) {\n var parentWrapper = void 0;\n var y = wrapper.bounds.y;\n var x = wrapper.bounds.x;\n var parent_1 = diagram.nameTable[container.parentId] || container;\n var shape = parent_1.shape;\n if (shape.type === 'SwimLane') {\n groupAction = updateLaneBoundsAfterAddChild(container, parent_1, obj, diagram, true);\n }\n else {\n var parent_2 = diagram.nameTable[container.parentId] || container;\n var shape_1 = parent_2.shape;\n parentWrapper = parent_2.wrapper;\n if (wrapper.actualSize.width < wrapper.outerBounds.width &&\n (!(wrapper.bounds.x > wrapper.outerBounds.x))) {\n if (container.rowIndex !== undefined) {\n //const columnIndex:number = parent.columns.length - 1;\n parentWrapper.updateColumnWidth(container.columnIndex, wrapper.outerBounds.width, true);\n if (shape_1.orientation === 'Horizontal' && shape_1.phaseSize) {\n updatePhaseMaxWidth(parent_2, diagram, wrapper, container.columnIndex);\n }\n updateHeaderMaxWidth(diagram, parent_2);\n diagram.drag(parent_2, x - wrapper.bounds.x, y - wrapper.bounds.y);\n }\n else {\n diagram.scale(container, (1 + ((wrapper.outerBounds.width - wrapper.actualSize.width) / wrapper.actualSize.width)), 1, ((wrapper.outerBounds.x < wrapper.bounds.x) ? { x: 1, y: 0.5 } : { x: 0, y: 0.5 }));\n }\n }\n if (wrapper.actualSize.height < wrapper.outerBounds.height &&\n (!(wrapper.bounds.y > wrapper.outerBounds.y))) {\n if (container.rowIndex !== undefined) {\n parentWrapper.updateRowHeight(container.rowIndex, wrapper.outerBounds.height, true);\n diagram.drag(parent_2, x - wrapper.bounds.x, y - wrapper.bounds.y);\n }\n else {\n diagram.scale(container, 1, (1 + ((wrapper.outerBounds.height - wrapper.actualSize.height) / wrapper.actualSize.height)), ((wrapper.outerBounds.y < wrapper.bounds.y) ? { x: 0.5, y: 1 } : { x: 0.5, y: 0 }));\n }\n }\n }\n }\n diagram.select([obj]);\n updateConnectorsProperties(connectorList, diagram);\n }\n diagram.protectPropertyChange(false);\n }\n return groupAction;\n}\n/**\n * removeChildInContainer method\\\n *\n * @returns { void } removeChildInContainer method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel | ConnectorModel} obj - provide the isVertical value.\n * @param {PointModel} position - provide the position value.\n * @param {boolean} isBoundsUpdate - provide the isBoundsUpdate value.\n * @private\n */\nfunction removeChildInContainer(diagram, obj, position, isBoundsUpdate) {\n var container; //let connectorList: string[] = [];\n if (checkParentAsContainer(diagram, obj, true)) {\n var isProtectedOnChange = 'isProtectedOnChange';\n var propertyChangeValue = diagram[\"\" + isProtectedOnChange];\n diagram.protectPropertyChange(true);\n container = diagram.nameTable[obj.parentId];\n var wrapper = container.wrapper;\n if (container && container.container.type === 'Canvas') {\n if ((!isBoundsUpdate && (!(wrapper.bounds.x <= position.x && wrapper.bounds.right >= position.x &&\n (wrapper.bounds.y <= position.y && wrapper.bounds.bottom >= position.y))))) {\n if (!(obj.constraints & NodeConstraints.AllowMovingOutsideLane)) {\n var undoObj = cloneObject(obj);\n diagram.clearSelection();\n removeChildrenInLane(diagram, obj);\n obj.parentId = '';\n //EJ2-65676 - Exception throws on updating node annotation after drag and drop from swimlane to diagram canvas.\n obj.parentObj = diagram;\n obj.propName = 'nodes';\n var entry = {\n type: 'ChildCollectionChanged', category: 'Internal',\n undoObject: undoObj, redoObject: cloneObject(obj)\n };\n diagram.addHistoryEntry(entry);\n if (diagram.commandHandler.isContainer) {\n diagram.commandHandler.isContainer = false;\n diagram.endGroupAction();\n }\n moveSwinLaneChild(obj, diagram);\n }\n }\n }\n diagram.protectPropertyChange(propertyChangeValue);\n }\n}\n/**\n * findBounds method\\\n *\n * @returns { NodeModel | ConnectorModel } findBounds method .\\\n * @param {NodeModel} obj - provide the diagram value.\n * @param {number} columnIndex - provide the isVertical value.\n * @param {boolean} isHeader - provide the isVertical value.\n * @private\n */\nfunction findBounds(obj, columnIndex, isHeader) {\n var rect = new Rect();\n var rows = (obj.shape.type === 'SwimLane') ?\n obj.wrapper.children[0].rows : obj.wrapper.rows;\n for (var i = ((isHeader) ? 1 : 0); i < rows.length; i++) {\n rect.uniteRect(rows[parseInt(i.toString(), 10)].cells[parseInt(columnIndex.toString(), 10)].bounds);\n }\n return rect;\n}\n/**\n * createHelper method\\\n *\n * @returns { NodeModel | ConnectorModel } createHelper method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel | ConnectorModel} obj - provide the isVertical value.\n * @private\n */\nfunction createHelper(diagram, obj) {\n var newObj;\n var cloneObject = {};\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n cloneObject[\"\" + prop] = obj[\"\" + prop];\n }\n if (getObjectType(obj) === Node) {\n newObj = new Node(diagram, 'nodes', cloneObject, true);\n newObj.id = obj.id;\n diagram.initObject(newObj);\n }\n diagram.updateDiagramObject(newObj);\n return newObj;\n}\n/**\n * renderContainerHelper method\\\n *\n * @returns { NodeModel | ConnectorModel } renderContainerHelper method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel | ConnectorModel} obj - provide the isVertical value.\n * @private\n */\nfunction renderContainerHelper(diagram, obj) {\n diagram.enableServerDataBinding(false);\n var object;\n var container;\n var nodes;\n if (!isBlazor()) {\n if (diagram.selectedObject.helperObject) {\n nodes = diagram.selectedObject.helperObject;\n }\n else if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {\n if (obj instanceof Selector && obj.nodes.length + obj.connectors.length === 1) {\n object = (obj.nodes.length > 0) ? obj.nodes[0] : obj.connectors[0];\n container = diagram.selectedItems.wrapper.children[0];\n }\n else {\n object = obj;\n //Removed isBlazor code\n container = diagram.selectedItems.wrapper;\n }\n diagram.selectedObject.actualObject = object;\n if ((!diagram.currentSymbol) && (((object.isLane && canLaneInterchange(object, diagram) &&\n checkParentAsContainer(diagram, object))\n || ((!object.isLane) && checkParentAsContainer(diagram, object))) ||\n ((diagram.constraints & DiagramConstraints.LineRouting) && diagram.selectedItems.nodes.length > 0))) {\n var node = {\n id: 'helper',\n rotateAngle: container.rotateAngle,\n offsetX: container.offsetX, offsetY: container.offsetY,\n minWidth: container.minWidth, minHeight: container.minHeight,\n maxWidth: container.maxWidth, maxHeight: container.maxHeight,\n width: container.actualSize.width,\n height: container.actualSize.height,\n style: { strokeDashArray: '2 2', fill: 'transparent', strokeColor: '#7D7D7D', strokeWidth: 2 }\n };\n nodes = createHelper(diagram, node);\n diagram.selectedObject.helperObject = nodes;\n }\n }\n }\n diagram.enableServerDataBinding(true);\n return nodes;\n}\n/**\n * checkParentAsContainer method\\\n *\n * @returns { void } checkParentAsContainer method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel | ConnectorModel} obj - provide the isVertical value.\n * @param {boolean} isChild - provide the isChild value.\n * @private\n */\nfunction checkParentAsContainer(diagram, obj, isChild) {\n var parentNode = (isChild) ? diagram.nameTable[obj.parentId] :\n (diagram.nameTable[obj.parentId] || obj);\n if (parentNode && parentNode.container) {\n return true;\n }\n return false;\n}\n/**\n * checkChildNodeInContainer method\\\n *\n * @returns { void } checkChildNodeInContainer method .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {NodeModel} obj - provide the isVertical value.\n * @private\n */\nfunction checkChildNodeInContainer(diagram, obj) {\n var parentNode = diagram.nameTable[obj.parentId];\n obj.laneMargin = { left: obj.margin.left, right: obj.margin.right, top: obj.margin.top, bottom: obj.margin.bottom };\n if (parentNode.container.type === 'Canvas') {\n obj.margin.left = (obj.offsetX - parentNode.wrapper.bounds.x - (obj.width / 2));\n obj.margin.top = (obj.offsetY - parentNode.wrapper.bounds.y - (obj.height / 2));\n }\n diagram.nodePropertyChange(obj, {}, {\n width: obj.width, height: obj.height,\n offsetX: obj.offsetX, offsetY: obj.offsetY,\n margin: {\n left: obj.margin.left,\n right: obj.margin.right, top: obj.margin.top,\n bottom: obj.margin.bottom\n }, rotateAngle: obj.rotateAngle\n });\n if (!parentNode.isLane) {\n parentNode.wrapper.measure(new Size());\n parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);\n }\n}\nfunction removeChildrenInLane(diagram, node) {\n if (node.parentId && node.parentId !== '') {\n var prevParentNode = diagram.nameTable[node.parentId];\n if (prevParentNode.isLane && prevParentNode.parentId) {\n var swimlane = diagram.nameTable[prevParentNode.parentId];\n var canvasId = (prevParentNode.id.slice(swimlane.id.length));\n var prevParentId = canvasId.substring(0, canvasId.length - 1);\n var lanes = swimlane.shape.lanes;\n var lane = void 0;\n for (var i = 0; i < lanes.length; i++) {\n lane = lanes[parseInt(i.toString(), 10)];\n if (prevParentId === lane.id) {\n for (var j = 0; j < lane.children.length; j++) {\n if (lane.children[parseInt(j.toString(), 10)].id === node.id) {\n lane.children.splice(j, 1);\n j--;\n }\n }\n }\n }\n }\n diagram.deleteChild(node);\n }\n}\n/**\n * addChildToContainer method\\\n *\n * @returns { void } addChildToContainer method .\\\n * @param {DiagramElement} diagram - provide the element value.\n * @param {boolean} parent - provide the isVertical value.\n * @param {PointModel} node - provide the node value.\n * @param {Diagram} isUndo - provide the isUndo value.\n * @param {boolean} historyAction - provide the historyAction value.\n * @private\n */\nfunction addChildToContainer(diagram, parent, node, isUndo, historyAction) {\n if (!diagram.currentSymbol) {\n diagram.protectPropertyChange(true);\n var swimlane = diagram.nameTable[parent.parentId];\n node = diagram.getObject(node.id) || node;\n var child = (diagram.nodes.indexOf(node) !== -1) ? node.id : node;\n if (parent.container.type === 'Canvas' && !historyAction) {\n var left = (node.wrapper.offsetX - node.wrapper.actualSize.width / 2) -\n (parent.wrapper.offsetX - parent.wrapper.actualSize.width / 2);\n var top_1 = (node.wrapper.offsetY - node.wrapper.actualSize.height / 2) -\n (parent.wrapper.offsetY - parent.wrapper.actualSize.height / 2);\n node.margin.left = left;\n node.margin.top = top_1;\n }\n else if (swimlane) {\n var swimLaneBounds = swimlane.wrapper.bounds;\n var parentBounds = parent.wrapper.bounds;\n if (swimlane.shape.orientation === 'Horizontal') {\n node.margin.left -= parentBounds.x - swimLaneBounds.x;\n }\n else {\n var laneHeaderId = parent.parentId + swimlane.shape.lanes[0].id + '_0_header';\n node.margin.top -= parentBounds.y - swimLaneBounds.y - diagram.nameTable[\"\" + laneHeaderId].wrapper.bounds.height;\n }\n }\n var container = diagram.nameTable[parent.id];\n if (!container.children) {\n container.children = [];\n }\n if (container.children.indexOf(node.id) === -1) {\n removeChildrenInLane(diagram, node);\n if (diagram.getObject(node.id)) {\n diagram.removeElements(node);\n }\n var undoObj = cloneObject(node);\n diagram.addChild(container, child);\n node = diagram.getObject(node.id);\n if (container.isLane && container.parentId) {\n swimlane = diagram.nameTable[container.parentId];\n var lanes = swimlane.shape.lanes;\n var canvasId = (container.id.slice(swimlane.id.length));\n var currentParentId = canvasId.substring(0, canvasId.length - 1);\n for (var i = 0; i < lanes.length; i++) {\n if (container.isLane && currentParentId === lanes[parseInt(i.toString(), 10)].id) {\n // eslint-disable-next-line\n if (!(node.parentObj instanceof Diagram)) {\n // eslint-disable-next-line\n node.parentObj = lanes[parseInt(i.toString(), 10)];\n }\n // 878719: Resolve ESLint errors\n // eslint-disable-next-line no-prototype-builtins\n if (!diagram.nameTable.hasOwnProperty(node.id)) {\n lanes[parseInt(i.toString(), 10)].children.push(node);\n }\n }\n }\n }\n diagram.updateDiagramObject(node);\n moveSwinLaneChild(node, diagram);\n if (!container.parentId) {\n diagram.updateDiagramObject(container);\n }\n else if (!isUndo) {\n updateLaneBoundsAfterAddChild(container, swimlane, node, diagram);\n }\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'ChildCollectionChanged', category: 'Internal',\n undoObject: undoObj, redoObject: cloneObject(node), historyAction: historyAction ? 'AddNodeToLane' : undefined\n };\n diagram.addHistoryEntry(entry);\n }\n }\n diagram.protectPropertyChange(false);\n }\n}\nfunction moveSwinLaneChild(node, diagram) {\n var sourceNode = getDiagramElement(node.id + '_groupElement', diagram.element.id);\n var targetId = (node.parentId) ? node.parentId + '_groupElement' : diagram.element.id + '_diagramLayer';\n var targetNode = getDiagramElement(targetId, diagram.element.id);\n if (sourceNode && targetNode) {\n targetNode.appendChild(sourceNode);\n }\n}\nfunction updateLaneBoundsAfterAddChild(container, swimLane, node, diagram, isBoundsUpdate) {\n var undoObject = cloneObject(container);\n var isUpdateRow;\n var isGroupAction = false;\n var padding = swimLane.shape.padding;\n var containerBounds = container.wrapper.bounds;\n var containerOuterBounds = container.wrapper.outerBounds;\n var nodeBounds = node.wrapper.bounds;\n if (swimLane && swimLane.shape.type === 'SwimLane' &&\n (containerBounds.right < nodeBounds.right + padding ||\n containerBounds.bottom < nodeBounds.bottom + padding)) {\n var grid = swimLane.wrapper.children[0];\n var x = grid.bounds.x;\n var y = grid.bounds.y;\n var size = void 0;\n if (containerBounds.right < nodeBounds.right + padding &&\n containerOuterBounds.x <= containerBounds.x) {\n size = nodeBounds.right - containerBounds.right;\n isUpdateRow = false;\n grid.updateColumnWidth(container.columnIndex, containerBounds.width + size, true, padding);\n }\n if (containerBounds.bottom < nodeBounds.bottom + padding &&\n containerOuterBounds.y <= containerBounds.y) {\n size = nodeBounds.bottom - containerBounds.bottom;\n isUpdateRow = true;\n grid.updateRowHeight(container.rowIndex, containerBounds.height + size, true, padding);\n }\n if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {\n if (isBoundsUpdate) {\n diagram.startGroupAction();\n isGroupAction = true;\n }\n if (isUpdateRow !== undefined) {\n var entry = {\n category: 'Internal',\n type: (isUpdateRow) ? 'RowHeightChanged' : 'ColumnWidthChanged',\n undoObject: undoObject, redoObject: cloneObject(container)\n };\n diagram.addHistoryEntry(entry);\n }\n }\n swimLane.width = swimLane.wrapper.width = grid.width;\n swimLane.height = swimLane.wrapper.height = grid.height;\n swimLaneMeasureAndArrange(swimLane);\n if (swimLane.shape.orientation === 'Horizontal') {\n updatePhaseMaxWidth(swimLane, diagram, container.wrapper, container.columnIndex);\n }\n updateHeaderMaxWidth(diagram, swimLane);\n diagram.drag(swimLane, x - grid.bounds.x, y - grid.bounds.y);\n checkPhaseOffset(swimLane, diagram);\n checkLaneSize(swimLane);\n }\n considerSwimLanePadding(diagram, node, padding);\n diagram.updateDiagramElementQuad();\n return isGroupAction;\n}\n//#endregion\n//# reginon stack panel interaction\n/**\n * renderStackHighlighter method\\\n *\n * @returns { void } renderStackHighlighter method .\\\n * @param {DiagramElement} element - provide the element value.\n * @param {boolean} isVertical - provide the isVertical value.\n * @param {PointModel} position - provide the position value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {boolean} isUml - provide the isUml value.\n * @param {boolean} isSwimlane - provide the isSwimlane value.\n * @private\n */\nfunction renderStackHighlighter(element, isVertical, position, diagram, isUml, isSwimlane) {\n var adornerSvg = getAdornerLayerSvg(diagram.element.id);\n diagram.diagramRenderer.renderStackHighlighter(element, adornerSvg, diagram.scroller.transform, isVertical, position, isUml, isSwimlane);\n}\n/**\n * moveChildInStack method\\\n *\n * @returns { void } moveChildInStack method .\\\n * @param {Node} sourceNode - provide the sourceNode value.\n * @param {Node} target - provide the target value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {Actions} action - provide the action value.\n * @private\n */\nfunction moveChildInStack(sourceNode, target, diagram, action) {\n var obj = sourceNode;\n var parent = diagram.nameTable[obj.parentId];\n var sourceParent = diagram.nameTable[obj.parentId];\n if (target && sourceParent && sourceParent.container && sourceParent.container.type === 'Stack' &&\n target.container && target.container.type === 'Stack' && (sourceParent.id !== target.parentId)) {\n var value = sourceParent.wrapper.children.indexOf(obj.wrapper);\n if (value > -1) {\n diagram.nameTable[obj.id].parentId = target.id;\n sourceParent.wrapper.children.splice(value, 1);\n }\n }\n if (target && target.parentId && obj.parentId && action === 'Drag' &&\n sourceParent.container && sourceParent.container.type === 'Stack') {\n var targetIndex = parent.wrapper.children.indexOf(target.wrapper);\n var sourceIndex = parent.wrapper.children.indexOf(obj.wrapper);\n var undoElement = {\n targetIndex: targetIndex, target: target,\n sourceIndex: sourceIndex, source: sourceNode\n };\n parent.wrapper.children.splice(sourceIndex, 1);\n parent.wrapper.children.splice(targetIndex, 0, obj.wrapper);\n var redoElement = {\n targetIndex: sourceIndex, target: target,\n sourceIndex: targetIndex, source: sourceNode\n };\n var entry = {\n type: 'StackChildPositionChanged', redoObject: redoElement,\n undoObject: undoElement, category: 'Internal'\n };\n diagram.commandHandler.addHistoryEntry(entry);\n }\n}\n//#end region\n//# region Swimlane rendering\n//#end region\n\n/**\n * Finds the action to be taken for the object under mouse\n *\n */\n/* tslint:disable */\n/**\n * findToolToActivate method\\\n *\n * @returns {Actions} findToolToActivate method .\\\n * @param {Object} obj - provide the options value.\n * @param {DiagramElement} wrapper - provide the options value.\n * @param {PointModel} position - provide the options value.\n * @param {Diagram} diagram - provide the options value.\n * @param {ITouches[] | TouchList} touchStart - provide the options value.\n * @param {ITouches[] | TouchList} touchMove - provide the options value.\n * @param {NodeModel | PointPortModel | ShapeAnnotationModel | PathAnnotationModel} target - provide the options value.\n * @private\n */\nfunction findToolToActivate(obj, wrapper, position, diagram, touchStart, touchMove, target) {\n //let conn: Connector = diagram.selectedItems.connectors[0] as Connector;\n if (touchMove && touchMove.length > 1 && touchStart && touchStart.length > 1) {\n return 'PinchZoom';\n }\n if (diagram.currentSymbol) {\n return 'Drag';\n }\n var eventHandler = 'eventHandler';\n if (diagram[\"\" + eventHandler].action === 'PortDraw') {\n diagram.tool &= ~DiagramTools.DrawOnce;\n }\n //Drawing Tools\n if ((canDrawOnce(diagram) || canContinuousDraw(diagram)) && diagram.drawingObject) {\n return 'Draw';\n }\n if (hasSelection(diagram)) {\n var handle = diagram.selectedItems;\n if (handle.wrapper && canShowCorner(handle.constraints, 'UserHandle')) {\n for (var _i = 0, _a = handle.userHandles; _i < _a.length; _i++) {\n var obj_1 = _a[_i];\n if (obj_1.visible) {\n var paddedBounds = getUserHandlePosition(handle, obj_1, diagram.scroller.transform);\n if (contains(position, paddedBounds, obj_1.size / (2 * diagram.scroller.transform.scale))) {\n return obj_1.name;\n }\n }\n }\n }\n }\n if (hasSelection(diagram)) {\n var element = (diagram.selectedItems.annotation) ?\n diagram.selectedItems.wrapper.children[0] : diagram.selectedItems.wrapper;\n var selectorBnds = element.bounds;\n var handle = diagram.selectedItems;\n var paddedBounds = new Rect(selectorBnds.x, selectorBnds.y, selectorBnds.width, selectorBnds.height);\n if (hasSingleConnection(diagram) && !diagram.selectedItems.annotation) {\n var conn = diagram.selectedItems.connectors[0];\n var sourcePaddingValue = (diagram.selectedItems.handleSize / 2) / diagram.scrollSettings.currentZoom;\n var targetPaddingValue = (diagram.selectedItems.handleSize / 2) / diagram.scrollSettings.currentZoom;\n if (canShowCorner(handle.constraints, 'ResizeAll')) {\n if ((canShowCorner(handle.constraints, 'ConnectorSourceThumb'))\n && canDragSourceEnd(conn) && contains(position, conn.sourcePoint, sourcePaddingValue)) {\n return 'ConnectorSourceEnd';\n }\n if ((canShowCorner(handle.constraints, 'ConnectorTargetThumb'))\n && canDragTargetEnd(conn) && contains(position, conn.targetPoint, targetPaddingValue)) {\n return 'ConnectorTargetEnd';\n }\n var action = checkForConnectorSegment(conn, handle, position, diagram);\n if (action !== 'OrthoThumb') {\n if ((canShowCorner(handle.constraints, 'ConnectorSourceThumb'))\n && canDragSourceEnd(conn)) {\n if (action) {\n return action;\n }\n }\n if ((canShowCorner(handle.constraints, 'ConnectorTargetThumb'))\n && canDragTargetEnd(conn)) {\n if (action) {\n return action;\n }\n }\n }\n else {\n return action;\n }\n }\n }\n else {\n var ten = (diagram.selectedItems.handleSize / 2) / diagram.scroller.currentZoom;\n var tenRotate = 10 / diagram.scroller.currentZoom;\n var matrix = identityMatrix();\n rotateMatrix(matrix, element.rotateAngle + element.parentTransform, element.offsetX, element.offsetY);\n //check for resizing tool\n var x = element.offsetX - element.pivot.x * element.actualSize.width;\n var y = element.offsetY - element.pivot.y * element.actualSize.height;\n var rotateThumb = {\n x: x + ((element.pivot.x === 0.5 ? element.pivot.x * 2 : element.pivot.x) * element.actualSize.width / 2),\n y: y - 30 / diagram.scroller.currentZoom\n };\n rotateThumb = transformPointByMatrix(matrix, rotateThumb);\n var labelSelection = diagram.selectedItems.annotation ? true : false;\n var labelRotate = (labelSelection && (canRotate(diagram.selectedItems.annotation))) ? true : false;\n if (canShowCorner(handle.constraints, 'Rotate') && contains(position, rotateThumb, tenRotate) &&\n (diagram.selectedItems.thumbsConstraints & ThumbsConstraints.Rotate)) {\n if (labelSelection && labelRotate) {\n return 'LabelRotate';\n }\n else if (!labelSelection) {\n return 'Rotate';\n }\n }\n paddedBounds.Inflate(ten);\n if (paddedBounds.containsPoint(position)) {\n var action = checkResizeHandles(diagram, element, position, matrix, x, y);\n if (action) {\n return action;\n }\n }\n }\n }\n //Panning\n if (canZoomPan(diagram) && !obj) {\n return 'Pan';\n }\n //826364 - Drawing Tool is not activated on hovering the ports while both ZoomPan and single select constraints enabled\n if ((target instanceof PointPort || target instanceof PathPort)\n && (!canZoomPan(diagram) || (canSingleSelect(diagram) || canMultiSelect(diagram)))) {\n var action = findPortToolToActivate(diagram, target);\n if (action !== 'None') {\n return action;\n }\n }\n if ((target instanceof ShapeAnnotation || target instanceof PathAnnotation) && (!canZoomPan(diagram) && (canSelect(target)))) {\n if (isSelected(diagram, target, undefined, wrapper) && canMove(target)) {\n return 'LabelDrag';\n }\n return 'LabelSelect';\n }\n if (obj !== null) {\n if (obj instanceof Node || obj instanceof Connector) {\n if (wrapper && wrapper.id) {\n var id = wrapper.id.split(obj.id)[1];\n if (id && id.match('^_icon')) {\n return 'LayoutAnimation';\n }\n }\n if (wrapper && wrapper.id) {\n var userid = void 0;\n for (var i = 0; i < obj.fixedUserHandles.length; i++) {\n userid = obj.fixedUserHandles[parseInt(i.toString(), 10)].id;\n if (wrapper.id && (wrapper.id.indexOf(userid) > -1)) {\n return 'FixedUserHandle';\n }\n }\n }\n if (wrapper instanceof TextElement && wrapper.hyperlink.link) {\n return 'Hyperlink';\n }\n if (canMove(obj) && isSelected(diagram, obj, false) && diagram.selectedItems.annotation === undefined) {\n if ((obj instanceof Connector && !(contains(position, obj.sourcePoint, obj.hitPadding) ||\n contains(position, obj.targetPoint, obj.hitPadding))) ||\n !(obj instanceof Connector)) {\n return 'Drag';\n }\n }\n else if (obj && canZoomPan(diagram) && !defaultTool(diagram)) {\n return 'Pan';\n }\n else if (diagram.selectedItems.nodes.length && diagram.selectedItems.nodes[0].isLane &&\n diagram.selectedItems.wrapper && diagram.selectedItems.wrapper.bounds.containsPoint(position)) {\n return 'Drag';\n }\n else {\n return 'Select';\n }\n }\n else {\n return 'Select';\n }\n }\n return 'Select';\n}\n/* tslint:enable */\nfunction checkResizeHandles(diagram, element, position, matrix, x, y) {\n var action;\n if ((diagram.selectedItems.nodes.length === 1 && diagram.selectedItems.connectors.length === 0)\n && diagram.selectedItems.nodes[0].container) {\n action = checkResizeHandleForContainer(diagram, element, position, x, y);\n }\n if (!action && (!diagram.selectedItems.nodes[0] || (!diagram.selectedItems.nodes[0].isPhase &&\n !diagram.selectedItems.nodes[0].isLane && diagram.selectedItems.nodes[0].shape.type !== 'SwimLane'))) {\n action = checkForResizeHandles(diagram, element, position, matrix, x, y);\n }\n if (action) {\n return action;\n }\n return null;\n}\n/**\n * checkForConnectorSegment method\\\n *\n * @returns {Actions} checkForConnectorSegment method .\\\n * @param {Connector} conn - provide the options value.\n * @param {SelectorModel} handle - provide the options value.\n * @param {PointModel} position - provide the options value.\n * @param {Diagram} diagram - provide the options value.\n * @private\n */\nfunction checkForConnectorSegment(conn, handle, position, diagram) {\n //(EJ2-70650)-Unable to drag bezier control thumb, when we increase handleSize value\n //Added below code for drag the bezier control thumb while increasing handle size (Changing cursor from pointer to drag cursor)\n var targetPaddingValue = (handle.handleSize / 2) / diagram.scrollSettings.currentZoom;\n var sourcePaddingValue = (handle.handleSize / 2) / diagram.scrollSettings.currentZoom;\n if (conn.type === 'Bezier' && diagram.connectorEditingToolModule) {\n for (var i = 0; i < conn.segments.length; i++) {\n var segment = (conn.segments)[parseInt(i.toString(), 10)];\n // EJ2-67447 - Bezier segment control points are clickable after hiding it with controlPointsVisibility property.\n // The below condition is used to check the control points visibility of the connector.\n if (contains(position, !Point.isEmptyPoint(segment.point1) ? segment.point1 : segment.bezierPoint1, sourcePaddingValue) && ((i === 0 && canShowControlPoints(conn.bezierSettings.controlPointsVisibility, 'Source')) || (i !== 0 && canShowControlPoints(conn.bezierSettings.controlPointsVisibility, 'Intermediate')))) {\n return 'BezierSourceThumb';\n }\n if (contains(position, !Point.isEmptyPoint(segment.point2) ? segment.point2 : segment.bezierPoint2, targetPaddingValue) && ((i === conn.segments.length - 1 && canShowControlPoints(conn.bezierSettings.controlPointsVisibility, 'Target')) || (i !== conn.segments.length - 1 && canShowControlPoints(conn.bezierSettings.controlPointsVisibility, 'Intermediate')))) {\n return 'BezierTargetThumb';\n }\n }\n }\n if (diagram.connectorEditingToolModule && canDragSegmentThumb(conn)) {\n if (conn.type === 'Straight' || conn.type === 'Bezier') {\n for (var i = 0; i < conn.segments.length; i++) {\n //let segment: StraightSegmentModel | BezierSegmentModel;\n var segment = (conn.segments)[parseInt(i.toString(), 10)];\n if (contains(position, segment.point, 10)) {\n return 'SegmentEnd';\n }\n }\n }\n else {\n for (var i = 0; i < conn.segments.length; i++) {\n var segPoint = { x: 0, y: 0 };\n var segment = (conn.segments)[parseInt(i.toString(), 10)];\n if (segment.allowDrag) {\n for (var j = 0; j < segment.points.length - 1; j++) {\n var length_1 = Point.distancePoints(segment.points[parseInt(j.toString(), 10)], segment.points[j + 1]);\n if (length_1 >= 50) {\n segPoint.x = ((segment.points[parseInt(j.toString(), 10)].x + segment.points[j + 1].x) / 2);\n segPoint.y = ((segment.points[parseInt(j.toString(), 10)].y + segment.points[j + 1].y) / 2);\n //Bug 857928: Issue in connector selection while enabling segment thumb.\n //Instead of setting static value 30, we have set the hit padding of connector.\n var padding = conn.hitPadding ? conn.hitPadding : 10;\n if (contains(position, segPoint, padding)) {\n return 'OrthoThumb';\n }\n }\n }\n }\n }\n }\n }\n else if (canDragSegmentThumb(conn)) {\n console.warn('[WARNING] :: Module \"ConnectorEditing\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n return null;\n}\n/**\n * findPortToolToActivate method\\\n *\n * @returns {boolean} findPortToolToActivate method .\\\n * @param {Diagram} diagram - provide the options value.\n * @param {NodeModel | PointPortModel} target - provide the options value.\n * @param {ITouches[] | TouchList} touchStart - provide the options value.\n * @param {ITouches[] | TouchList} touchMove - provide the options value.\n * @private\n */\nfunction findPortToolToActivate(diagram, target, \n// eslint-disable-next-line\ntouchStart, touchMove) {\n if (canDrag(target) && (checkPortRestriction(target, PortVisibility.Hover)\n || (checkPortRestriction(target, PortVisibility.Visible)))) {\n if ((target.constraints & PortConstraints.Drag)) {\n return 'PortDrag';\n }\n }\n else if (canDraw(target) && (checkPortRestriction(target, PortVisibility.Hover)\n || (checkPortRestriction(target, PortVisibility.Visible)))) {\n if (target.constraints & PortConstraints.Draw) {\n diagram.drawingObject = {};\n var connector = { type: 'Orthogonal', sourcePortID: target.id };\n diagram.drawingObject = connector;\n diagram.tool |= DiagramTools.DrawOnce;\n diagram.currentDrawingObject = connector;\n return 'PortDraw';\n }\n }\n return 'None';\n}\n/**\n * Resize handle for container and also object.\n * @param {Diagram} diagram - provide the options value.\n * @param {DiagramElement} element - provide the options value.\n * @param {PointModel} position - provide the options value.\n * @param {number} x - provide the options value.\n * @param {number} y - provide the options value.\n * @returns {Actions} Resize handle for container and also object.\\\n *\n * @private\n */\nfunction checkResizeHandleForContainer(diagram, element, position, x, y) {\n var ten = 10 / diagram.scroller.currentZoom;\n var selectedItems = diagram.selectedItems;\n var width = element.actualSize.width;\n var height = element.actualSize.height;\n // 910600: Update cursor type in swimlane based on the values\n var left = new Rect(x, y, element.style.strokeWidth, height);\n var right = new Rect(x + width, y, element.style.strokeWidth, height);\n var top = new Rect(x, y, width, element.style.strokeWidth);\n var bottom = new Rect(x, y + height, width, element.style.strokeWidth);\n var container = checkParentAsContainer(diagram, diagram.selectedItems.nodes[0], true) ?\n diagram.nameTable[diagram.selectedItems.nodes[0].parentId] : diagram.selectedItems.nodes[0];\n // 924599: Resize Cursor Not Enabled for Phase with Width Less Than 40\n if (canResizeCorner(selectedItems.constraints, 'ResizeEast', selectedItems.thumbsConstraints, selectedItems) &&\n right.containsPoint(position, ten)) {\n return 'ResizeEast';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeSouth', selectedItems.thumbsConstraints, selectedItems) &&\n bottom.containsPoint(position, ten)) {\n return 'ResizeSouth';\n }\n if (container.container.type !== 'Grid') {\n if (canResizeCorner(selectedItems.constraints, 'ResizeWest', selectedItems.thumbsConstraints, selectedItems) &&\n left.containsPoint(position, ten)) {\n return 'ResizeWest';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeNorth', selectedItems.thumbsConstraints, selectedItems) &&\n top.containsPoint(position, ten)) {\n return 'ResizeNorth';\n }\n }\n return null;\n}\nfunction checkForResizeHandles(diagram, element, position, matrix, x, y) {\n var forty = 40 / diagram.scroller.currentZoom;\n var ten = (diagram.selectedItems.handleSize / 2) / diagram.scroller.currentZoom;\n var selectedItems = diagram.selectedItems;\n var labelSelection = (selectedItems.annotation) ? true : false;\n if (element.actualSize.width >= forty && element.actualSize.height >= forty) {\n if (canResizeCorner(selectedItems.constraints, 'ResizeSouthEast', selectedItems.thumbsConstraints, selectedItems) && contains(position, transformPointByMatrix(matrix, { x: x + element.actualSize.width, y: y + element.actualSize.height }), ten)) {\n return (labelSelection) ? 'LabelResizeSouthEast' : 'ResizeSouthEast';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeSouthWest', selectedItems.thumbsConstraints, selectedItems) &&\n contains(position, transformPointByMatrix(matrix, { x: x, y: y + element.actualSize.height }), ten)) {\n return (labelSelection) ? 'LabelResizeSouthWest' : 'ResizeSouthWest';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeNorthEast', selectedItems.thumbsConstraints, selectedItems) &&\n contains(position, transformPointByMatrix(matrix, { x: x + element.actualSize.width, y: y }), ten)) {\n return (labelSelection) ? 'LabelResizeNorthEast' : 'ResizeNorthEast';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeNorthWest', selectedItems.thumbsConstraints, selectedItems) &&\n contains(position, transformPointByMatrix(matrix, { x: x, y: y }), ten)) {\n return (labelSelection) ? 'LabelResizeNorthWest' : 'ResizeNorthWest';\n }\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeEast', selectedItems.thumbsConstraints, selectedItems) && contains(position, transformPointByMatrix(matrix, { x: x + element.actualSize.width, y: y + element.actualSize.height / 2 }), ten)) {\n return (labelSelection) ? 'LabelResizeEast' : 'ResizeEast';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeWest', selectedItems.thumbsConstraints, selectedItems) &&\n contains(position, transformPointByMatrix(matrix, { x: x, y: y + element.actualSize.height / 2 }), ten)) {\n return (labelSelection) ? 'LabelResizeWest' : 'ResizeWest';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeSouth', selectedItems.thumbsConstraints, selectedItems) && contains(position, transformPointByMatrix(matrix, { x: x + element.actualSize.width / 2, y: y + element.actualSize.height }), ten)) {\n return (labelSelection) ? 'LabelResizeSouth' : 'ResizeSouth';\n }\n if (canResizeCorner(selectedItems.constraints, 'ResizeNorth', selectedItems.thumbsConstraints, selectedItems) &&\n contains(position, transformPointByMatrix(matrix, { x: x + element.actualSize.width / 2, y: y }), ten)) {\n return (labelSelection) ? 'LabelResizeNorth' : 'ResizeNorth';\n }\n return null;\n}\n/**\n * contains method\\\n *\n * @returns {boolean} contains method .\\\n * @param {PointModel} mousePosition - provide the options value.\n * @param {PointModel} corner - provide the corner value.\n * @param {number} padding - provide the padding value.\n * @private\n */\nfunction contains(mousePosition, corner, padding) {\n if (mousePosition.x >= corner.x - padding && mousePosition.x <= corner.x + padding) {\n if (mousePosition.y >= corner.y - padding && mousePosition.y <= corner.y + padding) {\n return true;\n }\n }\n return false;\n}\n/**\n * hasSelection method\\\n *\n * @returns {boolean} hasSelection method .\\\n * @param {Diagram} diagram - provide the options value.\n * @private\n */\nfunction hasSelection(diagram) {\n if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {\n return true;\n }\n return false;\n}\n/**\n * hasSingleConnection method\\\n *\n * @returns {boolean} hasSingleConnection method .\\\n * @param {Diagram} diagram - provide the options value.\n * @private\n */\nfunction hasSingleConnection(diagram) {\n if (diagram.selectedItems.connectors.length === 1 && !diagram.selectedItems.nodes.length) {\n return true;\n }\n return false;\n}\n/**\n * isSelected method\\\n *\n * @returns {boolean} isSelected method .\\\n * @param {Diagram} diagram - provide the options value.\n * @param {Object} element - provide the options value.\n * @param {boolean} firstLevel - provide the options value.\n * @param {DiagramElement} wrapper - provide the options value.\n * @private\n */\nfunction isSelected(diagram, element, firstLevel, wrapper) {\n if (firstLevel === void 0) { firstLevel = true; }\n if (element instanceof Selector) {\n return true;\n }\n if (element instanceof Node) {\n while (element) {\n if (diagram.selectedItems.nodes.indexOf(element) !== -1 && diagram.selectedItems.annotation === undefined) {\n return true;\n }\n if (!firstLevel) {\n element = diagram.nameTable[element.parentId];\n }\n else {\n break;\n }\n }\n }\n else if (element instanceof Connector) {\n if (diagram.selectedItems.connectors.indexOf(element) !== -1 && diagram.selectedItems.annotation === undefined) {\n return true;\n }\n }\n else if (element instanceof ShapeAnnotation || element instanceof PathAnnotation) {\n if (diagram.selectedItems.annotation && diagram.selectedItems.wrapper.children[0].id === wrapper.id) {\n return true;\n }\n }\n return false;\n}\n/**\n * getCursor method\\\n *\n * @returns {boolean} getCursor method .\\\n * @param {Actions} cursor - provide the options value.\n * @param {number} angle - provide the options value.\n * @private\n */\nfunction getCursor(cursor, angle) {\n //to avoid angles less than 0 & angles greater than 360\n angle += 360;\n angle %= 360;\n if (cursor.indexOf('Resize') === -1) {\n return cursors[\"\" + cursor];\n }\n else {\n var dir = cursors[\"\" + cursor];\n if ((angle >= 0 && angle < 25) || (angle >= 160 && angle <= 205) || (angle >= 340 && angle <= 360)) {\n return dir;\n }\n else if ((angle >= 25 && angle <= 70) || (angle >= 205 && angle <= 250)) {\n if (dir === 'n-resize' || dir === 's-resize') {\n return 'ne-resize';\n }\n else if (dir === 'nw-resize' || dir === 'se-resize') {\n return 'n-resize';\n }\n else if (dir === 'e-resize' || dir === 'w-resize') {\n return 'nw-resize';\n }\n else {\n return 'e-resize';\n }\n }\n else if ((angle >= 70 && angle <= 115) || (angle >= 250 && angle <= 295)) {\n if (dir === 'n-resize' || dir === 's-resize') {\n return 'e-resize';\n }\n else if (dir === 'nw-resize' || dir === 'se-resize') {\n return 'ne-resize';\n }\n else if (dir === 'e-resize' || dir === 'w-resize') {\n return 'n-resize';\n }\n else {\n return 'nw-resize';\n }\n }\n else if ((angle >= 115 && angle <= 155) || (angle >= 295 && angle <= 340)) {\n if (dir === 'n-resize' || dir === 's-resize') {\n return 'nw-resize';\n }\n else if (dir === 'nw-resize' || dir === 'se-resize') {\n return 'e-resize';\n }\n else if (dir === 'e-resize' || dir === 'w-resize') {\n return 'ne-resize';\n }\n }\n else {\n return 'n-resize';\n }\n }\n return cursors[\"\" + cursor];\n}\nvar cursors = {\n 'None': 'default',\n 'Rotate': 'crosshair',\n 'Select': 'default',\n 'Drag': 'move',\n 'ResizeWest': 'w-resize',\n 'ResizeEast': 'e-resize',\n 'ResizeSouth': 's-resize',\n 'ResizeNorth': 'n-resize',\n 'Draw': 'crosshair',\n 'PortDraw': 'crosshair',\n 'ResizeNorthEast': 'ne-resize',\n 'ResizeNorthWest': 'nw-resize',\n 'ResizeSouthEast': 'se-resize',\n 'ResizeSouthWest': 'sw-resize',\n 'ConnectorSourceEnd': 'move',\n 'ConnectorTargetEnd': 'move',\n 'BezierSourceThumb': 'move',\n 'BezierTargetThumb': 'move',\n 'OrthoThumb': 'move',\n 'SegmentEnd': 'move',\n 'Pan': 'grab',\n 'Hyperlink': 'pointer',\n 'PortDrag': 'pointer',\n 'LabelSelect': 'pointer',\n 'LabelDrag': 'move',\n 'LabelRotate': 'crosshair',\n 'LabelResizeWest': 'w-resize',\n 'LabelResizeEast': 'e-resize',\n 'LabelResizeSouth': 's-resize',\n 'LabelResizeNorth': 'n-resize',\n 'LabelResizeNorthEast': 'ne-resize',\n 'LabelResizeNorthWest': 'nw-resize',\n 'LabelResizeSouthEast': 'se-resize',\n 'LabelResizeSouthWest': 'sw-resize'\n};\n\nvar __extends$g = (undefined && undefined.__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 __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (undefined && undefined.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\n/**\n * Defines the interactive tools\n */\nvar ToolBase = /** @__PURE__ @class */ (function () {\n /**\n * Initializes the tool\n *\n * @param {CommandHandler} command Command that is corresponding to the current action\n * @param protectChange\n */\n function ToolBase(command, protectChange) {\n if (protectChange === void 0) { protectChange = false; }\n /**\n * Command that is corresponding to the current action\n */\n this.commandHandler = null;\n // protected deepDiffer: DeepDiffMapper = new DeepDiffMapper();\n /**\n * Sets/Gets whether the interaction is being done\n */\n this.inAction = false;\n /**\n * Sets/Gets the protect change\n */\n this.isProtectChange = false;\n /**\n * Sets/Gets the current element that is under mouse\n */\n this.currentElement = null;\n /** @private */\n this.blocked = false;\n this.isTooltipVisible = false;\n /** @private */\n this.childTable = {};\n /**\n * Sets/Gets the previous object when mouse down\n */\n this.undoElement = { nodes: [], connectors: [] };\n this.checkProperty = true;\n this.undoParentElement = { nodes: [], connectors: [] };\n this.commandHandler = command;\n this.isProtectChange = protectChange;\n }\n ToolBase.prototype.startAction = function (currentElement) {\n this.currentElement = currentElement;\n this.inAction = true;\n };\n /**\n * @param args\n * @private\n */\n ToolBase.prototype.mouseDown = function (args) {\n this.currentElement = args.source;\n this.startPosition = this.currentPosition = this.prevPosition = args.position;\n this.isTooltipVisible = true;\n this.startAction(args.source);\n this.checkProperty = true;\n // Bug fix - EJ2-44495 -Node does not gets selected on slight movement of mouse when drag constraints disabled for node\n this.mouseDownElement = args.source;\n };\n ToolBase.prototype.checkPropertyValue = function () {\n if (this.checkProperty) {\n this.commandHandler.startTransaction(this.isProtectChange);\n }\n };\n /**\n * @param args\n * @private\n */\n ToolBase.prototype.mouseMove = function (args) {\n this.currentPosition = args.position;\n if (this.inAction) {\n this.commandHandler.startTransaction(this.isProtectChange);\n this.checkProperty = false;\n }\n //this.currentElement = currentElement;\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n ToolBase.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n this.currentPosition = args.position;\n // this.currentElement = currentElement;\n this.isTooltipVisible = false;\n this.commandHandler.endTransaction(this.isProtectChange);\n this.endAction();\n // Bug fix - EJ2-44495 -Node does not gets selected on slight movement of mouse when drag constraints disabled for node\n this.mouseDownElement = null;\n };\n ToolBase.prototype.endAction = function () {\n if (!this.isTooltipVisible) {\n this.commandHandler.closeTooltip();\n }\n this.commandHandler = null;\n this.currentElement = null;\n this.currentPosition = null;\n this.inAction = false;\n this.blocked = false;\n };\n /**\n * @param args\n * @private\n */\n ToolBase.prototype.mouseWheel = function (args) {\n this.currentPosition = args.position;\n };\n /**\n * @param args\n * @private\n */\n ToolBase.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n ToolBase.prototype.updateSize = function (shape, startPoint, endPoint, corner, initialBounds, angle) {\n shape = this.commandHandler.renderContainerHelper(shape) || shape;\n var horizontalsnap = { snapped: false, offset: 0, left: false, right: false };\n var verticalsnap = { snapped: false, offset: 0, top: false, bottom: false };\n var difx = this.currentPosition.x - this.startPosition.x;\n var dify = this.currentPosition.y - this.startPosition.y;\n var snapEnabled = (!(shape instanceof TextElement)) && this.commandHandler.snappingModule\n && this.commandHandler.snappingModule.canSnap();\n var snapLine = snapEnabled ? this.commandHandler.snappingModule.getLayer() : null;\n var rotateAngle = (shape instanceof TextElement) ? angle : shape.rotateAngle;\n var matrix;\n matrix = identityMatrix();\n rotateMatrix(matrix, -rotateAngle, 0, 0);\n var x = shape.offsetX;\n var y = shape.offsetY;\n var w = shape.width;\n var h = shape.height;\n x = x - w * shape.pivot.x;\n y = y - h * shape.pivot.y;\n var deltaWidth = 0;\n var deltaHeight = 0;\n var diff;\n var width = (shape instanceof TextElement) ? shape.actualSize.width : shape.width;\n var height = (shape instanceof TextElement) ? shape.actualSize.height : shape.height;\n switch (corner) {\n case 'ResizeWest':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n deltaHeight = 1;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :\n difx;\n dify = 0;\n deltaWidth = (initialBounds.width - difx) / width;\n break;\n case 'ResizeEast':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :\n difx;\n dify = 0;\n deltaWidth = (initialBounds.width + difx) / width;\n deltaHeight = 1;\n break;\n case 'ResizeNorth':\n deltaWidth = 1;\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :\n dify;\n deltaHeight = (initialBounds.height - dify) / height;\n break;\n case 'ResizeSouth':\n deltaWidth = 1;\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :\n dify;\n deltaHeight = (initialBounds.height + dify) / height;\n break;\n case 'ResizeNorthEast':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :\n difx;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :\n dify;\n deltaWidth = (initialBounds.width + difx) / width;\n deltaHeight = (initialBounds.height - dify) / height;\n break;\n case 'ResizeNorthWest':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = !snapEnabled ? dify : this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);\n difx = !snapEnabled ? difx : this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);\n deltaWidth = (initialBounds.width - difx) / width;\n deltaHeight = (initialBounds.height - dify) / height;\n break;\n case 'ResizeSouthEast':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = !snapEnabled ? dify : this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);\n difx = !snapEnabled ? difx : this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);\n deltaHeight = (initialBounds.height + dify) / height;\n deltaWidth = (initialBounds.width + difx) / width;\n break;\n case 'ResizeSouthWest':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) : dify;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) : difx;\n deltaWidth = (initialBounds.width - difx) / width;\n deltaHeight = (initialBounds.height + dify) / height;\n break;\n }\n return { width: deltaWidth, height: deltaHeight };\n };\n ToolBase.prototype.getPivot = function (corner) {\n switch (corner) {\n case 'ResizeWest':\n return { x: 1, y: 0.5 };\n case 'ResizeEast':\n return { x: 0, y: 0.5 };\n case 'ResizeNorth':\n return { x: 0.5, y: 1 };\n case 'ResizeSouth':\n return { x: 0.5, y: 0 };\n case 'ResizeNorthEast':\n return { x: 0, y: 1 };\n case 'ResizeNorthWest':\n return { x: 1, y: 1 };\n case 'ResizeSouthEast':\n return { x: 0, y: 0 };\n case 'ResizeSouthWest':\n return { x: 1, y: 0 };\n }\n return { x: 0.5, y: 0.5 };\n };\n //method to get node shape name\n ToolBase.prototype.getShapeType = function () {\n var shape;\n // eslint-disable-next-line no-constant-condition\n if (this.commandHandler.diagram.drawingObject.shape.type === 'Image' ||\n this.commandHandler.diagram.drawingObject.shape.type === 'HTML' ||\n this.commandHandler.diagram.drawingObject.shape.type === 'Native' ||\n this.commandHandler.diagram.drawingObject.shape.type === 'Path') {\n shape = this.commandHandler.diagram.drawingObject.shape.type;\n }\n else {\n shape = this.commandHandler.diagram.drawingObject.shape.shape;\n }\n return shape;\n };\n //EJ2-52203-Method to trigger ElementDraw Event when we draw node or connector with the drawing Tool\n ToolBase.prototype.triggerElementDrawEvent = function (source, state, objectType, elementType, isMouseDownAction) {\n var arg = {\n source: source, state: state, objectType: objectType, cancel: false, elementType: elementType\n };\n this.commandHandler.triggerEvent(DiagramEvent.elementDraw, arg);\n if (isMouseDownAction && arg.cancel) {\n {\n this.commandHandler.diagram.resetTool();\n this.inAction = false;\n }\n }\n };\n return ToolBase;\n}());\n/**\n * Helps to select the objects\n */\nvar SelectTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(SelectTool, _super);\n function SelectTool(commandHandler, protectChange, action) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.action = action;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n SelectTool.prototype.mouseDown = function (args) {\n this.inAction = true;\n _super.prototype.mouseDown.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n SelectTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n //draw selected region\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n // Bug fix - EJ2-44495 -Node does not gets selected on slight movement of mouse when drag constraints disabled for node\n if (this.mouseDownElement && !canMove(this.mouseDownElement)) {\n this.commandHandler.clearObjectSelection(this.mouseDownElement);\n }\n else {\n this.commandHandler.clearSelectedItems();\n this.commandHandler.drawSelectionRectangle(rect.x, rect.y, rect.width, rect.height);\n }\n }\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n SelectTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n //rubber band selection\n if (!this.commandHandler.isUserHandle(this.currentPosition)) {\n if (Point.equals(this.currentPosition, this.prevPosition) === false && this.inAction) {\n var region = Rect.toBounds([this.prevPosition, this.currentPosition]);\n this.commandHandler.doRubberBandSelection(region);\n }\n else {\n //single selection\n var arrayNodes = this.commandHandler.getSelectedObject();\n if (!this.commandHandler.hasSelection() || !args.info || !args.info.ctrlKey) {\n this.commandHandler.clearSelection(args.source === null ? true : false);\n if (this.action === 'LabelSelect') {\n this.commandHandler.labelSelect(args.source, args.sourceWrapper);\n }\n else if (args.source) {\n this.commandHandler.selectObjects([args.source], false, arrayNodes);\n }\n }\n else {\n //handling multiple selection\n if (args && args.source) {\n if (!this.commandHandler.isSelected(args.source)) {\n this.commandHandler.selectObjects([args.source], true);\n }\n else {\n if (args.clickCount === 1) {\n this.commandHandler.unSelect(args.source);\n // this.commandHandler.updateBlazorSelector();\n }\n }\n }\n }\n }\n }\n this.inAction = false;\n _super.prototype.mouseUp.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n SelectTool.prototype.mouseLeave = function (args) {\n if (this.inAction) {\n this.mouseUp(args);\n }\n };\n return SelectTool;\n}(ToolBase));\nvar FixedUserHandleTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(FixedUserHandleTool, _super);\n function FixedUserHandleTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * @param args\n * @private\n */\n FixedUserHandleTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n this.inAction = false;\n var val = args.source;\n var fixedUserHandle;\n var iconId = args.sourceWrapper.id;\n for (var i = 0; i < val.fixedUserHandles.length; i++) {\n if (iconId.indexOf(val.fixedUserHandles[parseInt(i.toString(), 10)].id) > -1) {\n fixedUserHandle = val.fixedUserHandles[parseInt(i.toString(), 10)];\n }\n }\n var arg = {\n fixedUserHandle: fixedUserHandle,\n element: args.source\n };\n var trigger = DiagramEvent.fixedUserHandleClick;\n this.commandHandler.triggerEvent(trigger, arg);\n _super.prototype.mouseUp.call(this, args);\n };\n return FixedUserHandleTool;\n}(ToolBase));\n/**\n * Helps to edit the selected connectors\n */\nvar ConnectTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(ConnectTool, _super);\n function ConnectTool(commandHandler, endPoint) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.isConnected = false;\n _this.endPoint = endPoint;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n ConnectTool.prototype.mouseDown = function (args) {\n return __awaiter(this, void 0, void 0, function () {\n var oldValue, connectors, i, segment, segmentpoint1, segmentpoint2;\n return __generator(this, function (_a) {\n this.inAction = true;\n this.undoElement = undefined;\n if (!(this instanceof ConnectorDrawingTool)) {\n this.undoElement = cloneObject(args.source);\n }\n _super.prototype.mouseDown.call(this, args);\n if (args.source && args.source.connectors) {\n oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };\n connectors = args.source.connectors[0];\n this.oldConnector = cloneObject(connectors);\n }\n // Sets the selected segment\n if (this.endPoint === 'BezierSourceThumb' || this.endPoint === 'BezierTargetThumb') {\n for (i = 0; i < connectors.segments.length; i++) {\n segment = connectors.segments[parseInt(i.toString(), 10)];\n segmentpoint1 = !Point.isEmptyPoint(segment.point1) ? segment.point1 : segment.bezierPoint1;\n segmentpoint2 = !Point.isEmptyPoint(segment.point2) ? segment.point2 : segment.bezierPoint2;\n //(EJ2-70650)-Unable to drag bezier control thumb, when we increase handleSize value\n //Added below code for drag the bezier control thumb while increasing handle size(For hitPadding)\n if (this.currentElement.handleSize !== connectors.hitPadding) {\n connectors.hitPadding = this.currentElement.handleSize;\n }\n if (contains(this.currentPosition, segmentpoint1, connectors.hitPadding) ||\n contains(this.currentPosition, segmentpoint2, connectors.hitPadding)) {\n this.selectedSegment = segment;\n }\n }\n }\n this.currentPosition = args.position;\n return [2 /*return*/];\n });\n });\n };\n /**\n * @param args\n * @private\n */\n ConnectTool.prototype.mouseUp = function (args) {\n return __awaiter(this, void 0, void 0, function () {\n var connector, nodeEndId, portEndId, arg, oldValues, connector, targetPortName, targetNodeNode, target, arg, trigger, obj, entry, obj, entry, connector;\n return __generator(this, function (_a) {\n if (!isBlazor() && this.isConnected && args.source.connectors) {\n connector = args.source.connectors[0];\n nodeEndId = this.endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n portEndId = this.endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n arg = {\n connector: cloneBlazorObject(connector),\n oldValue: { nodeId: this.oldConnector[\"\" + nodeEndId], portId: this.oldConnector[\"\" + portEndId] },\n newValue: { nodeId: connector[\"\" + nodeEndId], portId: connector[\"\" + portEndId] }, cancel: false,\n state: 'Changed', connectorEnd: this.endPoint\n };\n //875655- ConnectionChange Event not triggered in Changed state for port change in same node\n if (connector[\"\" + nodeEndId] !== this.oldConnector[\"\" + nodeEndId] || connector[\"\" + portEndId] !== this.oldConnector[\"\" + portEndId]) {\n this.commandHandler.triggerEvent(DiagramEvent.connectionChange, arg);\n this.isConnected = false;\n }\n }\n this.checkPropertyValue();\n this.commandHandler.updateSelector();\n this.commandHandler.removeSnap();\n if ((!(this instanceof ConnectorDrawingTool)) && ((this.endPoint === 'ConnectorSourceEnd' &&\n args.source.connectors.length &&\n ((!Point.equals(args.source.connectors[0].sourcePoint, this.undoElement.connectors[0].sourcePoint) ||\n (args.source.connectors[0].sourceID !== this.undoElement.connectors[0].sourceID)))) ||\n (this.endPoint === 'ConnectorTargetEnd' &&\n ((!Point.equals(args.source.connectors[0].targetPoint, this.undoElement.connectors[0].targetPoint))\n || (args.source.connectors[0].targetID !== this.undoElement.connectors[0].targetID))))) {\n oldValues = void 0;\n connector = void 0;\n if (args.source && args.source.connectors) {\n oldValues = { x: this.prevPosition.x, y: this.prevPosition.y };\n connector = args.source.connectors[0];\n }\n targetPortName = void 0;\n targetNodeNode = void 0;\n if (args.target) {\n target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n (target instanceof PointPort) ? targetPortName = target.id : targetNodeNode = target.id;\n }\n arg = {\n connector: connector, state: 'Completed', targetNode: targetNodeNode,\n oldValue: oldValues, newValue: oldValues, cancel: false, targetPort: targetPortName\n };\n trigger = this.endPoint === 'ConnectorSourceEnd' ? DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;\n this.commandHandler.triggerEvent(trigger, arg);\n this.commandHandler.removeTerminalSegment(connector, true);\n if (this.undoElement && args.source) {\n obj = void 0;\n obj = cloneObject(args.source);\n entry = {\n type: 'ConnectionChanged', redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement),\n category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n }\n }\n else if (!(this instanceof ConnectorDrawingTool) &&\n (this.endPoint === 'BezierTargetThumb' || this.endPoint === 'BezierSourceThumb')) {\n if (this.undoElement && args.source) {\n obj = cloneObject(args.source);\n entry = {\n type: 'SegmentChanged', redoObject: obj, undoObject: this.undoElement, category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n }\n }\n // this.commandHandler.updateBlazorSelector();\n this.canCancel = undefined;\n this.tempArgs = undefined;\n //(EJ2-66201) - Exception occurs when mouse-hover on ports in node\n if (args.source && args.source.connectors) {\n connector = args.source.connectors[0];\n if (connector.isBezierEditing) {\n connector.isBezierEditing = false;\n }\n }\n _super.prototype.mouseUp.call(this, args);\n return [2 /*return*/];\n });\n });\n };\n /* tslint:disable */\n /**\n * @param args\n * @private\n */\n ConnectTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var tempArgs;\n if ((!(this instanceof ConnectorDrawingTool)) && ((this.endPoint === 'ConnectorSourceEnd' &&\n Point.equals(args.source.connectors[0].sourcePoint, this.undoElement.connectors[0].sourcePoint)) ||\n (this.endPoint === 'ConnectorTargetEnd' &&\n Point.equals(args.source.connectors[0].targetPoint, this.undoElement.connectors[0].targetPoint)))) {\n var oldValue = void 0;\n var connectors = void 0;\n if (args.source && args.source.connectors) {\n oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };\n connectors = args.source.connectors[0];\n }\n var targetPort = void 0;\n var targetNode = void 0;\n if (args.target) {\n targetNode = args.target.id;\n var target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n (target instanceof PointPort || target instanceof BpmnSubEvent) ? targetPort = target.id : targetNode = target.id;\n }\n var arg = {\n connector: connectors, state: 'Start', targetNode: targetNode,\n oldValue: oldValue, newValue: oldValue, cancel: false, targetPort: targetPort\n };\n var trigger = this.endPoint === 'ConnectorSourceEnd' ?\n DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;\n this.commandHandler.triggerEvent(trigger, arg);\n }\n this.currentPosition = args.position;\n if (this.currentPosition && this.prevPosition) {\n var diffX = this.currentPosition.x - this.prevPosition.x;\n var diffY = this.currentPosition.y - this.prevPosition.y;\n var newValue = void 0;\n var oldValue = void 0;\n var inPort = void 0;\n var outPort = void 0;\n this.currentPosition = this.commandHandler.snapConnectorEnd(this.currentPosition);\n var connector = void 0;\n if (args.source && args.source.connectors) {\n newValue = { x: this.currentPosition.x, y: this.currentPosition.y };\n oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };\n connector = args.source.connectors[0];\n }\n var targetPortId = void 0;\n var targetNodeId = void 0;\n if (args.target) {\n var target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n (target instanceof PointPort) ? targetPortId = target.id : targetNodeId = target.id;\n }\n var arg = {\n connector: connector, state: 'Progress', targetNode: targetNodeId,\n oldValue: oldValue, newValue: newValue, cancel: false, targetPort: targetPortId\n };\n if (!(this instanceof ConnectorDrawingTool)) {\n var trigger = this.endPoint === 'ConnectorSourceEnd' ?\n DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;\n this.commandHandler.triggerEvent(trigger, arg);\n }\n if (args.target) {\n inPort = getInOutConnectPorts(args.target, true);\n outPort = getInOutConnectPorts(args.target, false);\n }\n if (!arg.cancel && this.inAction && this.endPoint !== undefined && diffX !== 0 || diffY !== 0) {\n // EJ2-65331 - The condition checks whether the cancel argument is true or false\n if (!arg.cancel) {\n this.blocked = !this.commandHandler.dragConnectorEnds(this.endPoint, args.source, this.currentPosition, this.selectedSegment, args.target, targetPortId);\n this.commandHandler.updateSelector();\n }\n if (args.target && ((this.endPoint === 'ConnectorSourceEnd' && (canOutConnect(args.target) || canPortOutConnect(outPort)))\n || (this.endPoint === 'ConnectorTargetEnd' && (canInConnect(args.target) || canPortInConnect(inPort))))) {\n if (this.commandHandler.canDisconnect(this.endPoint, args, targetPortId, targetNodeId)) {\n tempArgs = this.commandHandler.disConnect(args.source, this.endPoint, this.canCancel);\n this.isConnected = true;\n }\n var target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);\n if (target instanceof Node) {\n if ((canInConnect(target) && this.endPoint === 'ConnectorTargetEnd')\n || (canOutConnect(target) && this.endPoint === 'ConnectorSourceEnd')) {\n tempArgs = this.commandHandler.connect(this.endPoint, args, this.canCancel);\n this.isConnected = true;\n }\n }\n else {\n var isConnect = this.checkConnect(target);\n if (isConnect) {\n this.isConnected = true;\n tempArgs = this.commandHandler.connect(this.endPoint, args, this.canCancel);\n }\n }\n }\n else if (this.endPoint.indexOf('Bezier') === -1) {\n this.isConnected = true;\n tempArgs = this.commandHandler.disConnect(args.source, this.endPoint, this.canCancel);\n this.commandHandler.updateSelector();\n }\n }\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content_1 = this.getTooltipContent(args.position);\n var contentTemp = function () {\n return content_1;\n };\n this.commandHandler.showTooltip(args.source, args.position, initializeCSPTemplate(contentTemp), 'ConnectTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n if (tempArgs) {\n this.tempArgs = tempArgs;\n }\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n ConnectTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n ConnectTool.prototype.getTooltipContent = function (position) {\n return 'X:' + Math.round(position.x) + ' ' + 'Y:' + Math.round(position.y);\n };\n ConnectTool.prototype.checkConnect = function (target) {\n if (canPortInConnect(target) && this.endPoint === 'ConnectorTargetEnd') {\n return true;\n }\n else if (canPortOutConnect(target) && this.endPoint === 'ConnectorSourceEnd') {\n return true;\n }\n else if (!(target.constraints & PortConstraints.None) && !canPortInConnect(target) && !canPortOutConnect(target)\n && (target.constraints === undefined || (target.constraints & (PortConstraints.Default & ~(PortConstraints.InConnect | PortConstraints.OutConnect))) > 0)) {\n return true;\n }\n return false;\n };\n /** @private */\n ConnectTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n this.prevPosition = null;\n this.endPoint = null;\n };\n return ConnectTool;\n}(ToolBase));\n/**\n * Drags the selected objects\n */\nvar MoveTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(MoveTool, _super);\n function MoveTool(commandHandler, objType) {\n var _this = _super.call(this, commandHandler, true) || this;\n /** @private */\n _this.currentTarget = null;\n _this.isStartAction = false;\n _this.canCancel = false;\n _this.canTrigger = false;\n _this.objectType = objType;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n MoveTool.prototype.mouseDown = function (args) {\n if (args.source instanceof Node || args.source instanceof Connector) {\n var arrayNodes = this.commandHandler.getSelectedObject();\n this.commandHandler.selectObjects([args.source], args.info && args.info.ctrlKey, arrayNodes);\n var selectedObject = { nodes: [], connectors: [] };\n if (args.source instanceof Node) {\n selectedObject.nodes.push(cloneObject(args.source));\n }\n else {\n selectedObject.connectors.push(cloneObject(args.source));\n }\n this.undoElement = cloneObject(selectedObject);\n }\n else {\n this.undoElement = cloneObject(args.source);\n }\n this.undoParentElement = this.commandHandler.getSubProcess(args.source);\n if (this.objectType === 'Port') {\n this.portId = args.sourceWrapper.id;\n }\n this.commandHandler.insertBlazorConnector(args.source);\n _super.prototype.mouseDown.call(this, args);\n this.initialOffset = { x: 0, y: 0 };\n };\n /* tslint:disable */\n /**\n * @param args\n * @param isPreventHistory\n * @param args\n * @param isPreventHistory\n * @private\n */\n MoveTool.prototype.mouseUp = function (args, isPreventHistory) {\n return __awaiter(this, void 0, void 0, function () {\n var oldValues, newValues, obj, historyAdded, object, redoObject, wrapper, arg, canAddHistory, entry, entry_1, snappedPoint, canSplit, i, i, arg, nodes, isEndGroup, temp, i, i, entry;\n return __generator(this, function (_a) {\n this.checkPropertyValue();\n historyAdded = false;\n redoObject = { nodes: [], connectors: [] };\n if (this.objectType !== 'Port') {\n if (args.source instanceof Node || args.source instanceof Connector) {\n if (args.source instanceof Node) {\n redoObject.nodes.push(cloneObject(args.source));\n }\n else {\n redoObject.connectors.push(cloneObject(args.source));\n }\n obj = cloneObject(redoObject);\n wrapper = args.source.wrapper;\n obj.offsetX = wrapper.offsetX;\n obj.offsetY = wrapper.offsetY;\n }\n else {\n obj = cloneObject(args.source);\n }\n object = this.commandHandler.renderContainerHelper(args.source) || args.source || this.commandHandler.renderContainerHelper(args.source);\n if ((object.id === 'helper') || (object.id !== 'helper')) {\n //EJ2-71257 - Position change event completed state is not fired on selecting the node first and then dragging the node while changing node width at progress state.\n // If object is instanceof selector then checked the length of selected objects is 1 or not.\n if ((((object instanceof Selector && ((Math.round(object.width) === Math.round(this.undoElement.width) && Math.round(object.height) === Math.round(this.undoElement.height)) || (object.selectedObjects && object.selectedObjects.length === 1))) || !(object instanceof Selector)) && (object.offsetX !== this.undoElement.offsetX || object.offsetY !== this.undoElement.offsetY ||\n object.sourcePoint !== this.undoElement.sourcePoint\n // eslint-disable-next-line max-len\n || object.targetPoint !== this.undoElement.targetPoint)) || this.isSelectionHasConnector(object)) {\n if (args.source) {\n newValues = { offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY };\n oldValues = { offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY };\n }\n arg = {\n source: args.source, state: 'Completed', oldValue: this.intialValue, newValue: newValues,\n target: this.currentTarget, targetPosition: this.currentPosition, allowDrop: true, cancel: false\n };\n arg = {\n source: cloneBlazorObject(args.source), state: 'Completed',\n oldValue: cloneBlazorObject(this.intialValue), newValue: cloneBlazorObject(newValues),\n target: cloneBlazorObject(this.currentTarget), targetPosition: cloneBlazorObject(this.currentPosition),\n allowDrop: arg.allowDrop, cancel: arg.cancel\n };\n canAddHistory = true;\n //EJ2-69852): Position Change event trigger for clicking second time in swimlane header issue\n if (object.id === 'helper') {\n if (this.canTrigger) {\n this.commandHandler.triggerEvent(DiagramEvent.positionChange, arg);\n this.connectorEndPointChangeEvent(arg);\n canAddHistory = true;\n }\n else {\n canAddHistory = false;\n }\n }\n else {\n this.commandHandler.triggerEvent(DiagramEvent.positionChange, arg);\n this.connectorEndPointChangeEvent(arg);\n }\n if (!isPreventHistory && canAddHistory) {\n this.commandHandler.startGroupAction();\n historyAdded = true;\n entry = {\n type: 'PositionChanged',\n redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement), category: 'Internal'\n };\n if (obj.nodes[0] && obj.nodes[0].processId) {\n entry_1 = {\n type: 'SizeChanged', category: 'Internal',\n undoObject: this.undoParentElement, redoObject: this.commandHandler.getSubProcess(args.source)\n };\n this.commandHandler.addHistoryEntry(entry_1);\n }\n this.commandHandler.addHistoryEntry(entry);\n }\n }\n }\n snappedPoint = this.commandHandler.snapPoint(this.prevPosition, this.currentPosition, 0, 0);\n this.commandHandler.removeSnap();\n this.commandHandler.removeHighlighter();\n if (args.source && this.currentTarget && canAllowDrop(this.currentTarget) &&\n this.commandHandler.isDroppable(args.source, this.currentTarget)) {\n canSplit = true;\n this.commandHandler.drop(this.currentElement, this.currentTarget, this.currentPosition);\n if (this.currentTarget && this.currentTarget instanceof Connector) {\n if (this.commandHandler.diagram.enableConnectorSplit === true) {\n //EJ2-894577- Restricting the connector splitting if any one edge is already connected to the node\n if (this.currentElement && this.currentElement instanceof Node) {\n if (this.currentElement.children !== undefined) {\n for (i = 0; i < this.currentElement.children.length; i++) {\n if (this.currentElement.children[parseInt(i.toString(), 10)] === this.currentTarget.sourceID ||\n this.currentElement.children[parseInt(i.toString(), 10)] === this.currentTarget.targetID) {\n canSplit = false;\n }\n }\n }\n else {\n if (this.currentElement.id === this.currentTarget.sourceID || this.currentElement.id === this.currentTarget.targetID) {\n canSplit = false;\n }\n }\n if (canSplit) {\n this.commandHandler.connectorSplit(this.currentElement, this.currentTarget);\n }\n }\n else if (this.currentElement instanceof Selector && !(this.commandHandler.PreventConnectorSplit)) {\n if (this.currentElement.nodes[0].children) {\n for (i = 0; i < this.currentElement.nodes[0].children.length; i++) {\n if (this.currentElement.nodes[0].children[parseInt(i.toString(), 10)] === this.currentTarget.sourceID ||\n this.currentElement.nodes[0].children[parseInt(i.toString(), 10)] === this.currentTarget.targetID) {\n canSplit = false;\n }\n }\n }\n else {\n if ((this.currentElement.nodes[0]).id === this.currentTarget.sourceID ||\n (this.currentElement.nodes[0]).id === this.currentTarget.targetID) {\n canSplit = false;\n }\n }\n if (canSplit) {\n this.commandHandler.connectorSplit(this.currentElement.nodes[0], this.currentTarget);\n this.commandHandler.PreventConnectorSplit = false;\n }\n }\n }\n }\n arg = {\n element: args.source, target: this.currentTarget, position: this.currentPosition, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.drop, arg);\n if (!arg.cancel && args.source && this.commandHandler.isParentAsContainer(this.currentTarget) && !this.commandHandler.isTargetSubProcess(this.currentTarget)) {\n nodes = (args.source instanceof Selector) ? args.source.nodes : [args.source];\n isEndGroup = false;\n temp = void 0;\n for (i = 0; i < nodes.length; i++) {\n if (nodes[0].parentId === nodes[parseInt(i.toString(), 10)].parentId) {\n temp = true;\n }\n else {\n temp = false;\n break;\n }\n }\n // 902192: Diagram node resized wrongly while dragging and drop on multiple selected nodes in another lane Issue Fix\n if (this.commandHandler.diagram.selectedItems.nodes.length !== nodes.length) {\n nodes = this.commandHandler.diagram.selectedItems.nodes;\n }\n for (i = 0; i < nodes.length; i++) {\n if (!nodes[parseInt(i.toString(), 10)].container && temp) {\n isEndGroup = true;\n this.commandHandler.updateLaneChildrenZindex(nodes[parseInt(i.toString(), 10)], this.currentTarget);\n this.commandHandler.dropChildToContainer(this.currentTarget, nodes[parseInt(i.toString(), 10)]);\n this.commandHandler.renderContainerHelper(nodes[parseInt(i.toString(), 10)]);\n }\n }\n if (historyAdded && this.commandHandler.isContainer && isEndGroup) {\n this.commandHandler.endGroupAction();\n }\n }\n }\n if (args.source && this.currentTarget) {\n this.commandHandler.dropAnnotation(args.source, this.currentTarget);\n }\n this.commandHandler.updateSelector();\n if (historyAdded && !this.commandHandler.isContainer) {\n this.commandHandler.endGroupAction();\n }\n }\n else {\n redoObject.nodes.push(cloneObject(args.source));\n args.portId = this.portId;\n obj = cloneObject(redoObject);\n entry = {\n type: 'PortPositionChanged', objectId: this.portId,\n redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement), category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n }\n // this.commandHandler.updateBlazorSelector();\n _super.prototype.mouseUp.call(this, args);\n return [2 /*return*/];\n });\n });\n };\n //EJ2-59309-While drag the connected node the connector endPointChange event does not get trigger\n MoveTool.prototype.connectorEndPointChangeEvent = function (arg, snappedPoint) {\n var selectedElement = arg.source;\n if (selectedElement instanceof Selector && selectedElement.nodes.length > 0) {\n for (var i = 0; i < selectedElement.nodes.length; i++) {\n var node = selectedElement.nodes[parseInt(i.toString(), 10)];\n if (node && node.inEdges.length > 0) {\n for (var j = 0; j < node.inEdges.length; j++) {\n var connector = this.commandHandler.diagram.getObject(node.inEdges[parseInt(j.toString(), 10)]);\n this.triggerEndPointEvent(connector, arg, snappedPoint, 'targetPointChange');\n }\n }\n if (node && node.outEdges.length > 0) {\n for (var j = 0; j < node.outEdges.length; j++) {\n var connector = this.commandHandler.diagram.getObject(node.outEdges[parseInt(j.toString(), 10)]);\n this.triggerEndPointEvent(connector, arg, snappedPoint, 'sourcePointChange');\n }\n }\n }\n }\n };\n MoveTool.prototype.triggerEndPointEvent = function (connector, arg, snappedPoint, eventName) {\n var args = {\n connector: connector, state: arg.state, targetNode: connector.targetID, targetPort: connector.targetPortID,\n sourceNode: connector.sourceID, sourcePort: connector.sourcePortID, oldValue: { x: connector.targetPoint.x, y: connector.targetPoint.y },\n newValue: { x: connector.targetPoint.x + (snappedPoint ? snappedPoint.x : 0), y: connector.targetPoint.y + (snappedPoint ? snappedPoint.y : 0) }, cancel: arg.cancel\n };\n this.commandHandler.triggerEvent((eventName === 'targetPointChange') ? DiagramEvent.targetPointChange : DiagramEvent.sourcePointChange, args);\n };\n MoveTool.prototype.isSelectionHasConnector = function (args) {\n if (args.nodes && args.connectors && args.nodes.length > 0 && args.connectors.length > 0 &&\n (args.width !== this.undoElement.width || args.height !== this.undoElement.height)) {\n return true;\n }\n return false;\n };\n // private getBlazorPositionChangeEventArgs(args: IDraggingEventArgs | IBlazorDraggingEventArgs, target: IElement): any {\n // args = {\n // source: cloneBlazorObject(args.source), state: args.state, oldValue: args.oldValue, newValue: args.newValue,\n // target: getObjectType(target) === Connector ? { connector: cloneBlazorObject(target) }\n // : { node: cloneBlazorObject(target) },\n // targetPosition: this.currentPosition, allowDrop: true, cancel: false\n // };\n // return args as IBlazorDraggingEventArgs;\n // }\n /* tslint:disable */\n /**\n * @param args\n * @private\n */\n MoveTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var isSame = false;\n var object;\n object = this.commandHandler.renderContainerHelper(args.source) ||\n args.source;\n if (object instanceof Node || object instanceof Connector) {\n if (object instanceof Node) {\n if (object.offsetX === this.undoElement.nodes[0].offsetX &&\n object.offsetY === this.undoElement.nodes[0].offsetY) {\n isSame = true;\n }\n }\n else {\n if (Point.equals(object.sourcePoint, this.undoElement.connectors[0].sourcePoint) &&\n Point.equals(object.targetPoint, this.undoElement.connectors[0].targetPoint)) {\n isSame = true;\n }\n }\n }\n else {\n if (object.wrapper.offsetX === this.undoElement.wrapper.offsetX &&\n object.wrapper.offsetY === this.undoElement.wrapper.offsetY) {\n isSame = true;\n }\n }\n var oldValues;\n if (object) {\n oldValues = { offsetX: object.wrapper.offsetX, offsetY: object.wrapper.offsetY };\n }\n var arg = {\n source: object, state: 'Start', oldValue: oldValues, newValue: oldValues,\n target: args.target, targetPosition: args.position, allowDrop: true, cancel: false\n };\n arg = {\n source: cloneBlazorObject(object), state: 'Start', oldValue: cloneBlazorObject(oldValues),\n newValue: cloneBlazorObject(oldValues),\n target: args.target, targetPosition: args.position, allowDrop: arg.allowDrop, cancel: arg.cancel\n };\n //(EJ2-277624)-In the positionChange event, during the completed state, old and new values remain identical.\n if (!this.isStartAction) {\n this.intialValue = { offsetX: object.wrapper.offsetX, offsetY: object.wrapper.offsetY };\n }\n if (isSame && !isBlazor()) {\n this.commandHandler.triggerEvent(DiagramEvent.positionChange, arg);\n this.connectorEndPointChangeEvent(arg);\n this.isStartAction = true;\n }\n this.currentPosition = args.position;\n if (this.objectType !== 'Port') {\n var x = this.currentPosition.x - this.prevPosition.x;\n var y = this.currentPosition.y - this.prevPosition.y;\n var diffX = this.initialOffset.x + (this.currentPosition.x - this.prevPosition.x);\n var diffY = this.initialOffset.y + (this.currentPosition.y - this.prevPosition.y);\n this.commandHandler.dragOverElement(args, this.currentPosition);\n this.commandHandler.disConnect(args.source);\n this.commandHandler.removeSnap();\n var oldValues_1;\n var newValues = void 0;\n var snappedPoint = this.commandHandler.snapPoint(this.prevPosition, this.currentPosition, diffX, diffY);\n this.initialOffset.x = diffX - snappedPoint.x;\n this.initialOffset.y = diffY - snappedPoint.y;\n if (object) {\n oldValues_1 = { offsetX: object.wrapper.offsetX, offsetY: object.wrapper.offsetY };\n newValues = {\n offsetX: object.wrapper.offsetX + snappedPoint.x,\n offsetY: object.wrapper.offsetY + snappedPoint.y\n };\n }\n if (this.currentTarget && args.target !== this.currentTarget) {\n this.commandHandler.removeChildFromBPmn(args.source, args.target, this.currentTarget);\n }\n this.currentTarget = args.target;\n var arg_1 = {\n source: object, state: 'Progress', oldValue: oldValues_1, newValue: newValues,\n target: args.target, targetPosition: args.position, allowDrop: true, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.positionChange, arg_1);\n this.canTrigger = true;\n this.connectorEndPointChangeEvent(arg_1, snappedPoint);\n if (!arg_1.cancel && !this.canCancel) {\n this.blocked = !this.commandHandler.dragSelectedObjects(snappedPoint.x, snappedPoint.y);\n var blocked = !(this.commandHandler.mouseOver(this.currentElement, this.currentTarget, this.currentPosition));\n this.blocked = this.blocked || blocked;\n }\n this.commandHandler.removeStackHighlighter();\n this.commandHandler.renderStackHighlighter(args);\n if (this.currentTarget && (args.source !== this.currentTarget) &&\n this.commandHandler.isDroppable(args.source, this.currentTarget) && args.source.id !== 'helper') {\n var object_1 = (args.source instanceof Selector) ? args.source.nodes[0] : args.source;\n if ((!this.commandHandler.isParentAsContainer(object_1, true))\n && (object_1.shape.type !== 'SwimLane' && !object_1.shape.isPhase)) {\n if (this.currentTarget.isLane) {\n this.commandHandler.renderStackHighlighter(args, this.currentTarget);\n }\n else {\n this.commandHandler.drawHighlighter(this.currentTarget);\n }\n }\n }\n else {\n this.commandHandler.removeHighlighter();\n }\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content_2 = this.getTooltipContent(args.source);\n var contentTemp = function () {\n return content_2;\n };\n this.commandHandler.showTooltip(args.source, args.position, initializeCSPTemplate(contentTemp), 'MoveTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n }\n else {\n var matrix = identityMatrix();\n var node = args.source;\n rotateMatrix(matrix, -node.rotateAngle || -node.wrapper.rotateAngle, node.offsetX || node.wrapper.offsetX, node.offsetY || node.wrapper.offsetY);\n var prevPosition = transformPointByMatrix(matrix, { x: this.prevPosition.x, y: this.prevPosition.y });\n var position = transformPointByMatrix(matrix, { x: args.position.x, y: args.position.y });\n this.commandHandler.portDrag(args.source, args.sourceWrapper, position.x - prevPosition.x, position.y - prevPosition.y);\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n MoveTool.prototype.getTooltipContent = function (node) {\n return 'X:' + Math.round(node.wrapper.bounds.x) + ' ' + 'Y:' + Math.round(node.wrapper.bounds.y);\n };\n /**\n * @param args\n * @private\n */\n MoveTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n /** @private */\n MoveTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n this.currentTarget = null;\n this.prevPosition = null;\n };\n return MoveTool;\n}(ToolBase));\n/**\n * Rotates the selected objects\n */\nvar RotateTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(RotateTool, _super);\n function RotateTool(commandHandler) {\n var _this = _super.call(this, commandHandler, true) || this;\n /** @private */\n _this.rotateStart = false;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n RotateTool.prototype.mouseDown = function (args) {\n this.undoElement = cloneObject(args.source);\n if (this.undoElement.nodes[0] && this.undoElement.nodes[0].children) {\n var objects = [];\n var nodes = this.commandHandler.getAllDescendants(this.undoElement.nodes[0], objects);\n for (var i = 0; i < nodes.length; i++) {\n var node = this.commandHandler.cloneChild(nodes[parseInt(i.toString(), 10)].id);\n this.childTable[nodes[parseInt(i.toString(), 10)].id] = cloneObject(node);\n }\n }\n _super.prototype.mouseDown.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n RotateTool.prototype.mouseUp = function (args) {\n return __awaiter(this, void 0, void 0, function () {\n var object, oldValue, arg, obj, entry;\n return __generator(this, function (_a) {\n this.checkPropertyValue();\n object = this.commandHandler.renderContainerHelper(args.source) || args.source;\n if (this.undoElement.rotateAngle !== object.wrapper.rotateAngle) {\n oldValue = { rotateAngle: object.wrapper.rotateAngle };\n arg = {\n source: args.source, state: 'Completed', oldValue: oldValue,\n newValue: oldValue, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.rotateChange, arg);\n obj = void 0;\n obj = cloneObject(args.source);\n entry = {\n type: 'RotationChanged', redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement), category: 'Internal',\n childTable: this.childTable\n };\n this.commandHandler.addHistoryEntry(entry);\n this.commandHandler.updateSelector();\n this.rotateStart = false;\n }\n // this.commandHandler.updateBlazorSelector();\n this.canCancel = undefined;\n this.tempArgs = undefined;\n _super.prototype.mouseUp.call(this, args);\n return [2 /*return*/];\n });\n });\n };\n /**\n * @param args\n * @private\n */\n RotateTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var object;\n object = this.commandHandler.renderContainerHelper(args.source) || args.source;\n if (this.undoElement.rotateAngle === object.wrapper.rotateAngle && !this.rotateStart) {\n var oldValue_1 = { rotateAngle: object.wrapper.rotateAngle };\n var arg_2 = {\n source: args.source, state: 'Start', oldValue: oldValue_1, newValue: oldValue_1, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.rotateChange, arg_2);\n this.rotateStart = true;\n }\n this.currentPosition = args.position;\n var refPoint = { x: object.wrapper.offsetX, y: object.wrapper.offsetY };\n var angle = Point.findAngle(refPoint, this.currentPosition) + 90;\n var snapAngle = this.commandHandler.snapAngle(angle);\n angle = snapAngle !== 0 ? snapAngle : angle;\n angle = (angle + 360) % 360;\n var oldValue = { rotateAngle: object.wrapper.rotateAngle };\n var newValue = { rotateAngle: angle };\n var arg = {\n source: args.source, state: 'Progress', oldValue: oldValue,\n newValue: newValue, cancel: false\n };\n var arg1 = {\n source: cloneBlazorObject(args.source), state: 'Progress', oldValue: cloneBlazorObject(oldValue),\n newValue: cloneBlazorObject(newValue), cancel: arg.cancel\n };\n this.commandHandler.triggerEvent(DiagramEvent.rotateChange, arg1);\n if (!arg1.cancel) {\n this.blocked = !(this.commandHandler.rotateSelectedItems(angle - object.wrapper.rotateAngle));\n }\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content_3 = this.getTooltipContent(args.source);\n var contentTemp = function () {\n return content_3;\n };\n this.commandHandler.showTooltip(args.source, args.position, initializeCSPTemplate(contentTemp), 'RotateTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n return !this.blocked;\n };\n RotateTool.prototype.getTooltipContent = function (node) {\n return Math.round((node.rotateAngle % 360)).toString() + '\\xB0';\n };\n /**\n * @param args\n * @private\n */\n RotateTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n /** @private */\n RotateTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n return RotateTool;\n}(ToolBase));\n/**\n * Scales the selected objects\n */\nvar ResizeTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(ResizeTool, _super);\n function ResizeTool(commandHandler, corner) {\n var _this = _super.call(this, commandHandler, true) || this;\n /** @private */\n _this.resizeStart = false;\n /** @private */\n _this.initialBounds = new Rect();\n _this.canCancel = false;\n _this.corner = corner;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n ResizeTool.prototype.mouseDown = function (args) {\n this.undoElement = cloneObject(args.source);\n this.undoParentElement = this.commandHandler.getSubProcess(args.source);\n _super.prototype.mouseDown.call(this, args);\n if (this.undoElement.nodes[0] && this.undoElement.nodes[0].children) {\n var elements = [];\n var nodes = this.commandHandler.getAllDescendants(this.undoElement.nodes[0], elements);\n for (var i = 0; i < nodes.length; i++) {\n var node = this.commandHandler.cloneChild(nodes[parseInt(i.toString(), 10)].id);\n this.childTable[nodes[parseInt(i.toString(), 10)].id] = cloneObject(node);\n }\n }\n this.commandHandler.checkSelection(args.source, this.corner);\n _super.prototype.mouseDown.call(this, args);\n this.initialBounds.x = args.source.wrapper.offsetX;\n this.initialBounds.y = args.source.wrapper.offsetY;\n this.initialBounds.height = args.source.wrapper.actualSize.height;\n this.initialBounds.width = args.source.wrapper.actualSize.width;\n };\n /**\n * @param args\n * @param isPreventHistory\n * @param args\n * @param isPreventHistory\n * @private\n */\n ResizeTool.prototype.mouseUp = function (args, isPreventHistory) {\n return __awaiter(this, void 0, void 0, function () {\n var object, deltaValues, oldValue, arg, obj, entry, entry_2;\n return __generator(this, function (_a) {\n this.checkPropertyValue();\n this.commandHandler.removeSnap();\n this.commandHandler.updateSelector();\n object = this.commandHandler.renderContainerHelper(args.source) || args.source;\n if ((this.undoElement.offsetX !== object.wrapper.offsetX || this.undoElement.offsetY !== object.wrapper.offsetY ||\n this.undoElement.width !== object.wrapper.bounds.width || this.undoElement.height !== object.wrapper.bounds.height)) {\n deltaValues = this.updateSize(args.source, this.currentPosition, this.prevPosition, this.corner, this.initialBounds);\n this.blocked = this.scaleObjects(deltaValues.width, deltaValues.height, this.corner, this.currentPosition, this.prevPosition, object);\n oldValue = {\n width: args.source.wrapper.actualSize.width, height: args.source.wrapper.actualSize.height\n };\n arg = {\n source: cloneBlazorObject(args.source), state: 'Completed',\n oldValue: this.startValues, newValue: oldValue, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.sizeChange, arg);\n obj = cloneObject(args.source);\n entry = {\n type: 'SizeChanged', redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement), category: 'Internal',\n childTable: this.childTable\n };\n this.resizeStart = false;\n if (!isPreventHistory) {\n this.commandHandler.startGroupAction();\n this.commandHandler.addHistoryEntry(entry);\n if (obj.nodes[0] && obj.nodes[0].processId) {\n entry_2 = {\n type: 'SizeChanged', redoObject: this.commandHandler.getSubProcess(args.source),\n undoObject: this.undoParentElement, category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry_2);\n }\n this.commandHandler.endGroupAction();\n }\n }\n // this.commandHandler.updateBlazorSelector();\n _super.prototype.mouseUp.call(this, args);\n return [2 /*return*/, !this.blocked];\n });\n });\n };\n /**\n * @param args\n * @private\n */\n ResizeTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var object;\n object = this.commandHandler.renderContainerHelper(args.source) || args.source;\n if (this.undoElement.offsetX === object.wrapper.offsetX && this.undoElement.offsetY === object.wrapper.offsetY && !this.resizeStart) {\n var oldValue = {\n width: args.source.wrapper.actualSize.width, height: args.source.wrapper.actualSize.height\n };\n //EJ2-866122 - Need to enhance the sizeChange Event\n this.startValues = oldValue;\n var arg = {\n source: args.source, state: 'Start', oldValue: oldValue, newValue: this.currentElement, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.sizeChange, arg);\n this.resizeStart = true;\n }\n this.currentPosition = args.position;\n var x = this.currentPosition.x - this.startPosition.x;\n var y = this.currentPosition.y - this.startPosition.y;\n var changes = { x: x, y: y };\n changes = rotatePoint(-this.currentElement.wrapper.rotateAngle, undefined, undefined, changes);\n var sx = (this.currentElement.wrapper.actualSize.width + changes.x) / this.currentElement.wrapper.actualSize.width;\n var sy = (this.currentElement.wrapper.actualSize.height + changes.y) / this.currentElement.wrapper.actualSize.height;\n changes = this.getChanges(changes);\n this.commandHandler.removeSnap();\n var deltaValues = this.updateSize(args.source, this.startPosition, this.currentPosition, this.corner, this.initialBounds);\n this.blocked = !(this.scaleObjects(deltaValues.width, deltaValues.height, this.corner, this.startPosition, this.currentPosition, object));\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content_4 = this.getTooltipContent(args.source);\n //Task 834121: Content-Security-Policy support for diagram\n var contentTemp = function () {\n return content_4;\n };\n this.commandHandler.showTooltip(args.source, args.position, initializeCSPTemplate(contentTemp), 'ResizeTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n ResizeTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n ResizeTool.prototype.getTooltipContent = function (node) {\n return 'W:' + Math.round(node.wrapper.bounds.width) + ' ' + 'H:' + Math.round(node.wrapper.bounds.height);\n };\n ResizeTool.prototype.getChanges = function (change) {\n switch (this.corner) {\n case 'ResizeEast':\n return { x: change.x, y: 0 };\n case 'ResizeSouthEast':\n return change;\n case 'ResizeSouth':\n return { x: 0, y: change.y };\n case 'ResizeNorth':\n return { x: 0, y: -change.y };\n case 'ResizeNorthEast':\n return { x: change.x, y: -change.y };\n case 'ResizeNorthWest':\n return { x: -change.x, y: -change.y };\n case 'ResizeWest':\n return { x: -change.x, y: 0 };\n case 'ResizeSouthWest':\n return { x: -change.x, y: change.y };\n }\n return change;\n };\n /**\n * Updates the size with delta width and delta height using scaling.\n */\n /**\n * Aspect ratio used to resize the width or height based on resizing the height or width\n *\n * @param deltaWidth\n * @param deltaHeight\n * @param corner\n * @param startPoint\n * @param endPoint\n * @param source\n * @param deltaWidth\n * @param deltaHeight\n * @param corner\n * @param startPoint\n * @param endPoint\n * @param source\n * @param deltaWidth\n * @param deltaHeight\n * @param corner\n * @param startPoint\n * @param endPoint\n * @param source\n * @param deltaWidth\n * @param deltaHeight\n * @param corner\n * @param startPoint\n * @param endPoint\n * @param source\n * @param deltaWidth\n * @param deltaHeight\n * @param corner\n * @param startPoint\n * @param endPoint\n * @param source\n * @param deltaWidth\n * @param deltaHeight\n * @param corner\n * @param startPoint\n * @param endPoint\n * @param source\n */\n ResizeTool.prototype.scaleObjects = function (deltaWidth, deltaHeight, corner, startPoint, endPoint, source) {\n if (source instanceof Selector && source.nodes.length === 1 && source.nodes[0].constraints & NodeConstraints.AspectRatio) {\n if (corner === 'ResizeWest' || corner === 'ResizeEast' || corner === 'ResizeNorth' || corner === 'ResizeSouth') {\n if (!(deltaHeight === 1 && deltaWidth === 1)) {\n deltaHeight = deltaWidth = Math.max(deltaHeight === 1 ? 0 : deltaHeight, deltaWidth === 1 ? 0 : deltaWidth);\n }\n }\n else {\n deltaHeight = deltaWidth = Math.max(deltaHeight, deltaWidth);\n }\n }\n var oldValue = {\n width: source.width, height: source.height\n };\n this.blocked = this.commandHandler.scaleSelectedItems(deltaWidth, deltaHeight, this.getPivot(this.corner));\n var newValue = {\n width: source.width, height: source.height\n };\n var arg;\n arg = { source: source, state: 'Progress', oldValue: oldValue, newValue: newValue, cancel: false };\n var arg1;\n arg1 = {\n source: cloneBlazorObject(source), state: 'Progress',\n oldValue: cloneBlazorObject(oldValue), newValue: cloneBlazorObject(newValue), cancel: arg.cancel\n };\n this.commandHandler.triggerEvent(DiagramEvent.sizeChange, arg1);\n if (arg1.cancel || this.canCancel) {\n this.commandHandler.scaleSelectedItems(1 / deltaWidth, 1 / deltaHeight, this.getPivot(this.corner));\n }\n return this.blocked;\n };\n return ResizeTool;\n}(ToolBase));\n/**\n * Draws a node that is defined by the user\n */\nvar NodeDrawingTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(NodeDrawingTool, _super);\n function NodeDrawingTool(commandHandler, sourceObject) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.sourceObject = sourceObject;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n NodeDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n this.commandHandler.setFocus();\n this.triggerElementDrawEvent(args.source, 'Start', 'Node', this.getShapeType(), true);\n };\n /**\n * @param args\n * @private\n */\n NodeDrawingTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var checkBoundaryConstraints;\n var node = {\n offsetX: this.currentPosition.x, width: 3, height: 3,\n offsetY: this.currentPosition.y\n };\n if (!this.drawingObject) {\n this.drawingObject = this.commandHandler.drawObject(node);\n }\n this.triggerElementDrawEvent(this.drawingObject, 'Progress', 'Node', this.getShapeType(), false);\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, rect);\n if (checkBoundaryConstraints) {\n this.commandHandler.updateNodeDimension(this.drawingObject, rect);\n }\n }\n return checkBoundaryConstraints;\n };\n /**\n * @param args\n * @private\n */\n NodeDrawingTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n var checkBoundaryConstraints;\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, rect);\n if (this.drawingObject && this.drawingObject instanceof Node) {\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n this.triggerElementDrawEvent(this.drawingObject, 'Completed', 'Node', this.getShapeType(), false);\n this.drawingObject = null;\n }\n // this.commandHandler.updateBlazorSelector();\n _super.prototype.mouseUp.call(this, args);\n this.inAction = false;\n };\n /** @private */\n NodeDrawingTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n /**\n * @param args\n * @private\n */\n NodeDrawingTool.prototype.mouseLeave = function (args) {\n if (this.inAction) {\n this.mouseUp(args);\n }\n };\n return NodeDrawingTool;\n}(ToolBase));\n/**\n * Draws a connector that is defined by the user\n */\nvar ConnectorDrawingTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(ConnectorDrawingTool, _super);\n function ConnectorDrawingTool(commandHandler, endPoint, sourceObject) {\n var _this = _super.call(this, commandHandler, endPoint) || this;\n _this.sourceObject = sourceObject;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n ConnectorDrawingTool.prototype.mouseDown = function (args) {\n return __awaiter(this, void 0, void 0, function () {\n return __generator(this, function (_a) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n this.commandHandler.setFocus();\n this.triggerElementDrawEvent(args.source, 'Start', 'Connector', this.commandHandler.diagram.drawingObject.type, true);\n return [2 /*return*/];\n });\n });\n };\n /**\n * @param args\n * @private\n */\n ConnectorDrawingTool.prototype.mouseMove = function (args) {\n this.commandHandler.enableServerDataBinding(false);\n if (this.inAction) {\n var connector = {\n sourcePoint: this.currentPosition, targetPoint: this.currentPosition\n };\n if (!this.drawingObject) {\n this.drawingObject = this.commandHandler.drawObject(connector);\n }\n args.source = this.drawingObject;\n this.triggerElementDrawEvent(args.source, 'Progress', 'Connector', this.drawingObject.type, false);\n //Bug 874781: Port Draw Connection is not proper with group node.\n if (args.actualObject && (args.actualObject.parentId || args.actualObject.children) && this.drawingObject.sourceID === '') {\n this.setTarget(args);\n }\n if (((args.target && args.target instanceof Node) || (args.actualObject && args.sourceWrapper && checkPort(args.actualObject, args.sourceWrapper)))\n && (this.endPoint !== 'ConnectorTargetEnd' || (canInConnect(args.target)))) {\n this.commandHandler.connect(this.endPoint, args);\n }\n this.endPoint = 'ConnectorTargetEnd';\n }\n if (!this.inAction) {\n this.commandHandler.updateSelector();\n //EJ2-899368 : Highlighters for Connector Element Draw with userhandle updated wrongly\n if (args.source && !args.source.isLane && args.sourceWrapper) {\n this.commandHandler.renderHighlighter(args, true);\n }\n }\n _super.prototype.mouseMove.call(this, args);\n this.commandHandler.enableServerDataBinding(true);\n return !this.blocked;\n };\n // Sets the target while drawing connector from the group node port or its children port.\n ConnectorDrawingTool.prototype.setTarget = function (args) {\n if (args.target) {\n if (!args.sourceWrapper.id.includes(args.target.id)) {\n if (args.target.parentId && args.sourceWrapper.id.includes(args.target.parentId)) {\n args.target = this.commandHandler.diagram.nameTable[args.target.parentId];\n }\n }\n }\n else {\n if (!args.sourceWrapper.id.includes(args.actualObject.id)) {\n if (args.actualObject.parentId && args.sourceWrapper.id.includes(args.actualObject.parentId)) {\n args.target = this.commandHandler.diagram.nameTable[args.actualObject.parentId];\n }\n }\n else {\n args.target = args.actualObject;\n }\n }\n };\n /**\n * @param args\n * @private\n */\n ConnectorDrawingTool.prototype.mouseUp = function (args) {\n return __awaiter(this, void 0, void 0, function () {\n return __generator(this, function (_a) {\n this.commandHandler.enableServerDataBinding(false);\n this.checkPropertyValue();\n if (this.drawingObject && this.drawingObject instanceof Connector) {\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n this.triggerElementDrawEvent(this.drawingObject, 'Completed', 'Connector', this.drawingObject.type, false);\n this.drawingObject = null;\n }\n // this.commandHandler.updateBlazorSelector();\n this.inAction = false;\n this.commandHandler.enableServerDataBinding(true);\n _super.prototype.mouseUp.call(this, args);\n return [2 /*return*/];\n });\n });\n };\n /** @private */\n ConnectorDrawingTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n /**\n * @param args\n * @private\n */\n ConnectorDrawingTool.prototype.mouseLeave = function (args) {\n if (this.inAction) {\n this.mouseUp(args);\n }\n };\n return ConnectorDrawingTool;\n}(ConnectTool));\nvar TextDrawingTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(TextDrawingTool, _super);\n function TextDrawingTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * @param args\n * @private\n */\n TextDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.commandHandler.clearSelection();\n var node = {\n shape: { type: 'Text' },\n offsetX: this.currentPosition.x,\n offsetY: this.currentPosition.y\n };\n if (!args.source) {\n this.drawingNode = this.commandHandler.drawObject(node);\n }\n };\n /**\n * @param args\n * @private\n */\n TextDrawingTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (!this.drawingNode) {\n var node = {\n shape: { type: 'Text' }, offsetX: this.currentPosition.x, width: 30, height: 30,\n // EJ2-42640-Text size is different if Text Node is created over another diagram commited by sivakumar sekar\n // commanded style property and added it after the object is drawn\n // style: { strokeDashArray: '2 2', fill: 'transparent' },\n offsetY: this.currentPosition.y\n };\n this.drawingNode = this.commandHandler.drawObject(node);\n this.drawingNode.style.strokeDashArray = '2 2';\n this.drawingNode.style.fill = 'transparent';\n }\n else {\n this.drawingNode.style.strokeColor = 'black';\n this.drawingNode.style.strokeDashArray = '2 2';\n this.drawingNode.style.fill = 'transparent';\n }\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n this.commandHandler.updateNodeDimension(this.drawingNode, rect);\n }\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n TextDrawingTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n if (this.drawingNode) {\n this.drawingNode.style.strokeColor = 'none';\n this.drawingNode.style.fill = 'none';\n }\n else {\n this.drawingNode = args.source;\n }\n if (this.drawingNode && (this.drawingNode instanceof Node)) {\n this.commandHandler.addText(this.drawingNode, this.currentPosition);\n }\n _super.prototype.mouseUp.call(this, args);\n this.inAction = false;\n };\n /** @private */\n TextDrawingTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n return TextDrawingTool;\n}(ToolBase));\n/**\n * Pans the diagram control on drag\n */\nvar ZoomPanTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(ZoomPanTool, _super);\n function ZoomPanTool(commandHandler, zoom) {\n var _this = _super.call(this, commandHandler) || this;\n _this.zooming = zoom;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n ZoomPanTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n this.commandHandler.setBlazorDiagramProps(true);\n };\n /**\n * @param args\n * @private\n */\n ZoomPanTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n if (!this.zooming && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var difX = this.currentPosition.x - this.prevPosition.x;\n var difY = this.currentPosition.y - this.prevPosition.y;\n this.commandHandler.scroll(difX, difY, this.currentPosition);\n }\n else if (args.moveTouches && args.moveTouches.length && args.moveTouches.length >= 2) {\n var startTouch0 = args.startTouches[0];\n var startTouch1 = args.startTouches[1];\n var moveTouch0 = args.moveTouches[0];\n var moveTouch1 = args.moveTouches[1];\n var scale = this.getDistance(moveTouch0, moveTouch1) / this.getDistance(startTouch0, startTouch1);\n var focusPoint = args.position;\n this.commandHandler.zoom(scale, 0, 0, focusPoint);\n this.updateTouch(startTouch0, moveTouch0);\n this.updateTouch(startTouch1, moveTouch1);\n }\n }\n this.commandHandler.dataBinding();\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n ZoomPanTool.prototype.mouseUp = function (args) {\n this.commandHandler.setBlazorDiagramProps(false);\n this.checkPropertyValue();\n this.commandHandler.updatePanState(false);\n _super.prototype.mouseUp.call(this, args);\n this.inAction = false;\n };\n /** @private */\n ZoomPanTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n ZoomPanTool.prototype.getDistance = function (touch1, touch2) {\n var x = touch2.pageX - touch1.pageX;\n var y = touch2.pageY - touch1.pageY;\n return Math.sqrt((x * x) + (y * y));\n };\n ZoomPanTool.prototype.updateTouch = function (startTouch, moveTouch) {\n startTouch.pageX = moveTouch.pageX;\n startTouch.pageY = moveTouch.pageY;\n };\n return ZoomPanTool;\n}(ToolBase));\n/**\n * Animate the layout during expand and collapse\n */\nvar ExpandTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(ExpandTool, _super);\n function ExpandTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * @param args\n * @private\n */\n ExpandTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n this.commandHandler.initExpand(args);\n _super.prototype.mouseUp.call(this, args);\n };\n return ExpandTool;\n}(ToolBase));\n/**\n * Opens the annotation hypeLink at mouse up\n */\nvar LabelTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(LabelTool, _super);\n function LabelTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * @param args\n * @private\n */\n LabelTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n var tab = '_blank';\n var windowOption = '';\n var windowHeight = window.innerHeight;\n var windowWidth = window.innerWidth;\n var screenTop = window.screenTop;\n var screenLeft = window.screenLeft;\n if (args.sourceWrapper.hyperlink.hyperlinkOpenState === 'CurrentTab') {\n tab = '_self';\n }\n else if (args.sourceWrapper.hyperlink.hyperlinkOpenState === 'NewWindow') {\n windowOption = 'height=' + windowHeight + ',width=' + windowWidth + ',top=' + screenTop + ',left=' + screenLeft;\n }\n var win = window.open(args.sourceWrapper.hyperlink.link, tab, windowOption);\n win.focus();\n _super.prototype.mouseUp.call(this, args);\n };\n return LabelTool;\n}(ToolBase));\n/**\n * Draws a Polygon shape node dynamically using polygon Tool\n */\nvar PolygonDrawingTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(PolygonDrawingTool, _super);\n function PolygonDrawingTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * @param args\n * @private\n */\n PolygonDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n if (!this.drawingObject) {\n this.startPoint = { x: this.startPosition.x, y: this.startPosition.y };\n var node = {\n offsetX: this.currentPosition.x,\n offsetY: this.currentPosition.y,\n width: 5, height: 5,\n // 916722: Apply custom style to polygon shape by removing the default style during polygon drawing.\n shape: {\n type: 'Basic',\n shape: 'Polygon',\n points: [{ x: this.startPoint.x, y: this.startPoint.y }, { x: this.currentPosition.x, y: this.currentPosition.y }]\n }\n };\n // 920152: elementDraw event not triggered for Polygon Drawing tool\n this.triggerElementDrawEvent(args.source, 'Start', 'Node', this.getShapeType(), true);\n this.drawingObject = this.commandHandler.drawObject(node);\n }\n else {\n var pt = void 0;\n var obj = this.drawingObject.shape;\n pt = obj.points[obj.points.length - 1];\n pt = { x: pt.x, y: pt.y };\n this.drawingObject.shape.points.push(pt);\n }\n };\n /**\n * @param args\n * @private\n */\n PolygonDrawingTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n var obj = this.drawingObject.shape;\n obj.points[obj.points.length - 1].x = this.currentPosition.x;\n obj.points[obj.points.length - 1].y = this.currentPosition.y;\n this.drawingObject.wrapper.children[0].data = getPolygonPath(this.drawingObject.shape.points);\n // 920152: elementDraw event not triggered for Polygon Drawing tool\n this.triggerElementDrawEvent(this.drawingObject, 'Progress', 'Node', this.getShapeType(), false);\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var region = Rect.toBounds(this.drawingObject.shape.points);\n this.commandHandler.updateNodeDimension(this.drawingObject, region);\n }\n }\n return true;\n };\n /**\n * @param args\n * @param dblClickArgs\n * @param args\n * @param dblClickArgs\n * @private\n */\n PolygonDrawingTool.prototype.mouseUp = function (args, dblClickArgs) {\n this.checkPropertyValue();\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n this.inAction = false;\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n // 920152: elementDraw event not triggered for Polygon Drawing tool\n this.triggerElementDrawEvent(this.drawingObject, 'Completed', 'Node', this.getShapeType(), false);\n }\n this.endAction();\n };\n /**\n * @param args\n * @private\n */\n PolygonDrawingTool.prototype.mouseWheel = function (args) {\n _super.prototype.mouseWheel.call(this, args);\n this.mouseMove(args);\n };\n /** @private */\n PolygonDrawingTool.prototype.endAction = function () {\n this.inAction = false;\n this.drawingObject = null;\n };\n return PolygonDrawingTool;\n}(ToolBase));\n/**\n * Draws a PolyLine Connector dynamically using PolyLine Drawing Tool\n */\nvar PolyLineDrawingTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(PolyLineDrawingTool, _super);\n function PolyLineDrawingTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * @param args\n * @private\n */\n PolyLineDrawingTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n var obj = this.drawingObject;\n obj.targetPoint = this.currentPosition;\n // 920152: elementDraw event not triggered for Polyline Drawing tool\n this.triggerElementDrawEvent(this.drawingObject, 'Progress', 'Connector', this.drawingObject.type, false);\n this.commandHandler.updateConnectorPoints(obj);\n }\n return true;\n };\n /**\n * @param args\n * @private\n */\n PolyLineDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n if (!this.drawingObject) {\n var connector = {\n id: 'Connector',\n type: 'Straight',\n sourcePoint: this.currentPosition,\n targetPoint: this.currentPosition\n };\n // 920152: elementDraw event not triggered for Polyline Drawing tool\n this.triggerElementDrawEvent(args.source, 'Start', 'Connector', this.commandHandler.diagram.drawingObject.type, true);\n if (this.inAction) {\n this.drawingObject = this.commandHandler.drawObject(connector);\n }\n }\n else {\n var drawObject = this.drawingObject;\n var segment = void 0;\n segment = new StraightSegment(drawObject, 'segments', { type: 'Straight' }, true);\n segment.point = this.currentPosition;\n drawObject.segments[drawObject.segments.length - 1] = segment;\n }\n };\n /**\n * @param args\n * @private\n */\n PolyLineDrawingTool.prototype.mouseWheel = function (args) {\n _super.prototype.mouseWheel.call(this, args);\n this.mouseMove(args);\n };\n /**\n * @param args\n * @private\n */\n PolyLineDrawingTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n if (this.drawingObject) {\n var drawObject = this.drawingObject;\n drawObject.segments[drawObject.segments.length - 1].point = { x: 0, y: 0 };\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n // 920152: elementDraw event not triggered for Polyline Drawing tool\n this.triggerElementDrawEvent(this.drawingObject, 'Completed', 'Connector', this.drawingObject.type, false);\n }\n }\n this.endAction();\n };\n /** @private */\n PolyLineDrawingTool.prototype.endAction = function () {\n this.drawingObject = null;\n this.inAction = false;\n };\n return PolyLineDrawingTool;\n}(ToolBase));\nvar LabelDragTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(LabelDragTool, _super);\n function LabelDragTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * @param args\n * @private\n */\n LabelDragTool.prototype.mouseDown = function (args) {\n this.inAction = true;\n this.undoElement = cloneObject(args.source);\n this.annotationId = args.sourceWrapper.id;\n _super.prototype.mouseDown.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n LabelDragTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var difx = this.currentPosition.x - this.prevPosition.x;\n var dify = this.currentPosition.y - this.prevPosition.y;\n var node = args.source;\n if (node instanceof Node) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, -node.rotateAngle, 0, 0);\n var diff = transformPointByMatrix(matrix, { x: difx, y: dify });\n difx = diff.x;\n dify = diff.y;\n }\n if (this.inAction) {\n this.commandHandler.labelDrag(args.source, args.sourceWrapper, difx, dify);\n this.commandHandler.updateSelector();\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n LabelDragTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n var redoValue = args.source;\n this.inAction = false;\n var entryValue = {\n type: 'AnnotationPropertyChanged',\n objectId: this.annotationId, undoObject: cloneObject(this.undoElement),\n category: 'Internal', redoObject: cloneObject(redoValue)\n };\n this.commandHandler.addHistoryEntry(entryValue);\n _super.prototype.mouseUp.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n LabelDragTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n return LabelDragTool;\n}(ToolBase));\nvar LabelResizeTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(LabelResizeTool, _super);\n function LabelResizeTool(commandHandler, corner) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.corner = corner;\n return _this;\n }\n /**\n * @param args\n * @private\n */\n LabelResizeTool.prototype.mouseDown = function (args) {\n this.inAction = true;\n var object = (args.source.nodes.length) ?\n args.source.nodes[0] : args.source.connectors[0];\n this.annotationId = args.source.wrapper.children[0].id;\n this.undoElement = cloneObject(object);\n var annotation = args.source.wrapper.children[0];\n this.initialBounds = {\n x: annotation.offsetX,\n y: annotation.offsetY,\n width: annotation.actualSize.width,\n height: annotation.actualSize.height\n };\n _super.prototype.mouseDown.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n LabelResizeTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n this.resizeObject(args);\n }\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n LabelResizeTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n var redoObject = (args.source.nodes.length) ?\n args.source.nodes[0] : args.source.connectors[0];\n this.inAction = false;\n var entry = {\n type: 'AnnotationPropertyChanged', objectId: this.annotationId,\n redoObject: cloneObject(redoObject), undoObject: cloneObject(this.undoElement), category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n _super.prototype.mouseUp.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n LabelResizeTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n /**\n * @param args\n * @private\n */\n LabelResizeTool.prototype.resizeObject = function (args) {\n var object;\n object = (args.source.nodes.length) ? args.source.nodes[0] : args.source.connectors[0];\n var textElement = args.source.wrapper.children[0];\n var deltaWidth;\n var deltaHeight;\n var center = { x: textElement.offsetX, y: textElement.offsetY };\n var rotateAngle = textElement.rotateAngle;\n rotateAngle += (object instanceof Node) ? object.rotateAngle : 0;\n rotateAngle = (rotateAngle + 360) % 360;\n var trans = identityMatrix();\n rotateMatrix(trans, rotateAngle, center.x, center.y);\n var corner = this.corner.slice(5);\n var pivot = this.updateSize(textElement, this.startPosition, this.currentPosition, corner, this.initialBounds, rotateAngle);\n var x = textElement.offsetX - textElement.actualSize.width * textElement.pivot.x;\n var y = textElement.offsetY - textElement.actualSize.height * textElement.pivot.y;\n var pivotPoint = this.getPivot(corner);\n pivotPoint = { x: x + textElement.actualSize.width * pivotPoint.x, y: y + textElement.actualSize.height * pivotPoint.y };\n var point = transformPointByMatrix(trans, pivotPoint);\n pivot.x = point.x;\n pivot.y = point.y;\n deltaWidth = pivot.width;\n deltaHeight = pivot.height;\n deltaWidth = (deltaWidth < 0) ? 1 : deltaWidth;\n deltaHeight = (deltaHeight < 0) ? 1 : deltaHeight;\n this.commandHandler.labelResize(object, args.source.annotation, deltaWidth, deltaHeight, pivot, args.source);\n this.commandHandler.updateSelector();\n };\n return LabelResizeTool;\n}(ToolBase));\nvar LabelRotateTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(LabelRotateTool, _super);\n function LabelRotateTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * @param args\n * @private\n */\n LabelRotateTool.prototype.mouseDown = function (args) {\n this.inAction = true;\n this.annotationId = args.source.wrapper.children[0].id;\n var object = (args.source.nodes.length) ?\n args.source.nodes[0] : args.source.connectors[0];\n this.undoElement = cloneObject(object);\n _super.prototype.mouseDown.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n LabelRotateTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (args.source) {\n if (this.inAction) {\n var object = args.source.nodes[0] ? args.source.nodes[0] :\n args.source.connectors[0];\n var annotation = void 0;\n annotation = (args.source.annotation);\n this.commandHandler.labelRotate(object, annotation, this.currentPosition, args.source);\n this.commandHandler.updateSelector();\n }\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n /**\n * @param args\n * @private\n */\n LabelRotateTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n this.inAction = false;\n var redoEntry = (args.source.nodes.length) ?\n args.source.nodes[0] : args.source.connectors[0];\n var entryObject = {\n type: 'AnnotationPropertyChanged', objectId: this.annotationId,\n redoObject: cloneObject(redoEntry),\n undoObject: cloneObject(this.undoElement), category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entryObject);\n _super.prototype.mouseUp.call(this, args);\n };\n /**\n * @param args\n * @private\n */\n LabelRotateTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n return LabelRotateTool;\n}(ToolBase));\n/**\n * EJ2-33302 - Freehand drawing support in diagram control.\n */\nvar FreeHandTool = /** @__PURE__ @class */ (function (_super) {\n __extends$g(FreeHandTool, _super);\n function FreeHandTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n /**\n * mouseMove - Collect the points using current mouse position and convert it into pathData.\n * @param args\n * @private\n */\n FreeHandTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n var obj = this.drawingObject.shape;\n var pt = this.currentPosition;\n obj.points.push(pt);\n this.drawingObject.wrapper.children[0].data = getFreeHandPath(this.drawingObject.shape.points);\n obj.data = getFreeHandPath(obj.points);\n // 920152: elementDraw event not triggered for Freehand Drawing tool\n this.triggerElementDrawEvent(args.source, 'Progress', 'Connector', this.drawingObject.type, false);\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var region = Rect.toBounds(this.drawingObject.shape.points);\n this.commandHandler.updateNodeDimension(this.drawingObject, region);\n }\n }\n return true;\n };\n /**\n * @param args\n * @private\n */\n FreeHandTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n this.startPoint = { x: this.startPosition.x, y: this.startPosition.y };\n var node = {\n offsetX: this.currentPosition.x,\n offsetY: this.currentPosition.y,\n width: 5, height: 5,\n style: { strokeColor: 'black', strokeWidth: 1, fill: 'transparent' },\n shape: {\n type: 'Path',\n points: [{ x: this.startPoint.x, y: this.startPoint.y }, { x: this.currentPosition.x, y: this.currentPosition.y }]\n }\n };\n // 920152: elementDraw event not triggered for Freehand Drawing tool\n this.triggerElementDrawEvent(args.source, 'Start', 'Connector', this.commandHandler.diagram.drawingObject.type, true);\n this.drawingObject = this.commandHandler.drawObject(node);\n };\n /**\n * mouseUp - Remove the drawn object. Reduce and smoothen the collected points and create\n * a bezier connector using the smoothened points.\n * @param args\n * @private\n */\n FreeHandTool.prototype.mouseUp = function (args) {\n this.checkPropertyValue();\n var tolerance = 10;\n var smoothValue = 0.5;\n if (this.inAction) {\n this.inAction = false;\n var obj = this.drawingObject.shape;\n var points = obj.points;\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n var prevId = this.drawingObject.id;\n var prevObj = this.commandHandler.diagram.nameTable[\"\" + prevId];\n this.commandHandler.diagram.remove(prevObj);\n points = this.pointReduction(points, tolerance);\n //EJ2-69816 - Added below code to set the allow segment reset as false to avoid the unwanted segment reset.\n var newObj = {\n id: 'newConnector' + randomId(), type: 'Bezier',\n sourcePoint: { x: points[0].x, y: points[0].y }, targetPoint: { x: points[points.length - 1].x, y: points[points.length - 1].y },\n //EJ2-873504[BUG]- Source and target decorator for free hand connector is not rendered.\n segments: [], bezierSettings: { allowSegmentsReset: false }\n };\n this.drawingObject = this.commandHandler.drawObject(newObj);\n this.drawingObject = this.bezierCurveSmoothness(points, smoothValue, this.drawingObject, obj);\n this.commandHandler.updateConnectorPoints(this.drawingObject);\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n // 920152: elementDraw event not triggered for Freehand Drawing tool\n this.triggerElementDrawEvent(this.drawingObject, 'Completed', 'Connector', this.drawingObject.type, false);\n //(EJ2-70838)- Added code to resolve style property not added dynamically for freehand connector\n // Added code to resolve style property not added dynamically for freehand connector\n _super.prototype.mouseUp.call(this, args);\n }\n };\n /**\n * Reduce the collected points based on tolerance value.\n * @param points\n * @param tolerance\n * @returns points\n */\n FreeHandTool.prototype.pointReduction = function (points, tolerance) {\n if (points === null || points.length < 3) {\n return points;\n }\n var firstPoint = 0;\n var lastPoint = points.length - 1;\n var pointIndex = [];\n pointIndex.push(firstPoint);\n pointIndex.push(lastPoint);\n while (points[parseInt(firstPoint.toString(), 10)] === (points[parseInt(lastPoint.toString(), 10)])) {\n lastPoint--;\n }\n this.reduction(points, firstPoint, lastPoint, tolerance, pointIndex);\n var returnedPoints = [];\n pointIndex.sort(function (a, b) { return a - b; });\n pointIndex.forEach(function (element) {\n returnedPoints.push(points[parseInt(element.toString(), 10)]);\n });\n return returnedPoints;\n };\n FreeHandTool.prototype.reduction = function (points, firstPoint, lastPoint, tolerance, pointIndex) {\n var maxDistance = 0;\n var largestPointIndex = 0;\n for (var i = firstPoint; i < lastPoint; i++) {\n var distance = this.perpendicularDistance(points[parseInt(firstPoint.toString(), 10)], points[parseInt(lastPoint.toString(), 10)], points[parseInt(i.toString(), 10)]);\n if (distance > maxDistance) {\n maxDistance = distance;\n largestPointIndex = i;\n }\n }\n if (maxDistance > tolerance && largestPointIndex !== 0) {\n pointIndex.push(largestPointIndex);\n this.reduction(points, firstPoint, largestPointIndex, tolerance, pointIndex);\n this.reduction(points, largestPointIndex, lastPoint, tolerance, pointIndex);\n }\n };\n /**\n * Calculate the perpendicular distance of each point with first and last points\n * @param point1\n * @param point2\n * @param point3\n * @returns\n */\n FreeHandTool.prototype.perpendicularDistance = function (point1, point2, point3) {\n var area = Math.abs(.5 * ((point1.x * point2.y - point2.x * point1.y) +\n (point2.x * point3.y - point3.x * point2.y) + (point3.x * point1.y - point1.x * point3.y)));\n var base = Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));\n var height = area / base * 2;\n return height;\n };\n /**\n * Smoothen the bezier curve based on the points and smoothValue.\n * @param points\n * @param smoothValue\n * @param drawingObject\n * @param obj\n * @returns drawingObject\n */\n FreeHandTool.prototype.bezierCurveSmoothness = function (points, smoothValue, drawingObject, obj) {\n if (points.length < 3) {\n return drawingObject;\n }\n for (var i = 0; i < points.length - 1; i++) {\n var pointx1 = points[parseInt(i.toString(), 10)].x;\n var pointy1 = points[parseInt(i.toString(), 10)].y;\n var pointx2 = points[i + 1].x;\n var pointy2 = points[i + 1].y;\n var pointx0 = void 0;\n var pointy0 = void 0;\n if (i === 0) {\n var previousPoint = points[parseInt(i.toString(), 10)];\n pointx0 = previousPoint.x;\n pointy0 = previousPoint.y;\n }\n else {\n pointx0 = points[i - 1].x;\n pointy0 = points[i - 1].y;\n }\n var pointx3 = void 0;\n var pointy3 = void 0;\n if (i === points.length - 2) {\n var nextPoint = points[i + 1];\n pointx3 = nextPoint.x;\n pointy3 = nextPoint.y;\n }\n else {\n pointx3 = points[i + 2].x;\n pointy3 = points[i + 2].y;\n }\n var xc1 = (pointx0 + pointx1) / 2.0;\n var yc1 = (pointy0 + pointy1) / 2.0;\n var xc2 = (pointx1 + pointx2) / 2.0;\n var yc2 = (pointy1 + pointy2) / 2.0;\n var xc3 = (pointx2 + pointx3) / 2.0;\n var yc3 = (pointy2 + pointy3) / 2.0;\n var point0 = {};\n var point1 = {};\n var point2 = {};\n var point3 = {};\n point0.x = pointx0;\n point0.y = pointy0;\n point1.x = pointx1;\n point1.y = pointy1;\n point2.x = pointx2;\n point2.y = pointy2;\n point3.x = pointx3;\n point3.y = pointy3;\n var len1 = Point.findLength(point0, point1);\n var len2 = Point.findLength(point1, point2);\n var len3 = Point.findLength(point2, point3);\n var k1 = len1 / (len1 + len2);\n var k2 = len2 / (len2 + len3);\n var xm1 = xc1 + (xc2 - xc1) * k1;\n var ym1 = yc1 + (yc2 - yc1) * k1;\n var xm2 = xc2 + (xc3 - xc2) * k2;\n var ym2 = yc2 + (yc3 - yc2) * k2;\n var Controlpointx1 = xm1 + (xc2 - xm1) * smoothValue + pointx1 - xm1;\n var Controlpointy1 = ym1 + (yc2 - ym1) * smoothValue + pointy1 - ym1;\n var Controlpointx2 = xm2 + (xc2 - xm2) * smoothValue + pointx2 - xm2;\n var Controlpointy2 = ym2 + (yc2 - ym2) * smoothValue + pointy2 - ym2;\n var segment = new BezierSegment(obj, 'segments', { type: 'Bezier' }, true);\n var cnPt1 = { x: Controlpointx1, y: Controlpointy1 };\n var cnPt2 = { x: Controlpointx2, y: Controlpointy2 };\n var segSourcePoint = { x: pointx1, y: pointy1 };\n var segTargetPoint = { x: pointx2, y: pointy2 };\n segment.type = 'Bezier';\n drawingObject.segments[parseInt(i.toString(), 10)] = segment;\n if (i === 0) {\n cnPt1 = { x: pointx1, y: pointy1 };\n }\n if (i === points.length - 2) {\n cnPt2 = { x: pointx2, y: pointy2 };\n }\n drawingObject.segments[parseInt(i.toString(), 10)].vector1 = { angle: findAngle(segSourcePoint, cnPt1), distance: Point.findLength(segSourcePoint, cnPt1) };\n drawingObject.segments[parseInt(i.toString(), 10)].vector2 = { angle: findAngle(segTargetPoint, cnPt2), distance: Point.findLength(segTargetPoint, cnPt2) };\n drawingObject.segments[parseInt(i.toString(), 10)].point = segTargetPoint;\n }\n return drawingObject;\n };\n return FreeHandTool;\n}(ToolBase));\n\nvar __extends$h = (undefined && undefined.__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$8 = (undefined && undefined.__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};\nvar getConnectorType = function (obj) {\n //Removed isBlazor code\n if (obj) {\n switch (obj.type) {\n case 'Bpmn':\n return BpmnFlow;\n case 'UmlActivity':\n return ActivityFlow;\n case 'UmlClassifier':\n return RelationShip;\n default:\n return ConnectorShape;\n }\n }\n return ConnectorShape;\n};\nvar getSegmentType = function (obj) {\n if (obj) {\n //Removed isBlazor code\n switch (obj.type) {\n case 'Straight':\n return StraightSegment;\n case 'Bezier':\n return BezierSegment;\n case 'Orthogonal':\n return OrthogonalSegment;\n default:\n return StraightSegment;\n }\n }\n return undefined;\n};\n/**\n * Decorators are used to decorate the end points of the connector with some predefined path geometry\n */\nvar Decorator = /** @__PURE__ @class */ (function (_super) {\n __extends$h(Decorator, _super);\n function Decorator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property(10)\n ], Decorator.prototype, \"width\", void 0);\n __decorate$8([\n Property(10)\n ], Decorator.prototype, \"height\", void 0);\n __decorate$8([\n Property('Arrow')\n ], Decorator.prototype, \"shape\", void 0);\n __decorate$8([\n Complex({ fill: 'black', strokeColor: 'black', strokeWidth: 1 }, ShapeStyle)\n ], Decorator.prototype, \"style\", void 0);\n __decorate$8([\n Complex({ x: 0, y: 0.5 }, Point)\n ], Decorator.prototype, \"pivot\", void 0);\n __decorate$8([\n Property('')\n ], Decorator.prototype, \"pathData\", void 0);\n return Decorator;\n}(ChildProperty));\n/**\n * Describes the length and angle between the control point and the start point of bezier segment\n */\nvar Vector = /** @__PURE__ @class */ (function (_super) {\n __extends$h(Vector, _super);\n function Vector() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property(0)\n ], Vector.prototype, \"angle\", void 0);\n __decorate$8([\n Property(0)\n ], Vector.prototype, \"distance\", void 0);\n return Vector;\n}(ChildProperty));\n/**\n * Describes the length and angle between the control point and the start point of bezier segment\n */\nvar BezierSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$h(BezierSettings, _super);\n function BezierSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property(ControlPointsVisibility.All)\n ], BezierSettings.prototype, \"controlPointsVisibility\", void 0);\n __decorate$8([\n Property('FreeForm')\n ], BezierSettings.prototype, \"segmentEditOrientation\", void 0);\n __decorate$8([\n Property(BezierSmoothness.Default)\n ], BezierSettings.prototype, \"smoothness\", void 0);\n __decorate$8([\n Property(true)\n ], BezierSettings.prototype, \"allowSegmentsReset\", void 0);\n return BezierSettings;\n}(ChildProperty));\n/**\n * Sets the type of the connector\n */\nvar ConnectorShape = /** @__PURE__ @class */ (function (_super) {\n __extends$h(ConnectorShape, _super);\n function ConnectorShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('None')\n ], ConnectorShape.prototype, \"type\", void 0);\n return ConnectorShape;\n}(ChildProperty));\n/**\n * Sets the type of the flow in a BPMN Process\n */\nvar ActivityFlow = /** @__PURE__ @class */ (function (_super) {\n __extends$h(ActivityFlow, _super);\n function ActivityFlow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('Object')\n ], ActivityFlow.prototype, \"flow\", void 0);\n __decorate$8([\n Property(30)\n ], ActivityFlow.prototype, \"exceptionFlowHeight\", void 0);\n return ActivityFlow;\n}(ConnectorShape));\n/**\n * Sets the type of the flow in a BPMN Process\n */\nvar BpmnFlow = /** @__PURE__ @class */ (function (_super) {\n __extends$h(BpmnFlow, _super);\n function BpmnFlow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('Sequence')\n ], BpmnFlow.prototype, \"flow\", void 0);\n __decorate$8([\n Property('Normal')\n ], BpmnFlow.prototype, \"sequence\", void 0);\n __decorate$8([\n Property('Default')\n ], BpmnFlow.prototype, \"message\", void 0);\n __decorate$8([\n Property('Default')\n ], BpmnFlow.prototype, \"association\", void 0);\n return BpmnFlow;\n}(ConnectorShape));\n/**\n * Defines the behavior of connector segments\n */\nvar ConnectorSegment = /** @__PURE__ @class */ (function (_super) {\n __extends$h(ConnectorSegment, _super);\n // tslint:disable-next-line:no-any\n function ConnectorSegment(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n _this.points = [];\n return _this;\n }\n __decorate$8([\n Property('Straight')\n ], ConnectorSegment.prototype, \"type\", void 0);\n __decorate$8([\n Property(true)\n ], ConnectorSegment.prototype, \"allowDrag\", void 0);\n return ConnectorSegment;\n}(ChildProperty));\n/**\n * Defines the behavior of straight segments\n */\nvar StraightSegment = /** @__PURE__ @class */ (function (_super) {\n __extends$h(StraightSegment, _super);\n function StraightSegment() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class StraightSegment\n *\n * @private\n */\n StraightSegment.prototype.getClassName = function () {\n return 'StraightSegment';\n };\n __decorate$8([\n Complex({ x: 0, y: 0 }, Point)\n ], StraightSegment.prototype, \"point\", void 0);\n return StraightSegment;\n}(ConnectorSegment));\n/**\n * Defines the behavior of bezier segments\n */\nvar BezierSegment = /** @__PURE__ @class */ (function (_super) {\n __extends$h(BezierSegment, _super);\n function BezierSegment() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * @private\n * Returns the name of class BezierSegment\n */\n BezierSegment.prototype.getClassName = function () {\n return 'BezierSegment';\n };\n /**\n * @private\n * Returns the total points of the bezier curve\n */\n BezierSegment.prototype.getPoints = function (segments, start) {\n var points = [];\n if (points.length > 0 || start != null) {\n var st = points.length > 0 ? points[points.length - 1] : start;\n var bezier = this.bezireToPoly(st, segments);\n // 878719: Resolve ESLint errors\n // eslint-disable-next-line prefer-spread\n points.push.apply(points, bezier);\n }\n return points;\n };\n /**\n * @private\n * Returns the total points of the bezier curve\n */\n BezierSegment.prototype.bezireToPoly = function (start, segment) {\n var points = [];\n if (segment) {\n var bezSeg = segment;\n var pt0 = start;\n var pt1 = bezSeg.bezierPoint1;\n var pt2 = bezSeg.bezierPoint2;\n var pt3 = { x: bezSeg.points[1].x, y: bezSeg.points[1].y };\n this.flattenCubicBezier(points, pt0, pt1, pt2, pt3, 10);\n }\n return points;\n };\n /**\n * @private\n * Returns the total points of the bezier curve\n */\n BezierSegment.prototype.flattenCubicBezier = function (points, ptStart, ptCtrl1, ptCtrl2, ptEnd, tolerance) {\n var max = ((Point.findLength(ptStart, ptCtrl1) + Point.findLength(ptCtrl1, ptCtrl2)\n + Point.findLength(ptCtrl2, ptEnd)) / tolerance);\n var i;\n for (i = 0; i <= max; i++) {\n var t = i / max;\n var x = (1 - t) * (1 - t) * (1 - t) * ptStart.x +\n 3 * t * (1 - t) * (1 - t) * ptCtrl1.x +\n 3 * t * t * (1 - t) * ptCtrl2.x +\n t * t * t * ptEnd.x;\n var y = (1 - t) * (1 - t) * (1 - t) * ptStart.y +\n 3 * t * (1 - t) * (1 - t) * ptCtrl1.y +\n 3 * t * t * (1 - t) * ptCtrl2.y +\n t * t * t * ptEnd.y;\n points.push({ x: x, y: y });\n }\n };\n __decorate$8([\n Property('Horizontal')\n ], BezierSegment.prototype, \"orientation\", void 0);\n __decorate$8([\n Complex({ x: 0, y: 0 }, Point)\n ], BezierSegment.prototype, \"point1\", void 0);\n __decorate$8([\n Complex({ x: 0, y: 0 }, Point)\n ], BezierSegment.prototype, \"point2\", void 0);\n __decorate$8([\n Complex({ angle: 0, distance: 0 }, Vector)\n ], BezierSegment.prototype, \"vector1\", void 0);\n __decorate$8([\n Complex({ angle: 0, distance: 0 }, Vector)\n ], BezierSegment.prototype, \"vector2\", void 0);\n return BezierSegment;\n}(StraightSegment));\n/**\n * Defines the behavior of orthogonal segments\n */\nvar OrthogonalSegment = /** @__PURE__ @class */ (function (_super) {\n __extends$h(OrthogonalSegment, _super);\n function OrthogonalSegment() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the module of class OrthogonalSegment\n *\n * @private\n */\n OrthogonalSegment.prototype.getClassName = function () {\n return 'OrthogonalSegment';\n };\n __decorate$8([\n Property(null)\n ], OrthogonalSegment.prototype, \"length\", void 0);\n __decorate$8([\n Property(null)\n ], OrthogonalSegment.prototype, \"direction\", void 0);\n return OrthogonalSegment;\n}(ConnectorSegment));\n/**\n * Defines the behavior of orthogonal segments\n */\nvar DiagramConnectorSegment = /** @__PURE__ @class */ (function (_super) {\n __extends$h(DiagramConnectorSegment, _super);\n function DiagramConnectorSegment() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * @private\n * Returns the module of class OrthogonalSegment\n */\n DiagramConnectorSegment.prototype.getClassName = function () {\n return 'DiagramConnectorSegment';\n };\n __decorate$8([\n Property('Straight')\n ], DiagramConnectorSegment.prototype, \"type\", void 0);\n __decorate$8([\n Property(true)\n ], DiagramConnectorSegment.prototype, \"allowDrag\", void 0);\n __decorate$8([\n Complex({ x: 0, y: 0 }, Point)\n ], DiagramConnectorSegment.prototype, \"point\", void 0);\n __decorate$8([\n Complex({ x: 0, y: 0 }, Point)\n ], DiagramConnectorSegment.prototype, \"point1\", void 0);\n __decorate$8([\n Complex({ x: 0, y: 0 }, Point)\n ], DiagramConnectorSegment.prototype, \"point2\", void 0);\n __decorate$8([\n Complex({ angle: 0, distance: 0 }, Vector)\n ], DiagramConnectorSegment.prototype, \"vector1\", void 0);\n __decorate$8([\n Complex({ angle: 0, distance: 0 }, Vector)\n ], DiagramConnectorSegment.prototype, \"vector2\", void 0);\n __decorate$8([\n Property(null)\n ], DiagramConnectorSegment.prototype, \"length\", void 0);\n __decorate$8([\n Property(null)\n ], DiagramConnectorSegment.prototype, \"direction\", void 0);\n return DiagramConnectorSegment;\n}(ChildProperty));\n/**\n * Get the direction of the control points while the bezier is connected to the node\n */\nfunction getDirection$1(bounds, points, excludeBounds) {\n var center = bounds.center;\n var direction;\n var part = excludeBounds ? 45 : (180 / (2 + 2 / (bounds.height / bounds.width)));\n var fourty5 = part;\n var one35 = (180 - part);\n var two25 = one35 + (2 * part);\n var three15 = 360 - part;\n var angle = findAngle(points, center);\n if (angle > fourty5 && angle < one35) {\n return direction = 'top';\n }\n else if (angle > one35 && angle < two25) {\n return direction = 'right';\n }\n else if (angle > two25 && angle < three15) {\n return direction = 'bottom';\n }\n else {\n return direction = 'left';\n }\n}\nfunction isEmptyVector(element) {\n if (!element.distance && !element.angle) {\n return true;\n }\n return false;\n}\n/**\n * Get the bezier points if control points are not given.\n */\nfunction getBezierPoints(sourcePoint, targetPoint, direction) {\n var distance = 60;\n var value = { x: 0, y: 0 };\n if (!direction) {\n if (Math.abs(targetPoint.x - sourcePoint.x) > Math.abs(targetPoint.y - sourcePoint.y)) {\n direction = sourcePoint.x < targetPoint.x ? 'right' : 'left';\n }\n else {\n direction = sourcePoint.y < targetPoint.y ? 'bottom' : 'top';\n }\n }\n switch (direction) {\n case 'bottom':\n case 'top':\n distance = Math.min(Math.abs(sourcePoint.y - targetPoint.y) * 0.45, distance);\n value = { x: sourcePoint.x, y: sourcePoint.y + (direction === 'bottom' ? distance : -distance) };\n break;\n case 'right':\n case 'left':\n distance = Math.min(Math.abs(sourcePoint.x - targetPoint.x) * 0.45, distance);\n value = { x: sourcePoint.x + (direction === 'right' ? distance : -distance), y: sourcePoint.y };\n break;\n }\n return value;\n}\n/**\n * Get the bezier curve bounds.\n */\nfunction getBezierBounds(startPoint, controlPoint1, controlPoint2, endPoint, connector) {\n var minx = 0;\n var miny = 0;\n var maxx = 0;\n var maxy = 0;\n var tolerancevalue = 3;\n var max = Number((connector.distance(controlPoint1, startPoint) +\n connector.distance(controlPoint2, controlPoint1) +\n connector.distance(endPoint, controlPoint2)) / tolerancevalue);\n if (max !== 0) {\n for (var i = 0; i <= max; i++) {\n var t = i / max;\n var x = (1 - t) * (1 - t) * (1 - t) * startPoint.x +\n 3 * t * (1 - t) * (1 - t) * controlPoint1.x +\n 3 * t * t * (1 - t) * controlPoint2.x +\n t * t * t * endPoint.x;\n var y = (1 - t) * (1 - t) * (1 - t) * startPoint.y +\n 3 * t * (1 - t) * (1 - t) * controlPoint1.y +\n 3 * t * t * (1 - t) * controlPoint2.y +\n t * t * t * endPoint.y;\n if (i === 0) {\n minx = maxx = x;\n miny = maxy = y;\n }\n else {\n minx = Math.min(x, minx);\n miny = Math.min(y, miny);\n maxx = Math.max(x, maxx);\n maxy = Math.max(y, maxy);\n }\n }\n }\n return {\n x: minx, y: miny, width: maxx - minx, height: maxy - miny,\n left: minx, top: miny, right: (minx + (maxx - minx)), bottom: (miny + (maxy - miny)),\n center: { x: (minx + (maxx - minx)) / 2, y: (miny + (maxy - miny)) / 2 }\n };\n}\n/**\n * Get the intermediate bezier curve for point over connector\n */\nfunction bezierPoints(connector, startPoint, point1, point2, endPoint, i, max) {\n var pt = { x: 0, y: 0 };\n var t = i / max;\n var x = (1 - t) * (1 - t) * (1 - t) * startPoint.x +\n 3 * t * (1 - t) * (1 - t) * point1.x +\n 3 * t * t * (1 - t) * point2.x +\n t * t * t * endPoint.x;\n pt.x = x;\n var y = (1 - t) * (1 - t) * (1 - t) * startPoint.y +\n 3 * t * (1 - t) * (1 - t) * point1.y +\n 3 * t * t * (1 - t) * point2.y +\n t * t * t * endPoint.y;\n pt.y = y;\n return pt;\n}\n/**\n * Defines the behavior of the UMLActivity Classifier multiplicity connection defaults\n */\nvar MultiplicityLabel = /** @__PURE__ @class */ (function (_super) {\n __extends$h(MultiplicityLabel, _super);\n function MultiplicityLabel() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property(true)\n ], MultiplicityLabel.prototype, \"optional\", void 0);\n __decorate$8([\n Property(undefined)\n ], MultiplicityLabel.prototype, \"lowerBounds\", void 0);\n __decorate$8([\n Property(undefined)\n ], MultiplicityLabel.prototype, \"upperBounds\", void 0);\n return MultiplicityLabel;\n}(ChildProperty));\n/**\n * Defines the behavior of the UMLActivity Classifier multiplicity connection defaults\n */\nvar ClassifierMultiplicity = /** @__PURE__ @class */ (function (_super) {\n __extends$h(ClassifierMultiplicity, _super);\n function ClassifierMultiplicity() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('OneToOne')\n ], ClassifierMultiplicity.prototype, \"type\", void 0);\n __decorate$8([\n Complex({}, MultiplicityLabel)\n ], ClassifierMultiplicity.prototype, \"target\", void 0);\n __decorate$8([\n Complex({}, MultiplicityLabel)\n ], ClassifierMultiplicity.prototype, \"source\", void 0);\n return ClassifierMultiplicity;\n}(ChildProperty));\n/**\n * Defines the behavior of the UMLActivity shape\n */\nvar RelationShip = /** @__PURE__ @class */ (function (_super) {\n __extends$h(RelationShip, _super);\n function RelationShip() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('UmlClassifier')\n ], RelationShip.prototype, \"type\", void 0);\n __decorate$8([\n Property('Aggregation')\n ], RelationShip.prototype, \"relationship\", void 0);\n __decorate$8([\n Property('Directional')\n ], RelationShip.prototype, \"associationType\", void 0);\n __decorate$8([\n Complex({}, ClassifierMultiplicity)\n ], RelationShip.prototype, \"multiplicity\", void 0);\n return RelationShip;\n}(ConnectorShape));\n/**\n * Connector shape for blazor\n */\nvar DiagramConnectorShape = /** @__PURE__ @class */ (function (_super) {\n __extends$h(DiagramConnectorShape, _super);\n function DiagramConnectorShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('None')\n ], DiagramConnectorShape.prototype, \"type\", void 0);\n __decorate$8([\n Property('Directional')\n ], DiagramConnectorShape.prototype, \"associationType\", void 0);\n __decorate$8([\n Property('Aggregation')\n ], DiagramConnectorShape.prototype, \"relationship\", void 0);\n __decorate$8([\n Complex({}, ClassifierMultiplicity)\n ], DiagramConnectorShape.prototype, \"multiplicity\", void 0);\n __decorate$8([\n Property('Sequence')\n ], DiagramConnectorShape.prototype, \"bpmnFlow\", void 0);\n __decorate$8([\n Property('Default')\n ], DiagramConnectorShape.prototype, \"message\", void 0);\n __decorate$8([\n Property('Normal')\n ], DiagramConnectorShape.prototype, \"sequence\", void 0);\n __decorate$8([\n Property('Default')\n ], DiagramConnectorShape.prototype, \"association\", void 0);\n __decorate$8([\n Property('Object')\n ], DiagramConnectorShape.prototype, \"umlActivityFlow\", void 0);\n __decorate$8([\n Property(30)\n ], DiagramConnectorShape.prototype, \"exceptionFlowHeight\", void 0);\n return DiagramConnectorShape;\n}(ChildProperty));\n/**\n * Connectors are used to create links between nodes\n */\nvar Connector = /** @__PURE__ @class */ (function (_super) {\n __extends$h(Connector, _super);\n // tslint:disable-next-line:no-any\n function Connector(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n /** @private */\n _this.parentId = '';\n /** @private */\n _this.bridges = [];\n /** @private */\n _this.status = 'None';\n /** @private */\n _this.outEdges = [];\n /** @private */\n _this.inEdges = [];\n if (_this.shape && _this.shape.type === 'UmlActivity') {\n setUMLActivityDefaults(defaultValue, _this);\n }\n if (defaultValue && defaultValue.shape && defaultValue.shape.type !== 'None') {\n setConnectorDefaults(defaultValue, _this);\n }\n return _this;\n }\n /* tslint:disable */\n Connector.prototype.setPortID = function (diagram, isTarget) {\n if (this.targetID && this.sourceID) {\n var targetNode = diagram.nameTable[this.targetID];\n var sourceNode = diagram.nameTable[this.sourceID];\n var ports = isTarget ? (targetNode && targetNode.ports) : (sourceNode && sourceNode.ports);\n var port = void 0;\n for (var i = 0; ports && i < ports.length; i++) {\n port = ports[parseInt(i.toString(), 10)];\n if (this.targetPortID === port.id && isTarget) {\n if ((port.constraints & PortConstraints.None) || !(port.constraints & PortConstraints.InConnect)) {\n this.targetPortID = '';\n }\n }\n else if (this.sourcePortID === port.id && !isTarget) {\n if ((port.constraints & PortConstraints.None) || !(port.constraints & PortConstraints.OutConnect)) {\n this.sourcePortID = '';\n }\n }\n }\n }\n };\n /* tslint:enable */\n /** @private */\n // tslint:disable-next-line:no-any\n Connector.prototype.init = function (diagram) {\n if (!this.id) {\n this.id = randomId();\n }\n if (this.sourcePortID) {\n this.setPortID(diagram);\n }\n if (this.targetPortID) {\n this.setPortID(diagram, true);\n }\n var bpmnElement;\n var container = new Canvas();\n var segment = new PathElement();\n segment.id = this.id + '_path';\n var srcDecorator = new PathElement();\n var targetDecorator = new PathElement();\n segment = this.getSegmentElement(this, segment);\n //let bounds: Rect;\n var points = [];\n points = this.type === 'Bezier' ? this.intermediatePoints : this.getConnectorPoints(this.type);\n points = this.clipDecorators(this, points);\n var bounds = Rect.toBounds(points);\n container.width = bounds.width;\n container.height = bounds.height;\n container.offsetX = bounds.x + container.pivot.x * bounds.width;\n container.offsetY = bounds.y + container.pivot.y * bounds.height;\n switch (this.shape.type) {\n case 'Bpmn':\n // eslint-disable-next-line no-case-declarations\n var flow = this.shape.flow;\n switch (flow) {\n case 'Sequence':\n bpmnElement = this.getBpmnSequenceFlow();\n break;\n case 'Association':\n bpmnElement = new PathElement();\n bpmnElement.visible = false;\n this.getBpmnAssociationFlow();\n break;\n case 'Message':\n bpmnElement = this.getBpmnMessageFlow();\n segment = this.getSegmentElement(this, segment);\n this.updateShapePosition(this, bpmnElement);\n break;\n }\n break;\n case 'UmlActivity':\n // eslint-disable-next-line no-case-declarations\n var activityFlow = this.shape.flow;\n switch (activityFlow) {\n case 'Object':\n this.getUMLObjectFlow();\n break;\n case 'Exception':\n this.getUMLExceptionFlow(segment);\n break;\n }\n break;\n case 'UmlClassifier':\n this.getConnectorRelation();\n break;\n }\n var anglePoints = this.intermediatePoints;\n if (this.type === 'Bezier') {\n var firstSegment = this.segments[0];\n var lastSegment = this.segments[this.segments.length - 1];\n anglePoints = [!Point.isEmptyPoint(lastSegment.point2) ? lastSegment.point2 : lastSegment.bezierPoint2,\n !Point.isEmptyPoint(firstSegment.point1) ? firstSegment.point1 : firstSegment.bezierPoint1];\n }\n var accessContent = 'getDescription';\n var getDescription = diagram[\"\" + accessContent];\n //const strokeWidth: number = this.sourceWrapper ? this.sourceWrapper.style.strokeWidth / 2 / 2 : 0;\n srcDecorator = this.getDecoratorElement(points[0], anglePoints[1], this.sourceDecorator, true, getDescription);\n targetDecorator = this.getDecoratorElement(points[points.length - 1], anglePoints[anglePoints.length - 2], this.targetDecorator, false, getDescription);\n srcDecorator.id = this.id + '_srcDec';\n targetDecorator.id = this.id + '_tarDec';\n segment.style = this.style;\n /* tslint:disable:no-string-literal */\n segment.style['fill'] = 'transparent';\n if (getDescription !== undefined) {\n // tslint:disable-next-line:no-any\n var wrapperContent = getDescription(this, diagram);\n segment.description = wrapperContent ? wrapperContent : this.id;\n }\n container.style.strokeColor = 'transparent';\n container.style.fill = 'transparent';\n container.style.strokeWidth = 0;\n container.children = [segment, srcDecorator, targetDecorator];\n container.id = this.id;\n if (bpmnElement !== undefined) {\n container.children.push(bpmnElement);\n }\n container.offsetX = segment.offsetX;\n container.offsetY = segment.offsetY;\n container.width = segment.width;\n container.height = segment.height;\n for (var i = 0; this.annotations !== undefined, i < this.annotations.length; i++) {\n container.children.push(this.getAnnotationElement(this.annotations[parseInt(i.toString(), 10)], this.intermediatePoints, bounds, getDescription, diagram.element.id, diagram.annotationTemplate));\n }\n for (var i = 0; this.fixedUserHandles !== undefined, i < this.fixedUserHandles.length; i++) {\n container.children.push(this.getFixedUserHandle(this.fixedUserHandles[parseInt(i.toString(), 10)], this.intermediatePoints, bounds, diagram.fixedUserHandleTemplate, diagram.element.id));\n }\n // Feature 826644: Support to add ports to the connector.\n this.initPorts(getDescription, container, bounds);\n this.wrapper = container;\n return container;\n };\n /** @private */\n Connector.prototype.initPorts = function (accessibilityContent, container, bounds) {\n for (var i = 0; this.ports !== undefined, i < this.ports.length; i++) {\n container.children.push(this.initPort(this.ports[parseInt(i.toString(), 10)], this.intermediatePoints, bounds, accessibilityContent));\n }\n };\n // Feature 826644: Support to add ports to the connector. Added below method to init the connector port.\n /** @private */\n Connector.prototype.initPort = function (ports, points, bounds, accessibilityContent) {\n var portWrapper = new PathElement();\n portWrapper.height = ports.height;\n portWrapper.width = ports.width;\n portWrapper.margin = ports.margin;\n var pathdata = (ports.shape === 'Custom') ? ports.pathData : getPortShape(ports.shape);\n portWrapper.data = pathdata;\n portWrapper.horizontalAlignment = ports.horizontalAlignment;\n portWrapper.verticalAlignment = ports.verticalAlignment;\n // eslint-disable-next-line prefer-const\n portWrapper = this.initPortWrapper(ports, points, bounds, portWrapper, this);\n // tslint:disable-next-line:no-any\n var wrapperContent;\n var contentAccessibility = getFunction(accessibilityContent);\n if (contentAccessibility) {\n wrapperContent = contentAccessibility(portWrapper, this);\n }\n portWrapper.description = wrapperContent ? wrapperContent : portWrapper.id;\n portWrapper.elementActions = portWrapper.elementActions | ElementAction.ElementIsPort;\n portWrapper.isPathPort = true;\n return portWrapper;\n };\n // Feature 826644: Support to add ports to the connector. Added below method to init the connector portwrapper.\n /** @private */\n Connector.prototype.initPortWrapper = function (ports, points, bounds, portContent, Connector) {\n ports.id = ports.id || randomId();\n // Creates port element\n var pivotPoint = { x: 0, y: 0 };\n var getPointloop = getPortsPosition(points, ports);\n var newPoint = getPointloop.point;\n portContent.id = this.id + '_' + (ports.id);\n var style = ports.style;\n portContent.style = {\n fill: style.fill, strokeColor: style.strokeColor, gradient: null,\n opacity: style.opacity, strokeDashArray: style.strokeDashArray, strokeWidth: style.strokeWidth\n };\n if (bounds.width === 0) {\n bounds.width = this.style.strokeWidth;\n }\n if (bounds.height === 0) {\n bounds.height = this.style.strokeWidth;\n }\n var offsetPoint = { x: ((newPoint.x - bounds.x) / bounds.width), y: ((newPoint.y - bounds.y) / bounds.height) };\n pivotPoint.x = bounds.width * offsetPoint.x;\n pivotPoint.y = bounds.height * offsetPoint.y;\n var align = alignLabelOnSegments(ports, getPointloop.angle, points);\n var hAlign = align.hAlign;\n var vAlign = align.vAlign;\n var horizor;\n var verzor;\n if (hAlign === 'left') {\n horizor = 'Left';\n pivotPoint.x += ports.displacement.x;\n }\n else if (hAlign === 'right') {\n horizor = 'Right';\n pivotPoint.x -= ports.displacement.x;\n }\n else if (hAlign === 'center') {\n horizor = 'Center';\n }\n if (vAlign === 'top') {\n verzor = 'Top';\n pivotPoint.y += ports.displacement.y;\n }\n else if (vAlign === 'bottom') {\n verzor = 'Bottom';\n pivotPoint.y -= ports.displacement.y;\n }\n else if (vAlign === 'center') {\n verzor = 'Center';\n }\n portContent.horizontalAlignment = horizor;\n portContent.verticalAlignment = verzor;\n if (Connector && Connector.flipMode !== 'Label' && Connector.flipMode !== 'None') {\n portContent = updatePortEdges(portContent, this.flip, ports);\n }\n else {\n portContent = updatePortEdges(portContent, 'None', ports);\n }\n portContent.float = true;\n portContent.connectionDirection = ports.connectionDirection;\n portContent.setOffsetWithRespectToBounds(pivotPoint.x, pivotPoint.y, 'Absolute');\n portContent.relativeMode = 'Point';\n portContent.visible = checkPortRestriction(ports, PortVisibility.Visible) &&\n !checkPortRestriction(ports, PortVisibility.Hover) && !checkPortRestriction(ports, PortVisibility.Connect) ? true : false;\n portContent.elementActions = portContent.elementActions | ElementAction.ElementIsPort;\n return portContent;\n };\n Connector.prototype.getConnectorRelation = function () {\n var shape = this.shape;\n if (shape.relationship === 'Association') {\n this.segments[0].type = 'Straight';\n this.sourceDecorator.shape = 'None';\n this.targetDecorator.shape = 'Arrow';\n }\n else if (shape.relationship === 'Inheritance') {\n this.segments[0].type = 'Orthogonal';\n this.sourceDecorator.shape = 'None';\n this.targetDecorator.shape = 'Arrow';\n }\n else if (shape.relationship === 'Composition') {\n this.segments[0].type = 'Orthogonal';\n this.sourceDecorator.shape = 'Diamond';\n this.targetDecorator.shape = 'None';\n }\n else if (shape.relationship === 'Aggregation') {\n this.segments[0].type = 'Orthogonal';\n this.sourceDecorator.shape = 'Diamond';\n this.targetDecorator.shape = 'None';\n }\n else if (shape.relationship === 'Dependency') {\n this.segments[0].type = 'Orthogonal';\n this.sourceDecorator.shape = 'None';\n this.targetDecorator.shape = 'OpenArrow';\n }\n else if (shape.relationship === 'Realization') {\n this.segments[0].type = 'Orthogonal';\n this.sourceDecorator.shape = 'None';\n this.targetDecorator.shape = 'Arrow';\n }\n if (shape.associationType === 'BiDirectional') {\n this.sourceDecorator.shape = 'None';\n this.targetDecorator.shape = 'None';\n }\n var text1 = '';\n //let lower: MultiplicityLabelModel;\n //let upper: MultiplicityLabelModel;\n var sourceText = '';\n var targetText = '';\n var text = '';\n if (shape.multiplicity.source) {\n shape.multiplicity.source.lowerBounds = shape.multiplicity.source.lowerBounds;\n shape.multiplicity.source.upperBounds = shape.multiplicity.source.upperBounds;\n }\n if (shape.multiplicity.target) {\n shape.multiplicity.target.lowerBounds = shape.multiplicity.target.lowerBounds;\n shape.multiplicity.target.upperBounds = shape.multiplicity.target.upperBounds;\n }\n var lower = shape.multiplicity.source;\n var upper = shape.multiplicity.target;\n text = lower.upperBounds ? lower.lowerBounds + '...' + lower.upperBounds : lower.lowerBounds;\n text1 = upper.upperBounds ? upper.lowerBounds + '...' + upper.upperBounds : upper.lowerBounds;\n if (shape.multiplicity.type === 'ManyToOne') {\n shape.multiplicity.target.optional = false;\n sourceText = text ? text : '*';\n targetText = '1';\n }\n if (shape.multiplicity.type === 'OneToMany') {\n shape.multiplicity.source.optional = false;\n targetText = text1 ? text1 : '*';\n sourceText = '1';\n }\n //831806 -Added ManyToMany relationship for UML class connector annotation label\n if (shape.multiplicity.type === 'ManyToMany') {\n sourceText = text ? text : '*';\n targetText = text1 ? text1 : '*';\n }\n if (shape.multiplicity.type === 'OneToOne') {\n shape.multiplicity.target.optional = false;\n shape.multiplicity.source.optional = false;\n sourceText = '1';\n targetText = '1';\n }\n this.annotations = [\n {\n id: this.id + 'sourcelabel', content: sourceText, offset: 0, alignment: 'Before',\n margin: { right: 5, bottom: 5 }\n },\n {\n id: this.id + 'targetlabel', content: targetText, offset: 1, alignment: 'Before',\n margin: { right: 5, bottom: 5 }\n }\n ];\n };\n Connector.prototype.getBpmnSequenceFlow = function () {\n var segment = new PathElement();\n var pathseq = new PathElement();\n if ((this.shape.sequence) === 'Normal' && this.type !== 'Bezier') {\n this.targetDecorator.shape = 'Arrow';\n }\n if ((this.shape.sequence) === 'Default') {\n segment = this.getSegmentElement(this, segment);\n var anglePoints = this.intermediatePoints;\n pathseq = updatePathElement(anglePoints, this);\n this.targetDecorator.shape = 'Arrow';\n }\n if ((this.shape.sequence) === 'Conditional') {\n this.targetDecorator.shape = 'Arrow';\n this.sourceDecorator.shape = 'Diamond';\n pathseq.id = this.id + this.shape.type;\n }\n return pathseq;\n };\n /** @private */\n Connector.prototype.getUMLObjectFlow = function () {\n if (this.annotations) {\n for (var i = 0; i < this.annotations.length; i++) {\n this.annotations[parseInt(i.toString(), 10)].content = '[' + this.annotations[parseInt(i.toString(), 10)].content + ']';\n }\n }\n };\n /** @private */\n Connector.prototype.getUMLExceptionFlow = function (segment) {\n this.type = 'Straight';\n var height = (this.shape.exceptionFlowHeight) / 2;\n var midPt = { x: (this.targetPoint.x + this.sourcePoint.x) / 2, y: (this.targetPoint.y + this.sourcePoint.y) / 2 };\n var xDist = midPt.x - this.sourcePoint.x;\n var yDist = midPt.y - this.sourcePoint.y;\n var dist = Math.sqrt(xDist * xDist + yDist * yDist);\n var fractionOfTotal = (height) / dist;\n var midPt2 = { x: midPt.x - xDist * fractionOfTotal, y: midPt.y - yDist * fractionOfTotal };\n var midPt1 = { x: midPt.x + xDist * fractionOfTotal, y: midPt.y + yDist * fractionOfTotal };\n var matrix = identityMatrix();\n rotateMatrix(matrix, 315, midPt.x, midPt.y);\n this.segments = [];\n var segments = new StraightSegment(this, 'segments', { type: 'Straight', point: transformPointByMatrix(matrix, midPt1) }, true);\n (this.segments).push(segments);\n segments = new StraightSegment(this, 'segments', { type: 'Straight', point: transformPointByMatrix(matrix, midPt2) }, true);\n (this.segments).push(segments);\n segment = this.getSegmentElement(this, segment);\n };\n Connector.prototype.getBpmnAssociationFlow = function () {\n if ((this.shape.association) === 'Default') {\n this.targetDecorator.shape = 'None';\n this.style.strokeDashArray = '2 2';\n }\n if ((this.shape.association) === 'Directional') {\n this.targetDecorator.shape = 'OpenArrow';\n this.style.strokeDashArray = '2 2';\n }\n if ((this.shape.association) === 'BiDirectional') {\n this.targetDecorator.shape = 'OpenArrow';\n this.sourceDecorator.shape = 'OpenArrow';\n this.style.strokeDashArray = '2 2';\n }\n };\n // 882378 - Added below code to provide template support for fixedUserHandles in connectors\n /** @private */\n Connector.prototype.getFixedUserHandle = function (fixedUserHandle, points, bounds, fixedUserHandleTemplate, diagramId) {\n var fixedUserHandleContainer;\n if (fixedUserHandle.pathData === '' && fixedUserHandleTemplate) {\n fixedUserHandleContainer = new DiagramHtmlElement(this.id, diagramId, undefined, fixedUserHandleTemplate);\n fixedUserHandleContainer.isTemplate = true;\n fixedUserHandleContainer.template = getContent(fixedUserHandleContainer, true, fixedUserHandle);\n fixedUserHandle.id = fixedUserHandle.id || randomId();\n fixedUserHandleContainer.id = this.id + '_' + fixedUserHandle.id;\n }\n else {\n fixedUserHandleContainer = new Canvas();\n var children = [];\n fixedUserHandleContainer.children = children;\n fixedUserHandle.id = fixedUserHandle.id || randomId();\n fixedUserHandleContainer.id = this.id + '_' + fixedUserHandle.id;\n var symbolIcon = initFixedUserHandlesSymbol(fixedUserHandle, fixedUserHandleContainer);\n fixedUserHandleContainer.children.push(symbolIcon);\n }\n fixedUserHandleContainer.float = true;\n fixedUserHandleContainer.visible = fixedUserHandle.visibility;\n fixedUserHandleContainer.width = fixedUserHandle.width;\n fixedUserHandleContainer.height = fixedUserHandle.height;\n fixedUserHandleContainer.style.strokeWidth = fixedUserHandle.handleStrokeWidth;\n fixedUserHandleContainer.style.fill = fixedUserHandle.fill;\n fixedUserHandleContainer.style.strokeColor = fixedUserHandle.handleStrokeColor;\n fixedUserHandleContainer.cornerRadius = fixedUserHandle.cornerRadius;\n this.updateAnnotation(fixedUserHandle, points, bounds, fixedUserHandleContainer);\n fixedUserHandleContainer.description = fixedUserHandleContainer.id;\n return fixedUserHandleContainer;\n };\n Connector.prototype.getBpmnMessageFlow = function () {\n var segmentMessage = new PathElement();\n this.targetDecorator.shape = 'Arrow';\n this.targetDecorator.width = 10;\n this.targetDecorator.height = 10;\n this.sourceDecorator.shape = 'Circle';\n this.sourceDecorator.style.fill = 'white';\n this.targetDecorator.style.fill = 'white';\n if (((this.shape.message) === 'InitiatingMessage') ||\n ((this.shape.message) === 'NonInitiatingMessage')) {\n segmentMessage.id = this.id + '_' + (this.shape.message);\n segmentMessage.width = 25;\n segmentMessage.height = 15;\n segmentMessage.data = 'M0,0 L19.8,12.8 L40,0 L0, 0 L0, 25.5 L40, 25.5 L 40, 0';\n segmentMessage.horizontalAlignment = 'Center';\n segmentMessage.verticalAlignment = 'Center';\n segmentMessage.transform = Transform.Self;\n segmentMessage.style.fill = (this.shape.message) === 'NonInitiatingMessage' ? 'lightgrey' : 'white';\n }\n return segmentMessage;\n };\n /** @private */\n Connector.prototype.distance = function (pt1, pt2) {\n return findDistance(pt1, pt2);\n };\n /** @private */\n Connector.prototype.findPath = function (sourcePt, targetPt) {\n return findPath(sourcePt, targetPt);\n };\n /** @private */\n Connector.prototype.getAnnotationElement = function (annotation, points, bounds, getDescription, diagramId, annotationTemplate) {\n annotation.id = annotation.id || randomId();\n var textele;\n //Removed isBlazor code\n if (diagramId && (annotation.template || annotation.annotationType === 'Template'\n || (annotationTemplate && annotation.content === ''))) {\n // Task 834121: Content-Security-Policy support for diagram\n var diagramElement = document.getElementById(diagramId);\n var instance = 'ej2_instances';\n var diagram = diagramElement[\"\" + instance][0];\n textele = new DiagramHtmlElement(this.id, diagramId, annotation.id, annotationTemplate);\n if (annotation.template && typeof annotation.template === 'function' && diagram.isReact) {\n textele.templateFn = compile(annotation.template);\n textele.isTemplate = true;\n }\n //908155-Annotation template update wrongly while do interaction for connector\n if (annotation.height === undefined && annotation.annotationType === 'String' && (annotation.template || annotation.content === '')) {\n annotation.height = bounds.height;\n }\n textele = getTemplateContent(textele, annotation, annotationTemplate, diagram);\n }\n else {\n textele = new TextElement();\n //876030 - Adding hyperlink for connectors\n var link = annotation.hyperlink.link ? annotation.hyperlink : undefined;\n textele.style = annotation.style;\n textele.style.color = link ? link.color || textele.hyperlink.color : annotation.style.color;\n textele.hyperlink.link = annotation.hyperlink.link || undefined;\n textele.hyperlink.hyperlinkOpenState = annotation.hyperlink.hyperlinkOpenState || undefined;\n textele.hyperlink.textDecoration = annotation.hyperlink.textDecoration || undefined;\n textele.content = link ? link.content ||\n textele.hyperlink.link : annotation.content;\n }\n textele.constraints = annotation.constraints;\n textele.visible = annotation.visibility;\n textele.annotationVisibility = textele.visible ? 'Visible' : 'Collapsed';\n textele.rotateAngle = annotation.rotateAngle;\n textele.horizontalAlignment = annotation.horizontalAlignment;\n textele.verticalAlignment = annotation.verticalAlignment;\n textele.width = annotation.width;\n textele.height = annotation.height;\n if (bounds.width !== undefined && !annotation.template) {\n textele.width = (annotation.width || bounds.width) - annotation.margin.left - annotation.margin.right;\n }\n textele.margin = annotation.margin;\n textele.id = this.id + '_' + annotation.id;\n if (bounds.width === 0) {\n bounds.width = this.style.strokeWidth;\n }\n if (bounds.height === 0) {\n bounds.height = this.style.strokeWidth;\n }\n // tslint:disable-next-line:no-any\n var wrapperContent;\n var description = getFunction(getDescription);\n if (description) {\n wrapperContent = description(annotation, this);\n }\n textele.description = wrapperContent ? wrapperContent : textele.id;\n this.updateAnnotation(annotation, points, bounds, textele);\n return textele;\n };\n /** @private */\n Connector.prototype.updateAnnotation = function (annotation, points, bounds, textElement, canRefresh) {\n //let getPointloop: SegmentInfo;\n //let align: Alignment; let hAlign: string;\n var pivotPoint = { x: 0, y: 0 };\n //Bug 881512: Wrapping of the connector annotation at run time not working properly.\n //To refresh the annotation at run time while moving connector end points or while moving nodes connected with connector.\n if ((textElement instanceof TextElement) && (!canRefresh)) {\n textElement.refreshTextElement();\n }\n textElement.width = (annotation.width || bounds.width);\n var getPointloop = getAnnotationPosition(points, annotation);\n var newPoint = getPointloop.point;\n if (annotation instanceof PathAnnotation && annotation.segmentAngle) {\n textElement.rotateAngle = annotation.rotateAngle + getPointloop.angle;\n textElement.rotateAngle = (textElement.rotateAngle + 360) % 360;\n }\n if (bounds.width === 0) {\n bounds.width = this.style.strokeWidth;\n }\n if (bounds.height === 0) {\n bounds.height = this.style.strokeWidth;\n }\n var offsetPoint = { x: ((newPoint.x - bounds.x) / bounds.width), y: ((newPoint.y - bounds.y) / bounds.height) };\n pivotPoint.x = bounds.width * offsetPoint.x;\n pivotPoint.y = bounds.height * offsetPoint.y;\n var align = alignLabelOnSegments(annotation, getPointloop.angle, points);\n var hAlign = align.hAlign;\n var vAlign = align.vAlign;\n var horizor;\n var verzor;\n if (hAlign === 'left') {\n horizor = 'Left';\n pivotPoint.x += annotation.displacement.x;\n }\n else if (hAlign === 'right') {\n horizor = 'Right';\n pivotPoint.x -= annotation.displacement.x;\n }\n else if (hAlign === 'center') {\n horizor = 'Center';\n }\n if (vAlign === 'top') {\n verzor = 'Top';\n pivotPoint.y += annotation.displacement.y;\n }\n else if (vAlign === 'bottom') {\n verzor = 'Bottom';\n pivotPoint.y -= annotation.displacement.y;\n }\n else if (vAlign === 'center') {\n verzor = 'Center';\n }\n textElement.horizontalAlignment = horizor;\n textElement.verticalAlignment = verzor;\n textElement.setOffsetWithRespectToBounds(pivotPoint.x, pivotPoint.y, 'Absolute');\n textElement.relativeMode = 'Point';\n };\n /** @private */\n Connector.prototype.getConnectorPoints = function (type, points, layoutOrientation, lineDistribution) {\n //const width: number = Math.abs(this.sourcePoint.x - this.targetPoint.x);\n //const height: number = Math.abs(this.sourcePoint.y - this.targetPoint.y);\n points = findConnectorPoints(this, layoutOrientation, lineDistribution);\n var newPoints = points.slice(0);\n if (newPoints && newPoints.length > 0) {\n this.sourcePoint = newPoints[0];\n this.targetPoint = newPoints[newPoints.length - 1];\n }\n return newPoints;\n };\n /** @private */\n Connector.prototype.clipDecorator = function (connector, points, isSource, diagramAction) {\n var point = { x: 0, y: 0 };\n var start = { x: 0, y: 0 };\n var end = { x: 0, y: 0 };\n var length = points.length;\n start = !isSource ? points[length - 1] : points[0];\n end = !isSource ? points[length - 2] : points[1];\n var len = Point.distancePoints(start, end);\n len = (len === 0) ? 1 : len;\n var strokeWidth = 1;\n var node = isSource ? connector.sourceWrapper : connector.targetWrapper;\n if (node) {\n strokeWidth = node.style.strokeWidth;\n if (diagramAction && ((diagramAction) & DiagramAction.DecoratorPropertyChange)) {\n strokeWidth = 1;\n }\n }\n var width = strokeWidth - 1;\n point.x = (Math.round(start.x + width * (end.x - start.x) / len));\n point.y = (Math.round(start.y + width * (end.y - start.y) / len));\n if ((isSource && connector.sourceDecorator.shape !== 'None') ||\n (!isSource && connector.targetDecorator.shape !== 'None')) {\n point = Point.adjustPoint(point, end, true, (diagramAction & DiagramAction.DecoratorPropertyChange) ? 0 : (strokeWidth / 2));\n }\n return point;\n };\n /** @private */\n Connector.prototype.clipDecorators = function (connector, pts, diagramAction) {\n if (connector.sourceDecorator.shape !== 'None') {\n pts[0] = this.clipDecorator(connector, pts, true, diagramAction);\n }\n if (connector.targetDecorator.shape !== 'None') {\n pts[pts.length - 1] = this.clipDecorator(connector, pts, false, diagramAction);\n }\n return pts;\n };\n /** @private */\n Connector.prototype.updateSegmentElement = function (connector, points, element, diagramActions) {\n var bounds = new Rect();\n //let point: PointModel[];\n var segmentPath = this.getSegmentPath(connector, points, diagramActions);\n if (connector.type === 'Bezier') {\n if (this.segments.length > 0) {\n for (var i = 0; i < this.segments.length; i++) {\n var segment = this.segments[parseInt(i.toString(), 10)];\n var connectorSegment = connector.segments[parseInt(i.toString(), 10)];\n // eslint-disable-next-line max-len\n var point1 = !Point.isEmptyPoint(segment.point1) ? connectorSegment.point1 : connectorSegment.bezierPoint1;\n // eslint-disable-next-line max-len\n var point2 = !Point.isEmptyPoint(segment.point2) ? connectorSegment.point2 : connectorSegment.bezierPoint2;\n bounds.uniteRect(getBezierBounds(segment.points[0], point1, point2, segment.points[1], connector));\n }\n }\n }\n else {\n bounds = Rect.toBounds(points);\n }\n element.width = bounds.width;\n element.height = bounds.height;\n element.offsetX = bounds.x + element.width / 2;\n element.offsetY = bounds.y + element.height / 2;\n element.data = segmentPath;\n if (connector.wrapper) {\n connector.wrapper.offsetX = element.offsetX;\n connector.wrapper.offsetY = element.offsetY;\n connector.wrapper.width = bounds.width;\n connector.wrapper.height = bounds.height;\n }\n return element;\n };\n /** @private */\n Connector.prototype.getSegmentElement = function (connector, segmentElement, layoutOrientation, diagramActions, isFlip) {\n if (isFlip === void 0) { isFlip = true; }\n //let bounds: Rect; let segmentPath: string;\n var points = [];\n if (isFlip) {\n flipConnector(connector);\n }\n points = this.getConnectorPoints(connector.type, undefined, layoutOrientation);\n this.intermediatePoints = points;\n segmentElement.staticSize = true;\n segmentElement = this.updateSegmentElement(connector, points, segmentElement, diagramActions);\n return segmentElement;\n };\n /** @private */\n Connector.prototype.getDecoratorElement = function (offsetPoint, adjacentPoint, decorator, isSource, getDescription) {\n var decEle = new PathElement();\n decEle.transform = Transform.Self;\n this.updateDecoratorElement(decEle, offsetPoint, adjacentPoint, decorator);\n if (getDescription !== undefined) {\n // tslint:disable-next-line:no-any\n var wrapperContent = getDescription(decorator, this);\n decEle.description = wrapperContent ? wrapperContent :\n ('Specifies the ' + isSource ? 'source' : 'target' + 'port element of the connector');\n }\n return decEle;\n };\n Connector.prototype.bridgePath = function (connector, path, pointIndex) {\n var pathData = path;\n if (connector.bridges.length > 0) {\n if (connector.type === 'Straight' && connector.segments.length < 2) {\n for (var n = 0; n < connector.bridges.length; n++) {\n var bridge = connector.bridges[parseInt(n.toString(), 10)];\n if (!bridge.rendered) {\n pathData += ' L' + bridge.startPoint.x + ' ' + bridge.startPoint.y;\n pathData += bridge.path;\n bridge.rendered = true;\n }\n }\n }\n else if (connector.type === 'Orthogonal' || (connector.type === 'Straight' && connector.segments.length > 1)) {\n for (var n = 0; n < connector.bridges.length; n++) {\n var bridge = connector.bridges[parseInt(n.toString(), 10)];\n if (bridge.segmentPointIndex === pointIndex) {\n if (!bridge.rendered) {\n if (bridge.segmentPointIndex === pointIndex) {\n pathData += ' L' + bridge.startPoint.x + ' ' + bridge.startPoint.y;\n pathData += bridge.path;\n bridge.rendered = true;\n }\n }\n }\n }\n }\n }\n return pathData;\n };\n /** @private */\n Connector.prototype.updateDecoratorElement = function (element, pt, adjacentPoint, decorator) {\n //let getPath: string;// let angle: number;\n element.offsetX = pt.x;\n element.offsetY = pt.y;\n var angle = Point.findAngle(pt, adjacentPoint);\n var getPath = getDecoratorShape(decorator.shape, decorator);\n var size = new Size(decorator.width, decorator.height);\n element.pivot.x = decorator.pivot.x;\n element.pivot.y = decorator.pivot.y;\n element.style = decorator.style;\n element.rotateAngle = angle;\n element.data = getPath;\n element.canMeasurePath = true;\n element.width = size.width;\n element.height = size.height;\n };\n /** @private */\n Connector.prototype.getSegmentPath = function (connector, points, diagramAction) {\n var path = '';\n var getPt;\n var end;\n var st;\n var pts = [];\n var j = 0;\n while (j < points.length) {\n pts.push({ x: points[parseInt(j.toString(), 10)].x, y: points[parseInt(j.toString(), 10)].y });\n j++;\n }\n for (var m = 0; m < connector.bridges.length; m++) {\n var bridge = connector.bridges[parseInt(m.toString(), 10)];\n bridge.rendered = false;\n }\n pts = this.clipDecorators(connector, pts, diagramAction);\n if (this.cornerRadius > 0 && this.type !== 'Bezier') {\n for (var j_1 = 0; j_1 < pts.length - 1; j_1++) {\n getPt = pts[parseInt(j_1.toString(), 10)];\n if (j_1 === 0) {\n path = 'M' + getPt.x + ' ' + getPt.y;\n }\n var segLength = Point.distancePoints(pts[parseInt(j_1.toString(), 10)], pts[j_1 + 1]);\n if (segLength > 0) {\n if (j_1 < pts.length - 2) {\n if (segLength < this.cornerRadius * 2) {\n end = Point.adjustPoint(pts[parseInt(j_1.toString(), 10)], pts[j_1 + 1], false, segLength / 2);\n }\n else {\n end = Point.adjustPoint(pts[parseInt(j_1.toString(), 10)], pts[j_1 + 1], false, this.cornerRadius);\n }\n }\n else {\n end = pts[j_1 + 1];\n }\n if (j_1 > 0) {\n if (segLength < this.cornerRadius * 2) {\n st = Point.adjustPoint(pts[parseInt(j_1.toString(), 10)], pts[j_1 + 1], true, segLength / 2);\n if (j_1 < pts.length - 2) {\n end = null;\n }\n }\n else {\n st = Point.adjustPoint(pts[parseInt(j_1.toString(), 10)], pts[j_1 + 1], true, this.cornerRadius);\n }\n }\n if (st) {\n path += 'Q' + getPt.x + ' ' + getPt.y + ' ' + st.x + ' ' + st.y;\n }\n if (end) {\n if (connector.bridges.length > 0) {\n path = this.bridgePath(connector, path, j_1);\n if (connector.type === 'Orthogonal') {\n path = this.bridgePath(connector, path, j_1 + 1);\n }\n }\n path += ' L' + end.x + ' ' + end.y;\n }\n }\n }\n }\n else {\n if (this.type === 'Bezier') {\n var isrezise = void 0;\n var isDrawing = void 0;\n if (this.parentObj.element) {\n var action = this.parentObj.element.ej2_instances[0]['eventHandler'].action;\n isrezise = (this.parentObj.element.ej2_instances[0]['eventHandler']).tool instanceof ResizeTool;\n isDrawing = action.includes('PortDraw') || action.includes('Drag');\n }\n var direction = void 0;\n var segments = this.segments;\n for (var j_2 = 0; j_2 < segments.length; j_2++) {\n if (pts.length > 2) {\n segments[parseInt(j_2.toString(), 10)].bezierPoint1 = { x: 0, y: 0 };\n segments[parseInt(j_2.toString(), 10)].bezierPoint2 = { x: 0, y: 0 };\n }\n if (Point.isEmptyPoint(segments[parseInt(j_2.toString(), 10)].point1) &&\n !segments[parseInt(j_2.toString(), 10)].vector1.angle && !segments[parseInt(j_2.toString(), 10)].vector1.distance) {\n if ((connector.sourceID || this.sourcePortID) && this.sourceWrapper && !isDrawing && !isrezise) {\n direction = getDirection$1(this.sourceWrapper.bounds, pts[parseInt(j_2.toString(), 10)], true);\n }\n segments[parseInt(j_2.toString(), 10)].bezierPoint1 = getBezierPoints(pts[parseInt(j_2.toString(), 10)], pts[j_2 + 1], direction);\n }\n else if (segments[parseInt(j_2.toString(), 10)].vector1.angle\n || segments[parseInt(j_2.toString(), 10)].vector1.distance) {\n segments[parseInt(j_2.toString(), 10)].bezierPoint1\n = Point.transform(pts[parseInt(j_2.toString(), 10)], segments[parseInt(j_2.toString(), 10)].vector1.angle, segments[parseInt(j_2.toString(), 10)].vector1.distance);\n }\n else {\n segments[parseInt(j_2.toString(), 10)].bezierPoint1 = {\n x: segments[parseInt(j_2.toString(), 10)].point1.x || segments[parseInt(j_2.toString(), 10)].bezierPoint1.x,\n y: segments[parseInt(j_2.toString(), 10)].point1.y || segments[parseInt(j_2.toString(), 10)].bezierPoint1.y\n };\n }\n if (Point.isEmptyPoint(segments[parseInt(j_2.toString(), 10)].point2) &&\n !segments[parseInt(j_2.toString(), 10)].vector2.angle && !segments[parseInt(j_2.toString(), 10)].vector2.distance) {\n if ((connector.targetID || this.targetPortID) && this.targetWrapper && !isDrawing && !isrezise) {\n direction = getDirection$1(this.targetWrapper.bounds, pts[j_2 + 1], true);\n }\n segments[parseInt(j_2.toString(), 10)].bezierPoint2 = getBezierPoints(pts[j_2 + 1], pts[parseInt(j_2.toString(), 10)], direction);\n }\n else if (segments[parseInt(j_2.toString(), 10)].vector2.angle\n || segments[parseInt(j_2.toString(), 10)].vector2.distance) {\n segments[parseInt(j_2.toString(), 10)].bezierPoint2\n = Point.transform(pts[j_2 + 1], segments[parseInt(j_2.toString(), 10)].vector2.angle, segments[parseInt(j_2.toString(), 10)].vector2.distance);\n }\n else {\n segments[parseInt(j_2.toString(), 10)].bezierPoint2 = {\n x: segments[parseInt(j_2.toString(), 10)].point2.x || segments[parseInt(j_2.toString(), 10)].bezierPoint2.x,\n y: segments[parseInt(j_2.toString(), 10)].point2.y || segments[parseInt(j_2.toString(), 10)].bezierPoint2.y\n };\n }\n }\n pts.splice(1, 0, { x: segments[0].bezierPoint1.x, y: segments[0].bezierPoint1.y });\n pts.splice(pts.length - 1, 0, {\n x: segments[segments.length - 1].bezierPoint2.x, y: segments[segments.length - 1].bezierPoint2.y\n });\n pts = this.clipDecorators(connector, pts, diagramAction);\n for (var j_3 = 0; j_3 < segments.length; j_3++) {\n if (j_3 === 0) {\n path = 'M' + pts[0].x + ' ' + pts[0].y;\n }\n var lastPoint = (j_3 === segments.length - 1) ? pts[pts.length - 1].x + ' ' + pts[pts.length - 1].y :\n segments[parseInt(j_3.toString(), 10)].points[segments[parseInt(j_3.toString(), 10)].points.length - 1].x + ' ' + segments[parseInt(j_3.toString(), 10)].points[segments[parseInt(j_3.toString(), 10)].points.length - 1].y;\n path += 'C' +\n segments[parseInt(j_3.toString(), 10)].bezierPoint1.x + ' ' + segments[parseInt(j_3.toString(), 10)].bezierPoint1.y + ' ' + segments[parseInt(j_3.toString(), 10)].bezierPoint2.x + ' '\n + segments[parseInt(j_3.toString(), 10)].bezierPoint2.y + ' ' + lastPoint;\n }\n }\n else {\n for (var k = 0; k < pts.length; k++) {\n getPt = pts[parseInt(k.toString(), 10)];\n if (k === 0) {\n path = 'M' + getPt.x + ' ' + getPt.y;\n }\n if (k > 0) {\n path = this.bridgePath(connector, path, k);\n path += ' ' + 'L' + getPt.x + ' ' + getPt.y;\n }\n }\n }\n }\n return path;\n };\n /** @private */\n Connector.prototype.updateShapeElement = function (connector) {\n var element;\n switch (connector.shape.type) {\n case 'Bpmn':\n if (connector.wrapper.children[3] instanceof PathElement) {\n element = connector.wrapper.children[3];\n }\n if (connector.shape.flow === 'Message') {\n this.updateShapePosition(connector, element);\n }\n break;\n case 'UmlActivity':\n if (connector.shape.flow === 'Exception') {\n this.getUMLExceptionFlow(connector.wrapper.children[0]);\n }\n break;\n }\n };\n /** @private */\n Connector.prototype.updateShapePosition = function (connector, element) {\n var segmentOffset = 0.5;\n var anglePoints = this.intermediatePoints;\n //Bug 860251: Bpmn message flow and sequence flow connector child path is not rendered properly.\n //To get the path offset of message flow.\n var offset = getPathOffset(anglePoints, element, segmentOffset);\n element.offsetX = offset.x;\n element.offsetY = offset.y;\n };\n /** @hidden */\n Connector.prototype.scale = function (sw, sh, width, height, refObject) {\n var tx = 0;\n var ty = 0;\n if (this.wrapper && this.wrapper.outerBounds) {\n var outerBounds = getOuterBounds(this);\n // EJ2-56887 - Connector do not get rendered properly in symbol palette.\n // Added the absolute command to change the connector height to positive if it is in negative value.\n var connWidth = Math.abs((this.wrapper.bounds.width || this.style.strokeWidth || 1) - 2);\n var connHeight = Math.abs((this.wrapper.bounds.height || this.style.strokeWidth || 1) - 2);\n tx = (outerBounds.width - connWidth);\n ty = (outerBounds.height - connHeight);\n sw = Math.abs((width - (Math.max(tx, ty))) / connWidth);\n sh = Math.abs((height - (Math.max(tx, ty))) / connHeight);\n tx = ty = Math.min(tx, ty);\n }\n sw = sh = Math.min(sw, sh);\n var matrix = identityMatrix();\n refObject = refObject || this.wrapper;\n rotateMatrix(matrix, -refObject.rotateAngle, refObject.offsetX, refObject.offsetY);\n scaleMatrix(matrix, sw, sh, refObject.offsetX, refObject.offsetY);\n rotateMatrix(matrix, refObject.rotateAngle, refObject.offsetX, refObject.offsetY);\n var points = transformPointsByMatrix(matrix, this.intermediatePoints);\n this.sourcePoint = points[0];\n this.targetPoint = points[points.length - 1];\n points = this.intermediatePoints = findConnectorPoints(this);\n updateConnector(this, points);\n return { x: tx, y: ty };\n };\n /**\n * @private\n * Returns the name of class Connector\n */\n Connector.prototype.getClassName = function () {\n return 'Connector';\n };\n __decorate$8([\n ComplexFactory(getConnectorType)\n ], Connector.prototype, \"shape\", void 0);\n __decorate$8([\n Property(ConnectorConstraints.Default)\n ], Connector.prototype, \"constraints\", void 0);\n __decorate$8([\n Property(10)\n ], Connector.prototype, \"bridgeSpace\", void 0);\n __decorate$8([\n Collection([], PathAnnotation)\n ], Connector.prototype, \"annotations\", void 0);\n __decorate$8([\n Complex({}, Point)\n ], Connector.prototype, \"sourcePoint\", void 0);\n __decorate$8([\n Complex({}, Point)\n ], Connector.prototype, \"targetPoint\", void 0);\n __decorate$8([\n Collection([], ConnectorFixedUserHandle)\n ], Connector.prototype, \"fixedUserHandles\", void 0);\n __decorate$8([\n CollectionFactory(getSegmentType)\n ], Connector.prototype, \"segments\", void 0);\n __decorate$8([\n Property('')\n ], Connector.prototype, \"sourceID\", void 0);\n __decorate$8([\n Property('')\n ], Connector.prototype, \"targetID\", void 0);\n __decorate$8([\n Property(10)\n ], Connector.prototype, \"hitPadding\", void 0);\n __decorate$8([\n Property(0)\n ], Connector.prototype, \"connectionPadding\", void 0);\n __decorate$8([\n Property('Straight')\n ], Connector.prototype, \"type\", void 0);\n __decorate$8([\n Property('Circle')\n ], Connector.prototype, \"segmentThumbShape\", void 0);\n __decorate$8([\n Property(10)\n ], Connector.prototype, \"segmentThumbSize\", void 0);\n __decorate$8([\n Property(0)\n ], Connector.prototype, \"cornerRadius\", void 0);\n __decorate$8([\n Complex({ shape: 'None' }, Decorator)\n ], Connector.prototype, \"sourceDecorator\", void 0);\n __decorate$8([\n Complex({ shape: 'Arrow' }, Decorator)\n ], Connector.prototype, \"targetDecorator\", void 0);\n __decorate$8([\n Complex({}, DiagramTooltip)\n ], Connector.prototype, \"tooltip\", void 0);\n __decorate$8([\n Property('')\n ], Connector.prototype, \"sourcePortID\", void 0);\n __decorate$8([\n Property('')\n ], Connector.prototype, \"targetPortID\", void 0);\n __decorate$8([\n Property(0)\n ], Connector.prototype, \"sourcePadding\", void 0);\n __decorate$8([\n Complex({}, SymbolSize)\n ], Connector.prototype, \"previewSize\", void 0);\n __decorate$8([\n Complex({}, SymbolSize)\n ], Connector.prototype, \"dragSize\", void 0);\n __decorate$8([\n Property(0)\n ], Connector.prototype, \"targetPadding\", void 0);\n __decorate$8([\n Property(13)\n ], Connector.prototype, \"connectorSpacing\", void 0);\n __decorate$8([\n Complex({ strokeWidth: 1, strokeColor: 'black' }, StrokeStyle)\n ], Connector.prototype, \"style\", void 0);\n __decorate$8([\n Property(null)\n ], Connector.prototype, \"maxSegmentThumb\", void 0);\n __decorate$8([\n Property(false)\n ], Connector.prototype, \"allowNodeOverlap\", void 0);\n __decorate$8([\n Complex({}, BezierSettings)\n ], Connector.prototype, \"bezierSettings\", void 0);\n __decorate$8([\n Collection([], PathPort)\n ], Connector.prototype, \"ports\", void 0);\n __decorate$8([\n Property(null)\n ], Connector.prototype, \"wrapper\", void 0);\n return Connector;\n}(NodeBase));\n\nvar __extends$i = (undefined && undefined.__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$9 = (undefined && undefined.__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/**\n * Represents the Ruler component that measures the Diagram objects, indicate positions, and align Diagram elements.\n * ```html\n * Show Ruler
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Ruler = /** @__PURE__ @class */ (function (_super) {\n __extends$i(Ruler, _super);\n /**\n * Constructor for creating the Ruler Component\n *\n * @param {RulerModel} options The ruler model.\n * @param {string | HTMLElement} element The ruler element.\n */\n function Ruler(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.offset = 0;\n /** @private */\n _this.scale = 1;\n return _this;\n }\n /**\n * Initializes the values of private members.\n *\n * @returns {void} Initializes the values of private members.\n * @private\n */\n Ruler.prototype.preRender = function () {\n this.unWireEvents();\n this.wireEvents();\n };\n /**\n * Renders the rulers.\n *\n * @returns {void} Renders the rulers.\n * @private\n */\n Ruler.prototype.render = function () {\n this.updateRulerGeometry();\n this.renderComplete();\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n Ruler.prototype.getModuleName = function () {\n return 'Ruler';\n };\n /**\n *To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n Ruler.prototype.destroy = function () {\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n this.element.classList.remove('e-ruler');\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Get the properties to be maintained in the persisted state.\n */\n Ruler.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Refreshes the ruler when the Ruler properties are updated\\\n *\n * @returns { void} Refreshes the ruler when the Ruler properties are updated .\\\n * @param {RulerModel} newProp - provide the newProp value.\n * @param {RulerModel} oldProp - provide the oldProp value.\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Ruler.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 'length':\n case 'interval':\n case 'segmentWidth':\n case 'tickAlignment':\n case 'markerColor':\n case 'thickness':\n this.updateRuler();\n break;\n }\n }\n };\n Ruler.prototype.updateRulerGeometry = function () {\n this.element.style.textAlign = 'left';\n this.renderRulerSpace();\n this.updateRuler();\n };\n Ruler.prototype.renderRulerSpace = function () {\n var rulerGeometry = this.getRulerGeometry();\n var div = document.getElementById(this.element.id + '_ruler_space');\n if (!div) {\n div = createHtmlElement('div', {\n 'id': this.element.id + '_ruler_space',\n 'style': 'height:' + rulerGeometry.height + 'px;width:' + rulerGeometry.width + 'px;cssFloat:' + 'left;'\n });\n this.element.appendChild(div);\n }\n return div;\n };\n Ruler.prototype.updateRuler = function () {\n var rulerSize = this.getRulerSize();\n var rulerGeometry = this.getRulerGeometry();\n var length = 0;\n var offset = 0;\n var availableSize = new Size();\n var svg = this.getRulerSVG(rulerGeometry);\n if (svg) {\n length = this.length;\n availableSize.height = rulerSize;\n offset = this.offset;\n if (length && length !== Infinity) {\n var unitLength = length + this.segmentWidth;\n var unitOffset = offset;\n this.updateSegments(unitOffset, (unitLength + Math.abs(unitOffset)), svg, rulerSize);\n }\n }\n };\n Ruler.prototype.updateSegments = function (start, end, svg, rulerSize) {\n var run = start;\n var trans = { trans: 0 };\n while (run < end) {\n var rulerSegment = this.getNewSegment(run, svg);\n if (rulerSegment) {\n svg.appendChild(rulerSegment.segment);\n run = this.updateSegment(start, end, rulerSegment, run, trans, rulerSize);\n }\n }\n };\n Ruler.prototype.updateSegment = function (start, end, rulerSegment, run, trans, rulerSize) {\n var segWidth = this.updateSegmentWidth(this.scale);\n if (run === start) {\n this.startValue = Math.floor(start / segWidth) * segWidth / this.scale;\n this.startValue = (this.startValue % 1) !== 0 ? Number((this.startValue).toFixed(1)) : this.startValue;\n rulerSegment.label.textContent = this.startValue.toString();\n this.defStartValue = run = this.startValue * this.scale;\n if (this.orientation === 'Horizontal') {\n this.hRulerOffset = start - run;\n }\n else {\n this.vRulerOffset = start - run;\n }\n }\n else {\n this.startValue = (run / this.scale);\n this.startValue = (this.startValue % 1) !== 0 ? Number((this.startValue).toFixed(1)) : this.startValue;\n rulerSegment.label.textContent = this.startValue.toString();\n }\n this.updateTickLabel(rulerSegment, rulerSize);\n var translate = (this.orientation === 'Horizontal') ? ((trans.trans + 0.5) + ',0.5') : ('0.5,' + (trans.trans + 0.5));\n rulerSegment.segment.setAttribute('transform', 'translate(' + translate + ')');\n trans.trans += segWidth;\n run += segWidth;\n return run;\n };\n Ruler.prototype.updateTickLabel = function (rulerSegment, rulerSize) {\n var bBox = rulerSegment.segment.lastChild.getBBox();\n var isHorizontal = (this.orientation === 'Horizontal') ? true : false;\n var isRightOrBottom = (this.tickAlignment === 'RightOrBottom') ? true : false;\n var x = isHorizontal ? 2 : 0;\n var y = isHorizontal ? (isRightOrBottom ? (rulerSize / 2 + (11 / 2) - (11 / 2)) :\n (rulerSize / 2 + (11 / 2))) : bBox.height;\n var translate = isRightOrBottom ? (-(bBox.width + 2) + ',' + ((rulerSize / 2) - bBox.height)) :\n (-(bBox.width + 2) + ',' + ((rulerSize / 2) - bBox.height / 2));\n var attr = isHorizontal ? { 'x': x, 'y': y } :\n { 'x': x, 'y': y, 'transform': 'rotate(270)' + 'translate(' + translate + ')' };\n setAttributeSvg(rulerSegment.segment.lastChild, attr);\n };\n Ruler.prototype.getNewSegment = function (run, svg) {\n var segment = this.createNewTicks(run, svg);\n var label = this.createTickLabel(svg, segment);\n return { segment: segment, label: label };\n };\n Ruler.prototype.createNewTicks = function (run, svg) {\n var tick;\n var tickInterval;\n var segmentWidth = this.updateSegmentWidth(this.scale);\n //let g: SVGElement;\n var attr = { 'class': 'e-ruler-segment' };\n var g = createSvgElement('g', attr);\n for (var i = 0; i < this.interval; i++) {\n tickInterval = segmentWidth / this.interval;\n tick = this.createTick(svg, tickInterval, i + 1, run);\n g.appendChild(tick);\n }\n return g;\n };\n Ruler.prototype.getLinePoint = function (svg, tickInterval, length) {\n var segmentWidth = this.updateSegmentWidth(this.scale);\n var rulerSize = this.getRulerSize();\n tickInterval = tickInterval * (length - 1);\n length = ((tickInterval % segmentWidth) === 0) ? rulerSize : rulerSize * 0.3;\n return length;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Ruler.prototype.createTick = function (svg, tickInterval, length, run) {\n var ruler;\n //let line: SVGElement;\n var linePoint = this.getLinePoint(svg, tickInterval, length);\n var rulerSize = this.getRulerSize();\n //let args: IArrangeTickOptions;\n //let attr: Object;\n var isHorizontal = (this.orientation === 'Horizontal') ? true : false;\n var isRightOrBottom = (this.tickAlignment === 'RightOrBottom') ? true : false;\n var arrangeTick = getFunction(this.arrangeTick);\n // eslint-disable-next-line\n var args = { ruler: ruler, tickLength: linePoint, tickInterval: ((this.segmentWidth / this.interval) * (length - 1)) };\n if (arrangeTick) {\n arrangeTick(args);\n }\n linePoint = args.tickLength;\n var point = tickInterval * (length - 1);\n var x1 = isHorizontal ? point : (isRightOrBottom ? rulerSize : 0);\n var x2 = isHorizontal ? point : (isRightOrBottom ? (rulerSize - linePoint) : (rulerSize - (rulerSize - linePoint)));\n var y1 = isHorizontal ? (isRightOrBottom ? rulerSize : (rulerSize - (rulerSize - linePoint))) : point;\n var y2 = isHorizontal ? (isRightOrBottom ? (rulerSize - linePoint) : 0) : point;\n var attr = { 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, 'stroke-width': '1', 'stroke': 'black' };\n var line = createSvgElement('line', attr);\n line.setAttribute('class', 'e-ruler-tick');\n return line;\n };\n Ruler.prototype.createTickLabel = function (svg, segment) {\n var text;\n if (segment) {\n var attr = { 'class': 'e-ruler-tick-label' };\n text = createSvgElement('text', attr);\n segment.appendChild(text);\n }\n return text;\n };\n /**\n * @private\n * @param {number} scale\n */\n /**\n * updateSegmentWidth method\\\n *\n * @returns {number} updateSegmentWidth method .\\\n * @param {string} scale - provide the scale value.\n *\n * @private\n */\n Ruler.prototype.updateSegmentWidth = function (scale) {\n if (this.segmentWidth !== 100) {\n return this.segmentWidth;\n }\n var five = 25;\n var multiples = 1;\n var div;\n //let scaleRound: number;\n var fifty = 100;\n var scaleRound = Math.pow(2, Math.round(Math.log(scale) / Math.log(2)));\n div = fifty;\n div = (fifty / scaleRound);\n while (div > 100) {\n multiples /= 10;\n div /= 10;\n }\n while (div < 25) {\n multiples *= 10;\n div *= 10;\n }\n if (div >= five && div % five !== 0) {\n div = Math.round(div / five) * five;\n }\n return div * scale / multiples;\n };\n Ruler.prototype.createMarkerLine = function (rulerSvg, rulerObj, attr) {\n var line;\n if (rulerObj) {\n line = rulerSvg.getElementById(rulerObj.id + '_marker');\n if (line) {\n line.parentNode.removeChild(line);\n }\n line = createSvgElement('line', attr);\n }\n return line;\n };\n /**\n * updateSegmentWidth method\\\n *\n * @returns {void} updateSegmentWidth method .\\\n * @param {HTMLElement} rulerObj - Defines the ruler Object\n * @param {PointModel} currentPoint - Defines the current point for ruler Object\n * @param {number} offset - Defines the offset ruler Object\n *\n * @private\n */\n Ruler.prototype.drawRulerMarker = function (rulerObj, currentPoint, offset) {\n var rulerSvg;\n var rulerSize;\n var scale;\n var diff;\n var i;\n var attr;\n var line;\n var isHorizontal = this.orientation === 'Horizontal' ? true : false;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rulerSvgElements = rulerObj.getElementsByTagName('svg');\n for (i = 0; i < rulerSvgElements.length; i++) {\n if (rulerSvgElements[parseInt(i.toString(), 10)]) {\n rulerSvg = rulerSvgElements[parseInt(i.toString(), 10)];\n }\n break;\n }\n if (rulerSvg) {\n rulerSize = this.getRulerSize();\n attr = {\n 'id': rulerObj.id + '_marker', 'x1': 0, 'y1': 0, 'x2': (isHorizontal ? 0 : rulerSize),\n 'y2': (isHorizontal ? rulerSize : 0), 'stroke': this.markerColor, 'stroke-width': 1.5,\n 'class': 'e-d-ruler-marker'\n };\n line = this.createMarkerLine(rulerSvg, rulerObj, attr);\n scale = this.scale;\n diff = this.offset - this.defStartValue;\n var point = isHorizontal ? currentPoint.x : currentPoint.y;\n var move = (point * scale) + offset + diff;\n line.setAttribute('transform', 'translate(' + (isHorizontal ? ((move + 0.5) + ' 0.5') : ('0.5 ' + (move + 0.5))) + ')');\n rulerSvg.appendChild(line);\n }\n };\n Ruler.prototype.getRulerGeometry = function () {\n return new Size(this.element ? this.element.getBoundingClientRect().width : 0, this.element ? this.element.getBoundingClientRect().height : 0);\n };\n Ruler.prototype.getRulerSize = function () {\n return this.thickness;\n };\n Ruler.prototype.getRulerSVG = function (rulerGeometry) {\n var rulerSpace;\n var rulerSize = this.getRulerSize();\n var svg;\n if (this.element) {\n rulerSpace = document.getElementById(this.element.id + '_ruler_space');\n if (rulerSpace) {\n var attr = {\n 'id': this.element.id + '_Ruler_svg',\n width: this.orientation === 'Horizontal' ? (rulerGeometry.width + 200) : rulerSize + 'px',\n height: this.orientation === 'Horizontal' ? rulerSize : (rulerGeometry.height + 200) + 'px',\n style: 'position:inherit;'\n };\n svg = createSvgElement('svg', attr);\n if (rulerSpace.childNodes.length > 0) {\n for (var i = rulerSpace.childNodes.length - 1; i >= 0; i--) {\n rulerSpace.childNodes[parseInt(i.toString(), 10)].parentNode.removeChild(rulerSpace.childNodes[parseInt(i.toString(), 10)]);\n }\n }\n rulerSpace.appendChild(svg);\n }\n }\n return svg;\n };\n /**\n * Method to bind events for the ruler \\\n *\n * @returns {void} Method to bind events for the ruler .\\\n * @private\n */\n Ruler.prototype.wireEvents = function () {\n //wire Events\n };\n /**\n * Method to unbind events for the ruler \\\n *\n * @returns {void} Method to unbind events for the ruler .\\\n * @private\n */\n Ruler.prototype.unWireEvents = function () {\n //unWire Events\n };\n __decorate$9([\n Property(5)\n ], Ruler.prototype, \"interval\", void 0);\n __decorate$9([\n Property(100)\n ], Ruler.prototype, \"segmentWidth\", void 0);\n __decorate$9([\n Property('Horizontal')\n ], Ruler.prototype, \"orientation\", void 0);\n __decorate$9([\n Property('RightOrBottom')\n ], Ruler.prototype, \"tickAlignment\", void 0);\n __decorate$9([\n Property('red')\n ], Ruler.prototype, \"markerColor\", void 0);\n __decorate$9([\n Property(25)\n ], Ruler.prototype, \"thickness\", void 0);\n __decorate$9([\n Property(null)\n ], Ruler.prototype, \"arrangeTick\", void 0);\n __decorate$9([\n Property(400)\n ], Ruler.prototype, \"length\", void 0);\n return Ruler;\n}(Component));\n\n/**\n * defines the helper methods for the ruler\n */\n/**\n * renderOverlapElement method \\\n *\n * @returns {void} renderOverlapElement method .\\\n * @param { Diagram} diagram - provide the content value.\n * @private\n */\nfunction renderOverlapElement(diagram) {\n var rulerSize = getRulerSize(diagram);\n var attributes = {\n 'id': diagram.element.id + '_overlapRuler',\n style: 'height:' + rulerSize.height + 'px;width:' + rulerSize.width + 'px;position:absolute;left:0;top:0',\n class: 'e-ruler-overlap'\n };\n var overlap = createHtmlElement('div', attributes);\n diagram.element.insertBefore(overlap, diagram.element.firstChild);\n}\n/**\n * renderRuler method \\\n *\n * @returns {void} renderRuler method .\\\n * @param { Diagram} diagram - provide the content value.\n * @param { boolean} isHorizontal - provide the content value.\n * @private\n */\nfunction renderRuler(diagram, isHorizontal) {\n var div = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));\n var rulerSize = getRulerSize(diagram);\n var rulerGeometry = getRulerGeometry(diagram);\n var margin = isHorizontal ? ('margin-left:' + rulerSize.width + 'px;') : ('margin-top:' + rulerSize.height + 'px;');\n if (!div) {\n var style = 'height:' + (isHorizontal ? rulerSize.height : (rulerGeometry.height + 100)) + 'px;overflow:hidden;width:' +\n (isHorizontal ? (rulerGeometry.width + 100) : rulerSize.width) + 'px;position:absolute;font-size:11px;' + margin;\n var attributes = {\n 'id': diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'),\n style: style\n };\n div = createHtmlElement('div', attributes);\n }\n diagram.element.insertBefore(div, diagram.element.firstChild);\n var diagramRuler = isHorizontal ? diagram.rulerSettings.horizontalRuler : diagram.rulerSettings.verticalRuler;\n var ruler = new Ruler(diagramRuler);\n ruler.orientation = isHorizontal ? 'Horizontal' : 'Vertical';\n ruler.length = (isHorizontal ? rulerGeometry.width : rulerGeometry.height) + diagramRuler.segmentWidth;\n ruler.appendTo('#' + diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));\n // eslint-disable-next-line\n isHorizontal ? diagram.hRuler = ruler : diagram.vRuler = ruler;\n var rulerObj = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));\n // eslint-disable-next-line\n isHorizontal ? diagram.hRuler.element = rulerObj : diagram.vRuler.element = rulerObj;\n}\n/**\n * updateRuler method \\\n *\n * @returns {void} updateRuler method .\\\n * @param { Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction updateRuler(diagram) {\n var hOffset = -diagram.scroller.horizontalOffset;\n var vOffset = -diagram.scroller.verticalOffset;\n if (diagram && diagram.rulerSettings.showRulers) {\n diagram.hRuler.length = 0;\n diagram.vRuler.length = 0;\n if (hOffset !== undefined && diagram.hRuler.element) {\n updateRulerDimension(diagram, diagram.hRuler, hOffset, true);\n }\n if (vOffset !== undefined && diagram.vRuler.element) {\n updateRulerDimension(diagram, diagram.vRuler, vOffset, false);\n }\n }\n else {\n removeRulerElements(diagram);\n }\n}\n/**\n * removeRulerElements method \\\n *\n * @returns {void} removeRulerElements method .\\\n * @param { Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction removeRulerElements(diagram) {\n removeElement(diagram.element.id + '_hRuler');\n removeElement(diagram.element.id + '_vRuler');\n removeElement(diagram.element.id + '_overlapRuler');\n}\n/**\n * getRulerSize method \\\n *\n * @returns {void} getRulerSize method .\\\n * @param { Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction getRulerSize(diagram) {\n var top = 0;\n var left = 0;\n if (diagram.rulerSettings.showRulers) {\n top = diagram.rulerSettings.horizontalRuler.thickness;\n left = diagram.rulerSettings.verticalRuler.thickness;\n }\n return new Size(left, top);\n}\n/**\n * getRulerGeometry method \\\n *\n * @returns {void} getRulerGeometry method .\\\n * @param { Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction getRulerGeometry(diagram) {\n var rulerSize = getRulerSize(diagram);\n var height = diagram.scroller.viewPortHeight;\n var width = diagram.scroller.viewPortWidth;\n if (width < diagram.element.clientWidth - rulerSize.width) {\n width = diagram.element.clientWidth - rulerSize.width;\n }\n if (height < diagram.element.clientHeight - rulerSize.height) {\n height = diagram.element.clientHeight - rulerSize.height;\n }\n if (diagram.hRuler && diagram.hRuler.length) {\n width = diagram.hRuler.length;\n }\n if (diagram.vRuler && diagram.vRuler.length) {\n height = diagram.vRuler.length;\n }\n return new Size(width, height);\n}\n/**\n * removeRulerMarkers method \\\n *\n * @returns {void} removeRulerMarkers method .\\\n * @private\n */\nfunction removeRulerMarkers() {\n var markers = document.getElementsByClassName('e-d-ruler-marker');\n var marker;\n var i;\n if (markers && markers.length > 0) {\n for (i = markers.length - 1; i >= 0; i--) {\n marker = markers[parseInt(i.toString(), 10)];\n if (marker) {\n marker.parentNode.removeChild(marker);\n }\n }\n }\n}\n/**\n * drawRulerMarkers method \\\n *\n * @returns {void} drawRulerMarkers method .\\\n * @param { Diagram} diagram - provide the content value.\n * @param { PointModel} currentPoint - provide the content value.\n * @private\n */\nfunction drawRulerMarkers(diagram, currentPoint) {\n if (diagram.rulerSettings.showRulers) {\n diagram.hRuler.drawRulerMarker(diagram.hRuler.element, currentPoint, diagram.scroller.horizontalOffset);\n diagram.vRuler.drawRulerMarker(diagram.vRuler.element, currentPoint, diagram.scroller.verticalOffset);\n }\n}\n/**\n * updateRulerDimension method \\\n *\n * @returns {void} updateRulerDimension method .\\\n * @param { Diagram} diagram - provide the content value.\n * @param { Ruler} ruler - provide the content value.\n * @param { number} offset - provide the content value.\n * @param { boolean} isHorizontal - provide the content value.\n * @private\n */\nfunction updateRulerDimension(diagram, ruler, offset, isHorizontal) {\n var rulerSize = getRulerSize(diagram);\n var rulerGeometry = getRulerGeometry(diagram);\n var diagramRuler = isHorizontal ? diagram.rulerSettings.horizontalRuler : diagram.rulerSettings.verticalRuler;\n updateRulerDiv(diagram, rulerGeometry, isHorizontal);\n updateRulerSpace(diagram, rulerGeometry, isHorizontal);\n ruler.offset = offset;\n ruler.scale = diagram.scroller.currentZoom;\n ruler.length = (isHorizontal ? rulerGeometry.width : rulerGeometry.height) + 100;\n ruler.arrangeTick = getFunction(diagramRuler.arrangeTick);\n ruler.dataBind();\n var rulerObj = isHorizontal ? diagram.hRuler.element : diagram.vRuler.element;\n if (isHorizontal) {\n rulerObj.style.marginLeft = (rulerSize.width - ruler.hRulerOffset) + 'px';\n }\n else {\n rulerObj.style.marginTop = (rulerSize.height - ruler.vRulerOffset) + 'px';\n }\n}\n/**\n * updateRulerSpace method \\\n *\n * @returns {void} updateRulerSpace method .\\\n * @param { Diagram} diagram - provide the content value.\n * @param { Size} rulerGeometry - provide the content value.\n * @param { boolean} isHorizontal - provide the content value.\n * @private\n */\nfunction updateRulerSpace(diagram, rulerGeometry, isHorizontal) {\n var div = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler_ruler_space' : '_vRuler_ruler_space'));\n var ruler = isHorizontal ? diagram.hRuler : diagram.vRuler;\n if (div && diagram && rulerGeometry) {\n div.style.width = (isHorizontal ? (rulerGeometry.width + (ruler.segmentWidth * 2)) : ruler.thickness) + 'px';\n div.style.height = (isHorizontal ? ruler.thickness : (rulerGeometry.height + (ruler.segmentWidth * 2))) + 'px';\n }\n}\n/**\n * updateRulerDiv method \\\n *\n * @returns {void} updateRulerDiv method .\\\n * @param { Diagram} diagram - provide the content value.\n * @param { Size} rulerGeometry - provide the content value.\n * @param { boolean} isHorizontal - provide the content value.\n * @private\n */\nfunction updateRulerDiv(diagram, rulerGeometry, isHorizontal) {\n var div = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));\n var ruler = isHorizontal ? diagram.hRuler : diagram.vRuler;\n if (div && diagram && rulerGeometry) {\n div.style.width = (isHorizontal ? (rulerGeometry.width + ruler.segmentWidth) : ruler.thickness) + 'px';\n div.style.height = (isHorizontal ? ruler.thickness : (rulerGeometry.height + ruler.segmentWidth)) + 'px';\n // eslint-disable-next-line\n div = document.getElementById(diagram.element.id + '_overlapRuler');\n if (div) {\n // eslint-disable-next-line\n isHorizontal ? (div.style.height = ruler.thickness + 'px') : (div.style.width = ruler.thickness + 'px');\n }\n }\n}\n\nvar __extends$j = (undefined && undefined.__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$a = (undefined && undefined.__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/**\n * A collection of frequently used commands that will be added around the selector\n * ```html\n * \n * ```\n * ```typescript\n * let nodes: NodeModel[] = [{\n * id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,\n * annotations: [{ content: 'Default Shape' }]\n * },\n * {\n * id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,\n * shape: {\n * type: 'Basic', shape: 'Ellipse'\n * },\n * annotations: [{ content: 'Path Element' }]\n * }\n * ];\n * let connectors: ConnectorModel[] = [{\n * id: 'connector1',\n * type: 'Straight',\n * sourcePoint: { x: 100, y: 300 },\n * targetPoint: { x: 200, y: 400 },\n * }];\n * let handle: UserHandleModel[] = [\n * { name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,\n * pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',\n * side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',\n * pathColor: 'yellow' }];\n * let diagram: Diagram = new Diagram({\n * ...\n * connectors: connectors, nodes: nodes,\n * selectedItems: { constraints: SelectorConstraints.All, userHandles: handle },\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n * @default {}\n */\nvar UserHandle = /** @__PURE__ @class */ (function (_super) {\n __extends$j(UserHandle, _super);\n function UserHandle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n *\n * Returns the name of class UserHandle\n *\n * @returns {string} Returns the name of class UserHandle\n * @private\n */\n UserHandle.prototype.getClassName = function () {\n return 'UserHandle';\n };\n __decorate$a([\n Property('')\n ], UserHandle.prototype, \"name\", void 0);\n __decorate$a([\n Property('')\n ], UserHandle.prototype, \"pathData\", void 0);\n __decorate$a([\n Property('')\n ], UserHandle.prototype, \"content\", void 0);\n __decorate$a([\n Property('')\n ], UserHandle.prototype, \"source\", void 0);\n __decorate$a([\n Property('#000000')\n ], UserHandle.prototype, \"backgroundColor\", void 0);\n __decorate$a([\n Property('Top')\n ], UserHandle.prototype, \"side\", void 0);\n __decorate$a([\n Property('')\n ], UserHandle.prototype, \"borderColor\", void 0);\n __decorate$a([\n Property(0.5)\n ], UserHandle.prototype, \"borderWidth\", void 0);\n __decorate$a([\n Property(25)\n ], UserHandle.prototype, \"size\", void 0);\n __decorate$a([\n Property('white')\n ], UserHandle.prototype, \"pathColor\", void 0);\n __decorate$a([\n Property(10)\n ], UserHandle.prototype, \"displacement\", void 0);\n __decorate$a([\n Property(true)\n ], UserHandle.prototype, \"visible\", void 0);\n __decorate$a([\n Property(0)\n ], UserHandle.prototype, \"offset\", void 0);\n __decorate$a([\n Complex({}, Margin)\n ], UserHandle.prototype, \"margin\", void 0);\n __decorate$a([\n Property('Center')\n ], UserHandle.prototype, \"horizontalAlignment\", void 0);\n __decorate$a([\n Property('Center')\n ], UserHandle.prototype, \"verticalAlignment\", void 0);\n __decorate$a([\n Property(false)\n ], UserHandle.prototype, \"disableNodes\", void 0);\n __decorate$a([\n Property(false)\n ], UserHandle.prototype, \"disableConnectors\", void 0);\n __decorate$a([\n Complex({}, DiagramTooltip)\n ], UserHandle.prototype, \"tooltip\", void 0);\n __decorate$a([\n Property('')\n ], UserHandle.prototype, \"template\", void 0);\n return UserHandle;\n}(ChildProperty));\n\n/**\n * UMLActivityShapeDictionary defines the shape of the built-in uml activity shapes \\\n *\n * @returns { string } UMLActivityShapeDictionary defines the shape of the built-in uml activity shapes .\\\n * @param {string} shape - provide the shape value.\n *\n * @private\n */\nfunction getUMLActivityShape(shape) {\n return umlActivityShapes[shape.toString()];\n}\n/* eslint-disable */\nvar umlActivityShapes = {\n // Action,\n 'Action': 'M 90 82.895 C 90 86.819 86.776 90 82.8 90 H 7.2 C 3.224 90 0 86.819 0 82.895' +\n ' V 7.105 C 0 3.181 3.224 0 7.2 0 h 75.6 C 86.776 0 90 3.181 90 7.105 V 82.895 Z',\n // Decision,\n 'Decision': 'M10,19.707L0.293,10L10,0.293L19.707,10L10,19.707z',\n // MergeNode,\n 'MergeNode': 'M10,19.707L0.293,10L10,0.293L19.707,10L10,19.707z',\n // InitialNode,\n 'InitialNode': 'M10,19.5c-5.238,0-9.5-4.262-9.5-9.5S4.762,0.5,10,0.5s9.5,4.262,9.5,9.5S15.238,19.5,10,19.5z',\n // ForkNode,\n 'ForkNode': 'm0.75,0.75l636.00002,0l0,290l-636.00002,0l0,-290z',\n // JoinNode,\n 'JoinNode': 'm0.75,0.75l636.00002,0l0,290l-636.00002,0l0,-290z',\n // TimeEvent,\n 'TimeEvent': 'M50.001,0.00286865 L25.001,25.0029 L0.000976562,0.00286865 L50.001,0.00286865 z' +\n ' M0.000976562,50.0029 L25.001,25.0029 L50.001,50.0029 L0.000976562,50.0029 z',\n // AcceptingEvent,\n 'AcceptingEvent': 'M17.8336 32.164 L29.64 24 L17.32 16 L48.1664 16 L48.5 32 Z',\n // SendSignal,\n 'SendSignal': 'M48.164 31.8336 L56 23.832 L47.836 16 L16.168 16 L16.1668 31.8336 Z',\n // ReceiveSignal,\n 'ReceiveSignal': 'M48.1664 31.8336 L39.836 24 L47.836 16 L16.168 16 L16.168 31.836 Z',\n // StructuredNode,\n 'StructuredNode': 'M0,0 L50,0 L50,50 L0,50 z',\n // Note,\n 'Note': 'M20 12 L4 12 L4 22 L22 22 L22 14 L20 14 L20 12 L22 14 Z'\n};\n/* eslint-enable */\n\nvar __extends$k = (undefined && undefined.__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$b = (undefined && undefined.__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/**\n * Defines the combination of keys and modifier keys\n */\nvar KeyGesture = /** @__PURE__ @class */ (function (_super) {\n __extends$k(KeyGesture, _super);\n function KeyGesture() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$b([\n Property()\n ], KeyGesture.prototype, \"key\", void 0);\n __decorate$b([\n Property()\n ], KeyGesture.prototype, \"keyModifiers\", void 0);\n return KeyGesture;\n}(ChildProperty));\n/**\n * Defines a command and a key gesture to define when the command should be executed\n */\nvar Command = /** @__PURE__ @class */ (function (_super) {\n __extends$k(Command, _super);\n function Command() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n *\n * Returns the name of class Command\n *\n * @returns {string} Returns the name of class Command\n * @private\n */\n Command.prototype.getClassName = function () {\n return 'Command';\n };\n __decorate$b([\n Property('')\n ], Command.prototype, \"name\", void 0);\n __decorate$b([\n Property()\n ], Command.prototype, \"canExecute\", void 0);\n __decorate$b([\n Property()\n ], Command.prototype, \"execute\", void 0);\n __decorate$b([\n Complex({}, KeyGesture)\n ], Command.prototype, \"gesture\", void 0);\n __decorate$b([\n Property('')\n ], Command.prototype, \"parameter\", void 0);\n return Command;\n}(ChildProperty));\n/**\n * Defines the collection of commands and the corresponding key gestures\n *\n */\nvar CommandManager = /** @__PURE__ @class */ (function (_super) {\n __extends$k(CommandManager, _super);\n function CommandManager() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$b([\n Collection([], Command)\n ], CommandManager.prototype, \"commands\", void 0);\n return CommandManager;\n}(ChildProperty));\n/**\n * Defines the behavior of the context menu items\n */\nvar ContextMenuSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$k(ContextMenuSettings, _super);\n function ContextMenuSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$b([\n Property()\n ], ContextMenuSettings.prototype, \"show\", void 0);\n __decorate$b([\n Property()\n ], ContextMenuSettings.prototype, \"showCustomMenuOnly\", void 0);\n __decorate$b([\n Property()\n ], ContextMenuSettings.prototype, \"items\", void 0);\n return ContextMenuSettings;\n}(ChildProperty));\n\n/**\n * SVG Renderer\n */\n/** @private */\nvar SvgRenderer = /** @__PURE__ @class */ (function () {\n function SvgRenderer() {\n }\n /**\n * Draw the shawdow for the rectangle shape in diagram \\\n *\n * @returns {void} Draw the shawdow for the rectangle shape in diagram .\\\n *\n * @param { SVGElement} options - Provide the base attributes .\n * @param { RectAttributes} canvas - Provide the canvas values .\n * @param { string} collection - Provide the collection value.\n * @param { boolean} parentSvg - Provide the parent SVG values .\n * @private\n */\n SvgRenderer.prototype.renderShadow = function (options, canvas, collection, parentSvg) {\n if (collection === void 0) { collection = null; }\n var pointModel = { x: 0, y: 0 };\n var point = Point.transform(pointModel, options.shadow.angle, options.shadow.distance);\n //const tX: number = options.x + point.x; const tY: number = options.y + point.y;\n //let pivotX: number = tX + options.width * options.pivotX;\n //let pivotY: number = tY + options.height * options.pivotY;\n var type;\n var shadowElement;\n if (parentSvg) {\n shadowElement = parentSvg.getElementById(canvas.id + '_shadow');\n }\n if (!shadowElement) {\n type = collection ? 'path' : 'rect';\n shadowElement = document.createElementNS('http://www.w3.org/2000/svg', type);\n canvas.appendChild(shadowElement);\n }\n var attr = {\n 'id': canvas.id + '_shadow', 'fill': options.shadow.color, 'stroke': options.shadow.color,\n 'opacity': options.shadow.opacity.toString(),\n 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ','\n + (options.y + options.height * options.pivotY) + ')' +\n 'translate(' + (options.x + point.x) + ',' + (options.y + point.y) + ')'\n };\n if (parentSvg) {\n var svgContainer = parentSvg.getElementById(canvas.id);\n if (svgContainer) {\n svgContainer.insertBefore(shadowElement, svgContainer.firstChild);\n }\n }\n setAttributeSvg(shadowElement, attr);\n if (!collection) {\n setAttributeSvg(shadowElement, { 'width': options.width, 'height': options.height });\n }\n else if (collection) {\n this.renderPath(shadowElement, options, collection);\n }\n };\n /**\n * Return the dashed array values \\\n *\n * @returns {number[]} Return the dashed array values .\\\n * @param { SVGElement} dashArray - Return the dashed array values .\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n SvgRenderer.prototype.parseDashArray = function (dashArray) {\n var dashes = [];\n return dashes;\n };\n /**\n * Draw the Rectangle for the diagram \\\n *\n * @returns {void} Draw the Rectangle for the diagram .\\\n *\n * @param { SVGElement} svg - Provide the SVG .\n * @param { RectAttributes} options - Provide the Rect attributes .\n * @param { string} diagramId - Provide the diagram id .\n * @param { boolean} onlyRect - Provide the boolean attribute for the shawdow rendering .\n * @param { boolean} isSelector - Provide the selector possobilities .\n * @param { SVGSVGElement} parentSvg - Provide the parent svg element .\n * @param { Object} ariaLabel - Provide the Arial label attributes .\n * @param { boolean} isCircularHandle - Provide the boolean attribute for the circular handle .\n * @param { number} enableSelector - Provide the selector possobilities .\n * @private\n */\n SvgRenderer.prototype.drawRectangle = function (svg, options, diagramId, onlyRect, isSelector, parentSvg, ariaLabel, isCircularHandle, enableSelector) {\n if (options.shadow && !onlyRect) {\n this.renderShadow(options, svg, undefined, parentSvg);\n }\n var id;\n if (options.id === svg.id) {\n id = options.id + '_container';\n }\n else {\n id = options.id;\n }\n var rect;\n if (parentSvg) {\n rect = parentSvg.getElementById(id);\n }\n if (!rect || isSelector) {\n rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n svg.appendChild(rect);\n }\n var shadowElement;\n if (parentSvg && !options.shadow) {\n shadowElement = parentSvg.getElementById(options.id + '_groupElement_shadow');\n if (shadowElement) {\n shadowElement.parentNode.removeChild(shadowElement);\n }\n }\n var attr;\n // EJ2-65895 - Added below code to calculate the transform to render the circular handle\n if (isCircularHandle) {\n attr = {\n 'id': id, 'x': options.x.toString(), 'y': options.y.toString(), 'width': options.width.toString(),\n 'height': options.height.toString(), 'visibility': options.visible ? 'visible' : 'hidden',\n 'transform': 'rotate(' + options.angle + ','\n + (options.x + options.width / 2) + ',' + (options.y + options.height / 2) + ')',\n 'rx': options.cornerRadius || 0, 'ry': options.cornerRadius || 0, 'opacity': options.opacity\n };\n }\n else {\n attr = {\n 'id': id, 'x': options.x.toString(), 'y': options.y.toString(), 'width': options.width.toString(),\n 'height': options.height.toString(), 'visibility': options.visible ? 'visible' : 'hidden',\n 'transform': 'rotate(' + options.angle + ','\n + (options.x + options.width * options.pivotX) + ',' + (options.y + options.height * options.pivotY) + ')',\n 'rx': options.cornerRadius || 0, 'ry': options.cornerRadius || 0, 'opacity': options.opacity\n };\n }\n if (ariaLabel) {\n // BLAZ-24062: Adding 'aria-label' without role attribute it causes violation in accessibility test\n attr['role'] = 'img';\n attr['aria-label'] = ariaLabel;\n }\n var classval = options.class || '';\n if (!enableSelector) {\n if (classval.includes('e-diagram-resize-handle') || classval.includes('e-diagram-endpoint-handle') || classval.includes('e-diagram-bezier-control-handle')) {\n classval += ' e-disabled';\n }\n }\n if (options.class) {\n attr['class'] = classval;\n }\n var poiterEvents = 'pointer-events';\n if (!ariaLabel) {\n attr[\"\" + poiterEvents] = 'none';\n }\n setAttributeSvg(rect, attr);\n this.setSvgStyle(rect, options, diagramId);\n };\n /**\n * Update the diagram selection region \\\n *\n * @returns {void} Update the diagram selection region .\\\n *\n * @param { SVGElement} gElement - Provide the element type.\n * @param { RectAttributes} options - Provide the Rect attributes .\n * @private\n */\n SvgRenderer.prototype.updateSelectionRegion = function (gElement, options) {\n var rect;\n rect = gElement.parentNode.getElementById(options.id);\n var attr = {\n 'id': options.id, 'x': options.x.toString(), 'y': options.y.toString(), 'width': options.width.toString(),\n 'height': options.height.toString(), 'transform': 'rotate(' + options.angle + ','\n + (options.x + options.width * options.pivotX) + ',' + (options.y + options.height * options.pivotY) + ')',\n class: 'e-diagram-selected-region'\n };\n if (!rect) {\n rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n gElement.appendChild(rect);\n }\n this.setSvgStyle(rect, options);\n setAttributeSvg(rect, attr);\n };\n /**\n * Create the g element for the diagram \\\n *\n * @returns {SVGGElement} Create the g element for the diagram .\\\n *\n * @param { SVGElement} elementType - Provide the element type.\n * @param { Object} attribute - Provide the attributes for the g element.\n * @private\n */\n SvgRenderer.prototype.createGElement = function (elementType, attribute) {\n var gElement = createSvgElement(elementType, attribute);\n return gElement;\n };\n /**\n * Draw the line for the diagram\\\n *\n * @returns {void} Draw the line for the diagram .\\\n *\n * @param { SVGElement} gElement - Provide the g element .\n * @param { LineAttributes} options - Provide the line element attributes .\n * @private\n */\n SvgRenderer.prototype.drawLine = function (gElement, options) {\n var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n this.setSvgStyle(line, options);\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n //const kk: string = '';\n var attr = {\n 'id': options.id,\n 'x1': options.startPoint.x + options.x,\n 'y1': options.startPoint.y + options.y,\n 'x2': options.endPoint.x + options.x,\n 'y2': options.endPoint.y + options.y,\n 'stroke': options.stroke,\n 'stroke-width': options.strokeWidth.toString(), 'opacity': options.opacity.toString(),\n 'transform': 'rotate(' + options.angle + ' ' + pivotX + ' ' + pivotY + ')',\n 'visibility': options.visible ? 'visible' : 'hidden'\n };\n if (options.class) {\n attr['class'] = options.class;\n }\n setAttributeSvg(line, attr);\n gElement.appendChild(line);\n };\n /**\n * Draw the circle for the diagram\\\n *\n * @returns {void} Draw the circle for the diagram .\\\n *\n * @param { SVGElement} gElement - Provide the g element .\n * @param { CircleAttributes} options - Provide the circle element attributes .\n * @param {string} enableSelector - Provide the selector constraints string .\n * @param {Object} ariaLabel - Provide arial label value .\n * @private\n */\n SvgRenderer.prototype.drawCircle = function (gElement, options, enableSelector, ariaLabel) {\n var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n this.setSvgStyle(circle, options);\n var classval = options.class || '';\n if (!enableSelector) {\n classval += ' e-disabled';\n }\n var attr = {\n 'id': options.id,\n 'cx': options.centerX,\n 'cy': options.centerY,\n 'r': options.radius,\n 'visibility': options.visible ? 'visible' : 'hidden',\n 'class': classval\n };\n if (ariaLabel) {\n // BLAZ-24062: Adding 'aria-label' without role attribute it causes violation in accessibility test\n attr['role'] = 'img';\n attr['aria-label'] = ariaLabel;\n }\n circle.style.display = options.visible ? 'block' : 'none';\n setAttributeSvg(circle, attr);\n gElement.appendChild(circle);\n };\n /**\n * Draw the path element for the diagram\\\n *\n * @returns {void} Draw the path element for the diagram .\\\n *\n * @param { SVGElement} svg - Provide the SVG element .\n * @param { PathAttributes} options - Provide the path element attributes .\n * @param {string} diagramId - Provide the diagram id .\n * @param {boolean} isSelector - Provide selector boolean value .\n * @param {SVGSVGElement} parentSvg - Provide the parent SVG element .\n * @param {Object} ariaLabel - Provide arial label value .\n * @param {number} scale - Provide the scale value .\n * @private\n */\n SvgRenderer.prototype.drawPath = function (svg, options, diagramId, isSelector, parentSvg, ariaLabel, scale) {\n //const id: string = svg.id + '_shape' + x.toString();\n var collection = [];\n collection = processPathData(options.data);\n collection = pathSegmentCollection(collection);\n if (options.shadow) {\n this.renderShadow(options, svg, collection, parentSvg);\n }\n var shadowElement;\n if (parentSvg && !options.shadow) {\n shadowElement = parentSvg.getElementById(options.id + '_groupElement_shadow');\n if (shadowElement) {\n shadowElement.parentNode.removeChild(shadowElement);\n }\n }\n var path;\n if (parentSvg) {\n path = parentSvg.getElementById(options.id);\n }\n if (!path || isSelector) {\n path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n svg.appendChild(path);\n }\n this.renderPath(path, options, collection);\n var attr = {};\n if (scale) {\n attr = {\n 'id': options.id, 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ','\n + (options.y + options.height * options.pivotY) + ')' + 'translate(' + (options.x) + ',' + (options.y) + '),scale(' + scale + ')',\n 'visibility': options.visible ? 'visible' : 'hidden', 'opacity': options.opacity\n };\n }\n else {\n attr = {\n 'id': options.id, 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ','\n + (options.y + options.height * options.pivotY) + ')' + 'translate(' + (options.x) + ',' + (options.y) + ')',\n 'visibility': options.visible ? 'visible' : 'hidden', 'opacity': options.opacity\n };\n }\n if (ariaLabel) {\n // BLAZ-24062: Adding 'aria-label' without role attribute it causes violation in accessibility test\n attr['role'] = 'img';\n attr['aria-label'] = ariaLabel;\n }\n if (options.class) {\n attr['class'] = options.class;\n }\n setAttributeSvg(path, attr);\n this.setSvgStyle(path, options, diagramId);\n };\n /**\n * Draw the path element for the diagram\\\n *\n * @returns {void} Draw the path element for the diagram .\\\n *\n * @param { SVGElement} svg - Provide the SVG element .\n * @param {PathAttributes} options - Provide the path element attributes .\n * @param {Object[]} collection - Provide the parent SVG element .\n * @private\n */\n SvgRenderer.prototype.renderPath = function (svg, options, collection) {\n var x1;\n var y1;\n var x2;\n var y2;\n var x;\n var y;\n var length;\n var i;\n var segments = collection;\n var d = '';\n for (x = 0, y = 0, i = 0, length = segments.length; i < length; ++i) {\n var obj = segments[parseInt(i.toString(), 10)];\n var segment = obj;\n var char = segment.command;\n if ('x1' in segment) {\n x1 = segment.x1;\n }\n if ('x2' in segment) {\n x2 = segment.x2;\n }\n if ('y1' in segment) {\n y1 = segment.y1;\n }\n if ('y2' in segment) {\n y2 = segment.y2;\n }\n if ('x' in segment) {\n x = segment.x;\n }\n if ('y' in segment) {\n y = segment.y;\n }\n switch (char) {\n case 'M':\n d = d + 'M' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'L':\n d = d + 'L' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'C':\n d = d + 'C' + x1.toString() + ',' + y1.toString() + ',' + x2.toString() + ',' + y2.toString() + ',';\n d += x.toString() + ',' + y.toString() + ' ';\n break;\n case 'Q':\n d = d + 'Q' + x1.toString() + ',' + y1.toString() + ',' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'A':\n d = d + 'A' + segment.r1.toString() + ',' + segment.r2.toString() + ',' + segment.angle.toString() + ',';\n d += segment.largeArc.toString() + ',' + segment.sweep + ',' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'Z':\n case 'z':\n d = d + 'Z' + ' ';\n break;\n }\n }\n svg.setAttribute('d', d);\n };\n SvgRenderer.prototype.setSvgFontStyle = function (text, options) {\n text.style.fontStyle = options.italic ? 'italic' : 'normal';\n text.style.fontWeight = options.bold ? 'bold' : 'normal';\n text.style.fontSize = options.fontSize.toString() + 'px';\n text.style.fontFamily = options.fontFamily;\n };\n /**\n * Draw the text element for the diagram\\\n *\n * @returns {void} Draw the text element for the diagram .\\\n *\n * @param { SVGElement} canvas - Provide the SVG element .\n * @param {TextAttributes} options - Provide the text element attributes .\n * @param {SVGSVGElement} parentSvg - Provide the parent SVG element .\n * @param {Object} ariaLabel - Provide the label properties .\n * @param {string} diagramId - Provide the diagram id .\n * @param {number} scaleValue - Provide the scale value .\n * @param {Container} parentNode - Provide the parent node .\n * @private\n */\n SvgRenderer.prototype.drawText = function (canvas, options, parentSvg, ariaLabel, diagramId, scaleValue, parentNode) {\n if (options.content !== undefined) {\n var textNode = void 0;\n var childNodes = void 0;\n var wrapBounds = void 0;\n var position = void 0;\n var child = void 0;\n var tspanElement = void 0;\n var offsetX = 0;\n var offsetY = 0;\n var i = 0;\n var text = void 0;\n var nodeContent = void 0;\n if (parentSvg) {\n text = parentSvg.getElementById(options.id + '_text');\n }\n if (text) {\n if (options.doWrap) {\n while (text.firstChild) {\n text.removeChild(text.firstChild);\n }\n }\n }\n else {\n options.doWrap = true;\n text = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n if (options.whiteSpace === 'pre-wrap') {\n text.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n }\n if (parentNode) {\n nodeContent = document.getElementById(parentNode.id + '_content_groupElement');\n }\n if (nodeContent && parentNode && parentNode.children && parentNode.children[0] instanceof DiagramNativeElement) {\n var textTag = this.createGElement('g', { id: ariaLabel + '_groupElement' });\n nodeContent.appendChild(textTag);\n textTag.appendChild(text);\n }\n else {\n canvas.appendChild(text);\n }\n }\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n var childNodesHeight = 0;\n if (options.doWrap || options.textOverflow !== 'Wrap') {\n //(EJ2-70658)- Node annotation disappear, while giving same id for annotation in two different diagrams\n //Added the below code for removing the extra span element that added when we double click the text annotation node\n while (text.firstChild) {\n text.removeChild(text.firstChild);\n }\n this.setSvgStyle(text, options, diagramId);\n this.setSvgFontStyle(text, options);\n textNode = document.createTextNode(options.content);\n childNodes = options.childNodes;\n wrapBounds = options.wrapBounds;\n position = this.svgLabelAlign(options, wrapBounds, childNodes);\n if (wrapBounds.width > options.width && options.textOverflow !== 'Wrap' && options.textWrapping === 'NoWrap') {\n childNodes[0].text = overFlow(options.content, options);\n }\n for (i = 0; i < childNodes.length; i++) {\n tspanElement = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n textNode = document.createTextNode(childNodes[parseInt(i.toString(), 10)].text);\n child = childNodes[parseInt(i.toString(), 10)];\n child.x = setChildPosition(child, childNodes, i, options);\n if (options.textAlign === 'justify' || options.textAlign === 'left') {\n offsetX = 0;\n }\n else {\n offsetX = position.x + child.x - wrapBounds.x;\n }\n offsetY = position.y + child.dy * (i) + ((options.fontSize) * 0.8);\n if ((options.textOverflow === 'Clip' || options.textOverflow === 'Ellipsis') &&\n (options.textWrapping === 'WrapWithOverflow' || options.textWrapping === 'Wrap') && parentNode) {\n var size = (options.isHorizontalLane) ? parentNode.actualSize.width : parentNode.actualSize.height;\n if (offsetY < size) {\n if (options.textOverflow === 'Ellipsis' && childNodes[i + 1]) {\n var temp = childNodes[i + 1];\n var y = position.y + temp.dy * (i + 1) + ((options.fontSize) * 0.8);\n if (y > size) {\n child.text = child.text.slice(0, child.text.length - 3);\n child.text = child.text.concat('...');\n textNode.data = child.text;\n }\n }\n //EJ2-863489 - Node annotation textAlign \"Justify\" option is not working correctly\n this.alignText(text, tspanElement, child, textNode, offsetX, offsetY, i, options, childNodes);\n childNodesHeight += child.dy;\n }\n else {\n break;\n }\n }\n else {\n //EJ2-863489 - Node annotation textAlign \"Justify\" option is not working correctly\n this.alignText(text, tspanElement, child, textNode, offsetX, offsetY, i, options, childNodes);\n }\n }\n }\n if (childNodesHeight && options.isHorizontalLane) {\n pivotX = options.parentOffsetX + options.pivotX;\n pivotY = options.parentOffsetY + options.pivotY;\n options.y = options.parentOffsetY - childNodesHeight * options.pivotY + 0.5;\n }\n if (options.textDecoration && options.textDecoration === 'LineThrough') {\n options.textDecoration = wordBreakToString(options.textDecoration);\n }\n var attr = {\n 'id': options.id + '_text', 'fill': options.color, 'visibility': options.visible ? 'visible' : 'hidden',\n 'text-decoration': options.textDecoration, 'transform': 'rotate(' + options.angle + ','\n + (pivotX) + ',' + (pivotY) + ')'\n + 'translate(' + (options.x) + ',' + (options.y) + ')', 'opacity': options.opacity\n };\n if (ariaLabel) {\n // BLAZ-24062: Adding 'aria-label' without role attribute it causes violation in accessibility test\n attr['role'] = 'img';\n attr['aria-label'] = ariaLabel;\n }\n setAttributeSvg(text, attr);\n }\n };\n SvgRenderer.prototype.alignText = function (text, tspanElement, child, textNode, offsetX, offsetY, i, options, childNodes) {\n //EJ2-863489 - Node annotation textAlign \"Justify\" option is not working correctly\n if (options.textAlign !== 'justify') {\n this.setText(text, tspanElement, child, textNode, offsetX, offsetY, options);\n }\n else {\n if (i !== childNodes.length - 1) {\n var textlength = options.width;\n var adjustlen = 'spacing';\n this.setText(text, tspanElement, child, textNode, offsetX, offsetY, options, textlength, adjustlen);\n }\n else {\n this.setText(text, tspanElement, child, textNode, offsetX, offsetY, options);\n }\n }\n };\n SvgRenderer.prototype.setText = function (text, tspanElement, child, textNode, offsetX, offsetY, options, textlength, adjustlen) {\n if (options.textAlign !== 'justify') {\n setAttributeSvg(tspanElement, { 'x': offsetX.toString(), 'y': offsetY.toString() });\n }\n else {\n setAttributeSvg(tspanElement, { 'x': offsetX.toString(), 'y': offsetY.toString(), 'textLength': textlength ? textlength : 0, 'lengthAdjust': adjustlen ? adjustlen : 'spacing' });\n }\n text.setAttribute('fill', child.text);\n tspanElement.appendChild(textNode);\n text.appendChild(tspanElement);\n };\n /**\n * Draw the image element for the diagram\\\n *\n * @returns {void} Draw the image element for the diagram .\n * @param { SVGElement | HTMLCanvasElement} canvas - Provide the SVG element .\n * @param {ImageAttributes} obj - Provide the image attributes .\n * @param {SVGSVGElement} parentSvg - Provide the parent SVG element .\n * @param {boolean} fromPalette - Provide the pointer event value .\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n SvgRenderer.prototype.drawImage = function (canvas, obj, parentSvg, fromPalette) {\n ///const id: string = obj.id + '_image';\n var image;\n if (parentSvg) {\n image = parentSvg.getElementById(obj.id + 'image');\n }\n if (!image) {\n image = document.createElementNS('http://www.w3.org/2000/svg', 'image');\n canvas.appendChild(image);\n }\n var imageObj = new Image();\n imageObj.src = obj.source;\n var scale = obj.scale !== 'None' ? obj.scale : '';\n //Removed isBlazor code\n var imgAlign = obj.alignment;\n var aspectRatio = imgAlign.charAt(0).toLowerCase() + imgAlign.slice(1);\n if (scale !== 'Stretch') {\n aspectRatio += ' ' + scale.charAt(0).toLowerCase() + scale.slice(1);\n }\n var attr = {\n 'id': obj.id + 'image', 'x': obj.x.toString(), 'y': obj.y.toString(), 'transform': 'rotate(' + obj.angle + ','\n + (obj.x + obj.width * obj.pivotX) + ',' + (obj.y + obj.height * obj.pivotY) + ')',\n 'width': obj.width.toString(), 'visibility': obj.visible ? 'visible' : 'hidden',\n 'height': obj.height.toString(), 'preserveAspectRatio': aspectRatio,\n //832073 - Opacity when set to Zero for image node is not working - opacity value of 1 is already set as default\n 'opacity': obj.opacity.toString()\n };\n setAttributeSvg(image, attr);\n image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', imageObj.src.toString());\n };\n /**\n * Draw the HTML element for the diagram\\\n *\n * @returns {void} Draw the native element for the diagram.\n * @param {DiagramHtmlElement} element - Provide the element .\n * @param {HTMLElement} canvas - Provide the canvas element .\n * @param {Transforms} transform - Provide the transform value .\n * @param {boolean} value - Provide the pointer event value .\n * @param {number} indexValue - Provide the index value .\n * @private\n */\n SvgRenderer.prototype.drawHTMLContent = function (element, canvas, transform, value, indexValue) {\n var htmlElement;\n var parentHtmlElement;\n if (canvas) {\n //869698- drag performance is slow when dealing with 1000 plus HTML shapes and Overview feature\n htmlElement = canvas.querySelector('#' + element.id + '_html_element');\n }\n if (!htmlElement) {\n parentHtmlElement = canvas.querySelector(('#' + element.id + '_html_element')) ||\n canvas.querySelector(('#' + element.nodeId + '_html_element'));\n if (!parentHtmlElement) {\n var attr_1 = {\n 'id': element.nodeId + '_html_element',\n 'class': 'foreign-object'\n };\n parentHtmlElement = createHtmlElement('div', attr_1);\n }\n var attr = {\n 'id': element.id + '_html_element',\n 'class': 'foreign-object'\n };\n htmlElement = createHtmlElement('div', attr);\n var diagram = document.getElementById(element.diagramId).ej2_instances[0];\n var isOverviewLayer = false;\n if (canvas.parentNode && canvas.parentNode.parentNode && canvas.parentNode.parentNode.parentNode && canvas.parentNode.parentNode.parentNode.classList.contains('e-overview')) {\n isOverviewLayer = true;\n }\n if (isOverviewLayer) {\n //893685: HTML node with node Template not shown in Overview in React.\n if (diagram.isReact) {\n diagram.renderReactTemplates(function () {\n htmlElement.appendChild(element.template.cloneNode(true));\n });\n }\n else {\n htmlElement.appendChild(element.template.cloneNode(true));\n }\n }\n else {\n //Bug 852259: User handle template not working properly after saving and loading the diagram.\n // After serialization the template will be in string format, so we need to convert it to element.\n if (typeof element.template === 'string') {\n var temp = document.createElement('div');\n temp.innerHTML = element.template;\n element.template = temp;\n var handle = diagram.selectedItems.userHandles.filter(function (x) {\n return x.name === (element.id.split('_shape')[0]) && x.template !== '';\n });\n handle[0].template = element.template;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n // 883335-Exception Throws When Loading Data Without Defining Node Template at Application Level\n if (element.isTemplate && element.template) {\n htmlElement.appendChild(element.template);\n }\n else if (element.template) {\n htmlElement.appendChild(element.template.cloneNode(true));\n }\n }\n if (indexValue !== undefined && canvas.childNodes.length > indexValue) {\n canvas.insertBefore(htmlElement, canvas.childNodes[parseInt(indexValue.toString(), 10)]);\n }\n parentHtmlElement.appendChild(htmlElement);\n canvas.appendChild(parentHtmlElement);\n }\n var point = cornersPointsBeforeRotation(element).topLeft;\n htmlElement.setAttribute('style', 'height:' + (element.actualSize.height) + 'px; width:' + (element.actualSize.width) +\n 'px;left:' + point.x + 'px; top:' + point.y + 'px;' +\n 'position:absolute;transform:rotate(' + (element.rotateAngle + element.parentTransform) + 'deg);' +\n 'pointer-events:' + (value ? 'all' : 'none')\n + ';visibility:' + ((element.visible) ? 'visible' : 'hidden') + ';opacity:' + element.style.opacity + ';');\n };\n /**\n * Draw the native element for the diagram\\\n *\n * @returns {void} Draw the native element for the diagram.\n * @param {DiagramNativeElement} element - Provide the node element .\n * @param {HTMLCanvasElement} canvas - Provide the SVG element .\n * @param {number} height - Provide the height for the shape .\n * @param {number} width - Provide the width for the shape .\n * @param {SVGSVGElement} parentSvg - Provide the parent svg for the shape .\n * @private\n */\n SvgRenderer.prototype.drawNativeContent = function (element, canvas, height, width, parentSvg) {\n var nativeElement;\n var clipPath;\n if (parentSvg) {\n nativeElement = parentSvg.getElementById(element.id + '_native_element');\n clipPath = parentSvg.getElementById(element.id + '_clip');\n }\n if (!nativeElement) {\n nativeElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n nativeElement.setAttribute('id', element.id + '_native_element');\n nativeElement.appendChild(element.template.cloneNode(true));\n var svgContentTag = this.createGElement('g', { id: element.id + '_inner_native_element' });\n svgContentTag.appendChild(nativeElement);\n canvas.appendChild(svgContentTag);\n }\n if (clipPath) {\n nativeElement.removeChild(clipPath);\n }\n nativeElement.setAttribute('style', 'visibility:' +\n ((element.visible) ? 'visible' : 'hidden') + ';opacity:' + element.style.opacity + ';');\n this.setNativTransform(element, nativeElement, height, width);\n if (element.scale === 'Slice') {\n this.drawClipPath(element, nativeElement, height, width, parentSvg);\n }\n setAttributeSvg(nativeElement, element.description ? { 'role': 'img', 'aria-label': element.description } : {});\n };\n SvgRenderer.prototype.setNativTransform = function (element, nativeElement, height, width) {\n //let angle: number;\n var contentWidth = element.contentSize.width !== 0 ? element.contentSize.width : 1;\n var contentHeight = element.contentSize.height !== 0 ? element.contentSize.height : 1;\n var x = element.templatePosition.x * width / contentWidth;\n var y = element.templatePosition.y * height / contentHeight;\n nativeElement.setAttribute('transform', 'rotate(' + element.parentTransform + ',' + element.offsetX + ',' + element.offsetY +\n ') translate(' + (element.offsetX - x - width * element.pivot.x) + ',' + (element.offsetY - y - height * element.pivot.y) +\n ') scale(' + (width / contentWidth) + ',' + (height / contentHeight) + ')');\n };\n /**\n *used to crop the given native element into a rectangle of the given size .\\\n *\n * @returns {SVGElement} used to crop the given native element into a rectangle of the given size.\n * @param {DiagramNativeElement} node - Provide the node element .\n * @param {SVGElement} group - Provide the SVG element .\n * @param {number} height - Provide the height for the shape .\n * @param {number} width - Provide the width for the shape .\n * @param {SVGSVGElement} parentSvg - Provide the parent svg for the shape .\n * @private\n */\n SvgRenderer.prototype.drawClipPath = function (node, group, height, width, parentSvg) {\n var contentWidth = node.contentSize.width;\n var contentHeight = node.contentSize.height;\n //let actualWidth: number = node.actualSize.width;\n //let actualHeight: number = node.actualSize.height;\n var clipWidth = node.width / (width / contentWidth);\n var clipHeight = node.height / (height / contentHeight);\n var x = node.templatePosition.x + (node.width >= node.height ? 0 : (contentWidth - clipWidth) / 2);\n var y = node.templatePosition.y + (node.height >= node.width ? 0 : (contentHeight - clipHeight) / 2);\n var clipPath = parentSvg.getElementById(node.id + '_clip');\n clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');\n clipPath.setAttribute('id', node.id + '_clip');\n group.appendChild(clipPath);\n var rect = parentSvg.getElementById(node.id + '_clip_rect');\n rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n clipPath.appendChild(rect);\n var attr = {\n 'id': node.id + '_clip_rect', 'width': clipWidth.toString(), 'height': clipHeight.toString(),\n 'x': x.toString(), 'y': y.toString()\n };\n setAttributeSvg(rect, attr);\n if (checkBrowserInfo()) {\n group.setAttribute('clip-path', 'url(' + location.protocol + '//' + location.host + location.pathname +\n '#' + node.id + '_clip)');\n }\n else {\n group.setAttribute('clip-path', 'url(#' + node.id + '_clip)');\n }\n return group;\n };\n /**\n * Draw the gradient for the diagram shapes .\\\n *\n * @returns {SVGElement} Draw the gradient for the diagram shapes.\n * @param {StyleAttributes} options - Provide the options for the gradient element .\n * @param {SVGElement} svg - Provide the SVG element .\n * @param {string} diagramId - Provide the diagram id .\n * @private\n */\n SvgRenderer.prototype.renderGradient = function (options, svg, diagramId) {\n var max;\n var min;\n var grd;\n var svgContainer = getBackgroundLayerSvg(diagramId);\n var defs = svgContainer.getElementById(diagramId + 'gradient_pattern');\n if (!defs) {\n defs = createSvgElement('defs', { id: diagramId + 'gradient_pattern' });\n svgContainer.insertBefore(defs, svgContainer.firstChild);\n }\n var radial;\n var linear; //let stop: StopModel; let offset: number;\n removeGradient(svg.id);\n if (options.gradient.type !== 'None') {\n for (var i = 0; i < options.gradient.stops.length; i++) {\n max = !max ? options.gradient.stops[parseInt(i.toString(), 10)].offset\n : Math.max(max, options.gradient.stops[parseInt(i.toString(), 10)].offset);\n min = !min ? options.gradient.stops[parseInt(i.toString(), 10)].offset\n : Math.min(min, options.gradient.stops[parseInt(i.toString(), 10)].offset);\n }\n if (options.gradient.type === 'Linear') {\n linear = options.gradient;\n linear.id = svg.id + '_linear';\n grd = this.createLinearGradient(linear);\n defs.appendChild(grd);\n }\n else {\n radial = options.gradient;\n radial.id = svg.id + '_radial';\n grd = this.createRadialGradient(radial);\n defs.appendChild(grd);\n }\n for (var i = 0; i < options.gradient.stops.length; i++) {\n var stop_1 = options.gradient.stops[parseInt(i.toString(), 10)];\n var offset = min < 0 ? (max + stop_1.offset) / (2 * max) : stop_1.offset / max;\n var stopElement = document.createElementNS('http://www.w3.org/2000/svg', 'stop');\n setAttributeSvg(stopElement, { 'offset': offset.toString(), 'style': 'stop-color:' + stop_1.color });\n grd.appendChild(stopElement);\n }\n }\n return grd;\n };\n /**\n * Draw the Linear gradient for the diagram .\\\n *\n * @returns {SVGElement} Draw the Linear gradient for the diagram.\n * @param {LinearGradientModel} linear - Provide the objects for the gradient element .\n * @private\n */\n SvgRenderer.prototype.createLinearGradient = function (linear) {\n var lineargradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');\n var attr = {\n 'id': linear.id, 'x1': linear.x1 + '%', 'y1': linear.y1 + '%', 'x2': linear.x2 + '%', 'y2': linear.y2 + '%'\n };\n setAttributeSvg(lineargradient, attr);\n return lineargradient;\n };\n /**\n * Draw the radial gradient for the diagram .\\\n *\n * @returns {SVGElement} Draw the radial gradient for the diagram.\n * @param {RadialGradientModel} radial - Provide the objects for the gradient element .\n * @private\n */\n SvgRenderer.prototype.createRadialGradient = function (radial) {\n var radialgradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');\n var attr = {\n 'id': radial.id, 'cx': radial.cx + '%', 'cy': radial.cy + '%', 'r': radial.r + '%', 'fx': radial.fx + '%', 'fy': radial.fy + '%'\n };\n setAttributeSvg(radialgradient, attr);\n return radialgradient;\n };\n /**\n * Set the SVG style for the SVG elements in the diagram.\\\n *\n * @returns {void}\n * @param {SVGElement} svg - Provide the canvas element .\n * @param {StyleAttributes} style - Provide the canvas element .\n * @param {string} diagramId - Provide the canvas element .\n * @private\n */\n SvgRenderer.prototype.setSvgStyle = function (svg, style, diagramId) {\n if (style.canApplyStyle || style.canApplyStyle === undefined) {\n if (style.fill === 'none') {\n style.fill = 'transparent';\n }\n if (style.stroke === 'none') {\n style.stroke = 'transparent';\n }\n var dashArray = [];\n var fill = void 0;\n if (style.dashArray) {\n var canvasRenderer = new CanvasRenderer();\n dashArray = canvasRenderer.parseDashArray(style.dashArray);\n }\n if (style.gradient && style.gradient.type !== 'None' && diagramId) {\n var grd = this.renderGradient(style, svg, diagramId);\n if (checkBrowserInfo()) {\n fill = 'url(' + location.protocol + '//' + location.host + location.pathname + '#' + grd.id + ')';\n }\n else {\n fill = 'url(#' + grd.id + ')';\n }\n }\n else {\n fill = style.fill;\n }\n if (style.stroke) {\n svg.setAttribute('stroke', style.stroke);\n }\n if (style.strokeWidth !== undefined && style.strokeWidth !== null) {\n svg.setAttribute('stroke-width', style.strokeWidth.toString());\n }\n if (dashArray) {\n svg.setAttribute('stroke-dasharray', dashArray.toString() || 'none');\n }\n if (fill) {\n svg.setAttribute('fill', fill);\n }\n }\n };\n //end region\n // text utility\n /**\n * Draw the SVG label.\\\n *\n * @returns {PointModel} Draw the SVG label .\n * @param {TextAttributes} text - Provide the canvas element .\n * @param {Object} wrapBound - Provide the canvas element .\n * @param {SubTextElement []} childNodes - Provide the canvas element .\n * @private\n */\n SvgRenderer.prototype.svgLabelAlign = function (text, wrapBound, childNodes) {\n var bounds = new Size(wrapBound.width, childNodes.length * (text.fontSize * 1.2));\n var pos = { x: 0, y: 0 };\n var x = 0;\n var y = 1.2;\n var offsetX = text.width * 0.5;\n var offsety = text.height * 0.5;\n var pointX = offsetX;\n var pointY = offsety;\n if (text.textAlign === 'left' || text.textAlign === 'justify') {\n pointX = 0;\n }\n else if (text.textAlign === 'center') {\n if (wrapBound.width > text.width && (text.textOverflow === 'Ellipsis' || text.textOverflow === 'Clip')) {\n if (text.textWrapping === 'NoWrap') {\n pointX = 0;\n }\n else {\n pointX = text.width * 0.5;\n }\n }\n else {\n pointX = text.width * 0.5;\n }\n }\n else if (text.textAlign === 'right') {\n pointX = (text.width * 1);\n }\n pos.x = x + pointX + (wrapBound ? wrapBound.x : 0);\n pos.y = y + pointY - bounds.height / 2;\n return pos;\n };\n return SvgRenderer;\n}());\n\n/**\n * Renderer module is used to render basic diagram elements\n */\n/** @private */\nvar DiagramRenderer = /** @__PURE__ @class */ (function () {\n function DiagramRenderer(name, svgRender, isSvgMode) {\n /** @private */\n this.renderer = null;\n /** @private */\n this.isSvgMode = true;\n /** @private */\n this.touchMove = undefined;\n this.transform = { x: 0, y: 0 };\n this.diagramId = name;\n this.element = getDiagramElement(this.diagramId);\n this.svgRenderer = svgRender;\n this.isSvgMode = isSvgMode;\n this.renderer = isSvgMode ? new SvgRenderer() : new CanvasRenderer();\n }\n /**\n * Method used to set the cur \\\n *\n * @param {HTMLElement} canvas - Provide the canvas .\n * @param {string} cursor - Provide the element .\n * @returns {void } Method used to set the layer .\\\n * @private\n */\n DiagramRenderer.prototype.setCursor = function (canvas, cursor) {\n canvas.style.cursor = cursor;\n };\n /**\n * Method used to set the layer \\\n *\n * @returns {void } Method used to set the layer .\\\n *\n * @private\n */\n DiagramRenderer.prototype.setLayers = function () {\n this.iconSvgLayer = this.element.getElementsByClassName('e-ports-expand-layer')[0];\n this.adornerSvgLayer = this.element.getElementsByClassName('e-adorner-layer')[0];\n this.nativeSvgLayer = this.element.getElementsByClassName('e-native-layer')[0];\n this.diagramSvgLayer = this.element.getElementsByClassName('e-diagram-layer')[0];\n };\n DiagramRenderer.prototype.getAdornerLayer = function () {\n var adornerLayer = getAdornerLayer(this.diagramId);\n return adornerLayer;\n };\n DiagramRenderer.prototype.getParentSvg = function (element, targetElement, canvas) {\n if (this.diagramId && element && element.id) {\n if (element.id.split('_icon_content').length > 1 || element.id.split('_nodeport').length > 1 ||\n (element.elementActions & ElementAction.ElementIsPort)) {\n return this.iconSvgLayer;\n }\n if (targetElement && targetElement === 'selector') {\n return this.adornerSvgLayer;\n }\n else if (element instanceof DiagramNativeElement) {\n return this.nativeSvgLayer;\n }\n else {\n return this.diagramSvgLayer;\n }\n }\n return canvas;\n };\n DiagramRenderer.prototype.getParentElement = function (element, defaultParent, svgElement, indexValue) {\n var layerGElement = defaultParent;\n if (svgElement && this.diagramId && element && element.id) {\n if (element.id.split('_icon_content').length > 1) {\n layerGElement = svgElement.getElementById(this.diagramId + '_diagramExpander');\n defaultParent = null;\n }\n else if (element.id.split('_nodeport').length > 1) {\n layerGElement = svgElement.getElementById(this.diagramId + '_diagramPorts');\n }\n else if (element instanceof DiagramNativeElement) {\n layerGElement = svgElement.getElementById(this.diagramId + '_nativeLayer');\n defaultParent = null;\n }\n else if (element.elementActions & ElementAction.ElementIsPort) {\n layerGElement = svgElement.getElementById(this.diagramId + '_diagramPorts');\n defaultParent = null;\n }\n else {\n layerGElement = svgElement.getElementById(this.diagramId + '_diagramLayer');\n }\n var groupElement = this.getGroupElement(element, defaultParent || layerGElement, indexValue);\n layerGElement = groupElement.g;\n if (groupElement.svg) {\n svgElement = groupElement.svg;\n }\n }\n return { g: layerGElement, svg: svgElement };\n };\n DiagramRenderer.prototype.getGroupElement = function (element, canvas, indexValue) {\n var gElement;\n var parentSvg = this.getParentSvg(element);\n var svgElement;\n if (canvas && parentSvg) {\n if (parentSvg) {\n gElement = parentSvg.getElementById(element.id + '_groupElement');\n if (!gElement && parentSvg !== this.nativeSvgLayer) { //code added\n var nativeSvg = this.nativeSvgLayer;\n gElement = nativeSvg.getElementById(element.id + '_groupElement');\n svgElement = nativeSvg;\n }\n }\n if (!gElement) {\n gElement = this.svgRenderer.createGElement('g', { id: element.id + '_groupElement' });\n if (indexValue !== undefined && canvas.childNodes.length > indexValue) {\n canvas.insertBefore(gElement, canvas.childNodes[parseInt(indexValue.toString(), 10)]);\n }\n else {\n canvas.appendChild(gElement);\n }\n }\n }\n return { g: gElement, svg: svgElement };\n };\n /**\n * Method used to render the diagram element \\\n *\n * @returns {void } Method used to render the diagram element .\\\n *\n * @param {DiagramElement} element - Provide the DiagramElement value.\n * @param {HTMLCanvasElement | SVGElement } canvas - Provide the canvas value.\n * @param {HTMLElement } htmlLayer - Provide the HTMLElement value.\n * @param {Transforms } transform - Provide the Transforms value.\n * @param {SVGSVGElement} parentSvg - Provide the SVGSVGElement value.\n * @param {boolean } createParent - Provide the boolean value.\n * @param {boolean } fromPalette - Provide the boolean value.\n * @param {number } indexValue - Provide the indexValue value.\n * @param {boolean } isPreviewNode - Provide the isPreviewNode value.\n * @param {object } centerPoint - Provide the centerPoint value.\n * @param {object} portCenterPoint - Provide the portCenterPoint value.\n * @private\n */\n DiagramRenderer.prototype.renderElement = function (element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette, indexValue, isPreviewNode, centerPoint, portCenterPoint) {\n if (element instanceof Container) {\n element.id = element.id ? element.id : randomId();\n this.renderContainer(element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette, indexValue, isPreviewNode, centerPoint, portCenterPoint);\n }\n else if (element instanceof ImageElement) {\n this.renderImageElement(element, canvas, transform, parentSvg, fromPalette);\n }\n else if (element instanceof PathElement) {\n this.renderPathElement(element, canvas, transform, parentSvg, fromPalette, isPreviewNode, portCenterPoint);\n }\n else if (element instanceof TextElement) {\n this.renderTextElement(element, canvas, transform, parentSvg, fromPalette, centerPoint);\n }\n else if (element instanceof DiagramNativeElement) {\n this.renderNativeElement(element, canvas, transform, parentSvg, fromPalette);\n }\n else if (element instanceof DiagramHtmlElement) {\n this.renderHTMLElement(element, canvas, htmlLayer, transform, parentSvg, fromPalette, indexValue);\n }\n else {\n this.renderRect(element, canvas, transform, parentSvg, isPreviewNode);\n }\n };\n /**\n * Method used to draw the selection rectangle for the node \\\n *\n * @returns {void } Method used to draw the selection rectangle for the node .\\\n *\n * @param {number} x - Provide the DiagramElement value.\n * @param {number } y - Provide the SVGElement value.\n * @param {number } w - Provide the Transforms value.\n * @param {number } h - Provide the Transforms value.\n * @param {HTMLCanvasElement | SVGElement } canvas - Provide the Transforms value.\n * @param {number } t - Provide the Transforms value.\n * @private\n */\n DiagramRenderer.prototype.drawSelectionRectangle = function (x, y, w, h, canvas, t) {\n x = (x + t.tx) * t.scale;\n y = (y + t.ty) * t.scale;\n var options = {\n width: w * t.scale, height: h * t.scale,\n x: x + 0.5, y: y + 0.5, fill: 'transparent', stroke: 'gray', angle: 0,\n pivotX: 0.5, pivotY: 0.5, strokeWidth: 1,\n dashArray: '6 3', opacity: 1,\n visible: true, id: canvas.id + '_selected_region'\n };\n var adornerLayer = this.getAdornerLayer();\n this.svgRenderer.updateSelectionRegion(adornerLayer, options);\n };\n /**\n * Method used to render the highlighter \\\n *\n * @returns {void } Method used to render the highlighter .\\\n *\n * @param {DiagramElement} element - Provide the DiagramElement value.\n * @param {SVGElement } canvas - Provide the SVGElement value.\n * @param {Transforms } transform - Provide the Transforms value.\n * @private\n */\n DiagramRenderer.prototype.renderHighlighter = function (element, canvas, transform) {\n var width = element.actualSize.width || 2;\n var height = element.actualSize.height || 2;\n var x = element.offsetX - width * element.pivot.x;\n var y = element.offsetY - height * element.pivot.y;\n x = (x + transform.tx) * transform.scale;\n y = (y + transform.ty) * transform.scale;\n var options = {\n width: width * transform.scale, height: height * transform.scale,\n x: x, y: y, fill: 'transparent', stroke: '#8CC63F', angle: element.rotateAngle,\n pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: 4,\n dashArray: '', opacity: 1, cornerRadius: 0,\n visible: true, id: canvas.id + '_highlighter', class: 'e-diagram-highlighter'\n };\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, canvas);\n };\n /**\n * Method used to render the node selection rectangle \\\n *\n * @returns {void } Method used to render the node selection rectangle .\\\n *\n * @param {DiagramElement} element - Provide the DiagramElement value.\n * @param {SVGElement } canvas - Provide the SVGElement value.\n * @param {Transforms } transform - Provide the Transforms value.\n * @param {number } isFirst - Provide the boolean value.\n * @private\n */\n DiagramRenderer.prototype.renderSelectionRectangle = function (element, canvas, transform, isFirst) {\n var width = element.actualSize.width || 2;\n var height = element.actualSize.height || 2;\n var x = element.offsetX - width * element.pivot.x;\n var y = element.offsetY - height * element.pivot.y;\n x = (x + transform.tx) * transform.scale;\n y = (y + transform.ty) * transform.scale;\n var options = {\n width: width * transform.scale, height: height * transform.scale,\n x: x, y: y, fill: 'transparent', stroke: '#00cc00', angle: element.rotateAngle,\n pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: isFirst ? 2 : 1,\n dashArray: '', opacity: 1, cornerRadius: 0,\n visible: true, id: element.id + '_highlighter', class: isFirst ? 'e-diagram-first-selection-indicator e-diagram-selection-indicator' : 'e-diagram-selection-indicator'\n };\n var parentSvg = this.getParentSvg(element, 'selector');\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n };\n /**\n * Method used to render the selection line for connector \\\n *\n * @returns {void } Method used to render the selection line for connector .\\\n *\n * @param {PathElement} element - Provide the path element of the diagram .\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element value.\n * @param { Transforms } transform - Provide the transform value.\n * @param { boolean } isFirst - Provide the boolean value.\n * @private\n */\n DiagramRenderer.prototype.renderSelectionLine = function (element, canvas, transform, isFirst) {\n var options = this.getBaseAttributes(element, transform);\n options.data = element.absolutePath;\n options.id = options.id + '_highlighter';\n var ariaLabel = element.description ? element.description : element.id;\n if (!this.isSvgMode) {\n options.x = element.flipOffset.x ? element.flipOffset.x : options.x;\n options.y = element.flipOffset.y ? element.flipOffset.y : options.y;\n }\n if (transform) {\n options.x = options.x * transform.scale;\n options.y = options.y * transform.scale;\n }\n options.stroke = '#00cc00';\n options.strokeWidth = isFirst ? 2 : 1;\n options.class = isFirst ? 'e-diagram-first-selection-indicator e-diagram-selection-indicator' : 'e-diagram-selection-indicator';\n var parentSvg = this.getParentSvg(element, 'selector');\n this.svgRenderer.drawPath(canvas, options, this.diagramId, undefined, parentSvg, ariaLabel, transform.scale);\n };\n /**\n * Method used to render the stack highlighter \\\n *\n * @returns {void } Method used to render the stack highlighter .\\\n *\n * @param {DiagramElement} element - Provide the DiagramElement value.\n * @param {SVGElement } canvas - Provide the SVGElement value.\n * @param {Transforms } transform - Provide the Transforms value.\n * @param {boolean} isVertical - Provide the Boolean value.\n * @param {PointModel } position - Provide the PointModel value.\n * @param {boolean } isUml - Provide the boolean value.\n * @param {boolean } isSwimlane - Provide the boolean value.\n * @private\n */\n DiagramRenderer.prototype.renderStackHighlighter = function (element, canvas, transform, isVertical, position, isUml, isSwimlane) {\n var width = element.actualSize.width || 2;\n var x = element.offsetX - width * element.pivot.x;\n var height = element.actualSize.height || 2;\n var y = element.offsetY - height * element.pivot.y;\n x = (x + transform.tx) * transform.scale;\n var data;\n var bounds = element.bounds;\n var newPathString = '';\n y = (y + transform.ty) * transform.scale;\n if (!isVertical) {\n var d = height * transform.scale;\n data = 'M 10 -10 L 0 0 Z M -10 -10 L 0 0 Z M 0 0 L 0 ' + (d) + ' Z M 0 ' + (d) +\n ' L -10 ' + (d + 10) + ' Z L 10 ' + (d + 10) + ' Z';\n if (position.x >= element.offsetX) {\n //879085- swimlane helper guides not rendered properly when zoomed\n x += width * transform.scale;\n }\n }\n else {\n if (isUml) {\n var d = width * transform.scale;\n data = 'M 0 0 L ' + (d + 2) + ' 0 Z';\n var scaleX = -bounds.x;\n var scaleY = -bounds.y;\n var arrayCollection = [];\n scaleX = element.actualSize.width / Number(bounds.width ? bounds.width : 1) * transform.scale;\n scaleY = element.actualSize.height / Number(bounds.height ? bounds.height : 1) * transform.scale;\n var umlData = 'M7,4 L8,4 8,7 11,7 11,8 8,8 8,11 7,11 7,8 4,8 4,7 7,7 z M7.5,0.99999994' +\n 'C3.9160004,1 1,3.9160004 0.99999994,7.5 1,11.084 3.9160004,14 7.5,14 11.084,14 14,11.084 14,7.5 14,' +\n '3.9160004 11.084,1 7.5,0.99999994 z M7.5,0 C11.636002,0 15,3.3639984 15,7.5 15,11.636002 11.636002,15 7.5,' +\n '15 3.3640003,15 0,11.636002 0,7.5 0,3.3639984 3.3640003,0 7.5,0 z';\n arrayCollection = processPathData(umlData);\n arrayCollection = splitArrayCollection(arrayCollection);\n newPathString = transformPath(arrayCollection, scaleX + d + 2, scaleY - 8, false, bounds.x, bounds.y, 0, 0);\n if (position.y >= element.offsetY) {\n y += height;\n }\n }\n else {\n if (isSwimlane) {\n if (position.y >= element.offsetY) {\n //879085- swimlane helper guides not rendered properly when zoomed\n y += height * transform.scale;\n }\n }\n var d = width * transform.scale;\n data = 'M -10 -10 L 0 0 Z M -10 10 L 0 0 Z M 0 0 L ' + (d) + ' 0 Z M ' + (d) + ' 0 L ' +\n (d + 10) + ' 10 Z L ' + (d + 10) + ' -10 Z';\n }\n }\n var options = {\n data: data + newPathString,\n width: width * transform.scale, height: height * transform.scale,\n x: x, y: y, fill: 'transparent', stroke: '#8CC63F', angle: element.rotateAngle,\n pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: 1,\n dashArray: '', opacity: 1,\n visible: true, id: canvas.id + '_stack_highlighter', class: 'e-diagram-highlighter'\n };\n this.svgRenderer.drawPath(canvas, options, this.diagramId);\n };\n /**\n * Method used to draw the line \\\n *\n * @returns {void } Method used to draw the line .\\\n *\n * @param {SVGElement} canvas - Provide the SVGElement value.\n * @param {LineAttributes } options - Provide the LineAttributes value.\n * @private\n */\n DiagramRenderer.prototype.drawLine = function (canvas, options) {\n this.svgRenderer.drawLine(canvas, options);\n };\n /**\n * Method used to draw the path \\\n *\n * @returns {void } Method used to draw the path .\\\n *\n * @param {SVGElement} canvas - Provide the canvas value.\n * @param {PathAttributes } options - Provide the PathAttributes value.\n * @private\n */\n DiagramRenderer.prototype.drawPath = function (canvas, options) {\n this.svgRenderer.drawPath(canvas, options, this.diagramId);\n };\n /**\n * Method used to render the resize handle \\\n *\n * @returns {void } Method used to render the resize handle .\\\n *\n * @param {DiagramElement} element - Provide the DiagramElement value.\n * @param {HTMLCanvasElement | SVGElement } canvas - Provide the canvas element.\n * @param { ThumbsConstraints } constraints - Provide the constraints value .\n * @param { number} currentZoom - Provide the currentZoom value.\n * @param { SelectorConstraints } selectorConstraints - Provide the selectorConstraints value .\n * @param { Transforms } transform - Provide the transform value.\n * @param { boolean } canMask - Provide the canMask boolean value.\n * @param { number } enableNode - Provide the enableNode value.\n * @param { boolean } nodeConstraints - Provide the nodeConstraints value.\n * @param { boolean } isSwimlane - Provide the isSwimlane boolean value.\n * @param { number } handleSize - Provide the handleSize value.\n * @private\n */\n DiagramRenderer.prototype.renderResizeHandle = function (element, canvas, constraints, currentZoom, selectorConstraints, transform, canMask, enableNode, nodeConstraints, isSwimlane, handleSize) {\n var left = element.offsetX - element.actualSize.width * element.pivot.x;\n var top = element.offsetY - element.actualSize.height * element.pivot.y;\n var height = element.actualSize.height;\n var width = element.actualSize.width;\n if (!isSwimlane &&\n (constraints & ThumbsConstraints.Rotate && canDrawThumbs(this.rendererActions) && (!avoidDrawSelector(this.rendererActions)))) {\n this.renderPivotLine(element, canvas, transform, selectorConstraints, canMask);\n this.renderRotateThumb(element, canvas, transform, selectorConstraints, canMask);\n }\n else {\n if (this.touchMove) {\n var rotateThumb = document.getElementById('rotateThumb');\n if (rotateThumb) {\n rotateThumb.setAttribute('visibility', 'hidden');\n }\n }\n }\n this.renderBorder(element, canvas, transform, enableNode, nodeConstraints, isSwimlane);\n var nodeWidth = element.actualSize.width * currentZoom;\n var nodeHeight = element.actualSize.height * currentZoom;\n if (!nodeConstraints && canDrawThumbs(this.rendererActions) && (!avoidDrawSelector(this.rendererActions))) {\n //Bug 860033: Bpmn text annotation path size not rendered properly while dragging.\n //Added below condition to prevent the resize thumbs for bpmn text annotation.\n if (!element.isTextAnnotation) {\n if (nodeWidth >= 40 && nodeHeight >= 40) {\n //Hide corners when the size is less than 40\n if (selectorConstraints & SelectorConstraints.ResizeNorthWest) {\n this.renderCircularHandle('resizeNorthWest', element, left, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthWest'), constraints & ThumbsConstraints.ResizeNorthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top left side direction' }, undefined, 'e-diagram-resize-handle e-northwest', handleSize);\n }\n if (selectorConstraints & SelectorConstraints.ResizeNorthEast) {\n this.renderCircularHandle('resizeNorthEast', element, left + width, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthEast'), constraints & ThumbsConstraints.ResizeNorthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top right side direction' }, undefined, 'e-diagram-resize-handle e-northeast', handleSize);\n }\n if (selectorConstraints & SelectorConstraints.ResizeSouthWest) {\n this.renderCircularHandle('resizeSouthWest', element, left, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthWest'), constraints & ThumbsConstraints.ResizeSouthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom left side direction' }, undefined, 'e-diagram-resize-handle e-southwest', handleSize);\n }\n if (selectorConstraints & SelectorConstraints.ResizeSouthEast) {\n this.renderCircularHandle('resizeSouthEast', element, left + width, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthEast'), constraints & ThumbsConstraints.ResizeSouthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom right side direction' }, undefined, 'e-diagram-resize-handle e-southeast', handleSize);\n }\n }\n if (selectorConstraints & SelectorConstraints.ResizeNorth) {\n this.renderCircularHandle('resizeNorth', element, left + width / 2, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorth'), constraints & ThumbsConstraints.ResizeNorth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top side direction' }, undefined, 'e-diagram-resize-handle e-north', handleSize);\n }\n if (selectorConstraints & SelectorConstraints.ResizeSouth) {\n this.renderCircularHandle('resizeSouth', element, left + width / 2, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouth'), constraints & ThumbsConstraints.ResizeSouth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom side direction' }, undefined, 'e-diagram-resize-handle e-south', handleSize);\n }\n if (selectorConstraints & SelectorConstraints.ResizeWest) {\n this.renderCircularHandle('resizeWest', element, left, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeWest'), constraints & ThumbsConstraints.ResizeWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on left side direction' }, undefined, 'e-diagram-resize-handle e-west', handleSize);\n }\n if (selectorConstraints & SelectorConstraints.ResizeEast) {\n this.renderCircularHandle('resizeEast', element, left + width, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeEast'), constraints & ThumbsConstraints.ResizeEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on right side direction' }, undefined, 'e-diagram-resize-handle e-east', handleSize);\n }\n }\n }\n };\n /**\n * Method used to render the end point of the handle \\\n *\n * @returns {void } Method used to render the end point of the handle .\\\n *\n * @param {ConnectorModel} selector - Provide the ConnectorModel.\n * @param {HTMLCanvasElement | SVGElement } canvas - Provide the element.\n * @param { ThumbsConstraints } constraints - Provide the constraints value .\n * @param { SelectorConstraints} selectorConstraints - Provide the selectorConstraints value.\n * @param { Transforms } transform - Provide the transform value .\n * @param { boolean } connectedSource - Provide the connectedSource boolean value.\n * @param { boolean } connectedTarget - Provide the connectedTarget boolean value.\n * @param { boolean } isSegmentEditing - Provide the isSegmentEditing boolean value.\n * @param { boolean } canShowBezierPoints - Provide the canShowBezierPoints boolean value.\n * @param {number} handleSize - Provide the handleSize value.\n * @private\n */\n DiagramRenderer.prototype.renderEndPointHandle = function (selector, canvas, constraints, selectorConstraints, transform, connectedSource, connectedTarget, isSegmentEditing, canShowBezierPoints, handleSize) {\n var sourcePoint = selector.sourcePoint;\n var targetPoint = selector.targetPoint;\n var wrapper = selector.wrapper;\n var i;\n var segment;\n this.renderCircularHandle('connectorSourceThumb', wrapper, sourcePoint.x, sourcePoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorSourceThumb'), constraints & ThumbsConstraints.ConnectorSource, transform, connectedSource, undefined, { 'aria-label': 'Thumb to move the source point of the connector' }, undefined, 'e-diagram-endpoint-handle e-sourceend', handleSize);\n this.renderCircularHandle('connectorTargetThumb', wrapper, targetPoint.x, targetPoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorTargetThumb'), constraints & ThumbsConstraints.ConnectorTarget, transform, connectedTarget, undefined, { 'aria-label': 'Thumb to move the target point of the connector' }, undefined, 'e-diagram-endpoint-handle e-targetend', handleSize);\n if (isSegmentEditing) {\n if ((selector.type === 'Straight') && selector.segments.length > 0) {\n for (i = 0; i < selector.segments.length - 1; i++) {\n segment = selector.segments[parseInt(i.toString(), 10)];\n var className = 'e-diagram-straight-segment-handle';\n this.renderCircularHandle(('segementThumb_' + (i + 1)), wrapper, segment.point.x, segment.point.y, canvas, true, constraints & ThumbsConstraints.ConnectorSource, transform, connectedSource, null, null, i, className, handleSize);\n }\n } //824805-Support to modify bezier connector segment thumb shape and style\n else if ((selector.type === 'Bezier') && selector.segments.length > 0) {\n for (i = 0; i < selector.segments.length - 1; i++) {\n segment = selector.segments[parseInt(i.toString(), 10)];\n var className = 'e-diagram-bezier-segment-handle';\n this.renderBezierHandle(('segementThumb_' + (i + 1)), wrapper, segment.point.x, segment.point.y, canvas, true, selector, transform, connectedSource, null, i, className, handleSize);\n }\n }\n else {\n // (EJ2-57115) - Added below code to check if maxSegmentThumb is zero or not\n if (!selector.maxSegmentThumb) {\n for (i = 0; i < selector.segments.length; i++) {\n var seg = selector.segments[parseInt(i.toString(), 10)];\n this.renderOrthogonalThumbs('orthoThumb_' + (i + 1), wrapper, seg, canvas, canShowCorner(selectorConstraints, 'ConnectorSourceThumb'), transform, selector);\n }\n }\n else {\n // (EJ2-57115) - Added below code to check if maxSegmentThumb is non zero then we have ignore the rendering of\n // first and last segment thumb\n var start = selector.segments.length <= selector.maxSegmentThumb ? 0 : 1;\n var end = selector.segments.length <= selector.maxSegmentThumb\n ? selector.segments.length : selector.segments.length - 1;\n // (EJ2-57115) - If maxSegmentThumb is greater than or equal to 3 means then set start as second segment(1) and end as last before segment\n if (selector.maxSegmentThumb >= 3 && selector.segments.length === 3) {\n start = 1;\n end = selector.segments.length - 1;\n }\n // (EJ2-57115) - If segments length is greater than maxSegmentThumb + 2 means then set start as 2\n start = selector.segments.length > selector.maxSegmentThumb + 2 ? 2 : start;\n // (EJ2-57115) - If segments length is greater than maxSegmentThumb + 2 means then set end as last before segment\n end = selector.segments.length > selector.maxSegmentThumb + 2 ? selector.segments.length - 2 : end;\n if (selector.segments.length === 1 && selector.segments[0].points.length <= 2) {\n start = 1;\n end = selector.segments.length;\n }\n for (i = start; i < end; i++) {\n var seg = selector.segments[parseInt(i.toString(), 10)];\n this.renderOrthogonalThumbs('orthoThumb_' + (i + 1), wrapper, seg, canvas, canShowCorner(selectorConstraints, 'ConnectorSourceThumb'), transform, selector);\n }\n }\n }\n }\n if (selector.type === 'Bezier' && canShowBezierPoints) {\n var segmentCount = selector.segments.length - 1;\n var controlPointsVisibility = selector.bezierSettings != null\n ? selector.bezierSettings.controlPointsVisibility : null;\n for (i = 0; i <= segmentCount; i++) {\n var segment_1 = selector.segments[parseInt(i.toString(), 10)];\n var bezierPoint = !Point.isEmptyPoint(segment_1.point1) ? segment_1.point1\n : segment_1.bezierPoint1;\n if (controlPointsVisibility != null && (i === 0 && canShowControlPoints(controlPointsVisibility, 'Source'))\n || (i !== 0 && canShowControlPoints(controlPointsVisibility, 'Intermediate'))) {\n this.renderCircularHandle('bezierPoint_' + (i + 1) + '_1', wrapper, bezierPoint.x, bezierPoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorSourceThumb'), constraints & ThumbsConstraints.ConnectorSource, transform, undefined, undefined, { 'aria-label': 'Thumb to move the source point of the connector' }, undefined, 'e-diagram-bezier-control-handle e-source', handleSize);\n if (canShowCorner(selectorConstraints, 'ConnectorSourceThumb')) {\n this.renderBezierLine('bezierLine_' + (i + 1) + '_1', wrapper, canvas, segment_1.points[0], !Point.isEmptyPoint(segment_1.point1) ? segment_1.point1 : segment_1.bezierPoint1, transform);\n }\n }\n bezierPoint = !Point.isEmptyPoint(segment_1.point2) ? segment_1.point2 : segment_1.bezierPoint2;\n if (controlPointsVisibility != null && (i === segmentCount && canShowControlPoints(controlPointsVisibility, 'Target'))\n || (i !== segmentCount && canShowControlPoints(controlPointsVisibility, 'Intermediate'))) {\n this.renderCircularHandle('bezierPoint_' + (i + 1) + '_2', wrapper, bezierPoint.x, bezierPoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorTargetThumb'), constraints & ThumbsConstraints.ConnectorTarget, transform, undefined, undefined, { 'aria-label': 'Thumb to move the target point of the connector' }, undefined, 'e-diagram-bezier-control-handle e-target', handleSize);\n if (canShowCorner(selectorConstraints, 'ConnectorTargetThumb')) {\n this.renderBezierLine('bezierLine_' + (i + 1) + '_2', wrapper, canvas, segment_1.points[1], !Point.isEmptyPoint(segment_1.point2) ? segment_1.point2 : segment_1.bezierPoint2, transform);\n }\n }\n }\n }\n };\n /**\n * Method used to render the orthogonal thumb \\\n *\n * @returns {void } Method used to render the orthogonal thumb .\\\n *\n * @param {string} id - Provide the id for the element.\n * @param {DiagramElement } selector - Provide the selector element.\n * @param { OrthogonalSegment } segment - Provide the segment value .\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element value.\n * @param { boolean } visibility - Provide the visibility value .\n * @param { Transforms } t - Provide the Transforms value.\n * @param { ConnectorModel } connector - Provide the connector value.\n * @private\n */\n DiagramRenderer.prototype.renderOrthogonalThumbs = function (id, selector, segment, canvas, visibility, t, connector) {\n var orientation;\n var visible;\n var length;\n var j = 0;\n var direction;\n // (EJ2-57115) - Added below code to check if maxSegmentThumb is zero or not\n if (!connector.maxSegmentThumb) {\n for (j = 0; j < segment.points.length - 1; j++) {\n length = Point.distancePoints(segment.points[parseInt(j.toString(), 10)], segment.points[j + 1]);\n orientation = (segment.points[parseInt(j.toString(), 10)].y.toFixed(2) === segment.points[j + 1].y.toFixed(2)) ? 'horizontal' : 'vertical';\n //850501-Added below code to check the direction of the segments\n direction = Point.direction(segment.points[parseInt(j.toString(), 10)], segment.points[j + 1]);\n visible = (length >= 50 && segment.allowDrag) ? true : false;\n this.renderOrthogonalThumb((id + '_' + (j + 1)), selector, (((segment.points[parseInt(j.toString(), 10)].x + segment.points[j + 1].x) / 2)), (((segment.points[parseInt(j.toString(), 10)].y + segment.points[j + 1].y) / 2)), canvas, visible, orientation, t, connector, direction);\n }\n }\n else {\n // (EJ2-57115) - Added below code to check if maxSegmentThumb greater then 3 means then we have ignore the rendering of\n // first and last segment thumb\n // Set the start value as 1 if segment points is greater than 3\n var start = segment.points.length < 3 ? 0 : 1;\n // set the end value as segment.points.length - 2 if segment points is greater then 3\n var end = segment.points.length < 3 ? segment.points.length - 1 : segment.points.length - 2;\n start = connector.segments.length === 1 ? start : 0;\n end = connector.segments.length === 1 ? end : segment.points.length - 1;\n for (j = start; j < end; j++) {\n length = Point.distancePoints(segment.points[parseInt(j.toString(), 10)], segment.points[j + 1]);\n orientation = (segment.points[parseInt(j.toString(), 10)].y.toFixed(2) === segment.points[j + 1].y.toFixed(2)) ? 'horizontal' : 'vertical';\n visible = (length >= 50 && segment.allowDrag) ? true : false;\n this.renderOrthogonalThumb((id + '_' + (j + 1)), selector, (((segment.points[parseInt(j.toString(), 10)].x + segment.points[j + 1].x) / 2)), (((segment.points[parseInt(j.toString(), 10)].y + segment.points[j + 1].y) / 2)), canvas, visible, orientation, t, connector, direction);\n }\n }\n };\n /**\n * Method used to render the orthogonal thumb \\\n *\n * @returns {void } Method used to render the orthogonal thumb .\\\n *\n * @param {string} id - Provide the id for the element.\n * @param {DiagramElement } selector - Provide the selector element.\n * @param { Transforms } x - Provide the x value .\n * @param { Transforms } y - Provide the y value.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element.\n * @param { boolean } visible - Provide the visible boolean value.\n * @param { string } orientation - Provide the orientation value.\n * @param { Transforms } t - Provide the Transforms value.\n * @param { ConnectorModel } connector - Provide the connector value.\n * @param { string } direction - Provide the direction of the segment.\n * @private\n */\n DiagramRenderer.prototype.renderOrthogonalThumb = function (id, selector, x, y, canvas, visible, orientation, t, connector, direction) {\n var path;\n var segmentThumbAngle = 0;\n var diagramElement = document.getElementById(this.diagramId);\n var instance = 'ej2_instances';\n var diagram;\n if (diagramElement) {\n diagram = diagramElement[\"\" + instance][0];\n }\n //824805-Support to modify connector segment thumb shape and style based on constraints\n var inheritsegmentThumbShape = (connector.constraints & ConnectorConstraints.InheritSegmentThumbShape);\n var segmentThumbShape = inheritsegmentThumbShape ? diagram.segmentThumbShape : connector.segmentThumbShape;\n //850501-Added below code to modify connector segment thumb size based on constraints\n var inheritSegmentThumbSize = (connector.constraints & ConnectorConstraints.InheritSegmentThumbSize);\n var segmentThumbSize = inheritSegmentThumbSize ? diagram.segmentThumbSize : connector.segmentThumbSize;\n if (orientation === 'horizontal') {\n path = getSegmentThumbShapeHorizontal(segmentThumbShape);\n }\n else {\n path = getSegmentThumbShapeVertical(segmentThumbShape);\n }\n //850501-Added the below code to change the angles of the segmentThumbShape(arrows) based on the direction\n if (segmentThumbShape === 'Arrow' || segmentThumbShape === 'DoubleArrow' || segmentThumbShape === 'OpenArrow') {\n switch (direction) {\n case 'Bottom':\n case 'Right':\n segmentThumbAngle = 180;\n break;\n default:\n segmentThumbAngle = 0;\n }\n }\n else if (segmentThumbShape === 'Fletch' || segmentThumbShape === 'OpenFetch' || segmentThumbShape === 'IndentedArrow' || segmentThumbShape === 'OutdentedArrow') {\n switch (direction) {\n case 'Bottom':\n segmentThumbAngle = -90;\n break;\n case 'Top':\n segmentThumbAngle = 90;\n break;\n case 'Right':\n segmentThumbAngle = 180;\n break;\n default:\n segmentThumbAngle = 0;\n }\n }\n var options = {\n x: ((x + t.tx) * t.scale) - segmentThumbSize / 2, y: ((y + t.ty) * t.scale) - segmentThumbSize / 2, angle: segmentThumbAngle,\n fill: '#e2e2e2', stroke: 'black', strokeWidth: 1, dashArray: '', data: path,\n width: segmentThumbSize, height: segmentThumbSize, pivotX: 0.5, pivotY: 0.5, opacity: 1, visible: visible, id: id,\n class: 'e-diagram-ortho-segment-handle'\n };\n //850501-Added the below code to adjust size for the segment thumb shape based on the size given\n var absoluteBounds = measurePath(options.data);\n var desiredSize = new Size(options.width, options.height);\n var pathElement = new PathElement();\n options.data = pathElement.updatePath(options.data, absoluteBounds, desiredSize);\n //Bug 914365: Node is not resizable using touch interaction\n //Added below code to update the element if it is already rendered during touch move interaction\n if (this.touchMove) {\n var thumb = document.getElementById(id);\n if (thumb) {\n this.updateSegmentPosition(thumb, options);\n }\n else {\n this.svgRenderer.drawPath(canvas, options, this.diagramId);\n }\n }\n else {\n this.svgRenderer.drawPath(canvas, options, this.diagramId);\n }\n };\n /**\n * Method used to render the pivot line line\\\n *\n * @returns {void } Method used to render the pivot line line .\\\n *\n * @param {DiagramElement} element - Provide the diagram element value.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element.\n * @param { Transforms } transform - Provide the transform value .\n * @param { SelectorConstraints } selectorConstraints - Provide the selector constraints value.\n * @param { boolean } canMask - Provide the canMask boolean value.\n * @private\n */\n DiagramRenderer.prototype.renderPivotLine = function (element, canvas, transform, selectorConstraints, canMask) {\n var wrapper = element;\n var dashArray = '2,3';\n var visible = (selectorConstraints & SelectorConstraints.Rotate) ? true : false;\n if (canMask) {\n visible = false;\n }\n var options = this.getBaseAttributes(wrapper, transform);\n options.fill = 'None';\n options.stroke = 'black';\n options.strokeWidth = 1;\n options.dashArray = dashArray;\n options.visible = visible;\n var scale = transform.scale;\n options.x *= scale;\n options.y *= scale;\n options.width *= scale;\n options.height *= scale;\n options.id = 'pivotLine';\n options.class = 'e-diagram-pivot-line';\n var startPoint = { x: wrapper.actualSize.width * wrapper.pivot.x * scale, y: -20 };\n var endPoint = { x: wrapper.actualSize.width * wrapper.pivot.x * scale, y: 0 };\n options.startPoint = startPoint;\n options.endPoint = endPoint;\n this.svgRenderer.drawLine(canvas, options);\n };\n /**\n * Method used to render the bezier line for the connector \\\n *\n * @returns {void } Method used to render the bezier line for the connector .\\\n *\n * @param {string} id - Provide the id value for the bezier line.\n * @param { DiagramElement } wrapper - Provide the wrapper for the element.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element .\n * @param { PointModel } start - Provide the pointmodel value.\n * @param { PointModel } end - Provide the pointmodel value.\n * @param { Transforms } transform - Provide the itransform value .\n * @private\n */\n DiagramRenderer.prototype.renderBezierLine = function (id, wrapper, canvas, start, end, transform) {\n var dashArray = '3,3';\n var options = this.getBaseAttributes(wrapper, transform);\n options.id = id;\n options.stroke = 'black';\n options.strokeWidth = 1;\n options.dashArray = dashArray;\n options.fill = 'None';\n options.class = 'e-diagram-bezier-control-line';\n options.x = 0;\n options.y = 0;\n var scale = transform.scale;\n var x1 = (start.x + transform.tx) * scale;\n var y1 = (start.y + transform.ty) * scale;\n var x2 = (end.x + transform.tx) * scale;\n var y2 = (end.y + transform.ty) * scale;\n var startPoint = { x: x1, y: y1 };\n var endPoint = { x: x2, y: y2 };\n options.startPoint = startPoint;\n options.endPoint = endPoint;\n this.svgRenderer.drawLine(canvas, options);\n };\n /**\n * Method used to render the circular handle for the node element \\\n *\n * @returns {void } Method used to render the circular handle for the node element .\\\n *\n * @param {string} id - Provide the id value.\n * @param { DiagramElement } selector - Provide the selector element value.\n * @param { number } cx - Provide cx value .\n * @param { number } cy - Provide cx value.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element.\n * @param { boolean } visible - Provide the visible property for the handle .\n * @param { number } enableSelector - Provide the value for the enableSelector .\n * @param { Transforms } t - Provide the transform value .\n * @param { boolean } connected - Provide the connected boolean value .\n * @param { boolean } canMask - Provide the canMask boolean value .\n * @param { Object } ariaLabel - Provide the label properties .\n * @param { number } count - Provide the count value .\n * @param { string } className - Provide the class name for this element .\n * @param { number } handleSize - Provide the handle size value .\n *\n * @private\n */\n // Feature (EJ2-44346) Provide support to increase the size of the resize thumb\n DiagramRenderer.prototype.renderCircularHandle = function (id, selector, cx, cy, canvas, visible, enableSelector, t, connected, canMask, ariaLabel, count, className, handleSize) {\n var wrapper = selector;\n var newPoint = { x: cx, y: cy };\n if (wrapper.rotateAngle !== 0 || wrapper.parentTransform !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, wrapper.rotateAngle + wrapper.parentTransform, wrapper.offsetX, wrapper.offsetY);\n newPoint = transformPointByMatrix(matrix, newPoint);\n }\n var options = this.getBaseAttributes(wrapper);\n options.stroke = 'black';\n options.strokeWidth = 1;\n if (count !== undefined) {\n options.id = 'segmentEnd_' + count;\n options.fill = '#e2e2e2';\n }\n else {\n options.fill = connected ? '#8CC63F' : 'white';\n }\n options.cornerRadius = handleSize / 2;\n options.angle = selector.rotateAngle;\n options.id = id;\n options.visible = visible;\n options.class = className;\n options.width = handleSize;\n options.height = handleSize;\n // EJ2-65895 - Added below code to calculate the rect x and y if node pivot is not equal to 0.5\n options.x = (newPoint.x + t.tx) * t.scale;\n options.y = (newPoint.y + t.ty) * t.scale;\n options.x = options.x - options.width / 2;\n options.y = options.y - options.height / 2;\n if (connected) {\n options.class += ' e-connected';\n }\n if (canMask) {\n options.visible = false;\n }\n //Bug 914365: Node is not resizable using touch interaction\n //Added below code to update the element if it is already rendered during touch move interaction\n if (this.touchMove) {\n var handle = document.getElementById(id);\n if (handle) {\n this.updateResizeHandle(handle, options);\n }\n else {\n var parentSvg = this.getParentSvg(selector, 'selector');\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId, true, true, parentSvg, ariaLabel, true, enableSelector);\n }\n }\n else {\n var parentSvg = this.getParentSvg(selector, 'selector');\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId, true, true, parentSvg, ariaLabel, true, enableSelector);\n }\n };\n DiagramRenderer.prototype.updateResizeHandle = function (handle, options) {\n var attr = {\n 'id': options.id, 'x': options.x.toString(), 'y': options.y.toString(), 'width': options.width.toString(),\n 'height': options.height.toString(), 'visibility': options.visible ? 'visible' : 'hidden',\n 'transform': 'rotate(' + options.angle + ','\n + (options.x + options.width / 2) + ',' + (options.y + options.height / 2) + ')',\n 'rx': options.cornerRadius || 0, 'ry': options.cornerRadius || 0, 'opacity': options.opacity\n };\n setAttributeSvg(handle, attr);\n };\n //824805-Support to modify bezier connector segmentThumbShape\n /**\n * Method used to render the segment thumb shape for Bezier connector \\\n *\n * @returns {void } Method used to render the segment thumb shape for Bezier connector .\\\n *\n * @param {string} id - Provide the id value.\n * @param { DiagramElement } selector - Provide the selector element value.\n * @param { number } cx - Provide cx value .\n * @param { number } cy - Provide cx value.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element.\n * @param { boolean } visible - Provide the visible property for the handle .\n * @param { ConnectorModel } connector - Provide the value for the connector .\n * @param { Transforms } t - Provide the transform value .\n * @param { boolean } connected - Provide the connected boolean value .\n * @param { boolean } canMask - Provide the canMask boolean value .\n * @param { number } count - Provide the count value .\n * @param { string } className - Provide the class name for this element .\n * @param { number } handleSize - Provide the handle size value .\n *\n * @private\n */\n DiagramRenderer.prototype.renderBezierHandle = function (id, selector, cx, cy, canvas, visible, connector, t, connected, canMask, count, className, handleSize) {\n var diagramElement = document.getElementById(this.diagramId);\n var instance = 'ej2_instances';\n var diagram;\n if (diagramElement) {\n diagram = diagramElement[\"\" + instance][0];\n }\n var wrapper = selector;\n var newPoint = { x: cx, y: cy };\n if (wrapper.rotateAngle !== 0 || wrapper.parentTransform !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, wrapper.rotateAngle + wrapper.parentTransform, wrapper.offsetX, wrapper.offsetY);\n newPoint = transformPointByMatrix(matrix, newPoint);\n }\n var inheritsegmentThumbShape = (connector.constraints & ConnectorConstraints.InheritSegmentThumbShape);\n var segmentThumbShape = inheritsegmentThumbShape ? diagram.segmentThumbShape : connector.segmentThumbShape;\n //850501-Added below code to modify connector segment thumb size based on constraints\n var inheritSegmentThumbSize = (connector.constraints & ConnectorConstraints.InheritSegmentThumbSize);\n var segmentThumbSize = inheritSegmentThumbSize ? diagram.segmentThumbSize : connector.segmentThumbSize;\n var path = getSegmentThumbShapeVertical(segmentThumbShape);\n var options = this.getBaseAttributes(wrapper);\n options.stroke = 'black';\n options.strokeWidth = 1;\n if (count !== undefined) {\n options.id = 'segmentEnd_' + count;\n options.fill = '#e2e2e2';\n }\n else {\n options.fill = connected ? '#8CC63F' : 'white';\n }\n options.angle = selector.rotateAngle;\n options.id = id;\n options.visible = visible;\n options.class = className;\n options.width = segmentThumbSize;\n options.height = segmentThumbSize;\n // EJ2-65895 - Added below code to calculate the rect x and y if node pivot is not equal to 0.5\n options.data = path;\n options.x = ((newPoint.x + t.tx) * t.scale);\n options.y = ((newPoint.y + t.ty) * t.scale);\n options.x = options.x - options.width / 2;\n options.y = options.y - options.height / 2;\n if (connected) {\n options.class += ' e-connected';\n }\n if (canMask) {\n options.visible = false;\n }\n //850501-Added the below code to adjust size for the segment thumb shape based on the size given\n var absoluteBounds = measurePath(options.data);\n var desiredSize = new Size(options.width, options.height);\n var pathElement = new PathElement();\n options.data = pathElement.updatePath(options.data, absoluteBounds, desiredSize);\n //Bug 914365: Node is not resizable using touch interaction\n //Added below code to update the element if it is already rendered during touch move interaction\n if (this.touchMove) {\n var handle = document.getElementById(id);\n if (handle) {\n this.updateSegmentPosition(handle, options);\n }\n else {\n var parentSvg = this.getParentSvg(selector, 'selector');\n this.svgRenderer.drawPath(canvas, options, this.diagramId, true, parentSvg);\n }\n }\n else {\n var parentSvg = this.getParentSvg(selector, 'selector');\n this.svgRenderer.drawPath(canvas, options, this.diagramId, true, parentSvg);\n }\n };\n DiagramRenderer.prototype.updateSegmentPosition = function (handle, options) {\n var attr = {\n 'id': options.id, 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ','\n + (options.y + options.height * options.pivotY) + ')' + 'translate(' + (options.x) + ',' + (options.y) + ')',\n 'visibility': options.visible ? 'visible' : 'hidden', 'opacity': options.opacity\n };\n setAttributeSvg(handle, attr);\n };\n /**\n * Method used to render border for the node element \\\n *\n * @returns {void } Method used to render border for the node element .\\\n *\n * @param {SelectorModel} selector - Provide the selector model instance.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element value.\n * @param { Transforms } transform - Provide the transform value .\n * @param { number } enableNode - Provide enableNode boolean value.\n * @param { boolean } isBorderTickness - Provide the thickness value for the node.\n * @param { boolean } isSwimlane - Provide the isSwimlane boolean value .\n * @private\n */\n DiagramRenderer.prototype.renderBorder = function (selector, canvas, transform, enableNode, isBorderTickness, isSwimlane) {\n var wrapper = selector;\n var options = this.getBaseAttributes(wrapper, transform);\n options.x *= transform.scale;\n options.y *= transform.scale;\n options.width *= transform.scale;\n options.height *= transform.scale;\n options.fill = 'transparent';\n options.stroke = '#097F7F';\n options.strokeWidth = 1.2;\n options.gradient = null;\n options.dashArray = '6,3';\n options.class = 'e-diagram-selector';\n if (isSwimlane) {\n options.class += ' e-diagram-lane';\n }\n options.id = 'borderRect';\n options.id = (this.rendererActions & RendererAction.DrawSelectorBorder) ? 'borderRect_symbol' : 'borderRect';\n if (!enableNode) {\n options.class += ' e-disabled';\n }\n if (isBorderTickness) {\n options.class += ' e-thick-border';\n }\n options.cornerRadius = 0;\n var parentSvg = this.getParentSvg(selector, 'selector');\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId, undefined, true, parentSvg);\n };\n /**\n * Method used to render user handle for the node element\\\n *\n * @returns {void } Method used to render user handle for the node element .\\\n *\n * @param {SelectorModel} selectorItem - Provide the selector model instance.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element value.\n * @param { Transforms } transform - Provide the transform value.\n * @param { HTMLElement } diagramUserHandlelayer - Provide the HTMLElement value.\n * @param { Actions } currentAction - Provide the currentAction value.\n * @param { boolean } inAction - Provide the inAction value.\n * @private\n */\n DiagramRenderer.prototype.renderUserHandler = function (selectorItem, canvas, transform, diagramUserHandlelayer, currentAction, inAction) {\n var wrapper = selectorItem.wrapper;\n var canDraw;\n for (var _i = 0, _a = selectorItem.userHandles; _i < _a.length; _i++) {\n var obj = _a[_i];\n canDraw = true;\n //879279 : Userhandle should be removed on dragging the node/connector in mousemove action\n if ((obj.disableConnectors && selectorItem.connectors.length > 0) ||\n (obj.disableNodes && selectorItem.nodes.length > 0) ||\n (currentAction === 'Drag' && inAction)) {\n canDraw = false;\n }\n var div = document.getElementById(obj.name + '_template_hiddenUserHandle');\n if (div) {\n obj.template = (div.childNodes[0]).cloneNode(true);\n }\n //const newPoint: PointModel;\n var newPoint = getUserHandlePosition(selectorItem, obj, transform);\n newPoint.x = (newPoint.x + transform.tx) * transform.scale;\n newPoint.y = (newPoint.y + transform.ty) * transform.scale;\n if (obj.visible) {\n obj.visible = (selectorItem.constraints & SelectorConstraints.UserHandle) ? true : false;\n }\n if (canDraw) {\n if (obj.pathData) {\n var data = obj.pathData ? obj.pathData : obj.content;\n var option = this.getBaseAttributes(wrapper);\n option.id = obj.name + '_userhandle';\n option.fill = obj.backgroundColor;\n option.stroke = obj.borderColor;\n option.strokeWidth = obj.borderWidth;\n option.centerX = newPoint.x;\n option.centerY = newPoint.y;\n option.radius = obj.size * 0.5;\n option.class = 'e-diagram-userhandle-circle';\n option.angle = 0;\n option.visible = obj.visible;\n option.opacity = 1;\n this.svgRenderer.drawCircle(canvas, option, 1, { 'aria-label': obj.name + 'user handle' });\n var pathPading = 5;\n var arrayCollection = [];\n arrayCollection = processPathData(data);\n arrayCollection = splitArrayCollection(arrayCollection);\n var pathSize = measurePath(data);\n //requiredSize/contentSize\n var scaleX = (obj.size - 0.45 * obj.size) / pathSize.width;\n var scaleY = (obj.size - 0.45 * obj.size) / pathSize.height;\n var newData = transformPath(arrayCollection, scaleX, scaleY, true, pathSize.x, pathSize.y, 0, 0);\n pathSize = measurePath(newData);\n var options = {\n x: newPoint.x - pathSize.width / 2,\n y: newPoint.y - pathSize.height / 2, angle: 0, id: '',\n class: 'e-diagram-userhandle-path', fill: obj.pathColor,\n stroke: obj.backgroundColor, strokeWidth: 0.5, dashArray: '', data: newData,\n width: obj.size - pathPading, height: obj.size - pathPading, pivotX: 0, pivotY: 0, opacity: 1, visible: obj.visible\n };\n this.svgRenderer.drawPath(canvas, options, this.diagramId, undefined, undefined, { 'aria-label': obj.name + 'user handle' });\n }\n else if (obj.content) {\n //const handleContent: DiagramNativeElement;\n var handleContent = new DiagramNativeElement(obj.name, this.diagramId);\n handleContent.content = obj.content;\n handleContent.offsetX = newPoint.x;\n handleContent.offsetY = newPoint.y;\n handleContent.id = obj.name + '_shape';\n handleContent.horizontalAlignment = 'Center';\n handleContent.verticalAlignment = 'Center';\n handleContent.visible = obj.visible;\n handleContent.setOffsetWithRespectToBounds(newPoint.x, newPoint.y, 'Fraction');\n handleContent.relativeMode = 'Object';\n handleContent.description = obj.name || 'User handle';\n handleContent.measure(new Size(obj.size, obj.size));\n handleContent.arrange(handleContent.desiredSize);\n this.svgRenderer.drawNativeContent(handleContent, canvas, obj.size, obj.size, this.adornerSvgLayer);\n }\n else if (obj.source) {\n var element = new ImageElement();\n var options = this.getBaseAttributes(element, transform);\n options.width = obj.size;\n options.height = obj.size;\n options.x = newPoint.x - (obj.size / 2);\n options.y = newPoint.y - (obj.size / 2);\n options.sourceWidth = obj.size;\n options.sourceHeight = obj.size;\n options.alignment = element.imageAlign;\n options.source = obj.source;\n options.scale = element.imageScale;\n options.visible = obj.visible;\n options.description = obj.name || 'User handle';\n options.id = obj.name + '_';\n this.renderer.drawImage(canvas, options, this.adornerSvgLayer, false);\n }\n else {\n //const templateContent: DiagramHtmlElement;\n var templateContent = new DiagramHtmlElement(obj.name, this.diagramId);\n templateContent.offsetX = newPoint.x;\n templateContent.offsetY = newPoint.y;\n templateContent.id = obj.name + '_shape';\n templateContent.visible = obj.visible;\n templateContent.relativeMode = 'Object';\n templateContent.template = obj.template;\n templateContent.measure(new Size(obj.size, obj.size));\n templateContent.arrange(templateContent.desiredSize);\n this.svgRenderer.drawHTMLContent(templateContent, diagramUserHandlelayer, undefined, true, undefined);\n }\n }\n }\n };\n /**\n * Method used to render rotate thumb of the diagramnode element \\\n *\n * @returns {void } Method used to render rotate thumb of the diagramnode element .\\\n *\n * @param {DiagramElement} wrapper - Provide the wrapper element value.\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element value.\n * @param { Transforms } transform - Provide the transform value .\n * @param { SelectorConstraints } selectorConstraints - Provide the selectorConstraints value.\n * @param { boolean } canMask - Provide the boolean value .\n * @private\n */\n DiagramRenderer.prototype.renderRotateThumb = function (wrapper, canvas, transform, selectorConstraints, canMask) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var element = new PathElement();\n var newPoint;\n var size = new Size();\n size.width = 18;\n size.height = 16;\n var top = wrapper.offsetY - wrapper.actualSize.height * wrapper.pivot.y;\n var left = wrapper.offsetX - wrapper.actualSize.width * wrapper.pivot.x;\n var visible = (selectorConstraints & SelectorConstraints.Rotate) ? true : false;\n if (canMask) {\n visible = false;\n }\n var data = 'M 16.856144362449648 10.238890446662904 L 18.000144362449646 3.437890446662903' +\n 'L 15.811144362449646 4.254890446662903 C 14.837144362449646 2.5608904466629028 13.329144362449647 ' +\n ' 1.2598904466629026 11.485144362449645 0.5588904466629026 C 9.375144362449646 - 0.24510955333709716 7.071144362449646 ' +\n ' - 0.18010955333709716 5.010144362449646 0.7438904466629028 C 2.942144362449646 1.6678904466629028 1.365144362449646' +\n ' 3.341890446662903 0.558144362449646 5.452890446662903 C - 0.244855637550354 7.567890446662903 - 0.17985563755035394' +\n ' 9.866890446662904 0.7431443624496461 11.930890446662904 C 1.6681443624496461 13.994890446662904 3.343144362449646' +\n ' 15.575890446662903 5.457144362449647 16.380890446662903 C 6.426144362449647 16.7518904466629 7.450144362449647' +\n ' 16.9348904466629 8.470144362449647 16.9348904466629 C 9.815144362449647 16.9348904466629 11.155144362449647 ' +\n '16.6178904466629 12.367144362449647 15.986890446662901 L 11.351144362449647 14.024890446662901 C 9.767144362449647' +\n ' 14.8468904466629 7.906144362449647 14.953890446662902 6.237144362449647 14.3178904466629 C 4.677144362449647' +\n ' 13.7218904466629 3.444144362449647 12.5558904466629 2.758144362449647 11.028890446662901 C 2.078144362449646 ' +\n '9.501890446662903 2.031144362449646 7.802890446662903 2.622144362449646 6.243890446662903 C 3.216144362449646' +\n ' 4.6798904466629025 4.387144362449646 3.442890446662903 5.914144362449646 2.760890446662903 C 7.437144362449646 ' +\n '2.078890446662903 9.137144362449646 2.0298904466629026 10.700144362449645 2.6258904466629027 C 11.946144362449646 ' +\n '3.100890446662903 12.971144362449646 3.9538904466629026 13.686144362449646 5.049890446662903 L 11.540144362449645 ' +\n '5.850890446662903 L 16.856144362449648 10.238890446662904 Z';\n var pivotX = left + wrapper.pivot.x * wrapper.actualSize.width;\n var pivotY = top;\n pivotX = (pivotX + transform.tx) * transform.scale;\n pivotY = (pivotY + transform.ty) * transform.scale;\n newPoint = { x: pivotX - size.width * 0.5, y: pivotY - 30 - size.height * 0.5 };\n if (wrapper.rotateAngle !== 0 || wrapper.parentTransform !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, wrapper.rotateAngle + wrapper.parentTransform, (transform.tx + wrapper.offsetX) * transform.scale, (transform.ty + wrapper.offsetY) * transform.scale);\n newPoint = transformPointByMatrix(matrix, newPoint);\n }\n var options = {\n x: newPoint.x,\n y: newPoint.y,\n angle: wrapper.rotateAngle + wrapper.parentTransform,\n fill: '#231f20', stroke: 'black', strokeWidth: 0.5, dashArray: '', data: data,\n width: 20, height: 20, pivotX: 0, pivotY: 0, opacity: 1, visible: visible, id: wrapper.id, class: 'e-diagram-rotate-handle'\n };\n options.id = 'rotateThumb';\n //Bug 914365: Node is not resizable using touch interaction\n //Added below code to update the element if it is already rendered during touch move interaction\n if (this.touchMove) {\n var thumb = document.getElementById('rotateThumb');\n if (thumb) {\n this.updateSegmentPosition(thumb, options);\n }\n else {\n this.svgRenderer.drawPath(canvas, options, this.diagramId, true, undefined, { 'aria-label': 'Thumb to rotate the selected object' });\n }\n }\n else {\n this.svgRenderer.drawPath(canvas, options, this.diagramId, true, undefined, { 'aria-label': 'Thumb to rotate the selected object' });\n }\n };\n /**\n * Method used to render the path element for the diagram \\\n *\n * @returns {void } Method used to render the path element for the diagram .\\\n *\n * @param {PathElement} element - Provide the path element of the diagram .\n * @param { HTMLCanvasElement | SVGElement } canvas - Provide the canvas element value.\n * @param { Transforms } transform - Provide the transform value .\n * @param { SVGSVGElement } parentSvg - Provide the parent SVG element .\n * @param { boolean } fromPalette - Provide the boolean value .\n * @param { boolean } isPreviewNode - Provide the boolean value .\n * @param {object} portCenterPoint - provide the portCenterPoint value.\n * @private\n */\n DiagramRenderer.prototype.renderPathElement = function (element, canvas, transform, parentSvg, fromPalette, isPreviewNode, portCenterPoint) {\n var options = this.getBaseAttributes(element, transform, isPreviewNode);\n options.data = element.absolutePath;\n options.data = element.absolutePath;\n // Feature 826644: Support to add ports to the connector. Added below condition to position port based on its alignment and offset.\n if (element.isPathPort && portCenterPoint) {\n options.x = portCenterPoint[element.id] ? portCenterPoint[element.id].cx : options.x;\n options.y = portCenterPoint[element.id] ? portCenterPoint[element.id].cy : options.y;\n element.bounds.x = options.x;\n element.bounds.y = options.y;\n var diagramElement = document.getElementById(this.diagramId);\n var instance = 'ej2_instances';\n var diagram = void 0;\n if (diagramElement) {\n diagram = diagramElement[\"\" + instance][0];\n if (diagram.eventHandler.currentAction !== 'PortDrag') {\n element.offsetX = options.x + (element.width / 2);\n element.offsetY = options.y + (element.height / 2);\n }\n }\n }\n var ariaLabel = element.description ? element.description : element.id;\n if (!this.isSvgMode) {\n options.x = element.flipOffset.x ? element.flipOffset.x : options.x;\n options.y = element.flipOffset.y ? element.flipOffset.y : options.y;\n }\n if (element.isExport) {\n var pathBounds = element.absoluteBounds;\n //Bug 857388: Connector with bridging is not properly exported.\n //Below we save the arc values of bridge and use it in renderPath method.\n var collection = processPathData(options.data);\n // Get r1 and r2 values for 'A' commands\n var arc = this.findAndStoreArcValues(collection);\n options.arc = arc;\n options.data = updatePath(element, pathBounds, undefined, options);\n }\n this.renderer.drawPath(canvas, options, this.diagramId, undefined, parentSvg, ariaLabel);\n };\n // Function to filter 'A' commands and extract r1 and r2 values\n DiagramRenderer.prototype.findAndStoreArcValues = function (arr) {\n var rValues = [];\n arr.forEach(function (obj) {\n if (obj.command === 'A') {\n // Store r1 and r2 values in an object\n var rObj = { r1: obj.r1 / 2, r2: obj.r2 / 2 };\n rValues.push(rObj);\n }\n });\n // Return array of r1 and r2 values\n return rValues;\n };\n /**\n * Method used to update the grid line for the diagram \\\n *\n * @returns {void } Method used to update the grid line for the diagram .\\\n *\n * @param {SnapSettingsModel} snapSettings - Provide the snapsetting value of the diagram .\n * @param { SVGSVGElement } gridSvg - Provide the SVG grid element value.\n * @param { Transforms } t - Provide the transform value .\n * @param { RulerSettingsModel } rulerSettings - Provide the ruler setting property .\n * @param { RulerModel } hRuler - Provide the horizontal ruler property value .\n * @param { RulerModel } vRuler - Provide the vertical ruler property value .\n * @private\n */\n DiagramRenderer.prototype.renderSvgGridlines = function (snapSettings, gridSvg, t, rulerSettings, hRuler, vRuler) {\n var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');\n var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');\n defs.setAttribute('id', this.diagramId + '_grid_pattern_defn');\n if (snapSettings.constraints & SnapConstraints.ShowHorizontalLines ||\n snapSettings.constraints & SnapConstraints.ShowVerticalLines) {\n pattern.setAttribute('id', this.diagramId + '_pattern');\n }\n var hWidth = 0;\n var hHeight = 0;\n var hSegmentwidth = 0;\n var vSegmentwidth = 0;\n var scale = 1;\n var isRulerGrid = false;\n var isLine = snapSettings.gridType === 'Lines';\n var verticalLineIntervals = isLine ?\n snapSettings.verticalGridlines.lineIntervals : snapSettings.verticalGridlines.dotIntervals;\n var horizontalLineIntervals = isLine ?\n snapSettings.horizontalGridlines.lineIntervals : snapSettings.horizontalGridlines.dotIntervals;\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && hRuler && vRuler) {\n hSegmentwidth = vRuler.updateSegmentWidth(t.scale);\n vSegmentwidth = hRuler.updateSegmentWidth(t.scale);\n snapSettings.horizontalGridlines.scaledIntervals = [hSegmentwidth / hRuler.interval];\n snapSettings.verticalGridlines.scaledIntervals = [vSegmentwidth / vRuler.interval];\n isRulerGrid = true;\n }\n else {\n for (var i = 0; i < verticalLineIntervals.length; i = i + 1) {\n hWidth += verticalLineIntervals[parseInt(i.toString(), 10)];\n }\n for (var i = 0; i < horizontalLineIntervals.length; i = i + 1) {\n hHeight += horizontalLineIntervals[parseInt(i.toString(), 10)];\n }\n scale = this.scaleSnapInterval(snapSettings, t.scale);\n }\n hWidth = isRulerGrid ? vSegmentwidth : hWidth * scale;\n hHeight = isRulerGrid ? hSegmentwidth : hHeight * scale;\n var attr = {\n id: this.diagramId + '_pattern', x: 0, y: 0, width: hWidth,\n height: hHeight, patternUnits: 'userSpaceOnUse'\n };\n setAttributeSvg(pattern, attr);\n this.horizontalSvgGridlines(pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, vRuler, isRulerGrid, isLine, horizontalLineIntervals);\n this.verticalSvgGridlines(pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, hRuler, isRulerGrid, isLine, verticalLineIntervals);\n defs.appendChild(pattern);\n gridSvg.appendChild(defs);\n };\n DiagramRenderer.prototype.horizontalSvgGridlines = function (pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, vRuler, isRulerGrid, isLine, intervals) {\n var space = 0;\n var dashArray = [];\n var hLine;\n if (snapSettings.constraints & SnapConstraints.ShowHorizontalLines) {\n if (snapSettings.horizontalGridlines.lineDashArray) {\n dashArray = this.renderer.parseDashArray(snapSettings.horizontalGridlines.lineDashArray);\n }\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && vRuler) {\n intervals = this.updateLineIntervals(intervals, rulerSettings, vRuler, hHeight, isLine);\n }\n intervals = getInterval(intervals, isLine);\n for (var i = 0; i < intervals.length; i = i + 2) {\n space = getSpaceValue(intervals, isLine, i, space);\n var spaceY = 0;\n hLine = document.createElementNS('http://www.w3.org/2000/svg', isLine ? 'path' : 'circle');\n var attr = void 0;\n var d = isLine ? space + intervals[parseInt(i.toString(), 10)] / 2 : space;\n d = isRulerGrid ? d : d * scale;\n if (isLine) {\n if (dashArray.toString() === '') {\n attr = {\n 'stroke-width': intervals[parseInt(i.toString(), 10)],\n 'd': 'M0,' + (d) + ' L' + hWidth + ',' + (d) + ' Z',\n 'class': intervals[parseInt(i.toString(), 10)] === 1.25 ? 'e-diagram-thick-grid' : 'e-diagram-thin-grid',\n 'stroke': snapSettings.horizontalGridlines.lineColor\n };\n }\n else {\n attr = {\n 'stroke-width': intervals[parseInt(i.toString(), 10)], 'stroke': snapSettings.horizontalGridlines.lineColor,\n 'd': 'M0,' + (d) + ' L' + hWidth + ',' + (d) + ' Z',\n 'class': intervals[parseInt(i.toString(), 10)] === 1.25 ? 'e-diagram-thick-grid' : 'e-diagram-thin-grid',\n 'dashArray': dashArray.toString()\n };\n }\n setAttributeSvg(hLine, attr);\n pattern.appendChild(hLine);\n space += intervals[i + 1] + intervals[parseInt(i.toString(), 10)];\n }\n else {\n this.renderDotGrid(i, pattern, snapSettings, spaceY, d, scale, true);\n space += intervals[parseInt(i.toString(), 10)];\n }\n }\n }\n };\n DiagramRenderer.prototype.renderDotGrid = function (i, pattern, snapSettings, spacey, d, scale, isHorizontal) {\n var intervals = !isHorizontal ?\n snapSettings.horizontalGridlines.dotIntervals : snapSettings.verticalGridlines.dotIntervals;\n intervals = getInterval(intervals, false);\n var r;\n var hLine;\n //const doubleRadius: boolean;\n var dy;\n var attr;\n for (var j = 1; j < intervals.length; j = j + 2) {\n r = j === intervals.length - 1 ? intervals[0] : intervals[j - 1];\n hLine = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n dy = spacey;\n dy = dy * scale;\n attr = {\n 'cx': isHorizontal ? dy : d, 'cy': isHorizontal ? d : dy, 'fill': snapSettings.horizontalGridlines.lineColor, 'r': r\n };\n setAttributeSvg(hLine, attr);\n pattern.appendChild(hLine);\n spacey += intervals[parseInt(j.toString(), 10)] + intervals[j - 1];\n }\n };\n DiagramRenderer.prototype.verticalSvgGridlines = function (pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, hRuler, isRulerGrid, isLine, intervals) {\n var space = 0;\n var dashArray = [];\n var vLine;\n if (snapSettings.constraints & SnapConstraints.ShowVerticalLines) {\n if (snapSettings.verticalGridlines.lineDashArray) {\n dashArray = this.renderer.parseDashArray(snapSettings.verticalGridlines.lineDashArray);\n }\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && hRuler) {\n intervals = this.updateLineIntervals(intervals, rulerSettings, hRuler, hWidth, isLine);\n }\n var spaceY = 0;\n intervals = getInterval(intervals, isLine);\n for (var i = 0; i < intervals.length; i = i + 2) {\n space = getSpaceValue(intervals, isLine, i, space);\n var d = isLine ? space + intervals[parseInt(i.toString(), 10)] / 2 : space;\n d = isRulerGrid ? d : d * scale;\n vLine = document.createElementNS('http://www.w3.org/2000/svg', isLine ? 'path' : 'circle');\n var attr = void 0;\n if (isLine) {\n if (dashArray.toString() === '') {\n attr = {\n 'stroke-width': intervals[parseInt(i.toString(), 10)],\n 'd': 'M' + (d) + ',0 L' + (d) + ',' + hHeight + ' Z',\n 'class': intervals[parseInt(i.toString(), 10)] === 1.25 ? 'e-diagram-thick-grid' : 'e-diagram-thin-grid',\n 'stroke': snapSettings.verticalGridlines.lineColor\n };\n }\n else {\n attr = {\n 'stroke-width': intervals[parseInt(i.toString(), 10)],\n 'class': intervals[parseInt(i.toString(), 10)] === 1.25 ? 'e-diagram-thick-grid' : 'e-diagram-thin-grid',\n 'stroke': snapSettings.verticalGridlines.lineColor,\n 'd': 'M' + (d) + ',0 L' + (d) + ',' + hHeight + ' Z',\n 'dashArray': dashArray.toString()\n };\n }\n setAttributeSvg(vLine, attr);\n pattern.appendChild(vLine);\n space += intervals[i + 1] + intervals[parseInt(i.toString(), 10)];\n }\n else {\n this.renderDotGrid(i, pattern, snapSettings, spaceY, d, scale, false);\n space += intervals[parseInt(i.toString(), 10)];\n }\n }\n }\n };\n /**\n * Method used to update the grid line for the diagram \\\n *\n * @returns {void } Method used to update the grid line for the diagram .\\\n *\n * @param {SnapSettingsModel} snapSettings - Provide the snapsetting value of the diagram .\n * @param { SVGSVGElement } svgGrid - Provide the SVG grid element value.\n * @param { Transforms } transform - Provide the transform value .\n * @param { RulerSettingsModel } rulerSettings - Provide the ruler setting property .\n * @param { RulerModel } hRuler - Provide the horizontal ruler property value .\n * @param { RulerModel } vRuler - Provide the vertical ruler property value .\n * @private\n */\n DiagramRenderer.prototype.updateGrid = function (snapSettings, svgGrid, transform, rulerSettings, hRuler, vRuler) {\n var grid = svgGrid.getElementById(this.diagramId + '_grid_rect');\n //let i: number;\n var isRulerGrid = false;\n if (grid) {\n var pattern = svgGrid.getElementById(this.diagramId + '_pattern');\n if (pattern) {\n pattern.parentNode.removeChild(pattern);\n }\n var hSegmentwidth = 0;\n var vSegmentwidth = 0;\n var scale = 1;\n var isLine = snapSettings.gridType === 'Lines';\n var verticalLineIntervals = isLine ?\n snapSettings.verticalGridlines.lineIntervals : snapSettings.verticalGridlines.dotIntervals;\n var horizontalLineIntervals = isLine ?\n snapSettings.horizontalGridlines.lineIntervals : snapSettings.horizontalGridlines.dotIntervals;\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && vRuler && hRuler) {\n hSegmentwidth = vRuler.updateSegmentWidth(transform.scale);\n vSegmentwidth = hRuler.updateSegmentWidth(transform.scale);\n isRulerGrid = true;\n snapSettings.horizontalGridlines.scaledIntervals = [hSegmentwidth / hRuler.interval];\n snapSettings.verticalGridlines.scaledIntervals = [vSegmentwidth / vRuler.interval];\n }\n else {\n scale = this.scaleSnapInterval(snapSettings, transform.scale);\n }\n var height = 0;\n for (var j = 0; j < horizontalLineIntervals.length; j = j + 1) {\n height += horizontalLineIntervals[parseInt(j.toString(), 10)];\n }\n var width = 0;\n for (var j = 0; j < verticalLineIntervals.length; j = j + 1) {\n width += verticalLineIntervals[parseInt(j.toString(), 10)];\n }\n var attr = {\n x: -transform.tx * transform.scale,\n y: -transform.ty * transform.scale\n };\n setAttributeSvg(grid, attr);\n width = isRulerGrid ? vSegmentwidth : width * scale;\n height = isRulerGrid ? hSegmentwidth : height * scale;\n attr = {\n id: this.diagramId + '_pattern', x: 0, y: 0, width: width,\n height: height, patternUnits: 'userSpaceOnUse'\n };\n pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');\n setAttributeSvg(pattern, attr);\n this.horizontalSvgGridlines(pattern, width, height, scale, snapSettings, rulerSettings, vRuler, isRulerGrid, isLine, horizontalLineIntervals);\n this.verticalSvgGridlines(pattern, width, height, scale, snapSettings, rulerSettings, hRuler, isRulerGrid, isLine, verticalLineIntervals);\n var defs = svgGrid.getElementById(this.diagramId + '_grid_pattern_defn');\n if (defs) {\n defs.appendChild(pattern);\n }\n }\n };\n DiagramRenderer.prototype.updateLineIntervals = function (intervals, rulerSettings, ruler, segmentWidth, isLine) {\n var newInterval = [];\n var tickInterval = segmentWidth / ruler.interval;\n var interval = isLine ? ruler.interval : ruler.interval + 1;\n for (var i = 0; i < interval * 2; i++) {\n if (i % 2 === 0) {\n newInterval[parseInt(i.toString(), 10)] = isLine ? ((i === 0) ? 1.25 : 0.25) : 0;\n }\n else {\n newInterval[parseInt(i.toString(), 10)] = isLine ? (tickInterval - newInterval[i - 1]) : tickInterval;\n }\n }\n return newInterval;\n };\n DiagramRenderer.prototype.scaleSnapInterval = function (snapSettings, scale) {\n if (scale >= 2) {\n while (scale >= 2) {\n scale /= 2;\n }\n }\n else if (scale <= 0.5) {\n while (scale <= 0.5) {\n scale *= 2;\n }\n }\n var i;\n snapSettings.horizontalGridlines.scaledIntervals = snapSettings.horizontalGridlines.snapIntervals;\n snapSettings.verticalGridlines.scaledIntervals = snapSettings.verticalGridlines.snapIntervals;\n if (scale !== 1) {\n var gridlines = snapSettings.horizontalGridlines;\n gridlines.scaledIntervals = [];\n for (i = 0; i < gridlines.snapIntervals.length; i++) {\n gridlines.scaledIntervals[parseInt(i.toString(), 10)] = gridlines.snapIntervals[parseInt(i.toString(), 10)] * scale;\n }\n gridlines = snapSettings.verticalGridlines;\n gridlines.scaledIntervals = [];\n for (i = 0; i < gridlines.snapIntervals.length; i++) {\n gridlines.scaledIntervals[parseInt(i.toString(), 10)] = gridlines.snapIntervals[parseInt(i.toString(), 10)] * scale;\n }\n }\n return scale;\n };\n /**\n * Method used to render the text element \\\n *\n * @returns {void }Method used to render the text element .\\\n *\n * @param {TextElement} element - Provide the text element .\n * @param { HTMLCanvasElement | SVGElement} canvas - Provide the canvas element .\n * @param { Transforms } transform - Provide the transform value .\n * @param { SVGSVGElement } parentSvg - Provide the SVG layer element .\n * @param { boolean } fromPalette - Provide the boolean value .\n * @param { object } centerPoint - Provide the center point value .\n * @private\n */\n DiagramRenderer.prototype.renderTextElement = function (element, canvas, \n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n transform, parentSvg, fromPalette, centerPoint) {\n var options = this.getBaseAttributes(element, transform);\n if (centerPoint) {\n //Bug 827039: Bezier annotation content alignment is not working properly.\n // Removed -2 cx-2 and cy-2 from the below two line to resolve the alignment issue.\n options.x = centerPoint[element.id] ? centerPoint[element.id].cx : options.x;\n options.y = centerPoint[element.id] ? centerPoint[element.id].cy : options.y;\n // (EJ2-56874) - Set the calculated x and y position to the bezier connector annotation's(text element) bounds x,y position\n element.bounds.x = options.x;\n element.bounds.y = options.y;\n // (EJ2-58802) - Calculate the center point x and y with the element export scale value if element is in export mode\n if (element.isExport) {\n options.x = options.x * Math.min(element.exportScaleValue.x || element.exportScaleValue.y);\n options.y = options.y * Math.min(element.exportScaleValue.x || element.exportScaleValue.y);\n }\n }\n options.cornerRadius = 0;\n options.whiteSpace = whiteSpaceToString(element.style.whiteSpace, element.style.textWrapping);\n options.content = element.content;\n options.breakWord = wordBreakToString(element.style.textWrapping);\n options.textAlign = textAlignToString(element.style.textAlign);\n options.color = element.style.color;\n options.italic = element.style.italic;\n options.bold = element.style.bold;\n options.fontSize = element.style.fontSize;\n options.fontFamily = element.style.fontFamily;\n options.textOverflow = element.style.textOverflow;\n options.textWrapping = element.style.textWrapping;\n options.textDecoration = element.style.textDecoration;\n options.doWrap = element.doWrap;\n options.wrapBounds = element.wrapBounds;\n options.childNodes = element.childNodes;\n options.isHorizontalLane = element.isLaneOrientation;\n options.id = element.id ? element.id : randomId();\n if (element.isLaneOrientation) {\n options.parentOffsetX = this.groupElement.offsetX;\n options.parentOffsetY = this.groupElement.offsetY;\n options.parentWidth = this.groupElement.actualSize.width;\n options.parentHeight = this.groupElement.actualSize.height;\n }\n options.dashArray = '';\n options.strokeWidth = 0;\n options.fill = element.style.fill;\n var ariaLabel = element.description ? element.description : element.content ? element.content : element.id;\n if ((element.style.textWrapping === 'Wrap' || element.style.textWrapping === 'WrapWithOverflow') &&\n this.groupElement && options.height > this.groupElement.actualSize.height &&\n (element.style.textOverflow === 'Clip' || element.style.textOverflow === 'Ellipsis')) {\n options.y = options.y + (options.height - this.groupElement.actualSize.height) / 2;\n }\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n this.renderer.drawText(canvas, options, parentSvg, ariaLabel, this.diagramId, (element.isExport && Math.min(element.exportScaleValue.x || element.exportScaleValue.y)), this.groupElement);\n if (this.isSvgMode) {\n element.doWrap = false;\n }\n };\n DiagramRenderer.prototype.renderNativeElement = function (element, canvas, \n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n transform, parentSvg, fromPalette) {\n var templateWidth;\n var templateHeight;\n var nativeSvg = this.getParentSvg(element, undefined, canvas) || parentSvg;\n var nativeLayer = this.getParentElement(element, canvas, nativeSvg).g || canvas;\n var options = this.getBaseAttributes(element, transform);\n options.fill = 'transparent';\n options.cornerRadius = element.cornerRadius;\n options.stroke = 'transparent';\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n switch (element.scale) {\n case 'None':\n templateWidth = element.contentSize.width;\n templateHeight = element.contentSize.height;\n break;\n case 'Stretch':\n templateWidth = element.actualSize.width;\n templateHeight = element.actualSize.height;\n break;\n case 'Meet':\n if (element.actualSize.width <= element.actualSize.height) {\n templateWidth = templateHeight = element.actualSize.width;\n }\n else {\n templateWidth = templateHeight = element.actualSize.height;\n }\n break;\n case 'Slice':\n if (element.actualSize.width >= element.actualSize.height) {\n templateWidth = templateHeight = element.actualSize.width;\n }\n else {\n templateWidth = templateHeight = element.actualSize.height;\n }\n break;\n }\n if (this.svgRenderer) {\n this.svgRenderer.drawNativeContent(element, nativeLayer, templateHeight, templateWidth, nativeSvg);\n }\n };\n DiagramRenderer.prototype.renderHTMLElement = function (element, canvas, htmlLayer, transform, parentSvg, fromPalette, indexValue) {\n var options = this.getBaseAttributes(element, transform);\n options.fill = 'transparent';\n options.cornerRadius = element.cornerRadius;\n options.stroke = 'transparent';\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n if (this.svgRenderer) {\n this.svgRenderer.drawHTMLContent(element, htmlLayer.children[0], transform, isDiagramChild(htmlLayer), indexValue);\n }\n };\n /**\n * Method used to render the image element \\\n *\n * @returns {void }Method used to render the image element .\\\n *\n * @param {ImageElement} element - Provide the image element .\n * @param { HTMLCanvasElement | SVGElement} canvas - Provide the canvas element .\n * @param { Transforms } transform - Provide the transform value .\n * @param { SVGSVGElement } parentSvg - Provide the SVG layer element .\n * @param { boolean } fromPalette - Provide the boolean value .\n * @private\n */\n DiagramRenderer.prototype.renderImageElement = function (element, canvas, transform, parentSvg, fromPalette) {\n var options = this.getBaseAttributes(element, transform);\n options.cornerRadius = 0;\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n // let sx: number; let sy: number;\n var imageWidth;\n var imageHeight;\n var sourceWidth;\n var sourceHeight;\n var contentWidth = element.contentSize.width;\n var contentHeight = element.contentSize.height;\n var widthRatio = options.width / contentWidth;\n var heightRatio = options.height / contentHeight;\n var ratio;\n if (element.stretch === 'Stretch') {\n // 909174: Image node is not exported properly Issue Fix\n ratio = Math.min(widthRatio, heightRatio);\n imageWidth = contentWidth * ratio;\n imageHeight = contentHeight * ratio;\n }\n else {\n switch (element.stretch) {\n case 'Meet':\n ratio = Math.min(widthRatio, heightRatio);\n imageWidth = contentWidth * ratio;\n imageHeight = contentHeight * ratio;\n options.x += Math.abs(options.width - imageWidth) / 2;\n options.y += Math.abs(options.height - imageHeight) / 2;\n break;\n case 'Slice':\n ratio = Math.max(widthRatio, heightRatio);\n imageWidth = contentWidth * ratio;\n imageHeight = contentHeight * ratio;\n sourceWidth = options.width / imageWidth * contentWidth;\n sourceHeight = options.height / imageHeight * contentHeight;\n break;\n case 'None':\n imageWidth = contentWidth;\n imageHeight = contentHeight;\n break;\n }\n }\n options.width = imageWidth;\n options.height = imageHeight;\n //Commented for code coverage\n //(options as ImageAttributes).sourceX = sx;\n //(options as ImageAttributes).sourceY = sy;\n options.sourceWidth = sourceWidth;\n options.sourceHeight = sourceHeight;\n options.source = element.source;\n options.alignment = element.imageAlign;\n options.scale = element.imageScale;\n options.description = element.description ? element.description : element.id;\n this.renderer.drawImage(canvas, options, parentSvg, fromPalette);\n };\n /**\n * Method used to render the container \\\n *\n * @returns {void} Method used to render the container .\\\n *\n * @param {Container} group - Provide the container .\n * @param { HTMLCanvasElement | SVGElement} canvas - Provide the canvas element .\n * @param { HTMLElement } htmlLayer - Provide the html layer element .\n * @param { Transforms } transform - Provide the transform value .\n * @param { SVGSVGElement } parentSvg - Provide the SVG layer element .\n * @param { boolean } createParent - Provide the boolean value .\n * @param { boolean } fromPalette - Provide the boolean value .\n * @param { number } indexValue - Provide the indexValue value .\n * @param { boolean } isPreviewNode - Provide the boolean value .\n * @param { object } centerPoint - Provide the centerPoint value .\n * @param {object} portCenterPoint - provide the portCenterPoint value.\n * @private\n */\n DiagramRenderer.prototype.renderContainer = function (group, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette, indexValue, isPreviewNode, centerPoint, portCenterPoint) {\n var svgParent = { svg: parentSvg, g: canvas };\n var diagramElement = document.getElementById(this.diagramId);\n var instance = 'ej2_instances';\n var diagram;\n if (diagramElement) {\n diagram = diagramElement[\"\" + instance][0];\n }\n if (this.diagramId) {\n parentSvg = this.getParentSvg(group) || parentSvg;\n if (this.isSvgMode) {\n //const groupElement: HTMLCanvasElement | SVGElement;\n // eslint-disable-next-line max-len\n var groupElement = this.getParentElement(group, canvas, parentSvg, indexValue).g || canvas;\n parentSvg = this.getParentSvg(this.hasNativeParent(group.children)) || parentSvg;\n var svgNativeParent = this.getParentElement(this.hasNativeParent(group.children), groupElement, parentSvg, indexValue);\n svgParent.svg = svgNativeParent.svg || parentSvg;\n svgParent.g = svgNativeParent.g || groupElement;\n if (createParent) {\n if (parentSvg) {\n if (!parentSvg.getElementById(svgParent.g.id)) {\n canvas.appendChild(svgParent.g);\n }\n }\n canvas = svgParent.g;\n }\n else {\n canvas = svgParent.g;\n }\n }\n }\n this.renderRect(group, canvas, transform, parentSvg);\n this.groupElement = group;\n if (group.hasChildren()) {\n var parentG = void 0;\n var svgParent_1;\n for (var _i = 0, _a = group.children; _i < _a.length; _i++) {\n var child = _a[_i];\n parentSvg = this.getParentSvg(this.hasNativeParent(group.children) || child) || parentSvg;\n if (this.isSvgMode) {\n svgParent_1 = this.getParentElement(this.hasNativeParent(group.children) || child, canvas, parentSvg);\n parentG = svgParent_1.g || canvas;\n if (svgParent_1.svg) {\n parentSvg = svgParent_1.svg;\n }\n }\n if (!this.isSvgMode) {\n child.flip = group.flip;\n }\n this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true, fromPalette, indexValue, isPreviewNode, centerPoint, portCenterPoint);\n if (child instanceof TextElement && parentG && !(group.elementActions & ElementAction.ElementIsGroup)) {\n this.renderFlipElement(child, parentG, child.flip);\n }\n //EJ2-826617 - for BPMN node label\n if (child instanceof TextElement && parentG && (group.elementActions & ElementAction.ElementIsGroup)) {\n this.renderFlipElement(child, parentG, child.flip);\n }\n if ((child.elementActions & ElementAction.ElementIsPort) && parentG) {\n //EJ2-826617 - for BPMN node port\n if (parentG.id.includes('bpmn')) {\n this.renderFlipElement(group, parentG, child.flip);\n child.flip = 'None';\n }\n else {\n this.renderFlipElement(group, parentG, child.flip);\n }\n }\n //EJ2-826617 - for BPMN node child rendering\n if (!(child instanceof TextElement) &&\n (group.elementActions & ElementAction.ElementIsGroup) && !(child.elementActions & ElementAction.ElementIsPort)\n && parentG) {\n // EJ2-907739-Flipping the group node does not rotate the child nodes\n if (child.flip === 'None') {\n this.renderFlipElement(child, parentG || canvas, group.flip);\n }\n }\n }\n var selectedNode = void 0;\n if (diagram && diagram.selectedItems && diagram.selectedItems.nodes\n && diagram.selectedItems.nodes.length > 0) {\n selectedNode = diagram.selectedItems.nodes[0];\n }\n var innerNodeContent = void 0;\n var innerLabelContent = void 0;\n var isNodeSelected = false;\n var Node_1;\n if (diagram && diagram.selectedItems) {\n Node_1 = diagram.getObject(group.id);\n }\n if (group.flip !== 'None') {\n selectedNode = Node_1;\n }\n // EJ2-71981 - Flip mode \"Port\" is not working properly while dragging multiselected node\n // Below code to set selected node value\n if (group.flip === 'None') {\n selectedNode = Node_1;\n }\n if (selectedNode && selectedNode.flipMode) {\n isNodeSelected = true;\n }\n if (!(group.elementActions & ElementAction.ElementIsGroup) && diagram instanceof Diagram && diagram.nameTable[group.id] && diagram.nameTable[group.id].propName !== 'connectors') {\n if (isNodeSelected && selectedNode) {\n if (group.children && group.children[0] instanceof DiagramNativeElement) {\n innerNodeContent = document.getElementById(selectedNode.id + '_content_inner_native_element');\n }\n else {\n innerNodeContent = document.getElementById(selectedNode.id + '_content_groupElement');\n }\n //Below code to check and flip the node.\n if (!(group.children[0] instanceof DiagramNativeElement) && selectedNode.shape.type !== 'Text' && selectedNode.flipMode !== 'None' && selectedNode.flipMode !== 'Label' && selectedNode.flipMode !== 'All' && selectedNode.flipMode !== 'PortAndLabel' && selectedNode.flipMode !== 'LabelText' && selectedNode.flipMode !== 'PortAndLabelText' && selectedNode.flipMode !== 'LabelAndLabelText' || (group.children[0] instanceof DiagramNativeElement && selectedNode.flipMode === 'Port')) {\n this.renderFlipElement(group, innerNodeContent, selectedNode.flip);\n return;\n }\n //Below code to check and flip the node except for flip mode Port.\n else if (group.children[0] instanceof DiagramNativeElement && (selectedNode.flipMode === 'All' || selectedNode.flipMode === 'Label') || (selectedNode.flipMode === 'Label' || selectedNode.flipMode === 'PortAndLabel' || selectedNode.flipMode === 'LabelText' || selectedNode.flipMode === 'PortAndLabelText' || selectedNode.flipMode === 'LabelAndLabelText') || (selectedNode.shape.type === 'Image' && selectedNode.flipMode === 'Label')) {\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n if (group.flip !== 'None' && selectedNode.flipMode === 'None') {\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n //Below code to check and flip the text element in the node.\n else if (group.flip !== 'None' && (selectedNode.flipMode === 'Label' || selectedNode.flipMode === 'PortAndLabel' || selectedNode.flipMode === 'LabelText' || selectedNode.flipMode === 'PortAndLabelText' || selectedNode.flipMode === 'LabelAndLabelText') || (group.children[0] instanceof DiagramNativeElement && group.flip !== 'None' && selectedNode && (selectedNode.flipMode === 'None' || selectedNode.flipMode === 'All'))) {\n for (var i = 0; i < selectedNode.wrapper.children.length; i++) {\n if (selectedNode.wrapper.children[parseInt(i.toString(), 10)] instanceof TextElement) {\n innerLabelContent = document.getElementById(selectedNode.wrapper.children[parseInt(i.toString(), 10)].id + '_groupElement');\n this.renderFlipTextElement(group, innerLabelContent, selectedNode.wrapper.children[parseInt(i.toString(), 10)], group.flip, selectedNode.flipMode);\n return;\n }\n }\n }\n //Below code to check and flip for flip mode all in the node.\n else if (group.flip !== 'None' && selectedNode.flipMode === 'All') {\n for (var i = 0; i < selectedNode.wrapper.children.length; i++) {\n if (selectedNode.wrapper.children[parseInt(i.toString(), 10)] instanceof TextElement) {\n innerLabelContent = document.getElementById(selectedNode.wrapper.children[parseInt(i.toString(), 10)].id + '_groupElement');\n this.renderFlipTextElement(group, innerLabelContent, selectedNode.wrapper.children[parseInt(i.toString(), 10)], group.flip, selectedNode.flipMode);\n }\n }\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n //Below code to check and flip the element for None in the node.\n else {\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n }\n }\n //EJ2-826617 - Flip and flip mode option for BPMN node\n if ((group.elementActions & ElementAction.ElementIsGroup) && diagram instanceof Diagram && diagram.nameTable[group.id] && diagram.nameTable[group.id].propName !== 'connectors') {\n if (isNodeSelected && selectedNode) {\n if (group.children && group.children[0] instanceof DiagramNativeElement) {\n innerNodeContent = document.getElementById(selectedNode.id + '_content_inner_native_element');\n }\n else {\n innerNodeContent = document.getElementById(selectedNode.id + '_content_groupElement');\n }\n //Below code to check and flip the node.\n if (!(group.children[0] instanceof DiagramNativeElement) && selectedNode.shape.type !== 'Text' && selectedNode.flipMode !== 'None' && selectedNode.flipMode !== 'Label' && selectedNode.flipMode !== 'All' && selectedNode.flipMode !== 'PortAndLabel' && selectedNode.flipMode !== 'LabelText' && selectedNode.flipMode !== 'PortAndLabelText' && selectedNode.flipMode !== 'LabelAndLabelText' || (group.children[0] instanceof DiagramNativeElement && selectedNode.flipMode === 'Port')) {\n this.renderFlipElement(group, innerNodeContent, selectedNode.flip);\n return;\n }\n //Below code to check and flip the node except for flip mode Port.\n else if (group.children[0] instanceof DiagramNativeElement && (selectedNode.flipMode === 'All' || selectedNode.flipMode === 'Label') || (selectedNode.flipMode === 'Label' || selectedNode.flipMode === 'PortAndLabel' || selectedNode.flipMode === 'LabelText' || selectedNode.flipMode === 'PortAndLabelText' || selectedNode.flipMode === 'LabelAndLabelText') || (selectedNode.shape.type === 'Image' && selectedNode.flipMode === 'Label')) {\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n if (group.flip !== 'None' && selectedNode.flipMode === 'None') {\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n //Below code to check and flip the text element in the node.\n else if (group.flip !== 'None' && (selectedNode.flipMode === 'Label' || selectedNode.flipMode === 'PortAndLabel' || selectedNode.flipMode === 'LabelText' || selectedNode.flipMode === 'PortAndLabelText' || selectedNode.flipMode === 'LabelAndLabelText') || (group.children[0] instanceof DiagramNativeElement && group.flip !== 'None' && selectedNode && (selectedNode.flipMode === 'None' || selectedNode.flipMode === 'All'))) {\n for (var i = 0; i < selectedNode.wrapper.children.length; i++) {\n if (selectedNode.wrapper.children[parseInt(i.toString(), 10)] instanceof TextElement) {\n innerLabelContent = document.getElementById(selectedNode.wrapper.children[parseInt(i.toString(), 10)].id + '_groupElement');\n this.renderFlipTextElement(group, innerLabelContent, selectedNode.wrapper.children[parseInt(i.toString(), 10)], group.flip, selectedNode.flipMode);\n return;\n }\n }\n }\n //Below code to check and flip for flip mode all in the node.\n else if (group.flip !== 'None' && selectedNode.flipMode === 'All') {\n for (var i = 0; i < selectedNode.wrapper.children.length; i++) {\n if (selectedNode.wrapper.children[parseInt(i.toString(), 10)] instanceof TextElement) {\n innerLabelContent = document.getElementById(selectedNode.wrapper.children[parseInt(i.toString(), 10)].id + '_groupElement');\n this.renderFlipTextElement(group, innerLabelContent, selectedNode.wrapper.children[parseInt(i.toString(), 10)], group.flip, selectedNode.flipMode);\n }\n }\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n //Below code to check and flip the element for None in the node.\n else {\n this.renderFlipElement(group, innerNodeContent, group.flip);\n }\n }\n }\n }\n };\n /**\n * Method used to flip the text element \\\n *\n * @returns {void} Method used to flip the text element.\\\n *\n * @param {DiagramElement} element - Provide the node element.\n * @param { HTMLCanvasElement | SVGElement} canvas - Provide the text canvas element.\n * @param { DiagramElement } textElement - Provide the text element.\n * @param { FlipDirection } flip - Provide the node flip direction.\n * @param { FlipMode } flipMode - Provide the node flipMode.\n */\n DiagramRenderer.prototype.renderFlipTextElement = function (element, canvas, textElement, flip, flipMode) {\n var attr = {};\n var scaleX = 1;\n var scaleY = 1;\n var posX = 0;\n var posY = 0;\n var offsetX = 0;\n var offsetY = 0;\n if (flip !== 'None') {\n // Fetch annotation offset\n var textPos = textElement.getAbsolutePosition(textElement.desiredSize);\n if (textPos) {\n // Inverting and translating Annotation\n if (flipMode === 'All' || flipMode === 'LabelAndLabelText') {\n if (flip === 'Horizontal' || flip === 'Both') {\n posX = element.bounds.center.x;\n offsetX = -element.bounds.center.x;\n scaleX = -1;\n }\n if (flip === 'Vertical' || flip === 'Both') {\n posY = element.bounds.center.y;\n offsetY = -element.bounds.center.y;\n scaleY = -1;\n }\n if (flip === 'Horizontal' || flip === 'Vertical') {\n var angle = Math.sin(element.rotateAngle * Math.PI / 180);\n //918299 - Issue with Polygon Shape Node Rotation After Grouping and Flipping\n if (textPos.y) {\n offsetX += -element.desiredSize.height * angle * (-2 * textPos.y / textElement.desiredSize.height + 1);\n }\n if (textPos.x) {\n offsetY += element.desiredSize.width * angle * (-2 * textPos.x / textElement.desiredSize.width + 1);\n }\n }\n attr = {\n 'transform': 'translate(' + posX + ',' + posY + ') scale(' + scaleX + ','\n + scaleY + ') translate(' + offsetX + ',' + offsetY + ')'\n };\n }\n // Inverting Annotation without flipping position\n else if (flipMode === 'LabelText' || flipMode === 'PortAndLabelText') {\n if (flip === 'Horizontal' || flip === 'Both') {\n posX = textElement.offsetX;\n offsetX = -textElement.offsetX;\n scaleX = -1;\n }\n if (flip === 'Vertical' || flip === 'Both') {\n posY = textElement.offsetY;\n offsetY = -textElement.offsetY;\n scaleY = -1;\n }\n attr = {\n 'transform': 'translate(' + posX + ',' + posY + ') scale(' + scaleX + ','\n + scaleY + ') translate(' + offsetX + ',' + offsetY + ')'\n };\n }\n // Translating Annotation\n else if (flipMode === 'PortAndLabel' || flipMode === 'Label') {\n var labelPosX = 0;\n var labelPosY = 0;\n var labelPos = this.flipLabel(element, textElement, textPos, flip);\n labelPosX = labelPos.x - textElement.offsetX;\n labelPosY = labelPos.y - textElement.offsetY;\n attr = { 'transform': 'translate(' + labelPosX + ',' + labelPosY + ')' };\n }\n }\n }\n else {\n attr = {\n 'transform': 'translate(' + 0 + ',' + 0 + ')'\n };\n }\n this.setFlipAttributes(element, canvas, attr, scaleX, scaleY);\n };\n DiagramRenderer.prototype.renderFlipElement = function (element, canvas, flip) {\n var attr = {};\n var scaleX = 1;\n var scaleY = 1;\n var posX = 0;\n var posY = 0;\n var offsetX = 0;\n var offsetY = 0;\n if (flip !== 'None') {\n if (flip === 'Horizontal' || flip === 'Both') {\n posX = element.bounds.center.x;\n offsetX = -element.bounds.center.x;\n scaleX = -1;\n }\n if (flip === 'Vertical' || flip === 'Both') {\n posY = element.bounds.center.y;\n offsetY = -element.bounds.center.y;\n scaleY = -1;\n }\n attr = {\n 'transform': 'translate(' + posX + ',' + posY + ') scale(' + scaleX + ','\n + scaleY + ') translate(' + offsetX + ',' + offsetY + ')'\n };\n }\n else {\n attr = {\n 'transform': 'translate(' + 0 + ',' + 0 + ')'\n };\n }\n this.setFlipAttributes(element, canvas, attr, scaleX, scaleY);\n };\n DiagramRenderer.prototype.setFlipAttributes = function (element, canvas, attr, scaleX, scaleY) {\n if (attr) {\n if (element && element.children &&\n element.children.length && (element.children[0] instanceof DiagramHtmlElement)) {\n var id = canvas.id.split('_preview');\n var layer = document.getElementById(id[0] + '_html_div') ||\n (getHTMLLayer(this.diagramId).children[0]);\n canvas = layer.querySelector(('#' + element.id + '_content_html_element'));\n if (canvas) {\n canvas.style.transform =\n 'scale(' + scaleX + ',' + scaleY + ')' + 'rotate(' + (element.rotateAngle + element.parentTransform) + 'deg)';\n }\n }\n else {\n setAttributeSvg(canvas, attr);\n }\n }\n };\n /**\n * Calculates Flipped Position of textElement considering annotation offset\n *\n * @returns {PointModel} - flipped point of textElement current point\n *\n * @param {NodeModel} element - Provide node wrapper element containing the text element.\n * @param {TextElement} textElement - Provide the textElememt to flip.\n * @param {PointModel} labelPos - Provide the annotation offset.\n * @param {FlipDirection} flip - Provide the node flip direction.\n */\n DiagramRenderer.prototype.flipLabel = function (element, textElement, labelPos, flip) {\n var flippedOffset;\n if (flip !== 'None') {\n var flippedOffsetX = void 0;\n var flippedOffsetY = void 0;\n // Node's topLeft Position\n var topLeft = {\n x: element.offsetX - element.desiredSize.width / 2,\n y: element.offsetY - element.desiredSize.height / 2\n };\n flippedOffsetX = topLeft.x + (element.desiredSize.width * ((labelPos.x / textElement.desiredSize.width)));\n flippedOffsetY = topLeft.y + (element.desiredSize.height * ((labelPos.y / textElement.desiredSize.height)));\n if (flip === 'Both' || flip === 'Horizontal') {\n flippedOffsetX = topLeft.x + (element.desiredSize.width * (1 - (labelPos.x / textElement.desiredSize.width)));\n }\n if (flip === 'Vertical' || flip === 'Both') {\n flippedOffsetY = topLeft.y + (element.desiredSize.height * (1 - (labelPos.y / textElement.desiredSize.height)));\n }\n // Flipped Position\n flippedOffset = { x: flippedOffsetX, y: flippedOffsetY };\n // FlippedPoint after rotating with node offset as its pivot\n flippedOffset = rotatePoint(element.rotateAngle + element.parentTransform, element.offsetX, element.offsetY, flippedOffset);\n }\n return flippedOffset;\n };\n /**\n * Method used to check the native parent \\\n *\n * @returns {void} Method used to check the native parent .\\\n *\n * @param { DiagramElement[]} children - Provide the diagram element .\n * @param { number} count - Provide the count value .\n * @private\n */\n DiagramRenderer.prototype.hasNativeParent = function (children, count) {\n if (children && children.length > 0 && (count || 0 < 3)) {\n var child = children[0];\n if (child instanceof DiagramNativeElement) {\n return child;\n }\n else if (child.children && child.children.length) {\n this.hasNativeParent(child.children, count++ || 0);\n }\n }\n return undefined;\n };\n /**\n * Method used the draw the reactangle for the diagram \\\n *\n * @returns {void} Method used the draw the reactangle for the diagram .\\\n *\n * @param { SVGElement} element - Provide the SVG elements .\n * @param { RectAttributes} canvas - Provide the Canvas element .\n * @param { RectAttributes} transform - Provide transform value for the node .\n * @param { RectAttributes} parentSvg -provide the parent SVG .\n * @param { RectAttributes} isPreviewNode - Provide the preview boolean value .\n * @private\n */\n DiagramRenderer.prototype.renderRect = function (element, canvas, transform, parentSvg, isPreviewNode) {\n var options = this.getBaseAttributes(element, transform, isPreviewNode);\n options.cornerRadius = element.cornerRadius || 0;\n if (element.isExport) {\n options.cornerRadius *= element.exportScaleValue.x;\n }\n var ariaLabel = element.description ? element.description : element.id;\n this.renderer.drawRectangle(canvas, options, this.diagramId, element.isExport, undefined, parentSvg, ariaLabel);\n };\n /**\n * Method used the draw the reactangle for the diagram \\\n *\n * @returns {void} Method used the draw the reactangle for the diagram .\\\n *\n * @param { SVGElement} canvas - Provide the SVG elements .\n * @param { RectAttributes} options - Provide the attributes to draw the rectangle .\n * @private\n */\n DiagramRenderer.prototype.drawRect = function (canvas, options) {\n options.cornerRadius = 0;\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId);\n };\n /**\n * Will get the base attributes for all the elements \\\n *\n * @returns {BaseAttributes} Will get the base attributes for all the elements .\\\n *\n * @param { DiagramElement} element - Provide the diagram elements .\n * @param { Transforms} transform - Provide the transform value for the elements .\n * @param { boolean} isPreviewNode - Provide the preview boolean value.\n * @private\n */\n DiagramRenderer.prototype.getBaseAttributes = function (element, transform, isPreviewNode) {\n var options = {\n width: element.actualSize.width, height: element.actualSize.height,\n //EJ2-840163-Draw highlighter not rendered properly while hovering ports\n x: element.offsetX - element.actualSize.width * element.pivot.x,\n y: element.offsetY - element.actualSize.height * element.pivot.y,\n fill: element.style.fill, stroke: element.style.strokeColor, angle: element.rotateAngle + element.parentTransform,\n pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: element.style.strokeWidth,\n dashArray: element.style.strokeDashArray || '', opacity: element.style.opacity, shadow: element.shadow,\n gradient: element.style.gradient, visible: element.visible, id: element.id, description: element.description,\n canApplyStyle: element.canApplyStyle, shapeType: element.shapeType\n };\n if (element.rotationReference === 'Page') {\n options.angle = element.rotateAngle;\n }\n if (isPreviewNode) {\n options.x = options.x - .5;\n options.y = options.y - .5;\n }\n if (element.isExport) {\n options.width *= element.exportScaleValue.x;\n options.height *= element.exportScaleValue.y;\n options.x *= element.exportScaleValue.x;\n options.y *= element.exportScaleValue.y;\n options.strokeWidth *= element.exportScaleValue.x;\n }\n if (element.flip) {\n options.flip = element.flip;\n }\n if (transform) {\n options.x += transform.tx;\n options.y += transform.ty;\n }\n return options;\n };\n /**\n * Will render the SVG background image \\\n *\n * @returns {void} Will render the SVG background image .\\\n *\n * @param { Transforms} background - Provide the transforms values .\n * @param { boolean} diagramElement - Provide element for the daigram.\n * @param { boolean} x - Provide the rendering mode of the daigram.\n * @param { boolean} y - Provide the rendering mode of the daigram.\n * @param { boolean} width - Provide the rendering mode of the daigram.\n * @param { boolean} height - Provide the rendering mode of the daigram.\n * @private\n */\n DiagramRenderer.renderSvgBackGroundImage = function (background, diagramElement, x, y, width, height) {\n if (background.source) {\n var backgroundLayer = getBackgroundLayerSvg(diagramElement.id);\n var target = backgroundLayer.getElementById(diagramElement.id + '_image');\n if (!target) {\n var bgimageLayer = getBackgroundImageLayer(diagramElement.id);\n target = document.createElementNS('http://www.w3.org/2000/svg', 'image');\n target.setAttribute('id', diagramElement.id + '_image');\n bgimageLayer.appendChild(target);\n }\n var imageObj = new Image();\n imageObj.src = background.source;\n target.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', imageObj.src.toString());\n var scale = background.scale !== 'None' ? background.scale : '';\n var imgAlign = background.align;\n var aspectRatio = imgAlign.charAt(0).toLowerCase() + imgAlign.slice(1);\n if (scale) {\n aspectRatio += ' ' + scale.charAt(0).toLowerCase() + scale.slice(1);\n }\n var attr = {\n 'id': diagramElement.id + '_image', 'x': x, 'y': y,\n 'width': width, 'height': height,\n 'preserveAspectRatio': aspectRatio\n };\n setAttributeSvg(target, attr);\n }\n };\n /**\n * Method used to transform the layer \\\n *\n * @returns {boolean} Method used to transform the layer .\\\n * @param { Transforms} transform - Provide the transforms values .\n * @param { boolean} svgMode - Provide the rendering mode of the daigram.\n * @private\n */\n DiagramRenderer.prototype.transformLayers = function (transform, svgMode) {\n var tx = transform.tx * transform.scale;\n var ty = transform.ty * transform.scale;\n var domTable = 'domTable';\n if (tx !== this.transform.x || ty !== this.transform.y || (tx === 0 || ty === 0)) {\n //diagram layer\n if (svgMode) {\n if (!window[\"\" + domTable][this.diagramId + '_diagramLayer']) {\n window[\"\" + domTable][this.diagramId + '_diagramLayer'] =\n this.diagramSvgLayer.getElementById(this.diagramId + '_diagramLayer');\n }\n var diagramLayer = window[\"\" + domTable][this.diagramId + '_diagramLayer'];\n diagramLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n }\n //background\n //gridline\n var gridLayer = getGridLayer(this.diagramId);\n gridLayer.setAttribute('transform', 'translate(' + (transform.tx * transform.scale) + ','\n + (transform.ty * transform.scale) + ')');\n //portslayer\n if (!window[\"\" + domTable][this.diagramId + '_diagramPorts']) {\n window[\"\" + domTable][this.diagramId + '_diagramPorts'] = this.iconSvgLayer.getElementById(this.diagramId + '_diagramPorts');\n }\n var portsLayer = window[\"\" + domTable][this.diagramId + '_diagramPorts'];\n portsLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n //expandlayer\n if (!window[\"\" + domTable][this.diagramId + '_diagramExpander']) {\n window[\"\" + domTable][this.diagramId + '_diagramExpander'] =\n this.iconSvgLayer.getElementById(this.diagramId + '_diagramExpander');\n }\n var expandLayer = window[\"\" + domTable][this.diagramId + '_diagramExpander'];\n expandLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n //nativelayer\n if (!window[\"\" + domTable][this.diagramId + '_nativeLayer']) {\n window[\"\" + domTable][this.diagramId + '_nativeLayer'] = this.nativeSvgLayer.getElementById(this.diagramId + '_nativeLayer');\n }\n var nativeLayer = window[\"\" + domTable][this.diagramId + '_nativeLayer'];\n nativeLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n //htmlLayer\n var htmlLayer = getHTMLLayer(this.diagramId).children[0];\n htmlLayer.style.transform = 'translate('\n + (transform.tx * transform.scale) + 'px,' + (transform.ty * transform.scale) + 'px)scale('\n + transform.scale + ')';\n this.transform = { x: transform.tx * transform.scale, y: transform.ty * transform.scale };\n return true;\n }\n return false;\n };\n /**\n * Method used to update the nodes in the diagram \\\n *\n * @returns {void} Method used to update the nodes in the diagram .\\\n * @param { HTMLCanvasElement} element - Provide the diagram element .\n * @param { HTMLCanvasElement} diagramElementsLayer - Provide the diagram layer element .\n * @param { HTMLCanvasElement} htmlLayer -Provide the html element .\n * @param { HTMLCanvasElement} transform - Provide the transform value .\n * @param { HTMLCanvasElement} insertIndex - Provide the index value.\n * @param { object} centerPoint - Provide the center point value.\n * @param {object} portCenterPoint - provide the portCenterPoint value.\n * @private\n */\n DiagramRenderer.prototype.updateNode = function (element, diagramElementsLayer, htmlLayer, transform, insertIndex, centerPoint, portCenterPoint) {\n this.renderElement(element, diagramElementsLayer, htmlLayer, transform, this.getParentSvg(element), undefined, undefined, insertIndex, null, centerPoint, portCenterPoint);\n };\n return DiagramRenderer;\n}());\n\nvar __extends$l = (undefined && undefined.__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$c = (undefined && undefined.__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/**\n * Overview control allows you to see a preview or an overall view of the entire content of a Diagram.\n * This helps you to look at the overall picture of a large Diagram\n * To navigate, pan, or zoom, on a particular position of the page.\n * ```html\n * \n * \n * ```\n * ```typescript\n * let overview: Overview;\n * let diagram: Diagram = new Diagram({\n * width:'1000px', height:'500px' });\n * diagram.appendTo('#diagram');\n * let options: OverviewModel = {};\n * options.sourceID = 'diagram';\n * options.width = '250px';\n * options.height = '500px';\n * overview = new Overview(options);\n * overview.appendTo('#overview');\n * ```\n */\nvar Overview = /** @__PURE__ @class */ (function (_super) {\n __extends$l(Overview, _super);\n function Overview(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.mode = 'Canvas';\n /** @private */\n _this.id = 'overview';\n _this.actionName = '';\n _this.startPoint = null;\n _this.currentPoint = null;\n _this.prevPoint = null;\n _this.scale = null;\n _this.inAction = false;\n _this.viewPortRatio = 1;\n _this.horizontalOffset = 0;\n _this.verticalOffset = 0;\n _this.model = {};\n _this.event = true;\n _this.overviewid = 88123;\n _this.model = { width: _this.width, height: _this.height };\n return _this;\n }\n /**\n * Updates the overview control when the objects are changed\n *\n * @param {OverviewModel} newProp - Lists the new values of the changed properties\n * @param {OverviewModel} oldProp - Lists the old values of the changed properties\n */\n Overview.prototype.onPropertyChanged = function (newProp, oldProp) {\n //let objectArray: Object[] = [];\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'sourceID':\n this.setParent(newProp.sourceID);\n break;\n case 'width':\n case 'height':\n this.renderCanvas();\n this.setParent(this.sourceID);\n break;\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Get the properties to be maintained in the persisted state.\n */\n Overview.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initializes the values of private members.\n *\n * @returns {void} Initializes the values of private members.\n * @private\n */\n Overview.prototype.preRender = function () {\n if (this.element.id === '') {\n var collection = document.getElementsByClassName('e-overview').length;\n this.element.id = 'overview_' + this.overviewid + '_' + collection;\n }\n //EJ2-64637 - Diagram element in the overview disappears on window resize.\n this.id = this.element.id ? this.element.id : this.id;\n this.element.style.background = 'transparent';\n this.unWireEvents();\n this.wireEvents();\n };\n Overview.prototype.render = function () {\n this.diagramRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), false);\n this.renderCanvas();\n this.setParent(this.sourceID);\n this.renderComplete();\n };\n // eslint-disable-next-line @typescript-eslint/ban-types\n Overview.prototype.getSizeValue = function (real) {\n var text;\n if (real.toString().indexOf('px') > 0 || real.toString().indexOf('%') > 0) {\n text = real.toString();\n }\n else {\n text = real.toString() + 'px';\n }\n return text;\n };\n Overview.prototype.renderCanvas = function (options) {\n var canvas = document.getElementById(this.element.id + '_canvas');\n if (!canvas) {\n canvas = createHtmlElement('div', {});\n this.element.appendChild(canvas);\n }\n var attribute = {\n 'id': this.element.id + '_canvas', 'class': 'drawing',\n 'style': 'position:relative; height:' + this.getSizeValue(this.model.height) + '; width:' +\n this.getSizeValue(this.model.width) +\n ';style:-ms-touch-action: none;touch-action: none;'\n };\n setAttributeHtml(canvas, attribute);\n this.element.setAttribute('tabindex', String(-1));\n this.element.style.overflow = 'hidden';\n this.element.style.height = String(this.model.height);\n this.element.style.width = String(this.model.width);\n this.canvas = canvas;\n };\n Overview.prototype.setParent = function (id) {\n var element = document.getElementById(id);\n var instance = 'ej2_instances';\n if (this.parent) {\n var oldparent = this.parent;\n this.parent = null;\n oldparent.setOverview(null, this.element.id);\n this.removeDocument(this);\n }\n this.parent = this.getDiagram(element, instance);\n if (this.parent) {\n this.parent.setOverview(this);\n }\n };\n Overview.prototype.getDiagram = function (element, instance) {\n var diagram;\n var n = element[\"\" + instance].length;\n for (var i = 0; i < n; i++) {\n if (hasClass(element[\"\" + instance][parseInt(i.toString(), 10)].element, 'e-diagram')) {\n diagram = element[\"\" + instance][parseInt(i.toString(), 10)];\n break;\n }\n }\n return diagram;\n };\n Overview.prototype.unWireEvents = function () {\n var start = Browser.touchStartEvent;\n var move = Browser.touchMoveEvent;\n //const evnt: EventHandler;\n var cancel = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n //const isIE11Pointer: Boolean = Browser.isPointer;\n // const wheelEvent: string = Browser.info.name === 'mozilla' ?\n // (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n var stop = Browser.touchEndEvent;\n EventHandler.remove(this.element, start, this.mouseDown);\n EventHandler.remove(this.element, move, this.mouseMove);\n EventHandler.remove(this.element, stop, this.mouseUp);\n EventHandler.remove(this.element, cancel, this.documentMouseUp);\n EventHandler.remove(window, 'resize', this.windowResize);\n var container = document.getElementById(this.sourceID + 'content');\n if (container) {\n EventHandler.remove(container, 'scroll', this.scrolled);\n }\n };\n Overview.prototype.wireEvents = function () {\n var start = Browser.touchStartEvent;\n var stop = Browser.touchEndEvent;\n var move = Browser.touchMoveEvent;\n var cancel = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n //const isIE11Pointer: Boolean = Browser.isPointer;\n // const wheelEvent: string = Browser.info.name === 'mozilla' ?\n // (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n EventHandler.add(this.element, start, this.mouseDown, this);\n EventHandler.add(this.element, move, this.mouseMove, this);\n EventHandler.add(this.element, stop, this.mouseUp, this);\n EventHandler.add(this.element, cancel, this.documentMouseUp, this);\n // eslint-disable\n EventHandler.add(window, 'resize', this.windowResize, this);\n // eslint-enable\n var container = document.getElementById(this.sourceID + 'content');\n if (container) {\n EventHandler.add(container, 'scroll', this.scrolled, this);\n }\n };\n /**\n * renderDocument method\\\n *\n * @returns { void } renderDocument method .\\\n * @param {Overview} view - provide the angle value.\n * @private\n */\n Overview.prototype.renderDocument = function (view) {\n view.canvas = this.canvas;\n var g = document.getElementById(this.canvas.id + '_svg');\n if (g) {\n g.parentNode.removeChild(g);\n }\n var attr = {\n id: this.canvas.id + '_svg',\n version: '1.1',\n 'class': 'overview_svg'\n };\n var svg = createSvgElement('svg', attr);\n this.svg = svg;\n view.svg = svg;\n view.canvas.appendChild(svg);\n var ovw = document.getElementById(this.element.id);\n var element = ovw;\n var eWidth = element.clientWidth || element.offsetWidth;\n var eHeight = element.clientHeight || element.offsetHeight;\n var bRect = element.getBoundingClientRect();\n // Check for the window resize\n var screenX = (window.screenX < 0) ? window.screenX * -1 : window.screenX;\n var screenY = (window.screenY < 0) ? window.screenY * -1 : window.screenY;\n if (eWidth === 0) {\n var widthValue = Math.floor(((window.innerWidth - screenX) - Math.floor(bRect.left)));\n eWidth = widthValue > 0 ? widthValue : Math.floor(window.innerWidth);\n }\n if (eHeight === 0) {\n var heightValue = Math.floor(((window.innerHeight - screenY) - Math.floor(bRect.top)));\n eHeight = heightValue > 0 ? heightValue : Math.floor(window.innerHeight);\n }\n if (eWidth > 0) {\n svg.setAttribute('width', String(eWidth));\n this.model.height = eHeight;\n }\n if (eHeight > 0) {\n svg.setAttribute('height', String(eHeight));\n this.model.width = eWidth;\n }\n //let attributes: Object;\n if (!view.diagramLayerDiv) {\n view.diagramLayerDiv = createHtmlElement('div', {});\n //const container: HTMLElement = document.getElementById(this.element.id);\n view.diagramLayer = CanvasRenderer.createCanvas(this.element.id + '_diagramLayer', this.model.width, this.model.height);\n view.diagramLayer.setAttribute('style', 'position:absolute; left:0px; top:0px ');\n view.diagramLayerDiv.appendChild(view.diagramLayer);\n view.canvas.appendChild(view.diagramLayerDiv);\n }\n var attributes = {\n 'id': this.element.id + '_diagramLayer_div',\n 'style': 'width:' + this.model.width + 'px; height:' + this.model.height + 'px;position:absolute;top:0px;left:0px'\n };\n setAttributeHtml(view.diagramLayerDiv, attributes);\n this.renderHtmlLayer(view.canvas);\n this.renderNativeLayer(view.canvas, view);\n this.addOverviewRectPanel(view);\n };\n /**\n * removeDocument method\\\n *\n * @returns { void } removeDocument method .\\\n * @param {Overview} view - provide the angle value.\n * @private\n */\n Overview.prototype.removeDocument = function (view) {\n var svg = document.getElementById(this.canvas.id + '_svg');\n this.canvas.removeChild(svg);\n var htmlLayer = document.getElementById(this.element.id + '_htmlLayer');\n this.canvas.removeChild(htmlLayer);\n var diagramLayer = document.getElementById(this.element.id + '_diagramLayer_div');\n this.canvas.removeChild(diagramLayer);\n view.diagramLayerDiv = null;\n view.diagramLayer = null;\n var domTable = 'domTable';\n window[\"\" + domTable][this.id + 'html_layer'] = null;\n };\n Overview.prototype.renderHtmlLayer = function (canvas) {\n var htmlLayer = createHtmlElement('div', {\n 'id': this.element.id + '_htmlLayer', 'class': 'e-html-layer',\n 'style': 'pointer-events:none;position:absolute;top:0px;left:0px;'\n });\n var options = {\n 'id': this.element.id + '_htmlLayer_div',\n 'style': 'position:absolute;top:0px;left:0px;'\n };\n var htmlDiv = createHtmlElement('div', options);\n htmlLayer.appendChild(htmlDiv);\n canvas.appendChild(htmlLayer);\n return htmlLayer;\n };\n Overview.prototype.renderNativeLayer = function (canvas, view) {\n if (!document.getElementById(this.element.id + '_nativeLayer_svg')) {\n var nativeLayerSvg = this.parent.createSvg(this.element.id + '_nativeLayer_svg', this.model.width, this.model.height);\n var nativeLayer = createSvgElement('g', { 'id': this.element.id + '_nativeLayer' });\n nativeLayerSvg.appendChild(nativeLayer);\n view.diagramLayerDiv.appendChild(nativeLayerSvg);\n setAttributeSvg(nativeLayerSvg, { 'class': 'e-native-layer' });\n }\n };\n Overview.prototype.addOverviewRectPanel = function (view) {\n var svg = document.getElementById(this.canvas.id + '_overviewsvg');\n if (svg) {\n svg.parentNode.removeChild(svg);\n }\n var attr = ({\n id: this.canvas.id + '_overviewsvg',\n class: 'overviewsvg',\n version: '1.1',\n 'style': 'position:absolute;left:0px;top:0px; aria-label:Specifies overview',\n width: this.model.width,\n height: this.model.height\n });\n svg = createSvgElement('svg', attr);\n view.canvas.appendChild(svg);\n var ovw = createSvgElement('g', { 'id': this.element.id + '_overviewlayer', 'style': 'pointer-events:none' });\n svg.appendChild(ovw);\n var rect = createSvgElement('rect', {\n 'fill': 'transparent', 'width': '100%', 'height': '100%', 'class': 'overviewbackrect',\n 'id': this.canvas.id + 'overviewbackrect'\n });\n rect.setAttribute('style', ' pointer-events: none; ');\n ovw.appendChild(rect);\n //const svgDocument: SVGElement = (ovw);\n var g = createSvgElement('g', { 'id': this.canvas.id + 'overviewhandle', 'style': 'pointer-events:all' });\n ovw.appendChild(g);\n var innerrect = createSvgElement('rect', { 'id': this.canvas.id + 'overviewrect', 'fill': 'transparent' });\n g.appendChild(innerrect);\n this.renderOverviewCorner('left', g);\n this.renderOverviewCorner('right', g);\n this.renderOverviewCorner('top', g);\n this.renderOverviewCorner('bottom', g);\n this.renderOverviewCorner('topleft', g);\n this.renderOverviewCorner('topright', g);\n this.renderOverviewCorner('bottomleft', g);\n this.renderOverviewCorner('bottomright', g);\n };\n Overview.prototype.renderOverviewCorner = function (name, parent) {\n var svg = this.svg;\n var shape;\n if (name === 'top' || name === 'bottom' || name === 'right' || name === 'left') {\n shape = 'rect';\n }\n else {\n shape = 'circle';\n }\n var innerrect = createSvgElement(shape, { 'id': this.canvas.id + 'visible' + name, 'class': 'overview-resizer' });\n parent.appendChild(innerrect);\n var transrect = createSvgElement(shape, {\n 'id': this.canvas.id + name, 'class': 'overviewresizer', 'fill': 'transparent'\n });\n parent.appendChild(transrect);\n };\n Overview.prototype.updateOverviewRectangle = function () {\n var difx = this.currentPoint.x - this.prevPoint.x;\n var dify = this.currentPoint.y - this.prevPoint.y;\n var size = new Size();\n size.width = 0;\n size.height = 0;\n var x = 0;\n var y = 0;\n var w;\n var h;\n switch (this.resizeDirection) {\n case 'left':\n size.width -= difx;\n size.height -= difx / this.viewPortRatio;\n x = difx;\n y = difx / this.viewPortRatio;\n y /= 2;\n break;\n case 'right':\n size.width += difx;\n size.height += difx / this.viewPortRatio;\n y = difx / this.viewPortRatio;\n y /= -2;\n break;\n case 'top':\n size.height -= dify;\n size.width -= dify * this.viewPortRatio;\n y = dify;\n x = dify * this.viewPortRatio;\n x /= 2;\n break;\n case 'bottom':\n size.height += dify;\n size.width += dify * this.viewPortRatio;\n x = dify * this.viewPortRatio;\n x /= -2;\n break;\n case 'topleft':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = dify * this.viewPortRatio;\n }\n else {\n dify = difx / this.viewPortRatio;\n }\n size.width -= difx;\n size.height -= dify;\n x = difx;\n y = dify;\n break;\n case 'topright':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = -dify * this.viewPortRatio;\n }\n else {\n dify = -(difx / this.viewPortRatio);\n }\n y = dify;\n size.width += difx;\n size.height -= dify;\n break;\n case 'bottomleft':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = -dify * this.viewPortRatio;\n }\n else {\n dify = -difx / this.viewPortRatio;\n }\n x = difx;\n size.width -= difx;\n size.height += dify;\n break;\n case 'bottomright':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = dify * this.viewPortRatio;\n }\n else {\n dify = difx / this.viewPortRatio;\n }\n size.width += difx;\n size.height += dify;\n break;\n }\n this.updateHelper(x, y, size, w, h);\n };\n Overview.prototype.updateHelper = function (difx, dify, size, width, height) {\n var x;\n var y;\n var bounds;\n var svg = this.element.getElementsByTagName('svg')[2];\n var rect = svg.getElementById('helper');\n if (size) {\n bounds = rect.getBBox();\n x = bounds.x + difx;\n y = bounds.y + dify;\n width = bounds.width + size.width;\n height = bounds.height + size.height;\n }\n else {\n var difx_1;\n if (this.currentPoint.x > this.startPoint.x) {\n difx_1 = this.currentPoint.x - this.prevPoint.x;\n }\n else {\n difx_1 = this.prevPoint.x - this.currentPoint.x;\n }\n var dify_1;\n if (this.currentPoint.y > this.startPoint.y) {\n dify_1 = this.currentPoint.y - this.prevPoint.y;\n }\n else {\n dify_1 = this.prevPoint.y - this.currentPoint.y;\n }\n if (Math.abs(dify_1) > Math.abs(difx_1)) {\n difx_1 = this.viewPortRatio * dify_1;\n }\n else {\n dify_1 = difx_1 / this.viewPortRatio;\n }\n bounds = rect.getBBox();\n x = ((this.startPoint.x > this.currentPoint.x) ?\n bounds.x - difx_1 : bounds.x);\n y = ((this.startPoint.y > this.currentPoint.y) ? bounds.y - dify_1 : bounds.y);\n width = bounds.width + difx_1;\n height = bounds.height + dify_1;\n }\n setAttributeSvg(this.helper, {\n 'id': this.helper.id, 'x': x, 'y': y,\n 'width': Math.max(0, width), 'height': Math.max(0, height)\n });\n };\n Overview.prototype.updateOverviewrect = function (x, y, width, height) {\n var rect = document.getElementById(this.canvas.id + 'overviewrect');\n var attr = { x: x, y: y, width: Math.max(1, width), height: Math.max(1, height) };\n setAttributeHtml(rect, attr);\n this.updateOverviewCorner('top', x + 8, y + 1, Math.max(0, width - 16), 2);\n this.updateOverviewCorner('bottom', x + 8, y + height + 3, Math.max(0, width - 16), 2);\n this.updateOverviewCorner('left', x - 2, y + 11, 2, Math.max(0, height - 16));\n this.updateOverviewCorner('right', x + width, y + 11, 2, Math.max(0, height - 16));\n this.updateOverviewCorner('topleft', x, y + 3, 5, 5);\n this.updateOverviewCorner('topright', x + width, y + 3, 5, 5);\n this.updateOverviewCorner('bottomleft', x, y + height + 3, 5, 5);\n this.updateOverviewCorner('bottomright', x + width, y + height + 3, 5, 5);\n };\n Overview.prototype.updateOverviewCorner = function (name, x, y, width, height) {\n var attr;\n var transattr;\n var rectname = 'visible' + name;\n var rect = document.getElementById(this.canvas.id + rectname);\n if (name === 'top' || name === 'bottom' || name === 'right' || name === 'left') {\n attr = { x: x, y: y, width: width, height: height, fill: '#ED1C24' };\n transattr = { x: x - 2, y: y - 2, width: width === 2 ? 4 : width, height: height === 2 ? 4 : height };\n }\n else {\n attr = { cx: x, cy: y, 'r': 4, fill: '#ED1C24' };\n transattr = { cx: x, cy: y, 'r': 6, fill: 'transparent' };\n }\n setAttributeHtml(rect, attr);\n var transrect = document.getElementById(this.canvas.id + name);\n setAttributeHtml(transrect, transattr);\n };\n Overview.prototype.translateOverviewRectangle = function () {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var difx = this.currentPoint.x - this.prevPoint.x;\n var dify = this.currentPoint.y - this.prevPoint.y;\n //const viewPort: Rect;\n //let zoom: number = Math.min(this.parent.scroller.viewPortWidth / offwidth, this.parent.scroller.viewPortHeight / offheight);\n var svg = this.element.getElementsByClassName('overviewsvg')[0];\n var panel = svg.getElementById(this.canvas.id\n + 'overviewrect');\n var bounds = panel.getBBox();\n var x = bounds.x + difx;\n var y = bounds.y + dify;\n var width = bounds.width;\n var height = bounds.height;\n this.updateOverviewrect(x, y, width, height);\n this.updateParentView(this.parent.scroller.currentZoom, x, y, width, height, null);\n };\n Overview.prototype.renderOverviewRect = function (x, y, width, height) {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n //const viewPort: Rect;\n var viewwidth = (width / offwidth) * this.contentWidth;\n var viewheight = (height / offheight) * this.contentHeight;\n var zoom = Math.max(this.parent.scroller.viewPortWidth / viewwidth, this.parent.scroller.viewPortHeight / viewheight);\n if (zoom >= 0.25 && zoom <= 30) {\n var point = { x: 0, y: 0 };\n this.updateParentView(zoom, x, y, width, height, point);\n var bounds = this.scrollOverviewRect(this.parent.scroller.horizontalOffset, this.parent.scroller.verticalOffset, this.parent.scroller.currentZoom, true);\n if (this.helper) {\n var panel = this.element.getElementsByTagName('rect')[10];\n var svgRect = panel.getBBox();\n bounds.x = svgRect.x;\n bounds.y = svgRect.y;\n }\n //Bug 884239: Overview rectangle not updated properly while double-clicking the overview canvas.\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n this.actionName === 'pan' ? this.updateOverviewrect(-bounds.x, -bounds.y, bounds.width, bounds.height) :\n this.updateOverviewrect(bounds.x, bounds.y, bounds.width, bounds.height);\n }\n };\n Overview.prototype.scrollOverviewRect = function (hoffset, voffset, currentZoom, scaled) {\n if (!(this.actionName) || scaled) {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var scale = Math.min(this.contentWidth / offwidth, this.contentHeight / offheight);\n var bounds = new Rect();\n var x = bounds.x = (hoffset / currentZoom) / scale;\n var y = bounds.y = (voffset / currentZoom) / scale;\n //const viewPort: Rect;\n //Bug 863516: Overview is not synced with diagram content while zoom-out the diagram.\n //Added below code to consider ruler size and scrollbar size while calculating the width and height for the overview rectangle.\n var rulerSize = 0;\n if (this.parent.rulerSettings.showRulers) {\n rulerSize = 25;\n }\n var container = document.getElementById(this.parent.element.id + 'content');\n var wScrollBar = 0;\n var hScrollBar = 0;\n if (container) {\n wScrollBar = container.offsetWidth - container.clientWidth;\n hScrollBar = container.offsetHeight - container.clientHeight;\n }\n var width = bounds.width = ((this.parent.scroller.viewPortWidth - rulerSize - wScrollBar) / currentZoom) / scale;\n var height = bounds.height = ((this.parent.scroller.viewPortHeight - rulerSize - hScrollBar) / currentZoom) / scale;\n //const ratio: number = this.parent.scroller.viewPortWidth / this.parent.scroller.viewPortHeight;\n if (scaled) {\n var rect = new Rect();\n rect.x = x;\n rect.y = y;\n rect.width = width;\n rect.height = height;\n return rect;\n }\n this.updateOverviewrect(-x, -y, width, height);\n }\n return null;\n };\n Overview.prototype.updateParentView = function (zoom, x, y, width, height, focusPoint) {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var scalex = this.contentWidth / offwidth;\n var scaley = this.contentHeight / offheight;\n var hoffset = x * scalex * zoom;\n var voffset = y * scaley * zoom;\n var delx;\n var dely;\n var bounds = this.parent.scroller.getPageBounds();\n if (zoom !== 1 || this.actionName === 'pan') {\n delx = -hoffset - this.parent.scroller.horizontalOffset;\n dely = -voffset - this.parent.scroller.verticalOffset;\n }\n this.parent.setBlazorDiagramProps(true);\n this.parent.realActions |= RealAction.OverViewAction;\n var canOverview = true;\n if (this.actionName === 'scale' || this.actionName === 'draw') {\n this.parent.scroller.zoom(zoom / this.parent.scroller.currentZoom, delx, dely, focusPoint);\n }\n else {\n if (!isBlazor()) {\n this.parent.pan(delx, dely, focusPoint, canOverview);\n }\n else {\n this.parent.scroller.zoom(1, delx, dely, focusPoint);\n }\n }\n };\n Overview.prototype.updateHtmlLayer = function (view) {\n var htmlLayer = getHTMLLayer(view.element.id);\n var bounds = this.parent.scroller.getPageBounds(true);\n var width = bounds.width;\n var height = bounds.height;\n var w = Math.max(width, this.parent.scroller.viewPortWidth);\n var h = Math.max(height, this.parent.scroller.viewPortHeight / this.parent.scroller.currentZoom);\n var scale = Math.min(Number(this.model.width) / w, Number(this.model.height) / h);\n htmlLayer.style.transform = 'scale(' + scale + ') translate(' + this.parent.scroller.transform.tx + 'px,'\n + (this.parent.scroller.transform.ty) + 'px)';\n };\n /** @private */\n /**\n * updateView method\\\n *\n * @returns { void } removeDocument method .\\\n * @param {Overview} view - provide the angle value.\n * @private\n */\n Overview.prototype.updateView = function (view) {\n //let width: number; let height: number;\n var bounds = this.parent.scroller.getPageBounds();\n // Bug 851571: Overview with html node is not updated properly when we zoom-out the diagram.\n // Below transformWidth calculation is removed.\n var width = bounds.width;\n var height = bounds.height;\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n //let scale: number;\n var w = Math.max(width, this.parent.scroller.viewPortWidth);\n // Bug 851571: Overview with html node is not updated properly when we zoom-out the diagram.\n // Removed viewPortHeight/ currentZoom for height calculation.\n var h = Math.max(height, this.parent.scroller.viewPortHeight);\n this.contentWidth = w = Math.max(w, (offwidth / offheight) * h);\n this.contentHeight = h = Math.max(h, (offheight / offwidth) * w);\n var scale = Math.min(offwidth / w, offheight / h);\n var htmlLayer = document.getElementById(this.element.id + '_htmlLayer');\n htmlLayer.style.webkitTransform = 'scale(' + scale + ') translate(' + -bounds.x + 'px,' + (-bounds.y) + 'px)';\n htmlLayer.style.transform = 'scale(' + scale + ') translate(' + ((-(bounds.x))) + 'px,'\n + (((-bounds.y))) + 'px)';\n var ovw = document.getElementById(this.element.id + '_overviewlayer');\n ovw.setAttribute('transform', 'translate(' + (-bounds.x * scale) + ',' + (-bounds.y * scale) + ')');\n this.horizontalOffset = bounds.x * scale;\n this.verticalOffset = bounds.y * scale;\n var canvas = document.getElementById(this.element.id + '_diagramLayer');\n var nativeLayer = getNativeLayer(this.element.id);\n var context = canvas.getContext('2d');\n var widthratio = (Number(this.model.width) / this.contentWidth);\n var heightratio = (Number(this.model.height) / this.contentHeight);\n widthratio = Math.min(widthratio, heightratio);\n var transform = this.parent.scroller.transform;\n var tx = transform.tx;\n var ty = transform.ty;\n nativeLayer.setAttribute('transform', 'translate('\n + (tx * widthratio) + ',' + (ty * heightratio) + '),scale('\n + widthratio + ')');\n context.setTransform(widthratio, 0, 0, widthratio, 0, 0);\n context.fillStyle = 'red';\n this.scrollOverviewRect(this.parent.scroller.horizontalOffset, this.parent.scroller.verticalOffset, this.parent.scroller.currentZoom);\n };\n // region - Event Handlers\n Overview.prototype.scrolled = function (evt) {\n if (this.event) {\n var bounds = this.scrollOverviewRect(this.parent.scroller.horizontalOffset, this.parent.scroller.verticalOffset, this.parent.scroller.currentZoom, true);\n this.updateOverviewrect(-bounds.x, -bounds.y, bounds.width, bounds.height);\n // EJ2-67416 - Added below code to update the overview rect if the diagram and overview is scrolled.\n this.updateView(this);\n }\n };\n Overview.prototype.updateCursor = function (evt) {\n if (hasClass(evt.target, ('overviewresizer'))) {\n switch (evt.target.id) {\n case this.canvas.id + 'left':\n this.canvas.style.cursor = 'w-resize';\n break;\n case this.canvas.id + 'right':\n this.canvas.style.cursor = 'e-resize';\n break;\n case this.canvas.id + 'top':\n this.canvas.style.cursor = 'n-resize';\n break;\n case this.canvas.id + 'bottom':\n this.canvas.style.cursor = 's-resize';\n break;\n case this.canvas.id + 'topleft':\n this.canvas.style.cursor = 'nw-resize';\n break;\n case this.canvas.id + 'topright':\n this.canvas.style.cursor = 'ne-resize';\n break;\n case this.canvas.id + 'bottomleft':\n this.canvas.style.cursor = 'sw-resize';\n break;\n case this.canvas.id + 'bottomright':\n this.canvas.style.cursor = 'se-resize';\n break;\n }\n }\n else {\n this.canvas.style.cursor = 'default';\n }\n };\n Overview.prototype.mouseMove = function (evt) {\n this.event = false;\n this.updateCursor(evt);\n this.currentPoint = this.mousePosition(evt);\n if (this.actionName) {\n switch (this.actionName) {\n case 'draw':\n if (!this.inAction && (this.startPoint.x !== this.currentPoint.x || this.startPoint.y !== this.currentPoint.y)) {\n this.initHelper();\n this.inAction = true;\n }\n if (this.inAction) {\n this.updateHelper();\n }\n break;\n case 'scale':\n if (!this.inAction) {\n this.initHelper();\n this.inAction = true;\n }\n this.updateOverviewRectangle();\n break;\n case 'pan':\n if ((this.startPoint.x !== this.currentPoint.x || this.startPoint.y === this.currentPoint.y) || this.inAction) {\n this.inAction = true;\n this.translateOverviewRectangle();\n }\n break;\n }\n }\n this.prevPoint = this.currentPoint;\n };\n Overview.prototype.documentMouseUp = function (evt) {\n this.inAction = false;\n this.actionName = '';\n if (this.helper) {\n this.helper.parentNode.removeChild(this.helper);\n this.helper = null;\n }\n this.event = true;\n document.getElementById(this.canvas.id + 'overviewhandle').style.pointerEvents = 'all';\n };\n Overview.prototype.windowResize = function (evt) {\n var _this = this;\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.resizeTo = setTimeout(function () {\n var element = document.getElementById(_this.element.id);\n var bRect = element.getBoundingClientRect();\n _this.model.width = bRect.width > 0 ? bRect.width : _this.model.width;\n _this.model.height = bRect.height > 0 ? bRect.height : _this.model.height;\n _this.renderCanvas();\n _this.setParent(_this.sourceID);\n }, 10);\n return false;\n };\n /**\n * mouseDown method\\\n *\n * @returns { void } mouseDown method .\\\n * @param {PointerEvent | TouchEvent} evt - provide the angle value.\n * @private\n */\n Overview.prototype.mouseDown = function (evt) {\n if (evt.target.id === this.canvas.id + '_overviewsvg') {\n this.actionName = 'draw';\n }\n if (evt.target.id === this.canvas.id + 'overviewrect') {\n this.actionName = 'pan';\n }\n if (hasClass(evt.target, 'overviewresizer')) {\n this.actionName = 'scale';\n switch (evt.target.id) {\n case this.canvas.id + 'left':\n this.resizeDirection = 'left';\n break;\n case this.canvas.id + 'right':\n this.resizeDirection = 'right';\n break;\n case this.canvas.id + 'top':\n this.resizeDirection = 'top';\n break;\n case this.canvas.id + 'bottom':\n this.resizeDirection = 'bottom';\n break;\n case this.canvas.id + 'topleft':\n this.resizeDirection = 'topleft';\n break;\n case this.canvas.id + 'topright':\n this.resizeDirection = 'topright';\n break;\n case this.canvas.id + 'bottomleft':\n this.resizeDirection = 'bottomleft';\n break;\n case this.canvas.id + 'bottomright':\n this.resizeDirection = 'bottomright';\n break;\n }\n }\n this.startPoint = this.prevPoint = this.mousePosition(evt);\n this.viewPortRatio = this.parent.scroller.viewPortWidth / this.parent.scroller.viewPortHeight;\n var overViewHandle = document.getElementById(this.canvas.id + 'overviewhandle');\n overViewHandle.style.pointerEvents = 'none';\n };\n Overview.prototype.mouseUp = function (evt) {\n this.currentPoint = this.mousePosition(evt);\n //let offwidth: number = Number(this.model.width);\n //let offheight: number = Number(this.model.height);\n if (this.actionName) {\n if ((this.startPoint.x !== this.currentPoint.x || this.startPoint.y !== this.currentPoint.y)) {\n if (this.actionName === 'pan') ;\n else {\n if (this.helper) {\n var bounds = (this.element.getElementsByTagName('rect')[10]).getBBox();\n this.resizeDirection = this.resizeDirection || '';\n var x = bounds.x;\n var y = bounds.y;\n var width = bounds.width;\n var height = bounds.height;\n var adjust = this.resizeDirection === 'topleft' || this.resizeDirection === 'topright' ||\n this.resizeDirection === 'bottomleft' || this.resizeDirection === 'bottomright';\n this.renderOverviewRect(x, y, width, height);\n }\n }\n }\n else {\n if (evt.target.id === this.canvas.id + '_overviewsvg' || evt.target.id === 'helper') {\n var svg = this.element.getElementsByTagName('svg')[2];\n var g = svg.getElementById(this.canvas.id\n + 'overviewrect');\n var bounds = g.getBBox();\n var width = bounds.width;\n var height = bounds.height;\n this.inAction = true;\n this.actionName = 'pan';\n this.renderOverviewRect(this.currentPoint.x - width / 2, this.currentPoint.y - height / 2, width, height);\n this.inAction = false;\n }\n }\n }\n if (this.helper) {\n this.helper.parentNode.removeChild(this.helper);\n this.helper = null;\n }\n this.actionName = '';\n this.startPoint = null;\n this.currentPoint = null;\n this.prevPoint = null;\n this.helper = null;\n this.viewPortRatio = 1;\n this.resizeDirection = '';\n this.inAction = false;\n this.event = true;\n document.getElementById(this.canvas.id + 'overviewhandle').style.pointerEvents = 'all';\n };\n Overview.prototype.initHelper = function () {\n var g = this.element.getElementsByTagName('svg')[2];\n //const scale: number = this.parent.scroller.currentZoom;\n var x = this.startPoint.x;\n var y = this.startPoint.y;\n var width = 1;\n var height = 1;\n if (this.actionName === 'scale') {\n var rect = g.\n getElementById(this.canvas.id + 'overviewrect');\n var bounds = rect.getBBox();\n x = bounds.x;\n y = bounds.y;\n width = bounds.width;\n height = bounds.height;\n }\n var selectionRect = createSvgElement('rect', {\n 'id': 'helper', x: x, y: y, width: width, height: height,\n 'fill': 'transparent', 'stroke': 'gray', 'stroke-dasharray': '2 2', 'shape-rendering': 'crispEdges'\n });\n var overviewLayer = g.getElementById(this.element.id + '_overviewlayer');\n overviewLayer.appendChild(selectionRect);\n this.helper = selectionRect;\n };\n Overview.prototype.mousePosition = function (evt) {\n var touchArg;\n var offsetX;\n var offsetY;\n if (evt.type.indexOf('touch') !== -1) {\n touchArg = evt;\n var pageX = touchArg.changedTouches[0].clientX;\n var pageY = touchArg.changedTouches[0].clientY;\n offsetX = pageX - this.element.offsetLeft;\n offsetY = pageY - this.element.offsetTop;\n }\n else {\n offsetX = evt.clientX;\n offsetY = evt.clientY;\n }\n var boundingRect = this.element.getBoundingClientRect();\n offsetX = offsetX - boundingRect.left;\n offsetY = offsetY - boundingRect.top;\n return { x: offsetX + this.horizontalOffset, y: offsetY + this.verticalOffset };\n };\n // end region - Event handlers\n /**\n *To destroy the overview\n *\n * @returns {void} To destroy the overview\n */\n Overview.prototype.destroy = function () {\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n if (document.getElementById(this.element.id)) {\n this.element.classList.remove('e-overview');\n var content = document.getElementById(this.element.id + '_canvas');\n if (content) {\n this.element.removeChild(content);\n }\n }\n this.parent.views.splice(this.parent.views.indexOf(this.element.id), 1);\n this.diagramLayerDiv = null;\n this.canvas = null;\n this.parent = null;\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n Overview.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Overview';\n };\n __decorate$c([\n Property('100%')\n ], Overview.prototype, \"width\", void 0);\n __decorate$c([\n Property('100%')\n ], Overview.prototype, \"height\", void 0);\n __decorate$c([\n Property('')\n ], Overview.prototype, \"sourceID\", void 0);\n __decorate$c([\n Event()\n ], Overview.prototype, \"created\", void 0);\n return Overview;\n}(Component));\n\n/**\n * completeRegion method\\\n *\n * @returns { void } completeRegion method .\\\n * @param {Rect} region - provide the region value.\n * @param {(NodeModel | ConnectorModel)[]} selectedObjects - provide the selectedObjects value.\n * @private\n */\nfunction completeRegion(region, selectedObjects) {\n var collection = [];\n for (var i = 0; i < selectedObjects.length; i++) {\n var obj = selectedObjects[parseInt(i.toString(), 10)];\n if (region.containsRect(obj.wrapper.bounds)) {\n collection.push(obj);\n }\n }\n return collection;\n}\n/**\n * findNodeByName method \\\n *\n * @returns { boolean } findNodeByName method .\\\n * @param {(NodeModel | ConnectorModel)[]} nodes - provide the nodes value.\n * @param {string} name - provide the orientation value.\n * @private\n */\nfunction findNodeByName(nodes, name) {\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[parseInt(i.toString(), 10)].id === name) {\n return true;\n }\n }\n return false;\n}\n/**\n * findNodeByName method \\\n *\n * @returns { string } findNodeByName method .\\\n * @param {(NodeModel | ConnectorModel)[]} drawingObject - provide the drawingObject value.\n * @private\n */\nfunction findObjectType(drawingObject) {\n var type;\n if (drawingObject) {\n if (drawingObject.type) {\n type = 'Connector';\n }\n else if (drawingObject.shape && !drawingObject.type) {\n type = 'Node';\n }\n }\n return type;\n}\n/**\n * setSwimLaneDefaults method \\\n *\n * @returns { void } setSwimLaneDefaults method .\\\n * @param {NodeModel | ConnectorModel} child - provide the child value.\n * @param {NodeModel | ConnectorModel} node - provide the node value.\n * @private\n */\nfunction setSwimLaneDefaults(child, node) {\n if (node instanceof Node) {\n if (!child.shape.header) {\n node.shape.hasHeader = false;\n }\n }\n}\n/**\n * getSpaceValue method \\\n *\n * @returns { number } getSpaceValue method .\\\n * @param {number[]} intervals - provide the intervals value.\n * @param {boolean} isLine - provide the isLine value.\n * @param {number} i - provide the i value.\n * @param {number} space - provide the space value.\n * @private\n */\nfunction getSpaceValue(intervals, isLine, i, space) {\n space = !isLine ? ((intervals[i - 1] !== undefined) ? intervals[i - 1] + space : 0) : space;\n return space;\n}\n/**\n * getInterval method \\\n *\n * @returns { number[] } getInterval method .\\\n * @param {number[]} intervals - provide the intervals value.\n * @param {boolean} isLine - provide the isLine value.\n * @private\n */\nfunction getInterval(intervals, isLine) {\n var newInterval = [];\n if (!isLine) {\n for (var k = 0; k < intervals.length; k++) {\n newInterval.push(intervals[parseInt(k.toString(), 10)]);\n }\n newInterval.push(intervals[newInterval.length - 2]);\n newInterval.push(intervals[newInterval.length - 2]);\n }\n else {\n newInterval = intervals;\n }\n return newInterval;\n}\n/**\n * setPortsEdges method \\\n *\n * @returns { Node } setPortsEdges method .\\\n * @param {Node} node - provide the node value.\n * @private\n */\nfunction setPortsEdges(node) {\n for (var k = 0; k < node.ports.length; k++) {\n node.ports[parseInt(k.toString(), 10)].inEdges = [];\n node.ports[parseInt(k.toString(), 10)].outEdges = [];\n }\n return node;\n}\n/**\n * setUMLActivityDefaults method \\\n *\n * @returns { void } setUMLActivityDefaults method .\\\n * @param {NodeModel | ConnectorModel} child - provide the child value.\n * @param {NodeModel | ConnectorModel} node - provide the node value.\n * @private\n */\nfunction setUMLActivityDefaults(child, node) {\n if (node instanceof Node) {\n var shape = child.shape.shape;\n switch (shape) {\n case 'JoinNode':\n if (!child.width) {\n node.width = 20;\n }\n if (!child.height) {\n node.height = 90;\n }\n if (!child.style || !child.style.fill) {\n node.style.fill = 'black';\n }\n break;\n case 'ForkNode':\n if (!child.width) {\n node.width = 90;\n }\n if (!child.height) {\n node.height = 20;\n }\n if (!child.style || !child.style.fill) {\n node.style.fill = 'black';\n }\n break;\n case 'InitialNode':\n if (!child.style || !child.style.fill) {\n node.style.fill = 'black';\n }\n break;\n case 'FinalNode':\n if (!child.style || !child.style.fill) {\n node.style.fill = 'black';\n }\n break;\n }\n }\n else {\n var flow = child.shape.flow;\n switch (flow) {\n case 'Object':\n if (!child.style || !child.style.strokeDashArray) {\n node.style.strokeDashArray = '8 4';\n }\n if (!child.style || !child.style.strokeWidth) {\n node.style.strokeWidth = 2;\n }\n if (!child.targetDecorator || !child.targetDecorator.shape) {\n node.targetDecorator.shape = 'OpenArrow';\n }\n break;\n case 'Control':\n if (!child.style || !child.style.strokeWidth) {\n node.style.strokeWidth = 2;\n }\n if (!child.targetDecorator || !child.targetDecorator.shape) {\n node.targetDecorator.shape = 'OpenArrow';\n }\n if (!child.sourceDecorator || !child.sourceDecorator.shape) {\n node.sourceDecorator.shape = 'None';\n }\n break;\n }\n }\n}\n/* eslint-disable */\n/**\n * setConnectorDefaults method \\\n *\n * @returns { void } setConnectorDefaults method .\\\n * @param {ConnectorModel} child - provide the child value.\n * @param {ConnectorModel} node - provide the node value.\n * @private\n */\nfunction setConnectorDefaults(child, node) {\n switch ((child.shape).type) {\n case 'Bpmn':\n var bpmnFlow = child.shape.flow;\n switch (bpmnFlow) {\n case 'Sequence':\n if ((((child.shape.sequence) === 'Normal' && child.type !== 'Bezier')) ||\n ((child.shape.sequence) === 'Default') || ((child.shape.sequence) === 'Conditional')) {\n if (node.targetDecorator && node.targetDecorator.style) {\n node.targetDecorator.style.fill = (child.targetDecorator && child.targetDecorator.style\n && child.targetDecorator.style.fill) || 'black';\n }\n if ((child.shape.sequence) === 'Conditional' && node.sourceDecorator) {\n if (node.sourceDecorator.style) {\n node.sourceDecorator.style.fill = (child.sourceDecorator && child.sourceDecorator.style &&\n child.sourceDecorator.style.fill) || 'white';\n }\n node.sourceDecorator.width = (child.sourceDecorator && child.sourceDecorator.width) || 20;\n node.sourceDecorator.height = (child.sourceDecorator && child.sourceDecorator.width) || 10;\n }\n }\n break;\n case 'Association':\n if (((child.shape.association) === 'Default') ||\n ((child.shape.association) === 'Directional') ||\n ((child.shape.association) === 'BiDirectional')) {\n if (node.targetDecorator && node.targetDecorator.style) {\n node.targetDecorator.style.fill = (child.targetDecorator && child.targetDecorator.style &&\n child.targetDecorator.style.fill) || 'black';\n }\n if ((child.shape.association) === 'BiDirectional') {\n if (node.sourceDecorator && node.sourceDecorator.style) {\n node.sourceDecorator.style.fill = (child.sourceDecorator && child.sourceDecorator.style &&\n child.sourceDecorator.style.fill) || 'white';\n node.sourceDecorator.width = (child.sourceDecorator && child.sourceDecorator.width) || 5;\n node.sourceDecorator.height = (child.sourceDecorator && child.sourceDecorator.height) || 10;\n }\n }\n }\n break;\n case 'Message':\n if (node.style && !node.style.strokeDashArray) {\n node.style.strokeDashArray = (child.style && child.style.strokeDashArray) || '4 4';\n }\n break;\n }\n break;\n case 'UmlActivity':\n var flow = child.shape.flow;\n switch (flow) {\n case 'Exception':\n if (((child.shape.association) === 'Directional') ||\n ((child.shape.association) === 'BiDirectional')) {\n node.style.strokeDashArray = (child.style && child.style.strokeDashArray) || '2 2';\n }\n break;\n }\n break;\n case 'UmlClassifier':\n var hasRelation = false;\n if (child.shape.relationship === 'Association') {\n hasRelation = true;\n }\n else if (child.shape.relationship === 'Inheritance') {\n if (node.targetDecorator && node.targetDecorator.style) {\n node.targetDecorator.style.fill = (child.targetDecorator && child.targetDecorator.style &&\n child.targetDecorator.style.fill) || 'white';\n }\n if (node.style) {\n hasRelation = true;\n node.style.strokeDashArray = (child.style && child.style.strokeDashArray) || '4 4';\n }\n }\n else if (child.shape.relationship === 'Composition') {\n if (node.sourceDecorator && node.sourceDecorator.style) {\n node.sourceDecorator.style.fill = (child.sourceDecorator && child.sourceDecorator.style &&\n child.sourceDecorator.style.fill) || 'black';\n }\n hasRelation = true;\n }\n else if (child.shape.relationship === 'Aggregation' ||\n child.shape.relationship === undefined) {\n if (node.sourceDecorator && node.sourceDecorator.style) {\n node.sourceDecorator.style.fill = (child.sourceDecorator && child.sourceDecorator.style &&\n child.sourceDecorator.style.fill) || 'white';\n }\n hasRelation = true;\n }\n else if (child.shape.relationship === 'Dependency') {\n if (node.sourceDecorator && node.sourceDecorator.style) {\n node.sourceDecorator.style.fill = (child.sourceDecorator && child.sourceDecorator.style &&\n child.sourceDecorator.style.fill) || 'white';\n }\n hasRelation = true;\n node.style.strokeDashArray = '4 4';\n }\n else if (child.shape.relationship === 'Realization') {\n if (node.sourceDecorator && node.sourceDecorator.style) {\n node.sourceDecorator.style.fill = (child.sourceDecorator && child.sourceDecorator.style &&\n child.sourceDecorator.style.fill) || 'white';\n }\n hasRelation = true;\n }\n if (hasRelation) {\n node.style.strokeWidth = (child.style && child.style.strokeWidth) || 2;\n }\n break;\n }\n}\n/* eslint-enable */\n/**\n * findNearestPoint method \\\n *\n * @returns { PointModel } findNearestPoint method .\\\n * @param {PointModel} reference - provide the reference value.\n * @param {PointModel} start - provide the start value.\n * @param {PointModel} end - provide the end value.\n * @private\n */\nfunction findNearestPoint(reference, start, end) {\n var shortestPoint;\n var shortest = Point.findLength(start, reference);\n var shortest1 = Point.findLength(end, reference);\n if (shortest > shortest1) {\n shortestPoint = end;\n }\n else {\n shortestPoint = start;\n }\n var angleBWStAndEnd = Point.findAngle(start, end);\n var angleBWStAndRef = Point.findAngle(shortestPoint, reference);\n var r = Point.findLength(shortestPoint, reference);\n var vaAngle = angleBWStAndRef + ((angleBWStAndEnd - angleBWStAndRef) * 2);\n return {\n x: (shortestPoint.x + r * Math.cos(vaAngle * Math.PI / 180)),\n y: (shortestPoint.y + r * Math.sin(vaAngle * Math.PI / 180))\n };\n}\n/**\n * pointsForBezier method \\\n *\n * @returns { PointModel[] } pointsForBezier method .\\\n * @param {ConnectorModel} connector - provide the connector value.\n * @private\n */\nfunction pointsForBezier(connector) {\n var points = [];\n if (connector.type === 'Bezier') {\n var k = 0;\n for (var i = 0; i < connector.segments.length; i++) {\n var tolerance = 1.5;\n var segment = connector.segments[parseInt(i.toString(), 10)];\n //const pt: PointModel = { x: 0, y: 0 };\n var point1 = !Point.isEmptyPoint(segment.point1) ? segment.point1 : segment.bezierPoint1;\n var point2 = !Point.isEmptyPoint(segment.point2) ? segment.point2 : segment.bezierPoint2;\n var max = Number((connector.distance(point1, segment.points[0]) +\n connector.distance(point2, point1) +\n connector.distance(segment.points[1], point2)) / tolerance);\n for (var j = 0; j < max - 1; j = j + 10) {\n points[parseInt(k.toString(), 10)] =\n bezierPoints(connector, segment.points[0], !Point.isEmptyPoint(segment.point1) ? segment.point1 : segment.bezierPoint1, !Point.isEmptyPoint(segment.point2) ? segment.point2 : segment.bezierPoint2, segment.points[1], j, max);\n k++;\n }\n }\n }\n return points;\n}\n/**\n * isDiagramChild method \\\n *\n * @returns { boolean } isDiagramChild method .\\\n * @param {HTMLElement} htmlLayer - provide the htmlLayer value.\n * @private\n */\nfunction isDiagramChild(htmlLayer) {\n var element = htmlLayer.parentElement;\n do {\n if (hasClass(element, 'e-diagram')) {\n return true;\n }\n element = element.parentElement;\n } while (element);\n return false;\n}\n/**\n * groupHasType method \\\n *\n * @returns { boolean } groupHasType method .\\\n * @param {NodeModel} node - provide the node value.\n * @param {Shapes} type - provide the type value.\n * @param {{}} nameTable - provide the nameTable value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\nfunction groupHasType(node, type, nameTable) {\n var contains = false;\n if (node && node.children && node.children.length > 0) {\n var child = void 0;\n var i = 0;\n for (; i < node.children.length; i++) {\n child = nameTable[node.children[parseInt(i.toString(), 10)]];\n if (child.shape.type === type) {\n return true;\n }\n return groupHasType(child, type, nameTable);\n }\n }\n return contains;\n}\n/**\n * groupHasType method \\\n *\n * @returns { void } groupHasType method .\\\n * @param {NodeModel | ConnectorModel} actualNode - provide the actualNode value.\n * @param { NodeModel | ConnectorModel} plainValue - provide the plainValue value.\n * @param {object} defaultValue - provide the defaultValue value.\n * @param {NodeModel | ConnectorModel} property - provide the property value.\n * @param {string} oldKey - provide the oldKey value.\n * @private\n */\nfunction updateDefaultValues(actualNode, plainValue, \n// eslint-disable-next-line @typescript-eslint/ban-types\ndefaultValue, property, oldKey) {\n if (defaultValue && ((actualNode instanceof Connector) || actualNode\n && ((actualNode.shape && actualNode.shape.type !== 'SwimLane') || actualNode.shape === undefined))) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var keyObj = void 0;\n for (var _i = 0, _a = Object.keys(defaultValue); _i < _a.length; _i++) {\n var key = _a[_i];\n keyObj = defaultValue[\"\" + key];\n if (key === 'shape' && keyObj.type) {\n actualNode.shape = { type: keyObj.type };\n }\n if (keyObj) {\n if (Array.isArray(keyObj) && keyObj.length && keyObj.length > 0 && (oldKey !== 'annotations' && oldKey !== 'ports')) {\n if (actualNode[\"\" + key].length > 0) {\n for (var i = 0; i <= actualNode[\"\" + key].length; i++) {\n updateDefaultValues(actualNode[\"\" + key], plainValue ? plainValue[\"\" + key] : undefined, defaultValue[\"\" + key], (key === 'annotations' || key === 'ports') ? actualNode : undefined, key);\n }\n }\n else {\n updateDefaultValues(actualNode[\"\" + key], plainValue ? plainValue[\"\" + key] : undefined, defaultValue[\"\" + key], (key === 'annotations' || key === 'ports') ? actualNode : undefined, key);\n }\n }\n else if (keyObj instanceof Object && plainValue && (oldKey !== 'annotations' && oldKey !== 'ports')) {\n updateDefaultValues(actualNode[\"\" + key], plainValue[\"\" + key], defaultValue[\"\" + key]);\n }\n else if ((oldKey !== 'annotations' && oldKey !== 'ports')\n && (plainValue && !plainValue[\"\" + key]) || (!plainValue && actualNode\n && (actualNode[\"\" + key] || actualNode[\"\" + key] !== undefined))) {\n actualNode[\"\" + key] = defaultValue[\"\" + key];\n }\n else {\n var createObject = void 0;\n if (oldKey === 'annotations' || oldKey === 'ports') {\n if (oldKey === 'annotations') {\n if (actualNode[\"\" + key]) {\n updateDefaultValues(actualNode[\"\" + key], plainValue[\"\" + key], defaultValue[\"\" + key]);\n }\n if (!actualNode[\"\" + key]) {\n if (getObjectType(property) === Connector) {\n createObject = new PathAnnotation(property, 'annotations', defaultValue[\"\" + key]);\n property.annotations.push(createObject);\n }\n else {\n createObject = new ShapeAnnotation(property, 'annotations', defaultValue[\"\" + key]);\n property.annotations.push(createObject);\n }\n }\n }\n else {\n if (actualNode[\"\" + key]) {\n updateDefaultValues(actualNode[\"\" + key], plainValue[\"\" + key], defaultValue[\"\" + key]);\n }\n else {\n createObject = new PointPort(property, 'ports', defaultValue[\"\" + key]);\n property.ports.push(createObject);\n }\n }\n }\n }\n }\n }\n }\n}\n/* tslint:disable:no-string-literal */\n/**\n * updateLayoutValue method \\\n *\n * @returns { void } updateLayoutValue method .\\\n * @param {TreeInfo} actualNode - provide the actualNode value.\n * @param { object} defaultValue - provide the defaultValue value.\n * @param {INode[]} nodes - provide the nodes value.\n * @param {INode} node - provide the node value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\nfunction updateLayoutValue(actualNode, defaultValue, nodes, node) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var keyObj;\n var assistantKey = 'Role';\n if (defaultValue) {\n for (var _i = 0, _a = Object.keys(defaultValue); _i < _a.length; _i++) {\n var key = _a[_i];\n keyObj = defaultValue[\"\" + key];\n if (key === 'getAssistantDetails') {\n //Removed isBlazor code\n if (node.data[\"\" + assistantKey] === defaultValue[\"\" + key]['root']) {\n var assitants = defaultValue[\"\" + key]['assistants'];\n for (var i = 0; i < assitants.length; i++) {\n for (var j = 0; j < nodes.length; j++) {\n if (nodes[parseInt(j.toString(), 10)].data[\"\" + assistantKey] === assitants[parseInt(i.toString(), 10)]) {\n actualNode.assistants.push(nodes[parseInt(j.toString(), 10)].id);\n actualNode.children.splice(0, 1);\n }\n }\n }\n }\n }\n else if (keyObj) {\n actualNode[\"\" + key] = defaultValue[\"\" + key];\n }\n }\n }\n if (!actualNode.hasSubTree && defaultValue.canEnableSubTree) {\n actualNode.orientation = node.layoutInfo.orientation;\n actualNode.type = node.layoutInfo.type;\n if (node.layoutInfo.offset !== actualNode.offset && (node.layoutInfo.offset) !== undefined) {\n actualNode.offset = node.layoutInfo.offset;\n }\n }\n node.layoutInfo.hasSubTree = actualNode.hasSubTree;\n}\n/* tslint:enable:no-string-literal */\n/**\n * isPointOverConnector method \\\n *\n * @returns { boolean } isPointOverConnector method .\\\n * @param {ConnectorModel} connector - provide the connector value.\n * @param { PointModel} reference - provide the reference value.\n * @private\n */\nfunction isPointOverConnector(connector, reference) {\n //let intermediatePoints: PointModel[];\n var intermediatePoints = connector.type === 'Bezier' ? pointsForBezier(connector) :\n connector.intermediatePoints;\n for (var i = 0; i < intermediatePoints.length - 1; i++) {\n var start = intermediatePoints[parseInt(i.toString(), 10)];\n var end = intermediatePoints[i + 1];\n var rect = Rect.toBounds([start, end]);\n rect.Inflate(connector.hitPadding);\n if (rect.containsPoint(reference)) {\n var intersectinPt = findNearestPoint(reference, start, end);\n var segment1 = { x1: start.x, x2: end.x, y1: start.y, y2: end.y };\n var segment2 = { x1: reference.x, x2: intersectinPt.x, y1: reference.y, y2: intersectinPt.y };\n var intersectDetails = intersect3(segment1, segment2);\n if (intersectDetails.enabled) {\n var distance = Point.findLength(reference, intersectDetails.intersectPt);\n if (Math.abs(distance) < connector.hitPadding) {\n return true;\n }\n }\n else {\n var rect_1 = Rect.toBounds([reference, reference]);\n rect_1.Inflate(3);\n if (rect_1.containsPoint(start) || rect_1.containsPoint(end)) {\n return true;\n }\n }\n if (Point.equals(reference, intersectinPt)) {\n return true;\n }\n }\n }\n if (connector.annotations.length > 0 || connector.ports.length > 0) {\n var container = connector.wrapper.children;\n for (var i = 3; i < container.length; i++) {\n var textElement = container[parseInt(i.toString(), 10)];\n if (textElement.bounds.containsPoint(reference)) {\n return true;\n }\n }\n }\n return false;\n}\n/**\n * intersect3 method \\\n *\n * @returns { Intersection } intersect3 method .\\\n * @param {ConnectorModel} lineUtil1 - provide the lineUtil1 value.\n * @param { PointModel} lineUtil2 - provide the lineUtil2 value.\n * @private\n */\nfunction intersect3(lineUtil1, lineUtil2) {\n var point = { x: 0, y: 0 };\n var l1 = lineUtil1;\n var l2 = lineUtil2;\n var d = (l2.y2 - l2.y1) * (l1.x2 - l1.x1) - (l2.x2 - l2.x1) * (l1.y2 - l1.y1);\n var na = (l2.x2 - l2.x1) * (l1.y1 - l2.y1) - (l2.y2 - l2.y1) * (l1.x1 - l2.x1);\n var nb = (l1.x2 - l1.x1) * (l1.y1 - l2.y1) - (l1.y2 - l1.y1) * (l1.x1 - l2.x1);\n /*( EJ2-42102 - Connector segments not update properly ) by sivakumar sekar - condition added to avoid bridging for\n overlapping segments in the connectors and to validate whether the connector is intersecting over the other */\n if (d === 0 || ((lineUtil1.x1 === lineUtil2.x1 || lineUtil1.y1 === lineUtil2.y1) &&\n (lineUtil1.x2 === lineUtil2.x2 || lineUtil1.y2 === lineUtil2.y2) && ((na === 0 || nb === 0) && d > 0))) {\n return { enabled: false, intersectPt: point };\n }\n var ua = na / d;\n var ub = nb / d;\n if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {\n point.x = l1.x1 + (ua * (l1.x2 - l1.x1));\n point.y = l1.y1 + (ua * (l1.y2 - l1.y1));\n return { enabled: true, intersectPt: point };\n }\n return { enabled: false, intersectPt: point };\n}\n/**\n * intersect2 method \\\n *\n * @returns { PointModel } intersect2 method .\\\n * @param {PointModel} start1 - provide the start1 value.\n * @param { PointModel} end1 - provide the end1 value.\n * @param { PointModel} start2 - provide the start2 value.\n * @param { PointModel} end2 - provide the end2 value.\n * @private\n */\nfunction intersect2(start1, end1, start2, end2) {\n var point = { x: 0, y: 0 };\n var lineUtil1 = getLineSegment(start1.x, start1.y, end1.x, end1.y);\n var lineUtil2 = getLineSegment(start2.x, start2.y, end2.x, end2.y);\n var line3 = intersect3(lineUtil1, lineUtil2);\n if (line3.enabled) {\n return line3.intersectPt;\n }\n else {\n return point;\n }\n}\n/**\n * getLineSegment method \\\n *\n * @returns { Segment } getLineSegment method .\\\n * @param {number} x1 - provide the x1 value.\n * @param { number} y1 - provide the y1 value.\n * @param { number} x2 - provide the x2 value.\n * @param { number} y2 - provide the y2 value.\n * @private\n */\nfunction getLineSegment(x1, y1, x2, y2) {\n return { 'x1': Number(x1) || 0, 'y1': Number(y1) || 0, 'x2': Number(x2) || 0, 'y2': Number(y2) || 0 };\n}\n/**\n * getPoints method \\\n *\n * @returns { PointModel[] } getPoints method .\\\n * @param {number} element - provide the element value.\n * @param { number} corners - provide the corners value.\n * @param { number} padding - provide the padding value.\n * @private\n */\nfunction getPoints(element, corners, padding) {\n var line = [];\n padding = padding || 0;\n var left = { x: corners.topLeft.x - padding, y: corners.topLeft.y };\n var right = { x: corners.topRight.x + padding, y: corners.topRight.y };\n var top = { x: corners.bottomRight.x, y: corners.bottomRight.y - padding };\n var bottom = { x: corners.bottomLeft.x, y: corners.bottomLeft.y + padding };\n line.push(left);\n line.push(right);\n line.push(top);\n line.push(bottom);\n return line;\n}\n/**\n * getTooltipOffset method \\\n *\n * @returns { PointModel[] } getTooltipOffset method .\\\n * @param {number} diagram - provide the diagram value.\n * @param { number} mousePosition - provide the mousePosition value.\n * @param { NodeModel | ConnectorModel | PointPortModel} node - provide the node value.\n * @param { string} type - provide the type value.\n * @private\n */\nfunction getTooltipOffset(diagram, mousePosition, node, type) {\n //let offset: PointModel;\n var inheritTooltip = (node instanceof Node) ? (node.constraints & NodeConstraints.InheritTooltip)\n : (node instanceof Connector) ? (node.constraints & ConnectorConstraints.InheritTooltip)\n : (node.constraints & PortConstraints.InheritTooltip);\n var objectTooltip = (node instanceof Node) ? (node.constraints & NodeConstraints.Tooltip)\n : (node instanceof Connector) ? (node.constraints & ConnectorConstraints.Tooltip)\n : (node.constraints & PortConstraints.ToolTip);\n var isMouseBased = ((!inheritTooltip && objectTooltip ? node.tooltip.relativeMode\n : diagram.tooltip.relativeMode) === 'Mouse') ? true : false;\n if (type === 'Mouse') {\n isMouseBased = true;\n }\n else if (type === 'Object') {\n isMouseBased = false;\n }\n var offset = tooltipOffset(node, mousePosition, diagram, isMouseBased);\n var rulerSize = getRulerSize(diagram);\n return { x: offset.x + rulerSize.width, y: offset.y + rulerSize.height };\n}\n/**\n * tooltipOffset method \\\n *\n * @returns { PointModel } tooltipOffset method .\\\n * @param {NodeModel | ConnectorModel | PointPortModel} node - provide the node value.\n * @param { PointModel} mousePosition - provide the mousePosition value.\n * @param { Diagram } diagram - provide the diagram value.\n * @param { boolean} isMouseBased - provide the isMouseBased value.\n * @private\n */\nfunction tooltipOffset(node, mousePosition, diagram, isMouseBased) {\n var point = {};\n //let scale: number = diagram.scroller.transform.scale;\n var element = document.getElementById(diagram.element.id);\n var bounds;\n //EJ2-62120-Tooltip support for ports\n if (node instanceof Node || node instanceof Connector) {\n bounds = node.wrapper.bounds;\n }\n else {\n var objects = diagram.findObjectsUnderMouse(mousePosition);\n var obj = diagram.findObjectUnderMouse(objects, 'Select', false);\n var portElement = diagram.findElementUnderMouse(obj, mousePosition, diagram);\n bounds = portElement.bounds;\n }\n var rect = element.getBoundingClientRect();\n /* eslint-enable */\n //let horizontalOffset: number = diagram.scroller.horizontalOffset;\n //let verticalOffset: number = diagram.scroller.verticalOffset;\n switch (diagram.tooltipObject.position) {\n case 'BottomCenter':\n point = offsetPoint(mousePosition, bounds.bottomCenter, diagram, isMouseBased, (rect.width / 2), rect.height);\n break;\n case 'BottomLeft':\n case 'LeftBottom':\n point = offsetPoint(mousePosition, bounds.bottomLeft, diagram, isMouseBased, 0, rect.height);\n break;\n case 'BottomRight':\n case 'RightBottom':\n point = offsetPoint(mousePosition, bounds.bottomRight, diagram, isMouseBased, rect.width, rect.height);\n break;\n case 'LeftCenter':\n point = offsetPoint(mousePosition, bounds.middleLeft, diagram, isMouseBased, 0, (rect.height / 2));\n break;\n case 'LeftTop':\n case 'TopLeft':\n point = offsetPoint(mousePosition, bounds.topLeft, diagram, isMouseBased, 0, 0);\n break;\n case 'RightCenter':\n point = offsetPoint(mousePosition, bounds.middleRight, diagram, isMouseBased, rect.width, (rect.height / 2));\n break;\n case 'RightTop':\n case 'TopRight':\n point = offsetPoint(mousePosition, bounds.topRight, diagram, isMouseBased, rect.width, 0);\n break;\n case 'TopCenter':\n point = offsetPoint(mousePosition, bounds.topCenter, diagram, isMouseBased, (rect.width / 2), 0);\n break;\n }\n return point;\n}\n/**\n * offsetPoint method \\\n *\n * @returns { PointModel } offsetPoint method .\\\n * @param { PointModel} mousePosition - provide the mousePosition value.\n * @param { PointModel } bound - provide the diagram value.\n * @param { Diagram} diagram - provide the isMouseBased value.\n * @param { boolean} isMouseBased - provide the isMouseBased value.\n * @param { number} x - provide the isMouseBased value.\n * @param { number} y - provide the isMouseBased value.\n * @private\n */\nfunction offsetPoint(mousePosition, bound, diagram, isMouseBased, x, y) {\n var point = {};\n var scale = diagram.scroller.transform.scale;\n var horizontalOffset = diagram.scroller.horizontalOffset;\n var verticalOffset = diagram.scroller.verticalOffset;\n point.x = (isMouseBased ? mousePosition.x : bound.x) * scale + horizontalOffset - x;\n point.y = (isMouseBased ? mousePosition.y : bound.y) * scale + verticalOffset - y;\n return point;\n}\n/**\n * Gets the fixed user handles symbol \\\n *\n * @returns { DiagramElement } Gets the fixed user handles symbol .\\\n * @param {ConnectorFixedUserHandleModel | NodeFixedUserHandleModel} options - provide the options value.\n * @param { Canvas} fixedUserHandleContainer - provide the fixedUserHandleContainer value.\n * @private\n */\nfunction initFixedUserHandlesSymbol(options, fixedUserHandleContainer) {\n //let fixedUserHandleContent: PathElement | DiagramNativeElement;\n var fixedUserHandleContent = new PathElement();\n fixedUserHandleContent.data = options.pathData;\n fixedUserHandleContent.height =\n options.height > 10 ? options.height - (options.padding.bottom + options.padding.top) : options.height;\n fixedUserHandleContent.width =\n options.width > 10 ? options.width - (options.padding.left + options.padding.right) : options.width;\n //Bug 912616: Not able to hide the fixedUserHandle in diagram\n fixedUserHandleContent.visible = options.visibility;\n fixedUserHandleContent.id = fixedUserHandleContainer.id + '_shape';\n fixedUserHandleContent.inversedAlignment = false;\n fixedUserHandleContent.horizontalAlignment = 'Center';\n fixedUserHandleContent.verticalAlignment = 'Center';\n fixedUserHandleContent.style = {\n fill: options.iconStrokeColor, strokeColor: options.iconStrokeColor,\n strokeWidth: options.iconStrokeWidth\n };\n fixedUserHandleContent.setOffsetWithRespectToBounds(0.5, 0.5, 'Fraction');\n fixedUserHandleContent.relativeMode = 'Object';\n fixedUserHandleContent.description = fixedUserHandleContainer.description || '';\n return fixedUserHandleContent;\n}\n/**\n * sort method \\\n *\n * @returns { (NodeModel | ConnectorModel)[] } sort method .\\\n * @param {(NodeModel | ConnectorModel)[]} objects - provide the options value.\n * @param { DistributeOptions} option - provide the fixedUserHandleContainer value.\n * @private\n */\nfunction sort(objects, option) {\n var i = 0;\n var j = 0;\n var temp;\n for (i = 0; i < objects.length; i++) {\n var b = getBounds(objects[parseInt(i.toString(), 10)].wrapper);\n for (j = i + 1; j < objects.length; j++) {\n var bounds = getBounds(objects[parseInt(j.toString(), 10)].wrapper);\n if (option === 'Top' || option === 'Bottom' || option === 'BottomToTop' || option === 'Middle') {\n if (b.center.y > bounds.center.y) {\n temp = objects[parseInt(i.toString(), 10)];\n objects[parseInt(i.toString(), 10)] = objects[parseInt(j.toString(), 10)];\n objects[parseInt(j.toString(), 10)] = temp;\n }\n }\n else {\n if (b.center.x > bounds.center.x) {\n temp = objects[parseInt(i.toString(), 10)];\n objects[parseInt(i.toString(), 10)] = objects[parseInt(j.toString(), 10)];\n objects[parseInt(j.toString(), 10)] = temp;\n }\n }\n }\n }\n return objects;\n}\n/**\n * getAnnotationPosition method \\\n *\n * @returns {SegmentInfo } getAnnotationPosition method .\\\n * @param {PointModel[]} pts - provide the pts value.\n * @param { PathAnnotation | ConnectorFixedUserHandle} annotation - provide the annotation value.\n * @param { Rect } bound - provide the bound value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction getAnnotationPosition(pts, annotation, bound) {\n //let angle: number;\n //let getloop: SegmentInfo;\n //let point: PointModel;\n var getloop = getOffsetOfConnector(pts, annotation);\n var angle = Point.findAngle(pts[getloop.index], pts[getloop.index + 1]);\n var alignednumber = getAlignedPosition(annotation);\n var point = Point.transform(getloop.point, angle + 45, alignednumber);\n getloop.point = point;\n getloop.angle = angle;\n return getloop;\n}\n/**\n * getPortsPosition method \\\n *\n * @returns {SegmentInfo } getPortsPosition method .\\\n * @param {PointModel[]} pts - provide the pts value.\n * @param { Port} ports - provide the ports value.\n * @param { Rect } bound - provide the bound value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction getPortsPosition(pts, ports, bound) {\n var getloop = getOffsetOfPorts(pts, ports);\n var angle = Point.findAngle(pts[getloop.index], pts[getloop.index + 1]);\n var alignednumber = getAlignedPositionForPorts(ports);\n var point = Point.transform(getloop.point, angle + 45, alignednumber);\n getloop.point = point;\n getloop.angle = angle;\n return getloop;\n}\n/**\n * getOffsetOfPorts method \\\n *\n * @returns {SegmentInfo } getOffsetOfPorts method .\\\n * @param {PointModel[]} points - provide the pts value.\n * @param { PathAnnotation | ConnectorFixedUserHandle} ports - provide the ports value.\n * @private\n */\nfunction getOffsetOfPorts(points, ports) {\n // eslint-disable-next-line\n var distance = 0;\n var offset = ports.offset;\n var point;\n var angle;\n var pointDistance = [];\n var prevLength;\n var kCount;\n for (var j = 0; j < points.length - 1; j++) {\n distance += Point.distancePoints(points[parseInt(j.toString(), 10)], points[j + 1]);\n pointDistance.push(distance);\n }\n var offsetLength = offset * distance;\n for (var k = 0; k < pointDistance.length; k++) {\n if (pointDistance[parseInt(k.toString(), 10)] >= offsetLength) {\n angle = Point.findAngle(points[parseInt(k.toString(), 10)], points[k + 1]);\n point = Point.transform(points[parseInt(k.toString(), 10)], angle, offsetLength - (prevLength || 0));\n kCount = k;\n return { point: point, index: kCount };\n }\n prevLength = pointDistance[parseInt(k.toString(), 10)];\n }\n return { point: point, index: kCount };\n}\n/**\n * getAlignedPosition method . To get the port alignment position \\\n *\n * @returns {number } getAlignedPosition method .\\\n * @param {PointModel[]} ports - provide the annotation value.\n * @private\n */\nfunction getAlignedPositionForPorts(ports) {\n var constant = 0;\n var state = 0;\n switch (ports.alignment) {\n case 'Center':\n state = 0;\n break;\n case 'Before':\n state = -((0) / 2 + constant);\n break;\n case 'After':\n state = ((0) / 2 + constant);\n break;\n }\n return state;\n}\n/**\n * getOffsetOfConnector method \\\n *\n * @returns {SegmentInfo } getOffsetOfConnector method .\\\n * @param {PointModel[]} points - provide the pts value.\n * @param { PathAnnotation | ConnectorFixedUserHandle} annotation - provide the annotation value.\n * @private\n */\nfunction getOffsetOfConnector(points, annotation) {\n // eslint-disable-next-line\n var length = 0;\n var offset = annotation.offset;\n var point;\n var angle;\n var lengths = [];\n var prevLength;\n var kCount;\n for (var j = 0; j < points.length - 1; j++) {\n length += Point.distancePoints(points[parseInt(j.toString(), 10)], points[j + 1]);\n lengths.push(length);\n }\n var offsetLength = offset * length;\n for (var k = 0; k < lengths.length; k++) {\n if (lengths[parseInt(k.toString(), 10)] >= offsetLength) {\n angle = Point.findAngle(points[parseInt(k.toString(), 10)], points[k + 1]);\n point = Point.transform(points[parseInt(k.toString(), 10)], angle, offsetLength - (prevLength || 0));\n kCount = k;\n return { point: point, index: kCount };\n }\n prevLength = lengths[parseInt(k.toString(), 10)];\n }\n return { point: point, index: kCount };\n}\n/**\n * getAlignedPosition method \\\n *\n * @returns {number } getAlignedPosition method .\\\n * @param {PointModel[]} annotation - provide the annotation value.\n * @private\n */\nfunction getAlignedPosition(annotation) {\n var cnst;\n if ((annotation instanceof ConnectorFixedUserHandle)) {\n cnst = 0;\n }\n else {\n cnst = annotation.content === undefined ? 10 : 0;\n }\n var state = 0;\n switch (annotation.alignment) {\n case 'Center':\n state = 0;\n break;\n case 'Before':\n state = -((0) / 2 + cnst);\n break;\n case 'After':\n state = ((0) / 2 + cnst);\n break;\n }\n return state;\n}\n/**\n * alignLabelOnSegments method \\\n *\n * @returns {Alignment } alignLabelOnSegments method .\\\n * @param {PathAnnotation | ConnectorFixedUserHandle} obj - provide the obj value.\n * @param { number } ang - provide the ang value.\n * @param { PointModel[] } pts - provide the pts value.\n * @private\n */\nfunction alignLabelOnSegments(obj, ang, pts) {\n //let angle: number = ang % 360;\n ang %= 360;\n var fourty5 = 45;\n var one35 = 135;\n var two25 = 225;\n var three15 = 315;\n var vAlign;\n var hAlign;\n switch (obj.alignment) {\n case 'Before':\n if (ang >= fourty5 && ang <= one35) {\n hAlign = 'right';\n vAlign = obj.offset === 0.5 ? 'center' : 'top';\n }\n else if (ang >= two25 && ang <= three15) {\n hAlign = 'left';\n vAlign = obj.offset === 0.5 ? 'center' : 'bottom';\n }\n else if (ang > fourty5 && ang < two25) {\n vAlign = 'top';\n hAlign = obj.offset === 0.5 ? 'center' : 'right';\n }\n else {\n vAlign = 'bottom';\n hAlign = (obj.offset === 0.5) ? 'center' : 'left';\n }\n break;\n case 'After':\n if (ang >= fourty5 && ang <= one35) {\n hAlign = 'left';\n vAlign = obj.offset === 0.5 ? 'center' : 'top';\n }\n else if (ang >= two25 && ang <= three15) {\n hAlign = 'right';\n vAlign = obj.offset === 0.5 ? 'center' : 'bottom';\n }\n else if (ang > fourty5 && ang < two25) {\n vAlign = 'bottom';\n hAlign = obj.offset === 0.5 ? 'center' : 'right';\n }\n else {\n vAlign = 'top';\n hAlign = obj.offset === 0.5 ? 'center' : 'left';\n }\n break;\n case 'Center':\n hAlign = !isNullOrUndefined(obj.horizontalAlignment) ? obj.horizontalAlignment.toLowerCase() : 'center';\n vAlign = !isNullOrUndefined(obj.verticalAlignment) ? obj.verticalAlignment.toLowerCase() : 'center';\n break;\n }\n if (obj.offset === 0 || obj.offset === 1) {\n //let direction: string;\n var direction = getBezierDirection(pts[0], pts[1]);\n switch (direction) {\n case 'left':\n hAlign = obj.offset === 0 ? 'right' : 'left';\n break;\n case 'right':\n hAlign = obj.offset === 0 ? 'left' : 'right';\n break;\n case 'bottom':\n vAlign = obj.offset === 0 ? 'top' : 'bottom';\n break;\n case 'top':\n vAlign = obj.offset === 0 ? 'bottom' : 'top';\n break;\n }\n }\n return { hAlign: hAlign, vAlign: vAlign };\n}\n/**\n * getBezierDirection method \\\n *\n * @returns {string } getBezierDirection method .\\\n * @param {PointModel} src - provide the src value.\n * @param { PointModel } tar - provide the tar value.\n * @private\n */\nfunction getBezierDirection(src, tar) {\n if (Math.abs(tar.x - src.x) > Math.abs(tar.y - src.y)) {\n return src.x < tar.x ? 'right' : 'left';\n }\n else {\n return src.y < tar.y ? 'bottom' : 'top';\n }\n}\n/**\n * removeChildNodes method \\\n *\n * @returns {void } removeChildNodes method .\\\n * @param {NodeModel} node - provide the node value.\n * @param { Diagram } diagram - provide the diagram value.\n * @private\n */\nfunction removeChildNodes(node, diagram) {\n if (node instanceof Node && node.children) {\n for (var i = 0; i < node.children.length; i++) {\n if (diagram.nameTable[node.children[parseInt(i.toString(), 10)]].children) {\n removeChildNodes(node, diagram);\n }\n diagram.removeFromAQuad(diagram.nameTable[node.children[parseInt(i.toString(), 10)]]);\n diagram.removeObjectsFromLayer(diagram.nameTable[node.children[parseInt(i.toString(), 10)]]);\n delete diagram.nameTable[node.children[parseInt(i.toString(), 10)]];\n }\n }\n}\n/**\n * getChild method \\\n *\n * @returns {string[] } getChild method .\\\n * @param {Canvas} child - provide the child value.\n * @param { string[] } children - provide the children value.\n * @private\n */\nfunction getChild(child, children) {\n if (child && child.children && child.children.length > 0) {\n for (var j = 0; j < child.children.length; j++) {\n var subChild = child.children[parseInt(j.toString(), 10)];\n if (subChild instanceof Canvas) {\n getChild(subChild, children);\n }\n }\n }\n if (children.indexOf(child.id) === -1) {\n children.push(child.id);\n }\n return children;\n}\n/**\n * getSwimLaneChildren method \\\n *\n * @returns {string[] } getSwimLaneChildren method .\\\n * @param {NodeModel[]} nodes - provide the nodes value.\n * @private\n */\nfunction getSwimLaneChildren(nodes) {\n var children = [];\n var node;\n var grid;\n var childTable;\n var child;\n var gridChild = 'childTable';\n for (var i = 0; i < nodes.length; i++) {\n node = nodes[parseInt(i.toString(), 10)];\n if (node.shape.type === 'SwimLane') {\n grid = node.wrapper.children[0];\n childTable = grid[\"\" + gridChild];\n for (var _i = 0, _a = Object.keys(childTable); _i < _a.length; _i++) {\n var key = _a[_i];\n child = childTable[\"\" + key];\n children = getChild(child, children);\n }\n }\n }\n return children;\n}\n/**\n * removeUnnecessaryNodes method \\\n *\n * @returns {void } removeUnnecessaryNodes method .\\\n * @param {string[]} children - provide the children value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction removeUnnecessaryNodes(children, diagram) {\n var nodes = diagram.nodes;\n if (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n if (children.indexOf(nodes[parseInt(i.toString(), 10)].id) !== -1) {\n nodes.splice(i, 1);\n i--;\n }\n }\n }\n}\n/**\n * serialize method \\\n *\n * @returns {string } serialize method .\\\n * @param {Diagram} model - provide the model value.\n * @private\n */\nfunction serialize(model) {\n var removeNodes = getSwimLaneChildren(model.nodes);\n var clonedObject = cloneObject(model, model.getCustomProperty);\n clonedObject.selectedItems.nodes = [];\n clonedObject.selectedItems.connectors = [];\n clonedObject.selectedItems.wrapper = null;\n if (model.serializationSettings.preventDefaults) {\n clonedObject = preventDefaults(clonedObject, model);\n }\n removeUnnecessaryNodes(removeNodes, clonedObject);\n return JSON.stringify(clonedObject);\n}\n/**\n * preventDefaults method \\\n *\n * @returns {string } preventDefaults method .\\\n * @param {Object} clonedObject - provide the clonedObject value.\n * @param {object} model - provide the model value.\n * @param {object} defaultObject - provide the defaultObject value.\n * @param {boolean} isNodeShape - provide the isNodeShape value.\n * @private\n */\n// eslint-disable-next-line\nfunction preventDefaults(clonedObject, model, defaultObject, isNodeShape) {\n defaultObject = getConstructor(model, defaultObject);\n var properties = [];\n properties = properties.concat(Object.keys(clonedObject));\n for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {\n var property = properties_1[_i];\n if (model instanceof Node) {\n isNodeShape = (property === 'shape') ? true : false;\n }\n if (clonedObject[\"\" + property] instanceof Array) {\n preventArrayDefaults(clonedObject, defaultObject, model, property);\n }\n else if ((clonedObject[\"\" + property] instanceof Object) && defaultObject && defaultObject[\"\" + property]) {\n if (property !== 'wrapper') {\n clonedObject[\"\" + property] = preventDefaults(clonedObject[\"\" + property], model[\"\" + property], defaultObject[\"\" + property], isNodeShape);\n }\n }\n else if ((defaultObject && clonedObject[\"\" + property] === defaultObject[\"\" + property]) || clonedObject[\"\" + property] === undefined) {\n if (!(isNodeShape && property === 'type') && !(model instanceof SwimLane && property === 'orientation')) {\n delete clonedObject[\"\" + property];\n }\n }\n if (JSON.stringify(clonedObject[\"\" + property]) === '[]' ||\n JSON.stringify(clonedObject[\"\" + property]) === '{}' ||\n clonedObject[\"\" + property] === undefined) {\n delete clonedObject[\"\" + property];\n }\n }\n defaultObject = undefined;\n properties = undefined;\n return clonedObject;\n}\n/**\n * preventArrayDefaults method \\\n *\n * @returns {void } preventArrayDefaults method .\\\n * @param {object} clonedObject - provide the clonedObject value.\n * @param {object} defaultObject - provide the defaultObject value.\n * @param {object} model - provide the model value.\n * @param {string} property - provide the property value.\n * @private\n */\n// eslint-disable-next-line\nfunction preventArrayDefaults(clonedObject, defaultObject, model, property) {\n if (clonedObject[\"\" + property].length === 0) {\n delete clonedObject[\"\" + property];\n // eslint-disable-next-line\n }\n else if (clonedObject[property].every(function (element) { return typeof element === 'number'; })) {\n var i = void 0;\n var isSameArray = true;\n for (i = 0; i < clonedObject[\"\" + property].length; i++) {\n if (isSameArray && clonedObject[\"\" + property][parseInt(i.toString(), 10)] === defaultObject[\"\" + property][parseInt(i.toString(), 10)]) {\n isSameArray = true;\n }\n else {\n isSameArray = false;\n }\n }\n if (isSameArray) {\n delete clonedObject[\"\" + property];\n }\n }\n else {\n var i = void 0;\n // Bug 826717: Unable to select swimlane child nodes after serializing the diagram when we enable preventDefault property.\n // Removed the codition to delete the layers from clonedObject.\n if (clonedObject[\"\" + property] && property !== 'layers') {\n for (i = clonedObject[\"\" + property].length - 1; i >= 0; i--) {\n if (property === 'nodes' || property === 'connectors') {\n clonedObject[\"\" + property][parseInt(i.toString(), 10)].wrapper = null;\n }\n if (property !== 'dataManager') {\n clonedObject[\"\" + property][parseInt(i.toString(), 10)] = preventDefaults(clonedObject[\"\" + property][parseInt(i.toString(), 10)], model[\"\" + property][parseInt(i.toString(), 10)], (defaultObject[\"\" + property] !== undefined ? defaultObject[\"\" + property][parseInt(i.toString(), 10)] : []));\n if (JSON.stringify(clonedObject[\"\" + property][parseInt(i.toString(), 10)]) === '[]' ||\n JSON.stringify(clonedObject[\"\" + property][parseInt(i.toString(), 10)]) === '{}' ||\n clonedObject[\"\" + property][parseInt(i.toString(), 10)] === undefined) {\n clonedObject[\"\" + property].splice(i, 1);\n }\n }\n }\n }\n }\n clonedObject = undefined;\n}\n/* eslint-disable */\n/**\n * getConstructor method \\\n *\n * @returns {object } getConstructor method .\\\n * @param {object} model - provide the model value.\n * @param {object} defaultObject - provide the defaultObject value.\n * @private\n */\n/* tslint:disable */\nfunction getConstructor(model, defaultObject) {\n var obj = [];\n var constructor;\n var getClassName = 'getClassName';\n if (model[getClassName]) {\n //EJ2-59327 - Memory leak occurs in saveDiagram method \n var parent_1 = new Diagram();\n switch (model[getClassName]()) {\n case 'Diagram':\n constructor = parent_1;\n break;\n case 'Node':\n constructor = new Node(parent_1, '', obj);\n break;\n case 'Path':\n constructor = new Path(parent_1, '', obj);\n break;\n case 'Native':\n constructor = new Native(parent_1, '', obj);\n break;\n case 'Html':\n constructor = new Html(parent_1, '', obj);\n break;\n case 'Image':\n constructor = new Image$1(parent_1, '', obj);\n break;\n case 'Text':\n constructor = new Text(parent_1, '', obj);\n break;\n case 'BasicShape':\n constructor = new BasicShape(parent_1, '', obj);\n break;\n case 'FlowShape':\n constructor = new FlowShape(parent_1, '', obj);\n break;\n case 'BpmnShape':\n constructor = new BpmnShape(parent_1, '', obj);\n break;\n case 'UmlActivityShape':\n constructor = new UmlActivityShape(parent_1, '', obj);\n break;\n case 'UmlClassifierShape':\n constructor = new UmlClassifierShape(parent_1, '', obj);\n break;\n case 'SwimLane':\n constructor = new SwimLane(parent_1, '', obj);\n if (model.header) {\n constructor.header = new Header(parent_1, '', obj);\n constructor.header.style.fill = '';\n }\n break;\n case 'ShapeAnnotation':\n constructor = new ShapeAnnotation(parent_1, '', obj);\n break;\n case 'PointPort':\n constructor = new PointPort(parent_1, '', obj);\n break;\n case 'BpmnGateway':\n constructor = new BpmnGateway(parent_1, '', obj);\n break;\n case 'BpmnDataObject':\n constructor = new BpmnDataObject(parent_1, '', obj);\n break;\n case 'BpmnEvent':\n constructor = new BpmnEvent(parent_1, '', obj);\n break;\n case 'BpmnSubEvent':\n constructor = new BpmnSubEvent(parent_1, '', obj);\n break;\n case 'BpmnActivity':\n constructor = new BpmnActivity(parent_1, '', obj);\n break;\n case 'BpmnAnnotation':\n constructor = new BpmnAnnotation(parent_1, '', obj);\n break;\n case 'MethodArguments':\n constructor = new MethodArguments(parent_1, '', obj);\n break;\n case 'UmlClassAttribute':\n constructor = new UmlClassAttribute(parent_1, '', obj);\n break;\n case 'UmlClassMethod':\n constructor = new UmlClassMethod(parent_1, '', obj);\n break;\n case 'UmlClass':\n constructor = new UmlClass(parent_1, '', obj);\n break;\n case 'UmlInterface':\n constructor = new UmlInterface(parent_1, '', obj);\n break;\n case 'UmlEnumerationMember':\n constructor = new UmlEnumerationMember(parent_1, '', obj);\n break;\n case 'UmlEnumeration':\n constructor = new UmlEnumeration(parent_1, '', obj);\n break;\n case 'Lane':\n constructor = new Lane(parent_1, '', obj);\n break;\n case 'Phase':\n constructor = new Phase(parent_1, '', obj);\n break;\n case 'ChildContainer':\n constructor = new ChildContainer();\n break;\n case 'Connector':\n constructor = new Connector(parent_1, '', obj);\n break;\n case 'StraightSegment':\n constructor = new StraightSegment(parent_1, '', obj);\n break;\n case 'BezierSegment':\n constructor = new BezierSegment(parent_1, '', obj);\n break;\n case 'OrthogonalSegment':\n constructor = new OrthogonalSegment(parent_1, '', obj);\n break;\n case 'PathAnnotation':\n constructor = new PathAnnotation(parent_1, '', obj);\n break;\n case 'Stop':\n constructor = new Stop(parent_1, '', obj);\n break;\n case 'Point':\n if (!defaultObject) {\n constructor = new Point(parent_1, '', obj);\n }\n else {\n constructor = defaultObject;\n }\n break;\n case 'UserHandle':\n constructor = new UserHandle(parent_1, '', obj);\n break;\n case 'Command':\n constructor = new Command(parent_1, '', obj);\n break;\n }\n }\n else {\n constructor = defaultObject;\n }\n parent = undefined;\n defaultObject = undefined;\n return constructor;\n}\n/* eslint-enable */\n/* eslint-disable */\n/** @private */\nfunction deserialize(model, diagram) {\n diagram.enableServerDataBinding(false);\n var blazorAction = diagram.blazorActions;\n diagram.blazorActions = diagram.addConstraints(blazorAction, BlazorAction.ClearObject);\n diagram.clear();\n diagram.blazorActions = diagram.removeConstraints(blazorAction, BlazorAction.ClearObject);\n diagram.protectPropertyChange(true);\n var map = diagram.dataSourceSettings.doBinding;\n var nodeTemp = diagram.setNodeTemplate;\n var getDescription = diagram.getDescription;\n var getCustomProperty = diagram.getCustomProperty;\n var commands = {};\n for (var _i = 0, _a = diagram.commandManager.commands; _i < _a.length; _i++) {\n var command = _a[_i];\n commands[command.name] = { execute: command.execute, canExecute: command.canExecute };\n }\n var arrangeTickHorizontal = diagram.rulerSettings.horizontalRuler.arrangeTick;\n var arrangeTickVertical = diagram.rulerSettings.verticalRuler.arrangeTick;\n var getLayoutInfo = diagram.layout.getLayoutInfo;\n var getBranch = diagram.layout.getBranch;\n var nodeDefaults = diagram.getNodeDefaults;\n var connectorDefaults = diagram.getConnectorDefaults;\n var dataObj;\n if (!(model instanceof Object)) {\n dataObj = JSON.parse(model);\n }\n else {\n dataObj = model;\n }\n dataObj = upgrade(dataObj);\n diagram.contextMenuSettings = dataObj.contextMenuSettings || {};\n diagram.constraints = dataObj.constraints || DiagramConstraints.Default;\n diagram.tool = dataObj.tool || DiagramTools.Default;\n diagram.bridgeDirection = dataObj.bridgeDirection || 'Top';\n diagram.pageSettings = dataObj.pageSettings || {};\n diagram.drawingObject = dataObj.drawingObject || undefined;\n diagram.tooltip = dataObj.tooltip || {};\n diagram.addInfo = dataObj.addInfo || undefined;\n diagram.getDescription = getDescription;\n diagram.scrollSettings = dataObj.scrollSettings || {};\n diagram.commandManager = dataObj.commandManager || {};\n /**\n * EJ2-62846-Exception occurs after save and load when layers are undefined.\n */\n if (dataObj.layers && dataObj.layers.length > 0) {\n sortLayerObjects(dataObj);\n }\n diagram.layers = dataObj.layers || [];\n diagram.rulerSettings.horizontalRuler.arrangeTick = arrangeTickHorizontal;\n diagram.rulerSettings.verticalRuler.arrangeTick = arrangeTickVertical;\n for (var _b = 0, _c = diagram.commandManager.commands; _b < _c.length; _b++) {\n var cmd = _c[_b];\n if (commands[cmd.name]) {\n cmd.execute = commands[cmd.name].execute;\n cmd.canExecute = commands[cmd.name].canExecute;\n }\n }\n diagram.backgroundColor = dataObj.backgroundColor || 'transparent';\n diagram.basicElements = dataObj.basicElements || [];\n // EJ2-66465 - Added below code to empty the segment collection if connector type is bezier\n if (dataObj.connectors) {\n for (var i = 0; i < dataObj.connectors.length; i++) {\n // EJ2-69816 - Added below code to empty the segment collection if connector type is bezier and allowSegmentsReset is true\n if (dataObj.connectors[i].type === 'Bezier' && dataObj.connectors[i].segments.length > 0 && dataObj.connectors[i].bezierSettings && dataObj.connectors[i].bezierSettings.allowSegmentsReset) {\n dataObj.connectors[i].segments = [];\n }\n }\n }\n diagram.connectors = dataObj.connectors || [];\n diagram.dataSourceSettings = dataObj.dataSourceSettings || {};\n diagram.dataSourceSettings.doBinding = map;\n diagram.height = dataObj.height || '100%';\n diagram.setNodeTemplate = nodeTemp;\n diagram.getConnectorDefaults = connectorDefaults;\n diagram.getNodeDefaults = nodeDefaults;\n diagram.getCustomProperty = getCustomProperty;\n diagram.mode = dataObj.mode || 'SVG';\n if (dataObj.nodes) {\n for (var i = 0; i < dataObj.nodes.length; i++) {\n if (dataObj.nodes[i].shape && dataObj.nodes[i].shape.type === 'SwimLane') {\n if (dataObj.nodes[i].wrapper == null) {\n {\n dataObj.nodes[i].wrapper = {\n actualSize: { width: dataObj.nodes[i].width, height: dataObj.nodes[i].height },\n offsetX: dataObj.nodes[i].offsetX, offsetY: dataObj.nodes[i].offsetY\n };\n }\n }\n pasteSwimLane(dataObj.nodes[i], undefined, undefined, undefined, undefined, true);\n }\n }\n }\n diagram.nodes = dataObj.nodes || [];\n diagram.rulerSettings = dataObj.rulerSettings || {};\n diagram.snapSettings = dataObj.snapSettings || {};\n diagram.width = dataObj.width || '100%';\n diagram.layout = dataObj.layout || {};\n if (dataObj.layout && dataObj.layout.type !== \"None\") {\n diagram.canLayout = false;\n }\n diagram.layout.getLayoutInfo = getFunction(getLayoutInfo);\n diagram.layout.getBranch = getFunction(getBranch);\n diagram.diagramActions = 0;\n diagram.isLoading = true;\n diagram.protectPropertyChange(false);\n var component;\n for (var i = 0; i < diagram.views.length; i++) {\n component = diagram.views[diagram.views[i]];\n diagram.blazorActions = diagram.addConstraints(blazorAction, BlazorAction.ClearObject);\n component.refresh();\n // Bug 849892: The Overview does not update properly When loading the diagram with the loadDiagram API.\n // For this -> EJ2-69580 issue the overview refresh got prevented which leads to this Bug 849892, so added below condition to reset \n // the overview.\n if (component instanceof Overview) {\n component.onPropertyChanged({ sourceID: component.sourceID }, {});\n }\n diagram.blazorActions = diagram.removeConstraints(blazorAction, BlazorAction.ClearObject);\n if (component instanceof Diagram) {\n diagram.element.classList.add('e-diagram');\n }\n }\n //881117 - Event to notify after diagram elements are loaded. \n var args = { name: 'loaded', diagram: diagram };\n diagram.triggerEvent(DiagramEvent.loaded, args);\n if (dataObj.selectedItems) {\n dataObj.selectedItems.nodes = [];\n dataObj.selectedItems.connectors = [];\n //EJ2-61674 Exception occurs when we move the node after save and load\n dataObj.selectedItems.selectedObjects = [];\n }\n diagram.selectedItems = dataObj.selectedItems;\n diagram.enableServerDataBinding(true);\n diagram.canLayout = true;\n diagram.swimlaneChildTable = {};\n diagram.swimlaneZIndexTable = {};\n return dataObj;\n}\n/**\n * EJ2-61537 - Connectors not connected to the node after save and load\n * when we add nodes and connectors at runtime.\n * */\n/**\n* Sort the nodes and connectors in the layers.\n*\n* @param {Diagram} dataObj - provide the model value.\n* @private\n* */\nfunction sortLayerObjects(dataObj) {\n var i, j, k;\n var layers = [];\n for (i = 0; i < dataObj.layers.length; i++) {\n for (j = 0; j < dataObj.layers[i].objects.length; j++) {\n if (dataObj.nodes) {\n for (k = 0; k < dataObj.nodes.length; k++) {\n if (dataObj.layers[i].objects[j] === dataObj.nodes[k].id) {\n layers.push(dataObj.layers[i].objects[j]);\n }\n }\n }\n }\n for (j = 0; j < dataObj.layers[i].objects.length; j++) {\n if (dataObj.connectors) {\n for (k = 0; k < dataObj.connectors.length; k++) {\n if (dataObj.layers[i].objects[j] === dataObj.connectors[k].id) {\n layers.push(dataObj.layers[i].objects[j]);\n }\n }\n }\n }\n dataObj.layers[i].objects = layers;\n layers = [];\n }\n}\n/* eslint-enable */\n/**\n * upgrade method \\\n *\n * @returns {Diagram } upgrade method .\\\n * @param {Diagram} dataObj - provide the model value.\n * @private\n */\nfunction upgrade(dataObj) {\n if (dataObj && (dataObj.version === undefined || (dataObj.version < 17.1)) && dataObj.nodes) {\n var nodes = dataObj.nodes;\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var node = nodes_1[_i];\n if (node && node.ports && node.ports.length > 0) {\n for (var _a = 0, _b = node.ports; _a < _b.length; _a++) {\n var port = _b[_a];\n if (port && port.constraints && port.constraints === PortConstraints.None) {\n port.constraints = PortConstraints.Default;\n }\n }\n }\n }\n }\n return dataObj;\n}\n/**\n * updateStyle method \\\n *\n * @returns {void } updateStyle method .\\\n * @param {TextStyleModel} changedObject - provide the changedObject value.\n * @param {DiagramElement} target - provide the target value.\n * @private\n */\nfunction updateStyle(changedObject, target) {\n //since text style model is the super set of shape style model, we used text style model\n var style = target.style;\n var textElement = target;\n target.canApplyStyle = true;\n for (var _i = 0, _a = Object.keys(changedObject); _i < _a.length; _i++) {\n var key = _a[_i];\n switch (key) {\n case 'fill':\n style.fill = changedObject.fill;\n if (style instanceof StrokeStyle) {\n /* tslint:disable:no-string-literal */\n style['fill'] = 'transparent';\n }\n break;\n case 'textOverflow':\n style.textOverflow = changedObject.textOverflow;\n break;\n case 'opacity':\n style.opacity = changedObject.opacity;\n break;\n case 'strokeColor':\n style.strokeColor = changedObject.strokeColor;\n break;\n case 'strokeDashArray':\n style.strokeDashArray = changedObject.strokeDashArray;\n break;\n case 'strokeWidth':\n style.strokeWidth = changedObject.strokeWidth;\n break;\n case 'bold':\n style.bold = changedObject.bold;\n break;\n case 'color':\n style.color = changedObject.color;\n break;\n case 'textWrapping':\n style.textWrapping = changedObject.textWrapping;\n break;\n case 'fontFamily':\n style.fontFamily = changedObject.fontFamily;\n break;\n case 'fontSize':\n style.fontSize = changedObject.fontSize;\n break;\n case 'italic':\n style.italic = changedObject.italic;\n break;\n case 'textAlign':\n style.textAlign = changedObject.textAlign;\n break;\n case 'whiteSpace':\n style.whiteSpace = changedObject.whiteSpace;\n break;\n case 'textDecoration':\n style.textDecoration = changedObject.textDecoration;\n break;\n case 'gradient':\n if (style.gradient) {\n updateGradient(changedObject.gradient, style.gradient);\n break;\n }\n }\n }\n if (target instanceof TextElement) {\n textElement.refreshTextElement();\n }\n}\n/**\n * updateGradient method \\\n *\n * @returns {void } updateGradient method .\\\n * @param {GradientModel | LinearGradientModel | RadialGradientModel} changedGradient - provide the changedGradient value.\n * @param {GradientModel | LinearGradientModel | RadialGradientModel} targetGradient - provide the targetGradient value.\n * @private\n */\nfunction updateGradient(changedGradient, targetGradient) {\n for (var _i = 0, _a = Object.keys(changedGradient); _i < _a.length; _i++) {\n var key = _a[_i];\n switch (key) {\n case 'type':\n targetGradient.type = changedGradient.type;\n break;\n case 'x1':\n targetGradient.x1 = changedGradient.x1;\n break;\n case 'x2':\n targetGradient.x2 = changedGradient.x2;\n break;\n case 'y1':\n targetGradient.y1 = changedGradient.y1;\n break;\n case 'y2':\n targetGradient.y2 = changedGradient.y2;\n break;\n case 'cx':\n targetGradient.cx = changedGradient.cx;\n break;\n case 'cy':\n targetGradient.cy = changedGradient.cy;\n break;\n case 'fx':\n targetGradient.fx = changedGradient.fx;\n break;\n case 'fy':\n targetGradient.fy = changedGradient.fy;\n break;\n case 'r':\n targetGradient.r = changedGradient.r;\n break;\n case 'stops':\n targetGradient.stops = changedGradient.stops;\n break;\n }\n }\n}\n/* eslint-disable */\n/**\n * updateHyperlink method \\\n *\n * @returns {void } updateHyperlink method .\\\n * @param {HyperlinkModel} changedObject - provide the changedObject value.\n * @param {DiagramElement} target - provide the target value.\n * @param {AnnotationModel} actualAnnotation - provide the actualAnnotation value.\n * @private\n */\nfunction updateHyperlink(changedObject, target, actualAnnotation) {\n var textElement = target;\n var hyperlink = textElement.hyperlink;\n for (var _i = 0, _a = Object.keys(changedObject); _i < _a.length; _i++) {\n var key = _a[_i];\n switch (key) {\n case 'color':\n textElement.style.color = hyperlink.color = changedObject.color;\n break;\n case 'content':\n textElement.content = hyperlink.content = changedObject.content || hyperlink.link;\n break;\n case 'link':\n var labelStyle = actualAnnotation.style;\n textElement.style.color = changedObject.link ? hyperlink.color : labelStyle.color;\n textElement.style.textDecoration = changedObject.link ? hyperlink.textDecoration : actualAnnotation.style.textDecoration;\n textElement.content = changedObject.link ? hyperlink.content || changedObject.link : actualAnnotation.content;\n hyperlink.link = changedObject.link;\n break;\n case 'textDecoration':\n textElement.style.textDecoration = hyperlink.textDecoration = changedObject.textDecoration;\n break;\n case 'hyperlinkOpenState':\n hyperlink.hyperlinkOpenState = changedObject.hyperlinkOpenState;\n break;\n }\n }\n}\n/* eslint-enable */\n/**\n * updateShapeContent method \\\n *\n * @returns {void } updateShapeContent method .\\\n * @param {DiagramElement} content - provide the content value.\n * @param {Node} actualObject - provide the actualObject value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction updateShapeContent(content, actualObject, diagram) {\n content.width = actualObject.width;\n content.height = actualObject.height;\n content.minHeight = actualObject.minHeight;\n content.maxHeight = actualObject.maxHeight;\n content.minWidth = actualObject.minWidth;\n content.maxWidth = actualObject.maxWidth;\n content.horizontalAlignment = actualObject.wrapper.children[0].horizontalAlignment;\n content.verticalAlignment = actualObject.wrapper.children[0].verticalAlignment;\n content.relativeMode = actualObject.wrapper.children[0].relativeMode;\n content.visible = actualObject.wrapper.children[0].visible;\n if (actualObject.shape instanceof Text) {\n content.margin = actualObject.shape.margin;\n }\n content.id = actualObject.wrapper.children[0].id;\n content.style = actualObject.style;\n //let view: View;\n for (var _i = 0, _a = diagram.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(actualObject.id + '_groupElement', elementId);\n removeElement(actualObject.id + '_content_groupElement', elementId);\n removeElement(actualObject.id + '_html_element', elementId);\n }\n actualObject.wrapper.children.splice(0, 1);\n actualObject.wrapper.children.splice(0, 0, content);\n}\n/* eslint-disable */\n/**\n * updateShape method \\\n *\n * @returns {void } updateShape method .\\\n * @param {Node} node - provide the node value.\n * @param {Node} actualObject - provide the actualObject value.\n * @param {Node} oldObject - provide the oldObject value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction updateShape(node, actualObject, oldObject, diagram) {\n var content = new DiagramElement();\n //let textStyle: TextStyleModel; let nodeStyle: TextStyleModel;\n switch (node.shape.type) {\n case 'Path':\n var pathContent = new PathElement();\n pathContent.data = actualObject.shape.data;\n content = pathContent;\n updateShapeContent(content, actualObject, diagram);\n break;\n case 'Image':\n var imageContent = new ImageElement();\n imageContent.source = actualObject.shape.source;\n imageContent.imageAlign = actualObject.shape.align;\n imageContent.imageScale = actualObject.shape.scale;\n content = imageContent;\n updateShapeContent(content, actualObject, diagram);\n break;\n case 'Text':\n //issue\n var textContent = new TextElement();\n // (textContent as TextElement).content = (node.shape as TextModel).content;\n content = textContent;\n updateShapeContent(content, actualObject, diagram);\n break;\n case 'Basic':\n var element = (actualObject.shape.shape === 'Rectangle') ? new DiagramElement() : new PathElement();\n if ((!isBlazor() && actualObject.shape.shape === 'Polygon')) {\n element.data = getPolygonPath(actualObject.shape.points);\n }\n else {\n element.data = getBasicShape(actualObject.shape.shape);\n }\n if ((!isBlazor() && actualObject.shape.shape === 'Rectangle')) {\n element.cornerRadius = actualObject.shape.cornerRadius;\n }\n //EJ2-70880 - Node disappeared after changing shape and type dynamically.\n content = element;\n updateShapeContent(content, actualObject, diagram);\n break;\n case 'Flow':\n /* eslint-disable */\n var flowShapeElement = new PathElement();\n var shape = actualObject.shape.shape;\n flowShapeElement.data = getFlowShape(shape);\n content = flowShapeElement;\n updateShapeContent(content, actualObject, diagram);\n break;\n case 'Native':\n var nativeContent = new DiagramNativeElement(node.id, diagram.element.id);\n nativeContent.content = actualObject.shape.content;\n nativeContent.scale = actualObject.shape.scale;\n content = nativeContent;\n updateShapeContent(content, actualObject, diagram);\n break;\n case 'HTML':\n var htmlContent = new DiagramHtmlElement(actualObject.id, diagram.element.id);\n htmlContent.content = actualObject.shape.content;\n content = htmlContent;\n updateShapeContent(content, actualObject, diagram);\n }\n if (node.shape.type === undefined || node.shape.type === oldObject.shape.type) {\n updateContent(node, actualObject, diagram, oldObject);\n }\n else {\n content.width = actualObject.wrapper.children[0].width;\n content.height = actualObject.wrapper.children[0].height;\n if (actualObject.shape instanceof Text) {\n content.margin = actualObject.shape.margin;\n }\n content.style = actualObject.style;\n actualObject.wrapper.children[0] = content;\n }\n}\n/* eslint-enable */\n/**\n * updateContent method \\\n *\n * @returns {void } updateContent method .\\\n * @param {Node} newValues - provide the newValues value.\n * @param {Node} actualObject - provide the actualObject value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {Node} oldObject - provide the oldObject value.\n * @private\n */\nfunction updateContent(newValues, actualObject, diagram, oldObject) {\n if (Object.keys(newValues.shape).length > 0) {\n if (actualObject.shape.type === 'Path' && newValues.shape.data !== undefined) {\n actualObject.wrapper.children[0].data = newValues.shape.data;\n }\n else if (actualObject.shape.type === 'Text' && newValues.shape.content !== undefined) {\n actualObject.wrapper.children[0].content = newValues.shape.content;\n }\n else if (actualObject.shape.type === 'Image' && newValues.shape.source !== undefined) {\n actualObject.wrapper.children[0].source = newValues.shape.source;\n }\n else if (actualObject.shape.type === 'Native') {\n var nativeElement = void 0;\n for (var i = 0; i < diagram.views.length; i++) {\n nativeElement = getDiagramElement(actualObject.wrapper.children[0].id + '_native_element', diagram.views[parseInt(i.toString(), 10)]);\n if (newValues.shape.content !== undefined && nativeElement) {\n nativeElement.removeChild(nativeElement.children[0]);\n actualObject.wrapper.children[0].content = newValues.shape.content;\n nativeElement.appendChild(getContent(actualObject.wrapper.children[0], false));\n }\n }\n actualObject.wrapper.children[0].scale = newValues.shape.scale ?\n newValues.shape.scale : actualObject.wrapper.children[0].scale;\n }\n else if (actualObject.shape.type === 'HTML') {\n var htmlElement = void 0;\n for (var i = 0; i < diagram.views.length; i++) {\n htmlElement = getDiagramElement(actualObject.wrapper.children[0].id + '_html_element', diagram.views[parseInt(i.toString(), 10)]);\n if (htmlElement) {\n htmlElement.removeChild(htmlElement.children[0]);\n actualObject.wrapper.children[0].content = newValues.shape.content;\n htmlElement.appendChild(getContent(actualObject.wrapper.children[0], true));\n }\n }\n }\n else if (actualObject.shape.type === 'Flow' && (newValues.shape.shape !== undefined)) {\n actualObject.shape.shape = newValues.shape.shape;\n var shapes = actualObject.shape.shape;\n var flowshapedata = getFlowShape(shapes.toString());\n actualObject.wrapper.children[0].data = flowshapedata;\n }\n else if (actualObject.shape.type === 'UmlActivity' &&\n (!isBlazor() && newValues.shape.shape !== undefined)) {\n updateUmlActivityNode(actualObject, newValues);\n }\n else if (newValues.shape.cornerRadius !== undefined) {\n actualObject.wrapper.children[0].cornerRadius = newValues.shape.cornerRadius;\n }\n else if (actualObject.shape.type === 'Basic' && (oldObject && oldObject.shape.shape === 'Rectangle')) {\n var basicshape = new PathElement();\n var basicshapedata = getBasicShape(actualObject.shape.shape);\n basicshape.data = basicshapedata;\n var content = basicshape;\n updateShapeContent(content, actualObject, diagram);\n }\n else if (newValues.shape.shape !== undefined) {\n actualObject.shape.shape = newValues.shape.shape;\n var shapes = actualObject.shape.shape;\n var basicShapeData = getBasicShape(shapes.toString());\n actualObject.wrapper.children[0].data = basicShapeData;\n }\n }\n actualObject.wrapper.children[0].canMeasurePath = true;\n}\n/**\n * updateUmlActivityNode method \\\n *\n * @returns {void } updateUmlActivityNode method .\\\n * @param {Node} actualObject - provide the newValues value.\n * @param {Node} newValues - provide the actualObject value.\n * @private\n */\nfunction updateUmlActivityNode(actualObject, newValues) {\n if (!isBlazor()) {\n actualObject.shape.shape = newValues.shape.shape;\n }\n else {\n actualObject.shape.umlActivityShape = newValues.shape.umlActivityShape;\n }\n var shapes = !isBlazor() ? actualObject.shape.shape :\n actualObject.shape.umlActivityShape;\n var umlActivityShapeData = getUMLActivityShape(shapes.toString());\n if ((!isBlazor() && actualObject.shape.shape === 'InitialNode')) {\n actualObject.wrapper.children[0].style.fill = 'black';\n }\n else if ((!isBlazor() && (actualObject.shape.shape === 'ForkNode' ||\n actualObject.shape.shape === 'JoinNode'))) {\n actualObject.wrapper.children[0].style.fill = 'black';\n }\n else if ((!isBlazor() && actualObject.shape.shape === 'FinalNode')) {\n if (actualObject instanceof Node) {\n actualObject.wrapper = getUMLFinalNode(actualObject);\n }\n }\n if (umlActivityShapeData) {\n actualObject.wrapper.children[0].data = umlActivityShapeData;\n }\n}\n/**\n * getUMLFinalNode method \\\n *\n * @returns {Canvas } getUMLFinalNode method .\\\n * @param {Node} node - provide the newValues value.\n * @private\n */\nfunction getUMLFinalNode(node) {\n var finalNodeShape = new Canvas();\n finalNodeShape.style.fill = 'transparent';\n //childNode0\n var pathData = 'M 25 50 C 11.21 50 0 38.79 0 25 C 0 11.21 11.21 0 25 0 C 38.78 0 50 11.21 50 25' +\n ' C 50 38.79 38.78 50 25 50';\n var innerFinalNode = new PathElement();\n innerFinalNode.data = pathData;\n innerFinalNode.id = node.id + '_0_finalNode';\n innerFinalNode.horizontalAlignment = 'Center';\n innerFinalNode.verticalAlignment = 'Center';\n innerFinalNode.relativeMode = 'Object';\n innerFinalNode.style.strokeColor = node.style.strokeColor;\n innerFinalNode.style.strokeWidth = node.style.strokeWidth;\n //childNode1\n var outerFinalNode = new PathElement();\n outerFinalNode.data = pathData;\n outerFinalNode.id = node.id + '_1_finalNode';\n outerFinalNode.horizontalAlignment = 'Center';\n outerFinalNode.verticalAlignment = 'Center';\n outerFinalNode.relativeMode = 'Object';\n outerFinalNode.style.fill = node.style.fill;\n outerFinalNode.style.strokeColor = node.style.strokeColor;\n outerFinalNode.style.strokeWidth = node.style.strokeWidth;\n //append child and set style\n finalNodeShape.children = [innerFinalNode, outerFinalNode];\n finalNodeShape.children[0].width = node.width;\n finalNodeShape.children[0].height = node.height;\n finalNodeShape.children[1].height = node.height / 1.5;\n finalNodeShape.children[1].width = node.width / 1.5;\n finalNodeShape.style.strokeWidth = 0;\n finalNodeShape.style.strokeColor = 'transparent';\n return finalNodeShape;\n}\n/**\n * getUMLActivityShapes method \\\n *\n * @returns {DiagramElement } getUMLActivityShapes method .\\\n * @param {PathElement} umlActivityShape - provide the umlActivityShape value.\n * @param {DiagramElement} content - provide the content value.\n * @param {Node} node - provide the node value.\n * @private\n */\nfunction getUMLActivityShapes(umlActivityShape, content, node) {\n var shape = node.shape.shape;\n var umlActivityShapeData = getUMLActivityShape(shape);\n umlActivityShape.data = umlActivityShapeData;\n content = umlActivityShape;\n switch (shape) {\n case 'StructuredNode':\n if (node.annotations) {\n for (var i = 0; i < node.annotations.length; i++) {\n node.annotations[parseInt(i.toString(), 10)].content = '<<' + node.annotations[parseInt(i.toString(), 10)].content + '>>';\n }\n }\n content = umlActivityShape;\n break;\n case 'FinalNode':\n content = getUMLFinalNode(node);\n break;\n }\n return content;\n}\n/**\n * removeGradient method \\\n *\n * @returns {void } removeGradient method .\\\n * @param {string} svgId - provide the umlActivityShape value.\n * @private\n */\nfunction removeGradient(svgId) {\n removeElement(svgId + '_linear');\n removeElement(svgId + '_radial');\n}\n/**\n * removeItem method \\\n *\n * @returns {void } removeItem method .\\\n * @param {string[]} array - provide the umlActivityShape value.\n * @param {string} item - provide the umlActivityShape value.\n * @private\n */\nfunction removeItem(array, item) {\n var index = array.indexOf(item);\n if (index >= 0) {\n array.splice(index, 1);\n }\n}\n/**\n * updateConnector method \\\n *\n * @returns {void } updateConnector method .\\\n * @param {Connector} connector - provide the connector value.\n * @param {PointModel[]} points - provide the points value.\n * @param {DiagramAction} diagramActions - provide the diagramActions value.\n * @private\n */\nfunction updateConnector(connector, points, diagramActions) {\n var anglePoint; //let srcDecorator: DecoratorModel;\n //let targetPoint: PointModel;\n connector.intermediatePoints = points;\n connector.updateSegmentElement(connector, points, connector.wrapper.children[0], diagramActions);\n var srcDecorator = connector.sourceDecorator;\n if (connector.type === 'Bezier') {\n var firstSegment = connector.segments[0];\n var lastSegment = connector.segments[connector.segments.length - 1];\n anglePoint = [!Point.isEmptyPoint(lastSegment.point2) ? lastSegment.point2 : lastSegment.bezierPoint2,\n !Point.isEmptyPoint(firstSegment.point1) ? firstSegment.point1 : firstSegment.bezierPoint1];\n }\n else {\n anglePoint = connector.intermediatePoints;\n }\n points = connector.clipDecorators(connector, points, diagramActions);\n var element = connector.wrapper.children[0];\n element.canMeasurePath = true;\n element = connector.wrapper.children[1];\n connector.updateDecoratorElement(element, points[0], anglePoint[1], srcDecorator);\n //const targetPoint: PointModel = connector.targetPoint;\n var tarDecorator = connector.targetDecorator;\n element = connector.wrapper.children[2];\n connector.updateDecoratorElement(element, points[points.length - 1], anglePoint[anglePoint.length - 2], tarDecorator);\n connector.updateShapeElement(connector);\n}\n/**\n * getUserHandlePosition method \\\n *\n * @returns {PointModel } getUserHandlePosition method .\\\n * @param {SelectorModel} selectorItem - provide the connector value.\n * @param {UserHandleModel} handle - provide the handle value.\n * @param {Transforms} transform - provide the transform value.\n * @private\n */\nfunction getUserHandlePosition(selectorItem, handle, transform) {\n var wrapper = selectorItem.wrapper;\n //let positionPoints: PointModel;\n var bounds = wrapper.bounds;\n var offset = handle.offset;\n var size = handle.size / transform.scale;\n var margin = handle.margin;\n var point;\n var left = wrapper.offsetX - wrapper.actualSize.width * wrapper.pivot.x;\n var top = wrapper.offsetY - wrapper.actualSize.height * wrapper.pivot.y;\n point = { x: 0, y: 0 };\n if (selectorItem.nodes.length > 0) {\n switch (handle.side) {\n case 'Top':\n point.x += left + offset * wrapper.actualSize.width;\n point.y += top - (size);\n break;\n case 'Bottom':\n point.x += left + offset * wrapper.actualSize.width;\n point.y += top + wrapper.actualSize.height + (size);\n break;\n case 'Left':\n point.x += left - (size);\n point.y += top + offset * wrapper.actualSize.height;\n break;\n case 'Right':\n point.x += left + wrapper.actualSize.width + (size);\n point.y += top + offset * wrapper.actualSize.height;\n break;\n }\n point.x += ((margin.left - margin.right) / transform.scale) +\n (size / 2) * (handle.horizontalAlignment === 'Center' ? 0 : (handle.horizontalAlignment === 'Right' ? -1 : 1));\n point.y += ((margin.top - margin.bottom) / transform.scale) +\n (size / 2) * (handle.verticalAlignment === 'Center' ? 0 : (handle.verticalAlignment === 'Top' ? -1 : 1));\n }\n else if (selectorItem.connectors.length > 0) {\n var connector = selectorItem.connectors[0];\n var annotation = { offset: offset };\n var connectorOffset = getOffsetOfConnector(connector.intermediatePoints, annotation);\n var index = connectorOffset.index;\n point = connectorOffset.point;\n var getPointloop = getAnnotationPosition(connector.intermediatePoints, annotation);\n //const points: PointModel[] = connector.intermediatePoints;\n //const offsetLength: number;\n var angle = getPointloop.angle;\n var matrix = identityMatrix();\n rotateMatrix(matrix, -angle, connector.intermediatePoints[parseInt(index.toString(), 10)].x, connector.intermediatePoints[parseInt(index.toString(), 10)].y);\n point = transformPointByMatrix(matrix, point);\n point.x += (margin.left - margin.right) +\n (size / 2) * (handle.horizontalAlignment === 'Center' ? 0 : (handle.horizontalAlignment === 'Right' ? -1 : 1));\n point.y += (margin.top - margin.bottom) +\n (size / 2) * (handle.verticalAlignment === 'Center' ? 0 : (handle.verticalAlignment === 'Top' ? -1 : 1));\n matrix = identityMatrix();\n rotateMatrix(matrix, angle, connector.intermediatePoints[parseInt(index.toString(), 10)].x, connector.intermediatePoints[parseInt(index.toString(), 10)].y);\n point = transformPointByMatrix(matrix, point);\n }\n if (wrapper.rotateAngle !== 0 || wrapper.parentTransform !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, wrapper.rotateAngle + wrapper.parentTransform, wrapper.offsetX, wrapper.offsetY);\n point = transformPointByMatrix(matrix, point);\n }\n return point;\n}\n/**\n * canResizeCorner method \\\n *\n * @returns {SelectorConstraints } canResizeCorner method .\\\n * @param {string} selectorConstraints - provide the selectorConstraints value.\n * @param {string} action - provide the selectorConstraints value.\n * @param {ThumbsConstraints} thumbsConstraints - provide the thumbsConstraints value.\n * @param {Selector} selectedItems - provide the selectedItems value.\n * @private\n */\nfunction canResizeCorner(selectorConstraints, action, thumbsConstraints, selectedItems) {\n if (selectedItems.annotation) {\n if (canResize(selectedItems.annotation)) {\n return true;\n }\n }\n else if ((SelectorConstraints[\"\" + action] & selectorConstraints) && (ThumbsConstraints[\"\" + action] & thumbsConstraints)) {\n return true;\n }\n return false;\n}\n/**\n * canShowCorner method \\\n *\n * @returns {boolean } canShowCorner method .\\\n * @param {SelectorConstraints} selectorConstraints - provide the selectorConstraints value.\n * @param {string} action - provide the thumbsConstraints value.\n * @private\n */\nfunction canShowCorner(selectorConstraints, action) {\n if (SelectorConstraints[\"\" + action] & selectorConstraints) {\n return true;\n }\n return false;\n}\n/**\n * canShowControlPoints method \\\n *\n * @returns {boolean } canShowControlPoints method .\\\n * @param {ControlPointsVisibility} bezierControlPoints - provide the bezierControlPoints value.\n * @param {string} action - provide the value.\n * @private\n */\nfunction canShowControlPoints(bezierControlPoints, action) {\n if (ControlPointsVisibility[\"\" + action] & bezierControlPoints) {\n return true;\n }\n return false;\n}\n/**\n * checkPortRestriction method \\\n *\n * @returns {number } checkPortRestriction method .\\\n * @param {PointPortModel} port - provide the port value.\n * @param {PortVisibility} portVisibility - provide the portVisibility value.\n * @private\n */\nfunction checkPortRestriction(port, portVisibility) {\n return port.visibility & portVisibility;\n}\n/**\n * findAnnotation method \\\n *\n * @returns {ShapeAnnotationModel | PathAnnotationModel | TextModel } findAnnotation method .\\\n * @param { NodeModel | ConnectorModel} node - provide the port value.\n * @param {string} id - provide the portVisibility value.\n * @private\n */\nfunction findAnnotation(node, id) {\n var annotation;\n if (node.shape.type === 'Text') {\n annotation = (node.shape);\n }\n else {\n var annotationId = id.split('_');\n id = annotationId[annotationId.length - 1];\n for (var i = 0; i < node.annotations.length; i++) {\n if (id === node.annotations[parseInt(i.toString(), 10)].id) {\n annotation = node.annotations[parseInt(i.toString(), 10)];\n }\n }\n }\n return annotation;\n}\n/**\n * findPort method \\\n *\n * @returns {PointPortModel} findPort method .\\\n * @param { NodeModel | ConnectorModel} node - provide the port value.\n * @param {string} id - provide the portVisibility value.\n * @private\n */\nfunction findPort(node, id) {\n var port;\n if (id) {\n var portId = id.split('_');\n id = portId[portId.length - 1];\n }\n if (node) {\n node = node;\n for (var i = 0; i < node.ports.length; i++) {\n if (id === node.ports[parseInt(i.toString(), 10)].id) {\n return node.ports[parseInt(i.toString(), 10)];\n }\n }\n }\n return port;\n}\n/**\n * getInOutConnectPorts method \\\n *\n * @returns {PointPortModel} getInOutConnectPorts method .\\\n * @param { NodeModel} node - provide the port value.\n * @param {boolean} isInConnect - provide the portVisibility value.\n * @private\n */\nfunction getInOutConnectPorts(node, isInConnect) {\n var port = {};\n var i = 0;\n if (node.ports) {\n var ports = node.ports;\n for (i = 0; i < ports.length; i++) {\n if (isInConnect) {\n if ((ports[parseInt(i.toString(), 10)].constraints & PortConstraints.InConnect)) {\n port = ports[parseInt(i.toString(), 10)];\n }\n }\n else {\n if ((ports[parseInt(i.toString(), 10)].constraints & PortConstraints.OutConnect)) {\n port = ports[parseInt(i.toString(), 10)];\n }\n }\n }\n }\n return port;\n}\n/**\n * findObjectIndex method \\\n *\n * @returns {PointPortModel} findObjectIndex method .\\\n * @param { NodeModel | ConnectorModel} node - provide the node value.\n * @param {string} id - provide the string value.\n * @param {boolean} annotation - provide the boolean value.\n * @private\n */\nfunction findObjectIndex(node, id, annotation) {\n //let index: number;\n var collection = (annotation) ? node.annotations : node.ports;\n for (var i = 0; i < collection.length; i++) {\n if (collection[parseInt(i.toString(), 10)].id === id) {\n return (i).toString();\n }\n }\n return '-1';\n}\n/**\n * findPortIndex method \\\n *\n * @returns {PointPortModel} findPortIndex method .\\\n * @param { NodeModel | ConnectorModel} node - provide the node value.\n * @param {string} id - provide the string value.\n * @param {boolean} port - provide the boolean value.\n * @private\n */\nfunction findPortIndex(node, id, port) {\n //let index: number;\n var collection = node.ports;\n for (var i = 0; i < collection.length; i++) {\n if (collection[parseInt(i.toString(), 10)].id === id) {\n return (i).toString();\n }\n }\n return '-1';\n}\n/**\n * getObjectFromCollection method \\\n *\n * @returns {boolean} getObjectFromCollection method .\\\n * @param { (NodeModel | ConnectorModel)[] } obj - provide the node value.\n * @param {string} id - provide the string value.\n * @private\n */\nfunction getObjectFromCollection(obj, id) {\n var i;\n for (i = 0; i < obj.length; i++) {\n if (id === obj[parseInt(i.toString(), 10)].id) {\n return true;\n }\n }\n return false;\n}\n/**\n * scaleElement method \\\n *\n * @returns {void} scaleElement method .\\\n * @param { DiagramElement } element - provide the element value.\n * @param {number} sw - provide the string value.\n * @param {number} sh - provide the string value.\n * @param {DiagramElement} refObject - provide the refObject value.\n * @private\n */\nfunction scaleElement(element, sw, sh, refObject) {\n if (element.width !== undefined && element.height !== undefined) {\n element.width *= sw;\n element.height *= sh;\n }\n if (element instanceof Container) {\n var matrix = identityMatrix();\n var width = refObject.width || refObject.actualSize.width;\n var height = refObject.height || refObject.actualSize.height;\n if (width !== undefined && height !== undefined) {\n var x = refObject.offsetX - width * refObject.pivot.x;\n var y = refObject.offsetY - height * refObject.pivot.y;\n var refPoint = {\n x: x + width * refObject.pivot.x,\n y: y + height * refObject.pivot.y\n };\n refPoint = rotatePoint(refObject.rotateAngle, refObject.offsetX, refObject.offsetY, refPoint);\n rotateMatrix(matrix, -refObject.rotateAngle, refPoint.x, refPoint.y);\n scaleMatrix(matrix, sw, sh, refPoint.x, refPoint.y);\n rotateMatrix(matrix, refObject.rotateAngle, refPoint.x, refPoint.y);\n for (var _i = 0, _a = element.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child.width !== undefined && child.height !== undefined) {\n var newPosition = transformPointByMatrix(matrix, { x: child.offsetX, y: child.offsetY });\n child.offsetX = newPosition.x;\n child.offsetY = newPosition.y;\n scaleElement(child, sw, sh, refObject);\n }\n }\n }\n }\n}\n/**\n * scaleElement method \\\n *\n * @returns {void} scaleElement method .\\\n * @param { Node } obj - provide the obj value.\n * @param {number} x - provide the x value.\n * @param {number} y - provide the y value.\n * @param {DiagramElement} nameTable - provide the refObject value.\n * @param {DiagramElement} drop - provide the drop value.\n * @param {DiagramElement} diagram - provide the diagram value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\nfunction arrangeChild(obj, x, y, nameTable, drop, diagram) {\n var child = obj.children;\n var node;\n for (var i = 0; i < child.length; i++) {\n node = nameTable[child[parseInt(i.toString(), 10)]];\n if (node) {\n if (node.children) {\n arrangeChild(node, x, y, nameTable, drop, diagram);\n }\n else {\n node.offsetX -= x;\n node.offsetY -= y;\n if (!drop) {\n //let content: DiagramElement;\n //let container: Container;\n nameTable[node.id] = node;\n var container = node.initContainer();\n if (!container.children) {\n container.children = [];\n }\n var content = node.init(diagram);\n container.children.push(content);\n container.measure(new Size(node.width, node.height));\n container.arrange(container.desiredSize);\n }\n }\n }\n }\n}\n/**\n * insertObject method \\\n *\n * @returns {void} insertObject method .\\\n * @param { NodeModel | ConnectorModel } obj - provide the obj value.\n * @param { string } key - provide the obj value.\n * @param { Object[]} collection - provide the x value.\n * @private\n */\nfunction insertObject(obj, key, collection) {\n if (collection.length === 0) {\n collection.push(obj);\n }\n else if (collection.length === 1) {\n if (collection[0][\"\" + key] > obj[\"\" + key]) {\n collection.splice(0, 0, obj);\n }\n else {\n collection.push(obj);\n }\n }\n else if (collection.length > 1) {\n var low = 0;\n var high = collection.length - 1;\n var mid = Math.floor((low + high) / 2);\n while (mid !== low) {\n if (collection[parseInt(mid.toString(), 10)][\"\" + key] < obj[\"\" + key]) {\n low = mid;\n mid = Math.floor((low + high) / 2);\n }\n else if (collection[parseInt(mid.toString(), 10)][\"\" + key] > obj[\"\" + key]) {\n high = mid;\n mid = Math.floor((low + high) / 2);\n }\n else {\n break;\n }\n }\n if (collection[parseInt(high.toString(), 10)][\"\" + key] < obj[\"\" + key]) {\n collection.push(obj);\n }\n else if (collection[parseInt(low.toString(), 10)][\"\" + key] > obj[\"\" + key]) {\n collection.splice(low, 0, obj);\n }\n else if ((collection[parseInt(low.toString(), 10)][\"\" + key] < obj[\"\" + key]) && collection[parseInt(high.toString(), 10)][\"\" + key] > obj[\"\" + key]) {\n collection.splice(high, 0, obj);\n }\n }\n}\n/**\n * getElement method \\\n *\n * @returns {Object} getElement method .\\\n * @param { DiagramHtmlElement | DiagramNativeElement } element - provide the obj value.\n * @private\n */\nfunction getElement(element) {\n var diagramElement = document.getElementById(element.diagramId);\n var instance = 'ej2_instances';\n var nodes = diagramElement[\"\" + instance][0].nodes;\n if (nodes === undefined) {\n nodes = getPaletteSymbols(diagramElement[\"\" + instance][0]);\n }\n var length = 'length';\n for (var i = 0; nodes && i < nodes[\"\" + length]; i++) {\n if (nodes[parseInt(i.toString(), 10)].id === element.nodeId) {\n return getAnnotation(nodes[parseInt(i.toString(), 10)], element);\n }\n }\n var connectors = diagramElement[\"\" + instance][0].connectors;\n for (var i = 0; connectors && i < connectors[\"\" + length]; i++) {\n if (connectors[parseInt(i.toString(), 10)].id === element.nodeId) {\n return getAnnotation(connectors[parseInt(i.toString(), 10)], element);\n }\n }\n // eslint-disable-next-line\n var enterObject = diagramElement[instance][0].enterObject;\n if (enterObject && (enterObject['id'] === element.nodeId || enterObject['children'])) {\n if (enterObject['children'] && groupHasType(enterObject, 'HTML', diagramElement[\"\" + instance][0].enterTable)) {\n return diagramElement[\"\" + instance][0].enterTable[element.nodeId];\n }\n else {\n return enterObject;\n }\n }\n return null;\n}\n/**\n * getAnnotation method \\\n *\n * @returns {Object} getAnnotation method .\\\n * @param { Object } obj - provide the obj value.\n * @param { DiagramHtmlElement | DiagramNativeElement } element - provide the obj value.\n * @private\n */\nfunction getAnnotation(obj, element) {\n var annotations = obj.annotations;\n var length = 'length';\n var j;\n for (j = 0; annotations && j < annotations[\"\" + length]; j++) {\n if (element.annotationId\n && annotations[parseInt(j.toString(), 10)].id === element.annotationId) {\n return annotations[parseInt(j.toString(), 10)];\n }\n }\n return obj;\n}\n/**\n * getPaletteSymbols method \\\n *\n * @returns {NodeModel[]} getPaletteSymbols method .\\\n * @param { Object } symbolPalette - provide the symbolPalette value.\n * @private\n */\nfunction getPaletteSymbols(symbolPalette) {\n var nodes = [];\n for (var i = 0; i < symbolPalette.palettes.length; i++) {\n var symbols = symbolPalette.palettes[parseInt(i.toString(), 10)].symbols;\n for (var j = 0; j < symbols.length; j++) {\n if (symbols[parseInt(j.toString(), 10)] instanceof Node) {\n nodes.push(symbols[parseInt(j.toString(), 10)]);\n }\n }\n }\n return nodes;\n}\n/**\n * getCollectionChangeEventArguements method \\\n *\n * @returns {IBlazorCollectionChangeEventArgs} getCollectionChangeEventArguements method .\\\n * @param { IBlazorCollectionChangeEventArgs } args1 - provide the args1 value.\n * @param { NodeModel | ConnectorModel } obj - provide the obj value.\n * @param { EventState } state - provide the state value.\n * @param { ChangeType } type - provide the type value.\n * @private\n */\nfunction getCollectionChangeEventArguements(args1, obj, state, type) {\n //Removed isBlazor code\n return args1;\n}\n/**\n * getDropEventArguements method \\\n *\n * @returns {IBlazorDropEventArgs} getDropEventArguements method .\\\n * @param { MouseEventArgs } args - provide the args1 value.\n * @param { IBlazorDropEventArgs } arg - provide the obj value.\n * @private\n */\nfunction getDropEventArguements(args, arg) {\n //Removed isBlazor code\n return arg;\n}\n/**\n * getPoint method \\\n *\n * @returns {PointModel} getPoint method .\\\n * @param { number } x - provide the x value.\n * @param { number } y - provide the y value.\n * @param { number } w - provide the w value.\n * @param { number } h - provide the y value.\n * @param { number } angle - provide the y value.\n * @param { number } offsetX - provide the y value.\n * @param { number } offsetY - provide the y value.\n * @param { PointModel } cornerPoint - provide the y value.\n * @private\n */\nfunction getPoint(x, y, w, h, angle, offsetX, offsetY, cornerPoint) {\n var pivot = { x: 0, y: 0 };\n var trans = identityMatrix();\n rotateMatrix(trans, angle, offsetX, offsetY);\n switch (cornerPoint.x) {\n case 0:\n switch (cornerPoint.y) {\n case 0:\n pivot = transformPointByMatrix(trans, ({ x: x, y: y }));\n break;\n case 0.5:\n pivot = transformPointByMatrix(trans, ({ x: x, y: y + h / 2 }));\n break;\n case 1:\n pivot = transformPointByMatrix(trans, ({ x: x, y: y + h }));\n break;\n }\n break;\n case 0.5:\n switch (cornerPoint.y) {\n case 0:\n pivot = transformPointByMatrix(trans, ({ x: x + w / 2, y: y }));\n break;\n case 0.5:\n pivot = transformPointByMatrix(trans, ({ x: x + w / 2, y: y + h / 2 }));\n break;\n case 1:\n pivot = transformPointByMatrix(trans, ({ x: x + w / 2, y: y + h }));\n break;\n }\n break;\n case 1:\n switch (cornerPoint.y) {\n case 0:\n pivot = transformPointByMatrix(trans, ({ x: x + w, y: y }));\n break;\n case 0.5:\n pivot = transformPointByMatrix(trans, ({ x: x + w, y: y + h / 2 }));\n break;\n case 1:\n pivot = transformPointByMatrix(trans, ({ x: x + w, y: y + h }));\n break;\n }\n break;\n }\n return { x: pivot.x, y: pivot.y };\n}\n/* eslint-disable */\n/**\n * Get the object as Node | Connector \\\n *\n * @returns {Object} Get the object as Node | Connector .\\\n * @param { number } obj - provide the x value.\n * @private\n */\nvar getObjectType = function (obj) {\n if (obj) {\n if (obj.sourceID !== undefined || obj.sourcePoint !== undefined ||\n obj.targetID !== undefined || obj.targetPoint !== undefined ||\n obj.type !== undefined) {\n obj = Connector;\n }\n else {\n obj = Node;\n }\n }\n return obj;\n};\n/** @private */\nvar flipConnector = function (connector) {\n if (!connector.sourceID && !connector.targetID) {\n var source = { x: connector.sourcePoint.x, y: connector.sourcePoint.y };\n var target = { x: connector.targetPoint.x, y: connector.targetPoint.y };\n if (connector.flip === 'Horizontal') {\n connector.sourcePoint.x = target.x;\n connector.targetPoint.x = source.x;\n }\n else if (connector.flip === 'Vertical') {\n connector.sourcePoint.y = target.y;\n connector.targetPoint.y = source.y;\n }\n else if (connector.flip === 'Both') {\n connector.sourcePoint = target;\n connector.targetPoint = source;\n }\n }\n};\n/** @private */\nvar updatePortEdges = function (portContent, flip, port) {\n var offsetX = port.offset.x;\n var offsetY = port.offset.y;\n if (flip === 'Horizontal') {\n offsetX = 1 - port.offset.x;\n offsetY = port.offset.y;\n }\n else if (flip === 'Vertical') {\n offsetX = port.offset.x;\n offsetY = 1 - port.offset.y;\n }\n else if (flip === 'Both') {\n offsetX = 1 - port.offset.x;\n offsetY = 1 - port.offset.y;\n }\n portContent.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n return portContent;\n};\n/** @private */\nvar alignElement = function (element, offsetX, offsetY, diagram, flip) {\n if (element.hasChildren()) {\n for (var _i = 0, _a = element.children; _i < _a.length; _i++) {\n var child = _a[_i];\n // 923507: Ports rotating opposite to the node rotation after Group and Flip actions\n if (!(child instanceof PathElement)) {\n child.flip = flip;\n }\n var childX = ((offsetX - child.offsetX) + offsetX);\n var childY = ((offsetY - child.offsetY) + offsetY);\n if (flip === 'Horizontal' || flip === 'Both') {\n child.offsetX = childX;\n child.flipOffset.x = childX - child.desiredSize.width / 2;\n }\n if (flip === 'Vertical' || flip === 'Both') {\n child.offsetY = childY;\n child.flipOffset.y = childY - child.desiredSize.height / 2;\n }\n if (child instanceof Canvas || child instanceof Container) {\n alignElement(child, offsetX, offsetY, diagram, flip);\n }\n child.measure(new Size(child.bounds.width, child.bounds.height));\n child.arrange(child.desiredSize);\n var node = diagram.nameTable[child.id];\n if (node) {\n diagram.updateConnectorEdges(node);\n }\n }\n }\n};\n/** @private */\nvar cloneSelectedObjects = function (diagram) {\n var nodes = diagram.selectedItems.nodes;\n var connectors = diagram.selectedItems.connectors;\n var isProtectedOnChange = 'isProtectedOnChange';\n var isEnableServerDatabind = diagram.allowServerDataBinding;\n var isProtectedOnChangeValue = diagram[isProtectedOnChange];\n diagram.protectPropertyChange(true);\n diagram.allowServerDataBinding = false;\n diagram.selectedItems.nodes = [];\n diagram.selectedItems.connectors = [];\n diagram.allowServerDataBinding = isEnableServerDatabind;\n diagram.protectPropertyChange(isProtectedOnChangeValue);\n var clonedSelectedItems = cloneObject(diagram.selectedItems);\n for (var i = 0; i < nodes.length; i++) {\n diagram.selectedItems.nodes.push(diagram.nameTable[nodes[i].id]);\n }\n for (var i = 0; i < connectors.length; i++) {\n diagram.selectedItems.connectors.push(diagram.nameTable[connectors[i].id]);\n }\n return clonedSelectedItems;\n};\n/** @private */\nvar updatePathElement = function (anglePoints, connector) {\n var pathElement = new PathElement();\n var pathseqData;\n for (var j = 0; j < anglePoints.length - 1; j++) {\n pathseqData = findPath(anglePoints[j], anglePoints[j + 1]);\n pathElement.data = pathseqData[0];\n pathElement.id = connector.id + '_' + (connector.shape.sequence);\n //Bug 860251: Bpmn message flow and sequence flow connector child path is not rendered properly.\n //To get the offset of default sequence path.\n var pathOffset = getPathOffset(anglePoints);\n pathElement.offsetX = pathOffset.x;\n pathElement.offsetY = pathOffset.y;\n pathElement.rotateAngle = 45;\n pathElement.transform = Transform.Self;\n break;\n }\n return pathElement;\n};\n/** @private */\nvar getPathOffset = function (anglePoints, connector, segmentOffset) {\n var offsetDistance = 10; // Distance from the source point\n var angle;\n var pt;\n var totalLength = 0;\n // Calculate total length of the path\n for (var i_1 = 0; i_1 < anglePoints.length - 1; i_1++) {\n totalLength += findDistance(anglePoints[parseInt(i_1.toString(), 10)], anglePoints[i_1 + 1]);\n }\n var targetLength;\n if (segmentOffset) {\n targetLength = totalLength * segmentOffset;\n }\n else {\n targetLength = (totalLength / 2) > 30 ? offsetDistance : (totalLength / 2);\n }\n // Find the segment where the position lies\n var accumulatedLength = 0;\n for (var i = 0; i < anglePoints.length - 1; i++) {\n var segmentLength = findDistance(anglePoints[parseInt(i.toString(), 10)], anglePoints[i + 1]);\n if (accumulatedLength + segmentLength >= targetLength) {\n var remainingLength = targetLength - accumulatedLength;\n angle = findAngle(anglePoints[i], anglePoints[i + 1]);\n pt = Point.transform(anglePoints[i], angle, remainingLength);\n break;\n }\n accumulatedLength += segmentLength;\n }\n return pt;\n};\n/** @private */\nvar checkPort = function (node, element) {\n if (node instanceof Node || node instanceof Connector) {\n for (var i = 0; i < node.ports.length; i++) {\n if (node.ports[i].id === element.id.split('_').splice(1).join('_')) {\n return true;\n }\n }\n }\n return false;\n};\n/** @private */\nvar findPath = function (sourcePoint, targetPoint) {\n var beginningpoint = { x: sourcePoint.x, y: sourcePoint.y };\n var distance = findDistance(sourcePoint, targetPoint);\n distance = Math.min(10, distance / 2);\n var angle = findAngle(sourcePoint, targetPoint);\n var transferpt = Point.transform({ x: beginningpoint.x, y: beginningpoint.y }, angle, distance);\n var startpoint = Point.transform({ x: transferpt.x, y: transferpt.y }, angle, -11);\n var endpoint = Point.transform({ x: startpoint.x, y: startpoint.y }, angle, 11 * 2);\n var path = 'M' + startpoint.x + ' ' + startpoint.y + ' L' + endpoint.x + ' ' + endpoint.y;\n return [path, transferpt];\n};\n/** @private */\nvar getConnectorDirection = function (src, tar) {\n if (Math.abs(tar.x - src.x) > Math.abs(tar.y - src.y)) {\n return src.x < tar.x ? 'Right' : 'Left';\n }\n else {\n return src.y < tar.y ? 'Bottom' : 'Top';\n }\n};\n/** @private */\nvar findDistance = function (point1, point2) {\n return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));\n};\n/* eslint-enable */\n/**\n * cloneBlazorObject method \\\n *\n * @returns {Object} cloneBlazorObject method .\\\n * @param { object } args - provide the args value.\n * @private\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\nfunction cloneBlazorObject(args) {\n //Removed isBlazor code\n return args;\n}\n/**\n * checkBrowserInfo method \\\n *\n * @returns {Object} checkBrowserInfo method .\\\n * @private\n */\nfunction checkBrowserInfo() {\n if ((navigator.platform.indexOf('Mac') >= 0 || navigator.platform.indexOf('iPad') >= 0\n || navigator.platform.indexOf('iPhone') >= 0 || navigator.platform.indexOf('MacIntel') >= 0)\n && (Browser.info.name === 'safari' || Browser.info.name === 'webkit')) {\n return true;\n }\n return false;\n}\n/**\n * canMeasureDecoratorPath method \\\n *\n * @returns {boolean} canMeasureDecoratorPath method .\\\n * @param { string[] } objects - provide the args value.\n * @private\n */\nfunction canMeasureDecoratorPath(objects) {\n if (objects.indexOf('shape') !== -1 || objects.indexOf('pathData') !== -1 ||\n objects.indexOf('width') !== -1 || objects.indexOf('height') !== -1) {\n return true;\n }\n return false;\n}\n/**\n * getPreviewSize method \\\n *\n * @returns {Size} getPreviewSize method .\\\n * @param { SymbolPaletteModel } sourceElement - provide the args value.\n * @param { Node } clonedObject - provide the args value.\n * @param { DiagramElement } wrapper - provide the args value.\n * @private\n */\nfunction getPreviewSize(sourceElement, clonedObject, wrapper) {\n //let previewWidth: number;\n //let previewHeight: number;\n var previewWidth = getSymbolSize(sourceElement, clonedObject, wrapper, 'width');\n var previewHeight = getSymbolSize(sourceElement, clonedObject, wrapper, 'height');\n return new Size(previewWidth, previewHeight);\n}\n/**\n * getSymbolSize method \\\n *\n * @returns {number} getSymbolSize method .\\\n * @param { SymbolPaletteModel } sourceElement - provide the sourceElement value.\n * @param { Node } clonedObject - provide the clonedObject value.\n * @param { DiagramElement } wrapper - provide the wrapper value.\n * @param { string } size - provide the size value.\n * @private\n */\nfunction getSymbolSize(sourceElement, clonedObject, wrapper, size) {\n var previewSize = 0;\n if (clonedObject.previewSize[\"\" + size] !== undefined) {\n previewSize = clonedObject.previewSize[\"\" + size];\n }\n else if (sourceElement.symbolPreview[\"\" + size] !== undefined) {\n previewSize = sourceElement.symbolPreview[\"\" + size];\n }\n else {\n previewSize = clonedObject[\"\" + size] || wrapper.actualSize[\"\" + size];\n }\n return previewSize;\n}\n/**\n * findParent method \\\n *\n * @returns {string} findParent method .\\\n * @param { Node } node - provide the clonedObject value.\n * @param { Diagram } diagram - provide the diagram element.\n * @param { string } parent - provide the parent id.\n * @private\n */\nfunction findParentInSwimlane(node, diagram, parent) {\n if (node && node.parentId) {\n node = diagram.nameTable[node.parentId];\n if (node.parentId) {\n parent = findParentInSwimlane(node, diagram, parent);\n }\n else {\n parent = node.id;\n }\n }\n return parent;\n}\n/**\n * selectionHasConnector method \\\n *\n * @returns {boolean} selectionHasConnector method .\\\n * @param { Diagram } diagram - provide the diagram element.\n * @param { selector } selector - provide the selector element.\n * @private\n */\nfunction selectionHasConnector(diagram, selector) {\n if (diagram.selectedItems.connectors.length > 1 && diagram.selectedItems.nodes.length === 0 && selector.rotateAngle !== 0) {\n return true;\n }\n return false;\n}\n/**\n * To Get connector style based on the arrow type\n * @param {FlowChartData} data - provide the flow chart data.\n * @returns {ArrowStyle} - Connector style\n */\nfunction getConnectorArrowType(data) {\n if (data.arrowType && data.arrowType.trim() !== '') {\n switch (data.arrowType) {\n case 'single-line-arrow':\n return { targetDecorator: 'Arrow', strokeWidth: 1 };\n case 'double-line-arrow':\n return { targetDecorator: 'Arrow', strokeWidth: 2 };\n case 'dotted-arrow':\n return { targetDecorator: 'Arrow', strokeDashArray: '2,2' };\n case 'single-line':\n return { targetDecorator: 'None', strokeWidth: 1 };\n case 'double-line':\n return { targetDecorator: 'None', strokeWidth: 2 };\n case 'dotted':\n return { targetDecorator: 'None', strokeDashArray: '2,2' };\n case 'wiggly-arrow':\n return { targetDecorator: 'None', strokeWidth: 1, opacity: 0 };\n default:\n return { targetDecorator: 'Arrow', strokeWidth: 1 };\n }\n }\n return { targetDecorator: 'Arrow', strokeWidth: 1 };\n}\n\nvar __extends$m = (undefined && undefined.__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$d = (undefined && undefined.__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/**\n * Defines the behavior of default IconShapes\n */\nvar IconShape = /** @__PURE__ @class */ (function (_super) {\n __extends$m(IconShape, _super);\n function IconShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$d([\n Property('None')\n ], IconShape.prototype, \"shape\", void 0);\n __decorate$d([\n Property('white')\n ], IconShape.prototype, \"fill\", void 0);\n __decorate$d([\n Property('Auto')\n ], IconShape.prototype, \"horizontalAlignment\", void 0);\n __decorate$d([\n Property('Auto')\n ], IconShape.prototype, \"verticalAlignment\", void 0);\n __decorate$d([\n Property(10)\n ], IconShape.prototype, \"width\", void 0);\n __decorate$d([\n Property(10)\n ], IconShape.prototype, \"height\", void 0);\n __decorate$d([\n Complex({ x: 0.5, y: 1 }, Point)\n ], IconShape.prototype, \"offset\", void 0);\n __decorate$d([\n Property('#1a1a1a')\n ], IconShape.prototype, \"borderColor\", void 0);\n __decorate$d([\n Property(1)\n ], IconShape.prototype, \"borderWidth\", void 0);\n __decorate$d([\n Complex({}, Margin)\n ], IconShape.prototype, \"margin\", void 0);\n __decorate$d([\n Property('')\n ], IconShape.prototype, \"pathData\", void 0);\n __decorate$d([\n Property('')\n ], IconShape.prototype, \"content\", void 0);\n __decorate$d([\n Property(0)\n ], IconShape.prototype, \"cornerRadius\", void 0);\n __decorate$d([\n Complex({ left: 2, right: 2, top: 2, bottom: 2 }, Margin)\n ], IconShape.prototype, \"padding\", void 0);\n __decorate$d([\n Property('#1a1a1a')\n ], IconShape.prototype, \"iconColor\", void 0);\n return IconShape;\n}(ChildProperty));\n\nvar __extends$n = (undefined && undefined.__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})();\n/**\n * StackPanel module is used to arrange its children in a line\n */\nvar StackPanel = /** @__PURE__ @class */ (function (_super) {\n __extends$n(StackPanel, _super);\n function StackPanel() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * Gets/Sets the orientation of the stack panel\n */\n _this.orientation = 'Vertical';\n /**\n * Not applicable for canvas\n * to avoid the child size updation with respect to parent ser true\n *\n * @private\n */\n _this.measureChildren = undefined;\n /**\n * Sets or gets whether the padding of the element needs to be measured\n *\n * @private\n */\n _this.considerPadding = true;\n return _this;\n }\n /**\n * Measures the minimum space that the panel needs \\\n *\n * @returns { Size } Measures the minimum space that the panel needs.\\\n * @param {Size} availableSize - provide the id value.\n *\n * @private\n */\n StackPanel.prototype.measure = function (availableSize) {\n var updateSize = this.orientation === 'Horizontal' ? this.updateHorizontalStack : this.updateVerticalStack;\n this.desiredSize = this.measureStackPanel(availableSize, updateSize);\n return this.desiredSize;\n };\n /**\n * Arranges the child elements of the stack panel \\\n *\n * @returns { Size } Arranges the child elements of the stack panel.\\\n * @param {Size} desiredSize - provide the id value.\n *\n * @private\n */\n StackPanel.prototype.arrange = function (desiredSize) {\n var updateSize = this.orientation === 'Horizontal' ? this.arrangeHorizontalStack : this.arrangeVerticalStack;\n this.actualSize = this.arrangeStackPanel(desiredSize, updateSize);\n this.updateBounds();\n return this.actualSize;\n };\n /**\n * Measures the minimum space that the panel needs \\\n *\n * @returns { Size } Measures the minimum space that the panel needs.\\\n * @param {Size} availableSize - provide the id value.\n * @param {Function} updateSize - provide the id value.\n *\n * @private\n */\n StackPanel.prototype.measureStackPanel = function (availableSize, updateSize) {\n var desired = undefined;\n if (this.children !== undefined && this.children.length > 0) {\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n child.parentTransform = this.rotateAngle + this.parentTransform;\n //Measure children\n if (this.measureChildren) {\n child.measure(child.desiredSize);\n }\n else {\n child.measure(availableSize);\n }\n var childSize = child.desiredSize.clone();\n //Consider Child's margin\n this.applyChildMargin(child, childSize);\n //Consider children's rotation\n if (child.rotateAngle !== 0) {\n childSize = rotateSize(childSize, child.rotateAngle);\n }\n //Measure stack panel\n if (desired === undefined) {\n desired = childSize;\n }\n else {\n if (!child.preventContainer) {\n updateSize(childSize, desired);\n }\n }\n }\n }\n desired = _super.prototype.validateDesiredSize.call(this, desired, availableSize);\n this.stretchChildren(desired);\n //Considering padding values\n if (this.considerPadding) {\n this.applyPadding(desired);\n }\n return desired;\n };\n StackPanel.prototype.arrangeStackPanel = function (desiredSize, updatePosition) {\n if (this.children !== undefined && this.children.length > 0) {\n var x = void 0;\n var y = void 0;\n x = this.offsetX - desiredSize.width * this.pivot.x + this.padding.left;\n y = this.offsetY - desiredSize.height * this.pivot.y + this.padding.top;\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n var childSize = child.desiredSize.clone();\n var rotatedSize = childSize;\n if (this.orientation === 'Vertical') {\n y += child.margin.top;\n }\n else {\n x += child.margin.left;\n }\n if (child.rotateAngle !== 0) {\n rotatedSize = rotateSize(childSize, child.rotateAngle);\n }\n var center = updatePosition(x, y, child, this, desiredSize, rotatedSize);\n _super.prototype.findChildOffsetFromCenter.call(this, child, center);\n child.arrange(childSize, true);\n if (this.orientation === 'Vertical') {\n y += rotatedSize.height + child.margin.bottom;\n }\n else {\n x += rotatedSize.width + child.margin.right;\n }\n }\n }\n return desiredSize;\n };\n StackPanel.prototype.updateHorizontalStack = function (child, parent) {\n parent.height = Math.max(child.height, parent.height);\n parent.width += child.width;\n };\n StackPanel.prototype.updateVerticalStack = function (child, parent) {\n parent.width = Math.max(child.width, parent.width);\n parent.height += child.height;\n };\n StackPanel.prototype.arrangeHorizontalStack = function (x, y, child, parent, parenBounds, childBounds) {\n var centerY = 0;\n if (child.verticalAlignment === 'Top') {\n centerY = y + child.margin.top + childBounds.height / 2;\n }\n else if (child.verticalAlignment === 'Bottom') {\n var parentBottom = parent.offsetY + parenBounds.height * (1 - parent.pivot.y);\n centerY = parentBottom - parent.padding.bottom - child.margin.bottom - childBounds.height / 2;\n }\n else {\n centerY = parent.offsetY - parenBounds.height * parent.pivot.y + parenBounds.height / 2;\n if (child.margin.top) {\n centerY = y + child.margin.top + childBounds.height / 2;\n }\n }\n return { x: x + childBounds.width / 2, y: centerY };\n };\n StackPanel.prototype.arrangeVerticalStack = function (x, y, child, parent, parentSize, childSize) {\n var centerX = 0;\n if (child.horizontalAlignment === 'Left') {\n centerX = x + child.margin.left + childSize.width / 2;\n }\n else if (child.horizontalAlignment === 'Right') {\n var parentRight = parent.offsetX + parentSize.width * (1 - parent.pivot.x);\n centerX = parentRight - parent.padding.right - child.margin.right - childSize.width / 2;\n }\n else {\n centerX = parent.offsetX - parentSize.width * parent.pivot.x + parentSize.width / 2;\n if (child.margin.left) {\n centerX = x + child.margin.left + childSize.width / 2;\n }\n }\n return { x: centerX, y: y + childSize.height / 2 };\n };\n StackPanel.prototype.stretchChildren = function (size) {\n if (this.children !== undefined && this.children.length > 0) {\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (this.orientation === 'Vertical') {\n if (child.horizontalAlignment === 'Stretch') {\n child.desiredSize.width = size.width - (child.margin.left + child.margin.right);\n }\n }\n else {\n if (child.verticalAlignment === 'Stretch') {\n child.desiredSize.height = size.height - (child.margin.top + child.margin.bottom);\n }\n }\n }\n }\n };\n StackPanel.prototype.applyChildMargin = function (child, size) {\n size.height += child.margin.top + child.margin.bottom;\n size.width += child.margin.left + child.margin.right;\n };\n return StackPanel;\n}(Container));\n\n/**\n * These utility methods help to process the data and to convert it to desired dimensions\n */\n/**\n * getULMClassifierShapes method \\\n *\n * @returns {DiagramElement} getULMClassifierShapes method .\\\n * @param { DiagramElement} content - provide the content value.\n * @param {NodeModel} node - provide the node value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\nfunction getULMClassifierShapes(content, node, diagram) {\n var classifier;\n var textWrap = 'NoWrap';\n if (node.shape.classifier === 'Class') {\n classifier = node.shape.classShape;\n }\n else if (node.shape.classifier === 'Enumeration') {\n classifier = node.shape.enumerationShape;\n }\n else if (node.shape.classifier === 'Interface') {\n classifier = node.shape.interfaceShape;\n }\n //let attributeText: string = '';\n node.container = { type: 'Stack', orientation: 'Vertical' };\n node.constraints = (NodeConstraints.Default | NodeConstraints.HideThumbs) &\n ~(NodeConstraints.Rotate | NodeConstraints.Resize);\n node.style = {\n fill: node.style.fill, strokeColor: node.style.strokeColor,\n strokeWidth: 1.5\n };\n node.children = [];\n if (node.maxWidth) {\n textWrap = 'Wrap';\n }\n var newObj = new Node(diagram, 'nodes', {\n id: node.id + '_umlClass_header',\n annotations: [\n {\n id: 'name', content: classifier.name,\n offset: { x: 0.5, y: 0.65 }, margin: { left: 10, right: 10 },\n style: {\n bold: true, fontSize: 14, color: classifier.style.color, fill: classifier.style.fill,\n textWrapping: textWrap\n }\n }, {\n content: '<<' + node.shape.classifier + '>>', margin: { left: 10, right: 10 },\n id: 'class', style: {\n fontSize: classifier.style.fontSize,\n color: classifier.style.color, fill: classifier.style.fill,\n textWrapping: textWrap\n }, offset: { x: 0.5, y: 0.3 }, constraints: AnnotationConstraints.ReadOnly\n }\n ],\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize),\n verticalAlignment: 'Stretch',\n horizontalAlignment: 'Stretch',\n style: { fill: node.style.fill, strokeColor: (node.style.strokeColor === 'black') ? '#ffffff00' : node.style.strokeColor }\n }, true);\n diagram.initObject(newObj);\n diagram.nodes.push(newObj);\n diagram.UpdateBlazorDiagramModel(newObj, 'Node');\n node.children.push(newObj.id);\n getClassNodes(node, diagram, classifier, textWrap);\n getClassMembers(node, diagram, classifier, textWrap);\n /* eslint-disable */\n node.offsetX = node.offsetX;\n node.offsetY = node.offsetY;\n node.style.fill = node.style.fill;\n node.borderColor = node.borderColor;\n diagram.initObject(node);\n /* eslint-enable */\n return content;\n}\n/**\n * getClassNodes method \\\n *\n * @returns {void} getClassNodes method .\\\n * @param { Node} node - provide the node value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {UmlClassModel} classifier - provide the classifier value.\n * @param {TextWrap} textWrap - provide the textWrap value.\n * @private\n */\nfunction getClassNodes(node, diagram, classifier, textWrap) {\n if (node.shape.classifier === 'Enumeration') {\n var member = classifier.members;\n if (member && member.length) {\n addSeparator(node, diagram);\n var memberText = '';\n for (var i = 0; i < member.length; i++) {\n var members = member[parseInt(i.toString(), 10)];\n if (members.name !== '') {\n memberText += members.name;\n }\n if (i !== member.length) {\n var style = getStyle(node, members);\n var temp = new Node(diagram, 'nodes', {\n id: randomId() + '_umlMember',\n annotations: [\n {\n id: 'name', content: memberText, offset: { x: 0, y: 0.5 },\n style: {\n bold: true, fontSize: style.fontSize, color: style.color, fill: style.fill,\n textWrapping: textWrap, italic: style.italic, fontFamily: style.fontFamily,\n whiteSpace: style.whiteSpace, textAlign: style.textAlign,\n textDecoration: style.textDecoration, textOverflow: style.textOverflow\n },\n margin: { left: 14, right: 5 }, horizontalAlignment: 'Left'\n }\n ], verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n style: {\n fill: node.style.fill, strokeColor: (node.style.strokeColor === 'black') ?\n '#ffffff00' : node.style.strokeColor, textWrapping: textWrap\n },\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize),\n minHeight: 25\n }, true);\n diagram.initObject(temp);\n diagram.nodes.push(temp);\n diagram.UpdateBlazorDiagramModel(temp, 'Node');\n node.children.push(temp.id);\n memberText = '';\n if (members.isSeparator && (i !== member.length - 1)) {\n addSeparator(node, diagram, members.separatorStyle);\n }\n //isSeperator boolean set as false whether it is set as true for last element\n if (members.isSeparator && (i === member.length - 1)) {\n members.isSeparator = false;\n }\n }\n }\n }\n }\n else {\n var attributes = classifier.attributes;\n if (attributes.length) {\n var attributeText = '';\n addSeparator(node, diagram);\n for (var i = 0; i < attributes.length; i++) {\n var text = void 0;\n var attribute = attributes[parseInt(i.toString(), 10)];\n if (attribute.scope && (attribute).scope === 'Public') {\n text = ' +';\n }\n else if (attribute.scope && attribute.scope === 'Private') {\n text = '-';\n }\n else if (attribute.scope && attribute.scope === 'Protected') {\n text = '#';\n }\n else {\n text = '~';\n }\n if (attribute.name !== '') {\n if (text) {\n attributeText += text + ' ' + attribute.name + ' ' + ': ' + attribute.type;\n }\n }\n if (i !== attributes.length) {\n var style = getStyle(node, attribute);\n var temp = new Node(diagram, 'nodes', {\n id: randomId() + '_umlProperty', style: { fill: node.style.fill,\n strokeColor: (node.style.strokeColor === 'black') ? '#ffffff00' : node.style.strokeColor },\n annotations: [\n {\n id: 'name', content: attributeText, offset: { x: 0, y: 0.5 },\n style: {\n bold: true, fontSize: style.fontSize, color: style.color, fill: style.fill,\n textWrapping: textWrap, italic: style.italic, fontFamily: style.fontFamily,\n whiteSpace: style.whiteSpace, textAlign: style.textAlign,\n textDecoration: style.textDecoration, textOverflow: style.textOverflow\n },\n margin: { left: 14, right: 5 }, horizontalAlignment: 'Left'\n }\n ], verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize),\n minHeight: 25\n }, true);\n diagram.initObject(temp);\n diagram.nodes.push(temp);\n diagram.UpdateBlazorDiagramModel(temp, 'Node');\n node.children.push(temp.id);\n attributeText = '';\n if (attribute.isSeparator && (i !== attributes.length - 1)) {\n addSeparator(node, diagram, attribute.separatorStyle);\n }\n //isSeperator boolean set as false whether it is set as true for last element\n if (attribute.isSeparator && (i === attributes.length - 1)) {\n attribute.isSeparator = false;\n }\n }\n }\n }\n }\n}\n/**\n * getClassNodesChild method - This method is utilized to dynamically add members to a UML node at runtime. \\\n *\n * @returns {void} getClassNodesChild method .\\\n * @param { Node} node - provide the node value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {UmlClassModel} classifier - provide the classifier value.\n * @param {TextWrap} textWrap - provide the textWrap value.\n * @private\n */\nfunction getClassNodesChild(node, diagram, classifier, textWrap) {\n if (node.shape.classifier === 'Enumeration') {\n var member = classifier.members;\n var memberText = '';\n // if there is no members in existing array, then the separator need to be added for new member\n if (member.length === 1) {\n var newIndex = member.length;\n addSeparatorChild(node, diagram, newIndex);\n }\n var count = 0;\n // Need to indentify the index value for newly added member\n for (var i = 0; i < member.length - 1; i++) {\n if (member[parseInt(i.toString(), 10)].isSeparator === true) {\n count++;\n }\n }\n var index = member.length + count + 1;\n //Iterate through an array of members and create each member as a child node to the UML node\n for (var i = 0; i < member.length; i++) {\n var members = member[member.length - 1];\n if (members.name !== '') {\n memberText += members.name;\n }\n if (i !== member.length) {\n var style = getStyle(node, members);\n var temp = new Node(diagram, 'nodes', {\n id: randomId() + '_umlMember',\n annotations: [\n {\n id: 'name', content: memberText, offset: { x: 0, y: 0.5 },\n style: {\n bold: true, fontSize: style.fontSize, color: style.color, fill: style.fill,\n textWrapping: textWrap, italic: style.italic, fontFamily: style.fontFamily,\n whiteSpace: style.whiteSpace, textAlign: style.textAlign,\n textDecoration: style.textDecoration, textOverflow: style.textOverflow\n },\n margin: { left: 14, right: 5 }, horizontalAlignment: 'Left'\n }\n ], verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n style: {\n fill: node.style.fill, strokeColor: (node.style.strokeColor === 'black') ?\n '#ffffff00' : node.style.strokeColor, textWrapping: textWrap\n },\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize),\n minHeight: 25\n }, true);\n temp.parentId = node.id;\n temp.umlIndex = index;\n diagram.add(temp);\n memberText = '';\n }\n break;\n }\n }\n}\n/**\n * getClassAttributesChild method - This method is utilized to dynamically add attributes to a UML node at runtime.\\\n *\n * @returns {void} getClassAttributesChild method .\\\n * @param { Node} node - provide the node value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {UmlClassModel} classifier - provide the classifier value.\n * @param {TextWrap} textWrap - provide the textWrap value.\n * @private\n */\nfunction getClassAttributesChild(node, diagram, classifier, textWrap) {\n if (classifier.attributes && classifier.attributes.length) {\n var attributes = classifier.attributes;\n var attributeText = '';\n var text = void 0;\n // if there is no attributes in existing array, then the separator need to be added for new attribute\n if (attributes.length === 1) {\n var newIndex = attributes.length;\n addSeparatorChild(node, diagram, newIndex);\n }\n var count = 0;\n // Need to indentify the index value for newly added attribute\n for (var i = 0; i < attributes.length - 1; i++) {\n if (attributes[parseInt(i.toString(), 10)].isSeparator === true) {\n count++;\n }\n }\n var index = attributes.length + count + 1;\n //Iterate through an array of attributes and create each attribute as a child node to the UML node\n for (var i = 0; i < attributes.length; i++) {\n var attribute = attributes[attributes.length - 1];\n if (attribute.scope && (attribute).scope === 'Public') {\n text = ' +';\n }\n else if (attribute.scope && attribute.scope === 'Private') {\n text = '-';\n }\n else if (attribute.scope && attribute.scope === 'Protected') {\n text = '#';\n }\n else {\n text = '~';\n }\n if (attribute.name !== '') {\n if (text) {\n attributeText += text + ' ' + attribute.name + ' ' + ': ' + attribute.type;\n }\n }\n if (i !== attributes.length) {\n var style = getStyle(node, attribute);\n var temp = new Node(diagram, 'nodes', {\n id: randomId() + '_umlProperty', style: {\n fill: node.style.fill,\n strokeColor: (node.style.strokeColor === 'black') ? '#ffffff00' : node.style.strokeColor\n },\n annotations: [\n {\n id: 'name', content: attributeText, offset: { x: 0, y: 0.5 },\n style: {\n bold: true, fontSize: style.fontSize, color: style.color, fill: style.fill,\n textWrapping: textWrap, italic: style.italic, fontFamily: style.fontFamily,\n whiteSpace: style.whiteSpace, textAlign: style.textAlign,\n textDecoration: style.textDecoration, textOverflow: style.textOverflow\n },\n margin: { left: 14, right: 5 }, horizontalAlignment: 'Left'\n }\n ], verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize),\n minHeight: 25\n }, true);\n temp.parentId = node.id;\n temp.umlIndex = index;\n diagram.add(temp);\n attributeText = '';\n }\n break;\n }\n }\n}\n/**\n * getClassMembers method \\\n *\n * @returns {void} getClassMembers method .\\\n * @param { Node} node - provide the node value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {UmlClassModel} classifier - provide the classifier value.\n * @param {TextWrap} textWrap - provide the textWrap value.\n * @private\n */\nfunction getClassMembers(node, diagram, classifier, textWrap) {\n if (classifier.methods && classifier.methods.length) {\n var methods = classifier.methods;\n addSeparator(node, diagram);\n var argumentText = '';\n var methodText = '';\n var text = void 0;\n for (var i = 0; i < methods.length; i++) {\n var method = methods[parseInt(i.toString(), 10)];\n if (method.scope && method.scope === 'Public') {\n text = ' +';\n }\n else if (method.scope && method.scope === 'Private') {\n text = '-';\n }\n else if (method.scope && method.scope === 'Protected') {\n text = '#';\n }\n else {\n text = '~';\n }\n if (method.parameters) {\n for (var j = 0; j < method.parameters.length; j++) {\n if (method.parameters[parseInt(j.toString(), 10)].type) {\n argumentText += method.parameters[parseInt(j.toString(), 10)].name + ':' + method.parameters[parseInt(j.toString(), 10)].type;\n }\n else {\n argumentText += method.parameters[parseInt(j.toString(), 10)].name;\n }\n if (j !== method.parameters.length - 1) {\n argumentText += ',';\n }\n }\n }\n if (method.name !== '') {\n if (text) {\n methodText += text + ' ' + method.name + '(' + argumentText + ')' + ' ' + ':' + ' ' + method.type;\n }\n //893885: Parameter Name in UMLClass with multiple Methods are updated wrongly\n //clear the value stored in parameter variable after each method initiaization\n argumentText = '';\n }\n if (i !== methods.length) {\n var style = getStyle(node, method);\n var temp = new Node(diagram, 'nodes', {\n id: randomId() + '_umlMethods', verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n annotations: [\n {\n id: 'name', content: methodText, offset: { x: 0, y: 0.5 },\n style: {\n bold: true, fontSize: style.fontSize, color: style.color, fill: style.fill,\n textWrapping: textWrap, italic: style.italic, fontFamily: style.fontFamily,\n whiteSpace: style.whiteSpace, textAlign: style.textAlign,\n textDecoration: style.textDecoration, textOverflow: style.textOverflow\n },\n margin: { left: 14, right: 5 }, horizontalAlignment: 'Left'\n }\n ],\n style: {\n fill: node.style.fill, strokeColor: (node.style.strokeColor === 'black') ?\n '#ffffff00' : node.style.strokeColor\n }, minHeight: 25,\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize)\n }, true);\n diagram.initObject(temp);\n diagram.nodes.push(temp);\n diagram.UpdateBlazorDiagramModel(temp, 'Node');\n node.children.push(temp.id);\n methodText = '';\n if (method.isSeparator && (i !== methods.length - 1)) {\n addSeparator(node, diagram, method.separatorStyle);\n }\n //isSeperator boolean set as false whether it is set as true for last element\n if (method.isSeparator && (i === methods.length - 1)) {\n method.isSeparator = false;\n }\n }\n }\n }\n}\n/**\n * getClassMembersChild method - This method is utilized to dynamically add methods to a UML node at runtime. \\\n *\n * @returns {void} getClassMembersChild method .\\\n * @param { Node} node - provide the node value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {UmlClassModel} classifier - provide the classifier value.\n * @param {TextWrap} textWrap - provide the textWrap value.\n * @private\n */\nfunction getClassMembersChild(node, diagram, classifier, textWrap) {\n if (classifier.methods && classifier.methods.length) {\n var methods = classifier.methods;\n var argumentText = '';\n var methodText = '';\n var text = void 0;\n var initialIndex = 1;\n var index = void 0;\n var attributeCount = 0;\n var methodCount = 0;\n var shapeModel = node.shape;\n var isClass = shapeModel.classifier === 'Class';\n var isInterface = shapeModel.classifier === 'Interface';\n var umlShape = isClass ? shapeModel.classShape : shapeModel.interfaceShape;\n // Need to indentify the index value for newly added method\n if (methods.length === 1) {\n if (umlShape.attributes.length > 0) {\n attributeCount = umlShape.attributes.filter(function (attr) { return attr.isSeparator; }).length;\n initialIndex = 1 + 1 + umlShape.attributes.length + attributeCount;\n index = initialIndex + 1;\n addSeparatorChild(node, diagram, initialIndex);\n }\n else {\n index = initialIndex + 1;\n }\n }\n // To determine the index value for adding methods, it is essential to take into account the existing attributes\n else {\n attributeCount = umlShape.attributes.filter(function (attr) { return attr.isSeparator; }).length;\n methodCount = umlShape.methods.filter(function (method) { return method.isSeparator; }).length;\n initialIndex = 1 + 1 + umlShape.attributes.length + attributeCount + umlShape.methods.length + methodCount;\n index = initialIndex + 1;\n }\n //Iterate through an array of methods and create each method as a child node to the UML node\n for (var i = 0; i < methods.length; i++) {\n var method = methods[methods.length - 1];\n if (method.scope && method.scope === 'Public') {\n text = ' +';\n }\n else if (method.scope && method.scope === 'Private') {\n text = '-';\n }\n else if (method.scope && method.scope === 'Protected') {\n text = '#';\n }\n else {\n text = '~';\n }\n if (method.parameters) {\n for (var j = 0; j < method.parameters.length; j++) {\n if (method.parameters[parseInt(j.toString(), 10)].type) {\n argumentText += method.parameters[parseInt(j.toString(), 10)].name + ':' + method.parameters[parseInt(j.toString(), 10)].type;\n }\n else {\n argumentText += method.parameters[parseInt(j.toString(), 10)].name;\n }\n if (j !== method.parameters.length - 1) {\n argumentText += ',';\n }\n }\n }\n if (method.name !== '') {\n if (text) {\n methodText += text + ' ' + method.name + '(' + argumentText + ')' + ' ' + ':' + ' ' + method.type;\n }\n }\n if (i !== methods.length) {\n var style = getStyle(node, method);\n var temp = new Node(diagram, 'nodes', {\n id: randomId() + '_umlMethods', verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n annotations: [\n {\n id: 'name', content: methodText, offset: { x: 0, y: 0.5 },\n style: {\n bold: true, fontSize: style.fontSize, color: style.color, fill: style.fill,\n textWrapping: textWrap, italic: style.italic, fontFamily: style.fontFamily,\n whiteSpace: style.whiteSpace, textAlign: style.textAlign,\n textDecoration: style.textDecoration, textOverflow: style.textOverflow\n },\n margin: { left: 14, right: 5 }, horizontalAlignment: 'Left'\n }\n ],\n style: {\n fill: node.style.fill, strokeColor: (node.style.strokeColor === 'black') ?\n '#ffffff00' : node.style.strokeColor\n }, minHeight: 25,\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize)\n }, true);\n temp.parentId = node.id;\n temp.umlIndex = index;\n diagram.add(temp);\n methodText = '';\n }\n break;\n }\n }\n}\n/**\n * addSeparator method \\\n *\n * @returns {void} addSeparator method .\\\n * @param { Node} stack - provide the stack value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {SeperatorStyle} SeperatorStyle - provide the Seperator color.\n * @private\n */\nfunction addSeparator(stack, diagram, SeperatorStyle) {\n var lineObject = new Node(diagram, 'nodes', {\n id: randomId() + '_path', height: 1, constraints: NodeConstraints.Default & ~(NodeConstraints.Select),\n verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n style: {\n strokeColor: (stack.style.strokeColor === 'black') ? '#ffffff00' : stack.style.strokeColor,\n fill: SeperatorStyle ? SeperatorStyle.fill : 'white'\n }\n }, true);\n diagram.initObject(lineObject);\n diagram.nodes.push(lineObject);\n stack.children.push(lineObject.id);\n}\n/**\n * addSeparatorChild method -This method is designed to add a separator for the newly added child type to the UML node. \\\n *\n * @returns {void} addSeparator method .\\\n * @param { Node} stack - provide the stack value.\n * @param {Diagram} diagram - provide the diagram value.\n * @param {number} newIndex - provide the index value.\n * @private\n */\nfunction addSeparatorChild(stack, diagram, newIndex) {\n var lineObject = new Node(diagram, 'nodes', {\n id: randomId() + '_path', height: 1, constraints: NodeConstraints.Default & ~(NodeConstraints.Select),\n verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n style: { strokeColor: (stack.style.strokeColor === 'black') ? '#ffffff00' : stack.style.strokeColor, fill: 'white' }\n }, true);\n lineObject.parentId = stack.id;\n lineObject.umlIndex = newIndex;\n diagram.add(lineObject);\n}\n/**\n * getStyle method \\\n *\n * @returns {TextStyleModel} addSeparator method .\\\n * @param { Node} stack - provide the stack value.\n * @param {UmlClassModel} node - provide the node value.\n * @private\n */\nfunction getStyle(stack, node) {\n var newStyle = {};\n var style = node.style;\n newStyle.fill = (style.fill !== 'transparent') ? style.fill : stack.style.fill;\n newStyle.color = style.color;\n newStyle.fontFamily = (style.fontFamily !== 'Arial') ? style.fontFamily : stack.style.fontFamily;\n newStyle.italic = style.italic;\n newStyle.bold = style.bold;\n newStyle.whiteSpace = style.whiteSpace;\n newStyle.textAlign = style.textAlign;\n newStyle.textWrapping = style.textWrapping;\n newStyle.textDecoration = style.textDecoration;\n newStyle.textOverflow = style.textOverflow;\n // newStyle.margin = style.mar\n newStyle.fontSize = (style.fontSize !== 12) ? style.fontSize : stack.style.fontSize;\n newStyle.strokeColor = (style.strokeColor !== 'black') ? style.strokeColor : stack.style.strokeColor;\n newStyle.strokeWidth = (style.strokeWidth !== 1) ? style.strokeWidth : stack.style.strokeWidth;\n return newStyle;\n}\n\nvar __extends$o = (undefined && undefined.__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$e = (undefined && undefined.__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/**\n * A collection of JSON objects where each object represents a layer.\n * Layer is a named category of diagram shapes.\n */\nvar LayoutInfo = /** @__PURE__ @class */ (function (_super) {\n __extends$o(LayoutInfo, _super);\n function LayoutInfo() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$e([\n Property('Horizontal')\n ], LayoutInfo.prototype, \"orientation\", void 0);\n __decorate$e([\n Property('Center')\n ], LayoutInfo.prototype, \"type\", void 0);\n __decorate$e([\n Property(undefined)\n ], LayoutInfo.prototype, \"offset\", void 0);\n __decorate$e([\n Property(false)\n ], LayoutInfo.prototype, \"enableRouting\", void 0);\n __decorate$e([\n Property([])\n ], LayoutInfo.prototype, \"children\", void 0);\n __decorate$e([\n Property('')\n ], LayoutInfo.prototype, \"assistants\", void 0);\n __decorate$e([\n Property('')\n ], LayoutInfo.prototype, \"level\", void 0);\n __decorate$e([\n Property('')\n ], LayoutInfo.prototype, \"hasSubTree\", void 0);\n __decorate$e([\n Property('')\n ], LayoutInfo.prototype, \"rows\", void 0);\n return LayoutInfo;\n}(ChildProperty));\n\nvar __extends$p = (undefined && undefined.__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$f = (undefined && undefined.__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};\nvar getShapeType = function (obj) {\n if (obj) {\n //Removed isBlazor code\n switch (obj.type) {\n case 'Basic':\n return BasicShape;\n case 'Flow':\n return FlowShape;\n case 'Path':\n return Path;\n case 'Image':\n return Image$1;\n case 'Text':\n return Text;\n case 'Bpmn':\n return BpmnShape;\n case 'Native':\n return Native;\n case 'HTML':\n return Html;\n case 'UmlActivity':\n return UmlActivityShape;\n case 'UmlClassifier':\n return UmlClassifierShape;\n case 'SwimLane':\n return SwimLane;\n default:\n return BasicShape;\n }\n }\n return BasicShape;\n};\n/**\n * Defines the behavior of default shape\n */\nvar Shape = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Shape, _super);\n function Shape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$f([\n Property('Basic')\n ], Shape.prototype, \"type\", void 0);\n return Shape;\n}(ChildProperty));\n/**\n * Defines the behavior of path shape\n */\nvar Path = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Path, _super);\n function Path() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * getClassName method \\\n *\n * @returns { string } toBounds method .\\\n *\n * @private\n */\n Path.prototype.getClassName = function () {\n return 'Path';\n };\n __decorate$f([\n Property('Path')\n ], Path.prototype, \"type\", void 0);\n __decorate$f([\n Property('')\n ], Path.prototype, \"data\", void 0);\n return Path;\n}(Shape));\n/**\n * Defines the behavior of Native shape\n */\nvar Native = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Native, _super);\n function Native() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class Native\n *\n * @private\n */\n Native.prototype.getClassName = function () {\n return 'Native';\n };\n __decorate$f([\n Property('Native')\n ], Native.prototype, \"type\", void 0);\n __decorate$f([\n Property('')\n ], Native.prototype, \"content\", void 0);\n __decorate$f([\n Property('Stretch')\n ], Native.prototype, \"scale\", void 0);\n return Native;\n}(Shape));\n/**\n * Defines the behavior of html shape\n */\nvar Html = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Html, _super);\n function Html() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class Html\n *\n * @private\n */\n Html.prototype.getClassName = function () {\n return 'Html';\n };\n __decorate$f([\n Property('HTML')\n ], Html.prototype, \"type\", void 0);\n __decorate$f([\n Property('')\n ], Html.prototype, \"content\", void 0);\n return Html;\n}(Shape));\n/**\n * Defines the behavior of image shape\n */\nvar Image$1 = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Image, _super);\n function Image() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class Image\n *\n * @private\n */\n Image.prototype.getClassName = function () {\n return 'Image';\n };\n __decorate$f([\n Property('Image')\n ], Image.prototype, \"type\", void 0);\n __decorate$f([\n Property('')\n ], Image.prototype, \"source\", void 0);\n __decorate$f([\n Property('None')\n ], Image.prototype, \"scale\", void 0);\n __decorate$f([\n Property('None')\n ], Image.prototype, \"align\", void 0);\n return Image;\n}(Shape));\n/**\n * Defines the behavior of the text shape\n */\nvar Text = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Text, _super);\n function Text() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class Text\n *\n * @private\n */\n Text.prototype.getClassName = function () {\n return 'Text';\n };\n __decorate$f([\n Property('Text')\n ], Text.prototype, \"type\", void 0);\n __decorate$f([\n Property('')\n ], Text.prototype, \"content\", void 0);\n __decorate$f([\n Complex({}, Margin)\n ], Text.prototype, \"margin\", void 0);\n return Text;\n}(Shape));\n/**\n * Defines the behavior of the basic shape\n */\nvar BasicShape = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BasicShape, _super);\n function BasicShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class BasicShape\n *\n * @private\n *\n */\n BasicShape.prototype.getClassName = function () {\n return 'BasicShape';\n };\n __decorate$f([\n Property('Basic')\n ], BasicShape.prototype, \"type\", void 0);\n __decorate$f([\n Property('Rectangle')\n ], BasicShape.prototype, \"shape\", void 0);\n __decorate$f([\n Property(0)\n ], BasicShape.prototype, \"cornerRadius\", void 0);\n __decorate$f([\n Collection([], Point)\n ], BasicShape.prototype, \"points\", void 0);\n return BasicShape;\n}(Shape));\n/**\n * Defines the behavior of the flow shape\n */\nvar FlowShape = /** @__PURE__ @class */ (function (_super) {\n __extends$p(FlowShape, _super);\n function FlowShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class FlowShape\n *\n * @private\n */\n FlowShape.prototype.getClassName = function () {\n return 'FlowShape';\n };\n __decorate$f([\n Property('Flow')\n ], FlowShape.prototype, \"type\", void 0);\n __decorate$f([\n Property('Terminator')\n ], FlowShape.prototype, \"shape\", void 0);\n return FlowShape;\n}(Shape));\n/**\n * Defines the behavior of the bpmn gateway shape\n */\nvar BpmnGateway = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnGateway, _super);\n function BpmnGateway() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class BpmnGateway\n *\n * @private\n */\n BpmnGateway.prototype.getClassName = function () {\n return 'BpmnGateway';\n };\n __decorate$f([\n Property('None')\n ], BpmnGateway.prototype, \"type\", void 0);\n return BpmnGateway;\n}(ChildProperty));\n/**\n * Defines the behavior of the bpmn data object\n */\nvar BpmnDataObject = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnDataObject, _super);\n function BpmnDataObject() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class BpmnDataObject\n *\n * @private\n */\n BpmnDataObject.prototype.getClassName = function () {\n return 'BpmnDataObject';\n };\n __decorate$f([\n Property('None')\n ], BpmnDataObject.prototype, \"type\", void 0);\n __decorate$f([\n Property(false)\n ], BpmnDataObject.prototype, \"collection\", void 0);\n return BpmnDataObject;\n}(ChildProperty));\n/**\n * Defines the behavior of the bpmn task shape\n */\nvar BpmnTask = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnTask, _super);\n function BpmnTask() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$f([\n Property('None')\n ], BpmnTask.prototype, \"type\", void 0);\n __decorate$f([\n Property('None')\n ], BpmnTask.prototype, \"loop\", void 0);\n __decorate$f([\n Property(false)\n ], BpmnTask.prototype, \"call\", void 0);\n __decorate$f([\n Property(false)\n ], BpmnTask.prototype, \"compensation\", void 0);\n return BpmnTask;\n}(ChildProperty));\n/**\n * Defines the behavior of the bpmn Event shape\n */\nvar BpmnEvent = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnEvent, _super);\n function BpmnEvent() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class BpmnEvent\n *\n * @private\n */\n BpmnEvent.prototype.getClassName = function () {\n return 'BpmnEvent';\n };\n __decorate$f([\n Property('Start')\n ], BpmnEvent.prototype, \"event\", void 0);\n __decorate$f([\n Property('None')\n ], BpmnEvent.prototype, \"trigger\", void 0);\n return BpmnEvent;\n}(ChildProperty));\n/**\n * Defines the behavior of the bpmn sub event\n */\nvar BpmnSubEvent = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnSubEvent, _super);\n function BpmnSubEvent() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class BpmnSubEvent\n *\n * @private\n */\n BpmnSubEvent.prototype.getClassName = function () {\n return 'BpmnSubEvent';\n };\n __decorate$f([\n Property('None')\n ], BpmnSubEvent.prototype, \"trigger\", void 0);\n __decorate$f([\n Property('Start')\n ], BpmnSubEvent.prototype, \"event\", void 0);\n __decorate$f([\n Property('')\n ], BpmnSubEvent.prototype, \"id\", void 0);\n __decorate$f([\n Complex({}, Point)\n ], BpmnSubEvent.prototype, \"offset\", void 0);\n __decorate$f([\n Collection([], ShapeAnnotation)\n ], BpmnSubEvent.prototype, \"annotations\", void 0);\n __decorate$f([\n Collection([], PointPort)\n ], BpmnSubEvent.prototype, \"ports\", void 0);\n __decorate$f([\n Property()\n ], BpmnSubEvent.prototype, \"width\", void 0);\n __decorate$f([\n Property()\n ], BpmnSubEvent.prototype, \"height\", void 0);\n __decorate$f([\n Complex({}, Margin)\n ], BpmnSubEvent.prototype, \"margin\", void 0);\n __decorate$f([\n Property('Center')\n ], BpmnSubEvent.prototype, \"horizontalAlignment\", void 0);\n __decorate$f([\n Property('Center')\n ], BpmnSubEvent.prototype, \"verticalAlignment\", void 0);\n __decorate$f([\n Property(true)\n ], BpmnSubEvent.prototype, \"visible\", void 0);\n return BpmnSubEvent;\n}(ChildProperty));\n/**\n * Defines the behavior of the BpmnTransactionSubProcess\n */\nvar BpmnTransactionSubProcess = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnTransactionSubProcess, _super);\n function BpmnTransactionSubProcess() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$f([\n Complex({ id: 'success', event: 'End', offset: { x: 1, y: 0.5 } }, BpmnSubEvent)\n ], BpmnTransactionSubProcess.prototype, \"success\", void 0);\n __decorate$f([\n Complex({ id: 'failure', event: 'Intermediate', trigger: 'Error', offset: { x: 0.25, y: 1 } }, BpmnSubEvent)\n ], BpmnTransactionSubProcess.prototype, \"failure\", void 0);\n __decorate$f([\n Complex({ id: 'cancel', event: 'Intermediate', trigger: 'Cancel', offset: { x: 0.75, y: 1 } }, BpmnSubEvent)\n ], BpmnTransactionSubProcess.prototype, \"cancel\", void 0);\n return BpmnTransactionSubProcess;\n}(ChildProperty));\n/**\n * Defines the behavior of the BPMNSubProcess\n */\nvar BpmnSubProcess = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnSubProcess, _super);\n function BpmnSubProcess() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$f([\n Property('None')\n ], BpmnSubProcess.prototype, \"type\", void 0);\n __decorate$f([\n Property(false)\n ], BpmnSubProcess.prototype, \"adhoc\", void 0);\n __decorate$f([\n Property('Default')\n ], BpmnSubProcess.prototype, \"boundary\", void 0);\n __decorate$f([\n Property(false)\n ], BpmnSubProcess.prototype, \"compensation\", void 0);\n __decorate$f([\n Property('None')\n ], BpmnSubProcess.prototype, \"loop\", void 0);\n __decorate$f([\n Property(true)\n ], BpmnSubProcess.prototype, \"collapsed\", void 0);\n __decorate$f([\n Collection([], BpmnSubEvent)\n ], BpmnSubProcess.prototype, \"events\", void 0);\n __decorate$f([\n Complex({}, BpmnTransactionSubProcess)\n ], BpmnSubProcess.prototype, \"transaction\", void 0);\n __decorate$f([\n Property(undefined)\n ], BpmnSubProcess.prototype, \"processes\", void 0);\n return BpmnSubProcess;\n}(ChildProperty));\n/**\n * Defines the behavior of the bpmn activity shape\n */\nvar BpmnActivity = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnActivity, _super);\n function BpmnActivity() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class BpmnActivity\n *\n * @private\n */\n BpmnActivity.prototype.getClassName = function () {\n return 'BpmnActivity';\n };\n __decorate$f([\n Property('Task')\n ], BpmnActivity.prototype, \"activity\", void 0);\n __decorate$f([\n Complex({}, BpmnTask)\n ], BpmnActivity.prototype, \"task\", void 0);\n __decorate$f([\n Complex({}, BpmnSubProcess)\n ], BpmnActivity.prototype, \"subProcess\", void 0);\n return BpmnActivity;\n}(ChildProperty));\n/**\n * Defines the behavior of the bpmn annotation\n * @deprecated\n */\nvar BpmnAnnotation = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnAnnotation, _super);\n // tslint:disable-next-line:no-any\n function BpmnAnnotation(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n /**\n * @private\n * Returns the name of class BpmnAnnotation\n */\n BpmnAnnotation.prototype.getClassName = function () {\n return 'BpmnAnnotation';\n };\n __decorate$f([\n Property('')\n ], BpmnAnnotation.prototype, \"text\", void 0);\n __decorate$f([\n Property('')\n ], BpmnAnnotation.prototype, \"id\", void 0);\n __decorate$f([\n Property(0)\n ], BpmnAnnotation.prototype, \"angle\", void 0);\n __decorate$f([\n Property()\n ], BpmnAnnotation.prototype, \"height\", void 0);\n __decorate$f([\n Property()\n ], BpmnAnnotation.prototype, \"width\", void 0);\n __decorate$f([\n Property(0)\n ], BpmnAnnotation.prototype, \"length\", void 0);\n return BpmnAnnotation;\n}(ChildProperty));\nvar BpmnTextAnnotation = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnTextAnnotation, _super);\n function BpmnTextAnnotation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$f([\n Property('')\n ], BpmnTextAnnotation.prototype, \"textAnnotationTarget\", void 0);\n __decorate$f([\n Property('Auto')\n ], BpmnTextAnnotation.prototype, \"textAnnotationDirection\", void 0);\n return BpmnTextAnnotation;\n}(ChildProperty));\n/**\n * Defines the behavior of the bpmn shape\n */\nvar BpmnShape = /** @__PURE__ @class */ (function (_super) {\n __extends$p(BpmnShape, _super);\n function BpmnShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class BpmnShape\n *\n * @private\n */\n BpmnShape.prototype.getClassName = function () {\n return 'BpmnShape';\n };\n __decorate$f([\n Property('Bpmn')\n ], BpmnShape.prototype, \"type\", void 0);\n __decorate$f([\n Property('Event')\n ], BpmnShape.prototype, \"shape\", void 0);\n __decorate$f([\n Complex({}, BpmnEvent)\n ], BpmnShape.prototype, \"event\", void 0);\n __decorate$f([\n Complex({}, BpmnGateway)\n ], BpmnShape.prototype, \"gateway\", void 0);\n __decorate$f([\n Complex({}, BpmnDataObject)\n ], BpmnShape.prototype, \"dataObject\", void 0);\n __decorate$f([\n Complex({}, BpmnActivity)\n ], BpmnShape.prototype, \"activity\", void 0);\n __decorate$f([\n Complex({}, BpmnAnnotation)\n ], BpmnShape.prototype, \"annotation\", void 0);\n __decorate$f([\n Collection([], BpmnAnnotation)\n ], BpmnShape.prototype, \"annotations\", void 0);\n __decorate$f([\n Complex({}, BpmnTextAnnotation)\n ], BpmnShape.prototype, \"textAnnotation\", void 0);\n return BpmnShape;\n}(Shape));\n/**\n * Defines the behavior of the UMLActivity shape\n */\nvar UmlActivityShape = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlActivityShape, _super);\n function UmlActivityShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlActivityShape\n *\n * @private\n */\n UmlActivityShape.prototype.getClassName = function () {\n return 'UmlActivityShape';\n };\n __decorate$f([\n Property('UmlActivity')\n ], UmlActivityShape.prototype, \"type\", void 0);\n __decorate$f([\n Property('Action')\n ], UmlActivityShape.prototype, \"shape\", void 0);\n return UmlActivityShape;\n}(Shape));\n/**\n * Defines the behavior of the uml class method\n */\nvar MethodArguments = /** @__PURE__ @class */ (function (_super) {\n __extends$p(MethodArguments, _super);\n function MethodArguments() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class MethodArguments\n *\n * @private\n */\n MethodArguments.prototype.getClassName = function () {\n return 'MethodArguments';\n };\n __decorate$f([\n Property('')\n ], MethodArguments.prototype, \"name\", void 0);\n __decorate$f([\n Property('')\n ], MethodArguments.prototype, \"type\", void 0);\n __decorate$f([\n Complex({}, TextStyle)\n ], MethodArguments.prototype, \"style\", void 0);\n return MethodArguments;\n}(ChildProperty));\n/**\n * Defines the behavior of the uml class attributes\n */\nvar UmlClassAttribute = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlClassAttribute, _super);\n function UmlClassAttribute() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlClassAttribute\n *\n * @private\n */\n UmlClassAttribute.prototype.getClassName = function () {\n return 'UmlClassAttribute';\n };\n __decorate$f([\n Property('Public')\n ], UmlClassAttribute.prototype, \"scope\", void 0);\n __decorate$f([\n Property(false)\n ], UmlClassAttribute.prototype, \"isSeparator\", void 0);\n __decorate$f([\n Complex({ fill: '#F9F9F9', strokeColor: '#CCCCCC' }, ShapeStyle)\n ], UmlClassAttribute.prototype, \"separatorStyle\", void 0);\n return UmlClassAttribute;\n}(MethodArguments));\n/**\n * Defines the behavior of the uml class method\n */\nvar UmlClassMethod = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlClassMethod, _super);\n function UmlClassMethod() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlClassMethod\n *\n * @private\n */\n UmlClassMethod.prototype.getClassName = function () {\n return 'UmlClassMethod';\n };\n __decorate$f([\n Collection([], MethodArguments)\n ], UmlClassMethod.prototype, \"parameters\", void 0);\n return UmlClassMethod;\n}(UmlClassAttribute));\n/**\n * Defines the behavior of the uml class shapes\n */\nvar UmlClass = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlClass, _super);\n function UmlClass() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlClass\n *\n * @private\n */\n UmlClass.prototype.getClassName = function () {\n return 'UmlClass';\n };\n __decorate$f([\n Property('')\n ], UmlClass.prototype, \"name\", void 0);\n __decorate$f([\n Collection([], UmlClassAttribute)\n ], UmlClass.prototype, \"attributes\", void 0);\n __decorate$f([\n Collection([], UmlClassMethod)\n ], UmlClass.prototype, \"methods\", void 0);\n __decorate$f([\n Complex({}, TextStyle)\n ], UmlClass.prototype, \"style\", void 0);\n return UmlClass;\n}(ChildProperty));\n/**\n * Defines the behavior of the uml interface shapes\n */\nvar UmlInterface = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlInterface, _super);\n function UmlInterface() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlInterface\n *\n * @private\n */\n UmlInterface.prototype.getClassName = function () {\n return 'UmlInterface';\n };\n __decorate$f([\n Property(false)\n ], UmlInterface.prototype, \"isSeparator\", void 0);\n __decorate$f([\n Complex({ fill: '#F9F9F9', strokeColor: '#CCCCCC' }, ShapeStyle)\n ], UmlInterface.prototype, \"separatorStyle\", void 0);\n return UmlInterface;\n}(UmlClass));\n/**\n * Defines the behavior of the uml interface shapes\n */\nvar UmlEnumerationMember = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlEnumerationMember, _super);\n function UmlEnumerationMember() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlEnumerationMember\n *\n * @private\n */\n UmlEnumerationMember.prototype.getClassName = function () {\n return 'UmlEnumerationMember';\n };\n __decorate$f([\n Property('')\n ], UmlEnumerationMember.prototype, \"name\", void 0);\n __decorate$f([\n Property('')\n ], UmlEnumerationMember.prototype, \"value\", void 0);\n __decorate$f([\n Property(false)\n ], UmlEnumerationMember.prototype, \"isSeparator\", void 0);\n __decorate$f([\n Complex({ fill: '#F9F9F9', strokeColor: '#CCCCCC' }, ShapeStyle)\n ], UmlEnumerationMember.prototype, \"separatorStyle\", void 0);\n __decorate$f([\n Complex({}, TextStyle)\n ], UmlEnumerationMember.prototype, \"style\", void 0);\n return UmlEnumerationMember;\n}(ChildProperty));\n/**\n * Defines the behavior of the uml interface shapes\n */\nvar UmlEnumeration = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlEnumeration, _super);\n function UmlEnumeration() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlEnumeration\n *\n * @private\n */\n UmlEnumeration.prototype.getClassName = function () {\n return 'UmlEnumeration';\n };\n __decorate$f([\n Property('')\n ], UmlEnumeration.prototype, \"name\", void 0);\n __decorate$f([\n Collection([], UmlEnumerationMember)\n ], UmlEnumeration.prototype, \"members\", void 0);\n __decorate$f([\n Complex({}, TextStyle)\n ], UmlEnumeration.prototype, \"style\", void 0);\n return UmlEnumeration;\n}(ChildProperty));\n/**\n * Defines the behavior of the UMLActivity shape\n */\nvar UmlClassifierShape = /** @__PURE__ @class */ (function (_super) {\n __extends$p(UmlClassifierShape, _super);\n function UmlClassifierShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlClassifierShape\n *\n * @private\n */\n UmlClassifierShape.prototype.getClassName = function () {\n return 'UmlClassifierShape';\n };\n __decorate$f([\n Property('UmlClassifier')\n ], UmlClassifierShape.prototype, \"type\", void 0);\n __decorate$f([\n Complex({}, UmlClass)\n ], UmlClassifierShape.prototype, \"classShape\", void 0);\n __decorate$f([\n Complex({}, UmlInterface)\n ], UmlClassifierShape.prototype, \"interfaceShape\", void 0);\n __decorate$f([\n Complex({}, UmlEnumeration)\n ], UmlClassifierShape.prototype, \"enumerationShape\", void 0);\n __decorate$f([\n Property('Class')\n ], UmlClassifierShape.prototype, \"classifier\", void 0);\n return UmlClassifierShape;\n}(Shape));\n/* tslint:disable */\n/**\n * Defines the behavior of the UMLActivity shape\n */\nvar DiagramShape = /** @__PURE__ @class */ (function (_super) {\n __extends$p(DiagramShape, _super);\n function DiagramShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class UmlClassifierShape\n *\n * @private\n */\n DiagramShape.prototype.getClassName = function () {\n return 'DiagramShape';\n };\n __decorate$f([\n Property('Basic')\n ], DiagramShape.prototype, \"type\", void 0);\n __decorate$f([\n Property('Rectangle')\n ], DiagramShape.prototype, \"basicShape\", void 0);\n __decorate$f([\n Property('Terminator')\n ], DiagramShape.prototype, \"flowShape\", void 0);\n __decorate$f([\n Property('Event')\n ], DiagramShape.prototype, \"bpmnShape\", void 0);\n __decorate$f([\n Property('Action')\n ], DiagramShape.prototype, \"umlActivityShape\", void 0);\n __decorate$f([\n Property('')\n ], DiagramShape.prototype, \"data\", void 0);\n __decorate$f([\n Property('')\n ], DiagramShape.prototype, \"content\", void 0);\n __decorate$f([\n Property('')\n ], DiagramShape.prototype, \"textContent\", void 0);\n __decorate$f([\n Property('Stretch')\n ], DiagramShape.prototype, \"scale\", void 0);\n __decorate$f([\n Property('')\n ], DiagramShape.prototype, \"source\", void 0);\n __decorate$f([\n Property('None')\n ], DiagramShape.prototype, \"align\", void 0);\n __decorate$f([\n Complex({}, Margin)\n ], DiagramShape.prototype, \"margin\", void 0);\n __decorate$f([\n Property(0)\n ], DiagramShape.prototype, \"cornerRadius\", void 0);\n __decorate$f([\n Collection([], Point)\n ], DiagramShape.prototype, \"points\", void 0);\n __decorate$f([\n Complex({}, BpmnDataObject)\n ], DiagramShape.prototype, \"dataObject\", void 0);\n __decorate$f([\n Complex({}, BpmnEvent)\n ], DiagramShape.prototype, \"event\", void 0);\n __decorate$f([\n Complex({}, BpmnGateway)\n ], DiagramShape.prototype, \"gateway\", void 0);\n __decorate$f([\n Collection([], BpmnAnnotation)\n ], DiagramShape.prototype, \"annotations\", void 0);\n __decorate$f([\n Complex({}, BpmnActivity)\n ], DiagramShape.prototype, \"activity\", void 0);\n __decorate$f([\n Complex({}, BpmnAnnotation)\n ], DiagramShape.prototype, \"annotation\", void 0);\n __decorate$f([\n Complex({}, UmlEnumeration)\n ], DiagramShape.prototype, \"enumerationShape\", void 0);\n __decorate$f([\n Property('Class')\n ], DiagramShape.prototype, \"classifier\", void 0);\n __decorate$f([\n Complex({}, UmlClass)\n ], DiagramShape.prototype, \"classShape\", void 0);\n __decorate$f([\n Complex({}, UmlInterface)\n ], DiagramShape.prototype, \"interfaceShape\", void 0);\n return DiagramShape;\n}(ChildProperty));\n/* tslint:enable */\n/**\n * Defines the behavior of nodes\n */\nvar Node = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Node, _super);\n function Node(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n /** @private */\n _this.isCanvasUpdate = false;\n /** @private */\n _this.status = 'None';\n /** @private */\n _this.parentId = '';\n /** @private */\n _this.processId = '';\n /** @private */\n _this.umlIndex = -1;\n /** @private */\n _this.outEdges = [];\n /** @private */\n _this.inEdges = [];\n /** @private */\n _this.isHeader = false;\n /** @private */\n _this.isLane = false;\n /** @private */\n _this.isPhase = false;\n var nodeDefault;\n if (_this.children && _this.children.length > 0) {\n nodeDefault = defaultValue;\n if (!nodeDefault.style || !nodeDefault.style.fill) {\n _this.style.fill = 'transparent';\n }\n if (!nodeDefault.style || !nodeDefault.style.strokeColor) {\n _this.style.strokeColor = 'transparent';\n }\n }\n if (_this.shape && _this.shape.type === 'UmlActivity') {\n setUMLActivityDefaults(defaultValue, _this);\n }\n if (_this.shape && _this.shape.type === 'SwimLane') {\n setSwimLaneDefaults(defaultValue, _this);\n }\n if (_this.ports && _this.ports.length) {\n setPortsEdges(_this);\n }\n return _this;\n }\n Object.defineProperty(Node.prototype, \"actualSize\", {\n /** @private */\n get: function () {\n if (this.wrapper !== null) {\n return this.wrapper.actualSize;\n }\n else {\n return new Size(this.width || 0, this.height || 0);\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Allows to initialize the UI of a node\n */\n /** @private */\n /* tslint:disable */\n // tslint:disable-next-line:no-any\n Node.prototype.init = function (diagram) {\n var content;\n if (this.shape.type !== 'SwimLane') {\n content = new DiagramElement();\n }\n else {\n content = new GridPanel();\n }\n var textStyle;\n var changedProperties = 'changedProperties';\n var oldProperties = 'oldProperties';\n this.shape[\"\" + changedProperties] = {};\n this.shape[\"\" + oldProperties] = {};\n switch (this.shape.type) {\n case 'Path':\n if ((!isBlazor() && (this.type === 'Freehand'))) {\n var path = new PathElement();\n path.data = getFreeHandPath(this.shape.points);\n content = path;\n }\n else {\n var pathContent = new PathElement();\n pathContent.data = this.shape.data;\n content = pathContent;\n }\n break;\n case 'Image':\n var imageContent = new ImageElement();\n imageContent.source = this.shape.source;\n imageContent.imageAlign = this.shape.align;\n imageContent.imageScale = this.shape.scale;\n content = imageContent;\n break;\n case 'Text':\n var textContent = new TextElement();\n textContent.content = this.shape.content;\n content = textContent;\n textStyle = this.style;\n content.style = textStyle;\n break;\n case 'Basic':\n if ((!isBlazor() && this.shape.shape === 'Rectangle')) {\n var basicshape = new DiagramElement();\n content = basicshape;\n content.cornerRadius = this.shape.cornerRadius;\n }\n else if ((!isBlazor() && this.shape.shape === 'Polygon')) {\n var path = new PathElement();\n path.data = getPolygonPath(this.shape.points);\n content = path;\n }\n else {\n var basicshape = new PathElement();\n var basicshapedata = getBasicShape(this.shape.shape);\n basicshape.data = basicshapedata;\n content = basicshape;\n }\n break;\n case 'Flow':\n var flowshape = new PathElement();\n var flowshapedata = getFlowShape(this.shape.shape);\n flowshape.data = flowshapedata;\n content = flowshape;\n break;\n case 'UmlActivity':\n var umlactivityshape = new PathElement();\n content = getUMLActivityShapes(umlactivityshape, content, this);\n break;\n case 'Bpmn':\n if (diagram.bpmnModule) {\n content = diagram.bpmnModule.initBPMNContent(content, this, diagram);\n this.wrapper.elementActions = this.wrapper.elementActions | ElementAction.ElementIsGroup;\n var subProcess = this.shape.activity.subProcess;\n if (subProcess.processes && subProcess.processes.length) {\n var children = this.shape.activity.subProcess.processes;\n for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {\n var i = children_1[_i];\n if (diagram.nameTable[\"\" + i] && (!diagram.nameTable[\"\" + i].processId || diagram.nameTable[\"\" + i].processId === this.id)) {\n diagram.nameTable[\"\" + i].processId = this.id;\n if (subProcess.collapsed) {\n diagram.updateElementVisibility(diagram.nameTable[\"\" + i].wrapper, diagram.nameTable[\"\" + i], !subProcess.collapsed);\n }\n content.children.push(diagram.nameTable[\"\" + i].wrapper);\n }\n }\n }\n }\n else {\n console.warn('[WARNING] :: Module \"BpmnDiagrams\" is not available in Diagram component! You either misspelled the module name or forgot to load it.');\n }\n break;\n case 'Native':\n var nativeContent = new DiagramNativeElement(this.id, diagram.element.id);\n nativeContent.content = this.shape.content;\n nativeContent.scale = this.shape.scale;\n content = nativeContent;\n break;\n case 'HTML':\n var htmlContent = new DiagramHtmlElement(this.id, diagram.element.id, undefined, diagram.nodeTemplate);\n if (this.shape.content && (typeof (this.shape.content) === 'string' || !diagram.isReact)) {\n htmlContent.content = this.shape.content;\n }\n else if (diagram.nodeTemplate) {\n htmlContent.isTemplate = true;\n htmlContent.template = htmlContent.content = getContent(htmlContent, true, this);\n }\n //Task 834121: Content-Security-Policy support for diagram.\n if (this.shape.content && typeof (this.shape.content) === 'function' && diagram.isReact) {\n htmlContent.isTemplate = true;\n htmlContent.templateFn = compile(this.shape.content);\n htmlContent.template = htmlContent.content = getContent(htmlContent, true, this);\n }\n content = htmlContent;\n break;\n case 'UmlClassifier':\n // let umlClassifierShape: StackPanel = new StackPanel();\n content = getULMClassifierShapes(content, this, diagram);\n break;\n case 'SwimLane':\n this.annotations = [];\n this.ports = [];\n content.cellStyle.fill = 'none';\n content.cellStyle.strokeColor = 'none';\n this.container = { type: 'Grid', orientation: this.shape.orientation };\n content.id = this.id;\n this.container.orientation = this.shape.orientation;\n this.constraints |= NodeConstraints.HideThumbs;\n initSwimLane(content, diagram, this);\n break;\n }\n content.id = this.id + '_content';\n content.relativeMode = 'Object';\n // (EJ2-56444) - Added the below code to check whether node shape type is basic and shape is rectangle.\n // This code added due to while render radial gradient in canvas mode we want to check this type and pass args according to that\n if (this.shape.type === 'Basic' && this.shape.shape === 'Rectangle') {\n content.shapeType = 'Rectangle';\n }\n else {\n content.shapeType = 'Others';\n }\n if (this.width !== undefined) {\n content.width = this.width;\n }\n content.horizontalAlignment = 'Stretch';\n if (this.height !== undefined) {\n content.height = this.height;\n }\n if (this.minHeight !== undefined) {\n content.minHeight = this.minHeight;\n }\n if (this.maxHeight !== undefined) {\n content.maxHeight = this.maxHeight;\n }\n if (this.minWidth !== undefined) {\n content.minWidth = this.minWidth;\n }\n if (this.maxWidth !== undefined) {\n content.maxWidth = this.maxWidth;\n }\n if ((!isBlazor() && this.shape.shape === 'Rectangle' && !this.shape.cornerRadius)) {\n content.isRectElement = true;\n }\n content.verticalAlignment = 'Stretch';\n if ((this.shape instanceof Text)) {\n content.margin = this.shape.margin;\n }\n // 923325: Grey area visible while drawing \"Freehand\" connector with DragSegmentThumb enabled\n if (canShadow(this) && (this.type !== 'Freehand')) {\n if ((this.constraints & NodeConstraints.Shadow) !== 0) {\n content.shadow = this.shadow;\n }\n }\n if ((this.shape.type !== 'Bpmn' || ((!isBlazor() && this.shape.shape === 'Message')) ||\n ((!isBlazor() && this.shape.shape === 'DataSource'))) && ((this.shape.type !== 'UmlActivity' || ((!isBlazor() && this.shape.shape !== 'FinalNode'))))) {\n if (this.shape.type !== 'Text') {\n content.style = this.style;\n this.oldGradientValue = (this.style.gradient) ? cloneObject(this.style.gradient) : null;\n }\n }\n if (!(this.wrapper.elementActions & ElementAction.ElementIsGroup) && this.flip === 'Horizontal' || this.flip === 'Vertical') {\n content.flip = this.flip;\n content.flipMode = this.flipMode;\n }\n return content;\n };\n /* tslint:enable */\n /** @private */\n Node.prototype.initContainer = function () {\n if (!this.id) {\n this.id = randomId();\n }\n // Creates canvas element\n var canvas;\n if (!this.container || this.shape instanceof SwimLane) {\n canvas = this.children ? new Container() : new Canvas();\n }\n else {\n switch (this.container.type) {\n case 'Canvas':\n canvas = new Canvas();\n break;\n case 'Stack':\n canvas = new StackPanel();\n break;\n case 'Grid':\n canvas = new GridPanel();\n canvas.setDefinitions(this.rows, this.columns);\n break;\n }\n }\n canvas.id = this.id;\n canvas.offsetX = this.offsetX;\n canvas.offsetY = this.offsetY;\n canvas.visible = this.visible;\n canvas.horizontalAlignment = this.horizontalAlignment;\n canvas.verticalAlignment = this.verticalAlignment;\n //903772 - Swimlane Save and Load Issue\n if (this.container && this.shape.type !== 'SwimLane') {\n canvas.width = this.width;\n canvas.height = this.height;\n if (this.container.type === 'Stack') {\n canvas.orientation = this.container.orientation;\n }\n }\n canvas.style.fill = this.backgroundColor;\n canvas.style.strokeColor = this.borderColor;\n canvas.style.strokeWidth = this.borderWidth;\n canvas.rotateAngle = this.rotateAngle;\n canvas.minHeight = this.minHeight;\n canvas.minWidth = this.minWidth;\n canvas.maxHeight = this.maxHeight;\n canvas.maxWidth = this.maxWidth;\n canvas.pivot = this.pivot;\n canvas.margin = this.margin;\n canvas.flip = this.flip;\n canvas.flipMode = this.flipMode;\n this.wrapper = canvas;\n return canvas;\n };\n /** @private */\n Node.prototype.initPorts = function (accessibilityContent, container) {\n for (var i = 0; this.ports !== undefined, i < this.ports.length; i++) {\n this.initPort(accessibilityContent, container, this.ports[parseInt(i.toString(), 10)]);\n }\n };\n /** @private */\n Node.prototype.initPort = function (accessibilityContent, container, port) {\n var canvas = this.wrapper;\n var portWrapper;\n // eslint-disable-next-line prefer-const\n portWrapper = this.initPortWrapper(port, this);\n // tslint:disable-next-line:no-any\n var wrapperContent;\n var contentAccessibility = getFunction(accessibilityContent);\n if (contentAccessibility) {\n wrapperContent = contentAccessibility(portWrapper, this);\n }\n portWrapper.description = wrapperContent ? wrapperContent : portWrapper.id;\n portWrapper.inversedAlignment = canvas.inversedAlignment;\n portWrapper.elementActions = portWrapper.elementActions | ElementAction.ElementIsPort;\n container.children.push(portWrapper);\n };\n Node.prototype.getIconOffet = function (layout, icon) {\n var x;\n var y;\n if (layout.orientation === 'BottomToTop') {\n x = icon.offset.x;\n y = 1 - icon.offset.y;\n }\n else if (layout.orientation === 'LeftToRight') {\n x = icon.offset.y;\n y = icon.offset.x;\n }\n else if (layout.orientation === 'RightToLeft') {\n x = 1 - icon.offset.y;\n y = icon.offset.x;\n }\n else {\n x = icon.offset.x;\n y = icon.offset.y;\n }\n return { x: x, y: y };\n };\n /** @private */\n Node.prototype.initIcons = function (accessibilityContent, layout, container, diagramId) {\n var canvas = this.wrapper;\n var offset;\n var icon = this.isExpanded ? this.expandIcon : this.collapseIcon;\n if (icon.shape !== 'None') {\n var iconContainer = new Canvas();\n iconContainer.float = true;\n var children = [];\n iconContainer.id = this.id + '_icon_content';\n iconContainer.children = children;\n iconContainer.height = icon.height;\n iconContainer.width = icon.width;\n iconContainer.style.strokeColor = 'transparent';\n iconContainer.margin = icon.margin;\n iconContainer.horizontalAlignment = 'Center';\n iconContainer.verticalAlignment = 'Center';\n iconContainer.visible = this.visible;\n iconContainer.cornerRadius = icon.cornerRadius;\n offset = this.getIconOffet(layout, icon);\n iconContainer.setOffsetWithRespectToBounds(offset.x, offset.y, 'Fraction');\n iconContainer.relativeMode = 'Point';\n this.initIconSymbol(icon, iconContainer, accessibilityContent, diagramId);\n // tslint:disable-next-line:no-any\n var wrapperContent = void 0;\n var contentAccessibility = getFunction(accessibilityContent);\n if (contentAccessibility) {\n wrapperContent = contentAccessibility(icon, this);\n }\n iconContainer.description = wrapperContent ? wrapperContent : iconContainer.id;\n iconContainer.inversedAlignment = canvas.inversedAlignment;\n container.children.push(iconContainer);\n }\n };\n // 882378 - Added below code to provide template support for fixedUserHandles in nodes\n /** @private */\n Node.prototype.initFixedUserHandles = function (fixedUserHandle, fixedUserHandleTemplate, diagramId) {\n var fixedUserHandleContainer;\n if (fixedUserHandle.pathData === '' && fixedUserHandleTemplate) {\n fixedUserHandleContainer = new DiagramHtmlElement(this.id, diagramId, undefined, fixedUserHandleTemplate);\n fixedUserHandleContainer.isTemplate = true;\n fixedUserHandleContainer.template = getContent(fixedUserHandleContainer, true, fixedUserHandle);\n fixedUserHandle.id = fixedUserHandle.id || randomId();\n fixedUserHandleContainer.id = this.id + '_' + fixedUserHandle.id;\n }\n else {\n var canvas = this.wrapper;\n fixedUserHandleContainer = new Canvas();\n var children = [];\n fixedUserHandleContainer.children = children;\n fixedUserHandle.id = fixedUserHandle.id || randomId();\n fixedUserHandleContainer.id = this.id + '_' + fixedUserHandle.id;\n var symbolIcon = initFixedUserHandlesSymbol(fixedUserHandle, fixedUserHandleContainer);\n fixedUserHandleContainer.children.push(symbolIcon);\n fixedUserHandleContainer.inversedAlignment = canvas.inversedAlignment;\n }\n fixedUserHandleContainer.float = true;\n fixedUserHandleContainer.height = fixedUserHandle.height;\n fixedUserHandleContainer.width = fixedUserHandle.width;\n fixedUserHandleContainer.style.strokeColor = fixedUserHandle.handleStrokeColor;\n fixedUserHandleContainer.style.fill = fixedUserHandle.fill;\n fixedUserHandleContainer.style.strokeWidth = fixedUserHandle.handleStrokeWidth;\n fixedUserHandleContainer.margin = fixedUserHandle.margin;\n fixedUserHandleContainer.visible = fixedUserHandle.visibility;\n fixedUserHandleContainer.cornerRadius = fixedUserHandle.cornerRadius;\n fixedUserHandleContainer.horizontalAlignment = 'Center';\n fixedUserHandleContainer.verticalAlignment = 'Center';\n var offset = this.getfixedUserHandleOffet(fixedUserHandle);\n fixedUserHandleContainer.setOffsetWithRespectToBounds(offset.x, offset.y, 'Fraction');\n fixedUserHandleContainer.relativeMode = 'Point';\n fixedUserHandleContainer.description = fixedUserHandleContainer.id;\n return fixedUserHandleContainer;\n };\n Node.prototype.getfixedUserHandleOffet = function (fixedUserHandle) {\n //let x: number;\n //let y: number;\n var x = fixedUserHandle.offset.x;\n var y = fixedUserHandle.offset.y;\n return { x: x, y: y };\n };\n /** @private */\n Node.prototype.initAnnotations = function (accessibilityContent, container, diagramId, virtualize, annotationTemplate) {\n var annotation;\n for (var i = 0; this.annotations !== undefined, i < this.annotations.length; i++) {\n annotation = this.initAnnotationWrapper(this.annotations[parseInt(i.toString(), 10)], diagramId, virtualize, i, annotationTemplate);\n // tslint:disable-next-line:no-any\n var wrapperContent = void 0;\n var contentAccessibility = getFunction(accessibilityContent);\n if (contentAccessibility) {\n wrapperContent = contentAccessibility(annotation, this);\n }\n annotation.description = wrapperContent ? wrapperContent : annotation.id;\n annotation.inversedAlignment = container.inversedAlignment;\n container.children.push(annotation);\n }\n };\n /** @private */\n Node.prototype.initPortWrapper = function (ports, Node) {\n ports.id = ports.id || randomId();\n // Creates port element\n var portContent = new PathElement();\n portContent.height = ports.height;\n portContent.width = ports.width;\n portContent.connectionDirection = ports.connectionDirection;\n var pathdata = (ports.shape === 'Custom') ? ports.pathData : getPortShape(ports.shape);\n portContent.id = this.id + '_' + (ports.id);\n portContent.margin = ports.margin;\n portContent.data = pathdata;\n //EJ2-826617 - For BPMN node port flip is to be defined.\n //EJ2-830012 - Complex-hierarchical tree breaks due to Node undefined\n if (Node) {\n if (Node.shape.type === 'Bpmn') {\n portContent.flip = this.flip;\n }\n }\n var style = ports.style;\n portContent.style = {\n fill: style.fill, strokeColor: style.strokeColor, gradient: null,\n opacity: style.opacity, strokeDashArray: style.strokeDashArray, strokeWidth: style.strokeWidth\n };\n portContent.horizontalAlignment = ports.horizontalAlignment;\n portContent.verticalAlignment = ports.verticalAlignment;\n if (Node && Node.flipMode !== 'Label' && Node.flipMode !== 'None') {\n portContent = updatePortEdges(portContent, this.flip, ports);\n }\n else {\n portContent = updatePortEdges(portContent, 'None', ports);\n }\n if (this.width !== undefined || this.height !== undefined) {\n portContent.float = true;\n }\n portContent.relativeMode = 'Point';\n portContent.visible = checkPortRestriction(ports, PortVisibility.Visible) &&\n !checkPortRestriction(ports, PortVisibility.Hover) && !checkPortRestriction(ports, PortVisibility.Connect) ? true : false;\n portContent.elementActions = portContent.elementActions | ElementAction.ElementIsPort;\n return portContent;\n };\n /** @private */\n Node.prototype.initAnnotationWrapper = function (annotation, diagramId, virtualize, value, annotationTemplate) {\n annotation.id = annotation.id || value + 'annotation' || randomId();\n var label = annotation;\n var annotationcontent;\n //Removed isBlazor code\n if (diagramId && (annotation.template || annotation.annotationType === 'Template'\n || (annotationTemplate && annotation.content === ''))) {\n annotationcontent = new DiagramHtmlElement(this.id, diagramId, annotation.id, annotationTemplate);\n // Task 834121: Content-Security-Policy support for diagram\n var diagramElement = document.getElementById(diagramId);\n var instance = 'ej2_instances';\n var diagram = diagramElement[\"\" + instance][0];\n if (annotation.template && typeof annotation.template === 'function' && diagram.isReact) {\n annotationcontent.templateFn = compile(annotation.template);\n annotationcontent.isTemplate = true;\n }\n annotationcontent = getTemplateContent(annotationcontent, annotation, annotationTemplate, diagram);\n }\n else {\n annotationcontent = new TextElement();\n annotationcontent.canMeasure = !virtualize;\n var style = annotation.style;\n var link = annotation.hyperlink.link ? annotation.hyperlink : undefined;\n annotationcontent.style = {\n fill: style.fill, strokeColor: style.strokeColor, strokeWidth: style.strokeWidth,\n bold: style.bold, textWrapping: style.textWrapping,\n color: link ? link.color || annotationcontent.hyperlink.color : style.color, whiteSpace: style.whiteSpace,\n fontFamily: style.fontFamily, fontSize: style.fontSize, italic: style.italic, gradient: null, opacity: style.opacity,\n strokeDashArray: style.strokeDashArray, textAlign: style.textAlign, textOverflow: annotation.style.textOverflow,\n textDecoration: link ? link.textDecoration ||\n annotationcontent.hyperlink.textDecoration : style.textDecoration\n };\n annotationcontent.hyperlink.link = annotation.hyperlink.link || undefined;\n annotationcontent.hyperlink.hyperlinkOpenState = annotation.hyperlink.hyperlinkOpenState || undefined;\n annotationcontent.hyperlink.content = annotation.hyperlink.content || undefined;\n annotationcontent.hyperlink.textDecoration = annotation.hyperlink.textDecoration || undefined;\n annotationcontent.content = link ? link.content ||\n annotationcontent.hyperlink.link : annotation.content;\n }\n annotationcontent.constraints = annotation.constraints;\n annotationcontent.height = annotation.height;\n annotationcontent.width = annotation.width;\n annotationcontent.visible = annotation.visibility;\n //Bug 855273: Annotation visible property is not working while changing node visibility at runtime\n annotationcontent.annotationVisibility = annotationcontent.visible ? 'Visible' : 'Collapsed';\n annotationcontent.rotateAngle = annotation.rotateAngle;\n annotationcontent.rotationReference = annotation.rotationReference;\n annotationcontent.id = this.id + '_' + annotation.id;\n if (this.width !== undefined && !annotation.template) {\n //910583: Annotation Wrapper updates wrongly after save and load.\n if (annotation.width === undefined) {\n if (annotation.style.textWrapping === 'Wrap' || annotation.style.textWrapping === 'WrapWithOverflow') {\n annotationcontent.width = this.width;\n }\n }\n }\n annotationcontent.margin = annotation.margin;\n annotationcontent.horizontalAlignment = annotation.horizontalAlignment;\n annotationcontent.verticalAlignment = annotation.verticalAlignment;\n annotationcontent.setOffsetWithRespectToBounds(label.offset.x, label.offset.y, 'Fraction');\n if (this.width !== undefined || this.height !== undefined) {\n annotationcontent.float = true;\n }\n annotationcontent.relativeMode = 'Point';\n return annotationcontent;\n };\n Node.prototype.initIconContainer = function (options, iconContainer) {\n var rect = new DiagramElement();\n rect.id = iconContainer.id + '_rect';\n rect.height = options.height;\n rect.width = options.width;\n rect.visible = iconContainer.visible;\n rect.margin = options.margin;\n rect.cornerRadius = options.cornerRadius;\n rect.style = {\n fill: options.fill, strokeColor: options.borderColor,\n strokeWidth: options.borderWidth\n };\n rect.setOffsetWithRespectToBounds(0.5, 0.5, 'Fraction');\n rect.horizontalAlignment = 'Center';\n rect.verticalAlignment = 'Center';\n rect.relativeMode = 'Object';\n rect.description = rect.description || 'Click here to expand or collapse';\n return rect;\n };\n Node.prototype.initIconSymbol = function (options, iconContainer, accessibilityContent, diagramId) {\n var iconContent;\n iconContainer.children.push(this.initIconContainer(options, iconContainer));\n if (options.shape === 'Template') {\n iconContent = new DiagramNativeElement(this.id, diagramId);\n iconContent.content = options.content;\n iconContent.height = 10;\n iconContent.width = 10;\n }\n else {\n iconContent = new PathElement();\n iconContent.data = getIconShape(options);\n var iconContentBounds = measurePath(iconContent.data);\n iconContent.height =\n iconContentBounds.height < 10 ? iconContentBounds.height : 10 - (options.padding.bottom + options.padding.top);\n iconContent.width =\n iconContentBounds.width < 10 ? iconContentBounds.width : 10 - (options.padding.left + options.padding.right);\n }\n iconContent.id = iconContainer.id + '_shape';\n iconContent.horizontalAlignment = 'Center';\n iconContent.verticalAlignment = 'Center';\n iconContent.visible = iconContainer.visible;\n iconContent.visible = iconContainer.visible;\n iconContent.style = {\n fill: 'black',\n strokeColor: options.iconColor,\n strokeWidth: options.borderWidth\n };\n iconContent.setOffsetWithRespectToBounds(0.5, 0.5, 'Fraction');\n iconContent.relativeMode = 'Object';\n iconContent.description = iconContainer.description || 'Click here to expand or collapse';\n iconContainer.children.push(iconContent);\n };\n /**\n * @private\n *\n * Returns the name of class Node\n */\n Node.prototype.getClassName = function () {\n return 'Node';\n };\n __decorate$f([\n Collection([], ShapeAnnotation)\n ], Node.prototype, \"annotations\", void 0);\n __decorate$f([\n Property(0)\n ], Node.prototype, \"offsetX\", void 0);\n __decorate$f([\n Complex({}, LayoutInfo)\n ], Node.prototype, \"layoutInfo\", void 0);\n __decorate$f([\n Property(0)\n ], Node.prototype, \"offsetY\", void 0);\n __decorate$f([\n Collection([], PointPort)\n ], Node.prototype, \"ports\", void 0);\n __decorate$f([\n Property(true)\n ], Node.prototype, \"isExpanded\", void 0);\n __decorate$f([\n Collection([], NodeFixedUserHandle)\n ], Node.prototype, \"fixedUserHandles\", void 0);\n __decorate$f([\n Complex({}, IconShape)\n ], Node.prototype, \"expandIcon\", void 0);\n __decorate$f([\n Complex({}, IconShape)\n ], Node.prototype, \"collapseIcon\", void 0);\n __decorate$f([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], Node.prototype, \"pivot\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"width\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"height\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"minWidth\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"minHeight\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"maxWidth\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"maxHeight\", void 0);\n __decorate$f([\n Property(0)\n ], Node.prototype, \"rotateAngle\", void 0);\n __decorate$f([\n Complex({ fill: 'white' }, TextStyle)\n ], Node.prototype, \"style\", void 0);\n __decorate$f([\n Property('transparent')\n ], Node.prototype, \"backgroundColor\", void 0);\n __decorate$f([\n Property('none')\n ], Node.prototype, \"borderColor\", void 0);\n __decorate$f([\n Property(0)\n ], Node.prototype, \"borderWidth\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"data\", void 0);\n __decorate$f([\n ComplexFactory(getShapeType)\n ], Node.prototype, \"shape\", void 0);\n __decorate$f([\n Complex({}, SymbolSize)\n ], Node.prototype, \"previewSize\", void 0);\n __decorate$f([\n Complex({}, SymbolSize)\n ], Node.prototype, \"dragSize\", void 0);\n __decorate$f([\n Property(null)\n ], Node.prototype, \"wrapper\", void 0);\n __decorate$f([\n Property(NodeConstraints.Default)\n ], Node.prototype, \"constraints\", void 0);\n __decorate$f([\n Complex({}, Shadow)\n ], Node.prototype, \"shadow\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"children\", void 0);\n __decorate$f([\n Complex({ left: 0, right: 0, top: 0, bottom: 0 }, Margin)\n ], Node.prototype, \"padding\", void 0);\n __decorate$f([\n Property(null)\n ], Node.prototype, \"container\", void 0);\n __decorate$f([\n Property('Left')\n ], Node.prototype, \"horizontalAlignment\", void 0);\n __decorate$f([\n Property('Top')\n ], Node.prototype, \"verticalAlignment\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"rows\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"columns\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"rowIndex\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"columnIndex\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"rowSpan\", void 0);\n __decorate$f([\n Property()\n ], Node.prototype, \"columnSpan\", void 0);\n __decorate$f([\n Property('')\n ], Node.prototype, \"branch\", void 0);\n return Node;\n}(NodeBase));\n/**\n * Defines the behavior of header in swimLane\n */\nvar Header = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Header, _super);\n function Header() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$f([\n Property('')\n ], Header.prototype, \"id\", void 0);\n __decorate$f([\n Complex({}, Annotation)\n ], Header.prototype, \"annotation\", void 0);\n __decorate$f([\n Complex({ fill: '#E7F4FF', strokeColor: '#CCCCCC' }, ShapeStyle)\n ], Header.prototype, \"style\", void 0);\n __decorate$f([\n Property(50)\n ], Header.prototype, \"height\", void 0);\n __decorate$f([\n Property(50)\n ], Header.prototype, \"width\", void 0);\n return Header;\n}(ChildProperty));\n/**\n * Defines the behavior of lane in swimLane\n */\nvar Lane = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Lane, _super);\n function Lane() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class Lane\n *\n * @private\n */\n Lane.prototype.getClassName = function () {\n return 'Lane';\n };\n __decorate$f([\n Property('')\n ], Lane.prototype, \"id\", void 0);\n __decorate$f([\n Complex({ fill: '#F9F9F9', strokeColor: '#CCCCCC' }, ShapeStyle)\n ], Lane.prototype, \"style\", void 0);\n __decorate$f([\n Collection([], Node)\n ], Lane.prototype, \"children\", void 0);\n __decorate$f([\n Property(100)\n ], Lane.prototype, \"height\", void 0);\n __decorate$f([\n Property(100)\n ], Lane.prototype, \"width\", void 0);\n __decorate$f([\n Complex({ style: { fill: '#E7F4FF', strokeColor: '#CCCCCC' }, annotation: { content: 'Function' } }, Header)\n ], Lane.prototype, \"header\", void 0);\n __decorate$f([\n Property(true)\n ], Lane.prototype, \"canMove\", void 0);\n __decorate$f([\n Property()\n ], Lane.prototype, \"addInfo\", void 0);\n return Lane;\n}(ChildProperty));\n/**\n * Defines the behavior of phase in swimLane\n */\nvar Phase = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Phase, _super);\n function Phase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Returns the name of class Phase\n *\n * @private\n */\n Phase.prototype.getClassName = function () {\n return 'Phase';\n };\n __decorate$f([\n Property('')\n ], Phase.prototype, \"id\", void 0);\n __decorate$f([\n Complex({ fill: '#FFFFFF', strokeColor: '#CCCCCC' }, ShapeStyle)\n ], Phase.prototype, \"style\", void 0);\n __decorate$f([\n Complex({ annotation: { content: 'Phase' } }, Header)\n ], Phase.prototype, \"header\", void 0);\n __decorate$f([\n Property(100)\n ], Phase.prototype, \"offset\", void 0);\n __decorate$f([\n Property()\n ], Phase.prototype, \"addInfo\", void 0);\n return Phase;\n}(ChildProperty));\n/**\n * Defines the behavior of swimLane shape\n */\nvar SwimLane = /** @__PURE__ @class */ (function (_super) {\n __extends$p(SwimLane, _super);\n function SwimLane() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * Defines space between children and lane\n *\n * @private\n *\n */\n _this.padding = 20;\n /**\n * Defines header by user or not\n *\n * @private\n *\n */\n _this.hasHeader = true;\n return _this;\n }\n /**\n * Returns the name of class Phase\n *\n * @private\n */\n SwimLane.prototype.getClassName = function () {\n return 'SwimLane';\n };\n __decorate$f([\n Property('SwimLane')\n ], SwimLane.prototype, \"type\", void 0);\n __decorate$f([\n Property(20)\n ], SwimLane.prototype, \"phaseSize\", void 0);\n __decorate$f([\n Collection([], Phase)\n ], SwimLane.prototype, \"phases\", void 0);\n __decorate$f([\n Property('Horizontal')\n ], SwimLane.prototype, \"orientation\", void 0);\n __decorate$f([\n Collection([], Lane)\n ], SwimLane.prototype, \"lanes\", void 0);\n __decorate$f([\n Complex({ style: { fill: '#E7F4FF', strokeColor: '#CCCCCC' }, annotation: { content: 'Function' } }, Header)\n ], SwimLane.prototype, \"header\", void 0);\n __decorate$f([\n Property(false)\n ], SwimLane.prototype, \"isLane\", void 0);\n __decorate$f([\n Property(false)\n ], SwimLane.prototype, \"isPhase\", void 0);\n return SwimLane;\n}(Shape));\n/**\n * Defines the behavior of container\n */\nvar ChildContainer = /** @__PURE__ @class */ (function () {\n function ChildContainer() {\n }\n /**\n * Returns the name of class ChildContainer\n *\n * @private\n */\n ChildContainer.prototype.getClassName = function () {\n return 'ChildContainer';\n };\n __decorate$f([\n Property('Canvas')\n ], ChildContainer.prototype, \"type\", void 0);\n __decorate$f([\n Property('Vertical')\n ], ChildContainer.prototype, \"orientation\", void 0);\n return ChildContainer;\n}());\n/**\n * Defines the size and position of selected items and defines the appearance of selector\n */\nvar Selector = /** @__PURE__ @class */ (function (_super) {\n __extends$p(Selector, _super);\n function Selector() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Initializes the UI of the container\n */\n Selector.prototype.init = function (diagram) {\n var container = new Container();\n container.measureChildren = false;\n //const consize: Size = new Size();\n container.children = [];\n if (this.annotation) {\n var object = (this.nodes.length > 0) ? diagram.nameTable[this.nodes[0].id].wrapper :\n diagram.nameTable[this.connectors[0].id].wrapper;\n var wrapper = diagram.getWrapper(object, this.annotation.id);\n container.children.push(wrapper);\n }\n else {\n if (this.nodes || this.connectors) {\n for (var i = 0; i < this.nodes.length; i++) {\n var node = diagram.nameTable[this.nodes[parseInt(i.toString(), 10)].id];\n var wrapper = node.wrapper;\n // this.width = wrapper.actualSize.width;\n // this.height = wrapper.actualSize.height;\n // this.rotateAngle = wrapper.rotateAngle;\n // this.offsetX = wrapper.offsetX;\n // this.offsetY = wrapper.offsetY;\n container.children.push(wrapper);\n }\n for (var j = 0; j < this.connectors.length; j++) {\n var connector = diagram.nameTable[this.connectors[parseInt(j.toString(), 10)].id];\n var wrapper = connector.wrapper;\n // this.width = wrapper.actualSize.width; this.height = wrapper.actualSize.height;\n // this.rotateAngle = wrapper.rotateAngle; this.offsetX = wrapper.offsetX;\n // this.offsetY = wrapper.offsetY;\n container.children.push(wrapper);\n }\n }\n }\n var isProtectedOnChange = 'isProtectedOnChange';\n var diagramProtectPropertyChange = diagram[\"\" + isProtectedOnChange];\n diagram.protectPropertyChange(false);\n this.wrapper = container;\n diagram.protectPropertyChange(diagramProtectPropertyChange);\n return container;\n };\n __decorate$f([\n Property(null)\n ], Selector.prototype, \"wrapper\", void 0);\n __decorate$f([\n Property(14)\n ], Selector.prototype, \"handleSize\", void 0);\n __decorate$f([\n Collection([], Node)\n ], Selector.prototype, \"nodes\", void 0);\n __decorate$f([\n Collection([], Connector)\n ], Selector.prototype, \"connectors\", void 0);\n __decorate$f([\n Property()\n ], Selector.prototype, \"width\", void 0);\n __decorate$f([\n Property()\n ], Selector.prototype, \"height\", void 0);\n __decorate$f([\n Property(0)\n ], Selector.prototype, \"rotateAngle\", void 0);\n __decorate$f([\n Property(0)\n ], Selector.prototype, \"offsetX\", void 0);\n __decorate$f([\n Property(0)\n ], Selector.prototype, \"offsetY\", void 0);\n __decorate$f([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], Selector.prototype, \"pivot\", void 0);\n __decorate$f([\n Property('CompleteIntersect')\n ], Selector.prototype, \"rubberBandSelectionMode\", void 0);\n __decorate$f([\n Collection([], UserHandle)\n ], Selector.prototype, \"userHandles\", void 0);\n __decorate$f([\n Property(SelectorConstraints.All)\n ], Selector.prototype, \"constraints\", void 0);\n __decorate$f([\n Property()\n ], Selector.prototype, \"setTooltipTemplate\", void 0);\n __decorate$f([\n Collection([], Node)\n ], Selector.prototype, \"selectedObjects\", void 0);\n __decorate$f([\n Property(false)\n ], Selector.prototype, \"canToggleSelection\", void 0);\n return Selector;\n}(ChildProperty));\n\n/**\n * Defines the functionalities that need to access DOM\n */\n/**\n * removeElementsByClass method \\\n *\n * @returns {void} removeElementsByClass method .\\\n * @param { string } className - provide the element value.\n * @param {string} id - provide the string value.\n * @private\n */\nfunction removeElementsByClass(className, id) {\n var elements;\n if (id && document.getElementById(id).classList.contains(className)) {\n elements = document.getElementById(id).getElementsByClassName(className);\n }\n else {\n elements = document.getElementsByClassName(className);\n }\n while (elements.length > 0) {\n elements[0].parentNode.removeChild(elements[0]);\n }\n}\n/**\n * findSegmentPoints method \\\n *\n * @returns {PointModel[]} findSegmentPoints method .\\\n * @param { PathElement } element - provide the element value.\n * @private\n */\nfunction findSegmentPoints(element) {\n var pts = [];\n var sample;\n var sampleLength;\n var measureWindowElement = 'measureElement';\n window[\"\" + measureWindowElement].style.visibility = 'visible';\n var svg = window[\"\" + measureWindowElement].children[2];\n var pathNode = getChildNode(svg)[0];\n pathNode.setAttributeNS(null, 'd', element.data);\n var pathBounds = element.absoluteBounds; // || pathNode.getBBox();\n var pathData = updatePath(element, pathBounds);\n pathNode.setAttributeNS(null, 'd', pathData);\n var pathLength = pathNode.getTotalLength();\n for (sampleLength = 0; sampleLength <= pathLength; sampleLength += 10) {\n sample = pathNode.getPointAtLength(sampleLength);\n pts.push({ x: sample.x, y: sample.y });\n }\n window[\"\" + measureWindowElement].style.visibility = 'hidden';\n return pts;\n}\n/**\n * getChildNode method \\\n *\n * @returns {SVGElement[] | HTMLCollection} findSegmentPoints method .\\\n * @param { SVGElement } node - provide the element value.\n * @private\n */\nfunction getChildNode(node) {\n var child;\n var collection = [];\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n for (var i = 0; i < node.childNodes.length; i++) {\n child = node.childNodes[parseInt(i.toString(), 10)];\n if (child.nodeType === 1) {\n collection.push(child);\n }\n }\n }\n else {\n collection = node.children;\n }\n return collection;\n}\n/**\n * translatePoints method \\\n *\n * @returns {PointModel[]} translatePoints method .\\\n * @param { SVGElement } element - provide the element value.\n * @param { PointModel[] } points - provide the element value.\n * @private\n */\nfunction translatePoints(element, points) {\n var translatedPts = [];\n //895069: Update Connector docking position in node after flipping the node\n var left = element.offsetX - element.actualSize.width * element.pivot.x;\n var top = element.offsetY - element.actualSize.height * element.pivot.y;\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n var pt1 = void 0;\n var baseX = left + point.x;\n var baseY = top + point.y;\n var flipX = left + element.actualSize.width - point.x;\n var flipY = top + element.actualSize.height - point.y;\n // 895069: Updating the node and connector's docking point for node's fliped position\n switch (element.flip) {\n case 'Both':\n pt1 = { x: flipX, y: flipY };\n break;\n case 'Horizontal':\n pt1 = { x: flipX, y: baseY };\n break;\n case 'Vertical':\n pt1 = { x: baseX, y: flipY };\n break;\n default:\n pt1 = { x: baseX, y: baseY };\n break;\n }\n var matrix = void 0;\n var angle = element.rotateAngle + element.parentTransform;\n if (angle) {\n matrix = identityMatrix();\n rotateMatrix(matrix, angle, element.offsetX, element.offsetY);\n }\n if (matrix) {\n pt1 = transformPointByMatrix(matrix, pt1);\n }\n translatedPts.push(pt1);\n }\n return translatedPts;\n}\n/**\n * measurePath method \\\n *\n * @returns {Rect} measurePath method .\\\n * @param { string } data - provide the element value.\n * @private\n */\nfunction measurePath(data) {\n if (data) {\n var measureWindowElement = 'measureElement';\n window[\"\" + measureWindowElement].style.visibility = 'visible';\n var svg = window[\"\" + measureWindowElement].children[2];\n var element = getChildNode(svg)[0];\n element.setAttribute('d', data);\n var bounds = element.getBBox();\n var svgBounds = new Rect(bounds.x, bounds.y, bounds.width, bounds.height);\n window[\"\" + measureWindowElement].style.visibility = 'hidden';\n return svgBounds;\n }\n return new Rect(0, 0, 0, 0);\n}\n/**\n * getTextOptions method \\\n *\n * @returns {BaseAttributes} getTextOptions method .\\\n * @param { TextElement } element - provide the element value.\n * @param { number } maxWidth - provide the maxWidth value.\n * @private\n */\nfunction getTextOptions(element, maxWidth) {\n var options = {\n fill: element.style.fill, stroke: element.style.strokeColor, angle: element.rotateAngle + element.parentTransform,\n pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: element.style.strokeWidth,\n dashArray: element.style.strokeDashArray, opacity: element.style.opacity, shadow: element.shadow,\n gradient: element.style.gradient, visible: element.visible, id: element.id, description: element.description,\n width: maxWidth || element.actualSize.width, height: element.actualSize.height,\n x: element.offsetX - element.actualSize.width * element.pivot.x + 0.5,\n y: element.offsetY - element.actualSize.height * element.pivot.y + 0.5\n };\n options.fontSize = element.style.fontSize;\n options.fontFamily = element.style.fontFamily;\n options.textOverflow = element.style.textOverflow;\n options.textDecoration = element.style.textDecoration;\n options.doWrap = element.doWrap;\n options.whiteSpace = whiteSpaceToString(element.style.whiteSpace, element.style.textWrapping);\n options.content = element.content;\n options.textWrapping = element.style.textWrapping;\n options.breakWord = wordBreakToString(element.style.textWrapping);\n options.textAlign = textAlignToString(element.style.textAlign);\n options.color = element.style.color;\n options.italic = element.style.italic;\n options.bold = element.style.bold;\n options.dashArray = '';\n options.strokeWidth = 0;\n options.fill = '';\n return options;\n}\n/**\n * wrapSvgText method \\\n *\n * @returns {SubTextElement[]} wrapSvgText method .\\\n * @param { TextAttributes } text - provide the element value.\n * @param { string } textValue - provide the maxWidth value.\n * @param { number } laneWidth - provide the maxWidth value.\n * @private\n */\nfunction wrapSvgText(text, textValue, laneWidth) {\n var childNodes = [];\n var k = 0;\n var txtValue;\n var bounds1;\n var content = textValue || text.content;\n if (text.whiteSpace !== 'nowrap' && text.whiteSpace !== 'pre') {\n if (text.breakWord === 'breakall') {\n txtValue = '';\n txtValue += content[0];\n for (k = 0; k < content.length; k++) {\n bounds1 = bBoxText(txtValue, text);\n if (bounds1 >= text.width && txtValue.length > 0) {\n childNodes[childNodes.length] = { text: txtValue, x: 0, dy: 0, width: bounds1 };\n txtValue = '';\n }\n else {\n txtValue = txtValue + (content[k + 1] || '');\n if (txtValue.indexOf('\\n') > -1) {\n childNodes[childNodes.length] = { text: txtValue, x: 0, dy: 0, width: bBoxText(txtValue, text) };\n txtValue = '';\n }\n var width = bBoxText(txtValue, text);\n if (Math.ceil(width) + 2 >= text.width && txtValue.length > 0) {\n childNodes[childNodes.length] = { text: txtValue, x: 0, dy: 0, width: width };\n txtValue = '';\n }\n if (k === content.length - 1 && txtValue.length > 0) {\n childNodes[childNodes.length] = { text: txtValue, x: 0, dy: 0, width: width };\n txtValue = '';\n }\n }\n }\n }\n else {\n childNodes = wordWrapping(text, textValue, laneWidth);\n }\n }\n else {\n childNodes[childNodes.length] = { text: content, x: 0, dy: 0, width: bBoxText(content, text) };\n }\n return childNodes;\n}\n/**\n * wordWrapping method \\\n *\n * @returns {SubTextElement[]} wordWrapping method .\\\n * @param { TextAttributes } text - provide the element value.\n * @param { string } textValue - provide the maxWidth value.\n * @param { number } laneWidth - provide the maxWidth value.\n * @private\n */\nfunction wordWrapping(text, textValue, laneWidth) {\n var childNodes = [];\n var txtValue = '';\n var j = 0;\n var i = 0;\n var wrap = text.whiteSpace !== 'nowrap' ? true : false;\n var content = textValue || text.content;\n var eachLine = content.split('\\n');\n var words;\n var newText;\n var existingWidth;\n var existingText;\n for (j = 0; j < eachLine.length; j++) {\n words = text.textWrapping !== 'NoWrap' ? eachLine[parseInt(j.toString(), 10)].split(' ') : (text.textWrapping === 'NoWrap') ? [eachLine[parseInt(j.toString(), 10)]] : eachLine;\n for (i = 0; i < words.length; i++) {\n txtValue += (((i !== 0 || words.length === 1) && wrap && txtValue.length > 0) ? ' ' : '') + words[parseInt(i.toString(), 10)];\n //Bug 885842: Position of annotation inside the node is not aligned center.\n //Extra space is added when we have single word as annotation text and due to this the width of the text is increased.\n if (words[i + 1]) {\n newText = txtValue + ' ' + (words[i + 1]);\n }\n else {\n newText = txtValue;\n }\n var width = bBoxText(newText, text);\n if (Math.floor(width) > (laneWidth || text.width) - 2 && txtValue.length > 0) {\n childNodes[childNodes.length] = {\n text: txtValue, x: 0, dy: 0,\n width: newText === txtValue ? width : (txtValue === existingText) ? existingWidth : bBoxText(txtValue, text)\n };\n txtValue = '';\n }\n else {\n if (i === words.length - 1) {\n childNodes[childNodes.length] = { text: txtValue, x: 0, dy: 0, width: width };\n txtValue = '';\n }\n }\n existingText = newText;\n existingWidth = width;\n }\n }\n return childNodes;\n}\n/**\n * wrapSvgTextAlign method \\\n *\n * @returns {TextBounds} wrapSvgTextAlign method .\\\n * @param { TextAttributes } text - provide the element value.\n * @param { string } childNodes - provide the maxWidth value.\n * @private\n */\nfunction wrapSvgTextAlign(text, childNodes) {\n var wrapBounds = { x: 0, width: 0 };\n var k = 0;\n var txtWidth;\n var width;\n for (k = 0; k < childNodes.length; k++) {\n txtWidth = childNodes[parseInt(k.toString(), 10)].width;\n width = txtWidth;\n //EJ2-863489 - Node annotation textAlign \"Justify\" option is not working correctly\n if (text.textAlign === 'left' || text.textAlign === 'justify') {\n txtWidth = 0;\n }\n else if (text.textAlign === 'center') {\n if (txtWidth > text.width && (text.textOverflow === 'Ellipsis' || text.textOverflow === 'Clip')) {\n txtWidth = 0;\n }\n else {\n txtWidth = -txtWidth / 2;\n }\n }\n else if (text.textAlign === 'right') {\n txtWidth = -txtWidth;\n }\n else {\n txtWidth = childNodes.length > 1 ? 0 : -txtWidth / 2;\n }\n childNodes[parseInt(k.toString(), 10)].dy = text.fontSize * 1.2;\n childNodes[parseInt(k.toString(), 10)].x = txtWidth;\n wrapBounds.x = Math.min(wrapBounds.x, txtWidth);\n wrapBounds.width = Math.max(wrapBounds.width, width);\n }\n return wrapBounds;\n}\n/**\n * measureHtmlText method \\\n *\n * @returns {TextBounds} measureHtmlText method .\\\n * @param { TextStyleModel } style - provide the style value.\n * @param { string } content - provide the content value.\n * @param { string } width - provide the width value.\n * @param { string } height - provide the height value.\n * @param { string } maxWidth - provide the maxWidth value.\n * @private\n */\nfunction measureHtmlText(style, content, width, height, maxWidth) {\n var bounds = new Size();\n var text = createHtmlElement('span', { 'style': 'display:inline-block; line-height: normal' });\n if (style.bold) {\n text.style.fontWeight = 'bold';\n }\n if (style.italic) {\n text.style.fontStyle = 'italic';\n }\n if (width !== undefined) {\n text.style.width = width.toString() + 'px';\n }\n if (height !== undefined) {\n text.style.height = height.toString() + 'px';\n }\n if (maxWidth !== undefined) {\n text.style.maxWidth = maxWidth.toString() + 'px';\n }\n text.style.fontFamily = style.fontFamily;\n text.style.fontSize = style.fontSize + 'px';\n text.style.color = style.color;\n text.textContent = content;\n text.style.whiteSpace = whiteSpaceToString(style.whiteSpace, style.textWrapping);\n if (maxWidth !== undefined) {\n text.style.wordBreak = 'break-word';\n }\n else {\n text.style.wordBreak = wordBreakToString(style.textWrapping);\n }\n document.body.appendChild(text);\n bounds.width = text.offsetWidth;\n bounds.height = text.offsetHeight;\n document.body.removeChild(text);\n return bounds;\n}\n/**\n * measureText method \\\n *\n * @returns {Size} measureText method .\\\n * @param { TextStyleModel } text - provide the text value.\n * @param { string } style - provide the style value.\n * @param { string } content - provide the content value.\n * @param { number } maxWidth - provide the maxWidth value.\n * @param { string } textValue - provide the textValue value.\n * @private\n */\nfunction measureText(text, style, content, maxWidth, textValue) {\n var bounds = new Size(0, 0);\n var childNodes;\n var wrapBounds;\n var options = getTextOptions(text, maxWidth);\n text.childNodes = childNodes = wrapSvgText(options, textValue, text.isLaneOrientation ? maxWidth : undefined);\n text.wrapBounds = wrapBounds = wrapSvgTextAlign(options, childNodes);\n bounds.width = wrapBounds.width;\n if (text.wrapBounds.width >= maxWidth && options.textOverflow !== 'Wrap') {\n bounds.width = maxWidth;\n }\n bounds.height = childNodes.length * text.style.fontSize * 1.2;\n return bounds;\n}\n/**\n * measureImage method \\\n *\n * @returns {Size} measureImage method .\\\n * @param { string } source - provide the text value.\n * @param { Size } contentSize - provide the style value.\n * @param { string } id - provide the content value.\n * @param { Function } callback - provide the maxWidth value.\n * @private\n */\n// eslint-disable-next-line\nfunction measureImage(source, contentSize, id, callback) {\n var measureWindowElement = 'measureElement';\n window[\"\" + measureWindowElement].style.visibility = 'visible';\n var imageElement = window[\"\" + measureWindowElement].children[1];\n imageElement.setAttribute('src', source);\n var bounds = imageElement.getBoundingClientRect();\n var width = bounds.width;\n var height = bounds.height;\n contentSize = new Size(width, height);\n window[\"\" + measureWindowElement].style.visibility = 'hidden';\n var element = document.createElement('img');\n element.setAttribute('src', source);\n setAttributeHtml(element, { id: id + 'sf-imageNode', style: 'display: none;' });\n document.body.appendChild(element);\n // eslint-disable-next-line\n element.onload = function (event) {\n var loadedImage = event.currentTarget;\n if (callback) {\n callback(id, { width: loadedImage.width, height: loadedImage.height });\n }\n };\n return contentSize;\n}\n/* eslint-disable */\n/**\n * measureNativeContent method \\\n *\n * @returns {Rect} measureNativeContent method .\\\n * @param { SVGElement } nativeContent - provide the text value.\n * @private\n */\nfunction measureNativeContent(nativeContent) {\n var measureWindowElement = 'measureElement';\n window[measureWindowElement].style.visibility = 'visible';\n var nativeSVG = window[measureWindowElement].children[2];\n nativeSVG.appendChild(nativeContent);\n var bounds = nativeContent.getBoundingClientRect();\n var svgBounds = nativeSVG.getBoundingClientRect();\n var rect = bounds;\n rect.x = bounds.left - svgBounds.left;\n rect.y = bounds.top - svgBounds.top;\n nativeSVG.removeChild(nativeContent);\n window[measureWindowElement].style.visibility = 'hidden';\n return rect;\n}\n/**\n * measureNativeSvg method \\\n *\n * @returns {Rect} measureNativeSvg method .\\\n * @param { SVGElement } nativeContent - provide the text value.\n * @private\n */\nfunction measureNativeSvg(nativeContent) {\n var measureWindowElement = 'measureElement';\n window[measureWindowElement].style.visibility = 'visible';\n var nativeSVG = window[measureWindowElement].children[2];\n nativeSVG.appendChild(nativeContent);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var svgBounds = nativeSVG.getBoundingClientRect();\n nativeSVG.removeChild(nativeContent);\n window[measureWindowElement].style.visibility = 'hidden';\n return svgBounds;\n}\n/**\n * updatePath method \\\n *\n * @returns {string} updatePath method .\\\n * @param { SVGElement } element - provide the element value.\n * @param { Rect } bounds - provide the bounds value.\n * @param { PathElement } child - provide the child value.\n * @param { BaseAttributes } options - provide the options value.\n * @private\n */\nfunction updatePath(element, bounds, child, options) {\n var initX = 0;\n var initY = 0;\n var scaleX = 0;\n var scaleY = 0;\n var isScale = false;\n var newPathString = '';\n var arrayCollection = [];\n var bBox = bounds;\n if (initX !== bBox.x || initY !== bBox.y) {\n scaleX = initX - Number(bBox.x);\n scaleY = initY - Number(bBox.y);\n }\n if (element.actualSize.width !== bBox.width || element.actualSize.height !== bBox.height || options) {\n scaleX = (options && options.width || element.actualSize.width) / Number(bBox.width ? bBox.width : 1);\n scaleY = (options && options.height || element.actualSize.height) / Number(bBox.height ? bBox.height : 1);\n isScale = true;\n }\n arrayCollection = processPathData(element.data);\n arrayCollection = splitArrayCollection(arrayCollection);\n newPathString = transformPath(arrayCollection, scaleX, scaleY, isScale, bBox.x, bBox.y, initX, initY);\n isScale = false;\n return newPathString;\n}\n/**\n * getDiagramLayerSvg method \\\n *\n * @returns {string} getDiagramLayerSvg method .\\\n * @param { string } diagramId - provide the element value.\n * @private\n */\nfunction getDiagramLayerSvg(diagramId) {\n //let diagramLayerSvg: SVGSVGElement;\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-diagram-layer');\n var diagramLayerSvg = elementcoll[0];\n return diagramLayerSvg;\n}\n/**\n * getDiagramElement method \\\n *\n * @returns {HTMLElement} getDiagramElement method .\\\n * @param { string } elementId - provide the elementId value.\n * @param { string } contentId - provide the elementId value.\n * @private\n */\nfunction getDiagramElement(elementId, contentId) {\n var diagramElement;\n var element;\n if (contentId) {\n element = document.getElementById(contentId);\n }\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n diagramElement = (element) ? element.querySelector('#' + elementId) : document.getElementById(elementId);\n }\n else {\n diagramElement = (element) ? element.querySelector('#' + CSS.escape(elementId)) : document.getElementById(elementId);\n }\n return diagramElement;\n}\n/**\n * getDomIndex method \\\n *\n * @returns {HTMLElement} getDomIndex method .\\\n * @param { string } viewId - provide the elementId value.\n * @param { string } elementId - provide the elementId value.\n * @param { string } layer - provide the elementId value.\n * @private\n */\nfunction getDomIndex(viewId, elementId, layer) {\n var index = undefined;\n var parentElement;\n var postId = '';\n if (layer === 'native') {\n parentElement = getNativeLayer(viewId);\n postId = '_content_groupElement';\n }\n else if (layer === 'html') {\n parentElement = getHTMLLayer(viewId).childNodes[0];\n postId = '_html_element';\n }\n else {\n parentElement = getDiagramLayer(viewId);\n postId = '_groupElement';\n }\n var childElement;\n for (var i = 0; parentElement.childNodes && i < parentElement.childNodes.length; i++) {\n childElement = parentElement.childNodes[i];\n if (childElement && childElement.id === elementId + postId) {\n index = i;\n break;\n }\n }\n return index;\n}\n/**\n * getAdornerLayerSvg method \\\n *\n * @returns {SVGSVGElement} getAdornerLayerSvg method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getAdornerLayerSvg(diagramId) {\n var adornerLayerSvg = null;\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-adorner-layer');\n adornerLayerSvg = elementcoll[0];\n return adornerLayerSvg;\n}\n/**\n * getSelectorElement method \\\n *\n * @returns {SVGSVGElement} getSelectorElement method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getSelectorElement(diagramId) {\n var adornerLayer = null;\n var adornerSvg = getAdornerLayerSvg(diagramId);\n adornerLayer = adornerSvg.getElementById(diagramId + '_SelectorElement');\n return adornerLayer;\n}\n/**\n * getAdornerLayer method \\\n *\n * @returns {SVGSVGElement} getAdornerLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getAdornerLayer(diagramId) {\n var adornerLayer = null;\n var diagramAdornerSvg = getAdornerLayerSvg(diagramId);\n adornerLayer = diagramAdornerSvg.getElementById(diagramId + '_diagramAdorner');\n return adornerLayer;\n}\n/**\n * getUserHandleLayer method \\\n *\n * @returns {HTMLElement} getUserHandleLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getUserHandleLayer(diagramId) {\n var adornerLayer = null;\n var diagramUserHandleLayer = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramUserHandleLayer.getElementsByClassName('e-userHandle-layer');\n adornerLayer = elementcoll[0];\n return adornerLayer;\n}\n/**\n * getDiagramLayer method \\\n *\n * @returns {HTMLElement} getDiagramLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getDiagramLayer(diagramId) {\n //let diagramLayer: SVGElement;\n var diagramLayerSvg = getDiagramLayerSvg(diagramId);\n var diagramLayer = diagramLayerSvg.getElementById(diagramId + '_diagramLayer');\n return diagramLayer;\n}\n/**\n * getPortLayerSvg method \\\n *\n * @returns {SVGSVGElement} getPortLayerSvg method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getPortLayerSvg(diagramId) {\n var adornerLayerSvg = null;\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-ports-expand-layer');\n adornerLayerSvg = elementcoll[0];\n return adornerLayerSvg;\n}\n/**\n * getNativeLayerSvg method \\\n *\n * @returns {SVGSVGElement} getNativeLayerSvg method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getNativeLayerSvg(diagramId) {\n var nativeLayerSvg;\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-native-layer');\n nativeLayerSvg = elementcoll[0];\n return nativeLayerSvg;\n}\n/**\n * getGridLayerSvg method \\\n *\n * @returns {SVGSVGElement} getNativeLayerSvg method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getGridLayerSvg(diagramId) {\n var gridLayerSvg = null;\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-grid-layer');\n gridLayerSvg = elementcoll[0];\n return gridLayerSvg;\n}\n/**\n * getBackgroundLayerSvg method \\\n *\n * @returns {SVGSVGElement} getBackgroundLayerSvg method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getBackgroundLayerSvg(diagramId) {\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-background-layer');\n return elementcoll[0].parentNode;\n}\n/**\n * getBackgroundImageLayer method \\\n *\n * @returns {SVGSVGElement} getBackgroundImageLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getBackgroundImageLayer(diagramId) {\n var imageLayer = null;\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-background-image-layer');\n imageLayer = elementcoll[0];\n return imageLayer;\n}\n/**\n * getBackgroundLayer method \\\n *\n * @returns {SVGSVGElement} getBackgroundLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getBackgroundLayer(diagramId) {\n var imageLayer = null;\n var diagramElement = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = diagramElement.getElementsByClassName('e-background-layer');\n imageLayer = elementcoll[0];\n return imageLayer;\n}\n/**\n * getGridLayer method \\\n *\n * @returns {SVGSVGElement} getGridLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getGridLayer(diagramId) {\n var domTable = 'domTable';\n var expandCollapse = null;\n if (!window[domTable][diagramId + '_gridline']) {\n var diagramGridSvg = getGridLayerSvg(diagramId);\n expandCollapse = diagramGridSvg.getElementById(diagramId + '_gridline');\n window[domTable][diagramId + '_gridline'] = expandCollapse;\n }\n else {\n expandCollapse = window[domTable][diagramId + '_gridline'];\n }\n return expandCollapse;\n}\n// /** @private */\n// export function getExpandCollapseLayer(diagramId: string): SVGElement {\n// let expandCollapse: SVGElement = null;\n// let diagramPortSvg: SVGSVGElement = getPortLayerSvg(diagramId);\n// expandCollapse = diagramPortSvg.getElementById(diagramId + '_diagramExpander') as SVGElement;\n// return expandCollapse;\n// }\n// /** @private */\n// export function getPortsLayer(diagramId: string): SVGElement {\n// let expandCollapse: SVGElement = null;\n// let diagramPortSvg: SVGSVGElement = getPortLayerSvg(diagramId);\n// expandCollapse = diagramPortSvg.getElementById(diagramId + '_diagramPorts') as SVGElement;\n// return expandCollapse;\n// }\n/**\n * getNativeLayer method \\\n *\n * @returns {SVGSVGElement} getNativeLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getNativeLayer(diagramId) {\n var nativeLayer = null;\n var nativeLayerSvg = getNativeLayerSvg(diagramId);\n nativeLayer = nativeLayerSvg.getElementById(diagramId + '_nativeLayer');\n return nativeLayer;\n}\n/**\n * getHTMLLayer method \\\n *\n * @returns {SVGSVGElement} getHTMLLayer method .\\\n * @param { string } diagramId - provide the diagramId value.\n * @private\n */\nfunction getHTMLLayer(diagramId) {\n var htmlLayer = null;\n var domTable = 'domTable';\n if (!window[domTable][diagramId + 'html_layer']) {\n var element = getDiagramElement(diagramId);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var elementcoll = element.getElementsByClassName('e-html-layer');\n htmlLayer = elementcoll[0];\n window[domTable][diagramId + 'html_layer'] = htmlLayer;\n }\n else {\n htmlLayer = window[domTable][diagramId + 'html_layer'];\n }\n return htmlLayer;\n}\n/* eslint-enable */\n/**\n * createHtmlElement method \\\n *\n * @returns {SVGSVGElement} createHtmlElement method .\\\n * @param { string } elementType - provide the diagramId value.\n * @param { Object } attribute - provide the diagramId value.\n * @private\n */\nfunction createHtmlElement(elementType, attribute) {\n var element = createElement(elementType);\n setAttributeHtml(element, attribute);\n return element;\n}\n/**\n * createSvgElement method \\\n *\n * @returns {SVGSVGElement} createSvgElement method .\\\n * @param { string } elementType - provide the elementType value.\n * @param { Object } attribute - provide the attribute value.\n * @private\n */\nfunction createSvgElement(elementType, attribute) {\n var element = document.createElementNS('http://www.w3.org/2000/svg', elementType);\n setAttributeSvg(element, attribute);\n return element;\n}\n/** @hidden */\n/**\n * parentsUntil method \\\n *\n * @returns {SVGSVGElement} parentsUntil method .\\\n * @param { Element } elem - provide the elementType value.\n * @param { string } selector - provide the attribute value.\n * @param { boolean } isID - provide the attribute value.\n * @private\n */\nfunction parentsUntil(elem, selector, isID) {\n var parent = elem;\n while (parent) {\n if (isID ? parent.id === selector : hasClass(parent, selector)) {\n break;\n }\n parent = parent.parentNode;\n }\n return parent;\n}\n/**\n * hasClass method \\\n *\n * @returns {SVGSVGElement} hasClass method .\\\n * @param { HTMLElement } element - provide the element value.\n * @param { string } className - provide the className value.\n * @private\n */\nfunction hasClass(element, className) {\n var eClassName = (typeof element.className === 'object') ? element.className.animVal : element.className;\n return ((' ' + eClassName + ' ').indexOf(' ' + className + ' ') > -1) ? true : false;\n}\n/**\n * getScrollerWidth method \\\n *\n * @returns {number} getScrollerWidth method .\\\n * @private\n */\nfunction getScrollerWidth() {\n var outer = createHtmlElement('div', { 'style': 'visibility:hidden; width: 100px' });\n document.body.appendChild(outer);\n var widthNoScroll = outer.getBoundingClientRect().width;\n // force scrollbars\n outer.style.overflow = 'scroll';\n // add innerdiv\n var inner = createHtmlElement('div', { 'style': 'width:100%' });\n outer.appendChild(inner);\n var widthWithScroll = inner.getBoundingClientRect().width;\n // remove divs\n outer.parentNode.removeChild(outer);\n return widthNoScroll - widthWithScroll;\n}\n/**\n * addTouchPointer method \\\n *\n * @returns {ITouches[]} addTouchPointer method .\\\n * @param { ITouches[] } touchList - provide the touchList value.\n * @param { PointerEvent } e - provide the e value.\n * @param { TouchList } touches - provide the touches value.\n * @private\n */\nfunction addTouchPointer(touchList, e, touches) {\n touchList = [];\n for (var i = 0, length_1 = touches.length; i < length_1; i++) {\n touchList.push({\n pageX: touches[parseInt(i.toString(), 10)].clientX, pageY: touches[parseInt(i.toString(), 10)].clientY,\n pointerId: null\n });\n }\n return touchList;\n}\n/**\n * removes the element from dom \\\n *\n * @returns {void} removes the element from dom .\\\n * @param { ITouches[] } elementId - provide the elementId value.\n * @param { PointerEvent } contentId - provide the contentId value.\n * @private\n */\nfunction removeElement(elementId, contentId) {\n var div = getDiagramElement(elementId, contentId);\n if (div) {\n div.parentNode.removeChild(div);\n }\n}\n/**\n * getContent method \\\n *\n * @returns {void} getContent method .\\\n * @param { DiagramHtmlElement | DiagramNativeElement } element - provide the elementId value.\n * @param { boolean } isHtml - provide the boolean value.\n * @param { Node | Annotation | PathAnnotation | NodeFixedUserHandle | ConnectorFixedUserHandle } nodeObject - provide the nodeObject value.\n * @private\n */\nfunction getContent(element, isHtml, nodeObject) {\n var div;\n /* eslint-disable */\n if (isHtml) {\n var attr = { 'style': 'height: 100%; width: 100%' };\n div = createHtmlElement('div', attr);\n }\n else {\n div = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n }\n var node = getElement(element);\n var content = '';\n var sentNode = {};\n var propertyName;\n if (node instanceof Node) {\n sentNode = node;\n if (node.shape.type === 'Native') {\n var svgContent = void 0;\n var div_1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n document.body.appendChild(div_1);\n div_1.innerHTML = (node.shape.content);\n /* tslint:disable */\n svgContent = (div_1.getElementsByTagName('svg').length > 0)\n ? div_1.getElementsByTagName('svg')[0].outerHTML :\n div_1.getElementsByTagName('g').length > 0 ? div_1.getElementsByTagName('g')[0].outerHTML : \"\";\n /* tslint:disable */\n node.shape.content = svgContent;\n /* tslint:disable */\n element.content = svgContent;\n div_1.parentElement.removeChild(div_1);\n }\n //let blazor: string = 'Blazor';\n //Removed isBlazor code\n propertyName = \"nodeTemplate\";\n }\n else {\n sentNode = node;\n //new\n //Removed isBlazor code\n propertyName = \"annotationTemplate\";\n }\n var item;\n var diagramElement = document.getElementById(element.diagramId);\n var instance = 'ej2_instances';\n var diagram = diagramElement[instance][0];\n if ((typeof element.content === 'string' || typeof element.content === 'function') && (!element.isTemplate)) {\n var template = document.getElementById(element.content);\n if (template) {\n div.appendChild(template);\n }\n else {\n /* eslint-disable */\n var compiledString = void 0;\n compiledString = compile(element.content);\n for (var _i = 0, _a = compiledString(sentNode, diagram, propertyName, content); _i < _a.length; _i++) {\n item = _a[_i];\n div.appendChild(item);\n }\n //new\n // for (item of compiledString(sentNode, null, null, content, undefined, undefined, isSvg)) {\n // div.appendChild(item);\n // }\n }\n }\n else if (element.isTemplate) {\n var compiledString = void 0;\n if (diagram.isReact) {\n compiledString = element.getNodeTemplate()(\n /* eslint-enable */\n // eslint-disable-next-line quotes\n cloneObject(nodeObject), diagram, propertyName + \"_\" + ((propertyName === \"nodeTemplate\") ? nodeObject.id : element.nodeId + nodeObject.id), undefined, undefined, false, div);\n }\n else if (diagram.isVue || diagram.isVue3) {\n // EJ2-57563 - Added the below code to provide slot template support for Vue and Vue 3\n var templateFn = element.getNodeTemplate();\n if (templateFn) {\n // If other than slot template, this if block gets execute and template get returned.\n compiledString = element.getNodeTemplate()(\n /* eslint-enable */\n // eslint-disable-next-line quotes\n cloneObject(nodeObject), diagram, propertyName + \"_\" + ((propertyName === \"nodeTemplate\") ? nodeObject.id : element.nodeId + nodeObject.id), undefined, undefined, false, div);\n }\n else {\n // If we provide slot template means then it enters in this block and returns a template\n if (propertyName === 'nodeTemplate') {\n compiledString = compile(diagram.nodeTemplate);\n }\n else {\n compiledString = compile(diagram.annotationTemplate);\n }\n compiledString = compiledString(\n /* eslint-enable */\n // eslint-disable-next-line quotes\n cloneObject(nodeObject), diagram, propertyName + \"_\" + ((propertyName === \"nodeTemplate\") ? nodeObject.id : element.nodeId + nodeObject.id), undefined, undefined, false, div);\n }\n }\n else {\n compiledString = element.getNodeTemplate()(\n /* eslint-enable */\n // eslint-disable-next-line quotes\n cloneObject(nodeObject), diagram, propertyName + \"_\" + ((propertyName === \"nodeTemplate\") ? nodeObject.id : element.nodeId + nodeObject.id), undefined, undefined, false);\n }\n if (compiledString) {\n for (var i = 0; i < compiledString.length; i++) {\n div.appendChild(compiledString[parseInt(i.toString(), 10)]);\n }\n }\n }\n else {\n if (element.content && element.content.outerHTML) {\n div.appendChild(element.content);\n }\n }\n return element.isTemplate ?\n div : (isHtml ? div.cloneNode(true) : div.cloneNode(true));\n}\n/* eslint-enable */\n/**\n * setAttributeSvg method \\\n *\n * @returns {void} setAttributeSvg method .\\\n * @param { SVGElement } svg - provide the svg value.\n * @param { Object } attributes - provide the boolean value.\n * @private\n */\nfunction setAttributeSvg(svg, attributes) {\n var keys = Object.keys(attributes);\n for (var i = 0; i < keys.length; i++) {\n // Added below condition to check whether svg is undefined or not\n if (svg && keys[parseInt(i.toString(), 10)] !== 'style') {\n svg.setAttribute(keys[parseInt(i.toString(), 10)], attributes[keys[parseInt(i.toString(), 10)]]);\n }\n else {\n applyStyleAgainstCsp(svg, attributes[keys[parseInt(i.toString(), 10)]]);\n }\n }\n}\n/**\n * applyStyleAgainstCsp method \\\n *\n * @returns {void} applyStyleAgainstCsp method .\\\n * @param { SVGElement } svg - provide the svg value.\n * @param { string } attributes - provide the boolean value.\n * @private\n */\nfunction applyStyleAgainstCsp(svg, attributes) {\n var keys = attributes.split(';');\n for (var i = 0; i < keys.length; i++) {\n var attribute = keys[parseInt(i.toString(), 10)].split(':');\n if (attribute.length === 2) {\n svg.style[attribute[0].trim()] = attribute[1].trim();\n }\n }\n}\n/**\n * setAttributeHtml method \\\n *\n * @returns {void} setAttributeHtml method .\\\n * @param { HTMLElement } element - provide the svg value.\n * @param { Object } attributes - provide the boolean value.\n * @private\n */\nfunction setAttributeHtml(element, attributes) {\n var keys = Object.keys(attributes);\n for (var i = 0; i < keys.length; i++) {\n if (keys[parseInt(i.toString(), 10)] !== 'style') {\n element.setAttribute(keys[parseInt(i.toString(), 10)], attributes[keys[parseInt(i.toString(), 10)]]);\n }\n else {\n applyStyleAgainstCsp(element, attributes[keys[parseInt(i.toString(), 10)]]);\n }\n }\n}\n/**\n * createMeasureElements method \\\n *\n * @returns {void} createMeasureElements method .\\\n * @private\n */\nfunction createMeasureElements() {\n var measureWindowElement = 'measureElement';\n if (!window[\"\" + measureWindowElement]) {\n var divElement = createHtmlElement('div', {\n id: 'measureElement',\n style: 'visibility:hidden ; height: 0px ; width: 0px; overflow: hidden;'\n });\n var text = createHtmlElement('span', { 'style': 'display:inline-block ; line-height: normal' });\n divElement.appendChild(text);\n //let imageElement: HTMLImageElement;\n var imageElement = createHtmlElement('img', { 'alt': 'measureElementImage', 'src': 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' });\n divElement.appendChild(imageElement);\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n divElement.appendChild(svg);\n var element = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n element.setAttribute('d', '');\n svg.appendChild(element);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var data = document.createTextNode('');\n var tSpan = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n svg.appendChild(tSpan);\n window[\"\" + measureWindowElement] = divElement;\n window[\"\" + measureWindowElement].usageCount = 1;\n document.body.appendChild(divElement);\n var measureElementCount = 'measureElementCount';\n if (!window[\"\" + measureElementCount]) {\n window[\"\" + measureElementCount] = 1;\n }\n else {\n window[\"\" + measureElementCount]++;\n }\n }\n else {\n window[\"\" + measureWindowElement].usageCount += 1;\n }\n}\n/**\n * setChildPosition method \\\n *\n * @returns {number} setChildPosition method .\\\n * @param {SubTextElement} temp - provide the temp value.\n * @param {SubTextElement[]} childNodes - provide the childNodes value.\n * @param {number} i - provide the i value.\n * @param {TextAttributes} options - provide the options value.\n * @private\n */\nfunction setChildPosition(temp, childNodes, i, options) {\n if (childNodes.length >= 1 && temp.x === 0 &&\n (options.textOverflow === 'Clip' || options.textOverflow === 'Ellipsis') &&\n (options.textWrapping === 'Wrap' || options.textWrapping === 'WrapWithOverflow')) {\n temp.x = childNodes[i - 1] ? childNodes[i - 1].x : -(temp.width / 2);\n return temp.x;\n }\n return temp.x;\n}\n/**\n * getTemplateContent method\\\n *\n * @returns {DiagramHtmlElement} getTemplateContent method .\\\n * @param {DiagramHtmlElement} annotationcontent - provide the annotationcontent value.\n * @param {Annotation} annotation - provide the annotation value.\n * @param {number} annotationTemplate - provide the annotationTemplate value.\n * @param {Object} diagram - provide the diagram value.\n * @private\n */\nfunction getTemplateContent(\n// eslint-disable-next-line @typescript-eslint/ban-types\nannotationcontent, annotation, annotationTemplate, diagram) {\n if ((annotationTemplate && !annotation.template) ||\n (annotation.template && typeof annotation.template === 'function' && diagram.isReact)) {\n annotationcontent.isTemplate = true;\n annotationcontent.template = annotationcontent.content = getContent(annotationcontent, true, annotation);\n }\n else {\n annotationcontent.content = annotation.template;\n }\n return annotationcontent;\n}\n/* eslint-disable */\n/** @private */\nfunction createUserHandleTemplates(userHandleTemplate, template, selectedItems, diagramID) {\n var userHandleFn;\n var handle;\n var compiledString;\n var i;\n var div;\n var diagramElement = document.getElementById(diagramID);\n var instance = 'ej2_instances';\n var diagram = diagramElement[instance][0];\n if (userHandleTemplate && template) {\n userHandleFn = templateCompiler(userHandleTemplate);\n for (var _i = 0, _a = selectedItems.userHandles; _i < _a.length; _i++) {\n handle = _a[_i];\n if (userHandleFn) {\n compiledString = userHandleFn(cloneObject(handle), diagram, 'userHandleTemplate' + '_' + handle.name, undefined, undefined, false);\n for (i = 0; i < compiledString.length; i++) {\n var attr = {\n 'style': 'height: 100%; width: 100%; pointer-events: all',\n 'id': handle.name + '_template_hiddenUserHandle'\n };\n div = createHtmlElement('div', attr);\n div.appendChild(compiledString[i]);\n }\n template[0].appendChild(div);\n }\n }\n } //Removed isBlazor code\n}\n/* eslint-enable */\n\n/**\n * Implements the basic functionalities\n */\n/**\n * Used to generate the random id \\\n *\n * @returns { boolean } Used to generate the random id .\\\n *\n * @private\n */\nfunction randomId() {\n var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';\n var id = '';\n var num;\n for (var i = 0; i < 5; i++) {\n if (typeof window !== 'undefined' && 'crypto' in window && 'getRandomValues' in crypto) {\n var count = new Uint16Array(1);\n // tslint:disable-next-line:no-any\n var intCrypto = window.msCrypto || window.crypto;\n num = intCrypto.getRandomValues(count)[0] % (chars.length - 1);\n }\n else {\n num = Math.floor(Math.random() * chars.length);\n }\n if (i === 0 && num < 10) {\n i--;\n continue;\n }\n id += chars.substring(num, num + 1);\n }\n return id;\n}\n/**\n * Used to get the index value \\\n *\n * @returns { boolean } Used to get the index value .\\\n * @param {Diagram} comp - provide the Diagram value.\n * @param {string} id - provide the id value.\n *\n * @private\n */\nfunction getIndex(comp, id) {\n if (comp.nodes && comp.nodes.length > 0) {\n for (var i = 0; i < comp.nodes.length; i++) {\n if (comp.nodes[parseInt(i.toString(), 10)].id === id) {\n return i;\n }\n }\n }\n if (comp.connectors && comp.connectors.length > 0) {\n for (var i = 0; i < comp.connectors.length; i++) {\n if (comp.connectors[parseInt(i.toString(), 10)].id === id) {\n return i;\n }\n }\n }\n return null;\n}\n/**\n * templateCompiler method\\\n *\n * @returns { Function } templateCompiler method .\\\n * @param {string} template - provide the template value.\n *\n * @private\n */\nfunction templateCompiler(template) {\n if (template) {\n try {\n if (typeof template !== 'function' && document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n else {\n return compile(template);\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n return undefined;\n}\n/**\n * cornersPointsBeforeRotation method\\\n *\n * @returns { Rect } templateCompiler method .\\\n * @param {DiagramElement} ele - provide the template value.\n *\n * @private\n */\nfunction cornersPointsBeforeRotation(ele) {\n var bounds = new Rect();\n var top = ele.offsetY - ele.actualSize.height * ele.pivot.y;\n var bottom = ele.offsetY + ele.actualSize.height * (1 - ele.pivot.y);\n var left = ele.offsetX - ele.actualSize.width * ele.pivot.x;\n var right = ele.offsetX + ele.actualSize.width * (1 - ele.pivot.x);\n var topLeft = { x: left, y: top };\n //const topCenter: PointModel = { x: (left + right) / 2, y: top };\n var topRight = { x: right, y: top };\n //const middleLeft: PointModel = { x: left, y: (top + bottom) / 2 };\n //const middleRight: PointModel = { x: right, y: (top + bottom) / 2 };\n var bottomLeft = { x: left, y: bottom };\n //const bottomCenter: PointModel = { x: (left + right) / 2, y: bottom };\n var bottomRight = { x: right, y: bottom };\n bounds = Rect.toBounds([topLeft, topRight, bottomLeft, bottomRight]);\n return bounds;\n}\n/**\n * getBounds method\\\n *\n * @returns { Rect } getBounds method .\\\n * @param {DiagramElement} element - provide the template value.\n *\n * @private\n */\nfunction getBounds(element) {\n var bounds = new Rect();\n //let corners: Rect;\n var corners = cornersPointsBeforeRotation(element);\n var middleLeft = corners.middleLeft;\n var topCenter = corners.topCenter;\n var bottomCenter = corners.bottomCenter;\n var middleRight = corners.middleRight;\n var topLeft = corners.topLeft;\n var topRight = corners.topRight;\n var bottomLeft = corners.bottomLeft;\n var bottomRight = corners.bottomRight;\n element.corners = {\n topLeft: topLeft, topCenter: topCenter, topRight: topRight, middleLeft: middleLeft,\n middleRight: middleRight, bottomLeft: bottomLeft, bottomCenter: bottomCenter, bottomRight: bottomRight\n };\n if (element.rotateAngle !== 0 || element.parentTransform !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, element.rotateAngle + element.parentTransform, element.offsetX, element.offsetY);\n element.corners.topLeft = topLeft = transformPointByMatrix(matrix, topLeft);\n element.corners.topCenter = topCenter = transformPointByMatrix(matrix, topCenter);\n element.corners.topRight = topRight = transformPointByMatrix(matrix, topRight);\n element.corners.middleLeft = middleLeft = transformPointByMatrix(matrix, middleLeft);\n element.corners.middleRight = middleRight = transformPointByMatrix(matrix, middleRight);\n element.corners.bottomLeft = bottomLeft = transformPointByMatrix(matrix, bottomLeft);\n element.corners.bottomCenter = bottomCenter = transformPointByMatrix(matrix, bottomCenter);\n element.corners.bottomRight = bottomRight = transformPointByMatrix(matrix, bottomRight);\n //Set corners based on rotate angle\n }\n bounds = Rect.toBounds([topLeft, topRight, bottomLeft, bottomRight]);\n element.corners.left = bounds.left;\n element.corners.right = bounds.right;\n element.corners.top = bounds.top;\n element.corners.bottom = bounds.bottom;\n element.corners.center = bounds.center;\n element.corners.width = bounds.width;\n element.corners.height = bounds.height;\n return bounds;\n}\n// Removed updateCloneProp method\n/**\n * cloneObject method\\\n *\n * @returns { Rect } cloneObject method .\\\n * @param {DiagramElement} obj - provide the obj value.\n * @param {DiagramElement} additionalProp - provide the additionalProp value.\n * @param {DiagramElement} key - provide the key value.\n * @param {DiagramElement} cloneBlazorProp - provide the cloneBlazorProp value.\n *\n * @private\n */\nfunction cloneObject(obj, additionalProp, key, cloneBlazorProp) {\n var newObject = {};\n var keys = 'properties';\n var prop = 'propName';\n if (obj) {\n key = obj[\"\" + prop];\n var sourceObject = obj[\"\" + keys] || obj;\n var properties = [];\n properties = properties.concat(Object.keys(sourceObject));\n var customProperties = [];\n properties.push('version');\n if (key) {\n var propAdditional = getFunction(additionalProp);\n if (propAdditional) {\n customProperties = propAdditional(key);\n }\n else {\n customProperties = [];\n }\n properties = properties.concat(customProperties);\n }\n var internalProp = getInternalProperties(key);\n properties = properties.concat(internalProp);\n //Removed blazor code\n for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {\n var property = properties_1[_i];\n if (property !== 'historyManager') {\n if (property !== 'wrapper') {\n //const constructorId: string = 'constructor';\n //const name: string = 'name';\n // eslint-disable-next-line no-prototype-builtins\n var isEventEmmitter = obj[\"\" + property] && obj.hasOwnProperty('observers') ? true : false;\n if (!isEventEmmitter) {\n if (obj[\"\" + property] instanceof Array) {\n newObject[\"\" + property] = cloneArray((internalProp.indexOf(property) === -1 && obj[\"\" + keys]) ? obj[\"\" + keys][\"\" + property] : obj[\"\" + property], additionalProp, property);\n }\n else if (obj[\"\" + property] instanceof Array === false && obj[\"\" + property] instanceof HTMLElement) {\n newObject[\"\" + property] = obj[\"\" + property].cloneNode(true).innerHTML;\n }\n else if (obj[\"\" + property] instanceof Array === false && obj[\"\" + property] instanceof Object) {\n newObject[\"\" + property] = cloneObject((internalProp.indexOf(property) === -1 && obj[\"\" + keys]) ? obj[\"\" + keys][\"\" + property] : obj[\"\" + property], undefined, undefined);\n }\n else {\n newObject[\"\" + property] = obj[\"\" + property];\n }\n }\n }\n else {\n if (obj[\"\" + property]) {\n newObject[\"\" + property] = {\n actualSize: {\n width: obj[\"\" + property].actualSize.width, height: obj[\"\" + property].actualSize.height\n }, offsetX: obj[\"\" + property].offsetX, offsetY: obj[\"\" + property].offsetY\n };\n }\n }\n }\n }\n }\n return newObject;\n}\n/**\n * getInternalProperties method\\\n *\n * @returns { string[] } getInternalProperties method .\\\n * @param {string} propName - provide the propName value.\n *\n * @private\n */\nfunction getInternalProperties(propName) {\n switch (propName) {\n case 'nodes':\n case 'children':\n return ['inEdges', 'outEdges', 'parentId', 'processId', 'nodeId', 'umlIndex', 'isPhase', 'isLane'];\n case 'connectors':\n return ['parentId'];\n case 'annotation':\n return ['nodeId'];\n case 'annotations':\n return ['nodeId'];\n case 'shape':\n return ['hasHeader'];\n case 'layers':\n return ['objectZIndex'];\n }\n return [];\n}\n/**\n * cloneArray method\\\n *\n * @returns { Object[] } getInternalProperties method .\\\n * @param {string} sourceArray - provide the sourceArray value.\n * @param {string} additionalProp - provide the additionalProp value.\n * @param {string} key - provide the key value.\n * @param {string} cloneBlazorProp - provide the cloneBlazorProp value.\n *\n * @private\n */\nfunction cloneArray(sourceArray, additionalProp, key, cloneBlazorProp) {\n var clonedArray;\n if (sourceArray) {\n clonedArray = [];\n for (var i = 0; i < sourceArray.length; i++) {\n if (sourceArray[parseInt(i.toString(), 10)] instanceof Array) {\n clonedArray.push(sourceArray[parseInt(i.toString(), 10)]);\n }\n else if (sourceArray[parseInt(i.toString(), 10)] instanceof Object) {\n clonedArray.push(cloneObject(sourceArray[parseInt(i.toString(), 10)], additionalProp, key));\n }\n else {\n clonedArray.push(sourceArray[parseInt(i.toString(), 10)]);\n }\n }\n }\n return clonedArray;\n}\n/**\n * extendObject method\\\n *\n * @returns { Object} getInternalProperties method .\\\n * @param {string} options - provide the options value.\n * @param {string} childObject - provide the childObject value.\n *\n * @private\n */\nfunction extendObject(options, childObject) {\n var properties = 'properties';\n if (options) {\n if (!childObject) {\n childObject = { properties: {} };\n }\n //const target: Object = childObject;\n for (var _i = 0, _a = Object.keys(options); _i < _a.length; _i++) {\n var property = _a[_i];\n if (options[\"\" + property] instanceof Array) {\n var extendeArray = extendArray(options[\"\" + property], childObject[\"\" + properties][\"\" + property]);\n if (!childObject[\"\" + properties][\"\" + property] || !childObject[\"\" + properties][\"\" + property].length) {\n childObject[\"\" + property] = extendeArray;\n }\n }\n else if (options[\"\" + property] instanceof Array === false && options[\"\" + property] instanceof HTMLElement) {\n childObject[\"\" + property] = options[\"\" + property].cloneNode(true).innerHtml;\n }\n else if (options[\"\" + property] instanceof Array === false && options[\"\" + property] instanceof Object) {\n var extendedObject = extendObject(options[\"\" + property], childObject[\"\" + properties][\"\" + property]);\n if (extendedObject[\"\" + properties] && !Object.keys(extendedObject[\"\" + properties]).length) {\n delete extendedObject[\"\" + properties];\n }\n childObject[\"\" + property] = extendedObject;\n }\n else {\n childObject[\"\" + property] = childObject[\"\" + properties][\"\" + property] !== undefined ?\n childObject[\"\" + property] : options[\"\" + property];\n }\n }\n }\n return childObject;\n}\n/**\n * extendObject method\\\n *\n * @returns { Object} getInternalProperties method .\\\n * @param {string} sourceArray - provide the sourceArray value.\n * @param {string} childArray - provide the childArray value.\n *\n * @private\n */\nfunction extendArray(sourceArray, childArray) {\n var clonedArray = [];\n var reset = false;\n if (!childArray) {\n childArray = [];\n }\n if (!childArray.length) {\n reset = true;\n }\n for (var i = 0; i < sourceArray.length; i++) {\n if (sourceArray[parseInt(i.toString(), 10)] instanceof Array) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var extendedArray = extendArray(sourceArray[parseInt(i.toString(), 10)], childArray[parseInt(i.toString(), 10)]);\n if (reset) {\n clonedArray.push(extendArray);\n }\n }\n else if (sourceArray[parseInt(i.toString(), 10)] instanceof Object) {\n var extendedObject = extendObject(sourceArray[parseInt(i.toString(), 10)], childArray[parseInt(i.toString(), 10)]);\n if (reset) {\n clonedArray.push(extendedObject);\n }\n }\n else {\n clonedArray.push(sourceArray[parseInt(i.toString(), 10)]);\n }\n }\n return clonedArray;\n}\n/**\n * textAlignToString method\\\n *\n * @returns { Object} textAlignToString method .\\\n * @param {string} value - provide the sourceArray value.\n *\n * @private\n */\nfunction textAlignToString(value) {\n var state = '';\n switch (value) {\n case 'Center':\n state = 'center';\n break;\n case 'Left':\n state = 'left';\n break;\n case 'Right':\n state = 'right';\n break;\n case 'Justify':\n state = 'justify';\n break;\n }\n return state;\n}\n/**\n * wordBreakToString method\\\n *\n * @returns { string } wordBreakToString method .\\\n * @param {TextWrap | TextDecoration} value - provide the value value.\n *\n * @private\n */\nfunction wordBreakToString(value) {\n var state = '';\n switch (value) {\n case 'Wrap':\n state = 'breakall';\n break;\n case 'NoWrap':\n state = 'keepall';\n break;\n case 'WrapWithOverflow':\n state = 'normal';\n break;\n case 'LineThrough':\n state = 'line-through';\n break;\n }\n return state;\n}\n/**\n * bBoxText method\\\n *\n * @returns { number } bBoxText method .\\\n * @param {string} textContent - provide the textContent value.\n * @param {string} options - provide the options value.\n *\n * @private\n */\nfunction bBoxText(textContent, options) {\n var measureWindowElement = 'measureElement';\n window[\"\" + measureWindowElement].style.visibility = 'visible';\n var svg = window[\"\" + measureWindowElement].children[2];\n var text = getChildNode(svg)[1];\n text.textContent = textContent;\n applyStyleAgainstCsp(text, 'font-size:' + options.fontSize + 'px; font-family:'\n + options.fontFamily + ';font-weight:' + (options.bold ? 'bold' : 'normal'));\n var bBox = text.getBBox().width;\n window[\"\" + measureWindowElement].style.visibility = 'hidden';\n return bBox;\n}\n/**\n * middleElement method\\\n *\n * @returns { number} middleElement method .\\\n * @param {number} i - provide the textContent value.\n * @param {number} j - provide the options value.\n *\n * @private\n */\nfunction middleElement(i, j) {\n var m = 0;\n m = (i + j) / 2;\n return m;\n}\n/**\n * overFlow method\\\n *\n * @returns { number} overFlow method .\\\n * @param {number} text - provide the text value.\n * @param {number} options - provide the options value.\n *\n * @private\n */\nfunction overFlow(text, options) {\n var i = 0;\n var j = 0;\n var middle = 0;\n var bounds = 0;\n var temp = '';\n j = text.length;\n var t = 0;\n do {\n if (bounds > 0) {\n i = middle;\n }\n middle = Math.floor(middleElement(i, j));\n temp += text.substr(i, middle);\n bounds = bBoxText(temp, options);\n } while (bounds <= options.width);\n temp = temp.substr(0, i);\n for (t = i; t < j; t++) {\n temp += text[parseInt(t.toString(), 10)];\n bounds = bBoxText(temp, options);\n if (bounds >= options.width) {\n text = text.substr(0, temp.length - 1);\n break;\n }\n }\n if (options.textOverflow === 'Ellipsis') {\n text = text.substr(0, text.length - 3);\n text += '...';\n }\n else {\n text = text.substr(0, text.length);\n }\n return text;\n}\n/**\n * whiteSpaceToString method\\\n *\n * @returns { number} whiteSpaceToString method .\\\n * @param {number} value - provide the value value.\n * @param {number} wrap - provide the wrap value.\n *\n * @private\n */\nfunction whiteSpaceToString(value, wrap) {\n if (wrap === 'NoWrap' && value === 'PreserveAll') {\n return 'pre';\n }\n var state = '';\n switch (value) {\n case 'CollapseAll':\n state = 'nowrap';\n break;\n case 'CollapseSpace':\n state = 'pre-line';\n break;\n case 'PreserveAll':\n state = 'pre-wrap';\n break;\n }\n return state;\n}\n/**\n * rotateSize method\\\n *\n * @returns { number} rotateSize method .\\\n * @param {number} size - provide the size value.\n * @param {number} angle - provide the angle value.\n *\n * @private\n */\nfunction rotateSize(size, angle) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, angle, 0, 0);\n var topLeft = transformPointByMatrix(matrix, { x: 0, y: 0 });\n var topRight = transformPointByMatrix(matrix, { x: size.width, y: 0 });\n var bottomLeft = transformPointByMatrix(matrix, { x: 0, y: size.height });\n var bottomRight = transformPointByMatrix(matrix, { x: size.width, y: size.height });\n var minX = Math.min(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);\n var minY = Math.min(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);\n var maxX = Math.max(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);\n var maxY = Math.max(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);\n return new Size(maxX - minX, maxY - minY);\n}\n/**\n * rotatePoint method\\\n *\n * @returns { number} rotateSize method .\\\n * @param {number} angle - provide the angle value.\n * @param {number} pivotX - provide the pivotX value.\n * @param {number} pivotY - provide the pivotY value.\n * @param {PointModel} point - provide the point value.\n * @private\n */\nfunction rotatePoint(angle, pivotX, pivotY, point) {\n if (angle !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, angle, pivotX, pivotY);\n return transformPointByMatrix(matrix, point);\n }\n return point;\n}\n/**\n * getOffset method\\\n *\n * @returns { number} getOffset method .\\\n * @param {PointModel} topLeft - provide the angle value.\n * @param {DiagramElement} obj - provide the pivotX value.\n * @private\n */\nfunction getOffset(topLeft, obj) {\n var offX = topLeft.x + obj.desiredSize.width * obj.pivot.x;\n var offY = topLeft.y + obj.desiredSize.height * obj.pivot.y;\n return {\n x: offX, y: offY\n };\n}\n/**\n * getFunction method\\\n *\n * @returns { Function } getFunction method .\\\n * @param {PointModel} value - provide the angle value.\n * @private\n */\nfunction getFunction(value) {\n if (value !== undefined) {\n if (typeof value === 'string') {\n value = getValue(value, window);\n }\n }\n return value;\n}\n\n/* eslint-disable no-case-declarations */\n/**\n * Canvas Renderer\n */\n/** @private */\nvar CanvasRenderer = /** @__PURE__ @class */ (function () {\n function CanvasRenderer() {\n }\n /**\n * Provide the context value for the canvas \\\n *\n * @returns {CanvasRenderingContext2D} Provide the context value for the canvas .\\\n * @param { HTMLCanvasElement} canvas - Return the dashed array values .\n * @private\n */\n CanvasRenderer.getContext = function (canvas) {\n return canvas.getContext('2d');\n };\n CanvasRenderer.setCanvasSize = function (canvas, width, height) {\n if (canvas) {\n canvas.setAttribute('width', width.toString());\n canvas.setAttribute('height', height.toString());\n }\n };\n /**\n * Draw the gradient for the diagram shapes .\\\n *\n * @returns {SVGElement} Draw the gradient for the diagram shapes.\n * @param {StyleAttributes} options - Provide the options for the gradient element .\n * @param {SVGElement} ctx - Provide canvas values .\n * @param {string} x - Provide the x value for the gradient .\n * @param {string} y - Provide the x value for the gradient .\n * @private\n */\n CanvasRenderer.prototype.renderGradient = function (options, ctx, x, y) {\n var max;\n var min;\n var grd;\n if (options.gradient.type !== 'None') {\n for (var i = 0; i < options.gradient.stops.length; i++) {\n max = max !== undefined ? options.gradient.stops[parseInt(i.toString(), 10)].offset\n : Math.max(max, options.gradient.stops[parseInt(i.toString(), 10)].offset);\n min = min !== undefined ? options.gradient.stops[parseInt(i.toString(), 10)].offset\n : Math.min(min, options.gradient.stops[parseInt(i.toString(), 10)].offset);\n }\n if (options.gradient.type === 'Linear') {\n var linear = options.gradient;\n grd = ctx.createLinearGradient(x + linear.x1, y + linear.y1, x + linear.x2, y + linear.y2);\n }\n else {\n var radial = options.gradient;\n grd = ctx.createRadialGradient(x + radial.fx, y + radial.fy, 0, x + radial.cx, y + radial.cy, radial.r);\n }\n for (var i = 0; i < options.gradient.stops.length; i++) {\n var stop_1 = options.gradient.stops[parseInt(i.toString(), 10)];\n var offset = min < 0 ? (max + stop_1.offset) / (2 * max) : stop_1.offset / max;\n grd.addColorStop(offset, stop_1.color);\n }\n ctx.fillStyle = grd;\n }\n return ctx;\n };\n /**\n * Draw the shawdow for the rectangle shape in diagram \\\n *\n * @returns {void} Draw the shawdow for the rectangle shape in diagram .\\\n *\n * @param { SVGElement} options - Provide the base attributes .\n * @param { RectAttributes} canvas - Provide the canvas values .\n * @param { string} collection - Provide the collection value.\n * @private\n */\n CanvasRenderer.prototype.renderShadow = function (options, canvas, collection) {\n if (collection === void 0) { collection = null; }\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.save();\n ctx.beginPath();\n ctx.strokeStyle = ctx.fillStyle = options.shadow.color;\n ctx.globalAlpha = options.shadow.opacity;\n var ptModel = { x: 0, y: 0 };\n var point = Point.transform(ptModel, options.shadow.angle, options.shadow.distance);\n var transX = options.x + point.x;\n var transY = options.y + point.y;\n var pivotX = transX + options.width * options.pivotX;\n var pivotY = transY + options.height * options.pivotY;\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n if (collection) {\n ctx.translate(transX, transY);\n this.renderPath(canvas, options, collection);\n ctx.translate(-transX, -transY);\n }\n else {\n ctx.rect(transX, transY, options.width, options.height);\n ctx.fillRect(transX, transY, options.width, options.height);\n }\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n ctx.restore();\n };\n /**\n * Create canvas element for the diagram \\\n *\n * @returns {HTMLCanvasElement} Create canvas element for the diagram .\\\n *\n * @param { SVGElement} id - Provide the id for the canvas.\n * @param { Object} width - Provide the width for the canvas.\n * @param { Object} height - Provide the height for the canvas.\n * @private\n */\n CanvasRenderer.createCanvas = function (id, width, height) {\n var canvasObj = createHtmlElement('canvas', { 'id': id });\n this.setCanvasSize(canvasObj, width, height);\n return canvasObj;\n };\n CanvasRenderer.prototype.setStyle = function (canvas, style) {\n var ctx = CanvasRenderer.getContext(canvas);\n if (style.fill === 'none') {\n style.fill = 'transparent';\n }\n if (style.stroke === 'none') {\n style.stroke = 'transparent';\n }\n ctx.strokeStyle = style.stroke;\n ctx.lineWidth = style.strokeWidth;\n if (style.strokeWidth === 0) {\n ctx.strokeStyle = 'transparent';\n }\n ctx.globalAlpha = style.opacity;\n var dashArray = [];\n if (style.dashArray) {\n dashArray = this.parseDashArray(style.dashArray);\n }\n ctx.setLineDash(dashArray);\n if (style.gradient && style.gradient.type !== 'None') {\n if (style.shapeType === 'Rectangle') {\n this.renderGradient(style, ctx, style.x, style.y);\n }\n else {\n this.renderGradient(style, ctx, 0, 0);\n }\n }\n else {\n ctx.fillStyle = style.fill;\n }\n };\n CanvasRenderer.prototype.rotateContext = function (canvas, angle, x, y) {\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.translate(x, y);\n ctx.rotate(angle * Math.PI / 180);\n ctx.translate(-x, -y);\n };\n CanvasRenderer.prototype.setFontStyle = function (canvas, text) {\n var ctx = CanvasRenderer.getContext(canvas);\n var font = '';\n if (text.italic) {\n font += 'italic ';\n }\n if (text.bold) {\n font += 'bold ';\n }\n font += (text.fontSize) + 'px ';\n font += text.fontFamily;\n ctx.font = font;\n };\n /**\n * Return the dashed array values \\\n *\n * @returns {number[]} Return the dashed array values .\\\n * @param { SVGElement} dashArray - Return the dashed array values .\n * @private\n */\n CanvasRenderer.prototype.parseDashArray = function (dashArray) {\n var dashes = [];\n var separator = dashArray.indexOf(' ') !== -1 ? ' ' : ',';\n var splittedDashes = dashArray.split(separator);\n for (var _i = 0, splittedDashes_1 = splittedDashes; _i < splittedDashes_1.length; _i++) {\n var i = splittedDashes_1[_i];\n dashes.push(Number(i));\n }\n return dashes;\n };\n CanvasRenderer.prototype.drawRoundedRect = function (canvas, options) {\n var context = CanvasRenderer.getContext(canvas);\n context.beginPath();\n var x = options.x;\n var y = options.y;\n var w = options.width;\n var h = options.height;\n var mx = x + w / 2;\n var my = y + h / 2;\n context.beginPath();\n this.setStyle(canvas, options);\n context.moveTo(x, my);\n context.quadraticCurveTo(x, y, mx, y);\n context.quadraticCurveTo(x + w, y, x + w, my);\n context.quadraticCurveTo(x + w, y + h, mx, y + h);\n context.quadraticCurveTo(x, y + h, x, my);\n //892454-Fill color not applied for BPMN activity shapes inside the symbol palette.\n context.fill();\n context.stroke();\n };\n //Rendering Part\n /**\n * Draw the Rectangle for the diagram \\\n *\n * @returns {void} Draw the Rectangle for the diagram .\\\n *\n * @param { SVGElement} canvas - Provide the SVG .\n * @param { RectAttributes} options - Provide the Rect attributes .\n * @param { string} diagramId - Provide the diagram id .\n * @param { boolean} isExport - Provide the isExport .\n * @private\n */\n CanvasRenderer.prototype.drawRectangle = function (canvas, options, diagramId, isExport) {\n if (options.visible === true) {\n if (options.cornerRadius) {\n if (!isExport && (options.width < 30 || options.height < 30)) {\n this.drawRoundedRect(canvas, options);\n }\n else {\n options.data = getRectanglePath(options.cornerRadius, options.height, options.width);\n this.drawPath(canvas, options);\n }\n }\n else {\n var ctx = CanvasRenderer.getContext(canvas);\n if (options.shadow) {\n this.renderShadow(options, canvas);\n }\n ctx.save();\n ctx.beginPath();\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var cornerRadius = options.cornerRadius;\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n // 919944: Image Node Flip and Rotation Not Applied in Exported Image\n if (options.flip === 'Horizontal' || options.flip === 'Vertical') {\n ctx.translate(options.x + options.width / 2, options.y + options.height / 2);\n ctx.rotate(-options.angle * Math.PI / 180);\n ctx.translate(-options.x - options.width / 2, -options.y - options.height / 2);\n }\n else {\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n }\n this.setStyle(canvas, options);\n ctx.rect(options.x, options.y, options.width, options.height);\n ctx.fillRect(options.x, options.y, options.width, options.height);\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n ctx.restore();\n }\n }\n };\n // public updateSelectionRegion(canvas: HTMLCanvasElement, options: RectAttributes): void {\n // this.drawRectangle(canvas, options);\n // }\n // public drawLine(canvas: HTMLCanvasElement, options: LineAttributes): void {\n // let ctx: CanvasRenderingContext2D = CanvasRenderer.getContext(canvas);\n // ctx.save();\n // ctx.beginPath();\n // let pivotX: number = options.x + options.width * options.pivotX;\n // let pivotY: number = options.y + options.height * options.pivotY;\n // this.rotateContext(canvas, options.angle, pivotX, pivotY);\n // this.setStyle(canvas, options as StyleAttributes);\n // ctx.translate(options.x, options.y);\n // ctx.moveTo(options.startPoint.x, options.startPoint.y);\n // ctx.lineTo(options.endPoint.x, options.endPoint.y);\n // ctx.translate(-options.x, -options.y);\n // ctx.stroke();\n // ctx.closePath();\n // ctx.restore();\n // }\n // public drawCircle(canvas: HTMLCanvasElement, options: CircleAttributes): void {\n // let ctx: CanvasRenderingContext2D = CanvasRenderer.getContext(canvas);\n // ctx.save();\n // ctx.beginPath();\n // let pivotY: number = options.y + options.height * options.pivotY;\n // let pivotX: number = options.x + options.width * options.pivotX;\n // this.setStyle(canvas, options as StyleAttributes);\n // this.rotateContext(canvas, options.angle, pivotX, pivotY);\n // ctx.arc(options.centerX, options.centerY, options.radius, 0, 2 * Math.PI);\n // ctx.fill();\n // ctx.stroke();\n // ctx.closePath();\n // ctx.restore();\n // }\n /**\n * Draw the path element for the diagram\\\n *\n * @returns {void} Draw the path element for the diagram .\\\n *\n * @param { SVGElement} canvas - Provide the SVG element .\n * @param { PathAttributes} options - Provide the path element attributes .\n * @private\n */\n CanvasRenderer.prototype.drawPath = function (canvas, options) {\n var collection = [];\n collection = processPathData(options.data);\n collection = pathSegmentCollection(collection);\n if (options.shadow) {\n this.renderShadow(options, canvas, collection);\n }\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.save();\n ctx.beginPath();\n var pivotY = options.y + options.height * options.pivotY;\n var pivotX = options.x + options.width * options.pivotX;\n if (options.flip === 'Horizontal' || options.flip === 'Vertical') {\n ctx.translate(options.x + options.width / 2, options.y + options.height / 2);\n ctx.rotate(-options.angle * Math.PI / 180);\n ctx.translate(-options.x - options.width / 2, -options.y - options.height / 2);\n }\n else {\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n }\n this.setStyle(canvas, options);\n ctx.translate(options.x, options.y);\n if (options.flip === 'Horizontal') {\n ctx.scale(-1, 1);\n ctx.translate(options.width * -1, 0);\n }\n else if (options.flip === 'Vertical') {\n ctx.scale(1, -1);\n ctx.translate(0, options.height * -1);\n }\n else if (options.flip === 'Both') {\n ctx.scale(-1, -1);\n ctx.translate(options.width * -1, options.height * -1);\n }\n this.renderPath(canvas, options, collection);\n ctx.fill();\n ctx.translate(-options.x, -options.y);\n ctx.stroke();\n ctx.restore();\n };\n /**\n * Draw the path element for the diagram\\\n *\n * @returns {void} Draw the path element for the diagram .\\\n *\n * @param { SVGElement} canvas - Provide the SVG element .\n * @param {PathAttributes} options - Provide the path element attributes .\n * @param {Object[]} collection - Provide the parent SVG element .\n * @private\n */\n CanvasRenderer.prototype.renderPath = function (canvas, options, collection) {\n if (options.visible === true) {\n var arcCount = 0;\n var ctx = CanvasRenderer.getContext(canvas);\n var x0 = void 0;\n var y0 = void 0;\n var x1 = void 0;\n var y1 = void 0;\n var x2 = void 0;\n var y2 = void 0;\n var x = void 0;\n var y = void 0;\n var length_1;\n var i = void 0;\n var segs = collection;\n for (x = 0, y = 0, i = 0, length_1 = segs.length; i < length_1; ++i) {\n var obj = segs[parseInt(i.toString(), 10)];\n var seg = obj;\n var char = seg.command;\n if ('x1' in seg) {\n x1 = seg.x1;\n }\n if ('x2' in seg) {\n x2 = seg.x2;\n }\n if ('y1' in seg) {\n y1 = seg.y1;\n }\n if ('y2' in seg) {\n y2 = seg.y2;\n }\n if ('x' in seg) {\n x = seg.x;\n }\n if ('y' in seg) {\n y = seg.y;\n }\n switch (char) {\n case 'M':\n ctx.moveTo(x, y);\n seg.x = x;\n seg.y = y;\n break;\n case 'L':\n ctx.lineTo(x, y);\n seg.x = x;\n seg.y = y;\n break;\n case 'C':\n ctx.bezierCurveTo(x1, y1, x2, y2, x, y);\n seg.x = x;\n seg.y = y;\n seg.x1 = x1;\n seg.y1 = y1;\n seg.x2 = x2;\n seg.y2 = y2;\n break;\n case 'Q':\n ctx.quadraticCurveTo(x1, y1, x, y);\n seg.x = x;\n seg.y = y;\n seg.x1 = x1;\n seg.y1 = y1;\n break;\n case 'A':\n // eslint-disable-next-line\n var curr = { x: x0, y: y0 };\n var rx = void 0;\n var ry = void 0;\n if (options.arc && options.arc.length > 0) {\n if (seg.r1 === 0) {\n rx = options.arc[parseInt(arcCount.toString(), 10)].r1;\n }\n else {\n rx = seg.r1;\n }\n if (seg.r2 === 0) {\n ry = options.arc[parseInt(arcCount.toString(), 10)].r2;\n }\n else {\n ry = seg.r2;\n }\n arcCount++;\n }\n else {\n rx = seg.r1;\n ry = seg.r2;\n }\n var xAxisRotation = seg.angle * (Math.PI / 180.0);\n var largeArc = seg.largeArc;\n var sweep = seg.sweep;\n var cp = { x: x, y: y };\n var currp = {\n x: Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0,\n y: -Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0\n };\n var l = Math.pow(currp.x, 2) / Math.pow(rx, 2) + Math.pow(currp.y, 2) / Math.pow(ry, 2);\n if (l > 1) {\n rx *= Math.sqrt(l);\n ry *= Math.sqrt(l);\n }\n var k = (Math.pow(ry, 2) * Math.pow(currp.x, 2));\n var s = (largeArc === sweep ? -1 : 1) * Math.sqrt(((Math.pow(rx, 2) * Math.pow(ry, 2)) - (Math.pow(rx, 2) * Math.pow(currp.y, 2)) - k) /\n (Math.pow(rx, 2) * Math.pow(currp.y, 2) + Math.pow(ry, 2) * Math.pow(currp.x, 2)));\n if (isNaN(s)) {\n s = 0;\n }\n var cpp = { x: s * rx * currp.y / ry, y: s * -ry * currp.x / rx };\n var centp = {\n x: (curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y,\n y: (curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y\n };\n var a1 = this.a([1, 0], [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]);\n var u = [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry];\n var v = [(-currp.x - cpp.x) / rx, (-currp.y - cpp.y) / ry];\n var ad = this.a(u, v);\n if (this.r(u, v) <= -1) {\n ad = Math.PI;\n }\n if (this.r(u, v) >= 1) {\n ad = 0;\n }\n var dir = !sweep ? -1.0 : 1.0;\n var ah = a1 + dir * (ad / 2.0);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var halfWay = {\n x: centp.x + rx * Math.cos(ah),\n y: centp.y + ry * Math.sin(ah)\n };\n seg.centp = centp;\n seg.xAxisRotation = xAxisRotation;\n seg.rx = rx;\n seg.ry = ry;\n seg.a1 = a1;\n seg.ad = ad;\n seg.sweep = sweep;\n if (ctx != null) {\n var ra = rx > ry ? rx : ry;\n var sx = rx > ry ? 1 : rx / ry;\n var sy = rx > ry ? ry / rx : 1;\n ctx.save();\n ctx.translate(centp.x, centp.y);\n ctx.rotate(xAxisRotation);\n ctx.scale(sx, sy);\n ctx.arc(0, 0, ra, a1, a1 + ad, !sweep);\n ctx.scale(1 / sx, 1 / sy);\n ctx.rotate(-xAxisRotation);\n ctx.translate(-centp.x, -centp.y);\n ctx.restore();\n }\n break;\n case 'Z':\n case 'z':\n ctx.closePath();\n x = x0;\n y = y0;\n break;\n }\n x0 = x;\n y0 = y;\n }\n }\n };\n /**\n * Draw the text element for the diagram\\\n *\n * @returns {void} Draw the text element for the diagram .\\\n *\n * @param { SVGElement} canvas - Provide the SVG element .\n * @param {TextAttributes} options - Provide the text element attributes .\n * @param {SVGSVGElement} parentSvg - Provide the parent SVG element .\n * @param {Object} ariaLabel - Provide the label properties .\n * @param {string} diagramId - Provide the diagram id .\n * @param {number} scaleValue - Provide the scale value .\n * @param {Container} parentNode - Provide the parent node .\n * @private\n */\n CanvasRenderer.prototype.drawText = function (canvas, options, parentSvg, ariaLabel, diagramId, scaleValue, parentNode) {\n if (options.content && options.visible === true) {\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.save();\n this.setStyle(canvas, options);\n if (scaleValue) {\n options.fontSize *= scaleValue;\n }\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n // 919944: Text Flip and Rotation Not Applied in Exported Image\n this.applyFlipAndRotate(ctx, options, canvas, pivotX, pivotY);\n this.setFontStyle(canvas, options);\n var i = 0;\n var childNodes = [];\n childNodes = options.childNodes;\n var wrapBounds = options.wrapBounds;\n ctx.fillStyle = options.color;\n if (wrapBounds) {\n var position = this.labelAlign(options, wrapBounds, childNodes);\n for (i = 0; i < childNodes.length; i++) {\n var child = childNodes[parseInt(i.toString(), 10)];\n child.x = setChildPosition(child, childNodes, i, options);\n var offsetX = position.x + (scaleValue ? child.x * scaleValue : child.x) - wrapBounds.x;\n var offsetY = position.y + (scaleValue ? child.dy * scaleValue : child.dy) * i + ((options.fontSize) * 0.8);\n if (wrapBounds.width > options.width && options.textOverflow !== 'Wrap' && options.textWrapping === 'NoWrap') {\n child.text = overFlow(child.text, options);\n }\n if ((options.textOverflow === 'Clip' || options.textOverflow === 'Ellipsis') && options.textWrapping === 'Wrap') {\n if (offsetY < parentNode.actualSize.height + parentNode.bounds.y) {\n if (options.textOverflow === 'Ellipsis' && childNodes[i + 1]) {\n var temp = childNodes[i + 1];\n var y = position.y + temp.dy * (i + 1) + ((options.fontSize) * 0.8);\n if (y > parentNode.actualSize.height + parentNode.bounds.y) {\n child.text = child.text.slice(0, child.text.length - 3);\n child.text = child.text.concat('...');\n }\n }\n ctx.fillText(child.text, offsetX, offsetY);\n }\n }\n else {\n ctx.fillText(child.text, offsetX, offsetY);\n }\n if (options.textDecoration === 'Underline'\n || options.textDecoration === 'Overline'\n || options.textDecoration === 'LineThrough') {\n var startPointX = offsetX;\n var startPointY = void 0;\n var textlength = ctx.measureText(child.text).width;\n var endPointX = offsetX + textlength;\n var endPointY = void 0;\n switch (options.textDecoration) {\n case 'Underline':\n startPointY = offsetY + 2;\n endPointY = offsetY + 2;\n break;\n case 'Overline':\n startPointY = (position.y + child.dy * i);\n endPointY = (position.y + child.dy * i);\n break;\n case 'LineThrough':\n startPointY = ((offsetY + position.y + child.dy * i) / 2) + 2;\n endPointY = ((offsetY + position.y + child.dy * i) / 2) + 2;\n }\n ctx.beginPath();\n ctx.moveTo(startPointX, startPointY);\n ctx.lineTo(endPointX, endPointY);\n ctx.strokeStyle = options.color;\n ctx.lineWidth = options.fontSize * .08;\n ctx.globalAlpha = options.opacity;\n ctx.stroke();\n }\n }\n }\n ctx.restore();\n }\n };\n // 919944: Flip position and rotate angle calculation for elements\n CanvasRenderer.prototype.applyFlipAndRotate = function (ctx, options, canvas, pivotX, pivotY) {\n if (options.flip === 'Horizontal' || options.flip === 'Vertical') {\n ctx.translate(options.x + options.width / 2, options.y + options.height / 2);\n ctx.rotate(-options.angle * Math.PI / 180);\n ctx.translate(-options.x - options.width / 2, -options.y - options.height / 2);\n }\n else {\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n }\n ctx.translate(options.x, options.y);\n if (options.flip === 'Horizontal') {\n ctx.scale(-1, 1);\n ctx.translate(options.width * -1, 0);\n }\n else if (options.flip === 'Vertical') {\n ctx.scale(1, -1);\n ctx.translate(0, options.height * -1);\n }\n else if (options.flip === 'Both') {\n ctx.scale(-1, -1);\n ctx.translate(options.width * -1, options.height * -1);\n }\n ctx.translate(-options.x, -options.y);\n };\n CanvasRenderer.prototype.loadImage = function (ctx, obj, canvas, pivotX, pivotY) {\n // 919944: Image Node Flip and Rotation Not Applied in Exported Image\n var image = new Image();\n image.src = obj.source;\n this.image(ctx, image, obj.x, obj.y, obj.width, obj.height, obj);\n };\n /**\n * Draw the image element for the diagram\\\n *\n * @returns {void} Draw the image element for the diagram .\n * @param { SVGElement | HTMLCanvasElement} canvas - Provide the SVG element .\n * @param {ImageAttributes} obj - Provide the image attributes .\n * @param {SVGSVGElement} parentSvg - Provide the parent SVG element .\n * @param {boolean} fromPalette - Provide the pointer event value .\n * @private\n */\n CanvasRenderer.prototype.drawImage = function (canvas, obj, parentSvg, fromPalette) {\n var _this = this;\n if (obj.visible) {\n var ctx_1 = CanvasRenderer.getContext(canvas);\n ctx_1.save();\n var pivotX_1 = obj.x + obj.width * obj.pivotX;\n var pivotY_1 = obj.y + obj.height * obj.pivotY;\n var imageObj = new Image();\n imageObj.src = obj.source;\n // 919867: Opacity for the image node is not applied to the exported image\n this.setStyle(canvas, obj);\n var id = ctx_1.canvas.id.split('_');\n // eslint-disable-next-line\n var value = id[id.length - 1] === ('diagram' ) ? true : false;\n // eslint-disable-next-line\n /**\n * Since Clipping portion for node with slice option is not calculated properly\n * if (obj.sourceX !== undefined && obj.sourceY !== undefined && obj.sourceWidth !== undefined\n * && obj.sourceHeight !== undefined) {\n * ctx.drawImage(imageObj, obj.sourceX, obj.sourceY, obj.sourceWidth, obj.sourceHeight, obj.x, obj.y, obj.width, obj.height);\n * } else {\n * ctx.drawImage(imageObj, obj.x, obj.y, obj.width, obj.height);\n * }\n */\n // 919944: Image Node Flip and Rotation Not Applied in Exported Image\n this.applyFlipAndRotate(ctx_1, obj, canvas, pivotX_1, pivotY_1);\n if (!fromPalette) {\n this.loadImage(ctx_1, obj, canvas, pivotX_1, pivotY_1);\n }\n else {\n imageObj.onload = function () {\n _this.loadImage(ctx_1, obj, canvas, pivotX_1, pivotY_1);\n };\n }\n ctx_1.restore();\n }\n };\n CanvasRenderer.prototype.image = function (ctx, image, x, y, width, height, alignOptions) {\n ctx.beginPath();\n var srcWidth = image.width;\n var srcHeight = image.height;\n var destinationW = width;\n var destinationH = height;\n var resultWidth = 0;\n var resultHeight = 0;\n if (alignOptions && alignOptions.alignment !== 'None') {\n var xalign = alignOptions.alignment.toLowerCase().substr(1, 3);\n var yalign = alignOptions.alignment.toLowerCase().substr(5, 3);\n if (alignOptions.scale === 'Slice') {\n // eslint-disable-next-line\n var a = function () {\n resultWidth = destinationW;\n resultHeight = srcHeight * destinationW / srcWidth;\n };\n // eslint-disable-next-line\n var b = function () {\n resultWidth = srcWidth * destinationH / srcHeight;\n resultHeight = destinationH;\n };\n if (destinationW > destinationH) {\n a();\n if (destinationH > resultHeight) {\n b();\n }\n }\n else if (destinationW === destinationH) {\n if (srcWidth > srcHeight) {\n b();\n }\n else {\n a();\n }\n }\n else {\n b();\n if (destinationW > resultWidth) {\n a();\n }\n }\n var x1 = this.getSliceOffset(xalign, resultWidth, destinationW, srcWidth);\n var y1 = this.getSliceOffset(yalign, resultHeight, destinationH, srcHeight);\n var sWidth = srcWidth - x1;\n var sHeight = srcHeight - y1;\n var dWidth = resultWidth - (x1 * (resultWidth / srcWidth));\n var dHeight = resultHeight - (y1 * (resultHeight / srcHeight));\n var canvas1 = createHtmlElement('canvas', { 'width': width.toString(), 'height': height.toString() });\n var ctx1 = canvas1.getContext('2d');\n ctx1.drawImage(image, x1, y1, sWidth, sHeight, 0, 0, dWidth, dHeight);\n ctx.drawImage(canvas1, x, y, width, height);\n }\n else if (alignOptions.scale === 'Meet') {\n var srcRatio = (srcHeight / srcWidth);\n var destRatio = (destinationH / destinationW);\n resultWidth = destRatio > srcRatio ? destinationW : destinationH / srcRatio;\n resultHeight = destRatio > srcRatio ? destinationW * srcRatio : destinationH;\n x += this.getMeetOffset(xalign, resultWidth, destinationW);\n y += this.getMeetOffset(yalign, resultHeight, destinationH);\n ctx.drawImage(image, 0, 0, srcWidth, srcHeight, x, y, resultWidth, resultHeight);\n }\n else {\n ctx.drawImage(image, x, y, width, height);\n }\n }\n else if (alignOptions.flip !== 'None') {\n var scaleX = 1;\n var scaleY = 1;\n if (alignOptions.flip === 'Horizontal' || alignOptions.flip === 'Both') {\n x = -x;\n width = -width;\n scaleX = -1;\n }\n if (alignOptions.flip === 'Vertical' || alignOptions.flip === 'Both') {\n y = -y;\n height = -height;\n scaleY = -1;\n }\n ctx.scale(scaleX, scaleY);\n ctx.drawImage(image, x, y, width, height);\n }\n else {\n ctx.drawImage(image, x, y, width, height);\n }\n ctx.closePath();\n };\n CanvasRenderer.prototype.getSliceOffset = function (arg, res, dest, src) {\n switch (arg) {\n case 'min': return 0;\n case 'mid': return (res - dest) / 2 * src / res;\n case 'max': return (res - dest) * src / res;\n default: return 0;\n }\n };\n CanvasRenderer.prototype.getMeetOffset = function (arg, res, dest) {\n var max = Math.max(res, dest);\n var min = Math.min(res, dest);\n switch (arg) {\n case 'min': return 0;\n case 'mid': return (max - min) / 2;\n case 'max': return max - min;\n default: return 0;\n }\n };\n //end region\n // vector magnitude\n CanvasRenderer.prototype.m = function (v) { return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2)); };\n // ratio between two vectors\n CanvasRenderer.prototype.r = function (u, v) { return (u[0] * v[0] + u[1] * v[1]) / (this.m(u) * this.m(v)); };\n // angle between two vectors\n CanvasRenderer.prototype.a = function (u, v) { return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(this.r(u, v)); };\n // text utility\n /**\n * Draw the SVG label.\\\n *\n * @returns {PointModel} Draw the SVG label .\n * @param {TextAttributes} text - Provide the canvas element .\n * @param {Object} wrapBounds - Provide the canvas element .\n * @param {SubTextElement []} childNodes - Provide the canvas element .\n * @private\n */\n CanvasRenderer.prototype.labelAlign = function (text, wrapBounds, childNodes) {\n var bounds = new Size(wrapBounds.width, childNodes.length * (text.fontSize * 1.2));\n var position = { x: 0, y: 0 };\n var labelX = text.x;\n var labelY = text.y;\n var offsetx = text.width * 0.5;\n var offsety = text.height * 0.5;\n var pointx = offsetx;\n var pointy = offsety;\n if (text.textAlign === 'left') {\n pointx = 0;\n }\n else if (text.textAlign === 'center') {\n if (wrapBounds.width > text.width && (text.textOverflow === 'Ellipsis' || text.textOverflow === 'Clip')) {\n if (text.textWrapping === 'NoWrap') {\n pointx = 0;\n }\n else {\n pointx = text.width * 0.5;\n }\n }\n else {\n pointx = text.width * 0.5;\n }\n }\n else if (text.textAlign === 'right') {\n pointx = (text.width * 1);\n }\n position.x = labelX + pointx + (wrapBounds ? wrapBounds.x : 0);\n position.y = labelY + pointy - bounds.height / 2;\n return position;\n };\n return CanvasRenderer;\n}());\n\nvar __extends$q = (undefined && undefined.__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$g = (undefined && undefined.__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/**\n * Defines the size and appearance of the diagram page\n */\nvar Background = /** @__PURE__ @class */ (function (_super) {\n __extends$q(Background, _super);\n function Background() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$g([\n Property('')\n ], Background.prototype, \"source\", void 0);\n __decorate$g([\n Property('transparent')\n ], Background.prototype, \"color\", void 0);\n __decorate$g([\n Property('None')\n ], Background.prototype, \"scale\", void 0);\n __decorate$g([\n Property('None')\n ], Background.prototype, \"align\", void 0);\n return Background;\n}(ChildProperty));\nvar FitOptions = /** @__PURE__ @class */ (function (_super) {\n __extends$q(FitOptions, _super);\n function FitOptions() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$g([\n Property('Page')\n ], FitOptions.prototype, \"mode\", void 0);\n __decorate$g([\n Property('PageSettings')\n ], FitOptions.prototype, \"region\", void 0);\n __decorate$g([\n Complex({ top: 25, bottom: 25, left: 25, right: 25 }, Margin)\n ], FitOptions.prototype, \"margin\", void 0);\n __decorate$g([\n Property(false)\n ], FitOptions.prototype, \"canZoomIn\", void 0);\n __decorate$g([\n Property(undefined)\n ], FitOptions.prototype, \"customBounds\", void 0);\n __decorate$g([\n Property(false)\n ], FitOptions.prototype, \"canFit\", void 0);\n return FitOptions;\n}(ChildProperty));\n/**\n * Defines the size and appearance of diagram page\n * ```html\n * \n * ```\n * ```typescript\n * let diagram: Diagram = new Diagram({\n * ...\n * pageSettings: { width: 800, height: 600, orientation: 'Landscape',\n * background: { color: 'blue' }, boundaryConstraints: 'Infinity',\n * multiplePage: true, showPageBreaks: true, },\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n *\n * @default {}\n */\nvar PageSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$q(PageSettings, _super);\n function PageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$g([\n Property(null)\n ], PageSettings.prototype, \"width\", void 0);\n __decorate$g([\n Property(null)\n ], PageSettings.prototype, \"height\", void 0);\n __decorate$g([\n Complex({}, Margin)\n ], PageSettings.prototype, \"margin\", void 0);\n __decorate$g([\n Property('Landscape')\n ], PageSettings.prototype, \"orientation\", void 0);\n __decorate$g([\n Property('Infinity')\n ], PageSettings.prototype, \"boundaryConstraints\", void 0);\n __decorate$g([\n Complex({}, Background)\n ], PageSettings.prototype, \"background\", void 0);\n __decorate$g([\n Property(false)\n ], PageSettings.prototype, \"multiplePage\", void 0);\n __decorate$g([\n Property(false)\n ], PageSettings.prototype, \"showPageBreaks\", void 0);\n __decorate$g([\n Complex({}, FitOptions)\n ], PageSettings.prototype, \"fitOptions\", void 0);\n return PageSettings;\n}(ChildProperty));\n/**\n * Diagram ScrollSettings module handles the scroller properties of the diagram\n */\nvar ScrollSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$q(ScrollSettings, _super);\n function ScrollSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$g([\n Property(0)\n ], ScrollSettings.prototype, \"horizontalOffset\", void 0);\n __decorate$g([\n Property(0)\n ], ScrollSettings.prototype, \"verticalOffset\", void 0);\n __decorate$g([\n Property(1)\n ], ScrollSettings.prototype, \"currentZoom\", void 0);\n __decorate$g([\n Property(0)\n ], ScrollSettings.prototype, \"viewPortWidth\", void 0);\n __decorate$g([\n Property(0)\n ], ScrollSettings.prototype, \"viewPortHeight\", void 0);\n __decorate$g([\n Property(0.2)\n ], ScrollSettings.prototype, \"minZoom\", void 0);\n __decorate$g([\n Property(30)\n ], ScrollSettings.prototype, \"maxZoom\", void 0);\n __decorate$g([\n Property('Diagram')\n ], ScrollSettings.prototype, \"scrollLimit\", void 0);\n __decorate$g([\n Property()\n ], ScrollSettings.prototype, \"scrollableArea\", void 0);\n __decorate$g([\n Property(false)\n ], ScrollSettings.prototype, \"canAutoScroll\", void 0);\n __decorate$g([\n Property(100)\n ], ScrollSettings.prototype, \"autoScrollFrequency\", void 0);\n __decorate$g([\n Complex({ left: 15, right: 15, top: 15, bottom: 15 }, Margin)\n ], ScrollSettings.prototype, \"autoScrollBorder\", void 0);\n __decorate$g([\n Complex({ left: 0, right: 0, top: 0, bottom: 0 }, Margin)\n ], ScrollSettings.prototype, \"padding\", void 0);\n __decorate$g([\n Property(0.2)\n ], ScrollSettings.prototype, \"zoomFactor\", void 0);\n return ScrollSettings;\n}(ChildProperty));\n\n/**\n * ServiceLocator\n *\n * @hidden\n */\nvar ServiceLocator = /** @__PURE__ @class */ (function () {\n function ServiceLocator() {\n this.services = {};\n }\n ServiceLocator.prototype.register = function (name, type) {\n this.services[\"\" + name] = type;\n };\n ServiceLocator.prototype.getService = function (name) {\n return this.services[\"\" + name];\n };\n return ServiceLocator;\n}());\n\nvar __extends$r = (undefined && undefined.__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$h = (undefined && undefined.__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/**\n * Provides a visual guidance while dragging or arranging the objects on the Diagram surface\n */\nvar Gridlines = /** @__PURE__ @class */ (function (_super) {\n __extends$r(Gridlines, _super);\n function Gridlines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$h([\n Property('lightgray')\n ], Gridlines.prototype, \"lineColor\", void 0);\n __decorate$h([\n Property('')\n ], Gridlines.prototype, \"lineDashArray\", void 0);\n __decorate$h([\n Property([1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75])\n ], Gridlines.prototype, \"lineIntervals\", void 0);\n __decorate$h([\n Property([1, 19, 0.5, 19.5, 0.5, 19.5, 0.5, 19.5, 0.5, 19.5])\n ], Gridlines.prototype, \"dotIntervals\", void 0);\n __decorate$h([\n Property([20])\n ], Gridlines.prototype, \"snapIntervals\", void 0);\n return Gridlines;\n}(ChildProperty));\n/**\n * Defines the gridlines and defines how and when the objects have to be snapped\n *\n * @default {}\n */\nvar SnapSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$r(SnapSettings, _super);\n function SnapSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$h([\n Complex({}, Gridlines)\n ], SnapSettings.prototype, \"horizontalGridlines\", void 0);\n __decorate$h([\n Complex({}, Gridlines)\n ], SnapSettings.prototype, \"verticalGridlines\", void 0);\n __decorate$h([\n Property(SnapConstraints.All)\n ], SnapSettings.prototype, \"constraints\", void 0);\n __decorate$h([\n Property(5)\n ], SnapSettings.prototype, \"snapAngle\", void 0);\n __decorate$h([\n Property('Lines')\n ], SnapSettings.prototype, \"gridType\", void 0);\n __decorate$h([\n Property(5)\n ], SnapSettings.prototype, \"snapObjectDistance\", void 0);\n __decorate$h([\n Property('#07EDE1')\n ], SnapSettings.prototype, \"snapLineColor\", void 0);\n return SnapSettings;\n}(ChildProperty));\n\nvar __extends$s = (undefined && undefined.__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$i = (undefined && undefined.__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/**\n * Defines the properties of both horizontal and vertical guides/rulers to measure the diagram area.\n */\nvar DiagramRuler = /** @__PURE__ @class */ (function (_super) {\n __extends$s(DiagramRuler, _super);\n function DiagramRuler() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$i([\n Property(5)\n ], DiagramRuler.prototype, \"interval\", void 0);\n __decorate$i([\n Property(100)\n ], DiagramRuler.prototype, \"segmentWidth\", void 0);\n __decorate$i([\n Property('Horizontal')\n ], DiagramRuler.prototype, \"orientation\", void 0);\n __decorate$i([\n Property('RightOrBottom')\n ], DiagramRuler.prototype, \"tickAlignment\", void 0);\n __decorate$i([\n Property('red')\n ], DiagramRuler.prototype, \"markerColor\", void 0);\n __decorate$i([\n Property(25)\n ], DiagramRuler.prototype, \"thickness\", void 0);\n __decorate$i([\n Property(null)\n ], DiagramRuler.prototype, \"arrangeTick\", void 0);\n return DiagramRuler;\n}(ChildProperty));\n/**\n * Defines the ruler settings of diagram\n * ```html\n * \n * ```\n * ```typescript\n * let diagram: Diagram = new Diagram({\n * ...\n * rulerSettings: { showRulers: true,\n * horizontalRuler: { segmentWidth: 50,interval: 10 },\n * verticalRuler: {segmentWidth: 200,interval: 20}\n * },\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n *\n * @default {}\n */\nvar RulerSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$s(RulerSettings, _super);\n function RulerSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$i([\n Property(false)\n ], RulerSettings.prototype, \"showRulers\", void 0);\n __decorate$i([\n Property(true)\n ], RulerSettings.prototype, \"dynamicGrid\", void 0);\n __decorate$i([\n Complex({ orientation: 'Horizontal' }, DiagramRuler)\n ], RulerSettings.prototype, \"horizontalRuler\", void 0);\n __decorate$i([\n Complex({ orientation: 'Vertical' }, DiagramRuler)\n ], RulerSettings.prototype, \"verticalRuler\", void 0);\n return RulerSettings;\n}(ChildProperty));\n\nvar __extends$t = (undefined && undefined.__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$j = (undefined && undefined.__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/**\n * A collection of JSON objects where each object represents a layer.\n * Layer is a named category of diagram shapes.\n */\nvar DataMappingItems = /** @__PURE__ @class */ (function (_super) {\n __extends$t(DataMappingItems, _super);\n function DataMappingItems() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$j([\n Property('')\n ], DataMappingItems.prototype, \"property\", void 0);\n __decorate$j([\n Property('')\n ], DataMappingItems.prototype, \"field\", void 0);\n return DataMappingItems;\n}(ChildProperty));\n\nvar __extends$u = (undefined && undefined.__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$k = (undefined && undefined.__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/**\n * Configures the data source that is to be bound with diagram\n * ```html\n * \n * ```\n * ```typescript\n * let data: object[] = [\n * { Name: \"Elizabeth\", Role: \"Director\" },\n * { Name: \"Christina\", ReportingPerson: \"Elizabeth\", Role: \"Manager\" },\n * { Name: \"Yoshi\", ReportingPerson: \"Christina\", Role: \"Lead\" },\n * { Name: \"Philip\", ReportingPerson: \"Christina\", Role: \"Lead\" },\n * { Name: \"Yang\", ReportingPerson: \"Elizabeth\", Role: \"Manager\" },\n * { Name: \"Roland\", ReportingPerson: \"Yang\", Role: \"Lead\" },\n * { Name: \"Yvonne\", ReportingPerson: \"Yang\", Role: \"Lead\" }\n * ];\n * let items: DataManager = new DataManager(data as JSON[]);\n * let diagram: Diagram = new Diagram({\n * ...\n * layout: {\n * type: 'OrganizationalChart'\n * },\n * dataSourceSettings: {\n * id: 'Name', parentId: 'ReportingPerson', dataManager: items,\n * }\n * ...\n * });\n * diagram.appendTo('#diagram');\n * ```\n */\nvar CrudAction = /** @__PURE__ @class */ (function (_super) {\n __extends$u(CrudAction, _super);\n function CrudAction() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$k([\n Property('')\n ], CrudAction.prototype, \"read\", void 0);\n __decorate$k([\n Property('')\n ], CrudAction.prototype, \"create\", void 0);\n __decorate$k([\n Property('')\n ], CrudAction.prototype, \"update\", void 0);\n __decorate$k([\n Property('')\n ], CrudAction.prototype, \"destroy\", void 0);\n __decorate$k([\n Property()\n ], CrudAction.prototype, \"customFields\", void 0);\n return CrudAction;\n}(ChildProperty));\nvar ConnectionDataSource = /** @__PURE__ @class */ (function (_super) {\n __extends$u(ConnectionDataSource, _super);\n function ConnectionDataSource() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$k([\n Property('')\n ], ConnectionDataSource.prototype, \"id\", void 0);\n __decorate$k([\n Property('')\n ], ConnectionDataSource.prototype, \"sourceID\", void 0);\n __decorate$k([\n Property('')\n ], ConnectionDataSource.prototype, \"targetID\", void 0);\n __decorate$k([\n Property(null)\n ], ConnectionDataSource.prototype, \"sourcePointX\", void 0);\n __decorate$k([\n Property(null)\n ], ConnectionDataSource.prototype, \"sourcePointY\", void 0);\n __decorate$k([\n Property(null)\n ], ConnectionDataSource.prototype, \"targetPointX\", void 0);\n __decorate$k([\n Property(null)\n ], ConnectionDataSource.prototype, \"targetPointY\", void 0);\n __decorate$k([\n Property(null)\n ], ConnectionDataSource.prototype, \"dataManager\", void 0);\n __decorate$k([\n Complex({}, CrudAction)\n ], ConnectionDataSource.prototype, \"crudAction\", void 0);\n return ConnectionDataSource;\n}(ChildProperty));\nvar DataSource = /** @__PURE__ @class */ (function (_super) {\n __extends$u(DataSource, _super);\n function DataSource() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$k([\n Property('')\n ], DataSource.prototype, \"id\", void 0);\n __decorate$k([\n Property(null)\n ], DataSource.prototype, \"dataManager\", void 0);\n __decorate$k([\n Property(null)\n ], DataSource.prototype, \"dataSource\", void 0);\n __decorate$k([\n Property('')\n ], DataSource.prototype, \"root\", void 0);\n __decorate$k([\n Property('')\n ], DataSource.prototype, \"parentId\", void 0);\n __decorate$k([\n Property()\n ], DataSource.prototype, \"doBinding\", void 0);\n __decorate$k([\n Collection([], DataMappingItems)\n ], DataSource.prototype, \"dataMapSettings\", void 0);\n __decorate$k([\n Complex({}, CrudAction)\n ], DataSource.prototype, \"crudAction\", void 0);\n __decorate$k([\n Complex({}, ConnectionDataSource)\n ], DataSource.prototype, \"connectionDataSource\", void 0);\n return DataSource;\n}(ChildProperty));\n\nvar __extends$v = (undefined && undefined.__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$l = (undefined && undefined.__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/**\n * Defines the configuration settings for flowchart automatic layout\n */\nvar FlowchartLayoutSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$v(FlowchartLayoutSettings, _super);\n function FlowchartLayoutSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$l([\n Property('LeftInFlow')\n ], FlowchartLayoutSettings.prototype, \"yesBranchDirection\", void 0);\n __decorate$l([\n Property('RightInFlow')\n ], FlowchartLayoutSettings.prototype, \"noBranchDirection\", void 0);\n __decorate$l([\n Property(['Yes', 'True'])\n ], FlowchartLayoutSettings.prototype, \"yesBranchValues\", void 0);\n __decorate$l([\n Property(['No', 'False'])\n ], FlowchartLayoutSettings.prototype, \"noBranchValues\", void 0);\n return FlowchartLayoutSettings;\n}(ChildProperty));\n/**\n * Defines the behavior of the automatic layouts\n */\nvar Layout = /** @__PURE__ @class */ (function (_super) {\n __extends$v(Layout, _super);\n function Layout() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$l([\n Property('')\n ], Layout.prototype, \"fixedNode\", void 0);\n __decorate$l([\n Property(30)\n ], Layout.prototype, \"horizontalSpacing\", void 0);\n __decorate$l([\n Property('SamePoint')\n ], Layout.prototype, \"connectionPointOrigin\", void 0);\n __decorate$l([\n Property('Nonlinear')\n ], Layout.prototype, \"arrangement\", void 0);\n __decorate$l([\n Property(30)\n ], Layout.prototype, \"verticalSpacing\", void 0);\n __decorate$l([\n Property(30)\n ], Layout.prototype, \"maxIteration\", void 0);\n __decorate$l([\n Property(40)\n ], Layout.prototype, \"springFactor\", void 0);\n __decorate$l([\n Property(50)\n ], Layout.prototype, \"springLength\", void 0);\n __decorate$l([\n Complex({ left: 50, top: 50, right: 0, bottom: 0 }, Margin)\n ], Layout.prototype, \"margin\", void 0);\n __decorate$l([\n Property('Auto')\n ], Layout.prototype, \"horizontalAlignment\", void 0);\n __decorate$l([\n Property('Auto')\n ], Layout.prototype, \"verticalAlignment\", void 0);\n __decorate$l([\n Property('TopToBottom')\n ], Layout.prototype, \"orientation\", void 0);\n __decorate$l([\n Property('Auto')\n ], Layout.prototype, \"connectionDirection\", void 0);\n __decorate$l([\n Property('Default')\n ], Layout.prototype, \"connectorSegments\", void 0);\n __decorate$l([\n Property('None')\n ], Layout.prototype, \"type\", void 0);\n __decorate$l([\n Property()\n ], Layout.prototype, \"getLayoutInfo\", void 0);\n __decorate$l([\n Property()\n ], Layout.prototype, \"layoutInfo\", void 0);\n __decorate$l([\n Property()\n ], Layout.prototype, \"getBranch\", void 0);\n __decorate$l([\n Property()\n ], Layout.prototype, \"bounds\", void 0);\n __decorate$l([\n Property(true)\n ], Layout.prototype, \"enableAnimation\", void 0);\n __decorate$l([\n Property(false)\n ], Layout.prototype, \"enableRouting\", void 0);\n __decorate$l([\n Property('')\n ], Layout.prototype, \"root\", void 0);\n __decorate$l([\n Complex({}, FlowchartLayoutSettings)\n ], Layout.prototype, \"flowchartLayoutSettings\", void 0);\n return Layout;\n}(ChildProperty));\n\nvar __extends$w = (undefined && undefined.__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})();\n/**\n * Multiple segments editing for Connector\n */\nvar ConnectorEditing = /** @__PURE__ @class */ (function (_super) {\n __extends$w(ConnectorEditing, _super);\n function ConnectorEditing(commandHandler, endPoint) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.oldValue = null;\n _this.endPoint = endPoint;\n return _this;\n }\n /**\n * mouseDown method\\\n *\n * @returns { void } mouseDown method .\\\n * @param {MouseEventArgs} args - provide the args value.\n * @private\n */\n ConnectorEditing.prototype.mouseDown = function (args) {\n var connectors;\n var edit = true;\n if (args.source && args.source.connectors) {\n connectors = args.source.connectors[0];\n }\n if (args.info && args.actualObject) {\n edit = args.info.ctrlKey && args.actualObject.type !== 'Orthogonal';\n }\n if (connectors && edit) {\n this.inAction = true;\n this.undoElement = cloneObject(args.source);\n _super.prototype.mouseDown.call(this, args);\n // Sets the selected segment\n for (var i = 0; i < connectors.segments.length; i++) {\n var segment = connectors.segments[parseInt(i.toString(), 10)];\n if (this.endPoint === 'OrthoThumb') {\n for (var j = 0; j < segment.points.length - 1; j++) {\n var segPoint = { x: 0, y: 0 };\n segPoint.x = ((segment.points[parseInt(j.toString(), 10)].x + segment.points[j + 1].x) / 2);\n segPoint.y = ((segment.points[parseInt(j.toString(), 10)].y + segment.points[j + 1].y) / 2);\n if (contains(this.currentPosition, segPoint, 30)) {\n this.selectedSegment = segment;\n this.segmentIndex = j;\n }\n }\n }\n else {\n if (contains(this.currentPosition, segment.point, 10)) {\n this.selectedSegment = segment;\n }\n }\n }\n }\n };\n /**\n * mouseMove method\\\n *\n * @returns { void } mouseMove method .\\\n * @param {MouseEventArgs} args - provide the args value.\n * @private\n */\n ConnectorEditing.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n this.currentPosition = args.position;\n if (this.currentPosition && this.prevPosition) {\n var diffY = this.currentPosition.y - this.prevPosition.y;\n var diffX = this.currentPosition.x - this.prevPosition.x;\n this.currentPosition = this.commandHandler.snapConnectorEnd(this.currentPosition);\n var connector = void 0;\n var newValue = void 0;\n var isSame = false;\n if (args.source && args.source.connectors) {\n connector = args.source.connectors[0];\n }\n if (Point.equals(this.startPosition, this.prevPosition)) {\n isSame = true;\n }\n if (this.oldValue === null) {\n this.oldValue = cloneObject(this.selectedSegment);\n }\n var arg = {\n source: connector, state: 'Start', oldValue: this.oldValue, newValue: this.oldValue,\n segment: this.selectedSegment, cancel: false\n };\n //EJ2-66217 - Support to add event for segment points editing in connector.\n arg = {\n source: cloneBlazorObject(connector), state: 'Start', oldValue: cloneBlazorObject(this.oldValue),\n newValue: cloneBlazorObject(this.oldValue),\n segment: cloneBlazorObject(this.selectedSegment), cancel: false\n };\n if (isSame && !isBlazor()) {\n this.commandHandler.triggerEvent(DiagramEvent.segmentChange, arg);\n }\n // When cancel is set to true at state Start, the segment change will be prevented.\n if (arg.cancel) {\n this.commandHandler.diagram.resetTool();\n }\n if ((this.inAction && this.selectedSegment !== undefined && this.endPoint !== undefined)\n && (diffX !== 0 || diffY !== 0) && !arg.cancel) {\n if (this.endPoint === 'OrthoThumb') {\n this.blocked = !this.dragOrthogonalSegment(connector, this.selectedSegment, this.currentPosition, this.segmentIndex);\n if (this.oldValue.length === null && this.oldValue.direction === null) {\n this.oldValue = cloneObject(this.selectedSegment);\n }\n newValue = cloneObject(this.selectedSegment);\n }\n else {\n var tx = this.currentPosition.x - this.selectedSegment.point.x;\n var ty = this.currentPosition.y - this.selectedSegment.point.y;\n var index = connector.segments.indexOf(this.selectedSegment);\n this.blocked = !this.commandHandler.dragControlPoint(connector, tx, ty, false, index);\n newValue = cloneObject(this.selectedSegment);\n }\n this.commandHandler.updateSelector();\n this.currentPosition = args.position;\n var arg1 = {\n source: cloneBlazorObject(connector), state: 'Progress', oldValue: cloneBlazorObject(this.oldValue),\n newValue: cloneBlazorObject(newValue),\n segment: cloneBlazorObject(this.selectedSegment), cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.segmentChange, arg1);\n }\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n /**\n * mouseUp method\\\n *\n * @returns { void } mouseUp method .\\\n * @param {MouseEventArgs} args - provide the args value.\n * @private\n */\n ConnectorEditing.prototype.mouseUp = function (args) {\n var connector;\n var oldValues;\n if (args.source && args.source.connectors) {\n connector = args.source.connectors[0];\n oldValues = { segments: connector.segments };\n }\n if (args && args.source && args.info && args.info.ctrlKey && args.info.shiftKey && connector.type === 'Straight') {\n this.addOrRemoveSegment(connector, this.currentPosition);\n }\n else {\n if (this.endPoint === 'OrthoThumb' && this.selectedSegment) {\n var index = connector.segments.indexOf(this.selectedSegment);\n var prev = connector.segments[index - 1];\n var next = connector.segments[index + 1];\n if (index === connector.segments.length - 2\n && this.updateLastSegment(connector, this.selectedSegment)) {\n connector.segments.splice(connector.segments.length - 2, 1);\n }\n else {\n //Bug 853404: Exception occurs while adjusting the connector segment.\n if (prev && Math.abs(prev.length) < 5 && prev.length > 0) {\n if (index !== 1) {\n this.removePrevSegment(connector, index);\n }\n }\n else if (next) {\n var len = Point.distancePoints(next.points[0], next.points[1]);\n var length_1 = ((next.length || next.length === 0) ? next.length : len);\n if ((Math.abs(length_1) <= 5)) {\n this.removeNextSegment(connector, index);\n }\n }\n }\n this.commandHandler.updateEndPoint(connector, oldValues);\n // EJ2-65063 - While mouseUp set the selectedSegmentIndex as zero.\n connector.selectedSegmentIndex = 0;\n }\n }\n if (this.undoElement) {\n //let obj: SelectorModel;\n var obj = cloneObject(args.source);\n var entry = {\n type: 'SegmentChanged', redoObject: obj, undoObject: this.undoElement, category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n }\n if (connector.isBezierEditing) {\n connector.isBezierEditing = false;\n }\n if (this.prevPosition !== this.startPosition) {\n var arg = {\n source: cloneBlazorObject(connector), state: 'Completed', oldValue: cloneBlazorObject(this.oldValue),\n newValue: cloneObject(this.selectedSegment), cancel: false, segment: cloneBlazorObject(this.selectedSegment)\n };\n this.commandHandler.triggerEvent(DiagramEvent.segmentChange, arg);\n }\n _super.prototype.mouseUp.call(this, args);\n };\n ConnectorEditing.prototype.removePrevSegment = function (connector, index) {\n var first = connector.segments[index - 2];\n var next = connector.segments[index + 1];\n //Bug 905092: Exception through while dragging segment and reverted back to its original position.\n //Added next condition to check the next segment is not null.\n if (next) {\n var length_2 = (next.length || next.length === 0) ? next.length : Point.distancePoints(next.points[0], next.points[1]);\n if (!(length_2 <= 5)) {\n var removeSegments = connector.segments.slice(index - 1, index + 1);\n var args = {\n element: connector, removeSegments: removeSegments, type: 'Removal', cancel: false\n };\n //Removed isBlazor code\n this.commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args);\n if (!args.cancel) {\n var last = connector.segments[index + 1];\n connector.segments.splice(index - 1, 2);\n var segment = this.selectedSegment;\n if (segment.direction === 'Left' || segment.direction === 'Right') {\n first.points[first.points.length - 1].x = last.points[0].x;\n last.points[0].y = first.points[first.points.length - 1].y;\n }\n else {\n first.points[first.points.length - 1].y = last.points[0].y;\n last.points[0].x = first.points[first.points.length - 1].x;\n }\n if (segment.length || segment.length === 0) {\n this.findSegmentDirection(first);\n }\n this.findSegmentDirection(last);\n }\n }\n }\n };\n ConnectorEditing.prototype.findSegmentDirection = function (segment) {\n if (segment.direction && (segment.length || segment.length === 0)) {\n segment.length = Point.distancePoints(segment.points[0], segment.points[segment.points.length - 1]);\n segment.direction = Point.direction(segment.points[0], segment.points[segment.points.length - 1]);\n }\n };\n ConnectorEditing.prototype.removeNextSegment = function (connector, index) {\n var segment = this.selectedSegment;\n var first = connector.segments[index - 1];\n var last = connector.segments[index + 2];\n var next = connector.segments[index + 1];\n // eslint-disable-next-line\n var removeSegments;\n var args;\n if (next.length || next.length === 0) {\n removeSegments = connector.segments.slice(index, 2);\n args = {\n element: connector, removeSegments: removeSegments, type: 'Removal', cancel: false\n };\n args = {\n element: cloneBlazorObject(connector), removeSegments: cloneBlazorObject(removeSegments),\n type: 'Removal', cancel: false\n };\n //Removed isBlazor code\n this.commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args);\n if (!args.cancel) {\n connector.segments.splice(index, 2);\n if (segment.direction === 'Top' || segment.direction === 'Bottom') {\n last.points[0].y = segment.points[0].y;\n first.points[first.points.length - 1].x = last.points[0].x;\n }\n else {\n last.points[0].x = segment.points[0].x;\n first.points[first.points.length - 1].y = last.points[0].y;\n }\n }\n }\n else {\n removeSegments = connector.segments.slice(index + 1, 1);\n args = {\n element: connector, removeSegments: removeSegments, type: 'Removal', cancel: false\n };\n //Removed isBlazor code\n this.commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args);\n if (!args.cancel) {\n connector.segments.splice(index + 1, 1);\n if (segment.direction === 'Top' || segment.direction === 'Bottom') {\n first.points[first.points.length - 1].x = next.points[next.points.length - 1].x;\n }\n else {\n first.points[first.points.length - 1].y = next.points[next.points.length - 1].y;\n }\n this.findSegmentDirection(first);\n segment.length = segment.direction = null;\n }\n }\n if (first && last && !args.cancel) {\n first.length = Point.distancePoints(first.points[0], last.points[0]);\n first.direction = Point.direction(first.points[0], last.points[0]);\n if (last.length || last.length === 0) {\n last.length = Point.distancePoints(first.points[first.points.length - 1], last.points[last.points.length - 1]);\n var point1 = first.points;\n var point2 = last.points;\n last.direction = Point.direction(point1[point1.length - 1], point2[point2.length - 1]);\n }\n }\n };\n /**\n * addOrRemoveSegment method Used to add or remove intermediate segments to the straight connector. \\\n *\n * @returns {void} addOrRemoveSegment method Used to add or remove intermediate segments to the straight connector.\n * @param {ConnectorModel} connector - provide the connector value in which segment to be added/removed.\n * @param {PointModel} point - provide the mouse clicked position as a point of the segment\n * @param {CommandHandler} commandHandler - provide the CommandHandler value that defines the behavior of commands\n * @private\n */\n ConnectorEditing.prototype.addOrRemoveSegment = function (connector, point, commandHandler) {\n var updateSeg;\n var segmentIndex;\n var segmentsChanged = [];\n var oldValues = { segments: connector.segments };\n for (var i = 0; i < connector.segments.length; i++) {\n var segment = (connector.segments)[parseInt(i.toString(), 10)];\n if (contains(point, segment.point, connector.hitPadding)) {\n segmentIndex = i;\n updateSeg = true;\n //848696-Trigger SegmentCollectionChange Event for straight connector\n segmentsChanged.push(segment);\n var args = {\n element: connector, removeSegments: segmentsChanged, type: 'Removal', cancel: false\n };\n if (commandHandler) {\n commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args);\n }\n }\n }\n //827745-support to edit Segment for Straight connector at runtime\n if (!this.commandHandler) {\n this.commandHandler = commandHandler;\n }\n if (updateSeg && segmentIndex !== undefined) {\n if (connector.segments && connector.segments[parseInt(segmentIndex.toString(), 10)] && connector.segments[parseInt(segmentIndex.toString(), 10)].type === 'Straight') {\n var segment = connector.segments[parseInt(segmentIndex.toString(), 10)];\n var previous = connector.segments[segmentIndex + 1];\n if (previous) {\n connector.segments.splice(segmentIndex, 1);\n previous.points[0] = segment.points[0];\n }\n }\n }\n else {\n this.commandHandler.enableServerDataBinding(false);\n var index = this.findIndex(connector, point);\n if (connector.segments && connector.segments[parseInt(index.toString(), 10)] && connector.segments[parseInt(index.toString(), 10)].type === 'Straight') {\n var segment = connector.segments[parseInt(index.toString(), 10)];\n var newseg = new StraightSegment(connector, 'segments', { type: 'Straight', point: point }, true);\n newseg.points[0] = segment.points[0];\n newseg.points[1] = point;\n segment.points[0] = point;\n connector.segments.splice(index, 0, newseg);\n updateSeg = true;\n //848696-Trigger SegmentCollectionchange Event for straight connector\n segmentsChanged.push(segment);\n var args = {\n element: connector, addSegments: segmentsChanged, type: 'Addition', cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args);\n }\n this.commandHandler.enableServerDataBinding(true);\n }\n if (updateSeg) {\n this.commandHandler.updateEndPoint(connector, oldValues);\n }\n };\n ConnectorEditing.prototype.findIndex = function (connector, point) {\n var intersectingSegs = [];\n for (var i = 0; i < connector.segments.length; i++) {\n var segment = connector.segments[parseInt(i.toString(), 10)];\n var rect = Rect.toBounds([segment.points[0], segment.points[1]]);\n rect.Inflate(connector.hitPadding);\n if (rect.containsPoint(point)) {\n intersectingSegs.push(segment);\n }\n }\n if (intersectingSegs.length === 1) {\n return connector.segments.indexOf(intersectingSegs[0]);\n }\n else {\n var ratio = void 0;\n var min = void 0;\n var index = void 0;\n var seg = void 0;\n var v = void 0;\n var h = void 0;\n for (var i = 0; i < intersectingSegs.length; i++) {\n seg = intersectingSegs[parseInt(i.toString(), 10)];\n v = (point.y - seg.points[0].y) / (seg.points[1].y - point.y);\n h = (point.x - seg.points[0].x) / (seg.points[1].x - point.x);\n ratio = Math.abs(v - h);\n if (i === 0) {\n min = ratio;\n index = 0;\n }\n if (ratio < min) {\n min = ratio;\n index = i;\n }\n }\n return connector.segments.indexOf(intersectingSegs[parseInt(index.toString(), 10)]);\n }\n };\n ConnectorEditing.prototype.dragOrthogonalSegment = function (obj, segment, point, segmentIndex) {\n var segmentPoint = { x: 0, y: 0 };\n var oldValues = { segments: obj.segments };\n segmentPoint.x = ((segment.points[parseInt(segmentIndex.toString(), 10)].x + segment.points[segmentIndex + 1].x) / 2);\n segmentPoint.y = ((segment.points[parseInt(segmentIndex.toString(), 10)].y + segment.points[segmentIndex + 1].y) / 2);\n var ty = point.y - segmentPoint.y;\n var tx = point.x - segmentPoint.x;\n var index = obj.segments.indexOf(segment);\n var update = false;\n //const orientation: string = (segment.points[0].y.toFixed(2) === segment.points[1].y.toFixed(2)) ? 'horizontal' : 'vertical';\n //const prevSegment: OrthogonalSegmentModel; const nextSegment: OrthogonalSegmentModel;\n // EJ2-65063 - If the allowNodeOverlap is set as true means then we set the segment index which is going to drag in selectedSegmentIndex property\n if (obj.allowNodeOverlap) {\n obj.selectedSegmentIndex = index ? index : segmentIndex;\n }\n if (index !== -1) {\n if (index === 0 && obj.segments.length === 1 && segment.points.length === 2) {\n index = this.addSegments(obj, segment, tx, ty, index);\n update = true;\n }\n else if (index === obj.segments.length - 1 && (segment.direction === null || segment.length === null)) {\n index = this.addTerminalSegment(obj, segment, tx, ty, segmentIndex);\n update = true;\n }\n else if (index === 0) {\n index = this.insertFirstSegment(obj, segment, tx, ty, index);\n update = true;\n }\n if (index) {\n if (update) {\n this.selectedSegment = segment = obj.segments[parseInt(index.toString(), 10)];\n this.segmentIndex = 0;\n }\n this.updateAdjacentSegments(obj, index, tx, ty);\n this.commandHandler.updateEndPoint(obj, oldValues);\n }\n }\n return true;\n };\n ConnectorEditing.prototype.addSegments = function (obj, segment, tx, ty, coll) {\n var index;\n var segments = []; //let len: number;\n var length = Point.distancePoints(segment.points[0], segment.points[1]);\n var segmentDirection = Point.direction(segment.points[0], segment.points[1]);\n segments.push(new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: segmentDirection, length: length / 4 }, true));\n var direction = (segment.points[0].y === segment.points[1].y) ? ((ty > 0) ? 'Bottom' : 'Top') : ((tx > 0) ? 'Right' : 'Left');\n var len = (segment.points[0].x === segment.points[1].x) ? ty : tx;\n segments.push(new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: direction, length: len }, true));\n segments.push(new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: segmentDirection, length: length / 2 }, true));\n var args = {\n element: obj, addSegments: segments, type: 'Addition', cancel: false\n };\n //Removed isBlazor code\n this.commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args);\n if (!args.cancel) {\n obj.segments = segments.concat(obj.segments);\n index = coll + 2;\n }\n return index;\n };\n // eslint-disable-next-line\n ConnectorEditing.prototype.insertFirstSegment = function (obj, segment, tx, ty, coll) {\n var direction;\n var length;\n var segments = [];\n var segValues;\n var index;\n var insertseg;\n if (obj.sourcePortID && segment.length && obj.segments[0].points.length > 2) {\n var prev = void 0;\n for (var i = 0; i < segment.points.length - 1; i++) {\n var len = Point.distancePoints(segment.points[parseInt(i.toString(), 10)], segment.points[i + 1]);\n var dir = Point.direction(segment.points[parseInt(i.toString(), 10)], segment.points[i + 1]);\n insertseg = new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: dir, length: len }, true);\n if (insertseg.length === 0) {\n if (prev && (prev.direction === 'Top' || prev.direction === 'Bottom')) {\n insertseg.direction = tx > 0 ? 'Right' : 'Left';\n }\n else {\n insertseg.direction = ty > 0 ? 'Bottom' : 'Top';\n }\n }\n prev = insertseg;\n segments.push(insertseg);\n }\n }\n else {\n segValues = { type: 'Orthogonal', direction: segment.direction, length: segment.length / 3 };\n segments.push(new OrthogonalSegment(obj, 'segments', segValues, true));\n if (segment.direction === 'Bottom' || segment.direction === 'Top') {\n length = Math.abs(tx);\n direction = tx > 0 ? 'Right' : 'Left';\n }\n else {\n length = Math.abs(ty);\n direction = ty > 0 ? 'Bottom' : 'Top';\n }\n insertseg = new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: direction, length: length }, true);\n segments.push(insertseg);\n }\n var args = {\n element: obj, addSegments: segments, type: 'Addition', cancel: false\n };\n //Removed isBlazor code\n this.commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args);\n if (!args.cancel) {\n if (obj.sourcePortID && segment.length && obj.segments[0].points.length > 2) {\n obj.segments.splice(0, 1);\n index = 1;\n }\n else {\n var nextseg = obj.segments[1];\n if (nextseg && nextseg.length) {\n nextseg.length = (direction !== nextseg.direction) ? nextseg.length + length : nextseg.length - length;\n }\n index = 2;\n segment.length = 2 * segment.length / 3;\n }\n obj.segments = segments.concat(obj.segments);\n }\n return index;\n };\n ConnectorEditing.prototype.updateAdjacentSegments = function (obj, index, tx, ty) {\n var current = obj.segments[parseInt(index.toString(), 10)];\n var endPoint = current.points[current.points.length - 1];\n var startPoint = current.points[0];\n var isNextUpdate = true;\n if (current.type === 'Orthogonal') {\n current.points[0] = startPoint;\n current.points[current.points.length - 1] = endPoint;\n var prev = obj.segments[index - 1];\n if (prev) {\n isNextUpdate = this.updatePreviousSegment(tx, ty, obj, index);\n }\n if (obj.segments.length - 1 > index && isNextUpdate) {\n var nextSegment = obj.segments[index + 1];\n this.updateNextSegment(obj, current, nextSegment, tx, ty);\n }\n }\n };\n ConnectorEditing.prototype.addTerminalSegment = function (connector, segment, tx, ty, segmentIndex) {\n //const oldValues: Connector = { segments: connector.segments } as Connector;\n var index = connector.segments.indexOf(segment);\n var first;\n var insertseg;\n var len;\n var dir;\n var segments = [];\n var removeSegment = connector.segments.pop();\n var last = connector.segments[connector.segments.length - 1];\n first = (last && last.type === 'Orthogonal') ? last : null;\n for (var i = 0; i < segment.points.length - 2; i++) {\n len = Point.distancePoints(segment.points[parseInt(i.toString(), 10)], segment.points[i + 1]);\n dir = Point.direction(segment.points[parseInt(i.toString(), 10)], segment.points[i + 1]);\n insertseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: len, direction: dir }, true);\n segments.push(insertseg);\n first = insertseg;\n }\n var sec = segmentIndex;\n if (segment.points.length === 2 || sec === segment.points.length - 2) {\n if (first) {\n first.length += 5;\n }\n if (sec !== undefined) {\n //let newseg: OrthogonalSegment;\n len = 2 * Point.distancePoints(segment.points[segment.points.length - 2], segment.points[segment.points.length - 1]) / 3;\n dir = Point.direction(segment.points[segment.points.length - 2], segment.points[segment.points.length - 1]);\n var newseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: len, direction: dir });\n segments.push(newseg);\n }\n }\n var lastseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segments.push(lastseg);\n var args = {\n element: connector, addSegments: segments, type: 'Addition', cancel: false\n };\n var args1 = {\n element: cloneBlazorObject(connector), addSegments: cloneBlazorObject(segments),\n type: 'Addition', cancel: args.cancel\n };\n //Removed isBlazor code\n this.commandHandler.triggerEvent(DiagramEvent.segmentCollectionChange, args1);\n if (!args1.cancel) {\n connector.segments = connector.segments.concat(segments);\n index = index + segmentIndex;\n }\n else {\n connector.segments.push(removeSegment);\n }\n this.commandHandler.updateEndPoint(connector);\n return index;\n };\n // eslint-disable-next-line\n ConnectorEditing.prototype.updatePortSegment = function (prev, connector, index, tx, ty) {\n if (index === 1 && prev.points.length === 2 && prev.length < 0) {\n var source = connector.sourceWrapper.corners;\n var current = connector.segments[parseInt(index.toString(), 10)];\n var next = connector.segments[index + 1];\n var newseg = void 0;\n var segment = [];\n newseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: 13, direction: prev.direction });\n segment.push(newseg);\n var len = void 0;\n if (current.direction === 'Left') {\n len = (current.points[0].x - (source.middleLeft.x - 20));\n }\n else if (current.direction === 'Right') {\n len = ((source.middleRight.x + 20) - current.points[0].x);\n }\n else if (current.direction === 'Bottom') {\n len = ((source.bottomCenter.y + 20) - current.points[0].y);\n }\n else {\n len = (current.points[0].y - (source.topCenter.y - 20));\n }\n //const dir: Direction = current.direction;\n newseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: len, direction: current.direction });\n segment.push(newseg);\n current.length = current.length - len;\n if (next && next.length && next.direction) {\n if (next.direction === prev.direction) {\n next.length -= 13;\n }\n else if (next.direction === getOppositeDirection(prev.direction)) {\n next.length += 13;\n }\n }\n connector.segments = segment.concat(connector.segments);\n this.selectedSegment = connector.segments[3];\n }\n };\n ConnectorEditing.prototype.updatePreviousSegment = function (tx, ty, connector, index) {\n var current = connector.segments[parseInt(index.toString(), 10)];\n var prev = connector.segments[index - 1];\n //const firstSegment: boolean = (index === 1) ? true : false;\n prev.points[prev.points.length - 1] = current.points[0];\n var isSourceNode = (connector.sourceID && connector.sourcePortID === '') ? false : true;\n var isNextUpdate = true;\n if (prev.type === 'Orthogonal') {\n if (prev.direction === 'Bottom') {\n prev.length += ty;\n }\n else if (prev.direction === 'Top') {\n prev.length -= ty;\n }\n else if (prev.direction === 'Right') {\n prev.length += tx;\n }\n else {\n prev.length -= tx;\n }\n // EJ2-65063 - Added the below condition !allowNodeOverlap to prevent the segment to split into two segments while intersect with source node.\n if (connector.sourcePortID !== '' && prev.length < 0 && !connector.allowNodeOverlap) {\n this.updatePortSegment(prev, connector, index, tx, ty);\n }\n else if (connector.sourceID && connector.sourcePortID === '' && prev.length < 0 && index === 1) {\n isNextUpdate = false;\n this.updateFirstSegment(connector, current);\n }\n if (isSourceNode) {\n this.changeSegmentDirection(prev, connector);\n }\n }\n return isNextUpdate;\n };\n ConnectorEditing.prototype.changeSegmentDirection = function (segment, connector) {\n if (!connector.maxSegmentThumb) {\n if (segment.length < 0) {\n segment.direction = getOppositeDirection(segment.direction);\n segment.length *= -1;\n }\n }\n };\n ConnectorEditing.prototype.updateNextSegment = function (obj, current, next, tx, ty) {\n next.points[0] = current.points[current.points.length - 1];\n if (next && next.type === 'Orthogonal') {\n if (next.length || next.length === 0) {\n if (next.direction === 'Left' || next.direction === 'Right') {\n if (tx !== 0) {\n next.length = (next.direction === 'Right') ? next.length - tx : next.length + tx;\n if (next.length || next.length === 0) {\n this.changeSegmentDirection(next, obj);\n }\n }\n }\n else {\n if (ty !== 0) {\n next.length = (next.direction === 'Bottom') ? next.length - ty : next.length + ty;\n if (next.length || next.length === 0) {\n this.changeSegmentDirection(next, obj);\n }\n }\n }\n }\n }\n };\n ConnectorEditing.prototype.updateFirstSegment = function (connector, selectedSegment) {\n var index = connector.segments.indexOf(selectedSegment);\n var insertfirst = false;\n var current = connector.segments[parseInt(index.toString(), 10)];\n var prev = connector.segments[index - 1];\n var sourcePoint;\n var oldValues = { segments: connector.segments };\n if (prev.length < 0 && connector.sourceID) {\n var sourceNode = connector.sourceWrapper.corners;\n var segments = [];\n var segValues = void 0;\n var removeCurrentPrev = false;\n this.changeSegmentDirection(current, connector);\n var next = connector.segments[index + 1];\n var nextNext = connector.segments[index + 2];\n if (next) {\n this.changeSegmentDirection(next, connector);\n }\n if (nextNext) {\n this.changeSegmentDirection(nextNext, connector);\n }\n switch (prev.direction) {\n case 'Top':\n case 'Bottom':\n sourcePoint = (current.length > 0 && current.direction === 'Left') ? sourceNode.middleLeft : sourceNode.middleRight;\n if (current.length > sourceNode.width / 2) {\n if (Math.abs(prev.length) < sourceNode.height / 2) {\n prev.length = Point.distancePoints(sourceNode.center, prev.points[prev.points.length - 1]);\n current.points[0].x = sourcePoint.x;\n current.length = Point.distancePoints(current.points[0], current.points[current.points.length - 1]);\n current.length -= 20;\n insertfirst = true;\n }\n }\n else {\n if (next && next.direction && next.length) {\n next.points[0].y = sourcePoint.y;\n next.points[0].x = next.points[next.points.length - 1].x = (current.direction === 'Right') ?\n sourcePoint.x + 20 : sourcePoint.x - 20;\n }\n insertfirst = true;\n removeCurrentPrev = true;\n }\n break;\n case 'Left':\n case 'Right':\n sourcePoint = (current.length > 0 && current.direction === 'Top') ? sourceNode.topCenter : sourceNode.bottomCenter;\n if (current.length > sourceNode.height / 2) {\n if (Math.abs(prev.length) < sourceNode.width / 2) {\n prev.length = Point.distancePoints(sourceNode.center, prev.points[prev.points.length - 1]);\n current.points[0].y = sourcePoint.y;\n current.length = Point.distancePoints(current.points[0], current.points[current.points.length - 1]);\n current.length -= 20;\n insertfirst = true;\n }\n }\n else {\n if (next && next.direction && next.length) {\n next.points[0].x = sourcePoint.x;\n next.points[0].y = next.points[next.points.length - 1].y = (current.direction === 'Bottom') ?\n sourcePoint.y + 20 : sourcePoint.y - 20;\n }\n insertfirst = true;\n removeCurrentPrev = true;\n }\n break;\n }\n this.changeSegmentDirection(prev, connector);\n this.changeSegmentDirection(current, connector);\n if (insertfirst) {\n segValues = { type: 'Orthogonal', direction: current.direction, length: 20 };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n if (removeCurrentPrev) {\n if (next && next.direction && next.length) {\n next.length = Point.distancePoints(next.points[0], next.points[next.points.length - 1]);\n }\n if (nextNext && nextNext.direction && nextNext.length) {\n nextNext.length = Point.distancePoints(next.points[next.points.length - 1], nextNext.points[nextNext.points.length - 1]);\n }\n connector.segments.splice(index - 1, 2);\n }\n connector.segments = segments.concat(connector.segments);\n }\n this.selectedSegment = ((removeCurrentPrev) ? connector.segments[index - 1] :\n connector.segments[index + 1]);\n this.commandHandler.updateEndPoint(connector, oldValues);\n }\n };\n ConnectorEditing.prototype.updateLastSegment = function (connector, selectedSegment) {\n if (connector.targetID && connector.targetPortID === '') {\n var line1Start = void 0;\n var line1End = void 0;\n var line2Start = void 0;\n var line2End = void 0;\n var corners = connector.targetWrapper.corners;\n var firstSegPoint = selectedSegment.points[0];\n var lastSegPoint = selectedSegment.points[selectedSegment.points.length - 1];\n if (selectedSegment.direction === 'Right' || selectedSegment.direction === 'Left') {\n line1Start = { x: firstSegPoint.x, y: firstSegPoint.y };\n line1End = {\n x: (selectedSegment.direction === 'Left') ? lastSegPoint.x - corners.width / 2 : lastSegPoint.x + corners.width / 2,\n y: lastSegPoint.y\n };\n line2Start = { x: corners.center.x, y: corners.center.y - corners.height };\n line2End = { x: corners.center.x, y: corners.center.y + corners.height };\n }\n else {\n line1Start = { x: firstSegPoint.x, y: firstSegPoint.y };\n line1End = {\n x: lastSegPoint.x,\n y: (selectedSegment.direction === 'Bottom') ? lastSegPoint.y + corners.height / 2 : lastSegPoint.y - corners.height / 2\n };\n line2Start = { x: corners.center.x - corners.width, y: corners.center.y };\n line2End = { x: corners.center.x + corners.width, y: corners.center.y };\n }\n var line1 = { x1: line1Start.x, y1: line1Start.y, x2: line1End.x, y2: line1End.y };\n var line2 = { x1: line2Start.x, y1: line2Start.y, x2: line2End.x, y2: line2End.y };\n return (intersect3(line1, line2).enabled);\n }\n return false;\n };\n /**\n *To destroy the module\n *\n * @returns {void} To destroy the module\n */\n ConnectorEditing.prototype.destroy = function () {\n /**\n * Destroys the connector editing module\n */\n };\n /**\n * Get module name.\n */\n /**\n * Get module name.\\\n *\n * @returns { string } Get module name.\\\n */\n ConnectorEditing.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'ConnectorEditingTool';\n };\n return ConnectorEditing;\n}(ToolBase));\n\n/* eslint-disable jsdoc/require-returns */\n/**\n * This module handles the mouse and touch events\n */\nvar DiagramEventHandler = /** @__PURE__ @class */ (function () {\n /** @private */\n function DiagramEventHandler(diagram, commandHandler) {\n this.currentAction = 'None';\n this.previousAction = 'None';\n this.previousTarget = null;\n /** @private */\n this.touchArgs = undefined;\n /** @private */\n this.focus = false;\n this.isBlocked = false;\n this.isMouseDown = false;\n this.inAction = false;\n this.doingAutoScroll = false;\n this.diagram = null;\n this.objectFinder = null;\n this.tool = null;\n this.eventArgs = null;\n this.previousElement = null;\n this.isKeyUp = true;\n this.keyCount = 0;\n this.isNudgeKey = false;\n this.commandObj = {};\n this.keyArgs = {};\n this.diagram = diagram;\n this.objectFinder = new ObjectFinder();\n this.commandHandler = commandHandler;\n }\n Object.defineProperty(DiagramEventHandler.prototype, \"action\", {\n get: function () {\n return this.currentAction;\n },\n set: function (action) {\n if (action !== this.currentAction) {\n if (this.currentAction === 'PortDraw') {\n this.diagram.tool &= ~DiagramTools.DrawOnce;\n //EJ2-70550 - Connector disconnected from source and target while dragging mutliple selected element\n if (this.diagram.currentDrawingObject) {\n this.diagram.currentDrawingObject = null;\n }\n if (this.tool) {\n this.tool.mouseUp({ position: this.currentPosition });\n }\n this.tool = null;\n }\n if (action === 'Rotate' || action === 'LabelRotate') {\n this.diagram.diagramCanvas.classList.add('e-diagram-rotate');\n }\n else if (this.currentAction === 'Rotate' || this.currentAction === 'LabelRotate') {\n this.diagram.diagramCanvas.classList.remove('e-diagram-rotate');\n }\n this.currentAction = action;\n //Ej2-26204 - Exception occurs when remove method called without mouse Interaction\n if (this.currentAction !== 'None' && this.currentAction !== 'Select' &&\n !(this.diagram.diagramActions & DiagramAction.TextEdit) ||\n (this.currentPosition && this.commandHandler.isUserHandle(this.currentPosition))) {\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.ToolAction;\n }\n else {\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.ToolAction;\n }\n this.diagram.setCursor(this.diagram.getCursor(action, this.inAction));\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramEventHandler.prototype, \"blocked\", {\n get: function () {\n return this.isBlocked;\n },\n set: function (blocked) {\n this.isBlocked = blocked;\n if (this.blocked) {\n this.diagram.setCursor('not-allowed');\n }\n else {\n this.diagram.setCursor(this.diagram.getCursor(this.action, this.inAction));\n }\n },\n enumerable: true,\n configurable: true\n });\n /** @private */\n DiagramEventHandler.prototype.getMousePosition = function (e) {\n var touchArg;\n var offsetX;\n var offsetY;\n if (e.type.indexOf('touch') !== -1) {\n touchArg = e;\n offsetX = touchArg.changedTouches[0].clientX;\n offsetY = touchArg.changedTouches[0].clientY;\n }\n else {\n offsetX = e.clientX;\n offsetY = e.clientY;\n }\n var position = new Size();\n position = getRulerSize(this.diagram);\n var boundingRect = this.diagram.element.getBoundingClientRect();\n offsetX = offsetX + this.diagram.diagramCanvas.scrollLeft - boundingRect.left - position.width;\n offsetY = offsetY + this.diagram.diagramCanvas.scrollTop - boundingRect.top - position.height;\n offsetX /= this.diagram.scroller.transform.scale;\n offsetY /= this.diagram.scroller.transform.scale;\n offsetX -= this.diagram.scroller.transform.tx;\n offsetY -= this.diagram.scroller.transform.ty;\n return { x: offsetX, y: offsetY };\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.windowResize = function (evt) {\n var _this = this;\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.resizeTo = setTimeout(function () {\n _this.updateViewPortSize(_this.diagram.element);\n }, 300);\n return false;\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.updateViewPortSize = function (element) {\n var container = document.getElementById(element.id);\n if (container) {\n var bounds = container.getBoundingClientRect();\n this.diagram.scroller.setViewPortSize(bounds.width, bounds.height);\n var position = new Size();\n position = getRulerSize(this.diagram);\n var width = this.diagram.getSizeValue(this.diagram.width, position.width);\n var height = this.diagram.getSizeValue(this.diagram.height, position.height);\n this.diagram.diagramCanvas.style.width = width;\n this.diagram.diagramCanvas.style.height = height;\n this.diagram.scroller.setSize();\n this.diagram.transformLayers();\n if (this.diagram.rulerSettings.showRulers) {\n updateRuler(this.diagram);\n }\n if (this.diagram.views.length > 1) {\n //884316 - updating overview after window resize\n for (var _i = 0, _a = this.diagram.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view = this.diagram.views[\"\" + temp];\n if ((view instanceof Overview)) {\n //Calling onproperty change method to update overview.\n view.onPropertyChanged({ sourceID: view.sourceID }, {});\n }\n }\n }\n }\n };\n /** @private */\n DiagramEventHandler.prototype.canHideResizers = function () {\n return ((this.tool instanceof MoveTool || this.tool instanceof RotateTool) && this.isMouseDown);\n };\n /** @private */\n DiagramEventHandler.prototype.updateCursor = function () {\n if ((this.diagram.selectedItems.nodes.length === 1 || this.diagram.selectedItems.connectors.length === 1)) {\n var list = [];\n list = list.concat(this.diagram.selectedItems.nodes, this.diagram.selectedItems.connectors);\n // Bug fix - EJ2-44495 -Node does not gets selected on slight movement of mouse when drag constraints disabled for node\n this.blocked = (this.eventArgs && this.eventArgs.source && !canMove(this.eventArgs.source)) ? false :\n (this.isMouseDown && list.length === 1 && this.tool instanceof SelectTool && !canMove(list[0]));\n }\n };\n DiagramEventHandler.prototype.isForeignObject = function (target, isTextBox) {\n var foreignobject = target;\n if (foreignobject) {\n while (foreignobject.parentNode !== null) {\n if (typeof foreignobject.className === 'string' &&\n ((!isTextBox && foreignobject.className.indexOf('foreign-object') !== -1) ||\n (isTextBox && foreignobject.className.indexOf('e-diagram-text-edit') !== -1))) {\n return foreignobject;\n }\n else {\n foreignobject = foreignobject.parentNode;\n }\n }\n }\n return null;\n };\n DiagramEventHandler.prototype.isMetaKey = function (evt) {\n //EJ2-55887 - added the beow code to perform pinch zoom in mac os and windows while pinch zoom all browser return ctrl key as true.\n if (evt.type === 'mousewheel') {\n return evt.ctrlKey;\n }\n else {\n return navigator.platform.match('Mac') ? evt.metaKey : evt.ctrlKey;\n }\n };\n DiagramEventHandler.prototype.renderUmlHighLighter = function (args) {\n this.diagram.commandHandler.removeStackHighlighter();\n var node = this.diagram.selectedItems.nodes[0];\n if (node && node.container && node.container.type === 'Stack' && node.shape.type === 'UmlClassifier') {\n var bound = node.wrapper.bounds;\n if (!bound.containsPoint(this.currentPosition)) {\n // eslint-disable-next-line max-len\n var objects = this.diagram.findObjectsUnderMouse({ x: this.currentPosition.x - 20, y: this.currentPosition.y });\n var target = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n if (target && target.parentId && (target.parentId === node.id)) {\n // eslint-disable-next-line max-len\n var isVertical = this.diagram.nameTable[target.parentId].container.orientation === 'Vertical';\n renderStackHighlighter(target.wrapper, isVertical, args.position, this.diagram, true);\n }\n }\n }\n };\n DiagramEventHandler.prototype.isDeleteKey = function (key, value) {\n return (navigator.platform.match('Mac') && key === 'Backspace' && value === 'delete');\n };\n DiagramEventHandler.prototype.isMouseOnScrollBar = function (evt) {\n var x = evt.offsetX;\n var y = evt.offsetY;\n var diagramCanvas = this.diagram.diagramCanvas;\n var height = diagramCanvas.offsetHeight;\n var width = diagramCanvas.offsetWidth;\n var topLeft;\n var topRight;\n var bottomLeft;\n var bottomRight;\n var bounds;\n if (height < diagramCanvas.scrollHeight) {\n //default scrollbar width in browser is '17pixels'.\n topLeft = { x: (width - 17), y: 0 };\n topRight = { x: width, y: 0 };\n bottomLeft = { x: (width - 17), y: height };\n bottomRight = { x: width, y: height };\n bounds = Rect.toBounds([topLeft, topRight, bottomLeft, bottomRight]);\n // EJ2-64563-Added below code to calculate the bounds x and y value if vertical offset != 0\n if (this.diagram.scroller.verticalOffset !== 0) {\n bounds.x = bounds.x - this.diagram.scroller.horizontalOffset;\n bounds.y = bounds.y - this.diagram.scroller.verticalOffset;\n }\n if (bounds.containsPoint({ x: x, y: y })) {\n return true;\n }\n }\n if (width < diagramCanvas.scrollWidth) {\n topLeft = { x: 0, y: (height - 17) };\n topRight = { x: width, y: (height - 17) };\n bottomLeft = { x: 0, y: height };\n bottomRight = { x: width, y: height };\n bounds = Rect.toBounds([topLeft, topRight, bottomLeft, bottomRight]);\n // EJ2-64563-Added below code to calculate the bounds x and y value if horizontal offset != 0\n if (this.diagram.scroller.horizontalOffset !== 0) {\n bounds.x = bounds.x - this.diagram.scroller.horizontalOffset;\n bounds.y = bounds.y - this.diagram.scroller.verticalOffset;\n }\n if (bounds.containsPoint({ x: x, y: y })) {\n return true;\n }\n }\n return false;\n };\n /** @private */\n DiagramEventHandler.prototype.updateVirtualization = function () {\n var _this = this;\n var delay = 50;\n //let removeObjectInterval: Object;\n var removeObjectInterval = setInterval(function (args) {\n _this.diagram.removeVirtualObjects(removeObjectInterval);\n }, delay);\n setTimeout(function () {\n _this.diagram.deleteVirtualObject = true;\n }, delay);\n };\n DiagramEventHandler.prototype.checkPreviousAction = function () {\n if (this.action !== this.previousAction && this.diagram.selectedItems.userHandles.length) {\n for (var i = 0; i < this.diagram.selectedItems.userHandles.length; i++) {\n if (this.previousAction && this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)]) {\n this.checkUserHandleEvent(DiagramEvent.onUserHandleMouseLeave);\n this.previousAction = 'None';\n }\n }\n }\n if (this.action !== this.previousAction) {\n // If the mouse leaves the fixed user handle, the tooltip is closed\n this.checkFixedUserHandleEvent(DiagramEvent.onFixedUserHandleMouseLeave, this.targetItem, this.previousTarget);\n this.previousTarget = null;\n this.targetItem = null;\n }\n };\n DiagramEventHandler.prototype.checkUserHandleEvent = function (eventName) {\n if (this.diagram.selectedItems && this.diagram.selectedItems.userHandles.length > 0) {\n var currentAction = (eventName === DiagramEvent.onUserHandleMouseLeave) ? this.previousAction : this.action;\n var arg = { element: undefined };\n for (var i = 0; i < this.diagram.selectedItems.userHandles.length; i++) {\n if ((currentAction === this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)].name) ||\n (eventName === DiagramEvent.onUserHandleMouseUp && currentAction === 'Select')) {\n arg.element = this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)];\n this.userHandle(eventName, i, arg, null);\n }\n }\n }\n };\n DiagramEventHandler.prototype.userHandle = function (eventName, i, arg, targetItem) {\n if (eventName === DiagramEvent.onUserHandleMouseEnter || eventName === DiagramEvent.onFixedUserHandleMouseEnter) {\n this.previousAction = this.action;\n // EJ2-32213- Added the below code to check whether the userhandle has tooltip content.\n // If userhandle has tooltip content then we open the tooltip based on the userhandle shape\n if (arg.element.tooltip && arg.element.tooltip.openOn === 'Auto' && arg.element.tooltip.content !== '') {\n updateTooltip(this.diagram, arg.element);\n var targetEle = void 0;\n if (arg.element.pathData) {\n if (eventName === DiagramEvent.onUserHandleMouseEnter) {\n targetEle = document.getElementById(this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)].name + '_userhandle');\n }\n else if (eventName === DiagramEvent.onFixedUserHandleMouseEnter) {\n targetEle = document.getElementById(targetItem.id + '_' + targetItem.fixedUserHandles[parseInt(i.toString(), 10)].id + '_groupElement');\n }\n }\n else if (arg.element.source) {\n targetEle = document.getElementById(this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)].name + '_image');\n }\n else if (arg.element.content) {\n targetEle = document.getElementById(this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)].name + '_shape_native_element');\n }\n else {\n targetEle = document.getElementById(this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)].name + '_shape_html_element');\n }\n //892828: Flickering of tooltip while hovering userhandle\n if (arg.element.tooltip.openOn === 'Auto' && (arg.element !== this.isUserHandleHover)) {\n this.isUserHandleHover = arg.element;\n this.diagram.tooltipObject.open(targetEle);\n }\n }\n this.diagram.triggerEvent(eventName, arg);\n }\n if (eventName === DiagramEvent.onUserHandleMouseDown) {\n this.userHandleObject = this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)].name;\n this.diagram.triggerEvent(eventName, arg);\n }\n else if (eventName === DiagramEvent.onFixedUserHandleMouseDown) {\n this.diagram.triggerEvent(eventName, arg);\n }\n if (eventName === DiagramEvent.onUserHandleMouseUp) {\n var element = document.getElementById(this.diagram.selectedItems.userHandles[parseInt(i.toString(), 10)].name + '_userhandle');\n if (this.commandHandler.isUserHandle(this.currentPosition)\n && element && element.id === this.userHandleObject + '_userhandle') {\n //EJ2-838423 -onUserHandleMouseUp event triggers multiple times\n this.diagram.triggerEvent(eventName, arg);\n }\n }\n else if (eventName === DiagramEvent.onFixedUserHandleMouseUp) {\n this.diagram.triggerEvent(eventName, arg);\n }\n if (eventName === DiagramEvent.onUserHandleMouseLeave || eventName === DiagramEvent.onFixedUserHandleMouseLeave) {\n if (this.diagram.tooltipObject && this.diagram.tooltipObject.openOn !== 'Custom') {\n this.isUserHandleHover = null;\n this.diagram.tooltipObject.close();\n }\n this.diagram.triggerEvent(eventName, arg);\n }\n };\n // In the method, verify the fixed user handle and manage the opening and closing of the tooltip according to mouse events\n DiagramEventHandler.prototype.checkFixedUserHandleEvent = function (eventName, targetItem, wrapper) {\n if (targetItem && targetItem.fixedUserHandles.length > 0) {\n var arg = { element: undefined };\n var userid = void 0;\n var currentAction = void 0;\n for (var i = 0; i < targetItem.fixedUserHandles.length; i++) {\n userid = targetItem.fixedUserHandles[parseInt(i.toString(), 10)].id;\n if (wrapper && wrapper.id && (wrapper.id.indexOf(userid) > -1)) {\n currentAction = userid;\n this.previousTarget = wrapper;\n this.targetItem = targetItem;\n }\n if (currentAction === targetItem.fixedUserHandles[parseInt(i.toString(), 10)].id) {\n arg.element = targetItem.fixedUserHandles[parseInt(i.toString(), 10)];\n this.userHandle(eventName, i, arg, targetItem);\n }\n }\n }\n };\n DiagramEventHandler.prototype.mouseDown = function (evt) {\n var _this = this;\n //Bug 913785: Tooltip for node is not showing when touch and hold on node in mobile device.\n if (evt.type === 'touchstart') {\n this.timeOutTapHold = setTimeout(function () {\n if (_this.action === 'Select' || _this.action === 'Drag') {\n _this.mouseMove(evt, undefined);\n }\n }, 500);\n }\n // EJ2-57541 - Added the below code to check whether diagram tool is instance of node drawing tool or connector drawing tool.\n // If node or connector drawing tool means then we have returned without perform any operation.\n if (this.inAction === true && ((this.tool) instanceof NodeDrawingTool || this.tool instanceof ConnectorDrawingTool)) {\n return;\n }\n this.focus = true;\n //let touches: TouchList;\n var touches = evt.touches;\n var isSymblDragging = document.getElementsByClassName('e-dragclone')[0] ? true : false;\n if (this.isMouseOnScrollBar(evt) && !isSymblDragging) {\n this.isScrolling = true;\n evt.preventDefault();\n return;\n }\n // commanded by gowtham- unwanted cloning of selectedItems\n // if (isBlazor()) {\n // this.commandHandler.oldSelectedObjects = cloneObject(this.diagram.selectedItems);\n // }\n this.checkFixedUserHandleEvent(DiagramEvent.onFixedUserHandleMouseDown, this.targetItem, this.previousTarget);\n this.checkUserHandleEvent(DiagramEvent.onUserHandleMouseDown);\n if (!this.checkEditBoxAsTarget(evt) && (canUserInteract(this.diagram)) ||\n (canZoomPan(this.diagram) && !defaultTool(this.diagram))) {\n if (this.action === 'Select' || this.action === 'Drag') {\n this.diagram.updatePortVisibility(this.hoverElement, PortVisibility.Hover, true);\n }\n if (((this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool)\n && (evt.button === 2 || evt.buttons === 2))) {\n // eslint-disable-next-line\n var arg = {\n element: cloneBlazorObject(this.diagram), position: cloneBlazorObject(this.currentPosition),\n count: evt.buttons, actualObject: cloneBlazorObject(this.eventArgs.actualObject),\n button: (evt.button === 0) ? 'Left' : (evt.button === 1) ? 'Middle' : 'Right'\n };\n this.inAction = false;\n this.tool.mouseUp(this.eventArgs);\n }\n else if (((this.inAction === true) && this.isMouseDown === true &&\n (this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool))) {\n this.isMouseDown = true;\n this.eventArgs = {};\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n this.eventArgs.position = this.currentPosition;\n this.tool.mouseDown(this.eventArgs);\n }\n else {\n this.isMouseDown = true;\n this.currentPosition = this.prevPosition = this.getMousePosition(evt);\n this.eventArgs = {};\n if (this.diagram.textEditing && !this.isMouseOnScrollBar(evt)) {\n this.diagram.endEdit();\n this.diagram.textEditing = false;\n // EJ2-57743 - Added below code to refresh the diagram layer after the annotation gets edited in canvas mode.\n if (this.diagram.mode === 'Canvas' && this.diagram.scroller.currentZoom !== 1) {\n this.diagram.refreshDiagramLayer();\n }\n }\n var targetObject = this.getTargetElement();\n this.action = this.diagram.findActionToBeDone(targetObject.obj, targetObject.sourceElement, this.currentPosition, targetObject.target);\n //work around - correct it\n var ctrlKey = this.isMetaKey(evt);\n if (ctrlKey && evt.shiftKey && this.diagram.connectorEditingToolModule) {\n this.action = 'SegmentEnd';\n //Bug 892496: Unable to unselect selected node using CTRL+Click when zoompan is enabled.\n //Added this condition whether single select or multi select is enabled in diagram tool.\n }\n else if ((ctrlKey || evt.shiftKey) && (canSingleSelect(this.diagram) || canMultiSelect(this.diagram))) {\n this.action = 'Select';\n }\n this.tool = this.diagram.getTool(this.action);\n if (!this.tool) {\n this.action = 'Select';\n this.tool = this.diagram.getTool(this.action);\n }\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n if (ctrlKey || evt.shiftKey) {\n var info = (ctrlKey && evt.shiftKey) ? { ctrlKey: ctrlKey, shiftKey: evt.shiftKey } : { ctrlKey: true };\n this.eventArgs.info = info;\n }\n this.eventArgs.position = this.currentPosition;\n //834641 - Support to unselect the diagram element that is already selected\n var prevSelectedNode = this.diagram.selectedItems.nodes;\n this.tool.mouseDown(this.eventArgs);\n if (this.diagram.selectedItems.canToggleSelection && prevSelectedNode\n && this.diagram.selectedItems.nodes && this.tool instanceof MoveTool) {\n for (var i = 0; i < prevSelectedNode.length; i++) {\n if (prevSelectedNode[parseInt(i.toString(), 10)].id\n !== this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].id) {\n this.isSwimlaneSelected = true;\n }\n }\n }\n this.initialEventArgs = { source: this.eventArgs.source, sourceWrapper: this.eventArgs.sourceWrapper };\n this.initialEventArgs.position = this.currentPosition;\n this.initialEventArgs.info = this.eventArgs.info;\n this.inAction = false;\n if (evt.type === 'touchstart') {\n if (touches && touches.length >= 2) {\n this.touchStartList = addTouchPointer(this.touchStartList, evt, touches);\n }\n if (!touches) {\n evt.preventDefault();\n }\n }\n }\n }\n if (!this.isForeignObject(evt.target) && !this.isForeignObject(evt.target, true) && (!touches)) {\n evt.preventDefault();\n }\n };\n /** @private */\n DiagramEventHandler.prototype.mouseMoveExtend = function (e, obj) {\n if (this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool) {\n this.tool.mouseMove(this.eventArgs);\n }\n if (this.diagram.scrollSettings.canAutoScroll) {\n this.checkAutoScroll(e);\n }\n else {\n if (!this.blocked) {\n (this.tool.mouseMove(this.eventArgs));\n }\n }\n if (this.eventArgs.target) {\n this.hoverElement = this.eventArgs.target;\n }\n var isNode = (this.eventArgs.target instanceof Node || this.eventArgs.target instanceof Connector)\n && (obj instanceof Node || obj instanceof Connector) ? false : true;\n if (this.tool instanceof ConnectTool) {\n this.diagram.updatePortVisibility((this.hoverElement instanceof Node || this.hoverElement instanceof Connector)\n ? this.hoverElement : this.hoverNode, PortVisibility.Connect | PortVisibility.Hover, isNode);\n }\n if (this.hoverElement instanceof Node\n && this.hoverNode instanceof Node && this.hoverNode && this.hoverNode.id !== this.hoverElement.id) {\n this.diagram.updatePortVisibility(this.hoverNode, PortVisibility.Connect | PortVisibility.Hover, true);\n }\n if (this.hoverElement instanceof Connector && (this.hoverElement.ports.length > 0)) {\n this.diagram.updatePortVisibility(this.hoverElement, PortVisibility.Connect | PortVisibility.Hover, true);\n }\n // 890089: Unintended Port Visibility Issue Fix\n // Updating port visibility based on the previous hoverElement\n if (this.previousElement instanceof Node && this.hoverElement && (this.previousElement.id !== this.hoverElement.id)) {\n this.diagram.updatePortVisibility(this.previousElement, PortVisibility.Connect | PortVisibility.Hover, true);\n }\n this.previousElement = this.hoverElement;\n // Updating tooltip content on mouse relative mode\n if (this.diagram.tooltip.content !== '') {\n this.hoverElement = null;\n }\n this.hoverNode = isNode ? null : obj;\n };\n /** @private */\n DiagramEventHandler.prototype.checkAction = function (obj) {\n if (this.action === 'LabelSelect' && this.eventArgs.sourceWrapper &&\n (this.eventArgs.sourceWrapper instanceof TextElement || this.eventArgs.sourceWrapper instanceof DiagramHtmlElement)) {\n var annotation = this.commandHandler.findTarget(this.eventArgs.sourceWrapper, this.eventArgs.source);\n if (!isSelected(this.diagram, annotation, false, this.eventArgs.sourceWrapper) && canMove(annotation)) {\n this.action = 'LabelDrag';\n this.tool = this.getTool(this.action);\n this.tool.mouseDown(this.initialEventArgs);\n }\n }\n else if (canMove(obj) && canSelect(obj) && this.initialEventArgs &&\n this.initialEventArgs.source && this.action === 'Select') {\n if (!isSelected(this.diagram, this.eventArgs.source, false) &&\n this.eventArgs.source instanceof Selector) {\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n }\n if (!(obj instanceof Connector) || (obj instanceof Connector &&\n !(contains(this.currentPosition, obj.sourcePoint, obj.hitPadding) ||\n contains(this.currentPosition, obj.targetPoint, obj.hitPadding)))) {\n this.action = 'Drag';\n }\n this.tool = this.getTool(this.action);\n this.tool.mouseDown(this.initialEventArgs);\n }\n };\n DiagramEventHandler.prototype.isSwimlaneElements = function (obj) {\n if (obj && (obj.isLane || obj.isPhase || obj.isHeader)) {\n return false;\n }\n else {\n return true;\n }\n };\n //To decide whether to show tooltip on touch long press\n DiagramEventHandler.prototype.canShowTouchTooltip = function (evt) {\n if (evt.type === 'touchstart') {\n if ((this.diagram.tool & DiagramTools.SingleSelect) && (this.diagram.tool & DiagramTools.ZoomPan)) {\n this.isMouseDown = false;\n return true;\n }\n }\n return false;\n };\n /* tslint:disable */\n /** @private */\n DiagramEventHandler.prototype.mouseMove = function (e, touches) {\n this.focus = true;\n //Bug 914365: Node is not resizable using touch interaction\n if (e.type === 'touchmove') {\n this.touchArgs = { target: e.target, type: 'touchmove' };\n }\n if (this.isScrolling) {\n e.preventDefault();\n return;\n }\n if (canUserInteract(this.diagram) || (canZoomPan(this.diagram) && !defaultTool(this.diagram))) {\n this.currentPosition = this.getMousePosition(e);\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n drawRulerMarkers(this.diagram, this.currentPosition);\n var force = false;\n var target = void 0;\n if (e.type === 'touchmove') {\n touches = e.touches;\n if (touches && touches.length > 1) {\n this.touchMoveList = addTouchPointer(this.touchMoveList, e, touches);\n if (this.action !== 'PinchZoom') {\n force = true;\n }\n }\n }\n if (Point.equals(this.currentPosition, this.prevPosition) === false || this.inAction || this.canShowTouchTooltip(e)) {\n if (this.isMouseDown === false || force) {\n this.eventArgs = {};\n var sourceElement = null;\n var tooltipTarget = void 0;\n if (obj !== null) {\n sourceElement = this.diagram.findElementUnderMouse(obj, this.currentPosition, this.diagram);\n //834842-Exception/error occurs when hovering on the connector\n //tooltiptarget to be found only if the source element is not null\n if (sourceElement) {\n tooltipTarget = this.commandHandler.findTarget(sourceElement, obj);\n }\n //908569: Node Tooltip Flickers when hovering on Annotation\n //If the annotation does not have tooltip content, set the tooltip target as an object\n if (tooltipTarget instanceof ShapeAnnotation || tooltipTarget instanceof PathAnnotation) {\n if (!(tooltipTarget.tooltip && tooltipTarget.tooltip.content !== '')) {\n tooltipTarget = obj;\n }\n }\n if (tooltipTarget !== this.hoverElement) {\n var content_1 = this.getContent();\n if (this.hoverElement && this.hoverElement.tooltip.openOn === 'Auto' && content_1 !== '') {\n this.elementLeave();\n }\n this.diagram.updatePortVisibility(this.hoverElement, PortVisibility.Hover, true);\n if (obj instanceof Node) {\n this.hoverNode = obj;\n }\n var canResetElement = true;\n if (!this.isSwimlaneElements(obj)\n && (this.hoverElement && this.isSwimlaneElements(this.hoverElement))) {\n canResetElement = false;\n }\n this.hoverElement = canResetElement ? obj : this.hoverElement;\n //EJ2-62120 - Provide tooltip support for ports - to set hoverelement as PathElement if hovered on ports in Node\n var portElement = null;\n var portTarget = void 0;\n portElement = this.diagram.findElementUnderMouse(obj, this.currentPosition, this.diagram);\n if (portElement instanceof PathElement) {\n portTarget = this.commandHandler.findTarget(portElement, obj);\n if ((portTarget instanceof PointPort || portTarget instanceof PathPort)\n && this.hoverElement.constraints & PortConstraints.ToolTip) {\n this.hoverElement = portTarget;\n }\n }\n //839511: Tooltip support for annotation - to set hoverelement as TextElement if hovered on annotation in Node/Connector\n var annotationTarget = void 0;\n if (portElement instanceof TextElement) {\n annotationTarget = this.commandHandler.findTarget(portElement, obj);\n if ((annotationTarget instanceof ShapeAnnotation || annotationTarget instanceof PathAnnotation)\n && annotationTarget.constraints & AnnotationConstraints.Tooltip) {\n this.hoverElement = annotationTarget;\n }\n }\n if (canResetElement) {\n this.elementEnter(this.currentPosition, false);\n }\n else {\n this.hoverElement = obj;\n }\n }\n // EJ2-66418 - set tooltip relativeMode as mouse\n // Updating the tooltip position based on Mouse move\n else if (this.hoverElement) {\n if (this.hoverElement === tooltipTarget && this.hoverElement.tooltip.content && this.diagram.tooltipObject !== undefined && this.hoverElement.tooltip.relativeMode === 'Mouse') {\n this.setTooltipOffset(this.currentPosition);\n }\n }\n if (sourceElement) {\n target = this.commandHandler.findTarget(sourceElement, obj);\n }\n }\n this.action = this.diagram.findActionToBeDone(obj, sourceElement, this.currentPosition, target);\n this.checkFixedUserHandleEvent(DiagramEvent.onFixedUserHandleMouseEnter, obj, sourceElement);\n this.checkUserHandleEvent(DiagramEvent.onUserHandleMouseEnter);\n this.checkPreviousAction();\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n this.tool = this.getTool(this.action);\n this.mouseEvents();\n if (this.tool instanceof ConnectorDrawingTool ||\n this.tool instanceof PolyLineDrawingTool ||\n this.tool instanceof PolygonDrawingTool) {\n this.tool.mouseMove(this.eventArgs);\n }\n else if (touches && this.tool instanceof ZoomPanTool) {\n this.tool.mouseDown(this.eventArgs);\n }\n this.updateCursor();\n this.renderUmlHighLighter(this.eventArgs);\n var isNode = false;\n if (!(this.hoverElement && (!(this.tool instanceof ZoomPanTool))\n && (obj instanceof Node && this.isSwimlaneElements(obj)) &&\n (this.diagram.selectedItems.nodes.length === 0 || !isSelected(this.diagram, this.hoverElement)))\n && (!(this.hoverElement instanceof Connector))) {\n isNode = true;\n }\n if (!(this.hoverElement && (!(this.tool instanceof ZoomPanTool))\n && (obj instanceof Connector) &&\n (this.diagram.selectedItems.connectors.length === 0 || !isSelected(this.diagram, this.hoverElement)))\n && (!(this.hoverElement instanceof Node))) {\n isNode = true;\n }\n this.diagram.updatePortVisibility(this.hoverElement, PortVisibility.Hover, isNode);\n var content = this.getContent();\n if (obj === null && this.hoverElement && this.hoverElement.tooltip.openOn === 'Auto' && content) {\n this.hoverElement = null;\n this.elementLeave();\n }\n force = false;\n }\n else {\n this.eventArgs.position = this.currentPosition;\n if (this.action === 'Drag' && !isSelected(this.diagram, this.eventArgs.source, false) &&\n this.eventArgs.source instanceof Selector) {\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n }\n this.mouseEvents();\n if (e.ctrlKey || e.shiftKey) {\n var info = (e.ctrlKey && e.shiftKey) ? { ctrlKey: e.ctrlKey, shiftKey: e.shiftKey } : { ctrlKey: true };\n this.eventArgs.info = info;\n }\n this.checkAction(obj);\n var padding = this.getConnectorPadding(this.eventArgs);\n this.getMouseEventArgs(this.currentPosition, this.eventArgs, this.eventArgs.source, padding);\n this.updateCursor();\n this.inAction = true;\n this.initialEventArgs = null;\n if (this.action === 'Drag' || this.action === 'Rotate') {\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.Interactions;\n }\n //Bug 863516: Overview is not synced with diagram content while zoom-out the diagram.\n //Checking page bounds before and after dragging node, and updating the overview rect if the page bounds modified after the drag.\n var preDragBounds = this.diagram.scroller.getPageBounds();\n this.mouseMoveExtend(e, obj);\n var postDragBounds = this.diagram.scroller.getPageBounds();\n if (obj && (preDragBounds.width !== postDragBounds.width ||\n preDragBounds.height !== postDragBounds.height ||\n preDragBounds.x !== postDragBounds.x ||\n preDragBounds.y !== postDragBounds.y)) {\n if (this.diagram.views && this.diagram.views.overview) {\n var overview = this.diagram.views.overview;\n overview.updateView(overview);\n }\n }\n }\n this.prevPosition = this.currentPosition;\n if (!this.isForeignObject(e.target, true)) {\n e.preventDefault();\n }\n }\n }\n };\n /* tslint:enable */\n DiagramEventHandler.prototype.getContent = function () {\n var isPrivateTooltip = ((this.hoverElement instanceof Node)\n && this.hoverElement.constraints & NodeConstraints.Tooltip) ||\n ((this.hoverElement instanceof Connector) && this.hoverElement.constraints & ConnectorConstraints.Tooltip)\n || ((this.hoverElement instanceof PointPort || this.hoverElement instanceof PathPort)\n && this.hoverElement.constraints & PortConstraints.ToolTip) ||\n ((this.hoverElement instanceof ShapeAnnotation || this.hoverElement instanceof PathAnnotation)\n && this.hoverElement.constraints & AnnotationConstraints.Tooltip);\n var node = this.hoverElement;\n var childNode;\n if (node instanceof Node && node.children && node.children.length > 0) {\n childNode = this.findIntersectChild(node);\n }\n var content = isPrivateTooltip ? this.hoverElement.tooltip.content :\n this.diagram.tooltip.content;\n content = childNode ? childNode.tooltip.content : content;\n return content;\n };\n DiagramEventHandler.prototype.findIntersectChild = function (node) {\n var childNode;\n var rect = new Rect(this.currentPosition.x, this.currentPosition.y, 8, 8);\n for (var i = 0; i < node.children.length; i++) {\n childNode = this.diagram.getObject(node.children[parseInt(i.toString(), 10)]);\n if (childNode.wrapper.outerBounds.intersects(rect)) {\n return childNode;\n }\n }\n return null;\n };\n DiagramEventHandler.prototype.checkAutoScroll = function (e) {\n var autoScrollPosition = this.startAutoScroll(e);\n if (!autoScrollPosition && this.doingAutoScroll) {\n this.doingAutoScroll = false;\n clearInterval(this.timeOutValue);\n }\n else if (autoScrollPosition) {\n if ((this.tool instanceof NodeDrawingTool || this.tool instanceof ConnectorDrawingTool\n || this.tool instanceof MoveTool || this.tool instanceof ResizeTool\n || this.tool instanceof SelectTool || this.tool instanceof ConnectTool) && this.inAction) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var diagram_1 = this;\n var delay_1 = this.diagram.scrollSettings.autoScrollFrequency;\n if (delay_1 < 10 || isNaN(delay_1)) {\n delay_1 = 100;\n }\n if (this.diagram.scrollSettings.canAutoScroll && autoScrollPosition && !this.doingAutoScroll) {\n this.doingAutoScroll = true;\n this.timeOutValue = setInterval(function (args) {\n diagram_1.doAutoScroll(autoScrollPosition, e, delay_1);\n }, delay_1);\n }\n }\n }\n else {\n this.blocked = !(this.tool.mouseMove(this.eventArgs));\n }\n };\n /* tslint:disable */\n /** @private */\n DiagramEventHandler.prototype.mouseUp = function (evt) {\n clearTimeout(this.timeOutTapHold);\n //Bug 914365: Node is not resizable using touch interaction\n this.touchArgs = undefined;\n this.diagram.diagramRenderer.touchMove = undefined;\n //EJ2-849817-Dropping nodes in swimlane does not consider as child in angular\n if (this.eventArgs && this.eventArgs.target && this.eventArgs.target !== this.hoverNode\n && this.eventArgs.target !== this.lastObjectUnderMouse) {\n this.hoverNode = this.eventArgs.target;\n this.lastObjectUnderMouse = this.eventArgs.target;\n }\n //Bug 881512: Wrapping of the connector annotation at run time not working properly.\n //To wrap the connector annotation text after the node rotated or dragged.\n var updateAnnotation = false;\n if (this.tool instanceof MoveTool || this.tool instanceof RotateTool) {\n updateAnnotation = true;\n }\n this.checkFixedUserHandleEvent(DiagramEvent.onFixedUserHandleMouseUp, this.targetItem, this.previousTarget);\n this.checkUserHandleEvent(DiagramEvent.onUserHandleMouseUp);\n if (this.diagram.mode === 'SVG' && canVitualize(this.diagram)) {\n this.updateVirtualization();\n }\n var prevSelectedNodes = this.diagram.selectedItems.nodes;\n var prevSelectedConnectors = this.diagram.selectedItems.connectors;\n var unSelectLaneObj;\n this.diagram.previousSelectedObject = null;\n this.diagram.diagramRenderer.rendererActions =\n this.diagram.removeConstraints(this.diagram.diagramRenderer.rendererActions, RendererAction.DrawSelectorBorder);\n var touches = evt.touches;\n if (this.isScrolling) {\n this.isScrolling = false;\n evt.preventDefault();\n return;\n }\n if (!this.checkEditBoxAsTarget(evt) && (canUserInteract(this.diagram))\n || (canZoomPan(this.diagram) && !defaultTool(this.diagram))) {\n if (this.tool && (!(this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool) ||\n ((this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool)\n && evt.detail === 2))) {\n if (!this.isForeignObject(evt.target) && this.isMouseDown) {\n document.getElementById(this.diagram.element.id + 'content').focus();\n }\n if (!this.inAction && evt.which !== 3) {\n if (this.action === 'Drag') {\n this.action = 'Select';\n var oldSelectedValue = (this.diagram.selectedItems.nodes.concat(this.diagram.selectedItems.connectors));\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n var isMultipleSelect = true;\n if ((!evt.ctrlKey && this.isMouseDown\n && (this.diagram.selectedItems.nodes.length + this.diagram.selectedItems.connectors.length) > 1)\n && evt.which === 1 && !canPreventClearSelection(this.diagram.diagramActions)) {\n isMultipleSelect = false;\n this.commandHandler.clearSelection();\n }\n if (!isSelected(this.diagram, obj) || (!isMultipleSelect)) {\n this.commandHandler.selectObjects([obj], undefined, oldSelectedValue);\n //834641 - Support to unselect the diagram element that is already selected\n if (this.diagram.selectedItems.canToggleSelection) {\n var selectedObj = this.diagram.selectedItems.nodes;\n if (selectedObj) {\n if (selectedObj[0].parentObj instanceof Lane) {\n unSelectLaneObj = true;\n }\n }\n else if (this.diagram.selectedItems.connectors.length > 0) {\n unSelectLaneObj = true;\n }\n }\n }\n }\n }\n var avoidDropChildren = false;\n var history_1 = this.updateContainerProperties();\n var isGroupAction = void 0;\n this.addUmlNode();\n this.inAction = false;\n this.isMouseDown = false;\n if (this.diagram.selectedObject.helperObject) {\n isGroupAction = this.updateContainerBounds();\n }\n if (this.tool && (this.tool.prevPosition || this.tool instanceof LabelTool)) {\n this.eventArgs.position = this.currentPosition;\n var padding = this.getConnectorPadding(this.eventArgs);\n this.getMouseEventArgs(this.currentPosition, this.eventArgs, this.eventArgs.source, padding);\n var ctrlKey = this.isMetaKey(evt);\n if (ctrlKey || evt.shiftKey) {\n var info = (ctrlKey && evt.shiftKey) ? { ctrlKey: ctrlKey, shiftKey: evt.shiftKey } :\n { ctrlKey: true };\n this.eventArgs.info = info;\n }\n if (this.diagram.diagramActions & DiagramAction.Interactions) {\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.Interactions;\n }\n this.eventArgs.clickCount = evt.detail;\n if (this.diagram.selectedObject.helperObject && (this.tool instanceof MoveTool || this.tool instanceof ResizeTool)) {\n if (this.diagram.selectedObject.actualObject &&\n this.diagram.selectedObject.actualObject.parentId !== '') {\n var parentNode = this.diagram.getObject(this.diagram.selectedObject.actualObject.parentId);\n if (parentNode && parentNode.isLane) {\n this.commandHandler.isContainer = true;\n }\n }\n avoidDropChildren = this.diagram.lineRoutingModule\n && this.diagram.nameTable['helper'] && this.eventArgs.target && this.eventArgs.target.isLane\n && ((this.eventArgs.source instanceof Selector && this.eventArgs.source.nodes.length > 0\n && this.eventArgs.source.nodes[0].parentId === '') || (this.eventArgs.source.parentId === ''));\n if (avoidDropChildren) {\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.PreventLaneContainerUpdate;\n }\n this.tool.mouseUp(this.eventArgs, history_1.isPreventHistory);\n }\n else {\n //834641 - Support to unselect the diagram element that is already selected\n if (this.diagram.selectedItems.canToggleSelection) {\n var isGroupObj = void 0;\n var isMultiSelect = void 0;\n if (this.diagram.selectedItems.nodes.length > 0) {\n for (var i = 0; i < this.diagram.selectedItems.nodes.length; i++) {\n var swimlane = (this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].isLane\n || this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].isPhase);\n if (!swimlane) {\n if ((!(this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].parentObj instanceof Lane\n || this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].parentObj instanceof Phase))) {\n isGroupObj = this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].parentId !== '' ? true : false;\n }\n }\n }\n }\n var currSelectedNodes = this.diagram.selectedItems.nodes;\n for (var i = 0; i < prevSelectedNodes.length; i++) {\n if ((prevSelectedNodes.length > 1 && currSelectedNodes[0].id\n === prevSelectedNodes[parseInt(i.toString(), 10)].id) || prevSelectedConnectors.length > 0) {\n isMultiSelect = true;\n }\n }\n if (!this.isSwimlaneSelected && !unSelectLaneObj && !isMultiSelect && this.tool instanceof MoveTool &&\n this.currentAction === 'Select' && (!isGroupObj || this.diagram.selectedItems.connectors.length > 0)) {\n this.commandHandler.clearSelection(true);\n }\n }\n this.isSwimlaneSelected = false;\n this.tool.mouseUp(this.eventArgs);\n if (this.diagram.checkMenu && (window.navigator.userAgent.indexOf('Linux') !== -1 || window.navigator.userAgent.indexOf('X11') !== -1)) {\n if (!evt.pageY && (evt instanceof TouchEvent) && evt.changedTouches) {\n window.getSelection().removeAllRanges();\n this.diagram.contextMenuModule.contextMenu.open(evt.changedTouches[0].pageY, evt.changedTouches[0].pageX, this.diagram.element);\n evt.preventDefault();\n }\n else {\n this.diagram.contextMenuModule.contextMenu.open(evt.pageY, evt.pageX, this.diagram.element);\n }\n this.diagram.checkMenu = false;\n }\n }\n if (history_1.hasStack) {\n this.diagram.endGroupAction();\n }\n }\n if (isGroupAction) {\n this.diagram.endGroupAction();\n }\n this.updateContainerBounds(true);\n if (this.eventArgs.clickCount !== 2) {\n this.commandHandler.updateSelectedNodeProperties(this.eventArgs.source);\n if (avoidDropChildren) {\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.PreventLaneContainerUpdate;\n var nodes = this.eventArgs.source instanceof Selector\n ? this.eventArgs.source.nodes : [this.eventArgs.source];\n if (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n if (!nodes[parseInt(i.toString(), 10)].container) {\n this.commandHandler.dropChildToContainer(this.eventArgs.target, nodes[parseInt(i.toString(), 10)]);\n this.commandHandler.renderContainerHelper(nodes[parseInt(i.toString(), 10)]);\n }\n }\n }\n }\n }\n if (this.diagram.selectedObject && this.diagram.selectedObject.helperObject) {\n //Bug 884946: Undo redo not working for swimlane child node's label edit.\n //committed to remove the diagram actions public method when actual object is inside swimlane.\n var isInsideLane = this.isSwimlaneChild(this.diagram.selectedObject.actualObject);\n //isSwimlaneChildHelper is used to check whether the helper object is child's helper of lane's helper. if it is lane's helper then we should not remove the DiagramAction.PublicMethod from diagram actions.\n //If we remove the DiagramAction.PublicMethod from diagram actions then undo redo will not work properly after dropping child from diagram to swimlane.\n var isSwimlaneChildHelper = this.diagram.selectedObject.actualObject &&\n this.diagram.selectedObject.actualObject.width === this.diagram.selectedObject.helperObject.width &&\n this.diagram.selectedObject.actualObject.height === this.diagram.selectedObject.helperObject.height;\n this.diagram.remove(this.diagram.selectedObject.helperObject);\n if (this.commandHandler.isTargetSubProcess(this.diagram.selectedObject.actualObject) && this.diagram.selectedObject.actualObject.parentId === '') {\n this.swapProcessChildInDom(this.diagram.element.id + '_diagramLayer', this.diagram.selectedObject.actualObject);\n }\n this.diagram.selectedObject = { helperObject: undefined, actualObject: undefined };\n // EJ2-42605 - Annotation undo redo not working properly if the line routing is enabled committed by sivakumar sekar\n // committed to remove the diagram actions public method when line routing is enabled\n // eslint-disable-next-line\n if ((this.diagram.diagramActions & DiagramAction.PublicMethod) && (this.diagram.constraints & DiagramConstraints.LineRouting) || (isInsideLane && isSwimlaneChildHelper)) {\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.PublicMethod;\n }\n }\n this.blocked = false;\n if (this.hoverElement) {\n var portVisibility = PortVisibility.Connect;\n if (isSelected(this.diagram, this.hoverElement)) {\n portVisibility |= PortVisibility.Hover;\n }\n this.diagram.updatePortVisibility(this.hoverElement, portVisibility, true);\n this.hoverElement = null;\n }\n this.touchStartList = null;\n this.touchMoveList = null;\n if (!(this.tool instanceof TextDrawingTool)) {\n this.tool = null;\n }\n }\n if (!touches) {\n evt.preventDefault();\n }\n this.diagram.currentDrawingObject = undefined;\n var selector = this.diagram.selectedItems;\n var disbleRenderSelector = false;\n if (this.commandHandler.isUserHandle(this.currentPosition)) {\n if (this.isForeignObject(evt.target)) {\n disbleRenderSelector = true;\n }\n }\n if (!this.inAction && selector.wrapper && selector.userHandles.length > 0 && !disbleRenderSelector) {\n this.diagram.renderSelector(true);\n }\n if (!this.inAction && !this.diagram.currentSymbol && this.eventArgs) {\n /**\n *\n * EJ2-45543 Provide Event support to notify the port click\n */\n var targetObject = this.getTargetElement();\n var arg = {\n element: (targetObject.target instanceof PointPort)\n ? targetObject.target : cloneBlazorObject(this.eventArgs.source) || cloneBlazorObject(this.diagram),\n position: cloneBlazorObject(this.eventArgs.position), count: evt.detail,\n actualObject: cloneBlazorObject(this.eventArgs.actualObject),\n button: (evt.button === 0) ? 'Left' : (evt.button === 1) ? 'Middle' : 'Right'\n };\n //Removed isBlazor code\n if (this.diagram.tool !== DiagramTools.ZoomPan) {\n this.diagram.triggerEvent(DiagramEvent.click, arg);\n }\n }\n this.eventArgs = {};\n }\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.PreventLaneContainerUpdate;\n if (updateAnnotation) {\n this.updateAnnotation(this.diagram.selectedItems);\n }\n // 920132: Node Interactions Cause Previously Deleted Nodes to Reappear\n this.previousElement = null;\n this.eventArgs = {};\n this.diagram.commandHandler.removeStackHighlighter(); // end the corresponding tool\n };\n //To check whether the node is child of swimlane or not.\n DiagramEventHandler.prototype.isSwimlaneChild = function (node) {\n if (node.shape && node.shape.type !== 'SwimLane') {\n var parent_1 = this.diagram.nameTable[node.parentId];\n if (!parent_1) {\n return false;\n }\n var swimlane = parent_1.parentId ? this.diagram.nameTable[parent_1.parentId] : parent_1;\n return swimlane && swimlane.shape && swimlane.shape.type === 'SwimLane';\n }\n else {\n return false;\n }\n };\n // To wrap connector annotation text based on the connector length.\n DiagramEventHandler.prototype.updateAnnotation = function (selectedItems) {\n var nodes = selectedItems.nodes;\n if (nodes.length > 0) {\n for (var i = 0; i < nodes.length; i++) {\n var node = nodes[parseInt(i.toString(), 10)];\n this.diagram.updateConnectorEdges(node);\n }\n }\n };\n // Adding child node of sub process in the diagram layer after the subprocess dropped out from swimlane to diagram.\n DiagramEventHandler.prototype.swapProcessChildInDom = function (diagramLayerId, node) {\n var diagramLayer = document.getElementById(diagramLayerId);\n if (node.shape.activity.subProcess.processes) {\n for (var i = 0; i < node.shape.activity.subProcess.processes.length; i++) {\n var child = document.getElementById(node.shape.activity.subProcess.processes[parseInt(i.toString(), 10)] + '_groupElement');\n if (child) {\n diagramLayer.appendChild(child);\n }\n }\n }\n };\n /**\n * return the clicked element such as node/connector/port/diagram\n */\n DiagramEventHandler.prototype.getTargetElement = function () {\n var target;\n var objects = this.objectFinder.findObjectsUnderMouse(this.currentPosition, this.diagram, this.eventArgs, null, this.action);\n var obj = this.objectFinder.findObjectUnderMouse(this.diagram, objects, this.action, this.inAction, this.eventArgs, this.currentPosition);\n var sourceElement = null;\n if (obj !== null) {\n sourceElement = this.diagram.findElementUnderMouse(obj, this.currentPosition, this.diagram);\n if (sourceElement) {\n target = this.commandHandler.findTarget(sourceElement, obj);\n }\n }\n var targetObject = {\n 'obj': obj,\n 'sourceElement': sourceElement,\n 'target': target\n };\n return targetObject;\n };\n /* tslint:enable */\n DiagramEventHandler.prototype.getConnectorPadding = function (eventArgs) {\n var padding;\n var targetObject = eventArgs.source;\n if (targetObject && (targetObject instanceof Selector) && targetObject.connectors.length) {\n var selectedConnector = targetObject.connectors[0];\n padding = (selectedConnector.constraints & ConnectorConstraints.ConnectToNearByPort) ? selectedConnector.connectionPadding : 0;\n }\n else if (targetObject && (targetObject instanceof Connector) && this.action === 'PortDraw' && (this.tool instanceof ConnectorDrawingTool)) {\n if (targetObject.constraints & ConnectorConstraints.ConnectToNearByPort) {\n padding = targetObject.connectionPadding;\n }\n }\n return padding || 0;\n };\n DiagramEventHandler.prototype.addSwimLaneObject = function (selectedNode) {\n var swimlaneNode;\n var targetNode;\n var shape;\n var value;\n var canInsert;\n var index = 0;\n var offset;\n var actualShape = selectedNode.shape;\n var objects = this.objectFinder.findObjectsUnderMouse(this.currentPosition, this.diagram, this.eventArgs, null, this.action);\n if (!targetNode) {\n targetNode = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n }\n this.diagram.clearSelectorLayer();\n if (targetNode && !(targetNode.isLane || targetNode.isPhase || targetNode.isHeader)) {\n for (var i = 0; i < objects.length; i++) {\n var laneNode = this.diagram.nameTable[objects[parseInt(i.toString(), 10)].id];\n if (laneNode.isLane || laneNode.isPhase || laneNode.isHeader) {\n targetNode = laneNode;\n }\n }\n }\n if (targetNode && (actualShape.isPhase || (actualShape.isLane && targetNode.isLane))) {\n var id = targetNode.parentId;\n swimlaneNode = this.diagram.nameTable[\"\" + id];\n }\n var orientationSwap = null;\n if (swimlaneNode) {\n shape = swimlaneNode.shape;\n canInsert = (actualShape.isLane) ? actualShape.orientation === shape.orientation :\n actualShape.orientation !== shape.orientation;\n if (actualShape.isLane && actualShape.orientation !== shape.orientation) {\n canInsert = true;\n orientationSwap = actualShape.orientation === 'Horizontal' ? 'height' : 'width';\n }\n }\n if (canInsert && targetNode) {\n if (shape && shape.header && shape.hasHeader && shape.orientation === 'Horizontal') {\n index = 1;\n }\n if (shape.phases.length > 0) {\n index += 1;\n }\n if (actualShape.isPhase) {\n if (shape.orientation === 'Horizontal') {\n offset = this.currentPosition.x - swimlaneNode.wrapper.bounds.x;\n }\n else {\n offset = this.currentPosition.y - (swimlaneNode.wrapper.bounds.y + shape.header.height);\n }\n var phases = { id: randomId(), offset: offset, header: { annotation: {\n content: actualShape.phases[0].header === undefined ? 'Phase' : actualShape.phases[0].header.annotation.content,\n style: actualShape.phases[0].header === undefined ? {} : actualShape.phases[0].header.annotation.style\n } },\n //882239 - Fill color not applied properly while adding phase at runtime\n style: actualShape.phases[0] === undefined ? {} : actualShape.phases[0].style };\n this.diagram.addPhases(swimlaneNode, [phases]);\n }\n else {\n //const laneHeight: number = actualShape.lanes[0].header.height;\n var lane = {\n id: randomId(), style: actualShape.lanes[0].style, header: {\n annotation: {\n content: actualShape.lanes[0].header.annotation.content,\n style: actualShape.lanes[0].header.annotation.style\n },\n style: actualShape.lanes[0].header.style\n }\n };\n var orientation_1 = (actualShape.orientation === 'Horizontal') ? true : false;\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n orientation_1 ? lane.height = actualShape.lanes[0].height : lane.width = actualShape.lanes[0].width;\n if (shape.orientation === 'Horizontal') {\n value = targetNode.rowIndex ? targetNode.rowIndex :\n this.diagram.nameTable[targetNode.parentId].rowIndex;\n if (targetNode.wrapper.offsetY < this.currentPosition.y) {\n value += 1;\n }\n }\n else {\n value = targetNode.columnIndex ? targetNode.columnIndex :\n this.diagram.nameTable[targetNode.parentId].columnIndex;\n if (this.currentPosition.x < targetNode.wrapper.bounds.center.x) {\n value -= 1;\n }\n }\n if (shape.lanes.length > (value)) {\n lane.header.width = shape.lanes[parseInt(value.toString(), 10)].header.width;\n lane.header.height = shape.lanes[parseInt(value.toString(), 10)].header.height;\n }\n else {\n //EJ2-64457 - Not able to add lane in the existing vertical swimlane.\n var ind = void 0;\n if (shape.orientation === 'Horizontal') {\n ind = targetNode.rowIndex < 3 ? 0 : value - index - 1;\n }\n else {\n ind = value - 1;\n }\n lane.header.width = shape.lanes[parseInt(ind.toString(), 10)].header.width;\n lane.header.height = shape.lanes[parseInt(ind.toString(), 10)].header.height;\n }\n //Bug 879093: Incorrect helperguide for vertical and horizontal swim lanes.\n //With below code, we swap the height and width property of lane based on orientationSwap value.\n if (orientationSwap) {\n if (orientationSwap === 'height') {\n lane.width = lane.height;\n delete lane.height;\n }\n else {\n lane.height = lane.width;\n delete lane.width;\n }\n }\n this.diagram.addLanes(swimlaneNode, [lane], shape.orientation === 'Horizontal' ? value - index : value);\n }\n this.commandHandler.select(swimlaneNode);\n }\n else if (actualShape.isLane) {\n var swimLaneobj = {\n id: randomId(), width: selectedNode.width, height: selectedNode.height, addInfo: selectedNode.addInfo,\n shape: {\n type: 'SwimLane',\n header: {\n //864525-Issue in updating swimlane header properties dynamically\n annotation: {\n content: actualShape.header === undefined ? 'Header' : actualShape.header.annotation.content,\n style: actualShape.header === undefined ? {} : actualShape.header.annotation.style\n },\n height: 50,\n style: actualShape.header ? actualShape.header.style : actualShape.lanes[0].header.style\n },\n phases: [{\n id: randomId(),\n //864555-Issue in updating swimlane phase properties dynamically\n header: {\n annotation: {\n content: actualShape.phases === undefined ? 'Phase' : actualShape.phases[0].header === undefined\n ? 'Phase' : actualShape.phases[0].header.annotation.content,\n style: actualShape.phases === undefined ? {} : actualShape.phases[0].header === undefined\n ? {} : actualShape.phases[0].header.annotation.style\n },\n style: actualShape.phases === undefined ? {} : actualShape.phases[0].header === undefined\n ? {} : actualShape.phases[0].header.style\n },\n style: actualShape.phases === undefined ? {} : actualShape.phases[0].style\n }],\n lanes: [{\n id: randomId(), height: selectedNode.height, width: selectedNode.width, style: actualShape.lanes[0].style,\n header: {\n annotation: {\n content: actualShape.lanes[0].header.annotation.content,\n style: actualShape.lanes[0].header.annotation.style\n },\n style: actualShape.lanes[0].header.style\n }\n }], orientation: actualShape.orientation\n }\n };\n if (actualShape.orientation === 'Vertical') {\n swimLaneobj.width += 20;\n }\n swimLaneobj.offsetX = this.currentPosition.x + (swimLaneobj.width / 2);\n swimLaneobj.offsetY = this.currentPosition.y + (swimLaneobj.height / 2);\n //Bug 853721: Grid lines remain hidden when lane fill is set to transparent.\n // Added below code to set swimlane style for dropped swimlane.\n swimLaneobj.style = selectedNode.style;\n this.diagram.add(swimLaneobj);\n }\n };\n /** @private */\n DiagramEventHandler.prototype.mouseLeave = function (evt) {\n //Define what has to happen on mouse leave\n if (this.tool && this.inAction) {\n this.tool.mouseLeave(this.eventArgs);\n }\n if (this.diagram.selectedObject.helperObject) {\n this.updateContainerProperties();\n var isGroupAction = this.updateContainerBounds();\n if (isGroupAction) {\n this.diagram.endGroupAction();\n }\n }\n if (this.eventArgs && this.eventArgs.source) {\n this.diagram.updatePortVisibility(this.eventArgs.source, PortVisibility.Hover, true);\n this.hoverElement = null;\n }\n if (this.eventArgs && !this.eventArgs.source && this.hoverElement) {\n this.hoverElement = null;\n }\n if (this.tool instanceof ConnectTool && this.eventArgs && this.eventArgs.target && this.eventArgs.target instanceof Node) {\n this.diagram.updatePortVisibility(this.eventArgs.target, PortVisibility.Hover | PortVisibility.Connect, true);\n this.hoverElement = null;\n }\n var selector = this.diagram.selectedItems;\n if (selector && selector.wrapper) {\n if (!(selectionHasConnector(this.diagram, selector))) {\n this.diagram.renderSelector(true);\n }\n }\n if (this.diagram.diagramActions & DiagramAction.Interactions || this.diagram.diagramActions & DiagramAction.ToolAction) {\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.ToolAction;\n }\n this.isMouseDown = false;\n this.focus = false;\n this.touchStartList = null;\n this.touchMoveList = null;\n this.elementLeave();\n this.commandHandler.removeSnap();\n this.inAction = false;\n this.eventArgs = {};\n if (this.diagram.selectedObject && this.diagram.selectedObject.helperObject) {\n this.diagram.remove(this.diagram.selectedObject.helperObject);\n this.diagram.selectedObject = { helperObject: undefined, actualObject: undefined };\n }\n this.tool = null;\n removeRulerMarkers();\n if (this.action === 'Rotate') {\n this.diagram.diagramCanvas.classList.remove('e-diagram-rotate');\n }\n evt.preventDefault();\n };\n /** @private */\n DiagramEventHandler.prototype.mouseWheel = function (evt) {\n this.diagram.blazorActions |= BlazorAction.interaction;\n // EJ2-64831 - Need to provide support to override the mousewheel event\n var arg = {\n event: evt,\n cancel: false\n };\n this.diagram.triggerEvent(DiagramEvent.mouseWheel, arg);\n if (!arg.cancel) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var up = (evt.wheelDelta > 0 || -40 * evt.detail > 0) ? true : false;\n var mousePosition = this.getMousePosition(evt);\n this.diagram.tooltipObject.close();\n var ctrlKey = this.isMetaKey(evt);\n if (ctrlKey) {\n // SF-362356 - Command below line to implement smooth scroll in diagram.\n // this.diagram.zoom(up ? (1.2) : 1 / (1.2), mousePosition);\n // EJ2-59803 - Added the below code to get the zoom factor value from scroll settings and\n // set it to zoomFactor args in zoomTo method.\n var zoomFactor = this.diagram.scrollSettings.zoomFactor;\n if (up) {\n this.diagram.zoomTo({ type: 'ZoomIn', zoomFactor: zoomFactor, focusPoint: mousePosition });\n }\n else {\n this.diagram.zoomTo({ type: 'ZoomOut', zoomFactor: zoomFactor, focusPoint: mousePosition });\n }\n evt.preventDefault();\n }\n else {\n var horizontalOffset = this.diagram.scroller.horizontalOffset;\n var verticalOffset = this.diagram.scroller.verticalOffset;\n var change = up ? 10 : -10;\n if (this.tool && (this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool)) {\n this.eventArgs = {};\n this.getMouseEventArgs(mousePosition, this.eventArgs);\n this.eventArgs.position = mousePosition;\n this.tool.mouseWheel(this.eventArgs);\n }\n this.diagram.scrollActions |= ScrollActions.Interaction;\n var canMouseWheel = true;\n if (evt.isTrusted) {\n // Bug 829925: Scroll bar flickers on scrolling the diagram using touchpad.\n // Added the below condition to check whether the mouse wheel is from trackpad or not.\n var isTrackpadScroll = false;\n // 878719: Resolve ESLint errors\n // eslint-disable-next-line no-compare-neg-zero\n if ((Math.abs(evt.deltaY) < 100 && Math.abs(evt.deltaX) === -0) ||\n // 878719: Resolve ESLint errors\n // eslint-disable-next-line no-compare-neg-zero\n (Math.abs(evt.deltaX) < 100 && Math.abs(evt.deltaY) === -0)) {\n isTrackpadScroll = true;\n }\n //Bug 892441: Infinite scroll not working in vertical axis of diagram.\n //Due to the prevention of zoom method trigger in vertical scroll, the infinite scroll is not working in vertical axis.\n //So added the below condition to check macOS and allowed the zoom method trigger in vertical scroll for non-MacOs.\n var isMacOS = false;\n if (evt.deltaX !== 0 || evt.deltaY !== 0) {\n // Perform macOS detection\n isMacOS = navigator.userAgent.includes('Macintosh');\n }\n //898867: Diagram scrolling is not smooth while scrolling with Track Pad in Mac.\n if (isMacOS) {\n var isHorizontalScroll = Math.abs(evt.deltaX) > Math.abs(evt.deltaY);\n if (isHorizontalScroll) {\n // eslint-disable-next-line no-compare-neg-zero\n if (evt.shiftKey || (evt.deltaX && evt.deltaX !== -0 && (isTrackpadScroll || !isMacOS))) {\n this.diagram.scroller.zoom(1, change, 0, mousePosition, canMouseWheel, undefined, isTrackpadScroll);\n }\n }\n else {\n // eslint-disable-next-line no-compare-neg-zero\n if ((evt.deltaY && evt.deltaY !== -0 && (isTrackpadScroll || !isMacOS))) {\n this.diagram.scroller.zoom(1, 0, change, mousePosition, canMouseWheel, undefined, isTrackpadScroll);\n }\n }\n }\n //Bug 837940: In mac, scrollbar flickers on horizontal and vertical scroll using trackpad.\n else {\n // 878719: Resolve ESLint errors\n // eslint-disable-next-line no-compare-neg-zero\n if (evt.shiftKey || (evt.deltaX && evt.deltaX !== -0 && (isTrackpadScroll || !isMacOS))) {\n this.diagram.scroller.zoom(1, change, 0, mousePosition, canMouseWheel, undefined, isTrackpadScroll);\n }\n // eslint-disable-next-line no-compare-neg-zero\n else if ((evt.deltaY && evt.deltaY !== -0 && (isTrackpadScroll || !isMacOS))) {\n this.diagram.scroller.zoom(1, 0, change, mousePosition, canMouseWheel, undefined, isTrackpadScroll);\n }\n }\n }\n else {\n // 878719: Resolve ESLint errors\n // eslint-disable-next-line no-compare-neg-zero\n if (evt.shiftKey || (evt.deltaX && evt.deltaX !== -0)) {\n this.diagram.scroller.zoom(1, change, 0, mousePosition, canMouseWheel);\n }\n else {\n this.diagram.scroller.zoom(1, 0, change, mousePosition, canMouseWheel);\n }\n }\n this.diagram.scrollActions &= ~ScrollActions.Interaction;\n if (horizontalOffset !== this.diagram.scroller.horizontalOffset\n || verticalOffset !== this.diagram.scroller.verticalOffset) {\n evt.preventDefault();\n }\n }\n if (this.diagram.textEditing) {\n this.diagram.isTriggerEvent = true;\n if (this.diagram.activeLabel.parentId) {\n var node = this.diagram.getObject(this.diagram.activeLabel.parentId);\n this.diagram.startTextEdit(node, this.diagram.activeLabel.id);\n }\n this.diagram.isTriggerEvent = false;\n }\n this.diagram.blazorActions = this.diagram.blazorActions & ~BlazorAction.interaction;\n }\n };\n /** @private */\n DiagramEventHandler.prototype.keyDown = function (evt) {\n if (evt.fromMouseEvents) {\n if (evt.ctrlKey) {\n this.keyArgs.keyModifiers = 1;\n }\n if (evt.shiftKey) {\n this.keyArgs.keyModifiers = 4;\n }\n if (evt.shiftKey && evt.ctrlKey) {\n this.keyArgs.keyModifiers = 5;\n }\n }\n if (!(this.diagram.diagramActions & DiagramAction.TextEdit) &&\n !(this.checkEditBoxAsTarget(evt)) || (evt.key === 'Escape' || evt.keyCode === 27)) {\n var inAction = 'inAction';\n var command = void 0;\n var keycode = evt.keyCode ? evt.keyCode : evt.which;\n var key = evt.key;\n if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowRight') {\n this.isNudgeKey = true;\n }\n var ctrlKey = this.isMetaKey(evt);\n if (this.diagram.commandManager && this.diagram.commands) {\n var commands = this.diagram.commands;\n for (var _i = 0, _a = Object.keys(commands); _i < _a.length; _i++) {\n var i_1 = _a[_i];\n command = this.diagram.commands[\"\" + i_1];\n if (command && (command.gesture.keyModifiers || command.gesture.key)) {\n //Added the split method to split the Number string from the enum while clicking the number keys\n if ((keycode === command.gesture.key || (Keys[command.gesture.key] && key === Keys[command.gesture.key] || key === Keys[command.gesture.key].split('Number')[1])\n || this.isDeleteKey(key, i_1))\n && (((!command.gesture.keyModifiers) && (!evt.altKey) && (!evt.shiftKey) && (!ctrlKey)) ||\n (command.gesture.keyModifiers && (ctrlKey || evt.altKey || evt.shiftKey) &&\n (this.altKeyPressed(command.gesture.keyModifiers) && evt.altKey) ||\n (this.shiftKeyPressed(command.gesture.keyModifiers) && evt.shiftKey) ||\n //added the comparision condition of keyargs to execute the condition onclicking the Ctrl + Shift key\n (this.ctrlKeyPressed(command.gesture.keyModifiers) && ctrlKey)\n && (this.keyArgs.keyModifiers === command.gesture.keyModifiers)))) {\n var canExecute = getFunction(command.canExecute);\n if (isBlazor() || (canExecute &&\n canExecute({\n 'keyDownEventArgs': KeyboardEvent,\n parameter: command.parameter\n }))) {\n evt.preventDefault();\n if (evt.key === 'Escape') {\n if (this.checkEditBoxAsTarget(evt)) {\n document.getElementById(this.diagram.diagramCanvas.id).focus();\n }\n else if (this.diagram.currentSymbol) {\n var selectedSymbols = 'selectedSymbols';\n var source = 'sourceElement';\n var intDestroy = 'intDestroy';\n this.diagram.removeFromAQuad(this.diagram.currentSymbol);\n this.diagram.removeObjectsFromLayer(this.diagram.nameTable[this.diagram.currentSymbol.id]);\n this.diagram.removeElements(this.diagram.currentSymbol);\n removeChildNodes(this.diagram.currentSymbol, this.diagram);\n delete this.diagram.nameTable[this.diagram.currentSymbol.id];\n var sourceElement = this.diagram.droppable[\"\" + source];\n sourceElement.draggable[\"\" + intDestroy]();\n var element_1 = this.diagram.droppable[\"\" + selectedSymbols];\n element_1.parentNode.removeChild(element_1);\n var diagramActions = this.diagram.diagramActions;\n this.diagram.diagramActions =\n this.diagram.addConstraints(diagramActions, DiagramAction.PreventClearSelection);\n this.tool.mouseUp(this.eventArgs);\n this.diagram.diagramRenderer.rendererActions = this.diagram.removeConstraints(this.diagram.diagramRenderer.rendererActions, RendererAction.DrawSelectorBorder);\n if (this.diagram.previousSelectedObject) {\n this.diagram.select(this.diagram.previousSelectedObject);\n }\n this.action = 'Select';\n this.diagram.previousSelectedObject = null;\n this.diagram.currentSymbol = null;\n this.diagram.diagramActions =\n this.diagram.removeConstraints(diagramActions, DiagramAction.PreventClearSelection);\n this.isMouseDown = false;\n }\n else if (this.inAction && this.diagram.drawingObject && this.tool && this.tool[\"\" + inAction]) {\n this.tool.mouseUp(this.eventArgs);\n this.tool = null;\n this.isMouseDown = false;\n }\n }\n if (command.execute) {\n this.commandObj = command;\n if (this.diagram.tool !== DiagramTools.ZoomPan) {\n // if (i === 'nudgeUp' || i === 'nudgeRight' || i === 'nudgeDown' || i === 'nudgeLeft') {\n // command.execute()\n // } else {\n var execute = getFunction(command.execute);\n // Bug 832880: Need to improve performance while nudging multiple nodes.\n if (this.isNudgeKey) {\n if (!this.isKeyUp) {\n this.keyArgs.oldValue = { offsetX: this.diagram.selectedItems.offsetX,\n offsetY: this.diagram.selectedItems.offsetY };\n this.keyCount++;\n if (this.keyCount > 4) {\n // 914747: Position change event not triggered for Keyboard nudge commands\n execute({ 'keyDownEventArgs': KeyboardEvent, parameter: command.parameter, type: 'KEYDOWN' });\n this.keyCount = 0;\n this.keyArgs.newValue = { offsetX: this.diagram.selectedItems.offsetX,\n offsetY: this.diagram.selectedItems.offsetY };\n this.diagram.triggerEvent(DiagramEvent.positionChange, this.keyArgs);\n }\n }\n this.isKeyUp = false;\n }\n else {\n execute({ 'keyDownEventArgs': KeyboardEvent, parameter: command.parameter });\n }\n }\n // }\n }\n //Removed isBlazor code\n break;\n }\n }\n }\n }\n }\n }\n // eslint-disable-next-line\n var selectedObject = (this.diagram.selectedItems.nodes.length) ?\n this.diagram.selectedItems.nodes : this.diagram.selectedItems.connectors;\n var element = cloneBlazorObject(this.diagram.selectedItems);\n this.keyArgs = {\n element: element,\n key: evt.key, keyCode: evt.keyCode ? evt.keyCode : evt.which\n };\n this.getKeyModifier(this.keyArgs, evt);\n if ((this.diagram.diagramActions & DiagramAction.TextEdit)) {\n this.getlabel(this.keyArgs, evt);\n }\n this.diagram.triggerEvent(DiagramEvent.keyDown, this.keyArgs);\n };\n DiagramEventHandler.prototype.getlabel = function (args, evt) {\n var label = this.diagram.activeLabel;\n args.target = this.diagram.element.id + '_editBox';\n var node = this.diagram.nameTable[label.parentId];\n if (document.getElementById(this.diagram.element.id + '_editBox')) {\n args.text = document.getElementById(this.diagram.element.id + '_editBox').value;\n for (var i = 0; i < node.annotations.length; i++) {\n if (node.annotations[parseInt(i.toString(), 10)].id === label.id) {\n args.label = node.annotations[parseInt(i.toString(), 10)];\n break;\n }\n }\n }\n };\n DiagramEventHandler.prototype.getKeyModifier = function (args, evt) {\n args.keyModifiers = KeyModifiers.None;\n if (evt.ctrlKey) {\n args.keyModifiers |= KeyModifiers.Control;\n }\n if (evt.shiftKey) {\n args.keyModifiers |= KeyModifiers.Shift;\n }\n if (evt.altKey) {\n args.keyModifiers |= KeyModifiers.Alt;\n }\n if (this.isMetaKey(evt)) {\n args.keyModifiers |= KeyModifiers.Meta;\n }\n };\n DiagramEventHandler.prototype.keyUp = function (evt) {\n var element = cloneBlazorObject(this.diagram.selectedItems);\n this.keyArgs = {\n element: element, key: evt.key, keyCode: evt.keyCode ? evt.keyCode : evt.which,\n oldValue: { offsetX: element.offsetX, offsetY: element.offsetY },\n newValue: { offsetX: element.offsetX, offsetY: element.offsetY }\n };\n var selectedObject = (this.diagram.selectedItems.nodes.length) ?\n this.diagram.selectedItems.nodes : this.diagram.selectedItems.connectors;\n this.getKeyModifier(this.keyArgs, evt);\n if ((this.diagram.diagramActions & DiagramAction.TextEdit)) {\n this.getlabel(this.keyArgs, evt);\n }\n this.diagram.triggerEvent(DiagramEvent.keyUp, this.keyArgs);\n // this.isKeyUp = true;\n // Bug 832880: Need to improve performance while nudging multiple nodes.\n if (!this.isKeyUp && this.isNudgeKey) {\n //Bug 860080: Navigation not working in keyboard interaction SB sample.\n //To execute the command manager execute method below as we restricted keydown for arrow keys.\n var execute = getFunction(this.commandObj.execute);\n execute({ 'keyDownEventArgs': KeyboardEvent, parameter: this.commandObj.parameter, type: 'KEYUP' });\n // 914747: Position change event not triggered for Keyboard nudge commands\n this.keyArgs.newValue = { offsetX: this.diagram.selectedItems.offsetX, offsetY: this.diagram.selectedItems.offsetY };\n this.diagram.triggerEvent(DiagramEvent.positionChange, this.keyArgs);\n this.isNudgeKey = false;\n this.keyCount = 0;\n }\n };\n DiagramEventHandler.prototype.startAutoScroll = function (e) {\n var position = this.getMousePosition(e);\n position.x *= this.diagram.scroller.currentZoom;\n position.y *= this.diagram.scroller.currentZoom;\n var rulerSize = getRulerSize(this.diagram);\n var movingPosition;\n var autoScrollBorder = this.diagram.scrollSettings.autoScrollBorder;\n if (Browser.info.name === 'mozilla') {\n if (this.diagram.scroller.viewPortWidth === 0) {\n var bounds = document.getElementById(this.diagram.element.id).getBoundingClientRect();\n if (bounds.width !== this.diagram.scroller.viewPortWidth) {\n this.diagram.scroller.setViewPortSize(bounds.width, bounds.height);\n }\n }\n }\n if (this.diagram.scrollSettings.canAutoScroll) {\n if (position.x + this.diagram.scroller.horizontalOffset + autoScrollBorder.right + rulerSize.width >=\n this.diagram.scroller.viewPortWidth - 18) {\n movingPosition = 'right';\n }\n else if (position.x + this.diagram.scroller.horizontalOffset < autoScrollBorder.left) {\n movingPosition = 'left';\n }\n else if (position.y + this.diagram.scroller.verticalOffset + autoScrollBorder.bottom + rulerSize.height >\n this.diagram.scroller.viewPortHeight - 18) {\n movingPosition = 'bottom';\n }\n else if (position.y + this.diagram.scroller.verticalOffset < autoScrollBorder.top) {\n movingPosition = 'top';\n }\n }\n return movingPosition;\n };\n DiagramEventHandler.prototype.doAutoScroll = function (option, e, delay, autoScroll) {\n var position = option;\n var canAutoScroll = true;\n if ((this.tool instanceof NodeDrawingTool || this.tool instanceof ConnectorDrawingTool\n || this.tool instanceof MoveTool || this.tool instanceof ResizeTool\n || this.tool instanceof SelectTool || this.tool instanceof ConnectTool) && this.inAction) {\n var pos = this.getMousePosition(e);\n var autoScrollBorder = this.diagram.scrollSettings.autoScrollBorder;\n var left = 0;\n var top_1 = 0;\n var canUpdate = false;\n var corner = '';\n var point = { x: pos.x, y: pos.y };\n // EJ2-61979 - Added below code to check whether we resize the node around four corners\n if (this.tool instanceof ResizeTool && (this.tool.corner === 'ResizeSouthEast' || this.tool.corner === 'ResizeSouthWest' ||\n this.tool.corner === 'ResizeNorthWest' || this.tool.corner === 'ResizeNorthEast')) {\n canUpdate = true;\n corner = this.tool.corner;\n }\n switch (position) {\n case 'right':\n point.x = pos.x + 10;\n left = 10;\n // EJ2-61979 - If node gets resized on southeast or northeast corner means then update the y position along with x position\n if (canUpdate) {\n if (corner === 'ResizeSouthEast') {\n point.y = pos.y + 10;\n top_1 = 10;\n }\n else {\n point.y = pos.y - 10;\n top_1 = -10;\n }\n }\n break;\n case 'left':\n point.x = pos.x - 10;\n left = -10;\n // EJ2-61979 - If node gets resized on northwest or southwest corner means then update the y position along with x position\n if (canUpdate) {\n if (corner === 'ResizeNorthWest') {\n point.y = pos.y - 10;\n top_1 = -10;\n }\n else {\n point.y = pos.y + 10;\n top_1 = 10;\n }\n }\n break;\n case 'bottom':\n point.y = pos.y + 10;\n top_1 = 10;\n // EJ2-61979 - If node gets resized on southeast or southwest corner means then update the x position along with y position\n if (canUpdate) {\n if (corner === 'ResizeSouthEast') {\n point.x = pos.x + 10;\n left = 10;\n }\n else {\n point.x = pos.x - 10;\n left = -10;\n }\n }\n break;\n case 'top':\n point.y = pos.y - 10;\n top_1 = -10;\n // EJ2-61979 - If node gets resized on northeast or northwest corner means then update the x position along with y position\n if (canUpdate) {\n if (corner === 'ResizeNorthEast') {\n point.x = pos.x + 10;\n left = 10;\n }\n else {\n point.x = pos.x - 10;\n left = -10;\n }\n }\n break;\n }\n this.eventArgs.position = { x: point.x, y: point.y };\n this.currentPosition = this.eventArgs.position;\n var objects = this.objectFinder.findObjectsUnderMouse(this.currentPosition, this.diagram, this.eventArgs, null, this.action);\n this.eventArgs.target = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n this.tool.mouseMove(this.eventArgs);\n this.diagram.scrollActions |= ScrollActions.Interaction;\n this.diagram.scroller.zoom(1, -left, -top_1, pos, canAutoScroll);\n this.diagram.scrollActions &= ~ScrollActions.Interaction;\n }\n };\n DiagramEventHandler.prototype.mouseEvents = function () {\n var target = this.diagram.findObjectsUnderMouse(this.currentPosition);\n for (var i = 0; i < target.length; i++) {\n if (this.eventArgs.actualObject === target[parseInt(i.toString(), 10)]) {\n target.splice(i, 1);\n }\n }\n var arg = {\n targets: {}\n };\n if (!isBlazor()) {\n arg = {\n targets: cloneBlazorObject(target),\n element: cloneBlazorObject((this.eventArgs.source === this.eventArgs.actualObject) ? undefined : this.eventArgs.source),\n actualObject: cloneBlazorObject(this.eventArgs.actualObject)\n };\n }\n //Removed isBlazor code\n if (this.lastObjectUnderMouse && this.diagram.mouseLeave\n && (!this.eventArgs.actualObject || (this.lastObjectUnderMouse !== this.eventArgs.actualObject))) {\n var arg_1 = {\n targets: undefined, element: cloneBlazorObject(this.lastObjectUnderMouse), actualObject: undefined\n };\n //Removed isBlazor code\n this.diagram.triggerEvent(DiagramEvent.mouseLeave, arg_1);\n this.lastObjectUnderMouse = null;\n }\n if (!this.lastObjectUnderMouse && this.eventArgs.source || (this.lastObjectUnderMouse !== this.eventArgs.actualObject)) {\n this.lastObjectUnderMouse = this.eventArgs.actualObject;\n if (this.eventArgs.actualObject !== undefined) {\n this.diagram.triggerEvent(DiagramEvent.mouseEnter, arg);\n }\n }\n if (this.eventArgs.actualObject) {\n this.diagram.triggerEvent(DiagramEvent.mouseOver, arg);\n }\n };\n DiagramEventHandler.prototype.elementEnter = function (mousePosition, elementOver) {\n if (!elementOver) {\n var isPrivateTooltip = ((this.hoverElement instanceof Node)\n && this.hoverElement.constraints & NodeConstraints.Tooltip)\n || ((this.hoverElement instanceof Connector)\n && this.hoverElement.constraints & ConnectorConstraints.Tooltip)\n || ((this.hoverElement instanceof PointPort || this.hoverElement instanceof PathPort)\n && this.hoverElement.constraints & PortConstraints.ToolTip)\n || ((this.hoverElement instanceof ShapeAnnotation || this.hoverElement instanceof PathAnnotation)\n && this.hoverElement.constraints & AnnotationConstraints.Tooltip);\n var content = this.getContent();\n var children = void 0;\n if (this.hoverElement && this.hoverElement.children && this.hoverElement.children.length > 0) {\n // EJ2-56981 - Below method is used to check if the mouse pointer position and group children node gets intersect or not\n children = this.findIntersectChild(this.hoverElement);\n }\n if (this.hoverElement.tooltip.openOn === 'Auto' && content !== '') {\n // EJ2-56981 - If children returned means then update tooltip for child node else update tooltip for group node.\n if (children) {\n updateTooltip(this.diagram, children);\n }\n else {\n updateTooltip(this.diagram, isPrivateTooltip ? this.hoverElement : undefined);\n }\n }\n // EJ2-66418 - set tooltip relativeMode as mouse\n // Calculating offset position for relativeMode Mouse\n if (this.hoverElement.tooltip.content) {\n if (this.hoverElement.tooltip.relativeMode === 'Mouse') {\n this.setTooltipOffset(mousePosition);\n }\n else {\n this.diagram.tooltipObject.offsetX = 0;\n this.diagram.tooltipObject.offsetY = 0;\n }\n }\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n //848980 - Null exception occurs while hovering the ports\n if (obj !== null) {\n var targetEle = void 0;\n //840454 - support to provide isSticky property for tooltip in diagram control\n if (this.hoverElement.tooltip.isSticky) {\n this.diagram.tooltipObject.isSticky = true;\n }\n if (obj instanceof Node && obj.children && obj.children.length > 0) {\n // EJ2-56981 - If children returned means then update tooltip for child node else update tooltip for group node.\n obj = children ? children : obj;\n }\n //EJ2-62120 - check if the Node has Ports and hoverElement is Port as mousepointer hovered over Port\n if (obj.ports && (this.hoverElement instanceof PointPort || this.hoverElement instanceof PathPort)) {\n //executed to set target as port\n targetEle = document.getElementById(obj.id + '_' + this.hoverElement.id);\n }\n else if (obj.annotations\n && (this.hoverElement instanceof ShapeAnnotation || this.hoverElement instanceof PathAnnotation)) {\n //executed to set target as annotation\n targetEle = document.getElementById(obj.id + '_' + this.hoverElement.id);\n }\n else {\n //executed to set target as Node or Connector\n var idName = (obj.shape && ((obj.shape) instanceof Native)) ? '_content_native_element' : '_groupElement';\n targetEle = document.getElementById(obj.id + idName);\n }\n if (this.hoverElement.tooltip.openOn === 'Auto' && content !== '') {\n this.diagram.tooltipObject.close();\n this.diagram.tooltipObject.openOn = this.hoverElement.tooltip.openOn;\n //Removed isBlazor code\n this.diagram.tooltipObject.dataBind();\n }\n if (canEnableToolTip(this.hoverElement, this.diagram) && this.hoverElement.tooltip.openOn === 'Auto') {\n this.diagram.tooltipObject.target = this.hoverElement.id;\n if (this.hoverElement.tooltip.relativeMode === 'Mouse') {\n this.diagram.tooltipObject.open(this.diagram.element);\n }\n else {\n this.diagram.tooltipObject.open(targetEle);\n }\n }\n }\n }\n };\n DiagramEventHandler.prototype.elementLeave = function () {\n if (this.diagram.tooltipObject && !this.diagram.tooltipObject.isSticky && this.diagram.tooltipObject.openOn !== 'Custom') {\n this.diagram.tooltipObject.close();\n }\n };\n // EJ2-66418 - set tooltip relativeMode as mouse\n // Calculating offset position for relativeMode Mouse\n DiagramEventHandler.prototype.setTooltipOffset = function (mousePosition) {\n var offset = getTooltipOffset(this.diagram, mousePosition, this.hoverElement);\n this.diagram.tooltipObject.offsetX = offset.x;\n this.diagram.tooltipObject.offsetY = offset.y;\n };\n DiagramEventHandler.prototype.altKeyPressed = function (keyModifier) {\n if (keyModifier & KeyModifiers.Alt) {\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.ctrlKeyPressed = function (keyModifier) {\n if (keyModifier & KeyModifiers.Control) {\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.shiftKeyPressed = function (keyModifier) {\n if (keyModifier & KeyModifiers.Shift) {\n return true;\n }\n return false;\n };\n /** @private */\n DiagramEventHandler.prototype.scrolled = function (evt) {\n this.diagram.updateScrollOffset();\n //Removed isBlazor code\n };\n DiagramEventHandler.prototype.isMobileOrIPadDevice = function () {\n var userAgent = navigator.userAgent || navigator.vendor || window.opera;\n // Check for iOS devices (iPhone, iPad, iPod)\n if (/iPhone|iPad|iPod/.test(userAgent) && !window.MSStream) {\n return 'iOS';\n }\n // Check for Android devices\n if (/android/i.test(userAgent)) {\n return 'Android';\n }\n // Check for other mobile devices (general fallback)\n if (/Mobile|Tablet/.test(userAgent)) {\n return 'Mobile';\n }\n return 'Desktop';\n };\n /** @private */\n DiagramEventHandler.prototype.doubleClick = function (evt) {\n if (canUserInteract(this.diagram)) {\n //Bug 916653: Issue with drawing Polyline in iPad.\n //Added below code to check for mobile and ipad device.\n var isMobileOrIPad = this.isMobileOrIPadDevice();\n var curTool = this.diagram.tool;\n if ((isMobileOrIPad !== 'Desktop') && (this.tool && (this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool))) {\n this.diagram.tool = 0;\n }\n var annotation = void 0;\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n if (obj !== null && canUserInteract(this.diagram)) {\n annotation = this.diagram.findElementUnderMouse(obj, this.currentPosition, this.diagram);\n if (this.tool && (this.tool instanceof PolygonDrawingTool || this.tool instanceof PolyLineDrawingTool)) {\n var arg_2 = {\n source: cloneBlazorObject(obj),\n position: this.currentPosition, count: evt.detail\n };\n this.diagram.tool = curTool;\n this.tool.mouseUp(this.eventArgs);\n this.isMouseDown = false;\n this.eventArgs = {};\n this.tool = null;\n evt.preventDefault();\n }\n else {\n var layer = this.diagram.commandHandler.getObjectLayer(obj.id);\n if (layer && !layer.lock && layer.visible) {\n if (!(this.diagram.diagramActions & DiagramAction.TextEdit)) {\n var id = '';\n this.diagram.startTextEdit(obj, id || (annotation instanceof TextElement ?\n (annotation.id).split(obj.id + '_')[1] : undefined));\n }\n }\n }\n }\n var arg = {\n source: cloneBlazorObject(obj) || cloneBlazorObject(this.diagram),\n position: this.currentPosition, count: evt.detail\n };\n //Removed isBlazor code\n this.diagram.triggerEvent(DiagramEvent.doubleClick, arg);\n }\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.itemClick = function (actualTarget, diagram) {\n var obj = actualTarget;\n if (checkParentAsContainer(this.diagram, obj, true)) {\n return obj;\n }\n return null;\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.inputChange = function (evt) {\n var minWidth = 90;\n var maxWidth;\n var minHeight = 12;\n var fontsize;\n var textWrapper;\n var node;\n var height;\n var width;\n var textBounds;\n var transforms;\n var scale;\n var editTextBox = document.getElementById(this.diagram.element.id + '_editBox');\n var editTextBoxDiv = document.getElementById(this.diagram.element.id + '_editTextBoxDiv');\n var text = (editTextBox.value);\n var line = text.split('\\n');\n node = (this.diagram.selectedItems.nodes[0]) ? this.diagram.selectedItems.nodes[0] : this.diagram.selectedItems.connectors[0];\n if ((!node && this.tool instanceof TextDrawingTool) || (node && node.shape.type === 'SwimLane')) {\n node = this.diagram.nameTable[this.diagram.activeLabel.parentId];\n }\n if (node && ((node.shape.type !== 'Text' && node.annotations.length > 0) || (node.shape.type === 'Text'))) {\n textWrapper = this.diagram.getWrapper(node.wrapper, this.diagram.activeLabel.id);\n maxWidth = node.wrapper.bounds.width < textWrapper.bounds.width ? node.wrapper.bounds.width : textWrapper.bounds.width;\n maxWidth = maxWidth > minWidth ? maxWidth : minWidth;\n textBounds = measureHtmlText(textWrapper.style, text, undefined, undefined, maxWidth);\n fontsize = Number((editTextBox.style.fontSize).split('px')[0]);\n if (line.length > 1 && line[line.length - 1] === '') {\n textBounds.height = textBounds.height + fontsize;\n }\n transforms = this.diagram.scroller.transform;\n scale = canZoomTextEdit(this.diagram) ? transforms.scale : 1;\n width = textBounds.width;\n width = ((minWidth > width) ? minWidth : width) * scale;\n height = ((minHeight > textBounds.height) ? minHeight : textBounds.height) * scale;\n editTextBoxDiv.style.left = ((((textWrapper.bounds.center.x + transforms.tx) * transforms.scale) - width / 2) - 2.5) + 'px';\n editTextBoxDiv.style.top = ((((textWrapper.bounds.center.y + transforms.ty) * transforms.scale) - height / 2) - 3) + 'px';\n editTextBoxDiv.style.width = width + 'px';\n editTextBoxDiv.style.height = height + 'px';\n editTextBox.style.minHeight = minHeight + 'px';\n editTextBox.style.minWidth = minWidth + 'px';\n editTextBox.style.width = width + 'px';\n editTextBox.style.height = height + 'px';\n }\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.isAddTextNode = function (node, focusOut) {\n if (this.tool instanceof TextDrawingTool || focusOut) {\n this.tool = null;\n if (node && (!(canContinuousDraw(this.diagram)))) {\n this.diagram.drawingObject = undefined;\n this.diagram.currentDrawingObject = undefined;\n }\n if (getObjectFromCollection(this.diagram.nodes, node.id) ||\n getObjectFromCollection(this.diagram.connectors, node.id)) {\n return false;\n }\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.checkEditBoxAsTarget = function (evt) {\n if ((evt.target && evt.target.id === this.diagram.element.id + '_editBox')) {\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.getMouseEventArgs = function (position, args, source, padding) {\n args.position = position;\n var obj;\n var objects;\n if (!source) {\n if (this.action === 'Drag' || this.action === 'ConnectorSourceEnd' || this.action === 'SegmentEnd' ||\n this.action === 'OrthoThumb' || this.action === 'BezierSourceThumb' || this.action === 'BezierTargetThumb' ||\n this.action === 'ConnectorTargetEnd' || this.action.indexOf('Rotate') !== -1 || this.action.indexOf('Resize') !== -1) {\n obj = this.diagram.selectedItems;\n if (!this.diagram.currentSymbol && this.action === 'Drag' && obj && this.diagram.selectedItems.nodes.length > 0 &&\n this.diagram.selectedItems.nodes[0].shape.type === 'SwimLane') {\n objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n }\n }\n else {\n objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n }\n }\n else {\n objects = this.diagram.findObjectsUnderMouse(this.currentPosition, source);\n obj = this.diagram.findTargetObjectUnderMouse(objects, this.action, this.inAction, args.position, source);\n }\n if (obj && obj.isHeader) {\n obj = this.diagram.nameTable[obj.parentId];\n this.eventArgs.actualObject = obj;\n }\n var wrapper;\n if (obj) {\n wrapper = this.diagram.findElementUnderMouse(obj, this.currentPosition, this.diagram, padding);\n var currentConnector = void 0;\n var nearNode = void 0;\n var i = void 0;\n if ((wrapper && obj.ports && obj.ports.length\n && !checkPort(obj, wrapper) || !wrapper || !obj) && objects && objects.length\n && (source instanceof Selector)) {\n currentConnector = source.connectors[0];\n for (i = objects.length - 1; i >= 0; i--) {\n nearNode = objects[parseInt(i.toString(), 10)];\n if ((nearNode instanceof Node || nearNode instanceof Connector) && currentConnector\n && currentConnector.connectionPadding) {\n obj = nearNode;\n wrapper = this.diagram.findElementUnderMouse(obj, this.currentPosition, this.diagram, padding);\n if (((currentConnector.constraints & ConnectorConstraints.ConnectToNearByPort) && obj &&\n obj.ports && obj.ports.length && checkPort(obj, wrapper))) {\n break;\n }\n if ((nearNode instanceof Node || nearNode instanceof Connector) && currentConnector\n && currentConnector.connectionPadding && nearNode.wrapper.outerBounds.containsPoint(this.currentPosition)\n && (currentConnector.constraints & ConnectorConstraints.ConnectToNearByNode)\n && !(currentConnector.constraints & ConnectorConstraints.ConnectToNearByPort)) {\n obj = nearNode;\n wrapper = this.diagram.findElementUnderMouse(obj, this.currentPosition, this.diagram, 0);\n break;\n }\n }\n }\n }\n }\n if (!source) {\n args.source = obj;\n args.sourceWrapper = wrapper;\n }\n else {\n args.target = obj;\n args.targetWrapper = wrapper;\n }\n args.actualObject = this.eventArgs.actualObject;\n if (args.source instanceof Selector && args.actualObject === undefined &&\n (args.source.nodes.length > 0 || args.source.connectors.length > 0)) {\n args.actualObject = args.source.nodes.length > 0 ? this.diagram.nameTable[args.source.nodes[0].id]\n : this.diagram.nameTable[args.source.connectors[0].id];\n }\n args.startTouches = this.touchStartList;\n args.moveTouches = this.touchMoveList;\n return args;\n };\n /** @private */\n DiagramEventHandler.prototype.resetTool = function () {\n this.action = 'Select';\n this.hoverElement = null;\n this.hoverNode = null;\n this.tool = this.diagram.getTool(this.action);\n this.updateCursor();\n };\n /** @private */\n DiagramEventHandler.prototype.updateTool = function () {\n // 912436: Update Tool at runtime\n if (!this.currentPosition || this.action === 'Pan') {\n this.action = 'Select';\n }\n else {\n this.action = 'Pan';\n }\n };\n /** @private */\n DiagramEventHandler.prototype.getTool = function (action) {\n switch (action) {\n case 'Select':\n return new SelectTool(this.commandHandler, true);\n case 'Drag':\n return new MoveTool(this.commandHandler);\n case 'Rotate':\n return new RotateTool(this.commandHandler);\n case 'LayoutAnimation':\n return new ExpandTool(this.commandHandler);\n case 'FixedUserHandle':\n return new FixedUserHandleTool(this.commandHandler, true);\n case 'Hyperlink':\n return new LabelTool(this.commandHandler);\n case 'ResizeSouthEast':\n case 'ResizeSouthWest':\n case 'ResizeNorthEast':\n case 'ResizeNorthWest':\n case 'ResizeSouth':\n case 'ResizeNorth':\n case 'ResizeWest':\n case 'ResizeEast':\n return new ResizeTool(this.commandHandler, action);\n case 'ConnectorSourceEnd':\n case 'ConnectorTargetEnd':\n case 'BezierSourceThumb':\n case 'BezierTargetThumb':\n return new ConnectTool(this.commandHandler, action);\n case 'SegmentEnd':\n case 'OrthoThumb':\n return new ConnectorEditing(this.commandHandler, action);\n case 'Draw':\n var shape = 'shape';\n var type = findObjectType(this.diagram.drawingObject);\n if (type === 'Node' && this.diagram.drawingObject.shape.type === 'Text') {\n return new TextDrawingTool(this.commandHandler);\n }\n else if (type === 'Connector' && this.diagram.drawingObject.type === 'Freehand') {\n return new FreeHandTool(this.commandHandler);\n }\n else if (type === 'Node' && (this.diagram.drawingObject.shape[\"\" + shape] === 'Polygon') &&\n !(this.diagram.drawingObject.shape.points)) {\n return new PolygonDrawingTool(this.commandHandler);\n }\n else if (type === 'Node' ||\n (type === 'Node' && this.diagram.drawingObject.shape[\"\" + shape] === 'Polygon' &&\n (this.diagram.drawingObject.shape.points))) {\n return new NodeDrawingTool(this.commandHandler, this.diagram.drawingObject);\n }\n else if (type === 'Connector' && this.diagram.drawingObject.type === 'Polyline') {\n return new PolyLineDrawingTool(this.commandHandler);\n }\n else if (type === 'Connector') {\n return new ConnectorDrawingTool(this.commandHandler, 'ConnectorSourceEnd', this.diagram.drawingObject);\n }\n break;\n case 'Pan':\n return new ZoomPanTool(this.commandHandler, false);\n case 'PinchZoom':\n return new ZoomPanTool(this.commandHandler, true);\n case 'PortDrag':\n return new MoveTool(this.commandHandler, 'Port');\n case 'PortDraw':\n return new ConnectorDrawingTool(this.commandHandler, 'ConnectorSourceEnd', this.diagram.drawingObject);\n case 'LabelSelect':\n return new SelectTool(this.commandHandler, true, 'LabelSelect');\n case 'LabelDrag':\n return new LabelDragTool(this.commandHandler);\n case 'LabelResizeSouthEast':\n case 'LabelResizeSouthWest':\n case 'LabelResizeNorthEast':\n case 'LabelResizeNorthWest':\n case 'LabelResizeSouth':\n case 'LabelResizeNorth':\n case 'LabelResizeWest':\n case 'LabelResizeEast':\n return new LabelResizeTool(this.commandHandler, action);\n case 'LabelRotate':\n return new LabelRotateTool(this.commandHandler);\n //for coverage\n // case 'Custom':\n // return this.diagram.getTool(action);\n }\n return null;\n };\n /** @private */\n DiagramEventHandler.prototype.getCursor = function (action) {\n var object = (this.diagram.selectedItems.annotation) ?\n this.diagram.selectedItems.wrapper.children[0] : this.diagram.selectedItems;\n var rotateAngle = (this.diagram.selectedItems.annotation) ?\n (object.rotateAngle + object.parentTransform) : object.rotateAngle;\n return getCursor(action, rotateAngle);\n };\n //start region - interface betweend diagram and interaction\n /** @private */\n DiagramEventHandler.prototype.findElementUnderMouse = function (obj, position, diagram, padding) {\n return this.objectFinder.findElementUnderSelectedItem(obj, position, diagram, padding);\n };\n /** @private */\n DiagramEventHandler.prototype.findObjectsUnderMouse = function (position, source) {\n return this.objectFinder.findObjectsUnderMouse(position, this.diagram, this.eventArgs, source);\n };\n /** @private */\n DiagramEventHandler.prototype.findObjectUnderMouse = function (objects, action, inAction) {\n return this.objectFinder.findObjectUnderMouse(this.diagram, objects, action, inAction, this.eventArgs, this.currentPosition);\n };\n /** @private */\n DiagramEventHandler.prototype.findTargetUnderMouse = function (objects, action, inAction, position, source) {\n return this.objectFinder.findObjectUnderMouse(this.diagram, objects, action, inAction, this.eventArgs, position, source);\n };\n /** @private */\n DiagramEventHandler.prototype.findActionToBeDone = function (obj, wrapper, position, target) {\n return findToolToActivate(obj, wrapper, this.currentPosition, this.diagram, this.touchStartList, this.touchMoveList, target);\n };\n DiagramEventHandler.prototype.updateContainerBounds = function (isAfterMouseUp) {\n var isGroupAction = false;\n if (this.diagram.selectedObject.helperObject && this.diagram.selectedObject.actualObject) {\n var obj = this.diagram.selectedObject.actualObject;\n var nodes = this.diagram.selectedObject.actualObject instanceof Selector ? obj.nodes : [obj];\n for (var i = 0; i < nodes.length; i++) {\n var node = nodes[parseInt(i.toString(), 10)];\n var boundsUpdate = (this.tool instanceof ResizeTool) ? true : false;\n var parentNode = this.diagram.nameTable[node.parentId];\n if (isAfterMouseUp) {\n removeChildInContainer(this.diagram, node, this.currentPosition, boundsUpdate);\n }\n else {\n if (!parentNode || (parentNode && parentNode.shape.type !== 'SwimLane')) {\n this.diagram.updateDiagramObject(node);\n }\n isGroupAction = updateCanvasBounds(this.diagram, node, this.currentPosition, boundsUpdate);\n this.diagram.updateSelector();\n if (node.isLane || node.isPhase) {\n this.diagram.clearSelection();\n this.commandHandler.selectObjects([node]);\n }\n }\n }\n }\n return isGroupAction;\n };\n // tslint:disable-next-line:max-func-body-length\n DiagramEventHandler.prototype.updateContainerProperties = function () {\n var helperObject;\n var isChangeProperties = false;\n var hasStack;\n var connectors;\n var hasGroup = false;\n var obj;\n var history = { hasStack: false, isPreventHistory: false };\n if (this.diagram.selectedObject.helperObject) {\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var target = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n helperObject = this.diagram.selectedObject.helperObject;\n obj = this.diagram.selectedObject.actualObject;\n if (obj instanceof Node) {\n if (obj.shape.type === 'SwimLane') {\n connectors = getConnectors(this.diagram, obj.wrapper.children[0]);\n }\n if (obj.shape.type !== 'SwimLane' && obj.parentId &&\n this.diagram.getObject(obj.parentId).shape.type === 'SwimLane') {\n if (target instanceof Node && this.diagram.getObject(target.parentId) &&\n this.diagram.getObject(target.parentId).shape.type !== 'SwimLane') {\n target = this.diagram.getObject(target.parentId);\n }\n }\n if (this.currentAction === 'Drag' && obj.container && obj.container.type === 'Canvas' && obj.parentId &&\n this.diagram.getObject(obj.parentId).shape.type === 'SwimLane' && target && target !== obj &&\n target.container && target.container.type === 'Canvas' && target.isLane &&\n obj.isLane && target.parentId === obj.parentId) {\n laneInterChanged(this.diagram, obj, target, this.currentPosition);\n history.isPreventHistory = true;\n }\n else {\n var parentNode = this.diagram.nameTable[obj.parentId];\n if (!parentNode || (parentNode && parentNode.shape.type !== 'SwimLane')) {\n if (parentNode && parentNode.isLane && (obj.constraints & NodeConstraints.AllowMovingOutsideLane)) {\n // 915151: Node Becomes Unmovable After Deleting the First Phase\n var swimlane = this.diagram.getObject(parentNode.parentId);\n var x = void 0;\n var y = void 0;\n if (swimlane.shape.orientation === 'Vertical') {\n x = swimlane.wrapper.bounds.x + swimlane.shape.phaseSize;\n y = swimlane.wrapper.bounds.y + swimlane.shape.header.height;\n }\n else {\n var header = swimlane.shape.header.height +\n swimlane.shape.phaseSize;\n x = swimlane.wrapper.bounds.x;\n y = swimlane.wrapper.bounds.y + header;\n }\n var width = swimlane.wrapper.bounds.bottomRight.x - x;\n var height = swimlane.wrapper.bounds.bottomRight.y - y;\n var swimlaneBounds = new Rect(x, y, width, height);\n if (swimlaneBounds.containsPoint(this.currentPosition)) {\n obj.offsetX = helperObject.offsetX;\n obj.offsetY = helperObject.offsetY;\n obj.width = helperObject.width;\n obj.height = helperObject.height;\n obj.rotateAngle = helperObject.rotateAngle;\n }\n }\n else {\n // 902192: Diagram node resized wrongly while dragging with multiple selection Inside a swimlane Issue Fix\n if (this.diagram.selectedItems.nodes.length === 1) {\n // Single node move with helper\n obj.offsetX = helperObject.offsetX;\n obj.offsetY = helperObject.offsetY;\n if (obj && obj.shape && obj.shape.type !== 'UmlClassifier') {\n obj.width = helperObject.width;\n obj.height = helperObject.height;\n }\n obj.rotateAngle = helperObject.rotateAngle;\n }\n else if (this.diagram.selectedItems.nodes.length > 1) {\n // Multi selected node move with helper\n var offsetX = (helperObject.offsetX - this.diagram.selectedItems.offsetX);\n var offsetY = (helperObject.offsetY - this.diagram.selectedItems.offsetY);\n var rotateAngle = (helperObject.rotateAngle - this.diagram.selectedItems.rotateAngle);\n for (var i = 0; i < this.diagram.selectedItems.nodes.length; i++) {\n this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].offsetX += offsetX;\n this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].offsetY += offsetY;\n this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)].rotateAngle += rotateAngle;\n }\n }\n }\n }\n var undoElement = void 0;\n if (parentNode && parentNode.container && parentNode.container.type === 'Stack') {\n this.diagram.startGroupAction();\n hasGroup = true;\n }\n if (!target && parentNode && parentNode.container && parentNode.container.type === 'Stack' && this.action === 'Drag') {\n var index = parentNode.wrapper.children.indexOf(obj.wrapper);\n undoElement = { targetIndex: undefined, target: undefined, sourceIndex: index, source: cloneObject(obj) };\n if (index > -1) {\n var children = parentNode.children;\n children.splice(children.indexOf(obj.id), 1);\n this.diagram.nameTable[obj.id].parentId = '';\n hasStack = true;\n parentNode.wrapper.children.splice(index, 1);\n }\n }\n moveChildInStack(obj, target, this.diagram, this.action);\n parentNode = checkParentAsContainer(this.diagram, obj) ? this.diagram.nameTable[obj.parentId] :\n (this.diagram.nameTable[obj.parentId] || obj);\n if (parentNode && parentNode.container && parentNode.container.type === 'Canvas') {\n parentNode.wrapper.maxWidth = parentNode.maxWidth = parentNode.wrapper.actualSize.width;\n parentNode.wrapper.maxHeight = parentNode.maxHeight = parentNode.wrapper.actualSize.height;\n isChangeProperties = true;\n }\n if (checkParentAsContainer(this.diagram, obj, true) && parentNode && parentNode.container.type === 'Canvas') {\n if (this.diagram.selectedItems.nodes.length > 1) {\n // 902192: Diagram node resized wrongly while dragging with multiple selection Inside a swimlane Issue Fix\n for (var i = 0; i < this.diagram.selectedItems.nodes.length; i++) {\n checkChildNodeInContainer(this.diagram, this.diagram.selectedItems.nodes[parseInt(i.toString(), 10)]);\n }\n }\n else {\n checkChildNodeInContainer(this.diagram, obj);\n }\n }\n else {\n history = this.updateContainerPropertiesExtend(parentNode, obj, connectors, helperObject, history);\n }\n if ((this.diagram.lineRoutingModule && (this.diagram.constraints & DiagramConstraints.LineRouting))\n && (!checkParentAsContainer(this.diagram, obj, true))) {\n if (obj.children) {\n this.diagram.realActions |= RealAction.EnableGroupAction;\n }\n this.diagram.nodePropertyChange(obj, {}, {\n width: obj.width, height: obj.height,\n offsetX: obj.offsetX, offsetY: obj.offsetY\n });\n if (obj.children) {\n this.diagram.realActions &= ~RealAction.EnableGroupAction;\n }\n }\n if (obj.shape.lanes) {\n this.updateLaneChildNode(obj);\n }\n if (isChangeProperties) {\n parentNode.maxWidth = parentNode.wrapper.maxWidth = undefined;\n parentNode.maxHeight = parentNode.wrapper.maxHeight = undefined;\n }\n if (hasStack) {\n this.diagram.nodePropertyChange(parentNode, {}, {\n offsetX: parentNode.offsetX, offsetY: parentNode.offsetY, width: parentNode.width, height: parentNode.height,\n rotateAngle: parentNode.rotateAngle\n });\n var entry = {\n redoObject: { sourceIndex: undefined, source: undoElement.source },\n type: 'StackChildPositionChanged', undoObject: undoElement, category: 'Internal'\n };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.diagram.addHistoryEntry(entry);\n }\n }\n if (obj && obj.container && (obj.container.type === 'Stack' ||\n (obj.container.type === 'Canvas' && obj.parentId === ''))) {\n if (obj && obj.shape && obj.shape.type === 'UmlClassifier') {\n obj.wrapper.measureChildren = true;\n }\n this.diagram.nodePropertyChange(obj, {}, {\n offsetX: obj.offsetX, offsetY: obj.offsetY, width: obj.width, height: obj.height, rotateAngle: obj.rotateAngle\n });\n if (obj && obj.shape && obj.shape.type === 'UmlClassifier') {\n obj.wrapper.measureChildren = false;\n }\n }\n }\n updateConnectorsProperties(connectors, this.diagram);\n history.hasStack = hasGroup;\n }\n // Bug:914714 Drag Drop Multi selected nodes between lanes.\n else if (obj instanceof Selector) {\n var offsetX = (helperObject.offsetX - obj.offsetX);\n var offsetY = (helperObject.offsetY - obj.offsetY);\n var rotateAngle = (helperObject.rotateAngle - obj.rotateAngle);\n var width = (helperObject.width - obj.width);\n var height = (helperObject.height - obj.height);\n for (var i = 0; i < obj.nodes.length; i++) {\n var node = obj.nodes[parseInt(i.toString(), 10)];\n var parentNode = this.diagram.nameTable[node.parentId];\n if (parentNode && parentNode.shape.type !== 'SwimLane' && checkParentAsContainer(this.diagram, node, true)\n && parentNode.container.type === 'Canvas') {\n node.offsetX += offsetX;\n node.offsetY += offsetY;\n if (node && node.shape && node.shape.type !== 'UmlClassifier') {\n node.width += width;\n node.height += height;\n }\n node.rotateAngle += rotateAngle;\n checkChildNodeInContainer(this.diagram, node);\n }\n }\n }\n }\n if (obj && (obj.isPhase || obj.isLane ||\n (obj.shape && obj.shape.type === 'SwimLane'))) {\n this.diagram.updateDiagramElementQuad();\n }\n return history;\n };\n DiagramEventHandler.prototype.updateLaneChildNode = function (obj) {\n for (var i = 0; i < (obj.shape.lanes.length); i++) {\n if (obj.shape.lanes[parseInt(i.toString(), 10)].children\n && obj.shape.lanes[parseInt(i.toString(), 10)].children.length > 0) {\n for (var j = 0; j < obj.shape.lanes[parseInt(i.toString(), 10)].children.length; j++) {\n var id = obj.shape.lanes[parseInt(i.toString(), 10)].children[parseInt(j.toString(), 10)].id;\n var childNode = this.diagram.nameTable[\"\" + id];\n //828489 - Exception occurs while dragging swimlane after adding shape & undo action is performed\n if (childNode) {\n childNode.offsetX = childNode.wrapper.offsetX;\n childNode.offsetY = childNode.wrapper.offsetY;\n }\n }\n }\n }\n };\n DiagramEventHandler.prototype.updateContainerPropertiesExtend = function (parentNode, obj, connectors, helperObject, history) {\n if (this.currentAction === 'ResizeEast' || this.currentAction === 'ResizeSouth' || obj.shape.type === 'SwimLane') {\n var undoObj = cloneObject(obj);\n var isUpdateRow = false;\n if (parentNode && parentNode.container && parentNode.container.type === 'Grid') {\n var shape = parentNode.shape.type === 'SwimLane' ? true : false;\n var container = (shape ? parentNode.wrapper.children[0] : parentNode.wrapper);\n var padding = shape ? parentNode.shape.padding : undefined;\n var x = parentNode.wrapper.bounds.x;\n var y = parentNode.wrapper.bounds.y;\n if (obj.columnIndex !== undefined && (parentNode.container.orientation === 'Horizontal' &&\n ((shape && obj.isPhase) || (!shape && obj.rowIndex === 1))) ||\n (parentNode.container.orientation === 'Vertical' &&\n ((!shape && obj.rowIndex > 0 && obj.columnIndex > 0) || (shape && obj.isLane)))) {\n if (parentNode.container.orientation === 'Horizontal' && obj.isPhase && obj.wrapper.width > obj.maxWidth) {\n obj.maxWidth = obj.wrapper.width;\n obj.wrapper.maxWidth = obj.wrapper.width;\n }\n // 910832 - Lane height updating to negative values wrongly during resizing\n container.updateColumnWidth(obj.columnIndex, helperObject.width, true, padding);\n updateSwimLaneObject(this.diagram, obj, parentNode, helperObject);\n if (obj.isPhase) {\n var id = parentNode.shape.phases[obj.columnIndex].header.id;\n var node = this.diagram.nameTable[\"\" + id];\n if (node.maxWidth < helperObject.width) {\n node.maxWidth = helperObject.width;\n node.wrapper.maxWidth = helperObject.width;\n }\n }\n if (parentNode.shape.type === 'SwimLane') {\n parentNode.width = (parentNode.width) ? container.width : parentNode.width;\n updateHeaderMaxWidth(this.diagram, parentNode);\n parentNode.wrapper.width = parentNode.width;\n connectors = getConnectors(this.diagram, container, obj.rowIndex);\n }\n }\n else if (obj.rowIndex !== undefined) {\n isUpdateRow = true;\n // 910832 - Lane height updating to negative values wrongly during resizing\n container.updateRowHeight(obj.rowIndex, helperObject.height, true, padding);\n updateSwimLaneObject(this.diagram, obj, parentNode, helperObject);\n if (parentNode.shape.type === 'SwimLane') {\n parentNode.height = (parentNode.height) ? container.height : parentNode.height;\n parentNode.wrapper.height = parentNode.height;\n connectors = getConnectors(this.diagram, container, obj.rowIndex);\n }\n }\n if (parentNode.shape.type === 'SwimLane') {\n history.isPreventHistory = true;\n }\n this.diagram.nodePropertyChange(parentNode, {}, {\n offsetX: parentNode.offsetX, offsetY: parentNode.offsetY,\n rotateAngle: parentNode.rotateAngle\n });\n this.diagram.drag(parentNode, x - parentNode.wrapper.bounds.x, y - parentNode.wrapper.bounds.y);\n }\n else {\n if (obj && obj.shape && obj.shape.type === 'UmlClassifier') {\n obj.wrapper.measureChildren = true;\n }\n this.diagram.nodePropertyChange(obj, {}, {\n offsetX: obj.offsetX, offsetY: obj.offsetY, width: obj.width, height: obj.height, rotateAngle: obj.rotateAngle\n });\n obj.wrapper.measureChildren = false;\n }\n obj.wrapper.measure(new Size(obj.wrapper.width, obj.wrapper.height));\n obj.wrapper.arrange(obj.wrapper.desiredSize);\n if (this.currentAction === 'ResizeEast' || this.currentAction === 'ResizeSouth') {\n var redoObject = cloneObject(obj);\n var entry = {\n category: 'Internal',\n type: (isUpdateRow) ? 'RowHeightChanged' : 'ColumnWidthChanged',\n undoObject: undoObj, redoObject: redoObject\n };\n this.diagram.addHistoryEntry(entry);\n }\n }\n updateConnectorsProperties(connectors, this.diagram);\n return history;\n };\n DiagramEventHandler.prototype.addUmlNode = function () {\n var node = this.diagram.selectedItems.nodes[0];\n var objects = this.diagram.findObjectsUnderMouse({ x: this.currentPosition.x + 20, y: this.currentPosition.y });\n var target = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n var attribute;\n var method;\n if (!target) {\n objects = this.diagram.findObjectsUnderMouse({ x: this.currentPosition.x - 20, y: this.currentPosition.y });\n target = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n }\n if (node && node.container && node.container.type === 'Stack' && target && target.parentId\n && target.parentId === node.id) {\n var innerNode = target;\n var adornerSvg = getAdornerLayerSvg(this.diagram.element.id);\n var highlighter = adornerSvg.getElementById(adornerSvg.id + '_stack_highlighter');\n if (highlighter) {\n var index = node.wrapper.children.indexOf(target.wrapper) + 1;\n this.diagram.enableServerDataBinding(false);\n var temp = new Node(this.diagram, 'nodes', {\n style: {\n fill: node.style.fill,\n strokeColor: (node.style.strokeColor === 'black') ? '#ffffff00' : node.style.strokeColor\n },\n annotations: target.annotations, verticalAlignment: 'Stretch', horizontalAlignment: 'Stretch',\n constraints: (NodeConstraints.Default | NodeConstraints.HideThumbs) & ~(NodeConstraints.Rotate | NodeConstraints.Drag | NodeConstraints.Resize),\n minHeight: 25\n }, true);\n temp.annotations[0].content = ' + Name : Type';\n var id = innerNode.id.split('_');\n temp.id = randomId() + temp.id;\n temp.parentId = node.id;\n temp.zIndex = -1;\n temp.umlIndex = index;\n this.diagram.startGroupAction();\n var child = { name: 'Name', type: 'Type' };\n //While dynamically adding nodes at runtime using the isSeparator highlighter, make sure to include the newly added nodes in the existing arrays of the UML node for the respective child types.\n if (node.shape.classifier === 'Class') {\n if (target.id.includes('_umlProperty') && node.shape.classShape.attributes.length > 0) {\n attribute = new UmlClassAttribute(node, '', child);\n node.shape.classShape.attributes.push(attribute);\n }\n else if (target.id.includes('_umlMethods') && node.shape.classShape.methods.length > 0) {\n method = new UmlClassMethod(node, '', child);\n node.shape.classShape.methods.push(method);\n }\n }\n if (node.shape.classifier === 'Interface') {\n if (target.id.includes('_umlProperty') && node.shape.interfaceShape.attributes.length > 0) {\n attribute = new UmlClassAttribute(node, '', child);\n node.shape.classShape.attributes.push(attribute);\n }\n else if (target.id.includes('_umlMethods') && node.shape.interfaceShape.methods.length > 0) {\n method = new UmlClassMethod(node, '', child);\n node.shape.interfaceShape.methods.push(method);\n }\n }\n if (node.shape.classifier === 'Enumeration') {\n if (target.id.includes('_umlMember') && node.shape.enumerationShape.members.length > 0) {\n var member = new UmlEnumerationMember(node, '', child);\n node.shape.enumerationShape.members.push(member);\n }\n }\n var redoElement = {\n sourceIndex: node.wrapper.children.indexOf(temp.wrapper), source: temp,\n target: undefined, targetIndex: undefined\n };\n this.diagram.enableServerDataBinding(true);\n this.diagram.add(temp);\n this.diagram.updateConnectorEdges(node);\n this.diagram.clearSelection();\n this.diagram.select([this.diagram.nameTable[temp.id]]);\n this.diagram.endGroupAction();\n this.diagram.startTextEdit();\n }\n }\n };\n return DiagramEventHandler;\n}());\n/** @private */\nvar ObjectFinder = /** @__PURE__ @class */ (function () {\n function ObjectFinder() {\n }\n /** @private */\n ObjectFinder.prototype.findObjectsUnderMouse = function (pt, diagram, eventArgs, source, actions) {\n // finds the collection of the object that is under the mouse;\n var actualTarget = [];\n if (source && source instanceof Selector) {\n if (source.nodes.length + source.connectors.length === 1) {\n source = (source.nodes[0] || source.connectors[0]);\n if (source.children && source.children.length === 0) {\n eventArgs.actualObject = source;\n }\n }\n }\n var container;\n var bounds;\n var child;\n var matrix;\n var endPadding = (source && (source instanceof Connector) &&\n ((source.constraints & ConnectorConstraints.ConnectToNearByNode) ||\n (source.constraints & ConnectorConstraints.ConnectToNearByPort)) && source.connectionPadding) || 0;\n var objArray = diagram.spatialSearch.findObjects(new Rect(pt.x - 50 - endPadding, pt.y - 50 - endPadding, 100 + endPadding, 100 + endPadding));\n var layerObjTable = {};\n var layerTarger;\n for (var _i = 0, objArray_1 = objArray; _i < objArray_1.length; _i++) {\n var obj = objArray_1[_i];\n var point = pt;\n bounds = obj.wrapper.outerBounds;\n var pointInBounds = (obj.rotateAngle) ? false : bounds.containsPoint(point, endPadding);\n if ((obj !== source || diagram.currentDrawingObject instanceof Connector) &&\n (obj instanceof Connector) ? obj !== diagram.currentDrawingObject : obj.wrapper.visible) {\n var layer = diagram.commandHandler.getObjectLayer(obj.id);\n if (layer && !layer.lock && layer.visible) {\n layerTarger = layerObjTable[layer.zIndex] = layerObjTable[layer.zIndex] || [];\n if (obj.rotateAngle) {\n container = obj.wrapper;\n bounds = cornersPointsBeforeRotation(container);\n for (var _a = 0, _b = container.children; _a < _b.length; _a++) {\n child = _b[_a];\n matrix = identityMatrix();\n rotateMatrix(matrix, -(child.rotateAngle + child.parentTransform), child.offsetX, child.offsetY);\n point = transformPointByMatrix(matrix, pt);\n if (cornersPointsBeforeRotation(child).containsPoint(point, endPadding)) {\n pointInBounds = true;\n }\n }\n }\n if (!source || (isSelected(diagram, obj) === false)) {\n if (canEnablePointerEvents(obj)) {\n if ((obj instanceof Connector) ? isPointOverConnector(obj, pt) : pointInBounds) {\n var padding = (obj instanceof Connector) ? obj.hitPadding || 0 : 0; //let element: DiagramElement;\n var element = this.findElementUnderMouse(obj, pt, diagram, endPadding || padding);\n if (element && obj.id !== 'helper') {\n insertObject(obj, 'zIndex', layerTarger);\n }\n }\n }\n }\n }\n }\n }\n for (var _c = 0, _d = diagram.layers; _c < _d.length; _c++) {\n var layer = _d[_c];\n actualTarget = actualTarget.concat(layerObjTable[layer.zIndex] || []);\n for (var _e = 0, actualTarget_1 = actualTarget; _e < actualTarget_1.length; _e++) {\n var obj = actualTarget_1[_e];\n var eventHandler = 'eventHandler';\n if (obj.shape.type === 'Bpmn' && obj.processId && (!(diagram[\"\" + eventHandler].tool instanceof MoveTool) ||\n (diagram[\"\" + eventHandler].tool instanceof MoveTool) && canAllowDrop(obj))) {\n var index = actualTarget.indexOf(diagram.nameTable[obj.processId]);\n if (index > -1) {\n actualTarget.splice(index, 1);\n }\n }\n if (obj.shape.type === 'UmlClassifier' && obj.container && obj.container.type === 'Stack') {\n var index = actualTarget.indexOf(diagram.nameTable[diagram.nameTable[obj.id].wrapper.children[0].id]);\n if (index > -1) {\n actualTarget.splice(index, 1);\n }\n }\n }\n }\n for (var i = 0; i < actualTarget.length; i++) {\n var parentObj = diagram.nameTable[actualTarget[parseInt(i.toString(), 10)].parentId];\n if (parentObj) {\n var portElement = this.findElementUnderMouse(parentObj, pt, diagram);\n for (var j = 0; j < parentObj.ports.length; j++) {\n if (portElement && portElement.id.match('_' + parentObj.ports[parseInt(j.toString(), 10)].id + '$')) {\n var port = parentObj.ports[parseInt(j.toString(), 10)];\n if (canDrag(port) || canDraw(port)) {\n return actualTarget;\n }\n }\n }\n }\n while (parentObj) {\n var index = actualTarget.indexOf(parentObj);\n if (index !== -1) {\n actualTarget.splice(index, 1);\n }\n else {\n break;\n }\n parentObj = diagram.nameTable[parentObj.parentId];\n }\n }\n this.checkSwimlane(actualTarget, diagram);\n if (eventArgs && !eventArgs.source) {\n for (var i = 0; i < actualTarget.length; i++) {\n var parentNode = diagram.nameTable[actualTarget[parseInt(i.toString(), 10)].parentId];\n if (parentNode && parentNode.shape.type === 'SwimLane') {\n for (var j = 0; j < actualTarget.length; j++) {\n var connector = actualTarget[parseInt(j.toString(), 10)];\n if (connector instanceof Connector) {\n actualTarget.splice(i, 1);\n }\n }\n }\n }\n }\n return actualTarget;\n };\n /** @private */\n ObjectFinder.prototype.checkSwimlane = function (actualTarget, diagram) {\n var isNode;\n for (var m = 0; m < actualTarget.length; m++) {\n var obj = actualTarget[parseInt(m.toString(), 10)];\n var parentNode = void 0;\n var node = void 0;\n if (obj instanceof Node) {\n parentNode = actualTarget[parseInt(m.toString(), 10)].parentId;\n node = obj;\n }\n if (parentNode === '') {\n if (node.shape.type !== 'SwimLane') {\n isNode = true;\n }\n else {\n isNode = false;\n }\n }\n var parent_2 = diagram.nameTable[\"\" + parentNode];\n if (parent_2 && parent_2.isLane && diagram.nameTable[parent_2.parentId].zIndex > obj.zIndex) {\n actualTarget[parseInt(m.toString(), 10)] = parent_2;\n }\n if (m > 0 && isNode && node && (node.isLane || node.isPhase || node.isHeader)) {\n if (actualTarget[parseInt(m.toString(), 10)].zIndex < actualTarget[m - 1].zIndex) {\n var swap = actualTarget[parseInt(m.toString(), 10)];\n actualTarget[parseInt(m.toString(), 10)] = actualTarget[m - 1];\n actualTarget[m - 1] = swap;\n }\n }\n }\n if (actualTarget.length >= 2) {\n var parent_3 = '';\n for (var i = actualTarget.length - 1; i >= 0; i--) {\n if (actualTarget[parseInt(i.toString(), 10)].parentId) {\n var parent1 = findParentInSwimlane(actualTarget[parseInt(i.toString(), 10)], diagram, parent_3);\n var parent2 = findParentInSwimlane(actualTarget[i - 1], diagram, parent_3);\n var parentNode1 = diagram.nameTable[\"\" + parent1];\n var parentNode2 = diagram.nameTable[\"\" + parent2];\n if (parentNode2 && parent1 !== parent2 && parentNode1.zIndex < parentNode2.zIndex) {\n actualTarget.splice(i, 1);\n }\n }\n }\n }\n };\n /** @private */\n ObjectFinder.prototype.isTarget = function (actualTarget, diagram, action) {\n var connector = diagram.selectedItems.connectors[0];\n var node;\n node = action === 'ConnectorSourceEnd' ? diagram.nameTable[connector.targetID] :\n node = diagram.nameTable[connector.sourceID];\n if (node && !(node.processId && !actualTarget.processId\n || node.processId !== actualTarget.processId)) {\n if (node.processId !== actualTarget.processId) {\n actualTarget = null;\n }\n if (actualTarget && actualTarget.parentId &&\n diagram.nameTable[actualTarget.parentId].shape.type === 'UmlClassifier') {\n actualTarget = diagram.nameTable[actualTarget.parentId];\n }\n }\n if (action === 'ConnectorSourceEnd' && connector.targetID) {\n var targetNode = diagram.nameTable[connector.targetID];\n if (targetNode && targetNode.shape && (targetNode.shape.shape === 'TextAnnotation')) {\n var id = connector.id.split('_');\n if (((targetNode.shape.type === 'Bpmn') && actualTarget.shape.type !== 'Bpmn') || (id[0] === actualTarget.id) ||\n actualTarget.shape.shape === 'TextAnnotation') {\n actualTarget = null;\n }\n if (actualTarget && actualTarget.parentId &&\n diagram.nameTable[actualTarget.parentId].shape.type === 'UmlClassifier') {\n actualTarget = diagram.nameTable[actualTarget.parentId];\n }\n }\n }\n return actualTarget;\n };\n /* tslint:disable */\n /** @private */\n ObjectFinder.prototype.findObjectUnderMouse = function (diagram, objects, action, inAction, eventArg, position, source) {\n //we will get the wrapper object here\n //we have to choose the object to be interacted with from the given wrapper\n //Find the object that is under mouse\n var eventHandler = 'eventHandler';\n var endPoint = 'endPoint';\n var inPort;\n var outPort;\n var actualTarget = null;\n if (objects.length !== 0) {\n if (source && source instanceof Selector) {\n if (source.nodes.length + source.connectors.length === 1) {\n source = (source.nodes[0] || source.connectors[0]);\n }\n }\n if ((action === 'ConnectorSourceEnd' && source || action === 'PortDraw') ||\n ((canDrawOnce(diagram) || canContinuousDraw(diagram)) && getObjectType(diagram.drawingObject) === Connector)) {\n var connector = diagram.selectedItems.connectors[0];\n for (var i = objects.length - 1; i >= 0; i--) {\n outPort = getInOutConnectPorts(objects[parseInt(i.toString(), 10)], false);\n inPort = getInOutConnectPorts(objects[parseInt(i.toString(), 10)], true);\n var tool = diagram[\"\" + eventHandler].tool;\n var portElement = this.findTargetElement(objects[parseInt(i.toString(), 10)].wrapper, position, diagram, undefined);\n if (action === 'Draw' && portElement && (objects[parseInt(i.toString(), 10)] instanceof Node || objects[parseInt(i.toString(), 10)] instanceof Connector) && !checkPort(objects[parseInt(i.toString(), 10)], portElement)) {\n if (((tool && tool[\"\" + endPoint] === 'ConnectorSourceEnd') && !canOutConnect(objects[parseInt(i.toString(), 10)])) ||\n ((tool && tool[\"\" + endPoint] === 'ConnectorTargetEnd') && !canInConnect(objects[parseInt(i.toString(), 10)]))) {\n return actualTarget;\n }\n }\n // eslint-disable-next-line max-len\n if ((objects[parseInt(i.toString(), 10)] instanceof Node) || (objects[parseInt(i.toString(), 10)] instanceof Connector) && ((canOutConnect(objects[parseInt(i.toString(), 10)]) || (canPortOutConnect(outPort)) || canInConnect(objects[parseInt(i.toString(), 10)]) || (canPortInConnect(inPort))) ||\n (action === 'PortDraw' && (tool instanceof ConnectTool) && tool[\"\" + endPoint] === 'ConnectorTargetEnd' &&\n (canInConnect(objects[parseInt(i.toString(), 10)]) || (canPortInConnect(inPort)))))) {\n actualTarget = objects[parseInt(i.toString(), 10)];\n if (connector) {\n actualTarget = this.isTarget(actualTarget, diagram, action);\n }\n eventArg.actualObject = actualTarget;\n return actualTarget;\n }\n }\n }\n else if (action === 'ConnectorTargetEnd' && source) {\n for (var i = objects.length - 1; i >= 0; i--) {\n inPort = getInOutConnectPorts(objects[parseInt(i.toString(), 10)], true);\n if ((objects[parseInt(i.toString(), 10)] instanceof Node || objects[parseInt(i.toString(), 10)] instanceof Connector)\n && (canInConnect(objects[parseInt(i.toString(), 10)]) || (canPortInConnect(inPort)))) {\n actualTarget = objects[parseInt(i.toString(), 10)];\n actualTarget = this.isTarget(actualTarget, diagram, action);\n eventArg.actualObject = actualTarget;\n return actualTarget;\n }\n }\n }\n else if (source && (action === 'Drag' || (diagram[\"\" + eventHandler].tool instanceof MoveTool))) {\n var index = 0;\n for (var i = 0; i < objects.length; i++) {\n var temp = objects[parseInt(i.toString(), 10)];\n if (source !== temp && (temp instanceof Connector ||\n !position || temp.wrapper.bounds.containsPoint(position))) {\n if (canAllowDrop(temp)) {\n if (!actualTarget) {\n actualTarget = temp;\n index = actualTarget.zIndex;\n }\n else {\n actualTarget = index >= temp.zIndex ? actualTarget : temp;\n index = Math.max(index, temp.zIndex);\n }\n }\n }\n }\n if (actualTarget && actualTarget.shape.type === 'Bpmn') {\n if (diagram.selectedItems.nodes.length > 0 && diagram.selectedItems.nodes[0].shape.type === 'Bpmn') {\n // eslint-disable-next-line no-self-assign\n actualTarget = actualTarget;\n }\n else {\n actualTarget = null;\n }\n }\n if (actualTarget) {\n eventArg.actualObject = actualTarget;\n }\n return actualTarget;\n }\n else if ((action === 'Select' || action === 'Pan') && diagram[\"\" + eventHandler].tool) {\n for (var i = objects.length - 1; i >= 0; i--) {\n if (objects[parseInt(i.toString(), 10)] instanceof Connector) {\n var objj1 = objects[i - 1];\n if (objects[i - 1] instanceof Node && objj1.ports) {\n var portElement = this.findTargetElement(objj1.wrapper, position, diagram, undefined);\n if ((portElement && (portElement.id.match('_icon_content_shape$') || portElement.id.match('_icon_content_rect$')))) {\n return objj1;\n }\n for (var j = 0; j < objj1.ports.length; j++) {\n if (portElement && portElement.id.match('_' + objj1.ports[parseInt(j.toString(), 10)].id + '$')) {\n if (canDraw(objj1.ports[parseInt(j.toString(), 10)])) {\n return objj1;\n }\n }\n }\n }\n }\n }\n actualTarget = objects[objects.length - 1];\n eventArg.actualObject = actualTarget;\n if (!diagram[\"\" + eventHandler].itemClick(actualTarget, true)) {\n if (actualTarget.parentId) {\n var obj = actualTarget;\n var selected = isSelected(diagram, obj);\n while (obj) {\n if (isSelected(diagram, obj) && !selected) {\n break;\n }\n actualTarget = obj;\n // 912178-Tooltip for node is not shown when grouped at runtime\n if (obj.tooltip.content !== '') {\n break;\n }\n obj = diagram.nameTable[obj.parentId];\n }\n }\n }\n }\n else if (action === 'Pan' || action === 'LayoutAnimation') {\n for (var i = objects.length - 1; i >= 0; i--) {\n if (objects[parseInt(i.toString(), 10)] instanceof Node || objects[parseInt(i.toString(), 10)] instanceof Connector) {\n var portElement = this.findTargetElement(objects[parseInt(i.toString(), 10)].wrapper, position, diagram, undefined);\n if ((action === 'Pan') || ((portElement && (portElement.id.match('_icon_content_shape$') || portElement.id.match('_icon_content_rect$'))))) {\n return objects[parseInt(i.toString(), 10)];\n }\n }\n }\n }\n else {\n actualTarget = objects[objects.length - 1];\n if (eventArg && actualTarget) {\n eventArg.actualObject = actualTarget;\n }\n }\n }\n return actualTarget;\n };\n /* tslint:enable */\n /** @private */\n ObjectFinder.prototype.findElementUnderSelectedItem = function (obj, position, diagram, padding) {\n //rewrite this for multiple selection\n if (obj instanceof Selector) {\n if (obj.nodes.length === 1 && (!obj.connectors || !obj.connectors.length)) {\n return this.findElementUnderMouse(obj.nodes[0], position, diagram);\n }\n else if ((!obj.nodes || obj.nodes.length) && obj.connectors.length === 1) {\n return this.findElementUnderMouse(obj.connectors[0], position, diagram);\n }\n }\n else {\n return this.findElementUnderMouse(obj, position, diagram, padding);\n }\n return null;\n };\n ObjectFinder.prototype.findElementUnderMouse = function (obj, position, diagram, padding) {\n return this.findTargetElement(obj.wrapper, position, diagram, padding);\n };\n /** @private */\n ObjectFinder.prototype.findTargetElement = function (container, position, diagram, padding) {\n for (var i = container.children.length - 1; i >= 0; i--) {\n var element = container.children[parseInt(i.toString(), 10)];\n //Checking whether the annotation is visible or not\n if (element && element.outerBounds.containsPoint(position, padding || 0)) {\n if (element.visible) {\n if (element instanceof Container) {\n var target = this.findTargetElement(element, position, diagram);\n if (target) {\n return target;\n }\n }\n //EJ2-69047 - Node selection is improper while adding annotation for multiple nodes\n //Checked textOverflow property to avoid the selection of text element with clip and ellipsis;\n var textOverflow = (element.style.textOverflow === 'Clip' || element.style.textOverflow === 'Ellipsis');\n if (element.bounds.containsPoint(position, padding || 0) && !textOverflow) {\n return element;\n }\n else if (container.bounds.containsPoint(position, padding || 0) && textOverflow) {\n // 913240 - Tooltip for annotation not visible while text overflow sets to Clip or Ellipsis\n return element;\n }\n }\n //(EJ2-840331)Double click on node annotation will open the edit of invisible annotation\n else if (element instanceof PathElement && container && container.id) {\n var getNode = void 0;\n if (container.id.includes('group_container')) {\n var getId = container.id.slice(0, -15);\n getNode = diagram.getObject(getId);\n }\n else {\n getNode = diagram.getObject(container.id);\n }\n var port = findPort(getNode, element.id);\n // 913000: Connector not connected to port when visibility hidden\n if (port) {\n return element;\n }\n }\n }\n }\n if (container.bounds.containsPoint(position, padding) && container.style.fill !== 'none') {\n return container;\n }\n return null;\n };\n return ObjectFinder;\n}());\n\nvar __extends$x = (undefined && undefined.__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$m = (undefined && undefined.__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/**\n * A collection of JSON objects where each object represents a layer.\n * Layer is a named category of diagram shapes.\n */\nvar Layer = /** @__PURE__ @class */ (function (_super) {\n __extends$x(Layer, _super);\n // tslint:disable-next-line:no-any\n // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function Layer(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n /** @private */\n _this.objectZIndex = -1;\n /** @private */\n _this.zIndexTable = {};\n _this.objects = [];\n return _this;\n }\n __decorate$m([\n Property('')\n ], Layer.prototype, \"id\", void 0);\n __decorate$m([\n Property(true)\n ], Layer.prototype, \"visible\", void 0);\n __decorate$m([\n Property(false)\n ], Layer.prototype, \"lock\", void 0);\n __decorate$m([\n Property()\n ], Layer.prototype, \"objects\", void 0);\n __decorate$m([\n Property()\n ], Layer.prototype, \"addInfo\", void 0);\n __decorate$m([\n Property(-1)\n ], Layer.prototype, \"zIndex\", void 0);\n return Layer;\n}(ChildProperty));\n\nvar __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator$1 = (undefined && undefined.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\n/**\n * Defines the behavior of commands\n */\nvar CommandHandler = /** @__PURE__ @class */ (function () {\n function CommandHandler(diagram) {\n /** @private */\n this.clipboardData = {};\n // private newNodeObject: Object[] = [];\n // private newConnectorObject: Object[] = [];\n /** @private */\n this.diagramObject = {};\n /** @private */\n this.newSelectedObjects = {};\n /** @private */\n this.oldSelectedObjects = {};\n /** @private */\n this.changedNodeZIndexes = {};\n /** @private */\n this.connectorsTable = [];\n /** @private */\n this.PreventConnectorSplit = false;\n /** @private */\n this.processTable = {};\n /** @private */\n this.isContainer = false;\n /** @private */\n this.canUpdateTemplate = false;\n this.childTable = {};\n this.objectStore = [];\n this.parentTable = {};\n this.blazor = 'Blazor';\n this.blazorInterop = 'sfBlazor';\n this.cloneGroupChildCollection = [];\n this.moveSBObject = function (targetId) {\n if (targetId) {\n this.moveBackUndoNode(targetId);\n }\n };\n //The below method is for undo process for sendBackward command\n this.moveBackUndoNode = function (targetId) {\n var originalZIndexTable = {}; // New variable to store original zIndex values\n // Store original zIndex values\n for (var i = 0; i < this.diagram.nodes.length; i++) {\n var node1 = this.diagram.nodes[parseInt(i.toString(), 10)];\n originalZIndexTable[node1.id] = node1.zIndex;\n }\n for (var j = 0; j < this.diagram.connectors.length; j++) {\n var connector = this.diagram.connectors[parseInt(j.toString(), 10)];\n originalZIndexTable[connector.id] = connector.zIndex;\n }\n var sortedNodeIds = Object.keys(originalZIndexTable).sort(function (a, b) { return originalZIndexTable[\"\" + a] - originalZIndexTable[\"\" + b]; });\n var currentIndex = sortedNodeIds.indexOf(targetId);\n //This method moves the node/connector based on their zindex\n if (currentIndex !== -1) {\n if (currentIndex === sortedNodeIds.length - 1) {\n var nextNodeId = sortedNodeIds[currentIndex - 1];\n this.swapDomOrder(nextNodeId, targetId);\n }\n else {\n var nextNodeId = sortedNodeIds[currentIndex + 1];\n var backNode = void 0;\n if (nextNodeId) {\n var node = this.diagram.getObject(targetId);\n if (node.shape.type === 'Native' || node.shape.type === 'HTML') {\n this.updateNativeNodeIndex(targetId, nextNodeId);\n }\n else {\n var diagramDiv = getDiagramElement(targetId + '_groupElement', this.diagram.element.id);\n backNode = getDiagramElement(nextNodeId + '_groupElement', this.diagram.element.id);\n var target = this.diagram.getObject(targetId);\n var newnode = this.diagram.getObject(nextNodeId);\n if (newnode.parentId && newnode.parentId !== target.parentId) {\n backNode = getDiagramElement(newnode.parentId + '_groupElement', this.diagram.element.id);\n }\n if (target.parentId !== newnode.id) {\n diagramDiv.parentNode.insertBefore(diagramDiv, backNode);\n }\n }\n }\n }\n }\n };\n this.moveFBObject = function (targetId) {\n if (targetId) {\n this.moveForwardUndoNode(targetId);\n }\n };\n //The below method is for undo process for moveForward command\n this.moveForwardUndoNode = function (targetID) {\n var originalZIndexTable = {}; // New variable to store original zIndex values\n // Store original zIndex values\n for (var i = 0; i < this.diagram.nodes.length; i++) {\n var node1 = this.diagram.nodes[parseInt(i.toString(), 10)];\n originalZIndexTable[node1.id] = node1.zIndex;\n }\n for (var j = 0; j < this.diagram.connectors.length; j++) {\n var connector = this.diagram.connectors[parseInt(j.toString(), 10)];\n originalZIndexTable[connector.id] = connector.zIndex;\n }\n var sortedNodeIds = Object.keys(originalZIndexTable).sort(function (a, b) { return originalZIndexTable[\"\" + a] - originalZIndexTable[\"\" + b]; });\n var currentIndex = sortedNodeIds.indexOf(targetID);\n //This method moves the node/connector based on their zindex\n if (currentIndex !== -1) {\n if (currentIndex === sortedNodeIds.length - 1) {\n var nextNodeId = sortedNodeIds[currentIndex - 1];\n this.swapDomOrder(nextNodeId, targetID);\n }\n else {\n var nextNodeId = sortedNodeIds[currentIndex + 1];\n if (nextNodeId) {\n var node = this.diagram.getObject(targetID);\n if (node.shape.type === 'Native' || node.shape.type === 'HTML') {\n this.updateNativeNodeIndex(targetID, nextNodeId);\n }\n else {\n var diagramDiv = getDiagramElement(targetID + '_groupElement', this.diagram.element.id);\n var backNode = getDiagramElement(nextNodeId + '_groupElement', this.diagram.element.id);\n diagramDiv.parentNode.insertBefore(diagramDiv, backNode);\n }\n }\n }\n }\n };\n this.diagram = diagram;\n }\n Object.defineProperty(CommandHandler.prototype, \"snappingModule\", {\n /** @private */\n get: function () {\n return this.diagram.snappingModule;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CommandHandler.prototype, \"layoutAnimateModule\", {\n /** @private */\n get: function () {\n return this.diagram.layoutAnimateModule;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * startTransaction method\\\n *\n * @returns { void } startTransaction method .\\\n * @param {boolean} protectChange - provide the options value.\n * @private\n */\n CommandHandler.prototype.startTransaction = function (protectChange) {\n this.state = { element: this.diagram.selectedItems, backup: null };\n if (protectChange) {\n this.diagram.protectPropertyChange(true);\n }\n getAdornerLayer(this.diagram.element.id).style.pointerEvents = 'none';\n };\n /**\n * endTransaction method\\\n *\n * @returns { void } endTransaction method .\\\n * @param {boolean} protectChange - provide the options value.\n * @private\n */\n CommandHandler.prototype.endTransaction = function (protectChange) {\n this.state = null;\n if (protectChange) {\n this.diagram.protectPropertyChange(false);\n }\n getAdornerLayer(this.diagram.element.id).style.pointerEvents = 'all';\n };\n /**\n * setFocus method\\\n *\n * @returns { void } setFocus method .\\\n * @private\n */\n CommandHandler.prototype.setFocus = function () {\n document.getElementById(this.diagram.element.id).focus();\n };\n /**\n * showTooltip method\\\n *\n * @returns { void } showTooltip method .\\\n * @param {IElement} node - provide the options value.\n * @param {PointModel} position - provide the position value.\n * @param {string | HTMLElement} content - provide the content value.\n * @param {string} toolName - provide the toolName value.\n * @param {boolean} isTooltipVisible - provide the isTooltipVisible value.\n * @private\n */\n CommandHandler.prototype.showTooltip = function (node, position, content, toolName, isTooltipVisible) {\n var _this = this;\n var targetId;\n var targetEle;\n var isNative = false;\n if (node instanceof Selector) {\n if ((node.nodes.length === 1) && node.connectors.length === 0) {\n targetId = node.nodes[0].id;\n if (node.nodes[0].shape && node.nodes[0].shape instanceof Native) {\n isNative = true;\n }\n }\n else if ((node.nodes.length === 0) && node.connectors.length === 1) {\n targetId = node.connectors[0].id;\n }\n else {\n targetEle = document.getElementById(this.diagram.element.id + '_SelectorElement');\n }\n }\n else if (node instanceof Node) {\n targetId = node.id;\n if (node.shape && (node.shape instanceof Native)) {\n isNative = true;\n }\n }\n else {\n targetId = node.id;\n }\n if (isNullOrUndefined(targetEle) && !isNullOrUndefined(targetId)) {\n var idName = isNative ? '_content_native_element' : '_groupElement';\n targetEle = document.getElementById(targetId + idName);\n }\n if (isTooltipVisible) {\n this.diagram.tooltipObject.position = 'BottomCenter';\n this.diagram.tooltipObject.animation = { open: { delay: 0, duration: 0 } };\n this.diagram.tooltipObject.openDelay = 0;\n this.diagram.tooltipObject.closeDelay = 0;\n }\n if (this.diagram.selectedItems.setTooltipTemplate) {\n var template = void 0;\n var setTooltipTemplate = getFunction(this.diagram.selectedItems.setTooltipTemplate);\n if (setTooltipTemplate) {\n template = setTooltipTemplate(node, this.diagram);\n }\n if (template instanceof HTMLElement) {\n content = template.cloneNode(true);\n }\n else {\n content = template ? template : content;\n }\n }\n //840454- support to provide isSticky property for tooltip in diagram control\n this.diagram.tooltipObject.isSticky = false;\n if (node.tooltip) {\n this.diagram.tooltipObject.openOn = node.tooltip.openOn;\n }\n // Task 834121: Content-Security-Policy support for diagram\n if (typeof content === 'string') {\n this.diagram.tooltipObject.content = initializeCSPTemplate(function () {\n return content;\n });\n }\n else {\n this.diagram.tooltipObject.content = content;\n }\n this.diagram.tooltipObject.offsetX = 0;\n this.diagram.tooltipObject.offsetY = 0;\n this.diagram.tooltipObject.refresh(targetEle);\n if (isTooltipVisible) {\n setTimeout(function () {\n _this.diagram.tooltipObject.open(targetEle);\n }, 1);\n }\n };\n /**\n * Split the connector, when the node is dropped onto it and establish connection with that dropped node.\n *\n * @returns { void } connectorSplit method .\\\n * @param {NodeModel} droppedObject - Provide the dropped node id\n * @param {ConnectorModel} targetConnector - Provide the connector id\n * @private\n */\n CommandHandler.prototype.connectorSplit = function (droppedObject, targetConnector) {\n var droppedNodeId = droppedObject.id;\n var existingConnector = cloneObject(targetConnector);\n var connectorIndex = this.diagram.connectors.indexOf(targetConnector);\n var nodeIndex = this.diagram.nodes.indexOf(droppedObject);\n var droppedNode = cloneObject(droppedObject);\n var connectorOldChanges = {};\n var nodeOldChanges = {};\n var nodeOldProperty = {\n offsetX: droppedNode.offsetX,\n offsetY: droppedNode.offsetY\n };\n var connectorOldProperty = {\n sourceID: existingConnector.sourceID,\n sourcePoint: existingConnector.sourcePoint,\n sourcePortID: existingConnector.sourcePortID,\n targetID: existingConnector.targetID,\n targetPoint: existingConnector.targetPoint,\n targetPortID: existingConnector.targetPortID\n };\n connectorOldChanges[parseInt(connectorIndex.toString(), 10)] = connectorOldProperty;\n nodeOldChanges[parseInt(nodeIndex.toString(), 10)] = nodeOldProperty;\n var connectorNewChanges = {};\n var nodeNewChanges = {};\n var nodeNewProperty = {};\n var connectorNewProperty = {};\n //Split the connector based on the dropped node\n if (existingConnector.sourceID !== '' && existingConnector.targetID !== '') {\n connectorNewProperty.targetID = this.ConnectorTargetChange(targetConnector, droppedNodeId);\n }\n else if (existingConnector.sourceID !== '' && existingConnector.targetID === '') {\n this.nodeOffsetChange(nodeNewProperty, droppedNode, targetConnector.targetPoint);\n connectorNewProperty.targetID = this.ConnectorTargetChange(targetConnector, droppedNodeId);\n }\n else if ((existingConnector.sourceID === '' && existingConnector.targetID === '') || (existingConnector.sourceID === '' && existingConnector.targetID !== '')) {\n this.nodeOffsetChange(nodeNewProperty, droppedNode, targetConnector.sourcePoint);\n connectorNewProperty.sourceID = this.ConnectorSourceChange(targetConnector, droppedNodeId);\n }\n connectorNewChanges[parseInt(connectorIndex.toString(), 10)] = connectorNewProperty;\n nodeNewChanges[parseInt(nodeIndex.toString(), 10)] = nodeNewProperty;\n this.diagram.nodePropertyChange(droppedObject, nodeOldProperty, nodeNewProperty);\n this.diagram.updateSelector();\n this.diagram.connectorPropertyChange(targetConnector, connectorOldProperty, connectorNewProperty);\n //Check Whether the connector connects with the node\n if (existingConnector.sourceID !== '' && existingConnector.targetID !== '') {\n var newConnector = {\n id: 'connector ' + droppedNodeId,\n constraints: ConnectorConstraints.Default | ConnectorConstraints.AllowDrop,\n sourceID: droppedNodeId\n };\n //Check whether the connector connects with the ports\n if (existingConnector.sourcePortID !== '' && existingConnector.targetPortID !== '') {\n newConnector.targetID = existingConnector.targetID;\n newConnector.targetPortID = existingConnector.targetPortID;\n }\n else {\n newConnector.targetID = existingConnector.targetID;\n }\n this.diagram.add(newConnector);\n }\n var entry = {\n type: 'PropertyChanged', redoObject: { nodes: nodeNewChanges }, undoObject: { nodes: nodeOldChanges },\n category: 'Internal'\n };\n this.diagram.addHistoryEntry(entry);\n var entry1 = {\n type: 'PropertyChanged', redoObject: { connectors: connectorNewChanges }, undoObject: { connectors: connectorOldChanges },\n category: 'Internal'\n };\n this.diagram.addHistoryEntry(entry1);\n };\n CommandHandler.prototype.nodeOffsetChange = function (propertyChangeArg, node, nodeNewOffset) {\n propertyChangeArg.offsetX = node.offsetX = nodeNewOffset.x;\n propertyChangeArg.offsetY = node.offsetY = nodeNewOffset.y;\n };\n CommandHandler.prototype.ConnectorTargetChange = function (connector, newTarget) {\n connector.targetID = newTarget;\n return newTarget;\n };\n CommandHandler.prototype.ConnectorSourceChange = function (connector, newTarget) {\n connector.sourceID = newTarget;\n return newTarget;\n };\n /**\n * closeTooltip method\\\n *\n * @returns { void } closeTooltip method .\\\n * @private\n */\n CommandHandler.prototype.closeTooltip = function () {\n this.diagram.tooltipObject.close();\n };\n /**\n * canEnableDefaultTooltip method\\\n *\n * @returns { boolean } canEnableDefaultTooltip method .\\\n * @private\n */\n CommandHandler.prototype.canEnableDefaultTooltip = function () {\n if (this.diagram.selectedItems.constraints & SelectorConstraints.ToolTip) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * updateSelector method\\\n *\n * @returns { void } updateSelector method .\\\n * @private\n */\n CommandHandler.prototype.updateSelector = function () {\n this.diagram.updateSelector();\n };\n // /**\n // * updateConnectorValue method\\\n // *\n // * @returns { void } updateConnectorValue method .\\\n // * @param {IBlazorConnectionChangeEventArgs} args - provide the options value.\n // * @private\n // */\n // public updateConnectorValue(args: IBlazorConnectionChangeEventArgs): void {\n // //remove Blazor code\n // }\n /**\n * triggerEvent method\\\n *\n * @returns { Promise' + htmlData + '
';\n htmlData = htmlData.replace(/ transform: t/g, ' -webkit-transform: t');\n this.diagram.snapSettings.constraints = snapConstraints;\n this.diagram.dataBind();\n return htmlData;\n };\n /** @private */\n PrintAndExport.prototype.getDiagramContent = function (styleSheets) {\n if (this.diagram.scroller.currentZoom === 1) {\n var htmlData = this.getContent(styleSheets);\n /* tslint:disable */\n // eslint-disable-next-line quotes\n return checkBrowserInfo() ? htmlData.replace(\"url(\" + location.protocol + '//' + location.host + location.pathname + \"#diagram_pattern \", \"url(#diagram_pattern)\") : htmlData;\n /* tslint:enable */\n }\n else {\n var container = document.getElementById(this.diagram.element.id + 'content');\n var scrollerX = container.scrollLeft;\n var scrollerY = container.scrollTop;\n var oldZoom = this.diagram.scrollSettings.currentZoom;\n var oldHorizontalOffset = this.diagram.scroller.horizontalOffset;\n var oldVerticalOffset = this.diagram.scroller.verticalOffset;\n var oldWidth = Number(String(this.diagram.width).split('%')[0]) ?\n container.clientWidth : Number(String(this.diagram.width).split('px')[0]);\n var oldHeight = Number(String(this.diagram.height).split('%')[0]) ?\n container.clientHeight : Number(String(this.diagram.height).split('px')[0]);\n var bounds = this.getDiagramBounds('', {});\n this.diagram.scroller.zoom((1 / oldZoom));\n var scrollX_1 = 0;\n var scrollY_1 = 0;\n scrollX_1 = bounds.x;\n scrollY_1 = bounds.y;\n this.diagram.scroller.transform = {\n tx: -scrollX_1,\n ty: -scrollY_1,\n scale: this.diagram.scroller.currentZoom\n };\n this.diagram.scroller.horizontalOffset = -scrollX_1;\n this.diagram.scroller.verticalOffset = -scrollY_1;\n this.diagram.scroller.setSize();\n this.diagram.setSize(bounds.width, bounds.height);\n var htmlData = this.getContent(styleSheets);\n this.diagram.setSize(oldWidth, oldHeight);\n this.diagram.scroller.zoom(oldZoom / this.diagram.scrollSettings.currentZoom);\n this.diagram.dataBind();\n if (scrollerX || scrollerY) {\n this.diagram.setOffset(scrollerX, scrollerY);\n }\n else {\n this.diagram.scroller.transform = {\n tx: (oldHorizontalOffset) / this.diagram.scroller.currentZoom,\n ty: (oldVerticalOffset) / this.diagram.scroller.currentZoom,\n scale: this.diagram.scroller.currentZoom\n };\n this.diagram.scroller.horizontalOffset = oldHorizontalOffset;\n this.diagram.scroller.verticalOffset = oldVerticalOffset;\n }\n this.diagram.renderSelector(false);\n /* tslint:disable */\n // eslint-disable-next-line quotes\n return checkBrowserInfo() ? htmlData.replace(\"url(\" + location.protocol + '//' + location.host + location.pathname + \"#diagram_pattern \", \"url(#diagram_pattern)\") : htmlData;\n /* tslint:enable */\n }\n };\n /** @private */\n PrintAndExport.prototype.exportImages = function (image, options) {\n var _this = this;\n var region = options && options.region ? options.region : 'Content';\n var margin = options.margin || {};\n margin = {\n top: !isNaN(margin.top) ? margin.top : 0,\n bottom: !isNaN(margin.bottom) ? margin.bottom : 0,\n left: !isNaN(margin.left) ? margin.left : 0,\n right: !isNaN(margin.right) ? margin.right : 0\n };\n var bounds = this.getDiagramBounds(region, {});\n if (options.bounds) {\n bounds.x = (!isNaN(options.bounds.x) ? options.bounds.x : bounds.x);\n bounds.y = (!isNaN(options.bounds.y) ? options.bounds.y : bounds.y);\n bounds.width = (options.bounds.width || bounds.width);\n bounds.height = (options.bounds.height || bounds.height);\n }\n var img = document.createElement('img');\n var attr = {\n 'src': image\n };\n setAttributeHtml(img, attr);\n var context = this;\n img.onload = function () {\n var canvas = CanvasRenderer.createCanvas(context.diagram.element.id + 'innerImage', bounds.width + (margin.left + margin.right), bounds.height + (margin.top + margin.bottom));\n var ctx = canvas.getContext('2d');\n ctx.fillStyle = context.diagram.pageSettings.background.color;\n ctx.fillRect(0, 0, bounds.width + (margin.left + margin.right), bounds.height + (margin.top + margin.bottom));\n ctx.drawImage(img, 0, 0, bounds.width, bounds.height, margin.left, margin.top, bounds.width, bounds.height);\n //898304 - exportImage function export images only in \"png\" format\n if (image && options.format === 'JPG') {\n image = canvas.toDataURL('image/jpeg');\n }\n else {\n image = canvas.toDataURL();\n }\n if (options.printOptions) {\n context.printImages(image, options);\n return;\n }\n ctx.restore();\n var fileName = options.fileName || 'diagram';\n _this.canvasMultiplePage(options, canvas, margin, image, fileName);\n };\n //898304 - exportImage function export images only in \"png\" format\n if (options.format === 'SVG') {\n this.exportDiagram(options);\n }\n };\n /**\n *To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n PrintAndExport.prototype.destroy = function () {\n /**\n * Destroys the Print and Export module\n */\n //833683 - unwire beforeunload event on destroy\n window.removeEventListener('beforeunload', this.closePrintWindow);\n this.printWindow = undefined;\n };\n /**\n * Get module name.\n */\n PrintAndExport.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'PrintandExport';\n };\n return PrintAndExport;\n}());\n\n/**\n * data source defines the basic unit of diagram\n */\nvar DataBinding = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the data binding module.\n * @private\n */\n function DataBinding() {\n /** @private */\n this.dataTable = {};\n //constructs the data binding module\n }\n /**\n * To destroy the data binding module\n *\n * @returns {void}\n * @private\n */\n DataBinding.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n DataBinding.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'DataBinding';\n };\n /**\n * Initialize nodes and connectors when we have a data as JSON\n *\n * @param {DataSourceModel} data\n * @param {Diagram} diagram\n * @private\n */\n DataBinding.prototype.initData = function (data, diagram) {\n var dataSource;\n var dataProp = 'data';\n var jsonProp = 'json';\n var dataManager = data.dataManager || data.dataSource || {};\n dataSource = dataManager[\"\" + dataProp] || dataManager[\"\" + jsonProp] ||\n (dataManager.dataSource ? dataManager.dataSource.json : undefined);\n if (dataSource && dataSource.length === 0 && dataManager.dataSource.data) {\n dataSource = dataManager.dataSource.data;\n }\n if (dataSource && dataSource.length) {\n this.applyDataSource(data, dataSource, diagram);\n diagram.trigger('dataLoaded', { diagram: (isBlazor()) ? null : cloneBlazorObject(diagram) });\n }\n };\n /**\n * Initialize nodes and connector when we have a data as remote url\n *\n * @param {DataSourceModel} data\n * @param {Diagram} diagram\n * @private\n */\n DataBinding.prototype.initSource = function (data, diagram) {\n var _this = this;\n var dataSource = data;\n var result;\n var mapper = data;\n if (dataSource.dataManager instanceof DataManager || dataSource.dataSource instanceof DataManager) {\n var tempObj = mapper.dataManager || mapper.dataSource;\n var query = tempObj.defaultQuery || new Query();\n var dataManager = data.dataManager || data.dataSource;\n dataManager.executeQuery(query).then(function (e) {\n var prop = 'result';\n result = e[\"\" + prop];\n if (!diagram.isDestroyed) {\n diagram.protectPropertyChange(true);\n _this.applyDataSource(data, result, diagram);\n diagram.refreshDiagram();\n diagram.protectPropertyChange(false);\n diagram.trigger('dataLoaded', { diagram: (isBlazor()) ? null : cloneBlazorObject(diagram) });\n }\n });\n }\n };\n DataBinding.prototype.applyDataSource = function (mapper, data, diagram) {\n this.dataTable = {};\n var obj;\n var firstNode;\n var node;\n var rootNodes = [];\n var firstLevel = [];\n var item;\n var nextLevel;\n if (data !== undefined) {\n for (var r = 0; r < data.length; r++) {\n obj = data[parseInt(r.toString(), 10)];\n //832886 - Rendering layout without case sensitivity\n if (obj[mapper.parentId] === undefined || obj[mapper.parentId] === null ||\n typeof obj[mapper.parentId] !== 'object') {\n if (isNaN(obj[mapper.parentId]) && obj[mapper.parentId] !== undefined) {\n if (rootNodes[obj[mapper.parentId] ? obj[mapper.parentId].toLowerCase() : obj[mapper.parentId]] !== undefined) {\n rootNodes[obj[mapper.parentId].toLowerCase()].items.push(obj);\n }\n else {\n rootNodes[obj[mapper.parentId] ? obj[mapper.parentId].toLowerCase() : obj[mapper.parentId]] = { items: [obj] };\n }\n }\n else {\n if (rootNodes[obj[mapper.parentId]] !== undefined) {\n rootNodes[obj[mapper.parentId]].items.push(obj);\n }\n else {\n rootNodes[obj[mapper.parentId]] = { items: [obj] };\n }\n }\n }\n else {\n rootNodes = this.updateMultipleRootNodes(obj, rootNodes, mapper, data);\n }\n if (mapper.root && isNaN(mapper.root) && obj[mapper.id] && isNaN(obj[mapper.id])) {\n if ((mapper.root).toLowerCase() === obj[mapper.id].toLowerCase()) {\n firstNode = { items: [obj] };\n }\n }\n else {\n if (mapper.root === obj[mapper.id]) {\n firstNode = { items: [obj] };\n }\n }\n }\n if (firstNode) {\n firstLevel.push(firstNode);\n }\n else {\n for (var _i = 0, _a = Object.keys(rootNodes); _i < _a.length; _i++) {\n var n = _a[_i];\n if (!n || n === 'undefined' || n === '\\'\\'' || n === 'null') {\n firstLevel.push(rootNodes[\"\" + n]);\n }\n }\n }\n for (var i = 0; i < firstLevel.length; i++) {\n for (var j = 0; j < firstLevel[parseInt(i.toString(), 10)].items.length; j++) {\n item = firstLevel[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)];\n node = this.applyNodeTemplate(mapper, item, diagram);\n diagram.nodes.push(node);\n if (isNaN(item[mapper.id]) && item[mapper.id] !== undefined) {\n this.dataTable[item[mapper.id].toLowerCase()] = node;\n }\n else {\n this.dataTable[item[mapper.id]] = node;\n }\n if (isNaN(node.data[mapper.id]) && node.data[mapper.id] !== undefined) {\n nextLevel = rootNodes[node.data[mapper.id].toLowerCase()];\n }\n else {\n nextLevel = rootNodes[node.data[mapper.id]];\n }\n if (nextLevel !== undefined) {\n this.renderChildNodes(mapper, nextLevel, node.id, rootNodes, diagram);\n }\n }\n }\n }\n this.dataTable = null;\n };\n /**\n * updateMultipleRootNodes method is used to update the multiple Root Nodes\n *\n * @param {Object} object\n * @param {Object[]} rootnodes\n * @param {DataSourceModel} mapper\n * @param {Object[]} data\n */\n DataBinding.prototype.updateMultipleRootNodes = function (obj, rootNodes, mapper, data) {\n var parents = obj[mapper.parentId];\n var parent;\n for (var i = 0; i < parents.length; i++) {\n if (parents[parseInt(i.toString(), 10)]) {\n if (isNaN(parents[parseInt(i.toString(), 10)])) {\n parent = (parents[parseInt(i.toString(), 10)]).toLowerCase();\n }\n else {\n parent = (parents[parseInt(i.toString(), 10)]);\n }\n if (rootNodes[\"\" + parent]) {\n rootNodes[\"\" + parent].items.push(obj);\n }\n else {\n rootNodes[\"\" + parent] = { items: [obj] };\n }\n }\n else {\n parent = parents[parseInt(i.toString(), 10)];\n if (rootNodes[\"\" + parent]) {\n rootNodes[\"\" + parent].items.push(obj);\n }\n else {\n rootNodes[\"\" + parent] = { items: [obj] };\n }\n }\n }\n return rootNodes;\n };\n /**\n * Get the node values\\\n *\n * @returns { Node } Get the node values.\\\n * @param {DataSourceModel} mapper - provide the id value.\n * @param {Object} item - provide the id value.\n * @param {Diagram} diagram - provide the id value.\n *\n * @private\n */\n DataBinding.prototype.applyNodeTemplate = function (mapper, item, diagram) {\n //const root: Object = item;\n var id = randomId();\n //const blazor: string = 'Blazor';\n var nodeModel = { id: id, data: item };\n //Task 895538: Flow-chart layout support for EJ2 diagram.\n //Added below code to set node shape and style based on the data.\n if (diagram.layout.type === 'Flowchart') {\n var shape = this.getFlowChartNodeShape(item);\n var style = { fill: item.color ? item.color : 'white',\n strokeColor: item.stroke ? item.stroke : 'black',\n strokeWidth: item.strokeWidth ? item.strokeWidth : 1\n };\n nodeModel.shape = shape;\n nodeModel.style = style;\n nodeModel.annotations = [{ content: item.name ? item.name : '' }];\n }\n // eslint-disable-next-line @typescript-eslint/ban-types\n var doBinding = getFunction(mapper.doBinding);\n if (doBinding) {\n doBinding(nodeModel, item, diagram);\n }\n var obj = new Node(diagram, 'nodes', nodeModel, true);\n updateDefaultValues(obj, nodeModel, diagram.nodeDefaults);\n if (mapper.dataMapSettings) {\n var index = void 0;\n var arrayProperty = [];\n var innerProperty = [];\n for (var i = 0; i < mapper.dataMapSettings.length; i++) {\n if (mapper.dataMapSettings[parseInt(i.toString(), 10)].property.indexOf('.') !== -1) {\n innerProperty = this.splitString(mapper.dataMapSettings[parseInt(i.toString(), 10)].property);\n for (var p = 0; p < innerProperty.length; p++) {\n if (innerProperty[parseInt(p.toString(), 10)].indexOf('[') !== -1) {\n index = innerProperty[parseInt(p.toString(), 10)].indexOf('[');\n arrayProperty = innerProperty[parseInt(p.toString(), 10)].split('[');\n }\n }\n if (index) {\n if (innerProperty[2]) {\n obj[arrayProperty[0]][innerProperty[0].charAt(index + 1)][innerProperty[1]][innerProperty[2]] =\n item[mapper.dataMapSettings[parseInt(i.toString(), 10)].field];\n }\n else {\n var value = item[mapper.dataMapSettings[parseInt(i.toString(), 10)].field];\n obj[arrayProperty[0]][innerProperty[0].charAt(index + 1)][innerProperty[1]] = value;\n }\n }\n else {\n if (innerProperty[2]) {\n obj[innerProperty[0]][innerProperty[1]][innerProperty[2]]\n = item[mapper.dataMapSettings[parseInt(i.toString(), 10)].field];\n }\n else {\n obj[innerProperty[0]][innerProperty[1]] = item[mapper.dataMapSettings[parseInt(i.toString(), 10)].field];\n }\n }\n }\n else {\n var property = mapper.dataMapSettings[parseInt(i.toString(), 10)].property;\n property = property.charAt(0).toLowerCase() + property.slice(1);\n obj[\"\" + property] = item[mapper.dataMapSettings[parseInt(i.toString(), 10)].field];\n }\n index = 0;\n arrayProperty = [];\n innerProperty = [];\n }\n }\n if (!this.collectionContains(obj, diagram, mapper.id, mapper.parentId)) {\n return obj;\n }\n else {\n if (item[mapper.id] && isNaN(item[mapper.id])) {\n return this.dataTable[item[mapper.id].toLowerCase()];\n }\n else {\n return this.dataTable[item[mapper.id]];\n }\n }\n };\n DataBinding.prototype.getFlowChartNodeShape = function (data) {\n if (data.shape !== '') {\n switch (data.shape) {\n case 'Rectangle':\n return { type: 'Basic', shape: 'Rectangle' };\n case 'Decision':\n return { type: 'Flow', shape: 'Decision' };\n case 'Hexagon':\n return { type: 'Path', data: 'M 0 0 L 2 -2 L 11 -2 L 13 0 L 11 2 L 2 2 L 0 0' };\n case 'Ellipse':\n return { type: 'Basic', shape: 'Ellipse' };\n case 'Terminator':\n return { type: 'Flow', shape: 'Terminator' };\n case 'PredefinedProcess':\n return { type: 'Flow', shape: 'PreDefinedProcess' };\n case 'Parallelogram':\n return { type: 'Basic', shape: 'Parallelogram' };\n case 'ParallelogramAlt':\n return { type: 'Path', data: 'M 0 0 L 12 0 L 14 2 L 2 2 L 0 0' };\n case 'Trapezoid':\n return { type: 'Path', data: 'M 0 0 L 1 -1 L 5 -1 L 6 0 L 0 0' };\n case 'TrapezoidAlt':\n return { type: 'Path', data: 'M 0 0 L 5 0 L 4 1 L 1 1 L 0 0' };\n case 'DataSource':\n return { type: 'Path', data: 'M 0 1 L 0 6 C 2 7 4 7 6 6 L 6 1 C 5 0 1 0 0 1 C 1 2 5 2 6 1' };\n case 'Asymmetric':\n return { type: 'Path', data: 'M 0 0 L 8 0 L 8 2 L 0 2 L 2 1 L 0 0' };\n case 'DoubleCircle':\n return { type: 'Path', data: 'M 0 0 A 1 1 0 0 0 7 0 A 1 1 0 0 0 0 0 M -1 0 A 1 1 0 0 0 8 0 A 1 1 0 0 0 -1 0' };\n case 'Document':\n return { type: 'Flow', shape: 'Document' };\n case 'PaperTap':\n return { type: 'Flow', shape: 'PaperTap' };\n case 'DirectData':\n return { type: 'Flow', shape: 'DirectData' };\n case 'SequentialData':\n return { type: 'Flow', shape: 'SequentialData' };\n case 'Sort':\n return { type: 'Flow', shape: 'Sort' };\n case 'MultiDocument':\n return { type: 'Flow', shape: 'MultiDocument' };\n case 'Collate':\n return { type: 'Flow', shape: 'Collate' };\n case 'SummingJunction':\n return { type: 'Flow', shape: 'SummingJunction' };\n case 'Or':\n return { type: 'Flow', shape: 'Or' };\n case 'InternalStorage':\n return { type: 'Flow', shape: 'InternalStorage' };\n case 'Extract':\n return { type: 'Flow', shape: 'Extract' };\n case 'ManualOperation':\n return { type: 'Flow', shape: 'ManualOperation' };\n case 'Merge':\n return { type: 'Flow', shape: 'Merge' };\n case 'OffPageReference':\n return { type: 'Flow', shape: 'OffPageReference' };\n case 'SequentialAccessStorage':\n return { type: 'Flow', shape: 'SequentialAccessStorage' };\n case 'Data':\n return { type: 'Flow', shape: 'Data' };\n case 'Card':\n return { type: 'Flow', shape: 'Card' };\n case 'Delay':\n return { type: 'Flow', shape: 'Delay' };\n case 'Preparation':\n return { type: 'Flow', shape: 'Preparation' };\n case 'Display':\n return { type: 'Flow', shape: 'Display' };\n case 'ManualInput':\n return { type: 'Flow', shape: 'ManualInput' };\n case 'LoopLimit':\n return { type: 'Flow', shape: 'LoopLimit' };\n case 'StoredData':\n return { type: 'Flow', shape: 'StoredData' };\n case 'Annotation':\n return { type: 'Flow', shape: 'Annotation' };\n case 'Annotation2':\n return { type: 'Flow', shape: 'Annotation2' };\n default:\n return { type: 'Flow', shape: 'Process' };\n }\n }\n return { type: 'Flow', shape: 'Process' };\n };\n DataBinding.prototype.splitString = function (property) {\n var temp = [];\n temp = property.split('.');\n for (var i = 0; i < temp.length; i++) {\n temp[parseInt(i.toString(), 10)] = temp[parseInt(i.toString(), 10)].charAt(0).toLowerCase()\n + temp[parseInt(i.toString(), 10)].slice(1);\n }\n return temp;\n };\n DataBinding.prototype.renderChildNodes = function (mapper, parent, value, rtNodes, diagram) {\n var child;\n var nextLevel;\n var node;\n for (var j = 0; j < parent.items.length; j++) {\n child = parent.items[parseInt(j.toString(), 10)];\n if (!child[mapper.id]) {\n continue;\n }\n node = this.applyNodeTemplate(mapper, child, diagram);\n var canBreak = false;\n if (!this.collectionContains(node, diagram, mapper.id, mapper.parentId)) {\n if (child[mapper.id] && isNaN(child[mapper.id])) {\n this.dataTable[child[mapper.id].toLowerCase()] = node;\n }\n else {\n this.dataTable[child[mapper.id]] = node;\n }\n diagram.nodes.push(node);\n }\n else {\n canBreak = true;\n }\n if (!this.containsConnector(diagram, value, node.id)) {\n diagram.connectors.push(this.applyConnectorTemplate(value, node.id, diagram));\n }\n if (!canBreak) {\n if (node.data[mapper.id] && isNaN(node.data[mapper.id])) {\n nextLevel = rtNodes[node.data[mapper.id].toLowerCase()];\n }\n else {\n nextLevel = rtNodes[node.data[mapper.id]];\n }\n if (nextLevel !== undefined) {\n this.renderChildNodes(mapper, nextLevel, node.id, rtNodes, diagram);\n }\n }\n }\n };\n // Bug 832897: Need to improve performance while rendering layout with large number of nodes.\n // Replaced for loop with some() method to improve performance.\n DataBinding.prototype.containsConnector = function (diagram, sourceNode, targetNode) {\n if (sourceNode === '' || targetNode === '') {\n return false;\n }\n return diagram.connectors.some(function (connector) {\n return connector !== undefined && connector.sourceID === sourceNode && connector.targetID === targetNode;\n });\n };\n /**\n * collectionContains method is used to check wthear the node is already present in collection or not\n *\n * @param {Node} node\n * @param {Diagram} diagram\n * @param {string} id\n * @param {string} parentId\n */\n DataBinding.prototype.collectionContains = function (node, diagram, id, parentId) {\n var obj;\n if (isNaN(node.data[\"\" + id]) && node.data[\"\" + id]) {\n obj = this.dataTable[node.data[\"\" + id].toLowerCase()];\n }\n else {\n obj = this.dataTable[node.data[\"\" + id]];\n }\n if (obj !== undefined && obj.data[\"\" + id] === node.data[\"\" + id] && obj.data[\"\" + parentId] === node.data[\"\" + parentId]) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Get the Connector values\n *\n * @param {string} sNode\n * @param {string} tNode\n * @param {Diagram} diagram\n */\n DataBinding.prototype.applyConnectorTemplate = function (sNode, tNode, diagram) {\n var connModel = {\n id: randomId(), sourceID: sNode, targetID: tNode\n };\n var arrowType;\n //Task 895538: Flow-chart layout support for EJ2 diagram.\n //Added below code to set connector annotation and style based on the data.\n if (diagram.layout.type === 'Flowchart') {\n var targetNode = diagram.nodes.find(function (node) { return node.id === tNode; });\n if (typeof targetNode.data.label === 'string') {\n connModel.annotations = [{ content: targetNode.data.label }];\n }\n else if (Array.isArray(targetNode.data.label)) {\n var inConnectors = diagram.connectors.filter(function (connector) { return connector.targetID === tNode; });\n var index = 0;\n if (inConnectors.length > 0) {\n index = inConnectors.length;\n }\n connModel.annotations = [{ content: targetNode.data.label[parseInt(index.toString(), 10)] }];\n }\n arrowType = this.getConnectorArrowType(targetNode.data);\n }\n var obj = new Connector(diagram, 'connectors', connModel, true);\n if (arrowType) {\n obj.style.strokeWidth = arrowType.strokeWidth;\n obj.targetDecorator.shape = arrowType.targetDecorator;\n }\n updateDefaultValues(obj, connModel, diagram.connectorDefaults);\n return obj;\n };\n DataBinding.prototype.getConnectorArrowType = function (data) {\n if (data.arrowType !== '') {\n switch (data.arrowType) {\n case 'None':\n return { targetDecorator: 'None', strokeWidth: 1 };\n case 'Arrow':\n return { targetDecorator: 'Arrow', strokeWidth: 1 };\n case 'Diamond':\n return { targetDecorator: 'Diamond', strokeWidth: 1 };\n case 'Circle':\n return { targetDecorator: 'Circle', strokeWidth: 1 };\n case 'OpenArrow':\n return { targetDecorator: 'OpenArrow', strokeWidth: 1 };\n case 'Square':\n return { targetDecorator: 'Square', strokeWidth: 1 };\n case 'Fletch':\n return { targetDecorator: 'Fletch', strokeWidth: 1 };\n case 'OpenFetch':\n return { targetDecorator: 'OpenFetch', strokeWidth: 1 };\n case 'IndentedArrow':\n return { targetDecorator: 'IndentedArrow', strokeWidth: 1 };\n case 'OutdentedArrow':\n return { targetDecorator: 'OutdentedArrow', strokeWidth: 1 };\n case 'DoubleArrow':\n return { targetDecorator: 'DoubleArrow', strokeWidth: 1 };\n default:\n return { targetDecorator: 'Arrow', strokeWidth: 1 };\n }\n }\n else {\n return { targetDecorator: 'Arrow', strokeWidth: 1 };\n }\n };\n return DataBinding;\n}());\n\nvar __awaiter$3 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator$3 = (undefined && undefined.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\n/**\n * @private\n */\nvar menuClass = {\n content: '.e-diagramcontent',\n copy: 'e-copy',\n paste: 'e-paste',\n undo: 'e-undo',\n redo: 'e-redo',\n cut: 'e-cut',\n selectAll: 'e-selectall',\n grouping: 'e-grouping',\n group: 'e-group',\n unGroup: 'e-ungroup',\n bringToFront: 'e-bringfront',\n sendToBack: 'e-sendback',\n moveForward: 'e-bringforward',\n sendBackward: 'e-sendbackward',\n order: 'e-order'\n};\n/**\n * 'ContextMenu module used to handle context menu actions.'\n *\n * @private\n */\nvar DiagramContextMenu = /** @__PURE__ @class */ (function () {\n function DiagramContextMenu(parent, service) {\n this.defaultItems = {};\n /**\n * @private\n */\n this.disableItems = [];\n /**\n * @private\n */\n this.hiddenItems = [];\n this.localeText = this.setLocaleKey();\n this.parent = parent;\n this.serviceLocator = service;\n this.addEventListener();\n }\n /**\n * addEventListener method \\\n *\n * @returns { void } addEventListener method .\\\n *\n * @private\n */\n DiagramContextMenu.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('initial-load', this.render, this);\n };\n /**\n * removeEventListener method \\\n *\n * @returns { void } removeEventListener method .\\\n *\n * @private\n */\n DiagramContextMenu.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('initial-load', this.render);\n };\n DiagramContextMenu.prototype.render = function () {\n this.l10n = this.serviceLocator.getService('localization');\n this.element = createHtmlElement('ul', { id: this.parent.element.id + '_contextMenu' });\n this.parent.element.appendChild(this.element);\n var target = '#' + this.parent.element.id;\n this.contextMenu = new ContextMenu({\n items: this.getMenuItems(),\n enableRtl: this.parent.enableRtl,\n enablePersistence: this.parent.enablePersistence,\n locale: this.parent.locale,\n target: target,\n select: this.contextMenuItemClick.bind(this),\n beforeOpen: this.contextMenuBeforeOpen.bind(this),\n onOpen: this.contextMenuOpen.bind(this),\n beforeItemRender: this.BeforeItemRender.bind(this),\n onClose: this.contextMenuOnClose.bind(this),\n cssClass: 'e-diagram-menu',\n animationSettings: { effect: 'None' }\n });\n this.contextMenu.appendTo(this.element);\n };\n DiagramContextMenu.prototype.getMenuItems = function () {\n var menuItems = [];\n var orderItems = [];\n var groupItems = [];\n if (!this.parent.contextMenuSettings.showCustomMenuOnly) {\n for (var _i = 0, _a = this.getDefaultItems(); _i < _a.length; _i++) {\n var item = _a[_i];\n if (item.toLocaleLowerCase().indexOf('group') !== -1) {\n if (item.toLocaleLowerCase() !== 'grouping') {\n groupItems.push(this.buildDefaultItems(item));\n }\n }\n else if (item.toLocaleLowerCase().indexOf('order') !== -1) {\n if (item.toLocaleLowerCase() !== 'order') {\n orderItems.push(this.buildDefaultItems(item));\n }\n }\n else {\n menuItems.push(this.buildDefaultItems(item));\n }\n }\n var groupMenus = this.buildDefaultItems('grouping');\n groupMenus.items = groupItems;\n menuItems.push(groupMenus);\n var orderMenus = this.buildDefaultItems('order');\n orderMenus.items = orderItems;\n menuItems.push(orderMenus);\n }\n if (this.parent.contextMenuSettings.items) {\n for (var _b = 0, _c = this.parent.contextMenuSettings.items; _b < _c.length; _b++) {\n var customItem = _c[_b];\n menuItems.push(customItem);\n }\n }\n return menuItems;\n };\n DiagramContextMenu.prototype.contextMenuOpen = function () {\n this.isOpen = true;\n };\n DiagramContextMenu.prototype.BeforeItemRender = function (args) {\n this.parent.trigger(contextMenuBeforeItemRender, args);\n };\n DiagramContextMenu.prototype.contextMenuItemClick = function (args) {\n document.getElementById(this.parent.element.id + 'content').focus();\n this.parent.trigger(contextMenuClick, args);\n var item = this.getKeyFromId(args.item.id);\n if (!args.cancel) {\n switch (item) {\n case 'cut':\n this.parent.cut();\n break;\n case 'copy':\n this.parent.copy();\n break;\n case 'undo':\n this.parent.undo();\n break;\n case 'redo':\n this.parent.redo();\n break;\n case 'paste':\n this.parent.paste();\n break;\n case 'selectAll':\n this.parent.selectAll();\n break;\n case 'group':\n this.parent.group();\n break;\n case 'unGroup':\n this.parent.unGroup();\n break;\n case 'bringToFrontOrder':\n this.parent.bringToFront();\n break;\n case 'moveForwardOrder':\n this.parent.moveForward();\n break;\n case 'sendToBackOrder':\n this.parent.sendToBack();\n break;\n case 'sendBackwardOrder':\n this.parent.sendBackward();\n break;\n }\n }\n };\n DiagramContextMenu.prototype.contextMenuOnClose = function (args) {\n var parent = 'parentObj';\n if (args.items.length > 0 && args.items[0][\"\" + parent] instanceof ContextMenu) {\n this.updateItemStatus();\n }\n };\n DiagramContextMenu.prototype.getLocaleText = function (item) {\n return this.l10n.getConstant(this.localeText[\"\" + item]);\n };\n DiagramContextMenu.prototype.updateItemStatus = function () {\n this.contextMenu.showItems(this.hiddenItems, true);\n this.contextMenu.enableItems(this.disableItems, false, true);\n this.hiddenItems = [];\n this.disableItems = [];\n this.isOpen = false;\n };\n /**\n * ensureItems method \\\n *\n * @returns { void } ensureItems method .\\\n * @param {MenuItemModel} item - provide the item value.\n * @param {Event} event - provide the event value.\n *\n * @private\n */\n DiagramContextMenu.prototype.ensureItems = function (item, event) {\n var key = this.getKeyFromId(item.id);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var dItem = this.defaultItems[\"\" + key];\n if (this.getDefaultItems().indexOf(key) !== -1) {\n if (item.target && (event || this.parent.checkMenu) &&\n !this.ensureTarget(item)) {\n this.hiddenItems.push(item.id);\n }\n }\n };\n /**\n * refreshItems method \\\n *\n * @returns { void } refreshItems method .\\\n *\n * @private\n */\n DiagramContextMenu.prototype.refreshItems = function () {\n this.updateItems();\n this.contextMenu.refresh();\n };\n DiagramContextMenu.prototype.updateItems = function () {\n var canInsert = true;\n for (var i = 0; i < this.parent.contextMenuSettings.items.length; i++) {\n var items = this.parent.contextMenuSettings.items[parseInt(i.toString(), 10)];\n for (var j = 0; j < this.contextMenu.items.length; j++) {\n if (this.contextMenu.items[parseInt(j.toString(), 10)].text\n === this.parent.contextMenuSettings.items[parseInt(i.toString(), 10)].text) {\n canInsert = false;\n }\n }\n if (canInsert) {\n this.contextMenu.insertAfter([items], this.contextMenu.items[this.contextMenu.items.length - 1].text);\n }\n }\n };\n DiagramContextMenu.prototype.contextMenuBeforeOpen = function (args) {\n return __awaiter$3(this, void 0, void 0, function () {\n var diagramArgs, _i, _a, item, _b, _c, newItem, hidden, contextItems, i, item, i, item;\n return __generator$3(this, function (_d) {\n if (!this.parent.checkMenu &&\n (window.navigator.userAgent.indexOf('Linux') !== -1 || window.navigator.userAgent.indexOf('X11') !== -1)) {\n this.parent.checkMenu = args.cancel = true;\n }\n if (this.parent.checkMenu) {\n this.hiddenItems = [];\n }\n diagramArgs = args;\n diagramArgs.hiddenItems = [];\n for (_i = 0, _a = args.items; _i < _a.length; _i++) {\n item = _a[_i];\n this.ensureItems(item, args.event);\n if (item.items.length) {\n for (_b = 0, _c = item.items; _b < _c.length; _b++) {\n newItem = _c[_b];\n this.ensureItems(newItem, args.event);\n }\n }\n }\n this.eventArgs = args.event;\n //Removed isBlazor code\n this.parent.trigger(contextMenuOpen, diagramArgs);\n hidden = true;\n this.hiddenItems = this.hiddenItems.concat(diagramArgs.hiddenItems);\n this.contextMenu.enableItems(this.disableItems, false, true);\n contextItems = this;\n for (i = 0; i < args.items.length; i++) {\n item = args.items[parseInt(i.toString(), 10)];\n if (contextItems.hiddenItems.indexOf(item.id) > -1) {\n contextItems.contextMenu.hideItems([item.id], true);\n }\n }\n for (i = 0; i < contextItems.contextMenu.items.length; i++) {\n item = contextItems.contextMenu.items[parseInt(i.toString(), 10)];\n if (contextItems.hiddenItems.indexOf(item.id) === -1) {\n hidden = false;\n contextItems.contextMenu.showItems([item.id], true);\n }\n }\n if (hidden) {\n diagramArgs.cancel = hidden;\n this.hiddenItems = [];\n }\n /* tslint:disable */\n if (this.parent.selectedItems.nodes.length && this.parent.selectedItems.nodes[0].isPhase\n && !this.parent.contextMenuSettings.showCustomMenuOnly) {\n args.cancel = true;\n }\n return [2 /*return*/];\n });\n });\n };\n DiagramContextMenu.prototype.ensureTarget = function (item) {\n var selectedLength = this.parent.selectedItems.nodes.length +\n this.parent.selectedItems.connectors.length;\n var itemText = this.getKeyFromId(item.id);\n var target = false;\n switch (itemText) {\n case 'undo':\n target = this.parent.historyManager && this.parent.historyManager.canUndo ? true : false;\n break;\n case 'redo':\n target = this.parent.historyManager && this.parent.historyManager.canRedo ? true : false;\n break;\n case 'paste':\n target = this.parent.commandHandler.clipboardData.clipObject ? true : false;\n break;\n case 'selectAll':\n target = this.parent.nodes.length + this.parent.connectors.length ? true : false;\n break;\n case 'grouping':\n target = ((selectedLength > 1) || (this.parent.selectedItems.nodes[0] && this.parent.selectedItems.nodes[0].children\n && this.parent.selectedItems.nodes[0].children.length > 1)) ? true : false;\n break;\n case 'group':\n target = selectedLength > 1;\n break;\n case 'unGroup':\n target = ((this.parent.selectedItems.nodes[0] && this.parent.selectedItems.nodes[0].children\n && this.parent.selectedItems.nodes[0].children.length > 1)) ? true : false;\n break;\n case 'cut':\n case 'copy':\n case 'order':\n case 'bringToFrontOrder':\n case 'moveForwardOrder':\n case 'sendToBackOrder':\n case 'sendBackwardOrder':\n target = selectedLength ? true : false;\n break;\n }\n return target;\n };\n /**\n *To destroy the context menu\n *\n * @returns {void} To destroy the context menu\n */\n DiagramContextMenu.prototype.destroy = function () {\n this.contextMenu.destroy();\n remove(this.element);\n this.removeEventListener();\n };\n DiagramContextMenu.prototype.getModuleName = function () {\n return 'contextMenu';\n };\n DiagramContextMenu.prototype.generateID = function (item) {\n return this.parent.element.id + '_contextMenu_' + item;\n };\n DiagramContextMenu.prototype.getKeyFromId = function (id) {\n return id.replace(this.parent.element.id + '_contextMenu_', '');\n };\n DiagramContextMenu.prototype.buildDefaultItems = function (item) {\n var menuItem;\n switch (item) {\n case 'copy':\n menuItem = { target: menuClass.content, iconCss: menuClass.copy };\n break;\n case 'cut':\n menuItem = { target: menuClass.content, iconCss: menuClass.cut };\n break;\n case 'paste':\n menuItem = { target: menuClass.content, iconCss: menuClass.paste };\n break;\n case 'undo':\n menuItem = { target: menuClass.content, iconCss: menuClass.undo };\n break;\n case 'redo':\n menuItem = { target: menuClass.content, iconCss: menuClass.redo };\n break;\n case 'grouping':\n menuItem = { target: menuClass.content };\n break;\n case 'group':\n menuItem = { target: menuClass.content, iconCss: menuClass.group };\n break;\n case 'unGroup':\n menuItem = { target: menuClass.content, iconCss: menuClass.unGroup };\n break;\n case 'order':\n menuItem = { target: menuClass.content, iconCss: menuClass.order };\n break;\n case 'bringToFrontOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.bringToFront };\n break;\n case 'moveForwardOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.moveForward };\n break;\n case 'sendToBackOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.sendToBack };\n break;\n case 'sendBackwardOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.sendBackward };\n break;\n case 'selectAll':\n menuItem = { target: menuClass.content };\n break;\n }\n this.defaultItems[\"\" + item] = {\n text: this.getLocaleText(item), id: this.generateID(item),\n target: menuItem.target, iconCss: menuItem.iconCss ? 'e-icons ' + menuItem.iconCss : ''\n };\n return this.defaultItems[\"\" + item];\n };\n DiagramContextMenu.prototype.getDefaultItems = function () {\n return [\n 'copy',\n 'cut', 'paste', 'undo', 'redo', 'selectAll', 'grouping', 'group', 'unGroup', 'order',\n 'bringToFrontOrder', 'moveForwardOrder', 'sendToBackOrder', 'sendBackwardOrder'\n ];\n };\n DiagramContextMenu.prototype.setLocaleKey = function () {\n return {\n 'copy': 'Copy',\n 'cut': 'Cut',\n 'paste': 'Paste',\n 'undo': 'Undo',\n 'redo': 'Redo',\n 'selectAll': 'SelectAll',\n 'grouping': 'Grouping',\n 'group': 'Group',\n 'unGroup': 'UnGroup',\n 'order': 'Order',\n 'bringToFrontOrder': 'BringToFront',\n 'moveForwardOrder': 'MoveForward',\n 'sendToBackOrder': 'SendToBack',\n 'sendBackwardOrder': 'SendBackward'\n };\n };\n return DiagramContextMenu;\n}());\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * BPMN Diagrams contains the BPMN functionalities\n */\nvar BpmnDiagrams = /** @__PURE__ @class */ (function () {\n //End size region\n /**\n * Constructor for the BpmnDiagrams module\n *\n * @private\n */\n function BpmnDiagrams() {\n //Code conversion for Bpmn Shapes\n //Start Region\n /** @private */\n this.bpmnTextAnnotationConnector = [];\n //constructs the BpmnDiagrams module\n }\n /** @private */\n BpmnDiagrams.prototype.getSize = function (node, content) {\n var size = new Size(node.width, node.height);\n if (size.width === undefined || size.height === undefined) {\n if (!(content instanceof PathElement)) {\n size.width = size.width || 50;\n size.height = size.height || 50;\n }\n if (content.actualSize.width && content.actualSize.height) {\n return content.actualSize;\n }\n else {\n content.measure(new Size());\n size.width = size.width || content.desiredSize.width;\n size.height = size.height || content.desiredSize.height;\n }\n if (node.maxWidth !== undefined) {\n size.width = Math.min(size.width, node.maxWidth);\n }\n if (node.maxHeight !== undefined) {\n size.height = Math.min(size.height, node.maxHeight);\n }\n if (node.minWidth !== undefined) {\n size.width = Math.max(size.width, node.minWidth);\n }\n if (node.minHeight !== undefined) {\n size.height = Math.max(size.height, node.minHeight);\n }\n }\n return size;\n };\n /** @private */\n BpmnDiagrams.prototype.initBPMNContent = function (content, node, diagram) {\n var shape = node.shape;\n var bpmnShape = node.shape.shape;\n if (bpmnShape === 'Event') {\n content = this.getBPMNEventShape(node, shape.event);\n }\n if (bpmnShape === 'Gateway') {\n content = this.getBPMNGatewayShape(node);\n }\n if (bpmnShape === 'DataObject') {\n content = this.getBPMNDataObjectShape(node);\n }\n if (bpmnShape === 'Message' || bpmnShape === 'DataSource') {\n content = this.getBPMNShapes(node);\n }\n //848061-BPMN Group shape to be function Like Subprocess Node\n if (bpmnShape === 'Group') {\n //854195 - bpmn group serialization issue\n content = this.getBPMNGroup(node, diagram);\n content.style.strokeDashArray = '2 2 6 2';\n content.cornerRadius = 10;\n }\n if (bpmnShape === 'Activity') {\n content = this.getBPMNActivityShape(node);\n }\n //Task 866412: Should revamp BPMN text annotation node.\n if (bpmnShape === 'TextAnnotation') {\n if (node.parentObj instanceof Diagram || node.parentObj instanceof Lane) {\n content = this.getBpmnTextAnnotationShape(node, node.shape, diagram);\n }\n else {\n content = this.getBpmnTextAnnotationSymbol(node, node.shape, diagram);\n }\n }\n return content;\n };\n BpmnDiagrams.prototype.getBpmnTextAnnotationShape = function (textAnnotation, bpmnTextAnnotation, diagram) {\n var annotationsContainer = new Canvas();\n annotationsContainer.measureChildren = false;\n annotationsContainer.offsetX = textAnnotation.offsetX;\n annotationsContainer.offsetY = textAnnotation.offsetY;\n annotationsContainer.float = true;\n annotationsContainer.id = textAnnotation.id + \"_textannotation\";\n annotationsContainer.style.strokeColor = 'transparent';\n annotationsContainer.style.fill = 'transparent';\n annotationsContainer.relativeMode = 'Object';\n annotationsContainer.rotateAngle = 0;\n var width = textAnnotation.width;\n var height = textAnnotation.height;\n var bounds = new Rect(0, 0, 0, 0);\n if (width !== 0 && height !== 0) {\n bounds = new Rect(textAnnotation.offsetX - width / 2, textAnnotation.offsetY - height / 2, width, height);\n }\n var oldIsProtectedOnChange = diagram.isProtectedOnChange;\n diagram.isProtectedOnChange = false;\n this.setAnnotationPath(bounds, annotationsContainer, textAnnotation, bpmnTextAnnotation, bpmnTextAnnotation.textAnnotation.textAnnotationDirection, diagram);\n diagram.isProtectedOnChange = oldIsProtectedOnChange;\n return annotationsContainer;\n };\n //Task 866412: Should revamp BPMN text annotation node. To render text annotation in symbol palette.\n BpmnDiagrams.prototype.getBpmnTextAnnotationSymbol = function (annotation, bpmnTextAnnotation, diagram) {\n var data = 'M33.33,15 L0,43 M39.33,0 L33.33,0 L33.33,30 L39.33,30 M60,0';\n if (bpmnTextAnnotation.textAnnotation.textAnnotationDirection === 'Top') {\n data = 'M15,33.33 L43,0 M0,39.33 L0,33.33 L30,33.33 L30,39.33 M0,60';\n }\n else if (bpmnTextAnnotation.textAnnotation.textAnnotationDirection === 'Right') {\n data = 'M6,15 L39.33,43 M0,0 L6,0 L6,30 L0,30 M-20,0';\n }\n else if (bpmnTextAnnotation.textAnnotation.textAnnotationDirection === 'Bottom') {\n data = 'M15,6 L43,39.33 M0,0 L0,6 L30,6 L30,0 M0,-20';\n }\n var path = new PathElement();\n path.data = data;\n path.style.fill = 'transparent';\n return path;\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNShapes = function (node) {\n var bpmnShape = new PathElement();\n //set style\n this.setStyle(bpmnShape, node);\n if ((node.constraints & NodeConstraints.Shadow) !== 0) {\n bpmnShape.shadow = node.shadow;\n }\n var bpmnShapeData = getBpmnShapePathData(node.shape.shape);\n bpmnShape.data = bpmnShapeData;\n bpmnShape.id = node.id + '_' + node.shape.shape;\n if (node.width !== undefined && node.height !== undefined) {\n bpmnShape.width = node.width;\n bpmnShape.height = node.height;\n }\n return bpmnShape;\n };\n //854195 - Method to add the children as canvas in the Bpmn group node container\n /** @private */\n BpmnDiagrams.prototype.getBPMNGroup = function (node, diagram) {\n var group = new Canvas();\n group.id = node.id + '_group';\n if (!group.children) {\n group.children = [];\n }\n var groupShapeObj = (node.shape.group);\n if (node.shape.group) {\n for (var i = 0; i < groupShapeObj.children.length; i++) {\n var child = diagram.nameTable[groupShapeObj.children[parseInt(i.toString(), 10)]];\n group.children.push(child.wrapper);\n }\n }\n group.width = node.width;\n group.height = node.height;\n return group;\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNGatewayShape = function (node) {\n var gatewayshape = new Canvas();\n //childNode0\n var gatewayNode = new PathElement();\n gatewayNode.id = node.id + '_0_gateway';\n gatewayNode.offsetX = node.offsetX;\n gatewayNode.offsetY = node.offsetY;\n gatewayNode.data = 'M 40 20 L 20 40 L 0 20 L 20 0 L 40 20 Z';\n this.setStyle(gatewayNode, node);\n //childNode1\n var gatewayTypeNode = new PathElement();\n gatewayTypeNode.id = node.id + '_1_gatewayType';\n //set style - opacity\n gatewayTypeNode.style.opacity = node.style.opacity;\n gatewayTypeNode.style.strokeColor = node.style.strokeColor;\n gatewayTypeNode.horizontalAlignment = 'Center';\n gatewayTypeNode.verticalAlignment = 'Center';\n gatewayTypeNode.relativeMode = 'Object';\n var shapeType = node.shape.gateway;\n //let gatewayTypeNodeShapeData: string;\n var gatewayTypeNodeShapeData = getBpmnGatewayShapePathData(shapeType.type);\n if (shapeType.type === 'EventBased' || shapeType.type === 'ExclusiveEventBased' || shapeType.type === 'ParallelEventBased') {\n gatewayTypeNode.style.fill = 'white';\n }\n else {\n gatewayTypeNode.style.fill = 'black';\n }\n gatewayTypeNode.data = gatewayTypeNodeShapeData;\n // append child and set style\n gatewayshape.style.fill = 'transparent';\n gatewayshape.style.strokeColor = 'transparent';\n gatewayshape.style.strokeWidth = 0;\n gatewayshape.children = [gatewayNode, gatewayTypeNode];\n var size = this.getSize(node, gatewayNode);\n this.setSizeForBPMNGateway(node.shape.gateway, gatewayshape, size.width, size.height);\n return gatewayshape;\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNDataObjectShape = function (node) {\n var dataObjectshape = new Canvas();\n var shape = node.shape.dataObject;\n //childNode0\n var dataobjNode = new PathElement();\n dataobjNode.id = node.id + '_0_dataobj';\n dataobjNode.data = 'M29.904,5 L7.853,5 L7.853,45 L42.147,45 L42.147,17.242,L29.932,5,L29.932,17.242,L42.147,17.242';\n var size = this.getSize(node, dataobjNode);\n dataobjNode.width = size.width;\n dataobjNode.height = size.height;\n this.setStyle(dataobjNode, node);\n //childNode1\n var dataobjTypeNode = new PathElement();\n dataobjTypeNode.id = node.id + '_1_type';\n dataobjTypeNode.width = 25;\n dataobjTypeNode.height = 20;\n dataobjTypeNode.margin.left = 5;\n dataobjTypeNode.margin.top = 5;\n dataobjTypeNode.data = 'M 3 9.4 l 6 0 v 2.4 l 3.6 -4 L 9 4 v 2.5 H 3 V 9.4 Z';\n //set style - opacity\n dataobjTypeNode.style.opacity = node.style.opacity;\n //childNode2\n var dataobjCollectionNode = new PathElement();\n dataobjCollectionNode.id = node.id + '_2_collection';\n dataobjCollectionNode.width = 7.5;\n dataobjCollectionNode.height = 15;\n dataobjCollectionNode.style.fill = 'black';\n dataobjCollectionNode.visible = true;\n dataobjCollectionNode.horizontalAlignment = 'Center';\n dataobjCollectionNode.verticalAlignment = 'Bottom';\n dataobjCollectionNode.relativeMode = 'Object';\n //set style - opacity\n dataobjCollectionNode.style.opacity = node.style.opacity;\n dataobjCollectionNode.data = 'M 0 0 L 0.1 0 L 0.1 2 L 0 2 Z M 0.4 0 L 0.6 0 L 0.6 2 L0.4 2 Z M 0.9 0 L 1 0 L 1 2 L 0.9 2 Z';\n switch (shape.type) {\n case 'None':\n dataobjTypeNode.visible = false;\n break;\n case 'Input':\n dataobjTypeNode.style.fill = 'white';\n break;\n case 'Output':\n dataobjTypeNode.style.fill = 'black';\n break;\n }\n if (shape.collection === false) {\n dataobjCollectionNode.visible = false;\n }\n //append child and set style\n dataObjectshape.style.fill = 'transparent';\n dataObjectshape.style.strokeColor = 'transparent';\n dataObjectshape.style.strokeWidth = 0;\n dataObjectshape.children = [dataobjNode, dataobjTypeNode, dataobjCollectionNode];\n return dataObjectshape;\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNTaskShape = function (node) {\n var shape = node.shape.activity;\n var task = shape.task;\n var taskShapes = new Canvas();\n //childNode0\n var taskNode = new DiagramElement();\n taskNode.cornerRadius = 10;\n var size = this.getSize(node, taskNode);\n taskNode.id = node.id + '_0_task';\n taskNode.width = size.width;\n taskNode.height = size.height;\n this.setStyle(taskNode, node);\n // if task as call\n if ((task.call !== undefined) && task.call === true) {\n taskNode.style.strokeWidth = 4;\n }\n taskShapes.width = size.width;\n taskShapes.height = size.height;\n var childCount = this.getTaskChildCount(node);\n var x;\n var childSpace = childCount * 12;\n var area = size.width / 2 - childSpace;\n if (childCount === 1) {\n x = area + 8;\n }\n else {\n x = area + (childCount - 1) * 8;\n }\n //childNode1\n var taskTypeNode = new PathElement();\n if (task.type === 'Receive' || task.type === 'Send') {\n taskTypeNode.width = 18;\n taskTypeNode.height = 16;\n }\n else if (task.type === 'Manual') {\n taskTypeNode.width = 16;\n taskTypeNode.height = 11;\n }\n else {\n taskTypeNode.width = 20;\n taskTypeNode.height = 20;\n }\n taskTypeNode.id = node.id + '_1_tasktType';\n taskTypeNode.margin.left = 5;\n taskTypeNode.margin.top = 5;\n var taskTypeNodeData = getBpmnTaskShapePathData(task.type);\n taskTypeNode.data = taskTypeNodeData;\n taskTypeNode.style.fill = 'transparent';\n taskTypeNode.style.opacity = node.style.opacity;\n if (task.type === 'Send') {\n taskTypeNode.style.fill = 'black';\n }\n // append child and set style\n taskShapes.style.fill = 'transparent';\n taskShapes.style.strokeColor = 'transparent';\n taskShapes.style.strokeWidth = 0;\n taskShapes.children = [taskNode, taskTypeNode];\n //childnode for service\n if (task.type === 'Service') {\n var taskTypeNodeService = new PathElement();\n taskTypeNodeService.id = node.id + '_1_taskTypeService';\n taskTypeNodeService.data = taskTypeNodeData;\n taskTypeNodeService.margin.left = taskTypeNode.margin.left + 9;\n taskTypeNodeService.margin.top = taskTypeNode.margin.top + 9;\n taskTypeNodeService.style.fill = 'white';\n taskTypeNodeService.style.opacity = node.style.opacity;\n taskShapes.children.push(taskTypeNodeService);\n }\n // if task as loop\n var loopType = task.loop;\n var taskLoopNode = new PathElement(); //let childNode2data: string;\n var childNode2data = getBpmnLoopShapePathData(loopType);\n taskLoopNode.data = childNode2data;\n taskLoopNode.style.fill = 'black';\n if (loopType !== 'None') {\n taskLoopNode.visible = true;\n }\n else {\n taskLoopNode.visible = false;\n }\n if (childCount === 1) {\n x = area + 9;\n }\n //891296: Position of BPMN activity loop node is not proper while save and load\n taskLoopNode.margin.left = x - 3;\n if (taskLoopNode.visible === true) {\n x += 12 + 8;\n }\n taskLoopNode.width = 12;\n taskLoopNode.height = 12;\n taskLoopNode.margin.bottom = 5;\n taskLoopNode.id = node.id + '_2_loop';\n taskLoopNode.horizontalAlignment = 'Left';\n taskLoopNode.verticalAlignment = 'Bottom';\n taskLoopNode.setOffsetWithRespectToBounds(0, 1, 'Fraction');\n taskLoopNode.relativeMode = 'Point';\n taskLoopNode.style.fill = 'transparent';\n taskTypeNode.style.opacity = node.style.opacity;\n taskShapes.children.push(taskLoopNode);\n //if task as compensation\n var taskCompNode = new PathElement();\n taskCompNode = this.getBPMNCompensationShape(node, taskCompNode);\n if (task.compensation === true) {\n taskCompNode.visible = true;\n }\n else {\n taskCompNode.visible = false;\n }\n if (childCount === 1) {\n x = area + 9;\n }\n taskCompNode.margin.left = x - 3;\n x += 12 + 6;\n taskShapes.children.push(taskCompNode);\n return taskShapes;\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNEventShape = function (node, subEvent, sub, id) {\n var eventshape = new Canvas();\n var event;\n var trigger;\n var width;\n var height;\n id = id || node.id;\n var pathdata = 'M164.1884,84.6909000000001C156.2414,84.6909000000001,149.7764,78.2259000000001,149.7764,70.2769000000001' +\n 'C149.7764,62.3279000000001,156.2414,55.8629000000001,164.1884,55.8629000000001C172.1354,55.8629000000001,178.6024,' +\n '62.3279000000001,178.6024,70.2769000000001C178.6024,78.2259000000001,172.1354,84.6909000000001,164.1884,84.6909000000001';\n var shapeEvent = node.shape.event;\n if ((!isBlazor() && node.shape.shape === 'Event')) {\n event = shapeEvent.event;\n trigger = shapeEvent.trigger;\n }\n width = subEvent.width;\n height = subEvent.height;\n if (sub) {\n width = width || 20;\n height = height || 20;\n }\n else if (subEvent.width === undefined || subEvent.height === undefined) {\n var pathElement = new PathElement();\n pathElement.data = pathdata;\n var size = this.getSize(node, pathElement);\n width = size.width;\n height = size.height;\n }\n var shapeActivity = node.shape.activity;\n if ((!isBlazor() && node.shape.shape === 'Activity')) {\n var subProcess = shapeActivity.subProcess;\n event = subEvent.event;\n trigger = subEvent.trigger;\n }\n //childNode0\n var innerEvtNode = new PathElement();\n innerEvtNode.data = pathdata;\n innerEvtNode.id = id + '_0_event';\n innerEvtNode.width = width;\n innerEvtNode.height = height;\n innerEvtNode.horizontalAlignment = 'Center';\n innerEvtNode.verticalAlignment = 'Center';\n innerEvtNode.relativeMode = 'Object';\n this.setStyle(innerEvtNode, node);\n //childNode1\n var outerEvtNode = new PathElement();\n outerEvtNode.data = pathdata;\n outerEvtNode.id = id + '_1_event';\n outerEvtNode.style.gradient = node.style.gradient;\n outerEvtNode.horizontalAlignment = 'Center';\n outerEvtNode.verticalAlignment = 'Center';\n outerEvtNode.relativeMode = 'Object';\n // set style opacity & strokeColor\n outerEvtNode.style.strokeColor = node.style.strokeColor;\n outerEvtNode.style.opacity = node.style.opacity;\n //childNode2\n var triggerNode = new PathElement();\n var triggerNodeData = getBpmnTriggerShapePathData(trigger);\n triggerNode.data = triggerNodeData;\n triggerNode.id = id + '_2_trigger';\n triggerNode.horizontalAlignment = 'Center';\n triggerNode.verticalAlignment = 'Center';\n triggerNode.relativeMode = 'Object';\n // set style opacity & strokeColor\n triggerNode.style.strokeColor = node.style.strokeColor;\n triggerNode.style.opacity = node.style.opacity;\n switch (event) {\n case 'Start':\n outerEvtNode.visible = false;\n break;\n case 'NonInterruptingStart':\n innerEvtNode.style.strokeDashArray = '2 3';\n outerEvtNode.visible = false;\n break;\n case 'Intermediate':\n innerEvtNode.style.fill = node.style.fill;\n innerEvtNode.style.gradient = null;\n break;\n case 'NonInterruptingIntermediate':\n innerEvtNode.style.fill = node.style.fill;\n innerEvtNode.style.gradient = null;\n innerEvtNode.style.strokeDashArray = '2 3';\n outerEvtNode.style.strokeDashArray = '2 3';\n break;\n case 'ThrowingIntermediate':\n case 'End':\n innerEvtNode.style.fill = event !== 'End' ? node.style.fill : node.style.fill !== 'white' ? node.style.fill : 'black';\n innerEvtNode.style.gradient = null;\n triggerNode.style.fill = 'black';\n triggerNode.style.strokeColor = 'white';\n break;\n }\n //append child and set style\n eventshape.style.fill = 'transparent';\n eventshape.style.strokeColor = 'transparent';\n eventshape.style.strokeWidth = 0;\n eventshape.children = [innerEvtNode, outerEvtNode, triggerNode];\n this.setSizeForBPMNEvents(shapeEvent, eventshape, width, height);\n return eventshape;\n };\n BpmnDiagrams.prototype.setEventVisibility = function (node, canvas) {\n var event = node.shape.event.event;\n var innerEvtNode = canvas[0];\n var outerEvtNode = canvas[1];\n var triggerNode = canvas[2];\n switch (event) {\n case 'Start':\n outerEvtNode.visible = false;\n break;\n case 'NonInterruptingStart':\n innerEvtNode.style.strokeDashArray = '2 3';\n outerEvtNode.visible = false;\n break;\n }\n };\n BpmnDiagrams.prototype.setSubProcessVisibility = function (node) {\n var subProcess = node.shape.activity.subProcess;\n var eventLength = subProcess.events.length;\n var index = (node.shape.activity.subProcess.type === 'Transaction') ? 2 : 0;\n var elementWrapper = node.wrapper.children[0].children[0];\n if (subProcess.adhoc === false) {\n elementWrapper.children[3 + index + eventLength].visible = false;\n }\n if (subProcess.compensation === false) {\n elementWrapper.children[4 + index + eventLength].visible = false;\n }\n if (eventLength > 0) {\n for (var i = 0; i < eventLength; i++) {\n this.setEventVisibility(node, elementWrapper.children[2 + i].children);\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNSubProcessShape = function (node) {\n var subProcessShapes = new Canvas();\n var events;\n var event;\n var subprocessAdhoc = new PathElement();\n var subProcessEventsShapes = new Canvas();\n var subProcessLoopShapes = new PathElement();\n var shape = node.shape.activity;\n var subProcess = shape.subProcess;\n var subChildCount = this.getSubprocessChildCount(node);\n var x;\n var subprocessNode = new DiagramElement();\n subprocessNode.id = node.id + '_0_Subprocess';\n subprocessNode.style.fill = 'transparent';\n subprocessNode.cornerRadius = 10;\n var size = this.getSize(node, subprocessNode);\n subprocessNode.width = size.width;\n subprocessNode.height = size.height;\n subProcessShapes.children = [subprocessNode];\n if (shape.subProcess.type === 'Transaction') {\n this.getBPMNSubProcessTransaction(node, node.shape, subProcessShapes);\n }\n var iconSpace = 4;\n var subChildSpace = 12;\n var childSpace = subChildCount * subChildSpace;\n var area = size.width / 2;\n if (subChildCount === 1) {\n x = area - (subChildSpace * 0.5);\n }\n else {\n x = area - (childSpace / 2) - ((subChildCount - 1) * iconSpace) / 2;\n }\n //set style\n this.setStyle(subprocessNode, node);\n if ((node.constraints & NodeConstraints.Shadow) !== 0) {\n subProcessShapes.shadow = node.shadow;\n }\n var collapsedShape = new PathElement();\n collapsedShape.id = node.id + '_0_collapsed';\n collapsedShape.width = 12;\n collapsedShape.height = 12;\n collapsedShape.style.fill = 'black';\n collapsedShape.style.strokeColor = node.style.strokeColor;\n collapsedShape.margin.bottom = 5;\n collapsedShape.style.opacity = node.style.opacity;\n collapsedShape.horizontalAlignment = 'Left';\n collapsedShape.verticalAlignment = 'Bottom';\n collapsedShape.setOffsetWithRespectToBounds(0, 1, 'Fraction');\n collapsedShape.relativeMode = 'Point';\n collapsedShape.data = getBpmnShapePathData('collapsedShape');\n collapsedShape.margin.left = x;\n if (subProcess.collapsed === true && !subProcess.processes) {\n collapsedShape.visible = true;\n }\n else {\n collapsedShape.visible = false;\n }\n if (collapsedShape.visible === true) {\n x += subChildSpace + iconSpace;\n }\n subProcessShapes.children.push(collapsedShape);\n if (subProcess.type === 'Event') {\n subprocessNode.style.strokeWidth = 1;\n subprocessNode.style.strokeDashArray = '2 2';\n events = subProcess.events;\n for (var i = 0; i < events.length; i++) {\n event = events[parseInt(i.toString(), 10)];\n this.getBPMNSubEvent(event, node, subProcessShapes);\n }\n }\n // set loop for subprocess\n subProcessLoopShapes = this.getBPMNSubProcessLoopShape(node);\n if (subChildCount === 1) {\n x = area - 6;\n }\n subProcessLoopShapes.margin.left = x;\n if (subProcessLoopShapes.visible === true) {\n x += subChildSpace + iconSpace;\n }\n subProcessLoopShapes.style.opacity = node.style.opacity;\n subProcessShapes.children.push(subProcessLoopShapes);\n // set boundary for subprocess\n subprocessNode.id = node.id + '_boundary';\n if (subProcess.boundary === 'Default') {\n subprocessNode.style.strokeWidth = 1;\n subprocessNode.style.strokeDashArray = '1 0';\n }\n if (subProcess.boundary === 'Call') {\n subprocessNode.style.strokeWidth = 4;\n subprocessNode.style.strokeDashArray = '1 0';\n }\n if (subProcess.boundary === 'Event') {\n subprocessNode.style.strokeWidth = 1;\n subprocessNode.style.strokeDashArray = '2 2';\n }\n //set adhoc for subprocess\n subprocessAdhoc = this.getBPMNAdhocShape(node, subprocessAdhoc, subProcess);\n if (subChildCount === 1) {\n x = area - 6;\n }\n subprocessAdhoc.margin.left = x;\n if (subprocessAdhoc.visible === true) {\n x += subChildSpace + iconSpace;\n }\n subprocessAdhoc.style.opacity = node.style.opacity;\n subProcessShapes.children.push(subprocessAdhoc);\n //set compensation for subprocess\n var subprocessComp = new PathElement();\n if (subProcess.compensation === true) {\n subprocessComp.visible = true;\n }\n else {\n subprocessComp.visible = false;\n }\n subprocessComp = this.getBPMNCompensationShape(node, subprocessComp);\n if (subChildCount === 1) {\n x = area - 6;\n }\n subprocessComp.margin.left = x;\n if (subprocessComp.visible === true) {\n x += subChildSpace + iconSpace;\n }\n subprocessComp.style.opacity = node.style.opacity;\n subProcessShapes.children.push(subprocessComp);\n //set style for subprocess\n subProcessShapes.style.strokeColor = 'transparent';\n subProcessShapes.style.strokeWidth = 0;\n subProcessShapes.style.fill = 'transparent';\n return subProcessShapes;\n };\n BpmnDiagrams.prototype.getBPMNSubEvent = function (event, node, container, id) {\n container.children = container.children || [];\n //let eventContainer: Canvas;\n var eventContainer = this.getBPMNEventShape(node, event, true, id);\n this.getBPMNSubprocessEvent(node, eventContainer, event);\n eventContainer.id = id || (node.id + '_subprocessEvents');\n eventContainer.width = event.width || 20;\n eventContainer.height = event.height || 20;\n // set offset for subevents\n eventContainer.setOffsetWithRespectToBounds(event.offset.x, event.offset.y, 'Fraction');\n eventContainer.relativeMode = 'Point';\n //set margin for subevents\n eventContainer.margin = event.margin;\n //set alignment for subevents\n eventContainer.horizontalAlignment = event.horizontalAlignment;\n eventContainer.verticalAlignment = event.verticalAlignment;\n // set style for subevent\n eventContainer.style.fill = 'transparent';\n eventContainer.style.strokeColor = 'transparent';\n eventContainer.style.strokeWidth = 0;\n container.children.push(eventContainer);\n };\n BpmnDiagrams.prototype.getBPMNSubProcessTransaction = function (node, shape, container) {\n var shapeWidth = container.children[0].width;\n var shapeHeight = container.children[0].height;\n var innerRect = new DiagramElement();\n innerRect.margin = { left: 3, right: 0, top: 3, bottom: 0 };\n innerRect.id = node.id + '_0_Subprocess_innnerRect';\n innerRect.cornerRadius = 10;\n innerRect.width = shapeWidth - 6;\n //EJ2-824711 - Fill color is not applied properly for BPMN transaction subProcess.\n innerRect.style.fill = 'transparent';\n innerRect.height = shapeHeight - 6;\n container.children.push(innerRect);\n var transactionEvents = new Canvas();\n transactionEvents.id = node.id + '_transaction_events';\n transactionEvents.style.gradient = node.style.gradient;\n var transaction = shape.activity.subProcess.transaction;\n this.getBPMNSubEvent(transaction.success, node, transactionEvents, node.id + '_success');\n this.getBPMNSubEvent(transaction.cancel, node, transactionEvents, node.id + '_cancel');\n this.getBPMNSubEvent(transaction.failure, node, transactionEvents, node.id + '_failure');\n this.updateDiagramContainerVisibility(transactionEvents.children[0], transaction.success.visible);\n this.updateDiagramContainerVisibility(transactionEvents.children[1], transaction.cancel.visible);\n this.updateDiagramContainerVisibility(transactionEvents.children[2], transaction.failure.visible);\n transactionEvents.float = true;\n transactionEvents.width = shapeWidth;\n transactionEvents.height = shapeHeight;\n transactionEvents.style.fill = transactionEvents.style.strokeColor = 'transparent';\n container.children.push(transactionEvents);\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNSubProcessLoopShape = function (node) {\n var shape = node.shape.activity;\n var loopType;\n var subprocessLoop = new PathElement();\n var subprocessLoopData;\n var subProcess = shape.subProcess;\n // eslint-disable-next-line prefer-const\n loopType = subProcess.loop;\n // eslint-disable-next-line prefer-const\n subprocessLoopData = getBpmnLoopShapePathData(loopType);\n if (loopType !== 'None') {\n subprocessLoop.visible = true;\n }\n else {\n subprocessLoop.visible = false;\n }\n subprocessLoop.id = node.id + '_loop';\n subprocessLoop.data = subprocessLoopData;\n subprocessLoop.style.fill = 'black';\n subprocessLoop.width = 12;\n subprocessLoop.height = 12;\n subprocessLoop.horizontalAlignment = 'Left';\n subprocessLoop.verticalAlignment = 'Bottom';\n subprocessLoop.setOffsetWithRespectToBounds(0, 1, 'Fraction');\n subprocessLoop.relativeMode = 'Point';\n subprocessLoop.margin.bottom = 5;\n subprocessLoop.style.fill = 'transparent';\n subprocessLoop.style.strokeColor = node.style.strokeColor;\n return subprocessLoop;\n };\n /** @private */\n BpmnDiagrams.prototype.drag = function (obj, tx, ty, diagram) {\n var node = diagram.nameTable[(obj).processId];\n if (obj.margin.top + ty >= 0) {\n diagram.nodePropertyChange(obj, {}, { margin: { top: obj.margin.top + ty } });\n }\n if (obj.margin.left + tx >= 0) {\n diagram.nodePropertyChange(obj, {}, { margin: { left: obj.margin.left + tx } });\n }\n //const diffX: number = 0;\n //const diffY: number = 0;\n var bound = this.getChildrenBound(node, obj.id, diagram);\n this.updateSubProcessess(bound, obj, diagram);\n node.wrapper.measure(new Size(undefined, undefined));\n node.wrapper.arrange(node.wrapper.desiredSize);\n diagram.refreshCanvasLayers();\n diagram.updateSelector();\n this.updateDocks(obj, diagram);\n };\n /** @private */\n BpmnDiagrams.prototype.dropBPMNchild = function (target, source, diagram) {\n if (source && source.shape.type === 'Bpmn' && target.shape.type === 'Bpmn'\n && (!isBlazor() && source.shape.shape !== 'TextAnnotation')) {\n var subProcess = diagram.nameTable[target.id].shape.activity.subProcess;\n if (diagram.currentSymbol && target.shape.type === 'Bpmn' && !subProcess.collapsed) {\n source.processId = target.id;\n return;\n }\n subProcess.processes = subProcess.processes || [];\n if (subProcess.processes && subProcess.processes.indexOf(source.id) === -1 && !subProcess.collapsed) {\n subProcess.processes.push(source.id);\n // To arrange the process based on zIndex, which cause issue in save and load.\n if (subProcess.processes.length > 1) {\n this.sortProcessOrder(subProcess.processes, diagram);\n }\n var redoElement = cloneObject(source);\n var sources = diagram.nameTable[source.id].wrapper;\n var targetWrapper = diagram.nameTable[target.id].wrapper;\n sources.margin.top = (sources.offsetY - (sources.actualSize.height / 2))\n - (target.offsetY - (target.actualSize.height / 2));\n sources.margin.left = (sources.offsetX - (sources.actualSize.width / 2))\n - (target.offsetX - (target.actualSize.width / 2));\n sources.margin.top = (sources.margin.top < 0) ? 0 : sources.margin.top;\n sources.margin.left = (sources.margin.left < 0) ? 0 : sources.margin.left;\n diagram.nameTable[source.id].processId = target.id;\n targetWrapper.children.push(diagram.nameTable[source.id].wrapper);\n //To identify the processess added at runtime.\n diagram.nameTable[source.id].wrapper.isDroppedProcess = true;\n var bound = this.getChildrenBound(target, source.id, diagram);\n this.updateSubProcessess(bound, source, diagram);\n targetWrapper.measure(new Size(undefined, undefined));\n targetWrapper.arrange(targetWrapper.desiredSize);\n diagram.refreshCanvasLayers();\n diagram.updateSelector();\n // 908136: Node goes behind the subprocess and the connector connected to it is destroyed Issue Fix by commenting these lines\n // let edges: string[] = [];\n // edges = edges.concat((source as Node).outEdges, (source as Node).inEdges);\n // for (let i: number = edges.length - 1; i >= 0; i--) {\n // if (diagram.bpmnModule.bpmnTextAnnotationConnector.indexOf(diagram.nameTable[edges[parseInt(i.toString(), 10)]])\n // === -1) {\n // diagram.remove(diagram.nameTable[edges[parseInt(i.toString(), 10)]]);\n // }\n // }\n var obj = cloneObject(source);\n var entry = {\n type: 'PositionChanged', undoObject: { nodes: [redoElement] },\n redoObject: { nodes: [obj] }, category: 'Internal'\n };\n diagram.addHistoryEntry(entry);\n if (diagram.mode === 'SVG') {\n if (source.zIndex < target.zIndex) {\n diagram.updateProcesses(source);\n this.updateSubprocessNodeIndex(source, diagram, target);\n }\n }\n this.updateDocks(source, diagram);\n }\n }\n };\n BpmnDiagrams.prototype.sortProcessOrder = function (processes, diagram) {\n // Sort the process array based on node zIndex\n processes.sort(function (a, b) { return diagram.nameTable[\"\" + a].zIndex - diagram.nameTable[\"\" + b].zIndex; });\n };\n BpmnDiagrams.prototype.updateIndex = function (diagram, source) {\n //let processNode: Node;\n var processNode = source;\n var nodeindex = diagram.getIndex(processNode, processNode.id);\n diagram.nodes.splice(Number(nodeindex), 1);\n processNode.zIndex = diagram.nodes[diagram.nodes.length - 1].zIndex + 1;\n diagram.nodes.push(processNode);\n };\n BpmnDiagrams.prototype.updateSubprocessNodeIndex = function (source, diagram, target) {\n if (source.shape.activity.subProcess.processes\n && source.shape.activity.subProcess.processes.length > 0) {\n for (var i = 0; i < source.shape.activity.subProcess.processes.length; i++) {\n this.updateIndex(diagram, source);\n var processes = source.shape.activity.subProcess.processes[parseInt(i.toString(), 10)];\n if (diagram.nameTable[\"\" + processes].shape.activity.subProcess.processes.length > 0) {\n this.updateSubprocessNodeIndex(diagram.nameTable[\"\" + processes], diagram, target);\n }\n else {\n var node = diagram.nameTable[source.shape.activity.subProcess.processes[parseInt(i.toString(), 10)]];\n this.updateIndex(diagram, node);\n }\n }\n }\n else {\n this.updateIndex(diagram, source);\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateDocks = function (obj, diagram) {\n if (obj.shape.type === 'Bpmn' && obj.shape.activity.subProcess.processes &&\n !obj.shape.activity.subProcess.collapsed) {\n var processTable = obj.shape.activity.subProcess.processes;\n for (var _i = 0, processTable_1 = processTable; _i < processTable_1.length; _i++) {\n var i = processTable_1[_i];\n var actualObject = diagram.nameTable[\"\" + i];\n if (actualObject) {\n diagram.updateConnectorEdges(actualObject);\n actualObject.wrapper.measure(new Size(actualObject.wrapper.width, actualObject.wrapper.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n if (actualObject.shape.activity.subProcess.processes\n && actualObject.shape.activity.subProcess.processes.length) {\n this.updateDocks(actualObject, diagram);\n }\n }\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.removeBpmnProcesses = function (currentObj, diagram) {\n var element = diagram.nameTable[currentObj.processId];\n if (currentObj.shape.type === 'Bpmn' && currentObj.shape.activity.subProcess.processes &&\n currentObj.shape.activity.subProcess.processes.length > 0) {\n var processes = currentObj.shape.activity.subProcess.processes;\n for (var j = processes.length - 1; j >= 0; j--) {\n diagram.remove(diagram.nameTable[processes[parseInt(j.toString(), 10)]]);\n }\n }\n if (element) {\n diagram.removeDependentConnector(currentObj);\n var processes = element.shape.activity.subProcess.processes;\n this.removeChildFromBPMN(element.wrapper, currentObj.id, diagram, true);\n var processIndex = processes.indexOf(currentObj.id);\n processes.splice(processIndex, 1);\n }\n };\n /** @private */\n BpmnDiagrams.prototype.removeChildFromBPMN = function (wrapper, name, diagram, isDelete) {\n for (var _i = 0, _a = wrapper.children; _i < _a.length; _i++) {\n var i = _a[_i];\n if (i.id === name) {\n wrapper.children.splice(wrapper.children.indexOf(i), 1);\n if (!i.isDroppedProcess && !isDelete) {\n // To remove the child node from subprocess to diagram in DOM.\n this.removeGElement(i.id, diagram);\n }\n }\n else if (i.children) {\n this.removeChildFromBPMN(i, name, diagram, isDelete);\n }\n }\n };\n //Bug 858761: Default Tooltip of sub-process node is not positioned properly after drag and drop the child of subprocess in diagram.\n // To remove the child node from subprocess to diagram in DOM.\n BpmnDiagrams.prototype.removeGElement = function (id, diagram) {\n var element = document.getElementById(id + '_groupElement');\n var diagramLayer = document.getElementById(diagram.element.id + '_diagramLayer');\n var parent = element.parentElement;\n parent.removeChild(element);\n diagramLayer.appendChild(element);\n var node = diagram.nameTable[\"\" + id];\n var subProcess = diagram.nameTable[\"\" + node.processId];\n var beforeIndex = node.zIndex + 1;\n var getNode = this.getNode(beforeIndex, diagram);\n if (getNode.length > 0) {\n var neighborElement_1 = document.getElementById(getNode[0].id + '_groupElement');\n var index = Array.from(diagramLayer.children).findIndex(function (child) { return child === neighborElement_1; });\n var domIndex = index !== -1 ? index : 1;\n // 889550: issue with dragging process nodes of the sub process\n // Remove the adjacent element of the node which z index is lessthan subprocess z index\n if (node.zIndex < subProcess.zIndex) {\n diagramLayer.children[parseInt(domIndex.toString(), 10)].insertAdjacentElement('beforebegin', element);\n }\n }\n };\n BpmnDiagrams.prototype.getNode = function (index, diagram) {\n var getNode = diagram.nodes.filter(function (x) { return x.zIndex === index; });\n if (getNode.length === 0 && index > 0) {\n return this.getNode(index - 1, diagram);\n }\n return getNode;\n };\n /** @private */\n BpmnDiagrams.prototype.removeProcess = function (id, diagram) {\n var node = diagram.nameTable[\"\" + id];\n if (node) {\n var parent_1 = diagram.nameTable[node.processId];\n if (parent_1 && parent_1.shape.type === 'Bpmn') {\n var processes = parent_1.shape.activity.subProcess.processes;\n diagram.removeDependentConnector(node);\n this.removeChildFromBPMN(parent_1.wrapper, id, diagram, true);\n var processIndex = processes.indexOf(id);\n processes.splice(processIndex, 1);\n node.processId = '';\n diagram.refreshDiagramLayer();\n diagram.updateSelector();\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.addProcess = function (process, parentId, diagram) {\n //let id: string;\n process.id = process.id || randomId();\n var id = process.id;\n var node = diagram.nameTable[\"\" + id];\n if (!node) {\n diagram.add(process);\n }\n process.processId = parentId;\n var parentNode = diagram.nameTable[\"\" + parentId];\n var subProcess = parentNode.shape.activity.subProcess;\n if (node && parentNode && parentNode.shape.type === 'Bpmn' && node.shape.type === 'Bpmn' &&\n subProcess.processes) {\n node.processId = parentId;\n var processes = parentNode.shape.activity.subProcess.processes;\n if (processes.indexOf(id) < 0) {\n processes.push(id);\n }\n parentNode.wrapper.children.push(node.wrapper);\n parentNode.wrapper.measure(new Size());\n parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);\n diagram.bpmnModule.updateDocks(parentNode, diagram);\n diagram.refreshDiagramLayer();\n if (diagram.mode === 'SVG' && (node.shape && node.shape.activity\n && !node.shape.activity.subProcess.processes)) {\n var child = getDiagramElement(parentId + '_groupElement');\n child.appendChild(getDiagramElement(process.id + '_groupElement'));\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.getChildrenBound = function (node, excludeChild, diagram) {\n var processes = node.shape.activity.subProcess.processes;\n var bound;\n if (processes && processes.length) {\n for (var _i = 0, processes_1 = processes; _i < processes_1.length; _i++) {\n var i = processes_1[_i];\n if (excludeChild !== i) {\n if (!bound) {\n bound = diagram.nameTable[\"\" + i].wrapper.bounds;\n }\n else {\n bound = diagram.nameTable[\"\" + i].wrapper.bounds.uniteRect(bound);\n }\n }\n }\n }\n return bound || diagram.nameTable[\"\" + excludeChild].wrapper.bounds;\n };\n /** @private */\n BpmnDiagrams.prototype.updateSubProcessess = function (bound, obj, diagram) {\n var diffX;\n var diffY;\n var node = diagram.nameTable[obj.processId];\n var right;\n var bottom;\n var pivot = { x: 0.5, y: 0.5 };\n if ((node.wrapper.bounds.left + obj.margin.left + obj.width) > (node.wrapper.bounds.right)) {\n right = true;\n }\n if ((node.wrapper.bounds.top + obj.margin.top + obj.height) > (node.wrapper.bounds.bottom)) {\n bottom = true;\n }\n if (right) {\n pivot.x = 0;\n }\n if (bottom) {\n pivot.y = 0;\n }\n var actualSize = node.wrapper.actualSize;\n if (right) {\n diffX = (obj.wrapper.margin.left + obj.wrapper.bounds.width) / actualSize.width;\n }\n if (bottom) {\n diffY = (obj.wrapper.margin.top + obj.wrapper.bounds.height) / actualSize.height;\n }\n if (diffX > 0 || diffY > 0) {\n diagram.commandHandler.scale(diagram.nameTable[obj.processId], diffX || 1, diffY || 1, pivot);\n }\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNCompensationShape = function (node, compensationNode) {\n compensationNode.id = node.id + '_0_compensation';\n compensationNode.width = 12;\n compensationNode.height = 12;\n compensationNode.margin.bottom = 5;\n compensationNode.style.fill = 'transparent';\n compensationNode.style.strokeColor = node.style.strokeColor;\n compensationNode.horizontalAlignment = 'Left';\n compensationNode.verticalAlignment = 'Bottom';\n compensationNode.relativeMode = 'Object';\n compensationNode.data = 'M 22.462 18.754 l -6.79 3.92 l 6.79 3.92 V 22.89 l 6.415 3.705 v -7.841 l -6.415 3.705 V 18.754 Z' +\n ' M 28.331 19.701 v 5.947 l -5.149 -2.973 L 28.331 19.701 Z M 21.916 25.647 l -5.15 -2.973 l 5.15 -2.973 V 25.647 Z' +\n ' M 22.275 12.674 c -5.513 0 -9.999 4.486 -9.999 9.999 c 0 5.514 4.486 10.001 9.999 10.001' +\n ' c 5.514 0 9.999 -4.486 9.999 -10.001 C 32.274 17.16 27.789 12.674 22.275 12.674 Z M 22.275 32.127 ' +\n ' c -5.212 0 -9.453 -4.241 -9.453 -9.454 c 0 -5.212 4.241 -9.453 9.453 -9.453 c 5.212 0 9.453 4.241 9.453 9.453' +\n ' C 31.728 27.887 27.487 32.127 22.275 32.127 Z';\n return compensationNode;\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNActivityShape = function (node) {\n var eventshape = new Canvas();\n var content;\n var shape = node.shape.activity;\n var task = shape.activity;\n var subProcess = shape.subProcess;\n var activityType = shape.activity;\n if (task === 'Task') {\n content = this.getBPMNTaskShape(node);\n }\n if (task === 'SubProcess' && subProcess) {\n content = this.getBPMNSubProcessShape(node);\n }\n content.id = task + node.id;\n eventshape.children = [content];\n eventshape.style.fill = 'transparent';\n eventshape.style.strokeColor = 'transparent';\n eventshape.style.strokeWidth = 0;\n return eventshape;\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNSubprocessEvent = function (node, subProcessEventsShapes, events) {\n var annotations;\n var ports;\n if (events.annotations.length !== 0) {\n for (var i = 0; i < events.annotations.length; i++) {\n var annot = events.annotations[parseInt(i.toString(), 10)];\n annotations = node.initAnnotationWrapper(annot);\n annotations.width = events.width;\n annotations.height = events.height;\n subProcessEventsShapes.children.push(annotations);\n }\n }\n if (events.ports.length !== 0) {\n for (var i = 0; i < events.ports.length; i++) {\n var port = events.ports[parseInt(i.toString(), 10)];\n ports = node.initPortWrapper(port);\n subProcessEventsShapes.children.push(ports);\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.getBPMNAdhocShape = function (node, adhocNode, subProcess) {\n adhocNode.id = node.id + '_0_adhoc';\n adhocNode.width = 12;\n adhocNode.height = 8;\n adhocNode.style.fill = 'black';\n adhocNode.style.strokeColor = node.style.strokeColor;\n adhocNode.margin.bottom = 5;\n adhocNode.horizontalAlignment = 'Left';\n adhocNode.verticalAlignment = 'Bottom';\n adhocNode.relativeMode = 'Object';\n adhocNode.data = 'M 49.832 76.811 v -2.906 c 0 0 0.466 -1.469 1.931 -1.5 c 1.465 -0.031 2.331 1.219 2.897 1.688 ' +\n 's 1.06 0.75 1.526 0.75 c 0.466 0 1.548 -0.521 1.682 -1.208 s 0.083 3.083 0.083 3.083 s -0.76 0.969 -1.859 0.969 ' +\n 'c -1.066 0 -1.865 -0.625 -2.464 -1.438 s -1.359 -0.998 -2.064 -0.906 C 50.598 75.467 49.832 76.811 49.832 76.811 Z';\n if (subProcess && subProcess.adhoc === true) {\n adhocNode.visible = true;\n }\n else {\n adhocNode.visible = false;\n }\n return adhocNode;\n };\n // /** @private */\n // public getTextAnnotationWrapper(node: NodeModel, id: string): TextElement {\n // if (node && node.shape.type === 'Bpmn') {\n // const shape: BpmnShapes = (node.shape as BpmnShape).shape;\n // if (shape === 'TextAnnotation') {\n // return node.wrapper.children[1] as TextElement;\n // }\n // }\n // return null;\n // }\n /**\n *\n * @private\n * To modify the text annotation path while dragging the node and set port offset based on dragging.\n */\n BpmnDiagrams.prototype.setAnnotationPath = function (sourceBounds, wrapper, node, bpmnShape, direction, diagram) {\n var pathElement = new PathElement();\n pathElement.id = wrapper.id + '_path';\n pathElement.width = node.width;\n pathElement.height = node.height;\n pathElement.style.fill = 'transparent';\n pathElement.style.strokeColor = ((node.style.strokeColor === 'transparent') ? 'black' : node.style.strokeColor);\n pathElement.style.opacity = node.style.opacity;\n pathElement.relativeMode = 'Object';\n pathElement.horizontalAlignment = 'Stretch';\n pathElement.verticalAlignment = 'Stretch';\n var pointPort = (node.ports.length > 0) ? node.ports[0] : new PointPort(node, 'ports', '', true);\n diagram.protectPropertyChange(true);\n node.ports = [pointPort];\n diagram.protectPropertyChange(false);\n switch (direction) {\n case 'Left':\n pathElement.data = 'M10,20 L0,20 L0,0 L10,0';\n pathElement.width = 10;\n pathElement.horizontalAlignment = 'Left';\n pointPort.offset = { x: 0.0, y: 0.5 };\n break;\n case 'Right':\n pathElement.data = 'M0,0 L10,0 L10,20 L0,20';\n pathElement.width = 10;\n pathElement.horizontalAlignment = 'Right';\n pointPort.offset =\n {\n x: 1.0,\n y: 0.5\n };\n break;\n case 'Top':\n pathElement.data = 'M20,10 L20,0 L0,0 L0,10';\n pathElement.height = 10.0;\n pathElement.verticalAlignment = 'Top';\n pointPort.offset =\n {\n x: 0.5,\n y: 0.0\n };\n break;\n case 'Bottom':\n pathElement.data = 'M0,0 L0,10 L20,10 L20,0';\n pathElement.height = 10;\n pathElement.verticalAlignment = 'Bottom';\n pointPort.offset =\n {\n x: 0.5,\n y: 1.0\n };\n break;\n default:\n //To check the text annotation has parent and update the path element.\n if (bpmnShape.textAnnotation.textAnnotationTarget !== '') {\n if (diagram.nameTable[bpmnShape.textAnnotation.textAnnotationTarget]) {\n var node2 = diagram.nameTable[bpmnShape.textAnnotation.textAnnotationTarget];\n node2.hasTextAnnotation = true;\n var wrapper2 = node2.wrapper;\n if (wrapper2 !== null) {\n var doubleValue = node2.width;\n var doubleValue2 = node2.height;\n var targetBounds = new Rect(0.0, 0.0, 0.0, 0.0);\n if (doubleValue !== 0.0 && doubleValue2 !== 0.0) {\n targetBounds = new Rect(node2.offsetX - doubleValue / 2, node2.offsetY - doubleValue2 / 2, doubleValue, doubleValue2);\n }\n this.setAnnotationPosition(targetBounds, node, sourceBounds, pathElement);\n }\n }\n }\n else if (bpmnShape.textAnnotation.textAnnotationTarget === '') {\n pathElement.data = 'M10,20 L0,20 L0,0 L10,0';\n pathElement.width = 10.0;\n pathElement.horizontalAlignment = 'Left';\n pointPort.offset = {\n x: 0.0,\n y: 0.5\n };\n }\n break;\n }\n wrapper.children = [];\n wrapper.children.push(pathElement);\n };\n //Task 866412: Should revamp BPMN text annotation node. To modifty the port offset and annotation path based on node bounds while dragging.\n BpmnDiagrams.prototype.setAnnotationPosition = function (targetBounds, annotation, annotationBounds, annotationPath) {\n var pointPort = annotation.ports[0];\n var position = { x: annotationBounds.x, y: annotationBounds.y };\n var rotateAngle = this.getAnnotationPathAngle(position, targetBounds);\n if (rotateAngle === 90) {\n annotationPath.data = 'M20,10 L20,0 L0,0 L0,10';\n annotationPath.height = 10.0;\n annotationPath.verticalAlignment = 'Top';\n pointPort.offset =\n {\n x: 0.5,\n y: 0.0\n };\n }\n else if (rotateAngle === 180) {\n annotationPath.data = 'M0,0 L10,0 L10,20 L0,20';\n annotationPath.width = 10.0;\n annotationPath.horizontalAlignment = 'Right';\n pointPort.offset =\n {\n x: 1.0,\n y: 0.5\n };\n }\n else if (rotateAngle === 0) {\n annotationPath.data = 'M10,20 L0,20 L0,0 L10,0';\n annotationPath.width = 10.0;\n annotationPath.horizontalAlignment = 'Left';\n pointPort.offset =\n {\n x: 0.0,\n y: 0.5\n };\n }\n else {\n annotationPath.data = 'M0,0 L0,10 L20,10 L20,0';\n annotationPath.height = 10.0;\n annotationPath.verticalAlignment = 'Bottom';\n pointPort.offset =\n {\n x: 0.5,\n y: 1.0\n };\n }\n };\n // /** @private */\n // public findInteractableObject(obj: ConnectorModel, diagram: Diagram): NodeModel | ConnectorModel {\n // if (obj.targetID) {\n // let targetNode: NodeModel = diagram.nameTable[obj.targetID];\n // if (targetNode.shape.type === 'Bpmn' && (targetNode.shape as BpmnShape).shape === 'TextAnnotation') {\n // return targetNode;\n // }\n // }\n // return obj;\n // }\n /** @private */\n BpmnDiagrams.prototype.getSubprocessChildCount = function (node) {\n var count = 0;\n var shape = node.shape.activity;\n //let loopType: string;\n var subProcess = shape.subProcess;\n var loopType = subProcess.loop;\n if (loopType !== undefined && loopType !== 'None') {\n count++;\n }\n if ((subProcess.compensation !== undefined) &&\n subProcess.compensation === true) {\n count++;\n }\n if ((subProcess.collapsed !== undefined) &&\n subProcess.collapsed === true) {\n count++;\n }\n if ((subProcess.adhoc !== undefined) &&\n subProcess.adhoc === true) {\n count++;\n }\n return count;\n };\n /** @private */\n BpmnDiagrams.prototype.getTaskChildCount = function (node) {\n var count = 0;\n var shape = node.shape.activity;\n var task = shape.task;\n if ((task.compensation !== undefined) &&\n task.compensation === true) {\n count++;\n }\n if ((task.loop !== undefined) &&\n task.loop !== 'None') {\n count++;\n }\n return count;\n };\n /** @private */\n BpmnDiagrams.prototype.setStyle = function (child, node) {\n //set style\n child.style.fill = node.style.fill;\n child.style.strokeColor = node.style.strokeColor;\n child.style.strokeWidth = node.style.strokeWidth;\n child.style.strokeDashArray = node.style.strokeDashArray;\n child.style.opacity = node.style.opacity;\n child.style.gradient = node.style.gradient;\n if ((node.constraints & NodeConstraints.Shadow) !== 0) {\n child.shadow = node.shadow;\n }\n };\n //End code conversion region\n //Update BPMN Shapes on NodePropertyChange\n //Start region\n /** @private */\n BpmnDiagrams.prototype.updateBPMN = function (changedProp, oldObject, actualObject, diagram) {\n var newShape = changedProp.shape || {};\n var elementWrapper = actualObject.wrapper.children[0];\n var actualShape = actualObject.shape.shape ||\n (actualObject.shape.bpmnShape);\n //Bug 892767: Unable to update BPMN text annotation direction dynamically\n //To update the text annotation direction and target dynamically.\n if (newShape.textAnnotation && actualShape === 'TextAnnotation') {\n if (newShape.textAnnotation.textAnnotationDirection !== undefined) {\n //Modify text annotation path based on text annotation direction\n this.setAnnotationPath(actualObject.wrapper.bounds, actualObject.wrapper.children[0], actualObject, actualObject.shape, actualObject.shape.textAnnotation.textAnnotationDirection, diagram);\n //Reset the id of path element\n actualObject.wrapper.children[0].children[0].id = actualObject.id + '_textannotation_path';\n var newValue = { ports: { 0: { offset: actualObject.ports[0].offset } } };\n diagram.nodePropertyChange(actualObject, {}, newValue);\n }\n if (newShape.textAnnotation.textAnnotationTarget !== undefined) {\n var sourceNode = diagram.nameTable[newShape.textAnnotation.textAnnotationTarget];\n if (sourceNode && sourceNode.shape.type === 'Bpmn') {\n var textAnnotationConnector = diagram.nameTable[actualObject.inEdges[0]];\n if (textAnnotationConnector) {\n //To modify the sourceID of text annotation connector\n textAnnotationConnector.sourceID = sourceNode.id;\n diagram.connectorPropertyChange(textAnnotationConnector, {}, { sourceID: sourceNode.id });\n }\n }\n else if (newShape.textAnnotation.textAnnotationTarget === '') {\n var textAnnotationConnector = diagram.nameTable[actualObject.inEdges[0]];\n if (textAnnotationConnector) {\n var oldParent = diagram.nameTable[oldObject.shape.textAnnotation.textAnnotationTarget];\n var index = oldParent.outEdges.indexOf(textAnnotationConnector.id);\n oldParent.outEdges.splice(index, 1);\n textAnnotationConnector.sourceID = '';\n diagram.connectorPropertyChange(textAnnotationConnector, {}, { sourceID: '' });\n }\n }\n }\n }\n var sizeChanged = changedProp.width !== undefined || changedProp.height !== undefined;\n if ((newShape.shape === 'Gateway') &&\n newShape.gateway) {\n this.removeBPMNElementFromDOM(actualObject, diagram);\n actualObject.wrapper.children[0] = this.getBPMNGatewayShape(actualObject);\n }\n else if ((newShape.shape === 'DataObject') &&\n newShape.dataObject) {\n this.removeBPMNElementFromDOM(actualObject, diagram);\n actualObject.wrapper.children[0] = this.getBPMNDataObjectShape(actualObject);\n }\n else if ((newShape.shape === 'Activity') &&\n newShape.activity) {\n this.removeBPMNElementFromDOM(actualObject, diagram);\n actualObject.wrapper.children[0] = this.getBPMNActivityShape(actualObject);\n }\n /**\n * EJ2-EJ2-60644 - Bpmn event fill color does not applied while changing event in runtime.\n */\n else if (((actualObject.shape.bpmnShape === 'Event' || actualObject.shape.shape === 'Event') || newShape.shape === 'Event') &&\n newShape.event) {\n this.removeBPMNElementFromDOM(actualObject, diagram);\n var shapeEvent = newShape.event;\n actualObject.wrapper.children[0] = this.getBPMNEventShape(actualObject, shapeEvent);\n }\n else if ((newShape.shape === 'Message') ||\n (newShape.shape === 'DataSource')) {\n this.removeBPMNElementFromDOM(actualObject, diagram);\n actualObject.wrapper.children[0] = this.getBPMNShapes(actualObject);\n //}\n // else if (newShape.shape === 'Group') {\n // actualObject.wrapper.children[0] = this.getBPMNGroup(actualObject, diagram);\n }\n else if (newShape.gateway !== undefined || (actualShape === 'Gateway' && sizeChanged)) {\n this.updateBPMNGateway(actualObject, changedProp);\n }\n else if (newShape.dataObject !== undefined || (actualShape === 'DataObject' && sizeChanged)) {\n this.updateBPMNDataObject(actualObject, changedProp, oldObject);\n }\n else if (newShape.activity !== undefined || (actualShape === 'Activity' && sizeChanged)) {\n this.updateBPMNActivity(actualObject, changedProp, oldObject, diagram);\n }\n else if (newShape.event !== undefined || (actualShape === 'Event' && sizeChanged)) {\n this.updateBPMNEvent(actualObject, changedProp, oldObject);\n }\n actualObject.wrapper.children[0].id = actualObject.wrapper.children[0].id || elementWrapper.id;\n if (changedProp.style) {\n updateStyle(changedProp.style, elementWrapper instanceof Container ? ((!isBlazor() && actualObject.shape.shape === 'Activity')) ?\n elementWrapper.children[0].children[0] :\n elementWrapper.children[0] : elementWrapper);\n if (changedProp.style && changedProp.style.strokeColor) {\n //EJ2-844052-BPMN nodes styles are not updated properly at runtime\n if (elementWrapper && elementWrapper.children !== undefined\n && elementWrapper.children.length > 0) {\n if (((!isBlazor() && actualObject.shape.shape === 'Activity')) &&\n actualObject.shape.activity.activity === 'SubProcess') {\n var child = elementWrapper.children[0];\n this.updateBPMNStyle(child, changedProp.style.strokeColor);\n }\n else if (((!isBlazor() && actualObject.shape.shape === 'Gateway')) ||\n ((!isBlazor() && actualObject.shape.shape === 'Event'))) {\n this.updateBPMNStyle(elementWrapper, changedProp.style.strokeColor);\n }\n }\n }\n if (changedProp.style && changedProp.style.opacity !== undefined) {\n this.updateBpmnChildOpacity(actualObject.wrapper, changedProp.style.opacity);\n }\n }\n };\n // To update the opacity of BPMN child\n BpmnDiagrams.prototype.updateBpmnChildOpacity = function (wrapper, opacity) {\n if (wrapper.children && wrapper.children.length > 0) {\n for (var i = 0; i < wrapper.children.length; i++) {\n var child = wrapper.children[parseInt(i.toString(), 10)];\n if (child.children) {\n this.updateBpmnChildOpacity(child, opacity);\n }\n if (!(child instanceof TextElement)) {\n child.style.opacity = opacity;\n }\n }\n }\n };\n /**\n * EJ2-60574 -BPMN shape do not get changed at runtime properly\n */\n BpmnDiagrams.prototype.removeBPMNElementFromDOM = function (actualObject, diagram) {\n for (var _i = 0, _a = diagram.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(actualObject.id + '_groupElement', elementId);\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNStyle = function (elementWrapper, changedProp) {\n for (var i = 0; i < elementWrapper.children.length; i++) {\n var child = elementWrapper.children[parseInt(i.toString(), 10)];\n updateStyle({ strokeColor: changedProp }, child);\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNGateway = function (node, changedProp) {\n var bpmnShape = node.shape;\n var elementWrapper = node.wrapper.children[0];\n if (bpmnShape) {\n updateStyle(node.style, elementWrapper.children[0]);\n var pathData = getBpmnGatewayShapePathData(bpmnShape.gateway.type);\n var dataobjTypeNode = this.updateGatewaySubType(elementWrapper, node, pathData);\n removeElement(elementWrapper.children[1].id);\n elementWrapper.children.splice(1, 1);\n elementWrapper.children.push(dataobjTypeNode);\n }\n if (changedProp.width !== undefined || changedProp.height !== undefined) {\n this.setSizeForBPMNGateway(node.shape.gateway, elementWrapper, changedProp.width || node.width, changedProp.height || node.height);\n }\n };\n /**\n * Used to update Bpmn gateway child in runtime\n * EJ2-60581\n * @param elementWrapper\n * @param node\n * @param pathData\n * @returns\n */\n BpmnDiagrams.prototype.updateGatewaySubType = function (elementWrapper, node, pathData) {\n var dataobjTypeNode = new PathElement();\n dataobjTypeNode.id = node.id + '_1_gatewayType';\n dataobjTypeNode.width = elementWrapper.children[1].width;\n dataobjTypeNode.height = elementWrapper.children[1].height;\n dataobjTypeNode.margin.left = elementWrapper.children[1].margin.left;\n dataobjTypeNode.margin.top = elementWrapper.children[1].margin.top;\n dataobjTypeNode.data = pathData;\n dataobjTypeNode.offsetX = elementWrapper.children[1].offsetX;\n dataobjTypeNode.offsetY = elementWrapper.children[1].offsetY;\n dataobjTypeNode.style = elementWrapper.children[1].style;\n dataobjTypeNode.horizontalAlignment = elementWrapper.children[1].horizontalAlignment;\n dataobjTypeNode.verticalAlignment = elementWrapper.children[1].verticalAlignment;\n dataobjTypeNode.relativeMode = elementWrapper.children[1].relativeMode;\n dataobjTypeNode.transform = elementWrapper.children[1].transform;\n return dataobjTypeNode;\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNDataObject = function (node, newObject, oldObject) {\n var bpmnShape = newObject.shape;\n var elementWrapper = node.wrapper.children[0];\n if (bpmnShape) {\n var elementWrapperChild1 = elementWrapper.children[1];\n var elementWrapperChild2 = elementWrapper.children[2];\n if (newObject.style !== undefined) {\n updateStyle(newObject.style, elementWrapper.children[0]);\n elementWrapperChild1.style.opacity = node.style.opacity;\n elementWrapperChild2.style.opacity = node.style.opacity;\n }\n if (bpmnShape.dataObject) {\n switch (bpmnShape.dataObject.type) {\n case 'None':\n elementWrapperChild1.visible = false;\n break;\n case 'Input':\n elementWrapperChild1.style.fill = 'white';\n break;\n case 'Output':\n elementWrapperChild1.style.fill = 'black';\n break;\n }\n if (oldObject.shape.dataObject.type === 'None') {\n elementWrapperChild1.visible = true;\n }\n if (newObject.shape.dataObject.collection !== undefined) {\n elementWrapperChild2.visible = bpmnShape.dataObject.collection;\n }\n }\n }\n if (newObject.width !== undefined || newObject.height !== undefined) {\n this.setSizeForBPMNDataObjects(node.shape.dataObject, elementWrapper, newObject.width || node.width, newObject.height || node.height);\n }\n };\n /** @private */\n BpmnDiagrams.prototype.getEvent = function (node, oldObject, event, child0, child1, child2) {\n switch (event) {\n case 'Start':\n child1.visible = false;\n child0.style.strokeDashArray = '';\n child2.style.fill = 'white';\n child2.style.strokeColor = 'black';\n child0.style.fill = 'white';\n break;\n case 'NonInterruptingStart':\n child0.style.strokeDashArray = '2 3';\n child2.style.fill = 'white';\n child0.style.fill = 'white';\n child2.style.strokeColor = 'black';\n child1.visible = false;\n break;\n case 'Intermediate':\n child0.style.strokeDashArray = '';\n child0.style.fill = 'white';\n child1.style.strokeDashArray = '';\n child0.style.gradient = null;\n child2.style.fill = 'white';\n child2.style.strokeColor = 'black';\n this.updateEventVisibility(oldObject, child1);\n break;\n case 'NonInterruptingIntermediate':\n child0.style.fill = 'white';\n child0.style.gradient = null;\n child2.style.fill = 'white';\n child2.style.strokeColor = 'black';\n child0.style.strokeDashArray = '2 3';\n child1.style.strokeDashArray = '2 3';\n this.updateEventVisibility(oldObject, child1);\n break;\n case 'ThrowingIntermediate':\n case 'End':\n child0.style.fill = event !== 'End' ? 'white' : 'black';\n child0.style.strokeDashArray = '';\n child1.style.strokeDashArray = '';\n child0.style.gradient = null;\n child2.style.fill = 'black';\n this.updateEventVisibility(oldObject, child1);\n // child2.style.strokeColor = node.style.fill;\n break;\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateEventVisibility = function (oldObject, child1) {\n if (oldObject.shape.activity && oldObject.shape.activity.subProcess &&\n oldObject.shape.activity.subProcess.events &&\n oldObject.shape.activity.subProcess.events[0] !== undefined &&\n oldObject.shape.activity.subProcess.events[0].event !== undefined) {\n if (oldObject.shape.activity.subProcess.events[0].event === 'NonInterruptingStart' ||\n oldObject.shape.activity.subProcess.events[0].event === 'Start') {\n child1.visible = true;\n }\n }\n else if (oldObject.shape.event !== undefined) {\n if (oldObject.shape.event.event === 'NonInterruptingStart' ||\n oldObject.shape.event.event === 'Start') {\n child1.visible = true;\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNEvent = function (node, newObject, oldObject) {\n var bpmnShape = newObject.shape;\n var trigger;\n var elementWrapper = node.wrapper.children[0];\n // if (bpmnShape) {\n // const elementWrapperChild0: DiagramElement = elementWrapper.children[0];\n // const elementWrapperChild1: DiagramElement = elementWrapper.children[1];\n // const elementWrapperChild2: DiagramElement = elementWrapper.children[2];\n // //let event: string;\n // if (newObject.style !== undefined) {\n // updateStyle(node.style, elementWrapper.children[0]);\n // if (newObject.style.opacity !== undefined || newObject.style.strokeColor !== undefined) {\n // elementWrapperChild1.style.opacity = node.style.opacity;\n // elementWrapperChild1.style.strokeColor = node.style.strokeColor;\n // }\n // }\n // const event: string = bpmnShape.event.event;\n // trigger = bpmnShape.event.trigger;\n // if (event !== undefined) {\n // this.getEvent(node, oldObject, event, elementWrapperChild0, elementWrapperChild1, elementWrapperChild2);\n // }\n // if (trigger !== undefined) {\n // this.updateBPMNEventTrigger(node, newObject);\n // }\n // }\n if (newObject.width !== undefined || newObject.height !== undefined || trigger !== undefined) {\n this.setSizeForBPMNEvents(node.shape.event, elementWrapper, newObject.width || node.width, newObject.height || node.height);\n }\n };\n // /** @private */\n // public updateBPMNEventTrigger(node: Node, newObject: Node): void {\n // const bpmnShape: BpmnShapeModel = node.shape as BpmnShapeModel;\n // const elementWrapper: DiagramElement = (node.wrapper.children[0] as Canvas).children[2];\n // (elementWrapper as PathElement).canMeasurePath = true;\n // if (newObject.style &&\n // (newObject.style.strokeColor !== undefined || newObject.style.opacity !== undefined)) {\n // updateStyle(node.style, elementWrapper);\n // }\n // const bpmnshapeTriggerdata: string = getBpmnTriggerShapePathData(\n // bpmnShape.event.trigger);\n // (elementWrapper as PathModel).data = bpmnshapeTriggerdata;\n // }\n /** @private */\n BpmnDiagrams.prototype.updateBPMNActivity = function (node, newObject, oldObject, diagram) {\n var bpmnShape = newObject.shape;\n var elementWrapper = node.wrapper.children[0];\n if (elementWrapper && elementWrapper.children && elementWrapper.children.length > 0 && elementWrapper.children[0]) {\n var size = this.getSize(node, elementWrapper.children[0].children[0]);\n if (bpmnShape) {\n var oldProp = oldObject.shape.activity.activity;\n var actualObjectProp = node.shape.activity.activity;\n if ((oldProp === 'SubProcess' || oldProp === 'Task') && (actualObjectProp === 'SubProcess' || actualObjectProp === 'Task')) {\n diagram.removeElements(node);\n node.wrapper.children[0] = this.getBPMNActivityShape(node);\n }\n else {\n if (actualObjectProp === 'Task' && bpmnShape.activity.task !== undefined) {\n this.updateBPMNActivityTask(node, newObject);\n var subChildCount = this.getTaskChildCount(node);\n var x = void 0;\n var childSpace = subChildCount * 12;\n var area = size.width / 2 - childSpace;\n if (subChildCount === 1) {\n x = area + 8;\n }\n else {\n x = area + (subChildCount - 1) * 8;\n }\n if (bpmnShape.activity.task.loop !== undefined) {\n this.updateBPMNActivityTaskLoop(node, newObject, x, subChildCount, area, 2);\n }\n }\n if (actualObjectProp === 'SubProcess' && bpmnShape.activity.subProcess !== undefined) {\n this.updateBPMNActivitySubProcess(node, newObject, oldObject, diagram);\n }\n }\n this.setSizeForBPMNActivity(node.shape.activity, elementWrapper, newObject.width || size.width, newObject.height || size.height, node);\n }\n if (newObject.width !== undefined || newObject.height !== undefined) {\n this.setSizeForBPMNActivity(node.shape.activity, elementWrapper, newObject.width || size.width, newObject.height || size.height, node);\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNActivityTask = function (node, newObject) {\n var bpmnShape = newObject.shape;\n var elementWrapper = node.wrapper.children[0].children[0];\n var task = bpmnShape.activity.task;\n for (var i = 0; i < elementWrapper.children.length; i++) {\n //EJ2-907764-Changing Loop for Activity node with task type, result in change in task type symbols\n if (elementWrapper.children[parseInt(i.toString(), 10)].id === node.id + '_2_loop') {\n var element = document.getElementById(node.id + '_2_loop');\n element.parentNode.removeChild(element);\n }\n }\n if (task.type !== undefined) {\n var bpmnshapeTaskdata = getBpmnTaskShapePathData(task.type);\n elementWrapper.children[1].data = bpmnshapeTaskdata;\n for (var i = 0; i < elementWrapper.children.length; i++) {\n if (elementWrapper.children[parseInt(i.toString(), 10)].id === node.id + '_1_tasktType') {\n elementWrapper.children.splice(i, 1);\n var element = document.getElementById(node.id + '_1_tasktType');\n element.parentNode.removeChild(element);\n }\n //EJ2-907764-Changing Loop for Activity node with task type, result in change in task type symbols\n if (elementWrapper.children[parseInt(i.toString(), 10)].id === node.id + '_1_taskTypeService') {\n elementWrapper.children.splice(i, 1);\n var element = document.getElementById(node.id + '_1_taskTypeService');\n element.parentNode.removeChild(element);\n }\n }\n var taskTypeNode = new PathElement();\n taskTypeNode.id = node.id + '_1_tasktType';\n taskTypeNode.margin.left = 5;\n taskTypeNode.margin.top = 5;\n taskTypeNode.data = bpmnshapeTaskdata;\n taskTypeNode.style.fill = 'transparent';\n taskTypeNode.style.opacity = node.style.opacity;\n /**\n * Used to update the Bpmn activity task type at runtime\n * EJ2-60586\n */\n if (task.type === 'Receive' || task.type === 'Send') {\n taskTypeNode.width = 18;\n taskTypeNode.height = 16;\n if (task.type === 'Send') {\n taskTypeNode.style.fill = 'black';\n }\n elementWrapper.children.splice(1, 0, taskTypeNode);\n }\n else if (task.type === 'Manual') {\n taskTypeNode.width = 16;\n taskTypeNode.height = 11;\n elementWrapper.children.splice(1, 0, taskTypeNode);\n }\n else if (task.type !== 'Service') {\n taskTypeNode.width = 20;\n taskTypeNode.height = 20;\n elementWrapper.children.splice(1, 0, taskTypeNode);\n }\n else {\n taskTypeNode.width = 20;\n taskTypeNode.height = 20;\n elementWrapper.children.splice(1, 0, taskTypeNode);\n var taskTypeNodeService = new PathElement();\n taskTypeNodeService.id = node.id + '_1_taskTypeService';\n taskTypeNodeService.data = bpmnshapeTaskdata;\n taskTypeNodeService.margin.left = elementWrapper.children[1].margin.left + 9;\n taskTypeNodeService.margin.top = elementWrapper.children[1].margin.top + 9;\n taskTypeNodeService.style.fill = 'white';\n taskTypeNodeService.style.opacity = node.style.opacity;\n elementWrapper.children.splice(2, 0, taskTypeNodeService);\n }\n }\n if (bpmnShape.activity.task.call !== undefined) {\n if (bpmnShape.activity.task.call !== false) {\n elementWrapper.children[0].style.strokeWidth = 4;\n }\n else {\n elementWrapper.children[0].style.strokeWidth = 1;\n }\n }\n if (bpmnShape.activity.task.compensation !== undefined) {\n if (bpmnShape.activity.task.compensation === true) {\n elementWrapper.children[3].visible = true;\n }\n else {\n elementWrapper.children[3].visible = false;\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNActivityTaskLoop = function (node, newObject, x, subChildCount, area, start) {\n var bpmnShape = newObject.shape;\n var elementWrapper = node.wrapper.children[0].children[0];\n var activity = bpmnShape.activity;\n var taskType = node.shape.activity.task.type;\n var loop;\n var index = 0;\n var bpmnshapeLoopdata;\n if (activity.subProcess !== undefined) {\n var subProcess = activity.subProcess;\n index = (activity.subProcess.type === 'Transaction') ? 2 : 0;\n loop = subProcess.loop;\n bpmnshapeLoopdata = getBpmnLoopShapePathData(loop);\n elementWrapper.children[2 + index].data = bpmnshapeLoopdata;\n elementWrapper.children[2 + index].visible = (loop === 'None') ? false : true;\n //EJ2-907764-Changing Loop for Activity node with task type, result in change in task type symbols\n }\n else if (activity.task !== undefined && activity.task.loop !== undefined && taskType !== 'Service') {\n bpmnshapeLoopdata = getBpmnLoopShapePathData(activity.task.loop);\n elementWrapper.children[2].data = bpmnshapeLoopdata;\n elementWrapper.children[2].visible = (activity.task.loop === 'None') ? false : true;\n }\n else if (activity.task !== undefined && activity.task.loop !== undefined && taskType === 'Service') {\n bpmnshapeLoopdata = getBpmnLoopShapePathData(activity.task.loop);\n elementWrapper.children[3].data = bpmnshapeLoopdata;\n elementWrapper.children[3].visible = (activity.task.loop === 'None') ? false : true;\n }\n this.updateChildMargin(elementWrapper, subChildCount, area, x, start + index);\n };\n /** @private */\n BpmnDiagrams.prototype.updateChildMargin = function (elementWrapper, subChildCount, area, x, start) {\n if (subChildCount === 1) {\n for (var i = start; i < elementWrapper.children.length; i++) {\n if (i !== 2 && elementWrapper.children[parseInt(i.toString(), 10)].visible === true) {\n elementWrapper.children[parseInt(i.toString(), 10)].margin.left = x;\n x = area + 8;\n }\n }\n }\n else {\n x = area + (subChildCount - 1) * 8;\n for (var i = start; i < elementWrapper.children.length; i++) {\n if (i !== 2 && elementWrapper.children[parseInt(i.toString(), 10)].visible === true) {\n elementWrapper.children[parseInt(i.toString(), 10)].margin.left = x;\n x += 12 + 8;\n }\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNActivitySubProcess = function (node, newObject, oldObject, diagram) {\n var bpmnShape = newObject.shape;\n var elementWrapper = node.wrapper.children[0];\n var size = this.getSize(node, elementWrapper.children[0].children[0]);\n var subProcess = bpmnShape.activity.subProcess;\n var subChildCount = this.getSubprocessChildCount(node);\n var x;\n var childSpace = subChildCount * 12;\n var area = size.width / 2 - childSpace;\n if (subChildCount === 1) {\n x = area + 8;\n }\n else {\n x = area + (subChildCount - 1) * 8;\n }\n updateStyle(node.style, elementWrapper.children[0].children[0]);\n if (subProcess.events !== undefined) {\n this.updateBPMNSubProcessEvent(node, newObject, oldObject, diagram);\n }\n if (subProcess.adhoc !== undefined) {\n this.updateBPMNSubProcessAdhoc(node, oldObject, subProcess, x, subChildCount, area);\n }\n if (subProcess.boundary !== undefined) {\n this.updateBPMNSubProcessBoundary(node, subProcess);\n }\n if (subProcess.collapsed !== undefined) {\n this.updateBPMNSubProcessCollapsed(node, oldObject, subProcess, x, subChildCount, area, diagram);\n }\n if (subProcess.compensation !== undefined) {\n this.updateBPMNSubProcessCompensation(node, oldObject, subProcess, x, subChildCount, area);\n }\n if (subProcess.loop !== undefined) {\n this.updateBPMNSubProcessLoop(node, oldObject, subProcess, x, subChildCount, area);\n }\n if (subProcess.transaction !== undefined) {\n this.updateBPMNSubProcessTransaction(node, newObject, oldObject, diagram);\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNSubProcessEvent = function (node, newObject, oldObject, diagram) {\n var bpmnShape = newObject.shape;\n var elementWrapper = node.wrapper.children[0];\n var nodeContent = elementWrapper.children[0];\n var elementWrapperChildLen = elementWrapper.children[0].children.length;\n var subProcess = bpmnShape.activity.subProcess;\n var start = 2;\n for (var _i = 0, _a = Object.keys(subProcess.events); _i < _a.length; _i++) {\n var key = _a[_i];\n var eventIndex = Number(key);\n var eventWrapper = nodeContent.children[eventIndex + start];\n var actualEvent = node.shape.activity.subProcess.events[parseInt(eventIndex.toString(), 10)];\n this.updateBPMNSubEvent(node, subProcess.events[parseInt(eventIndex.toString(), 10)], actualEvent, eventWrapper, newObject, oldObject, diagram);\n }\n };\n BpmnDiagrams.prototype.updateBPMNSubEvent = function (node, newEvent, actualEvent, eventWrapper, newObject, oldObject, diagram) {\n var elementWrapper = node.wrapper.children[0];\n var bpmnShape = newObject.shape;\n var child0 = eventWrapper.children[0];\n var child1 = eventWrapper.children[1];\n var child2 = eventWrapper.children[2];\n var eventType;\n var trigger;\n if (newObject.style) {\n if (newObject.style.strokeColor !== undefined || newObject.style.opacity !== undefined) {\n elementWrapper.children[0].children[1].style.strokeColor = newObject.style.strokeColor;\n elementWrapper.children[0].children[1].style.opacity = newObject.style.opacity;\n }\n }\n if (bpmnShape.activity.subProcess !== undefined) {\n eventType = newEvent.event;\n trigger = newEvent.trigger;\n }\n if (eventType !== undefined) {\n this.getEvent(newObject, oldObject, eventType, child0, child1, child2);\n }\n if (trigger !== undefined) {\n if (newObject.style) {\n updateStyle(newObject.style, elementWrapper.children[0]);\n }\n var bpmnshapeTriggerdata = getBpmnTriggerShapePathData(trigger);\n eventWrapper.children[2].data = bpmnshapeTriggerdata;\n }\n if (newEvent.height !== undefined || newEvent.width !== undefined) {\n this.getEventSize(newEvent, eventWrapper);\n }\n if (newEvent.id !== undefined) {\n eventWrapper.id = newEvent.id;\n }\n if (newEvent.margin !== undefined) {\n eventWrapper.margin = newEvent.margin;\n }\n if (newEvent.horizontalAlignment !== undefined) {\n eventWrapper.horizontalAlignment = newEvent.horizontalAlignment;\n }\n if (newEvent.verticalAlignment !== undefined) {\n eventWrapper.verticalAlignment = newEvent.verticalAlignment;\n }\n if (newEvent.offset !== undefined) {\n eventWrapper.setOffsetWithRespectToBounds(actualEvent.offset.x, actualEvent.offset.y, 'Fraction');\n eventWrapper.relativeMode = 'Point';\n }\n if (newEvent.annotations !== undefined) {\n var annotations = void 0;\n var annotation = elementWrapper.children[0].children[2];\n if (eventWrapper.children[3] && eventWrapper.children.length > 3) {\n annotations = eventWrapper.children[3];\n diagram.updateAnnotation(newEvent.annotations[0], annotations, annotation);\n }\n }\n if (newEvent.ports !== undefined) {\n var ports = void 0;\n var port = elementWrapper.children[0].children[2];\n if (eventWrapper.children[4] && eventWrapper.children.length > 4) {\n ports = eventWrapper.children[4];\n diagram.updatePort(newEvent.ports[0], ports, port);\n }\n }\n if (newEvent.visible !== undefined) {\n this.updateDiagramContainerVisibility(eventWrapper, newEvent.visible);\n }\n };\n BpmnDiagrams.prototype.updateBPMNSubProcessTransaction = function (node, newObject, oldObject, diagram) {\n var transaction = newObject.shape.activity.subProcess.transaction;\n var eventContainer = node.wrapper.children[0].children[0].children[2];\n var actualEvent;\n if (transaction.success !== undefined) {\n actualEvent = node.shape.activity.subProcess.transaction.success;\n this.updateBPMNSubEvent(node, transaction.success, actualEvent, eventContainer.children[0], newObject, oldObject, diagram);\n }\n if (transaction.cancel !== undefined) {\n actualEvent = node.shape.activity.subProcess.transaction.cancel;\n this.updateBPMNSubEvent(node, transaction.cancel, actualEvent, eventContainer.children[1], newObject, oldObject, diagram);\n }\n if (transaction.failure !== undefined) {\n actualEvent = node.shape.activity.subProcess.transaction.failure;\n this.updateBPMNSubEvent(node, transaction.failure, actualEvent, eventContainer.children[2], newObject, oldObject, diagram);\n }\n for (var _i = 0, _a = node.outEdges; _i < _a.length; _i++) {\n var edge = _a[_i];\n var connector = diagram.nameTable[\"\" + edge];\n switch (connector.sourcePortID) {\n case 'success':\n if (transaction.success && transaction.success.visible !== undefined) {\n diagram.connectorPropertyChange(connector, {}, { sourcePortID: 'success' });\n }\n break;\n case 'cancel':\n if (transaction.cancel && transaction.cancel.visible !== undefined) {\n diagram.connectorPropertyChange(connector, {}, { sourcePortID: 'cancel' });\n }\n break;\n case 'failure':\n if (transaction.failure && transaction.failure.visible !== undefined) {\n diagram.connectorPropertyChange(connector, {}, { sourcePortID: 'failure' });\n }\n break;\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.getEventSize = function (events, wrapperChild) {\n if (events.height !== undefined) {\n wrapperChild.height = events.height;\n wrapperChild.children[0].height = events.height;\n wrapperChild.children[1].height = events.height * 0.85;\n wrapperChild.children[2].height = events.height * 0.54;\n }\n if (events.width !== undefined) {\n wrapperChild.width = events.width;\n wrapperChild.children[0].width = events.width;\n wrapperChild.children[1].width = events.width * 0.85;\n wrapperChild.children[2].width = events.width * 0.54;\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNSubProcessAdhoc = function (node, oldObject, subProcess, x, subChildCount, area) {\n var shape = node.shape;\n var elementWrapper = node.wrapper.children[0].children[0];\n var index = (node.shape.activity.subProcess.type === 'Transaction') ? 2 : 0;\n if (subProcess.adhoc === false) {\n elementWrapper.children[3 + index].visible = false;\n }\n else {\n elementWrapper.children[3 + index].visible = true;\n }\n this.updateChildMargin(elementWrapper, subChildCount, area, x, 3 + index);\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNSubProcessBoundary = function (node, subProcess) {\n var shape = node.shape;\n var elementWrapper = (node.wrapper.children[0].children[0].children[0]);\n if (subProcess.boundary === 'Default') {\n elementWrapper.style.strokeWidth = 1;\n elementWrapper.style.strokeDashArray = '1 0';\n }\n if (subProcess.boundary === 'Call') {\n elementWrapper.style.strokeWidth = 4;\n elementWrapper.style.strokeDashArray = '1 0';\n }\n if (subProcess.boundary === 'Event') {\n elementWrapper.style.strokeWidth = 1;\n elementWrapper.style.strokeDashArray = '2 2';\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateElementVisibility = function (node, visible, diagram) {\n if (node.shape.activity.subProcess.processes\n && node.shape.activity.subProcess.processes.length > 0) {\n var processes = node.shape.activity.subProcess.processes;\n for (var j = processes.length - 1; j >= 0; j--) {\n var currentNode = diagram.nameTable[processes[parseInt(j.toString(), 10)]];\n currentNode.visible = visible;\n diagram.updateElementVisibility(currentNode.wrapper, currentNode, visible);\n if (visible) {\n if ((!isBlazor() && currentNode.shape.shape === 'Event')) {\n this.setEventVisibility(currentNode, currentNode.wrapper.children[0].children);\n }\n if (currentNode.shape.activity.activity === 'SubProcess') {\n this.setSubProcessVisibility(currentNode);\n }\n }\n var connectors = currentNode.inEdges.concat(currentNode.outEdges);\n for (var i = connectors.length - 1; i >= 0; i--) {\n var connector = diagram.nameTable[connectors[parseInt(i.toString(), 10)]];\n connector.visible = visible;\n diagram.updateElementVisibility(connector.wrapper, connector, visible);\n }\n }\n }\n if (visible) {\n if (!isBlazor() && node.shape.shape === 'Event') {\n this.setEventVisibility(node, node.wrapper.children[0].children);\n }\n if (node.shape.activity.activity === 'SubProcess') {\n this.setSubProcessVisibility(node);\n }\n if (node.shape.activity.activity === 'Task' &&\n (!isBlazor() && node.shape.shape === 'Activity')\n && node.shape.activity.subProcess.loop === 'None') {\n node.wrapper.children[0].children[0].children[3].visible = false;\n }\n //(EJ2-843861) - BPMN node subtype visibles whiles changing the node visibility\n if (node.shape.shape === 'DataObject') {\n if (node.shape.dataObject.collection === false && node.shape.dataObject.type === 'None') {\n for (var i = node.wrapper.children[0].children.length - 1; i > 0; i--) {\n node.wrapper.children[0].children[parseInt(i.toString(), 10)].visible = false;\n }\n }\n else if (node.shape.dataObject.collection === true && node.shape.dataObject.type === 'None') {\n node.wrapper.children[0].children[1].visible = false;\n }\n else if (node.shape.dataObject.collection === false && (node.shape.dataObject.type === 'Input' || node.shape.dataObject.type === 'Output')) {\n node.wrapper.children[0].children[2].visible = false;\n }\n }\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNSubProcessCollapsed = function (node, oldObject, subProcess, x, subChildCount, area, diagram) {\n var eventLength = node.shape.activity.subProcess.events.length;\n var elementWrapper = node.wrapper.children[0].children[0];\n var index = (node.shape.activity.subProcess.type === 'Transaction') ? 3 : 1;\n if (subProcess.collapsed === false) {\n this.updateElementVisibility(node, true, diagram);\n elementWrapper.children[index + eventLength].visible = false;\n }\n else {\n this.updateElementVisibility(node, false, diagram);\n elementWrapper.children[index + eventLength].visible = true;\n }\n this.updateChildMargin(elementWrapper, subChildCount, area, x, 3 + eventLength);\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNSubProcessCompensation = function (node, oldObject, subProcess, x, subChildCount, area) {\n var elementWrapper = node.wrapper.children[0].children[0];\n var index = (node.shape.activity.subProcess.type === 'Transaction') ? 2 : 0;\n if (subProcess.compensation === false) {\n elementWrapper.children[4 + index].visible = false;\n }\n else {\n elementWrapper.children[4 + index].visible = true;\n }\n this.updateChildMargin(elementWrapper, subChildCount, area, x, 4 + index);\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNSubProcessLoop = function (node, oldObject, subProcess, x, subChildCount, area) {\n this.updateBPMNActivityTaskLoop(node, node, x, subChildCount, area, 1);\n };\n /** @private */\n BpmnDiagrams.prototype.updateBPMNConnector = function (actualObject, oldObject, connection, diagram) {\n var flowType = connection.shape;\n //EJ2-66905 - Changing BPMN flow connectors at runtime is not working properly.\n var flow = actualObject.shape.flow;\n if ((flowType.flow === 'Sequence' || flowType.sequence) && flow === 'Sequence') {\n actualObject = this.getSequence(actualObject, oldObject, connection, diagram);\n }\n if ((flowType.flow === 'Association' || flowType.association) && flow === 'Association') {\n actualObject = this.getAssociation(actualObject, oldObject, connection, diagram);\n }\n if ((flowType.flow === 'Message' || flowType.message) && flow === 'Message') {\n actualObject = this.getMessage(actualObject, oldObject, connection, diagram);\n }\n return actualObject;\n };\n /** @private */\n BpmnDiagrams.prototype.getSequence = function (actualObject, oldObject, connection, diagram) {\n if ((connection.shape.sequence) === 'Normal' || actualObject.shape.sequence === 'Normal') {\n actualObject.targetDecorator.shape = 'Arrow';\n actualObject.sourceDecorator.shape = 'None';\n actualObject.style.strokeDashArray = 'None';\n actualObject.targetDecorator.style.fill = 'black';\n actualObject.targetDecorator.width = 10;\n actualObject.targetDecorator.height = 10;\n diagram.connectorPropertyChange(actualObject, oldObject, {\n targetDecorator: { shape: 'Arrow', style: { fill: 'black' }, height: 10, width: 10 },\n sourceDecorator: { shape: 'None' },\n style: { strokeDashArray: 'None' }\n });\n actualObject.wrapper.children[3].visible = false;\n }\n if ((connection.shape.sequence) === 'Default' || actualObject.shape.sequence === 'Default') {\n actualObject.targetDecorator.shape = 'Arrow';\n actualObject.sourceDecorator.shape = 'None';\n actualObject.style.strokeDashArray = 'None';\n actualObject.targetDecorator.style.fill = 'black';\n actualObject.targetDecorator.width = 10;\n actualObject.targetDecorator.height = 10;\n diagram.connectorPropertyChange(actualObject, oldObject, {\n style: { strokeDashArray: 'None' },\n targetDecorator: { shape: 'Arrow', style: { fill: 'black' }, height: 10, width: 10 },\n sourceDecorator: { shape: 'None' }\n });\n var segment = new PathElement();\n var pathseq = new PathElement();\n var pathseqData = void 0;\n segment = actualObject.getSegmentElement(actualObject, segment);\n var anglePoints = actualObject.intermediatePoints;\n for (var j = 0; j < anglePoints.length - 1; j++) {\n // eslint-disable-next-line no-global-assign\n length = length + actualObject.distance(anglePoints[parseInt(j.toString(), 10)], anglePoints[j + 1]);\n pathseqData = actualObject.findPath(anglePoints[parseInt(j.toString(), 10)], anglePoints[j + 1]);\n }\n var content = new PathElement();\n content.data = pathseqData[0];\n content.id = actualObject.id + '_' + connection.shape.sequence || actualObject.shape.sequence;\n content.offsetX = pathseqData[1].x;\n content.offsetY = pathseqData[1].y;\n content.rotateAngle = 45;\n content.transform = Transform.Self;\n this.removeDomElement(actualObject, diagram, content);\n }\n if ((connection.shape.sequence) === 'Conditional' || actualObject.shape.sequence === 'Conditional') {\n actualObject.sourceDecorator.shape = 'Diamond';\n actualObject.sourceDecorator.width = 20;\n actualObject.sourceDecorator.height = 10;\n actualObject.sourceDecorator.style.fill = 'white';\n actualObject.targetDecorator.style.fill = 'black';\n actualObject.style.strokeDashArray = 'None';\n actualObject.targetDecorator.shape = 'Arrow';\n diagram.connectorPropertyChange(actualObject, oldObject, {\n style: { strokeDashArray: 'None' },\n targetDecorator: { shape: 'Arrow', style: { fill: 'black' }, height: 10, width: 10 },\n sourceDecorator: { shape: 'Diamond', width: 20, height: 10, style: { fill: 'white' } }\n });\n actualObject.wrapper.children[3].visible = false;\n }\n return actualObject;\n };\n /** @private */\n BpmnDiagrams.prototype.getAssociation = function (actualObject, oldObject, connection, diagram) {\n if ((connection.shape.association) === 'Default' || actualObject.shape.association === 'Default') {\n actualObject.sourceDecorator.shape = 'None';\n actualObject.targetDecorator.shape = 'None';\n actualObject.style.strokeDashArray = '2 2';\n diagram.connectorPropertyChange(actualObject, oldObject, {\n style: { strokeDashArray: '2 2' },\n targetDecorator: { shape: 'None' },\n sourceDecorator: { shape: 'None' }\n });\n actualObject.wrapper.children[3].visible = false;\n }\n if ((connection.shape.association) === 'Directional' || actualObject.shape.association === 'Directional') {\n actualObject.sourceDecorator.shape = 'None';\n actualObject.style.strokeDashArray = '2 2';\n actualObject.targetDecorator.shape = 'OpenArrow';\n actualObject.targetDecorator.width = 10;\n actualObject.targetDecorator.height = 10;\n diagram.connectorPropertyChange(actualObject, oldObject, {\n style: { strokeDashArray: '2 2' },\n targetDecorator: { shape: 'OpenArrow', width: 10, height: 10 },\n sourceDecorator: { shape: 'None' }\n });\n actualObject.wrapper.children[3].visible = false;\n }\n if ((connection.shape.association) === 'BiDirectional' || actualObject.shape.association === 'BiDirectional') {\n actualObject.sourceDecorator.shape = 'OpenArrow';\n actualObject.targetDecorator.shape = 'OpenArrow';\n actualObject.sourceDecorator.width = 10;\n actualObject.sourceDecorator.height = 10;\n actualObject.sourceDecorator.style.fill = 'black';\n diagram.connectorPropertyChange(actualObject, oldObject, {\n style: { strokeDashArray: '2 2' },\n targetDecorator: { shape: 'OpenArrow', width: 10, height: 10 },\n sourceDecorator: { shape: 'OpenArrow', width: 10, height: 10, style: { fill: 'black' } }\n });\n actualObject.wrapper.children[3].visible = false;\n }\n return actualObject;\n };\n /** @private */\n BpmnDiagrams.prototype.getMessage = function (actualObject, oldObject, connection, diagram) {\n var segmentOffset = 0.5;\n var angle;\n var pt;\n actualObject.sourceDecorator.shape = 'Circle';\n actualObject.sourceDecorator.width = 10;\n actualObject.targetDecorator.shape = 'Arrow';\n actualObject.sourceDecorator.height = 10;\n actualObject.sourceDecorator.style.fill = 'White';\n actualObject.targetDecorator.style.fill = 'White';\n diagram.connectorPropertyChange(actualObject, oldObject, { sourceDecorator: { shape: 'Circle', style: { fill: 'White' }, width: 10, height: 10 }, targetDecorator: { shape: 'Arrow', style: { fill: 'white' } } });\n var anglePoints = actualObject.intermediatePoints;\n var length = 0;\n for (var j = 0; j < anglePoints.length - 1; j++) {\n /* eslint-disable */\n length = length + actualObject.distance(anglePoints[j], anglePoints[j + 1]);\n /* eslint-enable */\n var offLength = length * segmentOffset;\n if (length >= offLength) {\n angle = findAngle(anglePoints[parseInt(j.toString(), 10)], anglePoints[j + 1]);\n pt = Point.transform(anglePoints[parseInt(j.toString(), 10)], angle, offLength);\n }\n }\n var content = new PathElement();\n actualObject.wrapper.children[0].style.strokeDashArray = ' 4 4';\n actualObject.style.strokeDashArray = '4 4';\n content.id = actualObject.id + '_' + connection.shape.message || actualObject.shape.message;\n content.width = 25;\n content.height = 15;\n content.data = 'M0,0 L19.8,12.8 L40,0 L0, 0 L0, 25.5 L40, 25.5 L 40, 0';\n content.horizontalAlignment = 'Center';\n content.verticalAlignment = 'Center';\n content.transform = Transform.Self;\n content.style.fill = connection.shape.message === 'NonInitiatingMessage' ?\n 'lightgrey' : 'white';\n content.offsetX = pt.x;\n content.offsetY = pt.y;\n if ((connection.shape.message !== 'Default' && connection.shape.message !== undefined) || actualObject.shape.message !== 'Default') {\n content.style.fill = (connection.shape.message || actualObject.shape.message) === 'NonInitiatingMessage' ?\n 'lightgrey' : 'white';\n }\n else {\n content.visible = false;\n }\n this.removeDomElement(actualObject, diagram, content);\n return actualObject;\n };\n // To remove old wrapper element from dom.\n BpmnDiagrams.prototype.removeDomElement = function (actualObject, diagram, content) {\n for (var _i = 0, _a = diagram.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(actualObject.id + '_groupElement', elementId);\n removeElement(actualObject.id + '_content_groupElement', elementId);\n removeElement(actualObject.id + '_html_element', elementId);\n }\n actualObject.wrapper.children.splice(3, 1);\n actualObject.wrapper.children.splice(3, 0, content);\n };\n //End update Region\n //size updation\n BpmnDiagrams.prototype.setSizeForBPMNEvents = function (event, wrapper, width, height) {\n wrapper.children[0].width = width;\n wrapper.children[0].height = height;\n //child node 1 - event node\n var eventNode = wrapper.children[1];\n eventNode.width = width * 0.85;\n eventNode.height = height * 0.85;\n var triggerNode = wrapper.children[2];\n if (event.trigger === 'Message') {\n triggerNode.width = width * 0.54;\n triggerNode.height = height * 0.4;\n }\n else {\n triggerNode.width = width * 0.5;\n triggerNode.height = height * 0.5;\n }\n };\n /** @private */\n BpmnDiagrams.prototype.updateAnnotationDrag = function (node, diagram, tx, ty) {\n if (node.processId) {\n this.drag(node, tx, ty, diagram);\n return true;\n }\n return false;\n };\n BpmnDiagrams.prototype.getAnnotationPathAngle = function (point, bounds) {\n var direction = getPortDirection(point, bounds, bounds);\n var rotateAngle = 0;\n switch (direction) {\n case 'Right':\n rotateAngle = 0;\n break;\n case 'Left':\n rotateAngle = 180;\n break;\n case 'Bottom':\n rotateAngle = 90;\n break;\n case 'Top':\n rotateAngle = 270;\n break;\n }\n return rotateAngle;\n };\n BpmnDiagrams.prototype.setSizeForBPMNGateway = function (event, wrapper, width, height) {\n wrapper.children[0].width = width;\n wrapper.children[0].height = height;\n wrapper.children[1].width = width * 0.45;\n wrapper.children[1].height = height * 0.45;\n };\n BpmnDiagrams.prototype.setSizeForBPMNDataObjects = function (event, wrapper, width, height) {\n wrapper.children[0].width = width;\n wrapper.children[0].height = height;\n };\n BpmnDiagrams.prototype.setSizeForBPMNActivity = function (activity, wrapper, width, height, node) {\n //child node 1 - event node\n wrapper.children[0].width = width;\n wrapper.children[0].height = height;\n wrapper.children[0].children[0].width = width;\n wrapper.children[0].children[0].height = height;\n if (activity.subProcess.type === 'Transaction') {\n wrapper.children[0].children[1].width = Math.max(width - 6, 1);\n wrapper.children[0].children[1].height = Math.max(height - 6, 1);\n wrapper.children[0].children[2].width = width;\n wrapper.children[0].children[2].height = height;\n }\n var taskNode = new DiagramElement();\n var x;\n var size = this.getSize(node, taskNode);\n var childCount;\n var iconSpace = 4;\n if (activity.activity === 'Task') {\n childCount = this.getTaskChildCount(node);\n }\n else {\n childCount = this.getSubprocessChildCount(node);\n }\n var childSpace = childCount * 12;\n var area = (width || size.width) / 2;\n if (childCount === 1) {\n x = area - 6;\n }\n else {\n x = area - (childSpace / 2) - ((childCount - 1) * iconSpace) / 2;\n }\n for (var i = 0; i < wrapper.children[0].children.length; i++) {\n if (wrapper.children[0].children[parseInt(i.toString(), 10)].visible &&\n (wrapper.children[0].children[parseInt(i.toString(), 10)].id.indexOf('_loop') > -1 ||\n wrapper.children[0].children[parseInt(i.toString(), 10)].id.indexOf('_0_compensation') > -1 ||\n wrapper.children[0].children[parseInt(i.toString(), 10)].id.indexOf('_0_adhoc') > -1 ||\n wrapper.children[0].children[parseInt(i.toString(), 10)].id.indexOf('_0_collapsed') > -1)) {\n wrapper.children[0].children[parseInt(i.toString(), 10)].margin.left = x;\n x += wrapper.children[0].children[parseInt(i.toString(), 10)].actualSize.width + iconSpace;\n }\n }\n };\n BpmnDiagrams.prototype.updateDiagramContainerVisibility = function (element, visible) {\n if (element instanceof Container) {\n for (var i = 0; i < element.children.length; i++) {\n this.updateDiagramContainerVisibility(element.children[parseInt(i.toString(), 10)], visible);\n }\n }\n element.visible = visible;\n };\n /**\n *To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n BpmnDiagrams.prototype.destroy = function () {\n /**\n * Destroys the BpmnDiagrams module\n */\n };\n /**\n * Get module name.\n *\n * @returns {string} Get module name.\n */\n BpmnDiagrams.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Bpmn';\n };\n return BpmnDiagrams;\n}());\n/**\n * getBpmnShapePathData method \\\n *\n * @returns { string } getBpmnShapePathData method .\\\n * @param {string} shape - provide the shape value.\n *\n * @private\n */\nfunction getBpmnShapePathData(shape) {\n return bpmnShapes[shape.toString()];\n}\n/**\n * getBpmnTriggerShapePathData method \\\n *\n * @returns { string } getBpmnTriggerShapePathData method .\\\n * @param {string} shape - provide the shape value.\n *\n * @private\n */\nfunction getBpmnTriggerShapePathData(shape) {\n return bpmnTriggerShapes[shape.toString()];\n}\n/**\n * getBpmnGatewayShapePathData method \\\n *\n * @returns { string } getBpmnGatewayShapePathData method .\\\n * @param {string} shape - provide the shape value.\n *\n * @private\n */\nfunction getBpmnGatewayShapePathData(shape) {\n return bpmnGatewayShapes[shape.toString()];\n}\n/**\n * getBpmnTaskShapePathData method \\\n *\n * @returns { string } getBpmnTaskShapePathData method .\\\n * @param {string} shape - provide the shape value.\n *\n * @private\n */\nfunction getBpmnTaskShapePathData(shape) {\n return bpmnTaskShapes[shape.toString()];\n}\n/**\n * getBpmnLoopShapePathData method \\\n *\n * @returns { string } getBpmnLoopShapePathData method .\\\n * @param {string} shape - provide the shape value.\n *\n * @private\n */\nfunction getBpmnLoopShapePathData(shape) {\n return bpmnLoopShapes[shape.toString()];\n}\nvar bpmnShapes = {\n 'Event': 'M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5' +\n 'C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z',\n 'Message': 'M0,0L19.8,12.8L40,0L0,0L0,25.5L40,25.5L40,0z',\n 'DataSource': 'M 0 10.6 c 0 5.9 16.8 10.6 37.5 10.6 S 75 16.4 75 10.6 v 0 v 68.9 v -0.1 C 75 85.3 58.2 90 37.5 90 ' +\n 'S 0 85.3 0 79.4 l 0 0.1 V 56 V 40.6 L 0 10.6 C 0 4.7 16.8 0 37.5 0 S 75 4.7 75 10.6 S 58.2 21.2 37.5 21.2' +\n 'S 0 16.5 0 10.6 l 0 6.7 v -0.2 c 0 5.9 16.8 10.6 37.5 10.6 S 75 22.9 75 17.1 v 6.8 v -0.1 ' +\n 'c 0 5.9 -16.8 10.6 -37.5 10.6 S 0 29.6 0 23.8',\n 'SubProcess': 'M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 ' +\n 'a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z',\n 'collapsedShape': 'M 8.13789 15 H 0 V 0 H 8.13789 V 15 Z M 0.625991 13.75 H 7.51189 V 1.25 H 0.625991 V 13.75 Z ' +\n 'M 2.18095 7.03125 L 5.95631 7.03125 L 5.95631 7.46875 L 2.18095 7.46875 Z M 3.8342 3.73 ' +\n 'L 4.30369 3.73 L 4.30369 11.2687 L 3.8342 11.2687 Z'\n};\nvar bpmnTriggerShapes = {\n // 'None': '',\n 'Message': 'M0,0 L19.8,12.8 L40,0 L0, 0 L0, 25.5 L40, 25.5 L 40, 0',\n 'Timer': 'M40,20c0,8.654-5.496,16.024-13.189,18.81' +\n 'C24.685,39.58,22.392,40,20,40C8.954,40,0,31.046,0,20S8.954,0,20,0S40,8.954,40,20z M20,0 L20,2.583 L20,5.283 M10.027,2.681' +\n 'L11.659,5.507 L12.669,7.257 M2.731,9.989 L6.014,11.885 L7.307,12.631 M0.067,19.967 L2.667,19.967 L5.35,19.967' +\n 'M2.748,29.939 L5.731,28.217 L7.323,27.298 M10.056,37.236 L11.292,35.095 L12.698,32.66 M20.033,39.9 L20.033,36.417 L20.033,34.617' +\n 'M30.006,37.219 L28.893,35.292 L27.364,32.643 M37.302,29.911 L34.608,28.355 L32.727,27.269' +\n 'M39.967,19.933 L37.417,19.933 L34.683,19.933 M37.286,9.961 L34.583,11.521 L32.71,12.602 M29.977,2.664 L28.653,4.957 L27.336,' +\n '7.24 M22.104,8.5 L19.688,20 L24.75,20 L31.604,20 L24.75,20 L19.688,20z',\n 'Error': 'M 23.77 18.527 l -7.107 27.396 l 8.507 -17.247 L 36.94 40.073 l 6.394 -25.997 l -8.497 15.754 L 23.77 18.527 Z',\n 'Escalation': 'M 30.001 8.098 L 11.842 43.543 l 18.159 -18.882 l 18.162 18.882 L 30.001 8.098 Z ',\n 'Cancel': 'M 3.5 16 L 0 12.6 L 4.6 8 L 0 3.5 L 3.4 0 L 8 4.6 l 4.5 -4.5 L 16 3.5 L 11.5 8 l 4.5 4.5 l -3.4 3.5 L 8 11.4 L 3.5 16 Z',\n 'Compensation': 'M 25.7086 0 L 0 25 L 25.7086 50 V 26.3752 L 50 50 V 0 L 25.7086 23.6248 V 0 Z ',\n 'Conditional': 'M 0 0 H 16 V 16 H 0 z M 1.14 3.2 H 14.85 M 1.14 6.4 H 14.85 M 1.14 9.6 H 14.85 M 1.14 12.8 H 14.85',\n 'Link': 'M 32.014 19.258 v 5.992 H 9.373 v 9.504 h 22.641 v 5.988 L 50.622 30 L 32.014 19.258 Z',\n 'Signal': 'M 50 50 H 0 L 25.0025 0 L 50 50 Z',\n 'Terminate': 'M 25 50 C 11.21 50 0 38.79 0 25 C 0 11.21 11.21 0 25 0 C 38.78 0 50 11.21 50 25 C 50 38.79 38.78 50 25 50',\n 'Multiple': 'M 17.784 48.889 H 42.21 l 7.548 -23.23 L 29.997 11.303 L 10.236 25.658 L 17.784 48.889 Z',\n 'Parallel': 'M 27.276 49.986 h 5.58 v -17.15 h 17.146 V 27.17 h -17.15 l 0.004 -17.15 h -5.58 l -0.004 17.15 ' +\n 'H 9.994 v 5.666 h 17.278 L 27.276 49.986 Z'\n};\nvar bpmnGatewayShapes = {\n 'None': '',\n //exclusive\n 'Exclusive': 'M 11.196 29.009 l 6.36 -9.712 l -5.764 -8.899 h 4.393 l 3.732 5.979 l 3.656 -5.979 h 4.354 l -5.789 9.039' +\n 'l 6.36 9.572 h -4.532 l -4.126 -6.437 l -4.139 6.437 H 11.196 Z',\n //inclusive\n 'Inclusive': 'M 20.323 31.333 c -6.625 0 -12.015 -5.39 -12.015 -12.015 s 5.39 -12.015 12.015 -12.015 ' +\n 's 12.016 5.39 12.016 12.015 S 26.948 31.333 20.323 31.333 Z M 20.323 9.303 c -5.522 0 -10.015 4.493 -10.015 10.015 ' +\n 's 4.492 10.015 10.015 10.015 s 10.016 -4.493 10.016 -10.015 S 25.846 9.303 20.323 9.303 Z',\n //parallel\n 'Parallel': 'M 18.394 29.542 v -8.833 H 9.626 v -3.691 h 8.768 V 8.251 h 3.734 v 8.767 h 8.768 v 3.691 h -8.768 v 8.833 H 18.394 Z',\n //complex\n 'Complex': 'M29.198,19.063L23.089,19.063L27.794,14.358L26.38,12.944L21.223,18.101L21.223,10.443L19.223,10.443L19.223,17.976' +\n 'L14.022,12.776L12.608,14.19L17.48,19.063L10.365,19.063L10.365,21.063L18.261,21.063L12.392,26.932L13.806,28.346' +\n 'L19.223,22.929L19.223,30.225L21.223,30.225L21.223,22.805L25.925,27.507L27.339,26.093L22.309,21.063L29.198,21.063z',\n //eventbased\n 'EventBased': 'M 20.322 29.874 c -5.444 0 -9.873 -4.43 -9.873 -9.874 s 4.429 -9.874 9.873 -9.874 s 9.874 4.429 9.874 9.874 ' +\n 'S 25.767 29.874 20.322 29.874 Z M 20.322 32.891 c -7.107 0 -12.89 -5.783 -12.89 -12.891 c 0 -7.107 5.782 -12.89 12.89 -12.89 ' +\n 'c 7.108 0 12.891 5.783 12.891 12.89 C 33.213 27.108 27.431 32.891 20.322 32.891 Z M 24.191 25.386 ' +\n 'h -7.984 l -2.469 -7.595 l 6.461 -4.693 l 6.461 4.693 L 24.191 25.386 Z',\n //exclusive event based\n 'ExclusiveEventBased': 'M 30 15 C 30 23.28 23.28 30 15 30 S 0 23.28 0 15 S 6.72 0 15 0 S 30 6.72 30 15 z M 15 5 ' +\n 'L 5 12.5 L 8 22.5 H 22 L 25 12.5 z',\n //parallel event based\n 'ParallelEventBased': 'M 35 17.5 C 35 27.16 27.16 35 17.5 35 S 0 27.16 0 17.5 S 7.84 0 17.5 0 S 35 7.84 35 17.5 z M 14.58 5.83 ' +\n 'V 14.58 H 5.83 V 20.42 H 14.58 V 29.17 H 20.42 V 20.42 H 29.17 V 14.58 H 20.42 V 5.83 z'\n};\nvar bpmnTaskShapes = {\n 'None': '',\n 'Service': 'M 32.699 20.187 v -4.005 h -3.32 c -0.125 -0.43 -0.292 -0.83 -0.488 -1.21 l 2.373 -2.375 ' +\n 'l -2.833 -2.83 l -2.333 2.333 c -0.44 -0.253 -0.9 -0.448 -1.387 -0.595 v -3.32 h -4.003 v 3.32 c -0.46 0.137 -0.89' +\n '0.322 -1.3 0.537 l -2.285 -2.275 l -2.833 2.83 l 2.285 2.278 c -0.235 0.42 -0.41 0.847 -0.547 1.307 h -3.33 v 4.005 h 3.33 ' +\n 'c 0.148 0.488 0.343 0.955 0.588 1.395 l -2.325 2.325 l 2.822 2.832 l 2.373 -2.382 c 0.392 0.205 0.792 0.37 1.212 0.497 v 3.33 ' +\n 'h 4.003 v -3.33 c 0.46 -0.138 0.89 -0.323 1.3 -0.547 l 2.43 2.432 l 2.822 -2.832 l -2.42 -2.422 c 0.222 -0.41 0.4 -0.85 0.535' +\n '-1.297 H 32.699 Z M 22.699 21.987 c -2.1 0 -3.803 -1.703 -3.803 -3.803 c 0 -2.1 1.703 -3.803 3.803 -3.803 c 2.1 0 3.803 ' +\n '1.703 3.803 3.803 C 26.502 20.285 24.8 21.987 22.699 21.987 Z',\n 'Receive': 'M 12.217 12.134 v 13.334 h 20 V 12.134 H 12.217 Z M 30.44 13.007 l -8.223 5.35 l -8.223 -5.35 H 30.44 Z M 13.09' +\n ' 24.594 V 13.459 l 9.127 5.94 l 9.127 -5.94 v 11.135 H 13.09 Z',\n 'Send': 'M0,1.2260086 L8.0000002,8.3380068 16,1.2260086 16,12.000007 0,12.000007 z M1.6300015,0 L14.371001,0 8.0000055,5.662 z',\n 'InstantiatingReceive': 'M 16.306 17.39 v 8.79 h 13.198 v -8.79 H 16.306 Z M 28.375 17.946 l -5.47 3.558 l -5.47 -3.558 ' +\n 'H 28.375 Z M 28.948 25.625 H 16.861 v -7.389 l 6.043 3.931 l 6.043 -3.931 V 25.625 Z M 22.905 11.785' +\n 'c -5.514 0 -9.999 4.486 -9.999 10 c 0 5.514 4.485 10 9.999 10 s 9.999 -4.486 9.999 -10 ' +\n 'C 32.904 16.272 28.419 11.785 22.905 11.785 Z M 22.905 31.239 c -5.212 0 -9.453 -4.241 -9.453 -9.454' +\n 'c 0 -5.212 4.241 -9.453 9.453 -9.453 s 9.452 4.241 9.452 9.453 C 32.357 26.998 28.117 31.239 22.905 31.239 Z',\n 'Manual': 'M9.21 612 L5.82 612 L1.07 612 a1.07317 1 -180 0 1 -1.07317 -1 L0 604.75 A3.42007 1.59344 -180 0 0 1.61 604 L2.6 604 L5.99 604 a0.721171 0.672 0 0 1 0.721171 0.672 a0.721171 0.672 0 0 1 -0.721171 0.672 L2.6 605.34 a0.48818 0.183302 -90 0 0 0.0837073 0.342385 L5.63 605.69 a0.721171 0.672 0 0 1 0.184585 -0.0223847 L10.28 605.66 a0.721171 0.672 0 0 1 0.721171 0.672 a0.721171 0.672 0 0 1 -0.721171 0.672 L5.82 607.01 a0.721171 0.672 0 0 1 -0.184585 -0.0223847 L5.63 607.35 a0.721171 0.672 0 0 1 0.184585 -0.0223847 L10.01 607.33 a0.721171 0.672 0 0 1 0.721171 0.672 a0.721171 0.672 0 0 1 -0.721171 0.672 L5.82 608.67 a0.721171 0.672 0 0 1 -0.184585 -0.0223847 L5.63 609.01 a0.721171 0.672 0 0 1 0.184585 -0.0223847 L9.47 608.99 a0.721171 0.672 0 0 1 0.721171 0.672 a0.721171 0.672 0 0 1 -0.721171 0.672 L5.82 610.34 a0.721171 0.672 0 0 1 -0.184585 -0.0223847 L5.63 610.68 a0.721171 0.672 0 0 1 0.184585 -0.0223847 L9.21 610.66 a0.721171 0.672 0 0 1 0.721171 0.672 a0.721171 0.672 0 0 1 -0.721171 0.672',\n 'BusinessRule': 'M 32.844 13.245 h -0.089 v 0 H 13.764 v -0.015 h -1.009 v 16.989 h 0.095 v 0.011 h 19.716 v -0.011 h 0.278 ' +\n 'V 13.245 Z M 31.844 14.229 v 4.185 h -18.08 v -4.185 H 31.844 Z M 18.168 25.306 v 3.938 h -4.404 v -3.938 H 18.168 Z ' +\n 'M 13.764 24.322 v -4.923 h 4.404 v 4.923 H 13.764 Z M 19.177 25.306 h 12.667 v 3.938 H 19.177 V 25.306 Z M 19.177 24.322' +\n 'v -4.923 h 12.667 v 4.923 H 19.177 Z',\n 'User': 'M8.6751149,13.75 L10.79009,18.703003 11.664047,18.696991 13.792084,13.75 13.824066,13.75 C18.177001,13.75 21.709022,' +\n '17.259003 21.748998,21.60199 21.748998,21.649994 21.743993,21.700012 21.735021,21.747009 21.137981,24.774994 18.775997,' +\n '27.144989 15.74904,27.75 L6.7491024,27.75 C3.7231224,27.144989 1.3601628,24.774994 0.76312089,21.747009 0.75414884,21.700012 0.74914402,' +\n '21.649994 0.75012076,21.60199 0.78912175,17.259003 4.3221171,13.75 8.6751149,13.75 z M11.249014,0.75 C14.287014,0.75 16.749015,' +\n '3.2119999 16.749015,6.25 16.749015,9.2880001 14.287014,11.75 11.249014,11.75 8.211015,11.75 5.7490147,9.2880001 5.7490147,6.25 5.7490147,3.2119999 8.211015,0.75 11.249014,0.75 z',\n 'Script': 'M22.3,80.4 A82.9529,77.0159,-180,0,0,10.3,46.7 A69.8467,64.8477,0,0,1,0,19.7 A27.6207,25.6439,0,0,1,12.1,0 L84.7,0 A37.4124,34.7347,-180,0,0,77.7,19.6 A82.8871,76.9547,' +\n '-180,0,0,89.7,53.3 A69.8146,64.81790000000001,0,0,1,100,80.3 A27.603399999999997,25.6278,0,0,1,87.9,100 L15.3,100 A37.4265,34.7479,-180,0,0,22.3,80.4 M12.5,28.6 L67.3,28.6 M18.3,42.9 L72.1,42.9 M80.8,' +\n '57.1 L26,57.1 M85.6,71.4 L32.6,71.4'\n};\nvar bpmnLoopShapes = {\n 'None': '',\n 'Standard': 'M 52.002 73.379 c -2.494 -2.536 -6.55 -2.534 -9.043 0 c -1.208 1.228 -1.874 2.861 -1.874 4.598 ' +\n 'c 0 1.225 0.337 2.395 0.957 3.411 l -1.167 1.186 l 2.071 0.458 l 2.071 0.458 l -0.45 -2.106 l -0.45 -2.106 l -1.292 1.314' +\n 'c -1.119 -2.065 -0.842 -4.709 0.877 -6.458 c 2.084 -2.119 5.475 -2.117 7.557 0 c 2.083 2.119 2.083 5.565 0 7.685' +\n 'c -0.976 0.992 -2.272 1.557 -3.65 1.59 l 0.025 1.068 c 1.65 -0.041 3.2 -0.716 4.368 -1.903 ' +\n 'c 1.208 -1.228 1.874 -2.861 1.874 -4.597 C 53.875 76.24 53.209 74.607 52.002 73.379 Z',\n 'ParallelMultiInstance': 'M 51.5,69.5 L52.5,69.5 L52.5,84.5 L51.5 84.5 Z M 46.5,69.5 L47.5,69.5 L47.5,84.5 L46.5 84.5 Z' +\n ' M 41.5,69.5 L42.5,69.5 L42.5,84.5 L41.5 84.5 Z ',\n 'SequenceMultiInstance': 'M 40.375,71.5 L 55.375,71.5 L 55.375,72.5 L 40.375,72.5 Z M 40.375,76.5 L 55.375,76.5 ' +\n 'L 55.375,77.5 L 40.375,77.5 Z M 40.375,76.5 L 55.375,76.5 L 55.375,77.5 L 40.375,77.5 Z M 40.375,81.5 L 55.375,81.5' +\n 'L 55.375,82.5 L 40.375,82.5 Z'\n};\n\n/* eslint-disable jsdoc/require-returns */\n/**\n * ConnectorBridging defines the bridging behavior\n */\n/** @private */\nvar ConnectorBridging = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the bridging module\n *\n * @private\n */\n function ConnectorBridging() {\n //constructs the bridging module\n }\n /**\n * @param {Connector}conn - provide the target value.\n * @param {Diagram}diagram - provide the target value.\n * @private\n */\n ConnectorBridging.prototype.updateBridging = function (conn, diagram) {\n var lastBridge = [];\n var bounds;\n conn.bridges = [];\n if (canBridge(conn, diagram)) {\n // if (this.canBridge(conn, diagram)) {\n var points1 = this.getPoints(conn);\n bounds = Rect.toBounds(points1);\n var bridgeSpacing = conn.bridgeSpace;\n var bgedir = diagram.bridgeDirection;\n var count = -1;\n var quads = diagram.connectors;\n for (var q = 0; q < quads.length; q++) {\n var connector1 = quads[parseInt(q.toString(), 10)];\n //EJ2-868564- Bridging is enabled when connector visibility is set to False\n if (conn && connector1 && conn.id !== connector1.id && connector1.visible) {\n var points2 = this.getPoints(connector1);\n var bounds1 = Rect.toBounds(points2);\n if (this.intersectsRect(bounds, bounds1)) {\n var intersectPts = this.intersect(points1, points2, false, bgedir, true);\n if (intersectPts.length > 0) {\n for (var i = 0; i < intersectPts.length; i++) {\n var fullLength = 0;\n var length_1 = 0;\n var segmentIndex = 0;\n var pointIndex = 0;\n var obj = this.getLengthAtFractionPoint(conn, intersectPts[parseInt(i.toString(), 10)]);\n if (obj.pointIndex !== -1) {\n length_1 = obj.lengthFractionIndex;\n fullLength = obj.fullLength;\n segmentIndex = obj.segmentIndex;\n pointIndex = obj.pointIndex;\n var stBridge = this.getPointAtLength((length_1 - (bridgeSpacing / 2)), points1);\n var enBridge = this.getPointAtLength((length_1 + (bridgeSpacing / 2)), points1);\n if (this.isEmptyPoint(enBridge)) {\n enBridge = stBridge;\n }\n var end = void 0;\n var start = conn.sourcePoint;\n if (conn.type === 'Straight') {\n end = conn.targetPoint;\n }\n else {\n end = conn.intermediatePoints[parseInt(pointIndex.toString(), 10)];\n }\n var angle = this.angleCalculation(start, end);\n if (lastBridge.length) {\n var fixedPoint = conn.sourcePoint;\n var fix = Math.abs(this.lengthCalculation(fixedPoint, enBridge));\n var var1 = 0;\n var insertAt = -1;\n count = -1;\n for (var k = 0; k < lastBridge[parseInt(segmentIndex.toString(), 10)].bridges.length; k++) {\n count++;\n var arcSeg = lastBridge[parseInt(segmentIndex.toString(), 10)].bridges[parseInt(k.toString(), 10)];\n var1 = Math.abs(this.lengthCalculation(fixedPoint, arcSeg.endPoint));\n if (fix < var1) {\n insertAt = count;\n break;\n }\n }\n if (insertAt >= 0) {\n //let paths: ArcSegment;\n // eslint-disable-next-line max-len\n var paths = this.createSegment(stBridge, enBridge, angle, bgedir, pointIndex, conn, diagram);\n paths.target = connector1.id;\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridges.splice(insertAt, 0, paths);\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridges.join();\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridgeStartPoint.splice(insertAt, 0, stBridge);\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridgeStartPoint.join();\n lastBridge[parseInt(segmentIndex.toString(), 10)].segmentIndex = segmentIndex;\n }\n else {\n //let paths: ArcSegment;\n // eslint-disable-next-line max-len\n var paths = this.createSegment(stBridge, enBridge, angle, bgedir, pointIndex, conn, diagram);\n paths.target = connector1.id;\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridges.push(paths);\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridgeStartPoint.push(stBridge);\n lastBridge[parseInt(segmentIndex.toString(), 10)].segmentIndex = segmentIndex;\n }\n }\n else {\n if (!isNaN(stBridge.x) && !isNaN(stBridge.y) && !this.isEmptyPoint(enBridge)) {\n //let arcs: ArcSegment;\n var bges = [];\n var bgept = [];\n // eslint-disable-next-line max-len\n var arcs = this.createSegment(stBridge, enBridge, angle, bgedir, pointIndex, conn, diagram);\n var bgseg = {\n bridges: bges, bridgeStartPoint: bgept, segmentIndex: segmentIndex\n };\n arcs.target = connector1.id;\n var stPoints = [];\n var edPoints = [];\n stPoints.push(stBridge);\n edPoints.push(enBridge);\n lastBridge[parseInt(segmentIndex.toString(), 10)] = bgseg;\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridges.push(arcs);\n lastBridge[parseInt(segmentIndex.toString(), 10)].bridgeStartPoint = stPoints;\n lastBridge[parseInt(segmentIndex.toString(), 10)].segmentIndex = segmentIndex;\n }\n }\n }\n }\n }\n }\n }\n }\n if (lastBridge.length !== 0) {\n this.firstBridge(lastBridge, conn, bridgeSpacing);\n }\n }\n };\n /**\n * @param {BridgeSegment[]}bridgeList - provide the bridgeList value.\n * @param {Connector}connector - provide the connector value.\n * @param {number}bridgeSpacing - provide the bridgeSpacing value.\n * @private\n */\n ConnectorBridging.prototype.firstBridge = function (bridgeList, connector, bridgeSpacing) {\n for (var i = 0; i < bridgeList.length; i++) {\n var bridge = bridgeList[parseInt(i.toString(), 10)];\n for (var k = 1; k < bridge.bridges.length; k++) {\n if (Point.findLength(bridge.bridges[parseInt(k.toString(), 10)].endPoint, bridge.bridges[k - 1].endPoint) < bridgeSpacing) {\n bridge.bridges[k - 1].endPoint = bridge.bridges[parseInt(k.toString(), 10)].endPoint;\n var subBridge = bridge.bridges[k - 1];\n var arc = this.createBridgeSegment(subBridge.startPoint, subBridge.endPoint, subBridge.angle, bridgeSpacing, subBridge.sweep);\n bridge.bridges[k - 1].path = arc;\n bridge.bridges.splice(k, 1);\n bridge.bridgeStartPoint.splice(k, 1);\n k--;\n }\n }\n var pre = connector.sourcePoint;\n for (var j = 0; j < bridge.bridges.length; j++) {\n var subBridge = bridge.bridges[parseInt(j.toString(), 10)]; //const preventChecking: boolean = true;\n pre = subBridge.endPoint;\n connector.bridges.push(subBridge);\n }\n }\n };\n /**\n * @returns { ArcSegment } checkSourcePointInTarget method .\\\n * @param {PointModel}st- provide the st value.\n * @param {PointModel}end- provide the end value.\n * @param {number}angle- provide the angle value.\n * @param {BridgeDirection}direction- provide the direction value.\n * @param {number}index- provide the index value.\n * @param {Connector}conn- provide the conn value.\n * @param {Diagram} diagram- provide the diagram value.\n * @private\n */\n ConnectorBridging.prototype.createSegment = function (st, end, angle, direction, index, conn, diagram) {\n //let arc: string;\n //let sweep: number;\n var path = {\n angle: 0, endPoint: { x: 0, y: 0 }, target: '', path: '',\n segmentPointIndex: -1, startPoint: { x: 0, y: 0 }, sweep: 1, rendered: false\n };\n var sweep = this.sweepDirection(angle, direction, conn, diagram);\n var arc = this.createBridgeSegment(st, end, angle, conn.bridgeSpace, sweep);\n path.path = arc;\n path.startPoint = st;\n path.endPoint = end;\n path.angle = angle;\n path.segmentPointIndex = index;\n path.sweep = sweep;\n return path;\n };\n /**\n * @param {PointModel}startPt- provide the startPt value.\n * @param {PointModel}endPt- provide the endPt value.\n * @param {number}angle- provide the angle value.\n * @param {number}bridgeSpace- provide the bridgeSpace value.\n * @param {number}sweep- provide the sweep value.\n * @private\n */\n ConnectorBridging.prototype.createBridgeSegment = function (startPt, endPt, angle, bridgeSpace, sweep) {\n var path = 'A ' + bridgeSpace / 2 + ' ' + bridgeSpace / 2 + ' ' + angle + ' , 1 ' + sweep + ' ' + endPt.x + ',' + endPt.y;\n return path;\n };\n /**\n * @param {number}angle- provide the source value.\n * @param {BridgeDirection}bridgeDirection- provide the source value.\n * @param {Connector}connector- provide the source value.\n * @param {Diagram}diagram- provide the source value.\n * @private\n */\n ConnectorBridging.prototype.sweepDirection = function (angle, bridgeDirection, connector, diagram) {\n var angle1 = Math.abs(angle);\n var sweep;\n switch (bridgeDirection) {\n case 'Top':\n case 'Bottom':\n sweep = 1;\n if (angle1 >= 0 && angle1 <= 90) {\n sweep = 0;\n }\n break;\n case 'Left':\n case 'Right':\n sweep = 1;\n if (angle < 0 && angle >= -180) {\n sweep = 0;\n }\n break;\n }\n if (bridgeDirection === 'Right' || bridgeDirection === 'Bottom') {\n if (sweep === 0) {\n sweep = 1;\n }\n else {\n sweep = 0;\n }\n }\n return sweep;\n };\n /** @private */\n ConnectorBridging.prototype.getPointAtLength = function (length, pts) {\n var run = 0;\n var pre;\n var found = { x: 0, y: 0 };\n for (var i = 0; i < pts.length; i++) {\n var pt = pts[parseInt(i.toString(), 10)];\n if (!pre) {\n pre = pt;\n continue;\n }\n else {\n var l = this.lengthCalculation(pre, pt);\n if (run + l > length) {\n var r = length - run;\n var deg = Point.findAngle(pre, pt);\n var x = r * Math.cos(deg * Math.PI / 180);\n var y = r * Math.sin(deg * Math.PI / 180);\n found = { x: pre.x + x, y: pre.y + y };\n break;\n }\n else {\n run += l;\n }\n }\n pre = pt;\n }\n return found;\n };\n /**\n * @param {PointModel[]}connector- provide the source value.\n * @private\n */\n ConnectorBridging.prototype.getPoints = function (connector) {\n var points = [];\n if (connector.intermediatePoints && (connector.type === 'Straight' || connector.type === 'Orthogonal')) {\n for (var j = 0; j < connector.intermediatePoints.length; j++) {\n points.push(connector.intermediatePoints[parseInt(j.toString(), 10)]);\n }\n }\n return points;\n };\n ConnectorBridging.prototype.intersectsRect = function (rect1, rect2) {\n return ((((rect2.x < (rect1.x + rect1.width)) && (rect1.x < (rect2.x + rect2.width)))\n && (rect2.y < (rect1.y + rect1.height))) && (rect1.y < (rect2.y + rect2.height)));\n };\n /**\n * @param {PointModel[]}points1- provide the source value.\n * @param {PointModel[]}points2- provide the source value.\n * @param {boolean}self- provide the source value.\n * @param {BridgeDirection}bridgeDirection- provide the source value.\n * @param {PointModel[]}zOrder- provide the source value.\n * @private\n */\n ConnectorBridging.prototype.intersect = function (points1, points2, self, bridgeDirection, zOrder) {\n if (self && points2.length >= 2) {\n points2.splice(0, 1);\n points2.splice(0, 1);\n }\n var points = [];\n for (var i = 0; i < points1.length - 1; i++) {\n var pt = this.inter1(points1[parseInt(i.toString(), 10)], points1[i + 1], points2, zOrder, bridgeDirection);\n if (pt.length > 0) {\n for (var k = 0; k < pt.length; k++) {\n points.push(pt[parseInt(k.toString(), 10)]);\n }\n }\n if (self && points2.length >= 1) {\n points2.splice(0, 1);\n }\n }\n return points;\n };\n /**\n * @param {PointModel}startPt- provide the target value.\n * @param {PointModel}endPt- provide the target value.\n * @param {PointModel[]}pts- provide the target value.\n * @param {boolean}zOrder- provide the target value.\n * @param {BridgeDirection}bridgeDirection- provide the target value.\n * @private\n */\n ConnectorBridging.prototype.inter1 = function (startPt, endPt, pts, zOrder, bridgeDirection) {\n var points1 = [];\n for (var i = 0; i < pts.length - 1; i++) {\n var point = intersect2(startPt, endPt, pts[parseInt(i.toString(), 10)], pts[i + 1]);\n if (!this.isEmptyPoint(point)) {\n var angle = this.angleCalculation(startPt, endPt);\n var angle1 = this.angleCalculation(pts[parseInt(i.toString(), 10)], pts[i + 1]);\n angle = this.checkForHorizontalLine(angle);\n angle1 = this.checkForHorizontalLine(angle1);\n switch (bridgeDirection) {\n case 'Left':\n case 'Right':\n if (angle > angle1) {\n points1.push(point);\n }\n break;\n case 'Top':\n case 'Bottom':\n if (angle < angle1) {\n points1.push(point);\n }\n break;\n }\n if (angle === angle1 && zOrder) {\n points1.push(point);\n }\n }\n }\n return points1;\n };\n ConnectorBridging.prototype.checkForHorizontalLine = function (angle) {\n var temp = 0;\n var roundedAngle = Math.abs(angle);\n if (roundedAngle > 90) {\n temp = 180 - roundedAngle;\n }\n else {\n temp = roundedAngle;\n }\n return temp;\n };\n ConnectorBridging.prototype.isEmptyPoint = function (point) {\n return point.x === 0 && point.y === 0;\n };\n ConnectorBridging.prototype.getLengthAtFractionPoint = function (connector, pointAt) {\n var confirm = 100;\n var pointIndex = -1;\n var fullLength = 0;\n var segmentIndex = -1;\n var count = 0;\n var lengthAtFractionPt = 0;\n var pt1 = connector.sourcePoint;\n var previouspt2 = pt1;\n var points = [];\n for (var i = 0; i < connector.intermediatePoints.length; i++) {\n var point2 = connector.intermediatePoints[parseInt(i.toString(), 10)];\n points.push(point2);\n }\n for (var j = 0; j < points.length; j++) {\n var pt2 = points[parseInt(j.toString(), 10)];\n var suspect = this.getSlope(pt2, pt1, pointAt, connector);\n if (suspect < confirm) {\n confirm = suspect;\n lengthAtFractionPt = fullLength + this.lengthCalculation(pointAt, previouspt2);\n segmentIndex = count;\n pointIndex = j;\n }\n fullLength += Point.findLength(pt2, pt1);\n pt1 = pt2;\n previouspt2 = pt2;\n }\n count++;\n var lengthFraction = {\n lengthFractionIndex: lengthAtFractionPt, fullLength: fullLength,\n segmentIndex: segmentIndex, pointIndex: pointIndex\n };\n return lengthFraction;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ConnectorBridging.prototype.getSlope = function (startPt, endPt, point, connector) {\n var three = 3.0;\n var delX = Math.abs(startPt.x - endPt.x);\n var delY = Math.abs(startPt.y - endPt.y);\n var lhs = ((point.y - startPt.y) / (endPt.y - startPt.y));\n var rhs = ((point.x - startPt.x) / (endPt.x - startPt.x));\n if (!isFinite(lhs) || !isFinite(rhs) || isNaN(lhs) || isNaN(rhs)) {\n if (startPt.x === endPt.x) {\n if (startPt.y === endPt.y) {\n return 10000;\n }\n else if (((startPt.y > point.y) && (point.y > endPt.y)) || ((startPt.y < point.y) && (point.y < endPt.y))) {\n return Math.abs(startPt.x - point.x);\n }\n }\n else if (startPt.y === endPt.y) {\n if (((startPt.x > point.x) && (point.x > endPt.x)) || ((startPt.x < point.x) && (point.x < endPt.x))) {\n return Math.abs(startPt.y - point.y);\n }\n }\n }\n else {\n if ((startPt.x >= point.x && point.x >= endPt.x) || (startPt.x <= point.x && point.x <= endPt.x) || delX < three) {\n if ((startPt.y >= point.y && point.y >= endPt.y) || (startPt.y <= point.y && point.y <= endPt.y) || delY < three) {\n return Math.abs(lhs - rhs);\n }\n }\n }\n return 10000;\n };\n /**\n * @param {PointModel}startPt- provide the target value.\n * @param {PointModel}endPt- provide the target value.\n * @private\n */\n ConnectorBridging.prototype.angleCalculation = function (startPt, endPt) {\n var xDiff = startPt.x - endPt.x;\n var yDiff = startPt.y - endPt.y;\n return Math.atan2(yDiff, xDiff) * (180 / Math.PI);\n };\n ConnectorBridging.prototype.lengthCalculation = function (startPt, endPt) {\n //removed a try catch from here\n var len = Math.sqrt(((startPt.x - endPt.x) * (startPt.x - endPt.x)) + ((startPt.y - endPt.y) * (startPt.y - endPt.y)));\n return len;\n };\n /**\n *To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n ConnectorBridging.prototype.destroy = function () {\n /**\n * Destroys the bridging module\n */\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n ConnectorBridging.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Bridging';\n };\n return ConnectorBridging;\n}());\n\n/**\n * Snapping\n */\nvar Snapping = /** @__PURE__ @class */ (function () {\n function Snapping(diagram) {\n this.line = [];\n this.diagram = diagram;\n }\n /** @private */\n Snapping.prototype.canSnap = function () {\n return (this.diagram.snapSettings.constraints\n & (SnapConstraints.SnapToObject | SnapConstraints.SnapToLines)) !== 0;\n };\n Snapping.prototype.getWrapperObject = function (selectedObject, nameTable) {\n if (selectedObject.nodes && selectedObject.nodes.length > 0\n && (this.diagram.snapSettings.constraints & SnapConstraints.SnapToLines || this.diagram.snapSettings.constraints\n & SnapConstraints.SnapToObject)) {\n for (var i = 0; i < selectedObject.nodes.length; i++) {\n if (((selectedObject.nodes[parseInt(i.toString(), 10)].shape.type === 'SwimLane' || selectedObject.nodes[parseInt(i.toString(), 10)].isLane)\n || selectedObject.nodes[parseInt(i.toString(), 10)].parentId !== ''\n && nameTable[(selectedObject.nodes[parseInt(i.toString(), 10)].parentId)]\n && nameTable[(selectedObject.nodes[parseInt(i.toString(), 10)].parentId)].isLane) && nameTable['helper']) {\n return nameTable['helper'].wrapper;\n }\n else {\n return selectedObject.wrapper;\n }\n }\n }\n return selectedObject.wrapper;\n };\n Snapping.prototype.setSnapLineColor = function () {\n return this.diagram.snapSettings.snapLineColor;\n };\n /**\n * Snap to object\n *\n * @private\n */\n Snapping.prototype.snapPoint = function (diagram, selectedObject, towardsLeft, towardsTop, delta, startPoint, endPoint) {\n var snapSettings = this.diagram.snapSettings;\n var zoomFactor = this.diagram.scroller.currentZoom;\n var offset = { x: 0, y: 0 };\n var wrapper = this.getWrapperObject(selectedObject, diagram.nameTable);\n var bounds = getBounds(wrapper);\n var horizontallysnapped = { snapped: false, offset: 0 };\n var verticallysnapped = { snapped: false, offset: 0 };\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) {\n //let snapLine: SVGElement;\n var snapLine = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n snapLine.setAttribute('id', '_SnappingLines');\n snapLine.setAttribute('shapeRendering', 'crispEdges');\n this.getAdornerLayerSvg().appendChild(snapLine);\n this.snapObject(diagram, selectedObject, snapLine, horizontallysnapped, verticallysnapped, delta, startPoint === endPoint);\n }\n //original position\n var left = bounds.x + delta.x;\n var top = bounds.y + delta.y;\n var right = bounds.x + bounds.width + delta.x;\n var bottom = bounds.y + bounds.height + delta.y;\n var scaledIntervals = snapSettings.verticalGridlines.scaledIntervals;\n //snapped positions\n var roundedRight = this.round(right, scaledIntervals, zoomFactor);\n var roundedLeft = this.round(left, scaledIntervals, zoomFactor);\n scaledIntervals = snapSettings.horizontalGridlines.scaledIntervals;\n var roundedTop = this.round(top, scaledIntervals, zoomFactor);\n var roundedBottom = this.round(bottom, scaledIntervals, zoomFactor);\n //currentposition\n var currentright = bounds.x + bounds.width;\n var currentbottom = bounds.y + bounds.height;\n if (!horizontallysnapped.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToVerticalLines) {\n if (Math.abs(delta.x) >= 1) {\n if (towardsLeft) {\n if (Math.abs(roundedRight - currentright) > Math.abs(roundedLeft - bounds.x)) {\n offset.x += roundedLeft - bounds.x;\n }\n else {\n offset.x += roundedRight - currentright;\n }\n }\n else {\n if (Math.abs(roundedRight - currentright) < Math.abs(roundedLeft - bounds.x)) {\n offset.x += roundedRight - currentright;\n }\n else {\n offset.x += roundedLeft - bounds.x;\n }\n }\n }\n }\n else {\n offset.x = endPoint.x - startPoint.x;\n }\n }\n else {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) {\n offset.x = horizontallysnapped.offset;\n }\n else {\n offset.x = endPoint.x - startPoint.x;\n }\n }\n if (!verticallysnapped.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToHorizontalLines) {\n if (Math.abs(delta.y) >= 1) {\n if (towardsTop) {\n if (Math.abs(roundedBottom - currentbottom) > Math.abs(roundedTop - bounds.y)) {\n offset.y += roundedTop - bounds.y;\n }\n else {\n offset.y += roundedBottom - currentbottom;\n }\n }\n else {\n if (Math.abs(roundedBottom - currentbottom) < Math.abs(roundedTop - bounds.y)) {\n offset.y += roundedBottom - currentbottom;\n }\n else {\n offset.y += roundedTop - bounds.y;\n }\n }\n }\n }\n else {\n offset.y = endPoint.y - startPoint.y;\n }\n }\n else {\n offset.y = verticallysnapped.offset;\n }\n return offset;\n };\n /**\n * @private\n */\n Snapping.prototype.round = function (value, snapIntervals, scale) {\n if (scale === 1) {\n scale = Math.pow(2, Math.floor(Math.log(scale) / Math.log(2)));\n }\n else {\n scale = scale;\n }\n var cutoff = 0;\n var i = 0;\n for (i = 0; i < snapIntervals.length; i++) {\n cutoff += snapIntervals[parseInt(i.toString(), 10)];\n }\n cutoff /= scale;\n var quotient = Math.floor(Math.abs(value) / cutoff);\n var bal = value % cutoff;\n var prev = quotient * cutoff;\n if (prev !== value) {\n if (value >= 0) {\n for (i = 0; i < snapIntervals.length; i++) {\n if (bal <= snapIntervals[parseInt(i.toString(), 10)] / scale) {\n return prev + (bal < (snapIntervals[parseInt(i.toString(), 10)] / (2 * scale))\n ? 0 : snapIntervals[parseInt(i.toString(), 10)] / scale);\n }\n else {\n prev += snapIntervals[parseInt(i.toString(), 10)] / scale;\n bal -= snapIntervals[parseInt(i.toString(), 10)] / scale;\n }\n }\n }\n else {\n prev = prev * -1;\n for (i = snapIntervals.length - 1; i >= 0; i--) {\n if (Math.abs(bal) <= snapIntervals[parseInt(i.toString(), 10)] / scale) {\n return prev - (Math.abs(bal) < (snapIntervals[parseInt(i.toString(), 10)] / (2 * scale))\n ? 0 : snapIntervals[parseInt(i.toString(), 10)] / scale);\n }\n else {\n prev -= snapIntervals[parseInt(i.toString(), 10)] / scale;\n bal += snapIntervals[parseInt(i.toString(), 10)] / scale;\n }\n }\n }\n }\n return value;\n };\n //Snap to Object\n Snapping.prototype.snapObject = function (diagram, selectedObject, g, horizontalSnap, verticalSnap, delta, ended) {\n var lengthX = null;\n var lengthY;\n var hTarget;\n var vTarget;\n var scroller = this.diagram.scroller;\n var snapSettings = this.diagram.snapSettings;\n var objectsAtLeft = [];\n var objectsAtRight = [];\n var objectsAtTop = [];\n var objectsAtBottom = [];\n var wrapper = this.getWrapperObject(selectedObject, diagram.nameTable);\n var bounds = getBounds(wrapper);\n var scale = diagram.scroller.currentZoom;\n var hoffset = -scroller.horizontalOffset;\n var voffset = -scroller.verticalOffset;\n var snapObjDistance = snapSettings.snapObjectDistance / scale;\n var viewPort = new Rect(0, 0, scroller.viewPortWidth, scroller.viewPortHeight);\n var hIntersectRect = new Rect(hoffset / scale, (bounds.y - snapObjDistance - 5), viewPort.width / scale, (bounds.height + 2 * snapObjDistance + 10));\n var vIntersectRect = new Rect((bounds.x - snapObjDistance - 5), voffset / scale, (bounds.width + 2 * snapObjDistance + 10), viewPort.height / scale);\n viewPort = new Rect(hoffset / scale, voffset / scale, viewPort.width / scale, viewPort.height / scale);\n var nodes = this.findNodes(diagram.spatialSearch, selectedObject, vIntersectRect, viewPort);\n var i;\n var target;\n var targetBounds;\n var nameTable = diagram.nameTable;\n for (i = 0; i < nodes.length; i++) {\n target = nodes[parseInt(i.toString(), 10)];\n if (this.canBeTarget(diagram, target)) {\n if (!(this.diagram.nameTable[target.id] instanceof Connector) && this.canConsider(nameTable, selectedObject, target)) {\n targetBounds = target.bounds;\n if (targetBounds.height + targetBounds.y < delta.y + bounds.y) {\n objectsAtTop.push({\n obj: target, distance: Math.abs(bounds.y + delta.y - targetBounds.y - targetBounds.height)\n });\n }\n else if (targetBounds.y > bounds.y + delta.y + bounds.height) {\n objectsAtBottom.push({ obj: target, distance: Math.abs(bounds.y + delta.y + bounds.height - targetBounds.y) });\n }\n if (lengthX == null || lengthX > Math.abs(targetBounds.y - bounds.y - delta.y)) {\n if (Math.abs(targetBounds.x + targetBounds.width / 2 - (bounds.x + bounds.width / 2 + delta.x)) <=\n snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'centerX');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x + targetBounds.width - (bounds.x + bounds.width + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'right');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x - (bounds.x + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'left');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x - (bounds.x + bounds.width + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'rightLeft');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x + targetBounds.width - (bounds.x + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'leftRight');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n }\n }\n }\n }\n nodes = this.findNodes(diagram.spatialSearch, selectedObject, hIntersectRect, viewPort);\n for (var j = 0; j < nodes.length; j++) {\n target = nodes[parseInt(j.toString(), 10)];\n if (this.canBeTarget(diagram, target)) {\n if (!(this.diagram.nameTable[target.id] instanceof Connector) && this.canConsider(nameTable, selectedObject, target)) {\n targetBounds = target.bounds;\n if (targetBounds.x + targetBounds.width < bounds.x + delta.x) {\n objectsAtLeft[objectsAtLeft.length] = {\n obj: target, distance: Math.abs((bounds.x + delta.x) - targetBounds.x - targetBounds.width)\n };\n }\n if (targetBounds.x > bounds.x + delta.x + bounds.width) {\n objectsAtRight[objectsAtRight.length] = {\n obj: target, distance: Math.abs(bounds.x + delta.x + bounds.width - targetBounds.x)\n };\n }\n if (lengthY == null || lengthY > Math.abs(targetBounds.x - bounds.x - delta.x)) {\n if (Math.abs(targetBounds.y + targetBounds.height / 2 - (bounds.y + bounds.height / 2 + delta.y))\n <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'centerY');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y - bounds.y - delta.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'top');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y + targetBounds.height - (bounds.y + bounds.height + delta.y)) <=\n snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'bottom');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y + targetBounds.height - bounds.y - delta.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'topBottom');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y - (bounds.y + bounds.height + delta.y)) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'bottomTop');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n }\n }\n }\n }\n this.createGuidelines(diagram, hTarget, vTarget, g, horizontalSnap, verticalSnap, ended);\n if (!horizontalSnap.snapped) {\n this.createHSpacingLines(diagram, g, selectedObject, objectsAtLeft, objectsAtRight, horizontalSnap, verticalSnap, ended, delta, snapObjDistance);\n }\n if (!verticalSnap.snapped) {\n this.createVSpacingLines(diagram, g, selectedObject, objectsAtTop, objectsAtBottom, horizontalSnap, verticalSnap, ended, delta, snapObjDistance);\n }\n };\n /**\n * @private\n */\n Snapping.prototype.snapConnectorEnd = function (point) {\n var snapSettings = this.diagram.snapSettings;\n var zoomFactor = this.diagram.scroller.currentZoom;\n if (snapSettings.constraints & SnapConstraints.SnapToLines) {\n point.x = this.round(point.x, snapSettings.verticalGridlines.scaledIntervals, zoomFactor);\n point.y = this.round(point.y, snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n }\n return point;\n };\n Snapping.prototype.canBeTarget = function (diagram, node) {\n node = this.diagram.nameTable[node.id];\n return !(isSelected(this.diagram, node, false));\n };\n Snapping.prototype.snapSize = function (diagram, horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, selectedObject, ended) {\n var lengthX;\n var lengthY;\n var snapSettings = this.diagram.snapSettings;\n var scroller = this.diagram.scroller;\n var hTarget;\n var vTarget;\n var bounds = getBounds(selectedObject.wrapper);\n var nameTable = diagram.nameTable;\n var sameWidth = [];\n var sameHeight = [];\n var scale = diagram.scroller.currentZoom;\n var hoffset = -scroller.horizontalOffset;\n var voffset = -scroller.verticalOffset;\n var snapObjDistance = snapSettings.snapObjectDistance / scale;\n var viewPort = new Rect(0, 0, scroller.viewPortWidth, scroller.viewPortHeight);\n var hintersectedrect = new Rect(hoffset / scale, (bounds.y - 5) / scale, viewPort.width / scale, (bounds.height + 10) / scale);\n var vintersectedrect = new Rect((bounds.x - 5) / scale, voffset / scale, (bounds.width + 10) / scale, viewPort.height / scale);\n viewPort = new Rect(hoffset / scale, voffset / scale, viewPort.width / scale, viewPort.height / scale);\n var nodesInView = [];\n var nodes = this.findNodes(diagram.spatialSearch, selectedObject, vintersectedrect, viewPort, nodesInView);\n var i;\n var target;\n var targetBounds;\n for (i = 0; i < nodes.length; i++) {\n target = nodes[parseInt(i.toString(), 10)];\n if (this.canConsider(nameTable, selectedObject, target) && !(this.diagram.nameTable[target.id] instanceof Connector)) {\n targetBounds = target.bounds;\n if (lengthX == null || lengthX > Math.abs(targetBounds.y - bounds.y)) {\n if (horizontalSnap.left) {\n if (Math.abs(bounds.x + deltaX - targetBounds.x) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'left');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(bounds.x + deltaX - targetBounds.x - targetBounds.width) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'leftRight');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n }\n else if (horizontalSnap.right) {\n if (Math.abs(bounds.x + deltaX + bounds.width - targetBounds.x - targetBounds.width) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'right');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(bounds.x + deltaX + bounds.width - targetBounds.x) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'rightLeft');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n }\n }\n }\n }\n nodes = this.findNodes(diagram.spatialSearch, selectedObject, hintersectedrect, viewPort);\n for (var i_1 = 0; i_1 < nodes.length; i_1++) {\n var target_1 = nodes[parseInt(i_1.toString(), 10)];\n if (this.canConsider(nameTable, selectedObject, target_1) && !(this.diagram.nameTable[target_1.id] instanceof Connector)) {\n var targetBounds_1 = target_1.bounds;\n if (lengthY == null || lengthY > Math.abs(targetBounds_1.x - bounds.x)) {\n if (verticalSnap.top) {\n if (Math.abs(bounds.y + deltaY - targetBounds_1.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'top');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n else if (Math.abs(bounds.y + deltaY - targetBounds_1.y - targetBounds_1.height) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'topBottom');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n }\n else if (verticalSnap.bottom) {\n if (Math.abs(bounds.y + bounds.height + deltaY - targetBounds_1.y - targetBounds_1.height) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'bottom');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n else if (Math.abs(bounds.y + bounds.height + deltaY - targetBounds_1.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'bottomTop');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n }\n }\n }\n }\n for (i = 0; i < nodesInView.length; i++) {\n target = nodesInView[parseInt(i.toString(), 10)];\n if (this.canConsider(nameTable, selectedObject, target)) {\n var targetBounds_2 = target.bounds;\n var delta = horizontalSnap.left ? -deltaX : deltaX;\n var difference = Math.abs(bounds.width + delta - targetBounds_2.width);\n var actualDiff = void 0;\n if (difference <= snapObjDistance) {\n actualDiff = horizontalSnap.left ? -targetBounds_2.width + bounds.width : targetBounds_2.width - bounds.width;\n sameWidth[sameWidth.length] = { source: target, difference: difference, offset: actualDiff };\n }\n delta = verticalSnap.top ? -deltaY : deltaY;\n var dify = Math.abs(bounds.height + delta - targetBounds_2.height);\n if (dify <= snapObjDistance) {\n actualDiff = verticalSnap.top ? -targetBounds_2.height + bounds.height : targetBounds_2.height - bounds.height;\n sameHeight[sameHeight.length] = { source: target, difference: dify, offset: actualDiff };\n }\n }\n }\n if (!diagram.getTool) {\n var g_1 = this.createGuidelines(diagram, hTarget, vTarget, snapLine, horizontalSnap, verticalSnap, ended);\n }\n if (!horizontalSnap.snapped && sameWidth.length > 0 && (horizontalSnap.left || horizontalSnap.right)) {\n this.addSameWidthLines(diagram, snapLine, sameWidth, horizontalSnap, ended, selectedObject);\n }\n if (!verticalSnap.snapped && sameHeight.length > 0 && (verticalSnap.top || verticalSnap.bottom)) {\n this.addSameHeightLines(diagram, snapLine, sameHeight, verticalSnap, ended, selectedObject);\n }\n };\n /**\n * Snap to object on top\n *\n * @private\n */\n Snapping.prototype.snapTop = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialBoundsT) {\n var dify = deltaY;\n verticalSnap.top = true;\n var y;\n horizontalSnap.left = horizontalSnap.right = false;\n var zoomFactor = this.diagram.scroller.currentZoom;\n //let initialBoundsT: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n y = initialBoundsT.y - initialBoundsT.height * shape.pivot.y + deltaY - (shape.offsetY - shape.height * shape.pivot.y);\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, deltaX, y, this.diagram.selectedItems, ended);\n }\n if (!verticalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToHorizontalLines) {\n var top_1 = initialBoundsT.y - initialBoundsT.height * shape.pivot.y;\n var actualTop = top_1 + deltaY;\n var roundedTop = this.round(actualTop, this.diagram.snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n dify = roundedTop - top_1;\n }\n }\n else {\n dify = (deltaY - y) + verticalSnap.offset;\n }\n return dify;\n };\n /**\n * Snap to object on right\n *\n * @private\n */\n Snapping.prototype.snapRight = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialBound) {\n var difx = deltaX;\n var x;\n horizontalSnap.right = true;\n verticalSnap.top = verticalSnap.bottom = false;\n var zoomFactor = this.diagram.scroller.currentZoom;\n //let initialBound: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n x = initialBound.x + initialBound.width * (1 - shape.pivot.x) + deltaX - (shape.offsetX + shape.width * (1 - shape.pivot.x));\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, x, deltaY, this.diagram.selectedItems, ended);\n }\n if (!horizontalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToVerticalLines) {\n var right = initialBound.x + initialBound.width * (1 - shape.pivot.x);\n var actualRight = right + deltaX;\n var roundedRight = this.round(actualRight, this.diagram.snapSettings.verticalGridlines.scaledIntervals, zoomFactor);\n difx = roundedRight - right;\n }\n }\n else {\n difx = (deltaX - x) + horizontalSnap.offset;\n }\n return difx;\n };\n /**\n * Snap to object on left\n *\n * @private\n */\n Snapping.prototype.snapLeft = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialBoundsB) {\n var difx = deltaX;\n var x = 0;\n horizontalSnap.left = true;\n verticalSnap.top = verticalSnap.bottom = false;\n var zoomFactor = this.diagram.scroller.currentZoom;\n //let initialBoundsB: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n x = initialBoundsB.x - initialBoundsB.width * shape.pivot.x + deltaX - (shape.offsetX - shape.width * shape.pivot.x);\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, x, deltaY, this.diagram.selectedItems, ended);\n }\n if (!horizontalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToVerticalLines) {\n var left = initialBoundsB.x - initialBoundsB.width * shape.pivot.x;\n var actualLeft = left + deltaX;\n var roundedLeft = this.round(actualLeft, this.diagram.snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n difx = roundedLeft - left;\n }\n }\n else {\n difx = (deltaX - x) + horizontalSnap.offset;\n }\n return difx;\n };\n /**\n * Snap to object on bottom\n *\n * @private\n */\n Snapping.prototype.snapBottom = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialRect) {\n var dify = deltaY;\n verticalSnap.bottom = true;\n horizontalSnap.left = horizontalSnap.right = false;\n var zoomFactor = this.diagram.scroller.currentZoom;\n var y = 0;\n //let initialRect: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n y = initialRect.y + initialRect.height * (1 - shape.pivot.y) + deltaY - (shape.offsetY + shape.height * (1 - shape.pivot.y));\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, deltaX, y, this.diagram.selectedItems, ended);\n }\n // eslint-disable-next-line max-len\n var bounds = ((shape instanceof TextElement) || (shape instanceof DiagramHtmlElement)) ? getBounds(shape) :\n getBounds(shape.wrapper);\n if (!verticalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToHorizontalLines) {\n var bottom = initialRect.y + initialRect.height * (1 - shape.pivot.y);\n var actualBottom = bottom + deltaY;\n var roundedBottom = this.round(actualBottom, this.diagram.snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n dify = roundedBottom - bottom;\n }\n }\n else {\n dify = (deltaY - y) + verticalSnap.offset;\n }\n return dify;\n };\n //To create the same width and same size lines\n Snapping.prototype.createGuidelines = function (diagram, hTarget, vTarget, snapLine, horizontalSnap, verticalSnap, ended) {\n if (hTarget) {\n horizontalSnap.offset = hTarget.offsetX;\n horizontalSnap.snapped = true;\n if (!ended) {\n if (hTarget.type === 'sideAlign') {\n this.renderAlignmentLines(hTarget.start, hTarget.end, snapLine, diagram.scroller.transform);\n }\n else {\n this.renderAlignmentLines(hTarget.start, hTarget.end, snapLine, diagram.scroller.transform);\n }\n }\n }\n if (vTarget) {\n verticalSnap.offset = vTarget.offsetY;\n verticalSnap.snapped = true;\n if (!ended) {\n if (vTarget.type === 'sideAlign') {\n this.renderAlignmentLines(vTarget.start, vTarget.end, snapLine, diagram.scroller.transform);\n }\n else {\n this.renderAlignmentLines(vTarget.start, vTarget.end, snapLine, diagram.scroller.transform);\n }\n }\n }\n return snapLine;\n };\n //To create the alignment lines\n Snapping.prototype.renderAlignmentLines = function (start, end, svg, transform) {\n start = {\n x: (start.x + transform.tx) * transform.scale,\n y: (start.y + transform.ty) * transform.scale\n };\n end = {\n x: (end.x + transform.tx) * transform.scale,\n y: (end.y + transform.ty) * transform.scale\n };\n var line1 = {\n stroke: this.setSnapLineColor(), strokeWidth: 1, startPoint: { x: start.x, y: start.y },\n endPoint: { x: end.x, y: end.y }, fill: this.setSnapLineColor(), dashArray: '', width: 1,\n x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId()\n };\n var i = 0;\n this.line.push(line1);\n for (i = 0; i < this.line.length; i++) {\n this.diagram.diagramRenderer.drawLine(svg, this.line.pop());\n }\n };\n //To create Horizontal spacing lines\n Snapping.prototype.createHSpacingLines = function (diagram, g, shape, objectsAtLeft, objectsAtRight, horizontalSnap, verticalSnap, ended, delta, snapObjDistance) {\n var top = 0;\n this.sortByDistance(objectsAtLeft, 'distance', true);\n this.sortByDistance(objectsAtRight, 'distance', true);\n var equallySpaced = [];\n var bounds;\n if (diagram.selectedObject.helperObject) {\n bounds = getBounds(diagram.selectedObject.helperObject.wrapper);\n }\n else {\n bounds = getBounds(shape.wrapper);\n }\n var nearestleft;\n var nearestright;\n var targetBounds;\n var equaldistance;\n if (objectsAtLeft.length > 0) {\n equallySpaced[equallySpaced.length] = objectsAtLeft[0];\n nearestleft = ((objectsAtLeft[0].obj).bounds);\n top = nearestleft.y;\n if (objectsAtLeft.length > 1) {\n targetBounds = ((objectsAtLeft[1].obj).bounds);\n equaldistance = nearestleft.x - targetBounds.x - targetBounds.width;\n if (Math.abs(equaldistance - objectsAtLeft[0].distance) <= snapObjDistance) {\n top = this.findEquallySpacedNodesAtLeft(objectsAtLeft, equaldistance, top, equallySpaced);\n }\n else {\n equaldistance = objectsAtLeft[0].distance;\n }\n }\n else {\n equaldistance = objectsAtLeft[0].distance;\n }\n }\n this.sortByDistance(equallySpaced, 'distance');\n equallySpaced[equallySpaced.length] = { obj: shape, distance: 0 };\n top = bounds.y < top || !top ? bounds.y : top;\n if (objectsAtRight.length > 0) {\n var dist = void 0;\n nearestright = ((objectsAtRight[0].obj).bounds);\n top = nearestright.y < top ? nearestright.y : top;\n if (objectsAtRight.length > 1) {\n targetBounds = ((objectsAtRight[1].obj).bounds);\n dist = targetBounds.x - nearestright.x - nearestright.width;\n }\n if (objectsAtLeft.length > 0) {\n if (Math.abs(objectsAtRight[0].distance - objectsAtLeft[0].distance) <= snapObjDistance) {\n var adjustablevalue = Math.abs(objectsAtRight[0].distance - objectsAtLeft[0].distance) / 2;\n (objectsAtRight[0].distance < objectsAtLeft[0].distance) ?\n equaldistance -= adjustablevalue : equaldistance += adjustablevalue;\n equallySpaced[equallySpaced.length] = objectsAtRight[0];\n }\n else if (objectsAtLeft.length === 1) {\n nearestleft = undefined;\n equallySpaced.splice(0, 1);\n equallySpaced[equallySpaced.length] = objectsAtRight[0];\n equaldistance = dist;\n }\n }\n else {\n equaldistance = dist;\n equallySpaced[equallySpaced.length] = objectsAtRight[0];\n }\n if (objectsAtRight.length > 1 && nearestright.x + nearestright.width < targetBounds.x) {\n top = this.findEquallySpacedNodesAtRight(objectsAtRight, dist, top, equallySpaced, snapObjDistance);\n }\n }\n if (equallySpaced.length > 2) {\n this.addHSpacingLines(diagram, g, equallySpaced, ended, top);\n var deltaHorizontal = 0;\n if (ended) {\n deltaHorizontal = delta.x;\n }\n if (nearestleft) {\n horizontalSnap.offset = equaldistance - Math.abs(bounds.x + deltaHorizontal - nearestleft.x - nearestleft.width)\n + deltaHorizontal;\n }\n else if (nearestright) {\n horizontalSnap.offset = Math.abs(bounds.x + bounds.width + deltaHorizontal - nearestright.x)\n - equaldistance + deltaHorizontal;\n }\n horizontalSnap.snapped = true;\n }\n };\n //To create vertical spacing lines\n Snapping.prototype.createVSpacingLines = function (diagram, g, shape, objectsAtTop, objectsAtBottom, horizontalSnap, verticalSnap, ended, delta, snapObjDistance) {\n var right = 0;\n this.sortByDistance(objectsAtTop, 'distance', true);\n this.sortByDistance(objectsAtBottom, 'distance', true);\n var equallySpaced = [];\n var wrapper = this.getWrapperObject(shape, diagram.nameTable);\n var bounds = getBounds(wrapper);\n var nearesttop;\n var nearestbottom;\n var targetBounds;\n var equaldistance;\n if (objectsAtTop.length > 0) {\n equallySpaced[equallySpaced.length] = objectsAtTop[0];\n nearesttop = ((objectsAtTop[0].obj).bounds);\n right = nearesttop.x + nearesttop.width;\n if (objectsAtTop.length > 1) {\n targetBounds = ((objectsAtTop[1].obj).bounds);\n equaldistance = nearesttop.y - targetBounds.y - targetBounds.height;\n if (Math.abs(equaldistance - objectsAtTop[0].distance) <= snapObjDistance) {\n right = this.findEquallySpacedNodesAtTop(objectsAtTop, equaldistance, right, equallySpaced);\n }\n else {\n equaldistance = objectsAtTop[0].distance;\n }\n }\n else {\n equaldistance = objectsAtTop[0].distance;\n }\n }\n this.sortByDistance(equallySpaced, 'distance');\n equallySpaced[equallySpaced.length] = { obj: shape, distance: 0 };\n right = bounds.x + bounds.width > right || !right ? bounds.x + bounds.width : right;\n var dist;\n if (objectsAtBottom.length > 0) {\n nearestbottom = ((objectsAtBottom[0].obj).bounds);\n right = nearestbottom.x + nearestbottom.width > right ? nearestbottom.x + nearestbottom.width : right;\n if (objectsAtBottom.length > 1) {\n targetBounds = ((objectsAtBottom[1].obj).bounds);\n dist = targetBounds.y - nearestbottom.y - nearestbottom.height;\n }\n if (objectsAtTop.length > 0) {\n if (Math.abs(objectsAtBottom[0].distance - objectsAtTop[0].distance) <= snapObjDistance) {\n var adjustablevalue = Math.abs(objectsAtBottom[0].distance - objectsAtTop[0].distance) / 2;\n (objectsAtBottom[0].distance < objectsAtTop[0].distance) ?\n equaldistance -= adjustablevalue : equaldistance += adjustablevalue;\n equallySpaced[equallySpaced.length] = objectsAtBottom[0];\n }\n else if (objectsAtTop.length === 1) {\n nearesttop = undefined;\n equallySpaced.splice(0, 1);\n equallySpaced[equallySpaced.length] = objectsAtBottom[0];\n equaldistance = dist;\n }\n }\n else {\n equaldistance = dist;\n equallySpaced[equallySpaced.length] = objectsAtBottom[0];\n }\n if (objectsAtBottom.length > 1 && targetBounds.y > nearestbottom.y + nearestbottom.height) {\n right = this.findEquallySpacedNodesAtBottom(objectsAtBottom, dist, right, equallySpaced, snapObjDistance);\n }\n }\n if (equallySpaced.length > 2) {\n this.addVSpacingLines(diagram, g, equallySpaced, ended, right);\n var deltaVertical = 0;\n if (ended) {\n deltaVertical = delta.y;\n }\n if (nearesttop) {\n verticalSnap.offset = equaldistance - Math.abs(bounds.y + deltaVertical - nearesttop.y - nearesttop.height) + deltaVertical;\n }\n else if (nearestbottom) {\n verticalSnap.offset = Math.abs(bounds.y + bounds.height + deltaVertical - nearestbottom.y) - equaldistance + deltaVertical;\n }\n verticalSnap.snapped = true;\n }\n };\n //Add the Horizontal spacing lines\n Snapping.prototype.addHSpacingLines = function (diagram, g, equallySpaced, ended, top) {\n var i;\n var start;\n var end;\n if (!ended) {\n for (i = 0; i < equallySpaced.length - 1; i++) {\n var crnt = equallySpaced[parseInt(i.toString(), 10)].obj instanceof Selector ?\n getBounds((equallySpaced[parseInt(i.toString(), 10)].obj).wrapper)\n : ((equallySpaced[parseInt(i.toString(), 10)].obj).bounds);\n var next = equallySpaced[i + 1].obj instanceof Selector ?\n getBounds((equallySpaced[i + 1].obj).wrapper) : ((equallySpaced[i + 1].obj).bounds);\n start = { x: crnt.x + crnt.width, y: top - 15 };\n end = { x: next.x, y: top - 15 };\n this.renderSpacingLines(start, end, g, this.getAdornerLayerSvg(), diagram.scroller.transform);\n }\n }\n };\n //Add the vertical spacing lines\n Snapping.prototype.addVSpacingLines = function (diagram, g, equallySpacedObjects, ended, right) {\n var start;\n var end;\n if (!ended) {\n for (var i = 0; i < equallySpacedObjects.length - 1; i++) {\n var crnt = equallySpacedObjects[parseInt(i.toString(), 10)].obj instanceof Selector ?\n getBounds((equallySpacedObjects[parseInt(i.toString(), 10)].obj).wrapper)\n : ((equallySpacedObjects[parseInt(i.toString(), 10)].obj).bounds);\n var next = equallySpacedObjects[i + 1].obj instanceof Selector ?\n getBounds((equallySpacedObjects[i + 1].obj).wrapper) :\n ((equallySpacedObjects[i + 1].obj).bounds);\n start = { x: right + 15, y: crnt.y + crnt.height };\n end = { x: right + 15, y: next.y };\n this.renderSpacingLines(start, end, g, this.getAdornerLayerSvg(), diagram.scroller.transform);\n }\n }\n };\n //To add same width lines\n Snapping.prototype.addSameWidthLines = function (diagram, snapLine, sameWidths, horizontalSnap, ended, shape) {\n this.sortByDistance(sameWidths, 'offset');\n var bounds = getBounds(shape.wrapper);\n var target = sameWidths[0];\n var startPt;\n var endPt;\n var targetBounds = (target.source).bounds;\n var sameSizes = [];\n sameSizes.push(sameWidths[0]);\n var i;\n var crntbounds;\n for (i = 1; i < sameWidths.length; i++) {\n crntbounds = (sameWidths[parseInt(i.toString(), 10)].source).bounds;\n if (crntbounds.width === targetBounds.width) {\n sameSizes.push(sameWidths[parseInt(i.toString(), 10)]);\n }\n }\n if (!ended) {\n startPt = { x: bounds.x + target.offset, y: bounds.y - 15 };\n endPt = { x: bounds.x + bounds.width + target.offset, y: bounds.y - 15 };\n this.renderSpacingLines(startPt, endPt, snapLine, this.getAdornerLayerSvg(), diagram.scroller.transform);\n for (i = 0; i < sameSizes.length; i++) {\n bounds = (sameSizes[parseInt(i.toString(), 10)].source).bounds;\n startPt = { x: bounds.x, y: bounds.y - 15 };\n endPt = { x: bounds.x + bounds.width, y: bounds.y - 15 };\n this.renderSpacingLines(startPt, endPt, snapLine, this.getAdornerLayerSvg(), diagram.scroller.transform);\n }\n }\n horizontalSnap.offset = target.offset;\n horizontalSnap.snapped = true;\n };\n //To add same height lines\n Snapping.prototype.addSameHeightLines = function (diagram, snapLine, sameHeights, verticalSnap, ended, shape) {\n this.sortByDistance(sameHeights, 'offset');\n var bounds = getBounds(shape.wrapper);\n var target = sameHeights[0];\n var targetBounds = (target.source).bounds;\n var start;\n var end;\n var sameSizes = [];\n sameSizes.push(sameHeights[0]);\n var i;\n var crntbounds;\n for (i = 0; i < sameHeights.length; i++) {\n crntbounds = (sameHeights[parseInt(i.toString(), 10)].source).bounds;\n if (crntbounds.height === targetBounds.height) {\n sameSizes.push(sameHeights[parseInt(i.toString(), 10)]);\n }\n }\n if (!ended) {\n start = { x: bounds.x + bounds.width + 15, y: bounds.y + target.offset };\n end = { x: bounds.x + bounds.width + 15, y: bounds.y + target.offset + bounds.height };\n this.renderSpacingLines(start, end, snapLine, this.getAdornerLayerSvg(), diagram.scroller.transform);\n for (i = 0; i < sameSizes.length; i++) {\n bounds = (sameSizes[parseInt(i.toString(), 10)].source).bounds;\n start = { x: bounds.x + bounds.width + 15, y: bounds.y };\n end = { x: bounds.x + bounds.width + 15, y: bounds.y + bounds.height };\n this.renderSpacingLines(start, end, snapLine, this.getAdornerLayerSvg(), diagram.scroller.transform);\n }\n }\n verticalSnap.offset = target.offset;\n verticalSnap.snapped = true;\n };\n //Render spacing lines\n Snapping.prototype.renderSpacingLines = function (start, end, snapLine, svg, transform) {\n var d;\n var line1;\n var element = new PathElement();\n var options = {};\n start = {\n x: (start.x + transform.tx) * transform.scale,\n y: (start.y + transform.ty) * transform.scale\n };\n end = {\n x: (end.x + transform.tx) * transform.scale,\n y: (end.y + transform.ty) * transform.scale\n };\n if (start.x === end.x) {\n d = 'M' + (start.x - 5) + ' ' + (start.y + 5) + 'L' + start.x + ' ' + start.y +\n 'L' + (start.x + 5) + ' ' + (start.y + 5) + 'z' + 'M' + (end.x - 5) + ' ' +\n (end.y - 5) + ' L' + end.x + ' ' + end.y + ' L' +\n (end.x + 5) + ' ' + (end.y - 5) + 'z';\n line1 = {\n startPoint: { x: start.x - 8, y: start.y - 1 },\n endPoint: { x: start.x + 8, y: start.y - 1 },\n stroke: this.setSnapLineColor(),\n strokeWidth: 1, fill: this.setSnapLineColor(), dashArray: '', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId()\n };\n element.data = d;\n options.data = element.data;\n options.angle = 0;\n options.pivotX = 0;\n options.pivotY = 0;\n options.x = 0;\n options.y = 0;\n options.height = 0;\n options.width = 1;\n options.id = randomId();\n this.diagram.diagramRenderer.drawPath(snapLine, options);\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n line1 = {\n startPoint: { x: end.x - 8, y: end.y + 1 },\n endPoint: { x: end.x + 8, y: end.y + 1 },\n stroke: this.setSnapLineColor(),\n strokeWidth: 1, fill: this.setSnapLineColor(), dashArray: '', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: this.getAdornerLayerSvg().id + 'spacing'\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n }\n else {\n d = 'M' + (start.x + 5) + ' ' + (start.y + 5) + ' L' + start.x + ' ' + start.y +\n ' L' + (start.x + 5) + ' ' + (start.y - 5) + 'z' + 'M' + (end.x - 5) + ' ' +\n (end.y - 5) + ' L' + end.x + ' ' + end.y +\n ' L' + (end.x - 5) + ' ' + (end.y + 5) + 'z';\n element.data = d;\n options.data = d;\n options.angle = 0;\n options.pivotX = 0;\n options.pivotY = 0;\n options.x = 0;\n options.y = 0;\n options.height = 0;\n options.width = 1;\n options.id = randomId();\n this.diagram.diagramRenderer.drawPath(snapLine, options);\n line1 = {\n visible: true, opacity: 1, id: randomId(),\n startPoint: { x: start.x - 1, y: start.y - 8 },\n endPoint: { x: start.x - 1, y: start.y + 8 },\n stroke: this.setSnapLineColor(),\n strokeWidth: 1, fill: this.setSnapLineColor(), dashArray: '0', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n line1 = {\n width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId(),\n startPoint: { x: end.x + 1, y: end.y - 8 },\n endPoint: { x: end.x + 1, y: end.y + 8 },\n stroke: this.setSnapLineColor(),\n strokeWidth: 1, fill: this.setSnapLineColor(), dashArray: '0'\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n }\n line1 = {\n startPoint: { x: start.x, y: start.y },\n endPoint: { x: end.x, y: end.y }, stroke: this.setSnapLineColor(), strokeWidth: 1, fill: this.setSnapLineColor(),\n dashArray: '0', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId()\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n };\n /**\n * To Create Snap object with position, initial bounds, and final bounds \\\n *\n * @returns { void } To Create Snap object with position, initial bounds, and final bounds .\\\n * @param {Diagram} targetBounds - provide the targetBounds value.\n * @param {Rect} bounds - provide the angle value.\n * @param {string} snap - provide the angle value.\n * @private\n */\n Snapping.prototype.createSnapObject = function (targetBounds, bounds, snap) {\n var snapObject;\n switch (snap) {\n case 'left':\n snapObject = {\n start: { x: (targetBounds.x), y: Math.min(targetBounds.y, bounds.y) },\n end: { x: (targetBounds.x), y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height) },\n offsetX: targetBounds.x - bounds.x, offsetY: 0, type: 'sideAlign'\n };\n break;\n case 'right':\n snapObject = {\n type: 'sideAlign',\n start: { x: (targetBounds.x + targetBounds.width), y: Math.min(targetBounds.y, bounds.y) },\n offsetX: targetBounds.x + targetBounds.width - bounds.x - bounds.width,\n offsetY: 0,\n end: {\n x: (targetBounds.x + targetBounds.width),\n y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height)\n }\n };\n break;\n case 'top':\n snapObject = {\n offsetY: targetBounds.y - bounds.y, offsetX: 0, type: 'sideAlign',\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y },\n end: { x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)), y: targetBounds.y }\n };\n break;\n case 'bottom':\n snapObject = {\n type: 'sideAlign', offsetY: targetBounds.y + targetBounds.height - bounds.y - bounds.height, offsetX: 0,\n end: {\n x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)),\n y: targetBounds.y + targetBounds.height\n },\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y + targetBounds.height }\n };\n break;\n case 'topBottom':\n snapObject = {\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y + targetBounds.height },\n end: {\n x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)),\n y: targetBounds.y + targetBounds.height\n },\n offsetY: targetBounds.y + targetBounds.height - bounds.y, offsetX: 0, type: 'sideAlign'\n };\n break;\n case 'bottomTop':\n snapObject = {\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y },\n end: { x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)), y: targetBounds.y },\n offsetY: targetBounds.y - bounds.y - bounds.height, offsetX: 0, type: 'sideAlign'\n };\n break;\n case 'leftRight':\n snapObject = {\n start: { x: (targetBounds.x + targetBounds.width), y: Math.min(targetBounds.y, bounds.y) },\n end: {\n x: (targetBounds.x + targetBounds.width),\n y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height)\n },\n offsetX: targetBounds.x + targetBounds.width - bounds.x, offsetY: 0, type: 'sideAlign'\n };\n break;\n case 'rightLeft':\n snapObject = {\n start: { x: (targetBounds.x), y: (Math.min(targetBounds.y, bounds.y)) },\n end: { x: (targetBounds.x), y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height) },\n offsetX: targetBounds.x - bounds.x - bounds.width, offsetY: 0, type: 'sideAlign'\n };\n break;\n case 'centerX':\n snapObject = {\n start: { x: (targetBounds.x + targetBounds.width / 2), y: (Math.min(targetBounds.y, bounds.y)) },\n end: {\n x: (targetBounds.x + targetBounds.width / 2),\n y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height)\n },\n offsetX: targetBounds.x + targetBounds.width / 2 - (bounds.x + bounds.width / 2), offsetY: 0, type: 'centerAlign'\n };\n break;\n case 'centerY':\n snapObject = {\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y + targetBounds.height / 2 },\n end: {\n x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)),\n y: targetBounds.y + targetBounds.height / 2\n },\n offsetY: targetBounds.y + targetBounds.height / 2 - (bounds.y + bounds.height / 2), offsetX: 0, type: 'centerAlign'\n };\n break;\n }\n return snapObject;\n };\n /**\n * Calculate the snap angle \\\n *\n * @returns { void } Calculate the snap angle .\\\n * @param {Diagram} diagram - provide the diagram value.\n * @param {number} angle - provide the angle value.\n * @private\n */\n Snapping.prototype.snapAngle = function (diagram, angle) {\n var snapSettings = this.diagram.snapSettings;\n var snapAngle = snapSettings.snapAngle;\n var width = angle % (snapAngle || 0);\n if (width >= (snapAngle / 2)) {\n return angle + snapAngle - width;\n }\n else {\n return angle - width;\n }\n };\n //Check whether the node to be snapped or not.\n Snapping.prototype.canConsider = function (nameTable, selectedObject, target) {\n if (this.diagram.selectedItems.nodes.length && this.diagram.selectedItems.nodes[0].id === target.id) {\n return false;\n }\n else {\n return true;\n }\n };\n //Find the total number of nodes in diagram using SpatialSearch\n Snapping.prototype.findNodes = function (spatialSearch, node, child, viewPort, nodesInView) {\n var nodes = [];\n var nd;\n var bounds;\n var quads = spatialSearch.findQuads(nodesInView ? viewPort : child);\n for (var i = 0; i < quads.length; i++) {\n var quad = quads[parseInt(i.toString(), 10)];\n if (quad.objects.length > 0) {\n for (var j = 0; j < quad.objects.length; j++) {\n nd = quad.objects[parseInt(j.toString(), 10)];\n if (!(this.diagram.nameTable[nd.id] instanceof Connector) && nd.visible\n && !(this.diagram.nameTable[nd.id].shape.type === 'SwimLane') && !(this.diagram.nameTable[nd.id].isLane) &&\n !(this.diagram.nameTable[nd.id].isPhase) && !(this.diagram.nameTable[nd.id].isHeader) && nd.id !== 'helper') {\n bounds = getBounds(nd);\n if (nodes.indexOf(nd) === -1 && this.intersectsRect(child, bounds)) {\n nodes.push(nd);\n }\n if (nodesInView && nodesInView.indexOf(nd) && this.intersectsRect(viewPort, bounds)) {\n nodesInView.push(nd);\n }\n }\n }\n }\n }\n return nodes;\n };\n Snapping.prototype.intersectsRect = function (child, bounds) {\n return ((((bounds.x < (child.x + child.width)) && (child.x < (bounds.x + bounds.width)))\n && (bounds.y < (child.y + child.height))) && (child.y < (bounds.y + bounds.height)));\n };\n Snapping.prototype.getAdornerLayerSvg = function () {\n return this.diagram.diagramRenderer.adornerSvgLayer;\n };\n /**\n * To remove grid lines on mouse move and mouse up \\\n *\n * @returns { void } To remove grid lines on mouse move and mouse up .\\\n * @param {Diagram} diagram - provide the source value.\n * @private\n */\n Snapping.prototype.removeGuidelines = function (diagram) {\n var selectionRect = this.getAdornerLayerSvg().getElementById('_SnappingLines');\n var line = this.getAdornerLayerSvg().getElementById('pivotLine');\n if (selectionRect) {\n selectionRect.parentNode.removeChild(selectionRect);\n }\n if (line) {\n line.parentNode.removeChild(line);\n }\n };\n //Sort the objects by its distance\n Snapping.prototype.sortByDistance = function (obj, value, ascending) {\n var i;\n var j;\n var temp;\n if (ascending) {\n for (i = 0; i < obj.length; i++) {\n for (j = i + 1; j < obj.length; j++) {\n if (obj[parseInt(i.toString(), 10)][\"\" + value] > obj[parseInt(j.toString(), 10)][\"\" + value]) {\n temp = obj[parseInt(i.toString(), 10)];\n obj[parseInt(i.toString(), 10)] = obj[parseInt(j.toString(), 10)];\n obj[parseInt(j.toString(), 10)] = temp;\n }\n }\n }\n }\n else {\n for (i = 0; i < obj.length; i++) {\n for (j = i + 1; j < obj.length; j++) {\n if (obj[parseInt(i.toString(), 10)][\"\" + value] < obj[parseInt(j.toString(), 10)][\"\" + value]) {\n temp = obj[parseInt(i.toString(), 10)];\n obj[parseInt(i.toString(), 10)] = obj[parseInt(j.toString(), 10)];\n obj[parseInt(j.toString(), 10)] = temp;\n }\n }\n }\n }\n };\n //To find nodes that are equally placed at left of the selected node\n Snapping.prototype.findEquallySpacedNodesAtLeft = function (objectsAtLeft, equalDistance, top, equallySpaced) {\n var prevBounds;\n var targetBounds;\n var dist;\n var i;\n for (i = 1; i < objectsAtLeft.length; i++) {\n prevBounds = ((objectsAtLeft[i - 1].obj).bounds);\n targetBounds = ((objectsAtLeft[parseInt(i.toString(), 10)].obj).bounds);\n dist = prevBounds.x - targetBounds.x - targetBounds.width;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtLeft[parseInt(i.toString(), 10)];\n if (targetBounds.y < top) {\n top = targetBounds.y;\n }\n }\n else {\n break;\n }\n }\n return top;\n };\n //To find nodes that are equally placed at right of the selected node\n Snapping.prototype.findEquallySpacedNodesAtRight = function (objectsAtRight, equalDistance, top, equallySpaced, snapObjDistance) {\n var actualDistance = objectsAtRight[0].distance;\n var target;\n var targetBounds;\n var prevBounds;\n var dist;\n if (Math.abs(equalDistance - actualDistance) <= snapObjDistance) {\n for (var i = 0; i < objectsAtRight.length - 1; i++) {\n target = objectsAtRight[parseInt(i.toString(), 10)].obj;\n targetBounds = ((objectsAtRight[i + 1].obj).bounds);\n prevBounds = (target.bounds);\n dist = targetBounds.x - prevBounds.x - prevBounds.width;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtRight[i + 1];\n if (prevBounds.y < top) {\n top = prevBounds.y;\n }\n }\n else {\n break;\n }\n }\n }\n return top;\n };\n Snapping.prototype.findEquallySpacedNodesAtTop = function (objectsAtTop, equalDistance, right, equallySpaced) {\n var prevBounds;\n var targetBounds;\n var dist;\n for (var i = 1; i < objectsAtTop.length; i++) {\n prevBounds = ((objectsAtTop[i - 1].obj).bounds);\n targetBounds = ((objectsAtTop[parseInt(i.toString(), 10)].obj).bounds);\n dist = prevBounds.y - targetBounds.y - targetBounds.height;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtTop[parseInt(i.toString(), 10)];\n if (targetBounds.x + targetBounds.width > right) {\n right = targetBounds.x + targetBounds.width;\n }\n }\n else {\n break;\n }\n }\n return right;\n };\n //To find nodes that are equally placed at bottom of the selected node\n Snapping.prototype.findEquallySpacedNodesAtBottom = function (objectsAtBottom, equalDistance, right, equallySpaced, snapObjDistance) {\n var actualDistance = objectsAtBottom[0].distance;\n var target;\n var targetBounds;\n var prevBounds;\n var dist;\n if (Math.abs(equalDistance - actualDistance) <= snapObjDistance) {\n for (var i = 0; i < objectsAtBottom.length - 1; i++) {\n target = objectsAtBottom[parseInt(i.toString(), 10)].obj;\n targetBounds = ((objectsAtBottom[i + 1].obj).bounds);\n prevBounds = (target.bounds);\n dist = targetBounds.y - prevBounds.y - prevBounds.height;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtBottom[i + 1];\n if (prevBounds.x + prevBounds.width > right) {\n right = prevBounds.x + prevBounds.width;\n }\n }\n else {\n break;\n }\n }\n }\n return right;\n };\n /**\n * To get Adoner layer to draw snapLine\n *\n * @private\n */\n Snapping.prototype.getLayer = function () {\n var snapLine;\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) {\n snapLine = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n snapLine.setAttribute('id', '_SnappingLines');\n snapLine.setAttribute('shapeRendering', 'crispEdges');\n this.getAdornerLayerSvg().appendChild(snapLine);\n }\n return snapLine;\n };\n /**\n * Constructor for the snapping module\n *\n * @private\n */\n // constructor() {\n // //constructs the snapping module\n // }\n /**\n *To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n Snapping.prototype.destroy = function () {\n /**\n * Destroys the snapping module\n */\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n Snapping.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Snapping';\n };\n return Snapping;\n}());\n\n/**\n * Undo redo function used for revert and restore the changes\n */\nvar UndoRedo = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the undo redo module\n *\n * @private\n */\n function UndoRedo() {\n this.groupUndo = false;\n this.childTable = [];\n this.historyCount = 0;\n this.hasGroup = false;\n this.groupCount = 0;\n this.undoOffsets = [];\n //constructs the undo redo module\n }\n /**\n * initHistory method \\\n *\n * @returns { void } initHistory method .\\\n * @param {Diagram} diagram - provide the points value.\n *\n * @private\n */\n UndoRedo.prototype.initHistory = function (diagram) {\n diagram.historyManager = {\n canRedo: false, canUndo: false, currentEntry: null,\n push: diagram.addHistoryEntry.bind(diagram), undo: Function, redo: Function,\n startGroupAction: diagram.startGroupAction.bind(diagram), endGroupAction: diagram.endGroupAction.bind(diagram),\n canLog: null, undoStack: [], redoStack: [], stackLimit: diagram.historyManager ? diagram.historyManager.stackLimit : undefined\n };\n };\n /**\n * addHistoryEntry method \\\n *\n * @returns { void } addHistoryEntry method .\\\n * @param {HistoryEntry} entry - provide the points value.\n * @param {Diagram} diagram - provide the points value.\n *\n * @private\n */\n UndoRedo.prototype.addHistoryEntry = function (entry, diagram) {\n // Bug: 903791-remove StartGroup & EndGroup entry when no actual changes wrapped between them.\n if (entry.type === 'EndGroup' && diagram.historyManager.currentEntry.type === 'StartGroup') {\n if (diagram.historyManager.currentEntry.previous) {\n diagram.historyManager.currentEntry.previous.next = undefined;\n }\n diagram.historyManager.currentEntry = diagram.historyManager.currentEntry.previous;\n // when cancelled change startGroup is only entry in history manager\n if (!diagram.historyManager.currentEntry) {\n diagram.historyManager.canUndo = false;\n }\n return false;\n }\n var entryObject = null;\n var nextEntry = null;\n if (diagram.historyManager.canLog) {\n var hEntry = diagram.historyManager.canLog(entry);\n if (hEntry.cancel === true) {\n return false;\n }\n }\n if (diagram.historyManager && diagram.historyManager.canUndo && diagram.historyManager.currentEntry) {\n entryObject = diagram.historyManager.currentEntry;\n if (entryObject.next) {\n if (entryObject.previous) {\n nextEntry = entryObject.next;\n nextEntry.previous = null;\n entryObject.next = entry;\n entry.previous = entryObject;\n }\n }\n else {\n entryObject.next = entry;\n entry.previous = entryObject;\n }\n }\n diagram.historyManager.currentEntry = entry;\n if (diagram.historyManager.stackLimit) {\n if (entry.type === 'StartGroup' || entry.type === 'EndGroup') {\n var value = entry.type === 'EndGroup' ? true : false;\n this.setEntryLimit(value);\n }\n if (!this.hasGroup && this.groupCount === 0) {\n if (this.historyCount < diagram.historyManager.stackLimit) {\n this.historyCount++;\n }\n else {\n this.applyLimit(diagram.historyManager.currentEntry, diagram.historyManager.stackLimit, diagram);\n }\n }\n }\n this.getHistoryList(diagram);\n diagram.historyManager.canUndo = true;\n diagram.historyManager.canRedo = false;\n return true;\n };\n /**\n * applyLimit method \\\n *\n * @returns { void } applyLimit method .\\\n * @param {HistoryEntry} list - provide the list value.\n * @param {number} stackLimit - provide the list value.\n * @param {Diagram} diagram - provide the list value.\n * @param {boolean} limitHistory - provide the list value.\n *\n * @private\n */\n UndoRedo.prototype.applyLimit = function (list, stackLimit, diagram, limitHistory) {\n if (list && list.previous) {\n if (list.type === 'StartGroup' || list.type === 'EndGroup') {\n var value = list.type === 'StartGroup' ? true : false;\n this.setEntryLimit(value);\n }\n if (!this.hasGroup && this.groupCount === 0) {\n stackLimit--;\n }\n if (stackLimit === 0) {\n if (limitHistory) {\n this.limitHistoryStack(list.previous, diagram);\n }\n if (diagram.historyManager.stackLimit < this.historyCount) {\n this.historyCount = diagram.historyManager.stackLimit;\n }\n delete list.previous;\n }\n else if (list.previous) {\n this.applyLimit(list.previous, stackLimit, diagram, limitHistory);\n }\n }\n this.groupCount = 0;\n };\n /**\n * clearHistory method \\\n *\n * @returns { void } clearHistory method .\\\n * @param {Diagram} diagram - provide the points value.\n *\n * @private\n */\n UndoRedo.prototype.clearHistory = function (diagram) {\n var hList = diagram.historyManager;\n hList.currentEntry = undefined;\n hList.canUndo = false;\n hList.canRedo = false;\n this.historyCount = 0;\n this.groupCount = 0;\n diagram.historyManager.undoStack = [];\n diagram.historyManager.redoStack = [];\n };\n UndoRedo.prototype.setEntryLimit = function (value) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n value ? this.groupCount-- : this.groupCount++;\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n value ? this.hasGroup = !value : this.hasGroup = value;\n };\n UndoRedo.prototype.limitHistoryStack = function (list, diagram) {\n if (list.type !== 'StartGroup' && list.type !== 'EndGroup') {\n this.removeFromStack(diagram.historyManager.undoStack, list);\n this.removeFromStack(diagram.historyManager.redoStack, list);\n }\n if (list.previous) {\n this.limitHistoryStack(list.previous, diagram);\n }\n };\n UndoRedo.prototype.removeFromStack = function (entyList, list) {\n if (entyList.length) {\n for (var i = 0; i <= entyList.length; i++) {\n if (entyList[parseInt(i.toString(), 10)].undoObject === list.undoObject\n && entyList[parseInt(i.toString(), 10)].redoObject === list.redoObject) {\n entyList.splice(i, 1);\n break;\n }\n }\n }\n };\n /**\n * undo method \\\n *\n * @returns { void } undo method .\\\n * @param {Diagram} diagram - provide the diagram value.\n *\n * @private\n */\n UndoRedo.prototype.undo = function (diagram) {\n var entry = this.getUndoEntry(diagram);\n var endGroupActionCount = 0;\n if (entry) {\n if (entry.category === 'Internal') {\n if (entry.type === 'EndGroup') {\n endGroupActionCount++;\n this.groupUndo = true;\n //Removed isBlazor code\n }\n else {\n this.undoEntry(entry, diagram);\n }\n if (this.groupUndo) {\n this.undoGroupAction(entry, diagram, endGroupActionCount);\n this.groupUndo = false;\n }\n }\n else {\n if (!isBlazor()) {\n diagram.historyManager.undo(entry);\n }\n var arg = {\n entryType: 'undo', oldValue: entry.undoObject, newValue: entry.redoObject\n };\n // Removed isBlazor code\n diagram.triggerEvent(DiagramEvent.historyStateChange, arg);\n }\n }\n };\n // Removed getHistoryChangeEvent method as it is not used anywhere\n UndoRedo.prototype.getHistoryList = function (diagram) {\n var undoStack = [];\n var redoStack = [];\n var currEntry = diagram.historyManager.currentEntry;\n var undoObj;\n var redoObj;\n currEntry = diagram.historyManager.currentEntry;\n if (diagram.historyManager.canUndo || diagram.historyManager.undoStack.length === 0) {\n this.getHistroyObject(undoStack, currEntry);\n }\n else {\n this.getHistroyObject(redoStack, currEntry);\n }\n while (currEntry && currEntry.previous) {\n undoObj = currEntry.previous;\n this.getHistroyObject(undoStack, undoObj);\n currEntry = currEntry.previous;\n }\n currEntry = diagram.historyManager.currentEntry;\n while (currEntry && currEntry.next) {\n redoObj = currEntry.next;\n this.getHistroyObject(redoStack, redoObj);\n currEntry = currEntry.next;\n }\n diagram.historyManager.undoStack = undoStack;\n diagram.historyManager.redoStack = redoStack;\n };\n UndoRedo.prototype.getHistroyObject = function (list, obj) {\n if (obj && obj.type !== 'StartGroup' && obj.type !== 'EndGroup') {\n list.push({\n redoObject: obj.redoObject ? obj.redoObject : null,\n undoObject: obj.undoObject ? obj.undoObject : null,\n type: obj.type ? obj.type : null,\n category: obj.category ? obj.category : null\n });\n }\n };\n UndoRedo.prototype.undoGroupAction = function (entry, diagram, endGroupActionCount) {\n while (endGroupActionCount !== 0) {\n this.undoEntry(entry, diagram);\n entry = this.getUndoEntry(diagram);\n if (entry.type === 'StartGroup') {\n endGroupActionCount--;\n }\n else if (entry.type === 'EndGroup') {\n endGroupActionCount++;\n }\n }\n endGroupActionCount = 0;\n };\n UndoRedo.prototype.undoEntry = function (entry, diagram) {\n var obj;\n var nodeObject;\n if (entry.type !== 'PropertyChanged' && entry.type !== 'CollectionChanged' && entry.type !== 'LabelCollectionChanged') {\n obj = entry.undoObject ? entry.undoObject : (entry.previous.undoObject);\n nodeObject = obj;\n }\n if (entry.type !== 'StartGroup' && entry.type !== 'EndGroup') {\n if (diagram.historyManager.undoStack.length > 0) {\n var addObject = diagram.historyManager.undoStack.splice(0, 1);\n diagram.historyManager.redoStack.splice(0, 0, addObject[0]);\n nodeObject = (entry.undoObject);\n }\n }\n diagram.protectPropertyChange(true);\n diagram.diagramActions |= DiagramAction.UndoRedo;\n //Removed isBlazor code\n switch (entry.type) {\n case 'PositionChanged':\n case 'Align':\n case 'Distribute':\n this.recordPositionChanged(obj, diagram);\n break;\n case 'SizeChanged':\n case 'Sizing':\n this.recordSizeChanged(obj, diagram, entry);\n break;\n case 'RotationChanged':\n this.recordRotationChanged(obj, diagram, entry, 'undo');\n break;\n case 'ConnectionChanged':\n this.recordConnectionChanged(obj, diagram);\n break;\n case 'PropertyChanged':\n this.recordPropertyChanged(entry, diagram, false);\n break;\n case 'CollectionChanged':\n if (entry && entry.next && entry.next.type === 'AddChildToGroupNode' && entry.next.changeType === 'Insert') {\n var group = diagram.getObject(entry.next.undoObject.id);\n diagram.insertValue(cloneObject(group), true);\n }\n entry.isUndo = true;\n this.recordCollectionChanged(entry, diagram);\n entry.isUndo = false;\n if (entry && entry.next && entry.next.type === 'AddChildToGroupNode' && entry.next.changeType === 'Insert') {\n var group = diagram.getObject(entry.next.undoObject.id);\n group.wrapper.measure(new Size());\n group.wrapper.arrange(group.wrapper.desiredSize);\n diagram.updateDiagramObject(group);\n }\n break;\n case 'LabelCollectionChanged':\n entry.isUndo = true;\n this.recordLabelCollectionChanged(entry, diagram);\n entry.isUndo = false;\n break;\n case 'PortCollectionChanged':\n entry.isUndo = true;\n this.recordPortCollectionChanged(entry, diagram);\n entry.isUndo = false;\n break;\n case 'Group':\n this.unGroup(entry, diagram);\n break;\n case 'UnGroup':\n this.group(entry, diagram);\n break;\n case 'SegmentChanged':\n this.recordSegmentChanged(obj, diagram);\n break;\n case 'PortPositionChanged':\n this.recordPortChanged(entry, diagram, false);\n break;\n case 'AnnotationPropertyChanged':\n this.recordAnnotationChanged(entry, diagram, false);\n break;\n case 'ChildCollectionChanged':\n this.recordChildCollectionChanged(entry, diagram, false);\n break;\n case 'StackChildPositionChanged':\n this.recordStackPositionChanged(entry, diagram, false);\n break;\n case 'RowHeightChanged':\n this.recordGridSizeChanged(entry, diagram, false, true);\n break;\n case 'ColumnWidthChanged':\n this.recordGridSizeChanged(entry, diagram, false, false);\n break;\n case 'LanePositionChanged':\n this.recordLanePositionChanged(entry, diagram, false);\n break;\n case 'LaneCollectionChanged':\n case 'PhaseCollectionChanged':\n entry.isUndo = true;\n this.recordLaneOrPhaseCollectionChanged(entry, diagram, false);\n entry.isUndo = false;\n break;\n case 'SendToBack':\n case 'SendForward':\n case 'SendBackward':\n case 'BringToFront':\n this.recordOrderCommandChanged(entry, diagram, false);\n break;\n case 'AddChildToGroupNode':\n this.recordAddChildToGroupNode(entry, diagram, false);\n break;\n case 'RemoveChildFromGroupNode':\n this.recordRemoveChildFromGroupNode(entry, diagram, false);\n break;\n case 'ExternalEntry':\n //EJ2-848643 - Need to consider custom entries in start and end group action\n diagram.historyManager.undo(entry);\n break;\n }\n diagram.diagramActions &= ~DiagramAction.UndoRedo;\n diagram.protectPropertyChange(false);\n diagram.historyChangeTrigger(entry, 'Undo');\n if (nodeObject) {\n var object = this.checkNodeObject(nodeObject, diagram);\n if (object) {\n var getnodeDefaults = getFunction(diagram.updateSelection);\n if (getnodeDefaults) {\n getnodeDefaults(object, diagram);\n }\n }\n }\n };\n UndoRedo.prototype.checkNodeObject = function (value, diagram) {\n var object;\n if (!value.id) {\n if ((value.nodes && value.nodes.length > 0) ||\n (value.connectors && value.connectors.length > 0)) {\n var undoNode = value.nodes.length > 0 ?\n value.nodes : value.connectors;\n for (var _i = 0, undoNode_1 = undoNode; _i < undoNode_1.length; _i++) {\n object = undoNode_1[_i];\n object = diagram.nameTable[object.id];\n }\n }\n else {\n var knownNode = value.nodes ?\n value.nodes : value.connectors;\n if (knownNode) {\n for (var _a = 0, _b = Object.keys(knownNode); _a < _b.length; _a++) {\n var key = _b[_a];\n var index = Number(key);\n object = value.nodes ? diagram.nodes[parseInt(index.toString(), 10)]\n : diagram.connectors[parseInt(index.toString(), 10)];\n }\n }\n }\n }\n else {\n object = diagram.nameTable[value.id];\n }\n return object;\n };\n UndoRedo.prototype.group = function (historyEntry, diagram) {\n diagram.add(historyEntry.undoObject);\n };\n UndoRedo.prototype.unGroup = function (entry, diagram) {\n //const i: number = 0;\n entry.redoObject = cloneObject(entry.undoObject);\n var node = entry.undoObject;\n diagram.commandHandler.unGroup(node);\n };\n UndoRedo.prototype.ignoreProperty = function (key) {\n if (key === 'zIndex' || key === 'wrapper' || key === 'parentObj' || key === 'controlParent') {\n return true;\n }\n return false;\n };\n UndoRedo.prototype.getProperty = function (collection, property) {\n for (var _i = 0, _a = Object.keys(property); _i < _a.length; _i++) {\n var key = _a[_i];\n if (collection) {\n if (!this.ignoreProperty(key)) {\n if (property[\"\" + key] instanceof Object) {\n this.getProperty(collection[\"\" + key], property[\"\" + key]);\n }\n else {\n collection[\"\" + key] = property[\"\" + key];\n }\n }\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n UndoRedo.prototype.recordLaneOrPhaseCollectionChanged = function (entry, diagram, isRedo) {\n var node = entry.redoObject;\n var obj = entry.undoObject;\n var changeType;\n if (entry.isUndo) {\n if (entry.changeType === 'Insert') {\n changeType = 'Remove';\n }\n else {\n changeType = 'Insert';\n }\n }\n else {\n changeType = entry.changeType;\n }\n if (changeType === 'Remove') {\n diagram.remove(node);\n }\n else {\n if (node.isPhase) {\n var swimlane = diagram.nameTable[node.parentId];\n diagram.addPhases(swimlane, [obj]);\n }\n else {\n var swimlane = diagram.nameTable[node.parentId];\n var laneIndex = findLaneIndex(swimlane, node);\n diagram.addLanes(swimlane, [obj], laneIndex);\n }\n }\n diagram.clearSelection();\n };\n UndoRedo.prototype.recordAnnotationChanged = function (entry, diagram, isRedo) {\n var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);\n if (diagram.canEnableBlazorObject) {\n var node = cloneObject(diagram.nameTable[entryObject.id]);\n diagram.insertValue(node, node instanceof Node ? true : false);\n }\n var oldElement = findAnnotation(entryObject, entry.objectId);\n var undoChanges = diagram.commandHandler.getAnnotationChanges(diagram.nameTable[entryObject.id], oldElement);\n var currentObject = diagram.nameTable[entryObject.id];\n var currentElement = findAnnotation(currentObject, entry.objectId);\n currentElement.offset = oldElement.offset;\n currentElement.margin = oldElement.margin;\n currentElement.width = oldElement.width;\n currentElement.height = oldElement.height;\n currentElement.rotateAngle = oldElement.rotateAngle;\n currentElement.margin = oldElement.margin;\n if (currentObject instanceof Node) {\n diagram.nodePropertyChange(currentObject, {}, undoChanges);\n }\n else {\n diagram.connectorPropertyChange(currentObject, {}, undoChanges);\n }\n };\n UndoRedo.prototype.recordChildCollectionChanged = function (entry, diagram, isRedo) {\n var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);\n var parentNode = diagram.nameTable[entryObject.parentId];\n var actualObject = diagram.nameTable[entryObject.id];\n if (parentNode) {\n addChildToContainer(diagram, parentNode, actualObject, !isRedo, entry.historyAction === 'AddNodeToLane');\n }\n else {\n if (actualObject.parentId) {\n parentNode = diagram.nameTable[actualObject.parentId];\n parentNode.children.splice(parentNode.children.indexOf(actualObject.id), 1);\n parentNode.wrapper.children.splice(parentNode.wrapper.children.indexOf(actualObject.wrapper), 1);\n }\n if (entryObject.parentId && entryObject.parentId !== '') {\n parentNode = diagram.nameTable[entryObject.parentId];\n parentNode.children.push(entryObject.id);\n parentNode.wrapper.children.push(actualObject.wrapper);\n }\n actualObject.parentId = entryObject.parentId;\n diagram.removeElements(actualObject);\n diagram.updateDiagramObject(actualObject);\n }\n };\n UndoRedo.prototype.recordStackPositionChanged = function (entry, diagram, isRedo) {\n var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);\n if (entryObject.source) {\n var parent_1 = diagram.nameTable[entryObject.source.parentId];\n if (parent_1) {\n if (entryObject.target) {\n parent_1.wrapper.children.splice(entryObject.targetIndex, 1);\n parent_1.wrapper.children.splice(entryObject.sourceIndex, 0, entryObject.source.wrapper);\n }\n else {\n if (entryObject.sourceIndex !== undefined) {\n if (!diagram.nameTable[entryObject.source.id]) {\n diagram.add(entryObject.source);\n }\n parent_1.wrapper.children.splice(entryObject.sourceIndex, 0, diagram.nameTable[entryObject.source.id].wrapper);\n diagram.nameTable[entryObject.source.id].parentId = parent_1.id;\n }\n else {\n parent_1.wrapper.children.splice(parent_1.wrapper.children.indexOf(diagram.nameTable[entryObject.source.id].wrapper), 1);\n diagram.nameTable[entryObject.source.id].parentId = '';\n }\n }\n if (isRedo && parent_1.shape.type === 'UmlClassifier') {\n diagram.remove(entryObject.source);\n }\n parent_1.wrapper.measure(new Size());\n parent_1.wrapper.arrange(parent_1.wrapper.desiredSize);\n diagram.updateDiagramObject(parent_1);\n diagram.updateSelector();\n }\n }\n };\n UndoRedo.prototype.recordGridSizeChanged = function (entry, diagram, isRedo, isRow) {\n var obj = (isRedo) ? entry.redoObject : entry.undoObject;\n var node = (!isRedo) ? entry.redoObject : entry.undoObject;\n if (obj.parentId) {\n var swimlane = diagram.nameTable[obj.parentId];\n var actualObject = diagram.nameTable[obj.id];\n var x = swimlane.wrapper.bounds.x;\n var y = swimlane.wrapper.bounds.y;\n if (swimlane.shape.type === 'SwimLane') {\n var grid = swimlane.wrapper.children[0];\n var padding = swimlane.shape.padding;\n updateSwimLaneObject(diagram, node, swimlane, obj);\n if (isRow) {\n grid.updateRowHeight(obj.rowIndex, obj.wrapper.actualSize.height, true, padding);\n swimlane.height = swimlane.wrapper.height = grid.height;\n }\n else {\n grid.updateColumnWidth(obj.columnIndex, obj.wrapper.actualSize.width, true, padding);\n swimlane.width = swimlane.wrapper.width = grid.width;\n if (obj.isPhase) {\n actualObject.maxWidth = actualObject.wrapper.maxWidth = obj.wrapper.actualSize.width;\n }\n }\n swimLaneMeasureAndArrange(swimlane);\n var tx = x - swimlane.wrapper.bounds.x;\n var ty = y - swimlane.wrapper.bounds.y;\n diagram.drag(swimlane, tx, ty);\n diagram.clearSelection();\n diagram.updateDiagramObject(swimlane);\n }\n }\n };\n UndoRedo.prototype.recordLanePositionChanged = function (entry, diagram, isRedo) {\n var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);\n if (entryObject.source) {\n var parent_2 = diagram.nameTable[entryObject.source.parentId];\n if (parent_2 && parent_2.shape.type === 'SwimLane') {\n laneInterChanged(diagram, entryObject.target, entryObject.source);\n diagram.clearSelection();\n }\n }\n };\n UndoRedo.prototype.recordPortChanged = function (entry, diagram, isRedo) {\n var entryObject = ((isRedo) ? entry.redoObject.nodes[0] :\n entry.undoObject.nodes[0]);\n if (diagram.canEnableBlazorObject) {\n var node = cloneObject(diagram.nameTable[entryObject.id]);\n diagram.insertValue(node, true);\n }\n var oldElement = findPort(entryObject, entry.objectId);\n var undoChanges = diagram.commandHandler.getPortChanges(diagram.nameTable[entryObject.id], oldElement);\n var currentObject = diagram.nameTable[entryObject.id];\n var currentElement = findPort(currentObject, entry.objectId);\n currentElement.offset = oldElement.offset;\n diagram.nodePropertyChange(currentObject, {}, undoChanges);\n if (currentObject.parentId) {\n diagram.updateConnectorEdges(diagram.nameTable[currentObject.parentId]);\n }\n };\n UndoRedo.prototype.recordPropertyChanged = function (entry, diagram, isRedo) {\n var redoObject = entry.redoObject;\n var undoObject = entry.undoObject;\n //Removed isBlazor code\n this.getProperty(diagram, (isRedo ? redoObject : undoObject));\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n isRedo ? diagram.onPropertyChanged(redoObject, undoObject) : diagram.onPropertyChanged(undoObject, redoObject);\n diagram.diagramActions = diagram.diagramActions | DiagramAction.UndoRedo;\n };\n UndoRedo.prototype.recordOrderCommandChanged = function (entry, diagram, isRedo) {\n var redoObject = entry.redoObject;\n var undoObject = entry.undoObject;\n diagram.commandHandler.orderCommands(isRedo, (isRedo ? redoObject : undoObject), entry.type);\n diagram.diagramActions = diagram.diagramActions | DiagramAction.UndoRedo;\n };\n UndoRedo.prototype.recordAddChildToGroupNode = function (entry, diagram, isRedo) {\n var group = diagram.nameTable[entry.undoObject.id];\n var child = diagram.nameTable[entry.objectId];\n if (isRedo && entry.changeType === 'Insert') {\n diagram.addChildToGroup(group, child.id);\n }\n else {\n diagram.removeChildFromGroup(group, child.id);\n }\n };\n UndoRedo.prototype.recordRemoveChildFromGroupNode = function (entry, diagram, isRedo) {\n var group = diagram.nameTable[entry.undoObject.id];\n var child = diagram.nameTable[entry.objectId];\n if (isRedo && entry.changeType === 'Remove') {\n diagram.removeChildFromGroup(group, child.id);\n }\n else {\n diagram.addChildToGroup(group, child.id);\n }\n };\n UndoRedo.prototype.recordSegmentChanged = function (obj, diagram) {\n var i = 0;\n //let node: NodeModel;\n var connector;\n if (obj.connectors && obj.connectors.length > 0) {\n for (i = 0; i < obj.connectors.length; i++) {\n connector = obj.connectors[parseInt(i.toString(), 10)];\n this.segmentChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.segmentChanged = function (connector, diagram) {\n var conn = diagram.nameTable[connector.id];\n conn.segments = connector.segments;\n diagram.commandHandler.updateEndPoint(conn);\n };\n UndoRedo.prototype.recordPositionChanged = function (obj, diagram) {\n var i = 0;\n var node;\n var connector;\n if (obj.nodes && obj.nodes.length > 0) {\n for (i = 0; i < obj.nodes.length; i++) {\n if (diagram.bpmnModule) {\n diagram.isPositionUndo = true;\n }\n node = obj.nodes[parseInt(i.toString(), 10)];\n this.positionChanged(node, diagram);\n }\n diagram.isPositionUndo = false;\n }\n if (obj.connectors && obj.connectors.length > 0) {\n for (i = 0; i < obj.connectors.length; i++) {\n connector = obj.connectors[parseInt(i.toString(), 10)];\n this.connectionChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.positionChanged = function (obj, diagram) {\n var node = diagram.nameTable[obj.id];\n if (obj.processId && !node.processId) {\n diagram.addProcess(obj, obj.processId);\n }\n if (!obj.processId && node.processId) {\n diagram.removeProcess(obj.id);\n }\n if (node.processId) {\n var tx = obj.margin.left - node.margin.left;\n var ty = obj.margin.top - node.margin.top;\n diagram.drag(node, tx, ty);\n }\n else {\n if (node.parentId) {\n var parent_3 = diagram.nameTable[node.parentId];\n if (parent_3.isLane) {\n obj.wrapper.offsetX = (obj.width / 2) + (parent_3.wrapper.bounds.x + obj.margin.left);\n obj.wrapper.offsetY = (obj.height / 2) + (parent_3.wrapper.bounds.y + obj.margin.top);\n }\n }\n var tx = obj.wrapper.offsetX - node.offsetX;\n var ty = obj.wrapper.offsetY - node.offsetY;\n diagram.drag(node, tx, ty);\n }\n if (diagram.bpmnModule) {\n diagram.bpmnModule.updateDocks(node, diagram);\n }\n };\n UndoRedo.prototype.recordSizeChanged = function (obj, diagram, entry) {\n var i = 0;\n var connector;\n var node;\n if (obj && obj.nodes && obj.nodes.length > 0) {\n for (i = 0; i < obj.nodes.length; i++) {\n node = obj.nodes[parseInt(i.toString(), 10)];\n if (node.children && !node.container) {\n var elements = [];\n var nodes = diagram.commandHandler.getAllDescendants(node, elements);\n for (var i_1 = 0; i_1 < nodes.length; i_1++) {\n var tempNode = entry.childTable[nodes[parseInt(i_1.toString(), 10)].id];\n if ((getObjectType(tempNode) === Node)) {\n this.sizeChanged(tempNode, diagram, entry);\n this.positionChanged(tempNode, diagram);\n }\n else {\n this.connectionChanged(tempNode, diagram, entry);\n }\n }\n }\n else {\n if (diagram.bpmnModule) {\n diagram.sizeUndo = true;\n }\n this.sizeChanged(node, diagram);\n this.positionChanged(node, diagram);\n if (diagram.bpmnModule) {\n diagram.sizeUndo = false;\n }\n }\n }\n }\n if (obj && obj.connectors && obj.connectors.length > 0) {\n var connectors = obj.connectors;\n for (i = 0; i < connectors.length; i++) {\n connector = connectors[parseInt(i.toString(), 10)];\n this.connectionChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.sizeChanged = function (obj, diagram, entry) {\n var node = diagram.nameTable[obj.id];\n var scaleWidth = obj.wrapper.actualSize.width / node.wrapper.actualSize.width;\n var scaleHeight = obj.wrapper.actualSize.height / node.wrapper.actualSize.height;\n if (entry && entry.childTable) {\n entry.childTable[obj.id] = cloneObject(node);\n }\n diagram.scale(node, scaleWidth, scaleHeight, {\n x: obj.wrapper.offsetX / node.wrapper.offsetX,\n y: obj.wrapper.offsetY / node.wrapper.offsetY\n });\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n UndoRedo.prototype.recordRotationChanged = function (obj, diagram, entry, type) {\n var i = 0;\n var node;\n var connector;\n var selectorObj = diagram.selectedItems;\n selectorObj.rotateAngle = obj.rotateAngle;\n if (selectorObj && selectorObj.wrapper) {\n selectorObj.wrapper.rotateAngle = obj.rotateAngle;\n }\n diagram.fromUndo = true;\n if (obj && obj.nodes && obj.nodes.length > 0) {\n for (i = 0; i < obj.nodes.length; i++) {\n node = obj.nodes[parseInt(i.toString(), 10)];\n // Bug 832864: Undo redo not working properly for group node with connectors.\n // This code is executed only for group nodes with connectors when the connector is not connected to a node either as a source or target.\n var isConnect = false;\n if (node.children && node.children.length > 0) {\n for (var j = 0; j < node.children.length; j++) {\n var child = diagram.nameTable[node.children[parseInt(j.toString(), 10)]];\n if (!(getObjectType(child) === Node)) {\n if (child.sourceID === '' || child.targetID === '') {\n isConnect = true;\n break;\n }\n }\n }\n if (isConnect && Object.keys(entry.childTable).length > 0) {\n var elements = [];\n var nodes = diagram.commandHandler.getAllDescendants(node, elements);\n for (var i2 = 0; i2 < nodes.length; i2++) {\n var tempNode = entry.childTable[nodes[parseInt(i2.toString(), 10)].id];\n if ((getObjectType(tempNode) === Node)) {\n var object = { id: '', rotateAngle: 0, wrapper: { offsetX: 0, offsetY: 0 } };\n if (type === 'redo') {\n object.id = tempNode.id;\n object.rotateAngle = node.rotateAngle;\n }\n else {\n object = tempNode;\n }\n this.rotationChanged(object, diagram);\n if (type === 'undo') {\n var offNode = diagram.nameTable[object.id];\n this.undoOffsets.push({ id: offNode.id, offsetX: offNode.offsetX, offsetY: offNode.offsetY });\n }\n else {\n var lastIndex = -1;\n for (var i_2 = this.undoOffsets.length - 1; i_2 >= 0; i_2--) {\n if (this.undoOffsets[parseInt(i_2.toString(), 10)].id === object.id) {\n object.wrapper = this.undoOffsets[parseInt(i_2.toString(), 10)];\n lastIndex = i_2;\n break;\n }\n }\n if (lastIndex !== -1) {\n this.undoOffsets.splice(lastIndex, 1);\n }\n }\n this.positionChanged(object, diagram);\n }\n else {\n this.connectionChanged(tempNode, diagram, entry);\n }\n }\n var nd = diagram.nameTable[node.id];\n nd.rotateAngle = obj.rotateAngle;\n diagram.updateSelector();\n this.rotationChanged(node, diagram);\n }\n else {\n this.rotationChanged(node, diagram);\n this.positionChanged(node, diagram);\n }\n }\n else {\n this.rotationChanged(node, diagram);\n this.positionChanged(node, diagram);\n }\n }\n }\n diagram.fromUndo = false;\n if (obj && obj.connectors && obj.connectors.length > 0) {\n for (i = 0; i < obj.connectors.length; i++) {\n connector = obj.connectors[parseInt(i.toString(), 10)];\n this.connectionChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.rotationChanged = function (obj, diagram) {\n var node = diagram.nameTable[obj.id];\n diagram.rotate(node, obj.rotateAngle - node.rotateAngle);\n };\n UndoRedo.prototype.recordConnectionChanged = function (obj, diagram) {\n var connector;\n if (obj && obj.connectors) {\n connector = obj.connectors[0];\n }\n else {\n connector = obj;\n }\n if (connector.sourceID && diagram.nameTable[connector.sourceID]) {\n diagram.insertValue(diagram.nameTable[connector.sourceID], true);\n }\n if (connector.targetID && diagram.nameTable[connector.targetID]) {\n diagram.insertValue(diagram.nameTable[connector.targetID], true);\n }\n if (connector instanceof Connector || connector.shape.type === 'None') {\n this.connectionChanged(connector, diagram);\n }\n };\n UndoRedo.prototype.connectionChanged = function (obj, diagram, entry) {\n var connector = diagram.nameTable[obj.id];\n var node;\n if (obj.sourcePortID !== connector.sourcePortID) {\n diagram.removePortEdges(diagram.nameTable[connector.sourceID], connector.sourcePortID, connector.id, false);\n connector.sourcePortID = obj.sourcePortID;\n diagram.connectorPropertyChange(connector, {}, { sourcePortID: obj.sourcePortID });\n }\n if (obj.targetPortID !== connector.targetPortID) {\n diagram.removePortEdges(diagram.nameTable[connector.targetID], connector.targetPortID, connector.id, true);\n connector.targetPortID = obj.targetPortID;\n diagram.connectorPropertyChange(connector, {}, { targetPortID: obj.targetPortID });\n }\n if (obj.sourceID !== connector.sourceID) {\n if (obj.sourceID === '') {\n node = diagram.nameTable[connector.sourceID];\n removeItem(node.outEdges, obj.id);\n }\n else {\n node = diagram.nameTable[obj.sourceID];\n node.outEdges.push(obj.id);\n diagram.updatePortEdges(node, obj, false);\n }\n connector.sourceID = obj.sourceID;\n diagram.connectorPropertyChange(connector, {}, { sourceID: obj.sourceID });\n }\n if (obj.targetID !== connector.targetID) {\n if (obj.targetID === '') {\n node = diagram.nameTable[connector.targetID];\n removeItem(node.inEdges, obj.id);\n }\n else {\n node = diagram.nameTable[obj.targetID];\n node.inEdges.push(obj.id);\n diagram.updatePortEdges(node, obj, true);\n }\n connector.targetID = obj.targetID;\n diagram.connectorPropertyChange(connector, {}, { targetID: obj.targetID });\n }\n if (entry && entry.childTable) {\n entry.childTable[obj.id] = cloneObject(connector);\n }\n var sx = obj.sourcePoint.x - connector.sourcePoint.x;\n var sy = obj.sourcePoint.y - connector.sourcePoint.y;\n if (sx !== 0 || sy !== 0) {\n diagram.dragSourceEnd(connector, sx, sy);\n }\n var tx = obj.targetPoint.x - connector.targetPoint.x;\n var ty = obj.targetPoint.y - connector.targetPoint.y;\n if (tx !== 0 || ty !== 0) {\n diagram.dragTargetEnd(connector, tx, ty);\n }\n diagram.updateSelector();\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n };\n UndoRedo.prototype.recordCollectionChanged = function (entry, diagram) {\n var obj = entry.undoObject;\n if (entry && entry.changeType) {\n var changeType = void 0;\n if (entry.isUndo) {\n if (entry.changeType === 'Insert') {\n changeType = 'Remove';\n }\n else {\n changeType = 'Insert';\n }\n }\n else {\n changeType = entry.changeType;\n }\n if (changeType === 'Remove') {\n if (obj.nodeId) {\n diagram.remove(diagram.nameTable[obj.nodeId + '_textannotation_' + obj.id]);\n }\n else {\n diagram.remove(obj);\n diagram.clearSelectorLayer();\n }\n }\n else {\n diagram.clearSelectorLayer();\n if (obj.parentId) {\n var parentNode = diagram.nameTable[obj.parentId];\n if (parentNode) {\n diagram.addChild(parentNode, obj);\n }\n else {\n diagram.add(obj);\n }\n }\n else if (obj.nodeId) {\n diagram.addTextAnnotation(obj, diagram.nameTable[obj.nodeId]);\n }\n else {\n if (!diagram.nameTable[obj.id]) {\n if (obj && obj.shape && obj.shape.type === 'SwimLane' && entry.isUndo) {\n pasteSwimLane(obj, undefined, undefined, undefined, undefined, true);\n }\n diagram.add(obj);\n }\n }\n if (obj.processId && diagram.nameTable[obj.processId]) {\n diagram.addProcess(obj, obj.processId);\n }\n }\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n }\n };\n UndoRedo.prototype.recordLabelCollectionChanged = function (entry, diagram) {\n var label = entry.undoObject;\n var obj = entry.redoObject;\n var node = diagram.nameTable[obj.id];\n if (entry && entry.changeType) {\n var changeType = void 0;\n if (entry.isUndo) {\n changeType = (entry.changeType === 'Insert') ? 'Remove' : 'Insert';\n }\n else {\n changeType = entry.changeType;\n }\n if (changeType === 'Remove') {\n diagram.removeLabels(node, [label]);\n diagram.clearSelectorLayer();\n }\n else {\n diagram.clearSelectorLayer();\n diagram.addLabels(node, [label]);\n }\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n }\n };\n UndoRedo.prototype.recordPortCollectionChanged = function (entry, diagram) {\n var port = entry.undoObject;\n var obj = entry.redoObject;\n var node = diagram.nameTable[obj.id];\n if (entry && entry.changeType) {\n var changeType = void 0;\n if (entry.isUndo) {\n changeType = (entry.changeType === 'Insert') ? 'Remove' : 'Insert';\n }\n else {\n changeType = entry.changeType;\n }\n if (changeType === 'Remove') {\n diagram.removePorts(node, [port]);\n diagram.clearSelectorLayer();\n }\n else {\n diagram.clearSelectorLayer();\n diagram.addPorts(node, [port]);\n }\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n }\n };\n /**\n * redo method \\\n *\n * @returns { void } redo method .\\\n * @param {Diagram} diagram - provide the diagram value.\n *\n * @private\n */\n UndoRedo.prototype.redo = function (diagram) {\n var entry = this.getRedoEntry(diagram);\n var startGroupActionCount = 0;\n if (entry) {\n if (entry.category === 'Internal') {\n if (entry.type === 'StartGroup') {\n startGroupActionCount++;\n this.groupUndo = true;\n //Removed isBlazor code\n }\n else {\n this.redoEntry(entry, diagram);\n }\n if (this.groupUndo) {\n this.redoGroupAction(entry, diagram, startGroupActionCount);\n this.groupUndo = false;\n }\n }\n else {\n if (!isBlazor()) {\n diagram.historyManager.redo(entry);\n }\n var arg = {\n entryType: 'redo', oldValue: entry.redoObject, newValue: entry.undoObject\n };\n //Removed isBlazor code\n diagram.triggerEvent(DiagramEvent.historyStateChange, arg);\n }\n }\n };\n UndoRedo.prototype.redoGroupAction = function (entry, diagram, startGroupActionCount) {\n while (startGroupActionCount !== 0) {\n this.redoEntry(entry, diagram);\n entry = this.getRedoEntry(diagram);\n if (entry.type === 'EndGroup') {\n startGroupActionCount--;\n }\n else if (entry.type === 'StartGroup') {\n startGroupActionCount++;\n }\n }\n startGroupActionCount = 0;\n };\n UndoRedo.prototype.redoEntry = function (historyEntry, diagram) {\n var redoObject;\n var redovalue;\n if (historyEntry.type !== 'PropertyChanged' && historyEntry.type !== 'CollectionChanged') {\n redoObject = (historyEntry.redoObject);\n redovalue = (historyEntry.redoObject);\n }\n diagram.diagramActions |= DiagramAction.UndoRedo;\n if (historyEntry.type !== 'StartGroup' && historyEntry.type !== 'EndGroup') {\n if (diagram.historyManager.redoStack.length > 0) {\n var addObject = diagram.historyManager.redoStack.splice(0, 1);\n diagram.historyManager.undoStack.splice(0, 0, addObject[0]);\n redovalue = (historyEntry.redoObject);\n }\n }\n diagram.protectPropertyChange(true);\n //Removed isBlazor code\n switch (historyEntry.type) {\n case 'PositionChanged':\n case 'Align':\n case 'Distribute':\n this.recordPositionChanged(redoObject, diagram);\n break;\n case 'SizeChanged':\n case 'Sizing':\n this.recordSizeChanged(redoObject, diagram, historyEntry);\n break;\n case 'RotationChanged':\n this.recordRotationChanged(redoObject, diagram, historyEntry, 'redo');\n break;\n case 'ConnectionChanged':\n this.recordConnectionChanged(redoObject, diagram);\n break;\n case 'PropertyChanged':\n this.recordPropertyChanged(historyEntry, diagram, true);\n break;\n case 'CollectionChanged':\n this.recordCollectionChanged(historyEntry, diagram);\n break;\n case 'LabelCollectionChanged':\n this.recordLabelCollectionChanged(historyEntry, diagram);\n break;\n case 'PortCollectionChanged':\n this.recordPortCollectionChanged(historyEntry, diagram);\n break;\n case 'Group':\n this.group(historyEntry, diagram);\n break;\n case 'UnGroup':\n this.unGroup(historyEntry, diagram);\n break;\n case 'SegmentChanged':\n this.recordSegmentChanged(redoObject, diagram);\n break;\n case 'PortPositionChanged':\n this.recordPortChanged(historyEntry, diagram, true);\n break;\n case 'AnnotationPropertyChanged':\n this.recordAnnotationChanged(historyEntry, diagram, true);\n break;\n case 'ChildCollectionChanged':\n this.recordChildCollectionChanged(historyEntry, diagram, true);\n break;\n case 'StackChildPositionChanged':\n this.recordStackPositionChanged(historyEntry, diagram, true);\n break;\n case 'RowHeightChanged':\n this.recordGridSizeChanged(historyEntry, diagram, true, true);\n break;\n case 'ColumnWidthChanged':\n this.recordGridSizeChanged(historyEntry, diagram, true, false);\n break;\n case 'LanePositionChanged':\n this.recordLanePositionChanged(historyEntry, diagram, true);\n break;\n case 'LaneCollectionChanged':\n case 'PhaseCollectionChanged':\n this.recordLaneOrPhaseCollectionChanged(historyEntry, diagram, true);\n break;\n case 'SendToBack':\n case 'SendForward':\n case 'SendBackward':\n case 'BringToFront':\n this.recordOrderCommandChanged(historyEntry, diagram, true);\n break;\n case 'AddChildToGroupNode':\n this.recordAddChildToGroupNode(historyEntry, diagram, true);\n break;\n case 'RemoveChildFromGroupNode':\n this.recordRemoveChildFromGroupNode(historyEntry, diagram, true);\n break;\n case 'ExternalEntry':\n //EJ2-848643 - Need to consider custom entries in start and end group action\n diagram.historyManager.redo(historyEntry);\n break;\n }\n diagram.protectPropertyChange(false);\n diagram.diagramActions &= ~DiagramAction.UndoRedo;\n diagram.historyChangeTrigger(historyEntry, 'Redo');\n if (redovalue) {\n var value = this.checkNodeObject(redovalue, diagram);\n if (value) {\n var getnodeDefaults = getFunction(diagram.updateSelection);\n if (getnodeDefaults) {\n getnodeDefaults(value, diagram);\n }\n }\n }\n };\n UndoRedo.prototype.getUndoEntry = function (diagram) {\n var undoEntry = null;\n var currentObject;\n var hList = diagram.historyManager;\n if (hList.canUndo) {\n undoEntry = hList.currentEntry;\n currentObject = hList.currentEntry.previous;\n if (currentObject) {\n hList.currentEntry = currentObject;\n if (!hList.canRedo) {\n hList.canRedo = true;\n }\n }\n else {\n hList.canRedo = true;\n hList.canUndo = false;\n }\n }\n return undoEntry;\n };\n UndoRedo.prototype.getRedoEntry = function (diagram) {\n var redoEntry = null;\n var entryCurrent;\n var hList = diagram.historyManager;\n if (hList.canRedo) {\n if (!hList.currentEntry.previous && !hList.canUndo) {\n entryCurrent = hList.currentEntry;\n }\n else {\n entryCurrent = hList.currentEntry.next;\n }\n if (entryCurrent) {\n hList.currentEntry = entryCurrent;\n if (!hList.canUndo) {\n hList.canUndo = true;\n }\n if (!entryCurrent.next) {\n hList.canRedo = false;\n hList.canUndo = true;\n }\n }\n redoEntry = hList.currentEntry;\n }\n return redoEntry;\n };\n /**\n * To destroy the undo redo module\n *\n * @returns {void}\n * @private\n */\n UndoRedo.prototype.destroy = function () {\n /**\n * Destroys the undo redo module\n */\n };\n /**\n * @returns { string } toBounds method .\\\n * Get getModuleName name.\n */\n UndoRedo.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'UndoRedo';\n };\n return UndoRedo;\n}());\n\n/**\n * Layout Animation function to enable or disable layout animation\n */\nvar LayoutAnimation = /** @__PURE__ @class */ (function () {\n function LayoutAnimation() {\n this.protectChange = false;\n this.setIntervalObject = [];\n }\n /**\n * Layout expand function for animation of expand and collapse \\\n *\n * @returns { void } Layout expand function for animation of expand and collapse .\\\n * @param {boolean} animation - provide the angle value.\n * @param {ILayout} objects - provide the angle value.\n * @param {Node} node - provide the angle value.\n * @param {Diagram} diagram - provide the angle value.\n * @private\n */\n LayoutAnimation.prototype.expand = function (animation, objects, node, diagram) {\n var _this = this;\n var i = 0;\n var j = 0;\n diagram.realActions = diagram.realActions | RealAction.AnimationClick;\n this.setIntervalObject[parseInt(i.toString(), 10)] = setInterval(function () {\n j++;\n return _this.layoutAnimation(objects, _this.setIntervalObject, j === 6, diagram, node);\n }, 20);\n if (node.isExpanded) {\n var opacity_1 = .2;\n diagram.protectPropertyChange(false);\n //let objects: ILayout = diagram.doLayout();\n var setIntervalObjects_1 = {};\n var x = 0;\n if (animation) {\n this.updateOpacity(node, opacity_1, diagram);\n setIntervalObjects_1[parseInt(x.toString(), 10)] = setInterval(function () {\n diagram.allowServerDataBinding = false;\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n opacity_1 <= 1 ? _this.updateOpacity(node, opacity_1, diagram) : clearInterval(setIntervalObjects_1[0]);\n opacity_1 += .2;\n diagram.allowServerDataBinding = true;\n }, 20);\n }\n }\n };\n // Bug 877226: Nodes overlapped while changing isExpanded property with Layout Animation.\n // To stop the and clear the existing setinterval object\n // Added this to stop the existing setinterval object when the layout animation is called for multiple nodes.\n LayoutAnimation.prototype.stopCurrentAnimation = function (objValue, diagram, node) {\n clearInterval(this.setIntervalObject[0]);\n this.setIntervalObject = [];\n for (var k = 0; k < objValue.objects.length; k++) {\n var node1 = diagram.nameTable[objValue.objects[parseInt(k.toString(), 10)].id];\n node1.offsetX += objValue.objects[parseInt(k.toString(), 10)].differenceX\n - (objValue.objects[parseInt(k.toString(), 10)].differenceX / 5);\n node1.offsetY += objValue.objects[parseInt(k.toString(), 10)].differenceY\n - (objValue.objects[parseInt(k.toString(), 10)].differenceY / 5);\n }\n diagram.realActions = diagram.realActions & RealAction.AnimationClick;\n diagram.refreshCanvasLayers();\n diagram.protectPropertyChange(true);\n diagram.triggerEvent(DiagramEvent.animationComplete, undefined);\n diagram.layout.fixedNode = '';\n diagram.protectPropertyChange(this.protectChange);\n var arg = {\n element: cloneBlazorObject(cloneObject(node)), state: (node.isExpanded) ? true : false\n };\n diagram.triggerEvent(DiagramEvent.expandStateChange, arg);\n if (diagram.lineRoutingModule && diagram.constraints & DiagramConstraints.LineRouting) {\n diagram.resetSegments();\n }\n };\n /**\n * Setinterval and Clear interval for layout animation \\\n *\n * @returns { void } Setinterval and Clear interval for layout animation .\\\n * @param {ILayout} objValue - provide the angle value.\n * @param {Object} layoutTimer - provide the angle value.\n * @param {ILayout} stop - provide the angle value.\n * @param {Diagram} diagram - provide the angle value.\n * @param {NodeModel} node - provide the angle value.\n * @private\n */\n LayoutAnimation.prototype.layoutAnimation = function (objValue, layoutTimer, stop, diagram, node) {\n if (!stop) {\n for (var k = 0; k < objValue.objects.length; k++) {\n var node_1 = diagram.nameTable[objValue.objects[parseInt(k.toString(), 10)].id];\n node_1.offsetX += objValue.objects[parseInt(k.toString(), 10)].differenceX / 5;\n node_1.offsetY += objValue.objects[parseInt(k.toString(), 10)].differenceY / 5;\n }\n }\n if (stop) {\n clearInterval(layoutTimer[0]);\n this.setIntervalObject = [];\n diagram.realActions = diagram.realActions & ~RealAction.AnimationClick;\n diagram.refreshCanvasLayers();\n diagram.protectPropertyChange(true);\n diagram.triggerEvent(DiagramEvent.animationComplete, undefined);\n diagram.organizationalChartModule.isAnimation = false;\n diagram.layout.fixedNode = '';\n diagram.protectPropertyChange(this.protectChange);\n var arg = {\n element: cloneBlazorObject(cloneObject(node)), state: (node.isExpanded) ? true : false\n };\n diagram.triggerEvent(DiagramEvent.expandStateChange, arg);\n if (diagram.lineRoutingModule && diagram.constraints & DiagramConstraints.LineRouting) {\n diagram.resetSegments();\n }\n }\n };\n /**\n *update the node opacity for the node and connector once the layout animation starts \\\n *\n * @returns { void } update the node opacity for the node and connector once the layout animation starts .\\\n * @param {Node} source - provide the source value.\n * @param {number} value - provide the value.\n * @param {Diagram} diagram - provide the diagram value.\n * @private\n */\n LayoutAnimation.prototype.updateOpacity = function (source, value, diagram) {\n for (var i = 0; i < source.outEdges.length; i++) {\n var connector = diagram.nameTable[source.outEdges[parseInt(i.toString(), 10)]];\n var target = diagram.nameTable[connector.targetID];\n connector.style.opacity = value;\n for (var j = 0; j < connector.wrapper.children.length; j++) {\n connector.wrapper.children[parseInt(j.toString(), 10)].style.opacity = value;\n target.style.opacity = value;\n if (target.wrapper instanceof Container) {\n diagram.updateNodeProperty(target.wrapper, undefined, value);\n }\n }\n this.updateOpacity(target, value, diagram);\n }\n };\n /**\n *To destroy the ruler\n *\n * @returns {void} To destroy the ruler\n */\n LayoutAnimation.prototype.destroy = function () {\n /**\n * Destroys the LayoutAnimate module\n */\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n LayoutAnimation.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'LayoutAnimate';\n };\n return LayoutAnimation;\n}());\n\n/**\n * Line Distribution\n * @private\n */\nvar LineDistribution = /** @__PURE__ @class */ (function () {\n ///** @private */\n //public edgeMapper: EdgeMapperObject[];\n /**\n * Constructor for the line distribution module\n * @private\n */\n function LineDistribution() {\n //constructs the line distribution module\n }\n /**\n * To destroy the line distribution module\n * @returns {void}\n * @private\n */\n LineDistribution.prototype.destroy = function () {\n /**\n * Destroys the line distribution module\n */\n };\n ///**\n // * Get the diagram instance.\n // */\n //private diagram: Diagram;\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n LineDistribution.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'LineDistribution';\n };\n /** @private */\n LineDistribution.prototype.initLineDistribution = function (graph, diagram) {\n var srcDirection = 'Bottom';\n //this.diagram = diagram;\n if (diagram.layout.connectionPointOrigin === 'DifferentPoint' || diagram.layout.enableRouting) {\n var tarDirection = 'Top';\n if (graph.orientation === 'BottomToTop') {\n srcDirection = 'Top';\n tarDirection = 'Bottom';\n }\n else if (graph.orientation === 'RightToLeft') {\n srcDirection = 'Left';\n tarDirection = 'Right';\n }\n else if (graph.orientation === 'LeftToRight') {\n srcDirection = 'Right';\n tarDirection = 'Left';\n }\n var graphnodes = diagram.nodes;\n if (graphnodes.length > 0) {\n for (var i = 0; i < graphnodes.length; i++) {\n var node = diagram.nameTable[graphnodes[parseInt(i.toString(), 10)].id];\n this.addDynamicPortandDistrrbuteLine(graph, node, srcDirection, tarDirection, diagram);\n }\n }\n }\n };\n LineDistribution.prototype.ObstacleSegment = function (options) {\n options.direction = getConnectorDirection(options.startpt, options.endpt);\n options.distance = Point.findLength(options.startpt, options.endpt);\n options.orientation = options.direction === 'Left' || options.direction === 'Right' ? 'horizontal' : 'vertical';\n // eslint-disable-next-line no-self-assign\n options.id = options.id;\n if (options.orientation === 'horizontal') {\n options.coord = options.startpt.y;\n if (options.direction === 'Left') {\n options.start = options.endpt.x;\n options.end = options.startpt.x;\n }\n else {\n options.start = options.startpt.x;\n options.end = options.endpt.x;\n }\n }\n else {\n options.coord = options.startpt.x;\n if (options.direction === 'Top') {\n options.start = options.endpt.y;\n options.end = options.startpt.y;\n }\n else {\n options.start = options.startpt.y;\n options.end = options.endpt.y;\n }\n }\n return options;\n };\n /** @private */\n LineDistribution.prototype.distributeLines = function (layout, diagram) {\n var isHorizontal = layout.orientation === 'LeftToRight'\n || layout.orientation === 'RightToLeft';\n var inversespacing = !isHorizontal ? layout.verticalSpacing : layout.horizontalSpacing;\n var srcdecoratorSize = 8.0;\n var obstacleCollection = 'obstaclePointCollection';\n var tardecoratorSize = 10.0;\n var avaibaleSpace = inversespacing - srcdecoratorSize - tardecoratorSize;\n var graph = [];\n var connectorObstacles = [];\n var globalConnectors = diagram.connectors;\n for (var i = 0; i < globalConnectors.length; i++) {\n var connector = globalConnectors[parseInt(i.toString(), 10)];\n var pts = [];\n for (var key = 0; key < connector.segments.length; key++) {\n var seg = connector.segments[parseInt(key.toString(), 10)];\n for (var k = 0; k < seg.points.length; k++) {\n var pt = seg.points[parseInt(k.toString(), 10)];\n if (pts.length === 0 || !(Point.equals(pt, pts[pts.length - 1]))) {\n pts.push(pt);\n }\n }\n }\n var obssegments = [];\n for (var j = 1; j < pts.length; j++) {\n var obstacle = this.ObstacleSegment({\n startpt: pts[j - 1], endpt: pts[parseInt(j.toString(), 10)], id: connector.id\n });\n obssegments.push(obstacle);\n }\n var connectorObstacle = { wrapper: connector, segments: obssegments };\n var segments = [];\n if (!isHorizontal) {\n for (var key = 0; key < connectorObstacle.segments.length; key++) {\n var obstacle = connectorObstacle.segments[parseInt(key.toString(), 10)];\n if (obstacle.orientation === 'horizontal') {\n segments.push(obstacle);\n }\n }\n }\n else {\n for (var key = 0; key < connectorObstacle.segments.length; key++) {\n var obstacle = connectorObstacle.segments[parseInt(key.toString(), 10)];\n if (obstacle.orientation === 'vertical') {\n segments.push(obstacle);\n }\n }\n }\n for (var j = 0; j < segments.length; j++) {\n var obstacleSegment = segments[parseInt(j.toString(), 10)];\n if (!this.containsValue(graph, obstacleSegment.coord)) {\n graph.push({ key: obstacleSegment.coord, value: [] });\n }\n var index = void 0;\n for (var k = 0; k < graph.length; k++) {\n var key = graph[parseInt(k.toString(), 10)].key;\n if (Number(key) === obstacleSegment.coord) {\n index = k;\n break;\n }\n }\n graph[parseInt(index.toString(), 10)].value.push(obstacleSegment);\n }\n connectorObstacles.push(connectorObstacle);\n }\n this.sortConnectors(graph, diagram);\n var modifiedgrap = [];\n for (var m = 0; m < graph.length; m++) {\n var row = graph[parseInt(m.toString(), 10)];\n var sortedrow = row.value;\n sortedrow.sort();\n var groupby = void 0;\n groupby = [];\n var index = 0;\n var maxEnd = Number.MIN_VALUE;\n groupby.push([]);\n for (var n = 0; n < sortedrow.length; n++) {\n var obstacleSegment = sortedrow[parseInt(n.toString(), 10)];\n if (!(groupby[parseInt(index.toString(), 10)].length > 0) || maxEnd >= obstacleSegment.start) {\n groupby[parseInt(index.toString(), 10)].push(obstacleSegment);\n maxEnd = Math.max(maxEnd, groupby[parseInt(index.toString(), 10)][groupby[parseInt(index.toString(), 10)].length - 1].end);\n }\n else {\n index++;\n groupby.push([]);\n groupby[parseInt(index.toString(), 10)].push(obstacleSegment);\n maxEnd = groupby[parseInt(index.toString(), 10)][groupby[parseInt(index.toString(), 10)].length - 1].end;\n }\n }\n for (var n = 0; n < groupby.length; n++) {\n var group = groupby[parseInt(n.toString(), 10)];\n var sortedGroup = [];\n for (var j = 0; j < group.length; j++) {\n var e = group[parseInt(j.toString(), 10)];\n if (e.start) {\n sortedGroup.push(e);\n }\n }\n var comparingDir = isHorizontal ? 'Bottom' : 'Right';\n var directed = [];\n for (var j = 0; j < sortedGroup.length; j++) {\n var e = sortedGroup[parseInt(j.toString(), 10)];\n if (e.direction === comparingDir) {\n directed.push(e);\n }\n }\n var reversedirected = [];\n for (var j = 0; j < sortedGroup.length; j++) {\n var e = sortedGroup[parseInt(j.toString(), 10)];\n if (e.direction !== comparingDir) {\n reversedirected.push(e);\n }\n }\n var mutual = [];\n if (directed.length > 0) {\n var temp = directed[0].start;\n var j = 0;\n while (j < reversedirected.length) {\n if (reversedirected[parseInt(j.toString(), 10)].end > temp) {\n mutual.push(reversedirected[parseInt(j.toString(), 10)]);\n reversedirected.splice(j, 1);\n }\n else {\n j++;\n }\n }\n }\n var mutualRow = [];\n mutualRow = this.updateSegmentRow(mutual, mutualRow);\n var directedRow = [];\n directedRow = [];\n directedRow = this.updateSegmentRow(reversedirected, directedRow);\n directed.reverse();\n directedRow = this.updateSegmentRow(directed, directedRow);\n if (!(mutualRow[mutualRow.length - 1].length > 0)) {\n mutualRow.splice(mutualRow.length - 1, 1);\n }\n if (!(directedRow[directedRow.length - 1].length > 0)) {\n directedRow.splice(directedRow.length - 1, 1);\n }\n var subrow = [];\n var descAdding = mutual.length > 0 && (sortedGroup[sortedGroup.length - 1].direction\n === mutual[mutual.length - 1].direction\n || sortedGroup[0].direction === mutual[0].direction);\n if (descAdding) {\n subrow = directedRow;\n for (var p = 0; p < mutualRow.length; p++) {\n var obj = mutualRow[parseInt(p.toString(), 10)];\n subrow[subrow.length] = obj;\n }\n }\n else {\n subrow = mutualRow;\n for (var p = 0; p < directedRow.length; p++) {\n var obj = directedRow[parseInt(p.toString(), 10)];\n subrow[subrow.length] = obj;\n }\n }\n if (subrow.length > 1) {\n var directionModifier = 1;\n if (layout.orientation === 'BottomToTop'\n || layout.orientation === 'RightToLeft') {\n directionModifier = -1;\n }\n var startCoord = row.key - (directionModifier * avaibaleSpace / 2.0);\n var diff = avaibaleSpace / subrow.length;\n for (var i = 0; i < subrow.length; i++) {\n var newcoord = startCoord + (i * diff * directionModifier);\n for (var p = 0; p < subrow[parseInt(i.toString(), 10)].length; p++) {\n var obstacleSegment = subrow[parseInt(i.toString(), 10)][parseInt(p.toString(), 10)];\n obstacleSegment.coord = newcoord;\n if (!this.containsValue(modifiedgrap, obstacleSegment.coord)) {\n modifiedgrap.push({ key: obstacleSegment.coord, value: [] });\n }\n var index_1 = void 0;\n for (var k = 0; k < modifiedgrap.length; k++) {\n var keyCheck = modifiedgrap[parseInt(k.toString(), 10)].key;\n if (keyCheck === obstacleSegment.coord) {\n index_1 = k;\n break;\n }\n }\n modifiedgrap[parseInt(index_1.toString(), 10)].value.push(obstacleSegment);\n }\n }\n }\n }\n }\n for (var m = 0; m < connectorObstacles.length; m++) {\n var connectorObstacle = connectorObstacles[parseInt(m.toString(), 10)];\n var pts = [];\n for (var i = 0; i < connectorObstacle.segments.length; i++) {\n if (i === 0) {\n pts.push(this.getObstacleStartPoint(connectorObstacle.segments[parseInt(i.toString(), 10)]));\n }\n else if (isHorizontal) {\n if (connectorObstacle.segments[parseInt(i.toString(), 10)].orientation === 'vertical') {\n pts[pts.length - 1] = this.getObstacleStartPoint(connectorObstacle.segments[parseInt(i.toString(), 10)]);\n }\n }\n else if (!isHorizontal) {\n if (connectorObstacle.segments[parseInt(i.toString(), 10)].orientation === 'horizontal') {\n pts[pts.length - 1] = this.getObstacleStartPoint(connectorObstacle.segments[parseInt(i.toString(), 10)]);\n }\n }\n pts.push(this.getObstacleEndPoint(connectorObstacle.segments[parseInt(i.toString(), 10)]));\n }\n /* tslint:disable */\n connectorObstacle.wrapper[\"\" + obstacleCollection] = [];\n for (var j = 0; j < pts.length; j++) {\n var point = pts[parseInt(j.toString(), 10)];\n if (j === 0 || (j > 0 && !(Point.equals(point, pts[j - 1])))) {\n connectorObstacle.wrapper[\"\" + obstacleCollection].push(this.getPointvalue(point.x, point.y));\n }\n }\n /* tslint:enable */\n //EJ2-70198 - The layout ConnectionPointOrigin DifferentPoint property is not working for bezier connector\n //Bug 851920: Connector overlaps the node in complex hierarchical tree layout. Here the below condition is modified to check connector type.\n if (connectorObstacle.wrapper.type === 'Orthogonal') {\n this.resetConnectorPoints(connectorObstacle.wrapper, diagram);\n }\n }\n };\n //Bug 862601: Connectors are not rendered properly with lineRouting and lineDistribution enables during doLayout process.\n //To sort the connectors order in graph based on its target point and orientation to avoid connector segments path in same line.\n LineDistribution.prototype.sortConnectors = function (graph, diagram) {\n for (var i = 0; i < graph.length; i++) {\n for (var j = 0; j < graph[parseInt(i.toString(), 10)].value.length; j++) {\n if (graph[parseInt(i.toString(), 10)].value.length > 1) {\n if (diagram.layout.orientation === 'LeftToRight' || diagram.layout.orientation === 'RightToLeft') {\n graph[parseInt(i.toString(), 10)].value.sort(function (a, b) {\n var connectorA = diagram.nameTable[\"\" + a.id];\n var connectorB = diagram.nameTable[\"\" + b.id];\n return connectorA.targetPoint.y - connectorB.targetPoint.y;\n });\n }\n else if (diagram.layout.orientation === 'TopToBottom' || diagram.layout.orientation === 'BottomToTop') {\n graph[parseInt(i.toString(), 10)].value.sort(function (a, b) {\n var connectorA = diagram.nameTable[\"\" + a.id];\n var connectorB = diagram.nameTable[\"\" + b.id];\n return connectorA.targetPoint.x - connectorB.targetPoint.x;\n });\n }\n }\n }\n }\n };\n //private inflate(rect: Rect, x: number, y: number): Rect {\n // rect.x -= x;\n // rect.y -= y;\n // rect.width += 2 * x;\n // rect.height += 2 * y;\n // return rect;\n //}\n //private updateConnectorPoints(\n // connectorPoints: Point[], startSegmentSize: number, intermediatePoint: Point, bounds: object, orientation: string):\n // Point[] {\n // const layoutBounds: Rect = bounds as Rect;\n // const isHorizontal: boolean = orientation === 'LeftToRight' || orientation === 'RightToLeft';\n // const pts: Point[] = connectorPoints;\n // if (pts.length > 2) {\n // const newPt: Point = Point.transform(pts[0], Point.findAngle(pts[0], pts[1]), startSegmentSize) as Point;\n // const nextPt: Point = Point.transform(newPt, Point.findAngle(pts[1], pts[2]), Point.findLength(pts[1], pts[2])) as Point;\n // pts.splice(1, 2, newPt, nextPt);\n // if (intermediatePoint != null) {\n // const index: number = 2;\n // const ptsCount: number = pts.length;\n // const newPt1: Point = Point.transform(\n // pts[ptsCount - 1],\n // Point.findAngle(pts[ptsCount - 1], pts[ptsCount - 2]),\n // startSegmentSize) as Point;\n // pts.splice(ptsCount - 1, 0, newPt1);\n // while (index < (pts.length - 2)) {\n // pts.splice(index, 1);\n // }\n // const edgePt: Point = intermediatePoint;\n // this.inflate((layoutBounds as Rect), (layoutBounds as Rect).width, layoutBounds.height);\n // const line1: Point[] = [];\n // line1[0] = this.getPointvalue(edgePt.x, layoutBounds.y) as Point;\n // line1[1] = this.getPointvalue(edgePt.x, layoutBounds.y + layoutBounds.height) as Point;\n // const line2: Point[] = [];\n // line2[0] = this.getPointvalue(layoutBounds.x, pts[1].y) as Point;\n // line2[1] = this.getPointvalue(layoutBounds.x + layoutBounds.width, pts[1].y) as Point;\n // const line3: Point[] = [];\n // line3[0] = this.getPointvalue(layoutBounds.x, newPt1.y) as Point;\n // line3[1] = this.getPointvalue(layoutBounds.x + layoutBounds.width, newPt1.y) as Point;\n // if (isHorizontal) {\n // line1[0] = this.getPointvalue(layoutBounds.x, edgePt.y) as Point;\n // line1[1] = this.getPointvalue(layoutBounds.x + layoutBounds.width, edgePt.y) as Point;\n // line2[0] = this.getPointvalue(pts[1].x, layoutBounds.y) as Point;\n // line2[1] = this.getPointvalue(pts[1].x, layoutBounds.y + layoutBounds.height) as Point;\n // line3[0] = this.getPointvalue(newPt1.x, layoutBounds.y) as Point;\n // line2[1] = this.getPointvalue(newPt1.x, layoutBounds.y + layoutBounds.height) as Point;\n // }\n // const intercepts1: Point[] = [intersect2(\n // line1[0] as Point,\n // line1[1] as Point, line2[0] as Point, line2[1] as Point)] as Point[];\n // const intercepts2: Point[] = [intersect2(\n // line1[0] as Point, line1[1] as Point,\n // line3[0] as Point, line3[1] as Point)] as Point[];\n // if (intercepts2.length > 0) {\n // pts.splice(2, 0, intercepts2[0]);\n // }\n // if (intercepts1.length > 0) {\n // pts.splice(2, 0, intercepts1[0]);\n // }\n // }\n // }\n // let i: number = 1;\n // while (i < pts.length - 1) {\n // if (Point.equals(pts[i - 1], pts[parseInt(i.toString(), 10)])) {\n // pts.splice(i, 1);\n // } else if (Point.findAngle(pts[i - 1], pts[parseInt(i.toString(), 10)])\n // === Point.findAngle(pts[parseInt(i.toString(), 10)], pts[i + 1])) {\n // pts.splice(i, 1);\n // } else {\n // i++;\n // }\n // }\n // return pts;\n //}\n /* tslint:disable */\n LineDistribution.prototype.resetConnectorPoints = function (edge, diagram) {\n var obstacleCollection = 'obstaclePointCollection';\n if (edge.segments[0].points\n && edge.segments[0].points.length > 0 && edge[\"\" + obstacleCollection]) {\n var connector = edge;\n connector.sourcePoint = edge[\"\" + obstacleCollection][0];\n connector.targetPoint = edge[\"\" + obstacleCollection][edge[\"\" + obstacleCollection].length - 1];\n var segments = void 0;\n segments = [];\n for (var i = 0; i < edge[\"\" + obstacleCollection].length - 1; i++) {\n var point1 = edge[\"\" + obstacleCollection][parseInt(i.toString(), 10)];\n var point2 = edge[\"\" + obstacleCollection][i + 1];\n var length_1 = findDistance(point1, point2);\n var direction = getConnectorDirection(point1, point2);\n if (i === edge[\"\" + obstacleCollection].length - 2) {\n if ((diagram.layout.orientation === 'RightToLeft' && direction === 'Left')\n || (diagram.layout.orientation === 'LeftToRight' && direction === 'Right')\n || (diagram.layout.orientation === 'TopToBottom' && direction === 'Bottom')\n || (diagram.layout.orientation === 'BottomToTop' && direction === 'Top')) {\n length_1 = length_1 / 2;\n }\n }\n /* tslint:enable */\n var tempSegment = new OrthogonalSegment(edge, 'segments', { type: 'Orthogonal' }, true);\n tempSegment.length = length_1;\n tempSegment.direction = direction;\n segments.push(tempSegment);\n }\n connector.segments = segments;\n connector.type = 'Orthogonal';\n diagram.connectorPropertyChange(connector, {}, {\n type: 'Orthogonal',\n segments: connector.segments\n });\n }\n };\n LineDistribution.prototype.getObstacleEndPoint = function (segment) {\n if (segment.orientation === 'horizontal') {\n if (segment.direction === 'Left') {\n return this.getPointvalue(segment.start, segment.coord);\n }\n return this.getPointvalue(segment.end, segment.coord);\n }\n if (segment.direction === 'Top') {\n return this.getPointvalue(segment.coord, segment.start);\n }\n return this.getPointvalue(segment.coord, segment.end);\n };\n LineDistribution.prototype.getObstacleStartPoint = function (segment) {\n if (segment.orientation === 'horizontal') {\n if (segment.direction === 'Left') {\n return this.getPointvalue(segment.end, segment.coord);\n }\n return this.getPointvalue(segment.start, segment.coord);\n }\n if (segment.direction === 'Top') {\n return this.getPointvalue(segment.coord, segment.end);\n }\n return this.getPointvalue(segment.coord, segment.start);\n };\n LineDistribution.prototype.updateSegmentRow = function (obstacleSegments, segmentRow) {\n var k = 0;\n if (!(segmentRow.length > 0)) {\n segmentRow[0] = [];\n }\n for (var i = 0; i < obstacleSegments.length; i++) {\n var obstacleSegment = obstacleSegments[parseInt(i.toString(), 10)];\n while (k < segmentRow.length) {\n if (k === segmentRow.length - 1) {\n segmentRow[k + 1] = [];\n }\n if (!(segmentRow[parseInt(k.toString(), 10)].length > 0)\n || segmentRow[parseInt(k.toString(), 10)][segmentRow[parseInt(k.toString(), 10)].length - 1].end\n < obstacleSegment.start) {\n segmentRow[parseInt(k.toString(), 10)].push(obstacleSegment);\n break;\n }\n k++;\n }\n }\n return segmentRow;\n };\n LineDistribution.prototype.portOffsetCalculation = function (port, length, direction, i) {\n if (direction === 'Top') {\n port.offset = { x: (i + 1) * (1.0 / (length + 1)), y: 0 };\n }\n if (direction === 'Bottom') {\n port.offset = { x: (i + 1) * (1.0 / (length + 1)), y: 1 };\n }\n if (direction === 'Left') {\n port.offset = { x: 0, y: (i + 1) * (1.0 / (length + 1)) };\n }\n if (direction === 'Right') {\n port.offset = { x: 1, y: (i + 1) * (1.0 / (length + 1)) };\n }\n };\n LineDistribution.prototype.addDynamicPortandDistrrbuteLine = function (layout, node, sourceDirection, targetDirection, diagram) {\n if ((node.ports && node.ports.length > 0)) {\n var port = node.ports;\n diagram.removePorts(node, port);\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var existingPorts = node.ports;\n var outConnectors = node.outEdges;\n var inConnectors = node.inEdges;\n this.initPort(outConnectors, diagram, node, sourceDirection, false);\n this.initPort(inConnectors, diagram, node, targetDirection, true);\n };\n /* tslint:disable */\n LineDistribution.prototype.initPort = function (connectors, diagram, node, targetDirection, inConnectors) {\n var obstacleCollection = 'obstaclePointCollection';\n var objects = connectors;\n // EJ2-61463 - Added below code to sort the objects based on the source node offset position\n if (connectors.length > 1 && inConnectors) {\n connectors = this.sortObjects(objects, inConnectors, diagram);\n }\n for (var i = 0; i <= connectors.length - 1; i++) {\n var internalConnector = diagram.nameTable[connectors[parseInt(i.toString(), 10)]];\n internalConnector[\"\" + obstacleCollection] = [];\n var newPort = findPort(node, inConnectors ? internalConnector.targetPortID : internalConnector.sourcePortID);\n var direction = targetDirection;\n if (newPort === undefined) {\n newPort = new PointPort(node, 'ports', '', true);\n newPort.id = randomId() + '_LineDistribution';\n if (inConnectors) {\n internalConnector.targetPortID = newPort.id;\n }\n else {\n internalConnector.sourcePortID = newPort.id;\n }\n }\n this.portOffsetCalculation(newPort, connectors.length, direction, i);\n node.ports.push(newPort);\n var portWrapper = node.initPortWrapper(node.ports[node.ports.length - 1]);\n node.wrapper.children.push(portWrapper);\n // EJ2-66867 - Exception occurs on calling doLayout while injecting Linerouting module\n // nodes portWrapper bouds is updated below\n node.wrapper.measure(new Size(node.width, node.height), node.id);\n node.wrapper.arrange(node.wrapper.desiredSize);\n diagram.connectorPropertyChange(internalConnector, inConnectors ? { targetPortID: '' } : { sourcePortID: '' }, \n // eslint-disable-next-line\n inConnectors ? { targetPortID: newPort.id } : { sourcePortID: newPort.id });\n }\n };\n /* tslint:enable */\n //EJ2-61463 - Method used to sort the connectors based on the source node offset position\n LineDistribution.prototype.sortObjects = function (objects, inConnectors, diagram) {\n var temp;\n for (var i = 0; i < objects.length; i++) {\n for (var j = i + 1; j < objects.length; j++) {\n var internalConnector = diagram.nameTable[objects[parseInt(i.toString(), 10)]];\n var internalConnector2 = diagram.nameTable[objects[parseInt(j.toString(), 10)]];\n if (inConnectors) {\n var childNode = diagram.nameTable[internalConnector.sourceID];\n var childNode2 = diagram.nameTable[internalConnector2.sourceID];\n // For LeftToRight and RightToLeft we want to consider source node offsetY position\n if (diagram.layout.orientation === 'LeftToRight' || diagram.layout.orientation === 'RightToLeft') {\n if (childNode.offsetY > childNode2.offsetY) {\n temp = objects[parseInt(i.toString(), 10)];\n objects[parseInt(i.toString(), 10)] = objects[parseInt(j.toString(), 10)];\n objects[parseInt(j.toString(), 10)] = temp;\n }\n }\n else {\n // For TopToBottom or BottomToTop means we want to consider source node offsetX position\n if (childNode.offsetX > childNode2.offsetX) {\n temp = objects[parseInt(i.toString(), 10)];\n objects[parseInt(i.toString(), 10)] = objects[parseInt(j.toString(), 10)];\n objects[parseInt(j.toString(), 10)] = temp;\n }\n }\n }\n }\n }\n return objects;\n };\n //private shiftMatrixCells(\n // value: number, startingCell: MatrixCellGroupObject, shiftChildren: boolean,\n // parentCell: MatrixCellGroupObject, matrixModel: MatrixModelObject):\n // void {\n // if (!(value === 0)) {\n // const matrix: MatrixObject[] = matrixModel.matrix;\n // const matrixRow: MatrixCellGroupObject[] = matrix[startingCell.level].value;\n // const index: number = matrixRow.indexOf(startingCell);\n // for (let i: number = index; i < matrixRow.length; i++) {\n // matrixRow[parseInt(i.toString(), 10)].offset += value;\n // }\n // if (shiftChildren) {\n // if (startingCell.visitedChildren.length > 0) {\n // this.shiftMatrixCells(\n // value,\n // startingCell.visitedChildren[0],\n // true,\n // startingCell,\n // matrixModel);\n // } else {\n // let i: number = 1;\n // let nextSibilingwithChild: MatrixCellGroupObject = null;\n // while (index + i < matrixRow.length) {\n // const nextCell: MatrixCellGroupObject = matrixRow[index + i];\n // if (parentCell != null && this.containsValue(nextCell.visitedParents, parentCell)) {\n // if (nextCell.visitedChildren.length > 0) {\n // nextSibilingwithChild = nextCell;\n // } else {\n // i++;\n // continue;\n // }\n // }\n // break;\n // }\n // if (nextSibilingwithChild != null) {\n // this.shiftMatrixCells(\n // value,\n // nextSibilingwithChild.visitedChildren[0],\n // true,\n // nextSibilingwithChild,\n // matrixModel);\n // }\n // }\n // }\n // }\n //}\n //private arrangeMatrix(cell: MatrixCellGroupObject, parent: MatrixCellGroupObject, matrixModel: MatrixModelObject): void {\n // const layoutSettings: LayoutProp = matrixModel.model.layout;\n // const isHorizontal: boolean = layoutSettings.orientation === 'LeftToRight'\n // || layoutSettings.orientation === 'RightToLeft';\n // const spacing: number = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n // const matrix: MatrixObject[] = matrixModel.matrix;\n // const matrixRow: MatrixCellGroupObject[] = matrix[cell.level].value;\n // const matrixIndex: number = matrixRow.indexOf(cell);\n // if (cell.visitedParents.length > 0) {\n // if (cell.visitedParents.length === 1) {\n // cell.initialOffset = cell.offset;\n // }\n // if (matrixIndex + 1 < matrixRow.length) {\n // const nextCell: MatrixCellGroupObject = matrixRow[matrixIndex + 1];\n // if (nextCell.visitedParents.length > 0) {\n // if (!this.containsValue(cell.visitedParents, parent)) {\n // cell.visitedParents.push(parent);\n // parent.ignoredChildren.push(cell);\n // return;\n // }\n // }\n // }\n // }\n // if (!(cell.children.length > 0)) {\n // let validOffset: number = cell.offset;\n // if (matrixIndex > 0) {\n // const prevCell: MatrixCellGroupObject = matrixRow[matrixIndex - 1];\n // validOffset = prevCell.offset + (prevCell.size / 2) + spacing + (cell.size / 2);\n // }\n // this.shiftMatrixCells(validOffset - cell.offset, cell, false, null, matrixModel);\n // } else {\n // for (let i: number = 0; i < cell.children.length; i++) {\n // const matrixCellChild: MatrixCellGroupObject = cell.children[parseInt(i.toString(), 10)];\n // if (!this.containsValue(cell.visitedChildren, matrixCellChild)) {\n // this.arrangeMatrix(matrixCellChild, cell, matrixModel);\n // cell.visitedChildren.push(matrixCellChild);\n // }\n // }\n // if (cell.visitedChildren.length > 0) {\n // const children: MatrixCellGroupObject[] = cell.visitedChildren.slice();\n // for (let i: number = 0; i < cell.ignoredChildren.length; i++) {\n // //let cellIgnoredChild: MatrixCellGroupObject = cell.ignoredChildren[i];\n // children.splice(0, 1);\n // cell.visitedChildren.splice(0, 1);\n // }\n // if (children.length > 0) {\n // const firstChild: MatrixCellGroupObject = cell.visitedChildren[0];\n // const lastChild: MatrixCellGroupObject = cell.visitedChildren[cell.visitedChildren.length - 1];\n // const x1: number = firstChild.offset - (firstChild.size / 2);\n // const x2: number = lastChild.offset + (lastChild.size / 2);\n // const newoffset: number = (x1 + x2) / 2;\n // if (newoffset < cell.offset) {\n // this.shiftMatrixCells(cell.offset - newoffset, firstChild, true, cell, matrixModel);\n // } else if (newoffset > cell.offset) {\n // this.shiftMatrixCells(newoffset - cell.offset, cell, false, null, matrixModel);\n // }\n // }\n // }\n // }\n // if (!this.containsValue(cell.visitedParents, parent)) {\n // cell.visitedParents.push(parent);\n // }\n //}\n /** @private */\n LineDistribution.prototype.resetConnectorSegments = function (connector) {\n var segements = connector.segments;\n for (var i = segements.length; i > 0; i--) {\n segements.splice(i - 1, 1);\n }\n };\n /* tslint:disable */\n /** @private */\n LineDistribution.prototype.resetRoutingSegments = function (connector, diagram, points) {\n if (connector['levelSkip']) {\n //Bug 877799: Optimize the routing segment distance while using enableRouting in layout.\n var sourceLevel = void 0;\n var targetLevel = void 0;\n var collection = diagram.layout.ranks.reverse();\n //To find the source level and target level of the level skip connector\n for (var i = 0; i < collection.length; i++) {\n for (var j = 0; j < collection[parseInt(i.toString(), 10)].length; j++) {\n if (connector.sourceID === collection[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)].id) {\n sourceLevel = i;\n }\n if (connector.targetID === collection[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)].id) {\n targetLevel = i;\n }\n }\n }\n // To find the overlapping collection between the source and target level\n var overlappCollection = [];\n if (sourceLevel < targetLevel) {\n for (var i = 0; i < collection.length; i++) {\n if (i > sourceLevel && i < targetLevel) {\n overlappCollection.push(collection[parseInt(i.toString(), 10)]);\n }\n }\n }\n else {\n for (var i = 0; i < collection.length; i++) {\n if (i < sourceLevel && i > targetLevel) {\n overlappCollection.push(collection[parseInt(i.toString(), 10)]);\n }\n }\n }\n // To find the overlapping nodes between the source and target level\n var overLapNodesCollection = [];\n for (var i = 0; i < overlappCollection.length; i++) {\n for (var j = 0; j < overlappCollection[parseInt(i.toString(), 10)].length; j++) {\n if (overlappCollection[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)].edges === undefined) {\n var node = diagram.nameTable[overlappCollection[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)].id];\n overLapNodesCollection.push(node);\n }\n }\n }\n var isInsideBounds = false;\n if (!diagram.routingConnectors) {\n diagram.routingConnectors = [];\n }\n //To find whether the connector is overlapping with the nodes in the overlapping collection.\n // eslint-disable-next-line no-labels\n overlapping: for (var count = 0; count < overLapNodesCollection.length; count++) {\n var bounds = overLapNodesCollection[parseInt(count.toString(), 10)].wrapper.bounds;\n for (var i = 0; i < connector.segments.length; i++) {\n var points_1 = connector.segments[parseInt(i.toString(), 10)].points;\n for (var j = 0; j < points_1.length; j++) {\n var lineStart = points_1[parseInt(j.toString(), 10)];\n var lineEnd = points_1[j + 1];\n if (lineEnd) {\n var connectorPoints = this.pointsAlongLine(lineStart, lineEnd);\n isInsideBounds = this.pointInsideBounds(connectorPoints, bounds);\n if (isInsideBounds) {\n diagram.routingConnectors.push(connector);\n // eslint-disable-next-line no-labels\n break overlapping;\n }\n }\n }\n }\n }\n }\n };\n /**\n * Calculates points along a line between two given points.\n * @param start The starting point of the line.\n * @param end The ending point of the line.\n * @return An array of points along the line.\n */\n LineDistribution.prototype.pointsAlongLine = function (start, end) {\n var granularity = 1;\n var dx = end.x - start.x;\n var dy = end.y - start.y;\n var length = Math.sqrt(dx * dx + dy * dy);\n var stepX = (dx / length) * granularity;\n var stepY = (dy / length) * granularity;\n var points = [];\n for (var i = 0; i <= length; i += granularity) {\n points.push({ x: start.x + stepX * i, y: start.y + stepY * i });\n }\n return points;\n };\n /**\n *\n * Checks if any of the given points fall inside the specified bounding rectangle.\n * @param points An array of points to be checked.\n * @param bounds The bounding rectangle to check against.\n * @return True if any point is inside the bounds, false otherwise.\n */\n LineDistribution.prototype.pointInsideBounds = function (points, bounds) {\n for (var _i = 0, points_2 = points; _i < points_2.length; _i++) {\n var point = points_2[_i];\n if (bounds.right > point.x &&\n bounds.left < point.x &&\n bounds.top < point.y &&\n bounds.bottom > point.y) {\n return true;\n }\n }\n return false;\n };\n /* tslint:enable */\n /** @private */\n //public arrangeElements(matrixModel: MatrixModelObject, layout: Layout): void {\n // const layoutSettings: LayoutProp = matrixModel.model.layout;\n // let isHorizontal: boolean;\n // if (layout.orientation === 'LeftToRight' || layout.orientation === 'RightToLeft') {\n // isHorizontal = true;\n // } else {\n // isHorizontal = false;\n // }\n // const spacing: number = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n // //let spacingInverse: number = !isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n // // Need to group element before\n // this.groupLayoutCells(matrixModel);\n // this.createMatrixCells(matrixModel);\n // for (let j: number = 0; j < matrixModel.matrix.length; j++) {\n // const matrixKey: number = matrixModel.matrix[parseInt(j.toString(), 10)].key;\n // const matrixrow: MatrixCellGroupObject[] = matrixModel.matrix[parseInt(matrixKey.toString(), 10)].value;\n // for (let i: number = 1; i < matrixrow.length; i++) {\n // const cell: MatrixCellGroupObject = matrixrow[parseInt(i.toString(), 10)];\n // const prevCell: MatrixCellGroupObject = matrixrow[i - 1];\n // cell.offset += prevCell.offset + (prevCell.size / 2) + spacing + (cell.size / 2);\n // }\n // }\n // for (let j: number = 0; j < matrixModel.matrix[0].value.length; j++) {\n // const root: MatrixCellGroupObject = matrixModel.matrix[0].value[parseInt(j.toString(), 10)];\n // this.arrangeMatrix(root, null, matrixModel);\n // }\n // for (let k: number = 0; k < matrixModel.matrix.length; k++) {\n // const row: MatrixCellGroupObject[] = matrixModel.matrix[parseInt(k.toString(), 10)].value;\n // for (let i: number = 0; i < row.length; i++) {\n // const cell: MatrixCellGroupObject = row[parseInt(i.toString(), 10)];\n // if (cell.visitedParents.length > 1) {\n // let firstParent: MatrixCellGroupObject = cell.visitedParents[0];\n // let lastParent: MatrixCellGroupObject = cell.visitedParents[cell.visitedParents.length - 1];\n // const firstVertexParent: MatrixCellGroupObject = this.findParentVertexCellGroup(firstParent);\n // const lastVertexParent: MatrixCellGroupObject = this.findParentVertexCellGroup(lastParent);\n // if (firstParent !== firstVertexParent && firstVertexParent.offset < firstParent.offset) {\n // firstParent = firstVertexParent;\n // }\n // if (lastParent !== lastVertexParent && lastVertexParent.offset > lastParent.offset) {\n // lastParent = firstVertexParent;\n // }\n // const newoffset: number = (firstParent.offset + lastParent.offset) / 2;\n // const availOffsetMin: number = cell.initialOffset;\n // const availOffsetMax: number = cell.offset;\n // if (!(availOffsetMax === availOffsetMin)) {\n // if (newoffset >= availOffsetMin && newoffset <= availOffsetMax) {\n // this.translateMatrixCells(newoffset - cell.offset, cell);\n // } else if (newoffset < availOffsetMin) {\n // this.translateMatrixCells(availOffsetMin - cell.offset, cell);\n // }\n // }\n // }\n // }\n // }\n // this.setXYforMatrixCell(matrixModel);\n //}\n //private findParentVertexCellGroup(cell: MatrixCellGroupObject): MatrixCellGroupObject {\n // if (cell.cells[0]) {\n // return cell;\n // }\n // if (cell.parents.length > 0) {\n // return this.findParentVertexCellGroup(cell.parents[0]);\n // }\n // return cell;\n //}\n //private setXYforMatrixCell(matrixModel: MatrixModelObject): void {\n // const layoutSettings: LayoutProp = matrixModel.model.layout;\n // const isHorizontal: boolean = layoutSettings.orientation === 'LeftToRight'\n // || layoutSettings.orientation === 'RightToLeft';\n // const spacing: number = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n // for (let i: number = 0; i < matrixModel.matrix.length; i++) {\n // const matrixrow1: MatrixCellGroupObject[] = matrixModel.matrix[parseInt(i.toString(), 10)].value;\n // for (let j: number = 0; j < matrixrow1.length; j++) {\n // const matrixCell: MatrixCellGroupObject = matrixrow1[parseInt(j.toString(), 10)];\n // let start: number = matrixCell.offset - (matrixCell.size / 2);\n // for (let k: number = 0; k < (matrixCell.cells as CellObject[]).length; k++) {\n // const cell: CellObject = matrixCell.cells[parseInt(k.toString(), 10)];\n // const type: string = this.getType(cell.type);\n // if (type === 'internalVertex') {\n // const internalVertex: CellObject = cell;\n // const width: number = internalVertex.cell.geometry.width;\n // const height: number = internalVertex.cell.geometry.height;\n // if (isHorizontal) {\n // internalVertex.cell.geometry = new Rect(\n // matrixModel.rowOffset[matrixCell.level] - (width / 2),\n // start,\n // width,\n // height) as Rect;\n // } else {\n // internalVertex.cell.geometry = new Rect(\n // start,\n // matrixModel.rowOffset[matrixCell.level] - (height / 2),\n // width,\n // height) as Rect;\n // }\n // start += (isHorizontal ? height : width) + spacing;\n // } else if (type === 'internalEdge') {\n // const internalEdges: CellObject = cell;\n // const parent: MatrixCellGroupObject = matrixCell.visitedParents[0];\n // let isContainSibilingVertex: boolean = false;\n // if (parent) {\n // for (let l: number = 0; l < parent.visitedChildren.length; l++) {\n // const children: MatrixCellGroupObject = parent.visitedChildren[parseInt(l.toString(), 10)];\n // const cells: CellObject[] = [];\n // for (let m: number = 0; m < (children.cells as CellObject[]).length; m++) {\n // const cell: CellObject = children.cells[parseInt(m.toString(), 10)];\n // const type: string = this.getType(cell.type);\n // if (type === 'internalVertex') {\n // cells.push(cell);\n // }\n // }\n // if (cells.length > 0) {\n // isContainSibilingVertex = true;\n // break;\n // }\n // }\n // }\n // // Need to updated line width\n // const lineWidth: number = 1;\n // const edgeSpacing: number = 5;\n // for (let m: number = 0; m < internalEdges.edges.length; m++) {\n // const internalConnector: Connector = internalEdges.edges[parseInt(m.toString(), 10)];\n // let pt: Point = this.getPointvalue(start + (lineWidth / 2.0), matrixModel.rowOffset[matrixCell.level]) as Point;\n // if (isHorizontal) {\n // pt = this.getPointvalue(matrixModel.rowOffset[matrixCell.level], start + (lineWidth / 2.0)) as Point;\n // }\n // if (this.containsValue((this.getEdgeMapper() as EdgeMapperObject[]), internalConnector)) {\n // let key: number;\n // for (let l: number = 0; l < this.getEdgeMapper().length; l++) {\n // if ((this.getEdgeMapper())[parseInt(l.toString(), 10)].key === internalConnector) {\n // key = l;\n // break;\n // }\n // }\n // (this.getEdgeMapper())[parseInt(key.toString(), 10)].value.push(pt as Point);\n // }\n // start += lineWidth + edgeSpacing;\n // }\n // start += spacing;\n // }\n // }\n // }\n // }\n //}\n //private getEdgeMapper(): EdgeMapperObject[] {\n // return this.edgeMapper;\n //}\n ///** @private */\n //public setEdgeMapper(value: EdgeMapperObject): void {\n // this.edgeMapper.push(value);\n //}\n //private translateMatrixCells(value: number, cell: MatrixCellGroupObject): void {\n // if (!(value === 0)) {\n // cell.offset += value;\n // if (cell.visitedChildren.length > 0) {\n // for (let i: number = 0; i < cell.visitedChildren.length; i++) {\n // let cellVisitedChild: MatrixCellGroupObject = cell.visitedChildren[parseInt(i.toString(), 10)];\n // this.translateMatrixCells(value, cellVisitedChild);\n // }\n // }\n // }\n //}\n //private groupLayoutCells(matrixModel: MatrixModelObject): void {\n // let ranks: IVertex[][] = matrixModel.model.ranks;\n // for (let j: number = ranks.length - 1; j >= 0; j--) {\n // let vertices: IVertex[] = [];\n // for (let v: number = 0; v < ranks[parseInt(j.toString(), 10)].length; v++) {\n // let rank: IVertex = ranks[parseInt(j.toString(), 10)][parseInt(v.toString(), 10)];\n // let type: string = this.getType(rank.type);\n // if (type === 'internalVertex') {\n // vertices.push(ranks[parseInt(j.toString(), 10)][parseInt(v.toString(), 10)]);\n // }\n // }\n // let edges: IVertex[] = [];\n // for (let e: number = 0; e < ranks[parseInt(j.toString(), 10)].length; e++) {\n // let rank: IVertex = ranks[parseInt(j.toString(), 10)][parseInt(e.toString(), 10)];\n // let type: string = this.getType(rank.type);\n // if (type === 'internalEdge') {\n // edges.push(rank);\n // }\n // }\n // while (vertices.length > 1) {\n // const vertex1: IVertex = vertices[0];\n // const parentset1: string[] = this.selectIds(vertex1.connectsAsTarget, true);\n // const childset1: string[] = this.selectIds(vertex1.connectsAsSource, false);\n // while (vertices.length > 1) {\n // const vertex2: IVertex = vertices[1];\n // const parentset2: string[] = this.selectIds(vertex2.connectsAsTarget, true);\n // const childset2: string[] = this.selectIds(vertex2.connectsAsSource, false);\n // const parentequals: boolean = this.compareLists(parentset1, parentset2);\n // const childequals: boolean = this.compareLists(childset1, childset2);\n // if (parentequals && childequals) {\n // this.updateMutualSharing(vertices[0], vertex2.id);\n // this.updateMutualSharing(vertices[1], vertex1.id);\n // vertices.splice(1, 1);\n // continue;\n // }\n // break;\n // }\n // vertices.splice(0, 1);\n // }\n // while (edges.length > 1) {\n // const internalEdge: IVertex = edges[0];\n // const parentset: IVertex = internalEdge.source;\n // const childset: IVertex = internalEdge.target;\n // if (parentset.identicalSibiling != null) {\n // const groupedges: IVertex[] = [];\n // for (let i: number = 0; i < edges.length; i++) {\n // const edge: IVertex = edges[parseInt(i.toString(), 10)];\n // if (edge.target === childset) {\n // groupedges.push(edge);\n // }\n // }\n // for (let i: number = 0; i < groupedges.length; i++) {\n // const internalEdgese: IVertex = groupedges[parseInt(i.toString(), 10)];\n // if (this.containsValue(parentset.identicalSibiling, internalEdgese.source.id)) {\n // internalEdgese.source.identicalSibiling = null;\n // }\n // }\n // internalEdge.source.identicalSibiling = null;\n // }\n // edges.splice(0, 1);\n // }\n // }\n //}\n //private getType(type: string): string {\n // if (type === 'internalVertex') {\n // return 'internalVertex';\n // } else {\n // return 'internalEdge';\n // }\n //}\n //private selectIds(node: IEdge[], source: boolean): string[] {\n // const returnIds: string[] = [];\n // for (let i: number = 0; i < node.length; i++) {\n // const connector: IEdge = node[parseInt(i.toString(), 10)];\n // if (source) {\n // {\n // returnIds.push(connector.source.id);\n // }\n // } else {\n // returnIds.push(connector.target.id);\n // }\n // }\n // return returnIds;\n //}\n //private compareLists(list1: string[], list2: string[]): boolean {\n // const newList1: string[] = list1.slice();\n // const newList2: string[] = list2.slice();\n // if (newList1.length === newList2.length) {\n // if (newList1.length === 0) {\n // return true;\n // } else {\n // let isSame: boolean = true;\n // for (let i: number = 0; i < newList2.length; i++) {\n // const o: string = newList2[parseInt(i.toString(), 10)];\n // // EJ2-63944 - Nodes overlapping in Complex hierarchical tree layout in linear arrangement.\n // if (newList1.indexOf(o) === -1)\n // {\n // isSame = false;\n // break;\n // }\n // }\n // return isSame;\n // }\n // }\n // return false;\n //}\n //private updateMutualSharing(cell: IVertex, id: string): void {\n // if (cell.identicalSibiling != null) {\n // cell.identicalSibiling.push(id);\n // } else {\n // cell.identicalSibiling = [];\n // cell.identicalSibiling.push(id);\n // }\n //}\n //private matrixCellGroup(options: MatrixCellGroupObject): MatrixCellGroupObject {\n // options.level = options.level;\n // options.parents = options.parents;\n // options.children = options.children;\n // options.visitedChildren = options.visitedChildren;\n // options.visitedParents = options.visitedParents;\n // options.ignoredChildren = options.ignoredChildren;\n // options.cells = options.cells;\n // options.offset = options.offset;\n // options.initialOffset = options.initialOffset;\n // return options;\n //}\n LineDistribution.prototype.getPointvalue = function (x, y) {\n return { 'x': Number(x) || 0, 'y': Number(y) || 0 };\n };\n LineDistribution.prototype.containsValue = function (list, keyValue) {\n for (var i = 0; i < list.length; i++) {\n if (list[parseInt(i.toString(), 10)] === keyValue) {\n return true;\n }\n }\n return false;\n };\n return LineDistribution;\n}());\n///** @private */\n//interface ConnectsAsSourceObject {\n// id: string[];\n// source: ConnectsAsSourceObject;\n// target: ConnectsAsSourceObject;\n// temp: number[];\n// x: number[];\n// y: number[];\n//}\n\n/**\n * Hierarchical Tree and Organizational Chart\n */\nvar HierarchicalTree = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the organizational chart module.\n *\n * @private\n */\n function HierarchicalTree() {\n /**\n * Defines the layout animation\n *\n */\n this.isAnimation = false;\n //constructs the layout module\n }\n /**\n * To destroy the organizational chart\n *\n * @returns {void}\n * @private\n */\n HierarchicalTree.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n HierarchicalTree.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n */\n return 'OrganizationalChart';\n };\n /**\n * @param nodes\n * @param nameTable\n * @param layoutProp\n * @param viewport\n * @param uniqueId\n * @param action\n * @private\n */\n HierarchicalTree.prototype.updateLayout = function (nodes, nameTable, layoutProp, viewport, uniqueId, action) {\n var layout = {\n type: layoutProp.type,\n connectionPointOrigin: layoutProp.connectionPointOrigin,\n nameTable: nameTable, anchorX: 0, anchorY: 0,\n firstLevelNodes: [], centerNode: null, levels: [], maxLevel: 0, graphNodes: {},\n orientation: layoutProp.orientation,\n horizontalSpacing: layoutProp.horizontalSpacing, verticalSpacing: layoutProp.verticalSpacing,\n verticalAlignment: layoutProp.verticalAlignment, horizontalAlignment: layoutProp.horizontalAlignment,\n fixedNode: layoutProp.fixedNode, getLayoutInfo: getFunction(layoutProp.getLayoutInfo),\n layoutInfo: layoutProp.layoutInfo, margin: layoutProp.margin,\n bounds: layoutProp.bounds, objects: [], root: layoutProp.root\n };\n this.doLayout(layout, nodes, viewport, uniqueId, action);\n return layout;\n };\n HierarchicalTree.prototype.doLayout = function (layout, nodes, viewport, uniqueId, action) {\n var node;\n var i;\n var layoutInfo = {};\n var rootNodes = [];\n if (layout.nameTable[layout.root]) {\n layout.firstLevelNodes.push(layout.nameTable[layout.root]);\n }\n for (i = 0; i < nodes.length; i++) {\n node = nodes[parseInt(i.toString(), 10)];\n if (!node.excludeFromLayout) {\n layoutInfo = layout.graphNodes[node.id] = this.setUpLayoutInfo(layout, node);\n layoutInfo.tree.hasSubTree = false;\n if (!layout.nameTable[layout.root]) {\n if (!node.inEdges || !node.inEdges.length) {\n var parentId = 'parentId';\n var processId = 'processId';\n if (!node[\"\" + parentId] && !node[\"\" + processId]) {\n rootNodes.push(node);\n }\n if (node.data && String(node.data[\"\" + uniqueId]) === layout.root) {\n layout.firstLevelNodes.push(node);\n }\n }\n }\n }\n }\n if (layout.firstLevelNodes.length === 0) {\n layout.firstLevelNodes = rootNodes;\n }\n //Update relationship(parent and children)\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n node = layout.firstLevelNodes[parseInt(i.toString(), 10)];\n //let check: boolean;\n this.updateEdges(layout, node, 1, action, nodes);\n }\n if (layout.firstLevelNodes.length > 0) {\n layout.rootNode = layout.firstLevelNodes[0];\n var x = 0;\n var y = 0;\n var minX = void 0;\n var maxY = void 0;\n var maxX = void 0;\n var minY = void 0;\n //let j: number;\n var bounds = void 0;\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n bounds = this.updateTree(layout, x, y, layout.firstLevelNodes[parseInt(i.toString(), 10)], 0, layout.firstLevelNodes[i - 1]);\n var rootInfo = layout.graphNodes[layout.firstLevelNodes[parseInt(i.toString(), 10)].id];\n bounds.y = Math.min(bounds.y, rootInfo.y);\n bounds.x = Math.min(bounds.x, rootInfo.x);\n if (layout.orientation.indexOf('Left') !== -1) {\n y = bounds.right + layout.horizontalSpacing;\n }\n else {\n x = bounds.right + layout.horizontalSpacing;\n }\n if (i === 0) {\n minX = bounds.x;\n minY = bounds.y;\n maxX = bounds.right;\n maxY = bounds.bottom;\n }\n else {\n minX = Math.min(minX, bounds.x);\n minY = Math.min(minY, bounds.y);\n maxX = Math.max(maxX, bounds.right);\n maxY = Math.max(maxY, bounds.bottom);\n }\n }\n this.updateAnchor(layout, { x: minX, y: minY, right: maxX, bottom: maxY }, viewport);\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n this.updateNodes(layout, layout.firstLevelNodes[parseInt(i.toString(), 10)], 0);\n }\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n this.updateConnectors(layout, layout.firstLevelNodes[parseInt(i.toString(), 10)], 1);\n }\n }\n };\n HierarchicalTree.prototype.getBounds = function (node) {\n var x = node.offsetX - node.actualSize.width * node.pivot.x;\n var y = node.offsetY - node.actualSize.height * node.pivot.y;\n return new Rect(x, y, node.actualSize.width, node.actualSize.height);\n };\n HierarchicalTree.prototype.updateTree = function (layout, x, y, shape, level, prev, dontupdate) {\n //let dimensions: Dimensions;\n var info = {};\n var lev;\n var obj;\n //let hasChild: number;\n var dimensions = this.getDimensions(layout, shape, x, y, level);\n info = layout.graphNodes[shape.id];\n //Set maximum level of layout\n layout.maxLevel = Math.max(layout.maxLevel, level);\n lev = level;\n var hasChild = this.hasChild(layout, shape);\n if (!hasChild && !info.tree.assistants.length) {\n //update leaf nodes\n shape.treeBounds = this.updateLeafNode(layout, shape, prev, dimensions, level, dontupdate);\n return shape.treeBounds;\n }\n else {\n var treeBounds = void 0;\n var shapeBounds = void 0;\n var levelBounds = void 0;\n var d = void 0;\n var asstBounds = void 0;\n var space = void 0;\n var bottom = void 0;\n bottom = dimensions.y + dimensions.height + layout.verticalSpacing;\n if (info.tree.assistants.length) {\n //Vertically place assistants\n obj = this.setDepthSpaceForAssitants(layout, shape, bottom, dimensions.height, level, layout.verticalSpacing);\n lev = obj.level;\n bottom = obj.bottom;\n }\n if (!info.tree.assistants.length && info.tree.orientation !== 'Horizontal') {\n bottom = dimensions.y + dimensions.height + layout.verticalSpacing / 2;\n }\n if (info.tree.children.length) {\n if (info.tree.orientation === 'Horizontal' && (info.tree.type !== 'Balanced' || info.tree.children.length === 1)) {\n treeBounds = this.updateHorizontalTree(layout, shape, prev, dimensions.x, bottom, lev);\n }\n else if (info.tree.type === 'Balanced') {\n treeBounds = this.updateHorizontalTreeWithMultipleRows(layout, shape, prev, dimensions.x, bottom, lev);\n }\n else {\n treeBounds = this.updateVerticalTree(layout, shape, dimensions.x, bottom, lev, dontupdate);\n }\n }\n if (!(info.y && info.y > dimensions.y)) {\n info.y = dimensions.y;\n }\n // 919520: Leaf node position does not align correctly for subTreeAlignment 'Center'\n if (info.mid !== undefined) {\n x = info.mid;\n }\n if (info.tree.assistants.length) {\n //Set breadth space for assistants\n space = x !== undefined ? x : dimensions.x;\n asstBounds = this.setBreadthSpaceForAssistants(layout, shape, dimensions, space, bottom, level);\n if (!hasChild) {\n levelBounds = treeBounds = asstBounds;\n x = (levelBounds.x + levelBounds.right) / 2 - dimensions.width / 2;\n treeBounds = levelBounds;\n }\n d = asstBounds ? asstBounds.canMoveBy : undefined;\n }\n info.x = x;\n if (!info.translate) {\n info.treeWidth = treeBounds.right - treeBounds.x;\n }\n {\n shapeBounds = { x: x, y: dimensions.y, right: x + dimensions.width, bottom: dimensions.y + dimensions.height };\n }\n var translateInfo = {\n layout: layout, shape: shape, shapeBounds: shapeBounds, treeBounds: treeBounds,\n dim: dimensions, level: level\n };\n this.translateSubTree(translateInfo, d, prev !== undefined, dontupdate);\n if (info.firstChild && typeof info.firstChild !== 'string') {\n info.firstChild.x += info.subTreeTranslation;\n }\n shape.treeBounds = treeBounds;\n return treeBounds;\n }\n };\n HierarchicalTree.prototype.updateLeafNode = function (layout, shape, prev, dimensions, level, dontupdate) {\n //let bounds: Bounds;\n var info = layout.graphNodes[shape.id];\n info.x = dimensions.x;\n if (!(info.y && info.y > dimensions.y)) {\n info.y = dimensions.y;\n info.maxLevel = Math.max(level, info.maxLevel || 0);\n }\n // eslint-disable-next-line max-len\n var bounds = { x: dimensions.x, y: dimensions.y, right: dimensions.x + dimensions.width, bottom: dimensions.y + dimensions.height };\n info.maxLevel = Math.max(info.maxLevel || 0, level);\n var translateInfo = {\n layout: layout, shape: shape, shapeBounds: bounds, treeBounds: bounds,\n dim: dimensions, level: level\n };\n this.translateSubTree(translateInfo, undefined, prev !== undefined, dontupdate);\n return { x: info.x, y: info.y, right: info.x + dimensions.width, bottom: info.y + dimensions.height };\n };\n HierarchicalTree.prototype.setUpLayoutInfo = function (layout, item) {\n var info = {};\n info.subTreeTranslation = 0;\n if (layout.type === 'OrganizationalChart') {\n info.tree = { orientation: 'Vertical', type: 'Alternate', offset: 20, enableRouting: true };\n }\n else {\n info.tree = { orientation: 'Horizontal', type: 'Center', enableRouting: true };\n }\n info.tree.children = [];\n info.tree.assistants = [];\n info.tree.level = 0;\n info.translate = true;\n return info;\n };\n HierarchicalTree.prototype.translateSubTree = function (translateInfo, asstDif, translate, dontupdate) {\n var layout = translateInfo.layout;\n var shape = translateInfo.shape;\n var shapeBounds = translateInfo.shapeBounds;\n var treeBounds = translateInfo.treeBounds;\n var level = translateInfo.level;\n var dim = translateInfo.dim;\n var info = layout.graphNodes[shape.id];\n var firstChild = layout.nameTable[info.firstChild ? info.firstChild.child : info.tree.children[0]];\n var firstChildInfo = firstChild ? layout.graphNodes[firstChild.id] : null;\n var hasChild = this.hasChild(layout, shape);\n var intersect = this.findIntersectingLevels(layout, shapeBounds, level, info.actualLevel);\n var treeIntersect = this.findIntersectingLevels(layout, treeBounds, level, info.actualLevel);\n var levelBounds = [];\n //const diff: number;\n if (intersect.length && info.translate) {\n info.intersect = intersect;\n this.spaceLeftFromPrevSubTree(layout, shape, shapeBounds);\n info.canMoveBy = info.diff;\n if (asstDif !== undefined) {\n info.canMoveBy = Math.min(asstDif, info.canMoveBy);\n }\n if (firstChild && firstChildInfo.canMoveBy !== undefined) {\n if (firstChildInfo.canMoveBy >= info.canMoveBy) {\n info.translated = true;\n }\n info.canMoveBy = Math.min(info.canMoveBy, firstChildInfo.canMoveBy);\n }\n if (translate) {\n info.x -= info.canMoveBy;\n info.subTreeTranslation -= info.canMoveBy;\n if (hasChild) {\n this.shiftSubordinates(layout, treeIntersect, info.canMoveBy);\n treeBounds.x = Math.min(treeBounds.x, info.x);\n treeBounds.right = Math.max(treeBounds.right, info.x + dim.width);\n treeBounds.bottom = Math.max(treeBounds.bottom, info.y + dim.height);\n treeBounds.x -= info.canMoveBy;\n treeBounds.right -= info.canMoveBy;\n }\n if (firstChild && firstChildInfo.canMoveBy > info.canMoveBy) {\n info.canMoveBy = firstChildInfo.canMoveBy - info.canMoveBy;\n }\n else if (firstChild && info.canMoveBy !== undefined) {\n info.canMoveBy = 0;\n }\n }\n }\n else {\n if (hasChild) {\n treeBounds.x = Math.min(treeBounds.x, shapeBounds.x);\n treeBounds.right = Math.max(treeBounds.right, shapeBounds.x + dim.width);\n treeBounds.bottom = Math.max(treeBounds.bottom, info.y + dim.height);\n }\n if (!info.translate) {\n info.canMoveBy = 0;\n info.subTreeTranslation = 0;\n }\n }\n if (!dontupdate) {\n shapeBounds = { x: info.x, y: dim.y, right: info.x + dim.width, bottom: dim.y + dim.height };\n levelBounds.push({ rBounds: shapeBounds });\n this.updateRearBounds(layout, shape, levelBounds, level);\n }\n };\n HierarchicalTree.prototype.updateRearBounds = function (layout, shape, levelBounds, level, intersect) {\n var bnds;\n var index;\n var isLastLeaf = true;\n var i;\n var info = {};\n //let firstLevel: Bounds;\n //let lastLevel: Bounds;\n var bottom;\n if (shape) {\n info = layout.graphNodes[shape.id];\n intersect = info.intersect;\n isLastLeaf = !info.tree.children.length && !info.tree.assistants.length;\n }\n var firstLevel = levelBounds[0].rBounds;\n var lastLevel = levelBounds[levelBounds.length - 1].rBounds;\n if (intersect && intersect.length) {\n bnds = layout.levels[intersect[0]].rBounds;\n bottom = bnds.bottom;\n if (bnds.y < firstLevel.y) {\n bnds.bottom = firstLevel.y;\n levelBounds.splice(0, 0, { rBounds: bnds });\n }\n if (bottom > lastLevel.bottom) {\n levelBounds.push({ rBounds: { x: bnds.x, right: bnds.right, y: firstLevel.bottom, bottom: bottom } });\n }\n else {\n bnds = layout.levels[intersect[intersect.length - 1]].rBounds;\n if (isLastLeaf && bnds.bottom > lastLevel.bottom) {\n bnds.y = lastLevel.bottom;\n levelBounds.push({ rBounds: bnds });\n }\n }\n index = intersect[0];\n for (i = levelBounds.length - 1; i >= 0; i--) {\n layout.levels.splice(index, 0, levelBounds[parseInt(i.toString(), 10)]);\n }\n index += levelBounds.length;\n layout.levels.splice(index, intersect.length);\n }\n else {\n index = this.findLevel(layout, levelBounds[levelBounds.length - 1].rBounds, level);\n for (i = levelBounds.length - 1; i >= 0; i--) {\n layout.levels.splice(index, 0, levelBounds[parseInt(i.toString(), 10)]);\n }\n }\n };\n HierarchicalTree.prototype.shiftSubordinates = function (layout, intersect, diff) {\n var i;\n //Shift the sublevels by the distance diff\n if (diff !== 0) {\n for (i = 0; i < intersect.length; i++) {\n if (layout.levels[intersect[parseInt(i.toString(), 10)]].rBounds) {\n layout.levels[intersect[parseInt(i.toString(), 10)]].rBounds.x -= diff;\n layout.levels[intersect[parseInt(i.toString(), 10)]].rBounds.right -= diff;\n }\n }\n }\n };\n HierarchicalTree.prototype.setDepthSpaceForAssitants = function (layout, shape, bottom, height, lev, vSpace) {\n var info = layout.graphNodes[shape.id];\n var asst = {};\n var asstHeight;\n var i;\n var asstElement;\n var max;\n max = bottom;\n //Vertically place the assistants as alternate layout(alternatively at both right and left sides of parent)\n for (i = 0; i < info.tree.assistants.length; i++) {\n asst = layout.graphNodes[info.tree.assistants[parseInt(i.toString(), 10)]];\n if (asst) {\n asst.tree.children = asst.tree.assistants = [];\n asst.y = bottom;\n asstElement = layout.nameTable[info.tree.assistants[parseInt(i.toString(), 10)]];\n asstHeight = asstElement.actualSize.height;\n if (layout.orientation.indexOf('Left') !== -1) {\n asstHeight = asstElement.actualSize.width;\n }\n max = bottom + asstHeight + vSpace / 2;\n layout.maxLevel = lev + 1;\n if (i % 2 === 1 && i !== info.tree.assistants.length - 1) {\n bottom = max;\n lev++;\n }\n }\n }\n return { level: layout.maxLevel, bottom: bottom + asstHeight + vSpace };\n };\n HierarchicalTree.prototype.setBreadthSpaceForAssistants = function (layout, shape, dim, space, bottom, level) {\n var asst = {};\n var asstWidth;\n //let prevBounds: number;\n var bounds;\n var asstElement;\n var i;\n var info = layout.graphNodes[shape.id];\n //let max: number = bottom;\n var lev = level;\n var left;\n var diff;\n var intersect;\n var levelBounds = { x: 0, y: 0, right: 0, bottom: 0 };\n for (i = 0; i < info.tree.assistants.length; i++) {\n asst = layout.graphNodes[info.tree.assistants[parseInt(i.toString(), 10)]];\n //Arrange assistants at both left and right sides of parent(like alternate layout)\n //Check - By default, distance to be left between parent and child nodes is assumed as 20.\n //It can be modified/customized later.\n if (asst) {\n asstElement = layout.nameTable[info.tree.assistants[parseInt(i.toString(), 10)]];\n asstWidth = asstElement.actualSize.width;\n if (layout.orientation.indexOf('Left') !== -1) {\n asstWidth = asstElement.actualSize.height;\n }\n if (i % 2 === 0) {\n left = space + dim.width / 2 - 20 - asstWidth;\n }\n else {\n left = space + dim.width / 2 + 20;\n }\n //Check - What will happen if update leaf node is called? Since assistants don't have children\n bounds = this.updateTree(layout, left, asst.y, layout.nameTable[info.tree.assistants[parseInt(i.toString(), 10)]], lev + 1);\n if (!this.hasChild(layout, shape)) {\n if (i === 0) {\n levelBounds = bounds;\n }\n else {\n this.uniteRects(levelBounds, bounds);\n }\n }\n if (i % 2 === 0 && asst.prevBounds) {\n if (diff === undefined) {\n diff = asst.canMoveBy;\n }\n else {\n diff = Math.min(diff, asst.canMoveBy);\n }\n }\n if (i % 2 === 1 || i === info.tree.assistants.length - 1) {\n intersect = this.findIntersectingLevels(layout, bounds, lev + 1);\n //Update rightmost positions of known layout levels\n this.updateRearBounds(layout, null, [{ rBounds: bounds }], lev + 1, intersect);\n lev++;\n }\n }\n }\n if (levelBounds) {\n levelBounds.canMoveBy = diff;\n }\n return levelBounds;\n };\n HierarchicalTree.prototype.getDimensions = function (layout, shape, x, y, level) {\n var width;\n width = shape.actualSize.width;\n var height;\n height = shape.actualSize.height;\n if (layout.orientation.indexOf('Left') !== -1) {\n if (!level) {\n //let temp: number;\n var temp = x;\n x = y;\n y = temp;\n }\n height = shape.actualSize.width;\n width = shape.actualSize.height;\n }\n return { x: x, y: y, width: width, height: height };\n };\n HierarchicalTree.prototype.hasChild = function (layout, shape) {\n //Check whether the node has children\n var shape1 = layout.graphNodes[shape.id];\n return shape1 ? shape1.tree.children && shape1.tree.children.length : 0;\n };\n HierarchicalTree.prototype.updateHorizontalTree = function (layout, shape, prev, x, y, level) {\n //Get dimensions with respect to layout orientations\n //let dimensions: Dimensions;\n var dimensions = this.getDimensions(layout, shape, x, y, level);\n var info = {};\n info = layout.graphNodes[shape.id];\n var side = info.tree.type;\n //let lev: number;\n var lev = level;\n var right = 0;\n right = x;\n var bottom = y;\n var width;\n var height;\n var child;\n var childBounds;\n var childWidth;\n var childHeight;\n //let prevBounds: Bounds;\n var bounds;\n var actBounds;\n var maxLevel;\n var translateSibilingsBy;\n var canMoveBy;\n var oldActBounds;\n var i;\n var childInfo;\n var firstChildInfo;\n var prevLayoutLevels = layout.levels.slice(0, layout.levels.length);\n if (this.hasChild(layout, shape)) {\n //let h: boolean;\n var h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n for (i = 0; i < info.tree.children.length; i++) {\n child = layout.nameTable[info.tree.children[parseInt(i.toString(), 10)]];\n width = child.actualSize.width;\n height = child.actualSize.height;\n childWidth = h ? height : width;\n childHeight = h ? width : height;\n var prevBounds = layout.levels[lev + 1] ? layout.levels[lev + 1].rBounds : null;\n //Update sub tree\n childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[info.tree.children[i - 1]]);\n childInfo = layout.graphNodes[child.id];\n info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);\n actBounds = { x: childInfo.x, y: childInfo.y, right: childInfo.x + childWidth, bottom: childInfo.y + childHeight };\n if (i === 0) {\n //Compare with previous(right most) subtree\n bounds = {\n x: Math.min(childInfo.x, childBounds.x), y: Math.min(childInfo.y, childBounds.y),\n right: childBounds.right, bottom: childBounds.bottom\n };\n firstChildInfo = childInfo;\n }\n if (!oldActBounds) {\n oldActBounds = actBounds;\n }\n else {\n oldActBounds.x = actBounds.x;\n oldActBounds.y = actBounds.y;\n if (actBounds.right > oldActBounds.right) {\n oldActBounds.right = actBounds.right;\n }\n oldActBounds.bottom = actBounds.bottom;\n //oldActBounds = actBounds;\n }\n //Compare with previous subtree if level of the child is greater than the level of previous sub tree\n //Check - what will happen if level of second child is greater than current child\n if (i === 0) {\n info.firstChild = { x: childInfo.x, canMoveBy: childInfo.canMoveBy, child: child.id };\n }\n if (this.hasChild(layout, child)) {\n if (!info.firstChild || info.firstChild.x >= childInfo.firstChild.x) {\n if (childInfo.firstChild && info.firstChild.canMoveBy < childInfo.canMoveBy) {\n canMoveBy = info.firstChild.canMoveBy;\n childInfo.canMoveBy = canMoveBy;\n layout.graphNodes[info.firstChild.child].canMoveBy = canMoveBy;\n info.firstChild.canMoveBy = canMoveBy;\n }\n var canMoveValue = canMoveBy !== undefined ? canMoveBy : childInfo.canMoveBy;\n info.firstChild = { x: childInfo.firstChild.x, canMoveBy: canMoveValue, child: child.id };\n }\n else if (childInfo.firstChild && childInfo.translated && info.firstChild.canMoveBy > childInfo.canMoveBy) {\n info.firstChild.canMoveBy = layout.graphNodes[info.firstChild.child].canMoveBy = childInfo.canMoveBy;\n }\n }\n maxLevel = maxLevel ? Math.max(childInfo.maxLevel, maxLevel) : childInfo.maxLevel;\n this.uniteRects(bounds, childBounds);\n if (i !== 0 && !this.hasChild(layout, child) && childInfo.subTreeTranslation < 0) {\n right = childBounds.right - childInfo.subTreeTranslation + layout.horizontalSpacing;\n }\n else {\n right = childBounds.right + layout.horizontalSpacing;\n }\n }\n if (!isNaN(translateSibilingsBy)) {\n firstChildInfo.canMoveBy = translateSibilingsBy;\n }\n info.mid = (firstChildInfo.x + oldActBounds.right) / 2 - dimensions.width / 2;\n //Set parent based on the chart type\n if (side === 'Left') {\n info.mid = actBounds.right - dimensions.width;\n }\n else if (side === 'Right') {\n info.mid = x;\n }\n }\n return bounds;\n };\n /* eslint-disable */\n HierarchicalTree.prototype.updateHorizontalTreeWithMultipleRows = function (layout, shape, prev, x, y, level) {\n //declarations\n var child;\n var childInfo;\n var childBounds;\n var childWidth;\n var bounds;\n var width;\n var height;\n var j;\n var i;\n var leftCenter;\n var rightCenter;\n //Get dimensions with respect to layout orientations\n var dimensions = this.getDimensions(layout, shape, x, y, level);\n var info = layout.graphNodes[shape.id];\n var side = info.tree.type;\n var lev = level;\n var right = x;\n var bottom = y;\n var prevLayoutLevels = layout.levels.slice(0, layout.levels.length);\n var minTranslation = 0;\n if (this.hasChild(layout, shape)) {\n var h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n var align = void 0;\n var rows = this.splitChildrenInRows(layout, shape);\n var unique = info.tree.children.length === 5 && rows[0].length === 3;\n var leftTree = [];\n var rightTree = [];\n if (!unique) {\n this.splitRows(rows, leftTree, rightTree);\n }\n else {\n rightTree = rows;\n }\n var treeInfo = { leftTree: leftTree, rows: rows, rightTree: rightTree, dimensions: dimensions };\n var rightMost = this.updateLeftTree(layout, treeInfo, shape, x, bottom, lev);\n bounds = treeInfo.bounds;\n var rightX = void 0;\n var center = (rightMost || 0) + (rightMost !== undefined ? (layout.horizontalSpacing / 2) : 0);\n if (rightMost !== undefined) {\n info.mid = center - dimensions.width / 2;\n rightX = rightMost + layout.horizontalSpacing;\n }\n bottom = y;\n var rightBounds = void 0;\n rightBounds = [];\n for (i = 0; i < rightTree.length; i++) {\n if (rows[i].length % 2 === 1 && i === rightTree.length - 1 || unique) {\n right = x;\n }\n else {\n right = rightX || x;\n }\n if (i !== 0) {\n bottom = rightBounds[i - 1].bottom + layout.verticalSpacing;\n }\n for (j = 0; j < rightTree[i].length; j++) {\n child = layout.nameTable[rightTree[i][j]];\n width = child.actualSize.width;\n height = child.actualSize.height;\n childWidth = h ? height : width;\n //Update sub tree\n childInfo = layout.graphNodes[child.id];\n childInfo.actualLevel = lev + 1 + i;\n if (j === 0 && leftTree[i] && leftTree[i].length) {\n childInfo.translate = false;\n }\n if (unique && i === 1) {\n if (j === 0 && leftCenter + childWidth + layout.horizontalSpacing <= rightCenter) {\n align = true;\n right = leftCenter - childWidth / 2;\n }\n if (align && j === 1) {\n right = rightCenter - childWidth / 2;\n }\n }\n childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[rightTree[i][j - 1]]);\n if (unique && j <= 2 && i === 0) {\n if (j === 1) {\n leftCenter = childBounds.x - layout.horizontalSpacing / 2;\n rightCenter = childBounds.x + childWidth + layout.horizontalSpacing / 2;\n }\n }\n if (j === 0) {\n rightBounds[i] = { x: childBounds.x, y: childBounds.y, right: childBounds.right, bottom: childBounds.bottom };\n }\n else {\n this.uniteRects(rightBounds[i], childBounds);\n }\n if (!bounds) {\n bounds = {\n x: rightBounds[i].x, y: rightBounds[i].y, right: rightBounds[i].right,\n bottom: rightBounds[i].bottom\n };\n }\n this.uniteRects(bounds, rightBounds[i]);\n right = childBounds.right + layout.horizontalSpacing;\n if (!info.firstChild || ((i === rightTree.length - 1 && rows[i].length % 2 === 1) || unique)\n && j === 0 && childInfo.canMoveBy !== undefined && minTranslation > childInfo.canMoveBy) {\n minTranslation = Math.min(minTranslation, childInfo.canMoveBy || 0);\n info.firstChild = { x: childInfo.x, child: child.id, canMoveBy: childInfo.canMoveBy };\n }\n treeInfo.leftCenter = leftCenter;\n treeInfo.rightCenter = rightCenter;\n treeInfo.align = align;\n treeInfo.level = lev;\n treeInfo.rightBounds = rightBounds;\n this.alignRowsToCenter(layout, i, shape, treeInfo, rightX);\n }\n }\n }\n return bounds;\n };\n /* eslint-enable */\n HierarchicalTree.prototype.updateLeftTree = function (layout, treeInfo, shape, x, bottom, lev) {\n var leftTree = treeInfo.leftTree;\n var info = layout.graphNodes[shape.id];\n var right;\n var leftBounds = [];\n var minTranslation;\n var rightMost;\n var childBounds;\n var bounds;\n var h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n //Arrange left side\n for (var i = 0; i < leftTree.length && leftTree[parseInt(i.toString(), 10)].length; i++) {\n right = x;\n if (leftBounds[i - 1]) {\n bottom = leftBounds[i - 1].bottom + layout.verticalSpacing;\n }\n for (var j = 0; j < leftTree[parseInt(i.toString(), 10)].length; j++) {\n var child = layout.nameTable[leftTree[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)]];\n var childWidth = h ? child.actualSize.height : child.actualSize.width;\n var childHeight = h ? child.actualSize.width : child.actualSize.height;\n //Update sub tree\n var childInfo = layout.graphNodes[child.id];\n childInfo.actualLevel = lev + 1 + i;\n childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[leftTree[parseInt(i.toString(), 10)][j - 1]]);\n if (j === 0) {\n leftBounds[parseInt(i.toString(), 10)] = {\n x: childBounds.x, y: childBounds.y, right: childBounds.right, bottom: childBounds.bottom\n };\n }\n else {\n this.uniteRects(leftBounds[parseInt(i.toString(), 10)], childBounds);\n }\n if (i === 0 && j === 0) {\n minTranslation = childInfo.canMoveBy;\n info.firstChild = { x: childInfo.x, child: child.id, canMoveBy: childInfo.canMoveBy };\n }\n else if (j === 0 && childInfo.canMoveBy !== undefined && minTranslation > childInfo.canMoveBy) {\n minTranslation = Math.min(minTranslation, childInfo.canMoveBy || 0);\n info.firstChild = { x: childInfo.x, child: child.id, canMoveBy: childInfo.canMoveBy };\n }\n right = childBounds.right + layout.horizontalSpacing;\n }\n if (i === 0) {\n rightMost = leftBounds[parseInt(i.toString(), 10)].right;\n }\n else {\n rightMost = Math.max(rightMost, leftBounds[parseInt(i.toString(), 10)].right);\n }\n }\n //Translate to same positions\n for (var i = 0; i < leftTree.length && leftTree[parseInt(i.toString(), 10)].length; i++) {\n if (rightMost !== leftBounds[parseInt(i.toString(), 10)].right) {\n var diff = rightMost - leftBounds[parseInt(i.toString(), 10)].right;\n for (var j = 0; j < leftTree[parseInt(i.toString(), 10)].length; j++) {\n var element = layout.nameTable[leftTree[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)]];\n var elementInfo = layout.graphNodes[leftTree[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)]];\n elementInfo.x += diff;\n }\n //leftBounds[i].x += diff;\n //leftBounds[i].right += diff;\n }\n if (i === 0) {\n bounds = { x: leftBounds[0].x, y: leftBounds[0].y, right: leftBounds[0].right, bottom: leftBounds[0].bottom };\n }\n else {\n this.uniteRects(bounds, leftBounds[parseInt(i.toString(), 10)]);\n }\n }\n treeInfo.bounds = bounds;\n return rightMost;\n };\n HierarchicalTree.prototype.alignRowsToCenter = function (layout, i, shape, treeInfo, rightX) {\n var max;\n var centered;\n var diff;\n var info = layout.graphNodes[shape.id];\n var rows = treeInfo.rows;\n var rightTree = treeInfo.rightTree;\n var leftCenter = treeInfo.leftCenter;\n var rightCenter = treeInfo.rightCenter;\n var align = treeInfo.align;\n var rightBounds = treeInfo.rightBounds;\n var dimensions = treeInfo.dimensions;\n var lev = treeInfo.level;\n var unique = info.tree.children.length === 5 && rows[0].length === 3;\n if (unique && i === 1) {\n max = (rightBounds[0].right - rightBounds[0].x) >= (rightBounds[1].right - rightBounds[1].x) ? 0 : 1;\n }\n if (i === rows.length - 1) {\n if (rows[parseInt(i.toString(), 10)].length % 2 === 1 || unique && i === 1) {\n centered = rightTree[parseInt(i.toString(), 10)][Math.floor(rightTree[parseInt(i.toString(), 10)].length / 2)];\n //let centerObjct: INode;\n var centerObjct = layout.nameTable[\"\" + centered];\n //let childDimension: Dimensions;\n var centeredX = layout.graphNodes[\"\" + centered].x;\n var centeredY = layout.graphNodes[\"\" + centered].y;\n var childDimension = this.getDimensions(layout, centerObjct, centeredX, centeredY, lev + 1);\n diff = undefined;\n if (!align && unique) {\n if (max === 1) {\n i = 0;\n }\n diff = (rightBounds[parseInt(max.toString(), 10)].x + rightBounds[parseInt(max.toString(), 10)].right) / 2\n - (rightBounds[parseInt(i.toString(), 10)].x\n + rightBounds[parseInt(i.toString(), 10)].right) / 2;\n if (i === 0) {\n info.mid += diff;\n }\n }\n else if (!unique && rightX !== undefined) {\n diff = rightX - layout.horizontalSpacing / 2 - (centeredX + childDimension.width / 2);\n }\n if (diff !== undefined) {\n this.updateRearBoundsOfTree(layout, rightTree[parseInt(i.toString(), 10)], diff, dimensions);\n }\n if (unique) {\n info.mid = (rightCenter + leftCenter) / 2 + (i === 0 ? diff : 0) - dimensions.width / 2;\n }\n if (info.mid === undefined && layout.graphNodes[\"\" + centered]) {\n info.mid = centeredX;\n }\n align = false;\n i++;\n }\n }\n };\n HierarchicalTree.prototype.updateRearBoundsOfTree = function (layout, rightTree, diff, dimensions) {\n for (var j = 0; j < rightTree.length; j++) {\n var childInfo = layout.graphNodes[rightTree[parseInt(j.toString(), 10)]];\n //let child: INode = layout.nameTable[rightTree[j]];\n childInfo.x += diff;\n childInfo.canMoveBy += diff;\n if (j === rightTree.length - 1) {\n //removed child dimensions call calculation, since that is not used\n var childBnds = {\n x: childInfo.x, y: childInfo.y, right: childInfo.x +\n dimensions.width, bottom: childInfo.y + dimensions.height\n };\n var intersect = this.findIntersectingLevels(layout, childBnds, childInfo.actualLevel);\n this.updateRearBounds(layout, null, [{ rBounds: childBnds }], childInfo.actualLevel, intersect);\n }\n }\n };\n HierarchicalTree.prototype.splitRows = function (rows, leftTree, rightTree) {\n for (var i = 0; i < rows.length; i++) {\n leftTree[parseInt(i.toString(), 10)] = [];\n rightTree[parseInt(i.toString(), 10)] = [];\n var half = void 0;\n half = rows[parseInt(i.toString(), 10)].length;\n if (rows[parseInt(i.toString(), 10)].length % 2 !== 1) {\n half = Math.ceil(rows[parseInt(i.toString(), 10)].length / 2);\n for (var k = 0; k < half; k++) {\n leftTree[parseInt(i.toString(), 10)].push(rows[parseInt(i.toString(), 10)][parseInt(k.toString(), 10)]);\n }\n }\n for (var j = leftTree[parseInt(i.toString(), 10)].length; j < rows[parseInt(i.toString(), 10)].length; j++) {\n rightTree[parseInt(i.toString(), 10)].push(rows[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)]);\n }\n }\n };\n HierarchicalTree.prototype.updateVerticalTree = function (layout, shape, x, y, level, dontUpdate) {\n //declarations\n var child;\n var childInfo;\n var childBounds;\n var childWidth;\n var childHeight;\n var prevBounds;\n var bounds;\n var actBounds;\n var oddBounds;\n var evenBounds;\n //let dimensions: Dimensions = this.getDimensions(layout, shape, x, y, level);\n var info = layout.graphNodes[shape.id];\n var firstChild = layout.nameTable[info.tree.children[0]];\n var h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n var factor = info.tree.type === 'Left' ? -1 : 0;\n var right = x;\n var bottom = y;\n var lev = level;\n var i;\n var intersect;\n var type;\n var levels = [];\n var oddLevels = [];\n var canMoveBy; //let diff: number;\n for (i = 0; i < info.tree.children.length; i++) {\n if (info.tree.type === 'Alternate') {\n //arrange at both left and right\n type = (i % 2 === 0 && info.tree.children.length > 2) ? 'Left' : 'Right';\n factor = (i % 2 === 0 && info.tree.children.length > 2) ? -1 : 0;\n }\n right = x + this.findOffset(layout, shape, info, type);\n child = layout.nameTable[info.tree.children[parseInt(i.toString(), 10)]];\n childWidth = h ? child.actualSize.height : child.actualSize.width;\n childHeight = h ? child.actualSize.width : child.actualSize.height;\n //Update sub tree\n childBounds = this.updateTree(layout, right + factor * childWidth, bottom, child, level + 1, undefined, true);\n childInfo = layout.graphNodes[child.id];\n actBounds = { x: childInfo.x, y: childInfo.y, right: childInfo.x + childWidth, bottom: childInfo.y + childHeight };\n if (i === 0) {\n this.uniteRects(childBounds, actBounds);\n bounds = childBounds;\n }\n else {\n this.uniteRects(bounds, childBounds);\n }\n //Check and adjust the space left from previous subtree/sibling\n if (childInfo.prevBounds && !(info.tree.type === 'Alternate' && i % 2 === 1 && info.tree.children.length > 2)) {\n canMoveBy = canMoveBy !== undefined ? Math.min(childInfo.canMoveBy, canMoveBy) : childInfo.canMoveBy;\n }\n //Max level of the subtree node\n info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);\n if (!(info.tree.type === 'Alternate' && info.tree.children.length > 2 && i % 2 === 0)) {\n if (info.tree.type === 'Alternate' && info.tree.children.length > 2) {\n //alternate - arrange children with even index(0,2,4,6,..) at the next level\n bottom = Math.max(childBounds.bottom, prevBounds.bottom) + layout.verticalSpacing / 2;\n }\n else {\n // left/right - arrange next child at the nect level(bottom)\n bottom = childBounds.bottom + layout.verticalSpacing / 2;\n }\n level = info.maxLevel;\n levels.push({ rBounds: actBounds });\n if (!evenBounds) {\n evenBounds = {\n x: childInfo.x, y: childInfo.y, right: childInfo.x + childWidth,\n bottom: childInfo.y + childHeight\n };\n }\n else {\n this.uniteRects(evenBounds, actBounds);\n }\n if (childInfo.levelBounds) {\n levels = levels.concat(childInfo.levelBounds);\n }\n }\n else {\n if (i !== 0) {\n bottom = prevBounds.bottom + layout.verticalSpacing / 2;\n }\n oddLevels.push({ rBounds: actBounds });\n if (childInfo.levelBounds) {\n oddLevels = oddLevels.concat(childInfo.levelBounds);\n }\n }\n if (i === 0) {\n info.firstChild = { x: childInfo.x, canMoveBy: childInfo.canMoveBy, child: child.id };\n }\n if (this.hasChild(layout, child)) {\n if (!info.firstChild || info.firstChild.x >= childInfo.firstChild.x) {\n if (childInfo.firstChild && info.firstChild.canMoveBy < childInfo.canMoveBy) {\n var canMoveBy_1 = info.firstChild.canMoveBy;\n childInfo.canMoveBy = canMoveBy_1;\n layout.graphNodes[info.firstChild.child].canMoveBy = canMoveBy_1;\n info.firstChild.canMoveBy = canMoveBy_1;\n }\n info.firstChild = {\n x: childInfo.firstChild.x, canMoveBy: canMoveBy !== undefined ? canMoveBy : childInfo.canMoveBy,\n child: child.id\n };\n }\n else if (childInfo.firstChild && childInfo.translated && info.firstChild.canMoveBy > childInfo.canMoveBy) {\n info.firstChild.canMoveBy = layout.graphNodes[info.firstChild.child].canMoveBy = childInfo.canMoveBy;\n }\n }\n prevBounds = actBounds;\n }\n //To set level bounds(right most position of levels)\n if (!dontUpdate) {\n if (info.tree.type === 'Alternate' && info.tree.children.length > 2) {\n oddBounds = {\n x: oddLevels[0].rBounds.x, y: oddLevels[0].rBounds.y,\n right: oddLevels[oddLevels.length - 1].rBounds.right, bottom: oddLevels[oddLevels.length - 1].rBounds.bottom\n };\n intersect = this.findIntersectingLevels(layout, oddBounds, lev + 1);\n this.updateRearBounds(layout, null, oddLevels, lev + 1, intersect);\n }\n intersect = this.findIntersectingLevels(layout, evenBounds || bounds, lev + 1);\n this.updateRearBounds(layout, null, evenBounds ? levels : [{ rBounds: bounds }], lev + 1, intersect);\n }\n else {\n info.levelBounds = levels;\n }\n if (!isNaN(canMoveBy)) {\n layout.graphNodes[firstChild.id].canMoveBy = canMoveBy;\n }\n info.childBounds = bounds;\n info.mid = x;\n return bounds;\n };\n HierarchicalTree.prototype.splitChildrenInRows = function (layout, shape) {\n //let info: LayoutInfo;\n var info = layout.graphNodes[shape.id];\n var column;\n column = 4;\n var rows = [];\n var childNodes;\n childNodes = info.tree.children.length;\n var children = this.extend(info.tree.children);\n if (info.tree.rows) {\n //let count: number;\n var count = info.tree.children.length;\n //let columns: number;\n var columns = info.tree.rows;\n if (columns % 2 === 0) {\n column = columns;\n }\n else {\n column = columns - 1;\n }\n }\n else if (info.tree.children.length === 3 || info.tree.children.length === 4) {\n column = 2;\n }\n else if (info.tree.children.length === 5) {\n column = 3;\n }\n while (childNodes > 0) {\n rows[rows.length] = children.splice(0, column);\n childNodes -= column;\n if (childNodes < column) {\n if (childNodes % 2 === 0) {\n column = childNodes;\n }\n else if (childNodes !== 1) {\n column = childNodes - 1;\n }\n if (childNodes < column) {\n column = childNodes;\n }\n }\n }\n return rows;\n };\n HierarchicalTree.prototype.extend = function (temp) {\n var i;\n var dummy = [];\n for (i = 0; i < temp.length; i++) {\n dummy[parseInt(i.toString(), 10)] = temp[parseInt(i.toString(), 10)];\n }\n return dummy;\n };\n HierarchicalTree.prototype.findOffset = function (layout, shape, info, type) {\n var offset = 0;\n var space = (layout.orientation.indexOf('Left') !== -1) ? shape.actualSize.height :\n shape.actualSize.width;\n var treeType = type ? type : info.tree.type;\n offset = info.tree.offset || 20;\n if (info.tree.type === 'Alternate') {\n if (offset >= layout.horizontalSpacing) {\n offset = layout.horizontalSpacing / 2;\n }\n }\n switch (treeType) {\n case 'Left':\n offset = space / 2 - offset;\n break;\n case 'Right':\n offset = offset + space / 2;\n break;\n }\n return offset;\n };\n HierarchicalTree.prototype.uniteRects = function (rect1, rect2) {\n //Unite two rects\n rect1.x = Math.min(rect1.x, rect2.x);\n rect1.right = Math.max(rect1.right, rect2.right);\n rect1.bottom = Math.max(rect1.bottom, rect2.bottom);\n };\n HierarchicalTree.prototype.spaceLeftFromPrevSubTree = function (layout, shape, bounds) {\n //let info: LayoutInfo;\n var info = layout.graphNodes[shape.id];\n var dif;\n var prevBounds; //let intersect: number[]; let k: number;\n //let space: number;\n var space = layout.horizontalSpacing;\n //Find the minimum distance to move towards previous sub tree\n for (var k = 0; k < info.intersect.length; k++) {\n prevBounds = layout.levels[info.intersect[parseInt(k.toString(), 10)]].rBounds;\n dif = bounds.x - (prevBounds.right + space);\n if (info.diff === undefined || dif < info.diff) {\n info.diff = dif;\n info.prevBounds = layout.levels[info.intersect[parseInt(k.toString(), 10)]].rBounds;\n }\n }\n };\n HierarchicalTree.prototype.findIntersectingLevels = function (layout, bounds, level, actualLevel) {\n //intersecting with exact Level\n //let bnds: Bounds;\n var bnds = { x: bounds.x, y: bounds.y, right: bounds.right, bottom: bounds.bottom };\n bnds.y -= layout.verticalSpacing / 2;\n bnds.bottom += layout.verticalSpacing / 2;\n //let intersectingLevels: number[];\n var intersectingLevels = [];\n var rBounds;\n var l;\n l = actualLevel !== undefined ? actualLevel : level;\n rBounds = layout.levels[parseInt(l.toString(), 10)] ? layout.levels[parseInt(l.toString(), 10)].rBounds : null;\n //Performance - We can consider only the intersecting levels\n do {\n if (rBounds && ((bnds.y < rBounds.y && bnds.bottom > rBounds.y)\n || (bnds.y < rBounds.bottom && rBounds.bottom < bnds.bottom) ||\n bnds.y >= rBounds.y &&\n bnds.bottom <= rBounds.bottom || bnds.y < rBounds.y && bnds.bottom > rBounds.bottom)) {\n var index = 0;\n intersectingLevels.splice(index, 0, l);\n }\n else if (rBounds && rBounds.bottom < bnds.y) {\n break;\n }\n l--;\n rBounds = layout.levels[parseInt(l.toString(), 10)] ? layout.levels[parseInt(l.toString(), 10)].rBounds : null;\n } while (l >= 0);\n l = (actualLevel !== undefined ? actualLevel : level) + 1;\n rBounds = layout.levels[parseInt(l.toString(), 10)] ? layout.levels[parseInt(l.toString(), 10)].rBounds : null;\n do {\n if (rBounds && ((bnds.y < rBounds.y && bnds.bottom > rBounds.y) ||\n (bnds.y < rBounds.bottom && rBounds.bottom < bnds.bottom) ||\n bnds.y >= rBounds.y && bnds.bottom <= rBounds.bottom || bnds.y < rBounds.y && bnds.bottom > rBounds.bottom)) {\n intersectingLevels.push(l);\n }\n else if (rBounds && rBounds.y > bnds.bottom) {\n break;\n }\n l++;\n rBounds = layout.levels[parseInt(l.toString(), 10)] ? layout.levels[parseInt(l.toString(), 10)].rBounds : null;\n } while (l <= layout.levels.length);\n return intersectingLevels;\n };\n HierarchicalTree.prototype.findLevel = function (layout, bounds, level) {\n //let bnds: Bounds;\n var bnds = bounds;\n var l;\n l = 0;\n var rBounds;\n rBounds = layout.levels[parseInt(l.toString(), 10)] ? layout.levels[parseInt(l.toString(), 10)].rBounds : null;\n while (l < layout.levels.length) {\n if (rBounds && bnds.bottom < rBounds.y) {\n return l;\n }\n else {\n l++;\n }\n rBounds = layout.levels[parseInt(l.toString(), 10)] ? layout.levels[parseInt(l.toString(), 10)].rBounds : null;\n }\n return l;\n };\n HierarchicalTree.prototype.getParentNode = function (layout, node) {\n //Return the first parent node\n return layout.nameTable[layout.nameTable[node.inEdges[0]].sourceID];\n };\n HierarchicalTree.prototype.updateEdges = function (layout, node, depth, action, nodes) {\n //let layoutInfo: LayoutInfo;\n var layoutInfo = layout.graphNodes[node.id];\n var j;\n if (node.outEdges && node.outEdges.length && (node.isExpanded || (action === DiagramAction.Render))) {\n for (j = 0; j < node.outEdges.length; j++) {\n //let edge: INode;\n var edge = layout.nameTable[layout.nameTable[node.outEdges[parseInt(j.toString(), 10)]].targetID];\n if (edge && !edge.excludeFromLayout) {\n if (layoutInfo.tree.children.indexOf(edge.id) === -1) {\n layoutInfo.tree.children.push(edge.id);\n }\n if (edge.outEdges && edge.outEdges.length && edge.isExpanded) {\n layoutInfo.tree.hasSubTree = true;\n }\n this.updateEdges(layout, edge, depth + 1, action, nodes);\n }\n }\n }\n //set level info\n layoutInfo.tree.level = depth;\n //By default, orientation is horizontal for nested trees\n if (layoutInfo.tree.hasSubTree) {\n layoutInfo.tree.orientation = 'Horizontal';\n layoutInfo.tree.type = 'Center';\n }\n //Customizing assistants and children collection\n //Performance-Instead of reading the method everytime, we can set once and can reuse that\n if ((layout.getLayoutInfo || layout.layoutInfo) && layout.type === 'OrganizationalChart') {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n layout.getLayoutInfo ?\n layout.getLayoutInfo(node, layoutInfo.tree) : updateLayoutValue(layoutInfo.tree, layout.layoutInfo, nodes, node);\n if (layoutInfo.tree.type === 'Balanced' && layoutInfo.tree.hasSubTree) {\n layoutInfo.tree.type = 'Center';\n layoutInfo.tree.orientation = 'Horizontal';\n }\n }\n if (layout.level && layoutInfo.tree.type !== 'Alternate' && depth >= layout.level) {\n layoutInfo.tree.hasSubTree = false;\n }\n };\n /* eslint-disable */\n HierarchicalTree.prototype.updateAnchor = function (layout, bounds, viewPort) {\n var node;\n var fixedNode;\n var width = 0;\n var height = 0;\n var mod = 0;\n var yValue = 0;\n var viewPortBounds = new Rect(0, 0, viewPort.x, viewPort.y); //let layoutBounds: Rect;\n var layoutBounds = layout.bounds ? layout.bounds : viewPortBounds;\n var orientation = layout.orientation;\n //Anchor based on fixed nodes\n if (layout.fixedNode) {\n fixedNode = layout.nameTable[layout.fixedNode];\n width = fixedNode.actualSize.width;\n height = fixedNode.actualSize.height;\n layout.anchorX = fixedNode.offsetX;\n layout.anchorY = fixedNode.offsetY;\n var pivot = fixedNode.pivot;\n layout.anchorX += layout.orientation === 'RightToLeft' ? width * pivot.x : -width * pivot.x;\n layout.anchorY += layout.orientation === 'BottomToTop' ? height * pivot.y : -height * pivot.y;\n node = fixedNode;\n mod = 0;\n while (node.inEdges.length) {\n node = this.getParentNode(layout, node);\n mod += layout.graphNodes[node.id].subTreeTranslation || 0;\n }\n if (layout.orientation.indexOf('Left') !== -1) {\n yValue = layout.graphNodes[fixedNode.id].y;\n // eslint-disable-next-line\n orientation === 'LeftToRight' ? layout.anchorX -= yValue : layout.anchorX += yValue;\n layout.anchorY -= layout.graphNodes[fixedNode.id].x + mod;\n }\n else {\n yValue = layout.graphNodes[fixedNode.id].y;\n // eslint-disable-next-line\n layout.anchorX -= layout.graphNodes[fixedNode.id].x + mod;\n orientation === 'TopToBottom' ? layout.anchorY -= yValue : layout.anchorY += yValue;\n }\n }\n else {\n if (orientation === 'TopToBottom' || orientation === 'BottomToTop') {\n switch (layout.horizontalAlignment) {\n case 'Left':\n layout.anchorX = (layoutBounds.x - bounds.x) + layout.margin.left;\n break;\n case 'Right':\n layout.anchorX = layoutBounds.x + layoutBounds.width - layout.margin.right - bounds.right;\n break;\n case 'Auto':\n case 'Center':\n layout.anchorX = layoutBounds.x + layoutBounds.width / 2 - (bounds.x + bounds.right) / 2;\n break;\n }\n switch (layout.verticalAlignment) {\n case 'Auto':\n case 'Top':\n var top_1;\n top_1 = layoutBounds.y + layout.margin.top;\n layout.anchorY = orientation === 'TopToBottom' ? top_1 : bounds.bottom + top_1;\n break;\n case 'Bottom':\n var bottom = void 0;\n bottom = layoutBounds.y + layoutBounds.height - layout.margin.bottom;\n layout.anchorY = orientation === 'TopToBottom' ? bottom - bounds.bottom : bottom;\n break;\n case 'Center':\n var center = void 0;\n center = layoutBounds.y + layoutBounds.height / 2;\n layout.anchorY = layout.orientation === 'TopToBottom' ?\n center - (bounds.y + bounds.bottom) / 2 : center + (bounds.y + bounds.bottom) / 2;\n break;\n }\n }\n else {\n switch (layout.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n var left = void 0;\n left = layoutBounds.x + layout.margin.left;\n layout.anchorX = orientation === 'LeftToRight' ? left : bounds.bottom + left;\n break;\n case 'Right':\n var right = void 0;\n right = layoutBounds.x + layoutBounds.width - layout.margin.right;\n layout.anchorX = orientation === 'LeftToRight' ? right - bounds.bottom : right;\n break;\n case 'Center':\n var center = void 0;\n center = layoutBounds.width / 2 + layoutBounds.x;\n layout.anchorX = layout.orientation === 'LeftToRight' ?\n center - (bounds.y + bounds.bottom) / 2 : center + (bounds.y + bounds.bottom) / 2;\n break;\n }\n switch (layout.verticalAlignment) {\n case 'Top':\n layout.anchorY = layoutBounds.y + layout.margin.top - bounds.x;\n break;\n case 'Auto':\n case 'Center':\n layout.anchorY = layoutBounds.y + layoutBounds.height / 2 - (bounds.right + bounds.x) / 2;\n break;\n case 'Bottom':\n layout.anchorY = layoutBounds.y + layoutBounds.height - layout.margin.bottom - bounds.right;\n break;\n }\n }\n }\n };\n /* eslint-enable */\n HierarchicalTree.prototype.updateConnectors = function (layout, node, level) {\n var i;\n //let info: LayoutInfo;\n //let nodeWidth: number; let nodeHeight: number; let targetWidth: number; let targetHeight: number;\n //let length: number; let offsetLen: number; let points: PointModel[];\n //let segments: ConnSegments;\n var target;\n var conn;\n //Route out edges\n var info = layout.graphNodes[node.id];\n if (node.outEdges.length) {\n for (i = 0; i < node.outEdges.length; i++) {\n conn = layout.nameTable[node.outEdges[parseInt(i.toString(), 10)]];\n conn.points = [];\n target = layout.nameTable[conn.targetID];\n if (conn.visible) {\n conn.visited = true;\n if (layout.getConnectorSegments) {\n var segments = layout.getConnectorSegments(conn);\n }\n else {\n if (info && info.tree.children.indexOf(conn.targetID) !== -1) {\n if (conn.type === 'Bezier' && layout.connectionPointOrigin === 'SamePoint') {\n conn.segments = [];\n (conn.segments).push(new BezierSegment(conn, 'segments', { type: 'Bezier' }, true));\n }\n if (layout.type === 'OrganizationalChart' && conn.type === 'Orthogonal') {\n conn.segments = [];\n this.updateSegments(layout, conn, node, target, i);\n }\n }\n }\n if (target && (target.isExpanded || this.hasChild(layout, target))) {\n this.updateConnectors(layout, target, level + 1);\n }\n }\n }\n }\n if (info && info.tree.assistants.length) {\n //In-Edge routing of assistant nodes\n for (i = 0; i < info.tree.assistants.length; i++) {\n target = layout.nameTable[info.tree.assistants[parseInt(i.toString(), 10)]];\n conn = layout.nameTable[target.inEdges[0]];\n this.get3Points(layout, node, target, conn);\n if (target.isExpanded || this.hasChild(layout, target)) {\n this.updateConnectors(layout, target, level + 1);\n }\n }\n }\n };\n HierarchicalTree.prototype.updateSegments = function (layout, conn, node, target, i) {\n var info = layout.graphNodes[node.id];\n //Connector routing - Horizontal layout orientation\n if (info.tree.assistants.length) {\n //Route in-edge of child node, if the parent has assistant\n this.updateSegmentsForHorizontalOrientation(layout, node, target, conn);\n }\n else {\n //Route in-edge of child node\n if (info.tree.orientation === 'Horizontal' && info.tree.type === 'Balanced') {\n this.updateSegmentsForBalancedTree(layout, conn, node, target, i);\n }\n else {\n if (info.tree.orientation === 'Horizontal') {\n this.updateSegmentsForHorizontalOrientation(layout, node, target, conn);\n }\n else {\n if (info.tree.offset < 5) {\n this.get5Points(layout, node, target, conn);\n }\n else {\n this.get3Points(layout, node, target, conn);\n }\n }\n }\n }\n };\n HierarchicalTree.prototype.updateSegmentsForBalancedTree = function (layout, connector, node, target, i) {\n var info = layout.graphNodes[node.id];\n var center;\n var relative;\n if (info.tree.children.length === 5 && i > 2) {\n relative = info.tree.children[1];\n if (isNaN(layout.graphNodes[\"\" + relative].treeWidth)) {\n layout.graphNodes[\"\" + relative].treeWidth = layout.nameTable[\"\" + relative].actualSize.width;\n }\n var factor = i !== 3 ? 1 : -1;\n if (layout.orientation.indexOf('Left') !== -1) {\n center = layout.nameTable[\"\" + relative].offsetY - layout.graphNodes[\"\" + relative].treeWidth / 2 -\n (layout.verticalSpacing * factor / 2);\n }\n else {\n var center_1 = layout.nameTable[\"\" + relative].offsetX +\n layout.graphNodes[\"\" + relative].treeWidth / 2 + (layout.horizontalSpacing * factor) / 2;\n }\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n else {\n if (info.tree.children.length > 5) {\n if (i < 4 || i < info.tree.rows) {\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n else {\n this.updateSegmentsForHorizontalOrientation(layout, node, target, connector);\n }\n }\n else if (info.tree.children.length === 4) {\n if (i < 2 || i < info.tree.rows) {\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n else {\n this.updateSegmentsForHorizontalOrientation(layout, node, target, connector);\n }\n }\n else {\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n }\n };\n HierarchicalTree.prototype.get3Points = function (layout, node, target, connector) {\n var points = [];\n var nodeBounds = this.getBounds(node);\n var targetBounds = this.getBounds(target);\n if (layout.orientation.indexOf('Top') !== -1) {\n var startingPoint = layout.orientation.indexOf('Top') === 0 ? nodeBounds.bottomCenter :\n nodeBounds.topCenter;\n var endPoint = node.offsetX > target.offsetX ? targetBounds.middleRight : targetBounds.middleLeft;\n points.push(startingPoint, { x: nodeBounds.bottomCenter.x, y: endPoint.y }, endPoint);\n }\n else {\n var startingPoint = layout.orientation.indexOf('Left') === 0 ? nodeBounds.middleRight :\n nodeBounds.middleLeft;\n var endPoint = node.offsetY > target.offsetY ? targetBounds.bottomCenter : targetBounds.topCenter;\n points.push(startingPoint, { x: targetBounds.bottomCenter.x, y: nodeBounds.middleRight.y }, endPoint);\n }\n this.getSegmentsFromPoints(points, connector);\n };\n HierarchicalTree.prototype.get5Points = function (layout, node, target, connector) {\n var points = [];\n //let layoutprop: Layout;\n var nodeBounds = this.getBounds(node);\n var targetBounds = this.getBounds(target);\n //let info: LayoutInfo = layout.graphNodes[node.id];\n var startingPoint;\n var endPoint;\n var horizontalSpacing;\n var verticalSpacing;\n if (layout.orientation.indexOf('Top') !== -1) {\n startingPoint = (node.offsetY < target.offsetY) ? nodeBounds.bottomCenter : nodeBounds.topCenter;\n verticalSpacing = layout.verticalSpacing / 4 * ((node.offsetY < target.offsetY) ? 1 : -1);\n horizontalSpacing = layout.horizontalSpacing / 2 * ((node.offsetX > target.offsetX) ? 1 : -1);\n endPoint = (node.offsetX > target.offsetX) ? targetBounds.middleRight : targetBounds.middleLeft;\n points.push(startingPoint, { x: startingPoint.x, y: startingPoint.y + verticalSpacing }, { x: endPoint.x + horizontalSpacing, y: startingPoint.y + verticalSpacing }, { x: endPoint.x + horizontalSpacing, y: endPoint.y }, endPoint);\n }\n else {\n startingPoint = (node.offsetX > target.offsetX) ? nodeBounds.middleLeft : nodeBounds.middleRight;\n endPoint = node.offsetY > target.offsetY ? targetBounds.bottomCenter : targetBounds.topCenter;\n horizontalSpacing = layout.horizontalSpacing / 4 * ((node.offsetX < target.offsetX) ? 1 : -1);\n verticalSpacing = layout.verticalSpacing / 2 * ((node.offsetY > target.offsetY) ? 1 : -1);\n points.push(startingPoint, { x: startingPoint.x + horizontalSpacing, y: startingPoint.y }, { x: startingPoint.x + horizontalSpacing, y: startingPoint.y + verticalSpacing }, { x: endPoint.x, y: startingPoint.y + verticalSpacing }, endPoint);\n }\n this.getSegmentsFromPoints(points, connector);\n };\n HierarchicalTree.prototype.getSegmentsFromPoints = function (points, connector) {\n var segments = [];\n var segment;\n for (var i = 0; i < points.length - 2; i++) {\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(points[parseInt(i.toString(), 10)], points[i + 1]);\n segment.length = Point.distancePoints(points[parseInt(i.toString(), 10)], points[i + 1]);\n segments.push(segment);\n }\n connector.segments = segments;\n };\n HierarchicalTree.prototype.getSegmentsForMultipleRows = function (layout, node, target, connector) {\n //let points: PointModel[] = [];\n var segments = [];\n var point;\n var segment;\n var targetBounds = this.getBounds(target);\n var nodeBounds = this.getBounds(node);\n switch (layout.orientation) {\n case 'TopToBottom':\n point = { x: nodeBounds.bottomCenter.x, y: (nodeBounds.bottomCenter.y + layout.verticalSpacing / 4) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.bottomCenter, point);\n segment.length = Point.distancePoints(nodeBounds.bottomCenter, point);\n segments.push(segment);\n break;\n case 'BottomToTop':\n point = { x: nodeBounds.bottomCenter.x, y: (nodeBounds.topCenter.y - layout.verticalSpacing / 4) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.topCenter, point);\n segment.length = Point.distancePoints(nodeBounds.topCenter, point);\n segments.push(segment);\n break;\n case 'LeftToRight':\n point = { x: (nodeBounds.middleRight.x + layout.verticalSpacing / 4), y: nodeBounds.middleRight.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleRight, point);\n segment.length = Point.distancePoints(nodeBounds.middleRight, point);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point3 = { x: (nodeBounds.middleRight.x + layout.verticalSpacing / 4), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point, point3);\n segment.length = Point.distancePoints(point, point3);\n segments.push(segment);\n }\n break;\n case 'RightToLeft':\n point = { x: (nodeBounds.middleLeft.x - layout.verticalSpacing / 4), y: nodeBounds.middleRight.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleLeft, point);\n segment.length = Point.distancePoints(nodeBounds.middleLeft, point);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point_1 = { x: (nodeBounds.middleLeft.x - layout.verticalSpacing / 4), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point_1, point_1);\n segment.length = Point.distancePoints(point_1, point_1);\n segments.push(segment);\n }\n break;\n }\n connector.segments = segments;\n };\n HierarchicalTree.prototype.updateSegmentsForHorizontalOrientation = function (layout, node, target, connector) {\n var points = [];\n var point2;\n var segment;\n var segments = [];\n var nodeBounds = this.getBounds(node);\n var targetBounds = this.getBounds(target);\n switch (layout.orientation) {\n case 'TopToBottom':\n point2 = { x: nodeBounds.bottomCenter.x, y: (targetBounds.topCenter.y - layout.verticalSpacing / 2) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.bottomCenter, point2);\n segment.length = Point.distancePoints(nodeBounds.bottomCenter, point2);\n segments.push(segment);\n break;\n case 'BottomToTop':\n point2 = { x: nodeBounds.topCenter.x, y: (targetBounds.bottomCenter.y + layout.verticalSpacing / 2) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.topCenter, point2);\n segment.length = Point.distancePoints(nodeBounds.topCenter, point2);\n segments.push(segment);\n break;\n case 'LeftToRight':\n point2 = { x: (targetBounds.middleLeft.x - layout.verticalSpacing / 2), y: nodeBounds.middleRight.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleRight, point2);\n segment.length = Point.distancePoints(nodeBounds.middleRight, point2);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point3 = { x: (targetBounds.middleLeft.x - layout.verticalSpacing / 2), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point2, point3);\n segment.length = Point.distancePoints(point2, point3);\n segments.push(segment);\n }\n break;\n case 'RightToLeft':\n point2 = { x: (targetBounds.middleRight.x + layout.verticalSpacing / 2), y: nodeBounds.middleRight.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleLeft, point2);\n segment.length = Point.distancePoints(nodeBounds.middleLeft, point2);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point = { x: (targetBounds.middleRight.x + layout.verticalSpacing / 2), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point2, point);\n segment.length = Point.distancePoints(point2, point);\n segments.push(segment);\n }\n break;\n }\n connector.segments = segments;\n return points;\n };\n HierarchicalTree.prototype.updateNodes = function (layout, node, mod, update, dx, dy) {\n var i;\n var child;\n var width;\n var height;\n var offsetX;\n var offsetY;\n if (node && !node.excludeFromLayout) {\n width = node.actualSize.width;\n height = node.actualSize.height;\n offsetX = layout.anchorX;\n offsetY = layout.anchorY;\n /*Performance - instead of checking conditions for every node, we can make the layout related\n conditions once and we can reuse them*/\n if (layout.orientation === 'LeftToRight') {\n offsetX += layout.graphNodes[node.id].y + width / 2;\n offsetY += layout.graphNodes[node.id].x + mod + height / 2;\n }\n else if (layout.orientation === 'RightToLeft') {\n offsetX -= layout.graphNodes[node.id].y + width / 2;\n offsetY += layout.graphNodes[node.id].x + mod + height / 2;\n }\n else if (layout.orientation === 'TopToBottom') {\n offsetX += layout.graphNodes[node.id].x + mod + width / 2;\n offsetY += layout.graphNodes[node.id].y + height / 2;\n }\n else {\n offsetX += layout.graphNodes[node.id].x + mod + width / 2;\n offsetY -= layout.graphNodes[node.id].y + height / 2;\n }\n if (layout.graphNodes) {\n dx = dx ? dx : 0;\n dy = dy ? dy : 0;\n offsetX += dx;\n offsetY += dy;\n if (!this.isAnimation) {\n node.offsetX = offsetX;\n node.offsetY = offsetY;\n }\n }\n var objects = { id: node.id, differenceX: offsetX - node.offsetX, differenceY: offsetY - node.offsetY };\n layout.objects.push(objects);\n var list = [];\n if (this.hasChild(layout, node)) {\n for (i = 0; i < layout.graphNodes[node.id].tree.children.length; i++) {\n child = layout.nameTable[layout.graphNodes[node.id].tree.children[parseInt(i.toString(), 10)]];\n this.updateNodes(layout, child, mod + (layout.graphNodes[node.id].subTreeTranslation || 0), update, dx, dy);\n list.push(child);\n }\n }\n if (layout.graphNodes[node.id].tree.assistants.length) {\n for (i = 0; i < layout.graphNodes[node.id].tree.assistants.length; i++) {\n child = layout.nameTable[layout.graphNodes[node.id].tree.assistants[parseInt(i.toString(), 10)]];\n this.updateNodes(layout, child, mod + (layout.graphNodes[node.id].subTreeTranslation || 0), null, dx, dy);\n }\n }\n }\n };\n return HierarchicalTree;\n}());\n\n/**\n * Layout for mind-map tree\n */\nvar MindMap = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the organizational chart module.\n *\n * @private\n */\n function MindMap() {\n /**\n * Defines the layout animation\n *\n */\n this.isAnimation = false;\n //constructs the layout module\n }\n /**\n * To destroy the organizational chart\n *\n * @returns {void}\n * @private\n */\n MindMap.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n MindMap.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n */\n return 'MindMapChart';\n };\n /**\n * @param nodes\n * @param nameTable\n * @param layoutProp\n * @param viewPort\n * @param uniqueId\n * @param root\n * @private\n */\n MindMap.prototype.updateLayout = function (nodes, nameTable, layoutProp, viewPort, uniqueId, root) {\n var isRoot = this.checkRoot(nodes, layoutProp, uniqueId, root, nameTable);\n if (isRoot) {\n layoutProp.fixedNode = isRoot;\n }\n else {\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var node = nodes_1[_i];\n if (!node.excludeFromLayout) {\n if (!node.inEdges || !node.inEdges.length) {\n layoutProp.fixedNode = node.id;\n break;\n }\n }\n }\n }\n var rootNode = nameTable[layoutProp.fixedNode];\n var fistLevelNodes = this.findFirstLevelNodes(rootNode, layoutProp, nameTable);\n var leftNodes = [];\n var rightNodes = [];\n var getMindmapBranch = getFunction(layoutProp.getBranch);\n getMindmapBranch = getMindmapBranch || getFunction(this.getBranch);\n for (var _a = 0, fistLevelNodes_1 = fistLevelNodes; _a < fistLevelNodes_1.length; _a++) {\n var node = fistLevelNodes_1[_a];\n var align = getMindmapBranch(node, fistLevelNodes);\n align = node && node.branch ? node.branch : align;\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n (align === 'Left') ? leftNodes.push(node) : rightNodes.push(node);\n }\n var viewPortBounds = new Rect(0, 0, viewPort.x, viewPort.y);\n nameTable[layoutProp.fixedNode].offsetX = viewPortBounds.x + viewPortBounds.width / 2;\n nameTable[layoutProp.fixedNode].offsetY = viewPortBounds.y + viewPortBounds.height / 2;\n if (leftNodes.length) {\n this.updateMindMapBranch(nodes, rightNodes, nameTable, layoutProp, viewPort, uniqueId, 'Left');\n }\n if (rightNodes.length) {\n this.updateMindMapBranch(nodes, leftNodes, nameTable, layoutProp, viewPort, uniqueId, 'Right');\n }\n };\n MindMap.prototype.checkRoot = function (nodes, layoutProp, uniqueId, root, nameTable) {\n for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {\n var node = nodes_2[_i];\n if (!node.excludeFromLayout) {\n if (node.data && (node.data[\"\" + uniqueId].toString() === root || node.data[\"\" + uniqueId].toString()\n === layoutProp.root)) {\n return node.id;\n }\n else if (!node.data && node.id === layoutProp.root) {\n return node.id;\n }\n }\n }\n return '';\n };\n MindMap.prototype.updateMindMapBranch = function (nodes, excludeNodes, nameTable, layoutProp, viewPort, uniqueId, side) {\n var layout = {\n type: 'HierarchicalTree',\n horizontalSpacing: layoutProp.verticalSpacing, verticalSpacing: layoutProp.horizontalSpacing,\n verticalAlignment: layoutProp.verticalAlignment, horizontalAlignment: layoutProp.horizontalAlignment,\n fixedNode: layoutProp.fixedNode, getLayoutInfo: getFunction(layoutProp.getLayoutInfo),\n layoutInfo: layoutProp.layoutInfo, margin: layoutProp.margin,\n orientation: layoutProp.orientation,\n root: layoutProp.fixedNode\n };\n //(EJ2-277624)-Vertical orientation is not working in mindmap\n if (layout.orientation === 'Vertical') {\n layout.orientation = (side === 'Left') ? 'TopToBottom' : 'BottomToTop';\n }\n else {\n layout.orientation = (side === 'Left') ? 'LeftToRight' : 'RightToLeft';\n }\n this.excludeFromLayout(excludeNodes, nameTable, true);\n var mapLayout = new HierarchicalTree();\n mapLayout.updateLayout(nodes, nameTable, layout, viewPort, uniqueId);\n this.excludeFromLayout(excludeNodes, nameTable, false);\n };\n MindMap.prototype.getBranch = function (obj, firstLevelNodes) {\n var side;\n var i = firstLevelNodes.indexOf(obj);\n if (i % 2 === 0) {\n side = 'Left';\n }\n else {\n side = 'Right';\n }\n return side;\n };\n MindMap.prototype.excludeFromLayout = function (newCollection, nameTable, exclude) {\n for (var _i = 0, newCollection_1 = newCollection; _i < newCollection_1.length; _i++) {\n var newcol = newCollection_1[_i];\n var node = nameTable[newcol.id];\n node.excludeFromLayout = exclude;\n }\n };\n MindMap.prototype.findFirstLevelNodes = function (node, layout, nameTable) {\n var fistLevelNodes = [];\n if (node && node.outEdges.length) {\n for (var _i = 0, _a = node.outEdges; _i < _a.length; _i++) {\n var outEdge = _a[_i];\n fistLevelNodes.push(nameTable[nameTable[\"\" + outEdge].targetID]);\n }\n }\n return fistLevelNodes;\n };\n return MindMap;\n}());\n\n/**\n * Radial Tree\n */\nvar RadialTree = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the organizational chart module.\n *\n * @private\n */\n function RadialTree() {\n //constructs the layout module\n }\n /**\n * To destroy the organizational chart\n *\n * @returns {void}\n * @private\n */\n RadialTree.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n RadialTree.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n */\n return 'RadialTree';\n };\n /**\n * @param nodes\n * @param nameTable\n * @param layoutProp\n * @param viewport\n * @private\n */\n RadialTree.prototype.updateLayout = function (nodes, nameTable, layoutProp, viewport) {\n var layout = {\n type: layoutProp.type,\n nameTable: nameTable, anchorX: 0, anchorY: 0,\n firstLevelNodes: [], centerNode: null, levels: [], maxLevel: 0, graphNodes: {}, layoutNodes: [],\n orientation: layoutProp.orientation,\n horizontalSpacing: layoutProp.horizontalSpacing, verticalSpacing: layoutProp.verticalSpacing,\n verticalAlignment: layoutProp.verticalAlignment, horizontalAlignment: layoutProp.horizontalAlignment,\n fixedNode: layoutProp.fixedNode, margin: layoutProp.margin,\n bounds: layoutProp.bounds, objects: [], root: layoutProp.root\n };\n this.doLayout(layout, nodes, nameTable, viewport);\n };\n RadialTree.prototype.doLayout = function (layout, nodes, nameTable, viewport) {\n var node;\n for (var i = 0; i < nodes.length; i++) {\n node = nodes[parseInt(i.toString(), 10)];\n if (!node.excludeFromLayout) {\n layout.graphNodes[node.id] = this.setUpLayoutInfo(layout, node);\n if (!node.inEdges || !node.inEdges.length) {\n layout.firstLevelNodes.push(node);\n }\n }\n }\n if (layout.root && nameTable[layout.root]) {\n layout.centerNode = nameTable[layout.root];\n }\n else if (layout.firstLevelNodes.length) {\n layout.centerNode = layout.firstLevelNodes[0];\n layout.root = layout.centerNode.id;\n }\n if (layout.centerNode) {\n this.updateEdges(layout, layout.centerNode, 0, nameTable);\n this.depthFirstAllignment(layout, layout.centerNode, 0, 0);\n this.populateLevels(layout);\n this.transformToCircleLayout(layout);\n this.updateAnchor(layout, viewport);\n this.updateNodes(layout, layout.centerNode, nameTable);\n }\n };\n RadialTree.prototype.updateEdges = function (layout, node, depth, nameTable) {\n var nodeInfo = layout.graphNodes[node.id];\n layout.layoutNodes.push(nodeInfo);\n nodeInfo.level = depth;\n nodeInfo.visited = true;\n layout.maxLevel = Math.max(layout.maxLevel, depth);\n for (var j = 0; j < node.outEdges.length; j++) {\n var edge = nameTable[nameTable[node.outEdges[parseInt(j.toString(), 10)]].targetID];\n if (!edge.excludeFromLayout && !edge.visited) {\n nodeInfo.children.push(edge);\n this.updateEdges(layout, edge, depth + 1, nameTable);\n }\n }\n };\n RadialTree.prototype.depthFirstAllignment = function (layout, node, x, y) {\n var newValue;\n var nodeInfo = layout.graphNodes[node.id];\n if (nodeInfo.children.length) {\n y += 300;\n for (var i = 0; i < nodeInfo.children.length; i++) {\n newValue = this.depthFirstAllignment(layout, nodeInfo.children[parseInt(i.toString(), 10)], x, y);\n x = newValue.x;\n y = newValue.y;\n }\n nodeInfo.children = nodeInfo.children.sort(function (obj1, obj2) {\n return layout.graphNodes[obj1.id].x - layout.graphNodes[obj2.id].x;\n });\n var min = layout.graphNodes[nodeInfo.children[0].id].min;\n var max = layout.graphNodes[nodeInfo.children[nodeInfo.children.length - 1].id].max;\n nodeInfo.x = min + (max - min) / 2;\n x = max + layout.horizontalSpacing;\n nodeInfo.segmentOffset = max + layout.horizontalSpacing;\n nodeInfo.x -= nodeInfo.width / 2;\n nodeInfo.y -= nodeInfo.height / 2;\n nodeInfo.min = min;\n nodeInfo.max = max;\n if (nodeInfo.x < min && nodeInfo.visited) {\n nodeInfo.x = min;\n x = nodeInfo.x + nodeInfo.width / 2 - (max - min) / 2;\n nodeInfo.visited = false;\n for (var i = 0; i < nodeInfo.children.length; i++) {\n newValue = this.depthFirstAllignment(layout, nodeInfo.children[parseInt(i.toString(), 10)], x, y);\n }\n nodeInfo.visited = true;\n x = nodeInfo.x + nodeInfo.width + layout.horizontalSpacing;\n }\n max = layout.graphNodes[nodeInfo.children[nodeInfo.children.length - 1].id].segmentOffset;\n x = x < max ? max : x;\n y -= 300;\n nodeInfo.y = y;\n }\n else {\n nodeInfo.x = x;\n nodeInfo.y = y;\n nodeInfo.min = x;\n nodeInfo.max = x + nodeInfo.width;\n x += nodeInfo.width + layout.horizontalSpacing;\n }\n return { x: x, y: y };\n };\n RadialTree.prototype.populateLevels = function (layout) {\n var stages = [];\n // eslint-disable-next-line prefer-spread\n var min = Math.min.apply(Math, layout.layoutNodes.map(function (nodeInfo) { return nodeInfo.x; }));\n // eslint-disable-next-line prefer-spread\n var max = Math.max.apply(Math, layout.layoutNodes.map(function (nodeInfo) {\n return nodeInfo.x + nodeInfo.width + layout.horizontalSpacing;\n }));\n var full = max - min;\n layout.levels = [];\n var _loop_1 = function (i) {\n stages = layout.layoutNodes.filter(function (nodeInfo) {\n if (nodeInfo.level === i) {\n return nodeInfo;\n }\n else {\n return null;\n }\n });\n var newlevel = {};\n stages = stages.sort(function (nodeInfo1, nodeInfo2) { return nodeInfo1.x - nodeInfo2.x; });\n newlevel.min = stages[0].x;\n newlevel.max = stages[stages.length - 1].x + stages[stages.length - 1].width + layout.horizontalSpacing;\n newlevel.actualCircumference = 0;\n newlevel.height = 0;\n for (var k = 0; k < stages.length; k++) {\n if (stages[parseInt(k.toString(), 10)].height > newlevel.height) {\n newlevel.height = stages[parseInt(k.toString(), 10)].height;\n }\n newlevel.actualCircumference += Math.max(stages[parseInt(k.toString(), 10)].width, stages[parseInt(k.toString(), 10)].height);\n if (k !== stages.length - 1) {\n newlevel.actualCircumference += layout.horizontalSpacing;\n }\n }\n newlevel.circumference = newlevel.max - newlevel.min;\n if (newlevel.actualCircumference < newlevel.circumference) {\n newlevel.circumference = (newlevel.circumference + newlevel.actualCircumference) / 2;\n }\n newlevel.radius = newlevel.circumference / (2 * Math.PI) + newlevel.height;\n newlevel.nodes = [];\n if (i > 1) {\n if (layout.levels[i - 1].radius + layout.levels[i - 1].height >= newlevel.radius) {\n newlevel.radius = layout.levels[i - 1].radius + layout.levels[i - 1].height;\n }\n }\n for (var j = 0; j < stages.length; j++) {\n stages[parseInt(j.toString(), 10)].ratio = Math.abs(stages[parseInt(j.toString(), 10)].x\n + stages[parseInt(j.toString(), 10)].width / 2 - min) / full;\n newlevel.nodes.push(stages[parseInt(j.toString(), 10)]);\n }\n layout.levels.push(newlevel);\n };\n for (var i = 0; i <= layout.maxLevel; i++) {\n _loop_1(i);\n }\n };\n RadialTree.prototype.transformToCircleLayout = function (layout) {\n var root = layout.graphNodes[layout.centerNode.id];\n root.x = 0;\n root.y = 0;\n for (var i = 1; i < layout.levels.length; i++) {\n for (var j = 0; j < layout.levels[parseInt(i.toString(), 10)].nodes.length; j++) {\n var nodeInfo = layout.levels[parseInt(i.toString(), 10)].nodes[parseInt(j.toString(), 10)];\n nodeInfo.x = Math.cos(nodeInfo.ratio * 360 * Math.PI / 180)\n * (layout.levels[parseInt(i.toString(), 10)].radius + layout.verticalSpacing * i);\n nodeInfo.y = Math.sin(nodeInfo.ratio * 360 * Math.PI / 180)\n * (layout.levels[parseInt(i.toString(), 10)].radius + layout.verticalSpacing * i);\n layout.anchorX = Math.min(layout.anchorX, nodeInfo.x);\n layout.anchorY = Math.min(layout.anchorY, nodeInfo.y);\n }\n }\n };\n RadialTree.prototype.updateAnchor = function (layout, viewPort) {\n layout.anchorX = layout.centerNode.offsetX || viewPort.x / 2;\n layout.anchorY = layout.centerNode.offsetY || viewPort.y / 2;\n };\n RadialTree.prototype.updateNodes = function (layout, node, nameTable) {\n var nodeInfo = layout.graphNodes[node.id];\n var offsetX = nodeInfo.x + layout.anchorX;\n var offsetY = nodeInfo.y + layout.anchorY;\n node.offsetX = offsetX;\n node.offsetY = offsetY;\n for (var i = 0; i < nodeInfo.children.length; i++) {\n var childInfo = nodeInfo.children[parseInt(i.toString(), 10)];\n this.updateNodes(layout, nameTable[childInfo.id], nameTable);\n }\n };\n RadialTree.prototype.setUpLayoutInfo = function (layout, item) {\n var info = {};\n info.name = item.id;\n info.x = 0;\n info.y = 0;\n info.min = 0;\n info.max = 0;\n info.width = item.actualSize.width;\n info.height = item.actualSize.height;\n info.children = [];\n info.level = 0;\n info.ratio = 0;\n info.visited = false;\n return info;\n };\n return RadialTree;\n}());\n\nvar GraphForceNode = /** @__PURE__ @class */ (function () {\n function GraphForceNode(gnNode) {\n /**\n * @private\n */\n this.velocityX = 0;\n /**\n * @private\n */\n this.velocityY = 0;\n /**\n * @private\n */\n this.nodes = [];\n this.graphNode = gnNode;\n var nNode = this.graphNode;\n var bounds = getGraphBounds(nNode);\n this.location = bounds.center;\n this.nodes = [];\n if (!gnNode.treeInfo.parents) {\n gnNode.treeInfo.parents = [];\n }\n if (!gnNode.treeInfo.children) {\n gnNode.treeInfo.children = [];\n }\n this.nodes = (gnNode.treeInfo.parents).concat(gnNode.treeInfo.children);\n }\n /**\n * applyChanges method\\\n *\n * @returns { void } applyChanges method .\\\n * @private\n */\n GraphForceNode.prototype.applyChanges = function () {\n this.graphNode.treeInfo.center = this.location;\n };\n return GraphForceNode;\n}());\n/**\n * SymmetricalLayout\n */\nvar SymmetricLayout = /** @__PURE__ @class */ (function () {\n function SymmetricLayout() {\n this.cdCOEF = 0.442;\n this.cfMAXVELOCITY = 50;\n this.cnMAXITERACTION = 1000;\n this.cnSPRINGLENGTH = 100;\n this.mszMaxForceVelocity = { width: this.cfMAXVELOCITY, height: this.cfMAXVELOCITY };\n /**\n * @private\n */\n this.springLength = 0;\n /**\n * @private\n */\n this.springFactor = this.cdCOEF;\n /**\n * @private\n */\n this.maxIteration = this.cnMAXITERACTION;\n this.springLength = this.cnSPRINGLENGTH;\n }\n /**\n *To destroy the layout\n *\n * @returns {void} To destroy the layout\n */\n SymmetricLayout.prototype.destroy = function () {\n /**\n * Destroys symmetricLayout\n */\n };\n SymmetricLayout.prototype.getModuleName = function () {\n return 'SymmetricalLayout';\n };\n SymmetricLayout.prototype.doGraphLayout = function (graphLayoutManager) {\n var graph = this.selectedNode;\n graph.treeInfo.Bounds = graphLayoutManager.getModelBounds(graphLayoutManager.nodes);\n var lstGraphNodes = graph.treeInfo.GraphNodes;\n var lstNodes = this.convertGraphNodes(lstGraphNodes);\n var count = lstNodes.length;\n count = Math.min(this.maxIteration, count * count * count);\n this.preLayoutNodes(lstNodes, graph.treeInfo.Bounds);\n for (var i = 0, nLenght = count; i < nLenght; i++) {\n this.makeSymmetricLayout(lstNodes);\n this.appendForces(lstNodes);\n }\n this.resetGraphPosition(lstNodes, graph);\n };\n SymmetricLayout.prototype.preLayoutNodes = function (lstNodes, rcBounds) {\n var fMaxSize = Math.max(rcBounds.width, rcBounds.height);\n var ptCenter = { x: fMaxSize / 2, y: fMaxSize / 2 };\n var dRotateAngle = 2 * Math.PI / lstNodes.length;\n var dAngle = dRotateAngle;\n for (var i = 0; i < lstNodes.length; i++) {\n var gnNode = lstNodes[parseInt(i.toString(), 10)];\n var forceNode = this.getForceNode(gnNode);\n forceNode.location = {\n x: ptCenter.x + fMaxSize * Number((Math.cos(dAngle)).toFixed(2)),\n y: ptCenter.y + fMaxSize * Number(Math.sin(dAngle).toFixed(2))\n };\n dAngle -= dRotateAngle;\n }\n };\n /**\n * doLayout method\\\n *\n * @returns { void } doLayout method .\\\n * @param {GraphLayoutManager} graphLayoutManager - provide the angle value.\n * @private\n */\n SymmetricLayout.prototype.doLayout = function (graphLayoutManager) {\n this.selectedNode = graphLayoutManager.selectedNode;\n this.doGraphLayout(graphLayoutManager);\n };\n SymmetricLayout.prototype.makeSymmetricLayout = function (lstNodes) {\n var forceNode;\n var force;\n for (var k = 0; k < lstNodes.length; k++) {\n var gnNode = lstNodes[parseInt(k.toString(), 10)];\n forceNode = this.getForceNode(gnNode);\n var nodes = forceNode.nodes;\n for (var l = 0; l < nodes.length; l++) {\n var gnChild = nodes[parseInt(l.toString(), 10)];\n this.calcNodesForce(forceNode, this.getForceNode(gnChild));\n }\n for (var i = 0, length_1 = nodes.length; i < length_1; i++) {\n if (length_1 < 2) {\n break;\n }\n var vtx1 = this.getForceNode(nodes[parseInt(i.toString(), 10)]);\n var vtx2 = (i + 1 >= length_1) ? this.getForceNode(nodes[0]) : this.getForceNode((nodes[i + 1]));\n var angle = (360 / nodes.length / 2) * Math.PI / 180;\n var normalDistance = 2 * this.springLength * Math.sin(angle);\n this.calcRelatesForce(vtx1, vtx2, normalDistance);\n }\n for (var s = 0; s < lstNodes.length; s++) {\n var gnChild = lstNodes[parseInt(s.toString(), 10)];\n if (!collectionContains(gnChild.id, nodes) && gnChild.id !== gnNode.id) {\n force = this.getForceNode(gnChild);\n this.updateNeigbour(forceNode, force);\n }\n }\n }\n };\n SymmetricLayout.prototype.appendForces = function (lstNodes) {\n var gfnNode = null;\n for (var k = 0; k < lstNodes.length; k++) {\n var gnNode = lstNodes[parseInt(k.toString(), 10)];\n gfnNode = this.getForceNode(gnNode);\n var ptPoint = gfnNode.location;\n ptPoint.x += Math.min(gfnNode.velocityX, this.mszMaxForceVelocity.width);\n ptPoint.y += Math.min(gfnNode.velocityY, this.mszMaxForceVelocity.height);\n gfnNode.velocityX = 0;\n gfnNode.velocityY = 0;\n gfnNode.location = ptPoint;\n }\n };\n SymmetricLayout.prototype.resetGraphPosition = function (lstNodes, graph) {\n var szMin = { width: Number.MAX_VALUE, height: Number.MAX_VALUE };\n var gfnNode = null;\n var gnNode;\n for (var k = 0; k < lstNodes.length; k++) {\n gnNode = lstNodes[parseInt(k.toString(), 10)];\n gfnNode = this.getForceNode(gnNode);\n var ptLocation = {\n x: gfnNode.location.x - gnNode.actualSize.width / 2,\n y: gfnNode.location.y - gnNode.actualSize.height / 2\n };\n szMin.width = Math.min(szMin.width, ptLocation.x);\n szMin.height = Math.min(szMin.height, ptLocation.y);\n }\n for (var k = 0; k < lstNodes.length; k++) {\n gnNode = lstNodes[parseInt(k.toString(), 10)];\n gfnNode = this.getForceNode(gnNode);\n var ptLocation = gfnNode.location;\n ptLocation.x -= szMin.width - (graph.treeInfo.location ? graph.treeInfo.location.x : 0);\n ptLocation.y -= szMin.height - (graph.treeInfo.location ? graph.treeInfo.location.y : 0);\n gfnNode.location = ptLocation;\n gfnNode.applyChanges();\n }\n };\n SymmetricLayout.prototype.convertGraphNodes = function (lstNodes) {\n var lstToReturn = [];\n var keys = Object.keys(lstNodes);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var k = keys_1[_i];\n var gnNode = lstNodes[\"\" + k];\n var forceNode = new GraphForceNode(gnNode);\n gnNode.treeInfo.tag = forceNode;\n lstToReturn.push(gnNode);\n }\n return lstToReturn;\n };\n /**\n * getForceNode method\\\n *\n * @returns { GraphForceNode } getForceNode method .\\\n * @param {IGraphObject} gnNode - provide the angle value.\n * @private\n */\n SymmetricLayout.prototype.getForceNode = function (gnNode) {\n return gnNode.treeInfo.tag;\n };\n SymmetricLayout.prototype.updateNeigbour = function (vtSource, vtTarget) {\n if (vtTarget == null || vtSource == null) {\n return;\n }\n var distance = this.pointDistance(vtSource.location, vtTarget.location);\n var angle = this.lineAngle(vtSource.location, vtTarget.location);\n var normalDistance = (this.springLength * 0.9);\n if (distance < normalDistance) {\n this.calcForce(distance, normalDistance, angle, vtTarget);\n }\n };\n SymmetricLayout.prototype.lineAngle = function (pt1, pt2) {\n var radians = 0;\n var vx = pt2.x - pt1.x;\n var vy = pt2.y - pt1.y;\n if (vx === 0) {\n if (vy <= 0) {\n radians = (3.0 * Math.PI) / 2.0;\n }\n else {\n radians = Math.PI / 2.0;\n }\n }\n else if (vy === 0) {\n if (vx < 0) {\n radians = Math.PI;\n }\n else {\n radians = 0;\n }\n }\n else {\n radians = Math.atan(vy / vx);\n if (vx < 0 && vy > 0) {\n radians = Math.PI + radians;\n }\n else if (vx < 0 && vy < 0) {\n radians = Math.PI + radians;\n }\n else if (vx > 0 && vy < 0) {\n radians = 2.0 * Math.PI + radians;\n }\n }\n return radians;\n };\n SymmetricLayout.prototype.pointDistance = function (pt1, pt2) {\n var d = 0;\n var dx = pt2.x - pt1.x;\n var dy = pt2.y - pt1.y;\n var t = (dx * dx) + (dy * dy);\n d = Math.sqrt(t);\n return d;\n };\n SymmetricLayout.prototype.calcRelatesForce = function (vtSource, vtTarget, normalDistance) {\n var distance = this.pointDistance(vtSource.location, vtTarget.location);\n var angle = this.lineAngle(vtSource.location, vtTarget.location);\n if (distance < normalDistance) {\n this.calcForce(distance, normalDistance, angle, vtTarget);\n }\n };\n /**\n * @param nodeCollection\n * @param connectors\n * @param symmetricLayout\n * @param nameTable\n * @param layout\n * @param viewPort\n * @private\n */\n /**\n * updateLayout method\\\n *\n * @returns { void } updateLayout method .\\\n * @param {IGraphObject[]} nodeCollection - provide the angle value.\n * @param {IGraphObject[]} connectors - provide the connectors value.\n * @param {SymmetricLayout} symmetricLayout - provide the symmetricLayout value.\n * @param {Object} nameTable - provide the nameTable value.\n * @param {Layout} layout - provide the layout value.\n * @param {PointModel} viewPort - provide the viewPort value.\n * @private\n */\n SymmetricLayout.prototype.updateLayout = function (nodeCollection, connectors, symmetricLayout, nameTable, layout, viewPort) {\n var layoutManager = new GraphLayoutManager();\n layoutManager.updateLayout(nodeCollection, connectors, symmetricLayout, nameTable, layout, viewPort);\n };\n SymmetricLayout.prototype.calcNodesForce = function (vtSource, vtTarget) {\n var distance = this.pointDistance(vtSource.location, vtTarget.location);\n var angle = this.lineAngle(vtSource.location, vtTarget.location);\n if (distance > this.springLength || distance < this.springLength) {\n this.calcForce(distance, this.springLength, angle, vtTarget);\n }\n };\n SymmetricLayout.prototype.calcForce = function (distance, minDist, angle, vtTarget) {\n var count = vtTarget.nodes.length;\n var length = distance - minDist;\n var factor = this.springFactor / (count * count) * Math.sqrt(count);\n var fVelocity = length * factor;\n var fOffset = fVelocity;\n var offsetX = Math.cos(angle) * fOffset;\n var offsetY = Math.sin(angle) * fOffset;\n vtTarget.velocityX -= offsetX;\n vtTarget.velocityY -= offsetY;\n };\n return SymmetricLayout;\n}());\nvar GraphLayoutManager = /** @__PURE__ @class */ (function () {\n function GraphLayoutManager() {\n this.visitedStack = [];\n this.cycleEdgesCollection = [];\n this.graphObjects = [];\n this.passedNodes = [];\n }\n /**\n * @param nodeCollection\n * @param connectors\n * @param symmetricLayout\n * @param nameTable\n * @param layout\n * @param viewPort\n * @private\n */\n /**\n * updateLayout method\\\n *\n * @returns { boolean } updateLayout method .\\\n * @param {IGraphObject[]} nodeCollection - provide the nodeCollection value.\n * @param {IGraphObject[]} connectors - provide the nodeCollection value.\n * @param {SymmetricLayout} symmetricLayout - provide the nodeCollection value.\n * @param {Object} nameTable - provide the nodeCollection value.\n * @param {Layout} layout - provide the nodeCollection value.\n * @param {PointModel} viewPort - provide the nodeCollection value.\n * @private\n */\n GraphLayoutManager.prototype.updateLayout = function (nodeCollection, connectors, symmetricLayout, nameTable, layout, viewPort) {\n this.nameTable = nameTable;\n this.nodes = nodeCollection;\n this.connectors = connectors;\n var selectionList = nodeCollection;\n if (selectionList.length > 0) {\n this.mhelperSelectedNode = cloneObject(selectionList[0]);\n }\n for (var _i = 0, nodeCollection_1 = nodeCollection; _i < nodeCollection_1.length; _i++) {\n var node = nodeCollection_1[_i];\n var nodeGraphObject = node;\n nodeGraphObject.treeInfo = {};\n nodeGraphObject.treeInfo.graphType = 'Node';\n this.graphObjects.push(nodeGraphObject);\n }\n for (var _a = 0, connectors_1 = connectors; _a < connectors_1.length; _a++) {\n var connector = connectors_1[_a];\n var connectorGraphObject = connector;\n connectorGraphObject.treeInfo = {};\n connectorGraphObject.treeInfo.graphType = 'Connector';\n this.graphObjects.push(connectorGraphObject);\n }\n this.updateLayout1(this.graphObjects, symmetricLayout);\n var modelBounds = this.getModelBounds(selectionList);\n for (var i = 0; i < selectionList.length; i++) {\n var node = selectionList[parseInt(i.toString(), 10)];\n var trnsX = (viewPort.x - modelBounds.width) / 2;\n var margin = layout.margin;\n var dx = (node.treeInfo.tag.location.x - (node.offsetX - (node.actualSize.width / 2)) -\n modelBounds.x + trnsX + margin.left);\n var dy = (node.treeInfo.tag.location.y - (node.offsetY - (node.actualSize.height / 2)) - modelBounds.y + margin.top);\n node.offsetX += dx;\n node.offsetY += dy;\n delete node.treeInfo;\n }\n return true;\n };\n /**\n * getModelBounds method\\\n *\n * @returns { Rect } getModelBounds method .\\\n * @param {IGraphObject[]} lNodes - provide the angle value.\n * @private\n */\n GraphLayoutManager.prototype.getModelBounds = function (lNodes) {\n lNodes = lNodes.slice();\n var rect = null;\n var rect1 = null;\n var node;\n for (var i = 0; i < lNodes.length; i++) {\n node = lNodes[parseInt(i.toString(), 10)];\n var bounds = getGraphBounds(node);\n rect = new Rect(node.treeInfo.tag ? node.treeInfo.tag.location.x : bounds.x, node.treeInfo.tag ? node.treeInfo.tag.location.y : bounds.y, node.actualSize.width, node.actualSize.height);\n if (rect1) {\n rect1 = rect1.uniteRect(rect);\n }\n else {\n rect1 = rect;\n }\n }\n return rect1;\n };\n GraphLayoutManager.prototype.updateLayout1 = function (nodesToLayout, symmetricLayout) {\n this.detectCyclesInGraph(nodesToLayout);\n var nodesCount = nodesToLayout.length;\n if (nodesCount > 0) {\n var cycleConnColln = [];\n var nodes = [];\n var nodeSymbols = [];\n for (var s = 0; s < nodesToLayout.length; s++) {\n var nd = nodesToLayout[parseInt(s.toString(), 10)];\n if (nd.treeInfo.isCycleEdge === undefined) {\n nd.treeInfo.isCycleEdge = false;\n }\n if (nd.treeInfo.graphType === 'Connector' && !nd.treeInfo.isCycleEdge) {\n nodes.push(nd);\n }\n else if (nd.treeInfo.graphType === 'Connector') {\n cycleConnColln.push(nd);\n }\n else {\n nodeSymbols.push(nd);\n }\n }\n nodes = nodes.concat(nodeSymbols);\n nodes = cycleConnColln.concat(nodes);\n while (nodesCount > this.dictionaryLength(this.passedNodes)) {\n this.getNodesToPosition(nodes);\n if (this.selectedNode == null) {\n continue;\n }\n symmetricLayout.doLayout(this);\n this.selectedNode = null;\n this.visitedStack = [];\n }\n this.passedNodes = null;\n this.selectedNode = null;\n }\n return false;\n };\n GraphLayoutManager.prototype.getNodesToPosition = function (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n var node = nodes[parseInt(i.toString(), 10)];\n this.selectNodes(node);\n break;\n }\n };\n GraphLayoutManager.prototype.selectNodes = function (node) {\n var nodeGraph = node;\n if (node.treeInfo.graphType === 'Connector') {\n this.exploreGraphEdge(node);\n }\n else if (nodeGraph != null) {\n if (this.addNode(node, 'passed')) {\n this.addNode(node, 'selected');\n if (this.isConnectedToAnotherNode(nodeGraph)) {\n this.selectedNode = { treeInfo: {} };\n this.selectedNode.treeInfo.LeftMargin = 10;\n this.selectedNode.treeInfo.TopMargin = 10;\n this.selectConnectedNodes(nodeGraph);\n }\n }\n }\n };\n GraphLayoutManager.prototype.selectConnectedNodes = function (nodeGraph) {\n var graph = this.selectedNode;\n if (!graph.treeInfo.GraphNodes) {\n graph.treeInfo.GraphNodes = {};\n }\n var node = nodeGraph;\n this.addNode(node, 'passed');\n var nodeName = node.id;\n if (!this.dictionaryContains(graph.treeInfo.GraphNodes, node)) {\n var gnNode = this.addGraphNode(node);\n this.getConnectedRelatives(gnNode);\n this.exploreRelatives(nodeGraph);\n }\n else {\n var graphNode = graph.treeInfo.GraphNodes[\"\" + nodeName];\n if (graphNode.treeInfo.Added) {\n graphNode.treeInfo.Added = false;\n this.getConnectedRelatives(graphNode);\n this.exploreRelatives(nodeGraph);\n }\n }\n };\n GraphLayoutManager.prototype.exploreRelatives = function (nodeGraph) {\n this.exploreRelatives1(nodeGraph, 'Parents');\n this.exploreRelatives1(nodeGraph, 'Children');\n };\n GraphLayoutManager.prototype.exploreRelatives1 = function (nodeGraph, relativesToExplore) {\n var edges = [];\n if (relativesToExplore === 'Parents') {\n edges = nodeGraph.inEdges;\n }\n else {\n edges = nodeGraph.outEdges;\n }\n for (var i = 0; i < edges.length; i++) {\n var edge = this.nameTable[edges[parseInt(i.toString(), 10)]];\n if (this.addNode(edge, 'passed')) {\n var fromNode = this.nameTable[edge.sourceID];\n var toNode = this.nameTable[edge.targetID];\n if (relativesToExplore === 'Parents' && fromNode != null &&\n collectionContains(fromNode.id, this.nodes)) {\n this.selectConnectedNodes(this.nameTable[edge.sourceID]);\n }\n else if (relativesToExplore === 'Children' && toNode != null &&\n collectionContains(toNode.id, this.nodes)) {\n this.selectConnectedNodes(this.nameTable[edge.targetID]);\n }\n }\n }\n };\n GraphLayoutManager.prototype.getConnectedRelatives = function (graphNode) {\n this.getConnectedParents(graphNode);\n this.getConnectedChildren(graphNode);\n };\n GraphLayoutManager.prototype.dictionaryContains = function (obj, keyObj) {\n var keys = Object.keys(obj);\n for (var i = 0; i < keys.length; i++) {\n if (keys[parseInt(i.toString(), 10)] === keyObj.id) {\n return true;\n }\n }\n return false;\n };\n GraphLayoutManager.prototype.dictionaryLength = function (obj) {\n var keys = Object.keys(obj);\n return keys.length;\n };\n GraphLayoutManager.prototype.getConnectedChildren = function (graphNode) {\n var graph = this.selectedNode;\n var nodeGraph = graphNode;\n for (var s = 0; s < nodeGraph.outEdges.length; s++) {\n var edge = this.nameTable[nodeGraph.outEdges[parseInt(s.toString(), 10)]];\n if (!edge.treeInfo.isCycleEdge) {\n var node = this.nameTable[edge.targetID];\n if (collectionContains(node.id, this.nodes) && node != null && node.visible) {\n var gnNodeChildren = void 0;\n if (!this.dictionaryContains(graph.treeInfo.GraphNodes, node)) {\n gnNodeChildren = this.addGraphNode(node);\n gnNodeChildren.treeInfo.Added = true;\n }\n else {\n gnNodeChildren = graph.treeInfo.GraphNodes[node.id];\n }\n if (!graphNode.treeInfo.children) {\n graphNode.treeInfo.children = [];\n }\n if (!gnNodeChildren.treeInfo.parents) {\n gnNodeChildren.treeInfo.parents = [];\n }\n this.setNode(gnNodeChildren.treeInfo.parents, graphNode);\n if (this.findNode(graphNode.treeInfo.children, gnNodeChildren.id) < 0) {\n graphNode.treeInfo.children.push(gnNodeChildren);\n }\n }\n }\n }\n };\n GraphLayoutManager.prototype.getConnectedParents = function (graphNode) {\n var graph = this.selectedNode;\n var nodeGraph = graphNode;\n for (var s = 0; s < nodeGraph.inEdges.length; s++) {\n var edge = this.nameTable[nodeGraph.inEdges[parseInt(s.toString(), 10)]];\n if (!edge.treeInfo.isCycleEdge) {\n var node = this.nameTable[edge.sourceID];\n if (collectionContains(node.id, this.nodes) && node != null && node.visible) {\n var gnNode = void 0;\n if (!this.dictionaryContains(graph.treeInfo.GraphNodes, node)) {\n gnNode = this.addGraphNode(node);\n gnNode.treeInfo.Added = true;\n }\n else {\n gnNode = graph.treeInfo.GraphNodes[node.id];\n }\n if (!graphNode.treeInfo.parents) {\n graphNode.treeInfo.parents = [];\n }\n if (!gnNode.treeInfo.children) {\n gnNode.treeInfo.children = [];\n }\n this.setNode(gnNode.treeInfo.children, graphNode);\n if (this.findNode(graphNode.treeInfo.parents, gnNode.id) < 0) {\n graphNode.treeInfo.parents.push(gnNode);\n }\n }\n }\n }\n };\n GraphLayoutManager.prototype.setNode = function (list, node) {\n var nIndex = this.findNode(list, node.id);\n if (nIndex >= 0 && nIndex < list.length) {\n list[parseInt(nIndex.toString(), 10)] = node;\n }\n else {\n list.push(node);\n }\n };\n GraphLayoutManager.prototype.findNode = function (list, fullName) {\n var nIndex = -1;\n if (list != null && fullName !== '') {\n for (var i = 0, nLength = list.length; i < nLength; i++) {\n var gnNode = list[parseInt(i.toString(), 10)];\n if (gnNode != null && gnNode.id === fullName) {\n nIndex = i;\n break;\n }\n }\n }\n return nIndex;\n };\n GraphLayoutManager.prototype.addGraphNode = function (node) {\n var graph = this.selectedNode;\n var gnNode = node;\n graph.treeInfo.GraphNodes[gnNode.id] = gnNode;\n var nodeHelper = this.mhelperSelectedNode;\n if (nodeHelper != null && node.id === nodeHelper.id) {\n this.mhelperSelectedNode = gnNode;\n }\n return gnNode;\n };\n GraphLayoutManager.prototype.isConnectedToAnotherNode = function (gnNode) {\n var bFoundConnectedNode = false;\n var edges = (gnNode.inEdges).concat(gnNode.outEdges);\n if (edges.length > 0) {\n if ((gnNode.inEdges != null) && (gnNode.inEdges.length > 0)) {\n bFoundConnectedNode = this.searchEdgeCollection(gnNode.inEdges, 'FromNode');\n }\n if ((!bFoundConnectedNode) && (gnNode.outEdges != null) && (gnNode.outEdges.length > 0)) {\n bFoundConnectedNode = this.searchEdgeCollection(gnNode.outEdges, 'ToNode');\n }\n }\n return bFoundConnectedNode;\n };\n GraphLayoutManager.prototype.searchEdgeCollection = function (edgesToSearchThrough, connectionDirection) {\n var bFoundConnectedNode = false;\n for (var i = 0; i < edgesToSearchThrough.length - 1; i++) {\n var edge = this.nameTable[edgesToSearchThrough[parseInt(i.toString(), 10)]];\n if (!this.addNode(edge, 'passed')) {\n continue;\n }\n if (!edge.treeInfo.isCycleEdge && ((connectionDirection === 'FromNode' && this.nameTable[edge.sourceID] != null)\n || (connectionDirection === 'ToNode' && this.nameTable[edge.targetID] != null))) {\n bFoundConnectedNode = true;\n break;\n }\n }\n return bFoundConnectedNode;\n };\n GraphLayoutManager.prototype.exploreGraphEdge = function (node) {\n var nodeLink = node;\n if (nodeLink != null && !nodeLink.treeInfo.isCycleEdge && this.addNode(node, 'passed')) {\n this.addNode(node, 'selected');\n var fromNode = this.nameTable[nodeLink.sourceID];\n var toNode = this.nameTable[nodeLink.targetID];\n if (fromNode != null) {\n this.selectNodes(fromNode);\n }\n }\n };\n GraphLayoutManager.prototype.addNode = function (nodeToAdd, collectionToAdd) {\n var bResult = true;\n var node = nodeToAdd;\n if (collectionToAdd === 'passed' || !node.visible) {\n if (!this.dictionaryContains(this.passedNodes, node)) {\n this.passedNodes[node.id] = node;\n }\n }\n if (!node.visible) {\n return false;\n }\n return bResult;\n };\n GraphLayoutManager.prototype.detectCyclesInGraph = function (nodes) {\n var vertex = [];\n var currentStack = [];\n for (var k = 0; k < nodes.length; k++) {\n if (!(nodes[parseInt(k.toString(), 10)].treeInfo.graphType === 'Connector')) {\n vertex.push(nodes[parseInt(k.toString(), 10)]);\n }\n }\n if (vertex.length > 0) {\n currentStack.push(vertex[0]);\n this.visitedStack.push(vertex[0]);\n while (currentStack.length > 0) {\n var top_1 = currentStack[currentStack.length - 1];\n var childNodes = this.getUnVisitedChildNodes(top_1);\n if (childNodes.length > 0) {\n var child = childNodes[0];\n var currentEdge = childNodes[childNodes.length - 1];\n if (collectionContains(child.id, this.visitedStack)) {\n currentEdge.treeInfo.isCycleEdge = true;\n this.cycleEdgesCollection.push(currentEdge);\n }\n else {\n currentStack.push(child);\n this.visitedStack.splice(0, 0, child);\n }\n }\n else {\n currentStack.pop();\n }\n }\n }\n };\n GraphLayoutManager.prototype.getUnVisitedChildNodes = function (top) {\n var childNodes = [];\n if (top.outEdges.length > 0) {\n for (var i = 0; i < top.outEdges.length; i++) {\n var con = this.nameTable[top.outEdges[parseInt(i.toString(), 10)]];\n if (!collectionContains(con.id, this.visitedStack)) {\n var toNode = this.nameTable[con.targetID];\n if (toNode != null) {\n childNodes.push(toNode);\n }\n childNodes.push(con);\n this.visitedStack.splice(0, 0, con);\n return childNodes;\n }\n }\n return childNodes;\n }\n return childNodes;\n };\n return GraphLayoutManager;\n}());\n/**\n * getGraphBounds method\\\n *\n * @returns { void } getGraphBounds method .\\\n * @param {IGraphObject} node - provide the angle value.\n * @private\n */\nfunction getGraphBounds(node) {\n var x = node.offsetX - node.actualSize.width * node.pivot.x;\n var y = node.offsetY - node.actualSize.height * node.pivot.y;\n return new Rect(x, y, node.actualSize.width, node.actualSize.height);\n}\n/**\n * @param id\n * @param coll\n */\n/**\n * collectionContains method\\\n *\n * @returns { boolean } collectionContains method .\\\n * @param {string} id - provide the id value.\n * @param {IGraphObject[]} coll - provide the id value.\n * @private\n */\nfunction collectionContains(id, coll) {\n for (var i = 0; i < coll.length; i++) {\n if (coll[parseInt(i.toString(), 10)].id === id) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Connects diagram objects with layout algorithm\n */\nvar ComplexHierarchicalTree = /** @__PURE__ @class */ (function () {\n /**\n * Constructor for the hierarchical tree layout module\n *\n * @private\n */\n function ComplexHierarchicalTree() {\n //constructs the layout module\n }\n /**\n * To destroy the hierarchical tree module\n *\n * @returns {void}\n * @private\n */\n ComplexHierarchicalTree.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Core method to return the component name.\n * @private\n */\n ComplexHierarchicalTree.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n *\n */\n return 'ComplexHierarchicalTree';\n };\n /**\n * doLayout method\\\n *\n * @returns { void } doLayout method .\\\n * @param {INode[]} nodes - provide the nodes value.\n * @param {{}} nameTable - provide the nameTable value.\n * @param {Layout} layout - provide the layout value.\n * @param {PointModel} viewPort - provide the viewPort value.\n * @param {Diagram} diagram - provide the diagram model.\n * @private\n */\n ComplexHierarchicalTree.prototype.doLayout = function (nodes, nameTable, layout, viewPort, diagram) {\n new HierarchicalLayoutUtil().doLayout(nodes, nameTable, layout, viewPort, diagram);\n };\n ComplexHierarchicalTree.prototype.getLayoutNodesCollection = function (nodes) {\n var nodesCollection = [];\n var node;\n var parentId = 'parentId';\n var processId = 'processId';\n for (var i = 0; i < nodes.length; i++) {\n node = nodes[parseInt(i.toString(), 10)];\n //885697:Position of root node without the child node in complex hierarchical layout is not proper\n if (((node.inEdges.length + node.outEdges.length > 0) || (node.offsetX === 0 && node.offsetY === 0)) &&\n !node['' + parentId] && !node['' + processId]) {\n nodesCollection.push(node);\n }\n }\n return nodesCollection;\n };\n return ComplexHierarchicalTree;\n}());\n/**\n * Utility that arranges the nodes in hierarchical structure\n */\nvar HierarchicalLayoutUtil = /** @__PURE__ @class */ (function () {\n function HierarchicalLayoutUtil() {\n this.nameTable = {};\n this.crossReduction = new CrossReduction();\n /**\n * The preferred vertical offset between edges exiting a vertex Default is 2.\n */\n this.previousEdgeOffset = 6;\n /**\n * The preferred horizontal distance between edges exiting a vertex Default is 5.\n */\n this.previousEdgeDistance = 5;\n /**\n * Holds the collection vertices, that are equivalent to nodes to be arranged\n */\n this.jettyPositions = {};\n /**\n * Internal cache of bottom-most value of Y for each rank\n */\n this.rankBottomY = null;\n /**\n * Internal cache of bottom-most value of X for each rank\n */\n this.limitX = null;\n /**\n * Internal cache of top-most values of Y for each rank\n */\n this.rankTopY = null;\n /**\n * The minimum parallelEdgeSpacing value is 12.\n */\n this.parallelEdgeSpacing = 10;\n /**\n * The minimum distance for an edge jetty from a vertex Default is 12.\n */\n this.minEdgeJetty = 12;\n }\n //Defines a vertex that is equivalent to a node object\n HierarchicalLayoutUtil.prototype.createVertex = function (node, value, x, y, width, height) {\n var geometry = { x: x, y: y, width: width, height: height };\n var vertex = {\n value: value, geometry: geometry, name: value, vertex: true,\n inEdges: node.inEdges.slice(), outEdges: node.outEdges.slice()\n };\n return vertex;\n };\n /**\n * Initializes the edges collection of the vertices\\\n *\n * @returns { IConnector[] } Initializes the edges collection of the vertices\\\n * @param {Vertex} node - provide the node value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.getEdges = function (node) {\n var edges = [];\n if (node) {\n for (var i = 0; node.inEdges.length > 0 && i < node.inEdges.length; i++) {\n edges.push(this.nameTable[node.inEdges[parseInt(i.toString(), 10)]]);\n }\n for (var i = 0; node.outEdges.length > 0 && i < node.outEdges.length; i++) {\n edges.push(this.nameTable[node.outEdges[parseInt(i.toString(), 10)]]);\n }\n }\n return edges;\n };\n //Finds the root nodes of the layout\n HierarchicalLayoutUtil.prototype.findRoots = function (vertices) {\n var roots = [];\n var best = null;\n var maxDiff = -100000;\n for (var _i = 0, _a = Object.keys(vertices); _i < _a.length; _i++) {\n var i = _a[_i];\n var cell = vertices[\"\" + i];\n var conns = this.getEdges(cell);\n var outEdges = 0;\n var inEdges = 0;\n for (var k = 0; k < conns.length; k++) {\n var src = this.getVisibleTerminal(conns[parseInt(k.toString(), 10)], true);\n if (src.name === cell.name) {\n outEdges++;\n }\n else {\n inEdges++;\n }\n }\n if (inEdges === 0 && outEdges > 0) {\n roots.push(cell);\n }\n var diff = outEdges - inEdges;\n if (diff > maxDiff) {\n maxDiff = diff;\n best = cell;\n }\n }\n if (roots.length === 0 && best != null) {\n roots.push(best);\n }\n return roots;\n };\n /**\n * Returns the source/target vertex of the given connector \\\n *\n * @returns { Vertex } Returns the source/target vertex of the given connector \\\n * @param {IConnector} edge - provide the node value.\n * @param {boolean} source - provide the node value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.getVisibleTerminal = function (edge, source) {\n var terminalCache = this.nameTable[edge.targetID];\n if (source) {\n terminalCache = this.nameTable[edge.sourceID];\n }\n for (var i = 0; i < this.vertices.length; i++) {\n if (this.vertices[parseInt(i.toString(), 10)].name === terminalCache.id) {\n return this.vertices[parseInt(i.toString(), 10)];\n }\n }\n return null;\n };\n /**\n * Traverses each sub tree, ensures there is no cycle in traversing \\\n *\n * @returns { {} } Traverses each sub tree, ensures there is no cycle in traversing .\\\n * @param {Vertex} vertex - provide the vertex value.\n * @param {boolean} directed - provide the directed value.\n * @param {IConnector} edge - provide the edge value.\n * @param {{}} currentComp - provide the currentComp value.\n * @param {{}[]} hierarchyVertices - provide the hierarchyVertices value.\n * @param {{}} filledVertices - provide the filledVertices value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.traverse = function (vertex, directed, edge, currentComp, hierarchyVertices, filledVertices) {\n if (vertex != null) {\n var vertexID = vertex.name;\n if ((filledVertices == null ? true : filledVertices[\"\" + vertexID] != null)) {\n if (currentComp[\"\" + vertexID] == null) {\n currentComp[\"\" + vertexID] = vertex;\n }\n if (filledVertices != null) {\n delete filledVertices[\"\" + vertexID];\n }\n var edges = this.getEdges(vertex);\n var edgeIsSource = [];\n for (var i = 0; i < edges.length; i++) {\n edgeIsSource[parseInt(i.toString(), 10)] = this.getVisibleTerminal(edges[parseInt(i.toString(), 10)], true) === vertex;\n }\n for (var i = 0; i < edges.length; i++) {\n if (!directed || edgeIsSource[parseInt(i.toString(), 10)]) {\n var next = this.getVisibleTerminal(edges[parseInt(i.toString(), 10)], !edgeIsSource[parseInt(i.toString(), 10)]);\n var netCount = 1;\n for (var j = 0; j < edges.length; j++) {\n if (j === i) {\n continue;\n }\n else {\n var isSource2 = edgeIsSource[parseInt(j.toString(), 10)];\n var otherTerm = this.getVisibleTerminal(edges[parseInt(j.toString(), 10)], !isSource2);\n if (otherTerm === next) {\n if (isSource2) {\n netCount++;\n }\n else {\n netCount--;\n }\n }\n }\n }\n if (netCount >= 0) {\n currentComp = this.traverse(next, directed, edges[parseInt(i.toString(), 10)], currentComp, hierarchyVertices, filledVertices);\n }\n }\n }\n }\n else {\n if (currentComp[\"\" + vertexID] == null) {\n // We've seen this vertex before, but not in the current component This component and the one it's in need to be merged\n for (var i = 0; i < hierarchyVertices.length; i++) {\n var comp = hierarchyVertices[parseInt(i.toString(), 10)];\n if (comp[\"\" + vertexID] != null) {\n for (var _i = 0, _a = Object.keys(comp); _i < _a.length; _i++) {\n var key = _a[_i];\n currentComp[\"\" + key] = comp[\"\" + key];\n }\n // Remove the current component from the hierarchy set\n hierarchyVertices.splice(i, 1);\n return currentComp;\n }\n }\n }\n }\n }\n return currentComp;\n };\n //Returns the bounds of the given vertices\n HierarchicalLayoutUtil.prototype.getModelBounds = function (nodes) {\n nodes = nodes.slice();\n var rect = null;\n var rect1 = null;\n for (var i = 0; i < nodes.length; i++) {\n rect = nodes[parseInt(i.toString(), 10)].geometry;\n if (rect1) {\n var right = Math.max(rect1.x + rect1.width, rect.x + rect.width);\n var bottom = Math.max(rect1.y + rect1.height, rect.y + rect.height);\n rect1.x = Math.min(rect1.x, rect.x);\n rect1.y = Math.min(rect1.y, rect.y);\n rect1.width = right - rect1.x;\n rect1.height = bottom - rect1.y;\n }\n else {\n rect1 = { x: rect.x, y: rect.y, width: rect.width, height: rect.height };\n }\n }\n return rect1;\n };\n /* tslint:disable */\n /**\n * Initializes the layouting process \\\n *\n * @returns { Vertex } Initializes the layouting process \\\n * @param {INode[]} nodes - provide the node value.\n * @param {{}} nameTable - provide the nameTable value.\n * @param {Layout} layoutProp - provide the layoutProp value.\n * @param {PointModel} viewPort - provide the viewPort value.\n * @param {Diagram} diagram - provide the diagram model.\n * @private\n */\n HierarchicalLayoutUtil.prototype.doLayout = function (nodes, nameTable, layoutProp, viewPort, diagram) {\n this.nameTable = nameTable;\n var canEnableRouting = layoutProp.enableRouting;\n var layout = {\n horizontalSpacing: layoutProp.horizontalSpacing, verticalSpacing: layoutProp.verticalSpacing,\n orientation: layoutProp.orientation, marginX: layoutProp.margin.left, marginY: layoutProp.margin.top,\n enableLayoutRouting: canEnableRouting\n };\n var model;\n var matrixModel = new MatrixModel();\n matrixModel.edgeMapper = [];\n matrixModel.diagram = diagram;\n var nodeWithMultiEdges = [];\n this.vertices = [];\n var filledVertexSet = {};\n for (var i = 0; i < nodes.length; i++) {\n var node = this.createVertex(nodes[parseInt(i.toString(), 10)], nodes[parseInt(i.toString(), 10)].id, 0, 0, nodes[parseInt(i.toString(), 10)].actualSize.width, nodes[parseInt(i.toString(), 10)].actualSize.height);\n this.vertices.push(node);\n if (nodes[parseInt(i.toString(), 10)].inEdges.length > 0\n || nodes[parseInt(i.toString(), 10)].outEdges.length > 0) {\n nodeWithMultiEdges.push(nodes[parseInt(i.toString(), 10)]);\n }\n filledVertexSet[node.name] = node;\n if (matrixModel) {\n var outEdges = nodes[parseInt(i.toString(), 10)].outEdges.slice();\n for (var j = 0; j < outEdges.length; j++) {\n var outEdge = nameTable[outEdges[parseInt(j.toString(), 10)]];\n matrixModel.setEdgeMapper({ key: outEdge, value: [] });\n }\n }\n }\n var hierarchyVertices = [];\n //let candidateRoots: Vertex[];\n var candidateRoots = this.findRoots(filledVertexSet);\n for (var i = 0; i < candidateRoots.length; i++) {\n var vertexSet = {};\n hierarchyVertices.push(vertexSet);\n this.traverse(candidateRoots[parseInt(i.toString(), 10)], true, null, vertexSet, hierarchyVertices, filledVertexSet);\n }\n var limit = { marginX: 0, marginY: 0 };\n var tmp = [];\n var checkLinear = false;\n var matrixModelObject;\n for (var i = 0; i < hierarchyVertices.length; i++) {\n var vertexSet = hierarchyVertices[parseInt(i.toString(), 10)];\n // eslint-disable-next-line\n for (var _i = 0, _a = Object.keys(vertexSet); _i < _a.length; _i++) {\n var key = _a[_i];\n tmp.push(vertexSet[\"\" + key]);\n }\n if ((layoutProp.arrangement === 'Linear' && i === hierarchyVertices.length - 1) || canEnableRouting) {\n checkLinear = true;\n }\n model = new MultiParentModel(this, tmp, candidateRoots, layout);\n this.cycleStage(model);\n this.layeringStage(model);\n //897503: Child Nodes position in ComplexHierarchicalTree updated wrongly results in connector overlap\n if ((matrixModel && layoutProp.connectionPointOrigin === 'DifferentPoint') || checkLinear) {\n matrixModelObject = { model: model, matrix: [], rowOffset: [], roots: [] };\n matrixModel.arrangeElements(matrixModelObject, layoutProp);\n layoutProp.ranks = matrixModelObject.model.ranks;\n }\n else {\n if (layoutProp.arrangement === 'Nonlinear') {\n this.crossingStage(model);\n limit = this.placementStage(model, limit.marginX, limit.marginY);\n tmp = [];\n }\n }\n }\n var modelBounds = this.getModelBounds(this.vertices);\n this.updateMargin(layoutProp, layout, modelBounds, viewPort);\n for (var i = 0; i < this.vertices.length; i++) {\n var clnode = this.vertices[parseInt(i.toString(), 10)];\n if (clnode) { //Check what is node.source/node.target - && !clnode.source && !clnode.target) {\n var dnode = this.nameTable[clnode.name];\n dnode.offsetX = 0;\n dnode.offsetY = 0;\n //initialize layout\n var dx = (clnode.geometry.x - (dnode.offsetX - (dnode.actualSize.width / 2))) + layout.marginX;\n var dy = (clnode.geometry.y - (dnode.offsetY - (dnode.actualSize.height / 2))) + layout.marginY;\n var x = dx;\n var y = dy;\n if (layout.orientation === 'BottomToTop') {\n if (canEnableRouting) {\n clnode.geometry.y = modelBounds.height - dy - dnode.actualSize.height / 2;\n }\n y = modelBounds.height - dy;\n }\n else if (layout.orientation === 'RightToLeft') {\n x = modelBounds.width - dx;\n }\n dnode.offsetX += x - dnode.offsetX;\n dnode.offsetY += y - dnode.offsetY;\n }\n }\n if (!checkLinear) {\n for (var i = 0; i < this.vertices.length; i++) {\n this.isNodeOverLap(this.nameTable[this.vertices[parseInt(i.toString(), 10)].name], layoutProp);\n }\n }\n if ((matrixModel && layoutProp.connectionPointOrigin === 'DifferentPoint') || canEnableRouting) {\n matrixModel.updateLayout(viewPort, modelBounds, layoutProp, layout, nodeWithMultiEdges, nameTable);\n }\n if (canEnableRouting) {\n var vertices = {};\n var matrixrow1 = void 0;\n for (var p = 0; p < matrixModelObject.matrix.length; p++) {\n matrixrow1 = matrixModelObject.matrix[parseInt(p.toString(), 10)].value;\n for (var q = 0; q < matrixrow1.length; q++) {\n var matrixCell = matrixrow1[parseInt(q.toString(), 10)];\n for (var r = 0; r < matrixCell.cells.length; r++) {\n var cell = matrixCell.cells[parseInt(r.toString(), 10)];\n var type = this.getType(cell.type);\n if (type === 'internalVertex') {\n var internalVertex = cell;\n vertices[internalVertex.id] = internalVertex;\n }\n }\n }\n }\n this.updateRankValuess(model);\n for (var i = 0, a = Object.keys(vertices); i < a.length; i++) {\n var key = a[parseInt(i.toString(), 10)];\n this.setVertexLocationValue(vertices[\"\" + key], layoutProp.orientation, modelBounds);\n }\n this.localEdgeProcessing(model, vertices);\n this.assignRankOffset(model);\n this.updateEdgeSetXYValue(model);\n var edges = this.getValues(model.edgeMapper);\n for (var i = 0; i < edges.length; i++) {\n if ((edges[parseInt(i.toString(), 10)]).x.length > 0) {\n for (var j = 0; j < (edges[parseInt(i.toString(), 10)]).x.length; j++) {\n if (layoutProp.orientation !== 'RightToLeft' && layoutProp.orientation !== 'LeftToRight') {\n (edges[parseInt(i.toString(), 10)]).x[parseInt(j.toString(), 10)]\n = (edges[parseInt(i.toString(), 10)]).x[parseInt(j.toString(), 10)] + layout.marginX;\n }\n else if (layoutProp.orientation === 'LeftToRight') {\n (edges[parseInt(i.toString(), 10)]).x[parseInt(j.toString(), 10)]\n = (edges[parseInt(i.toString(), 10)]).x[parseInt(j.toString(), 10)] + layoutProp.verticalSpacing / 2;\n }\n else {\n (edges[parseInt(i.toString(), 10)]).x[parseInt(j.toString(), 10)]\n = (edges[parseInt(i.toString(), 10)]).x[parseInt(j.toString(), 10)] + layoutProp.verticalSpacing / 2;\n }\n }\n }\n this.setEdgePosition(edges[parseInt(i.toString(), 10)], model, layout);\n }\n for (var p = 0; p < this.vertices.length; p++) {\n var clnode = this.vertices[parseInt(p.toString(), 10)];\n if (clnode.outEdges.length > 1) {\n this.updateMultiOutEdgesPoints(clnode);\n }\n }\n }\n };\n HierarchicalLayoutUtil.prototype.setEdgeXY = function (ranks, node, spacing, layer) {\n if (ranks && node.source.id) {\n var targetValue = void 0;\n var sourceValue = void 0;\n for (var i = 0; i < ranks.length; i++) {\n for (var k = 0; k < ranks[parseInt(i.toString(), 10)].length; k++) {\n if (ranks[parseInt(i.toString(), 10)][parseInt(k.toString(), 10)].id === node.target.id\n || ranks[parseInt(i.toString(), 10)][parseInt(k.toString(), 10)].id === node.source.id) {\n if (ranks[parseInt(i.toString(), 10)][parseInt(k.toString(), 10)].id === node.target.id\n && targetValue === undefined) {\n targetValue = i;\n }\n if (ranks[parseInt(i.toString(), 10)][parseInt(k.toString(), 10)].id === node.source.id\n && sourceValue === undefined) {\n sourceValue = i;\n }\n }\n }\n }\n var rankOffsetValue = void 0;\n for (var m = targetValue; m <= sourceValue; m++) {\n if (rankOffsetValue === undefined) {\n rankOffsetValue = this[m + '_RankOffset'];\n }\n if (rankOffsetValue !== undefined && rankOffsetValue < this[m + '_RankOffset']) {\n rankOffsetValue = this[m + '_RankOffset'];\n }\n }\n if (this['edges'] === undefined) {\n this['edges'] = {};\n }\n this['edges'][(node).ids[0]] = { x: node.x, y: 0 };\n var value = this.resetOffsetXValue(rankOffsetValue, spacing / 10);\n node.x[layer - node.minRank - 1] = value;\n for (var k = 0; k < (node).edges.length; k++) {\n (node).edges[parseInt(k.toString(), 10)]['levelSkip'] = true;\n }\n }\n };\n HierarchicalLayoutUtil.prototype.resetOffsetXValue = function (value, spacing) {\n for (var i = 0, a = Object.keys(this['edges']); i < a.length; i++) {\n var key = a[parseInt(i.toString(), 10)];\n var length_1 = this['edges'][\"\" + key].x;\n for (var j = 0; j < length_1.length; j++) {\n var offsetValue = void 0;\n if (this['edges'][\"\" + key].x[parseInt(j.toString(), 10)] === value) {\n offsetValue = value + spacing;\n offsetValue = this.resetOffsetXValue(offsetValue, spacing);\n return offsetValue;\n }\n }\n }\n return value;\n };\n HierarchicalLayoutUtil.prototype.setEdgePosition = function (cell, model, layout) {\n // For parallel edges we need to seperate out the points a\n // little\n var offsetX = 0;\n // Only set the edge control points once\n if (cell.temp[0] !== 101207) {\n if (cell.maxRank === undefined) {\n cell.maxRank = -1;\n }\n if (cell.minRank === undefined) {\n cell.minRank = -1;\n }\n var maxRank = cell.maxRank;\n var minRank = cell.minRank;\n if (maxRank === minRank) {\n maxRank = cell.source.maxRank;\n minRank = cell.target.minRank;\n }\n var parallelEdgeCount = 0;\n var jettys = this.jettyPositions[cell.ids[0]];\n if (cell.isReversed === undefined) {\n cell.isReversed = false;\n }\n else {\n cell.isReversed = true;\n }\n var source = cell.isReversed ? cell.target.cell : cell.source.cell;\n var layoutReversed = false;\n if (model.layout.orientation === 'TopToBottom' || model.layout.orientation === 'LeftToRight') {\n if (model.layout.orientation === 'TopToBottom') {\n layoutReversed = false;\n }\n if (model.layout.orientation === 'LeftToRight') {\n if (!cell.isReversed) {\n layoutReversed = false;\n }\n else {\n layoutReversed = false;\n }\n }\n }\n else {\n if (!cell.isReversed) {\n layoutReversed = true;\n }\n }\n for (var i = 0; i < cell.edges.length; i++) {\n var realEdge = cell.edges[parseInt(i.toString(), 10)];\n var realSource = this.getVisibleTerminal(realEdge, true);\n //List oldPoints = graph.getPoints(realEdge);\n var newPoints = [];\n // Single length reversed edges end up with the jettys in the wrong\n // places. Since single length edges only have jettys, not segment\n // control points, we just say the edge isn't reversed in this section\n var reversed = cell.isReversed;\n // if(cell.isReversed===undefined){\n // reversed = false\n // }else{\n // reversed =cell.isReversed\n // }\n if (realSource !== source) {\n // The real edges include all core model edges and these can go\n // in both directions. If the source of the hierarchical model edge\n // isn't the source of the specific real edge in this iteration\n // treat if as reversed\n reversed = !reversed;\n }\n // First jetty of edge\n if (jettys != null) {\n var arrayOffset = reversed ? 2 : 0;\n var y = reversed ?\n (layoutReversed ? this.rankBottomY[parseInt(minRank.toString(), 10)]\n : this.rankTopY[parseInt(minRank.toString(), 10)])\n : (layoutReversed ? this.rankTopY[parseInt(maxRank.toString(), 10)]\n : this.rankBottomY[parseInt(maxRank.toString(), 10)]);\n var jetty = jettys[parallelEdgeCount * 4 + 1 + arrayOffset];\n if (reversed !== layoutReversed) {\n jetty = -jetty;\n }\n if (layout.orientation === 'TopToBottom' || layout.orientation === 'BottomToTop') {\n y += jetty;\n }\n var x = jettys[parallelEdgeCount * 4 + arrayOffset];\n if (layout.orientation === 'TopToBottom' || layout.orientation === 'BottomToTop') {\n newPoints.push(this.getPointvalue(x, y + layout.marginY));\n }\n else {\n if (layout.orientation === 'LeftToRight') {\n newPoints.push(this.getPointvalue(y + jetty, x + layout.marginY));\n }\n else {\n newPoints.push(this.getPointvalue(y, x + layout.marginY));\n }\n }\n }\n var loopStart = cell.x.length - 1;\n var loopLimit = -1;\n var loopDelta = -1;\n var currentRank = cell.maxRank - 1;\n if (reversed) {\n loopStart = 0;\n loopLimit = cell.x.length;\n loopDelta = 1;\n currentRank = cell.minRank + 1;\n }\n // Reversed edges need the points inserted in\n // reverse order\n for (var j = loopStart; (cell.maxRank !== cell.minRank) && j !== loopLimit; j += loopDelta) {\n // The horizontal position in a vertical layout\n var positionX = cell.x[parseInt(j.toString(), 10)] + offsetX;\n // This cell.x determines the deviated points of the connectors and jetty positions\n //determine the src and targetgeo points .\n // Work out the vertical positions in a vertical layout\n // in the edge buffer channels above and below this rank\n var topChannelY = (this.rankTopY[parseInt(currentRank.toString(), 10)]\n + this.rankBottomY[currentRank + 1]) / 2.0;\n var bottomChannelY = (this.rankTopY[currentRank - 1]\n + this.rankBottomY[parseInt(currentRank.toString(), 10)]) / 2.0;\n if (reversed) {\n var tmp = topChannelY;\n topChannelY = bottomChannelY;\n bottomChannelY = tmp;\n }\n if (layout.orientation === 'TopToBottom' || layout.orientation === 'BottomToTop') {\n newPoints.push(this.getPointvalue(positionX, topChannelY + layout.marginY));\n newPoints.push(this.getPointvalue(positionX, bottomChannelY + layout.marginY));\n }\n else {\n newPoints.push(this.getPointvalue(topChannelY, positionX + layout.marginY));\n newPoints.push(this.getPointvalue(bottomChannelY, positionX + layout.marginY));\n }\n this.limitX = Math.max(this.limitX, positionX);\n currentRank += loopDelta;\n }\n // Second jetty of edge\n if (jettys != null) {\n var arrayOffset = reversed ? 2 : 0;\n var rankY = reversed ?\n (layoutReversed ? this.rankTopY[parseInt(maxRank.toString(), 10)]\n : this.rankBottomY[parseInt(maxRank.toString(), 10)])\n : (layoutReversed ? this.rankBottomY[parseInt(minRank.toString(), 10)]\n : this.rankTopY[parseInt(minRank.toString(), 10)]);\n var jetty = jettys[parallelEdgeCount * 4 + 3 - arrayOffset];\n if (reversed !== layoutReversed) {\n jetty = -jetty;\n }\n var y = rankY - jetty;\n var x = jettys[parallelEdgeCount * 4 + 2 - arrayOffset];\n if (layout.orientation === 'TopToBottom' || layout.orientation === 'BottomToTop') {\n newPoints.push(this.getPointvalue(x, y + layout.marginY));\n }\n else {\n newPoints.push(this.getPointvalue(y, x + layout.marginY));\n }\n }\n this.setEdgePoints(realEdge, newPoints, model);\n // Increase offset so next edge is drawn next to\n // this one\n if (offsetX === 0.0) {\n offsetX = this.parallelEdgeSpacing;\n }\n else if (offsetX > 0) {\n offsetX = -offsetX;\n }\n else {\n offsetX = -offsetX + this.parallelEdgeSpacing;\n }\n parallelEdgeCount++;\n }\n cell.temp[0] = 101207;\n }\n };\n /* tslint:enable */\n // eslint-disable-next-line\n HierarchicalLayoutUtil.prototype.getPointvalue = function (x, y) {\n return { 'x': Number(x) || 0, 'y': Number(y) || 0 };\n };\n HierarchicalLayoutUtil.prototype.updateEdgeSetXYValue = function (model) {\n if (model.layout.enableLayoutRouting) {\n var isHorizontal = false;\n if (model.layout.orientation === 'LeftToRight' || model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n for (var i = 0; i < model.ranks.length; i++) {\n var rank = model.ranks[parseInt(i.toString(), 10)];\n for (var k = 0; k < rank.length; k++) {\n var cell = rank[parseInt(k.toString(), 10)];\n if ((cell).edges && (cell).edges.length > 0) {\n var spacing = model.layout.horizontalSpacing > 0 ? (model.layout.horizontalSpacing / 2) : 15;\n var check = true;\n if (!(cell.minRank === i - 1 || cell.maxRank === i - 1)) {\n check = false;\n }\n if (check) {\n this.setXY(cell, i, undefined, isHorizontal ? true : false, model.ranks, spacing);\n }\n }\n }\n }\n }\n };\n HierarchicalLayoutUtil.prototype.getPreviousLayerConnectedCells = function (layer, cell) {\n if (cell.previousLayerConnectedCells == null) {\n cell.previousLayerConnectedCells = [];\n cell.previousLayerConnectedCells[0] = [];\n for (var i = 0; i < cell.connectsAsSource.length; i++) {\n var edge = cell.connectsAsSource[parseInt(i.toString(), 10)];\n if (edge.minRank === -1 || edge.minRank === layer - 1) {\n // No dummy nodes in edge, add node of other side of edge\n cell.previousLayerConnectedCells[0].push(edge.target);\n }\n else {\n // Edge spans at least two layers, add edge\n cell.previousLayerConnectedCells[0].push(edge);\n }\n }\n }\n return cell.previousLayerConnectedCells[0];\n };\n HierarchicalLayoutUtil.prototype.compare = function (a, b) {\n if (a != null && b != null) {\n if (b.weightedValue > a.weightedValue) {\n return -1;\n }\n else if (b.weightedValue < a.weightedValue) {\n return 1;\n }\n }\n return 0;\n };\n /* tslint:disable */\n // eslint-disable-next-line\n HierarchicalLayoutUtil.prototype.localEdgeProcessing = function (model, vertices) {\n // Iterate through each vertex, look at the edges connected in\n // both directions.\n for (var rankIndex = 0; rankIndex < model.ranks.length; rankIndex++) {\n var rank = model.ranks[parseInt(rankIndex.toString(), 10)];\n for (var cellIndex = 0; cellIndex < rank.length; cellIndex++) {\n var cell = rank[parseInt(cellIndex.toString(), 10)];\n if (this.crossReduction.isVertex(cell)) {\n var currentCells = this.getPreviousLayerConnectedCells(rankIndex, cell);\n var currentRank = rankIndex - 1;\n // Two loops, last connected cells, and next\n for (var k = 0; k < 2; k++) {\n if (currentRank > -1\n && currentRank < model.ranks.length\n && currentCells != null\n && currentCells.length > 0) {\n var sortedCells = [];\n for (var j = 0; j < currentCells.length; j++) {\n var sorter = this.weightedCellSorter(currentCells[parseInt(j.toString(), 10)], this.getX(currentRank, currentCells[parseInt(j.toString(), 10)]));\n sortedCells.push(sorter);\n }\n sortedCells.sort(this.compare);\n cell.width = vertices[cell.id].cell.geometry.width;\n cell.height = vertices[cell.id].cell.geometry.height;\n var leftLimit = void 0;\n if (model.layout.orientation === 'TopToBottom' || model.layout.orientation === 'BottomToTop') {\n cell.x[0] = vertices[cell.id].cell.geometry.x + vertices[cell.id].cell.geometry.width / 2;\n leftLimit = cell.x[0] - cell.width / 2 + vertices[cell.id].cell.geometry.height / 2;\n }\n else {\n cell.x[0] = vertices[cell.id].cell.geometry.y;\n leftLimit = cell.x[0];\n }\n var rightLimit = leftLimit + cell.width;\n // Connected edge count starts at 1 to allow for buffer\n // with edge of vertex\n var connectedEdgeCount = 0;\n var connectedEdges = [];\n // Calculate width requirements for all connected edges\n for (var j = 0; j < sortedCells.length; j++) {\n var innerCell = sortedCells[parseInt(j.toString(), 10)].cell;\n var connections = void 0;\n if (this.crossReduction.isVertex(innerCell)) {\n // Get the connecting edge\n if (k === 0) {\n connections = cell.connectsAsSource;\n }\n else {\n connections = cell.connectsAsTarget;\n }\n for (var connIndex = 0; connIndex < connections.length; connIndex++) {\n if (connections[parseInt(connIndex.toString(), 10)].source === innerCell\n || connections[parseInt(connIndex.toString(), 10)].target === innerCell) {\n connectedEdgeCount += connections[parseInt(connIndex.toString(), 10)].edges\n .length;\n connectedEdges.push(connections[parseInt(connIndex.toString(), 10)]);\n }\n }\n }\n else {\n connectedEdgeCount += innerCell.edges.length;\n connectedEdges.push(innerCell);\n }\n }\n var requiredWidth = (connectedEdgeCount + 1)\n * this.previousEdgeDistance;\n // Add a buffer on the edges of the vertex if the edge count allows\n if (cell.width > requiredWidth\n + (2 * this.previousEdgeDistance)) {\n leftLimit += this.previousEdgeDistance;\n rightLimit -= this.previousEdgeDistance;\n }\n var availableWidth = rightLimit - leftLimit;\n var edgeSpacing = availableWidth / connectedEdgeCount;\n var currentX = leftLimit + edgeSpacing / 2.0;\n var currentYOffset = this.minEdgeJetty - this.previousEdgeOffset;\n for (var j = 0; j < connectedEdges.length; j++) {\n var numActualEdges = connectedEdges[parseInt(j.toString(), 10)].edges\n .length;\n if (this.jettyPositions === undefined) {\n this.jettyPositions = {};\n }\n var pos = this.jettyPositions[connectedEdges[parseInt(j.toString(), 10)].ids[0]];\n if (pos == null) {\n pos = [];\n this.jettyPositions[connectedEdges[parseInt(j.toString(), 10)].ids[0]] = pos;\n }\n if (j < connectedEdgeCount / 2) {\n currentYOffset += this.previousEdgeOffset;\n }\n else if (j > connectedEdgeCount / 2) {\n currentYOffset -= this.previousEdgeOffset;\n }\n // Ignore the case if equals, this means the second of 2\n // jettys with the same y (even number of edges)\n for (var m = 0; m < numActualEdges; m++) {\n pos[m * 4 + k * 2] = currentX;\n currentX += edgeSpacing;\n pos[m * 4 + k * 2 + 1] = currentYOffset;\n }\n }\n }\n currentCells = this.getNextLayerConnectedCells(rankIndex, cell);\n currentRank = rankIndex + 1;\n }\n }\n }\n }\n };\n /* tslint:enable */\n HierarchicalLayoutUtil.prototype.updateMultiOutEdgesPoints = function (clnode) {\n for (var i = 0; i < clnode.outEdges.length / 2; i++) {\n var connector1 = this.nameTable[clnode.outEdges[parseInt(i.toString(), 10)]];\n var connector2 = this.nameTable[clnode.outEdges[clnode.outEdges.length - (i + 1)]];\n var geometry = 'geometry';\n //900930: To exclude self-loop in layouts\n if (connector1.sourceID !== connector2.targetID && connector1.targetID !== connector2.sourceID) {\n connector2[\"\" + geometry].points[0].y = connector1[\"\" + geometry].points[0].y;\n }\n }\n };\n HierarchicalLayoutUtil.prototype.getNextLayerConnectedCells = function (layer, cell) {\n if (cell.nextLayerConnectedCells == null) {\n cell.nextLayerConnectedCells = [];\n cell.nextLayerConnectedCells[0] = [];\n for (var i = 0; i < cell.connectsAsTarget.length; i++) {\n var edge = cell.connectsAsTarget[parseInt(i.toString(), 10)];\n if (edge.maxRank === -1 || edge.maxRank === layer + 1) {\n // Either edge is not in any rank or\n // no dummy nodes in edge, add node of other side of edge\n cell.nextLayerConnectedCells[0].push(edge.source);\n }\n else {\n // Edge spans at least two layers, add edge\n cell.nextLayerConnectedCells[0].push(edge);\n }\n }\n }\n return cell.nextLayerConnectedCells[0];\n };\n HierarchicalLayoutUtil.prototype.getX = function (layer, cell) {\n if (this.crossReduction.isVertex(cell)) {\n return cell.x[0];\n }\n else if (!this.crossReduction.isVertex(cell)) {\n return cell.x[layer - cell.minRank - 1] || cell.temp[layer - cell.minRank - 1];\n }\n return 0.0;\n };\n HierarchicalLayoutUtil.prototype.getGeometry = function (edge) {\n var geometry = 'geometry';\n return edge[\"\" + geometry];\n };\n HierarchicalLayoutUtil.prototype.setEdgePoints = function (edge, points, model) {\n if (edge != null) {\n var geometryValue = 'geometry';\n var geometry = this.getGeometry(edge);\n if (points != null) {\n for (var i = 0; i < points.length; i++) {\n // eslint-disable-next-line\n points[i].x = points[i].x;\n // eslint-disable-next-line\n points[i].y = points[i].y;\n }\n }\n geometry.points = points;\n edge[\"\" + geometryValue] = geometry;\n }\n };\n HierarchicalLayoutUtil.prototype.assignRankOffset = function (model) {\n if (model) {\n for (var i = 0; i < model.ranks.length; i++) {\n this.rankCoordinatesAssigment(i, model);\n }\n }\n };\n HierarchicalLayoutUtil.prototype.rankCoordinatesAssigment = function (rankValue, model) {\n var rank = model.ranks[parseInt(rankValue.toString(), 10)];\n var spacing = model.layout.horizontalSpacing;\n var localOffset;\n for (var i = 0; i < rank.length; i++) {\n if (this[rankValue + '_' + 'RankOffset'] === undefined) {\n this[rankValue + '_' + 'RankOffset'] = 0;\n }\n localOffset = rank[parseInt(i.toString(), 10)].x[0];\n if (this[rankValue + '_' + 'RankOffset'] < localOffset) {\n this[rankValue + '_' + 'RankOffset'] = localOffset + rank[parseInt(i.toString(), 10)].width / 2 + spacing;\n }\n }\n };\n HierarchicalLayoutUtil.prototype.getType = function (type) {\n if (type === 'internalVertex') {\n return 'internalVertex';\n }\n else {\n return 'internalEdge';\n }\n };\n HierarchicalLayoutUtil.prototype.updateRankValuess = function (model) {\n this.rankTopY = [];\n this.rankBottomY = [];\n for (var i = 0; i < model.ranks.length; i++) {\n this.rankTopY[parseInt(i.toString(), 10)] = Number.MAX_VALUE;\n this.rankBottomY[parseInt(i.toString(), 10)] = -Number.MAX_VALUE;\n }\n };\n HierarchicalLayoutUtil.prototype.setVertexLocationValue = function (cell, orientation, modelBounds) {\n var cellGeomtry = cell.cell.geometry;\n var positionX;\n var positionY;\n if (orientation === 'TopToBottom' || orientation === 'BottomToTop') {\n positionX = cellGeomtry.x;\n positionY = cellGeomtry.y;\n }\n else {\n positionX = cellGeomtry.y;\n positionY = cellGeomtry.x;\n }\n if (orientation === 'RightToLeft') {\n // eslint-disable-next-line\n positionX = cellGeomtry.y;\n positionY = modelBounds.width - cellGeomtry.x - cellGeomtry.height;\n this.rankBottomY[cell.minRank] = Math.max(this.rankBottomY[cell.minRank], positionY);\n this.rankTopY[cell.minRank] = Math.min(this.rankTopY[cell.minRank], positionY + cellGeomtry.height);\n }\n else {\n this.rankTopY[cell.minRank] = Math.min(this.rankTopY[cell.minRank], positionY);\n this.rankBottomY[cell.minRank] = Math.max(this.rankBottomY[cell.minRank], positionY + cellGeomtry.height);\n }\n };\n HierarchicalLayoutUtil.prototype.calculateRectValue = function (dnode) {\n var rect = { x: 0, y: 0, right: 0, bottom: 0, height: 0, width: 0 };\n rect.x = dnode.offsetX - dnode.actualSize.width / 2;\n rect.right = dnode.offsetX + dnode.actualSize.width / 2;\n rect.y = dnode.offsetY - dnode.actualSize.height / 2;\n rect.bottom = dnode.offsetY + dnode.actualSize.height / 2;\n return rect;\n };\n HierarchicalLayoutUtil.prototype.isNodeOverLap = function (dnode, layoutProp) {\n var nodeRect = { x: 0, y: 0, right: 0, bottom: 0, height: 0, width: 0 };\n for (var i = 0; i < this.vertices.length; i++) {\n var rect = { x: 0, y: 0, width: 0, height: 0 };\n //let tempnode1: INode;\n var tempnode1 = this.nameTable[this.vertices[parseInt(i.toString(), 10)].value];\n if (dnode.id !== tempnode1.id && tempnode1.offsetX !== 0 && tempnode1.offsetY !== 0) {\n nodeRect = this.calculateRectValue(dnode);\n rect = this.calculateRectValue(tempnode1);\n if (this.isIntersect(rect, nodeRect, layoutProp)) {\n if (layoutProp.orientation === 'TopToBottom' || layoutProp.orientation === 'BottomToTop') {\n dnode.offsetX += layoutProp.horizontalSpacing;\n }\n else {\n dnode.offsetY += layoutProp.verticalSpacing;\n }\n this.isNodeOverLap(dnode, layoutProp);\n }\n }\n }\n };\n HierarchicalLayoutUtil.prototype.isIntersect = function (rect, nodeRect, layoutProp) {\n if (!(Math.floor(rect.right + layoutProp.horizontalSpacing) <= Math.floor(nodeRect.x) ||\n Math.floor(rect.x - layoutProp.horizontalSpacing) >= Math.floor(nodeRect.right)\n || Math.floor(rect.y - layoutProp.verticalSpacing) >= Math.floor(nodeRect.bottom)\n || Math.floor(rect.bottom + layoutProp.verticalSpacing) <= Math.floor(nodeRect.y))) {\n return true;\n }\n else {\n return false;\n }\n };\n /* eslint-disable */\n HierarchicalLayoutUtil.prototype.updateMargin = function (layoutProp, layout, modelBounds, viewPort) {\n var viewPortBounds = { x: 0, y: 0, width: viewPort.x, height: viewPort.y };\n //let layoutBounds: Rect;\n var bounds = {\n x: modelBounds.x, y: modelBounds.y,\n right: modelBounds.x + modelBounds.width,\n bottom: modelBounds.y + modelBounds.height\n };\n var layoutBounds = layoutProp.bounds ? layoutProp.bounds : viewPortBounds;\n if (layout.orientation === 'TopToBottom' || layout.orientation === 'BottomToTop') {\n switch (layoutProp.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n layout.marginX = (layoutBounds.x - bounds.x) + layoutProp.margin.left;\n break;\n case 'Right':\n layout.marginX = layoutBounds.x + layoutBounds.width - layoutProp.margin.right - bounds.right;\n break;\n case 'Center':\n layout.marginX = layoutBounds.x + layoutBounds.width / 2 - (bounds.x + bounds.right) / 2;\n break;\n }\n switch (layoutProp.verticalAlignment) {\n case 'Top':\n //const top: number;\n var top_1 = layoutBounds.y + layoutProp.margin.top;\n layout.marginY = layout.orientation === 'TopToBottom' ? top_1 : -top_1;\n break;\n case 'Bottom':\n //const bottom: number;\n var bottom = layoutBounds.y + layoutBounds.height - layoutProp.margin.bottom;\n layout.marginY = layout.orientation === 'TopToBottom' ? bottom - bounds.bottom : -(bottom - bounds.bottom);\n break;\n case 'Auto':\n case 'Center':\n //const center: number;\n var center = layoutBounds.y + layoutBounds.height / 2;\n layout.marginY = layout.orientation === 'TopToBottom' ?\n center - (bounds.y + bounds.bottom) / 2 : -center + (bounds.y + bounds.bottom) / 2;\n break;\n }\n }\n else {\n switch (layoutProp.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n //let left: number;\n var left = layoutBounds.x + layoutProp.margin.left;\n layout.marginX = layout.orientation === 'LeftToRight' ? left : -left;\n break;\n case 'Right':\n var right = void 0;\n right = layoutBounds.x + layoutBounds.width - layoutProp.margin.right;\n layout.marginX = layout.orientation === 'LeftToRight' ? right - bounds.right : bounds.right - right;\n break;\n case 'Center':\n var center = void 0;\n center = layoutBounds.width / 2 + layoutBounds.x;\n layout.marginX = layout.orientation === 'LeftToRight' ?\n center - (bounds.y + bounds.bottom) / 2 : -center + (bounds.x + bounds.right) / 2;\n break;\n }\n switch (layoutProp.verticalAlignment) {\n case 'Top':\n layout.marginY = layoutBounds.y + layoutProp.margin.top - bounds.y;\n break;\n case 'Auto':\n case 'Center':\n layout.marginY = layoutBounds.y + layoutBounds.height / 2 - (bounds.y + bounds.bottom) / 2;\n break;\n case 'Bottom':\n layout.marginY = layoutBounds.y + layoutBounds.height - layoutProp.margin.bottom - bounds.bottom;\n break;\n }\n }\n };\n /* eslint-enable */\n //Handles positioning the nodes\n HierarchicalLayoutUtil.prototype.placementStage = function (model, marginX, marginY) {\n var placementStage = this.coordinateAssignment(marginX, marginY, parent, model);\n placementStage.model = model;\n placementStage.widestRankValue = null;\n this.placementStageExecute(placementStage);\n return {\n marginX: placementStage.marginX + model.layout.horizontalSpacing,\n marginY: placementStage.marginY + model.layout.verticalSpacing\n };\n };\n //Initializes the layout properties for positioning\n HierarchicalLayoutUtil.prototype.coordinateAssignment = function (marginX, marginY, parent, model) {\n var plalementChange = {};\n if (model.layout.orientation === 'TopToBottom' || model.layout.orientation === 'BottomToTop') {\n plalementChange.horizontalSpacing = model.layout.horizontalSpacing;\n plalementChange.verticalSpacing = model.layout.verticalSpacing;\n }\n else {\n plalementChange.horizontalSpacing = model.layout.verticalSpacing;\n plalementChange.verticalSpacing = model.layout.horizontalSpacing;\n }\n plalementChange.orientation = 'north';\n //Removed the conditions here. So check here in case of any issue\n plalementChange.marginX = plalementChange.marginX = marginX;\n plalementChange.marginY = plalementChange.marginY = marginY;\n return plalementChange;\n };\n //Calculate the largest size of the node either height or width depends upon the layoutorientation\n HierarchicalLayoutUtil.prototype.calculateWidestRank = function (plalementChange, graph, model) {\n var isHorizontal = false;\n if (plalementChange.model.layout.orientation === 'LeftToRight' || plalementChange.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n var offset = -plalementChange.verticalSpacing;\n var lastRankMaxCellSize = 0.0;\n plalementChange.rankSizes = [];\n plalementChange.rankOffset = [];\n for (var rankValue = model.maxRank; rankValue >= 0; rankValue--) {\n var maxCellSize = 0.0;\n var rank = model.ranks[parseInt(rankValue.toString(), 10)];\n var localOffset = isHorizontal ? plalementChange.marginY : plalementChange.marginX;\n for (var i = 0; i < rank.length; i++) {\n var node = rank[parseInt(i.toString(), 10)];\n if (this.crossReduction.isVertex(node)) {\n var vertex = node;\n if (vertex.cell && (vertex.cell.inEdges || vertex.cell.outEdges)) {\n var obj = this.nameTable[vertex.cell.name];\n vertex.width = obj.actualSize.width;\n vertex.height = obj.actualSize.height;\n maxCellSize = Math.max(maxCellSize, (isHorizontal ? vertex.width : vertex.height));\n }\n }\n else {\n if (node) {\n var edge = node;\n var numEdges = 1;\n if (edge.edges != null) {\n numEdges = edge.edges.length;\n }\n node.width = (numEdges - 1) * 10;\n }\n }\n if (isHorizontal) {\n if (!node.height) {\n node.height = 0;\n }\n }\n // Set the initial x-value as being the best result so far\n localOffset += (isHorizontal ? node.height : node.width) / 2.0;\n this.setXY(node, rankValue, localOffset, isHorizontal ? true : false);\n this.setTempVariable(node, rankValue, localOffset);\n localOffset += ((isHorizontal ? node.height : node.width) / 2.0) + plalementChange.horizontalSpacing;\n if (localOffset > plalementChange.widestRankValue) {\n plalementChange.widestRankValue = localOffset;\n plalementChange.widestRank = rankValue;\n }\n plalementChange.rankSizes[parseInt(rankValue.toString(), 10)] = localOffset;\n }\n plalementChange.rankOffset[parseInt(rankValue.toString(), 10)] = offset;\n var distanceToNextRank = maxCellSize / 2.0 + lastRankMaxCellSize / 2.0 + plalementChange.verticalSpacing;\n lastRankMaxCellSize = maxCellSize;\n if (plalementChange.orientation === 'north' || plalementChange.orientation === 'west') {\n offset += distanceToNextRank;\n }\n else {\n offset -= distanceToNextRank;\n }\n for (var i = 0; i < rank.length; i++) {\n var cell = rank[parseInt(i.toString(), 10)];\n this.setXY(cell, rankValue, offset, isHorizontal ? false : true);\n }\n }\n };\n /**\n * Sets the temp position of the node on the layer \\\n *\n * @returns { void } Sets the temp position of the node on the layer \\\n * @param {IVertex} node - provide the nodes value.\n * @param {number} layer - provide the layer value.\n * @param {number} value - provide the value value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.setTempVariable = function (node, layer, value) {\n if (this.crossReduction.isVertex(node)) {\n node.temp[0] = value;\n }\n else {\n node.temp[layer - node.minRank - 1] = value;\n }\n };\n // eslint-disable-next-line valid-jsdoc\n /**\n * setXY method \\\n *\n * @returns { void } setXY method .\\\n * @param {IVertex} node - provide the source value.\n * @param {number} layer - provide the target value.\n * @param {number} value - provide the layoutOrientation value.\n * @param {boolean} isY - provide the layoutOrientation value.\n * @param {IVertex[][]} ranks - provide the layoutOrientation value.\n * @param {number} spacing - provide the layoutOrientation value.\n *\n * @private\n */\n HierarchicalLayoutUtil.prototype.setXY = function (node, layer, value, isY, ranks, spacing) {\n if (node && node.cell) {\n if (node.cell.inEdges.length > 0 || node.cell.outEdges.length > 0) {\n if (isY) {\n node.y[0] = value;\n }\n else {\n node.x[0] = value;\n }\n }\n else {\n if (isY) {\n node.y[layer - node.minRank - 1] = value;\n }\n else {\n node.x[layer - node.minRank - 1] = value;\n }\n }\n }\n else {\n this.setEdgeXY(ranks, node, spacing, layer);\n }\n };\n //Sets geometry position of the layout node on the layout model\n HierarchicalLayoutUtil.prototype.rankCoordinates = function (stage, rankValue, graph, model) {\n var isHorizontal = false;\n if (stage.model.layout.orientation === 'LeftToRight' || stage.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n var rank = model.ranks[parseInt(rankValue.toString(), 10)];\n var maxOffset = 0.0;\n var localOffset = (isHorizontal ? stage.marginY : stage.marginX)\n + (stage.widestRankValue - stage.rankSizes[parseInt(rankValue.toString(), 10)]) / 2;\n for (var i = 0; i < rank.length; i++) {\n var node = rank[parseInt(i.toString(), 10)];\n if (this.crossReduction.isVertex(node)) {\n var obj = this.nameTable[node.cell.name];\n node.width = obj.actualSize.width;\n node.height = obj.actualSize.height;\n maxOffset = Math.max(maxOffset, node.height);\n }\n else {\n var edge = node;\n var numEdges = 1;\n if (edge.edges != null) {\n numEdges = edge.edges.length;\n }\n if (isHorizontal) {\n node.height = (numEdges - 1) * 10;\n }\n else {\n node.width = (numEdges - 1) * 10;\n }\n }\n var size = (isHorizontal ? node.height : node.width) / 2.0;\n localOffset += size;\n this.setXY(node, rankValue, localOffset, isHorizontal ? true : false);\n this.setTempVariable(node, rankValue, localOffset);\n localOffset += (size + stage.horizontalSpacing);\n }\n };\n //sets the layout in an initial positioning.it will arange all the ranks as much as possible\n HierarchicalLayoutUtil.prototype.initialCoords = function (plalementChange, facade, model) {\n this.calculateWidestRank(plalementChange, facade, model);\n // Reverse sweep direction each time from widest rank\n for (var i = plalementChange.widestRank; i >= 0; i--) {\n if (i < model.maxRank) {\n this.rankCoordinates(plalementChange, i, facade, model);\n }\n }\n for (var i = plalementChange.widestRank + 1; i <= model.maxRank; i++) {\n if (i > 0) {\n this.rankCoordinates(plalementChange, i, facade, model);\n }\n }\n };\n /**\n * Checks whether the given node is an ancestor \\\n *\n * @returns { boolean } Checks whether the given node is an ancestor \\\n * @param {IVertex} node - provide the nodes value.\n * @param {IVertex} otherNode - provide the layer value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.isAncestor = function (node, otherNode) {\n // Firstly, the hash code of this node needs to be shorter than the other node\n if (otherNode != null && node.hashCode != null && otherNode.hashCode != null\n && node.hashCode.length < otherNode.hashCode.length) {\n if (node.hashCode === otherNode.hashCode) {\n return true;\n }\n if (node.hashCode == null || node.hashCode == null) {\n return false;\n }\n for (var i = 0; i < node.hashCode.length; i++) {\n if (node.hashCode[parseInt(i.toString(), 10)] !== otherNode.hashCode[parseInt(i.toString(), 10)]) {\n return false;\n }\n }\n return true;\n }\n return false;\n };\n //initializes the sorter object\n HierarchicalLayoutUtil.prototype.weightedCellSorter = function (cell, weightedValue) {\n var weightedCellSorter = {};\n weightedCellSorter.cell = cell ? cell : null;\n weightedCellSorter.weightedValue = weightedValue ? weightedValue : 0;\n weightedCellSorter.visited = false;\n weightedCellSorter.rankIndex = null;\n return weightedCellSorter;\n };\n //Performs one node positioning in both directions\n HierarchicalLayoutUtil.prototype.minNode = function (plalementChange, model) {\n var nodeList = [];\n var map = { map: {} };\n var rank = [];\n for (var i = 0; i <= model.maxRank; i++) {\n rank[parseInt(i.toString(), 10)] = model.ranks[parseInt(i.toString(), 10)];\n for (var j = 0; j < rank[parseInt(i.toString(), 10)].length; j++) {\n var node = rank[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)];\n var nodeWrapper = this.weightedCellSorter(node, i);\n nodeWrapper.rankIndex = j;\n nodeWrapper.visited = true;\n nodeList.push(nodeWrapper);\n model.setDictionaryForSorter(map, node, nodeWrapper, true);\n }\n }\n var maxTries = nodeList.length * 10;\n var count = 0;\n var tolerance = 1;\n while (nodeList.length > 0 && count <= maxTries) {\n var cellWrapper = nodeList.shift();\n var cell = cellWrapper.cell;\n var rankValue = cellWrapper.weightedValue;\n var rankIndex = cellWrapper.rankIndex;\n var nextLayerConnectedCells = this.crossReduction.getConnectedCellsOnLayer(cell, rankValue);\n var previousLayerConnectedCells = this.crossReduction.getConnectedCellsOnLayer(cell, rankValue, true);\n var nextConnectedCount = nextLayerConnectedCells ? nextLayerConnectedCells.length : 0;\n var prevConnectedCount = previousLayerConnectedCells ? previousLayerConnectedCells.length : 0;\n var medianNextLevel = this.medianXValue(plalementChange, nextLayerConnectedCells, rankValue + 1);\n var medianPreviousLevel = this.medianXValue(plalementChange, previousLayerConnectedCells, rankValue - 1);\n var numConnectedNeighbours = nextConnectedCount + prevConnectedCount;\n var currentPosition = this.crossReduction.getTempVariable(cell, rankValue);\n var cellMedian = currentPosition;\n if (numConnectedNeighbours > 0) {\n cellMedian = (medianNextLevel * nextConnectedCount + medianPreviousLevel * prevConnectedCount) / numConnectedNeighbours;\n }\n if (nextConnectedCount === 1 && prevConnectedCount === 1) {\n cellMedian = (medianPreviousLevel * prevConnectedCount) / prevConnectedCount;\n }\n else if (nextConnectedCount === 1) {\n cellMedian = (medianNextLevel * nextConnectedCount) / nextConnectedCount;\n }\n var positionChanged = false;\n var tempValue = undefined;\n if (cellMedian < currentPosition - tolerance) {\n if (rankIndex === 0) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else {\n var leftCell = rank[parseInt(rankValue.toString(), 10)][rankIndex - 1];\n var leftLimit = this.crossReduction.getTempVariable(leftCell, rankValue);\n leftLimit = leftLimit + leftCell.width / 2 + plalementChange.intraCellSpacing + cell.width / 2;\n if (leftLimit < cellMedian) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else if (leftLimit < this.crossReduction.getTempVariable(cell, rankValue) - tolerance) {\n tempValue = leftLimit;\n positionChanged = true;\n }\n }\n }\n else if (cellMedian > currentPosition + tolerance) {\n var rankSize = rank[parseInt(rankValue.toString(), 10)].length;\n if (rankIndex === rankSize - 1) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else {\n var rightCell = rank[parseInt(rankValue.toString(), 10)][rankIndex + 1];\n var rightLimit = this.crossReduction.getTempVariable(rightCell, rankValue);\n rightLimit = rightLimit - rightCell.width / 2 - plalementChange.intraCellSpacing - cell.width / 2;\n if (rightLimit > cellMedian) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else if (rightLimit > this.crossReduction.getTempVariable(cell, rankValue) + tolerance) {\n tempValue = rightLimit;\n positionChanged = true;\n }\n }\n }\n if (positionChanged) {\n this.setTempVariable(cell, rankValue, tempValue);\n // Add connected nodes to map and list\n this.updateNodeList(nodeList, map, nextLayerConnectedCells, model);\n this.updateNodeList(nodeList, map, previousLayerConnectedCells, model);\n }\n if (this.crossReduction.isVertex(cellWrapper.cell)) {\n cellWrapper.visited = false;\n }\n count++;\n }\n };\n //Updates the ndoes collection\n HierarchicalLayoutUtil.prototype.updateNodeList = function (nodeList, map, collection, model) {\n for (var i = 0; i < collection.length; i++) {\n var connectedCell = collection[parseInt(i.toString(), 10)];\n var connectedCellWrapper = model.getDictionaryForSorter(map, connectedCell);\n if (connectedCellWrapper != null) {\n if (connectedCellWrapper.visited === false) {\n connectedCellWrapper.visited = true;\n nodeList.push(connectedCellWrapper);\n }\n }\n }\n };\n //Calculates the node position of the connected cell on the specified rank\n HierarchicalLayoutUtil.prototype.medianXValue = function (plalementChange, connectedCells, rankValue) {\n if (!connectedCells || connectedCells.length === 0) {\n return 0;\n }\n var medianValues = [];\n for (var i = 0; i < connectedCells.length; i++) {\n medianValues[parseInt(i.toString(), 10)]\n = this.crossReduction.getTempVariable(connectedCells[parseInt(i.toString(), 10)], rankValue);\n }\n medianValues.sort(function (a, b) {\n return a - b;\n });\n if (connectedCells.length % 2 === 1) {\n return medianValues[Math.floor(connectedCells.length / 2)];\n }\n else {\n var medianPoint = connectedCells.length / 2;\n var leftMedian = medianValues[medianPoint - 1];\n var rightMedian = medianValues[parseInt(medianPoint.toString(), 10)];\n return ((leftMedian + rightMedian) / 2);\n }\n };\n //Updates the geometry of the vertices\n HierarchicalLayoutUtil.prototype.placementStageExecute = function (plalementChange) {\n var isHorizontal = false;\n if (plalementChange.model.layout.orientation === 'LeftToRight' || plalementChange.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n plalementChange.jettyPositions = {};\n var model = plalementChange.model;\n // eslint-disable-next-line\n isHorizontal ? plalementChange.currentYDelta = 0.0 : plalementChange.currentXDelta = 0.0;\n this.initialCoords(plalementChange, { model: model }, model);\n this.minNode(plalementChange, model);\n var bestOffsetDelta = 100000000.0;\n if (!plalementChange.maxIterations) {\n plalementChange.maxIterations = 8;\n }\n for (var i = 0; i < plalementChange.maxIterations; i++) {\n // if the total offset is less for the current positioning,\n //there are less heavily angled edges and so the current positioning is used\n if ((isHorizontal ? plalementChange.currentYDelta : plalementChange.currentXDelta) < bestOffsetDelta) {\n for (var j = 0; j < model.ranks.length; j++) {\n var rank = model.ranks[parseInt(j.toString(), 10)];\n for (var k = 0; k < rank.length; k++) {\n var cell = rank[parseInt(k.toString(), 10)];\n this.setXY(cell, j, this.crossReduction.getTempVariable(cell, j), isHorizontal ? true : false);\n }\n }\n bestOffsetDelta = isHorizontal ? plalementChange.currentYDelta : plalementChange.currentXDelta;\n }\n // eslint-disable-next-line\n isHorizontal ? plalementChange.currentYDelta = 0 : plalementChange.currentXDelta = 0;\n }\n this.setCellLocations(plalementChange, model);\n };\n //sets the cell position in the after the layout operation\n HierarchicalLayoutUtil.prototype.setCellLocations = function (plalementChange, model) {\n var vertices = this.getValues(model.vertexMapper);\n for (var i = 0; i < vertices.length; i++) {\n this.setVertexLocation(plalementChange, vertices[parseInt(i.toString(), 10)]);\n }\n };\n //used to specify the geometrical position of the layout model cell\n HierarchicalLayoutUtil.prototype.garphModelsetVertexLocation = function (plalementChange, cell, x, y) {\n //let model: MultiParentModel = plalementChange.model;\n var geometry = cell.geometry;\n var result = null;\n if (geometry != null) {\n result = { x: x, y: y, width: geometry.width, height: geometry.height };\n if (geometry.x !== x || geometry.y !== y) {\n cell.geometry = result;\n }\n }\n return result;\n };\n //set the position of the specified node\n HierarchicalLayoutUtil.prototype.setVertexLocation = function (plalementChange, cell) {\n var isHorizontal = false;\n if (plalementChange.model.layout.orientation === 'LeftToRight' || plalementChange.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n var realCell = cell.cell;\n var positionX = cell.x[0] - cell.width / 2;\n var positionY = cell.y[0] - cell.height / 2;\n this.garphModelsetVertexLocation(plalementChange, realCell, positionX, positionY);\n if (isHorizontal) {\n if (!plalementChange.marginY) {\n plalementChange.marginY = 0;\n }\n plalementChange.marginY = Math.max(plalementChange.marginY, positionY + cell.height);\n }\n else {\n if (!plalementChange.marginX) {\n plalementChange.marginX = 0;\n }\n plalementChange.marginX = Math.max(plalementChange.marginX, positionX + cell.width);\n }\n };\n /**\n * get the specific value from the key value pair \\\n *\n * @returns { {}[] } get the specific value from the key value pair \\\n * @param {VertexMapper} mapper - provide the mapper value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.getValues = function (mapper) {\n var list = [];\n if (mapper.map) {\n for (var _i = 0, _a = Object.keys(mapper.map); _i < _a.length; _i++) {\n var key = _a[_i];\n list.push(mapper.map[\"\" + key]);\n }\n }\n return list;\n };\n /**\n *Checks and reduces the crosses in between line segments \\\n *\n * @returns { void } Checks and reduces the crosses in between line segments.\\\n * @param {End} model - provide the model value.\n *\n * @private\n */\n HierarchicalLayoutUtil.prototype.crossingStage = function (model) {\n this.crossReduction.execute(model);\n };\n //Initializes the ranks of the vertices\n HierarchicalLayoutUtil.prototype.layeringStage = function (model) {\n this.initialRank(model);\n this.fixRanks(model);\n };\n //determine the initial rank for the each vertex on the relevent direction\n HierarchicalLayoutUtil.prototype.initialRank = function (model) {\n var startNodes = model.startNodes;\n var internalNodes = model.getDictionaryValues(model.vertexMapper);\n var startNodesCopy = startNodes.slice();\n while (startNodes.length > 0) {\n var internalNode = startNodes[0];\n var layerDeterminingEdges = internalNode.connectsAsTarget;\n var edgesToBeMarked = internalNode.connectsAsSource;\n var allEdgesScanned = true;\n var minimumLayer = 100000000;\n for (var i = 0; i < layerDeterminingEdges.length; i++) {\n var internalEdge = layerDeterminingEdges[parseInt(i.toString(), 10)];\n if (internalEdge.temp[0] === 5270620) {\n // This edge has been scanned, get the layer of the node on the other end\n var otherNode = internalEdge.source;\n minimumLayer = Math.min(minimumLayer, otherNode.temp[0] - 1);\n }\n else {\n allEdgesScanned = false;\n break;\n }\n }\n // If all edge have been scanned, assign the layer, mark all edges in the other direction and remove from the nodes list\n if (allEdgesScanned) {\n internalNode.temp[0] = minimumLayer;\n if (!model.maxRank) {\n model.maxRank = 100000000;\n }\n model.maxRank = Math.min(model.maxRank, minimumLayer);\n if (edgesToBeMarked != null) {\n for (var i = 0; i < edgesToBeMarked.length; i++) {\n var internalEdge = edgesToBeMarked[parseInt(i.toString(), 10)];\n internalEdge.temp[0] = 5270620;\n // Add node on other end of edge to LinkedList of nodes to be analysed\n var otherNode = internalEdge.target;\n // Only add node if it hasn't been assigned a layer\n if (otherNode.temp[0] === -1) {\n startNodes.push(otherNode);\n // Mark this other node as neither being unassigned nor assigned\n //so it isn't added to this list again, but it's layer isn't used in any calculation.\n otherNode.temp[0] = -2;\n }\n }\n }\n startNodes.shift();\n }\n else {\n // Not all the edges have been scanned, get to the back of the class and put the dunces cap on\n var removedCell = startNodes.shift();\n startNodes.push(internalNode);\n if (removedCell === internalNode && startNodes.length === 1) {\n // This is an error condition, we can't get out of this loop.\n //It could happen for more than one node but that's a lot harder to detect. Log the error\n break;\n }\n }\n }\n for (var i = 0; i < internalNodes.length; i++) {\n internalNodes[parseInt(i.toString(), 10)].temp[0] -= model.maxRank;\n }\n for (var i = 0; i < startNodesCopy.length; i++) {\n var internalNode = startNodesCopy[parseInt(i.toString(), 10)];\n var currentMaxLayer = 0;\n var layerDeterminingEdges = internalNode.connectsAsSource;\n for (var j = 0; j < layerDeterminingEdges.length; j++) {\n var internalEdge = layerDeterminingEdges[parseInt(j.toString(), 10)];\n var otherNode = internalEdge.target;\n internalNode.temp[0] = Math.max(currentMaxLayer, otherNode.temp[0] + 1);\n currentMaxLayer = internalNode.temp[0];\n }\n }\n model.maxRank = 100000000 - model.maxRank;\n };\n //used to set the optimum value of each vertex on the layout\n HierarchicalLayoutUtil.prototype.fixRanks = function (model) {\n model.fixRanks();\n };\n //used to determine any cyclic stage have been created on the layout model\n HierarchicalLayoutUtil.prototype.cycleStage = function (model) {\n var seenNodes = {};\n model.startNodes = [];\n var unseenNodesArray = model.getDictionaryValues(model.vertexMapper);\n var unseenNodes = [];\n for (var i = 0; i < unseenNodesArray.length; i++) {\n unseenNodesArray[parseInt(i.toString(), 10)].temp[0] = -1;\n unseenNodes[unseenNodesArray[parseInt(i.toString(), 10)].id] = unseenNodesArray[parseInt(i.toString(), 10)];\n }\n var rootsArray = null;\n if (model.roots != null) {\n var modelRoots = model.roots;\n rootsArray = [];\n for (var i = 0; i < modelRoots.length; i++) {\n rootsArray[parseInt(i.toString(), 10)] = model.getDictionary(model.vertexMapper, modelRoots[parseInt(i.toString(), 10)]);\n if (rootsArray[parseInt(i.toString(), 10)] != null) {\n model.startNodes.push(rootsArray[parseInt(i.toString(), 10)]);\n }\n }\n }\n model.visit('removeParentConnection', rootsArray, true, null, { seenNodes: seenNodes, unseenNodes: unseenNodes });\n var seenNodesCopy = model.clone(seenNodes, null, true);\n model.visit('removeNodeConnection', unseenNodes, true, seenNodesCopy, { seenNodes: seenNodes, unseenNodes: unseenNodes });\n };\n /**\n * removes the edge from the given collection \\\n *\n * @returns { IEdge } removes the edge from the given collection .\\\n * @param {IEdge} obj - provide the angle value.\n * @param { IEdge[]} array - provide the angle value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.remove = function (obj, array) {\n var index = array.indexOf(obj);\n if (index !== -1) {\n array.splice(index, 1);\n }\n return obj;\n };\n /**\n * Inverts the source and target of an edge \\\n *\n * @returns { void } Inverts the source and target of an edge .\\\n * @param {IEdge} connectingEdge - provide the angle value.\n * @param { number} layer - provide the angle value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.invert = function (connectingEdge, layer) {\n var temp = connectingEdge.source;\n connectingEdge.source = connectingEdge.target;\n connectingEdge.target = temp;\n connectingEdge.isReversed = !connectingEdge.isReversed;\n };\n /**\n * used to get the edges between the given source and target \\\n *\n * @returns { IConnector[] } used to get the edges between the given source and target .\\\n * @param {Vertex} source - provide the angle value.\n * @param { Vertex} target - provide the angle value.\n * @param { boolean} directed - provide the angle value.\n * @private\n */\n HierarchicalLayoutUtil.prototype.getEdgesBetween = function (source, target, directed) {\n directed = (directed != null) ? directed : false;\n var edges = this.getEdges(source);\n var result = [];\n for (var i = 0; i < edges.length; i++) {\n var src = this.getVisibleTerminal(edges[parseInt(i.toString(), 10)], true);\n var trg = this.getVisibleTerminal(edges[parseInt(i.toString(), 10)], false);\n if ((src === source && trg === target) || (!directed && src === target && trg === source)) {\n result.push(edges[parseInt(i.toString(), 10)]);\n }\n }\n return result;\n };\n return HierarchicalLayoutUtil;\n}());\n/**\n * Handles position the objects in a hierarchical tree structure\n */\nvar MultiParentModel = /** @__PURE__ @class */ (function () {\n function MultiParentModel(layout, vertices, roots, dlayout) {\n this.multiObjectIdentityCounter = 0;\n //used to count the no of times the parent have been used\n this.dfsCount = 0;\n this.hierarchicalUtil = new HierarchicalLayoutUtil();\n this.roots = roots;\n this.vertexMapper = { map: {} };\n var internalVertices = [];\n this.layout = dlayout;\n this.maxRank = 100000000;\n this.edgeMapper = { map: {} };\n this.hierarchicalLayout = layout;\n this.createInternalCells(layout, vertices, internalVertices, dlayout);\n for (var i = 0; i < vertices.length; i++) {\n var edges = internalVertices[parseInt(i.toString(), 10)].connectsAsSource;\n for (var j = 0; j < edges.length; j++) {\n var internalEdge = edges[parseInt(j.toString(), 10)];\n var realEdges = internalEdge.edges;\n if (realEdges != null && realEdges.length > 0) {\n var realEdge = realEdges[0];\n var targetCell = layout.getVisibleTerminal(realEdge, false);\n var internalTargetCell = this.getDictionary(this.vertexMapper, targetCell);\n if (internalVertices[parseInt(i.toString(), 10)] === internalTargetCell) {\n targetCell = layout.getVisibleTerminal(realEdge, true);\n internalTargetCell = this.getDictionary(this.vertexMapper, targetCell);\n }\n if (internalTargetCell != null && internalVertices[parseInt(i.toString(), 10)] !== internalTargetCell) {\n internalEdge.target = internalTargetCell;\n if (internalTargetCell.connectsAsTarget.length === 0) {\n internalTargetCell.connectsAsTarget = [];\n }\n if (internalTargetCell.connectsAsTarget.indexOf(internalEdge) < 0) {\n internalTargetCell.connectsAsTarget.push(internalEdge);\n }\n }\n }\n }\n internalVertices[parseInt(i.toString(), 10)].temp[0] = 1;\n }\n }\n /* tslint:disable */\n MultiParentModel.prototype.resetEdge = function (edge) {\n var geometry = { x: 0, y: 0, width: 0, height: 0, relative: true };\n var geo = geometry;\n edge['geometry'] = geo;\n return edge;\n };\n // eslint-disable-next-line max-len\n MultiParentModel.prototype.createInternalCells = function (layout, vertices, internalVertices, dlayout) {\n for (var i = 0; i < vertices.length; i++) {\n internalVertices[parseInt(i.toString(), 10)] = {\n x: [], y: [], temp: [], cell: vertices[parseInt(i.toString(), 10)],\n id: vertices[parseInt(i.toString(), 10)].name, connectsAsTarget: [], connectsAsSource: [], type: 'internalVertex'\n };\n this.setDictionary(this.vertexMapper, vertices[parseInt(i.toString(), 10)], internalVertices[parseInt(i.toString(), 10)]);\n var conns = layout.getEdges(vertices[parseInt(i.toString(), 10)]);\n internalVertices[parseInt(i.toString(), 10)].connectsAsSource = [];\n for (var j = 0; j < conns.length; j++) {\n var cell = layout.getVisibleTerminal(conns[parseInt(j.toString(), 10)], false);\n if (cell !== vertices[parseInt(i.toString(), 10)]) {\n var undirectedEdges = layout.getEdgesBetween(vertices[parseInt(i.toString(), 10)], cell, false);\n var directedEdges = layout.getEdgesBetween(vertices[parseInt(i.toString(), 10)], cell, true);\n if (undirectedEdges != null && undirectedEdges.length > 0 && directedEdges.length * 2 >= undirectedEdges.length) {\n var internalEdge = { x: [], y: [], temp: [], edges: undirectedEdges, ids: [] };\n if (dlayout.enableLayoutRouting) {\n for (var k = 0; k < undirectedEdges.length; k++) {\n var edge = undirectedEdges[parseInt(k.toString(), 10)];\n this.setDictionary(this.edgeMapper, undefined, internalEdge, edge.id);\n // Resets all point on the edge and disables the edge style\n // without deleting it from the cell style\n this.resetEdge(edge);\n }\n }\n internalEdge.source = internalVertices[parseInt(i.toString(), 10)];\n for (var m = 0; m < undirectedEdges.length; m++) {\n internalEdge.ids.push(undirectedEdges[parseInt(m.toString(), 10)].id);\n }\n internalEdge.source = internalVertices[parseInt(i.toString(), 10)];\n if (!internalVertices[parseInt(i.toString(), 10)].connectsAsSource) {\n internalVertices[parseInt(i.toString(), 10)].connectsAsSource = [];\n }\n if (internalVertices[parseInt(i.toString(), 10)].connectsAsSource.indexOf(internalEdge) < 0) {\n internalVertices[parseInt(i.toString(), 10)].connectsAsSource.push(internalEdge);\n }\n }\n }\n }\n internalVertices[parseInt(i.toString(), 10)].temp[0] = 0;\n }\n };\n /* tslint:enable */\n /**\n * used to set the optimum value of each vertex on the layout \\\n *\n * @returns { void } used to set the optimum value of each vertex on the layout .\\\n * @private\n */\n MultiParentModel.prototype.fixRanks = function () {\n var rankList = [];\n this.ranks = [];\n for (var i = 0; i < this.maxRank + 1; i++) {\n rankList[parseInt(i.toString(), 10)] = [];\n this.ranks[parseInt(i.toString(), 10)] = rankList[parseInt(i.toString(), 10)];\n }\n var rootsArray = null;\n if (this.roots != null) {\n var oldRootsArray = this.roots;\n rootsArray = [];\n for (var i = 0; i < oldRootsArray.length; i++) {\n var cell = oldRootsArray[parseInt(i.toString(), 10)];\n var internalNode = this.getDictionary(this.vertexMapper, cell);\n rootsArray[parseInt(i.toString(), 10)] = internalNode;\n }\n }\n this.visit('updateMinMaxRank', rootsArray, false, null, { seenNodes: null, unseenNodes: null, rankList: rankList });\n };\n //Updates the min/max rank of the layer\n MultiParentModel.prototype.updateMinMaxRank = function (layer, seen, data) {\n //let seenNodes: {} = data.seenNodes;\n //let unseenNodes: {} = data.unseenNodes;\n var parent = data.parent;\n var node = data.root;\n var edge = data.edge;\n var rankList = data.rankList;\n if (!node.maxRank && node.maxRank !== 0) {\n node.maxRank = -1;\n }\n if (!node.minRank && node.minRank !== 0) {\n node.minRank = -1;\n }\n if (seen === 0 && node.maxRank < 0 && node.minRank < 0) {\n rankList[node.temp[0]].push(node);\n node.maxRank = node.temp[0];\n node.minRank = node.temp[0];\n node.temp[0] = rankList[node.maxRank].length - 1;\n }\n if (parent != null && edge != null) {\n var parentToCellRankDifference = parent.maxRank - node.maxRank;\n if (parentToCellRankDifference > 1) {\n edge.maxRank = parent.maxRank;\n edge.minRank = node.maxRank;\n edge.temp = [];\n edge.x = [];\n edge.y = [];\n for (var i = edge.minRank + 1; i < edge.maxRank; i++) {\n rankList[parseInt(i.toString(), 10)].push(edge);\n this.hierarchicalUtil.setTempVariable(edge, i, rankList[parseInt(i.toString(), 10)].length - 1);\n }\n }\n }\n };\n //used to store the value of th given key on the object\n MultiParentModel.prototype.setDictionary = function (dic, key, value, edgeId) {\n if (!edgeId) {\n var id = key.name;\n var previous = dic.map[\"\" + id];\n dic.map[\"\" + id] = value;\n return previous;\n }\n else {\n var previous = dic.map[\"\" + edgeId];\n dic.map[\"\" + edgeId] = value;\n return previous;\n }\n };\n /**\n * used to store the value of th given key on the objectt \\\n *\n * @returns { IVertex } used to store the value of th given key on the object .\\\n * @param {VertexMapper} dic - provide the angle value.\n * @param {IVertex} key - provide the angle value.\n * @param {WeightedCellSorter} value - provide the angle value.\n * @param {boolean} flag - provide the angle value.\n * @private\n */\n MultiParentModel.prototype.setDictionaryForSorter = function (dic, key, value, flag) {\n var id = key.id;\n var previous = dic.map[\"\" + id];\n dic.map[\"\" + id] = value;\n return previous;\n };\n /**\n * used to get the value of the given key \\\n *\n * @returns { IVertex } used to get the value of the given key .\\\n * @param {VertexMapper} dic - provide the angle value.\n * @param {IVertex} key - provide the angle value.\n * @private\n */\n MultiParentModel.prototype.getDictionary = function (dic, key) {\n if (!this.multiObjectIdentityCounter && this.multiObjectIdentityCounter !== 0) {\n this.multiObjectIdentityCounter = 0;\n }\n var id = key.name;\n if (!id) {\n if (!key.layoutObjectId) { ///####\n key.layoutObjectId = 'graphHierarchyNode#' + this.multiObjectIdentityCounter++;\n return key.layoutObjectId;\n }\n else {\n return dic.map[key.layoutObjectId];\n }\n }\n return dic.map[\"\" + id];\n };\n /**\n * used to get the value of the given key \\\n *\n * @returns { IVertex } used to get the value of the given key .\\\n * @param {VertexMapper} dic - provide the angle value.\n * @param {IVertex} key - provide the angle value.\n * @private\n */\n MultiParentModel.prototype.getDictionaryForSorter = function (dic, key) {\n if (!this.multiObjectIdentityCounter && this.multiObjectIdentityCounter !== 0) {\n this.multiObjectIdentityCounter = 0;\n }\n var id = key.id;\n if (!id) {\n if (!key.layoutObjectId) { ///####\n key.layoutObjectId = 'graphHierarchyNode#' + this.multiObjectIdentityCounter++;\n return key.layoutObjectId;\n }\n else {\n return dic.map[key.layoutObjectId];\n }\n }\n return dic.map[\"\" + id];\n };\n /**\n * used to get all the values of the dictionary object \\\n *\n * @returns { IVertex[] } used to get all the values of the dictionary object .\\\n * @param {VertexMapper} dic - provide the angle value.\n * @private\n */\n MultiParentModel.prototype.getDictionaryValues = function (dic) {\n var result = [];\n for (var _i = 0, _a = Object.keys(dic.map); _i < _a.length; _i++) {\n var key = _a[_i];\n result.push(dic.map[\"\" + key]);\n }\n return result;\n };\n /**\n * used to visit all the entries on the given dictionary with given function \\\n *\n * @returns { void } used to visit all the entries on the given dictionary with given function .\\\n * @param {string} visitor - provide the visitor value.\n * @param {IVertex[]} dfsRoots - provide the dfsRoots value.\n * @param {boolean} trackAncestors - provide the trackAncestors value.\n * @param {{}} seenNodes - provide the seenNodes value.\n * @param {TraverseData} data - provide the data value.\n * @private\n */\n MultiParentModel.prototype.visit = function (visitor, dfsRoots, trackAncestors, seenNodes, data) {\n //let seenNodes1: {} = data.seenNodes;\n //let unseenNodes1: {} = data.unseenNodes;\n //let rankList: IVertex[][] = data.rankList;\n // Run depth first search through on all roots\n if (dfsRoots != null) {\n for (var i = 0; i < dfsRoots.length; i++) {\n var internalNode = dfsRoots[parseInt(i.toString(), 10)];\n if (internalNode != null) {\n if (seenNodes == null) {\n seenNodes = new Object();\n }\n data.parent = null;\n data.root = internalNode;\n data.edge = null;\n if (trackAncestors) {\n // Set up hash code for root\n internalNode.hashCode = [];\n internalNode.hashCode[0] = this.dfsCount;\n internalNode.hashCode[1] = i;\n this.extendedDfs(visitor, seenNodes, i, 0, data);\n }\n else {\n this.depthFirstSearch(visitor, seenNodes, 0, data);\n }\n }\n }\n this.dfsCount++;\n }\n };\n //used to perform the depth fisrt search on the layout model\n MultiParentModel.prototype.depthFirstSearch = function (visitor, seen, layer, data) {\n //let seenNodes1: {} = data.seenNodes;\n //let unseenNodes1: {} = data.unseenNodes;\n //let rankList: IVertex[][] = data.rankList;\n //let parent: IVertex = data.parent;\n var root = data.root;\n //let edge: IEdge = data.edge;\n if (root != null) {\n var rootId = root.id;\n if (seen[\"\" + rootId] == null) {\n seen[\"\" + rootId] = root;\n this.updateConnectionRank(visitor, layer, 0, data);\n // Copy the connects as source list so that visitors can change the original for edge direction inversions\n var outgoingEdges = root.connectsAsSource.slice();\n for (var i = 0; i < outgoingEdges.length; i++) {\n var internalEdge = outgoingEdges[parseInt(i.toString(), 10)];\n var targetNode = internalEdge.target;\n // Root check is O(|roots|)\n data.parent = root;\n data.root = targetNode;\n data.edge = internalEdge;\n this.depthFirstSearch(visitor, seen, layer + 1, data);\n }\n }\n else {\n this.updateConnectionRank(visitor, layer, 1, data);\n }\n }\n };\n //Updates the rank of the connection\n MultiParentModel.prototype.updateConnectionRank = function (visitor, layer, seen, traversedList) {\n var parent = traversedList.parent;\n var root = traversedList.root;\n var edge = traversedList.edge;\n if (visitor === 'removeParentConnection' || visitor === 'removeNodeConnection') {\n var remove = visitor === 'removeNodeConnection';\n this.removeConnectionEdge(parent, root, edge, layer, traversedList, remove);\n }\n if (visitor === 'updateMinMaxRank') {\n this.updateMinMaxRank(layer, seen, traversedList);\n }\n };\n //Removes the edge from the collection\n MultiParentModel.prototype.removeConnectionEdge = function (parent, node, edge, layer, data, remove) {\n var seenNodes = data.seenNodes;\n var unseenNodes = data.unseenNodes;\n //let rankList: IVertex[][] = data.rankList;\n if (this.hierarchicalUtil.isAncestor(node, parent)) {\n this.hierarchicalUtil.invert(edge, 0);\n this.hierarchicalUtil.remove(edge, parent.connectsAsSource);\n if (remove) {\n node.connectsAsSource.push(edge);\n parent.connectsAsTarget.push(edge);\n this.hierarchicalUtil.remove(edge, node.connectsAsTarget);\n }\n else {\n parent.connectsAsTarget.push(edge);\n this.hierarchicalUtil.remove(edge, node.connectsAsTarget);\n node.connectsAsSource.push(edge);\n }\n }\n seenNodes[node.id] = node;\n delete unseenNodes[node.id];\n };\n //the dfs extends the default version by keeping track of cells ancestors, but it should be only used when necessary\n MultiParentModel.prototype.extendedDfs = function (visitor, seen, cHash, layer, data) {\n //let seenNodes: {} = data.seenNodes;\n //let unseenNodes: {} = data.unseenNodes;\n //let rankList: IVertex[][] = data.rankList;\n var parent = data.parent;\n var root = data.root;\n var edge = data.edge;\n if (root != null) {\n if (parent != null) {\n if (root.hashCode == null ||\n root.hashCode[0] !== parent.hashCode[0]) {\n var hashCodeLength = parent.hashCode.length + 1;\n root.hashCode = parent.hashCode.slice();\n root.hashCode[hashCodeLength - 1] = cHash;\n }\n }\n var rootId = root.id;\n if (seen[\"\" + rootId] == null) {\n seen[\"\" + rootId] = root;\n this.updateConnectionRank(visitor, layer, 0, data);\n var outgoingEdges = root.connectsAsSource.slice();\n for (var i = 0; i < outgoingEdges.length; i++) {\n var internalEdge = outgoingEdges[parseInt(i.toString(), 10)];\n var targetNode = internalEdge.target;\n data.parent = root;\n data.root = targetNode;\n data.edge = internalEdge;\n this.extendedDfs(visitor, seen, i, layer + 1, data);\n }\n }\n else {\n this.updateConnectionRank(visitor, layer, 1, data);\n }\n }\n };\n /**\n * used to clone the specified object ignoring all fieldnames in the given array of transient fields \\\n *\n * @returns { void } used to clone the specified object ignoring all fieldnames in the given array of transient fields .\\\n * @param {Object} obj - provide the source value.\n * @param {string[]} transients - provide the target value.\n * @param {boolean} shallow - provide the shallow value.\n *\n * @private\n */\n MultiParentModel.prototype.clone = function (obj, transients, shallow) {\n shallow = (shallow != null) ? shallow : false;\n if (obj != null && typeof (obj.constructor) === 'function') {\n var clonedObj = obj.constructor();\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var i = _a[_i];\n if (i !== 'layoutObjectId' && (transients == null || transients.indexOf(i) < 0)) {\n if (!shallow && typeof (obj[\"\" + i]) === 'object') ;\n else {\n clonedObj[\"\" + i] = obj[\"\" + i];\n }\n }\n }\n return clonedObj;\n }\n return null;\n };\n return MultiParentModel;\n}());\n/**\n * Defines how to reduce the crosses in between the line segments\n */\nvar CrossReduction = /** @__PURE__ @class */ (function () {\n function CrossReduction() {\n }\n /**\n * used to calculate the number of edges crossing the layout model \\\n *\n * @returns { number } used to calculate the number of edges crossing the layout model\\\n * @param {MultiParentModel} model - provide the model value.\n *\n * @private\n */\n CrossReduction.prototype.calculateCrossings = function (model) {\n var numRanks = model.ranks.length;\n var totalCrossings = 0;\n for (var i = 1; i < numRanks; i++) {\n totalCrossings += this.calculateRankCrossing(i, model);\n }\n return totalCrossings;\n };\n /**\n * used to get the temp value specified for the node or connector. \\\n *\n * @returns { boolean } used to get the temp value specified for the node or connector.\\\n * @param {IVertex} node - provide the node value.\n * @param {IVertex} layer - provide the layer value.\n *\n * @private\n */\n CrossReduction.prototype.getTempVariable = function (node, layer) {\n if (node) {\n if (this.isVertex(node)) {\n return node.temp[0];\n }\n else {\n return node.temp[layer - node.minRank - 1];\n }\n }\n return 0;\n };\n //used to specify the number of conenctors crossing between the specified rank and its below rank\n CrossReduction.prototype.calculateRankCrossing = function (i, model) {\n var totalCrossings = 0;\n var rank = model.ranks[parseInt(i.toString(), 10)];\n var previousRank = model.ranks[i - 1];\n var tmpIndices = [];\n // Iterate over the top rank and fill in the connection information\n for (var j = 0; j < rank.length; j++) {\n var node = rank[parseInt(j.toString(), 10)];\n var rankPosition = this.getTempVariable(node, i);\n var connectedCells = this.getConnectedCellsOnLayer(node, i, true);\n ///####\n var nodeIndices = [];\n for (var k = 0; k < connectedCells.length; k++) {\n var connectedNode = connectedCells[parseInt(k.toString(), 10)];\n var otherCellRankPosition = this.getTempVariable(connectedNode, i - 1);\n nodeIndices.push(otherCellRankPosition);\n }\n nodeIndices.sort(function (x, y) { return x - y; });\n tmpIndices[parseInt(rankPosition.toString(), 10)] = nodeIndices;\n }\n var indices = [];\n for (var j = 0; j < tmpIndices.length; j++) {\n indices = indices.concat(tmpIndices[parseInt(j.toString(), 10)]);\n }\n var firstIndex = 1;\n while (firstIndex < previousRank.length) {\n firstIndex <<= 1;\n }\n var treeSize = 2 * firstIndex - 1;\n firstIndex -= 1;\n var tree = [];\n for (var j = 0; j < treeSize; ++j) {\n tree[parseInt(j.toString(), 10)] = 0;\n }\n for (var j = 0; j < indices.length; j++) {\n var index = indices[parseInt(j.toString(), 10)];\n var treeIndex = index + firstIndex;\n ++tree[parseInt(treeIndex.toString(), 10)];\n while (treeIndex > 0) {\n if (treeIndex % 2) {\n totalCrossings += tree[treeIndex + 1];\n }\n treeIndex = (treeIndex - 1) >> 1;\n ++tree[parseInt(treeIndex.toString(), 10)];\n }\n }\n return totalCrossings;\n };\n /**\n * Calculates and reduces the crosses between line segments\n *\n * @returns { void }Calculates and reduces the crosses between line segments.\\\n * @param {MultiParentModel} model - provide the target value.\n * @private\n */\n CrossReduction.prototype.execute = function (model) {\n // Stores initial ordering\n this.nestedBestRanks = [];\n for (var i = 0; i < model.ranks.length; i++) {\n this.nestedBestRanks[parseInt(i.toString(), 10)] = model.ranks[parseInt(i.toString(), 10)].slice();\n }\n var iterationsWithoutImprovement = 0;\n var currentBestCrossings = this.calculateCrossings(model);\n for (var i = 0; i < 24 && iterationsWithoutImprovement < 2; i++) {\n this.weightedMedian(i, model);\n var candidateCrossings = this.calculateCrossings(model);\n if (candidateCrossings < currentBestCrossings) {\n currentBestCrossings = candidateCrossings;\n iterationsWithoutImprovement = 0;\n for (var j = 0; j < this.nestedBestRanks.length; j++) {\n var rank = model.ranks[parseInt(j.toString(), 10)];\n for (var k = 0; k < rank.length; k++) {\n var cell = rank[parseInt(k.toString(), 10)];\n var obj = this.nestedBestRanks[parseInt(j.toString(), 10)][cell.temp[0]];\n var check = true;\n if (cell.edges && obj && !obj.edges) {\n check = false;\n }\n if (obj && check) {\n this.nestedBestRanks[parseInt(j.toString(), 10)][cell.temp[0]] = cell;\n }\n }\n }\n }\n else {\n // Increase count of iterations\n iterationsWithoutImprovement++;\n // Restore the best values to the cells\n for (var j = 0; j < this.nestedBestRanks.length; j++) {\n var rank = model.ranks[parseInt(j.toString(), 10)];\n for (var k = 0; k < rank.length; k++) {\n var cell = rank[parseInt(k.toString(), 10)];\n this.setTempVariable(cell, j, k);\n }\n }\n }\n if (currentBestCrossings === 0) {\n break;\n }\n }\n // Store the best rankings but in the model\n var ranks = [];\n var rankList = [];\n for (var i = 0; i < model.maxRank + 1; i++) {\n rankList[parseInt(i.toString(), 10)] = [];\n ranks[parseInt(i.toString(), 10)] = rankList[parseInt(i.toString(), 10)];\n }\n for (var i = 0; i < this.nestedBestRanks.length; i++) {\n for (var j = 0; j < this.nestedBestRanks[parseInt(i.toString(), 10)].length; j++) {\n rankList[parseInt(i.toString(), 10)].push(this.nestedBestRanks[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)]);\n }\n }\n model.ranks = ranks;\n };\n /**\n * check whether the object is vertext or edge on the layout model. \\\n *\n * @returns { boolean } check whether the object is vertext or edge on the layout model..\\\n * @param {IVertex} node - provide the iteration value.\n *\n * @private\n */\n CrossReduction.prototype.isVertex = function (node) {\n if (node && node.cell && ((node.cell.inEdges && node.cell.inEdges.length) || (node.cell.outEdges && node.cell.outEdges.length))) {\n return true;\n }\n return false;\n };\n /**\n * used to move up or move down the node position on the adjacent ranks \\\n *\n * @returns { void } used to move up or move down the node position on the adjacent ranks.\\\n * @param {number} iteration - provide the iteration value.\n * @param {MultiParentModel} model - provide the model value.\n *\n * @private\n */\n CrossReduction.prototype.weightedMedian = function (iteration, model) {\n // Reverse sweep direction each time through this method\n var downwardSweep = (iteration % 2 === 0);\n if (downwardSweep) {\n for (var j = model.maxRank - 1; j >= 0; j--) {\n this.medianRank(j, downwardSweep);\n }\n }\n else {\n for (var j = 1; j < model.maxRank; j++) {\n this.medianRank(j, downwardSweep);\n }\n }\n };\n /**\n * used to get the node next(up) connected to the specified node or connector \\\n *\n * @returns { void } calculates the rank elements on the specified rank.\\\n * @param {IVertex} cell - provide the cell value.\n * @param {number} layer - provide the layer value.\n * @param {boolean} isPrevious - provide the isPrevious value.\n *\n * @private\n */\n CrossReduction.prototype.getConnectedCellsOnLayer = function (cell, layer, isPrevious) {\n if (isPrevious === void 0) { isPrevious = false; }\n var connectedlayer = 'nextLayerConnectedCells';\n var connectedAs = 'connectsAsTarget';\n if (isPrevious) {\n connectedlayer = 'previousLayerConnectedCells';\n connectedAs = 'connectsAsSource';\n }\n if (cell) {\n if (this.isVertex(cell)) {\n if (cell[\"\" + connectedlayer] == null) {\n cell[\"\" + connectedlayer] = [];\n cell[\"\" + connectedlayer][0] = [];\n for (var i = 0; i < cell[\"\" + connectedAs].length; i++) {\n var edge = cell[\"\" + connectedAs][parseInt(i.toString(), 10)];\n if (edge.maxRank === undefined) {\n edge.maxRank = -1;\n }\n if (edge.maxRank === -1 || (isPrevious ? (edge.minRank === layer - 1) : (edge.maxRank === layer + 1))) {\n // Either edge is not in any rank or no dummy nodes in edge, add node of other side of edge\n cell[\"\" + connectedlayer][0].push(isPrevious ? edge.target : edge.source);\n }\n else {\n // Edge spans at least two layers, add edge\n cell[\"\" + connectedlayer][0].push(edge);\n }\n }\n }\n return cell[\"\" + connectedlayer][0];\n }\n else {\n if (cell[\"\" + connectedlayer] == null) {\n cell[\"\" + connectedlayer] = [];\n for (var i = 0; i < cell.temp.length; i++) {\n cell[\"\" + connectedlayer][parseInt(i.toString(), 10)] = [];\n if (i === (isPrevious ? 0 : (cell.temp.length - 1))) {\n cell[\"\" + connectedlayer][parseInt(i.toString(), 10)].push(isPrevious ? cell.target : cell.source);\n }\n else {\n cell[\"\" + connectedlayer][parseInt(i.toString(), 10)].push(cell);\n }\n }\n }\n return cell[\"\" + connectedlayer][layer - cell.minRank - 1];\n }\n }\n return null;\n };\n /**\n * calculates the rank elements on the specified rank \\\n *\n * @returns { void } calculates the rank elements on the specified rank.\\\n * @param {IVertex[]} connectedCells - provide the cell value.\n * @param {number} rankValue - provide the layer value.\n *\n * @private\n */\n CrossReduction.prototype.medianValue = function (connectedCells, rankValue) {\n var medianValues = [];\n var arrayCount = 0;\n for (var i = 0; i < connectedCells.length; i++) {\n var cell = connectedCells[parseInt(i.toString(), 10)];\n medianValues[arrayCount++] = this.getTempVariable(cell, rankValue);\n }\n // sorts numerical order sort\n medianValues.sort(function (a, b) { return a - b; });\n if (arrayCount % 2 === 1) {\n // For odd numbers of adjacent vertices return the median\n return medianValues[Math.floor(arrayCount / 2)];\n }\n else if (arrayCount === 2) {\n return ((medianValues[0] + medianValues[1]) / 2.0);\n }\n else {\n var medianPoint = arrayCount / 2;\n var leftMedian = medianValues[medianPoint - 1] - medianValues[0];\n var rightMedian = medianValues[arrayCount - 1]\n - medianValues[parseInt(medianPoint.toString(), 10)];\n return (medianValues[medianPoint - 1] * rightMedian + medianValues[parseInt(medianPoint.toString(), 10)] * leftMedian)\n / (leftMedian + rightMedian);\n }\n };\n /**\n * get the temp value of the specified layer \\\n *\n * @returns { void } getDirection method .\\\n * @param {IVertex} cell - provide the cell value.\n * @param {layer} layer - provide the layer value.\n * @param {LayoutOrientation} value - provide the value value.\n *\n * @private\n */\n CrossReduction.prototype.setTempVariable = function (cell, layer, value) {\n if (cell) {\n cell.temp[0] = value;\n }\n };\n /**\n * used to minimize the node position on this rank and one of its adjacent ranks\n */\n CrossReduction.prototype.medianRank = function (rankValue, downwardSweep) {\n var numCellsForRank = this.nestedBestRanks[parseInt(rankValue.toString(), 10)].length;\n var medianValues = [];\n var reservedPositions = [];\n for (var i = 0; i < numCellsForRank; i++) {\n var cell = this.nestedBestRanks[parseInt(rankValue.toString(), 10)][parseInt(i.toString(), 10)];\n var sorterEntry = { medianValue: 0 };\n sorterEntry.cell = cell;\n // Flip whether or not equal medians are flipped on up and down sweeps\n //TODO re-implement some kind of nudge medianValues[i].nudge = !downwardSweep;\n var nextLevelConnectedCells = void 0;\n if (downwardSweep) {\n nextLevelConnectedCells = this.getConnectedCellsOnLayer(cell, rankValue);\n }\n else {\n nextLevelConnectedCells = this.getConnectedCellsOnLayer(cell, rankValue, true);\n }\n var nextRankValue = void 0;\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n downwardSweep ? nextRankValue = rankValue + 1 : nextRankValue = rankValue - 1;\n if (nextLevelConnectedCells != null && nextLevelConnectedCells.length !== 0) {\n sorterEntry.medianValue = this.medianValue(nextLevelConnectedCells, nextRankValue);\n medianValues.push(sorterEntry);\n }\n else {\n // Nodes with no adjacent vertices are flagged in the reserved array to\n //indicate they should be left in their current position.\n reservedPositions[this.getTempVariable(cell, rankValue)] = true;\n }\n }\n medianValues.sort(this.compare);\n // Set the new position of each node within the rank using its temp variable\n for (var i = 0; i < numCellsForRank; i++) {\n if (reservedPositions[parseInt(i.toString(), 10)] == null && medianValues.length > 0) {\n var cell = medianValues.shift().cell;\n this.setTempVariable(cell, rankValue, i);\n }\n }\n };\n //compares two values, it sends the values to the compare function,\n //and sorts the values according to the returned (negative, zero, positive) value\n CrossReduction.prototype.compare = function (a, b) {\n if (a != null && b != null) {\n if (b.medianValue > a.medianValue) {\n return -1;\n }\n else if (b.medianValue < a.medianValue) {\n return 1;\n }\n }\n return 0;\n };\n return CrossReduction;\n}());\nvar MatrixModel = /** @__PURE__ @class */ (function () {\n function MatrixModel() {\n this.edgeMapper = [];\n }\n /* tslint:disable */\n /** @private */\n /**\n * Arrange the elements\n *\n * @returns { void } arrange the elements.\\\n * @param {MatrixModelObject} matrixModel - provide the Matrix Model Object.\n * @param {Layout} layout - provide the layout value.\n *\n * @private\n */\n MatrixModel.prototype.arrangeElements = function (matrixModel, layout) {\n var layoutSettings = matrixModel.model.layout;\n var isHorizontal;\n if (layout.orientation === 'LeftToRight' || layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n else {\n isHorizontal = false;\n }\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n //let spacingInverse: number = !isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n // Need to group element before\n this.groupLayoutCells(matrixModel);\n this.createMatrixCells(matrixModel);\n for (var j = 0; j < matrixModel.matrix.length; j++) {\n var matrixKey = matrixModel.matrix[parseInt(j.toString(), 10)].key;\n var matrixrow = matrixModel.matrix[parseInt(matrixKey.toString(), 10)].value;\n for (var i = 1; i < matrixrow.length; i++) {\n var cell = matrixrow[parseInt(i.toString(), 10)];\n var prevCell = matrixrow[i - 1];\n cell.offset += prevCell.offset + (prevCell.size / 2) + spacing + (cell.size / 2);\n }\n }\n // Sort roots based on their indices\n matrixModel.roots.sort(function (a, b) {\n if (a.cells[0] && b.cells[0]) {\n var indexA = matrixModel.model.roots.indexOf(a.cells[0].cell);\n var indexB = matrixModel.model.roots.indexOf(b.cells[0].cell);\n return indexA - indexB;\n }\n return 0;\n });\n for (var j = 0; j < matrixModel.roots.length; j++) {\n var root = matrixModel.roots[parseInt(j.toString(), 10)];\n this.arrangeMatrix(root, null, matrixModel);\n }\n for (var k = 0; k < matrixModel.matrix.length; k++) {\n var row = matrixModel.matrix[parseInt(k.toString(), 10)].value;\n for (var i = 0; i < row.length; i++) {\n var cell = row[parseInt(i.toString(), 10)];\n if (cell.visitedParents.length > 1) {\n var firstParent = cell.visitedParents[0];\n var lastParent = cell.visitedParents[cell.visitedParents.length - 1];\n var firstVertexParent = this.findParentVertexCellGroup(firstParent);\n var lastVertexParent = this.findParentVertexCellGroup(lastParent);\n if (firstParent !== firstVertexParent && firstVertexParent.offset < firstParent.offset) {\n firstParent = firstVertexParent;\n }\n if (lastParent !== lastVertexParent && lastVertexParent.offset > lastParent.offset) {\n lastParent = firstVertexParent;\n }\n var newoffset = (lastParent.offset + lastParent.size * 0.5 + firstParent.offset - firstParent.size * 0.5) / 2;\n var availOffsetMin = cell.initialOffset;\n var availOffsetMax = cell.offset;\n if (!(availOffsetMax === availOffsetMin)) {\n if (newoffset >= availOffsetMin && newoffset <= availOffsetMax) {\n this.translateMatrixCells(newoffset - cell.offset, cell);\n }\n else if (newoffset < availOffsetMin) {\n this.translateMatrixCells(availOffsetMin - cell.offset, cell);\n }\n }\n }\n }\n }\n this.setXYforMatrixCell(matrixModel);\n };\n /* tslint:enable */\n MatrixModel.prototype.groupLayoutCells = function (matrixModel) {\n var ranks = matrixModel.model.ranks;\n for (var j = ranks.length - 1; j >= 0; j--) {\n var vertices = [];\n for (var v = 0; v < ranks[parseInt(j.toString(), 10)].length; v++) {\n var rank = ranks[parseInt(j.toString(), 10)][parseInt(v.toString(), 10)];\n var type = this.getType(rank.type);\n if (type === 'internalVertex') {\n vertices.push(ranks[parseInt(j.toString(), 10)][parseInt(v.toString(), 10)]);\n }\n }\n var edges = [];\n for (var e = 0; e < ranks[parseInt(j.toString(), 10)].length; e++) {\n var rank = ranks[parseInt(j.toString(), 10)][parseInt(e.toString(), 10)];\n var type = this.getType(rank.type);\n if (type === 'internalEdge') {\n edges.push(rank);\n }\n }\n while (vertices.length > 1) {\n var vertex1 = vertices[0];\n var parentset1 = this.selectIds(vertex1.connectsAsTarget, true);\n var childset1 = this.selectIds(vertex1.connectsAsSource, false);\n while (vertices.length > 1) {\n var vertex2 = vertices[1];\n var parentset2 = this.selectIds(vertex2.connectsAsTarget, true);\n var childset2 = this.selectIds(vertex2.connectsAsSource, false);\n var parentequals = this.compareLists(parentset1, parentset2);\n var childequals = this.compareLists(childset1, childset2);\n if (parentequals && childequals) {\n this.updateMutualSharing(vertices[0], vertex2.id);\n this.updateMutualSharing(vertices[1], vertex1.id);\n vertices.splice(1, 1);\n continue;\n }\n break;\n }\n vertices.splice(0, 1);\n }\n while (edges.length > 1) {\n var internalEdge = edges[0];\n var parentset = internalEdge.source;\n var childset = internalEdge.target;\n if (parentset.identicalSibiling != null) {\n var groupedges = [];\n for (var i = 0; i < edges.length; i++) {\n var edge = edges[parseInt(i.toString(), 10)];\n if (edge.target === childset) {\n groupedges.push(edge);\n }\n }\n for (var i = 0; i < groupedges.length; i++) {\n var internalEdgese = groupedges[parseInt(i.toString(), 10)];\n if (this.containsValue(parentset.identicalSibiling, internalEdgese.source.id)) {\n internalEdgese.source.identicalSibiling = null;\n }\n }\n internalEdge.source.identicalSibiling = null;\n }\n edges.splice(0, 1);\n }\n }\n };\n /* tslint:disable */\n MatrixModel.prototype.createMatrixCells = function (matrixModel) {\n var layoutSettings = matrixModel.model.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight'\n || layoutSettings.orientation === 'RightToLeft';\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n var spacingInverse = !isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n var ranks = matrixModel.model.ranks;\n var matrixCellMapper = [];\n var rowoffset = -spacingInverse;\n for (var j = ranks.length - 1; j >= 0; j--) {\n var maxDimension = 0.0;\n var index = (ranks.length - 1) - j;\n var rank = ranks[parseInt(j.toString(), 10)].slice(); //.ToList();\n // Creating new row and adding it to matrix\n var matrixRow = [];\n matrixModel.matrix.push({ key: index, value: matrixRow });\n // Creating new row mapper\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var tempMatrixRow = [];\n matrixCellMapper.push({ index: index, value: tempMatrixRow });\n while (rank.length > 0) //.Any())\n {\n var layoutCell = rank[0];\n // eslint-disable-next-line max-len\n var matrixCell = { level: index, parents: [], children: [], visitedParents: [], visitedChildren: [], ignoredChildren: [], cells: [], size: 0, offset: 0, initialOffset: 0 };\n matrixRow.push(matrixCell);\n var type = this.getType(layoutCell.type);\n if (type === 'internalVertex') {\n matrixCell.cells.push(layoutCell);\n if (layoutCell.identicalSibiling != null) {\n for (var i = 0; i < rank.length; i++) {\n var internalVertex = rank[parseInt(i.toString(), 10)];\n var type_1 = this.getType(internalVertex.type);\n if (type_1 === 'internalVertex' && this.containsValue(layoutCell.identicalSibiling, internalVertex.id)) {\n matrixCell.cells.push(internalVertex);\n if (matrixCell.cells.length > layoutCell.identicalSibiling.length) {\n break;\n }\n }\n }\n }\n for (var i = 0; i < matrixCell.cells.length; i++) {\n var internalVertex = matrixCell.cells[parseInt(i.toString(), 10)];\n var type_2 = this.getType(internalVertex.type);\n if (type_2 === 'internalVertex') {\n var geometry = internalVertex.cell.geometry;\n matrixCell.size += isHorizontal ? geometry.height : geometry.width;\n maxDimension = Math.max(maxDimension, !isHorizontal ? geometry.height : geometry.width);\n tempMatrixRow.push({ key: internalVertex.id, value: matrixCell });\n if (internalVertex.connectsAsTarget.length > 0) {\n for (var k = 0; k < internalVertex.connectsAsTarget.length; k++) {\n var internalEdgese = internalVertex.connectsAsTarget[parseInt(k.toString(), 10)];\n var key = null;\n if (this.containsValue(matrixCellMapper[index - 1].value, internalEdgese.ids)) {\n key = internalEdgese.ids;\n }\n else if (this.containsValue(matrixCellMapper[index - 1].value, internalEdgese.source.id)) {\n key = internalEdgese.source.id;\n }\n if (key != null) {\n var parentcellValue = matrixCellMapper[index - 1].value;\n var parentMartixCell = void 0;\n for (var v = 0; v < parentcellValue.length; v++) {\n if (parentcellValue[parseInt(v.toString(), 10)].key === key) {\n parentMartixCell = parentcellValue[parseInt(v.toString(), 10)].value;\n break;\n }\n }\n if (!this.containsValue(matrixCell.parents, parentMartixCell)) {\n matrixCell.parents.push(parentMartixCell);\n }\n if (!this.containsValue(parentMartixCell.children, matrixCell)) {\n parentMartixCell.children.push(matrixCell);\n }\n }\n }\n }\n rank.reverse();\n rank.pop();\n rank.reverse();\n }\n }\n matrixCell.size += (matrixCell.cells.length - 1) * spacing;\n }\n else if (type === 'internalEdge') {\n matrixCell.cells.push(layoutCell);\n for (var i = 0; i < matrixCell.cells.length; i++) {\n var internalEdge = matrixCell.cells[parseInt(i.toString(), 10)];\n var type1 = this.getType(internalEdge.type);\n if (type1 === 'internalEdge' && internalEdge.edges != null) {\n // need to spacing based on its source and target Node\n var edgeSpacing = 5;\n var cellSize = -edgeSpacing;\n for (var k = 0; k < internalEdge.edges.length; k++) {\n //const internalConnector = internalEdge.edges[k];\n // need to summ up the line width\n cellSize += 1 + edgeSpacing;\n }\n matrixCell.size += cellSize;\n }\n tempMatrixRow.push({ key: internalEdge.ids, value: matrixCell });\n var key = null;\n if (this.containsValue(matrixCellMapper[index - 1].value, internalEdge.ids)) {\n key = internalEdge.ids;\n }\n else if (this.containsValue(matrixCellMapper[index - 1].value, internalEdge.source.id)) {\n key = internalEdge.source.id;\n }\n if (key != null) {\n var parentcell = matrixCellMapper[index - 1].value;\n var parentMartixCell = void 0;\n for (var v = 0; v < parentcell.length; v++) {\n if (parentcell[parseInt(v.toString(), 10)].key === key) {\n parentMartixCell = parentcell[parseInt(v.toString(), 10)].value;\n break;\n }\n }\n if (!this.containsValue(matrixCell.parents, parentMartixCell)) {\n matrixCell.parents.push(parentMartixCell);\n }\n if (!this.containsValue(parentMartixCell.children, matrixCell)) {\n parentMartixCell.children.push(matrixCell);\n }\n }\n rank.reverse();\n rank.pop();\n rank.reverse();\n }\n matrixCell.size += (matrixCell.cells.length - 1) * spacing;\n }\n if (matrixCell.cells.length) {\n var internalVertices = matrixCell.cells.filter(function (e) { return e.type === 'internalVertex'; });\n if (internalVertices.length > 0) {\n var _loop_1 = function (cell) {\n var vertex = cell.cell;\n if (matrixModel.model.roots.some(function (root) { return root === vertex; })) {\n matrixModel.roots.push(matrixCell);\n return \"break\";\n }\n };\n for (var _i = 0, internalVertices_1 = internalVertices; _i < internalVertices_1.length; _i++) {\n var cell = internalVertices_1[_i];\n var state_1 = _loop_1(cell);\n if (state_1 === \"break\")\n break;\n }\n }\n }\n }\n matrixModel.rowOffset.push(rowoffset + (maxDimension / 2) + spacingInverse);\n rowoffset += maxDimension + spacingInverse;\n }\n };\n MatrixModel.prototype.arrangeMatrix = function (cell, parent, matrixModel) {\n var layoutSettings = matrixModel.model.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight'\n || layoutSettings.orientation === 'RightToLeft';\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n var matrix = matrixModel.matrix;\n var matrixRow = matrix[cell.level].value;\n var matrixIndex = matrixRow.indexOf(cell);\n if (cell.visitedParents.length > 0) {\n if (cell.visitedParents.length === 1) {\n cell.initialOffset = cell.offset;\n }\n if (matrixIndex + 1 < matrixRow.length) {\n var nextCell = matrixRow[matrixIndex + 1];\n if (nextCell.visitedParents.length > 0) {\n if (!this.containsValue(cell.visitedParents, parent)) {\n cell.visitedParents.push(parent);\n parent.ignoredChildren.push(cell);\n return;\n }\n }\n }\n }\n if (!(cell.children.length > 0)) {\n var validOffset = cell.offset;\n if (matrixIndex > 0) {\n var prevCell = matrixRow[matrixIndex - 1];\n validOffset = prevCell.offset + (prevCell.size / 2) + spacing + (cell.size / 2);\n }\n this.shiftMatrixCells(validOffset - cell.offset, cell, false, null, matrixModel);\n }\n else {\n for (var i = 0; i < cell.children.length; i++) {\n var matrixCellChild = cell.children[parseInt(i.toString(), 10)];\n if (!this.containsValue(cell.visitedChildren, matrixCellChild)) {\n this.arrangeMatrix(matrixCellChild, cell, matrixModel);\n cell.visitedChildren.push(matrixCellChild);\n }\n }\n if (cell.visitedChildren.length > 0) {\n var children = cell.visitedChildren.slice();\n for (var i = 0; i < cell.ignoredChildren.length; i++) {\n //let cellIgnoredChild: MatrixCellGroupObject = cell.ignoredChildren[i];\n children.splice(0, 1);\n cell.visitedChildren.splice(0, 1);\n }\n if (children.length > 0) {\n var firstChild = cell.visitedChildren[0];\n var lastChild = cell.visitedChildren[cell.visitedChildren.length - 1];\n var x1 = firstChild.offset - (firstChild.size / 2);\n var x2 = lastChild.offset + (lastChild.size / 2);\n var newoffset = (x1 + x2) / 2;\n if (newoffset < cell.offset) {\n this.shiftMatrixCells(cell.offset - newoffset, firstChild, true, cell, matrixModel);\n }\n else if (newoffset > cell.offset) {\n this.shiftMatrixCells(newoffset - cell.offset, cell, false, null, matrixModel);\n }\n }\n }\n }\n if (!this.containsValue(cell.visitedParents, parent)) {\n cell.visitedParents.push(parent);\n }\n };\n MatrixModel.prototype.findParentVertexCellGroup = function (cell) {\n if (cell.cells[0]) {\n return cell;\n }\n if (cell.parents.length > 0) {\n return this.findParentVertexCellGroup(cell.parents[0]);\n }\n return cell;\n };\n MatrixModel.prototype.translateMatrixCells = function (value, cell) {\n if (!(value === 0)) {\n cell.offset += value;\n if (cell.visitedChildren.length > 0) {\n for (var i = 0; i < cell.visitedChildren.length; i++) {\n var cellVisitedChild = cell.visitedChildren[parseInt(i.toString(), 10)];\n this.translateMatrixCells(value, cellVisitedChild);\n }\n }\n }\n };\n MatrixModel.prototype.setXYforMatrixCell = function (matrixModel) {\n var layoutSettings = matrixModel.model.layout;\n var isHorizontal = layoutSettings.orientation === 'LeftToRight'\n || layoutSettings.orientation === 'RightToLeft';\n var spacing = isHorizontal ? layoutSettings.verticalSpacing : layoutSettings.horizontalSpacing;\n for (var i = 0; i < matrixModel.matrix.length; i++) {\n var matrixrow1 = matrixModel.matrix[parseInt(i.toString(), 10)].value;\n for (var j = 0; j < matrixrow1.length; j++) {\n var matrixCell = matrixrow1[parseInt(j.toString(), 10)];\n var start = matrixCell.offset - (matrixCell.size / 2);\n for (var k = 0; k < matrixCell.cells.length; k++) {\n var cell = matrixCell.cells[parseInt(k.toString(), 10)];\n var type = this.getType(cell.type);\n if (type === 'internalVertex') {\n var internalVertex = cell;\n var width = internalVertex.cell.geometry.width;\n var height = internalVertex.cell.geometry.height;\n if (isHorizontal) {\n internalVertex.cell.geometry = new Rect(matrixModel.rowOffset[matrixCell.level] - (width / 2), start, width, height);\n }\n else {\n internalVertex.cell.geometry = new Rect(start, matrixModel.rowOffset[matrixCell.level] - (height / 2), width, height);\n }\n start += (isHorizontal ? height : width) + spacing;\n }\n else if (type === 'internalEdge') {\n var internalEdges = cell;\n var parent_1 = matrixCell.visitedParents[0];\n if (parent_1) {\n for (var l = 0; l < parent_1.visitedChildren.length; l++) {\n var children = parent_1.visitedChildren[parseInt(l.toString(), 10)];\n var cells = [];\n for (var m = 0; m < children.cells.length; m++) {\n var cell_1 = children.cells[parseInt(m.toString(), 10)];\n var type_3 = this.getType(cell_1.type);\n if (type_3 === 'internalVertex') {\n cells.push(cell_1);\n }\n }\n if (cells.length > 0) {\n break;\n }\n }\n }\n // Need to updated line width\n var lineWidth = 1;\n var edgeSpacing = 5;\n for (var m = 0; m < internalEdges.edges.length; m++) {\n var internalConnector = internalEdges.edges[parseInt(m.toString(), 10)];\n var pt = this.getPointvalue(start + (lineWidth / 2.0), matrixModel.rowOffset[matrixCell.level]);\n if (isHorizontal) {\n pt = this.getPointvalue(matrixModel.rowOffset[matrixCell.level], start + (lineWidth / 2.0));\n }\n if (this.containsValue(this.getEdgeMapper(), internalConnector)) {\n var key = void 0;\n for (var l = 0; l < this.getEdgeMapper().length; l++) {\n if ((this.getEdgeMapper())[parseInt(l.toString(), 10)].key === internalConnector) {\n key = l;\n break;\n }\n }\n (this.getEdgeMapper())[parseInt(key.toString(), 10)].value.push(pt);\n }\n start += lineWidth + edgeSpacing;\n }\n start += spacing;\n }\n }\n }\n }\n };\n MatrixModel.prototype.getType = function (type) {\n if (type === 'internalVertex') {\n return 'internalVertex';\n }\n else {\n return 'internalEdge';\n }\n };\n MatrixModel.prototype.selectIds = function (node, source) {\n var returnIds = [];\n for (var i = 0; i < node.length; i++) {\n var connector = node[parseInt(i.toString(), 10)];\n if (source) {\n {\n returnIds.push(connector.source.id);\n }\n }\n else {\n returnIds.push(connector.target.id);\n }\n }\n return returnIds;\n };\n MatrixModel.prototype.compareLists = function (list1, list2) {\n var newList1 = list1.slice();\n var newList2 = list2.slice();\n if (newList1.length === newList2.length) {\n if (newList1.length === 0) {\n return true;\n }\n else {\n var isSame = true;\n for (var i = 0; i < newList2.length; i++) {\n var o = newList2[parseInt(i.toString(), 10)];\n // EJ2-63944 - Nodes overlapping in Complex hierarchical tree layout in linear arrangement.\n if (newList1.indexOf(o) === -1) {\n isSame = false;\n break;\n }\n }\n return isSame;\n }\n }\n return false;\n };\n MatrixModel.prototype.updateMutualSharing = function (cell, id) {\n if (cell.identicalSibiling != null) {\n cell.identicalSibiling.push(id);\n }\n else {\n cell.identicalSibiling = [];\n cell.identicalSibiling.push(id);\n }\n };\n MatrixModel.prototype.containsValue = function (list, keyValue) {\n for (var i = 0; i < list.length; i++) {\n if (list[parseInt(i.toString(), 10)].key === keyValue\n || list[parseInt(i.toString(), 10)] === keyValue) {\n return true;\n }\n }\n return false;\n };\n MatrixModel.prototype.shiftMatrixCells = function (value, startingCell, shiftChildren, parentCell, matrixModel) {\n if (!(value === 0)) {\n var matrix = matrixModel.matrix;\n var matrixRow = matrix[startingCell.level].value;\n var index = matrixRow.indexOf(startingCell);\n for (var i = index; i < matrixRow.length; i++) {\n matrixRow[parseInt(i.toString(), 10)].offset += value;\n }\n if (shiftChildren) {\n if (startingCell.visitedChildren.length > 0) {\n this.shiftMatrixCells(value, startingCell.visitedChildren[0], true, startingCell, matrixModel);\n }\n else {\n var i = 1;\n var nextSibilingwithChild = null;\n while (index + i < matrixRow.length) {\n var nextCell = matrixRow[index + i];\n if (parentCell != null && this.containsValue(nextCell.visitedParents, parentCell)) {\n if (nextCell.visitedChildren.length > 0) {\n nextSibilingwithChild = nextCell;\n }\n else {\n i++;\n continue;\n }\n }\n break;\n }\n if (nextSibilingwithChild != null) {\n this.shiftMatrixCells(value, nextSibilingwithChild.visitedChildren[0], true, nextSibilingwithChild, matrixModel);\n }\n }\n }\n }\n };\n MatrixModel.prototype.getPointvalue = function (x, y) {\n return { 'x': Number(x) || 0, 'y': Number(y) || 0 };\n };\n MatrixModel.prototype.getEdgeMapper = function () {\n return this.edgeMapper;\n };\n MatrixModel.prototype.setEdgeMapper = function (value) {\n this.edgeMapper.push(value);\n };\n MatrixModel.prototype.updateLayout = function (viewPort, modelBounds, layoutProp, layout, nodeWithMultiEdges, nameTable) {\n var trnsX = ((viewPort.x - modelBounds.width) / 2) - modelBounds.x;\n var trnsY = ((viewPort.y - modelBounds.height) / 2) - modelBounds.y;\n trnsX = Math.round(trnsX);\n trnsY = Math.round(trnsY);\n var modifiedConnectors = [];\n var transModelBounds = new Rect(modelBounds.x + trnsX, modelBounds.y + trnsY, modelBounds.width, modelBounds.height);\n var margin = layoutProp.margin;\n var isHorizontal = layout.orientation === 'RightToLeft' || layout.orientation === 'LeftToRight';\n var inversespacing = !isHorizontal ? layout.verticalSpacing : layout.horizontalSpacing;\n for (var i = 0; i < nodeWithMultiEdges.length; i++) {\n var node = nodeWithMultiEdges[parseInt(i.toString(), 10)];\n if (node.outEdges != null && node.outEdges.length > 0) {\n var count = node.outEdges.length;\n for (var j = 0; j < count; j++) {\n var internalConnector = nameTable[node.outEdges[parseInt(j.toString(), 10)]];\n internalConnector['pointCollection'] = [];\n if (count > 1) {\n var segmentsize = inversespacing / 2.0;\n var intermediatePoint = null;\n var key = void 0;\n var edgeMapper = this.getEdgeMapper();\n for (var k = 0; k < edgeMapper.length; k++) {\n if (edgeMapper[parseInt(k.toString(), 10)].key === internalConnector) {\n key = k;\n break;\n }\n }\n if (edgeMapper[parseInt(key.toString(), 10)].value.length > 0) {\n var edgePoint = edgeMapper[parseInt(key.toString(), 10)].value[0];\n var dxValue1 = edgePoint.x + margin.left;\n var dyValue1 = edgePoint.y + margin.top;\n var x1 = dxValue1;\n var y1 = dyValue1;\n if (layout.orientation === 'BottomToTop') {\n y1 = modelBounds.height - dyValue1;\n }\n else if (layout.orientation === 'RightToLeft') {\n x1 = modelBounds.width - dxValue1;\n }\n x1 += trnsX;\n y1 += trnsY;\n intermediatePoint = this.getPointvalue(x1, y1);\n }\n var pts = [];\n for (var i_1 = 0; i_1 < internalConnector.segments.length; i_1++) {\n var pt = internalConnector.segments[parseInt(i_1.toString(), 10)].points;\n // eslint-disable-next-line guard-for-in\n for (var temp in pt) {\n pts.push(pt[parseInt(temp.toString(), 10)]);\n }\n }\n // eslint-disable-next-line max-len\n pts = this.updateConnectorPoints(pts, segmentsize, intermediatePoint, transModelBounds, layout.orientation);\n for (var p = 0; p < pts.length; p++) {\n var pt = pts[parseInt(p.toString(), 10)];\n internalConnector['pointCollection'].push(this.getPointvalue(pt.x, pt.y));\n }\n this.resetConnectorPoints(internalConnector);\n }\n modifiedConnectors.push(internalConnector);\n }\n }\n if (node.inEdges != null && node.inEdges.length > 1) {\n var count = node.inEdges.length;\n var edgeMapper = this.getEdgeMapper();\n for (var j = 0; j < count; j++) {\n var internalConnector = nameTable[node.inEdges[parseInt(j.toString(), 10)]];\n if (!this.containsValue(modifiedConnectors, internalConnector)) {\n internalConnector['pointCollection'] = [];\n }\n if (count > 1) {\n var segmentsize = inversespacing / 2.0;\n var intermediatePoint = null;\n var key = void 0;\n var k = void 0;\n for (k = 0; k < edgeMapper.length; k++) {\n if (edgeMapper[parseInt(k.toString(), 10)].key === internalConnector) {\n key = k;\n break;\n }\n }\n if (edgeMapper[parseInt(key.toString(), 10)].value.length > 0\n && !this.containsValue(modifiedConnectors, internalConnector)) {\n var edgePt = edgeMapper[parseInt(k.toString(), 10)].value[0];\n var dx1 = edgePt.x + margin.left;\n var dy1 = edgePt.y + margin.top;\n // eslint-disable-next-line one-var\n var x1 = dx1, y1 = dy1;\n if (layout.orientation === 'BottomToTop') {\n y1 = modelBounds.height - dy1;\n }\n else if (layout.orientation === 'RightToLeft') {\n x1 = modelBounds.width - dx1;\n }\n x1 += trnsX;\n y1 += trnsY;\n intermediatePoint = this.getPointvalue(x1, y1);\n }\n var pts = [];\n for (var p = 0; p < internalConnector.segments.length; p++) {\n var pt = internalConnector.segments[parseInt(p.toString(), 10)].points;\n // eslint-disable-next-line guard-for-in\n for (var temp in pt) {\n pts.push(pt[parseInt(temp.toString(), 10)]);\n }\n }\n pts.reverse();\n // eslint-disable-next-line\n pts = this.updateConnectorPoints(pts, segmentsize, intermediatePoint, transModelBounds, layoutProp.orientation);\n pts.reverse();\n internalConnector['pointCollection'] = [];\n for (var p = 0; p < pts.length; p++) {\n var pt = pts[parseInt(p.toString(), 10)];\n internalConnector['pointCollection'].push(this.getPointvalue(pt.x, pt.y));\n }\n this.resetConnectorPoints(internalConnector);\n }\n }\n }\n }\n };\n MatrixModel.prototype.inflate = function (rect, x, y) {\n rect.x -= x;\n rect.y -= y;\n rect.width += 2 * x;\n rect.height += 2 * y;\n return rect;\n };\n MatrixModel.prototype.updateConnectorPoints = function (connectorPoints, startSegmentSize, intermediatePoint, bounds, orientation) {\n var layoutBounds = bounds;\n var isHorizontal = orientation === 'LeftToRight' || orientation === 'RightToLeft';\n var pts = connectorPoints;\n if (pts.length > 2) {\n var newPt = Point.transform(pts[0], Point.findAngle(pts[0], pts[1]), startSegmentSize);\n var nextPt = Point.transform(newPt, Point.findAngle(pts[1], pts[2]), Point.findLength(pts[1], pts[2]));\n pts.splice(1, 2, newPt, nextPt);\n if (intermediatePoint != null) {\n var index = 2;\n var ptsCount = pts.length;\n var newPt1 = Point.transform(pts[ptsCount - 1], Point.findAngle(pts[ptsCount - 1], pts[ptsCount - 2]), startSegmentSize);\n pts.splice(ptsCount - 1, 0, newPt1);\n while (index < (pts.length - 2)) {\n pts.splice(index, 1);\n }\n var edgePt = intermediatePoint;\n this.inflate(layoutBounds, layoutBounds.width, layoutBounds.height);\n var line1 = [];\n line1[0] = this.getPointvalue(edgePt.x, layoutBounds.y);\n line1[1] = this.getPointvalue(edgePt.x, layoutBounds.y + layoutBounds.height);\n var line2 = [];\n line2[0] = this.getPointvalue(layoutBounds.x, pts[1].y);\n line2[1] = this.getPointvalue(layoutBounds.x + layoutBounds.width, pts[1].y);\n var line3 = [];\n line3[0] = this.getPointvalue(layoutBounds.x, newPt1.y);\n line3[1] = this.getPointvalue(layoutBounds.x + layoutBounds.width, newPt1.y);\n if (isHorizontal) {\n line1[0] = this.getPointvalue(layoutBounds.x, edgePt.y);\n line1[1] = this.getPointvalue(layoutBounds.x + layoutBounds.width, edgePt.y);\n line2[0] = this.getPointvalue(pts[1].x, layoutBounds.y);\n line2[1] = this.getPointvalue(pts[1].x, layoutBounds.y + layoutBounds.height);\n line3[0] = this.getPointvalue(newPt1.x, layoutBounds.y);\n line2[1] = this.getPointvalue(newPt1.x, layoutBounds.y + layoutBounds.height);\n }\n var intercepts1 = [intersect2(line1[0], line1[1], line2[0], line2[1])];\n var intercepts2 = [intersect2(line1[0], line1[1], line3[0], line3[1])];\n if (intercepts2.length > 0) {\n pts.splice(2, 0, intercepts2[0]);\n }\n if (intercepts1.length > 0) {\n pts.splice(2, 0, intercepts1[0]);\n }\n }\n }\n var i = 1;\n while (i < pts.length - 1) {\n if (Point.equals(pts[i - 1], pts[parseInt(i.toString(), 10)])) {\n pts.splice(i, 1);\n }\n else if (Point.findAngle(pts[i - 1], pts[parseInt(i.toString(), 10)])\n === Point.findAngle(pts[parseInt(i.toString(), 10)], pts[i + 1])) {\n pts.splice(i, 1);\n }\n else {\n i++;\n }\n }\n return pts;\n };\n MatrixModel.prototype.resetConnectorPoints = function (edge) {\n var obstacleCollection = 'obstaclePointCollection';\n if (edge.segments[0].points\n && edge.segments[0].points.length > 0 && edge[\"\" + obstacleCollection]) {\n var connector = edge;\n connector.sourcePoint = edge[\"\" + obstacleCollection][0];\n connector.targetPoint = edge[\"\" + obstacleCollection][edge[\"\" + obstacleCollection].length - 1];\n var segments = [];\n for (var i = 0; i < edge[\"\" + obstacleCollection].length - 1; i++) {\n var point1 = edge[\"\" + obstacleCollection][parseInt(i.toString(), 10)];\n var point2 = edge[\"\" + obstacleCollection][i + 1];\n var length_2 = findDistance(point1, point2);\n var direction = getConnectorDirection(point1, point2);\n if (i === edge[\"\" + obstacleCollection].length - 2) {\n if ((this.diagram.layout.orientation === 'RightToLeft' && direction === 'Left')\n || (this.diagram.layout.orientation === 'LeftToRight' && direction === 'Right')\n || (this.diagram.layout.orientation === 'TopToBottom' && direction === 'Bottom')\n || (this.diagram.layout.orientation === 'BottomToTop' && direction === 'Top')) {\n length_2 = length_2 / 2;\n }\n }\n /* tslint:enable */\n var tempSegment = new OrthogonalSegment(edge, 'segments', { type: 'Orthogonal' }, true);\n tempSegment.length = length_2;\n tempSegment.direction = direction;\n segments.push(tempSegment);\n }\n connector.segments = segments;\n connector.type = 'Orthogonal';\n this.diagram.connectorPropertyChange(connector, {}, {\n type: 'Orthogonal',\n segments: connector.segments\n });\n }\n };\n return MatrixModel;\n}());\n\nvar FlowchartModel = /** @__PURE__ @class */ (function () {\n function FlowchartModel(layout, root, vertices) {\n var _this = this;\n this.dfsCount = 0;\n this.maxRank = 100000000;\n this.layout = layout;\n this.vertexMapper = new Map();\n this.ranks = new Map();\n var internalVertices = [];\n this.createInternalCells(vertices, internalVertices);\n internalVertices.forEach(function (internalVertex) {\n var edges = internalVertex.internalOutEdges;\n edges.forEach(function (internalEdge) {\n var realEdges = internalEdge.edges;\n if (realEdges && realEdges.length > 0) {\n var realEdge = realEdges[0];\n var targetCell = _this.layout.getVisibleTerminal(realEdge, false);\n var internalTargetCell = _this.vertexMapper.get(targetCell.id);\n if (internalVertex === internalTargetCell) {\n targetCell = _this.layout.getVisibleTerminal(realEdge, true);\n internalTargetCell = _this.vertexMapper.get(targetCell.id);\n }\n if (internalTargetCell && internalVertex !== internalTargetCell) {\n internalEdge.target = internalTargetCell;\n if (internalVertex.internalInEdges.indexOf(internalEdge) === -1) {\n internalTargetCell.internalInEdges.push(internalEdge);\n }\n }\n }\n });\n });\n this.rootNode = this.vertexMapper.get(root.id);\n }\n FlowchartModel.prototype.createInternalCells = function (vertices, internalVertices) {\n for (var j = 0; j < vertices.length; j++) {\n var vertex = vertices[parseInt(j.toString(), 10)];\n var internalVertex = {\n tempRank: -1, cell: vertex, hashCode: [], maxRank: null, minRank: null,\n id: vertex.id, internalOutEdges: [], internalInEdges: [], identicalSibling: []\n };\n internalVertices.push(internalVertex);\n this.vertexMapper.set(vertex.id, internalVertex);\n var connectors = this.layout.getEdges(vertex);\n var i = 0;\n while (i < connectors.length) {\n var connector = connectors[parseInt(i.toString(), 10)];\n var childVertex = this.layout.getVisibleTerminal(connector, false);\n if (childVertex !== vertex) {\n var undirectedEdges = this.layout.getEdgesBetween(vertex, childVertex, true);\n if (undirectedEdges.length > 0) {\n var internalEdge = {\n connectorIds: [], edges: undirectedEdges, ids: [], isReversed: false,\n source: null, target: null, tempRank: 0, maxRank: null, minRank: null\n };\n for (var k = 0; k < undirectedEdges.length; k++) {\n var undirectedEdge = undirectedEdges[parseInt(k.toString(), 10)];\n // if (!undirectedEdge.id) {\n // undirectedEdge.id = randomId();\n // }\n internalEdge.ids.push(undirectedEdge.id);\n if (connectors.indexOf(undirectedEdge) !== -1) {\n if (connectors.indexOf(undirectedEdge) < i) {\n i--;\n }\n connectors.splice(connectors.indexOf(undirectedEdge), 1);\n }\n }\n internalEdge.source = internalVertex;\n if (internalVertex.internalOutEdges.indexOf(internalEdge) === -1) {\n internalVertex.internalOutEdges.push(internalEdge);\n }\n }\n }\n else {\n i++;\n }\n }\n }\n };\n //Initializes the ranks of the vertices\n /**\n * @Private\n * @returns { void } Initializes the ranks of the vertices .\\\n */\n FlowchartModel.prototype.layeringStage = function () {\n this.recycleConnectors();\n this.initialRank();\n this.fixRanks();\n };\n FlowchartModel.prototype.recycleConnectors = function () {\n var startNodes = [this.rootNode];\n this.visit(startNodes, true);\n };\n FlowchartModel.prototype.initialRank = function () {\n var startNodes = [this.rootNode];\n var internalNodes = Array.from(this.vertexMapper.values());\n while (startNodes.length > 0) {\n var internalNode = startNodes[0];\n var outEdges = internalNode.internalOutEdges;\n var inEdges = internalNode.internalInEdges;\n var allEdgesScanned = true;\n var minimumLayer = 100000000;\n for (var i = 0; i < inEdges.length; i++) {\n var internalEdge = inEdges[parseInt(i.toString(), 10)];\n if (internalEdge.tempRank === 5270620) {\n // This edge has been scanned, get the layer of the node on the other end\n var otherNode = internalEdge.source;\n minimumLayer = otherNode.tempRank ? Math.min(minimumLayer, otherNode.tempRank - 1) : minimumLayer;\n }\n else {\n allEdgesScanned = false;\n break;\n }\n }\n // If all edge have been scanned, assign the layer, mark all edges in the other direction and remove from the nodes list\n if (allEdgesScanned) {\n internalNode.tempRank = minimumLayer;\n this.maxRank = Math.min(this.maxRank, minimumLayer);\n if (outEdges.length) {\n if (internalNode.cell.isDecisionNode) {\n var yesChild = outEdges.find(function (e) { return e.target.cell.isYesChild; });\n if (outEdges.indexOf(yesChild) !== 0) {\n outEdges.reverse();\n }\n if (this.layout.yesBranchDirection === 'RightInFlow'\n || (this.layout.yesBranchDirection === 'SameAsFlow'\n && this.layout.noBranchDirection === 'LeftInFlow')) {\n outEdges.reverse();\n }\n }\n for (var i = 0; i < outEdges.length; i++) {\n var internalEdge = outEdges[parseInt(i.toString(), 10)];\n internalEdge.tempRank = 5270620;\n // Add node on other end of edge to LinkedList of nodes to be analysed\n var otherNode = internalEdge.target;\n // Only add node if it hasn't been assigned a layer\n if (otherNode.tempRank === -1) {\n // Mark this other node as neither being unassigned nor assigned\n //so it isn't added to this list again, but it's layer isn't used in any calculation.\n otherNode.tempRank = -2;\n startNodes.push(otherNode);\n }\n }\n }\n startNodes.shift();\n }\n else {\n // Not all the edges have been scanned, get to the back of the class and put the dunces cap on\n var removedCell = startNodes.shift();\n startNodes.push(internalNode);\n if (removedCell === internalNode && startNodes.length === 1) {\n // This is an error condition, we can't get out of this loop.\n //It could happen for more than one node but that's a lot harder to detect. Log the error\n break;\n }\n }\n }\n for (var i = 0; i < internalNodes.length; i++) {\n internalNodes[parseInt(i.toString(), 10)].tempRank -= this.maxRank;\n }\n var currentMaxLayer = 0;\n var layerDeterminingEdges = this.rootNode.internalOutEdges;\n for (var j = 0; j < layerDeterminingEdges.length; j++) {\n var internalEdge = layerDeterminingEdges[parseInt(j.toString(), 10)];\n var otherNode = internalEdge.target;\n this.rootNode.tempRank = (otherNode.tempRank !== undefined && otherNode.tempRank !== null) ?\n Math.max(currentMaxLayer, otherNode.tempRank + 1) : currentMaxLayer;\n currentMaxLayer = this.rootNode.tempRank;\n }\n this.maxRank = 100000000 - this.maxRank;\n };\n FlowchartModel.prototype.fixRanks = function () {\n var rankList = new Map();\n this.ranks = new Map();\n for (var i = 0; i <= this.maxRank; i++) {\n rankList.set(i, []);\n this.ranks.set(i, rankList.get(i));\n }\n var rootsArray = [this.rootNode];\n this.visit(rootsArray, false, rankList);\n };\n /**\n * used to visit all the entries on the given dictionary with given function \\\n *\n * @returns { void } used to visit all the entries on the given dictionary with given function .\\\n * @param {InternalVertex[]} dfsRoots - provide the dfsRoots value.\n * @param {boolean} trackAncestors - provide the trackAncestors value.\n * @param {Mapclass
Enumeration
Interface
class
Enumeration
Interface
\n * \n * ```\n */\nvar Toast = /** @__PURE__ @class */ (function (_super) {\n __extends(Toast, _super);\n /**\n * Initializes a new instance of the Toast class.\n *\n * @param {ToastModel} options - Specifies Toast model properties as options.\n * @param {HTMLElement} element - Specifies the element that is rendered as a Toast.\n */\n function Toast(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.toastCollection = [];\n _this.needsID = true;\n return _this;\n }\n /**\n * Gets the Component module name.\n *\n * @returns {string} - returns the string\n * @private\n */\n Toast.prototype.getModuleName = function () {\n return 'toast';\n };\n /**\n * Gets the persisted state properties of the Component.\n *\n * @returns {string} - returns the string\n */\n Toast.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.\n *\n * @returns {void}\n */\n Toast.prototype.destroy = function () {\n this.hide('All');\n this.element.classList.remove(CONTAINER);\n setStyleAttribute(this.element, { 'position': '', 'z-index': '' });\n if (!isNullOrUndefined(this.refElement) && !isNullOrUndefined(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore(this.element, this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (!this.isBlazorServer()) {\n _super.prototype.destroy.call(this);\n }\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Toast.prototype.preRender = function () {\n //There is no event handler\n this.isDevice = Browser.isDevice;\n if (this.width === '300px') {\n this.width = (this.isDevice && screen.width < 768) ? '100%' : '300px';\n }\n if (isNullOrUndefined(this.target)) {\n this.target = document.body;\n }\n if (this.enableRtl && !this.isBlazorServer()) {\n this.element.classList.add(RTL);\n }\n };\n /**\n * Initialize the component rendering\n *\n * @returns {void}\n * @private\n */\n Toast.prototype.render = function () {\n this.progressObj = [];\n this.intervalId = [];\n this.contentTemplate = null;\n this.toastTemplate = null;\n this.renderComplete();\n this.initRenderClass = this.element.className;\n };\n /**\n * To show Toast element on a document with the relative position.\n *\n * @param {ToastModel} toastObj - To show Toast element on screen.\n * @returns {void}\n * @deprecated\n */\n Toast.prototype.show = function (toastObj) {\n var collectionObj;\n if (!isNullOrUndefined(toastObj)) {\n this.templateChanges(toastObj);\n collectionObj = JSON.parse(JSON.stringify(toastObj));\n extend(this, this, toastObj);\n }\n if (isNullOrUndefined(this.toastContainer)) {\n this.toastContainer = this.getContainer();\n var target = typeof (this.target) === 'string' ? document.querySelector(this.target) :\n (typeof (this.target) === 'object' ? this.target : document.body);\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.tagName === 'BODY') {\n this.toastContainer.style.position = 'fixed';\n }\n else {\n this.toastContainer.style.position = 'absolute';\n target.style.position = 'relative';\n }\n this.setPositioning(this.position);\n target.appendChild(this.toastContainer);\n }\n if (this.isBlazorServer() && this.element.classList.contains('e-control')) {\n this.isToastModel(toastObj);\n return;\n }\n this.toastEle = this.createElement('div', { className: ROOT, id: getUniqueID('toast') });\n this.setWidthHeight();\n this.setCSSClass(this.cssClass);\n if (isNullOrUndefined(this.template) || this.template === '') {\n this.personalizeToast();\n }\n else {\n this.templateRendering();\n }\n this.setProgress();\n this.setCloseButton();\n this.setAria();\n this.appendToTarget(toastObj);\n if (this.isDevice && screen.width < 768) {\n new Touch(this.toastEle, { swipe: this.swipeHandler.bind(this) });\n }\n if (!isNullOrUndefined(collectionObj)) {\n extend(collectionObj, { element: [this.toastEle] }, true);\n this.toastCollection.push(collectionObj);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * @param {string} id - specifies the id\n * @param {ToastModel} toastObj - specifies the model\n * @returns {void}\n * @hidden\n * @deprecated\n * This method applicable for blazor alone.\n */\n Toast.prototype.showToast = function (id, toastObj) {\n this.toastEle = this.element.querySelector('#' + id);\n this.show(toastObj);\n };\n Toast.prototype.isToastModel = function (toastObj) {\n this.toastContainer = this.element;\n this.setPositioning(this.position);\n var proxy = this;\n if (!isNullOrUndefined(proxy.element.lastElementChild)) {\n this.setProgress();\n }\n this.setAria();\n this.appendToTarget(toastObj);\n };\n Toast.prototype.swipeHandler = function (e) {\n var toastEle = closest(e.originalEvent.target, '.' + ROOT + ':not(.' + CONTAINER + ')');\n var hideAnimation = this.animation.hide.effect;\n if (!isNullOrUndefined(toastEle)) {\n if (e.swipeDirection === 'Right') {\n this.animation.hide.effect = 'SlideRightOut';\n this.hideToast('swipe', toastEle);\n }\n else if (e.swipeDirection === 'Left') {\n this.animation.hide.effect = 'SlideLeftOut';\n this.hideToast('swipe', toastEle);\n }\n this.animation.hide.effect = hideAnimation;\n }\n };\n Toast.prototype.templateChanges = function (toastObj) {\n if (!isUndefined(toastObj.content) && !isNullOrUndefined(this.contentTemplate) && this.content !== toastObj.content) {\n this.clearContentTemplate();\n }\n if (!isUndefined(toastObj.template) && !isNullOrUndefined(this.toastTemplate) && this.template !== toastObj.template) {\n this.clearToastTemplate();\n }\n };\n Toast.prototype.setCSSClass = function (cssClass) {\n if (cssClass) {\n var split = cssClass.indexOf(',') !== -1 ? ',' : ' ';\n classList(this.toastEle, cssClass.split(split), []);\n if (this.toastContainer) {\n classList(this.toastContainer, cssClass.split(split), []);\n }\n }\n };\n Toast.prototype.setWidthHeight = function () {\n if (this.width === '300px') {\n this.toastEle.style.width = formatUnit(this.width);\n }\n else if (this.width === '100%') {\n this.toastContainer.classList.add(WIDTHFULL);\n }\n else {\n this.toastEle.style.width = formatUnit(this.width);\n this.toastContainer.classList.remove(WIDTHFULL);\n }\n this.toastEle.style.height = formatUnit(this.height);\n };\n Toast.prototype.templateRendering = function () {\n this.fetchEle(this.toastEle, this.template, 'template');\n };\n /**\n * @param {string} value - specifies the string value.\n * @returns {string} - returns the string\n * @hidden\n */\n Toast.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var item = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(item, item, beforeEvent);\n this.trigger('beforeSanitizeHtml', item);\n if (item.cancel && !isNullOrUndefined(item.helper)) {\n value = item.helper(value);\n }\n else if (!item.cancel) {\n value = SanitizeHtmlHelper.serializeValue(item, value);\n }\n }\n return value;\n };\n /**\n * To Hide Toast element on a document.\n * To Hide all toast element when passing 'All'.\n *\n * @param {HTMLElement} element - To Hide Toast element on screen.\n * @returns {void}\n */\n Toast.prototype.hide = function (element) {\n this.hideToast('', element);\n };\n Toast.prototype.hideToast = function (interactionType, element) {\n if (isNullOrUndefined(this.toastContainer) || this.toastContainer.childElementCount === 0) {\n return;\n }\n if (typeof element === 'string' && element === 'All') {\n for (var i = 0; i < this.toastContainer.childElementCount; i++) {\n this.destroyToast(this.toastContainer.children[i], interactionType);\n }\n return;\n }\n if (isNullOrUndefined(element)) {\n element = (this.newestOnTop ? this.toastContainer.lastElementChild : this.toastContainer.firstElementChild);\n }\n this.destroyToast(element, interactionType);\n };\n Toast.prototype.fetchEle = function (ele, value, prob) {\n value = typeof (value) === 'string' ? this.sanitizeHelper(value) : value;\n var templateFn;\n var tempVar;\n var tmpArray;\n var templateProps;\n if (ele.classList.contains(TITLE)) {\n templateProps = this.element.id + 'title';\n }\n else if (ele.classList.contains(CONTENT)) {\n templateProps = this.element.id + 'content';\n }\n else {\n templateProps = this.element.id + 'template';\n }\n if (prob === 'content') {\n tempVar = this.contentTemplate;\n }\n else {\n tempVar = this.toastTemplate;\n }\n if (!isNullOrUndefined(tempVar)) {\n ele.appendChild(tempVar.cloneNode(true));\n return ele;\n }\n try {\n if (typeof value !== 'function' && document.querySelectorAll(value).length > 0) {\n var elem = null;\n if (prob !== 'title') {\n elem = document.querySelector(value);\n ele.appendChild(elem);\n elem.style.display = '';\n }\n var clo = isNullOrUndefined(elem) ? tempVar : elem.cloneNode(true);\n if (prob === 'content') {\n this.contentTemplate = clo;\n }\n else {\n this.toastTemplate = clo;\n }\n }\n else {\n templateFn = compile(value);\n }\n }\n catch (e) {\n templateFn = typeof value == 'object' ? compile(value) : compile(initializeCSPTemplate(function () { return value; }));\n }\n if (!isNullOrUndefined(templateFn)) {\n if (!this.isBlazorServer()) {\n tmpArray = templateFn({}, this, prob, null, true);\n }\n else {\n var isString = true;\n tmpArray = templateFn({}, this, prob, templateProps, isString);\n }\n }\n if (!isNullOrUndefined(tmpArray) && tmpArray.length > 0 && !(isNullOrUndefined(tmpArray[0].tagName) && tmpArray.length === 1)) {\n [].slice.call(tmpArray).forEach(function (el) {\n if (!isNullOrUndefined(el.tagName)) {\n el.style.display = '';\n }\n ele.appendChild(el);\n });\n }\n else if (typeof value !== 'function' && ele.childElementCount === 0) {\n ele.innerHTML = value;\n }\n return ele;\n };\n Toast.prototype.clearProgress = function (intervalId) {\n if (!isNullOrUndefined(this.intervalId[intervalId])) {\n clearInterval(this.intervalId[intervalId]);\n delete this.intervalId[intervalId];\n }\n if (!isNullOrUndefined(this.progressObj[intervalId])) {\n clearInterval(this.progressObj[intervalId].intervalId);\n delete this.progressObj[intervalId];\n }\n };\n Toast.prototype.removeToastContainer = function (isClosed) {\n if (isClosed && this.toastContainer.classList.contains('e-toast-util')) {\n detach(this.toastContainer);\n }\n };\n Toast.prototype.clearContainerPos = function (isClosed) {\n var _this = this;\n if (this.isBlazorServer()) {\n this.toastContainer = null;\n return;\n }\n if (this.customPosition) {\n setStyleAttribute(this.toastContainer, { 'left': '', 'top': '' });\n this.removeToastContainer(isClosed);\n this.toastContainer = null;\n this.customPosition = false;\n }\n else {\n [ROOT + '-top-left',\n ROOT + '-top-right',\n ROOT + '-bottom-left',\n ROOT + '-bottom-right',\n ROOT + '-bottom-center',\n ROOT + '-top-center',\n ROOT + '-full-width'].forEach(function (pos) {\n if (!isNullOrUndefined(_this.toastContainer) && _this.toastContainer.classList.contains(pos)) {\n _this.toastContainer.classList.remove(pos);\n }\n });\n this.removeToastContainer(isClosed);\n this.toastContainer = null;\n }\n if (!isNullOrUndefined(this.contentTemplate)) {\n this.clearContentTemplate();\n }\n if (!isNullOrUndefined(this.toastTemplate)) {\n this.clearToastTemplate();\n }\n };\n Toast.prototype.clearContentTemplate = function () {\n this.contentTemplate.style.display = 'none';\n document.body.appendChild(this.contentTemplate);\n this.contentTemplate = null;\n };\n Toast.prototype.clearToastTemplate = function () {\n this.toastTemplate.style.display = 'none';\n document.body.appendChild(this.toastTemplate);\n this.toastTemplate = null;\n };\n Toast.prototype.isBlazorServer = function () {\n return (isBlazor() && this.isServerRendered);\n };\n Toast.prototype.destroyToast = function (toastEle, interactionType) {\n var _this = this;\n var toastObj;\n for (var i = 0; i < this.toastCollection.length; i++) {\n if (this.toastCollection[i].element[0] === toastEle) {\n toastObj = this.toastCollection[i];\n this.toastCollection.splice(i, 1);\n }\n }\n var toastBeforeClose = {\n options: this,\n cancel: false,\n type: interactionType,\n element: toastEle,\n toastContainer: this.toastContainer\n };\n var hideAnimate = this.animation.hide;\n var animate = {\n duration: hideAnimate.duration, name: (hideAnimate.effect === 'None' && animationMode === 'Enable') ? 'FadeOut' : hideAnimate.effect, timingFunction: hideAnimate.easing\n };\n var intervalId = parseInt(toastEle.id.split('toast_')[1], 10);\n var toastClose = this.isBlazorServer() ? {\n options: toastObj,\n toastContainer: this.toastContainer\n } : {\n options: toastObj,\n toastContainer: this.toastContainer,\n toastObj: this\n };\n this.trigger('beforeClose', toastBeforeClose, function (toastBeforeCloseArgs) {\n if (!toastBeforeCloseArgs.cancel) {\n if (!isNullOrUndefined(_this.progressObj[intervalId]) && !isNullOrUndefined(toastEle.querySelector('.' + PROGRESS))) {\n _this.progressObj[intervalId].progressEle.style.width = '0%';\n }\n animate.end = function () {\n _this.clearProgress(intervalId);\n if (!_this.isBlazorServer() || isNullOrUndefined(toastObj)) {\n detach(toastEle);\n }\n _this.trigger('close', toastClose);\n if (_this.toastContainer.childElementCount === 0) {\n _this.clearContainerPos(true);\n }\n hideAnimate = null;\n animate = null;\n };\n new Animation(animate).animate(toastEle);\n }\n });\n };\n Toast.prototype.personalizeToast = function () {\n this.setIcon();\n this.setTitle();\n this.setContent();\n this.actionButtons();\n };\n Toast.prototype.setAria = function () {\n attributes(this.toastEle, { 'role': 'alert' });\n };\n Toast.prototype.setPositioning = function (pos) {\n if (this.isBlazorServer()) {\n return;\n }\n if (!isNaN(parseFloat(pos.X)) || !isNaN(parseFloat(pos.Y))) {\n this.customPosition = true;\n setStyleAttribute(this.toastContainer, { 'left': formatUnit(pos.X), 'top': formatUnit(pos.Y) });\n }\n else {\n this.toastContainer.classList.add(ROOT + '-' + pos.Y.toString().toLowerCase() + '-' + pos.X.toString().toLowerCase());\n }\n };\n Toast.prototype.setCloseButton = function () {\n if (!this.showCloseButton) {\n return;\n }\n var localeText = { close: 'Close' };\n this.l10n = new L10n('toast', localeText, this.locale);\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n var closeBtn = this.createElement('div', { className: CLOSEBTN + ' e-icons ', attrs: { tabindex: '0', 'aria-label': closeIconTitle, 'role': 'button' } });\n this.toastEle.classList.add('e-toast-header-close-icon');\n this.toastEle.appendChild(closeBtn);\n };\n Toast.prototype.setProgress = function () {\n if (this.timeOut > 0) {\n var id = parseInt(this.toastEle.id.split('toast_')[1], 10);\n this.intervalId[id] = window.setTimeout(this.destroyToast.bind(this, this.toastEle), this.timeOut);\n this.progressObj[id] = { hideEta: null, intervalId: null, maxHideTime: null,\n element: null, timeOutId: null, progressEle: null };\n this.progressObj[id].maxHideTime = parseFloat(this.timeOut + '');\n this.progressObj[id].hideEta = new Date().getTime() + this.progressObj[id].maxHideTime;\n this.progressObj[id].element = this.toastEle;\n if (this.extendedTimeout > 0) {\n EventHandler.add(this.toastEle, 'mouseover', this.toastHoverAction.bind(this, id));\n EventHandler.add(this.toastEle, 'mouseleave', this.delayedToastProgress.bind(this, id));\n this.progressObj[id].timeOutId = this.intervalId[id];\n }\n if (this.showProgressBar) {\n this.progressBarEle = this.createElement('div', { className: PROGRESS });\n this.toastEle.insertBefore(this.progressBarEle, this.toastEle.children[0]);\n this.progressObj[id].intervalId =\n setInterval(this.updateProgressBar.bind(this, this.progressObj[id]), 10);\n this.progressObj[id].progressEle = this.progressBarEle;\n }\n }\n };\n Toast.prototype.toastHoverAction = function (id) {\n clearTimeout(this.progressObj[id].timeOutId);\n clearInterval(this.progressObj[id].intervalId);\n this.progressObj[id].hideEta = 0;\n var toastEle = this.progressObj[id].element;\n if (!isNullOrUndefined(toastEle.querySelector('.' + PROGRESS))) {\n this.progressObj[id].progressEle.style.width = '0%';\n }\n };\n Toast.prototype.delayedToastProgress = function (id) {\n var progress = this.progressObj[id];\n if (!isNullOrUndefined(progress)) {\n var toastEle = progress.element;\n progress.timeOutId = window.setTimeout(this.destroyToast.bind(this, toastEle), this.extendedTimeout);\n progress.maxHideTime = parseFloat(this.extendedTimeout + '');\n progress.hideEta = new Date().getTime() + progress.maxHideTime;\n if (!isNullOrUndefined(toastEle.querySelector('.' + PROGRESS))) {\n progress.intervalId = setInterval(this.updateProgressBar.bind(this, progress), 10);\n }\n }\n };\n Toast.prototype.updateProgressBar = function (progressObj) {\n var percentage = ((progressObj.hideEta - (new Date().getTime())) / progressObj.maxHideTime) * 100;\n percentage = this.progressDirection === 'Ltr' ? 100 - percentage : percentage;\n progressObj.progressEle.style.width = percentage + '%';\n };\n Toast.prototype.setIcon = function () {\n if (isNullOrUndefined(this.icon) || this.icon.length === 0) {\n return;\n }\n var iconEle = this.createElement('div', { className: ICON + ' e-icons ' + this.icon });\n this.toastEle.classList.add('e-toast-header-icon');\n this.toastEle.appendChild(iconEle);\n };\n Toast.prototype.setTitle = function () {\n if (isNullOrUndefined(this.title)) {\n return;\n }\n var titleEle = this.createElement('div', { className: TITLE });\n titleEle = this.fetchEle(titleEle, this.title, 'title');\n var msgContainer = this.createElement('div', { className: MESSAGE });\n msgContainer.appendChild(titleEle);\n this.toastEle.appendChild(msgContainer);\n };\n Toast.prototype.setContent = function () {\n var contentEle = this.createElement('div', { className: CONTENT });\n var ele = this.element;\n if (isNullOrUndefined(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s/g, '') !== '';\n if ((ele.children.length > 0 || isContent) && !(ele.firstElementChild && ele.firstElementChild.classList.contains(ROOT))) {\n this.innerEle = document.createDocumentFragment();\n var tempEle_1 = this.createElement('div');\n while (ele.childNodes.length !== 0) {\n this.innerEle.appendChild(this.element.childNodes[0]);\n }\n contentEle.appendChild(this.innerEle);\n [].slice.call(contentEle.children).forEach(function (ele) {\n tempEle_1.appendChild(ele.cloneNode(true));\n });\n this.content = tempEle_1;\n this.appendMessageContainer(contentEle);\n }\n }\n else {\n if (typeof (this.content) === 'object' && !isNullOrUndefined(this.content.tagName)) {\n contentEle.appendChild(this.content);\n this.content = this.content.cloneNode(true);\n this.appendMessageContainer(contentEle);\n }\n else {\n contentEle = this.fetchEle(contentEle, this.content, 'content');\n this.appendMessageContainer(contentEle);\n }\n }\n };\n Toast.prototype.appendMessageContainer = function (element) {\n if (this.toastEle.querySelectorAll('.' + MESSAGE).length > 0) {\n this.toastEle.querySelector('.' + MESSAGE).appendChild(element);\n }\n else {\n var msgContainer = this.createElement('div', { className: MESSAGE });\n msgContainer.appendChild(element);\n this.toastEle.appendChild(msgContainer);\n }\n };\n Toast.prototype.actionButtons = function () {\n var _this = this;\n var actionBtnContainer = this.createElement('div', { className: ACTIOBUTTONS });\n [].slice.call(this.buttons).forEach(function (actionBtn) {\n if (isNullOrUndefined(actionBtn.model)) {\n return;\n }\n var btnDom = _this.createElement('button');\n btnDom.setAttribute('type', 'button');\n if (isNullOrUndefined(actionBtn.model.cssClass) || actionBtn.model.cssClass.length === 0) {\n actionBtn.model.cssClass = 'e-primary' + ' ' + _this.cssClass;\n }\n btnDom.classList.add('e-small');\n new Button(actionBtn.model, btnDom);\n if (!isNullOrUndefined(actionBtn.click) && typeof (actionBtn.click) === 'function') {\n EventHandler.add(btnDom, 'click', actionBtn.click);\n }\n actionBtnContainer.appendChild(btnDom);\n });\n if (actionBtnContainer.childElementCount > 0) {\n this.appendMessageContainer(actionBtnContainer);\n }\n };\n Toast.prototype.appendToTarget = function (toastObj) {\n var _this = this;\n var toastBeforeOpen = this.isBlazorServer() ? {\n options: toastObj,\n element: this.toastEle,\n cancel: false\n } : {\n options: toastObj,\n toastObj: this,\n element: this.toastEle,\n cancel: false\n };\n this.trigger('beforeOpen', toastBeforeOpen, function (toastBeforeOpenArgs) {\n if (!toastBeforeOpenArgs.cancel) {\n if (!_this.isBlazorServer()) {\n _this.toastEle.style.display = 'none';\n }\n if (_this.newestOnTop && _this.toastContainer.childElementCount !== 0) {\n _this.toastContainer.insertBefore(_this.toastEle, _this.toastContainer.children[0]);\n }\n else if (!_this.isBlazorServer()) {\n _this.toastContainer.appendChild(_this.toastEle);\n }\n removeClass([_this.toastEle], TOAST_BLAZOR_HIDDEN);\n EventHandler.add(_this.toastEle, 'click', _this.clickHandler, _this);\n EventHandler.add(_this.toastEle, 'keydown', _this.keyDownHandler, _this);\n _this.toastContainer.style.zIndex = getZindexPartial(_this.toastContainer) + '';\n _this.displayToast(_this.toastEle, toastObj);\n }\n else if (_this.isBlazorServer()) {\n var intervalId = parseInt(_this.toastEle.id.split('toast_')[1], 10);\n _this.clearProgress(intervalId);\n detach(_this.toastEle);\n if (_this.toastContainer.childElementCount === 0) {\n _this.clearContainerPos();\n }\n }\n });\n };\n Toast.prototype.clickHandler = function (e) {\n var _this = this;\n if (!this.isBlazorServer()) {\n e.stopPropagation();\n }\n var target = e.target;\n var toastEle = closest(target, '.' + ROOT);\n var clickArgs = this.isBlazorServer() ? {\n element: toastEle, cancel: false, clickToClose: false, originalEvent: e\n } : {\n element: toastEle, cancel: false, clickToClose: false, originalEvent: e, toastObj: this\n };\n var isCloseIcon = target.classList.contains(CLOSEBTN);\n this.trigger('click', clickArgs, function (toastClickArgs) {\n if ((isCloseIcon && !toastClickArgs.cancel) || toastClickArgs.clickToClose) {\n _this.destroyToast(toastEle, 'click');\n }\n });\n };\n Toast.prototype.keyDownHandler = function (e) {\n if (e.target.classList.contains(CLOSEBTN) &&\n (e.keyCode === 13 || e.keyCode === 32)) {\n var target = e.target;\n var toastEle = closest(target, '.' + ROOT);\n this.destroyToast(toastEle, 'key');\n }\n };\n Toast.prototype.displayToast = function (toastEle, toastObj) {\n var _this = this;\n var showAnimate = this.animation.show;\n var animate = {\n duration: showAnimate.duration, name: (showAnimate.effect === 'None' && animationMode === 'Enable') ? 'FadeIn' : showAnimate.effect, timingFunction: showAnimate.easing\n };\n var toastOpen = this.isBlazorServer() ? {\n options: toastObj,\n element: this.toastEle\n } : {\n options: toastObj,\n toastObj: this,\n element: this.toastEle\n };\n animate.begin = function () {\n toastEle.style.display = '';\n };\n animate.end = function () {\n _this.trigger('open', toastOpen);\n };\n new Animation(animate).animate(toastEle);\n };\n Toast.prototype.getContainer = function () {\n this.element.classList.add(CONTAINER);\n return this.element;\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ToastModel} newProp - specifies the new property\n * @param {ToastModel} oldProp - specifies the old property\n * @returns {void}\n * @private\n */\n // eslint-disable-next-line\n Toast.prototype.onPropertyChanged = function (newProp, oldProp) {\n var container = this.element;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'enableRtl':\n if (newProp.enableRtl) {\n container.classList.add(RTL);\n }\n else {\n container.classList.remove(RTL);\n }\n break;\n }\n }\n };\n __decorate([\n Property('300px')\n ], Toast.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toast.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"title\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"content\", void 0);\n __decorate([\n Property(true)\n ], Toast.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"icon\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"template\", void 0);\n __decorate([\n Property(true)\n ], Toast.prototype, \"newestOnTop\", void 0);\n __decorate([\n Property(false)\n ], Toast.prototype, \"showCloseButton\", void 0);\n __decorate([\n Property(false)\n ], Toast.prototype, \"showProgressBar\", void 0);\n __decorate([\n Property(5000)\n ], Toast.prototype, \"timeOut\", void 0);\n __decorate([\n Property('Rtl')\n ], Toast.prototype, \"progressDirection\", void 0);\n __decorate([\n Property(1000)\n ], Toast.prototype, \"extendedTimeout\", void 0);\n __decorate([\n Complex({}, ToastAnimationSettings)\n ], Toast.prototype, \"animation\", void 0);\n __decorate([\n Complex({}, ToastPosition)\n ], Toast.prototype, \"position\", void 0);\n __decorate([\n Collection([{}], ButtonModelProps)\n ], Toast.prototype, \"buttons\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"target\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"click\", void 0);\n Toast = __decorate([\n NotifyPropertyChanges\n ], Toast);\n return Toast;\n}(Component));\n/**\n * Base for creating Toast through utility method.\n */\n// eslint-disable-next-line\nvar ToastUtility;\n(function (ToastUtility) {\n /**\n * To display a simple toast using the 'ToastUtility' with 'ToastModal' or\n * as string with toast content, type, timeOut.\n * ```\n * Eg : ToastUtility.show('Toast Content Message', 'Information', 7000);\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param { ToastModel | string } content - Specifies the toast modal or the content of the Toast.\n * @param {string} type - Specifies the type of toast.\n * @param { number } timeOut - Specifies the timeOut of the toast.\n * @returns {Toast} - returns the element\n */\n function show(content, type, timeOut) {\n var toastContainerElement;\n if (document.querySelector('.' + CONTAINER)) {\n toastContainerElement = document.querySelector('.' + CONTAINER);\n }\n else {\n toastContainerElement = createElement('div', { 'className': ROOT + ' ' + CONTAINER + ' e-toast-util' });\n document.body.appendChild(toastContainerElement);\n }\n var untilToastsModel;\n if (typeof (content) === 'string') {\n var cssClass = void 0;\n var icon = void 0;\n if (!isNullOrUndefined(type)) {\n switch (type) {\n case 'Warning':\n cssClass = 'e-toast-warning';\n icon = 'e-toast-warning-icon';\n break;\n case 'Success':\n cssClass = 'e-toast-success';\n icon = 'e-toast-success-icon';\n break;\n case 'Error':\n cssClass = 'e-toast-danger';\n icon = 'e-toast-error-icon';\n break;\n case 'Information':\n cssClass = 'e-toast-info';\n icon = 'e-toast-info-icon';\n break;\n }\n }\n else {\n cssClass = '';\n icon = '';\n }\n untilToastsModel = {\n content: content,\n cssClass: cssClass,\n icon: icon,\n timeOut: !isNullOrUndefined(timeOut) ? timeOut : 5000\n };\n }\n else {\n untilToastsModel = content;\n }\n var toastObj = new Toast(untilToastsModel);\n toastObj.appendTo(toastContainerElement);\n toastObj.show();\n return toastObj;\n }\n ToastUtility.show = show;\n})(ToastUtility || (ToastUtility = {}));\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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/**\n * Specifies the type of severity to display the message with distinctive icons and colors.\n */\nvar Severity;\n(function (Severity) {\n /**\n * The message is displayed with icons and colors to denote it as a normal message.\n */\n Severity[\"Normal\"] = \"Normal\";\n /**\n * The message is displayed with icons and colors to denote it as a success message.\n */\n Severity[\"Success\"] = \"Success\";\n /**\n * The message is displayed with icons and colors to denote it as information.\n */\n Severity[\"Info\"] = \"Info\";\n /**\n * The message is displayed with icons and colors to denote it as a warning message.\n */\n Severity[\"Warning\"] = \"Warning\";\n /**\n * The message is displayed with icons and colors to denote it as an error message.\n */\n Severity[\"Error\"] = \"Error\";\n})(Severity || (Severity = {}));\n/**\n * Specifies the predefined appearance variants for the component to display.\n */\nvar Variant;\n(function (Variant) {\n /**\n * Denotes the severity is differentiated using text color and light background color.\n */\n Variant[\"Text\"] = \"Text\";\n /**\n * Denotes the severity is differentiated using text color and border without background.\n */\n Variant[\"Outlined\"] = \"Outlined\";\n /**\n * Denotes the severity is differentiated using text color and dark background color.\n */\n Variant[\"Filled\"] = \"Filled\";\n})(Variant || (Variant = {}));\nvar MSG_ICON = 'e-msg-icon';\nvar MSG_CLOSE_ICON = 'e-msg-close-icon';\nvar MSG_CONTENT = 'e-msg-content';\nvar MSG_CONTENT_CENTER = 'e-content-center';\nvar RTL$1 = 'e-rtl';\nvar SUCCESS = 'e-success';\nvar WARNING = 'e-warning';\nvar INFO = 'e-info';\nvar ERROR = 'e-error';\nvar OUTLINED = 'e-outlined';\nvar FILLED = 'e-filled';\nvar HIDE = 'e-hidden';\n/**\n * The Message component displays messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user.\n * ```html\n * \n * \n * ```\n *\n */\nvar Message = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Message, _super);\n /**\n * Constructor for creating the Message component widget.\n *\n * @param {MessageModel}options - Specifies the Message component interface.\n * @param {HTMLElement}element - Specifies the target element.\n */\n function Message(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.initialRender = true;\n return _this;\n }\n /**\n * Gets the Message component module name.\n *\n * @returns {string} - Returns the string.\n * @private\n */\n Message.prototype.getModuleName = function () {\n return 'message';\n };\n /**\n * Get the persisted state properties of the Message component.\n *\n * @returns {string} - Returns the string.\n */\n Message.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Method to initialize the variables for the Message component.\n *\n * @returns {void}\n * @private\n */\n Message.prototype.preRender = function () {\n var localeText = { close: 'Close' };\n this.l10n = new L10n('message', localeText, this.locale);\n };\n /**\n * Method to initialize the Message component rendering.\n *\n * @returns {void}\n * @private\n */\n Message.prototype.render = function () {\n this.innerContent = this.element.innerHTML;\n this.element.innerHTML = '';\n this.msgElement = this.createElement('div', { className: 'e-msg-content-wrap' });\n this.initialize();\n this.wireEvents();\n this.renderComplete();\n this.renderReactTemplates();\n this.initialRender = false;\n };\n Message.prototype.initialize = function () {\n this.element.setAttribute('role', 'alert');\n this.setCssClass();\n this.setIcon();\n this.setContent();\n this.setCloseIcon();\n this.setSeverity();\n this.setVariant();\n this.setVisible();\n if (this.enableRtl) {\n this.element.classList.add(RTL$1);\n }\n };\n Message.prototype.setIcon = function () {\n if (this.showIcon) {\n this.iconElement = this.createElement('span', { className: MSG_ICON });\n if (this.element.classList.contains(MSG_CONTENT_CENTER)) {\n this.msgElement.appendChild(this.iconElement);\n }\n else {\n this.element.appendChild(this.iconElement);\n }\n }\n };\n Message.prototype.setCloseIcon = function () {\n if (this.showCloseIcon) {\n this.closeIcon = this.createElement('button', { attrs: { type: 'button', class: MSG_CLOSE_ICON } });\n this.element.appendChild(this.closeIcon);\n this.setTitle();\n }\n };\n Message.prototype.setTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n };\n Message.prototype.setContent = function () {\n this.txtElement = this.createElement('div', { className: MSG_CONTENT });\n if (this.element.classList.contains(MSG_CONTENT_CENTER)) {\n this.msgElement.appendChild(this.txtElement);\n this.element.appendChild(this.msgElement);\n }\n else {\n this.element.appendChild(this.txtElement);\n }\n this.setTemplate();\n };\n Message.prototype.setTemplate = function () {\n var templateFn;\n if (isNullOrUndefined(this.content) || this.content === '') {\n this.txtElement.innerHTML = this.innerContent;\n }\n else if (!isNullOrUndefined(this.content) && this.content !== '') {\n if ((typeof this.content === 'string') || (typeof this.content !== 'string')) {\n // eslint-disable-next-line\n if (this.isVue || typeof this.content !== 'string') {\n templateFn = compile(this.content);\n if (!isNullOrUndefined(templateFn)) {\n var tempArr = templateFn({}, this, 'content', this.element.id + 'content', true);\n if (tempArr) {\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, this.txtElement);\n this.renderReactTemplates();\n }\n }\n }\n else {\n this.txtElement.innerHTML = this.content;\n }\n }\n }\n };\n Message.prototype.setSeverity = function () {\n var classList = [SUCCESS, WARNING, INFO, ERROR];\n removeClass([this.element], classList);\n if (this.severity === 'Success') {\n addClass([this.element], SUCCESS);\n }\n else if (this.severity === 'Warning') {\n addClass([this.element], WARNING);\n }\n else if (this.severity === 'Error') {\n addClass([this.element], ERROR);\n }\n else if (this.severity === 'Info') {\n addClass([this.element], INFO);\n }\n };\n Message.prototype.setVariant = function () {\n var classList = [FILLED, OUTLINED];\n removeClass([this.element], classList);\n if (this.variant === 'Outlined') {\n addClass([this.element], OUTLINED);\n }\n else if (this.variant === 'Filled') {\n addClass([this.element], FILLED);\n }\n };\n Message.prototype.setCssClass = function (oldCssClass) {\n if (oldCssClass) {\n removeClass([this.element], oldCssClass.split(' '));\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Message.prototype.setVisible = function () {\n if (!this.visible) {\n addClass([this.element], HIDE);\n if (!this.initialRender) {\n this.trigger('closed', { event: event, isInteracted: false, element: this.element });\n }\n }\n else {\n removeClass([this.element], HIDE);\n }\n };\n Message.prototype.clickHandler = function (event) {\n this.closeMessage(event);\n };\n Message.prototype.keyboardHandler = function (event) {\n if (event.keyCode === 32 || event.keyCode === 13) {\n this.closeMessage(event);\n }\n };\n Message.prototype.closeMessage = function (event) {\n addClass([this.element], HIDE);\n this.setProperties({ visible: false }, true);\n var eventArgs = { event: event, isInteracted: true, element: this.element };\n this.trigger('closed', eventArgs);\n };\n Message.prototype.wireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.clickHandler, this);\n EventHandler.add(this.closeIcon, 'keydown', this.keyboardHandler, this);\n }\n };\n Message.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.clickHandler);\n EventHandler.remove(this.closeIcon, 'keydown', this.keyboardHandler);\n }\n };\n /**\n * Method to handle the dynamic changes of the Message component properties.\n *\n * @param {MessageModel} newProp - Specifies the new property.\n * @param {MessageModel} oldProp - Specifies the old property.\n * @returns {void}\n * @private\n */\n Message.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 'cssClass':\n this.setCssClass(oldProp.cssClass);\n break;\n case 'content':\n this.txtElement.innerHTML = '';\n this.setTemplate();\n break;\n case 'enableRtl':\n if (!this.enableRtl) {\n this.element.classList.remove(RTL$1);\n }\n else {\n this.element.classList.add(RTL$1);\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.setTitle();\n }\n break;\n case 'showIcon':\n if (!this.showIcon && this.element.getElementsByClassName(MSG_ICON).length > 0) {\n detach(this.iconElement);\n }\n if (this.showIcon) {\n this.iconElement = this.createElement('span', { className: MSG_ICON });\n this.element.insertBefore(this.iconElement, this.txtElement);\n }\n break;\n case 'showCloseIcon':\n if (!this.showCloseIcon && !isNullOrUndefined(this.closeIcon)) {\n this.unWireEvents();\n detach(this.closeIcon);\n }\n else {\n this.setCloseIcon();\n this.wireEvents();\n }\n break;\n case 'severity':\n this.setSeverity();\n break;\n case 'variant':\n this.setVariant();\n break;\n case 'visible':\n this.setVisible();\n break;\n }\n }\n };\n /**\n * Method to destroy the Message component. It removes the component from the DOM and detaches all its bound events. It also removes the attributes and classes of the component.\n *\n * @returns {void}\n */\n Message.prototype.destroy = function () {\n var cssClass = isNullOrUndefined(this.cssClass) ? [''] : this.cssClass.split(' ');\n var className = [SUCCESS, WARNING, INFO, ERROR, RTL$1, HIDE, OUTLINED, FILLED];\n var classList = (cssClass.length === 1 && cssClass[0] === '') ? className : className.concat(cssClass);\n removeClass([this.element], classList);\n this.element.removeAttribute('role');\n this.unWireEvents();\n if (!isNullOrUndefined(this.iconElement)) {\n detach(this.iconElement);\n }\n detach(this.txtElement);\n if (!isNullOrUndefined(this.closeIcon)) {\n detach(this.closeIcon);\n }\n _super.prototype.destroy.call(this);\n };\n __decorate$1([\n Property(null)\n ], Message.prototype, \"content\", void 0);\n __decorate$1([\n Property('')\n ], Message.prototype, \"cssClass\", void 0);\n __decorate$1([\n Property(true)\n ], Message.prototype, \"showIcon\", void 0);\n __decorate$1([\n Property(false)\n ], Message.prototype, \"showCloseIcon\", void 0);\n __decorate$1([\n Property('Normal')\n ], Message.prototype, \"severity\", void 0);\n __decorate$1([\n Property('Text')\n ], Message.prototype, \"variant\", void 0);\n __decorate$1([\n Property(true)\n ], Message.prototype, \"visible\", void 0);\n __decorate$1([\n Event()\n ], Message.prototype, \"created\", void 0);\n __decorate$1([\n Event()\n ], Message.prototype, \"destroyed\", void 0);\n __decorate$1([\n Event()\n ], Message.prototype, \"closed\", void 0);\n Message = __decorate$1([\n NotifyPropertyChanges\n ], Message);\n return Message;\n}(Component));\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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};\nvar cssClassName = {\n TEXTSHAPE: 'e-skeleton-text',\n CIRCLESHAPE: 'e-skeleton-circle',\n SQUARESHAPE: 'e-skeleton-square',\n RECTANGLESHAPE: 'e-skeleton-rectangle',\n WAVEEFFECT: 'e-shimmer-wave',\n PULSEEFFECT: 'e-shimmer-pulse',\n FADEEFFECT: 'e-shimmer-fade',\n VISIBLENONE: 'e-visible-none'\n};\n/**\n * Defines the shape of Skeleton.\n */\nvar SkeletonType;\n(function (SkeletonType) {\n /**\n * Defines the skeleton shape as text.\n */\n SkeletonType[\"Text\"] = \"Text\";\n /**\n * Defines the skeleton shape as circle.\n */\n SkeletonType[\"Circle\"] = \"Circle\";\n /**\n * Defines the skeleton shape as square.\n */\n SkeletonType[\"Square\"] = \"Square\";\n /**\n * Defines the skeleton shape as rectangle.\n */\n SkeletonType[\"Rectangle\"] = \"Rectangle\";\n})(SkeletonType || (SkeletonType = {}));\n/**\n * Defines the animation effect of Skeleton.\n */\nvar ShimmerEffect;\n(function (ShimmerEffect) {\n /**\n * Defines the animation as shimmer wave effect.\n */\n ShimmerEffect[\"Wave\"] = \"Wave\";\n /**\n * Defines the animation as fade effect.\n */\n ShimmerEffect[\"Fade\"] = \"Fade\";\n /**\n * Defines the animation as pulse effect.\n */\n ShimmerEffect[\"Pulse\"] = \"Pulse\";\n /**\n * Defines the animation as no effect.\n */\n ShimmerEffect[\"None\"] = \"None\";\n})(ShimmerEffect || (ShimmerEffect = {}));\n/**\n * The Shimmer is a placeholder that animates a shimmer effect to let users know that the page’s content is loading at the moment.\n * In other terms, it simulates the layout of page content while loading the actual content.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Skeleton = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Skeleton, _super);\n /**\n * Constructor for creating Skeleton component.\n *\n * @param {SkeletonModel} options - Defines the model of Skeleton class.\n * @param {HTMLElement} element - Defines the target HTML element.\n */\n function Skeleton(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Get component module name.\n *\n * @returns {string} - Module name\n * @private\n */\n Skeleton.prototype.getModuleName = function () {\n return 'skeleton';\n };\n Skeleton.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n Skeleton.prototype.preRender = function () {\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.updateCssClass();\n attributes(this.element, { role: 'alert', 'aria-busy': 'true', 'aria-live': 'polite', 'aria-label': this.label });\n };\n /**\n * Method for initialize the component rendering.\n *\n * @returns {void}\n * @private\n */\n Skeleton.prototype.render = function () {\n this.initialize();\n };\n Skeleton.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 'width':\n case 'height':\n this.updateDimension();\n break;\n case 'shape':\n this.updateShape();\n break;\n case 'shimmerEffect':\n this.updateEffect();\n break;\n case 'visible':\n this.updateVisibility();\n break;\n case 'label':\n this.element.setAttribute('aria-label', this.label);\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n this.updateCssClass();\n break;\n }\n }\n };\n /**\n * Method to destroys the Skeleton component.\n *\n * @returns {void}\n */\n Skeleton.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n var attrs = ['role', 'aria-live', 'aria-busy', 'aria-label'];\n var cssClass = [];\n if (this.cssClass) {\n cssClass = cssClass.concat(this.cssClass.split(' '));\n }\n for (var i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[parseInt(i.toString(), 10)]);\n }\n cssClass = cssClass.concat(this.element.classList.value.match(/(e-skeleton-[^\\s]+)/g) || []);\n cssClass = cssClass.concat(this.element.classList.value.match(/(e-shimmer-[^\\s]+)/g) || []);\n removeClass([this.element], cssClass);\n };\n Skeleton.prototype.initialize = function () {\n this.updateShape();\n this.updateEffect();\n this.updateVisibility();\n };\n Skeleton.prototype.updateShape = function () {\n if (!(isNullOrUndefined(this.shape))) {\n var shapeCss = cssClassName[this.shape.toUpperCase() + 'SHAPE'];\n var removeCss = (this.element.classList.value.match(/(e-skeleton-[^\\s]+)/g) || []);\n this.updateDimension();\n if (removeCss) {\n removeClass([this.element], removeCss);\n }\n addClass([this.element], [shapeCss]);\n }\n };\n Skeleton.prototype.updateDimension = function () {\n var width = (!this.width && (['Text', 'Rectangle'].indexOf(this.shape) > -1)) ? '100%' : formatUnit(this.width);\n var height = ['Circle', 'Square'].indexOf(this.shape) > -1 ? width : formatUnit(this.height);\n this.element.style.width = width;\n this.element.style.height = height;\n };\n Skeleton.prototype.updateEffect = function () {\n var removeCss = (this.element.classList.value.match(/(e-shimmer-[^\\s]+)/g) || []);\n if (removeCss) {\n removeClass([this.element], removeCss);\n }\n if (!(isNullOrUndefined(this.shimmerEffect))) {\n addClass([this.element], [cssClassName[this.shimmerEffect.toUpperCase() + 'EFFECT']]);\n }\n };\n Skeleton.prototype.updateVisibility = function () {\n this.element.classList[this.visible ? 'remove' : 'add'](cssClassName.VISIBLENONE);\n };\n Skeleton.prototype.updateCssClass = function () {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n __decorate$2([\n Property('')\n ], Skeleton.prototype, \"width\", void 0);\n __decorate$2([\n Property('')\n ], Skeleton.prototype, \"height\", void 0);\n __decorate$2([\n Property(true)\n ], Skeleton.prototype, \"visible\", void 0);\n __decorate$2([\n Property('Text')\n ], Skeleton.prototype, \"shape\", void 0);\n __decorate$2([\n Property('Wave')\n ], Skeleton.prototype, \"shimmerEffect\", void 0);\n __decorate$2([\n Property('Loading...')\n ], Skeleton.prototype, \"label\", void 0);\n __decorate$2([\n Property('')\n ], Skeleton.prototype, \"cssClass\", void 0);\n Skeleton = __decorate$2([\n NotifyPropertyChanges\n ], Skeleton);\n return Skeleton;\n}(Component));\n\nexport { ButtonModelProps, Message, Severity, ShimmerEffect, Skeleton, SkeletonType, Toast, ToastAnimationSettings, ToastAnimations, ToastPosition, ToastUtility, Variant };\n","import { EventHandler, Touch, isNullOrUndefined, getValue, select, Browser, debounce, Property, ChildProperty, selectAll, compile, L10n, addClass, removeClass, extend, append, setStyleAttribute, prepend, rippleEffect, detach, Complex, Event, NotifyPropertyChanges, Component, classList, closest, KeyboardEvents, attributes, isUndefined, formatUnit, Animation, getUniqueID, remove, SanitizeHtmlHelper, setValue, matches as matches$1, createElement, getComponent } from '@syncfusion/ej2-base';\nimport { DataManager, Query, DataUtil, Predicate, JsonAdaptor } from '@syncfusion/ej2-data';\nimport { ListBase, Sortable, cssClass, moveTo } from '@syncfusion/ej2-lists';\nimport { Skeleton } from '@syncfusion/ej2-notifications';\nimport { hideSpinner, createSpinner, showSpinner, isCollide, Popup, getZindexPartial } from '@syncfusion/ej2-popups';\nimport { Input, TextBox } from '@syncfusion/ej2-inputs';\nimport { createCheckBox, Button } from '@syncfusion/ej2-buttons';\nimport { TreeView } from '@syncfusion/ej2-navigations';\n\n/**\n * IncrementalSearch module file\n */\nvar queryString = '';\nvar prevString = '';\nvar tempQueryString = '';\nvar matches = [];\nvar activeClass = 'e-active';\nvar prevElementId = '';\n/**\n * Search and focus the list item based on key code matches with list text content.\n *\n * @param {number} keyCode - Specifies the key code which pressed on keyboard events.\n * @param {HTMLElement[]} items - Specifies an array of HTMLElement, from which matches find has done.\n * @param {number} selectedIndex - Specifies the selected item in list item, so that search will happen after selected item otherwise it will do from initial.\n * @param {boolean} ignoreCase - Specifies the case consideration when search has done.\n * @param {string} elementId - Specifies the list element ID.\n * @param {boolean} [queryStringUpdated] - Optional parameter.\n * @param {string} [currentValue] - Optional parameter.\n * @param {boolean} [isVirtual] - Optional parameter.\n * @param {boolean} [refresh] - Optional parameter.\n * @returns {Element} Returns list item based on key code matches with list text content.\n */\nfunction incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, queryStringUpdated, currentValue, isVirtual, refresh) {\n if (!queryStringUpdated || queryString === '') {\n if (tempQueryString !== '') {\n queryString = tempQueryString + String.fromCharCode(keyCode);\n tempQueryString = '';\n }\n else {\n queryString += String.fromCharCode(keyCode);\n }\n }\n else if (queryString === prevString) {\n tempQueryString = String.fromCharCode(keyCode);\n }\n if (isVirtual) {\n setTimeout(function () {\n tempQueryString = '';\n }, 700);\n setTimeout(function () {\n queryString = '';\n }, 3000);\n }\n else {\n setTimeout(function () {\n queryString = '';\n }, 1000);\n }\n var index;\n queryString = ignoreCase ? queryString.toLowerCase() : queryString;\n if (prevElementId === elementId && prevString === queryString && !refresh) {\n for (var i = 0; i < matches.length; i++) {\n if (matches[i].classList.contains(activeClass)) {\n index = i;\n break;\n }\n if (currentValue && matches[i].textContent.toLowerCase() === currentValue.toLowerCase()) {\n index = i;\n break;\n }\n }\n index = index + 1;\n if (isVirtual) {\n return matches[index] && matches.length - 1 !== index ? matches[index] : matches[matches.length];\n }\n return matches[index] ? matches[index] : matches[0];\n }\n else {\n var listItems = items;\n var strLength = queryString.length;\n var text = void 0;\n var item = void 0;\n selectedIndex = selectedIndex ? selectedIndex + 1 : 0;\n var i = selectedIndex;\n matches = [];\n do {\n if (i === listItems.length) {\n i = -1;\n }\n if (i === -1) {\n index = 0;\n }\n else {\n index = i;\n }\n item = listItems[index];\n text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;\n if (text.substr(0, strLength) === queryString) {\n matches.push(listItems[index]);\n }\n i++;\n } while (i !== selectedIndex);\n prevString = queryString;\n prevElementId = elementId;\n if (isVirtual) {\n var indexUpdated = false;\n for (var i_1 = 0; i_1 < matches.length; i_1++) {\n if (currentValue && matches[i_1].textContent.toLowerCase() === currentValue.toLowerCase()) {\n index = i_1;\n indexUpdated = true;\n break;\n }\n }\n if (currentValue && indexUpdated) {\n index = index + 1;\n }\n return matches[index] ? matches[index] : matches[0];\n }\n return matches[0];\n }\n}\n// eslint-disable-next-line valid-jsdoc\n/**\n * Search the list item based on given input value matches with search type.\n *\n * @param {string} inputVal - Specifies the given input value.\n * @param {HTMLElement[]} items - Specifies the list items.\n * @param {SearchType} searchType - Specifies the filter type.\n * @param {boolean} [ignoreCase=true] - Specifies the case sensitive option for search operation.\n * @param {(string | number | boolean | { [key: string]: Object })[]} [dataSource] - Specifies the data source.\n * @param {{ text: string, value: string }} [fields] - Specifies the fields.\n * @param {string} [type] - Specifies the type.\n * @returns {{ item: Element | null, index: number | null }} Returns the search matched items.\n */\nfunction Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type) {\n var listItems = items;\n ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;\n var itemData = { item: null, index: null };\n if (inputVal && inputVal.length) {\n var strLength = inputVal.length;\n var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;\n queryStr = escapeCharRegExp(queryStr);\n var _loop_1 = function (i, itemsData) {\n var item = itemsData[i];\n var filterValue;\n if (items && dataSource) {\n var checkField_1 = item;\n var fieldValue_1 = fields.text.split('.');\n dataSource.filter(function (data) {\n Array.prototype.slice.call(fieldValue_1).forEach(function (value) {\n /* eslint-disable security/detect-object-injection */\n if ((type === 'object' && !data.isHeader && checkField_1.textContent.toString().indexOf(data[value]) !== -1 && checkField_1.getAttribute('data-value') === data[fields.value].toString()) ||\n (type === 'string' && checkField_1.textContent.toString().indexOf(data) !== -1)) {\n filterValue = type === 'object' ? data[value] : data;\n }\n });\n });\n }\n var text = dataSource && filterValue ? (ignoreCase ? filterValue.toString().toLocaleLowerCase() : filterValue).replace(/^\\s+|\\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\\s+|\\s+$/g, '');\n /* eslint-disable security/detect-non-literal-regexp */\n if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, 'g').test(text))) {\n itemData.item = item;\n itemData.index = i;\n return { value: { item: item, index: i } };\n }\n };\n for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {\n var state_1 = _loop_1(i, itemsData);\n if (typeof state_1 === \"object\")\n return state_1.value;\n }\n return itemData;\n /* eslint-enable security/detect-non-literal-regexp */\n }\n return itemData;\n}\n/**\n * @param {string} value - The value to escape.\n * @returns {string} Returns the escaped string.\n */\nfunction escapeCharRegExp(value) {\n return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n/**\n * @param {string} elementId - The ID of the list element.\n * @returns {void}\n */\nfunction resetIncrementalSearchValues(elementId) {\n if (prevElementId === elementId) {\n prevElementId = '';\n prevString = '';\n queryString = '';\n matches = [];\n }\n}\n\n/**\n * Function helps to find which highlightSearch is to call based on your data.\n *\n * @param {HTMLElement} element - Specifies an li element.\n * @param {string} query - Specifies the string to be highlighted.\n * @param {boolean} ignoreCase - Specifies the ignoreCase option.\n * @param {HightLightType} type - Specifies the type of highlight.\n * @returns {void}\n */\nfunction highlightSearch(element, query, ignoreCase, type) {\n var isHtmlElement = /<[^>]*>/g.test(element.innerText);\n if (isHtmlElement) {\n element.innerText = element.innerText.replace(/[\\u00A0-\\u9999<>&]/g, function (match) { return \"&#\" + match.charCodeAt(0) + \";\"; });\n }\n if (query === '') {\n return;\n }\n else {\n var ignoreRegex = ignoreCase ? 'gim' : 'gm';\n // eslint-disable-next-line\n query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&');\n var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?\n '(' + query + ')$' : '(' + query + ')';\n // eslint-disable-next-line security/detect-non-literal-regexp\n findTextNode(element, new RegExp(replaceQuery, ignoreRegex));\n }\n}\n/* eslint-enable jsdoc/require-param, valid-jsdoc */\n/**\n *\n * @param {HTMLElement} element - Specifies the element.\n * @param {RegExp} pattern - Specifies the regex to match the searched text.\n * @returns {void}\n */\nfunction findTextNode(element, pattern) {\n for (var index = 0; element.childNodes && (index < element.childNodes.length); index++) {\n if (element.childNodes[index].nodeType === 3 && element.childNodes[index].textContent.trim() !== '') {\n var value = element.childNodes[index].nodeValue.trim().replace(pattern, '$1');\n element.childNodes[index].nodeValue = '';\n element.innerHTML = element.innerHTML.trim() + value;\n break;\n }\n else {\n findTextNode(element.childNodes[index], pattern);\n }\n }\n}\n/**\n * Function helps to remove highlighted element based on your data.\n *\n * @param {HTMLElement} content - Specifies an content element.\n * @returns {void}\n */\nfunction revertHighlightSearch(content) {\n var contentElement = content.querySelectorAll('.e-highlight');\n for (var i = contentElement.length - 1; i >= 0; i--) {\n var parent_1 = contentElement[i].parentNode;\n var text = document.createTextNode(contentElement[i].textContent);\n parent_1.replaceChild(text, contentElement[i]);\n }\n}\n\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (undefined && undefined.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\nvar VirtualScroll = /** @__PURE__ @class */ (function () {\n function VirtualScroll(parent) {\n var _this = this;\n this.sentinelInfo = {\n 'up': {\n check: function (rect, info) {\n var top = rect.top - _this.containerElementRect.top;\n info.entered = top >= 0;\n return top + (_this.parent.listItemHeight * _this.parent.virtualItemCount / 2) >= 0;\n },\n axis: 'Y'\n },\n 'down': {\n check: function (rect, info) {\n var top = rect.bottom;\n info.entered = rect.bottom <= _this.containerElementRect.bottom;\n return top - (_this.parent.listItemHeight * _this.parent.virtualItemCount / 2)\n <= _this.parent.listItemHeight * _this.parent.virtualItemCount / 2;\n }, axis: 'Y'\n }\n };\n this.parent = parent;\n this.removeEventListener();\n this.addEventListener();\n }\n VirtualScroll.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('observe', this.observe, this);\n this.parent.on('setGeneratedData', this.setGeneratedData, this);\n this.parent.on('dataProcessAsync', this.dataProcessAsync, this);\n this.parent.on('setCurrentViewDataAsync', this.setCurrentViewDataAsync, this);\n this.parent.on('bindScrollEvent', this.bindScrollEvent, this);\n };\n VirtualScroll.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('observe', this.observe);\n this.parent.off('setGeneratedData', this.setGeneratedData);\n this.parent.off('dataProcessAsync', this.dataProcessAsync);\n this.parent.off('setCurrentViewDataAsync', this.setCurrentViewDataAsync);\n this.parent.off('bindScrollEvent', this.bindScrollEvent);\n };\n VirtualScroll.prototype.bindScrollEvent = function (component) {\n var _this = this;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.component = component.component;\n this.observe(function (scrollArgs) { return _this.scrollListener(scrollArgs); });\n };\n VirtualScroll.prototype.observe = function (callback) {\n this.containerElementRect = this.parent.popupContentElement.getBoundingClientRect();\n EventHandler.add(this.parent.popupContentElement, 'wheel mousedown', this.popupScrollHandler, this);\n this.touchModule = new Touch(this.parent.popupContentElement, {\n scroll: this.popupScrollHandler.bind(this)\n });\n EventHandler.add(this.parent.popupContentElement, 'scroll', this.virtualScrollHandler(callback), this);\n };\n VirtualScroll.prototype.getModuleName = function () {\n return 'VirtualScroll';\n };\n VirtualScroll.prototype.popupScrollHandler = function () {\n this.parent.isMouseScrollAction = true;\n this.parent.isPreventScrollAction = false;\n };\n VirtualScroll.prototype.getPageQuery = function (query, virtualStartIndex, virtualEndIndex) {\n if (virtualEndIndex !== 0 && !this.parent.allowFiltering && this.component !== 'autocomplete') {\n query = query.skip(virtualStartIndex);\n }\n return query;\n };\n VirtualScroll.prototype.setGeneratedData = function (qStartIndex, recentlyGeneratedData) {\n var loopIteration = 0;\n var endIndex = this.parent.listData.length + this.parent.virtualItemStartIndex;\n for (var i = this.parent.virtualItemStartIndex; i < endIndex; i++) {\n var alreadyAddedData = this.parent.generatedDataObject[i];\n if (!alreadyAddedData) {\n if (recentlyGeneratedData !== null && this.parent.listData.slice(loopIteration, loopIteration + 1).length > 0) {\n var slicedData = this.parent.listData.slice(loopIteration, loopIteration + 1);\n if (slicedData.length > 0) {\n // Safely assign slicedData to this.parent.generatedDataObject[i]\n this.parent.generatedDataObject[i] = slicedData;\n }\n }\n }\n loopIteration++;\n }\n };\n VirtualScroll.prototype.generateAndExecuteQueryAsync = function (query, virtualItemStartIndex, virtualItemEndIndex, isQueryGenerated) {\n if (virtualItemStartIndex === void 0) { virtualItemStartIndex = 0; }\n if (virtualItemEndIndex === void 0) { virtualItemEndIndex = 0; }\n if (isQueryGenerated === void 0) { isQueryGenerated = false; }\n var dataSource = this.parent.dataSource;\n if (!isQueryGenerated) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!isNullOrUndefined(this.parent.query)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var newQuery = this.removeSkipAndTakeEvents(this.parent.query.clone());\n query = this.getPageQuery(newQuery, virtualItemStartIndex, virtualItemEndIndex);\n }\n else {\n query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);\n }\n }\n var tempCustomFilter = this.parent.isCustomFilter;\n if (this.component === 'combobox') {\n var totalData = 0;\n if (this.parent.dataSource instanceof DataManager) {\n totalData = this.parent.dataSource.dataSource.json.length;\n }\n else if (this.parent.dataSource && this.parent.dataSource.length > 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n totalData = this.parent.dataSource.length;\n }\n if (totalData > 0) {\n this.parent.isCustomFilter = (totalData === this.parent.totalItemCount &&\n this.parent.queryString !== this.parent.typedString) ? true : this.parent.isCustomFilter;\n }\n }\n this.parent.resetList(dataSource, this.parent.fields, query);\n this.parent.isCustomFilter = tempCustomFilter;\n };\n VirtualScroll.prototype.removeSkipAndTakeEvents = function (query) {\n query.queries = query.queries.filter(function (event) {\n return event.fn !== 'onSkip' && event.fn !== 'onTake';\n });\n return query;\n };\n VirtualScroll.prototype.setCurrentViewDataAsync = function (component) {\n // eslint-disable-next-line\n var currentData = [];\n var isResetListCalled = false;\n var isListUpdated = true;\n if (isNullOrUndefined(this.component)) {\n this.component = component.component;\n }\n var endIndex = this.parent.viewPortInfo.endIndex;\n if (this.component === 'multiselect' && this.parent.mode === 'CheckBox' && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.enableSelectionOrder && this.parent.targetElement().trim() === '') {\n if (this.parent.viewPortInfo.startIndex < this.parent.value.length) {\n endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;\n if (this.parent.viewPortInfo.startIndex === 0) {\n this.parent.updateVirtualReOrderList(true);\n if (this.parent.value.length < this.parent.itemCount) {\n var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');\n if (oldUlElement) {\n this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);\n }\n var query = this.parent.getForQuery(this.parent.value).clone();\n query = query.skip(0)\n .take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));\n this.parent.appendUncheckList = true;\n this.parent.setCurrentView = false;\n this.parent.resetList(this.parent.dataSource, this.parent.fields, query);\n isListUpdated = false;\n this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ?\n this.parent.appendUncheckList : false;\n isListUpdated = false;\n }\n else {\n var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');\n if (oldUlElement) {\n this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);\n }\n }\n isListUpdated = false;\n }\n else if (this.parent.viewPortInfo.startIndex !== 0) {\n this.parent.updateVirtualReOrderList(true);\n var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');\n if (oldUlElement) {\n this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);\n }\n isListUpdated = false;\n }\n if (this.parent.viewPortInfo.startIndex !== 0 &&\n this.parent.viewPortInfo.startIndex - this.parent.value.length !== this.parent.itemCount &&\n (this.parent.viewPortInfo.startIndex + this.parent.itemCount > this.parent.value.length)) {\n var query = this.parent.getForQuery(this.parent.value).clone();\n query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));\n this.parent.appendUncheckList = true;\n this.parent.setCurrentView = false;\n this.parent.resetList(this.parent.dataSource, this.parent.fields, query);\n isListUpdated = false;\n this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;\n }\n }\n else {\n var reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];\n if (this.parent.list.querySelector('.e-virtual-ddl-content') && reOrderList) {\n this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);\n }\n var query = this.parent.getForQuery(this.parent.value).clone(); // Assuming query is of type any\n var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0\n ? this.parent.viewPortInfo.startIndex - this.parent.value.length\n : 0;\n query = query.skip(skipvalue);\n this.parent.setCurrentView = false;\n this.parent.resetList(this.parent.dataSource, this.parent.fields, query);\n isListUpdated = false;\n }\n this.parent.totalItemsCount();\n }\n if (isListUpdated) {\n for (var i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {\n var index = i;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var alreadyAddedData = this.parent.generatedDataObject[index];\n if (this.component === 'multiselect' && this.parent.hideSelectedItem) {\n if (alreadyAddedData) {\n var value = getValue(this.parent.fields.value, alreadyAddedData[0]);\n if (this.parent.value &&\n value !== null &&\n Array.isArray(this.parent.value) &&\n this.parent.value.length > 0 &&\n this.parent.value.indexOf(value) < 0) {\n var query = this.parent.getForQuery(this.parent.value).clone();\n if (this.parent.viewPortInfo.endIndex === this.parent.totalItemCount + this.parent.value.length &&\n this.parent.hideSelectedItem) {\n query = query.skip(this.parent.totalItemCount - this.parent.itemCount);\n }\n else {\n query = query.skip(this.parent.viewPortInfo.startIndex);\n }\n this.parent.setCurrentView = false;\n this.parent.resetList(this.parent.dataSource, this.parent.fields, query);\n isResetListCalled = true;\n break;\n }\n else if (this.parent.value === null || (this.parent.value && this.parent.value.length === 0)) {\n currentData.push(alreadyAddedData[0]);\n }\n }\n if (index === endIndex - 1) {\n if (currentData.length !== this.parent.itemCount) {\n if (this.parent.hideSelectedItem) {\n var query = this.parent.value && this.parent.value.length > 0 ?\n this.parent.getForQuery(this.parent.value).clone() : new Query;\n if (this.parent.viewPortInfo.endIndex === this.parent.totalItemCount + this.parent.value.length &&\n this.parent.hideSelectedItem) {\n query = query.skip(this.parent.totalItemCount - this.parent.itemCount);\n }\n else {\n query = query.skip(this.parent.viewPortInfo.startIndex);\n }\n this.parent.setCurrentView = false;\n this.parent.resetList(this.parent.dataSource, this.parent.fields, query);\n isResetListCalled = true;\n }\n }\n }\n }\n else {\n if (alreadyAddedData) {\n currentData.push(alreadyAddedData[0]);\n }\n }\n this.parent.setCurrentView = false;\n }\n }\n if (!isResetListCalled && isListUpdated) {\n if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.startIndex === 0 && this.parent.virtualCustomData) {\n currentData.splice(0, 0, this.parent.virtualCustomData);\n }\n var totalData = [];\n if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.endIndex === this.parent.totalItemCount) {\n if (this.parent.virtualCustomSelectData && this.parent.virtualCustomSelectData.length > 0) {\n totalData = currentData.concat(this.parent.virtualCustomSelectData);\n currentData = totalData;\n }\n }\n this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');\n }\n if (this.component === 'multiselect') {\n this.parent.updatevirtualizationList();\n }\n this.parent.getSkeletonCount();\n this.parent.skeletonCount = this.parent.totalItemCount !== 0 && this.parent.totalItemCount < this.parent.itemCount * 2 &&\n ((!(this.parent.dataSource instanceof DataManager)) || ((this.parent.dataSource instanceof DataManager) &&\n (this.parent.totalItemCount <= this.parent.itemCount))) ? 0 : this.parent.skeletonCount;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];\n if (virtualTrackElement) {\n virtualTrackElement.style = this.parent.GetVirtualTrackHeight();\n }\n else if (!virtualTrackElement && this.parent.skeletonCount > 0 && this.parent.popupWrapper) {\n var virualElement = this.parent.createElement('div', {\n id: this.parent.element.id + '_popup', className: 'e-virtual-ddl', styles: this.parent.GetVirtualTrackHeight()\n });\n this.parent.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n this.parent.UpdateSkeleton();\n this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var virtualContentElement = this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0];\n if (virtualContentElement) {\n (virtualContentElement).style = this.parent.getTransformValues();\n }\n if (this.parent.fields.groupBy) {\n this.parent.scrollStop();\n }\n if (this.parent.keyCode === 40 &&\n this.parent.isScrollChanged &&\n this.parent.hideSelectedItem &&\n !isNullOrUndefined(this.parent.currentFocuedListElement)) {\n var currentSelectElem = this.parent.getElementByValue(this.parent.currentFocuedListElement.getAttribute('data-value'));\n this.parent.addListFocus(currentSelectElem);\n this.parent.isScrollChanged = false;\n }\n };\n VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {\n var isStartIndexInitialised = false;\n var queryStartIndex = 0;\n var queryEndIndex = 0;\n var vEndIndex = this.parent.viewPortInfo.endIndex;\n if (!isPopupOpen && vEndIndex !== 0) {\n for (var i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {\n if (!(i in this.parent.generatedDataObject)) {\n if (!isStartIndexInitialised) {\n isStartIndexInitialised = true;\n queryStartIndex = queryEndIndex = i;\n }\n else {\n queryEndIndex = i === vEndIndex ? i : i + 1;\n }\n }\n }\n }\n if (isStartIndexInitialised &&\n !(this.parent.totalItemCount === queryStartIndex &&\n this.parent.totalItemCount === queryEndIndex)) {\n this.parent.virtualItemStartIndex = queryStartIndex;\n this.parent.virtualItemEndIndex = queryEndIndex;\n this.parent.setCurrentView = true;\n this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);\n if (this.component === 'multiselect' &&\n this.parent.hideSelectedItem &&\n this.parent.value &&\n Array.isArray(this.parent.value) &&\n this.parent.value.length > 0) {\n this.parent.totalItemsCount();\n }\n if (this.component === 'multiselect' &&\n this.parent.virtualItemStartIndex === this.parent.virtualItemEndIndex) {\n this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;\n this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;\n }\n }\n if (!(this.parent.dataSource instanceof DataManager) ||\n (this.parent.dataSource instanceof DataManager &&\n !this.parent.isRequesting)) {\n this.setCurrentViewDataAsync();\n }\n };\n VirtualScroll.prototype.dataProcessAsync = function (isOpenPopup) {\n this.parent.selectedValueInfo = null;\n this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;\n this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;\n this.generateQueryAndSetQueryIndexAsync(new Query(), isOpenPopup);\n };\n VirtualScroll.prototype.virtualScrollRefreshAsync = function () {\n return __awaiter(this, void 0, void 0, function () {\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n this.parent.isCustomFilter = (!(this.parent.isTyped || (this.component === 'combobox' && this.parent.allowFiltering && this.parent.queryString !== this.parent.typedString) || (!isNullOrUndefined(this.parent.filterInput) && !isNullOrUndefined(this.parent.filterInput.value) && this.parent.filterInput.value !== '') && this.component !== 'combobox') && !(this.component === 'autocomplete' && this.parent.value != null)) || this.parent.isCustomFilter;\n if (this.parent.allowFiltering || this.component === 'autocomplete') {\n if (!isNullOrUndefined(this.parent.typedString) && !(this.component === 'combobox' && !isNullOrUndefined(this.parent.typedString) && this.parent.allowFiltering)) {\n if (this.parent.viewPortInfo.endIndex >= this.parent.dataCount) {\n this.parent.viewPortInfo.endIndex = this.parent.dataCount;\n }\n if (this.parent.viewPortInfo.startIndex >= this.parent.dataCount) {\n this.parent.viewPortInfo.startIndex = this.parent.dataCount - this.parent.itemCount;\n }\n }\n else {\n this.parent.getSkeletonCount(true);\n if (this.component === 'combobox') {\n this.parent.skeletonCount = this.parent.totalItemCount !== 0 &&\n this.parent.totalItemCount < (this.parent.itemCount * 2) && ((!(this.parent.dataSource instanceof DataManager)) ||\n ((this.parent.dataSource instanceof DataManager) && (this.parent.totalItemCount <= this.parent.itemCount))) ?\n 0 : this.parent.skeletonCount;\n }\n }\n }\n return [4 /*yield*/, this.dataProcessAsync()];\n case 1:\n _a.sent();\n if (this.parent.keyboardEvent != null &&\n (!(this.parent.dataSource instanceof DataManager) ||\n (this.parent.dataSource instanceof DataManager &&\n !this.parent.isRequesting))) {\n this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);\n }\n if (!this.parent.customFilterQuery) {\n this.parent.isCustomFilter = false;\n }\n return [2 /*return*/];\n }\n });\n });\n };\n VirtualScroll.prototype.scrollListener = function (scrollArgs) {\n var _this = this;\n if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {\n this.parent.preventSetCurrentData = false;\n var info = scrollArgs.sentinel;\n var pStartIndex = this.parent.previousStartIndex;\n this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);\n this.parent.isUpwardScrolling = false;\n if (this.parent.previousStartIndex !== pStartIndex && !this.parent.isKeyBoardAction) {\n this.parent.isScrollActionTriggered = false;\n this.parent.currentPageNumber = this.parent.viewPortInfo.currentPageNumber;\n this.parent.virtualListInfo = __assign({}, this.parent.viewPortInfo);\n this.parent.isPreventKeyAction = true;\n this.parent.isVirtualScrolling = true;\n setTimeout(function () {\n _this.parent.pageCount = _this.parent.getPageCount();\n _this.virtualScrollRefreshAsync().then(function () {\n if (_this.parent.popupObj) {\n _this.parent.list = _this.parent.popupObj.element.querySelector('.' + 'e-content') || select('.' + 'e-content');\n _this.parent.updateSelectionList();\n _this.parent.liCollections = _this.parent.getItems();\n }\n _this.parent.isKeyBoardAction = false;\n _this.parent.isVirtualScrolling = false;\n _this.parent.isPreventKeyAction = false;\n });\n }, 5);\n }\n else if (this.parent.isScrollActionTriggered) {\n this.parent.isPreventKeyAction = false;\n this.parent.isScrollActionTriggered = false;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.parent.getTransformValues();\n }\n this.parent.previousInfo = this.parent.viewPortInfo;\n }\n };\n VirtualScroll.prototype.getInfoFromView = function (direction, info, e, isscrollAction) {\n var infoType = {\n direction: direction, sentinelInfo: info, offsets: e,\n startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex\n };\n var vHeight = this.parent.popupContentElement.getBoundingClientRect().height;\n //Row Start and End Index calculation\n var rowHeight = this.parent.listItemHeight;\n var exactTopIndex = e.top / rowHeight;\n var infoViewIndices = vHeight / rowHeight;\n var exactEndIndex = exactTopIndex + infoViewIndices;\n var pageSizeBy4 = this.parent.virtualItemCount / 4;\n var totalItemCount = this.parent.totalItemCount;\n if (infoType.direction === 'down') {\n var sIndex = Math.round(exactEndIndex) - Math.round((pageSizeBy4));\n if (isNullOrUndefined(infoType.startIndex) || (exactEndIndex >\n (infoType.startIndex + Math.round((this.parent.virtualItemCount / 2 + pageSizeBy4)))\n && infoType.endIndex !== totalItemCount)) {\n infoType.startIndex = sIndex >= 0 ? Math.round(sIndex) : 0;\n infoType.startIndex = infoType.startIndex > exactTopIndex ? Math.floor(exactTopIndex) : infoType.startIndex;\n var eIndex = infoType.startIndex + this.parent.virtualItemCount;\n infoType.startIndex = eIndex < exactEndIndex ? (Math.ceil(exactEndIndex) - this.parent.virtualItemCount)\n : infoType.startIndex;\n infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;\n infoType.startIndex = eIndex >= totalItemCount\n ? (infoType.endIndex - this.parent.virtualItemCount > 0\n ? infoType.endIndex - this.parent.virtualItemCount\n : 0)\n : infoType.startIndex;\n infoType.currentPageNumber = Math.ceil(infoType.endIndex / this.parent.virtualItemCount);\n }\n }\n else if (infoType.direction === 'up') {\n if ((infoType.startIndex && infoType.endIndex) || (Math.ceil(exactTopIndex) > this.parent.previousStartIndex)) {\n var loadAtIndex = Math.round(((infoType.startIndex * rowHeight) + (pageSizeBy4 * rowHeight)) / rowHeight);\n if (exactTopIndex < loadAtIndex || (Math.ceil(exactTopIndex) > this.parent.previousStartIndex)) {\n var idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :\n (infoViewIndices + infoViewIndices / 4);\n var eIndex = Math.round(exactTopIndex + idxAddedToExactTop);\n infoType.endIndex = (eIndex < totalItemCount) ? eIndex : totalItemCount;\n var sIndex = infoType.endIndex - this.parent.virtualItemCount;\n infoType.startIndex = sIndex > 0 ? sIndex : 0;\n infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;\n infoType.currentPageNumber = Math.ceil(infoType.startIndex / this.parent.virtualItemCount);\n }\n }\n }\n if (!isscrollAction) {\n this.parent.previousStartIndex = infoType.startIndex;\n this.parent.startIndex = infoType.startIndex;\n this.parent.previousEndIndex = infoType.endIndex;\n }\n else {\n this.parent.scrollPreStartIndex = infoType.startIndex;\n }\n return infoType;\n };\n VirtualScroll.prototype.virtualScrollHandler = function (callback) {\n var _this = this;\n var delay = Browser.info.name === 'chrome' ? 200 : 100;\n var prevTop = 0;\n var debounced100 = debounce(callback, delay);\n var debounced50 = debounce(callback, 50);\n return function (e) {\n var top = e.target.scrollTop;\n var left = e.target.scrollLeft;\n var direction = prevTop < top && !_this.parent.isUpwardScrolling ? 'down' : 'up';\n prevTop = top;\n var current = _this.sentinelInfo[direction];\n var pstartIndex = _this.parent.scrollPreStartIndex;\n var scrollOffsetargs = {\n top: top,\n left: left\n };\n if (_this.parent.list && _this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {\n _this.getInfoFromView(direction, current, scrollOffsetargs, true);\n if (_this.parent.scrollPreStartIndex !== pstartIndex && !_this.parent.isPreventScrollAction) {\n _this.parent.isScrollActionTriggered = true;\n var virtualPoup = (_this.parent.list.querySelector('.e-virtual-ddl-content'));\n virtualPoup.style.transform = 'translate(0px,' + top + 'px)';\n }\n }\n var debounceFunction = debounced100;\n if (current.axis === 'X') {\n debounceFunction = debounced50;\n }\n debounceFunction({ direction: direction, sentinel: current, offset: { top: top, left: left },\n focusElement: document.activeElement });\n };\n };\n VirtualScroll.prototype.destroy = function () {\n this.removeEventListener();\n };\n return VirtualScroll;\n}());\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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};\nvar FieldSettings = /** @__PURE__ @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"disabled\", void 0);\n return FieldSettings;\n}(ChildProperty));\nvar dropDownBaseClasses = {\n root: 'e-dropdownbase',\n rtl: 'e-rtl',\n content: 'e-content',\n selected: 'e-active',\n hover: 'e-hover',\n noData: 'e-nodata',\n fixedHead: 'e-fixed-head',\n focus: 'e-item-focus',\n li: 'e-list-item',\n group: 'e-list-group-item',\n disabled: 'e-disabled',\n grouping: 'e-dd-group',\n virtualList: 'e-list-item e-virtual-list'\n};\nvar ITEMTEMPLATE_PROPERTY = 'ItemTemplate';\nvar DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';\nvar SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';\nvar VALUETEMPLATE_PROPERTY = 'ValueTemplate';\nvar GROUPTEMPLATE_PROPERTY = 'GroupTemplate';\nvar HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';\nvar FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';\nvar NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';\nvar ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';\nvar HIDE_GROUPLIST = 'e-hide-group-header';\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @__PURE__ @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n *\n * @param {DropDownBaseModel} options - Specifies the DropDownBase model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function DropDownBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.preventChange = false;\n _this.isPreventChange = false;\n _this.isDynamicDataChange = false;\n _this.addedNewItem = false;\n _this.isAddNewItemTemplate = false;\n _this.isRequesting = false;\n _this.isVirtualizationEnabled = false;\n _this.isCustomDataUpdated = false;\n _this.isAllowFiltering = false;\n _this.virtualizedItemsCount = 0;\n _this.isCheckBoxSelection = false;\n _this.totalItemCount = 0;\n _this.dataCount = 0;\n _this.remoteDataCount = -1;\n _this.isRemoteDataUpdated = false;\n _this.isIncrementalRequest = false;\n _this.itemCount = 30;\n _this.virtualListHeight = 0;\n _this.isVirtualScrolling = false;\n _this.isPreventScrollAction = false;\n _this.scrollPreStartIndex = 0;\n _this.isScrollActionTriggered = false;\n _this.previousStartIndex = 0;\n _this.isMouseScrollAction = false;\n _this.isKeyBoardAction = false;\n _this.isScrollChanged = false;\n _this.isUpwardScrolling = false;\n _this.startIndex = 0;\n _this.currentPageNumber = 0;\n _this.pageCount = 0;\n _this.isPreventKeyAction = false;\n _this.generatedDataObject = {};\n _this.skeletonCount = 32;\n _this.isVirtualTrackHeight = false;\n _this.virtualSelectAll = false;\n _this.incrementalQueryString = '';\n _this.incrementalEndIndex = 0;\n _this.incrementalStartIndex = 0;\n _this.incrementalPreQueryString = '';\n _this.isObjectCustomValue = false;\n _this.appendUncheckList = false;\n _this.getInitialData = false;\n _this.preventPopupOpen = true;\n _this.virtualSelectAllState = false;\n _this.CurrentEvent = null;\n _this.isDynamicData = false;\n _this.isPrimitiveData = false;\n _this.virtualListInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: 0\n };\n _this.viewPortInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: 0\n };\n _this.selectedValueInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: 0\n };\n return _this;\n }\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n var propName = function (prop) {\n return prop;\n };\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n var compareValue_1 = null;\n compareValue_1 = value;\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) &&\n itemValue.toString() === compareValue_1.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.templateCompiler = function (baseTemplate) {\n var checkTemplate = false;\n if (typeof baseTemplate !== 'function' && baseTemplate) {\n try {\n checkTemplate = (selectAll(baseTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;\n if ((!isNullOrUndefined(this.noRecordsTemplate) && this.noRecordsTemplate !== 'No records found') || this.actionFailureTemplate !== 'Request failed') {\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;\n ele.innerHTML = '';\n var tempaltecheck = this.templateCompiler(template);\n if (typeof template !== 'function' && tempaltecheck) {\n compiledString = compile(select(template, document).innerHTML.trim());\n }\n else {\n compiledString = compile(template);\n }\n var templateName = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var noDataElement = void 0;\n if ((this.isReact) && typeof template === 'function') {\n noDataElement = compiledString({}, this, templateName, templateId, this.isStringTemplate, null);\n }\n else {\n noDataElement = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);\n }\n if (noDataElement && noDataElement.length > 0) {\n for (var i = 0; i < noDataElement.length; i++) {\n if (this.getModuleName() === 'listbox' && templateName === 'noRecordsTemplate') {\n if (noDataElement[i].nodeName === '#text') {\n var liElem = this.createElement('li');\n liElem.textContent = noDataElement[i].textContent;\n liElem.classList.add('e-list-nrt');\n liElem.setAttribute('role', 'option');\n ele.appendChild(liElem);\n }\n else {\n noDataElement[i].classList.add('e-list-nr-template');\n ele.appendChild(noDataElement[i]);\n }\n }\n else {\n if (noDataElement[i] instanceof HTMLElement || ((noDataElement[i] instanceof Text) && (noDataElement[i]).textContent !== '')) {\n ele.appendChild(noDataElement[i]);\n }\n }\n }\n }\n this.renderReactTemplates();\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };\n var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);\n if (componentLocale.getConstant('actionFailureTemplate') !== '' || componentLocale.getConstant('noRecordsTemplate') !== '') {\n this.l10n = componentLocale;\n }\n else {\n this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' :\n this.getModuleName() === 'mention' ? 'mention' : 'dropdowns', l10nLocale, this.locale);\n }\n var content = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n if (this.getModuleName() === 'listbox') {\n var liElem = this.createElement('li');\n liElem.textContent = content;\n ele.appendChild(liElem);\n liElem.classList.add('e-list-nrt');\n liElem.setAttribute('role', 'option');\n }\n else {\n if (!isNullOrUndefined(ele)) {\n ele.innerHTML = content;\n }\n }\n }\n };\n DropDownBase.prototype.checkAndResetCache = function () {\n if (this.isVirtualizationEnabled) {\n this.generatedDataObject = {};\n this.virtualItemStartIndex = this.virtualItemEndIndex = 0;\n this.viewPortInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: this.itemCount\n };\n this.selectedValueInfo = null;\n }\n };\n DropDownBase.prototype.updateIncrementalInfo = function (startIndex, endIndex) {\n this.viewPortInfo.startIndex = startIndex;\n this.viewPortInfo.endIndex = endIndex;\n this.updateVirtualItemIndex();\n this.isIncrementalRequest = true;\n this.resetList(this.dataSource, this.fields, this.query);\n this.isIncrementalRequest = false;\n };\n DropDownBase.prototype.updateIncrementalView = function (startIndex, endIndex) {\n this.viewPortInfo.startIndex = startIndex;\n this.viewPortInfo.endIndex = endIndex;\n this.updateVirtualItemIndex();\n this.resetList(this.dataSource, this.fields, this.query);\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n };\n DropDownBase.prototype.updateVirtualItemIndex = function () {\n this.virtualItemStartIndex = this.viewPortInfo.startIndex;\n this.virtualItemEndIndex = this.viewPortInfo.endIndex;\n this.virtualListInfo = this.viewPortInfo;\n };\n DropDownBase.prototype.getFilteringSkeletonCount = function () {\n var currentSkeletonCount = this.skeletonCount;\n this.getSkeletonCount(true);\n this.skeletonCount = this.dataCount < this.itemCount * 2 && ((!(this.dataSource instanceof DataManager)) ||\n ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;\n var skeletonUpdated = true;\n if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2)) && ((!(this.dataSource instanceof DataManager)) || ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount)))) {\n this.skeletonCount = 0;\n skeletonUpdated = false;\n }\n if (!this.list.classList.contains(dropDownBaseClasses.noData)) {\n if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {\n this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));\n }\n else {\n this.UpdateSkeleton();\n }\n this.liCollections = this.list.querySelectorAll('.e-list-item');\n if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0 && this.list.querySelector('.e-dropdownbase')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n this.list.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n }\n }\n };\n DropDownBase.prototype.getSkeletonCount = function (retainSkeleton) {\n this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;\n var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;\n this.skeletonCount = actualCount * 4 < this.itemCount ? this.itemCount : actualCount * 4;\n this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;\n this.virtualItemCount = this.itemCount;\n this.skeletonCount = Math.floor(this.skeletonCount / 2);\n };\n DropDownBase.prototype.GetVirtualTrackHeight = function () {\n var height = this.totalItemCount === this.viewPortInfo.endIndex ?\n this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;\n height = this.isVirtualTrackHeight ? 0 : height;\n var heightDimension = \"height: \" + (height - this.itemCount * this.listItemHeight) + \"px;\";\n if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && this.skeletonCount === 0) {\n return 'height: 0px;';\n }\n return heightDimension;\n };\n DropDownBase.prototype.getTransformValues = function () {\n var translateY = this.viewPortInfo.startIndex * this.listItemHeight;\n translateY = translateY - (this.skeletonCount * this.listItemHeight);\n translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) ||\n this.skeletonCount === 0) ? 0 : translateY;\n var styleText = \"transform: translate(0px, \" + translateY + \"px);\";\n return styleText;\n };\n DropDownBase.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {\n var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');\n var isContainVirtualList = this.list.querySelector('.e-virtual-list');\n if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.isVirtualizationEnabled) {\n var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;\n for (var i = 0; i < totalSkeletonCount; i++) {\n var liElement = this.createElement('li', { className: dropDownBaseClasses.virtualList, styles: 'overflow: inherit' });\n if (this.isVirtualizationEnabled && this.itemTemplate) {\n liElement.style.height = this.listItemHeight + 'px';\n }\n var skeleton = new Skeleton({\n shape: 'Text',\n height: '10px',\n width: '95%',\n cssClass: 'e-skeleton-text'\n });\n skeleton.appendTo(this.createElement('div'));\n liElement.appendChild(skeleton.element);\n if (isContainSkeleton.firstChild) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);\n }\n }\n }\n };\n DropDownBase.prototype.getLocaleName = function () {\n return 'drop-down-base';\n };\n DropDownBase.prototype.getTextByValue = function (value) {\n var text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = void 0;\n if (this.properties.allowCustomValue &&\n this.properties.value &&\n this.properties.value instanceof Array &&\n this.properties.value.length > 0) {\n item = this.typeOfData(this.properties.value);\n }\n else {\n item = this.typeOfData(this.listData);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number' ||\n item.typeof === 'number') {\n return parseFloat(value);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean' ||\n item.typeof === 'boolean') {\n return ((value === 'true') || ('' + value === 'true'));\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n *\n * @returns {void}\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (!isNullOrUndefined(this.enableRtlElements)) {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n if (this.enableRtl) {\n addClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n }\n else {\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n }\n }\n };\n /**\n * Initialize the Component.\n *\n * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - The event object.\n * @returns {void}\n */\n DropDownBase.prototype.initialize = function (e) {\n this.bindEvent = true;\n this.preventPopupOpen = true;\n this.actionFailureTemplateId = \"\" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n else if (this.isDynamicDataChange) {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query, e);\n }\n };\n /**\n * Get the properties to be maintained in persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Sets the enabled state to DropDownBase.\n *\n * @param {string} value - Specifies the attribute values to add on the input element.\n * @returns {void}\n */\n DropDownBase.prototype.updateDataAttribute = function (value) {\n var invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];\n var attr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(this.getModuleName() === 'dropdownlist' && this.element.attributes[a].name === 'readonly')) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(attr, value, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n };\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var group = element.querySelectorAll('select>optgroup');\n var fields;\n var isSelectGroupCheck = this.getModuleName() === 'multiselect' && this.isGroupChecking && group.length > 0;\n fields = isSelectGroupCheck ? { value: 'value', text: 'text', groupBy: 'categeory' } : fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n if (isSelectGroupCheck) {\n this.getJSONfromOption(jsonElement, child, fields, item.label);\n }\n else {\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n }\n element.querySelectorAll('select>option');\n }\n this.updateFields(fields.text, fields.value, isSelectGroupCheck ? fields.groupBy : this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss, this.fields.disabled);\n this.resetList(jsonElement, fields);\n };\n DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss, disabled) {\n var field = {\n 'fields': {\n text: text,\n value: value,\n groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,\n htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,\n iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss,\n disabled: !isNullOrUndefined(disabled) ? disabled : this.fields && this.fields.disabled\n }\n };\n this.setProperties(field, true);\n };\n DropDownBase.prototype.getJSONfromOption = function (items, options, fields, category) {\n if (category === void 0) { category = null; }\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var option = options_1[_i];\n var json = {};\n json[fields.text] = option.innerText;\n json[fields.value] = !isNullOrUndefined(option.getAttribute(fields.value)) ?\n option.getAttribute(fields.value) : option.innerText;\n if (!isNullOrUndefined(category)) {\n json[fields.groupBy] = category;\n }\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n *\n * @private\n * @returns {void}\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n this.isDataFetched = false;\n this.itemTemplateId = \"\" + this.element.id + ITEMTEMPLATE_PROPERTY;\n this.displayTemplateId = \"\" + this.element.id + DISPLAYTEMPLATE_PROPERTY;\n this.spinnerTemplateId = \"\" + this.element.id + SPINNERTEMPLATE_PROPERTY;\n this.valueTemplateId = \"\" + this.element.id + VALUETEMPLATE_PROPERTY;\n this.groupTemplateId = \"\" + this.element.id + GROUPTEMPLATE_PROPERTY;\n this.headerTemplateId = \"\" + this.element.id + HEADERTEMPLATE_PROPERTY;\n this.footerTemplateId = \"\" + this.element.id + FOOTERTEMPLATE_PROPERTY;\n this.noRecordsTemplateId = \"\" + this.element.id + NORECORDSTEMPLATE_PROPERTY;\n };\n /**\n * Creates the list items of DropDownBase component.\n *\n * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @param {MouseEvent | KeyboardEventArgs | TouchEvent} event - Specifies the event which is the reason for the invocation of this method.\n * @returns {void}\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;\n if (!this.isRequesting) {\n this.trigger('actionBegin', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.isRequesting = true;\n _this.showSpinner();\n if (dataSource instanceof DataManager) {\n _this.isRequested = true;\n var isWhereExist_1 = false;\n if (_this.isDataFetched) {\n _this.emptyDataRequest(fields);\n return;\n }\n eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n var isReOrder = true;\n if (!_this.virtualSelectAll) {\n var newQuery = _this.getQuery(eventArgs.query);\n for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {\n if (newQuery.queries[queryElements].fn === 'onWhere') {\n isWhereExist_1 = true;\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (_this.isVirtualizationEnabled && (e.count !== 0 && e.count < (_this.itemCount * 2))) {\n if (newQuery) {\n for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {\n if (newQuery.queries[queryElements].fn === 'onTake') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newQuery.queries[queryElements].e.nos = e.count;\n }\n if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {\n isReOrder = false;\n }\n }\n }\n }\n else {\n _this.isVirtualTrackHeight = false;\n if (newQuery) {\n for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {\n if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {\n isReOrder = false;\n }\n }\n }\n }\n }\n if (isReOrder) {\n // eslint-disable @typescript-eslint/no-explicit-any\n _this.dataCount = _this.totalItemCount = e.count;\n }\n _this.trigger('actionComplete', e, function (e) {\n if (!e.cancel) {\n _this.isRequesting = false;\n var listItems = e.result;\n if (_this.isIncrementalRequest) {\n ulElement = _this.renderItems(listItems, fields);\n return;\n }\n if ((!_this.isVirtualizationEnabled && listItems.length === 0) ||\n (_this.isVirtualizationEnabled && listItems.length === 0 && !isWhereExist_1)) {\n _this.isDataFetched = true;\n }\n if (!isWhereExist_1) {\n _this.remoteDataCount = e.count;\n }\n _this.dataCount = !_this.virtualSelectAll ? e.count : _this.dataCount;\n _this.totalItemCount = !_this.virtualSelectAll ? e.count : _this.totalItemCount;\n ulElement = _this.renderItems(listItems, fields);\n _this.appendUncheckList = false;\n _this.onActionComplete(ulElement, listItems, e);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.isRequested = false;\n _this.bindChildItems(listItems, ulElement, fields, e);\n if (_this.getInitialData) {\n _this.setListData(dataSource, fields, query, event);\n _this.getInitialData = false;\n _this.preventPopupOpen = false;\n return;\n }\n if (_this.isVirtualizationEnabled && _this.setCurrentView) {\n _this.notify('setCurrentViewDataAsync', {\n module: 'VirtualScroll'\n });\n }\n if (_this.keyboardEvent != null) {\n _this.handleVirtualKeyboardActions(_this.keyboardEvent, _this.pageCount);\n }\n if (_this.isVirtualizationEnabled) {\n _this.getFilteringSkeletonCount();\n }\n if (_this.virtualSelectAll && _this.virtualSelectAllData) {\n _this.virtualSelectionAll(_this.virtualSelectAllState, _this.liCollections, _this.CurrentEvent);\n _this.virtualSelectAllState = false;\n _this.CurrentEvent = null;\n _this.virtualSelectAll = false;\n }\n }\n });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.isRequesting = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n _this.isRequesting = false;\n var isReOrder = true;\n var listItems = void 0;\n if (_this.isVirtualizationEnabled && !_this.virtualGroupDataSource && _this.fields.groupBy) {\n var data = new DataManager(_this.dataSource).executeLocal(new Query().group(_this.fields.groupBy));\n _this.virtualGroupDataSource = data.records;\n }\n var dataManager = _this.isVirtualizationEnabled &&\n _this.virtualGroupDataSource\n && !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) :\n new DataManager(eventArgs.data);\n listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);\n if (!_this.virtualSelectAll) {\n var newQuery = _this.getQuery(eventArgs.query);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (_this.isVirtualizationEnabled && (listItems.count !== 0 &&\n listItems.count < (_this.itemCount * 2))) {\n if (newQuery) {\n for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {\n if (newQuery.queries[queryElements].fn === 'onTake') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newQuery.queries[queryElements].e.nos = listItems.count;\n listItems = (newQuery).executeLocal(dataManager);\n }\n if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {\n isReOrder = false;\n }\n }\n if (isReOrder) {\n listItems = (newQuery).executeLocal(dataManager);\n _this.isVirtualTrackHeight = (!(_this.dataSource instanceof DataManager) &&\n !_this.isCustomDataUpdated) ? true : false;\n }\n }\n }\n else {\n _this.isVirtualTrackHeight = false;\n if (newQuery) {\n for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {\n if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {\n isReOrder = false;\n }\n }\n }\n }\n }\n if (isReOrder && (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated) &&\n !_this.virtualSelectAll) {\n // eslint-disable @typescript-eslint/no-explicit-any\n _this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length :\n listItems.count;\n }\n listItems = _this.isVirtualizationEnabled ? listItems.result : listItems;\n // eslint-enable @typescript-eslint/no-explicit-any\n var localDataArgs = { cancel: false, result: listItems };\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {\n if (_this.isIncrementalRequest) {\n ulElement = _this.renderItems(localDataArgs.result, fields);\n return;\n }\n if (!localDataArgs.cancel) {\n ulElement = _this.renderItems(localDataArgs.result, fields);\n _this.onActionComplete(ulElement, localDataArgs.result, event);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.bindChildItems(localDataArgs.result, ulElement, fields);\n if (_this.getInitialData) {\n _this.getInitialData = false;\n _this.preventPopupOpen = false;\n return;\n }\n setTimeout(function () {\n if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (_this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {\n _this.updateDataList();\n }\n });\n }\n });\n }\n }\n });\n }\n };\n DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {\n // Used this method in component side.\n };\n DropDownBase.prototype.updatePopupState = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.virtualSelectionAll = function (state, li, event) {\n // Used this method in component side.\n };\n DropDownBase.prototype.updateRemoteData = function () {\n this.setListData(this.dataSource, this.fields, this.query);\n };\n DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {\n var _this = this;\n if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {\n setTimeout(function () {\n var childNode = _this.remainingItems(_this.sortedData, fields);\n append(childNode, ulElement);\n _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n _this.updateListValues();\n _this.raiseDataBound(listItems, e);\n }, 0);\n }\n else {\n this.raiseDataBound(listItems, e);\n }\n };\n DropDownBase.prototype.isObjectInArray = function (objectToFind, array) {\n return array.some(function (item) {\n return Object.keys(objectToFind).every(function (key) {\n return Object.prototype.hasOwnProperty.call(item, key) && item[key] === objectToFind[key];\n });\n });\n };\n DropDownBase.prototype.updateListValues = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.findListElement = function (list, findNode, attribute, value) {\n var liElement = null;\n if (list) {\n var listArr = [].slice.call(list.querySelectorAll(findNode));\n for (var index = 0; index < listArr.length; index++) {\n if (listArr[index].getAttribute(attribute) === (value + '')) {\n liElement = listArr[index];\n break;\n }\n }\n }\n return liElement;\n };\n DropDownBase.prototype.raiseDataBound = function (listItems, e) {\n this.hideSpinner();\n var dataBoundEventArgs = {\n items: listItems,\n e: e\n };\n this.trigger('dataBound', dataBoundEventArgs);\n };\n DropDownBase.prototype.remainingItems = function (dataSource, fields) {\n var spliceData = new DataManager(dataSource).executeLocal(new Query().skip(100));\n if (this.itemTemplate) {\n var listElements = this.templateListItem(spliceData, fields);\n return [].slice.call(listElements.childNodes);\n }\n var type = this.typeOfData(spliceData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n return ListBase.createListItemFromArray(this.createElement, spliceData, true, this.listOption(spliceData, fields), this);\n }\n return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true, this);\n };\n DropDownBase.prototype.emptyDataRequest = function (fields) {\n var listItems = [];\n this.onActionComplete(this.renderItems(listItems, fields), listItems);\n this.isRequested = false;\n this.isRequesting = false;\n this.hideSpinner();\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n if (!isNullOrUndefined(this.list)) {\n addClass([this.list], dropDownBaseClasses.noData);\n }\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n this.listData = list;\n if (this.isVirtualizationEnabled && !this.isCustomDataUpdated && !this.virtualSelectAll) {\n this.notify('setGeneratedData', {\n module: 'VirtualScroll'\n });\n }\n if (this.getModuleName() !== 'listbox') {\n ulElement.setAttribute('tabindex', '0');\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);\n }\n if (!this.isVirtualizationEnabled) {\n this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;\n }\n if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {\n for (var i = 0; i < ulElement.childElementCount; i++) {\n if (ulElement.children[i].classList.contains('e-list-group-item')) {\n if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML === '') {\n addClass([ulElement.children[i]], HIDE_GROUPLIST);\n }\n }\n if (ulElement.children[0].classList.contains('e-hide-group-header')) {\n setStyleAttribute(ulElement.children[1], { zIndex: 11 });\n }\n }\n }\n if (!isNullOrUndefined(this.list)) {\n if (!this.isVirtualizationEnabled) {\n this.list.innerHTML = '';\n this.list.appendChild(ulElement);\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.postRender(this.list, list, this.bindEvent);\n }\n }\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n if (this.fields.disabled) {\n var liCollections = listElement.querySelectorAll('.' + dropDownBaseClasses.li);\n for (var index = 0; index < liCollections.length; index++) {\n if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.disabled]) {\n this.disableListItem(liCollections[index]);\n }\n }\n }\n /* eslint-enable @typescript-eslint/no-unused-vars */\n var focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n focusItem.classList.add(dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n *\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @returns {Query} Returns the query to do the data query operation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n DropDownBase.prototype.updateVirtualizationProperties = function (itemCount, filtering, isCheckbox) {\n this.isVirtualizationEnabled = true;\n this.virtualizedItemsCount = itemCount;\n this.isAllowFiltering = filtering;\n this.isCheckBoxSelection = isCheckbox;\n };\n /**\n * To render the template content for group header element.\n *\n * @param {HTMLElement} listEle - Specifies the group list elements.\n * @returns {void}\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var groupcheck = this.templateCompiler(this.groupTemplate);\n if (typeof this.groupTemplate !== 'function' && groupcheck) {\n var groupValue = select(this.groupTemplate, document).innerHTML.trim();\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);\n //EJ2-55168- Group checkbox is not working with group template\n if (this.isGroupChecking) {\n for (var i = 0; i < tempHeaders.length; i++) {\n this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });\n }\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);\n //EJ2-55168- Group checkbox is not working with group template\n if (this.isGroupChecking) {\n for (var i = 0; i < tempHeaders.length; i++) {\n this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });\n }\n }\n }\n this.renderReactTemplates();\n }\n };\n /**\n * To create the ul li list items\n *\n * @param {object []} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @returns {HTMLElement} Return the ul li list items.\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource) {\n if (fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n if (this.element.querySelector('optgroup') && this.isGroupChecking && this.getModuleName() === 'multiselect') {\n dataSource = ListBase.groupDataSource(dataSource, fields, this.sortOrder);\n }\n else {\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else if (this.getModuleName() !== 'listbox' || (this.getModuleName() === 'listbox' && !this.preventDefActionFilter)) {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n this.sortedData = dataSource;\n return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true, this);\n }\n return null;\n };\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldValues = !isNullOrUndefined(fields.properties) ?\n fields.properties : fields;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fieldValues,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (!isNullOrUndefined(this.list) && !this.list.classList.contains(dropDownBaseClasses.noData)) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!isNullOrUndefined(this.list) && !this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && !isNullOrUndefined(this.list)) {\n prepend([this.fixedHeaderElement], this.list);\n }\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n }\n };\n DropDownBase.prototype.scrollStop = function (e, isDownkey) {\n var target = !isNullOrUndefined(e) ? e.target : this.list;\n var liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');\n var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;\n for (var i = topIndex; i > -1; i--) {\n var index = this.isVirtualizationEnabled ? i + virtualListCount : i;\n if (this.isVirtualizationEnabled) {\n if (this.fixedHeaderElement && this.updateGroupHeader(index, liCollections, target)) {\n break;\n }\n if (isDownkey) {\n if ((!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.selected) && this.getModuleName() !== 'autocomplete') || (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.focus) && this.getModuleName() === 'autocomplete')) ;\n }\n }\n else {\n if (this.updateGroupHeader(index, liCollections, target)) {\n break;\n }\n }\n }\n };\n DropDownBase.prototype.getPageCount = function (returnExactCount) {\n if (this.list) {\n var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));\n return returnExactCount ? pageCount : Math.round(pageCount);\n }\n else {\n return 0;\n }\n };\n DropDownBase.prototype.updateGroupHeader = function (index, liCollections, target) {\n if (!isNullOrUndefined(liCollections[index]) &&\n liCollections[index].classList.contains(dropDownBaseClasses.group)) {\n this.updateGroupFixedHeader(liCollections[index], target);\n return true;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n this.fixedHeaderElement.style.top = 'none';\n return false;\n }\n };\n DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {\n if (this.fixedHeaderElement) {\n if (!isNullOrUndefined(element.innerHTML)) {\n this.fixedHeaderElement.innerHTML = element.innerHTML;\n }\n this.fixedHeaderElement.style.position = 'fixed';\n this.fixedHeaderElement.style.top = (this.list.parentElement.offsetTop + this.list.offsetTop) - window.scrollY + 'px';\n this.fixedHeaderElement.style.display = 'block';\n }\n };\n DropDownBase.prototype.getValidLi = function () {\n if (this.isVirtualizationEnabled) {\n return this.liCollections[0].classList.contains('e-virtual-list') ? this.liCollections[this.skeletonCount] : this.liCollections[0];\n }\n return this.liCollections[0];\n };\n /**\n * To render the list items\n *\n * @param {object[]} listData - Specifies the list of array of data.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @param {boolean} isCheckBoxUpdate - Specifies whether the list item is updated with checkbox.\n * @returns {HTMLElement} Return the list items.\n */\n DropDownBase.prototype.renderItems = function (listData, fields, isCheckBoxUpdate) {\n var ulElement;\n if (this.itemTemplate && listData) {\n if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {\n this.virtualSelectAllData = listData;\n listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);\n }\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else if (this.getModuleName() !== 'listbox' || (this.getModuleName() === 'listbox' && !this.preventDefActionFilter)) {\n dataSource = this.getSortedDataSource(dataSource);\n }\n this.sortedData = dataSource;\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);\n if (this.isVirtualizationEnabled) {\n var oldUlElement = this.list.querySelector('.e-list-parent');\n var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');\n if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {\n if (this.getModuleName() === 'multiselect' && this.isCheckBoxSelection && this.appendUncheckList && this.list && this.list.querySelector('.e-active')) {\n virtualUlElement.appendChild(ulElement);\n isCheckBoxUpdate = true;\n }\n else {\n virtualUlElement.replaceChild(ulElement, oldUlElement);\n }\n var reOrderList = this.list.querySelectorAll('.e-reorder');\n if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {\n this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);\n }\n this.updateListElements(listData);\n }\n else if (!virtualUlElement) {\n this.list.innerHTML = '';\n this.createVirtualContent();\n this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);\n this.updateListElements(listData);\n }\n }\n }\n else {\n if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {\n this.virtualSelectAllData = listData;\n listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);\n }\n ulElement = this.createListItems(listData, fields);\n if (this.isIncrementalRequest) {\n this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n this.incrementalUlElement = ulElement;\n this.incrementalListData = listData;\n return ulElement;\n }\n if (this.isVirtualizationEnabled) {\n var oldUlElement = this.list.querySelector('.e-list-parent' + ':not(.e-reorder)');\n var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');\n var isRemovedUlelement = false;\n if (!oldUlElement && this.list.querySelector('.e-list-parent' + '.e-reorder')) {\n oldUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');\n }\n if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect')) || isRemovedUlelement) {\n if (!this.appendUncheckList) {\n virtualUlElement.replaceChild(ulElement, oldUlElement);\n }\n else {\n virtualUlElement.appendChild(ulElement);\n }\n this.updateListElements(listData);\n }\n else if ((!virtualUlElement) || (!virtualUlElement.firstChild)) {\n this.list.innerHTML = '';\n this.createVirtualContent();\n this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);\n this.updateListElements(listData);\n }\n }\n }\n return ulElement;\n };\n DropDownBase.prototype.createVirtualContent = function () {\n if (!this.list.querySelector('.e-virtual-ddl-content')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content'\n }));\n }\n };\n DropDownBase.prototype.updateListElements = function (listData) {\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.listData = listData;\n this.postRender(this.list, listData, this.bindEvent);\n };\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n var option = this.listOption(dataSource, fields);\n option.templateID = this.itemTemplateId;\n option.isStringTemplate = this.isStringTemplate;\n var itemcheck = this.templateCompiler(this.itemTemplate);\n var ulElement;\n if (typeof this.itemTemplate !== 'function' && itemcheck) {\n var itemValue = select(this.itemTemplate, document).innerHTML.trim();\n ulElement = ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);\n if (this.isVirtualizationEnabled && this.isReact) {\n this.renderReactTemplates();\n }\n return ulElement;\n }\n else {\n ulElement = ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);\n if (this.isVirtualizationEnabled && this.isReact) {\n this.renderReactTemplates();\n }\n return ulElement;\n }\n };\n DropDownBase.prototype.typeOfData = function (items) {\n var item = { typeof: null, item: null };\n for (var i = 0; (!isNullOrUndefined(items) && i < items.length); i++) {\n if (!isNullOrUndefined(items[i])) {\n var listDataType = typeof (items[i]) === 'string' ||\n typeof (items[i]) === 'number' || typeof (items[i]) === 'boolean';\n var isNullData = listDataType ? isNullOrUndefined(items[i]) :\n isNullOrUndefined(getValue((this.fields.value ? this.fields.value : 'value'), items[i]));\n if (!isNullData) {\n return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n if (!isNullOrUndefined(this.list)) {\n this.list.parentElement.style.display = 'block';\n }\n var borderWidth = 0;\n if (this.list && this.list.parentElement) {\n borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);\n /*Shorthand property not working in Firefox for getComputedStyle method.\n Refer bug report https://bugzilla.mozilla.org/show_bug.cgi?id=137688\n Refer alternate solution https://stackoverflow.com/a/41696234/9133493*/\n if (isNaN(borderWidth)) {\n var borderTopWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-top-width'), 10);\n var borderBottomWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-bottom-width'), 10);\n var borderLeftWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-left-width'), 10);\n var borderRightWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-right-width'), 10);\n borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);\n }\n }\n if (!isNullOrUndefined(this.liCollections)) {\n var liWidth = this.getValidLi().offsetWidth - borderWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n }\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n if (this.typeOfData(dataSource).typeof === 'string' || this.typeOfData(dataSource).typeof === 'number'\n || this.typeOfData(dataSource).typeof === 'boolean') {\n textField = '';\n }\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n *\n * @param {string | number | boolean} value - Specifies given value.\n * @returns {number} Returns the index of the item.\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = [];\n if (this.fields.disabled && this.getModuleName() === 'multiselect' && this.liCollections) {\n listItems = this.liCollections;\n }\n else {\n listItems = this.getItems();\n }\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n /**\n * Return the index of item which matched with given value in data source\n *\n * @param {string | number | boolean} value - Specifies given value.\n * @param {HTMLElement} ulElement - Specifies given value.\n * @returns {number} Returns the index of the item.\n */\n DropDownBase.prototype.getIndexByValueFilter = function (value, ulElement) {\n var index;\n if (!ulElement) {\n return null;\n }\n var listItems = ulElement.querySelectorAll('li' + ':not(.e-list-group-item)');\n if (listItems) {\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n }\n return index;\n };\n /**\n * To dispatch the event manually\n *\n * @param {HTMLElement} element - Specifies the element to dispatch the event.\n * @param {string} type - Specifies the name of the event.\n * @returns {void}\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n if (element) {\n element.dispatchEvent(evt);\n }\n };\n /**\n * To set the current fields\n *\n * @returns {void}\n */\n DropDownBase.prototype.setFields = function () {\n if (this.fields.value && !this.fields.text) {\n this.updateFields(this.fields.value, this.fields.value);\n }\n else if (!this.fields.value && this.fields.text) {\n this.updateFields(this.fields.text, this.fields.text);\n }\n else if (!this.fields.value && !this.fields.text) {\n this.isPrimitiveData = true;\n this.updateFields('text', 'text');\n }\n };\n /**\n * reset the items list.\n *\n * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.\n * @returns {void}\n */\n DropDownBase.prototype.resetList = function (dataSource, fields, query, e) {\n if (this.list) {\n if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)\n || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {\n var data = dataSource instanceof Array ? (dataSource.length > 0)\n : !isNullOrUndefined(dataSource);\n if (!data && this.selectData && this.selectData.length > 0) {\n dataSource = this.selectData;\n }\n }\n dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;\n this.addedNewItem = false;\n this.setListData(dataSource, fields, query, e);\n }\n };\n DropDownBase.prototype.updateSelectElementData = function (isFiltering) {\n if ((isFiltering || this.isVirtualizationEnabled) &&\n isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {\n this.selectData = this.listData;\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateDataSource = function (props, oldProps) {\n this.resetList(this.dataSource);\n this.totalItemCount = this.dataSource instanceof DataManager ? this.dataSource.dataSource.json.length : 0;\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp, oldProp) {\n this.isDataFetched = false;\n this.isPrimitiveData = false;\n var updateData = {};\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]] && props[j] === 'fields') {\n this.setFields();\n updateData[props[j]] = newProp[props[j]];\n }\n else if (newProp[props[j]]) {\n updateData[props[j]] = newProp[props[j]];\n }\n }\n if (Object.keys(updateData).length > 0) {\n if (Object.keys(updateData).indexOf('dataSource') === -1) {\n updateData.dataSource = this.dataSource;\n }\n if (this.getModuleName() === 'listbox') {\n if (!this.isReact || (this.isReact && !isNullOrUndefined(newProp.dataSource))) {\n this.updateDataSource(updateData, oldProp);\n }\n }\n else {\n this.isDynamicData = true;\n this.updateDataSource(updateData, oldProp);\n }\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n *\n * @param {DropDownBaseModel} newProp - Returns the dynamic property value of the component.\n * @param {DropDownBaseModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownbase') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n this.setUpdateInitial(['sortOrder', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n if (this.ulElement && this.fixedHeaderElement) {\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n }\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n /**\n * Build and render the component\n *\n * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.\n * @param {boolean} isEmptyData - Specifies the component to initialize with list data or not.\n * @private\n * @returns {void}\n */\n DropDownBase.prototype.render = function (e, isEmptyData) {\n if (this.getModuleName() === 'listbox') {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n }\n else {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content });\n }\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n EventHandler.add(document, 'scroll', this.updateGroupFixedHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = this.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n if (!isEmptyData) {\n this.initialize(e);\n }\n };\n DropDownBase.prototype.removeScrollEvent = function () {\n if (this.list) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\n * @returns {Element[]}\n */\n DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}\n * @deprecated\n */\n DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {\n this.renderList();\n }\n if (this.sortOrder !== 'None' && isNullOrUndefined(itemIndex)) {\n var newList = [].slice.call(this.listData);\n newList.push(items);\n newList = this.getSortedDataSource(newList);\n if (this.fields.groupBy) {\n newList = ListBase.groupDataSource(newList, this.fields.properties, this.sortOrder);\n itemIndex = newList.indexOf(items);\n }\n else {\n itemIndex = newList.indexOf(items);\n }\n }\n var itemsCount = this.getItems().length;\n var isListboxEmpty = itemsCount === 0;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = (items instanceof Array ? items : [items]);\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n if (items && fields.groupBy) {\n items = ListBase.groupDataSource(items, fields.properties);\n }\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var isHeader = item.isHeader;\n var li = this.createElement('li', { className: isHeader ? dropDownBaseClasses.group : dropDownBaseClasses.li, id: 'option-add-' + i });\n var itemText = item instanceof Object ? getValue(fields.text, item) : item;\n if (isHeader) {\n li.innerText = itemText;\n }\n if (this.itemTemplate && !isHeader) {\n var itemCheck = this.templateCompiler(this.itemTemplate);\n var compiledString = typeof this.itemTemplate !== 'function' &&\n itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);\n if (addItemTemplate) {\n append(addItemTemplate, li);\n }\n }\n else if (!isHeader) {\n li.appendChild(document.createTextNode(itemText));\n }\n li.setAttribute('data-value', item instanceof Object ? getValue(fields.value, item) : item);\n li.setAttribute('role', 'option');\n this.notify('addItem', { module: 'CheckBoxSelection', item: li });\n liCollections.push(li);\n if (this.getModuleName() === 'listbox') {\n this.listData.splice(isListboxEmpty ?\n this.listData.length : index, 0, item);\n if (this.listData.length !== this.sortedData.length) {\n this.sortedData = this.listData;\n }\n }\n else {\n this.listData.push(item);\n }\n if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {\n index = null;\n }\n if (this.getModuleName() === 'listbox') {\n this.updateActionCompleteData(li, item, isListboxEmpty ? null : index + i);\n }\n else {\n this.updateActionCompleteData(li, item, index);\n }\n //Listbox event\n this.trigger('beforeItemRender', { element: li, item: item });\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n if (!isNullOrUndefined(this.list)) {\n this.list.innerHTML = '';\n this.list.classList.remove(dropDownBaseClasses.noData);\n this.isAddNewItemTemplate = true;\n if (!isNullOrUndefined(this.ulElement)) {\n this.list.appendChild(this.ulElement);\n }\n }\n this.liCollections = liCollections;\n if (!isNullOrUndefined(liCollections) && !isNullOrUndefined(this.ulElement)) {\n append(liCollections, this.ulElement);\n }\n this.updateAddItemList(this.list, itemsCount);\n }\n else {\n if (this.getModuleName() === 'listbox' && itemsCount === 0) {\n this.ulElement.innerHTML = '';\n }\n var attr = [];\n for (var i = 0; i < items.length; i++) {\n var listGroupItem = this.ulElement.querySelectorAll('.e-list-group-item');\n for (var j = 0; j < listGroupItem.length; j++) {\n attr[j] = listGroupItem[j].innerText;\n }\n if (attr.indexOf(liCollections[i].innerText) > -1 && fields.groupBy) {\n for (var j = 0; j < listGroupItem.length; j++) {\n if (attr[j] === liCollections[i].innerText) {\n if (this.sortOrder === 'None') {\n this.ulElement.insertBefore(liCollections[i + 1], listGroupItem[j + 1]);\n }\n else {\n this.ulElement.insertBefore(liCollections[i + 1], this.ulElement.childNodes[itemIndex]);\n }\n i = i + 1;\n break;\n }\n }\n }\n else {\n if (this.liCollections[index] && this.liCollections[index].parentNode) {\n this.liCollections[index].parentNode.\n insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n if (itemIndex && this.getModuleName() === 'listbox') {\n this.ulElement.insertBefore(liCollections[i], this.ulElement.childNodes[itemIndex + i]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n }\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n if (this.getModuleName() === 'multiselect') {\n this.updateDataList();\n }\n }\n }\n if (this.getModuleName() === 'listbox' && this.isReact) {\n this.renderReactTemplates();\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n this.addedNewItem = true;\n };\n /**\n * Checks if the given HTML element is disabled.\n *\n * @param {HTMLElement} li - The HTML element to check.\n * @returns {boolean} - Returns true if the element is disabled, otherwise false.\n */\n DropDownBase.prototype.isDisabledElement = function (li) {\n if (li && li.classList.contains('e-disabled')) {\n return true;\n }\n return false;\n };\n /**\n * Checks whether the list item at the specified index is disabled.\n *\n * @param {number} index - The index of the list item to check.\n * @returns {boolean} True if the list item is disabled, false otherwise.\n */\n DropDownBase.prototype.isDisabledItemByIndex = function (index) {\n if (this.fields.disabled && this.liCollections) {\n return this.isDisabledElement(this.liCollections[index]);\n }\n return false;\n };\n /**\n * Disables the given list item.\n *\n * @param { HTMLLIElement } li - The list item to disable.\n * @returns {void}\n */\n DropDownBase.prototype.disableListItem = function (li) {\n li.classList.add('e-disabled');\n li.setAttribute('aria-disabled', 'true');\n li.setAttribute('aria-selected', 'false');\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateActionCompleteData = function (li, item, index) {\n // this is for ComboBox custom value\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateAddItemList = function (list, itemCount) {\n // this is for multiselect add item\n };\n DropDownBase.prototype.updateDataList = function () {\n // this is for multiselect update list items\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n DropDownBase.prototype.destroy = function () {\n if (document) {\n EventHandler.remove(document, 'scroll', this.updateGroupFixedHeader);\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n }\n this.liCollections = null;\n this.ulElement = null;\n this.list = null;\n this.enableRtlElements = null;\n this.rippleFun = null;\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No records found')\n ], DropDownBase.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('Request failed')\n ], DropDownBase.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], DropDownBase.prototype, \"sortOrder\", void 0);\n __decorate([\n Property([])\n ], DropDownBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"query\", void 0);\n __decorate([\n Property('StartsWith')\n ], DropDownBase.prototype, \"filterType\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], DropDownBase.prototype, \"locale\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"destroyed\", void 0);\n DropDownBase = __decorate([\n NotifyPropertyChanges\n ], DropDownBase);\n return DropDownBase;\n}(Component));\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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// don't use space in classnames\nvar dropDownListClasses = {\n root: 'e-dropdownlist',\n hover: dropDownBaseClasses.hover,\n selected: dropDownBaseClasses.selected,\n rtl: dropDownBaseClasses.rtl,\n li: dropDownBaseClasses.li,\n disable: dropDownBaseClasses.disabled,\n base: dropDownBaseClasses.root,\n focus: dropDownBaseClasses.focus,\n content: dropDownBaseClasses.content,\n input: 'e-input-group',\n inputFocus: 'e-input-focus',\n icon: 'e-input-group-icon e-ddl-icon',\n iconAnimation: 'e-icon-anim',\n value: 'e-input-value',\n device: 'e-ddl-device',\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n mobileFilter: 'e-ddl-device-filter',\n footer: 'e-ddl-footer',\n header: 'e-ddl-header',\n clearIcon: 'e-clear-icon',\n clearIconHide: 'e-clear-icon-hide',\n popupFullScreen: 'e-popup-full-page',\n disableIcon: 'e-ddl-disable-icon',\n hiddenElement: 'e-ddl-hidden',\n virtualList: 'e-list-item e-virtual-list'\n};\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The DropDownList component contains a list of predefined values from which you can\n * choose a single value.\n * ```html\n * \n * ```\n * ```typescript\n * let dropDownListObj:DropDownList = new DropDownList();\n * dropDownListObj.appendTo(\"#list\");\n * ```\n */\nvar DropDownList = /** @__PURE__ @class */ (function (_super) {\n __extends$1(DropDownList, _super);\n /**\n * * Constructor for creating the DropDownList component.\n *\n * @param {DropDownListModel} options - Specifies the DropDownList model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function DropDownList(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isListSearched = false;\n _this.preventChange = false;\n _this.isTouched = false;\n _this.isFocused = false;\n _this.autoFill = false;\n return _this;\n }\n /**\n * Initialize the event handler.\n *\n * @private\n * @returns {void}\n */\n DropDownList.prototype.preRender = function () {\n this.valueTempElement = null;\n this.element.style.opacity = '0';\n this.initializeData();\n _super.prototype.preRender.call(this);\n this.activeIndex = this.index;\n this.queryString = '';\n };\n DropDownList.prototype.initializeData = function () {\n this.isPopupOpen = false;\n this.isDocumentClick = false;\n this.isInteracted = false;\n this.isFilterFocus = false;\n this.beforePopupOpen = false;\n this.initial = true;\n this.initialRemoteRender = false;\n this.isNotSearchList = false;\n this.isTyped = false;\n this.isSelected = false;\n this.preventFocus = false;\n this.preventAutoFill = false;\n this.isValidKey = false;\n this.typedString = '';\n this.isEscapeKey = false;\n this.isPreventBlur = false;\n this.isTabKey = false;\n this.actionCompleteData = { isUpdated: false };\n this.actionData = { isUpdated: false };\n this.prevSelectPoints = {};\n this.isSelectCustom = false;\n this.isDropDownClick = false;\n this.preventAltUp = false;\n this.isCustomFilter = false;\n this.isSecondClick = false;\n this.previousValue = null;\n this.keyConfigure = {\n tab: 'tab',\n enter: '13',\n escape: '27',\n end: '35',\n home: '36',\n down: '40',\n up: '38',\n pageUp: '33',\n pageDown: '34',\n open: 'alt+40',\n close: 'shift+tab',\n hide: 'alt+38',\n space: '32'\n };\n this.viewPortInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: this.itemCount\n };\n };\n DropDownList.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n DropDownList.prototype.requiredModules = function () {\n var modules = [];\n if (this.enableVirtualization) {\n modules.push({ args: [this], member: 'VirtualScroll' });\n }\n return modules;\n };\n DropDownList.prototype.renderList = function (e, isEmptyData) {\n _super.prototype.render.call(this, e, isEmptyData);\n if (!(this.dataSource instanceof DataManager)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n }\n if (this.enableVirtualization && this.isFiltering() && this.getModuleName() === 'combobox') {\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n }\n this.unWireListEvents();\n this.wireListEvents();\n };\n DropDownList.prototype.floatLabelChange = function () {\n if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {\n var floatElement = this.inputWrapper.container.querySelector('.e-float-text');\n if (this.inputElement.value !== '' || this.isInteracted) {\n classList(floatElement, ['e-label-top'], ['e-label-bottom']);\n }\n else {\n classList(floatElement, ['e-label-bottom'], ['e-label-top']);\n }\n }\n };\n DropDownList.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clearAll(e);\n if (this.enableVirtualization) {\n this.list.scrollTop = 0;\n this.virtualListInfo = null;\n this.previousStartIndex = 0;\n this.previousEndIndex = 0;\n }\n };\n DropDownList.prototype.resetFocusElement = function () {\n this.removeHover();\n this.removeSelection();\n this.removeFocus();\n this.list.scrollTop = 0;\n if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {\n var li = this.fields.disabled ? this.ulElement.querySelector('.' + dropDownListClasses.li + ':not(.e-disabled)') : this.ulElement.querySelector('.' + dropDownListClasses.li);\n if (this.enableVirtualization) {\n li = this.liCollections[this.skeletonCount];\n }\n if (li) {\n li.classList.add(dropDownListClasses.focus);\n }\n }\n };\n DropDownList.prototype.clearAll = function (e, properties) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n if (isNullOrUndefined(properties) || (!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.isActive = true;\n this.resetSelection(properties);\n }\n var dataItem = this.getItemData();\n if ((!this.allowObjectBinding && (this.previousValue === dataItem.value)) ||\n (this.allowObjectBinding && this.previousValue &&\n this.isObjectInArray(this.previousValue, [this.allowCustom ? this.value ? this.value : dataItem :\n dataItem.value ? this.getDataByValue(dataItem.value) : dataItem]))) {\n return;\n }\n this.onChangeEvent(e);\n this.checkAndResetCache();\n if (this.enableVirtualization) {\n this.updateInitialData();\n }\n };\n DropDownList.prototype.resetSelection = function (properties) {\n if (this.list) {\n if ((!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.selectedLI = null;\n this.actionCompleteData.isUpdated = false;\n this.actionCompleteData.ulElement = null;\n this.actionCompleteData.list = null;\n this.resetList(properties.dataSource);\n }\n else {\n if (this.allowFiltering && this.getModuleName() !== 'autocomplete'\n && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list) &&\n this.actionCompleteData.list.length > 0) {\n this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);\n }\n this.resetFocusElement();\n }\n }\n if (!isNullOrUndefined(this.hiddenElement)) {\n this.hiddenElement.innerHTML = '';\n }\n if (!isNullOrUndefined(this.inputElement)) {\n this.inputElement.value = '';\n }\n this.value = null;\n this.itemData = null;\n this.text = null;\n this.index = null;\n this.activeIndex = null;\n this.item = null;\n this.queryString = '';\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n this.setSelection(null, null);\n this.isSelectCustom = false;\n this.updateIconState();\n this.cloneElements();\n };\n DropDownList.prototype.setHTMLAttributes = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n var updatedClassValue = (this.htmlAttributes[\"\" + htmlAttr].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.inputWrapper.container], updatedClassValue.split(' '));\n }\n }\n else if (htmlAttr === 'disabled' && this.htmlAttributes[\"\" + htmlAttr] === 'disabled') {\n this.enabled = false;\n this.setEnable();\n }\n else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[\"\" + htmlAttr])) {\n this.readonly = true;\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.container.setAttribute('style', this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (htmlAttr === 'aria-label') {\n if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {\n this.inputElement.setAttribute('aria-label', this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (this.getModuleName() === 'dropdownlist') {\n this.inputWrapper.container.setAttribute('aria-label', this.htmlAttributes[\"\" + htmlAttr]);\n }\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder',\n 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];\n var validateAttr = ['name', 'required'];\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n defaultAttr.push('tabindex');\n }\n if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n if (htmlAttr === 'placeholder') {\n Input.setPlaceholder(this.htmlAttributes[\"\" + htmlAttr], this.inputElement);\n }\n else {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n }\n else {\n this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n }\n }\n }\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n this.inputWrapper.container.removeAttribute('tabindex');\n }\n };\n DropDownList.prototype.getAriaAttributes = function () {\n return {\n 'aria-disabled': 'false',\n 'role': 'combobox',\n 'aria-expanded': 'false',\n 'aria-live': 'polite',\n 'aria-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n if (this.inputWrapper && this.inputWrapper.container) {\n this.inputWrapper.container.setAttribute('aria-disabled', 'false');\n this.inputWrapper.container.removeAttribute('disabled');\n }\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n if (this.inputWrapper && this.inputWrapper.container) {\n this.inputWrapper.container.setAttribute('aria-disabled', 'true');\n this.inputWrapper.container.setAttribute('disabled', '');\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n DropDownList.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n DropDownList.prototype.getLocaleName = function () {\n return 'drop-down-list';\n };\n DropDownList.prototype.preventTabIndex = function (element) {\n if (this.getModuleName() === 'dropdownlist') {\n element.tabIndex = -1;\n }\n };\n DropDownList.prototype.targetElement = function () {\n return !isNullOrUndefined(this.inputWrapper) ? this.inputWrapper.container : null;\n };\n DropDownList.prototype.getNgDirective = function () {\n return 'EJS-DROPDOWNLIST';\n };\n DropDownList.prototype.getElementByText = function (text) {\n return this.getElementByValue(this.getValueByText(text));\n };\n DropDownList.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n DropDownList.prototype.initValue = function () {\n this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;\n this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initialRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n /**\n * Checks if the given value is disabled.\n *\n * @param { string | number | boolean | object } value - The value to check for disablement. Can be a string, number, boolean, or object.\n * @returns { boolean } A boolean indicating whether the value is disabled.\n */\n DropDownList.prototype.isDisableItemValue = function (value) {\n if (typeof (value) === 'object') {\n var objectValue = JSON.parse(JSON.stringify(value))[this.fields.value];\n return this.isDisabledItemByIndex(this.getIndexByValue(objectValue));\n }\n return this.isDisabledItemByIndex(this.getIndexByValue(value));\n };\n DropDownList.prototype.updateValues = function () {\n if (this.fields.disabled) {\n if (this.value != null) {\n this.value = !this.isDisableItemValue(this.value) ? this.value : null;\n }\n if (this.text != null) {\n this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;\n }\n if (this.index != null) {\n this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;\n this.activeIndex = this.index;\n }\n }\n this.selectedValueInfo = this.viewPortInfo;\n if (!isNullOrUndefined(this.value)) {\n var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(((this.fields.value) ? this.fields.value : ''), this.value) : this.value;\n this.setSelection(this.getElementByValue(value), null);\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var element = this.getElementByText(this.text);\n if (isNullOrUndefined(element)) {\n this.setProperties({ text: null });\n return;\n }\n else {\n this.setSelection(element, null);\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DropDownList.prototype.onBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction(e);\n this.isTabKey = false;\n }\n if (this.isRequested && !this.isPopupOpen && !this.isPreventBlur) {\n this.isActive = false;\n this.beforePopupOpen = false;\n }\n this.isFocused = false;\n };\n DropDownList.prototype.focusOutAction = function (e) {\n this.isInteracted = false;\n this.focusOut(e);\n this.onFocusOut(e);\n };\n DropDownList.prototype.onFocusOut = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.floatLabelChange();\n this.dispatchEvent(this.hiddenElement, 'change');\n if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {\n this.dispatchEvent(this.inputElement, 'blur');\n }\n if (this.inputWrapper.clearButton) {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n this.trigger('blur');\n };\n DropDownList.prototype.onFocus = function (e) {\n if (!this.isInteracted) {\n this.isInteracted = true;\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n }\n this.updateIconState();\n this.isFocused = true;\n };\n DropDownList.prototype.resetValueHandler = function (e) {\n var formElement = closest(this.inputElement, 'form');\n if (formElement && e.target === formElement) {\n var val = (this.element.tagName === this.getNgDirective()) ? null : this.inputElement.getAttribute('value');\n this.text = val;\n }\n };\n DropDownList.prototype.wireEvent = function () {\n EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n this.bindCommonEvent();\n };\n DropDownList.prototype.bindCommonEvent = function () {\n EventHandler.add(this.targetElement(), 'blur', this.onBlurHandler, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n else {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.mobileKeyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n this.bindClearEvent();\n };\n DropDownList.prototype.windowResize = function () {\n if (this.isPopupOpen) {\n this.popupObj.refreshPosition(this.inputWrapper.container);\n }\n };\n DropDownList.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DropDownList.prototype.unBindCommonEvent = function () {\n if (!isNullOrUndefined(this.inputWrapper) && this.targetElement()) {\n EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);\n }\n var formElement = this.inputElement && closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n if (!Browser.isDevice) {\n this.keyboardModule.destroy();\n }\n if (this.showClearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown', this.resetHandler);\n }\n };\n DropDownList.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n /**\n * Event binding for list\n *\n * @returns {void}\n */\n DropDownList.prototype.wireListEvents = function () {\n if (!isNullOrUndefined(this.list)) {\n EventHandler.add(this.list, 'click', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n }\n };\n DropDownList.prototype.onSearch = function (e) {\n if (e.charCode !== 32 && e.charCode !== 13) {\n if (this.list === undefined) {\n this.renderList();\n }\n this.searchKeyEvent = e;\n this.onServerIncrementalSearch(e);\n }\n };\n DropDownList.prototype.onServerIncrementalSearch = function (e) {\n if (!this.isRequested && !isNullOrUndefined(this.list) &&\n !isNullOrUndefined(this.list.querySelector('li')) && this.enabled && !this.readonly) {\n this.incrementalSearch(e);\n }\n };\n DropDownList.prototype.onMouseClick = function (e) {\n var target = e.target;\n this.keyboardEvent = null;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li) || this.isDisabledElement(li)) {\n return;\n }\n this.setSelection(li, e);\n if (Browser.isDevice && this.isFilterLayout()) {\n history.back();\n }\n else {\n var delay = 100;\n this.closePopup(delay, e);\n }\n };\n DropDownList.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n DropDownList.prototype.setHover = function (li) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n DropDownList.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n DropDownList.prototype.removeHover = function () {\n if (this.list) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n }\n };\n DropDownList.prototype.isValidLI = function (li) {\n return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');\n };\n DropDownList.prototype.updateIncrementalItemIndex = function (startIndex, endIndex) {\n this.incrementalStartIndex = startIndex;\n this.incrementalEndIndex = endIndex;\n };\n DropDownList.prototype.incrementalSearch = function (e) {\n if (this.liCollections.length > 0) {\n if (this.enableVirtualization) {\n var updatingincrementalindex = false;\n var queryStringUpdated = false;\n var activeElement = this.ulElement.getElementsByClassName('e-active')[0];\n var currentValue = activeElement ? activeElement.textContent : null;\n if (this.incrementalQueryString === '') {\n this.incrementalQueryString = String.fromCharCode(e.charCode);\n this.incrementalPreQueryString = this.incrementalQueryString;\n }\n else if (String.fromCharCode(e.charCode).toLocaleLowerCase() === this.incrementalPreQueryString.toLocaleLowerCase()) {\n queryStringUpdated = true;\n }\n else {\n this.incrementalQueryString = String.fromCharCode(e.charCode);\n }\n if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) ||\n this.incrementalEndIndex === 0) {\n updatingincrementalindex = true;\n this.incrementalStartIndex = this.incrementalEndIndex;\n if (this.incrementalEndIndex === 0) {\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n }\n else {\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount :\n this.incrementalEndIndex + 100;\n }\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n }\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n var li = incrementalSearch(e.charCode, this.incrementalLiCollections, this.activeIndex, true, this.element.id, queryStringUpdated, currentValue, true);\n while (isNullOrUndefined(li) && this.incrementalEndIndex < this.totalItemCount) {\n this.updateIncrementalItemIndex(this.incrementalEndIndex, this.incrementalEndIndex + 100 > this.totalItemCount ?\n this.totalItemCount : this.incrementalEndIndex + 100);\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);\n if (!isNullOrUndefined(li)) {\n break;\n }\n if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {\n this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);\n break;\n }\n }\n if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {\n this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);\n }\n var index = li && this.getIndexByValue(li.getAttribute('data-value'));\n if (!index) {\n for (var i = 0; i < this.incrementalLiCollections.length; i++) {\n if (!isNullOrUndefined(li) && !isNullOrUndefined(li.getAttribute('data-value')) &&\n this.incrementalLiCollections[i].getAttribute('data-value') === li.getAttribute('data-value').toString()) {\n index = i;\n index = this.incrementalStartIndex + index;\n break;\n }\n }\n }\n else {\n index = index - this.skeletonCount;\n }\n if (index) {\n if ((!(this.viewPortInfo.startIndex >= index)) || (!(index >= this.viewPortInfo.endIndex))) {\n var startIndex = index - ((this.itemCount / 2) - 2) > 0 ? index - ((this.itemCount / 2) - 2) : 0;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ?\n this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n this.updateIncrementalView(startIndex, endIndex);\n }\n }\n if (!isNullOrUndefined(li)) {\n var index_1 = this.getIndexByValue(li.getAttribute('data-value')) - this.skeletonCount;\n if (index_1 > this.itemCount / 2) {\n var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ?\n this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ?\n this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n this.updateIncrementalView(startIndex, endIndex);\n }\n li = this.getElementByValue(li.getAttribute('data-value'));\n this.setSelection(li, e);\n this.setScrollPosition();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n if (this.enableVirtualization && !this.fields.groupBy) {\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?\n this.selectedLI.offsetTop +\n (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;\n this.list.scrollTop = selectedLiOffsetTop -\n (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);\n }\n this.incrementalPreQueryString = this.incrementalQueryString;\n }\n else {\n this.updateIncrementalView(0, this.itemCount);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n this.list.scrollTop = 0;\n }\n }\n else {\n var li = void 0;\n if (this.fields.disabled) {\n var enableLiCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li + ':not(.e-disabled)');\n li = incrementalSearch(e.charCode, enableLiCollections, this.activeIndex, true, this.element.id);\n }\n else {\n li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);\n }\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, e);\n this.setScrollPosition();\n }\n }\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n */\n DropDownList.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement.innerHTML = '';\n this.spinnerElement = null;\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n */\n DropDownList.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||\n !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n DropDownList.prototype.keyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.keyboardEvent = e;\n if (this.isPreventKeyAction && this.enableVirtualization) {\n e.preventDefault();\n }\n var preventAction = e.action === 'pageUp' || e.action === 'pageDown';\n var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');\n this.isEscapeKey = e.action === 'escape';\n this.isTabKey = !this.isPopupOpen && e.action === 'tab';\n var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'\n || e.action === 'home' || e.action === 'end');\n if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n var isTabAction = e.action === 'tab' || e.action === 'close';\n if (isNullOrUndefined(this.list) && !this.isRequested && !isTabAction && e.action !== 'escape') {\n this.searchKeyEvent = e;\n if (!this.enableVirtualization || (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38))) {\n this.renderList(e);\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n }\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n isNavigation && this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if ((isTabAction && this.getModuleName() !== 'autocomplete') && this.isPopupOpen\n || e.action === 'escape') {\n e.preventDefault();\n }\n this.isSelected = e.action === 'escape' ? false : this.isSelected;\n this.isTyped = (isNavigation || e.action === 'escape') ? false : this.isTyped;\n switch (e.action) {\n case 'down':\n case 'up':\n this.updateUpDownAction(e);\n break;\n case 'pageUp':\n this.pageUpSelection(this.activeIndex - this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'pageDown':\n this.pageDownSelection(this.activeIndex + this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'home':\n this.isMouseScrollAction = true;\n this.updateHomeEndAction(e);\n break;\n case 'end':\n this.isMouseScrollAction = true;\n this.updateHomeEndAction(e);\n break;\n case 'space':\n if (this.getModuleName() === 'dropdownlist') {\n if (!this.beforePopupOpen) {\n this.showPopup();\n e.preventDefault();\n }\n }\n break;\n case 'open':\n this.showPopup(e);\n break;\n case 'hide':\n this.preventAltUp = this.isPopupOpen;\n this.hidePopup(e);\n this.focusDropDown(e);\n break;\n case 'enter':\n this.selectCurrentItem(e);\n break;\n case 'tab':\n this.selectCurrentValueOnTab(e);\n break;\n case 'escape':\n case 'close':\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n break;\n }\n }\n };\n DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {\n if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {\n return;\n }\n if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {\n var value = this.getItemData().value;\n if (isNullOrUndefined(value)) {\n value = 'null';\n }\n var filterIndex = this.getIndexByValue(value);\n if (!isNullOrUndefined(filterIndex)) {\n this.activeIndex = filterIndex;\n }\n }\n var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {\n this.setSelection(focusEle, e);\n if (this.enableVirtualization) {\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop +\n (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;\n if (this.fields.groupBy) {\n selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex === 0 ?\n this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;\n }\n this.list.scrollTop = selectedLiOffsetTop -\n (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);\n }\n }\n else if (!isNullOrUndefined(this.liCollections)) {\n var virtualIndex = this.activeIndex;\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n index = isVirtualKeyAction ? virtualIndex : index;\n var startIndex = 0;\n if (this.getModuleName() === 'autocomplete') {\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n }\n var nextItem = void 0;\n if (this.getModuleName() !== 'autocomplete' || this.getModuleName() === 'autocomplete' && this.isPopupOpen) {\n if (!this.enableVirtualization) {\n nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]\n : this.liCollections[index];\n }\n else {\n if (!isVirtualKeyAction) {\n nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[this.skeletonCount]\n : this.liCollections[index];\n nextItem = !isNullOrUndefined(nextItem) && !nextItem.classList.contains('e-virtual-list') ? nextItem : null;\n }\n else {\n if (this.getModuleName() === 'autocomplete') {\n var value = this.getFormattedValue(this.selectedLI.getAttribute('data-value'));\n nextItem = this.getElementByValue(value);\n }\n else {\n nextItem = this.getElementByValue(this.getItemData().value);\n }\n }\n }\n }\n if (!isNullOrUndefined(nextItem)) {\n var focusAtFirstElement = this.liCollections[this.skeletonCount] &&\n this.liCollections[this.skeletonCount].classList.contains('e-item-focus');\n this.setSelection(nextItem, e);\n if (focusAtFirstElement && this.enableVirtualization && this.getModuleName() === 'autocomplete' && !isVirtualKeyAction) {\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?\n this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) :\n this.selectedLI.offsetTop;\n selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex === 0 && this.fields.groupBy ?\n this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;\n this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);\n }\n }\n else if (this.enableVirtualization && !this.isPopupOpen && this.getModuleName() !== 'autocomplete' && ((this.viewPortInfo.endIndex !== this.totalItemCount && e.action === 'down') || (this.viewPortInfo.startIndex !== 0 && e.action === 'up'))) {\n if (e.action === 'down') {\n this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex + this.itemCount) <\n (this.totalItemCount - this.itemCount) ? this.viewPortInfo.startIndex + this.itemCount :\n this.totalItemCount - this.itemCount;\n this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;\n this.updateVirtualItemIndex();\n this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;\n this.resetList(this.dataSource, this.fields, this.query);\n this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;\n var value = this.liCollections[0].getAttribute('data-value') !== 'null' ?\n this.getFormattedValue(this.liCollections[0].getAttribute('data-value')) : null;\n var selectedData = this.getDataByValue(value);\n if (selectedData) {\n this.itemData = selectedData;\n }\n }\n else if (e.action === 'up') {\n this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex - this.itemCount) > 0 ?\n this.viewPortInfo.startIndex - this.itemCount : 0;\n this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;\n this.updateVirtualItemIndex();\n this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;\n this.resetList(this.dataSource, this.fields, this.query);\n this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;\n var value = this.liCollections[this.liCollections.length - 1].getAttribute('data-value') !== 'null' ? this.getFormattedValue(this.liCollections[this.liCollections.length - 1].getAttribute('data-value')) : null;\n var selectedData = this.getDataByValue(value);\n if (selectedData) {\n this.itemData = selectedData;\n }\n }\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.handleVirtualKeyboardActions(e, this.pageCount);\n }\n }\n if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {\n var value = this.getItemData().value;\n var filterIndex = this.getIndexByValueFilter(value, this.actionCompleteData.ulElement);\n if (!isNullOrUndefined(filterIndex)) {\n this.activeIndex = filterIndex;\n }\n }\n if (this.allowFiltering && this.getModuleName() === 'dropdownlist' && this.filterInput) {\n if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {\n attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });\n }\n else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {\n attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });\n }\n }\n var itemIndex;\n for (var index = 0; index < this.liCollections.length; index++) {\n if (this.liCollections[index].classList.contains(dropDownListClasses.focus)\n || this.liCollections[index].classList.contains(dropDownListClasses.selected)) {\n itemIndex = index;\n break;\n }\n }\n if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {\n if (this.getModuleName() !== 'autocomplete') {\n if (this.liCollections.length - 1 === itemIndex && e.action === 'down') {\n e.action = 'up';\n }\n if (itemIndex === 0 && e.action === 'up') {\n e.action = 'down';\n }\n }\n this.updateUpDownAction(e);\n }\n e.preventDefault();\n };\n DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {\n if (this.getModuleName() === 'dropdownlist') {\n var findLi = 0;\n if (e.action === 'home') {\n findLi = 0;\n if (this.enableVirtualization && this.isPopupOpen) {\n findLi = this.skeletonCount;\n }\n else if (this.enableVirtualization && !this.isPopupOpen && this.viewPortInfo.startIndex !== 0) {\n this.viewPortInfo.startIndex = 0;\n this.viewPortInfo.endIndex = this.itemCount;\n this.updateVirtualItemIndex();\n this.resetList(this.dataSource, this.fields, this.query);\n }\n }\n else {\n if (this.enableVirtualization && !this.isPopupOpen && this.viewPortInfo.endIndex !== this.totalItemCount) {\n this.viewPortInfo.startIndex = this.totalItemCount - this.itemCount;\n this.viewPortInfo.endIndex = this.totalItemCount;\n this.updateVirtualItemIndex();\n this.resetList(this.dataSource, this.fields, this.query);\n }\n findLi = this.getItems().length - 1;\n }\n e.preventDefault();\n if (this.activeIndex === findLi) {\n if (isVirtualKeyAction) {\n this.setSelection(this.liCollections[findLi], e);\n }\n return;\n }\n this.setSelection(this.liCollections[findLi], e);\n }\n };\n DropDownList.prototype.selectCurrentValueOnTab = function (e) {\n if (this.getModuleName() === 'autocomplete') {\n this.selectCurrentItem(e);\n }\n else {\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n }\n };\n DropDownList.prototype.mobileKeyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if ((this.isEditTextBox()) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n if (this.list === undefined && !this.isRequested) {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if (e.action === 'enter') {\n this.selectCurrentItem(e);\n }\n }\n };\n DropDownList.prototype.handleVirtualKeyboardActions = function (e, pageCount) {\n switch (e.action) {\n case 'down':\n case 'up':\n if (this.itemData != null || this.getModuleName() === 'autocomplete') {\n this.updateUpDownAction(e, true);\n }\n break;\n case 'pageUp':\n this.activeIndex = this.getModuleName() === 'autocomplete' ?\n this.getIndexByValue(this.selectedLI.getAttribute('data-value')) + this.getPageCount() - 1 :\n this.getIndexByValue(this.previousValue);\n this.pageUpSelection(this.activeIndex - this.getPageCount(), e, true);\n e.preventDefault();\n break;\n case 'pageDown':\n this.activeIndex = this.getModuleName() === 'autocomplete' ?\n this.getIndexByValue(this.selectedLI.getAttribute('data-value')) - this.getPageCount() :\n this.getIndexByValue(this.previousValue);\n this.pageDownSelection(!isNullOrUndefined(this.activeIndex) ?\n (this.activeIndex + this.getPageCount()) : (2 * this.getPageCount()), e, true);\n e.preventDefault();\n break;\n case 'home':\n this.isMouseScrollAction = true;\n this.updateHomeEndAction(e, true);\n break;\n case 'end':\n this.isMouseScrollAction = true;\n this.updateHomeEndAction(e, true);\n break;\n }\n this.keyboardEvent = null;\n };\n DropDownList.prototype.selectCurrentItem = function (e) {\n if (this.isPopupOpen) {\n var li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isDisabledElement(li)) {\n return;\n }\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n else {\n this.showPopup();\n }\n };\n DropDownList.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {\n var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n if ((this.enableVirtualization && this.activeIndex == null)) {\n previousItem = (this.liCollections.length >= steps && steps >= 0) ?\n this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];\n }\n if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {\n previousItem = this.liCollections[this.skeletonCount];\n }\n this.PageUpDownSelection(previousItem, event);\n if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {\n if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {\n attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });\n }\n else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {\n attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });\n }\n }\n };\n DropDownList.prototype.PageUpDownSelection = function (previousItem, event) {\n if (this.enableVirtualization) {\n if (!isNullOrUndefined(previousItem) && ((this.getModuleName() !== 'autocomplete' &&\n !previousItem.classList.contains('e-active')) || (this.getModuleName() === 'autocomplete' &&\n !previousItem.classList.contains('e-item-focus')))) {\n this.setSelection(previousItem, event);\n }\n }\n else {\n this.setSelection(previousItem, event);\n }\n };\n DropDownList.prototype.pageDownSelection = function (steps, event, isVirtualKeyAction) {\n var list = this.getItems();\n var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n if (this.enableVirtualization && this.skeletonCount > 0) {\n steps = this.getModuleName() === 'dropdownlist' && this.allowFiltering ? steps + 1 : steps;\n previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];\n }\n if ((this.enableVirtualization && this.activeIndex == null)) {\n previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];\n }\n this.PageUpDownSelection(previousItem, event);\n if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {\n if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {\n attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });\n }\n else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {\n attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });\n }\n }\n };\n DropDownList.prototype.unWireEvent = function () {\n if (!isNullOrUndefined(this.inputWrapper)) {\n EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);\n EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);\n EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);\n EventHandler.remove(window, 'resize', this.windowResize);\n }\n this.unBindCommonEvent();\n };\n /**\n * Event un binding for list items.\n *\n * @returns {void}\n */\n DropDownList.prototype.unWireListEvents = function () {\n if (this.list) {\n EventHandler.remove(this.list, 'click', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n }\n };\n DropDownList.prototype.checkSelector = function (id) {\n return '[id=\"' + id.replace(/(:|\\.|\\[|\\]|,|=|@|\\\\|\\/|#)/g, '\\\\$1') + '\"]';\n };\n DropDownList.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&\n !isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.container.contains(e.target)) {\n if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {\n this.isDocumentClick = true;\n var isActive = this.isRequested;\n if (this.getModuleName() === 'combobox' && this.isTyped) {\n this.isInteracted = false;\n }\n this.hidePopup(e);\n this.isInteracted = false;\n if (!isActive) {\n this.onFocusOut(e);\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n }\n }\n else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)\n && !(this.getModuleName() === 'combobox' &&\n !this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||\n document.activeElement === this.filterInput);\n e.preventDefault();\n }\n };\n DropDownList.prototype.activeStateChange = function () {\n if (this.isDocumentClick) {\n this.hidePopup();\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n };\n DropDownList.prototype.focusDropDown = function (e) {\n if (!this.initial && this.isFilterLayout()) {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.dropDownClick = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n this.keyboardEvent = null;\n if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {\n return;\n }\n var target = e.target;\n if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isPopupOpen) {\n this.hidePopup(e);\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn(e);\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup(e);\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n // eslint-disable-next-line max-len\n var duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;\n if (!this.isSecondClick) {\n setTimeout(function () {\n proxy_1.cloneElements();\n proxy_1.isSecondClick = true;\n }, duration);\n }\n }\n else {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.cloneElements = function () {\n if (this.list) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.actionCompleteData.ulElement = ulElement;\n }\n }\n };\n DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {\n var _this = this;\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n var value = li.getAttribute('data-value') !== null ?\n this.getFormattedValue(li.getAttribute('data-value')) : null;\n var selectedData = this.getDataByValue(value);\n if (!this.initial && !preventSelect && !isNullOrUndefined(e)) {\n var items = this.detachChanges(selectedData);\n this.isSelected = true;\n var eventArgs = {\n e: e,\n item: li,\n itemData: items,\n isInteracted: e ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n li.classList.remove(dropDownBaseClasses.selected);\n }\n else {\n _this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (isSelection) {\n _this.setSelectOptions(li, e);\n }\n }\n });\n }\n else {\n this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (isSelection) {\n this.setSelectOptions(li, e);\n }\n }\n };\n DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n if (this.itemData !== selectedData) {\n this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == 'object' &&\n !this.allowObjectBinding ? this.checkFieldValue(this.itemData, this.fields.value.split('.')) : this.itemData : null;\n }\n this.item = li;\n this.itemData = selectedData;\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (focusedItem) {\n removeClass([focusedItem], dropDownBaseClasses.focus);\n }\n li.setAttribute('aria-selected', 'true');\n if (isNullOrUndefined(value)) {\n value = 'null';\n }\n if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {\n var filterIndex = this.getIndexByValueFilter(value, this.actionCompleteData.ulElement);\n if (!isNullOrUndefined(filterIndex)) {\n this.activeIndex = filterIndex;\n }\n else {\n this.activeIndex = this.getIndexByValue(value);\n }\n }\n else {\n if (this.enableVirtualization && this.activeIndex == null && this.dataSource instanceof DataManager) {\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n }\n this.activeIndex = this.getIndexByValue(value);\n }\n };\n DropDownList.prototype.activeItem = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n li.setAttribute('aria-selected', 'true');\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownList.prototype.setValue = function (e) {\n var dataItem = this.getItemData();\n this.isTouched = !isNullOrUndefined(e);\n if (dataItem.value === null) {\n Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n else if (!isNullOrUndefined(this.valueTempElement) && this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {\n this.activeIndex = this.getIndexByValueFilter(dataItem.value, this.actionCompleteData.ulElement);\n }\n var clearIcon = dropDownListClasses.clearIcon;\n var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');\n var clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);\n if (this.isFiltering() && clearElement) {\n clearElement.style.removeProperty('visibility');\n }\n if ((!this.allowObjectBinding && (this.previousValue === dataItem.value)) || (this.allowObjectBinding &&\n (this.previousValue != null && this.isObjectInArray(this.previousValue, [this.allowCustom &&\n this.isObjectCustomValue ? this.value ? this.value : dataItem : dataItem.value ?\n this.getDataByValue(dataItem.value) : dataItem])))) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected\n && li.classList.contains(dropDownBaseClasses.selected)))) {\n this.updateSelectedItem(li, e, false, true);\n }\n else {\n this.setSelectOptions(li, e);\n if (this.enableVirtualization && this.value) {\n var fields = !this.isPrimitiveData ? this.fields.value : '';\n var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ?\n getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n if (this.dataSource instanceof DataManager) {\n var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n var dataItem = this.getItemData();\n var value = this.allowObjectBinding ?\n this.getDataByValue(dataItem.value) : dataItem.value;\n if ((this.value === dataItem.value && this.text !== dataItem.text) ||\n (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });\n }\n }\n }\n else {\n var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n var dataItem = this.getItemData();\n var value = this.allowObjectBinding ?\n this.getDataByValue(dataItem.value) : dataItem.value;\n if ((this.value === dataItem.value && this.text !== dataItem.text) ||\n (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });\n }\n }\n }\n }\n }\n };\n DropDownList.prototype.setSelectOptions = function (li, e) {\n if (this.list) {\n this.removeHover();\n }\n this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;\n this.selectedLI = li;\n if (this.setValue(e)) {\n return;\n }\n if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&\n (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {\n this.setScrollPosition(e);\n }\n if (Browser.info.name !== 'mozilla') {\n if (this.targetElement()) {\n attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id !== '' ? this.inputElement.id : this.element.id });\n this.targetElement().removeAttribute('aria-live');\n }\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });\n }\n else if (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });\n }\n };\n DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {\n var checkTemplate = false;\n if (typeof dropdownTemplate !== 'function' && dropdownTemplate) {\n try {\n checkTemplate = (document.querySelectorAll(dropdownTemplate).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownList.prototype.setValueTemplate = function () {\n var compiledString;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['valueTemplate']);\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n }\n if (!this.valueTempElement) {\n this.valueTempElement = this.createElement('span', { className: dropDownListClasses.value });\n this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);\n this.inputElement.style.display = 'none';\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact) {\n this.valueTempElement.innerHTML = '';\n }\n var valuecheck = this.dropdownCompiler(this.valueTemplate);\n if (typeof this.valueTemplate !== 'function' && valuecheck) {\n compiledString = compile(document.querySelector(this.valueTemplate).innerHTML.trim());\n }\n else {\n compiledString = compile(this.valueTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var valueCompTemp = compiledString(this.itemData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, this.valueTempElement);\n if (valueCompTemp && valueCompTemp.length > 0) {\n append(valueCompTemp, this.valueTempElement);\n }\n this.renderReactTemplates();\n };\n DropDownList.prototype.removeSelection = function () {\n if (this.list) {\n var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);\n if (selectedItems.length) {\n removeClass(selectedItems, dropDownBaseClasses.selected);\n selectedItems[0].removeAttribute('aria-selected');\n }\n }\n };\n DropDownList.prototype.getItemData = function () {\n var fields = this.fields;\n var dataItem = null;\n dataItem = this.itemData;\n var dataValue;\n var dataText;\n if (!isNullOrUndefined(dataItem)) {\n dataValue = getValue(fields.value, dataItem);\n dataText = getValue(fields.text, dataItem);\n }\n var value = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataValue : dataItem);\n var text = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataText : dataItem);\n return { value: value, text: text };\n };\n /**\n * To trigger the change event for list.\n *\n * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.\n * @param {boolean} isCustomValue - Specifies whether the value is custom value or not.\n * @returns {void}\n */\n DropDownList.prototype.onChangeEvent = function (eve, isCustomValue) {\n var _this = this;\n var dataItem = this.getItemData();\n var index = this.isSelectCustom ? null : this.activeIndex;\n if (this.enableVirtualization) {\n var datas = this.dataSource instanceof DataManager ? this.virtualGroupDataSource : this.dataSource;\n if (dataItem.value && datas && datas.length > 0) {\n var foundIndex = datas.findIndex(function (data) {\n return !isNullOrUndefined(dataItem.value) && getValue(_this.fields.value, data) === dataItem.value;\n });\n if (foundIndex !== -1) {\n index = foundIndex;\n }\n }\n }\n var value = this.allowObjectBinding ? isCustomValue ?\n this.value : this.getDataByValue(dataItem.value) : dataItem.value;\n this.setProperties({ 'index': index, 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value }, true);\n this.detachChangeEvent(eve);\n };\n DropDownList.prototype.detachChanges = function (value) {\n var items;\n if (typeof value === 'string' ||\n typeof value === 'boolean' ||\n typeof value === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: value,\n enumerable: true\n },\n text: {\n value: value,\n enumerable: true\n }\n });\n }\n else {\n items = value;\n }\n return items;\n };\n DropDownList.prototype.detachChangeEvent = function (eve) {\n this.isSelected = false;\n this.previousValue = this.value;\n this.activeIndex = this.enableVirtualization ? this.getIndexByValue(this.value) : this.index;\n this.typedString = !isNullOrUndefined(this.text) ? this.text : '';\n if (!this.initial) {\n var items = this.detachChanges(this.itemData);\n var preItems = void 0;\n if (typeof this.previousItemData === 'string' ||\n typeof this.previousItemData === 'boolean' ||\n typeof this.previousItemData === 'number') {\n preItems = Object.defineProperties({}, {\n value: {\n value: this.previousItemData,\n enumerable: true\n },\n text: {\n value: this.previousItemData,\n enumerable: true\n }\n });\n }\n else {\n preItems = this.previousItemData;\n }\n this.setHiddenValue();\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: items,\n previousItem: this.previousSelectedLI,\n previousItemData: preItems,\n isInteracted: eve ? true : false,\n value: this.value,\n element: this.element,\n event: eve\n };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n }\n if ((isNullOrUndefined(this.value) || this.value === '') && this.floatLabelType !== 'Always') {\n removeClass([this.inputWrapper.container], 'e-valid-input');\n }\n };\n DropDownList.prototype.setHiddenValue = function () {\n if (!isNullOrUndefined(this.value)) {\n var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n if (this.hiddenElement.querySelector('option')) {\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.textContent = this.text;\n selectedElement.setAttribute('value', value.toString());\n }\n else {\n if (!isNullOrUndefined(this.hiddenElement)) {\n var option = document.createElement('option');\n option.text = this.text;\n option.setAttribute('selected', '');\n this.hiddenElement.appendChild(option);\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', value.toString());\n }\n }\n }\n else {\n this.hiddenElement.innerHTML = '';\n }\n };\n /**\n * Filter bar implementation\n *\n * @param {KeyboardEventArgs} e - Specifies the event arguments.\n * @returns {void}\n */\n DropDownList.prototype.onFilterUp = function (e) {\n if (!(e.ctrlKey && e.keyCode === 86) && (this.isValidKey || e.keyCode === 40 || e.keyCode === 38)) {\n this.isValidKey = false;\n this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;\n switch (e.keyCode) {\n case 38: //up arrow\n case 40: //down arrow\n if (this.getModuleName() === 'autocomplete' && !this.isPopupOpen && !this.preventAltUp && !this.isRequested) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else {\n this.preventAutoFill = false;\n }\n this.preventAltUp = false;\n if (this.getModuleName() === 'autocomplete' && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });\n }\n e.preventDefault();\n break;\n case 46: //delete\n case 8: //backspace\n this.typedString = this.filterInput.value;\n if (!this.isPopupOpen && this.typedString !== '' || this.isPopupOpen && this.queryString.length > 0) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '' && this.queryString === '' && this.getModuleName() !== 'autocomplete') {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '') {\n if (this.list) {\n this.resetFocusElement();\n }\n this.activeIndex = null;\n if (this.getModuleName() !== 'dropdownlist') {\n this.preventAutoFill = true;\n this.searchLists(e);\n if (this.getModuleName() === 'autocomplete') {\n this.hidePopup();\n }\n }\n }\n e.preventDefault();\n break;\n default:\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n this.getInitialData = true;\n this.renderList();\n }\n this.typedString = this.filterInput.value;\n this.preventAutoFill = false;\n this.searchLists(e);\n if ((this.enableVirtualization && this.getModuleName() !== 'autocomplete') || (this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount !== 0)) {\n this.getFilteringSkeletonCount();\n }\n break;\n }\n }\n else {\n this.isValidKey = false;\n }\n };\n DropDownList.prototype.onFilterDown = function (e) {\n switch (e.keyCode) {\n case 13: //enter\n break;\n case 40: //down arrow\n case 38: //up arrow\n this.queryString = this.filterInput.value;\n e.preventDefault();\n break;\n case 9: //tab\n if (this.isPopupOpen && this.getModuleName() !== 'autocomplete') {\n e.preventDefault();\n }\n break;\n default:\n this.prevSelectPoints = this.getSelectionPoints();\n this.queryString = this.filterInput.value;\n break;\n }\n };\n DropDownList.prototype.removeFillSelection = function () {\n if (this.isInteracted) {\n var selection = this.getSelectionPoints();\n this.inputElement.setSelectionRange(selection.end, selection.end);\n }\n };\n DropDownList.prototype.getQuery = function (query) {\n var filterQuery;\n if (!this.isCustomFilter && this.allowFiltering && this.filterInput) {\n filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = this.typedString === '' ? 'contains' : this.filterType;\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n else if (((this.getModuleName() !== 'combobox')) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {\n var fields = (this.fields.text) ? this.fields.text : '';\n filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n }\n else {\n filterQuery = (this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery)) ?\n this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();\n }\n if (this.enableVirtualization && this.viewPortInfo.endIndex !== 0) {\n var takeValue = this.getTakeValue();\n var alreadySkipAdded = false;\n if (filterQuery) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onSkip') {\n alreadySkipAdded = true;\n break;\n }\n }\n }\n var queryTakeValue = 0;\n var querySkipValue = 0;\n if (filterQuery && filterQuery.queries.length > 0) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onSkip') {\n querySkipValue = filterQuery.queries[queryElements].e.nos;\n }\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos ?\n filterQuery.queries[queryElements].e.nos : takeValue;\n }\n }\n }\n if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {\n for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {\n if (this.query.queries[queryElements].fn === 'onTake') {\n queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ?\n this.query.queries[queryElements].e.nos : takeValue;\n }\n }\n }\n var skipExists = false;\n if (filterQuery && filterQuery.queries.length > 0) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onSkip') {\n querySkipValue = filterQuery.queries[queryElements].e.nos;\n filterQuery.queries.splice(queryElements, 1);\n alreadySkipAdded = false;\n --queryElements;\n continue;\n }\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ?\n queryTakeValue : filterQuery.queries[queryElements].e.nos;\n filterQuery.queries.splice(queryElements, 1);\n --queryElements;\n }\n }\n }\n if (!skipExists && (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded)) {\n if (querySkipValue > 0) {\n filterQuery.skip(querySkipValue);\n }\n else {\n filterQuery.skip(this.virtualItemStartIndex);\n }\n }\n if (this.isIncrementalRequest) {\n filterQuery.take(this.incrementalEndIndex);\n }\n else {\n if (queryTakeValue > 0) {\n filterQuery.take(queryTakeValue);\n }\n else {\n filterQuery.take(takeValue);\n }\n }\n filterQuery.requiresCount();\n }\n return filterQuery;\n };\n DropDownList.prototype.getSelectionPoints = function () {\n var input = this.inputElement;\n return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };\n };\n DropDownList.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.activeIndex = null;\n this.isListSearched = true;\n if (this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon)) {\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';\n }\n this.isDataFetched = false;\n if (this.isFiltering()) {\n this.checkAndResetCache();\n this.isRequesting = false;\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isCustomFilter = true;\n _this.customFilterQuery = query ? query.clone() : query;\n _this.filteringAction(dataSource, query, fields);\n },\n baseEventArgs: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel && !_this.isCustomFilter && !eventArgs.preventDefaultAction) {\n _this.filteringAction(_this.dataSource, null, _this.fields);\n }\n });\n }\n };\n /**\n * To filter the data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n * @deprecated\n */\n DropDownList.prototype.filter = function (dataSource, query, fields) {\n this.isCustomFilter = true;\n this.filteringAction(dataSource, query, fields);\n };\n DropDownList.prototype.filteringAction = function (dataSource, query, fields) {\n if (!isNullOrUndefined(this.filterInput)) {\n this.beforePopupOpen = ((!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ||\n this.getInitialData) ? false : true;\n var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);\n if (this.filterInput.value.trim() === '' && !this.itemTemplate) {\n this.actionCompleteData.isUpdated = false;\n this.isTyped = false;\n if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n if (this.enableVirtualization) {\n if (this.isFiltering()) {\n this.isPreventScrollAction = true;\n this.list.scrollTop = 0;\n this.previousStartIndex = 0;\n this.virtualListInfo = null;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n this.resetList(dataSource, fields, query);\n if (isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {\n if (!this.list.querySelector('.e-virtual-ddl-content')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n })).appendChild(this.list.querySelector('.e-list-parent'));\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n }\n }\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);\n }\n this.isTyped = true;\n if (!isNullOrUndefined(this.itemData) && this.getModuleName() === 'dropdownlist') {\n this.focusIndexItem();\n this.setScrollPosition();\n }\n this.isNotSearchList = true;\n }\n else {\n this.isNotSearchList = false;\n query = (this.filterInput.value.trim() === '') ? null : query;\n if (this.enableVirtualization && this.isFiltering() && this.isTyped) {\n this.isPreventScrollAction = true;\n this.list.scrollTop = 0;\n this.previousStartIndex = 0;\n this.virtualListInfo = null;\n }\n this.resetList(dataSource, fields, query);\n if (this.getModuleName() === 'dropdownlist' && this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.popupContentElement.setAttribute('role', 'status');\n this.popupContentElement.setAttribute('id', 'no-record');\n attributes(this.filterInputObj.container, { 'aria-activedescendant': 'no-record' });\n }\n if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {\n if (!this.list.querySelector('.e-virtual-ddl-content')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n })).appendChild(this.list.querySelector('.e-list-parent'));\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n }\n }\n if (this.enableVirtualization) {\n this.getFilteringSkeletonCount();\n }\n this.renderReactTemplates();\n }\n };\n DropDownList.prototype.setSearchBox = function (popupElement) {\n if (this.isFiltering()) {\n var parentElement = popupElement.querySelector('.' + dropDownListClasses.filterParent) ?\n popupElement.querySelector('.' + dropDownListClasses.filterParent) : this.createElement('span', {\n className: dropDownListClasses.filterParent\n });\n this.filterInput = this.createElement('input', {\n attrs: { type: 'text' },\n className: dropDownListClasses.filterInput\n });\n this.element.parentNode.insertBefore(this.filterInput, this.element);\n var backIcon = false;\n if (Browser.isDevice && this.isDeviceFullScreen) {\n backIcon = true;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ?\n [dropDownListClasses.backIcon, dropDownListClasses.filterBarClearIcon] : [dropDownListClasses.filterBarClearIcon],\n properties: { placeholder: this.filterBarPlaceholder }\n }, this.createElement);\n if (!isNullOrUndefined(this.cssClass)) {\n if (this.cssClass.split(' ').indexOf('e-outline') !== -1) {\n addClass([this.filterInputObj.container], 'e-outline');\n }\n else if (this.cssClass.split(' ').indexOf('e-filled') !== -1) {\n addClass([this.filterInputObj.container], 'e-filled');\n }\n }\n append([this.filterInputObj.container], parentElement);\n prepend([parentElement], popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'role': 'combobox',\n 'autocomplete': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n if (!Browser.isDevice) {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n else {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.mobileKeyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.onBlurHandler, this);\n EventHandler.add(this.filterInput, 'paste', this.pasteHandler, this);\n return this.filterInputObj;\n }\n else {\n return inputObject;\n }\n };\n DropDownList.prototype.onInput = function (e) {\n if (!isNullOrUndefined(e) && !isNullOrUndefined(e.data) && e.data.length > 1 && this.autoFill && (this.getModuleName() === 'combobox' || this.getModuleName() === 'autocomplete')) {\n this.inputElement.value = e.data;\n }\n this.isValidKey = true;\n if (this.getModuleName() === 'combobox') {\n this.updateIconState();\n }\n // For filtering works in mobile firefox.\n if (Browser.isDevice && Browser.info.name === 'mozilla') {\n this.typedString = this.filterInput.value;\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n };\n DropDownList.prototype.pasteHandler = function (e) {\n var _this = this;\n setTimeout(function () {\n _this.typedString = _this.filterInput.value;\n _this.searchLists(e);\n });\n };\n DropDownList.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n };\n DropDownList.prototype.getTakeValue = function () {\n return this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = e.count;\n }\n if (this.isNotSearchList && !this.enableVirtualization) {\n this.isNotSearchList = false;\n return;\n }\n if (this.getInitialData) {\n this.updateActionCompleteDataValues(ulElement, list);\n }\n if (!this.preventPopupOpen && this.getModuleName() === 'combobox') {\n this.beforePopupOpen = true;\n this.preventPopupOpen = true;\n }\n var tempItemCount = this.itemCount;\n if (this.isActive || !isNullOrUndefined(ulElement)) {\n var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&\n ((!(this.dataSource instanceof DataManager)) ||\n ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;\n this.updateSelectElementData(this.allowFiltering);\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {\n this.isRequested = false;\n this.keyActionHandler(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent)) {\n this.incrementalSearch(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n if (!isNullOrUndefined(ulElement)) {\n attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });\n }\n if (this.initialRemoteRender) {\n this.initial = true;\n this.activeIndex = this.index;\n this.initialRemoteRender = false;\n if (this.value && this.dataSource instanceof DataManager) {\n var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n var value_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ?\n getValue(checkField_1, this.value) : this.value;\n var fieldValue_1 = this.fields.value.split('.');\n var checkVal = list.some(function (x) {\n return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?\n _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;\n });\n if (this.enableVirtualization && this.virtualGroupDataSource) {\n checkVal = this.virtualGroupDataSource.some(function (x) {\n return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?\n _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;\n });\n }\n if (!checkVal) {\n this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', value_1)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, list.length);\n _this.updateValues();\n }\n else {\n _this.updateValues();\n }\n });\n }\n else {\n this.updateValues();\n }\n }\n else {\n this.updateValues();\n }\n this.initial = false;\n }\n else if (this.getModuleName() === 'autocomplete' && this.value) {\n this.setInputValue();\n }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter\n && !this.isFilterFocus) || (isNullOrUndefined(this.itemData) && this.allowFiltering)\n && ((this.dataSource instanceof DataManager)\n || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&\n this.dataSource.length !== 0)))) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.updateActionCompleteDataValues(ulElement, list);\n }, 0);\n }\n else {\n this.updateActionCompleteDataValues(ulElement, list);\n }\n }\n if (this.isDynamicData) {\n var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ?\n getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n this.itemData = this.getDataByValue(currentValue);\n this.selectedLI = this.getElementByValue(currentValue);\n this.isDynamicData = false;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((this.allowCustom || (this.allowFiltering && !this.isValueInList(list, this.value) &&\n this.dataSource instanceof DataManager)) && !this.enableVirtualization) {\n this.addNewItem(list, selectedItem);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n else if ((this.allowCustom || (this.allowFiltering && this.isValueInList(list, this.value))) &&\n !this.enableVirtualization) {\n var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n var isValidAddition = !isNullOrUndefined(this.value) && selectedItem && selectedItem.getAttribute('data-value') === value.toString();\n if (isValidAddition) {\n this.addNewItem(list, selectedItem);\n }\n }\n if (!isNullOrUndefined(this.itemData) || (isNullOrUndefined(this.itemData) && this.enableVirtualization)) {\n this.getSkeletonCount();\n this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&\n ((!(this.dataSource instanceof DataManager)) ||\n ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;\n this.UpdateSkeleton();\n this.focusIndexItem();\n }\n if (this.enableVirtualization) {\n this.updateActionCompleteDataValues(ulElement, list);\n }\n }\n else if (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && !this.isFiltering()) {\n var value = this.getItemData().value;\n this.activeIndex = this.getIndexByValue(value);\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.selectedLI = element;\n }\n else if (this.enableVirtualization && this.getModuleName() === 'autocomplete') {\n this.activeIndex = this.skeletonCount;\n }\n if (this.beforePopupOpen) {\n this.renderPopup(e);\n if (this.enableVirtualization) {\n if (!this.list.querySelector('.e-virtual-list')) {\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.e-list-item');\n }\n }\n if (this.enableVirtualization && tempItemCount !== this.itemCount) {\n this.resetList(this.dataSource, this.fields);\n }\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n DropDownList.prototype.isValueInList = function (list, valueToFind) {\n if (Array.isArray(list)) {\n for (var i = 0; i < list.length; i++) {\n if (list[i] === valueToFind) {\n return true;\n }\n }\n }\n else if (typeof list === 'object' && list !== null) {\n for (var key in list) {\n if (Object.prototype.hasOwnProperty.call(list, key) && list[key] === valueToFind) {\n return true;\n }\n }\n }\n return false;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n DropDownList.prototype.checkFieldValue = function (list, fieldValue) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var checkField = list;\n fieldValue.forEach(function (value) {\n checkField = checkField[value];\n });\n return checkField;\n };\n DropDownList.prototype.updateActionCompleteDataValues = function (ulElement, list) {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n if (this.actionData.list !== this.actionCompleteData.list && this.actionCompleteData.ulElement && this.actionCompleteData.list) {\n this.actionData = this.actionCompleteData;\n }\n };\n DropDownList.prototype.addNewItem = function (listData, newElement) {\n var _this = this;\n if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {\n var value_2 = this.getItemData().value;\n var isExist = listData.some(function (data) {\n return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_2) ||\n (getValue(_this.fields.value, data) === value_2));\n });\n if (!isExist) {\n this.addItem(this.itemData);\n }\n }\n };\n DropDownList.prototype.updateActionCompleteData = function (li, item, index) {\n var _this = this;\n if (this.getModuleName() !== 'autocomplete' && this.actionCompleteData.ulElement) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.actionCompleteDataUpdate(li, item, index);\n }, 0);\n }\n else {\n this.actionCompleteDataUpdate(li, item, index);\n }\n }\n };\n DropDownList.prototype.actionCompleteDataUpdate = function (li, item, index) {\n if (index !== null) {\n this.actionCompleteData.ulElement.\n insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);\n }\n else {\n this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));\n }\n if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list.indexOf(item) < 0) {\n this.actionCompleteData.list.push(item);\n }\n };\n DropDownList.prototype.focusIndexItem = function () {\n var value = this.getItemData().value;\n this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ?\n this.getIndexByValue(value) : this.activeIndex;\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.selectedLI = element;\n this.activeItem(element);\n if (!(this.enableVirtualization && isNullOrUndefined(element))) {\n this.removeFocus();\n }\n };\n DropDownList.prototype.updateSelection = function () {\n var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (selectedItem) {\n this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });\n this.activeIndex = this.index;\n }\n else {\n this.removeFocus();\n this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.updateSelectionList = function () {\n var selectedItem = this.list && this.list.querySelector('.' + 'e-active');\n if (!selectedItem && !isNullOrUndefined(this.value)) {\n var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n var findEle = this.findListElement(this.list, 'li', 'data-value', value);\n if (findEle) {\n findEle.classList.add('e-active');\n }\n }\n };\n DropDownList.prototype.removeFocus = function () {\n var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);\n if (highlightedItem && highlightedItem.length) {\n removeClass(highlightedItem, dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.renderPopup = function (e) {\n var _this = this;\n if (this.popupObj && document.body.contains(this.popupObj.element)) {\n this.refreshPopup();\n return;\n }\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n var popupEle = _this.createElement('div', {\n id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')\n });\n popupEle.setAttribute('aria-label', _this.element.id);\n popupEle.setAttribute('role', 'dialog');\n var searchBox = _this.setSearchBox(popupEle);\n _this.listContainerHeight = _this.allowFiltering && _this.getModuleName() === 'dropdownlist' && Browser.isDevice ?\n formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(_this.popupHeight);\n if (_this.headerTemplate) {\n _this.setHeaderTemplate(popupEle);\n }\n append([_this.list], popupEle);\n if (_this.footerTemplate) {\n _this.setFooterTemplate(popupEle);\n }\n document.body.appendChild(popupEle);\n popupEle.style.top = '0px';\n if (_this.enableVirtualization && _this.itemTemplate) {\n var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');\n _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) +\n parseInt(window.getComputedStyle(listitems[0]).marginBottom, 10) : 0;\n }\n if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {\n _this.getSkeletonCount();\n _this.skeletonCount = _this.totalItemCount < (_this.itemCount * 2) && ((!(_this.dataSource instanceof DataManager)) ||\n ((_this.dataSource instanceof DataManager) && (_this.totalItemCount <= _this.itemCount))) ? 0 : _this.skeletonCount;\n if (!_this.list.querySelector('.e-virtual-ddl-content')) {\n _this.list.appendChild(_this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: _this.getTransformValues()\n })).appendChild(_this.list.querySelector('.e-list-parent'));\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = _this.getTransformValues();\n }\n _this.UpdateSkeleton();\n _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n _this.virtualItemCount = _this.itemCount;\n if (!_this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = _this.createElement('div', {\n id: _this.element.id + '_popup', className: 'e-virtual-ddl', styles: _this.GetVirtualTrackHeight()\n });\n popupEle.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.list.getElementsByClassName('e-virtual-ddl')[0].style = _this.GetVirtualTrackHeight();\n }\n }\n popupEle.style.visibility = 'hidden';\n if (_this.popupHeight !== 'auto') {\n _this.searchBoxHeight = 0;\n if (!isNullOrUndefined(searchBox.container) &&\n _this.getModuleName() !== 'combobox' && _this.getModuleName() !== 'autocomplete') {\n _this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;\n _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.headerTemplate) {\n _this.header = _this.header ? _this.header : popupEle.querySelector('.e-ddl-header');\n var height = Math.round(_this.header.getBoundingClientRect().height);\n _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) -\n (height + _this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.footerTemplate) {\n _this.footer = _this.footer ? _this.footer : popupEle.querySelector('.e-ddl-footer');\n var height = Math.round(_this.footer.getBoundingClientRect().height);\n _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) -\n (height + _this.searchBoxHeight)).toString() + 'px';\n }\n _this.list.style.maxHeight = (parseInt(_this.listContainerHeight, 10) - 2).toString() + 'px'; // due to box-sizing property\n popupEle.style.maxHeight = formatUnit(_this.popupHeight);\n }\n else {\n popupEle.style.height = 'auto';\n }\n var offsetValue = 0;\n var left = void 0;\n _this.isPreventScrollAction = true;\n if (!isNullOrUndefined(_this.selectedLI) && (!isNullOrUndefined(_this.activeIndex) && _this.activeIndex >= 0)) {\n _this.setScrollPosition();\n }\n else if (_this.enableVirtualization) {\n _this.setScrollPosition();\n }\n else {\n _this.list.scrollTop = 0;\n }\n if (Browser.isDevice && _this.isDeviceFullScreen && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||\n (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {\n offsetValue = _this.getOffsetValue(popupEle);\n var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];\n if (!isNullOrUndefined(_this.inputElement)) {\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));\n }\n }\n _this.createPopup(popupEle, offsetValue, left);\n _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');\n _this.getFocusElement();\n _this.checkCollision(popupEle);\n if (Browser.isDevice) {\n if ((parseInt(_this.popupWidth.toString(), 10) > window.outerWidth) &&\n !(_this.getModuleName() === 'dropdownlist' && _this.allowFiltering)) {\n _this.popupObj.element.classList.add('e-wide-popup');\n }\n _this.popupObj.element.classList.add(dropDownListClasses.device);\n if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'\n && !_this.allowFiltering && _this.isDropDownClick)) {\n _this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n if (_this.isFilterLayout() && _this.isDeviceFullScreen) {\n _this.popupObj.element.classList.add(dropDownListClasses.mobileFilter);\n _this.popupObj.position = { X: 0, Y: 0 };\n _this.popupObj.dataBind();\n attributes(_this.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, _this.popupObj.element], dropDownListClasses.popupFullScreen);\n _this.setSearchBoxPosition();\n _this.backIconElement = searchBox.container.querySelector('.e-back-icon');\n _this.clearIconElement = searchBox.container.querySelector('.' + dropDownListClasses.clearIcon);\n EventHandler.add(_this.backIconElement, 'click', _this.clickOnBackIcon, _this);\n EventHandler.add(_this.clearIconElement, 'click', _this.clearText, _this);\n }\n }\n popupEle.style.visibility = 'visible';\n addClass([popupEle], 'e-popup-close');\n var scrollParentElements = _this.popupObj.getScrollableParent(_this.inputWrapper.container);\n for (var _i = 0, scrollParentElements_1 = scrollParentElements; _i < scrollParentElements_1.length; _i++) {\n var element = scrollParentElements_1[_i];\n EventHandler.add(element, 'scroll', _this.scrollHandler, _this);\n }\n if (!isNullOrUndefined(_this.list)) {\n _this.unWireListEvents();\n _this.wireListEvents();\n }\n _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;\n if (_this.enableVirtualization) {\n _this.notify('bindScrollEvent', {\n module: 'VirtualScroll',\n component: _this.getModuleName(),\n enable: _this.enableVirtualization\n });\n setTimeout(function () {\n if (_this.value || _this.list.querySelector('.e-active')) {\n _this.updateSelectionList();\n if (_this.selectedValueInfo && _this.viewPortInfo && _this.viewPortInfo.offsets.top) {\n _this.list.scrollTop = _this.viewPortInfo.offsets.top;\n }\n else {\n _this.scrollBottom(true, true);\n }\n }\n }, 5);\n }\n attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });\n if (_this.getModuleName() !== 'dropdownlist' && _this.list.classList.contains('e-nodata')) {\n attributes(_this.targetElement(), { 'aria-activedescendant': 'no-record' });\n _this.popupContentElement.setAttribute('role', 'status');\n _this.popupContentElement.setAttribute('id', 'no-record');\n }\n _this.inputElement.setAttribute('aria-expanded', 'true');\n _this.inputElement.setAttribute('aria-controls', _this.element.id + '_popup');\n var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;\n addClass([inputParent], [dropDownListClasses.inputFocus]);\n var animModel = { name: 'FadeIn', duration: 100 };\n _this.beforePopupOpen = true;\n var popupInstance = _this.popupObj;\n var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };\n _this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (!isNullOrUndefined(_this.inputWrapper)) {\n addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);\n }\n _this.renderReactTemplates();\n if (!isNullOrUndefined(_this.popupObj)) {\n _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);\n }\n }\n else {\n _this.beforePopupOpen = false;\n _this.destroyPopup();\n }\n });\n }\n else {\n _this.beforePopupOpen = false;\n }\n });\n };\n DropDownList.prototype.checkCollision = function (popupEle) {\n if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {\n var collision = isCollide(popupEle);\n if (collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n }\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.getOffsetValue = function (popupEle) {\n var popupStyles = getComputedStyle(popupEle);\n var borderTop = parseInt(popupStyles.borderTopWidth, 10);\n var borderBottom = parseInt(popupStyles.borderBottomWidth, 10);\n return this.setPopupPosition(borderTop + borderBottom);\n };\n DropDownList.prototype.createPopup = function (element, offsetValue, left) {\n var _this = this;\n this.popupObj = new Popup(element, {\n width: this.setWidth(), targetType: 'relative',\n relateTo: this.inputWrapper.container,\n collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: offsetValue,\n enableRtl: this.enableRtl, offsetX: left,\n position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },\n zIndex: this.zIndex,\n close: function () {\n if (!_this.isDocumentClick) {\n _this.focusDropDown();\n }\n // eslint-disable-next-line\n if (_this.isReact) {\n _this.clearTemplate(['headerTemplate', 'footerTemplate']);\n }\n _this.isNotSearchList = false;\n _this.isDocumentClick = false;\n _this.destroyPopup();\n if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list.length > 0) {\n _this.isActive = true;\n if (_this.enableVirtualization) {\n _this.onActionComplete(_this.ulElement, _this.listData, null, true);\n }\n else {\n _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);\n }\n }\n else if (_this.enableVirtualization) {\n _this.focusIndexItem();\n }\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n var actionList = _this.actionCompleteData && _this.actionCompleteData.ulElement &&\n _this.actionCompleteData.ulElement.querySelector('li');\n var ulElement = _this.list.querySelector('ul li');\n if (!isNullOrUndefined(_this.ulElement) && !isNullOrUndefined(_this.ulElement.getElementsByClassName('e-item-focus')[0])) {\n attributes(_this.targetElement(), { 'aria-activedescendant': _this.ulElement.getElementsByClassName('e-item-focus')[0].id });\n }\n else if (!isNullOrUndefined(_this.ulElement) && !isNullOrUndefined(_this.ulElement.getElementsByClassName('e-active')[0])) {\n attributes(_this.targetElement(), { 'aria-activedescendant': _this.ulElement.getElementsByClassName('e-active')[0].id });\n }\n if (_this.isFiltering() && _this.itemTemplate && (_this.element.tagName === _this.getNgDirective()) &&\n (actionList && ulElement && actionList.textContent !== ulElement.textContent) &&\n _this.element.tagName !== 'EJS-COMBOBOX') {\n _this.cloneElements();\n }\n if (_this.isFilterLayout()) {\n removeClass([_this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n _this.isFilterFocus = true;\n _this.filterInput.focus();\n if (_this.inputWrapper.clearButton) {\n addClass([_this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n _this.activeStateChange();\n },\n targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n };\n DropDownList.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0;\n };\n DropDownList.prototype.getFocusElement = function () {\n // combo-box used this method\n };\n DropDownList.prototype.isFilterLayout = function () {\n return this.getModuleName() === 'dropdownlist' && this.allowFiltering;\n };\n DropDownList.prototype.scrollHandler = function () {\n if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&\n !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {\n if (this.element && !(this.isElementInViewport(this.element))) {\n this.hidePopup();\n }\n }\n };\n DropDownList.prototype.isElementInViewport = function (element) {\n var elementRect = element.getBoundingClientRect();\n return (elementRect.top >= 0 && elementRect.left >= 0 && elementRect.bottom <= window.innerHeight &&\n elementRect.right <= window.innerWidth);\n };\n DropDownList.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.popupObj.element.style.maxHeight = '100%';\n this.popupObj.element.style.width = '100%';\n this.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n DropDownList.prototype.setPopupPosition = function (border) {\n var offsetValue;\n var popupOffset = border;\n var selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];\n var liHeight = firstItem.getBoundingClientRect().height;\n this.listItemHeight = liHeight + parseInt(window.getComputedStyle(firstItem).marginBottom, 10);\n var listHeight = this.list.offsetHeight / 2;\n var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;\n var lastItemOffsetValue = lastItem.offsetTop;\n if (lastItemOffsetValue - listHeight < height && !isNullOrUndefined(this.liCollections) &&\n this.liCollections.length > 0 && !isNullOrUndefined(selectedLI)) {\n var count = this.list.offsetHeight / liHeight;\n var paddingBottom = parseInt(getComputedStyle(this.list).paddingBottom, 10);\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;\n this.list.scrollTop = selectedLI.offsetTop;\n }\n else if (height > listHeight && !this.enableVirtualization) {\n offsetValue = listHeight - liHeight / 2;\n this.list.scrollTop = height - listHeight + liHeight / 2;\n }\n else {\n offsetValue = height;\n }\n var inputHeight = this.inputWrapper.container.offsetHeight;\n offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);\n return -offsetValue;\n };\n DropDownList.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n if (Browser.isDevice && (width.indexOf('px') > -1) && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n DropDownList.prototype.scrollBottom = function (isInitial, isInitialSelection, keyAction) {\n var _this = this;\n if (isInitialSelection === void 0) { isInitialSelection = false; }\n if (keyAction === void 0) { keyAction = null; }\n if (isNullOrUndefined(this.selectedLI) && this.enableVirtualization) {\n this.selectedLI = this.list.querySelector('.' + dropDownBaseClasses.li);\n if (!isNullOrUndefined(this.selectedLI) && this.selectedLI.classList.contains('e-virtual-list')) {\n this.selectedLI = this.liCollections[this.skeletonCount];\n }\n }\n if (!isNullOrUndefined(this.selectedLI)) {\n var selectedListMargin = this.selectedLI &&\n !isNaN(parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10)) ?\n parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10) : 0;\n this.isUpwardScrolling = false;\n var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;\n var lastElementValue = this.list.querySelector('li:last-of-type') ?\n this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?\n this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * (this.selectedLI.offsetHeight +\n selectedListMargin)) : this.selectedLI.offsetTop;\n var currentOffset = this.list.offsetHeight;\n var nextBottom = selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight + selectedListMargin)) +\n (this.selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n var isScrollerCHanged = false;\n nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 :\n nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10);\n var boxRange = selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight + selectedListMargin)) +\n (this.selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (this.activeIndex === 0 && !this.enableVirtualization) {\n this.list.scrollTop = 0;\n isScrollerCHanged = this.isKeyBoardAction;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;\n var liCount = keyAction === 'pageDown' ? this.getPageCount() - 2 : 1;\n if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {\n if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue &&\n currentElementValue === lastElementValue && keyAction !== 'end' && !this.isVirtualScrolling) {\n this.isPreventKeyAction = true;\n if (this.enableVirtualization && this.itemTemplate) {\n this.list.scrollTop += nextOffset;\n }\n else {\n if (this.enableVirtualization) {\n liCount = keyAction === 'pageDown' ? this.getPageCount() + 1 : liCount;\n }\n this.list.scrollTop += (this.selectedLI.offsetHeight + selectedListMargin) * liCount;\n }\n this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n }\n else if (this.enableVirtualization && keyAction === 'end') {\n this.isPreventKeyAction = false;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n this.list.scrollTop = this.list.scrollHeight;\n }\n else {\n if (keyAction === 'pageDown' && this.enableVirtualization && !this.isVirtualScrolling) {\n this.isPreventKeyAction = false;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n }\n this.list.scrollTop = nextOffset;\n }\n }\n else {\n this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ?\n this.virtualListInfo.startIndex * this.listItemHeight : 0;\n }\n isScrollerCHanged = this.isKeyBoardAction;\n }\n this.isKeyBoardAction = isScrollerCHanged;\n if (this.enableVirtualization && this.fields.groupBy && this.fixedHeaderElement && (keyAction === 'down')) {\n setTimeout(function () {\n _this.scrollStop(null, true);\n }, 100);\n }\n }\n };\n DropDownList.prototype.scrollTop = function (keyAction) {\n if (keyAction === void 0) { keyAction = null; }\n if (!isNullOrUndefined(this.selectedLI)) {\n var selectedListMargin = this.selectedLI &&\n !isNaN(parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10)) ?\n parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10) : 0;\n var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;\n var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?\n this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * (this.selectedLI.offsetHeight +\n selectedListMargin)) : this.selectedLI.offsetTop;\n var nextOffset = selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight +\n selectedListMargin)) - this.list.scrollTop;\n var firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ?\n this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;\n nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight + selectedListMargin)) +\n (this.selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop);\n var isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;\n if (this.activeIndex === 0 && !this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0 || isPageUpKeyAction) {\n var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;\n var liCount = keyAction === 'pageUp' ? this.getPageCount() - 2 : 1;\n if (this.enableVirtualization) {\n liCount = keyAction === 'pageUp' ? this.getPageCount() : liCount;\n }\n if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue &&\n currentElementValue === firstElementValue && keyAction !== 'home' && !this.isVirtualScrolling) {\n this.isUpwardScrolling = true;\n this.isPreventKeyAction = true;\n this.list.scrollTop -= (this.selectedLI.offsetHeight + selectedListMargin) * liCount;\n this.isPreventKeyAction = this.list.scrollTop !== 0 ? this.isPreventKeyAction : false;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n }\n else if (this.enableVirtualization && keyAction === 'home') {\n this.isPreventScrollAction = false;\n this.isPreventKeyAction = true;\n this.isKeyBoardAction = false;\n this.list.scrollTo(0, 0);\n }\n else {\n if (keyAction === 'pageUp' && this.enableVirtualization && !this.isVirtualScrolling) {\n this.isPreventKeyAction = false;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n }\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n }\n };\n DropDownList.prototype.IsScrollerAtEnd = function () {\n return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;\n };\n DropDownList.prototype.isEditTextBox = function () {\n return false;\n };\n DropDownList.prototype.isFiltering = function () {\n return this.allowFiltering;\n };\n DropDownList.prototype.isPopupButton = function () {\n return true;\n };\n DropDownList.prototype.setScrollPosition = function (e) {\n this.isPreventScrollAction = true;\n if (!isNullOrUndefined(e)) {\n switch (e.action) {\n case 'pageDown':\n case 'down':\n case 'end':\n this.isKeyBoardAction = true;\n this.scrollBottom(false, false, e.action);\n break;\n default:\n this.isKeyBoardAction = e.action === 'up' || e.action === 'pageUp' || e.action === 'open';\n this.scrollTop(e.action);\n break;\n }\n }\n else {\n this.scrollBottom(true);\n }\n this.isKeyBoardAction = false;\n };\n DropDownList.prototype.clearText = function () {\n this.filterInput.value = this.typedString = '';\n this.searchLists(null);\n if (this.enableVirtualization) {\n this.list.scrollTop = 0;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ?\n this.dataSource.length : 0;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n this.getSkeletonCount();\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.e-list-item');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n }\n }\n };\n DropDownList.prototype.setEleWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n DropDownList.prototype.closePopup = function (delay, e) {\n var _this = this;\n var isFilterValue = !isNullOrUndefined(this.filterInput) &&\n !isNullOrUndefined(this.filterInput.value) && this.filterInput.value !== '';\n var typedString = this.getModuleName() === 'combobox' ? this.typedString : null;\n this.isTyped = false;\n this.isVirtualTrackHeight = false;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n this.keyboardEvent = null;\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.isActive = false;\n if (this.getModuleName() === 'dropdownlist') {\n Input.destroy({\n element: this.filterInput,\n floatLabelType: this.floatLabelType,\n properties: { placeholder: this.filterBarPlaceholder },\n buttons: this.clearIconElement\n }, this.clearIconElement);\n }\n this.filterInputObj = null;\n this.isDropDownClick = false;\n this.preventAutoFill = false;\n var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollableParentElements_1 = scrollableParentElements; _i < scrollableParentElements_1.length; _i++) {\n var element = scrollableParentElements_1[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (Browser.isDevice && this.isFilterLayout() && this.isDeviceFullScreen) {\n removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n }\n if (this.isFilterLayout()) {\n if (!Browser.isDevice) {\n this.searchKeyModule.destroy();\n if (this.clearIconElement) {\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n }\n if (this.backIconElement) {\n EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n if (!isNullOrUndefined(this.filterInput)) {\n EventHandler.remove(this.filterInput, 'input', this.onInput);\n EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);\n EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);\n EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);\n EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);\n }\n if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {\n this.filterInput.removeAttribute('aria-activedescendant');\n this.filterInput.removeAttribute('aria-disabled');\n this.filterInput.removeAttribute('role');\n this.filterInput.removeAttribute('autocomplete');\n this.filterInput.removeAttribute('autocapitalize');\n this.filterInput.removeAttribute('spellcheck');\n }\n this.filterInput = null;\n }\n attributes(this.targetElement(), { 'aria-expanded': 'false' });\n this.inputElement.setAttribute('aria-expanded', 'false');\n this.targetElement().removeAttribute('aria-owns');\n this.targetElement().removeAttribute('aria-activedescendant');\n this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);\n if (this.isFiltering()) {\n this.actionCompleteData.isUpdated = false;\n }\n if (this.enableVirtualization) {\n if ((this.value == null || this.isTyped)) {\n this.viewPortInfo.endIndex = this.viewPortInfo && this.viewPortInfo.endIndex > 0 ?\n this.viewPortInfo.endIndex : this.itemCount;\n if (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'dropdownlist' &&\n !isNullOrUndefined(this.typedString) && this.typedString !== '') || (this.getModuleName() === 'combobox' &&\n this.allowFiltering && !isNullOrUndefined(this.typedString) && this.typedString !== '')) {\n this.checkAndResetCache();\n }\n }\n else if (this.getModuleName() === 'autocomplete') {\n this.checkAndResetCache();\n }\n if ((this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox') && !(this.skeletonCount === 0)) {\n this.getSkeletonCount(true);\n }\n }\n this.beforePopupOpen = false;\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var popupInstance = this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!isNullOrUndefined(_this.popupObj) &&\n !isNullOrUndefined(_this.popupObj.element.querySelector('.e-fixed-head'))) {\n var fixedHeader = _this.popupObj.element.querySelector('.e-fixed-head');\n fixedHeader.parentNode.removeChild(fixedHeader);\n _this.fixedHeaderElement = null;\n }\n if (!eventArgs.cancel) {\n if (_this.getModuleName() === 'autocomplete') {\n _this.rippleFun();\n }\n if (_this.isPopupOpen) {\n _this.popupObj.hide(new Animation(eventArgs.animation));\n }\n else {\n _this.destroyPopup();\n }\n }\n });\n if (Browser.isDevice && !eventArgs.cancel && this.popupObj.element.classList.contains('e-wide-popup')) {\n this.popupObj.element.classList.remove('e-wide-popup');\n }\n var dataSourceCount;\n if (this.dataSource instanceof DataManager) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ?\n this.virtualGroupDataSource.length : 0;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n }\n if (this.enableVirtualization && this.isFiltering() && isFilterValue && this.totalItemCount !== dataSourceCount) {\n this.updateInitialData();\n this.checkAndResetCache();\n }\n };\n DropDownList.prototype.updateInitialData = function () {\n var currentData = this.selectData;\n var ulElement = this.renderItems(currentData, this.fields);\n this.list.scrollTop = 0;\n this.virtualListInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: this.itemCount\n };\n if (this.getModuleName() === 'combobox') {\n this.typedString = '';\n }\n this.previousStartIndex = 0;\n this.previousEndIndex = 0;\n if (this.dataSource instanceof DataManager) {\n if (this.remoteDataCount >= 0) {\n this.totalItemCount = this.dataCount = this.remoteDataCount;\n }\n else {\n this.resetList(this.dataSource);\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n if (this.getModuleName() !== 'autocomplete' && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2)) {\n this.getSkeletonCount();\n }\n this.UpdateSkeleton();\n this.listData = currentData;\n this.updateActionCompleteDataValues(ulElement, currentData);\n this.liCollections = this.list.querySelectorAll('.e-list-item');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n }\n };\n DropDownList.prototype.destroyPopup = function () {\n this.isPopupOpen = false;\n this.isFilterFocus = false;\n this.inputElement.removeAttribute('aria-controls');\n if (this.popupObj) {\n this.popupObj.destroy();\n detach(this.popupObj.element);\n }\n };\n DropDownList.prototype.clickOnBackIcon = function () {\n this.hidePopup();\n this.focusIn();\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n DropDownList.prototype.render = function () {\n this.preselectedIndex = !isNullOrUndefined(this.index) ? this.index : null;\n if (this.element.tagName === 'INPUT') {\n this.inputElement = this.element;\n if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {\n this.inputElement.setAttribute('role', 'combobox');\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {\n this.inputElement.setAttribute('type', 'text');\n }\n this.inputElement.setAttribute('aria-expanded', 'false');\n }\n else {\n this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n this.element.parentElement.insertBefore(this.inputElement, this.element);\n this.preventTabIndex(this.inputElement);\n }\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) &&\n closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.getModuleName() === 'dropdownlist' ? true : this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n }\n }, this.createElement);\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n this.hiddenElement = this.createElement('select', {\n attrs: {\n 'aria-hidden': 'true',\n 'tabindex': '-1',\n 'class': dropDownListClasses.hiddenElement\n }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n if (!this.hiddenElement.hasAttribute('aria-label')) {\n this.hiddenElement.setAttribute('aria-label', this.getModuleName());\n }\n this.validationAttribute(this.element, this.hiddenElement);\n this.setReadOnly();\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n if (this.floatLabelType !== 'Never') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) &&\n this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {\n if (!this.inputElement.hasAttribute('aria-label')) {\n this.inputElement.setAttribute('aria-label', this.getModuleName());\n }\n }\n else if (this.getModuleName() === 'dropdownlist') {\n if (!this.targetElement().hasAttribute('aria-label')) {\n attributes(this.targetElement(), { 'aria-label': this.getModuleName() });\n }\n if (!this.inputElement.hasAttribute('aria-label')) {\n this.inputElement.setAttribute('aria-label', this.getModuleName());\n }\n this.inputElement.setAttribute('aria-expanded', 'false');\n }\n attributes(this.targetElement(), this.getAriaAttributes());\n this.updateDataAttribute(this.htmlAttributes);\n this.setHTMLAttributes();\n if (this.targetElement() === this.inputElement) {\n this.inputElement.removeAttribute('aria-labelledby');\n }\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n if (this.enableVirtualization) {\n this.listItemHeight = this.getListHeight();\n this.getSkeletonCount();\n this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);\n if (this.index !== null) {\n this.activeIndex = this.index + this.skeletonCount;\n }\n }\n this.initValue();\n this.selectedValueInfo = this.viewPortInfo;\n if (this.enableVirtualization) {\n this.activeIndex = this.activeIndex + this.skeletonCount;\n }\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = this.allowObjectBinding ? this.getDataByValue(selectElement.options[selectElement.selectedIndex].value) :\n selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.setEnabled();\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n this.inputElement.onselect = function (e) {\n e.stopImmediatePropagation();\n };\n this.inputElement.onchange = function (e) {\n e.stopImmediatePropagation();\n };\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n if (!isNullOrUndefined(this.text)) {\n this.inputElement.setAttribute('value', this.text);\n }\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n var floatLabelElement = this.inputWrapper.container.getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(this.element.id) && this.element.id !== '' && !isNullOrUndefined(floatLabelElement)) {\n floatLabelElement.id = 'label_' + this.element.id.replace(/ /g, '_');\n attributes(this.inputElement, { 'aria-labelledby': floatLabelElement.id });\n }\n this.renderComplete();\n this.listItemHeight = this.getListHeight();\n this.getSkeletonCount();\n if (this.enableVirtualization) {\n this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);\n }\n this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;\n this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ?\n this.viewPortInfo.endIndex : this.itemCount;\n };\n DropDownList.prototype.getListHeight = function () {\n var listParent = this.createElement('div', {\n className: 'e-dropdownbase'\n });\n var item = this.createElement('li', {\n className: 'e-list-item'\n });\n var listParentHeight = formatUnit(this.popupHeight);\n listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';\n listParent.appendChild(item);\n document.body.appendChild(listParent);\n this.virtualListHeight = listParent.getBoundingClientRect().height;\n var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +\n parseInt(window.getComputedStyle(item).marginBottom, 10);\n listParent.remove();\n return listItemHeight;\n };\n DropDownList.prototype.setFooterTemplate = function (popupEle) {\n var compiledString;\n if (this.footer) {\n if (this.isReact && typeof this.footerTemplate === 'function') {\n this.clearTemplate(['footerTemplate']);\n }\n else {\n this.footer.innerHTML = '';\n }\n }\n else {\n this.footer = this.createElement('div');\n addClass([this.footer], dropDownListClasses.footer);\n }\n var footercheck = this.dropdownCompiler(this.footerTemplate);\n if (typeof this.footerTemplate !== 'function' && footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var footerCompTemp = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, null, this.footer);\n if (footerCompTemp && footerCompTemp.length > 0) {\n append(footerCompTemp, this.footer);\n }\n append([this.footer], popupEle);\n };\n DropDownList.prototype.setHeaderTemplate = function (popupEle) {\n var compiledString;\n if (this.header) {\n this.header.innerHTML = '';\n }\n else {\n this.header = this.createElement('div');\n addClass([this.header], dropDownListClasses.header);\n }\n var headercheck = this.dropdownCompiler(this.headerTemplate);\n if (typeof this.headerTemplate !== 'function' && headercheck) {\n compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.headerTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var headerCompTemp = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, null, this.header);\n if (headerCompTemp && headerCompTemp.length) {\n append(headerCompTemp, this.header);\n }\n var contentEle = popupEle.querySelector('div.e-content');\n popupEle.insertBefore(this.header, contentEle);\n };\n /**\n * Sets the enabled state to DropDownBase.\n *\n * @returns {void}\n */\n DropDownList.prototype.setEnabled = function () {\n this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');\n };\n DropDownList.prototype.setOldText = function (text) {\n this.text = text;\n };\n DropDownList.prototype.setOldValue = function (value) {\n this.value = value;\n };\n DropDownList.prototype.refreshPopup = function () {\n if (!isNullOrUndefined(this.popupObj) && document.body.contains(this.popupObj.element) &&\n ((this.allowFiltering && !(Browser.isDevice && this.isFilterLayout())) || this.getModuleName() === 'autocomplete')) {\n removeClass([this.popupObj.element], 'e-popup-close');\n this.popupObj.refreshPosition(this.inputWrapper.container);\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.checkData = function (newProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource)) && this.itemTemplate && this.allowFiltering &&\n !(this.isListSearched && (newProp.dataSource instanceof DataManager))) {\n if (this.list && !(this.isReact)) {\n this.list.innerHTML = '';\n }\n else {\n this.list = null;\n }\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n }\n this.isListSearched = false;\n var isChangeValue = Object.keys(newProp).indexOf('value') !== -1 && isNullOrUndefined(newProp.value);\n var isChangeText = Object.keys(newProp).indexOf('text') !== -1 && isNullOrUndefined(newProp.text);\n if (this.getModuleName() !== 'autocomplete' && this.allowFiltering && (isChangeValue || isChangeText)) {\n this.itemData = null;\n }\n if (this.allowFiltering && newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n this.actionData = this.actionCompleteData;\n }\n else if (this.allowFiltering && newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {\n this.actionCompleteData = this.getModuleName() === 'combobox' ?\n { ulElement: null, list: null, isUpdated: false } : this.actionCompleteData;\n this.actionData = this.actionCompleteData;\n }\n };\n DropDownList.prototype.updateDataSource = function (props, oldProps) {\n if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {\n this.clearAll(null, props);\n }\n if ((this.fields.groupBy && props.fields) && !this.isGroupChecking && this.list) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (!(!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) ||\n ((props.dataSource instanceof DataManager) || (!isNullOrUndefined(props) && Array.isArray(props.dataSource) &&\n !isNullOrUndefined(oldProps) && Array.isArray(oldProps.dataSource) && props.dataSource.length !== oldProps.dataSource.length))) {\n this.typedString = '';\n this.resetList(this.dataSource);\n }\n if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {\n this.checkCustomValue();\n }\n };\n DropDownList.prototype.checkCustomValue = function () {\n var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ?\n getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n this.itemData = this.getDataByValue(currentValue);\n var dataItem = this.getItemData();\n var value = this.allowObjectBinding ? this.itemData : dataItem.value;\n var index = isNullOrUndefined(value) ? null : this.index;\n if ((isNullOrUndefined(index) && (currentValue === value)) || this.isAngular) {\n this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });\n }\n else {\n this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'index': index, 'value': value });\n }\n };\n DropDownList.prototype.updateInputFields = function () {\n if (this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n };\n /**\n * Dynamically change the value of properties.\n *\n * @private\n * @param {DropDownListModel} newProp - Returns the dynamic property value of the component.\n * @param {DropDownListModel} oldProp - Returns the previous previous value of the component.\n * @returns {void}\n */\n DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n if (!isNullOrUndefined(newProp.dataSource) && !this.isTouched && (isNullOrUndefined(newProp.value) &&\n isNullOrUndefined(newProp.index)) && !isNullOrUndefined(this.preselectedIndex) && !isNullOrUndefined(this.index)) {\n newProp.index = this.index;\n }\n if (!isNullOrUndefined(newProp.value) || !isNullOrUndefined(newProp.index)) {\n this.isTouched = true;\n }\n if (this.getModuleName() === 'dropdownlist') {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n var _loop_1 = function (prop) {\n switch (prop) {\n case 'query':\n case 'dataSource':\n this_1.getSkeletonCount();\n this_1.checkAndResetCache();\n break;\n case 'htmlAttributes':\n this_1.setHTMLAttributes();\n break;\n case 'width':\n this_1.setEleWidth(newProp.width);\n Input.calculateWidth(this_1.inputElement, this_1.inputWrapper.container);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this_1.inputElement);\n break;\n case 'filterBarPlaceholder':\n if (this_1.filterInput) {\n Input.setPlaceholder(newProp.filterBarPlaceholder, this_1.filterInput);\n }\n break;\n case 'readonly':\n if (this_1.getModuleName() !== 'dropdownlist') {\n Input.setReadonly(newProp.readonly, this_1.inputElement);\n }\n this_1.setReadOnly();\n break;\n case 'cssClass':\n this_1.setCssClass(newProp.cssClass, oldProp.cssClass);\n Input.calculateWidth(this_1.inputElement, this_1.inputWrapper.container);\n break;\n case 'enableRtl':\n this_1.setEnableRtl();\n break;\n case 'enabled':\n this_1.setEnable();\n break;\n case 'text':\n if (this_1.fields.disabled) {\n newProp.text = newProp.text && !this_1.isDisabledItemByIndex(this_1.getIndexByValue(this_1.getValueByText(newProp.text)))\n ? newProp.text : null;\n }\n if (newProp.text === null) {\n this_1.clearAll();\n break;\n }\n if (this_1.enableVirtualization) {\n this_1.updateValues();\n this_1.updateInputFields();\n this_1.notify('setCurrentViewDataAsync', {\n module: 'VirtualScroll'\n });\n break;\n }\n if (!this_1.list) {\n if (this_1.dataSource instanceof DataManager) {\n this_1.initialRemoteRender = true;\n }\n this_1.renderList();\n }\n if (!this_1.initialRemoteRender) {\n var li = this_1.getElementByText(newProp.text);\n if (!this_1.checkValidLi(li)) {\n if (this_1.liCollections && this_1.liCollections.length === 100 &&\n this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {\n this_1.setSelectionData(newProp.text, oldProp.text, 'text');\n }\n else if (newProp.text && this_1.dataSource instanceof DataManager) {\n var listLength_1 = this_1.getItems().length;\n var checkField = isNullOrUndefined(this_1.fields.text) ? this_1.fields.value : this_1.fields.text;\n this_1.typedString = '';\n this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.text)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, listLength_1);\n _this.updateValues();\n }\n else {\n _this.setOldText(oldProp.text);\n }\n });\n }\n else if (this_1.getModuleName() === 'autocomplete') {\n this_1.setInputValue(newProp, oldProp);\n }\n else {\n this_1.setOldText(oldProp.text);\n }\n }\n this_1.updateInputFields();\n }\n break;\n case 'value':\n if (this_1.fields.disabled) {\n newProp.value = newProp.value != null && !this_1.isDisableItemValue(newProp.value) ? newProp.value : null;\n }\n if (newProp.value === null) {\n this_1.clearAll();\n break;\n }\n if (this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) && !isNullOrUndefined(oldProp.value) &&\n this_1.isObjectInArray(newProp.value, [oldProp.value])) {\n return { value: void 0 };\n }\n if (this_1.enableVirtualization) {\n this_1.updateValues();\n this_1.updateInputFields();\n this_1.notify('setCurrentViewDataAsync', {\n module: 'VirtualScroll'\n });\n this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;\n break;\n }\n this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change\n if (!this_1.list) {\n if (this_1.dataSource instanceof DataManager) {\n this_1.initialRemoteRender = true;\n }\n this_1.renderList();\n }\n if (!this_1.initialRemoteRender) {\n var value = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?\n getValue((this_1.fields.value) ? this_1.fields.value : '', newProp.value) : newProp.value;\n var item = this_1.getElementByValue(value);\n if (!this_1.checkValidLi(item)) {\n if (this_1.liCollections && this_1.liCollections.length === 100 &&\n this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {\n this_1.setSelectionData(newProp.value, oldProp.value, 'value');\n }\n else if (newProp.value && this_1.dataSource instanceof DataManager) {\n var listLength_2 = this_1.getItems().length;\n var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;\n this_1.typedString = '';\n var value_3 = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?\n getValue(checkField, newProp.value) : newProp.value;\n this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', value_3)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, listLength_2);\n _this.updateValues();\n }\n else {\n _this.setOldValue(oldProp.value);\n }\n });\n }\n else if (this_1.getModuleName() === 'autocomplete') {\n this_1.setInputValue(newProp, oldProp);\n }\n else {\n this_1.setOldValue(oldProp.value);\n }\n }\n this_1.updateInputFields();\n this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;\n }\n break;\n case 'index':\n if (this_1.fields.disabled) {\n newProp.index = newProp.index != null && !this_1.isDisabledItemByIndex(newProp.index) ? newProp.index : null;\n }\n if (newProp.index === null) {\n this_1.clearAll();\n break;\n }\n if (!this_1.list) {\n if (this_1.dataSource instanceof DataManager) {\n this_1.initialRemoteRender = true;\n }\n this_1.renderList();\n }\n if (!this_1.initialRemoteRender && this_1.liCollections) {\n var element = this_1.liCollections[newProp.index];\n if (!this_1.checkValidLi(element)) {\n if (this_1.liCollections && this_1.liCollections.length === 100 &&\n this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {\n this_1.setSelectionData(newProp.index, oldProp.index, 'index');\n }\n else {\n this_1.index = oldProp.index;\n }\n }\n this_1.updateInputFields();\n }\n break;\n case 'footerTemplate':\n if (this_1.popupObj) {\n this_1.setFooterTemplate(this_1.popupObj.element);\n }\n break;\n case 'headerTemplate':\n if (this_1.popupObj) {\n this_1.setHeaderTemplate(this_1.popupObj.element);\n }\n break;\n case 'valueTemplate':\n if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate !== null) {\n this_1.setValueTemplate();\n }\n break;\n case 'allowFiltering':\n if (this_1.allowFiltering) {\n this_1.actionCompleteData = {\n ulElement: this_1.ulElement,\n list: this_1.listData, isUpdated: true\n };\n this_1.actionData = this_1.actionCompleteData;\n this_1.updateSelectElementData(this_1.allowFiltering);\n }\n break;\n case 'floatLabelType':\n Input.removeFloating(this_1.inputWrapper);\n Input.addFloating(this_1.inputElement, newProp.floatLabelType, this_1.placeholder, this_1.createElement);\n if (!isNullOrUndefined(this_1.inputWrapper.buttons[0]) &&\n this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this_1.floatLabelType !== 'Never') {\n this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'showClearButton':\n if (!this_1.inputWrapper.clearButton) {\n Input.setClearButton(newProp.showClearButton, this_1.inputElement, this_1.inputWrapper, null, this_1.createElement);\n this_1.bindClearEvent();\n }\n break;\n default:\n {\n // eslint-disable-next-line max-len\n var ddlProps = this_1.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this_1, ddlProps.newProperty, ddlProps.oldProperty);\n }\n break;\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n var state_1 = _loop_1(prop);\n if (typeof state_1 === \"object\")\n return state_1.value;\n }\n };\n DropDownList.prototype.checkValidLi = function (element) {\n if (this.isValidLI(element)) {\n this.setSelection(element, null);\n return true;\n }\n return false;\n };\n DropDownList.prototype.setSelectionData = function (newProp, oldProp, prop) {\n var _this = this;\n var li;\n this.updateListValues = function () {\n if (prop === 'text') {\n li = _this.getElementByText(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldText(oldProp);\n }\n }\n else if (prop === 'value') {\n var fields = (_this.fields.value) ? _this.fields.value : '';\n var value = _this.allowObjectBinding && !isNullOrUndefined(newProp) ?\n getValue(fields, newProp) : newProp;\n li = _this.getElementByValue(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldValue(oldProp);\n }\n }\n else if (prop === 'index') {\n li = _this.liCollections[newProp];\n if (!_this.checkValidLi(li)) {\n _this.index = oldProp;\n }\n }\n };\n };\n DropDownList.prototype.updatePopupState = function () {\n if (this.beforePopupOpen) {\n this.beforePopupOpen = false;\n this.showPopup();\n }\n };\n DropDownList.prototype.setReadOnly = function () {\n if (this.readonly) {\n addClass([this.inputWrapper.container], ['e-readonly']);\n }\n else {\n removeClass([this.inputWrapper.container], ['e-readonly']);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-function\n DropDownList.prototype.setInputValue = function (newProp, oldProp) {\n };\n DropDownList.prototype.setCssClass = function (newClass, oldClass) {\n if (!isNullOrUndefined(oldClass)) {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newClass)) {\n newClass = (newClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newClass, [this.inputWrapper.container], oldClass);\n if (this.popupObj) {\n Input.setCssClass(newClass, [this.popupObj.element], oldClass);\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n DropDownList.prototype.getModuleName = function () {\n return 'dropdownlist';\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n */\n DropDownList.prototype.showPopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (!this.enabled) {\n return;\n }\n this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;\n if (this.isReact && this.getModuleName() === 'combobox' && this.itemTemplate && this.isCustomFilter && this.isAddNewItemTemplate) {\n this.renderList();\n this.isAddNewItemTemplate = false;\n }\n if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list !== this.actionCompleteData.list) &&\n this.actionData.list && this.actionData.ulElement) {\n this.actionCompleteData = this.actionData;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n if (this.isFiltering() && !this.isActive && this.actionCompleteData.list && this.actionCompleteData.list[0]) {\n this.isActive = true;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||\n this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {\n if (this.isReact && this.isFiltering() && this.itemTemplate != null) {\n this.isSecondClick = false;\n }\n this.renderList(e);\n }\n if (this.enableVirtualization && this.listData && this.listData.length) {\n if (!isNullOrUndefined(this.value) && (this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox')) {\n this.removeHover();\n }\n if (!this.beforePopupOpen) {\n this.notify('setCurrentViewDataAsync', {\n module: 'VirtualScroll'\n });\n }\n }\n if (this.beforePopupOpen) {\n this.invokeRenderPopup(e);\n }\n if (this.enableVirtualization && !this.allowFiltering && this.selectedValueInfo != null &&\n this.selectedValueInfo.startIndex > 0 && this.value != null) {\n this.notify('dataProcessAsync', {\n module: 'VirtualScroll',\n isOpen: true\n });\n }\n };\n DropDownList.prototype.invokeRenderPopup = function (e) {\n if (Browser.isDevice && this.isFilterLayout()) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_2 = this;\n window.onpopstate = function () {\n proxy_2.hidePopup();\n };\n history.pushState({}, '');\n }\n if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) ||\n this.list.classList.contains(dropDownBaseClasses.noData))) {\n this.renderPopup(e);\n }\n };\n DropDownList.prototype.renderHightSearch = function () {\n // update high light search\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in an open state.\n *\n * @returns {void}\n */\n DropDownList.prototype.hidePopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {\n if (!isNullOrUndefined(this.inputElement)) {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.isEscapeKey = false;\n if (!isNullOrUndefined(this.index)) {\n var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n var element = this.findListElement(this.ulElement, 'li', 'data-value', value);\n this.selectedLI = this.liCollections[this.index] || element;\n if (this.selectedLI) {\n this.updateSelectedItem(this.selectedLI, null, true);\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n }\n }\n else {\n this.resetSelection();\n }\n }\n this.isVirtualTrackHeight = false;\n this.customFilterQuery = null;\n this.closePopup(0, e);\n var dataItem = this.getItemData();\n var isSelectVal = !isNullOrUndefined(this.selectedLI);\n if (isSelectVal && this.enableVirtualization && this.selectedLI.classList) {\n isSelectVal = this.selectedLI.classList.contains('e-active');\n }\n if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||\n isSelectVal && this.inputElement.value !== dataItem.text)) {\n this.isSelectCustom = false;\n this.clearAll(e);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Sets the focus on the component for interaction.\n *\n * @returns {void}\n */\n DropDownList.prototype.focusIn = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable)) {\n return;\n }\n var isFocused = false;\n if (this.preventFocus && Browser.isDevice) {\n this.inputWrapper.container.tabIndex = 1;\n this.inputWrapper.container.focus();\n this.preventFocus = false;\n isFocused = true;\n }\n if (!isFocused) {\n this.targetElement().focus();\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n this.onFocus(e);\n if (this.floatLabelType !== 'Never') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n };\n /**\n * Moves the focus from the component if the component is already focused.\n *\n * @returns {void}\n */\n DropDownList.prototype.focusOut = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (!this.enabled) {\n return;\n }\n if (!this.enableVirtualization && (this.getModuleName() === 'combobox' || this.getModuleName() === 'autocomplete')) {\n this.isTyped = true;\n }\n this.hidePopup(e);\n if (this.targetElement()) {\n this.targetElement().blur();\n }\n removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n if (this.floatLabelType !== 'Never') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n };\n /**\n * Method to disable specific item in the popup.\n *\n * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.\n * @returns {void}\n * @deprecated\n */\n DropDownList.prototype.disableItem = function (item) {\n if (this.fields.disabled) {\n if (!this.list) {\n this.renderList();\n }\n var itemIndex = -1;\n if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {\n if (typeof (item) === 'string') {\n itemIndex = this.getIndexByValue(item);\n }\n else if (typeof item === 'object') {\n if (item instanceof HTMLLIElement) {\n for (var index = 0; index < this.liCollections.length; index++) {\n if (this.liCollections[index] === item) {\n itemIndex = this.getIndexByValue(item.getAttribute('data-value'));\n break;\n }\n }\n }\n else {\n var value = JSON.parse(JSON.stringify(item))[this.fields.value];\n for (var index = 0; index < this.listData.length; index++) {\n if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {\n itemIndex = this.getIndexByValue(value);\n break;\n }\n }\n }\n }\n else {\n itemIndex = item;\n }\n var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;\n if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {\n var li = this.liCollections[itemIndex];\n if (li) {\n this.disableListItem(li);\n var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));\n parsedData[this.fields.disabled] = true;\n this.listData[itemIndex] = parsedData;\n this.dataSource = this.listData;\n if (li.classList.contains(dropDownListClasses.focus)) {\n this.removeFocus();\n }\n if (li.classList.contains(dropDownListClasses.selected)) {\n this.clear();\n }\n }\n }\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n DropDownList.prototype.destroy = function () {\n this.isActive = false;\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n resetIncrementalSearchValues(this.element.id);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate();\n }\n this.hidePopup();\n if (this.popupObj) {\n this.popupObj.hide();\n }\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n }\n if (this.element && !this.element.classList.contains('e-' + this.getModuleName())) {\n return;\n }\n if (this.inputElement) {\n var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',\n 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];\n for (var i = 0; i < attrArray.length; i++) {\n this.inputElement.removeAttribute(attrArray[i]);\n }\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n this.inputElement.classList.remove('e-input');\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.element.style.display = 'block';\n if (this.inputWrapper.container && this.inputWrapper.container.parentElement) {\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n }\n delete this.hiddenElement;\n this.filterInput = null;\n this.keyboardModule = null;\n this.ulElement = null;\n this.list = null;\n this.clearIconElement = null;\n this.popupObj = null;\n this.popupContentElement = null;\n this.rippleFun = null;\n this.selectedLI = null;\n this.liCollections = null;\n this.item = null;\n this.footer = null;\n this.header = null;\n this.previousSelectedLI = null;\n this.valueTempElement = null;\n this.actionData.ulElement = null;\n if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {\n this.inputElement.onchange = null;\n }\n if (this.inputElement && !isNullOrUndefined(this.inputElement.onselect)) {\n this.inputElement.onselect = null;\n }\n Input.destroy({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: this.properties,\n buttons: this.inputWrapper.container.querySelectorAll('.e-input-group-icon')[0]\n }, this.clearButton);\n this.clearButton = null;\n this.inputElement = null;\n this.inputWrapper = null;\n _super.prototype.destroy.call(this);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\n * @returns {Element[]}\n */\n DropDownList.prototype.getItems = function () {\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initialRemoteRender = true;\n }\n this.renderList();\n }\n return this.ulElement ? _super.prototype.getItems.call(this) : [];\n };\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n */\n DropDownList.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Allows you to clear the selected values from the component.\n *\n * @returns {void}\n */\n DropDownList.prototype.clear = function () {\n this.value = null;\n };\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"cssClass\", void 0);\n __decorate$1([\n Property('100%')\n ], DropDownList.prototype, \"width\", void 0);\n __decorate$1([\n Property(true)\n ], DropDownList.prototype, \"enabled\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownList.prototype, \"enablePersistence\", void 0);\n __decorate$1([\n Property('300px')\n ], DropDownList.prototype, \"popupHeight\", void 0);\n __decorate$1([\n Property('100%')\n ], DropDownList.prototype, \"popupWidth\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"placeholder\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"filterBarPlaceholder\", void 0);\n __decorate$1([\n Property({})\n ], DropDownList.prototype, \"htmlAttributes\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"query\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"valueTemplate\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"headerTemplate\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"footerTemplate\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownList.prototype, \"allowFiltering\", void 0);\n __decorate$1([\n Property(true)\n ], DropDownList.prototype, \"isDeviceFullScreen\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownList.prototype, \"readonly\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownList.prototype, \"enableVirtualization\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"text\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"value\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownList.prototype, \"allowObjectBinding\", void 0);\n __decorate$1([\n Property(null)\n ], DropDownList.prototype, \"index\", void 0);\n __decorate$1([\n Property('Never')\n ], DropDownList.prototype, \"floatLabelType\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownList.prototype, \"showClearButton\", void 0);\n __decorate$1([\n Event()\n ], DropDownList.prototype, \"filtering\", void 0);\n __decorate$1([\n Event()\n ], DropDownList.prototype, \"change\", void 0);\n __decorate$1([\n Event()\n ], DropDownList.prototype, \"beforeOpen\", void 0);\n __decorate$1([\n Event()\n ], DropDownList.prototype, \"open\", void 0);\n __decorate$1([\n Event()\n ], DropDownList.prototype, \"close\", void 0);\n __decorate$1([\n Event()\n ], DropDownList.prototype, \"blur\", void 0);\n __decorate$1([\n Event()\n ], DropDownList.prototype, \"focus\", void 0);\n DropDownList = __decorate$1([\n NotifyPropertyChanges\n ], DropDownList);\n return DropDownList;\n}(DropDownBase));\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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};\nvar RTL = 'e-rtl';\nvar DROPDOWNTREE = 'e-ddt';\nvar HIDDENELEMENT = 'e-ddt-hidden';\nvar DROPDOWNICON = 'e-input-group-icon e-ddt-icon e-icons';\nvar SHOW_CHIP = 'e-show-chip';\nvar SHOW_CLEAR = 'e-show-clear';\nvar SHOW_DD_ICON = 'e-show-dd-icon';\nvar CHIP_INPUT = 'e-chip-input';\nvar INPUTFOCUS = 'e-input-focus';\nvar INPUTGROUP = 'e-input-group';\nvar ICONANIMATION = 'e-icon-anim';\nvar CLOSEICON_CLASS = 'e-clear-icon e-icons';\nvar CHIP_WRAPPER = 'e-chips-wrapper';\nvar CHIP_COLLECTION = 'e-chips-collection';\nvar CHIP = 'e-chips';\nvar CHIP_CONTENT = 'e-chipcontent';\nvar CHIP_CLOSE = 'e-chips-close';\nvar HIDEICON = 'e-icon-hide';\nvar DDTHIDEICON = 'e-ddt-icon-hide';\nvar POPUP_CLASS = 'e-ddt e-popup';\nvar PARENTITEM = 'e-list-parent';\nvar CONTENT = 'e-popup-content';\nvar DROPDOWN = 'e-dropdown';\nvar DISABLED = 'e-disabled';\nvar ICONS = 'e-icons';\nvar CHECKALLPARENT = 'e-selectall-parent';\nvar CHECKALLHIDE = 'e-hide-selectall';\nvar BIGGER = 'e-bigger';\nvar SMALL = 'e-small';\nvar ALLTEXT = 'e-all-text';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECK = 'e-check';\nvar CHECKBOXWRAP = 'e-checkbox-wrapper';\nvar FILTERWRAP = 'e-filter-wrap';\nvar DDTICON = 'e-ddt-icon';\nvar FOOTER = 'e-ddt-footer';\nvar HEADER = 'e-ddt-header';\nvar NODATACONTAINER = 'e-ddt-nodata';\nvar NODATA = 'e-no-data';\nvar HEADERTEMPLATE = 'HeaderTemplate';\nvar FOOTERTEMPLATE = 'FooterTemplate';\nvar NORECORDSTEMPLATE = 'NoRecordsTemplate';\nvar ACTIONFAILURETEMPLATE = 'ActionFailureTemplate';\nvar CUSTOMTEMPLATE = 'CustomTemplate';\nvar REMAIN_WRAPPER = 'e-remain';\nvar OVERFLOW_VIEW = 'e-overflow';\nvar SHOW_TEXT = 'e-show-text';\nvar TOTAL_COUNT_WRAPPER = 'e-total-count';\nvar REMAIN_COUNT = 'e-wrap-count';\nvar Fields = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Fields, _super);\n function Fields() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property('child')\n ], Fields.prototype, \"child\", void 0);\n __decorate$2([\n Property([])\n ], Fields.prototype, \"dataSource\", void 0);\n __decorate$2([\n Property('expanded')\n ], Fields.prototype, \"expanded\", void 0);\n __decorate$2([\n Property('hasChildren')\n ], Fields.prototype, \"hasChildren\", void 0);\n __decorate$2([\n Property('htmlAttributes')\n ], Fields.prototype, \"htmlAttributes\", void 0);\n __decorate$2([\n Property('iconCss')\n ], Fields.prototype, \"iconCss\", void 0);\n __decorate$2([\n Property('imageUrl')\n ], Fields.prototype, \"imageUrl\", void 0);\n __decorate$2([\n Property('parentValue')\n ], Fields.prototype, \"parentValue\", void 0);\n __decorate$2([\n Property(null)\n ], Fields.prototype, \"query\", void 0);\n __decorate$2([\n Property('selectable')\n ], Fields.prototype, \"selectable\", void 0);\n __decorate$2([\n Property('selected')\n ], Fields.prototype, \"selected\", void 0);\n __decorate$2([\n Property(null)\n ], Fields.prototype, \"tableName\", void 0);\n __decorate$2([\n Property('text')\n ], Fields.prototype, \"text\", void 0);\n __decorate$2([\n Property('tooltip')\n ], Fields.prototype, \"tooltip\", void 0);\n __decorate$2([\n Property('value')\n ], Fields.prototype, \"value\", void 0);\n return Fields;\n}(ChildProperty));\nvar TreeSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$2(TreeSettings, _super);\n function TreeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property(false)\n ], TreeSettings.prototype, \"autoCheck\", void 0);\n __decorate$2([\n Property(true)\n ], TreeSettings.prototype, \"checkDisabledChildren\", void 0);\n __decorate$2([\n Property('Auto')\n ], TreeSettings.prototype, \"expandOn\", void 0);\n __decorate$2([\n Property(false)\n ], TreeSettings.prototype, \"loadOnDemand\", void 0);\n return TreeSettings;\n}(ChildProperty));\n/**\n * The Dropdown Tree control allows you to select single or multiple values from hierarchical data in a tree-like structure.\n * It has several out-of-the-box features, such as data binding, check boxes, templates, filter,\n * UI customization, accessibility, and preselected values.\n * ```html\n * \n * ```\n * ```typescript\n * let ddtObj: DropDownTree = new DropDownTree();\n * ddtObj.appendTo(\"#tree\");\n * ```\n */\nvar DropDownTree = /** @__PURE__ @class */ (function (_super) {\n __extends$2(DropDownTree, _super);\n function DropDownTree(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.filterTimer = null;\n _this.isFilteredData = false;\n _this.isFilterRestore = false;\n _this.selectedData = [];\n _this.filterDelayTime = 300;\n _this.isClicked = false;\n // Specifies if the checkAll method has been called\n _this.isCheckAllCalled = false;\n _this.isFromFilterChange = false;\n return _this;\n }\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string}\n * @hidden\n */\n DropDownTree.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n DropDownTree.prototype.getLocaleName = function () {\n return 'drop-down-tree';\n };\n /**\n * Initialize the event handler.\n *\n * @returns {void}\n * @private\n */\n DropDownTree.prototype.preRender = function () {\n this.inputFocus = false;\n this.isPopupOpen = false;\n this.isFirstRender = true;\n this.isInitialized = false;\n this.currentText = null;\n this.currentValue = null;\n this.oldValue = null;\n this.removeValue = false;\n this.selectedText = [];\n this.treeItems = [];\n this.dataValue = null;\n this.isNodeSelected = false;\n this.isDynamicChange = false;\n this.clearIconWidth = 0;\n this.headerTemplateId = \"\" + this.element.id + HEADERTEMPLATE;\n this.footerTemplateId = \"\" + this.element.id + FOOTERTEMPLATE;\n this.actionFailureTemplateId = \"\" + this.element.id + ACTIONFAILURETEMPLATE;\n this.noRecordsTemplateId = \"\" + this.element.id + NORECORDSTEMPLATE;\n this.customTemplateId = \"\" + this.element.id + CUSTOMTEMPLATE;\n this.keyConfigs = {\n escape: 'escape',\n altUp: 'alt+uparrow',\n altDown: 'alt+downarrow',\n tab: 'tab',\n shiftTab: 'shift+tab',\n end: 'end',\n enter: 'enter',\n home: 'home',\n moveDown: 'downarrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n ctrlDown: 'ctrl+downarrow',\n ctrlUp: 'ctrl+uparrow',\n ctrlEnter: 'ctrl+enter',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftEnter: 'shift+enter',\n shiftHome: 'shift+home',\n shiftEnd: 'shift+end',\n csDown: 'ctrl+shift+downarrow',\n csUp: 'ctrl+shift+uparrow',\n csEnter: 'ctrl+shift+enter',\n csHome: 'ctrl+shift+home',\n csEnd: 'ctrl+shift+end',\n space: 'space',\n ctrlA: 'ctrl+A'\n };\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n DropDownTree.prototype.render = function () {\n var isTree = select('#' + this.element.id + '_tree', document);\n if (isTree) {\n var popupDiv = select('#' + this.element.id + '_options', document);\n detach(popupDiv ? popupDiv : isTree.parentElement);\n }\n if (this.element.tagName === 'INPUT') {\n this.inputEle = this.element;\n if (isNullOrUndefined(this.inputEle.getAttribute('role'))) {\n this.inputEle.setAttribute('aria-expanded', 'false');\n this.inputEle.setAttribute('role', 'combobox');\n this.inputEle.setAttribute('aria-haspopup', 'tree');\n this.inputEle.setAttribute('aria-controls', this.element.id + '_options');\n }\n if (isNullOrUndefined(this.inputEle.getAttribute('type'))) {\n this.inputEle.setAttribute('type', 'text');\n }\n }\n else {\n if (!isNullOrUndefined(this.element.id)) {\n this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text', id: this.element.id + '_textbox' } });\n }\n else {\n this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });\n }\n this.element.parentElement.insertBefore(this.inputEle, this.element);\n }\n this.inputObj = Input.createInput({\n element: this.inputEle,\n floatLabelType: this.floatLabelType,\n buttons: this.showDropDownIcon ? [DROPDOWNICON] : null,\n properties: {\n readonly: true,\n placeholder: this.placeholder,\n enabled: this.enabled,\n cssClass: this.cssClass,\n enableRtl: this.enableRtl\n }\n }, this.createElement);\n this.inputWrapper = this.inputObj.container;\n if (!this.inputWrapper.classList.contains(INPUTGROUP)) {\n this.inputWrapper.classList.add(INPUTGROUP);\n }\n if (this.showDropDownIcon) {\n this.inputWrapper.classList.add(SHOW_DD_ICON);\n }\n if (this.element.tagName === this.getDirective()) {\n this.element.appendChild(this.inputWrapper);\n }\n this.createHiddenElement();\n this.createClearIcon();\n this.inputWrapper.classList.add(DROPDOWNTREE);\n this.setElementWidth(this.width);\n this.updateDataAttribute();\n this.setHTMLAttributes();\n this.setAttributes();\n this.popupDiv = this.createElement('div', { className: CONTENT });\n this.popupDiv.classList.add(DROPDOWN);\n this.tree = this.createElement('div', { id: this.element.id + '_tree' });\n this.popupDiv.appendChild(this.tree);\n if (!this.destroyPopupOnHide) {\n document.body.appendChild(this.popupDiv);\n }\n this.wireTreeEvents();\n addClass([this.popupDiv], DDTHIDEICON);\n this.renderTree();\n this.isRemoteData = this.fields.dataSource instanceof DataManager;\n if (this.allowMultiSelection || this.showCheckBox) {\n if (this.mode !== 'Delimiter') {\n this.createChip();\n }\n if (!this.wrapText && this.mode !== 'Custom') {\n this.overFlowWrapper = this.createElement('span', { className: OVERFLOW_VIEW + ' ' + HIDEICON });\n this.inputWrapper.insertBefore(this.overFlowWrapper, this.hiddenElement);\n if (this.mode !== 'Box') {\n addClass([this.overFlowWrapper], SHOW_TEXT);\n }\n }\n }\n if (!this.isRemoteData) {\n this.setTreeValue();\n this.setTreeText();\n this.updateHiddenValue();\n this.setSelectedValue();\n if (!this.wrapText) {\n this.updateView();\n }\n }\n this.wireEvents();\n var firstUl = select('.' + PARENTITEM, this.treeObj.element);\n if (firstUl && firstUl.getAttribute('aria-multiselectable')) {\n firstUl.removeAttribute('aria-multiselectable');\n }\n this.oldValue = this.value;\n if (!this.isRemoteData) {\n this.isInitialized = true;\n }\n this.hasTemplate = this.itemTemplate || this.headerTemplate || this.footerTemplate || this.actionFailureTemplate\n || this.noRecordsTemplate || this.customTemplate || this.valueTemplate;\n this.renderComplete();\n };\n DropDownTree.prototype.hideCheckAll = function (flag) {\n var checkAllEle = !isNullOrUndefined(this.popupEle) ? this.popupEle.querySelector('.' + CHECKALLPARENT) : null;\n if (!isNullOrUndefined(checkAllEle)) {\n if (flag && !checkAllEle.classList.contains(CHECKALLHIDE)) {\n addClass([checkAllEle], CHECKALLHIDE);\n }\n else if (!flag && checkAllEle.classList.contains(CHECKALLHIDE)) {\n removeClass([checkAllEle], CHECKALLHIDE);\n }\n }\n };\n DropDownTree.prototype.renderFilter = function () {\n this.filterContainer = this.createElement('div', {\n id: this.element.id + '_filter_wrap',\n className: FILTERWRAP\n });\n var filterInput = this.createElement('input', {\n id: this.element.id + '_filter',\n attrs: { autocomplete: 'off', 'aria-label': this.filterBarPlaceholder }\n });\n this.filterContainer.appendChild(filterInput);\n prepend([this.filterContainer], this.popupEle);\n this.filterObj = new TextBox({\n value: '',\n showClearButton: true,\n placeholder: this.filterBarPlaceholder,\n input: this.filterChangeHandler.bind(this)\n });\n this.filterObj.appendTo('#' + this.element.id + '_filter');\n this.keyboardModule = new KeyboardEvents(this.filterObj.element, {\n keyAction: this.filterKeyAction.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n };\n DropDownTree.prototype.filterKeyAction = function (e) {\n var _this = this;\n var eventArgs = {\n cancel: false,\n event: e\n };\n var focusedElement;\n this.trigger('keyPress', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n switch (e.action) {\n case 'altUp':\n if (_this.isPopupOpen) {\n _this.hidePopup();\n }\n break;\n case 'shiftTab':\n addClass([_this.inputWrapper], [INPUTFOCUS]);\n break;\n case 'moveDown':\n e.preventDefault();\n _this.filterObj.element.blur();\n focusedElement = _this.treeObj.element.querySelector('li');\n if (focusedElement) {\n focusedElement.focus();\n }\n break;\n }\n }\n });\n };\n DropDownTree.prototype.filterChangeHandler = function (args) {\n var _this = this;\n if (!isNullOrUndefined(args.value)) {\n window.clearTimeout(this.filterTimer);\n this.filterTimer = window.setTimeout(function () { _this.filterHandler(args.value, args.event); }, this.filterDelayTime);\n }\n };\n DropDownTree.prototype.isChildObject = function () {\n if (typeof this.treeObj.fields.child === 'object') {\n return true;\n }\n else {\n return false;\n }\n };\n DropDownTree.prototype.filterHandler = function (value, event) {\n var _this = this;\n this.isFromFilterChange = true;\n if (!this.isFilteredData) {\n if (this.isRemoteData) {\n this.treeObj.expandedNodes = [];\n }\n this.treeData = this.treeObj.getTreeData();\n }\n var filterFields = this.cloneFields(this.fields);\n var args = {\n cancel: false,\n preventDefaultAction: false,\n event: event,\n text: value.trim(),\n fields: filterFields\n };\n this.trigger('filtering', args, function (args) {\n if (!args.cancel) {\n var flag = false;\n var fields = void 0;\n _this.isFilteredData = true;\n if (args.text === '') {\n _this.isFilteredData = false;\n _this.isFilterRestore = true;\n fields = _this.cloneFields(_this.fields);\n _this.treeObj.element.classList.remove('e-filtering');\n }\n else if (args.preventDefaultAction) {\n fields = args.fields;\n }\n else {\n if (_this.treeDataType === 1) {\n fields = _this.selfReferencefilter(args.text, args.fields);\n }\n else {\n if (_this.fields.dataSource instanceof DataManager) {\n fields = _this.remoteDataFilter(args.text, args.fields);\n fields.child = _this.fields.child;\n _this.treeObj.fields = _this.getTreeFields(args.fields);\n _this.treeObj.dataBind();\n flag = true;\n }\n else {\n fields = _this.nestedFilter(args.text, args.fields);\n }\n }\n _this.treeObj.element.classList.add('e-filtering');\n }\n _this.hideCheckAll(_this.isFilteredData);\n if (flag) {\n return;\n }\n if (_this.isRemoteData) {\n if (_this.isChildObject()) {\n fields.child = _this.fields.child;\n }\n else {\n fields = args.fields;\n }\n }\n _this.treeObj.fields = _this.getTreeFields(fields);\n _this.treeObj.dataBind();\n if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {\n for (var i = 0; i < _this.treeObj.portals.length; i++) {\n if (_this.portals.indexOf(_this.treeObj.portals[i]) === -1) {\n _this.portals.push(_this.treeObj.portals[i]);\n }\n }\n if (_this.isReact) {\n _this.renderReactTemplates();\n }\n }\n }\n });\n };\n DropDownTree.prototype.remoteDataFilter = function (value, filteredFields) {\n var _this = this;\n filteredFields.dataSource = this.treeData.map(function (item) {\n return _this.remoteChildFilter(value, item);\n }).filter(function (filteredChild) {\n return !isNullOrUndefined(filteredChild);\n });\n return filteredFields;\n };\n DropDownTree.prototype.remoteChildFilter = function (value, node, isChild, isChildFiltering) {\n var children = this.isChildObject() ? node['child'] : node[this.fields.child];\n if (isNullOrUndefined(children)) {\n return (this.isMatchedNode(value, node, isChild, isChildFiltering)) ? node : null;\n }\n var matchedChildren = [];\n for (var i = 0; i < children.length; i++) {\n var filteredChild = this.remoteChildFilter(value, children[i], true, true);\n if (!isNullOrUndefined(filteredChild)) {\n matchedChildren.push(filteredChild);\n }\n }\n var filteredItems = Object.assign({}, node);\n isChildFiltering = false;\n if (matchedChildren.length !== 0) {\n filteredItems.child = matchedChildren;\n }\n else {\n filteredItems.child = null;\n filteredItems = (this.isMatchedNode(value, filteredItems)) ? filteredItems : null;\n }\n return filteredItems;\n };\n DropDownTree.prototype.nestedFilter = function (value, filteredFields) {\n var matchedDataSource = [];\n for (var i = 0; i < this.treeData.length; i++) {\n var filteredChild = this.nestedChildFilter(value, this.treeData[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(filteredChild)) {\n matchedDataSource.push(filteredChild);\n }\n }\n filteredFields.dataSource = matchedDataSource;\n return filteredFields;\n };\n DropDownTree.prototype.nestedChildFilter = function (value, node) {\n var children = node[this.fields.child];\n if (isNullOrUndefined(children)) {\n return (this.isMatchedNode(value, node)) ? node : null;\n }\n else {\n var matchedChildren = [];\n for (var i = 0; i < children.length; i++) {\n var filteredChild = this.nestedChildFilter(value, children[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(filteredChild)) {\n matchedChildren.push(filteredChild);\n }\n }\n var filteredItems = Object.assign({}, node);\n if (matchedChildren.length !== 0) {\n filteredItems[this.fields.child] = matchedChildren;\n return filteredItems;\n }\n else {\n filteredItems[this.fields.child] = null;\n return (this.isMatchedNode(value, filteredItems)) ? filteredItems : null;\n }\n }\n };\n DropDownTree.prototype.selfReferencefilter = function (value, filteredFields) {\n var matchedData = [];\n var matchedDataSource = [];\n for (var i = 0; i < this.treeData.length; i++) {\n if (this.isMatchedNode(value, this.treeData[i])) {\n matchedData.push(this.treeData[i]);\n }\n }\n for (var i = 0; i < matchedData.length; i++) {\n if (matchedDataSource.indexOf(matchedData[i]) === -1) {\n matchedDataSource.push(matchedData[i]);\n var parentId = matchedData[parseInt(i.toString(), 10)][this.fields.parentValue];\n while (!isNullOrUndefined(parentId)) {\n var parent_1 = null;\n for (var j = 0; j < this.treeData.length; j++) {\n var value_1 = this.treeData[parseInt(j.toString(), 10)][this.fields.value];\n if (!isNullOrUndefined(value_1) && (value_1 === parentId)) {\n parent_1 = this.treeData[j];\n break;\n }\n }\n if (!isNullOrUndefined(parent_1) && (matchedDataSource.indexOf(parent_1) === -1)) {\n matchedDataSource.push(parent_1);\n parentId = parent_1[this.fields.parentValue];\n }\n else {\n break;\n }\n }\n }\n }\n filteredFields.dataSource = matchedDataSource;\n return filteredFields;\n };\n DropDownTree.prototype.isMatchedNode = function (value, node, isChild, isChildFiltering) {\n var checkValue;\n var isObjectValue = isChild && isChildFiltering && this.isChildObject();\n checkValue = isObjectValue ? node[this.fields.child.text] : node[this.fields.text];\n if (!checkValue && !isNullOrUndefined(this.fields.child.text)) {\n var tempChild = this.fields.child;\n while (!node[tempChild.text]) {\n tempChild = tempChild.child;\n }\n checkValue = node[tempChild.text];\n }\n if (this.ignoreCase) {\n checkValue = checkValue.toLowerCase();\n value = value.toLowerCase();\n }\n if (this.ignoreAccent) {\n checkValue = DataUtil.ignoreDiacritics(checkValue);\n value = DataUtil.ignoreDiacritics(value);\n }\n if (this.filterType === 'StartsWith') {\n return checkValue.slice(0, value.length) === value;\n }\n else if (this.filterType === 'EndsWith') {\n return checkValue.slice(-value.length) === value;\n }\n else {\n return checkValue.indexOf(value) !== -1;\n }\n };\n /* To wire events for the dropdown tree */\n DropDownTree.prototype.wireEvents = function () {\n EventHandler.add(this.inputWrapper, 'mouseup', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper, 'blur', this.focusOut, this);\n EventHandler.add(this.inputWrapper, 'mousemove', this.mouseIn, this);\n EventHandler.add(this.inputWrapper, 'mouseout', this.onMouseLeave, this);\n EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n var formElement = closest(this.inputWrapper, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n this.keyboardModule = new KeyboardEvents(this.inputWrapper, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n };\n DropDownTree.prototype.wireTreeEvents = function () {\n this.keyboardModule = new KeyboardEvents(this.tree, {\n keyAction: this.treeAction.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n };\n DropDownTree.prototype.wireCheckAllWrapperEvents = function () {\n this.keyboardModule = new KeyboardEvents(this.checkAllParent, {\n keyAction: this.checkAllAction.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n };\n /* To unwire events for the dropdown tree */\n DropDownTree.prototype.unWireEvents = function () {\n EventHandler.remove(this.inputWrapper, 'mouseup', this.dropDownClick);\n EventHandler.remove(this.inputWrapper, 'focus', this.focusIn);\n EventHandler.remove(this.inputWrapper, 'blur', this.focusOut);\n EventHandler.remove(this.inputWrapper, 'mousemove', this.mouseIn);\n EventHandler.remove(this.inputWrapper, 'mouseout', this.onMouseLeave);\n EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);\n EventHandler.remove(window, 'resize', this.windowResize);\n var formElement = closest(this.inputWrapper, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n this.keyboardModule.destroy();\n if (this.showSelectAll && this.checkAllParent) {\n EventHandler.remove(this.checkAllParent, 'mouseup', this.clickHandler);\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n };\n /* Trigger when the dropdown is clicked */\n DropDownTree.prototype.dropDownClick = function (e) {\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isClearButtonClick) {\n this.isClearButtonClick = false;\n return;\n }\n if (this.isPopupOpen) {\n this.hidePopup();\n }\n else {\n this.focusIn(e);\n this.renderPopup();\n }\n this.showOverAllClear();\n };\n DropDownTree.prototype.mouseIn = function () {\n if (this.enabled || !this.readonly) {\n this.showOverAllClear();\n }\n };\n DropDownTree.prototype.onMouseLeave = function () {\n if (!this.inputFocus) {\n addClass([this.overAllClear], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CLEAR);\n }\n };\n DropDownTree.prototype.getDirective = function () {\n return 'EJS-DROPDOWNTREE';\n };\n DropDownTree.prototype.focusOut = function (e) {\n if (!this.enabled || this.readonly || !this.inputFocus) {\n return;\n }\n if ((Browser.isIE || Browser.info.name === 'edge') && (e.target === this.inputWrapper)) {\n return;\n }\n var target = e.relatedTarget;\n if ((target !== this.inputEle) && (isNullOrUndefined(target)) && (e.target !== this.inputWrapper || !this.isPopupOpen)) {\n this.onFocusOut(e);\n }\n };\n DropDownTree.prototype.onFocusOut = function (event) {\n this.inputFocus = false;\n if (this.isPopupOpen) {\n this.hidePopup();\n }\n if (this.isClearButtonClick) {\n this.isClearButtonClick = false;\n }\n if (this.showClearButton) {\n this.clearIconWidth = select('.e-clear-icon', this.inputWrapper).offsetWidth;\n addClass([this.overAllClear], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CLEAR);\n }\n removeClass([this.inputWrapper], [INPUTFOCUS]);\n if ((this.allowMultiSelection || this.showCheckBox)) {\n var isValue = this.value ? (this.value.length ? true : false) : false;\n if (this.mode !== 'Delimiter' && this.mode !== 'Custom') {\n if (this.chipWrapper && (this.mode === 'Default')) {\n addClass([this.chipWrapper], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CHIP);\n removeClass([this.inputEle], CHIP_INPUT);\n }\n }\n if (isValue && this.mode !== 'Custom') {\n this.showOrHideValueTemplate(true);\n }\n if (!this.wrapText && isValue) {\n this.updateView();\n }\n }\n if (this.changeOnBlur) {\n this.triggerChangeEvent(event);\n }\n this.removeValue = false;\n this.oldValue = this.value;\n this.trigger('blur');\n };\n DropDownTree.prototype.updateView = function () {\n if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom' || this.inputFocus) {\n return;\n }\n if (this.mode !== 'Box') {\n addClass([this.inputWrapper, this.overFlowWrapper], SHOW_TEXT);\n }\n else {\n addClass([this.inputWrapper], SHOW_CHIP);\n }\n if (this.value && this.value.length !== 0) {\n if (this.inputWrapper.contains(this.chipWrapper)) {\n addClass([this.chipWrapper], HIDEICON);\n }\n addClass([this.inputEle], CHIP_INPUT);\n this.updateOverFlowView();\n this.ensurePlaceHolder();\n }\n };\n DropDownTree.prototype.triggerChangeEvent = function (event) {\n var isEqual = this.ddtCompareValues(this.oldValue, this.value);\n if ((!isEqual || this.isChipDelete) && !this.removeValue) {\n var eventArgs = {\n e: event,\n oldValue: this.oldValue,\n value: this.value,\n isInteracted: event ? true : false,\n element: this.element\n };\n this.trigger('change', eventArgs);\n this.oldValue = this.value;\n }\n };\n DropDownTree.prototype.ddtCompareValues = function (oldValue, newValue) {\n if (oldValue === null || newValue === null) {\n var isValid = oldValue === null ? ((newValue === oldValue) ? true : false) :\n (oldValue.length === 0 ? (newValue === oldValue) : false);\n return isValid;\n }\n else if (oldValue.length !== newValue.length) {\n return false;\n }\n for (var i = 0; i < oldValue.length; i++) {\n if (oldValue[i] !== newValue[i]) {\n return false;\n }\n }\n return true;\n };\n DropDownTree.prototype.focusIn = function (e) {\n if (!this.enabled || this.readonly || this.inputFocus) {\n return;\n }\n this.showOverAllClear();\n this.inputFocus = true;\n addClass([this.inputWrapper], [INPUTFOCUS]);\n if (this.allowMultiSelection || this.showCheckBox) {\n if (this.mode !== 'Delimiter' && this.inputFocus) {\n if (this.chipWrapper && (this.value && this.value.length !== 0)) {\n removeClass([this.chipWrapper], HIDEICON);\n addClass([this.inputEle], CHIP_INPUT);\n this.showOrHideValueTemplate(false, true);\n }\n addClass([this.inputWrapper], SHOW_CHIP);\n if (this.popupObj) {\n this.popupObj.refreshPosition();\n }\n }\n if (!this.wrapText && this.mode !== 'Custom') {\n if (this.inputWrapper.contains(this.overFlowWrapper)) {\n addClass([this.overFlowWrapper], HIDEICON);\n }\n if (this.mode === 'Delimiter') {\n removeClass([this.inputWrapper], SHOW_CHIP);\n removeClass([this.inputEle], CHIP_INPUT);\n this.showOrHideValueTemplate(true);\n }\n else {\n addClass([this.inputWrapper], SHOW_CHIP);\n }\n removeClass([this.inputWrapper], SHOW_TEXT);\n this.ensurePlaceHolder();\n }\n }\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n };\n DropDownTree.prototype.treeAction = function (e) {\n var _this = this;\n var eventArgs = {\n cancel: false,\n event: e\n };\n this.trigger('keyPress', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n switch (e.action) {\n case 'escape':\n case 'altUp':\n _this.inputWrapper.focus();\n e.preventDefault();\n if (_this.isPopupOpen) {\n _this.hidePopup();\n }\n break;\n case 'tab':\n if (_this.isPopupOpen) {\n _this.hidePopup();\n }\n break;\n case 'enter':\n case 'ctrlEnter':\n case 'shiftEnter':\n case 'csEnter':\n if (!_this.showCheckBox) {\n _this.isValueChange = true;\n _this.keyEventArgs = e;\n }\n break;\n case 'space':\n _this.isValueChange = true;\n _this.keyEventArgs = e;\n break;\n case 'ctrlA':\n if (_this.allowMultiSelection) {\n _this.selectAll(true);\n }\n break;\n }\n }\n else {\n e.stopImmediatePropagation();\n }\n });\n };\n DropDownTree.prototype.keyActionHandler = function (e) {\n var _this = this;\n var eventArgs = {\n cancel: false,\n event: e\n };\n this.trigger('keyPress', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n switch (e.action) {\n case 'escape':\n case 'altUp':\n if (_this.isPopupOpen) {\n _this.hidePopup();\n }\n break;\n case 'shiftTab':\n if (_this.isPopupOpen) {\n _this.hidePopup();\n }\n if (_this.inputFocus) {\n _this.onFocusOut();\n }\n break;\n case 'altDown':\n if (!_this.isPopupOpen) {\n _this.showPopup();\n e.preventDefault();\n }\n break;\n case 'moveDown':\n if (_this.showSelectAll && _this.showCheckBox) {\n _this.checkAllParent.focus();\n }\n break;\n case 'tab':\n if (!_this.isPopupOpen && _this.inputFocus) {\n _this.onFocusOut();\n }\n break;\n }\n }\n });\n };\n DropDownTree.prototype.checkAllAction = function (e) {\n var _this = this;\n var eventArgs = {\n cancel: false,\n event: e\n };\n var focusedElement;\n this.trigger('keyPress', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n switch (e.action) {\n case 'space':\n _this.clickHandler(e);\n break;\n case 'moveDown':\n e.preventDefault();\n focusedElement = _this.treeObj.element.querySelector('li[tabindex=\"0\"]') || _this.treeObj.element.querySelector('li');\n focusedElement.focus();\n addClass([focusedElement], ['e-node-focus']);\n break;\n }\n }\n });\n };\n DropDownTree.prototype.windowResize = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ width: this.setWidth() });\n this.popupObj.refreshPosition();\n }\n };\n DropDownTree.prototype.resetValueHandler = function (e) {\n var formElement = closest(this.inputWrapper, 'form');\n if (formElement && e.target === formElement) {\n this.isDynamicChange = true;\n this.setProperties({ value: null }, true);\n this.resetValue(true);\n this.isDynamicChange = false;\n }\n };\n DropDownTree.prototype.getAriaAttributes = function () {\n return {};\n };\n DropDownTree.prototype.updateOverFlowView = function () {\n this.overFlowWrapper.classList.remove(TOTAL_COUNT_WRAPPER);\n removeClass([this.overFlowWrapper], HIDEICON);\n if (this.value && this.value.length) {\n var data = '';\n var overAllContainer = void 0;\n var temp = void 0;\n var tempData = void 0;\n var tempIndex = 1;\n var wrapperleng = void 0;\n var remaining = void 0;\n var downIconWidth = 0;\n this.overFlowWrapper.innerHTML = '';\n var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };\n this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);\n var remainContent = this.l10n.getConstant('overflowCountTemplate');\n var totalContent = this.l10n.getConstant('totalCountTemplate');\n var remainElement = this.createElement('span', { className: REMAIN_WRAPPER });\n this.overFlowWrapper.appendChild(remainElement);\n remainElement.innerText = remainContent.replace('${count}', this.value.length.toString());\n var remainSize = remainElement.offsetWidth;\n remove(remainElement);\n if (this.showDropDownIcon) {\n downIconWidth = select('.' + DDTICON, this.inputWrapper).offsetWidth;\n }\n if (!isNullOrUndefined(this.value)) {\n if (this.mode !== 'Box') {\n if (this.valueTemplate) {\n remaining = this.updateChipAndValueTemplate(false, downIconWidth, remainSize);\n this.checkRemainingTemplate(remaining, remainElement, remainContent, totalContent);\n this.updateDelimMode();\n return;\n }\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n data += (index === 0) ? '' : this.delimiterChar + ' ';\n temp = this.getOverflowVal(index);\n data += temp;\n temp = this.overFlowWrapper.innerHTML;\n if (this.enableHtmlSanitizer) {\n this.overFlowWrapper.innerText = SanitizeHtmlHelper.sanitize(data);\n }\n else {\n this.overFlowWrapper.innerHTML = data;\n }\n wrapperleng = this.overFlowWrapper.offsetWidth;\n overAllContainer = this.inputWrapper.offsetWidth;\n if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {\n if (tempData !== undefined && tempData !== '') {\n temp = tempData;\n index = tempIndex + 1;\n }\n this.overFlowWrapper.innerHTML = temp;\n remaining = this.value.length - index;\n wrapperleng = this.overFlowWrapper.offsetWidth;\n while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer)\n && wrapperleng !== 0 && this.overFlowWrapper.innerHTML !== '') {\n var textArr = this.overFlowWrapper.innerHTML.split(this.delimiterChar);\n textArr.pop();\n this.overFlowWrapper.innerHTML = textArr.join(this.delimiterChar);\n remaining++;\n wrapperleng = this.overFlowWrapper.offsetWidth;\n }\n break;\n }\n else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {\n tempData = data;\n tempIndex = index;\n }\n else if (index === 0) {\n tempData = '';\n tempIndex = -1;\n }\n }\n }\n else {\n remaining = this.updateChipAndValueTemplate(true, downIconWidth, remainSize);\n }\n }\n this.checkRemainingTemplate(remaining, remainElement, remainContent, totalContent);\n }\n else {\n this.overFlowWrapper.innerHTML = '';\n addClass([this.overFlowWrapper], HIDEICON);\n }\n this.updateDelimMode();\n };\n DropDownTree.prototype.checkRemainingTemplate = function (remaining, remainElement, remainContent, totalContent) {\n if (remaining > 0) {\n this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));\n }\n if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {\n addClass([remainElement], REMAIN_COUNT);\n }\n };\n DropDownTree.prototype.updateChipAndValueTemplate = function (isChip, downIconWidth, remainSize) {\n if (downIconWidth === void 0) { downIconWidth = 0; }\n var currentHtmlContent = '';\n var overAllContainer;\n var previousHtmlContent;\n var previousData;\n var index = 1;\n var wrapperLength;\n var remainingItemsCount;\n addClass([isChip ? this.chipWrapper : this.valueTemplateContainer], HIDEICON);\n var clonedElement = (isChip ? this.chipWrapper :\n this.valueTemplateContainer).cloneNode(true);\n var valueElements = isChip ? selectAll('.' + CHIP, clonedElement) : Array.prototype.slice.call(clonedElement.children);\n for (var i = 0; i < valueElements.length; i++) {\n previousHtmlContent = this.overFlowWrapper.innerHTML;\n this.overFlowWrapper.appendChild(valueElements[i]);\n currentHtmlContent = this.overFlowWrapper.innerHTML;\n wrapperLength = this.overFlowWrapper.offsetWidth;\n overAllContainer = this.inputWrapper.offsetWidth;\n if ((wrapperLength + downIconWidth + this.clearIconWidth) > overAllContainer) {\n if (previousData !== undefined && previousData !== '') {\n previousHtmlContent = previousData;\n i = index + 1;\n }\n this.overFlowWrapper.innerHTML = previousHtmlContent;\n remainingItemsCount = this.value.length - i;\n wrapperLength = this.overFlowWrapper.offsetWidth;\n while (((wrapperLength + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer)\n && wrapperLength !== 0 && this.overFlowWrapper.innerHTML !== '') {\n this.overFlowWrapper.removeChild(this.overFlowWrapper.lastChild);\n remainingItemsCount++;\n wrapperLength = this.overFlowWrapper.offsetWidth;\n }\n break;\n }\n else if ((wrapperLength + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {\n previousData = currentHtmlContent;\n index = i;\n }\n else if (i === 0) {\n previousData = '';\n index = -1;\n }\n }\n return remainingItemsCount;\n };\n DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, remainContent, totalContent) {\n if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&\n this.overFlowWrapper.firstChild.nodeValue === '') {\n this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);\n }\n remainElement.innerHTML = '';\n remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box' || this.valueTemplateContainer)) ?\n remainContent.replace('${count}', remaining.toString()) : totalContent.replace('${count}', remaining.toString());\n if (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) {\n removeClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);\n }\n else {\n addClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);\n removeClass([this.overFlowWrapper], REMAIN_COUNT);\n }\n return remainElement;\n };\n DropDownTree.prototype.getOverflowVal = function (index) {\n var selectedData = this.getSelectedData(this.value[parseInt(index.toString(), 10)]);\n return getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);\n };\n DropDownTree.prototype.updateDelimMode = function () {\n if (this.mode !== 'Box') {\n if (select('.' + REMAIN_WRAPPER, this.overFlowWrapper) && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {\n addClass([this.overFlowWrapper], REMAIN_COUNT);\n addClass([this.overFlowWrapper], SHOW_TEXT);\n }\n else {\n this.overFlowWrapper.classList.remove(REMAIN_COUNT);\n removeClass([this.overFlowWrapper], REMAIN_COUNT);\n }\n }\n else if (select('.' + REMAIN_WRAPPER, this.overFlowWrapper)) {\n this.overFlowWrapper.classList.remove(REMAIN_COUNT);\n }\n };\n DropDownTree.prototype.createHiddenElement = function () {\n if (this.allowMultiSelection || this.showCheckBox) {\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'class': HIDDENELEMENT, 'tabindex': '-1', 'multiple': '', 'aria-label': this.getModuleName() }\n });\n }\n else {\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': HIDDENELEMENT, 'aria-label': this.getModuleName() }\n });\n }\n prepend([this.hiddenElement], this.inputWrapper);\n this.validationAttribute();\n };\n DropDownTree.prototype.createClearIcon = function () {\n this.overAllClear = this.createElement('span', {\n className: CLOSEICON_CLASS\n });\n addClass([this.overAllClear], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CLEAR);\n if (this.showClearButton) {\n this.inputWrapper.insertBefore(this.overAllClear, this.inputObj.buttons[0]);\n }\n };\n DropDownTree.prototype.validationAttribute = function () {\n var name = this.inputEle.getAttribute('name') ? this.inputEle.getAttribute('name') : this.inputEle.getAttribute('id');\n this.hiddenElement.setAttribute('name', name);\n this.inputEle.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n var attr = this.inputEle.getAttribute(attributes[i]);\n if (attr) {\n this.hiddenElement.setAttribute(attributes[i], attr);\n this.inputEle.removeAttribute(attributes[i]);\n }\n }\n };\n DropDownTree.prototype.createChip = function () {\n if (!this.inputWrapper.contains(this.chipWrapper)) {\n this.chipWrapper = this.createElement('span', {\n className: CHIP_WRAPPER\n });\n this.chipCollection = this.createElement('span', {\n className: CHIP_COLLECTION\n });\n this.chipWrapper.appendChild(this.chipCollection);\n this.inputWrapper.insertBefore(this.chipWrapper, this.hiddenElement);\n addClass([this.inputWrapper], SHOW_CHIP);\n var isValid = this.getValidMode();\n if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {\n addClass([this.inputEle], CHIP_INPUT);\n }\n else if (this.value === null || (this.value && this.value.length === 0) || this.checkWrapper) {\n addClass([this.chipWrapper], HIDEICON);\n }\n }\n };\n DropDownTree.prototype.getValidMode = function () {\n if (this.allowMultiSelection || this.showCheckBox) {\n return this.mode === 'Box' ? true : (this.mode === 'Default' && this.inputFocus) ? true : false;\n }\n else {\n return false;\n }\n };\n DropDownTree.prototype.createSelectAllWrapper = function () {\n this.checkAllParent = this.createElement('div', {\n className: CHECKALLPARENT, attrs: { 'tabindex': '0' }\n });\n this.selectAllSpan = this.createElement('span', {\n className: ALLTEXT\n });\n this.selectAllSpan.textContent = '';\n var ele = closest(this.element, '.' + BIGGER);\n var touchClass = isNullOrUndefined(ele) ? '' : SMALL;\n this.checkBoxElement = createCheckBox(this.createElement, true, { cssClass: touchClass });\n this.checkBoxElement.setAttribute('role', 'checkbox');\n this.checkAllParent.appendChild(this.checkBoxElement);\n this.checkAllParent.appendChild(this.selectAllSpan);\n this.setLocale();\n EventHandler.add(this.checkAllParent, 'mouseup', this.clickHandler, this);\n this.wireCheckAllWrapperEvents();\n };\n DropDownTree.prototype.clickHandler = function (e) {\n var target;\n if ((e.currentTarget && e.currentTarget.classList.contains(CHECKALLPARENT))) {\n target = e.currentTarget.firstElementChild.lastElementChild;\n }\n else {\n target = e.target;\n }\n this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNullOrUndefined(this.checkWrapper)) {\n this.isClicked = true;\n var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);\n this.changeState(this.checkWrapper, checkElement.classList.contains(CHECK) ? 'uncheck' : 'check', e);\n this.isClicked = false;\n }\n e.preventDefault();\n };\n DropDownTree.prototype.changeState = function (wrapper, state, e) {\n var ariaState;\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.add(CHECK);\n ariaState = 'true';\n if (!this.isReverseUpdate) {\n this.isCheckAllCalled = true;\n this.treeObj.checkAll();\n if (!this.changeOnBlur) {\n this.triggerChangeEvent(e);\n }\n }\n this.setLocale(true);\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK))) {\n frameSpan.classList.remove(CHECK);\n ariaState = 'false';\n if (!this.isReverseUpdate) {\n this.treeObj.uncheckAll();\n if (!this.changeOnBlur) {\n this.triggerChangeEvent(e);\n }\n }\n this.setLocale(false);\n }\n this.setMultiSelect();\n this.ensurePlaceHolder();\n ariaState = state === 'check' ? 'true' : 'false';\n if (!isNullOrUndefined(ariaState)) {\n wrapper.parentElement.setAttribute('aria-checked', ariaState);\n }\n };\n DropDownTree.prototype.setLocale = function (unSelect) {\n if (!this.selectAllSpan) {\n return;\n }\n if (this.selectAllText !== 'Select All' || this.unSelectAllText !== 'Unselect All') {\n var template = unSelect ? this.unSelectAllText : this.selectAllText;\n this.selectAllSpan.textContent = '';\n var compiledString = compile(template);\n var templateName = unSelect ? 'unSelectAllText' : 'selectAllText';\n for (var _i = 0, _a = compiledString({}, this, templateName, null, !this.isStringTemplate); _i < _a.length; _i++) {\n var item = _a[_i];\n this.selectAllSpan.textContent = item.textContent;\n }\n }\n else {\n this.selectAllSpan.textContent = unSelect ? this.unSelectAllText : this.selectAllText;\n }\n };\n DropDownTree.prototype.setAttributes = function () {\n this.inputEle.setAttribute('tabindex', '-1');\n this.inputEle.setAttribute('aria-label', this.getModuleName());\n var id = this.element.getAttribute('id');\n this.hiddenElement.id = id + '_hidden';\n this.inputWrapper.setAttribute('tabindex', '0');\n this.inputWrapper.setAttribute('aria-label', this.getModuleName());\n attributes(this.inputWrapper, this.getAriaAttributes());\n };\n DropDownTree.prototype.setHTMLAttributes = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n this.inputWrapper.classList.add(this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (htmlAttr === 'disabled') {\n this.setProperties({ enabled: false }, true);\n this.setEnable();\n }\n else if (htmlAttr === 'readonly') {\n this.setProperties({ readonly: true }, true);\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.setAttribute('style', this.htmlAttributes[\"\" + htmlAttr]);\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',\n 'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];\n var validateAttr = ['name', 'required'];\n if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n if (htmlAttr === 'placeholder') {\n Input.setPlaceholder(this.htmlAttributes[\"\" + htmlAttr], this.inputEle);\n }\n else {\n this.inputEle.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n }\n else {\n this.inputEle.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n }\n }\n }\n };\n DropDownTree.prototype.updateDataAttribute = function () {\n var value = this.htmlAttributes;\n var invalidAttr = ['class', 'style', 'id', 'type'];\n var attr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(this.element.attributes[a].name === 'readonly')) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(attr, value, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n };\n DropDownTree.prototype.showOverAllClear = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.overAllClear) {\n var isValue = this.value ? (this.value.length ? true : false) : false;\n if (isValue && this.showClearButton) {\n removeClass([this.overAllClear], HIDEICON);\n addClass([this.inputWrapper], SHOW_CLEAR);\n }\n else {\n addClass([this.overAllClear], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CLEAR);\n }\n }\n };\n DropDownTree.prototype.setTreeValue = function () {\n if (this.value !== null && this.value.length !== 0) {\n var data = void 0;\n if (this.showCheckBox || this.allowMultiSelection) {\n for (var i = 0; i < this.value.length; i++) {\n data = this.treeObj.getTreeData(this.value[i])[0];\n if (isNullOrUndefined(data)) {\n this.value.splice(this.value.indexOf(this.value[i]), 1);\n }\n }\n if (this.value.length !== 0) {\n this.setValidValue();\n }\n }\n else {\n data = this.treeObj.getTreeData(this.value[0])[0];\n if (!isNullOrUndefined(data)) {\n this.setProperties({ text: data[this.fields.text] }, true);\n this.setValidValue();\n }\n else {\n this.setProperties({ value: this.currentValue }, true);\n }\n }\n }\n };\n DropDownTree.prototype.setTreeText = function () {\n if (this.value !== null && !this.isInitialized) {\n return;\n }\n if (this.text !== null) {\n var data = void 0;\n var valArr = [];\n if (this.showCheckBox || this.allowMultiSelection) {\n var textArr = this.text.split(this.delimiterChar);\n for (var i = 0; i < textArr.length; i++) {\n data = this.getItems(textArr[i]);\n if (!isNullOrUndefined(data)) {\n valArr.push(data[this.fields.value].toString());\n }\n }\n if (valArr.length !== 0) {\n this.oldValue = this.value;\n this.setProperties({ value: valArr }, true);\n this.setValidValue();\n }\n else {\n this.setProperties({ text: this.currentText }, true);\n }\n }\n else {\n data = this.getItems(this.text);\n if (!isNullOrUndefined(data)) {\n this.oldValue = this.value;\n this.setProperties({ value: [data[this.fields.value].toString()] }, true);\n this.setValidValue();\n }\n else {\n this.setProperties({ text: this.currentText }, true);\n }\n }\n }\n };\n DropDownTree.prototype.setSelectedValue = function () {\n if (this.value != null) {\n return;\n }\n if (!this.isInitialized) {\n this.oldValue = this.value;\n if (this.treeObj.selectedNodes.length > 0 && !this.showCheckBox) {\n this.setProperties({ value: this.treeObj.selectedNodes }, true);\n if (this.allowMultiSelection) {\n this.updateMode();\n }\n }\n else if (this.showCheckBox && this.treeObj.checkedNodes) {\n if (this.treeObj.checkedNodes.length > 0) {\n this.setProperties({ value: this.treeObj.checkedNodes }, true);\n setValue('selectedNodes', [], this.treeObj);\n this.treeObj.dataBind();\n this.updateMode();\n }\n }\n this.updateSelectedValues();\n this.currentText = this.text;\n this.currentValue = this.value;\n }\n };\n DropDownTree.prototype.setValueTemplate = function () {\n var _this = this;\n if (this.valueTemplate) {\n var compiledString = this.initializeValueTemplate();\n this.getValueTemplateElement(this.value[0], compiledString);\n if (this.hasTemplate && this.portals) {\n if (this.treeObj.portals) {\n this.portals = this.portals.concat(this.treeObj.portals.filter(function (item) {\n return !_this.portals.includes(item);\n }));\n }\n if (this.isReact) {\n this.renderReactTemplates(this.reactCallBack);\n }\n }\n this.showOrHideValueTemplate(true);\n }\n };\n DropDownTree.prototype.getValueTemplateElement = function (value, compiledString) {\n var selectedData = this.getNodeData(value, this.isFilteredData ? this.treeData : this.treeItems);\n var templateElements = compiledString(selectedData, this, 'valueTemplate', this.element.id + \"valueTemplate\", this.isStringTemplate, undefined, this.valueTemplateContainer);\n if (templateElements) {\n templateElements = Array.prototype.slice.call(templateElements);\n append(templateElements, this.valueTemplateContainer);\n }\n };\n DropDownTree.prototype.setValidValue = function () {\n var _this = this;\n if (!this.showCheckBox && !this.allowMultiSelection) {\n Input.setValue(this.text, this.inputEle, this.floatLabelType);\n this.setValueTemplate();\n var id = this.value[0].toString();\n if (this.treeObj.selectedNodes[0] !== id) {\n setValue('selectedNodes', [id], this.treeObj);\n if (this.fields.dataSource instanceof DataManager) {\n this.updateSelectedValues();\n }\n }\n }\n else {\n if (this.showCheckBox) {\n var difference = this.value.length !== this.treeObj.checkedNodes.length || this.value.filter(function (e) {\n return _this.treeObj.checkedNodes.indexOf(e) === -1;\n }).length > 0;\n if (difference || this.treeSettings.autoCheck) {\n this.treeObj.checkedNodes = this.value.slice();\n this.treeObj.dataBind();\n this.setMultiSelect();\n }\n }\n else {\n this.treeObj.selectedNodes = this.value.slice();\n this.selectedText = [];\n this.updateSelectedValues();\n }\n this.treeObj.dataBind();\n }\n this.currentText = this.text;\n this.currentValue = this.value;\n if (!isNullOrUndefined(this.value) && this.value.length > 0 && !isNullOrUndefined(this.currentText)) {\n this.inputWrapper.setAttribute('aria-label', this.currentText.replace(/,/g, ', '));\n }\n if (this.isInitialized) {\n this.triggerChangeEvent();\n }\n };\n DropDownTree.prototype.getItems = function (givenText) {\n var data;\n if (this.treeDataType === 1) {\n for (var i = 0; i < this.treeItems.length; i++) {\n var text = getValue(this.fields.text, this.treeItems[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(this.treeItems[i]) && !isNullOrUndefined(text) && text === givenText) {\n data = this.treeItems[i];\n break;\n }\n }\n }\n else {\n data = this.getNestedItems(this.treeItems, this.fields, givenText);\n }\n return data;\n };\n DropDownTree.prototype.getNestedItems = function (data, field, givenText) {\n var newData;\n for (var i = 0, objlen = data.length; i < objlen; i++) {\n var dataId = getValue(this.fields.text, data[parseInt(i.toString(), 10)]);\n if (data[i] && dataId && dataId.toString() === givenText) {\n return data[i];\n }\n else if (typeof field.child === 'string' && !isNullOrUndefined(getValue(field.child, data[i]))) {\n var childData = getValue(field.child, data[parseInt(i.toString(), 10)]);\n newData = this.getNestedItems(childData, this.getChildType(field), givenText);\n if (newData !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', data[i]))) {\n var child = 'child';\n newData = this.getNestedItems(getValue(child, data[parseInt(i.toString(), 10)]), this.getChildType(field), givenText);\n if (newData !== undefined) {\n break;\n }\n }\n }\n return newData;\n };\n DropDownTree.prototype.getChildType = function (mapper) {\n return (typeof mapper.child === 'string' || isNullOrUndefined(mapper.child)) ? mapper : mapper.child;\n };\n /* To render the treeview */\n DropDownTree.prototype.renderTree = function () {\n this.treeObj = new TreeView({\n fields: this.getTreeFields(this.fields),\n enableRtl: this.enableRtl,\n nodeSelected: this.onNodeSelected.bind(this),\n nodeChecked: this.onNodeChecked.bind(this),\n nodeChecking: this.beforeCheck.bind(this),\n nodeExpanded: this.onNodeExpanded.bind(this),\n actionFailure: this.onActionFailure.bind(this),\n nodeClicked: this.onNodeClicked.bind(this),\n dataBound: this.OnDataBound.bind(this),\n allowMultiSelection: this.allowMultiSelection,\n enableHtmlSanitizer: this.enableHtmlSanitizer,\n showCheckBox: this.showCheckBox,\n autoCheck: this.treeSettings.autoCheck,\n sortOrder: this.sortOrder,\n expandOn: this.treeSettings.expandOn,\n loadOnDemand: this.treeSettings.loadOnDemand,\n nodeSelecting: this.onBeforeSelect.bind(this),\n nodeTemplate: this.itemTemplate,\n checkDisabledChildren: this.treeSettings.checkDisabledChildren\n });\n this.treeObj.root = this.root ? this.root : this;\n this.treeObj.appendTo(this.tree);\n };\n /* To render the popup element */\n DropDownTree.prototype.renderPopup = function () {\n var _this = this;\n if (this.isFilteredData) {\n this.treeObj.element.classList.remove('e-filtering');\n this.filterObj.value = '';\n this.treeObj.fields = this.getTreeFields(this.fields);\n this.isFilterRestore = true;\n this.isFilteredData = false;\n this.hideCheckAll(false);\n }\n var isCancelled = false;\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n addClass([_this.inputWrapper], [ICONANIMATION]);\n if (_this.isFirstRender) {\n _this.popupEle = _this.createElement('div', {\n id: _this.element.id + '_options', className: POPUP_CLASS + ' ' + (_this.cssClass != null ? _this.cssClass : '')\n });\n _this.popupEle.setAttribute('role', 'region');\n _this.popupEle.setAttribute('aria-label', _this.element.id);\n document.body.appendChild(_this.popupEle);\n _this.createPopup(_this.popupEle);\n }\n else {\n _this.popupEle = _this.popupObj.element;\n if (_this.isReact && _this.isFilterRestore) {\n _this.treeObj.refresh();\n _this.isFilteredData = true;\n _this.popupEle.removeChild(_this.filterContainer);\n }\n }\n }\n else {\n isCancelled = true;\n }\n if (_this.isFirstRender && !isCancelled || _this.isFilteredData) {\n _this.isFilteredData = false;\n prepend([_this.popupDiv], _this.popupEle);\n removeClass([_this.popupDiv], DDTHIDEICON);\n if (_this.allowFiltering) {\n _this.renderFilter();\n }\n if (_this.showCheckBox && _this.showSelectAll && (!_this.popupDiv.classList.contains(NODATA))) {\n _this.createSelectAllWrapper();\n _this.popupEle.insertBefore(_this.checkAllParent, _this.popupDiv);\n }\n if (_this.headerTemplate) {\n _this.setHeaderTemplate();\n }\n if (_this.footerTemplate) {\n _this.setFooterTemplate();\n }\n _this.isFirstRender = false;\n if (_this.hasTemplate && _this.portals) {\n if (_this.treeObj.portals) {\n _this.portals = _this.portals.concat(_this.treeObj.portals.filter(function (item) {\n return !_this.portals.includes(item);\n }));\n }\n if (_this.isReact) {\n _this.renderReactTemplates(_this.reactCallBack);\n }\n }\n }\n if (!isCancelled) {\n attributes(_this.inputEle, { 'aria-expanded': 'true' });\n _this.popupObj.show(null, (_this.zIndex === 1000) ? _this.inputEle : null);\n removeClass([_this.popupEle], DDTHIDEICON);\n _this.updatePopupHeight();\n _this.popupObj.refreshPosition();\n if (!(_this.showCheckBox && _this.showSelectAll) && (!_this.popupDiv.classList.contains(NODATA)\n && _this.treeItems.length > 0)) {\n var focusedElement = _this.value != null && _this.text != null ? _this.treeObj.element.querySelector('[data-uid=\"' + _this.value[0] + '\"]') : null;\n if (focusedElement) {\n _this.treeObj.element.querySelector('li').setAttribute('tabindex', '-1');\n focusedElement.setAttribute('tabindex', '0');\n }\n else {\n var oldFocussedNode = _this.treeObj.element.querySelector('.e-node-focus');\n focusedElement = _this.treeObj.element.querySelector('li[tabindex=\"0\"]:not(.e-disable)') ||\n _this.treeObj.element.querySelector('li:not(.e-disable)');\n if (oldFocussedNode && oldFocussedNode !== focusedElement) {\n oldFocussedNode.setAttribute('tabindex', '-1');\n removeClass([oldFocussedNode], 'e-node-focus');\n }\n }\n if (!isNullOrUndefined(focusedElement)) {\n if (!_this.allowFiltering) {\n focusedElement.focus();\n }\n addClass([focusedElement], ['e-node-focus']);\n }\n }\n if (_this.treeObj.checkedNodes.length > 0 && !_this.isFilterRestore) {\n var nodes = _this.treeObj.element.querySelectorAll('li');\n var checkedNodes = _this.treeObj.element.querySelectorAll('li[aria-checked=true]');\n if ((checkedNodes.length === nodes.length || _this.checkSelectAll) && _this.checkBoxElement) {\n var wrap = closest(_this.checkBoxElement, '.' + CHECKBOXWRAP);\n _this.changeState(wrap, 'check');\n _this.checkSelectAll = false;\n }\n }\n if (_this.allowFiltering) {\n removeClass([_this.inputWrapper], [INPUTFOCUS]);\n _this.filterObj.element.focus();\n }\n var eventArgs = { popup: _this.popupObj };\n _this.trigger('open', eventArgs);\n }\n });\n };\n DropDownTree.prototype.reactCallBack = function () {\n if (!isNullOrUndefined(this.popupObj)) {\n this.updatePopupHeight();\n this.popupObj.refreshPosition();\n }\n };\n DropDownTree.prototype.updatePopupHeight = function () {\n if (this.isFirstRender) {\n return;\n }\n var popupHeight = this.getHeight();\n this.popupEle.style.maxHeight = popupHeight;\n if (this.allowFiltering) {\n var height = Math.round(this.filterContainer.getBoundingClientRect().height);\n popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');\n }\n if (this.headerTemplate) {\n var height = Math.round(this.header.getBoundingClientRect().height);\n popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');\n }\n if (this.showCheckBox && this.showSelectAll && (!this.popupDiv.classList.contains(NODATA))) {\n var height = Math.round(this.checkAllParent.getBoundingClientRect().height);\n popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');\n }\n if (this.footerTemplate) {\n var height = Math.round(this.footer.getBoundingClientRect().height);\n popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');\n }\n var border = parseInt(window.getComputedStyle(this.popupEle).borderTopWidth, 10);\n border = border + parseInt(window.getComputedStyle(this.popupEle).borderBottomWidth, 10);\n popupHeight = formatUnit(parseInt(popupHeight, 10) - border + 'px');\n this.popupDiv.style.maxHeight = popupHeight;\n };\n DropDownTree.prototype.createPopup = function (element) {\n var _this = this;\n if (this.isFirstRender) {\n this.popupObj = new Popup(element, {\n width: this.setWidth(),\n targetType: 'relative',\n collision: { X: 'flip', Y: 'flip' },\n relateTo: this.inputWrapper,\n zIndex: this.zIndex,\n enableRtl: this.enableRtl,\n position: { X: 'left', Y: 'bottom' },\n close: function () {\n _this.isPopupOpen = false;\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n },\n targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n }\n };\n /* To calculate the width when change via set model */\n DropDownTree.prototype.setElementWidth = function (inputWidth) {\n var ddElement = this.inputWrapper;\n if (!isNullOrUndefined(inputWidth)) {\n if (typeof inputWidth === 'number') {\n ddElement.style.width = formatUnit(inputWidth);\n }\n else if (typeof inputWidth === 'string') {\n ddElement.style.width = (inputWidth.match(/px|%|em/)) ? (inputWidth) :\n (formatUnit(inputWidth));\n }\n }\n };\n /* To calculate the width of the popup */\n DropDownTree.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n width = (this.inputWrapper.offsetWidth * parseFloat(width) / 100).toString() + 'px';\n }\n else if (typeof this.popupWidth === 'string') {\n width = (this.popupWidth.match(/px|em/)) ? (this.popupWidth) : width;\n }\n return width;\n };\n /* To calculate the height of the popup */\n DropDownTree.prototype.getHeight = function () {\n var height = formatUnit(this.popupHeight);\n if (height.indexOf('%') > -1) {\n // Will set the height of the popup according to the view port height\n height = (document.documentElement.clientHeight * parseFloat(height) / 100).toString() + 'px';\n }\n else if (typeof this.popupHeight === 'string') {\n height = (this.popupHeight.match(/px|em/)) ? (this.popupHeight) : height;\n }\n return height;\n };\n DropDownTree.prototype.onDocumentClick = function (e) {\n var target = e.target;\n var isTree = closest(target, '.' + PARENTITEM);\n var isFilter = closest(target, '.' + FILTERWRAP);\n var isHeader = closest(target, '.' + HEADER);\n var isFooter = closest(target, '.' + FOOTER);\n var isScroller = target.classList.contains(DROPDOWN) ? true :\n (matches$1(target, '.e-ddt .e-popup') || matches$1(target, '.e-ddt .e-treeview'));\n if ((this.isPopupOpen && ((!isNullOrUndefined(this.inputWrapper) &&\n this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter)) ||\n ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||\n (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)\n || target.classList.contains(CHECKBOXFRAME)))))) {\n this.isDocumentClick = false;\n e.preventDefault();\n }\n else if (!isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {\n this.focusOut(e);\n }\n };\n DropDownTree.prototype.onActionFailure = function (e) {\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.popupDiv], NODATA);\n };\n DropDownTree.prototype.OnDataBound = function (args) {\n this.treeItems = args.data;\n if (this.treeItems.length <= 0) {\n this.l10nUpdate();\n addClass([this.popupDiv], NODATA);\n this.hideCheckAll(true);\n }\n else if (this.popupDiv.classList.contains(NODATA) && this.treeItems.length >= 1) {\n removeClass([this.popupDiv], NODATA);\n this.hideCheckAll(false);\n }\n if (!this.isFilteredData) {\n this.treeDataType = this.getTreeDataType(this.treeItems, this.fields);\n }\n if (this.isFirstRender && this.isRemoteData) {\n this.setTreeValue();\n this.setTreeText();\n this.updateHiddenValue();\n this.setSelectedValue();\n if (!this.wrapText) {\n this.updateView();\n }\n this.treeObj.element.focus();\n this.isInitialized = true;\n }\n var eventArgs = { data: args.data };\n this.trigger('dataBound', eventArgs);\n if (this.filterObj === null) {\n this.isFilteredData = false;\n }\n if (this.isFilteredData) {\n this.treeObj.expandAll();\n }\n if (this.isFilterRestore) {\n this.restoreFilterSelection();\n this.isFilterRestore = false;\n }\n };\n DropDownTree.prototype.restoreFilterSelection = function () {\n if (this.showCheckBox) {\n this.treeObj.checkedNodes = this.value ? this.value : [];\n }\n else {\n this.treeObj.selectedNodes = this.value ? this.value : [];\n }\n };\n /* To set cssclass for the dropdowntree */\n DropDownTree.prototype.setCssClass = function (newClass, oldClass) {\n var elements = this.popupObj ? [this.inputWrapper, this.popupObj.element] : [this.inputWrapper];\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass.split(' '));\n }\n if (!isNullOrUndefined(newClass) && newClass !== '') {\n addClass(elements, newClass.split(' '));\n }\n };\n DropDownTree.prototype.setEnableRTL = function (state) {\n if (state) {\n this.inputWrapper.classList.add(RTL);\n }\n else {\n this.inputWrapper.classList.remove(RTL);\n }\n if (this.popupObj) {\n this.popupObj.enableRtl = state;\n this.popupObj.dataBind();\n }\n if (this.treeObj) {\n this.treeObj.enableRtl = state;\n this.treeObj.dataBind();\n }\n };\n /* To set enable property */\n DropDownTree.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputEle);\n if (this.enabled) {\n removeClass([this.inputWrapper], DISABLED);\n this.inputEle.setAttribute('aria-disabled', 'false');\n this.inputWrapper.setAttribute('aria-disabled', 'false');\n }\n else {\n if (this.isPopupOpen) {\n this.hidePopup();\n }\n addClass([this.inputWrapper], DISABLED);\n if (this.inputWrapper && this.inputWrapper.classList.contains(INPUTFOCUS)) {\n removeClass([this.inputWrapper], [INPUTFOCUS]);\n }\n this.inputEle.setAttribute('aria-disabled', 'true');\n this.inputWrapper.setAttribute('aria-disabled', 'true');\n }\n };\n DropDownTree.prototype.cloneFields = function (fields) {\n var clonedField = {\n dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,\n child: this.cloneChildField(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,\n iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes, query: fields.query,\n selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip\n };\n return clonedField;\n };\n DropDownTree.prototype.cloneChildField = function (fields) {\n if (typeof fields === 'string') {\n return fields;\n }\n else {\n var clonedField = {\n dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,\n child: (fields.child ? this.cloneChildField(fields.child) : null), hasChildren: fields.hasChildren,\n expanded: fields.expanded, iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes,\n query: fields.query, selected: fields.selected, selectable: fields.selectable,\n tableName: fields.tableName, tooltip: fields.tooltip\n };\n return clonedField;\n }\n };\n DropDownTree.prototype.getTreeFields = function (fields) {\n var treeFields = {\n dataSource: fields.dataSource, id: fields.value, text: fields.text, parentID: fields.parentValue,\n child: this.getTreeChildren(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,\n iconCss: fields.iconCss, imageUrl: fields.imageUrl, isChecked: fields.selected,\n htmlAttributes: fields.htmlAttributes, query: fields.query, selectable: fields.selectable, selected: fields.selected,\n tableName: fields.tableName, tooltip: fields.tooltip\n };\n return treeFields;\n };\n DropDownTree.prototype.getTreeChildren = function (mapper) {\n if (typeof mapper === 'string') {\n return mapper;\n }\n else if (!isNullOrUndefined(mapper)) {\n mapper = this.getActualProperties(mapper);\n var childFields = mapper;\n if (mapper.value) {\n childFields.id = mapper.value;\n }\n if (mapper.parentValue) {\n childFields.parentID = mapper.parentValue;\n }\n if (mapper.child) {\n childFields.child = this.getTreeChildren(mapper.child);\n }\n if (mapper.selected && this.showCheckBox) {\n childFields.isChecked = mapper.selected;\n }\n return childFields;\n }\n return null;\n };\n DropDownTree.prototype.getTreeDataType = function (ds, field) {\n if (this.fields.dataSource instanceof DataManager) {\n for (var i = 0; i < ds.length; i++) {\n if ((typeof field.child === 'string') && isNullOrUndefined(getValue(field.child, ds[i]))) {\n return 1;\n }\n }\n return 2;\n }\n if (isNullOrUndefined(this.fields.dataSource)) {\n this.fields.dataSource = [];\n }\n for (var i = 0, len = this.fields.dataSource.length; i < len; i++) {\n if ((typeof field.child === 'string') && !isNullOrUndefined(getValue(field.child, this.fields.dataSource[i]))) {\n return 2;\n }\n if (!isNullOrUndefined(getValue(field.parentValue, this.fields.dataSource[i])) ||\n !isNullOrUndefined(getValue(field.hasChildren, this.fields.dataSource[i]))) {\n return 1;\n }\n }\n return 1;\n };\n /* Triggers when the tree fields is changed dynamically */\n DropDownTree.prototype.setFields = function () {\n this.resetValue();\n if (this.hasTemplate) {\n this.updateTemplate();\n }\n this.treeObj.fields = this.getTreeFields(this.fields);\n this.treeObj.dataBind();\n };\n DropDownTree.prototype.getEventArgs = function (args) {\n var checkData = args.data;\n var selectData = args.nodeData;\n var state;\n if (this.showCheckBox) {\n if (args.action === 'check') {\n state = 'select';\n }\n else if (args.action === 'uncheck') {\n state = 'un-select';\n }\n }\n var eventArgs = {\n action: this.showCheckBox ? state : args.action,\n isInteracted: this.isClicked ? true : args.isInteracted,\n item: args.node,\n itemData: this.showCheckBox ? checkData[0] : selectData\n };\n return eventArgs;\n };\n DropDownTree.prototype.onBeforeSelect = function (args) {\n if (args.isInteracted) {\n this.oldValue = this.value ? this.value.slice() : this.value;\n if (this.value === null) {\n this.setProperties({ value: [] }, true);\n }\n }\n };\n DropDownTree.prototype.updateHiddenValue = function () {\n if (this.allowMultiSelection || this.showCheckBox) {\n return;\n }\n if (this.value && this.value.length) {\n this.hiddenElement.innerHTML = '';\n }\n else {\n this.hiddenElement.innerHTML = '';\n }\n };\n /* Triggers when the tree node is selected */\n DropDownTree.prototype.onNodeSelected = function (args) {\n if (this.showCheckBox) {\n return;\n }\n var eventArgs = this.getEventArgs(args);\n this.trigger('select', eventArgs);\n var selectedText;\n if (args.isInteracted) {\n var id = getValue('id', args.nodeData).toString();\n if (!this.allowMultiSelection) {\n this.hiddenElement.innerHTML = '';\n this.setProperties({ value: [id] }, true);\n if (this.itemTemplate) {\n selectedText = getValue('text', this.treeObj.getNode(id));\n }\n else {\n selectedText = getValue('text', args.nodeData).toString();\n }\n Input.setValue(selectedText, this.inputEle, this.floatLabelType);\n this.setProperties({ text: selectedText }, true);\n this.currentText = this.text;\n this.currentValue = this.value;\n this.setValueTemplate();\n if (!isNullOrUndefined(this.value) && this.value.length > 0) {\n this.inputWrapper.setAttribute('aria-label', args.nodeData.text.toString());\n }\n attributes(this.inputWrapper, { 'aria-describedby': this.element.id });\n attributes(this.inputWrapper, { 'aria-activedescendant': id.toString() });\n this.updateHiddenValue();\n this.showOverAllClear();\n this.hidePopup();\n this.isNodeSelected = true;\n }\n else if (this.allowMultiSelection) {\n this.setMultiSelect();\n }\n }\n if (this.isValueChange && !this.changeOnBlur) {\n this.triggerChangeEvent(this.keyEventArgs);\n this.isValueChange = false;\n }\n };\n DropDownTree.prototype.onNodeClicked = function (args) {\n if (!this.changeOnBlur && this.isNodeSelected) {\n this.triggerChangeEvent(args.event);\n this.isNodeSelected = false;\n }\n var target = args.event.target;\n if ((target.classList.contains('e-fullrow') || target.classList.contains('e-list-text')) && this.showCheckBox) {\n this.isClicked = true;\n var getNodeDetails = this.treeObj.getNode(args.node);\n if (getNodeDetails.isChecked === 'true') {\n this.treeObj.uncheckAll([args.node]);\n }\n else {\n this.treeObj.checkAll([args.node]);\n }\n this.isClicked = false;\n this.setMultiSelect();\n this.ensurePlaceHolder();\n }\n if (!this.changeOnBlur && (this.allowMultiSelection || this.showCheckBox)) {\n this.triggerChangeEvent(args.event);\n }\n };\n DropDownTree.prototype.onNodeChecked = function (args) {\n var eventArgs = this.getEventArgs(args);\n this.trigger('select', eventArgs);\n if (this.isFilteredData && args.action === 'uncheck') {\n var id = getValue('id', args.data[0]).toString();\n this.removeSelectedData(id, true);\n }\n if (!this.isChipDelete && args.isInteracted || (!this.isFilteredData && args.action === 'check' && this.isFromFilterChange)) {\n this.setMultiSelect();\n this.ensurePlaceHolder();\n }\n if (this.showSelectAll && this.checkBoxElement) {\n var checkedNodes = this.treeObj.element.querySelectorAll('li[aria-checked=true]');\n var wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);\n if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 || (!isNullOrUndefined(args.data[0]) && args.data[0].isChecked === 'false'))) {\n this.isReverseUpdate = true;\n this.changeState(wrap, 'uncheck');\n this.isReverseUpdate = false;\n }\n else if (wrap && args.action === 'check'\n && checkedNodes.length === this.fields.dataSource.length\n && (args.isInteracted || this.isCheckAllCalled || (!isNullOrUndefined(args.data[0]) && args.data[0].isChecked === 'true'))) {\n this.isReverseUpdate = true;\n this.isCheckAllCalled = false;\n this.changeState(wrap, 'check');\n this.isReverseUpdate = false;\n }\n }\n if (this.isValueChange && !this.changeOnBlur) {\n this.triggerChangeEvent(this.keyEventArgs);\n this.isValueChange = false;\n }\n };\n DropDownTree.prototype.beforeCheck = function (args) {\n if (args.isInteracted) {\n this.oldValue = this.value ? this.value.slice() : this.value;\n }\n };\n DropDownTree.prototype.onNodeExpanded = function () {\n if (this.hasTemplate && this.portals && this.treeObj.portals) {\n for (var i = 0; i < this.treeObj.portals.length; i++) {\n if (this.portals.indexOf(this.treeObj.portals[i]) === -1) {\n this.portals.push(this.treeObj.portals[i]);\n }\n }\n this.renderReactTemplates();\n }\n };\n DropDownTree.prototype.updateClearButton = function (state) {\n if (state) {\n if (!this.inputWrapper.contains(this.overAllClear)) {\n this.inputEle.parentElement.insertBefore(this.overAllClear, this.inputEle.nextSibling);\n }\n else {\n removeClass([this.overAllClear], HIDEICON);\n addClass([this.inputWrapper], SHOW_CLEAR);\n }\n }\n else {\n addClass([this.overAllClear], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CLEAR);\n }\n if ((this.allowMultiSelection || this.showCheckBox) && this.chipWrapper) {\n var chipClose = selectAll('.' + CHIP_CLOSE, this.chipWrapper);\n for (var i = 0; i < chipClose.length; i++) {\n if (!state) {\n addClass([chipClose[i]], HIDEICON);\n }\n else {\n removeClass([chipClose[i]], HIDEICON);\n }\n }\n }\n };\n DropDownTree.prototype.updateDropDownIconState = function (state) {\n var spinIcon = select('.' + DDTICON, this.inputWrapper);\n if (state) {\n if (!spinIcon) {\n Input.appendSpan(DROPDOWNICON, this.inputWrapper, this.createElement);\n }\n else {\n removeClass([spinIcon], HIDEICON);\n }\n addClass([this.inputWrapper], SHOW_DD_ICON);\n }\n else {\n addClass([spinIcon], HIDEICON);\n removeClass([this.inputWrapper], SHOW_DD_ICON);\n }\n };\n DropDownTree.prototype.updateMode = function () {\n if (this.mode === 'Custom') {\n return;\n }\n if (this.mode !== 'Delimiter') {\n if (!this.inputWrapper.contains(this.chipWrapper)) {\n this.createChip();\n }\n var isValid = this.getValidMode();\n if (this.chipWrapper.classList.contains(HIDEICON) && isValid) {\n removeClass([this.chipWrapper], HIDEICON);\n this.showOrHideValueTemplate(false, true);\n addClass([this.inputWrapper], SHOW_CHIP);\n }\n else if (!isValid) {\n addClass([this.chipWrapper], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CHIP);\n this.showOrHideValueTemplate(true);\n }\n var isValue = this.value !== null ? (this.value.length !== 0 ? true : false) : false;\n if (isValid && isValue) {\n addClass([this.inputEle], CHIP_INPUT);\n }\n else {\n removeClass([this.inputEle], CHIP_INPUT);\n }\n }\n else if (this.inputEle.classList.contains(CHIP_INPUT)) {\n removeClass([this.inputEle], CHIP_INPUT);\n if (this.chipWrapper) {\n addClass([this.chipWrapper], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CHIP);\n this.showOrHideValueTemplate(true);\n }\n }\n };\n DropDownTree.prototype.ensurePlaceHolder = function () {\n if (isNullOrUndefined(this.value) || (this.value && this.value.length === 0)) {\n removeClass([this.inputEle], CHIP_INPUT);\n if (this.chipWrapper) {\n addClass([this.chipWrapper], HIDEICON);\n this.showOrHideValueTemplate(true);\n }\n }\n };\n DropDownTree.prototype.ensureClearIconPosition = function (floatLabelType) {\n if (floatLabelType !== 'Never') {\n this.inputWrapper.insertBefore(this.overAllClear, this.inputObj.buttons[0]);\n }\n };\n DropDownTree.prototype.setMultiSelectValue = function (newValues) {\n var _this = this;\n if (!this.isFilteredData) {\n this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length === 0 ? this.value : newValues }, true);\n this.isFromFilterChange = false;\n if (newValues && newValues.length !== 0 && !this.showCheckBox &&\n !this.ddtCompareValues(this.treeObj.selectedNodes, this.value.slice())) {\n this.treeObj.selectedNodes = this.value.slice();\n this.treeObj.dataBind();\n }\n }\n else {\n var selectedValues = isNullOrUndefined(this.value) ? [] : this.value;\n selectedValues = selectedValues.filter(function (selectedValue) {\n var nodeData = _this.treeObj.getTreeData(selectedValue);\n if (Array.isArray(nodeData)) {\n return nodeData.every(function (nodeSelectedData) { return nodeSelectedData.selected; });\n }\n return true;\n });\n for (var i = 0; i < newValues.length; i++) {\n if (isNullOrUndefined(this.value) || this.value.indexOf(newValues[i]) === -1) {\n selectedValues.push(newValues[i]);\n }\n }\n this.setProperties({ value: selectedValues }, true);\n }\n };\n DropDownTree.prototype.setMultiSelect = function () {\n if (this.showCheckBox && !this.isDynamicChange) {\n this.setMultiSelectValue(this.treeObj.checkedNodes.slice());\n }\n else {\n var ddtValue = this.allowMultiSelection ? (this.showCheckBox ? this.treeObj.checkedNodes\n : this.treeObj.selectedNodes) : (this.value ? (this.showCheckBox ? this.value : [this.value[0]]) : null);\n this.setMultiSelectValue(ddtValue);\n if (this.showCheckBox && this.value !== null) {\n this.treeObj.checkedNodes = this.value;\n this.treeObj.dataBind();\n }\n }\n this.selectedText = [];\n var checkSelection = this.allowMultiSelection ? true : (this.showCheckBox ? true : false);\n if (this.inputWrapper.contains(this.chipWrapper) && !checkSelection) {\n removeClass([this.inputEle], CHIP_INPUT);\n detach(this.chipWrapper);\n }\n var isValid = this.getValidMode();\n if (isValid && this.value !== null) {\n addClass([this.inputEle], CHIP_INPUT);\n if (this.chipWrapper) {\n removeClass([this.chipWrapper], HIDEICON);\n this.showOrHideValueTemplate(false, true);\n }\n }\n var isValue = this.value ? (this.value.length ? true : false) : false;\n if (this.chipWrapper && (this.mode === 'Box' && !isValue)) {\n addClass([this.chipWrapper], HIDEICON);\n removeClass([this.inputEle], CHIP_INPUT);\n this.showOrHideValueTemplate(true);\n }\n this.updateSelectedValues();\n };\n DropDownTree.prototype.getSelectedData = function (value) {\n var data = null;\n if (this.isFilteredData) {\n for (var i = 0; i < this.selectedData.length; i++) {\n if (getValue(this.treeSettings.loadOnDemand ? this.fields.value : 'id', this.selectedData[i]).toString() === value) {\n data = this.selectedData[i];\n break;\n }\n }\n }\n if (isNullOrUndefined(data)) {\n if (this.treeSettings.loadOnDemand) {\n data = this.getNodeData(value, this.treeItems);\n }\n else {\n data = this.treeObj.getNode(value);\n }\n if (!isNullOrUndefined(data)) {\n this.selectedData.push(data);\n }\n }\n return data;\n };\n DropDownTree.prototype.getNodeData = function (id, dataSource) {\n var childItems;\n if (isNullOrUndefined(id)) {\n return childItems;\n }\n else if (this.treeDataType === 1) {\n for (var i = 0, objlen = dataSource.length; i < objlen; i++) {\n var dataId = getValue(this.fields.value, dataSource[i]);\n if (!isNullOrUndefined(dataSource[i]) && !isNullOrUndefined(dataId) && dataId.toString() === id) {\n return dataSource[i];\n }\n }\n }\n else {\n return this.getChildNodeData(dataSource, this.fields, id);\n }\n return childItems;\n };\n DropDownTree.prototype.getChildNodeData = function (obj, mapper, id) {\n var newChildItems;\n if (isNullOrUndefined(obj)) {\n return newChildItems;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataValue = getValue(mapper.value, obj[i]);\n if (obj[i] && dataValue && dataValue.toString() === id) {\n return obj[i];\n }\n else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[i]))) {\n var childNodeData = getValue(mapper.child, obj[i]);\n newChildItems = this.getChildNodeData(childNodeData, this.getChildMapperFields(mapper), id);\n if (newChildItems !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', obj[i]))) {\n var child = 'child';\n newChildItems = this.getChildNodeData(getValue(child, obj[i]), this.getChildMapperFields(mapper), id);\n if (newChildItems !== undefined) {\n break;\n }\n }\n }\n return newChildItems;\n };\n DropDownTree.prototype.getChildMapperFields = function (mapper) {\n return (typeof mapper.child === 'string' || isNullOrUndefined(mapper.child)) ? mapper : mapper.child;\n };\n DropDownTree.prototype.removeSelectedData = function (value, muteOnChange) {\n var selectedValues = isNullOrUndefined(this.value) ? [] : this.value.slice();\n selectedValues.splice(selectedValues.indexOf(value), 1);\n this.setProperties({ value: selectedValues }, muteOnChange);\n for (var i = 0; i < this.selectedData.length; i++) {\n if (getValue(this.treeSettings.loadOnDemand ? this.fields.value : 'id', this.selectedData[i]).toString() === value) {\n this.selectedData.splice(i, 1);\n break;\n }\n }\n };\n DropDownTree.prototype.initializeValueTemplate = function () {\n if (!this.valueTemplate) {\n return null;\n }\n if (this.valueTemplateContainer) {\n while (this.valueTemplateContainer.firstChild) {\n this.valueTemplateContainer.removeChild(this.valueTemplateContainer.firstChild);\n }\n }\n else {\n this.valueTemplateContainer = this.createElement('span', { className: OVERFLOW_VIEW + ' ' + SHOW_TEXT + ' ' + 'e-input-value' + ' ' + HIDEICON });\n }\n this.inputWrapper.insertBefore(this.valueTemplateContainer, this.inputEle);\n return this.templateComplier(this.valueTemplate);\n };\n DropDownTree.prototype.showOrHideValueTemplate = function (show, showChip) {\n if (showChip === void 0) { showChip = false; }\n if (!this.valueTemplateContainer || this.mode === 'Box') {\n return;\n }\n if (show) {\n removeClass([this.valueTemplateContainer], HIDEICON);\n addClass([this.inputWrapper], SHOW_CHIP);\n addClass([this.inputEle], CHIP_INPUT);\n }\n else {\n addClass([this.valueTemplateContainer], HIDEICON);\n if (!showChip) {\n removeClass([this.inputWrapper], SHOW_CHIP);\n removeClass([this.inputEle], CHIP_INPUT);\n }\n }\n };\n DropDownTree.prototype.updateSelectedValues = function () {\n var _this = this;\n this.dataValue = '';\n var temp;\n var text;\n var textValue = '';\n var selectedData;\n this.hiddenElement.innerHTML = '';\n var hiddenInputValue = '';\n if ((!this.isChipDelete || this.treeSettings.autoCheck) && (this.inputWrapper.contains(this.chipWrapper))) {\n this.chipCollection.innerHTML = '';\n }\n if (!this.isFilteredData) {\n this.selectedData = [];\n }\n if (!isNullOrUndefined(this.value)) {\n var compiledString = this.initializeValueTemplate();\n for (var i = 0, len = this.value.length; i < len; i++) {\n selectedData = this.getSelectedData(this.value[i]);\n text = getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);\n this.selectedText.push(text);\n temp = this.selectedText[this.selectedText.length - 1];\n if (this.selectedText.length > 1) {\n this.dataValue += (this.delimiterChar + ' ' + temp);\n textValue += (',' + temp);\n }\n else {\n this.dataValue += temp;\n textValue += temp;\n }\n if (this.mode !== 'Custom' && this.mode !== 'Delimiter' && (!this.isChipDelete || this.treeSettings.autoCheck) &&\n (this.allowMultiSelection || this.showCheckBox)) {\n this.setChipValues(temp, this.value[i]);\n }\n hiddenInputValue += '';\n if (this.valueTemplate) {\n this.getValueTemplateElement(this.value[i], compiledString);\n }\n }\n if (this.hasTemplate && this.portals) {\n if (this.treeObj.portals) {\n this.portals = this.portals.concat(this.treeObj.portals.filter(function (item) {\n return !_this.portals.includes(item);\n }));\n }\n if (this.isReact) {\n this.renderReactTemplates(this.reactCallBack);\n }\n }\n if (this.selectedText.length >= 1) {\n this.setProperties({ text: textValue }, true);\n }\n this.hiddenElement.innerHTML = hiddenInputValue;\n if (this.mode === 'Custom' && (this.allowMultiSelection || this.showCheckBox)) {\n this.setTagValues();\n }\n }\n var isValid = this.getValidMode();\n if (this.mode !== 'Custom' && this.mode !== 'Box' && (this.allowMultiSelection || this.showCheckBox) && !isValid) {\n if (this.chipWrapper) {\n addClass([this.chipWrapper], HIDEICON);\n removeClass([this.inputWrapper], SHOW_CHIP);\n }\n this.showOrHideValueTemplate(true);\n }\n Input.setValue(this.dataValue, this.inputEle, this.floatLabelType);\n if (textValue === '') {\n this.setProperties({ text: null }, true);\n }\n else {\n this.setProperties({ text: textValue }, true);\n }\n if (this.showClearButton && this.inputFocus) {\n this.showOverAllClear();\n }\n if ((this.allowMultiSelection || this.showCheckBox) && this.popupObj) {\n this.popupObj.refreshPosition();\n }\n this.currentText = this.text;\n this.currentValue = this.value;\n if (!isNullOrUndefined(this.value) && this.value.length > 0 && !isNullOrUndefined(this.currentText)) {\n this.inputWrapper.setAttribute('aria-label', this.currentText.replace(/,/g, ', '));\n }\n else {\n this.inputWrapper.setAttribute('aria-label', this.getModuleName());\n }\n };\n DropDownTree.prototype.setChipValues = function (text, value) {\n if (!this.inputWrapper.contains(this.chipWrapper)) {\n this.createChip();\n }\n var chip = this.createElement('span', {\n className: CHIP,\n attrs: { 'data-value': value }\n });\n var chipContent = this.createElement('span', { className: CHIP_CONTENT });\n var chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });\n if (this.enableHtmlSanitizer) {\n chipContent.innerText = SanitizeHtmlHelper.sanitize(text);\n }\n else {\n chipContent.innerHTML = text;\n }\n chip.appendChild(chipContent);\n this.chipCollection.appendChild(chip);\n if (this.showClearButton) {\n chip.appendChild(chipClose);\n EventHandler.add(chipClose, 'mousedown', this.removeChip, this);\n }\n };\n DropDownTree.prototype.setTagValues = function () {\n if (this.value === null || this.text == null) {\n return;\n }\n if (!this.inputWrapper.contains(this.chipWrapper)) {\n this.createChip();\n }\n if (!this.inputWrapper.classList.contains(SHOW_CHIP)) {\n addClass([this.inputWrapper], SHOW_CHIP);\n }\n var chip = this.createElement('span', {\n className: CHIP\n });\n if (!this.inputEle.classList.contains(CHIP_INPUT)) {\n addClass([this.inputEle], CHIP_INPUT);\n }\n if (this.chipWrapper.classList.contains(HIDEICON)) {\n removeClass([this.chipWrapper], HIDEICON);\n this.showOrHideValueTemplate(false, true);\n }\n var chipContent = this.createElement('span', { className: CHIP_CONTENT });\n var template = this.customTemplate;\n var templateId = this.customTemplateId;\n var templatestring = 'customTemplate';\n var compiledString = this.templateComplier(template);\n var tempArr = compiledString({ 'value': this.value, 'text': this.text }, this, templatestring, templateId, this.isStringTemplate, undefined, chipContent);\n if (tempArr) {\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, chipContent);\n }\n chip.appendChild(chipContent);\n this.chipCollection.appendChild(chip);\n };\n DropDownTree.prototype.setSelectAllWrapper = function (state) {\n if (this.isFirstRender) {\n return;\n }\n if (state && !this.popupEle.contains(this.checkAllParent) && this.showCheckBox) {\n this.createSelectAllWrapper();\n this.popupEle.insertBefore(this.checkAllParent, this.popupDiv);\n }\n else if (this.popupEle.contains(this.checkAllParent)) {\n detach(this.checkAllParent);\n this.checkAllParent = null;\n }\n };\n DropDownTree.prototype.setHeaderTemplate = function () {\n if (this.header) {\n this.header.innerHTML = '';\n }\n else {\n this.header = this.createElement('div');\n addClass([this.header], HEADER);\n }\n var compiledString = this.templateComplier(this.headerTemplate);\n var tempArr = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, undefined, this.header);\n if (tempArr) {\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, this.header);\n }\n this.popupEle.insertBefore(this.header, this.checkAllParent ? this.checkAllParent : this.popupDiv);\n };\n DropDownTree.prototype.templateComplier = function (template) {\n if (template) {\n try {\n if (typeof template !== 'function' && document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n else {\n return compile(template);\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n return compile(template);\n };\n DropDownTree.prototype.setFooterTemplate = function () {\n if (this.footer) {\n if (this.isReact && typeof this.footerTemplate === 'function') {\n this.clearTemplate(['footerTemplate']);\n }\n else {\n this.footer.innerHTML = '';\n }\n }\n else {\n this.footer = this.createElement('div');\n addClass([this.footer], FOOTER);\n }\n var compiledString = this.templateComplier(this.footerTemplate);\n var tempArr = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, undefined, this.footer);\n if (tempArr) {\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, this.footer);\n }\n append([this.footer], this.popupEle);\n };\n DropDownTree.prototype.clearAll = function (e) {\n if (!this.enabled || this.readonly) {\n return;\n }\n this.resetValue();\n this.showOverAllClear();\n if ((this.allowMultiSelection || this.showCheckBox)) {\n if (this.popupObj) {\n this.popupObj.refreshPosition();\n }\n if (!this.wrapText) {\n this.updateOverflowWrapper(true);\n }\n }\n if (e) {\n this.isClearButtonClick = true;\n }\n if (!this.changeOnBlur) {\n this.triggerChangeEvent(e);\n }\n };\n DropDownTree.prototype.removeChip = function (e) {\n if (!this.enabled || this.readonly) {\n return;\n }\n var element = e.target.parentElement;\n var value = element.getAttribute('data-value');\n if (this.chipCollection) {\n if (element) {\n remove(element);\n }\n }\n this.isChipDelete = true;\n this.isClearButtonClick = true;\n this.removeSelectedData(value, true);\n this.selectedText = [];\n if (this.allowMultiSelection) {\n this.treeObj.selectedNodes = this.value.slice();\n this.updateSelectedValues();\n }\n if (this.showCheckBox) {\n this.treeObj.uncheckAll([value]);\n this.clearCheckAll();\n this.setMultiSelect();\n }\n this.triggerChangeEvent(e);\n this.isChipDelete = false;\n this.ensurePlaceHolder();\n };\n DropDownTree.prototype.resetValue = function (isDynamicChange) {\n if (Array.isArray(this.value) && this.value.length === 0 && this.text == null) {\n return;\n }\n Input.setValue(null, this.inputEle, this.floatLabelType);\n if (!isDynamicChange) {\n this.oldValue = this.value;\n this.setProperties({ value: [] }, true);\n this.showOrHideValueTemplate(false);\n }\n if (isNullOrUndefined(this.value) || this.value.length === 0) {\n this.inputWrapper.setAttribute('aria-label', this.getModuleName());\n }\n this.dataValue = null;\n this.setProperties({ text: null }, true);\n this.selectedData = [];\n setValue('selectedNodes', [], this.treeObj);\n this.hiddenElement.innerHTML = '';\n if (this.showCheckBox) {\n this.treeObj.uncheckAll();\n this.setMultiSelect();\n this.clearCheckAll();\n }\n if (this.oldValue === null && !isDynamicChange) {\n this.removeValue = true;\n }\n else if (isDynamicChange) {\n this.triggerChangeEvent();\n }\n if ((this.allowMultiSelection || this.showCheckBox) && this.chipWrapper) {\n this.chipCollection.innerHTML = '';\n if (!this.wrapText) {\n this.updateOverflowWrapper(true);\n }\n this.ensurePlaceHolder();\n }\n };\n DropDownTree.prototype.clearCheckAll = function () {\n if (this.showSelectAll && this.value && this.value.length === 0) {\n this.setLocale(false);\n }\n };\n DropDownTree.prototype.selectAllItems = function (state) {\n if (this.showCheckBox) {\n if (state) {\n this.isCheckAllCalled = true;\n this.treeObj.checkAll();\n }\n else {\n this.treeObj.uncheckAll();\n }\n this.checkSelectAll = state;\n }\n else if (this.allowMultiSelection) {\n if (!state) {\n this.treeObj.selectedNodes = [];\n }\n else {\n var li = selectAll('li', this.treeObj.element);\n var id = void 0;\n var arr = [];\n for (var i = 0; i < li.length; i++) {\n id = li[i].getAttribute('data-uid').toString();\n arr.push(id);\n }\n this.treeObj.selectedNodes = arr;\n }\n }\n this.updateMode();\n this.setMultiSelect();\n if (!this.wrapText) {\n if (state) {\n this.updateView();\n }\n else {\n this.updateOverflowWrapper(true);\n }\n }\n };\n DropDownTree.prototype.updateTreeSettings = function (prop) {\n if (prop === 'autoCheck') {\n this.treeObj.autoCheck = this.treeSettings.autoCheck;\n }\n else if (prop === 'loadOnDemand') {\n this.treeObj.loadOnDemand = this.treeSettings.loadOnDemand;\n }\n else if (prop === 'expandOn') {\n this.treeObj.expandOn = this.treeSettings.expandOn;\n this.treeObj.dataBind();\n return;\n }\n else if (prop === 'checkDisabledChildren') {\n this.treeObj.checkDisabledChildren = this.treeSettings.checkDisabledChildren;\n }\n this.treeObj.dataBind();\n this.setMultiSelect();\n this.updateValue(this.value);\n };\n DropDownTree.prototype.updateCheckBoxState = function (checkBox) {\n if (this.hasTemplate) {\n this.updateTemplate();\n }\n if (!this.wrapText) {\n this.updateOverflowWrapper(false);\n }\n this.treeObj.showCheckBox = checkBox;\n this.treeObj.dataBind();\n this.isDynamicChange = true;\n this.setSelectAllWrapper(this.showSelectAll);\n if (this.showSelectAll) {\n this.setLocale();\n }\n if (this.showCheckBox) {\n this.updateMode();\n }\n this.setMultiSelect();\n this.isDynamicChange = false;\n };\n DropDownTree.prototype.updateTemplate = function () {\n if (this.popupObj) {\n this.clearTemplate();\n this.portals = [];\n this.popupObj.destroy();\n if (this.isPopupOpen) {\n this.hidePopup();\n this.isFirstRender = true;\n this.renderPopup();\n }\n else {\n this.isFirstRender = true;\n }\n }\n };\n DropDownTree.prototype.l10nUpdate = function (actionFailure) {\n if (this.noRecord) {\n this.noRecord.innerHTML = '';\n }\n else {\n this.noRecord = this.createElement('div');\n }\n if (this.noRecordsTemplate !== 'No Records Found' || this.actionFailureTemplate !== 'The Request Failed') {\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;\n var templatestring = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';\n var compiledString = this.templateComplier(template);\n var tempArr = compiledString({}, this, templatestring, templateId, this.isStringTemplate, undefined, this.noRecord);\n if (tempArr) {\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, this.noRecord);\n }\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };\n this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);\n this.noRecord.innerHTML = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n }\n addClass([this.noRecord], NODATACONTAINER);\n prepend([this.noRecord], this.popupDiv);\n if (this.treeObj) {\n this.treeObj.element.removeAttribute('aria-activedescendant');\n }\n };\n DropDownTree.prototype.updateRecordTemplate = function (action) {\n if (this.treeItems && this.treeItems.length <= 0) {\n this.l10nUpdate(action);\n if (this.hasTemplate) {\n this.updateTemplate();\n }\n }\n };\n DropDownTree.prototype.updateOverflowWrapper = function (state) {\n if (!state) {\n if (!this.inputWrapper.contains(this.overFlowWrapper)) {\n this.overFlowWrapper = this.createElement('span', { className: OVERFLOW_VIEW + ' ' + HIDEICON });\n this.inputWrapper.insertBefore(this.overFlowWrapper, this.hiddenElement);\n }\n }\n else if (this.inputWrapper.contains(this.overFlowWrapper) && state) {\n this.overFlowWrapper.innerHTML = '';\n }\n };\n DropDownTree.prototype.updateMultiSelection = function (state) {\n if (!this.wrapText) {\n this.updateOverflowWrapper(false);\n }\n this.treeObj.allowMultiSelection = state;\n this.treeObj.dataBind();\n this.updateOption();\n if (this.allowMultiSelection) {\n this.updateMode();\n }\n this.setMultiSelect();\n };\n DropDownTree.prototype.updateAllowFiltering = function (state) {\n if (!this.isFirstRender) {\n if (state) {\n this.renderFilter();\n }\n else {\n this.destroyFilter();\n }\n }\n };\n DropDownTree.prototype.updateFilterPlaceHolder = function () {\n if (this.filterObj) {\n this.filterObj.placeholder = this.filterBarPlaceholder;\n this.filterObj.element.setAttribute('aria-label', this.filterBarPlaceholder);\n }\n };\n DropDownTree.prototype.updateValue = function (value) {\n this.isDynamicChange = true;\n if (isNullOrUndefined(value) || value.length === 0) {\n this.resetValue(true);\n }\n else {\n this.setTreeValue();\n if ((this.allowMultiSelection || this.showCheckBox) && !this.wrapText) {\n this.updateOverflowWrapper(false);\n this.updateView();\n }\n }\n this.updateHiddenValue();\n this.isDynamicChange = false;\n };\n DropDownTree.prototype.updateText = function (text) {\n if (isNullOrUndefined(text)) {\n this.resetValue();\n }\n else {\n this.setTreeText();\n if ((this.allowMultiSelection || this.showCheckBox) && !this.wrapText) {\n this.updateOverflowWrapper(false);\n this.updateView();\n }\n }\n this.updateHiddenValue();\n };\n DropDownTree.prototype.updateModelMode = function () {\n var validMode = this.allowMultiSelection ? true : (this.showCheckBox ? true : false);\n if (!validMode) {\n return;\n }\n if (!this.wrapText) {\n var overFlow = select('.e-overflow:not(.e-input-value)', this.inputWrapper);\n if (overFlow) {\n overFlow.innerHTML = '';\n }\n }\n this.updateMode();\n this.setMultiSelect();\n if (!this.wrapText && (this.value && this.value.length !== 0)) {\n this.updateOverFlowView();\n addClass([this.inputEle], CHIP_INPUT);\n if (this.mode === 'Box') {\n removeClass([this.overFlowWrapper, this.inputWrapper], SHOW_TEXT);\n }\n else {\n addClass([this.overFlowWrapper, this.inputWrapper], SHOW_TEXT);\n }\n }\n };\n DropDownTree.prototype.updateOption = function () {\n if (!this.hiddenElement.hasAttribute('multiple') && (this.allowMultiSelection || this.showCheckBox)) {\n this.hiddenElement.setAttribute('multiple', '');\n }\n else if (this.hiddenElement.hasAttribute('multiple') && (!this.allowMultiSelection && !this.showCheckBox)) {\n this.hiddenElement.removeAttribute('multiple');\n }\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {DropDownTreeModel} newProp - specifies the newProp value.\n * @param {DropDownTreeModel} oldProp - specifies the newProp value.\n * @returns {void}\n * @private\n */\n DropDownTree.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 'width':\n this.setElementWidth(newProp.width);\n if (this.popupObj) {\n this.popupObj.element.style.width = this.setWidth();\n }\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputEle);\n break;\n case 'cssClass':\n this.setCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRTL(this.enableRtl);\n break;\n case 'fields':\n this.setFields();\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.inputEle);\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'floatLabelType':\n Input.removeFloating(this.inputObj);\n Input.addFloating(this.inputEle, newProp.floatLabelType, this.placeholder, this.createElement);\n this.ensureClearIconPosition(newProp.floatLabelType);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp.showClearButton);\n break;\n case 'allowFiltering':\n this.updateAllowFiltering(newProp.allowFiltering);\n break;\n case 'filterBarPlaceholder':\n this.updateFilterPlaceHolder();\n break;\n case 'value':\n this.oldValue = oldProp.value;\n this.updateValue(newProp.value);\n break;\n case 'text':\n this.updateText(newProp.text);\n break;\n case 'allowMultiSelection':\n this.updateMultiSelection(newProp.allowMultiSelection);\n break;\n case 'mode':\n if (!this.showCheckBox && !this.allowMultiSelection) {\n return;\n }\n if (this.mode === 'Custom') {\n if (this.overFlowWrapper) {\n detach(this.overFlowWrapper);\n }\n if (this.chipWrapper) {\n detach(this.chipWrapper);\n }\n this.setTagValues();\n }\n else {\n if (oldProp.mode === 'Custom') {\n this.updateOverflowWrapper(this.wrapText);\n }\n this.updateModelMode();\n }\n break;\n case 'delimiterChar':\n if (this.mode === 'Box') {\n return;\n }\n if (this.showCheckBox || this.allowMultiSelection) {\n this.setMultiSelect();\n }\n break;\n case 'selectAllText':\n if (this.showCheckBox && this.showSelectAll) {\n this.setLocale();\n }\n break;\n case 'unSelectAllText':\n if (this.showCheckBox && this.showSelectAll) {\n this.setLocale(false);\n }\n break;\n case 'showSelectAll':\n if (this.showCheckBox) {\n this.setSelectAllWrapper(newProp.showSelectAll);\n this.updatePopupHeight();\n }\n break;\n case 'showCheckBox':\n this.updateCheckBoxState(newProp.showCheckBox);\n if (!this.wrapText) {\n this.updateOverflowWrapper(true);\n }\n this.updatePopupHeight();\n this.updateOption();\n break;\n case 'treeSettings':\n for (var _b = 0, _c = Object.keys(newProp.treeSettings); _b < _c.length; _b++) {\n var prop_1 = _c[_b];\n this.updateTreeSettings(prop_1);\n }\n break;\n case 'customTemplate':\n if (this.mode !== 'Custom') {\n return;\n }\n this.chipCollection.innerHTML = '';\n this.setTagValues();\n break;\n case 'sortOrder':\n if (this.hasTemplate) {\n this.updateTemplate();\n }\n this.treeObj.sortOrder = newProp.sortOrder;\n this.treeObj.dataBind();\n this.updateValue(this.value);\n break;\n case 'showDropDownIcon':\n this.updateDropDownIconState(newProp.showDropDownIcon);\n break;\n case 'popupWidth':\n if (this.popupObj) {\n this.popupObj.element.style.width = this.setWidth();\n }\n break;\n case 'popupHeight':\n if (this.popupObj) {\n this.updatePopupHeight();\n }\n break;\n case 'zIndex':\n if (this.popupObj) {\n this.popupObj.zIndex = newProp.zIndex;\n this.popupObj.dataBind();\n }\n break;\n case 'headerTemplate':\n this.updateTemplate();\n break;\n case 'footerTemplate':\n this.updateTemplate();\n break;\n case 'itemTemplate':\n this.updateTemplate();\n this.treeObj.nodeTemplate = newProp.itemTemplate;\n this.treeObj.dataBind();\n break;\n case 'noRecordsTemplate':\n this.updateRecordTemplate();\n break;\n case 'actionFailureTemplate':\n this.updateRecordTemplate(true);\n break;\n case 'htmlAttributes':\n this.setHTMLAttributes();\n break;\n case 'wrapText':\n this.updateOverflowWrapper(this.wrapText);\n if ((this.allowMultiSelection || this.showCheckBox) && !this.wrapText) {\n this.updateView();\n }\n else {\n addClass([this.overFlowWrapper], HIDEICON);\n if (this.chipWrapper && this.mode === 'Box') {\n removeClass([this.chipWrapper], HIDEICON);\n }\n else {\n removeClass([this.inputWrapper], SHOW_CHIP);\n removeClass([this.inputEle], CHIP_INPUT);\n }\n this.ensurePlaceHolder();\n }\n break;\n }\n }\n };\n /**\n * Allows you to clear the selected values from the Dropdown Tree component.\n *\n * @method clear\n * @returns {void}\n */\n DropDownTree.prototype.clear = function () {\n this.clearAll();\n if (this.inputFocus) {\n this.onFocusOut();\n }\n else {\n if (this.changeOnBlur) {\n this.triggerChangeEvent();\n }\n this.removeValue = false;\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n DropDownTree.prototype.destroy = function () {\n this.clearTemplate();\n this.unWireEvents();\n this.setCssClass(null, this.cssClass);\n this.setProperties({ text: null }, true);\n this.treeObj.destroy();\n this.destroyFilter();\n if (this.popupObj) {\n this.popupObj.destroy();\n detach(this.popupObj.element);\n }\n if (this.element.tagName !== this.getDirective()) {\n this.inputWrapper.parentElement.insertBefore(this.element, this.inputWrapper);\n }\n Input.setValue(null, this.inputEle, this.floatLabelType);\n detach(this.inputWrapper);\n detach(this.popupDiv);\n detach(this.hiddenElement);\n Input.setRipple(false, [this.inputObj]);\n this.element.classList.remove('e-input');\n if (this.showCheckBox || this.allowMultiSelection || (this.value && this.valueTemplateContainer)) {\n this.element.classList.remove(CHIP_INPUT);\n }\n detach(this.inputObj.container);\n if (this.inputObj.buttons.length) {\n detach(this.inputObj.buttons[0]);\n }\n this.inputObj = null;\n while (this.hiddenElement.options.length > 0) {\n this.hiddenElement.remove(0);\n }\n this.hiddenElement.innerHTML = '';\n this.hiddenElement = null;\n this.inputWrapper.innerHTML = '';\n this.inputWrapper = null;\n this.popupDiv = null;\n this.tree = null;\n this.popupObj = null;\n this.treeObj = null;\n this.overAllClear = null;\n if (this.chipCollection) {\n var chipsIcons = selectAll('.e-chips-close', this.chipCollection);\n for (var _i = 0, chipsIcons_1 = chipsIcons; _i < chipsIcons_1.length; _i++) {\n var element = chipsIcons_1[_i];\n EventHandler.remove(element, 'mousedown', this.removeChip);\n }\n }\n this.chipWrapper = null;\n this.chipCollection = null;\n this.checkAllParent = null;\n this.selectAllSpan = null;\n this.checkBoxElement = null;\n this.checkWrapper = null;\n this.popupEle = null;\n this.header = null;\n this.footer = null;\n this.overFlowWrapper = null;\n this.keyboardModule = null;\n _super.prototype.destroy.call(this);\n this.setProperties({ value: [] }, true);\n };\n DropDownTree.prototype.destroyFilter = function () {\n if (this.filterObj) {\n this.filterObj.destroy();\n detach(this.filterObj.element);\n detach(this.filterContainer);\n this.filterObj = null;\n }\n };\n DropDownTree.prototype.destroyPopup = function () {\n this.isPopupOpen = false;\n if (this.isReact) {\n this.clearTemplate(['headerTemplate', 'footerTemplate', 'itemTemplate', 'actionFailureTemplate',\n 'noRecordsTemplate']);\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n detach(this.popupObj.element);\n }\n };\n /**\n * Ensures visibility of the Dropdown Tree item by using item value or item element.\n * If many Dropdown Tree items are present, and we are in need to find a particular item, then the `ensureVisible` property\n * helps you to bring the item to visibility by expanding the Dropdown Tree and scrolling to the specific item.\n *\n * @param {string | Element} item - Specifies the value of Dropdown Tree item/ Dropdown Tree item element.\n * @returns {void}\n */\n DropDownTree.prototype.ensureVisible = function (item) {\n this.treeObj.ensureVisible(item);\n };\n /**\n * To get the updated data source of the Dropdown Tree.\n *\n * @param {string | Element} item - Specifies the value of Dropdown Tree item/ Dropdown Tree item element\n * @returns {'{[key: string]: Object }[]'} - returns the updated data source of the Dropdown Tree.\n */\n DropDownTree.prototype.getData = function (item) {\n return this.treeObj.getTreeData(item);\n };\n /**\n * Close the Dropdown tree pop-up.\n *\n * @returns {void}\n */\n DropDownTree.prototype.hidePopup = function () {\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('close', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.inputWrapper.classList.remove(ICONANIMATION);\n if (this.popupEle) {\n addClass([this.popupEle], DDTHIDEICON);\n }\n attributes(this.inputEle, { 'aria-expanded': 'false' });\n if (this.popupObj && this.isPopupOpen) {\n this.popupObj.hide();\n if (this.inputFocus) {\n this.inputWrapper.focus();\n if (this.allowFiltering) {\n addClass([this.inputWrapper], [INPUTFOCUS]);\n }\n }\n if (this.destroyPopupOnHide) {\n this.isFirstRender = true;\n this.destroyPopup();\n }\n }\n };\n /**\n * Based on the state parameter, entire list item will be selected or deselected.\n *\n * @param {boolean} state - Unselects/Selects entire Dropdown Tree items.\n * @returns {void}\n *\n */\n DropDownTree.prototype.selectAll = function (state) {\n this.selectAllItems(state);\n };\n /**\n * Opens the popup that displays the Dropdown Tree items.\n *\n * @returns {void}\n */\n DropDownTree.prototype.showPopup = function () {\n if (!this.enabled || this.readonly || this.isPopupOpen) {\n return;\n }\n this.renderPopup();\n this.focusIn();\n };\n /**\n * Return the module name.\n *\n * @private\n * @returns {string} - returns the module name.\n */\n DropDownTree.prototype.getModuleName = function () {\n return 'dropdowntree';\n };\n __decorate$2([\n Property('The Request Failed')\n ], DropDownTree.prototype, \"actionFailureTemplate\", void 0);\n __decorate$2([\n Property(false)\n ], DropDownTree.prototype, \"allowFiltering\", void 0);\n __decorate$2([\n Property(false)\n ], DropDownTree.prototype, \"allowMultiSelection\", void 0);\n __decorate$2([\n Property(true)\n ], DropDownTree.prototype, \"changeOnBlur\", void 0);\n __decorate$2([\n Property('')\n ], DropDownTree.prototype, \"cssClass\", void 0);\n __decorate$2([\n Property('${value.length} item(s) selected')\n ], DropDownTree.prototype, \"customTemplate\", void 0);\n __decorate$2([\n Property(',')\n ], DropDownTree.prototype, \"delimiterChar\", void 0);\n __decorate$2([\n Property(true)\n ], DropDownTree.prototype, \"enabled\", void 0);\n __decorate$2([\n Complex({}, Fields)\n ], DropDownTree.prototype, \"fields\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"filterBarPlaceholder\", void 0);\n __decorate$2([\n Property('StartsWith')\n ], DropDownTree.prototype, \"filterType\", void 0);\n __decorate$2([\n Property('Never')\n ], DropDownTree.prototype, \"floatLabelType\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"footerTemplate\", void 0);\n __decorate$2([\n Property(false)\n ], DropDownTree.prototype, \"ignoreAccent\", void 0);\n __decorate$2([\n Property(true)\n ], DropDownTree.prototype, \"ignoreCase\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"headerTemplate\", void 0);\n __decorate$2([\n Property({})\n ], DropDownTree.prototype, \"htmlAttributes\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"itemTemplate\", void 0);\n __decorate$2([\n Property('Default')\n ], DropDownTree.prototype, \"mode\", void 0);\n __decorate$2([\n Property('No Records Found')\n ], DropDownTree.prototype, \"noRecordsTemplate\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"placeholder\", void 0);\n __decorate$2([\n Property('300px')\n ], DropDownTree.prototype, \"popupHeight\", void 0);\n __decorate$2([\n Property('100%')\n ], DropDownTree.prototype, \"popupWidth\", void 0);\n __decorate$2([\n Property(false)\n ], DropDownTree.prototype, \"readonly\", void 0);\n __decorate$2([\n Property(false)\n ], DropDownTree.prototype, \"showSelectAll\", void 0);\n __decorate$2([\n Property('Select All')\n ], DropDownTree.prototype, \"selectAllText\", void 0);\n __decorate$2([\n Property(false)\n ], DropDownTree.prototype, \"showCheckBox\", void 0);\n __decorate$2([\n Property(true)\n ], DropDownTree.prototype, \"destroyPopupOnHide\", void 0);\n __decorate$2([\n Property(true)\n ], DropDownTree.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$2([\n Property(true)\n ], DropDownTree.prototype, \"showClearButton\", void 0);\n __decorate$2([\n Property(true)\n ], DropDownTree.prototype, \"showDropDownIcon\", void 0);\n __decorate$2([\n Property('None')\n ], DropDownTree.prototype, \"sortOrder\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"text\", void 0);\n __decorate$2([\n Complex({}, TreeSettings)\n ], DropDownTree.prototype, \"treeSettings\", void 0);\n __decorate$2([\n Property('Unselect All')\n ], DropDownTree.prototype, \"unSelectAllText\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"value\", void 0);\n __decorate$2([\n Property(null)\n ], DropDownTree.prototype, \"valueTemplate\", void 0);\n __decorate$2([\n Property('100%')\n ], DropDownTree.prototype, \"width\", void 0);\n __decorate$2([\n Property(1000)\n ], DropDownTree.prototype, \"zIndex\", void 0);\n __decorate$2([\n Property(false)\n ], DropDownTree.prototype, \"wrapText\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"actionFailure\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"beforeOpen\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"change\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"close\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"blur\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"created\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"dataBound\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"destroyed\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"filtering\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"focus\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"keyPress\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"open\", void 0);\n __decorate$2([\n Event()\n ], DropDownTree.prototype, \"select\", void 0);\n DropDownTree = __decorate$2([\n NotifyPropertyChanges\n ], DropDownTree);\n return DropDownTree;\n}(Component));\n\nvar __extends$3 = (undefined && undefined.__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$3 = (undefined && undefined.__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};\nvar SPINNER_CLASS = 'e-atc-spinner-icon';\ndropDownListClasses.root = 'e-combobox';\nvar inputObject$1 = {\n container: null,\n buttons: []\n};\n/**\n * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.\n * ```html\n * \n * ```\n * ```typescript\n * let games:ComboBox = new ComboBox();\n * games.appendTo(\"#list\");\n * ```\n */\nvar ComboBox = /** @__PURE__ @class */ (function (_super) {\n __extends$3(ComboBox, _super);\n /**\n * *Constructor for creating the component\n *\n * @param {ComboBoxModel} options - Specifies the ComboBox model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function ComboBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n ComboBox.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ComboBox.prototype.getLocaleName = function () {\n return 'combo-box';\n };\n ComboBox.prototype.wireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur, this);\n EventHandler.add(this.inputWrapper.container, 'blur', this.onBlurHandler, this);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick, this);\n }\n EventHandler.add(this.inputElement, 'focus', this.targetFocus, this);\n if (!this.readonly) {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n }\n this.bindCommonEvent();\n };\n ComboBox.prototype.preventBlur = function (e) {\n if ((!this.allowFiltering && document.activeElement !== this.inputElement &&\n !document.activeElement.classList.contains(dropDownListClasses.input) && Browser.isDevice || !Browser.isDevice)) {\n e.preventDefault();\n }\n };\n ComboBox.prototype.onBlurHandler = function (e) {\n var inputValue = this.inputElement && this.inputElement.value === '' ?\n null : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData) && !isNullOrUndefined(inputValue) && inputValue !== this.text) {\n this.customValue(e);\n }\n _super.prototype.onBlurHandler.call(this, e);\n };\n ComboBox.prototype.targetElement = function () {\n return this.inputElement;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.setOldText = function (text) {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n this.removeSelection();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.setOldValue = function (value) {\n if (this.allowCustom) {\n this.selectedLI = this.getElementByValue(this.value);\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n this.removeSelection();\n this.setHiddenValue();\n };\n ComboBox.prototype.valueMuteChange = function (value) {\n value = this.allowObjectBinding && !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;\n var inputValue = isNullOrUndefined(value) ? null : value.toString();\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n var changeData = {};\n if (this.allowObjectBinding) {\n value = this.getDataByValue(value);\n if (isNullOrUndefined(value)) {\n var fields_1 = this.fields;\n var isvalidTextField_1 = false;\n var isValidValue_1 = false;\n if (this.allowObjectBinding) {\n var keys = Object.keys(this.value);\n keys.forEach(function (key) {\n if (key === fields_1.value) {\n isValidValue_1 = true;\n return;\n }\n });\n keys.forEach(function (key) {\n if (key === fields_1.text) {\n isvalidTextField_1 = true;\n return;\n }\n });\n }\n changeData = {\n text: isValidValue_1 ? isvalidTextField_1 ? getValue(fields_1.text, this.value) : getValue(fields_1.value, this.value) : null,\n value: isValidValue_1 ? this.value : null,\n index: null\n };\n }\n }\n if (this.allowObjectBinding) {\n this.setProperties(changeData, true);\n }\n else {\n this.setProperties({ value: value, text: value ? value.toString() : value, index: null }, true);\n }\n this.activeIndex = this.index;\n var fields = this.fields;\n var dataItem = {};\n dataItem[fields.text] = isNullOrUndefined(value) ? null : value.toString();\n dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();\n this.itemData = dataItem;\n this.item = null;\n if ((!this.allowObjectBinding && (this.previousValue !== this.value)) ||\n (this.allowObjectBinding && this.previousValue && this.value &&\n !this.isObjectInArray(this.previousValue, [this.value]))) {\n this.detachChangeEvent(null);\n }\n };\n ComboBox.prototype.updateValues = function () {\n if (this.fields.disabled) {\n if (this.value != null) {\n this.value = !this.isDisableItemValue(this.value) ? this.value : null;\n }\n if (this.text != null) {\n this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;\n }\n if (this.index != null) {\n this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;\n this.activeIndex = this.index;\n }\n }\n if (!isNullOrUndefined(this.value)) {\n var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n var li = this.getElementByValue(currentValue);\n var doesItemExist = !isNullOrUndefined(li) ? true : false;\n if (this.enableVirtualization && this.value) {\n var fields = (this.fields.value) ? this.fields.value : '';\n var currentValue_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n if (this.dataSource instanceof DataManager) {\n var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n doesItemExist = true;\n var dataItem = this.getItemData();\n var value = this.allowObjectBinding\n ? this.getDataByValue(dataItem.value)\n : dataItem.value;\n if ((this.value === dataItem.value && this.text !== dataItem.text)\n || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });\n }\n }\n }\n else {\n var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n doesItemExist = true;\n var dataItem = this.getItemData();\n var value = this.allowObjectBinding\n ? this.getDataByValue(dataItem.value)\n : dataItem.value;\n if ((this.value === dataItem.value && this.text !== dataItem.text)\n || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });\n }\n }\n }\n }\n if (li) {\n this.setSelection(li, null);\n }\n else if ((!this.enableVirtualization && this.allowCustom) ||\n (this.allowCustom && this.enableVirtualization && !doesItemExist)) {\n this.valueMuteChange(this.value);\n }\n else if (!this.enableVirtualization || (this.enableVirtualization && !doesItemExist)) {\n this.valueMuteChange(null);\n }\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var li = this.getElementByText(this.text);\n if (li) {\n this.setSelection(li, null);\n }\n else {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n ComboBox.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement && this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n ComboBox.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'role': 'combobox',\n 'aria-autocomplete': 'both',\n 'aria-labelledby': this.hiddenElement.id,\n 'aria-expanded': 'false',\n 'aria-readonly': this.readonly ? this.readonly.toString() : 'false',\n 'autocomplete': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n };\n return ariaAttributes;\n };\n ComboBox.prototype.searchLists = function (e) {\n this.isTyped = true;\n if (this.isFiltering()) {\n _super.prototype.searchLists.call(this, e);\n if (this.ulElement && this.filterInput.value.trim() === '') {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n }\n else {\n if (this.ulElement && this.inputElement.value === '' && this.preventAutoFill) {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n this.incrementalSearch(e);\n }\n };\n ComboBox.prototype.getNgDirective = function () {\n return 'EJS-COMBOBOX';\n };\n ComboBox.prototype.setSearchBox = function () {\n this.filterInput = this.inputElement;\n var searchBoxContainer = (this.isFiltering() || (this.isReact && this.getModuleName() === 'combobox')) ? this.inputWrapper : inputObject$1;\n return searchBoxContainer;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isSelectCustom) {\n this.removeSelection();\n }\n if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {\n setTimeout(function () {\n _this.inlineSearch();\n });\n }\n };\n ComboBox.prototype.getFocusElement = function () {\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;\n var isSelected = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);\n if (isSelected) {\n return selected;\n }\n if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&\n !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {\n var inputValue = this.inputElement.value;\n var dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);\n if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {\n var updatingincrementalindex = false;\n var isEndIndexValid = this.viewPortInfo.endIndex >= this.incrementalEndIndex &&\n this.incrementalEndIndex <= this.totalItemCount;\n var isIncrementalEndIndexZero = this.incrementalEndIndex === 0;\n if (isEndIndexValid || isIncrementalEndIndexZero) {\n updatingincrementalindex = true;\n this.incrementalStartIndex = this.incrementalEndIndex;\n if (isIncrementalEndIndexZero) {\n this.incrementalEndIndex = Math.min(100, this.totalItemCount);\n }\n else {\n this.incrementalEndIndex = Math.min(this.incrementalEndIndex + 100, this.totalItemCount);\n }\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n }\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n while (isNullOrUndefined(activeItem.item) && this.incrementalEndIndex < this.totalItemCount) {\n this.incrementalStartIndex = this.incrementalEndIndex;\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount\n ? this.totalItemCount\n : this.incrementalEndIndex + 100;\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n if (!isNullOrUndefined(activeItem)) {\n activeItem.index = activeItem.index + this.incrementalStartIndex;\n break;\n }\n if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {\n this.incrementalStartIndex = 0;\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n break;\n }\n }\n var startIndex = activeItem.index - ((this.itemCount / 2) - 2) > 0\n ? activeItem.index - ((this.itemCount / 2) - 2)\n : 0;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount\n ? this.totalItemCount\n : this.viewPortInfo.startIndex + this.itemCount;\n if (startIndex !== this.viewPortInfo.startIndex) {\n this.updateIncrementalView(startIndex, endIndex);\n }\n if (!isNullOrUndefined(activeItem.item)) {\n var startIndex_1 = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount\n ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2)\n : this.totalItemCount;\n var endIndex_1 = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount\n ? this.totalItemCount\n : this.viewPortInfo.startIndex + this.itemCount;\n this.updateIncrementalView(startIndex_1, endIndex_1);\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n else {\n this.updateIncrementalView(0, this.itemCount);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n this.list.scrollTop = 0;\n }\n if (activeItem && activeItem.item) {\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n }\n var activeElement = activeItem.item;\n if (!isNullOrUndefined(activeElement)) {\n var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;\n var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {\n this.removeFocus();\n var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;\n if (!this.enableVirtualization) {\n this.list.scrollTop = count * height + fixedHead;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var virtualContent = this.list.getElementsByClassName('e-virtual-ddl-content')[0];\n virtualContent.style = this.getTransformValues();\n if (this.enableVirtualization && !this.fields.groupBy) {\n var selectedLiOffsetTop = activeElement.offsetTop;\n var virtualListInfoStartIndex = this.virtualListInfo && this.virtualListInfo.startIndex\n ? this.virtualListInfo.startIndex\n : 0;\n var virtualListHeight = activeElement.offsetHeight;\n var selectedLiOffsetTopWithStartIndex = selectedLiOffsetTop +\n (virtualListInfoStartIndex * virtualListHeight);\n var virtualListLength = this.list.querySelectorAll('.e-virtual-list').length;\n var scrollTopOffset = virtualListLength * virtualListHeight;\n this.list.scrollTop = selectedLiOffsetTopWithStartIndex - scrollTopOffset;\n }\n }\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n }\n }\n return activeElement;\n }\n else {\n return null;\n }\n };\n ComboBox.prototype.setValue = function (e) {\n if ((e && e.type === 'keydown' && e.action === 'enter') || (e && e.type === 'click')) {\n this.removeFillSelection();\n }\n if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {\n this.preventAutoFill = false;\n this.inlineSearch(e);\n return false;\n }\n else {\n return _super.prototype.setValue.call(this, e);\n }\n };\n ComboBox.prototype.checkCustomValue = function () {\n var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n this.itemData = this.getDataByValue(value);\n var dataItem = this.getItemData();\n var setValue = this.allowObjectBinding ? this.itemData : dataItem.value;\n if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {\n this.setProperties({ 'value': setValue }, !this.allowCustom);\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = (this.getModuleName() === 'autocomplete') ? (this.inputWrapper.buttons[0] ||\n this.inputWrapper.clearButton ||\n Input.appendSpan('e-input-group-icon ' + SPINNER_CLASS, this.inputWrapper.container, this.createElement)) :\n (this.inputWrapper.buttons[0] || this.inputWrapper.clearButton);\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n ComboBox.prototype.setAutoFill = function (activeElement, isHover) {\n if (!isHover) {\n this.setHoverList(activeElement);\n }\n if (this.autofill && !this.preventAutoFill) {\n var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();\n var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n if (this.getModuleName() === 'combobox') {\n if (!this.isSelected && ((!this.allowObjectBinding && this.previousValue !== currentFillValue)) ||\n (this.allowObjectBinding && this.previousValue && currentFillValue &&\n !this.isObjectInArray(this.previousValue, [this.getDataByValue(currentFillValue)]))) {\n this.updateSelectedItem(activeElement, null);\n this.isSelected = true;\n this.previousValue = this.allowObjectBinding ?\n this.getDataByValue(this.getFormattedValue(activeElement.getAttribute('data-value'))) :\n this.getFormattedValue(activeElement.getAttribute('data-value'));\n }\n else {\n this.updateSelectedItem(activeElement, null, true);\n }\n }\n if (!this.isAndroidAutoFill(currentValue)) {\n this.setAutoFillSelection(currentValue, isHover);\n }\n }\n };\n ComboBox.prototype.isAndroidAutoFill = function (value) {\n if (Browser.isAndroid) {\n var currentPoints = this.getSelectionPoints();\n var prevEnd = this.prevSelectPoints.end;\n var curEnd = currentPoints.end;\n var prevStart = this.prevSelectPoints.start;\n var curStart = currentPoints.start;\n if (prevEnd !== 0 && ((prevEnd === value.length && prevStart === value.length) ||\n (prevStart > curStart && prevEnd > curEnd) || (prevEnd === curEnd && prevStart === curStart))) {\n return true;\n }\n else {\n return false;\n }\n }\n else {\n return false;\n }\n };\n ComboBox.prototype.clearAll = function (e, property) {\n if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {\n _super.prototype.clearAll.call(this, e);\n }\n if (this.isFiltering() && !isNullOrUndefined(e) && e.target === this.inputWrapper.clearButton) {\n this.searchLists(e);\n }\n };\n ComboBox.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n ComboBox.prototype.inlineSearch = function (e) {\n var isKeyNavigate = (e && (e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown'));\n var activeElement = isKeyNavigate ? this.liCollections[this.activeIndex] : this.getFocusElement();\n if (!isNullOrUndefined(activeElement)) {\n if (!isKeyNavigate) {\n var value = this.getFormattedValue(activeElement.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.activeIndex = !isNullOrUndefined(this.activeIndex) ? this.activeIndex : null;\n }\n this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;\n this.setAutoFill(activeElement, isKeyNavigate);\n }\n else if (!isNullOrUndefined(this.inputElement) && this.inputElement.value === '') {\n this.activeIndex = null;\n if (!isNullOrUndefined(this.list)) {\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {\n this.removeFocus();\n }\n }\n };\n ComboBox.prototype.incrementalSearch = function (e) {\n this.showPopup(e);\n if (!isNullOrUndefined(this.listData)) {\n this.inlineSearch(e);\n e.preventDefault();\n }\n };\n ComboBox.prototype.setAutoFillSelection = function (currentValue, isKeyNavigate) {\n if (isKeyNavigate === void 0) { isKeyNavigate = false; }\n var selection = this.getSelectionPoints();\n var value = this.inputElement.value.substr(0, selection.start);\n if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {\n var inputValue = value + currentValue.substr(value.length, currentValue.length);\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);\n }\n else if (isKeyNavigate) {\n Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(0, this.inputElement.value.length);\n }\n };\n ComboBox.prototype.getValueByText = function (text) {\n return _super.prototype.getValueByText.call(this, text, true, this.ignoreAccent);\n };\n ComboBox.prototype.unWireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur);\n EventHandler.remove(this.inputWrapper.container, 'blur', this.onBlurHandler);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick);\n }\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'focus', this.targetFocus);\n if (!this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);\n EventHandler.remove(window, 'resize', this.windowResize);\n }\n }\n this.unBindCommonEvent();\n };\n ComboBox.prototype.setSelection = function (li, e) {\n _super.prototype.setSelection.call(this, li, e);\n if (!isNullOrUndefined(li) && !this.autofill && !this.isDropDownClick) {\n this.removeFocus();\n }\n };\n ComboBox.prototype.selectCurrentItem = function (e) {\n var li;\n if (this.isPopupOpen) {\n if (this.isSelected) {\n li = this.list.querySelector('.' + dropDownListClasses.selected);\n }\n else {\n li = this.list.querySelector('.' + dropDownListClasses.focus);\n }\n if (this.isDisabledElement(li)) {\n return;\n }\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n }\n if (e.action === 'enter' && this.inputElement.value.trim() === '') {\n this.clearAll(e);\n }\n else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {\n this.customValue(e);\n }\n this.hidePopup(e);\n };\n ComboBox.prototype.setHoverList = function (li) {\n this.removeSelection();\n if (this.isValidLI(li) && !li.classList.contains(dropDownListClasses.selected)) {\n this.removeFocus();\n li.classList.add(dropDownListClasses.focus);\n }\n };\n ComboBox.prototype.targetFocus = function (e) {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = false;\n }\n this.onFocus(e);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n };\n ComboBox.prototype.dropDownClick = function (e) {\n e.preventDefault();\n if (Browser.isDevice && !this.isFiltering()) {\n this.preventFocus = true;\n }\n _super.prototype.dropDownClick.call(this, e);\n };\n ComboBox.prototype.customValue = function (e) {\n var _this = this;\n var value = this.getValueByText(this.inputElement.value);\n if (!this.allowCustom && this.inputElement.value !== '') {\n var previousValue = this.previousValue;\n var currentValue = this.value;\n value = this.allowObjectBinding ? this.getDataByValue(value) : value;\n this.setProperties({ value: value });\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.autofill && ((!this.allowObjectBinding && previousValue === this.value) ||\n (this.allowObjectBinding && previousValue && this.isObjectInArray(previousValue, [this.value]))) && ((!this.allowObjectBinding && currentValue !== this.value) ||\n (this.allowObjectBinding && currentValue && !this.isObjectInArray(currentValue, [this.value])))) {\n this.onChangeEvent(null);\n }\n }\n else if (this.inputElement.value.trim() !== '') {\n var previousValue_1 = this.value;\n if (isNullOrUndefined(value)) {\n var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;\n // eslint-disable-next-line max-len\n var eventArgs = { text: value_1, item: {} };\n this.isObjectCustomValue = true;\n if (!this.initial) {\n this.trigger('customValueSpecifier', eventArgs, function (eventArgs) {\n _this.updateCustomValueCallback(value_1, eventArgs, previousValue_1, e);\n });\n }\n else {\n this.updateCustomValueCallback(value_1, eventArgs, previousValue_1);\n }\n }\n else {\n this.isSelectCustom = false;\n value = this.allowObjectBinding ? this.getDataByValue(value) : value;\n this.setProperties({ value: value });\n if ((!this.allowObjectBinding && previousValue_1 !== this.value) ||\n (this.allowObjectBinding && previousValue_1 && this.value && !this.isObjectInArray(previousValue_1, [this.value]))) {\n this.onChangeEvent(e);\n }\n }\n }\n else if (this.allowCustom && this.isFocused) {\n this.isSelectCustom = true;\n }\n };\n ComboBox.prototype.updateCustomValueCallback = function (value, eventArgs, previousValue, e) {\n var _this = this;\n var fields = this.fields;\n var item = eventArgs.item;\n var dataItem = {};\n if (item && getValue(fields.text, item) && getValue(fields.value, item)) {\n dataItem = item;\n }\n else {\n setValue(fields.text, value, dataItem);\n setValue(fields.value, value, dataItem);\n }\n this.itemData = dataItem;\n var emptyObject = {};\n if (this.allowObjectBinding) {\n var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : Object.keys(this.itemData);\n if ((!(this.listData && this.listData.length > 0)) && (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'combobox' && this.allowFiltering))) {\n keys = this.firstItem ? Object.keys(this.firstItem) : Object.keys(this.itemData);\n }\n // Create an empty object with predefined keys\n keys.forEach(function (key) {\n emptyObject[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, _this.itemData) : null;\n });\n }\n var changeData = {\n text: getValue(fields.text, this.itemData),\n value: this.allowObjectBinding ? emptyObject : getValue(fields.value, this.itemData),\n index: null\n };\n this.setProperties(changeData, true);\n this.setSelection(null, null);\n this.isSelectCustom = true;\n this.isObjectCustomValue = false;\n if ((!this.allowObjectBinding && (previousValue !== this.value)) ||\n (this.allowObjectBinding && ((previousValue == null && this.value !== null) ||\n (previousValue && !this.isObjectInArray(previousValue, [this.value]))))) {\n this.onChangeEvent(e, true);\n }\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {ComboBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {ComboBoxModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'combobox') {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp, oldProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n if (this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n else {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n this.setReadOnly();\n break;\n case 'allowFiltering':\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n break;\n case 'allowCustom':\n break;\n default: {\n // eslint-disable-next-line max-len\n var comboProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, comboProps.newProperty, comboProps.oldProperty);\n if (this.isFiltering() && prop === 'dataSource' && isNullOrUndefined(this.list) && this.itemTemplate &&\n this.getModuleName() === 'combobox') {\n _super.prototype.renderList.call(this);\n }\n break;\n }\n }\n }\n };\n /**\n * To initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n ComboBox.prototype.render = function () {\n _super.prototype.render.call(this);\n this.setSearchBox();\n this.renderComplete();\n this.autoFill = this.autofill;\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n ComboBox.prototype.getModuleName = function () {\n return 'combobox';\n };\n /**\n * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n };\n /**\n * To filter the data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.filter = function (dataSource, query, fields) {\n _super.prototype.filter.call(this, dataSource, query, fields);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.showPopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.showPopup.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in open state.\n *\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.hidePopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n var inputValue = this.inputElement && this.inputElement.value === '' ? null\n : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData)) {\n var isEscape = this.isEscapeKey;\n if (this.isEscapeKey) {\n Input.setValue(this.typedString, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n }\n if (this.autofill) {\n this.removeFillSelection();\n }\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;\n if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {\n if (this.isSelected) {\n this.onChangeEvent(e);\n this.isSelectCustom = false;\n }\n _super.prototype.hidePopup.call(this, e);\n return;\n }\n if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {\n var dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index;\n }\n this.activeIndex = searchItem.index;\n if (!isNullOrUndefined(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, null, true);\n }\n else if (isEscape) {\n this.isSelectCustom = true;\n this.removeSelection();\n }\n }\n if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {\n this.customValue(e);\n }\n }\n var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== value) {\n this.customValue();\n }\n _super.prototype.hidePopup.call(this, e);\n };\n /**\n * Sets the focus to the component for interaction.\n *\n * @returns {void}\n */\n ComboBox.prototype.focusIn = function () {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice && !this.isFiltering()) {\n this.preventFocus = true;\n }\n _super.prototype.focusIn.call(this);\n };\n /**\n * Allows you to clear the selected values from the component.\n *\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.clear = function () {\n this.value = null;\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Moves the focus from the component if the component is already focused.\n *\n * @returns {void}\n * @deprecated\n */\n ComboBox.prototype.focusOut = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.focusOut.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\n * @returns {Element[]}\n * @deprecated\n */\n ComboBox.prototype.getItems = function () {\n return _super.prototype.getItems.call(this);\n };\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n * @deprecated\n */\n ComboBox.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n ComboBox.prototype.renderHightSearch = function () {\n // update high light search\n };\n __decorate$3([\n Property(false)\n ], ComboBox.prototype, \"autofill\", void 0);\n __decorate$3([\n Property(true)\n ], ComboBox.prototype, \"allowCustom\", void 0);\n __decorate$3([\n Property({})\n ], ComboBox.prototype, \"htmlAttributes\", void 0);\n __decorate$3([\n Property(false)\n ], ComboBox.prototype, \"allowFiltering\", void 0);\n __decorate$3([\n Property(true)\n ], ComboBox.prototype, \"isDeviceFullScreen\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"query\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"index\", void 0);\n __decorate$3([\n Property(true)\n ], ComboBox.prototype, \"showClearButton\", void 0);\n __decorate$3([\n Property(false)\n ], ComboBox.prototype, \"enableRtl\", void 0);\n __decorate$3([\n Event()\n ], ComboBox.prototype, \"customValueSpecifier\", void 0);\n __decorate$3([\n Event()\n ], ComboBox.prototype, \"filtering\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"valueTemplate\", void 0);\n __decorate$3([\n Property('Never')\n ], ComboBox.prototype, \"floatLabelType\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"filterBarPlaceholder\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"cssClass\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"headerTemplate\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"footerTemplate\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"placeholder\", void 0);\n __decorate$3([\n Property('100%')\n ], ComboBox.prototype, \"width\", void 0);\n __decorate$3([\n Property('300px')\n ], ComboBox.prototype, \"popupHeight\", void 0);\n __decorate$3([\n Property('100%')\n ], ComboBox.prototype, \"popupWidth\", void 0);\n __decorate$3([\n Property(false)\n ], ComboBox.prototype, \"readonly\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"text\", void 0);\n __decorate$3([\n Property(null)\n ], ComboBox.prototype, \"value\", void 0);\n __decorate$3([\n Property(false)\n ], ComboBox.prototype, \"allowObjectBinding\", void 0);\n ComboBox = __decorate$3([\n NotifyPropertyChanges\n ], ComboBox);\n return ComboBox;\n}(DropDownList));\n\nvar __extends$4 = (undefined && undefined.__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$4 = (undefined && undefined.__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};\ndropDownListClasses.root = 'e-autocomplete';\ndropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';\n/**\n * The AutoComplete component provides the matched suggestion list when type into the input,\n * from which the user can select one.\n * ```html\n * \n * ```\n * ```typescript\n * let atcObj:AutoComplete = new AutoComplete();\n * atcObj.appendTo(\"#list\");\n * ```\n */\nvar AutoComplete = /** @__PURE__ @class */ (function (_super) {\n __extends$4(AutoComplete, _super);\n /**\n * * Constructor for creating the widget\n *\n * @param {AutoCompleteModel} options - Specifies the AutoComplete model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function AutoComplete(options, element) {\n var _this_1 = _super.call(this, options, element) || this;\n _this_1.isFiltered = false;\n _this_1.searchList = false;\n return _this_1;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n AutoComplete.prototype.getLocaleName = function () {\n return 'auto-complete';\n };\n AutoComplete.prototype.getNgDirective = function () {\n return 'EJS-AUTOCOMPLETE';\n };\n AutoComplete.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;\n var filterType = (this.queryString === '' && !isNullOrUndefined(value)) ? 'equal' : this.filterType;\n var queryString = (this.queryString === '' && !isNullOrUndefined(value)) ? value : this.queryString;\n if (this.isFiltered) {\n if ((this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery))) {\n filterQuery = this.customFilterQuery.clone();\n }\n else if (!this.enableVirtualization) {\n return filterQuery;\n }\n }\n if (this.queryString !== null && this.queryString !== '') {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';\n filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (!isNullOrUndefined(this.suggestionCount) && !this.enableVirtualization) {\n // Since default value of suggestioncount is 20, checked the condition\n if (this.suggestionCount !== 20) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n filterQuery.queries.splice(queryElements, 1);\n }\n }\n }\n filterQuery.take(this.suggestionCount);\n }\n if (this.enableVirtualization) {\n var queryTakeValue = 0;\n var querySkipValue = 0;\n var takeValue = this.getTakeValue();\n if (filterQuery && filterQuery.queries.length > 0) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onSkip') {\n querySkipValue = filterQuery.queries[queryElements].e.nos;\n }\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos\n ? filterQuery.queries[queryElements].e.nos\n : takeValue;\n }\n }\n }\n if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {\n for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {\n if (this.query.queries[queryElements].fn === 'onTake') {\n var currentTakeValue = this.query.queries[queryElements].e.nos;\n queryTakeValue = takeValue <= currentTakeValue ? currentTakeValue : takeValue;\n }\n }\n }\n if (filterQuery && filterQuery.queries.length > 0) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onSkip') {\n querySkipValue = filterQuery.queries[queryElements].e.nos;\n filterQuery.queries.splice(queryElements, 1);\n --queryElements;\n continue;\n }\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n var currentQueryTakeValue = filterQuery.queries[queryElements].e.nos;\n queryTakeValue = currentQueryTakeValue <= queryTakeValue ? queryTakeValue : currentQueryTakeValue;\n filterQuery.queries.splice(queryElements, 1);\n --queryElements;\n }\n }\n }\n if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {\n filterQuery.skip(querySkipValue);\n }\n else {\n filterQuery.skip(this.virtualItemStartIndex);\n }\n if (queryTakeValue > 0 && takeValue <= queryTakeValue) {\n filterQuery.take(queryTakeValue);\n }\n else {\n filterQuery.take(takeValue);\n }\n filterQuery.requiresCount();\n }\n return filterQuery;\n };\n AutoComplete.prototype.searchLists = function (e) {\n var _this_1 = this;\n this.isTyped = true;\n this.isDataFetched = this.isSelectCustom = false;\n this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;\n this.checkAndResetCache();\n if (isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this, e, true);\n }\n this.queryString = this.filterInput.value;\n if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {\n this.queryString = this.queryString === '' ? null : this.queryString;\n this.beforePopupOpen = true;\n this.resetList(this.dataSource, this.fields, null, e);\n return;\n }\n this.isSelected = false;\n this.activeIndex = null;\n this.isRequesting = false;\n var eventArgs = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs.cancel) {\n return;\n }\n _this_1.isFiltered = true;\n _this_1.customFilterQuery = query;\n _this_1.filterAction(dataSource, query, fields);\n },\n cancel: false\n };\n this.trigger('filtering', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel && !_this_1.isFiltered && !eventArgs.preventDefaultAction) {\n _this_1.searchList = true;\n _this_1.filterAction(_this_1.dataSource, null, _this_1.fields, e);\n }\n });\n };\n /**\n * To filter the data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n * @deprecated\n */\n AutoComplete.prototype.filter = function (dataSource, query, fields) {\n this.isFiltered = true;\n this.filterAction(dataSource, query, fields);\n };\n AutoComplete.prototype.filterAction = function (dataSource, query, fields, e) {\n this.beforePopupOpen = true;\n var isNoDataElement = this.list.classList.contains('e-nodata');\n if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {\n if (this.enableVirtualization && this.isFiltering() && this.isTyped) {\n this.isPreventScrollAction = true;\n this.list.scrollTop = 0;\n this.previousStartIndex = 0;\n this.virtualListInfo = null;\n }\n this.resetList(dataSource, fields, query, e);\n isNoDataElement = this.list.classList.contains('e-nodata');\n if (this.enableVirtualization && !isNoDataElement) {\n if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {\n var virtualElement = this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n });\n this.list.appendChild(virtualElement).appendChild(this.list.querySelector('.e-list-parent'));\n }\n if (!this.list.querySelector('.e-virtual-ddl') && document.getElementsByClassName('e-popup') && document.getElementsByClassName('e-popup')[0]) {\n var virtualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virtualElement);\n }\n }\n if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount !== 0)) {\n this.getFilteringSkeletonCount();\n }\n }\n else {\n this.hidePopup(e);\n this.beforePopupOpen = false;\n }\n this.renderReactTemplates();\n };\n AutoComplete.prototype.clearAll = function (e, property) {\n if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {\n _super.prototype.clearAll.call(this, e);\n this.checkAndResetCache();\n }\n if (this.beforePopupOpen) {\n this.hidePopup();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n if (!this.enableVirtualization) {\n this.fixedHeaderElement = null;\n }\n if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount !== 0)) {\n this.getFilteringSkeletonCount();\n }\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n var item = this.list.querySelector('.' + dropDownListClasses.li);\n if (!isNullOrUndefined(item)) {\n removeClass([item], dropDownListClasses.focus);\n }\n this.postBackAction();\n };\n AutoComplete.prototype.postBackAction = function () {\n if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {\n var items = [this.liCollections[0]];\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);\n this.searchList = false;\n if (!isNullOrUndefined(searchItem.item)) {\n _super.prototype.setAutoFill.call(this, this.liCollections[0], true);\n }\n }\n };\n AutoComplete.prototype.setSelection = function (li, e) {\n if (!this.isValidLI(li)) {\n this.selectedLI = li;\n return;\n }\n if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'\n && e.action !== 'tab' && this.isValidLI(li)) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.setHoverList(li);\n this.selectedLI = li;\n this.setScrollPosition(e);\n if (this.autofill && this.isPopupOpen) {\n this.preventAutoFill = false;\n var isKeyNavigate = (e && e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');\n _super.prototype.setAutoFill.call(this, li, isKeyNavigate);\n }\n }\n else {\n _super.prototype.setSelection.call(this, li, e);\n this.isFiltered = false;\n }\n };\n AutoComplete.prototype.listOption = function (dataSource, fieldsSettings) {\n var _this_1 = this;\n var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);\n if (isNullOrUndefined(fields.itemCreated)) {\n fields.itemCreated = function (e) {\n if (_this_1.highlight) {\n if (_this_1.element.tagName === _this_1.getNgDirective() && _this_1.itemTemplate) {\n setTimeout(function () {\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }, 0);\n }\n else {\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }\n }\n };\n }\n else {\n var itemCreated_1 = fields.itemCreated;\n fields.itemCreated = function (e) {\n if (_this_1.highlight) {\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }\n itemCreated_1.apply(_this_1, [e]);\n };\n }\n return fields;\n };\n AutoComplete.prototype.isFiltering = function () {\n return true;\n };\n AutoComplete.prototype.renderPopup = function (e) {\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n _super.prototype.renderPopup.call(this, e);\n };\n AutoComplete.prototype.isEditTextBox = function () {\n return false;\n };\n AutoComplete.prototype.isPopupButton = function () {\n return this.showPopupButton;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n AutoComplete.prototype.isSelectFocusItem = function (element) {\n return false;\n };\n AutoComplete.prototype.setInputValue = function (newProp, oldProp) {\n var oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;\n var value = newProp && newProp.text\n ? newProp.text\n : newProp && newProp.value\n ? newProp.value\n : this.value;\n if (this.allowObjectBinding) {\n oldValue = !isNullOrUndefined(oldValue)\n ? getValue((this.fields.value) ? this.fields.value : '', oldValue)\n : oldValue;\n value = !isNullOrUndefined(value)\n ? getValue((this.fields.value) ? this.fields.value : '', value)\n : value;\n }\n if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {\n var checkFields1_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;\n var listLength_1 = this.getItems().length;\n var query = new Query();\n // eslint-disable-next-line @typescript-eslint/tslint/config\n var _this_2 = this;\n new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields1_1, 'equal', value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this_2.value = checkFields1_1 !== '' ? _this_2.allowObjectBinding ? e.result[0] : e.result[0][_this_2.fields.value].toString() : e.result[0].toString();\n _this_2.addItem(e.result, listLength_1);\n _this_2.updateValues();\n }\n else {\n if (newProp && newProp.text) {\n _this_2.setOldText(oldValue);\n }\n else if (newProp && newProp.value) {\n _this_2.setOldValue(oldValue);\n }\n else {\n _this_2.updateValues();\n }\n }\n });\n }\n else if (newProp) {\n if (newProp.text) {\n this.setOldText(oldValue);\n }\n else {\n this.setOldValue(oldValue);\n }\n }\n };\n /**\n * Search the entered text and show it in the suggestion list if available.\n *\n * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - The event object.\n * @returns {void}\n * @deprecated\n */\n AutoComplete.prototype.showPopup = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n this.preventAutoFill = true;\n if (isNullOrUndefined(this.list)) {\n this.renderList(e);\n }\n else {\n this.resetList(this.dataSource, this.fields, null, e);\n }\n };\n /**\n * Hides the popup if it is in open state.\n *\n * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - The event object.\n * @returns {void}\n */\n AutoComplete.prototype.hidePopup = function (e) {\n _super.prototype.hidePopup.call(this, e);\n this.activeIndex = null;\n this.virtualListInfo = this.viewPortInfo;\n this.previousStartIndex = this.viewPortInfo.startIndex;\n this.startIndex = this.viewPortInfo.startIndex;\n this.previousEndIndex = this.viewPortInfo.endIndex;\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {AutoCompleteModel} newProp - Returns the dynamic property value of the component.\n * @param {AutoCompleteModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'autocomplete') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'showPopupButton':\n if (this.showPopupButton) {\n var button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container, this.createElement);\n this.inputWrapper.buttons[0] = button;\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n if (this.inputWrapper && this.inputWrapper.buttons && this.inputWrapper.buttons[0]) {\n EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dropDownClick, this);\n }\n }\n else {\n detach(this.inputWrapper.buttons[0]);\n this.inputWrapper.buttons[0] = null;\n }\n break;\n default: {\n // eslint-disable-next-line max-len\n var atcProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, atcProps.newProperty, atcProps.oldProperty);\n break;\n }\n }\n }\n };\n AutoComplete.prototype.renderHightSearch = function () {\n if (this.highlight) {\n for (var i = 0; i < this.liCollections.length; i++) {\n var isHighlight = this.ulElement.querySelector('.e-active');\n if (!isHighlight) {\n revertHighlightSearch(this.liCollections[i]);\n highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);\n }\n isHighlight = null;\n }\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n AutoComplete.prototype.getModuleName = function () {\n return 'autocomplete';\n };\n /**\n * To initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.render = function () {\n _super.prototype.render.call(this);\n };\n __decorate$4([\n Complex({ value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)\n ], AutoComplete.prototype, \"fields\", void 0);\n __decorate$4([\n Property(true)\n ], AutoComplete.prototype, \"ignoreCase\", void 0);\n __decorate$4([\n Property(false)\n ], AutoComplete.prototype, \"showPopupButton\", void 0);\n __decorate$4([\n Property(false)\n ], AutoComplete.prototype, \"highlight\", void 0);\n __decorate$4([\n Property(20)\n ], AutoComplete.prototype, \"suggestionCount\", void 0);\n __decorate$4([\n Property({})\n ], AutoComplete.prototype, \"htmlAttributes\", void 0);\n __decorate$4([\n Property(null)\n ], AutoComplete.prototype, \"query\", void 0);\n __decorate$4([\n Property(1)\n ], AutoComplete.prototype, \"minLength\", void 0);\n __decorate$4([\n Property('Contains')\n ], AutoComplete.prototype, \"filterType\", void 0);\n __decorate$4([\n Event()\n ], AutoComplete.prototype, \"filtering\", void 0);\n __decorate$4([\n Property(null)\n ], AutoComplete.prototype, \"index\", void 0);\n __decorate$4([\n Property('Never')\n ], AutoComplete.prototype, \"floatLabelType\", void 0);\n __decorate$4([\n Property(null)\n ], AutoComplete.prototype, \"valueTemplate\", void 0);\n __decorate$4([\n Property(null)\n ], AutoComplete.prototype, \"filterBarPlaceholder\", void 0);\n __decorate$4([\n Property(false)\n ], AutoComplete.prototype, \"allowFiltering\", void 0);\n __decorate$4([\n Property(null)\n ], AutoComplete.prototype, \"text\", void 0);\n AutoComplete = __decorate$4([\n NotifyPropertyChanges\n ], AutoComplete);\n return AutoComplete;\n}(ComboBox));\n\n/**\n * FloatLable Moduel\n * Specifies whether to display the floating label above the input element.\n */\nvar FLOATLINE = 'e-float-line';\nvar FLOATTEXT = 'e-float-text';\nvar LABELTOP = 'e-label-top';\nvar LABELBOTTOM = 'e-label-bottom';\n/* eslint-disable valid-jsdoc */\n/**\n * Function to create Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.\n * @param {HTMLElement} element - The given html element.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nfunction createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {\n var floatLinelement = createElement('span', { className: FLOATLINE });\n var floatLabelElement = createElement('label', { className: FLOATTEXT });\n var id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');\n element.id = id;\n if (!isNullOrUndefined(element.id) && element.id !== '') {\n floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');\n floatLabelElement.setAttribute('for', element.id);\n attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceholder(inputElement.placeholder);\n inputElement.removeAttribute('placeholder');\n }\n floatLabelElement.innerText = encodePlaceholder(placeholder);\n searchWrapper.appendChild(floatLinelement);\n searchWrapper.appendChild(floatLabelElement);\n overAllWrapper.classList.add('e-float-input');\n updateFloatLabelState(value, floatLabelElement);\n if (floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(LABELBOTTOM)) {\n removeClass([floatLabelElement], LABELBOTTOM);\n }\n addClass([floatLabelElement], LABELTOP);\n }\n}\n/**\n * Function to update status of the Float Label element.\n *\n * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.\n * @param {HTMLElement} label - Float label element.\n */\nfunction updateFloatLabelState(value, label) {\n if (value && value.length > 0) {\n addClass([label], LABELTOP);\n removeClass([label], LABELBOTTOM);\n }\n else {\n removeClass([label], LABELTOP);\n addClass([label], LABELBOTTOM);\n }\n}\n/**\n * Function to remove Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nfunction removeFloating(overAllWrapper, componentWrapper, searchWrapper, inputElement, value, floatLabelType, placeholder) {\n var placeholderElement = componentWrapper.querySelector('.' + FLOATTEXT);\n var floatLine = componentWrapper.querySelector('.' + FLOATLINE);\n var placeholderText;\n if (!isNullOrUndefined(placeholderElement)) {\n placeholderText = placeholderElement.innerText;\n detach(searchWrapper.querySelector('.' + FLOATTEXT));\n setPlaceHolder(value, inputElement, placeholderText);\n if (!isNullOrUndefined(floatLine)) {\n detach(searchWrapper.querySelector('.' + FLOATLINE));\n }\n }\n else {\n placeholderText = (placeholder !== null) ? placeholder : '';\n setPlaceHolder(value, inputElement, placeholderText);\n }\n overAllWrapper.classList.remove('e-float-input');\n}\n/**\n * Function to set the placeholder to the element.\n *\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nfunction setPlaceHolder(value, inputElement, placeholder) {\n if (value && value.length) {\n inputElement.placeholder = '';\n }\n else {\n inputElement.placeholder = placeholder;\n }\n}\n/**\n * Function for focusing the Float Element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n */\nfunction floatLabelFocus(overAllWrapper, componentWrapper) {\n overAllWrapper.classList.add('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (!isNullOrUndefined(label)) {\n addClass([label], LABELTOP);\n if (label.classList.contains(LABELBOTTOM)) {\n removeClass([label], LABELBOTTOM);\n }\n }\n}\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * Function to focus the Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nfunction floatLabelBlur(overAllWrapper, componentWrapper, value, floatLabelType, placeholder) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n overAllWrapper.classList.remove('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (value && value.length <= 0 && floatLabelType === 'Auto' && !isNullOrUndefined(label)) {\n if (label.classList.contains(LABELTOP)) {\n removeClass([label], LABELTOP);\n }\n addClass([label], LABELBOTTOM);\n }\n}\nfunction encodePlaceholder(placeholder) {\n var result = '';\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var spanElement = document.createElement('span');\n spanElement.innerHTML = '';\n var hiddenInput = (spanElement.children[0]);\n result = hiddenInput.placeholder;\n }\n return result;\n}\n/* eslint-enable valid-jsdoc */\n\nvar __extends$5 = (undefined && undefined.__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$5 = (undefined && undefined.__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};\nvar FOCUS = 'e-input-focus';\nvar DISABLED$1 = 'e-disabled';\nvar OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';\nvar ELEMENT_WRAPPER = 'e-multi-select-wrapper';\nvar ELEMENT_MOBILE_WRAPPER = 'e-mob-wrapper';\nvar HIDE_LIST = 'e-hide-listitem';\nvar DELIMITER_VIEW = 'e-delim-view';\nvar CHIP_WRAPPER$1 = 'e-chips-collection';\nvar CHIP$1 = 'e-chips';\nvar CHIP_CONTENT$1 = 'e-chipcontent';\nvar CHIP_CLOSE$1 = 'e-chips-close';\nvar CHIP_SELECTED = 'e-chip-selected';\nvar SEARCHBOX_WRAPPER = 'e-searcher';\nvar DELIMITER_VIEW_WRAPPER = 'e-delimiter';\nvar ZERO_SIZE = 'e-zero-size';\nvar REMAIN_WRAPPER$1 = 'e-remain';\nvar CLOSEICON_CLASS$1 = 'e-chips-close e-close-hooker';\nvar DELIMITER_WRAPPER = 'e-delim-values';\nvar POPUP_WRAPPER = 'e-ddl e-popup e-multi-select-list-wrapper';\nvar INPUT_ELEMENT = 'e-dropdownbase';\nvar RTL_CLASS = 'e-rtl';\nvar CLOSE_ICON_HIDE = 'e-close-icon-hide';\nvar MOBILE_CHIP = 'e-mob-chip';\nvar FOOTER$1 = 'e-ddl-footer';\nvar HEADER$1 = 'e-ddl-header';\nvar DISABLE_ICON = 'e-ddl-disable-icon';\nvar SPINNER_CLASS$1 = 'e-ms-spinner-icon';\nvar HIDDEN_ELEMENT = 'e-multi-hidden';\nvar destroy = 'destroy';\nvar dropdownIcon = 'e-input-group-icon e-ddl-icon';\nvar iconAnimation = 'e-icon-anim';\nvar TOTAL_COUNT_WRAPPER$1 = 'e-delim-total';\nvar BOX_ELEMENT = 'e-multiselect-box';\nvar FILTERPARENT = 'e-filter-parent';\nvar CUSTOM_WIDTH = 'e-search-custom-width';\nvar FILTERINPUT = 'e-input-filter';\n/**\n * The Multiselect allows the user to pick a more than one value from list of predefined values.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar MultiSelect = /** @__PURE__ @class */ (function (_super) {\n __extends$5(MultiSelect, _super);\n /**\n * Constructor for creating the DropDownList widget.\n *\n * @param {MultiSelectModel} option - Specifies the MultiSelect model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function MultiSelect(option, element) {\n var _this = _super.call(this, option, element) || this;\n _this.clearIconWidth = 0;\n _this.previousFilterText = '';\n _this.isValidKey = false;\n _this.selectAllEventData = [];\n _this.selectAllEventEle = [];\n _this.resetMainList = null;\n _this.resetFilteredData = false;\n _this.preventSetCurrentData = false;\n _this.isSelectAllLoop = false;\n _this.scrollFocusStatus = false;\n _this.keyDownStatus = false;\n return _this;\n }\n MultiSelect.prototype.enableRTL = function (state) {\n if (state) {\n this.overAllWrapper.classList.add(RTL_CLASS);\n }\n else {\n this.overAllWrapper.classList.remove(RTL_CLASS);\n }\n if (this.popupObj) {\n this.popupObj.enableRtl = state;\n this.popupObj.dataBind();\n }\n };\n MultiSelect.prototype.requiredModules = function () {\n var modules = [];\n if (this.enableVirtualization) {\n modules.push({ args: [this], member: 'VirtualScroll' });\n }\n if (this.mode === 'CheckBox') {\n this.isGroupChecking = this.enableGroupCheckBox;\n if (this.enableGroupCheckBox) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.enableSelectionOrder = false;\n this.isProtectedOnChange = prevOnChange;\n }\n this.allowCustomValue = false;\n this.hideSelectedItem = false;\n this.closePopupOnSelect = false;\n modules.push({\n member: 'CheckBoxSelection',\n args: [this]\n });\n }\n return modules;\n };\n MultiSelect.prototype.updateHTMLAttribute = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n switch (htmlAttr) {\n case 'class': {\n var updatedClassValue = (this.htmlAttributes[\"\" + htmlAttr].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.overAllWrapper], updatedClassValue.split(' '));\n addClass([this.popupWrapper], updatedClassValue.split(' '));\n }\n break;\n }\n case 'disabled':\n this.enable(false);\n break;\n case 'placeholder':\n if (!this.placeholder) {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n this.setProperties({ placeholder: this.inputElement.placeholder }, true);\n this.refreshPlaceHolder();\n }\n break;\n default: {\n var defaultAttr = ['id'];\n var validateAttr = ['name', 'required', 'aria-required', 'form'];\n var containerAttr = ['title', 'role', 'style', 'class'];\n if (defaultAttr.indexOf(htmlAttr) > -1) {\n this.element.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (containerAttr.indexOf(htmlAttr) > -1) {\n this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n else if (htmlAttr !== 'size' && !isNullOrUndefined(this.inputElement)) {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[\"\" + htmlAttr]);\n }\n break;\n }\n }\n }\n }\n };\n MultiSelect.prototype.updateReadonly = function (state) {\n if (!isNullOrUndefined(this.inputElement)) {\n if (state || this.mode === 'CheckBox') {\n this.inputElement.setAttribute('readonly', 'true');\n }\n else {\n this.inputElement.removeAttribute('readonly');\n }\n }\n };\n MultiSelect.prototype.updateClearButton = function (state) {\n if (state) {\n if (this.overAllClear.parentNode) {\n this.overAllClear.style.display = '';\n }\n else {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n this.componentWrapper.classList.remove(CLOSE_ICON_HIDE);\n }\n else {\n this.overAllClear.style.display = 'none';\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n };\n MultiSelect.prototype.updateCssClass = function () {\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n var updatedCssClassValues = this.cssClass;\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n if (updatedCssClassValues !== '') {\n addClass([this.overAllWrapper], updatedCssClassValues.split(' '));\n addClass([this.popupWrapper], updatedCssClassValues.split(' '));\n }\n }\n };\n MultiSelect.prototype.updateOldPropCssClass = function (oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n if (oldClass !== '') {\n removeClass([this.overAllWrapper], oldClass.split(' '));\n removeClass([this.popupWrapper], oldClass.split(' '));\n }\n }\n };\n MultiSelect.prototype.onPopupShown = function (e) {\n var _this = this;\n if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n window.onpopstate = function () {\n proxy_1.hidePopup();\n proxy_1.inputElement.focus();\n };\n history.pushState({}, '');\n }\n var animModel = { name: 'FadeIn', duration: 100 };\n var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };\n this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.focusAtFirstListItem();\n if (_this.popupObj) {\n document.body.appendChild(_this.popupObj.element);\n }\n if (_this.mode === 'CheckBox' && _this.enableGroupCheckBox && !isNullOrUndefined(_this.fields.groupBy)) {\n _this.updateListItems(_this.list.querySelectorAll('li.e-list-item'), _this.mainList.querySelectorAll('li.e-list-item'));\n }\n if (_this.mode === 'CheckBox' || _this.showDropDownIcon) {\n addClass([_this.overAllWrapper], [iconAnimation]);\n }\n _this.refreshPopup();\n _this.renderReactTemplates();\n if (_this.popupObj) {\n _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);\n }\n attributes(_this.inputElement, {\n 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id\n });\n _this.updateAriaActiveDescendant();\n if (_this.isFirstClick) {\n if (!_this.enableVirtualization) {\n _this.loadTemplate();\n }\n }\n if (_this.mode === 'CheckBox' && _this.showSelectAll) {\n EventHandler.add(_this.popupObj.element, 'click', _this.clickHandler, _this);\n }\n }\n });\n };\n MultiSelect.prototype.updateVirtualReOrderList = function (isCheckBoxUpdate) {\n var query = this.getForQuery(this.value, true).clone();\n if (this.enableVirtualization && this.dataSource instanceof DataManager) {\n this.resetList(this.selectedListData, this.fields, query);\n }\n else {\n this.resetList(this.dataSource, this.fields, query);\n }\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.virtualItemCount = this.itemCount;\n if (this.mode !== 'CheckBox') {\n this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n if (this.list.querySelector('.e-virtual-ddl-content')) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n }\n if (isCheckBoxUpdate) {\n this.loadTemplate();\n }\n };\n MultiSelect.prototype.updateListItems = function (listItems, mainListItems) {\n for (var i = 0; i < listItems.length; i++) {\n this.findGroupStart(listItems[i]);\n this.findGroupStart(mainListItems[i]);\n }\n this.deselectHeader();\n };\n MultiSelect.prototype.loadTemplate = function () {\n this.refreshListItems(null);\n if (this.enableVirtualization && this.list && this.mode === 'CheckBox') {\n var reOrderList = this.list.querySelectorAll('.e-reorder')[0];\n if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList) {\n this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);\n }\n }\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n }\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n this.isPreventScrollAction = true;\n };\n MultiSelect.prototype.setScrollPosition = function () {\n if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&\n (!isNullOrUndefined(this.value) && (this.value.length > 0))) {\n var value = this.allowObjectBinding\n ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1])\n : this.value[this.value.length - 1];\n var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);\n if (!isNullOrUndefined(valueEle)) {\n this.scrollBottom(valueEle);\n }\n }\n if (this.enableVirtualization) {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n this.isKeyBoardAction = false;\n this.scrollBottom(focusedItem);\n }\n };\n MultiSelect.prototype.focusAtFirstListItem = function () {\n if (this.ulElement && this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li)) {\n var element = void 0;\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n return;\n }\n else {\n if (this.enableVirtualization) {\n if (this.fields.disabled) {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)' + ':not(.' + DISABLED$1 + ')');\n }\n else {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');\n }\n }\n else {\n if (this.fields.disabled) {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')' + ':not(.' + DISABLED$1 + ')');\n }\n else {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')');\n }\n }\n }\n if (element !== null) {\n this.removeFocus();\n this.addListFocus(element);\n }\n }\n };\n MultiSelect.prototype.focusAtLastListItem = function (data) {\n var activeElement;\n if (data) {\n activeElement = Search(data, this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n if (this.value && this.value.length) {\n var value = this.allowObjectBinding\n ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1])\n : this.value[this.value.length - 1];\n Search(value, this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n activeElement = null;\n }\n }\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() &&\n this.closePopupOnSelect && !this.enableVirtualization) || this.closePopupOnSelect && !this.enableVirtualization) {\n this.scrollBottom(activeElement.item, activeElement.index);\n }\n }\n };\n MultiSelect.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-disabled': 'false',\n 'role': 'combobox',\n 'aria-expanded': 'false'\n };\n return ariaAttributes;\n };\n MultiSelect.prototype.updateListARIA = function () {\n if (!isNullOrUndefined(this.ulElement)) {\n attributes(this.ulElement, {\n 'id': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-hidden': 'false',\n 'aria-label': 'list'\n });\n }\n var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;\n if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {\n attributes(this.inputElement, this.getAriaAttributes());\n }\n if (disableStatus) {\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n this.ensureAriaDisabled((disableStatus) ? 'true' : 'false');\n };\n MultiSelect.prototype.ensureAriaDisabled = function (status) {\n if (this.htmlAttributes && this.htmlAttributes['aria-disabled']) {\n var attr = this.htmlAttributes;\n extend(attr, { 'aria-disabled': status }, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n }\n };\n MultiSelect.prototype.removelastSelection = function (e) {\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n if (selectedElem !== null) {\n this.removeSelectedChip(e);\n return;\n }\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1);\n var value = elements[elements.length - 1].getAttribute('data-value');\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();\n }\n var customValue = this.allowObjectBinding ?\n this.getDataByValue(this.getFormattedValue(value)) : this.getFormattedValue(value);\n if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&\n customValue.toString() === 'NaN'))) {\n customValue = value;\n }\n this.removeValue(customValue, e);\n this.removeChipSelection();\n this.updateDelimeter(this.delimiterChar, e);\n this.makeTextBoxEmpty();\n if (this.mainList && this.listData) {\n this.refreshSelection();\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n this.renderPopup();\n this.onPopupShown();\n };\n MultiSelect.prototype.targetElement = function () {\n this.targetInputElement = this.inputElement;\n if (this.mode === 'CheckBox' && this.allowFiltering) {\n this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n return this.targetInputElement.value;\n };\n MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {\n var predicate;\n var field = this.isPrimitiveData ? '' : this.fields.value;\n if (this.enableVirtualization && valuecheck) {\n if (isCheckbox) {\n for (var i = 0; i < valuecheck.length; i++) {\n var value = this.allowObjectBinding ? getValue((this.fields.value) ?\n this.fields.value : '', valuecheck[i]) : valuecheck[i];\n if (i === 0) {\n predicate = new Predicate(field, 'equal', (value));\n }\n else {\n predicate = predicate.or(field, 'equal', (value));\n }\n }\n return new Query().where(predicate);\n }\n else {\n for (var i = 0; i < valuecheck.length; i++) {\n var value = this.allowObjectBinding ? getValue((this.fields.value) ?\n this.fields.value : '', valuecheck[i]) : valuecheck[i];\n if (i === 0) {\n predicate = new Predicate(field, 'notequal', (value));\n }\n else {\n predicate = predicate.and(field, 'notequal', (value));\n }\n }\n return new Query().where(predicate);\n }\n }\n else {\n for (var i = 0; i < valuecheck.length; i++) {\n if (i === 0) {\n predicate = new Predicate(field, 'equal', valuecheck[i]);\n }\n else {\n predicate = predicate.or(field, 'equal', valuecheck[i]);\n }\n }\n }\n if (this.dataSource instanceof DataManager && this.dataSource.adaptor instanceof JsonAdaptor) {\n return new Query().where(predicate);\n }\n else {\n return this.getQuery(this.query).clone().where(predicate);\n }\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = e.count;\n }\n /* eslint-enable @typescript-eslint/no-unused-vars */\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&\n ((!(this.dataSource instanceof DataManager)) ||\n ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;\n this.updateSelectElementData(this.allowFiltering);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization &&\n this.listData && this.listData.length > 0) {\n for (var i = 0; i < this.value.length; i++) {\n var value = this.allowObjectBinding ? getValue((this.fields.value) ?\n this.fields.value : '', proxy.value[i]) : proxy.value[i];\n var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);\n if (!checkEle && !(this.dataSource instanceof DataManager)) {\n this.value.splice(i, 1);\n i -= 1;\n }\n }\n }\n var valuecheck = [];\n if (!isNullOrUndefined(this.value)) {\n valuecheck = this.presentItemValue(this.ulElement);\n }\n if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)\n && this.listData != null && !this.enableVirtualization) {\n this.addNonPresentItems(valuecheck, this.ulElement, this.listData);\n }\n else {\n this.updateActionList(ulElement, list, e);\n }\n if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered &&\n this.inputElement.value && this.inputElement.value !== '') {\n var query = new Query();\n query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;\n this.checkForCustomValue(query, this.fields);\n this.isCustomRendered = true;\n this.remoteCustomValue = this.enableVirtualization ? false : this.remoteCustomValue;\n }\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy) && !isNullOrUndefined(this.fields.disabled)) {\n this.disableGroupHeader();\n }\n if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {\n this.removeFocus();\n }\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n MultiSelect.prototype.updateActionList = function (ulElement, list, e, isUpdated) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n if (!this.mainList && !this.mainData) {\n this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.mainData = list;\n this.mainListCollection = this.liCollections;\n }\n else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {\n this.mainData = list;\n }\n if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&\n this.inputElement.value && this.inputElement.value !== '') {\n this.checkForCustomValue(this.tempQuery, this.fields);\n if (this.isCustomRendered) {\n return;\n }\n }\n if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) &&\n this.inputElement.value.trim() !== '') ||\n this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&\n this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {\n this.refreshSelection();\n }\n this.updateListARIA();\n this.unwireListEvents();\n this.wireListEvents();\n if (!isNullOrUndefined(this.setInitialValue)) {\n this.setInitialValue();\n }\n if (!isNullOrUndefined(this.selectAllAction)) {\n this.selectAllAction();\n }\n if (this.setDynValue) {\n if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.initialTextUpdate();\n }\n if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {\n this.initialValueUpdate();\n }\n this.initialUpdate();\n this.refreshPlaceHolder();\n if (this.mode !== 'CheckBox' && this.changeOnBlur) {\n this.updateValueState(null, this.value, null);\n }\n }\n this.renderPopup();\n if (this.beforePopupOpen) {\n this.beforePopupOpen = false;\n this.onPopupShown(e);\n }\n };\n MultiSelect.prototype.refreshSelection = function () {\n var value;\n var element;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) :\n this.value[index];\n element = this.findListElement(this.list, 'li', 'data-value', value);\n if (element) {\n addClass([element], className);\n if (this.hideSelectedItem && element.previousSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group)\n && (!element.nextElementSibling ||\n element.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n addClass([element.previousElementSibling], className);\n }\n if (this.hideSelectedItem && this.fields.groupBy && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n this.hideGroupItem(value);\n }\n if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {\n removeClass([element], dropDownBaseClasses.focus);\n var listEle = element.parentElement.querySelectorAll('.' +\n dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n if (listEle.length > 0) {\n addClass([listEle[0]], dropDownBaseClasses.focus);\n this.updateAriaActiveDescendant();\n }\n else {\n //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;)\n if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {\n this.l10nUpdate();\n addClass([this.list], dropDownBaseClasses.noData);\n }\n }\n }\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {\n var ariaValue = element.getElementsByClassName('e-check').length;\n if (ariaValue === 0) {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n li: element,\n e: null\n };\n this.notify('updatelist', args);\n }\n }\n }\n }\n }\n this.checkSelectAll();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.hideGroupItem = function (value) {\n var element;\n var element1;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n element1 = element = this.findListElement(this.ulElement, 'li', 'data-value', value);\n var i = 0;\n var j = 0;\n var temp = true;\n var temp1 = true;\n do {\n if (element && element.previousElementSibling\n && (!element.previousElementSibling.classList.contains(HIDE_LIST) &&\n element.previousElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp = false;\n }\n if (!temp || !element || (element.previousElementSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group))) {\n i = 10;\n }\n else {\n element = element.previousElementSibling;\n }\n if (element1 && element1.nextElementSibling\n && (!element1.nextElementSibling.classList.contains(HIDE_LIST) &&\n element1.nextElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp1 = false;\n }\n if (!temp1 || !element1 || (element1.nextElementSibling\n && element1.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n j = 10;\n }\n else {\n element1 = element1.nextElementSibling;\n }\n } while (i < 10 || j < 10);\n if (temp && temp1 && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n addClass([element.previousElementSibling], className);\n }\n else if (temp && temp1 && element.previousElementSibling.classList.contains(HIDE_LIST)) {\n removeClass([element.previousElementSibling], className);\n }\n };\n MultiSelect.prototype.getValidLi = function () {\n var liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n return (!isNullOrUndefined(liElement) ? liElement : this.liCollections[0]);\n };\n MultiSelect.prototype.checkSelectAll = function () {\n var groupItemLength = !isNullOrUndefined(this.fields.disabled) ? this.list.querySelectorAll('li.e-list-group-item.e-active:not(.e-disabled)').length : this.list.querySelectorAll('li.e-list-group-item.e-active').length;\n var listItem = this.list.querySelectorAll('li.e-list-item');\n var searchCount = this.enableVirtualization ? this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)').length : !isNullOrUndefined(this.fields.disabled) ? this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-disabled)').length : this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;\n var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;\n if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n searchActiveCount = searchActiveCount - groupItemLength;\n }\n if ((!this.enableVirtualization && ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)\n && (this.mode === 'CheckBox' && this.showSelectAll))) || (this.enableVirtualization && this.mode === 'CheckBox' &&\n this.showSelectAll && this.virtualSelectAll && this.value && this.value.length === this.totalItemCount)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });\n }\n else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll) &&\n ((!this.enableVirtualization) || (this.enableVirtualization && !this.virtualSelectAll))) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (this.enableGroupCheckBox && this.fields.groupBy && !this.enableSelectionOrder) {\n for (var i = 0; i < listItem.length; i++) {\n this.findGroupStart(listItem[i]);\n }\n this.deselectHeader();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.openClick = function (e) {\n if (!this.openOnClick && this.mode !== 'CheckBox' && !this.isPopupOpen()) {\n if (this.targetElement() !== '') {\n this.showPopup();\n }\n else {\n this.hidePopup(e);\n }\n }\n else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {\n this.showPopup();\n }\n };\n MultiSelect.prototype.keyUp = function (e) {\n if (this.mode === 'CheckBox' && !this.openOnClick) {\n var char = String.fromCharCode(e.keyCode);\n var isWordCharacter = char.match(/\\w/);\n if (!isNullOrUndefined(isWordCharacter)) {\n this.isValidKey = true;\n }\n }\n this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;\n this.isValidKey = e.ctrlKey && e.keyCode === 86 ? false : this.isValidKey;\n if (this.isValidKey && this.inputElement) {\n this.isValidKey = false;\n this.expandTextbox();\n this.showOverAllClear();\n switch (e.keyCode) {\n default:\n // For filtering works in mobile firefox\n this.search(e);\n }\n }\n };\n /**\n * To filter the multiselect data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n */\n MultiSelect.prototype.filter = function (dataSource, query, fields) {\n this.isFiltered = true;\n this.remoteFilterAction = true;\n this.dataUpdater(dataSource, query, fields);\n };\n MultiSelect.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n if (this.isFiltered) {\n if ((this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery))) {\n filterQuery = this.customFilterQuery.clone();\n }\n else if (!this.enableVirtualization) {\n return filterQuery;\n }\n }\n if (this.filterAction) {\n if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization &&\n this.targetElement() !== null && this.targetElement().trim() !== '')) {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n else if ((this.enableVirtualization && this.targetElement() !== '') || !this.enableVirtualization) {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n }\n if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {\n return this.virtualFilterQuery(filterQuery);\n }\n return filterQuery;\n }\n else {\n if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {\n return this.virtualFilterQuery(filterQuery);\n }\n if (this.virtualSelectAll) {\n return query ? query.take(this.maximumSelectionLength).requiresCount() : this.query ?\n this.query.take(this.maximumSelectionLength).requiresCount() :\n new Query().take(this.maximumSelectionLength).requiresCount();\n }\n return query ? query : this.query ? this.query : new Query();\n }\n };\n MultiSelect.prototype.virtualFilterQuery = function (filterQuery) {\n var takeValue = this.getTakeValue();\n var isReOrder = true;\n var isSkip = true;\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (this.getModuleName() === 'multiselect' && ((filterQuery.queries[queryElements].e &&\n filterQuery.queries[queryElements].e.condition === 'or') || (filterQuery.queries[queryElements].e &&\n filterQuery.queries[queryElements].e.operator === 'equal'))) {\n isReOrder = false;\n }\n if (filterQuery.queries[queryElements].fn === 'onSkip') {\n isSkip = false;\n }\n if (filterQuery.queries[queryElements].fn === 'onTake') ;\n }\n var queryTakeValue = 0;\n if (filterQuery && filterQuery.queries.length > 0) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos ?\n filterQuery.queries[queryElements].e.nos : takeValue;\n }\n }\n }\n if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {\n for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {\n if (this.query.queries[queryElements].fn === 'onTake') {\n queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ?\n this.query.queries[queryElements].e.nos : takeValue;\n }\n }\n }\n if (filterQuery && filterQuery.queries.length > 0) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ?\n queryTakeValue : filterQuery.queries[queryElements].e.nos;\n filterQuery.queries.splice(queryElements, 1);\n --queryElements;\n }\n }\n }\n if ((this.allowFiltering && isSkip) || !isReOrder || (!this.allowFiltering && isSkip)) {\n if (!isReOrder) {\n filterQuery.skip(this.viewPortInfo.startIndex);\n }\n else {\n filterQuery.skip(this.virtualItemStartIndex);\n }\n }\n if (this.isIncrementalRequest) {\n filterQuery.take(this.incrementalEndIndex);\n }\n else if (queryTakeValue > 0) {\n filterQuery.take(queryTakeValue);\n }\n else {\n filterQuery.take(takeValue);\n }\n filterQuery.requiresCount();\n return filterQuery;\n };\n MultiSelect.prototype.getTakeValue = function () {\n return this.allowFiltering && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;\n };\n MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {\n this.isDataFetched = false;\n var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);\n if (this.targetElement().trim() === '') {\n var list = this.enableVirtualization ? this.list.cloneNode(true) : this.mainList.cloneNode ?\n this.mainList.cloneNode(true) : this.mainList;\n if (this.backCommand || (this.enableVirtualization && this.mode === 'CheckBox' && this.value && this.value.length > 0)) {\n this.remoteCustomValue = false;\n var isReordered = false;\n if (this.allowCustomValue && list.querySelectorAll('li').length === 0 && this.mainData.length > 0) {\n this.mainData = [];\n }\n if (this.enableVirtualization) {\n if (this.allowFiltering) {\n this.isPreventScrollAction = true;\n this.list.scrollTop = 0;\n this.previousStartIndex = 0;\n this.virtualListInfo = null;\n }\n if (this.value && this.value.length > 0 && this.mode === 'CheckBox') {\n this.notify('setCurrentViewDataAsync', {\n component: this.getModuleName(),\n module: 'VirtualScroll'\n });\n isReordered = true;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n this.resetList(dataSource, fields, query);\n if (this.mode !== 'CheckBox') {\n this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length :\n this.totalItemCount;\n }\n this.UpdateSkeleton();\n if ((isNoData || this.allowCustomValue) && !this.list.classList.contains(dropDownBaseClasses.noData)) {\n if (!this.list.querySelector('.e-virtual-ddl-content')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n })).appendChild(this.list.querySelector('.e-list-parent'));\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n }\n }\n }\n this.onActionComplete(list, this.mainData);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n if (this.keyCode !== 8) {\n this.focusAtFirstListItem();\n }\n if (!isReordered) {\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n }\n }\n }\n else {\n if (this.enableVirtualization && this.allowFiltering) {\n this.isPreventScrollAction = true;\n this.list.scrollTop = 0;\n this.previousStartIndex = 0;\n this.virtualListInfo = null;\n if (this.list.querySelector('.e-list-parent' + '.e-reorder')) {\n this.list.querySelector('.e-list-parent' + '.e-reorder').remove();\n }\n }\n this.resetList(dataSource, fields, query);\n if (this.enableVirtualization && (isNoData || this.allowCustomValue) &&\n !this.list.classList.contains(dropDownBaseClasses.noData)) {\n if (!this.list.querySelector('.e-virtual-ddl-content')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n })).appendChild(this.list.querySelector('.e-list-parent'));\n }\n if (this.mode !== 'CheckBox') {\n this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n }\n if (this.allowCustomValue) {\n if (!(dataSource instanceof DataManager)) {\n this.checkForCustomValue(query, fields);\n }\n else {\n this.remoteCustomValue = true;\n this.tempQuery = query;\n }\n }\n }\n if (this.enableVirtualization && this.allowFiltering) {\n this.getFilteringSkeletonCount();\n }\n this.refreshPopup();\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n }\n };\n MultiSelect.prototype.checkForCustomValue = function (query, fields) {\n var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);\n var field = fields ? fields : this.fields;\n if (this.allowCustomValue && dataChecks) {\n var value = this.inputElement.value;\n var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?\n this.mainData[0] : this.mainData;\n if (customData && typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {\n var dataItem_1 = {};\n setValue(field.text, value, dataItem_1);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)\n === 'number' && this.fields.value !== this.fields.text) {\n setValue(field.value, Math.random(), dataItem_1);\n }\n else {\n setValue(field.value, value, dataItem_1);\n }\n var emptyObject_1 = {};\n if (this.allowObjectBinding) {\n var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : this.firstItem ?\n Object.keys(this.firstItem) : Object.keys(dataItem_1);\n // Create an empty object with predefined keys\n keys.forEach(function (key) {\n emptyObject_1[key] = ((key === fields.value) || (key === fields.text)) ?\n getValue(fields.value, dataItem_1) : null;\n });\n }\n dataItem_1 = this.allowObjectBinding ? emptyObject_1 : dataItem_1;\n if (this.enableVirtualization) {\n this.virtualCustomData = dataItem_1;\n var tempData = this.dataSource instanceof DataManager ?\n JSON.parse(JSON.stringify(this.listData)) : JSON.parse(JSON.stringify(this.dataSource));\n var totalData = [];\n if (this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {\n totalData = tempData.concat(this.virtualCustomSelectData);\n }\n tempData.splice(0, 0, dataItem_1);\n this.isCustomDataUpdated = true;\n var tempCount = this.totalItemCount;\n this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;\n this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;\n this.resetList(tempData, field, query);\n this.isCustomDataUpdated = false;\n this.totalItemCount = this.enableVirtualization && this.dataSource instanceof DataManager ?\n tempCount : this.totalItemCount;\n }\n else {\n if (this.dataSource instanceof DataManager && this.allowCustomValue && this.allowFiltering) {\n this.remoteCustomValue = false;\n }\n var tempData = JSON.parse(JSON.stringify(this.listData));\n tempData.splice(0, 0, dataItem_1);\n this.resetList(tempData, field, query);\n }\n }\n else if (this.listData) {\n var tempData = JSON.parse(JSON.stringify(this.listData));\n tempData.splice(0, 0, this.inputElement.value);\n tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?\n parseFloat(tempData[0]) : tempData[0];\n tempData[0] = (typeof customData === 'boolean') ?\n (tempData[0] === 'true' ? true : (tempData[0] === 'false' ? false : tempData[0])) : tempData[0];\n this.resetList(tempData, field);\n }\n }\n else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {\n if (this.allowFiltering && this.isRemoteSelection && this.remoteCustomValue) {\n this.isRemoteSelection = false;\n if (!this.enableVirtualization) {\n this.resetList(this.listData, field, query);\n }\n }\n else if (!this.allowFiltering && this.list) {\n var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');\n var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n }\n }\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.getNgDirective = function () {\n return 'EJS-MULTISELECT';\n };\n MultiSelect.prototype.wrapperClick = function (e) {\n this.setDynValue = false;\n this.keyboardEvent = null;\n this.isKeyBoardAction = false;\n if (!this.enabled) {\n return;\n }\n if (e.target === this.overAllClear) {\n e.preventDefault();\n return;\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n if (!this.readonly) {\n if (e.target && e.target.classList.toString().indexOf(CHIP_CLOSE$1) !== -1) {\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return;\n }\n if (!this.isPopupOpen() &&\n (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {\n this.showPopup(e);\n }\n else {\n this.hidePopup(e);\n if (this.mode === 'CheckBox') {\n this.showOverAllClear();\n this.inputFocus = true;\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n }\n }\n }\n if (!(this.targetElement() && this.targetElement() !== '')) {\n e.preventDefault();\n }\n };\n MultiSelect.prototype.enable = function (state) {\n if (state) {\n this.overAllWrapper.classList.remove(DISABLED$1);\n this.inputElement.removeAttribute('disabled');\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.ensureAriaDisabled('false');\n }\n else {\n this.overAllWrapper.classList.add(DISABLED$1);\n this.inputElement.setAttribute('disabled', 'true');\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.ensureAriaDisabled('true');\n }\n if (this.enabled !== state) {\n this.enabled = state;\n }\n this.hidePopup();\n };\n MultiSelect.prototype.onBlurHandler = function (eve, isDocClickFromCheck) {\n var target;\n if (!isNullOrUndefined(eve)) {\n target = eve.relatedTarget;\n }\n if (this.popupObj && document.body.contains(this.popupObj.element) && this.popupObj.element.contains(target)) {\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n else if ((this.floatLabelType === 'Auto' &&\n ((this.overAllWrapper.classList.contains('e-outline')) || (this.overAllWrapper.classList.contains('e-filled'))))) {\n addClass([this.overAllWrapper], 'e-valid-input');\n }\n return;\n }\n if (this.floatLabelType === 'Auto' && (this.overAllWrapper.classList.contains('e-outline')) && this.mode === 'CheckBox' &&\n ((isNullOrUndefined(this.value)) || this.value.length === 0)) {\n removeClass([this.overAllWrapper], 'e-valid-input');\n }\n if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve) && !isDocClickFromCheck) {\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n return;\n }\n if (this.scrollFocusStatus) {\n if (!isNullOrUndefined(eve)) {\n eve.preventDefault();\n }\n this.inputElement.focus();\n this.scrollFocusStatus = false;\n return;\n }\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n if (this.addTagOnBlur) {\n var dataChecks = this.getValueByText(this.inputElement.value, this.ignoreCase, this.ignoreAccent);\n var listLiElement = this.findListElement(this.list, 'li', 'data-value', dataChecks);\n var className = this.hideSelectedItem ? HIDE_LIST : dropDownBaseClasses.selected;\n var allowChipAddition = (listLiElement && !listLiElement.classList.contains(className)) ? true : false;\n if (allowChipAddition) {\n this.updateListSelection(listLiElement, eve);\n if (this.mode === 'Delimiter') {\n this.updateDelimeter(this.delimiterChar);\n }\n }\n }\n this.updateDataList();\n if (this.resetMainList) {\n this.mainList = this.resetMainList;\n this.resetMainList = null;\n }\n this.refreshListItems(null);\n if (this.mode !== 'Box' && this.mode !== 'CheckBox') {\n this.updateDelimView();\n }\n if (this.changeOnBlur) {\n this.updateValueState(eve, this.value, this.tempValues);\n this.dispatchEvent(this.hiddenElement, 'change');\n }\n this.overAllClear.style.display = 'none';\n if (this.isPopupOpen()) {\n this.hidePopup(eve);\n }\n this.makeTextBoxEmpty();\n this.trigger('blur');\n this.focused = true;\n if (Browser.isDevice && this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.removeChipFocus();\n }\n this.removeChipSelection();\n this.refreshInputHight();\n floatLabelBlur(this.overAllWrapper, this.componentWrapper, this.value, this.floatLabelType, this.placeholder);\n this.refreshPlaceHolder();\n if ((this.allowFiltering || (this.enableSelectionOrder === true && this.mode === 'CheckBox'))\n && !isNullOrUndefined(this.mainList)) {\n this.ulElement = this.mainList;\n }\n this.checkPlaceholderSize();\n Input.createSpanElement(this.overAllWrapper, this.createElement);\n this.calculateWidth();\n if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n };\n MultiSelect.prototype.calculateWidth = function () {\n var elementWidth;\n if (this.overAllWrapper) {\n if (!this.showDropDownIcon || this.overAllWrapper.querySelector('.' + 'e-label-top')) {\n elementWidth = this.overAllWrapper.clientWidth - 2 * (parseInt(getComputedStyle(this.inputElement).paddingRight, 10));\n }\n else {\n var downIconWidth = this.dropIcon.offsetWidth +\n parseInt(getComputedStyle(this.dropIcon).marginRight, 10);\n elementWidth = this.overAllWrapper.clientWidth -\n (downIconWidth + 2 * (parseInt(getComputedStyle(this.inputElement).paddingRight, 10)));\n }\n if (this.floatLabelType !== 'Never') {\n Input.calculateWidth(elementWidth, this.overAllWrapper, this.getModuleName());\n }\n }\n };\n MultiSelect.prototype.checkPlaceholderSize = function () {\n if (this.showDropDownIcon) {\n var downIconWidth = this.dropIcon.offsetWidth +\n parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);\n this.setPlaceholderSize(downIconWidth);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.setPlaceholderSize(this.showDropDownIcon ? this.dropIcon.offsetWidth : 0);\n }\n }\n };\n MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {\n if (isNullOrUndefined(this.value) || this.value.length === 0) {\n if (this.dropIcon.offsetWidth !== 0) {\n this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';\n }\n else {\n addClass([this.searchWrapper], CUSTOM_WIDTH);\n }\n }\n else if (!isNullOrUndefined(this.value)) {\n this.searchWrapper.removeAttribute('style');\n removeClass([this.searchWrapper], CUSTOM_WIDTH);\n }\n };\n MultiSelect.prototype.refreshInputHight = function () {\n if (!isNullOrUndefined(this.searchWrapper)) {\n if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n else {\n this.searchWrapper.classList.add(ZERO_SIZE);\n }\n }\n };\n MultiSelect.prototype.validateValues = function (newValue, oldValue) {\n return JSON.stringify(newValue.slice().sort()) !== JSON.stringify(oldValue.slice().sort());\n };\n MultiSelect.prototype.updateValueState = function (event, newVal, oldVal) {\n var newValue = newVal ? newVal : [];\n var oldValue = oldVal ? oldVal : [];\n if (this.initStatus && this.validateValues(newValue, oldValue)) {\n var eventArgs = {\n e: event,\n oldValue: this.allowObjectBinding ? oldVal : oldVal,\n value: this.allowObjectBinding ? newVal : newVal,\n isInteracted: event ? true : false,\n element: this.element,\n event: event\n };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.updateTempValue();\n if (!this.changeOnBlur) {\n this.dispatchEvent(this.hiddenElement, 'change');\n }\n }\n this.selectedValueInfo = this.viewPortInfo;\n };\n MultiSelect.prototype.updateTempValue = function () {\n if (!this.value) {\n this.tempValues = this.value;\n }\n else {\n this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();\n }\n };\n MultiSelect.prototype.updateAriaActiveDescendant = function () {\n if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {\n attributes(this.inputElement, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });\n }\n };\n MultiSelect.prototype.pageUpSelection = function (steps, isVirtualKeyAction) {\n var collection = this.list.querySelectorAll('li.' + dropDownBaseClasses.li +\n ':not(.' + HIDE_LIST + ')' +\n ':not(.e-reorder-hide)');\n var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];\n if (this.enableVirtualization && isVirtualKeyAction) {\n previousItem = (this.liCollections.length >= steps && steps >= 0)\n ? this.liCollections[steps]\n : this.liCollections[this.skeletonCount];\n }\n if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {\n previousItem = this.liCollections[this.skeletonCount];\n }\n if (this.enableVirtualization) {\n if (!isNullOrUndefined(previousItem) && !previousItem.classList.contains('e-item-focus')) {\n this.isKeyBoardAction = true;\n this.addListFocus(previousItem);\n this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);\n }\n else if (this.viewPortInfo.startIndex === 0) {\n this.isKeyBoardAction = true;\n this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);\n }\n this.previousFocusItem = previousItem;\n }\n else {\n this.isKeyBoardAction = true;\n this.addListFocus(previousItem);\n this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);\n }\n };\n MultiSelect.prototype.pageDownSelection = function (steps, isVirtualKeyAction) {\n var list = this.getItems();\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];\n if (this.enableVirtualization && this.skeletonCount > 0) {\n previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];\n }\n if (this.enableVirtualization && isVirtualKeyAction) {\n previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];\n }\n this.isKeyBoardAction = true;\n this.addListFocus(previousItem);\n this.previousFocusItem = previousItem;\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), false, this.keyboardEvent.keyCode);\n };\n MultiSelect.prototype.getItems = function () {\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n return this.ulElement && this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li).length > 0 ?\n this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')') : [];\n };\n MultiSelect.prototype.focusInHandler = function (e) {\n var _this = this;\n if (this.enabled) {\n this.showOverAllClear();\n this.inputFocus = true;\n if (this.value && this.value.length) {\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n if (this.mode !== 'CheckBox') {\n this.viewWrapper.style.display = 'none';\n }\n }\n if (this.mode !== 'CheckBox') {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n this.checkPlaceholderSize();\n if (this.focused) {\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n this.focused = false;\n }\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n floatLabelFocus(this.overAllWrapper, this.componentWrapper);\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n setTimeout(function () {\n _this.calculateWidth();\n }, 150);\n return true;\n }\n else {\n return false;\n }\n };\n MultiSelect.prototype.showDelimWrapper = function () {\n if (this.mode === 'CheckBox') {\n this.viewWrapper.style.display = '';\n }\n else {\n this.delimiterWrapper.style.display = '';\n }\n this.componentWrapper.classList.add(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.hideDelimWrapper = function () {\n this.delimiterWrapper.style.display = 'none';\n this.componentWrapper.classList.remove(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.expandTextbox = function () {\n var size = 5;\n if (this.placeholder) {\n var codePoint = this.placeholder.charCodeAt(0);\n var sizeMultiplier = (0xAC00 <= codePoint && codePoint <= 0xD7AF) ? 1.5\n : (0x4E00 <= codePoint && codePoint <= 0x9FFF) ? 2 : 1;\n size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length * sizeMultiplier;\n }\n if (this.inputElement.value.length > size) {\n this.inputElement.size = this.inputElement.value.length;\n }\n else {\n this.inputElement.size = size;\n }\n };\n MultiSelect.prototype.isPopupOpen = function () {\n return ((this.popupWrapper !== null) && (this.popupWrapper.parentElement !== null));\n };\n MultiSelect.prototype.refreshPopup = function () {\n if (this.popupObj && this.mobFilter) {\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n this.popupObj.refreshPosition(this.overAllWrapper);\n this.popupObj.resolveCollision();\n }\n };\n MultiSelect.prototype.checkTextLength = function () {\n return this.targetElement().length < 1;\n };\n MultiSelect.prototype.popupKeyActions = function (e) {\n switch (e.keyCode) {\n case 38:\n this.hidePopup(e);\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n e.preventDefault();\n break;\n case 40:\n if (!this.isPopupOpen()) {\n this.showPopup(e);\n e.preventDefault();\n }\n break;\n }\n };\n MultiSelect.prototype.updateAriaAttribute = function () {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(focusedItem)) {\n this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);\n if (this.allowFiltering) {\n var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);\n if (filterInput) {\n filterInput.setAttribute('aria-activedescendant', focusedItem.id);\n }\n }\n else if (this.mode === 'CheckBox') {\n this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);\n }\n }\n };\n MultiSelect.prototype.homeNavigation = function (isHome, isVirtualKeyAction) {\n this.removeFocus();\n if (this.enableVirtualization) {\n if (isHome) {\n if (this.enableVirtualization && this.viewPortInfo.startIndex !== 0) {\n this.viewPortInfo.startIndex = 0;\n this.viewPortInfo.endIndex = this.itemCount;\n this.updateVirtualItemIndex();\n this.resetList(this.dataSource, this.fields, this.query);\n }\n }\n else {\n if (this.enableVirtualization && ((!this.value && this.viewPortInfo.endIndex !== this.totalItemCount) ||\n (this.value && this.value.length > 0 && this.viewPortInfo.endIndex !== this.totalItemCount + this.value.length))) {\n this.viewPortInfo.startIndex = this.totalItemCount - this.itemCount;\n this.viewPortInfo.endIndex = this.totalItemCount;\n this.updateVirtualItemIndex();\n var query = new Query().clone();\n if (this.value && this.value.length > 0) {\n query = this.getForQuery(this.value).clone();\n query = query.skip(this.totalItemCount - this.itemCount);\n }\n this.resetList(this.dataSource, this.fields, query);\n }\n }\n }\n this.UpdateSkeleton();\n var scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (scrollEle.length > 0) {\n var element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];\n if (this.enableVirtualization && isHome) {\n element = scrollEle[this.skeletonCount];\n }\n this.removeFocus();\n element.classList.add(dropDownBaseClasses.focus);\n if (this.enableVirtualization && isHome) {\n this.scrollTop(element, undefined, this.keyboardEvent.keyCode);\n }\n else if (!isVirtualKeyAction) {\n this.scrollBottom(element, undefined, false, this.keyboardEvent.keyCode);\n }\n this.updateAriaActiveDescendant();\n }\n };\n MultiSelect.prototype.updateSelectionList = function () {\n if (!isNullOrUndefined(this.value) && this.value.length) {\n for (var index = 0; index < this.value.length; index++) {\n var value = this.allowObjectBinding ?\n getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];\n var selectedItem = this.getElementByValue(value);\n if (selectedItem && !selectedItem.classList.contains(dropDownBaseClasses.selected)) {\n selectedItem.classList.add('e-active');\n }\n }\n }\n };\n MultiSelect.prototype.handleVirtualKeyboardActions = function (e, pageCount) {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n var activeIndex;\n this.isKeyBoardAction = true;\n switch (e.keyCode) {\n case 40:\n this.arrowDown(e, true);\n break;\n case 38:\n this.arrowUp(e, true);\n break;\n case 33:\n e.preventDefault();\n if (focusedItem) {\n activeIndex = this.getIndexByValue(this.previousFocusItem.getAttribute('data-value')) - 1;\n this.pageUpSelection(activeIndex, true);\n this.updateAriaAttribute();\n }\n break;\n case 34:\n e.preventDefault();\n if (focusedItem) {\n activeIndex = this.getIndexByValue(this.previousFocusItem.getAttribute('data-value'));\n this.pageDownSelection(activeIndex, true);\n this.updateAriaAttribute();\n }\n break;\n case 35:\n case 36:\n this.isMouseScrollAction = true;\n this.homeNavigation((e.keyCode === 36) ? true : false, true);\n this.isPreventScrollAction = true;\n break;\n }\n this.keyboardEvent = null;\n this.isScrollChanged = true;\n this.isKeyBoardAction = false;\n };\n MultiSelect.prototype.onKeyDown = function (e) {\n if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {\n return;\n }\n this.preventSetCurrentData = false;\n this.keyboardEvent = e;\n if (this.isPreventKeyAction && this.enableVirtualization) {\n e.preventDefault();\n }\n this.keyCode = e.keyCode;\n this.keyDownStatus = true;\n if (e.keyCode > 111 && e.keyCode < 124) {\n return;\n }\n if (e.altKey) {\n this.popupKeyActions(e);\n return;\n }\n else if (this.isPopupOpen()) {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n var activeIndex = void 0;\n switch (e.keyCode) {\n case 36:\n case 35:\n this.isMouseScrollAction = true;\n this.isKeyBoardAction = true;\n this.homeNavigation((e.keyCode === 36) ? true : false);\n break;\n case 33:\n e.preventDefault();\n if (focusedItem) {\n activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageUpSelection(activeIndex - this.getPageCount() - 1);\n this.updateAriaAttribute();\n }\n return;\n case 34:\n e.preventDefault();\n if (focusedItem) {\n activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageDownSelection(activeIndex + this.getPageCount());\n this.updateAriaAttribute();\n }\n return;\n case 38:\n this.isKeyBoardAction = true;\n this.arrowUp(e);\n break;\n case 40:\n this.isKeyBoardAction = true;\n this.arrowDown(e);\n break;\n case 27:\n e.preventDefault();\n this.isKeyBoardAction = true;\n this.hidePopup(e);\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n return;\n case 13:\n e.preventDefault();\n this.isKeyBoardAction = true;\n if (this.mode !== 'CheckBox') {\n this.selectByKey(e);\n }\n this.checkPlaceholderSize();\n return;\n case 32:\n this.isKeyBoardAction = true;\n this.spaceKeySelection(e);\n return;\n case 9:\n e.preventDefault();\n this.isKeyBoardAction = true;\n this.hidePopup(e);\n this.inputElement.focus();\n this.overAllWrapper.classList.add(FOCUS);\n }\n }\n else {\n switch (e.keyCode) {\n case 13:\n case 9:\n case 16:\n case 17:\n case 20:\n return;\n case 40:\n if (this.openOnClick) {\n this.showPopup();\n }\n break;\n case 27:\n e.preventDefault();\n this.escapeAction();\n return;\n }\n }\n if (this.checkTextLength()) {\n this.keyNavigation(e);\n }\n if (this.mode === 'CheckBox' && this.enableSelectionOrder) {\n if (this.allowFiltering) {\n this.previousFilterText = this.targetElement();\n }\n this.checkBackCommand(e);\n }\n this.expandTextbox();\n if (!(this.mode === 'CheckBox' && this.showSelectAll)) {\n this.refreshPopup();\n }\n this.isKeyBoardAction = false;\n };\n MultiSelect.prototype.arrowDown = function (e, isVirtualKeyAction) {\n e.preventDefault();\n this.moveByList(1, isVirtualKeyAction);\n this.keyAction = true;\n if (document.activeElement.classList.contains(FILTERINPUT)\n || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {\n EventHandler.add(this.list, 'keydown', this.onKeyDown, this);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.arrowUp = function (e, isVirtualKeyAction) {\n e.preventDefault();\n this.keyAction = true;\n var list = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n list = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n }\n var focuseElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n this.focusFirstListItem = !isNullOrUndefined(this.liCollections[0]) ? this.liCollections[0].classList.contains('e-item-focus') :\n false;\n var index = Array.prototype.slice.call(list).indexOf(focuseElem);\n if (index <= 0 && (this.mode === 'CheckBox' && this.allowFiltering)) {\n this.keyAction = false;\n this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus' });\n }\n this.moveByList(-1, isVirtualKeyAction);\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.spaceKeySelection = function (e) {\n if (this.mode === 'CheckBox') {\n var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];\n if (!isNullOrUndefined(li) || (selectAllParent && selectAllParent.classList.contains('e-item-focus'))) {\n e.preventDefault();\n this.keyAction = true;\n }\n this.selectByKey(e);\n if (this.keyAction) {\n var li_1 = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(li_1) && selectAllParent && selectAllParent.classList.contains('e-item-focus')) {\n li_1.classList.remove('e-item-focus');\n }\n }\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.checkBackCommand = function (e) {\n if (e.keyCode === 8 && this.allowFiltering ? this.targetElement() !== this.previousFilterText : this.targetElement() === '') {\n this.backCommand = false;\n }\n else {\n this.backCommand = true;\n }\n };\n MultiSelect.prototype.keyNavigation = function (e) {\n if ((this.mode !== 'Delimiter' && this.mode !== 'CheckBox') && this.value && this.value.length) {\n switch (e.keyCode) {\n case 37: //left arrow\n e.preventDefault();\n this.moveBy(-1, e);\n break;\n case 39: //right arrow\n e.preventDefault();\n this.moveBy(1, e);\n break;\n case 8:\n this.removelastSelection(e);\n break;\n case 46: //del\n this.removeSelectedChip(e);\n break;\n }\n }\n else if (e.keyCode === 8 && this.mode === 'Delimiter') {\n if (this.value && this.value.length) {\n e.preventDefault();\n var temp = this.allowObjectBinding ?\n getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :\n this.value[this.value.length - 1];\n this.removeValue(this.value[this.value.length - 1], e);\n this.updateDelimeter(this.delimiterChar, e);\n this.focusAtLastListItem(temp);\n }\n }\n };\n MultiSelect.prototype.selectByKey = function (e) {\n this.removeChipSelection();\n this.selectListByKey(e);\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n };\n MultiSelect.prototype.escapeAction = function () {\n var temp = this.tempValues ? this.tempValues.slice() : [];\n if (this.allowObjectBinding) {\n temp = this.tempValues ? this.tempValues.slice() : [];\n }\n if (this.value && this.validateValues(this.value, temp)) {\n if (this.mode !== 'CheckBox') {\n this.value = temp;\n this.initialValueUpdate();\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n this.refreshPlaceHolder();\n if (this.value.length) {\n this.showOverAllClear();\n }\n else {\n this.hideOverAllClear();\n }\n }\n this.makeTextBoxEmpty();\n };\n MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode) {\n if (isInitialSelection === void 0) { isInitialSelection = false; }\n if (keyCode === void 0) { keyCode = null; }\n if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) ||\n (this.enableVirtualization && isNullOrUndefined(selectedLI))) {\n selectedLI = this.liCollections[this.skeletonCount];\n }\n var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?\n parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;\n this.isUpwardScrolling = false;\n var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;\n var lastElementValue = this.list.querySelector('li:last-of-type') ?\n this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?\n selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin))\n : selectedLI.offsetTop;\n var currentOffset = this.list.offsetHeight;\n var nextBottom = selectedLiOffsetTop - (virtualListCount * (selectedLI.offsetHeight + selectedListMargin)) +\n (selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n var isScrollerCHanged = false;\n var boxRange = selectedLiOffsetTop - (virtualListCount * (selectedLI.offsetHeight + selectedListMargin)) +\n (selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (activeIndex === 0 && !this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n var currentElementValue = selectedLI ? selectedLI.getAttribute('data-value') : null;\n var liCount = keyCode === 34 ? this.getPageCount() - 1 : 1;\n if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {\n if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue &&\n currentElementValue === lastElementValue && keyCode !== 35 && !this.isVirtualScrolling) {\n this.isPreventKeyAction = true;\n this.list.scrollTop += (selectedLI.offsetHeight + selectedListMargin) * liCount;\n this.isPreventKeyAction = this.isScrollerAtEnd() ? false : this.isPreventKeyAction;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n }\n else if (this.enableVirtualization && keyCode === 35) {\n this.isPreventKeyAction = false;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n this.list.scrollTop = this.list.scrollHeight;\n }\n else {\n if (keyCode === 34 && this.enableVirtualization && !this.isVirtualScrolling) {\n this.isPreventKeyAction = false;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n }\n this.list.scrollTop = nextOffset;\n }\n }\n else {\n this.list.scrollTop = this.virtualListInfo &&\n this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;\n }\n isScrollerCHanged = this.isKeyBoardAction;\n }\n this.isKeyBoardAction = isScrollerCHanged;\n };\n MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex, keyCode) {\n if (keyCode === void 0) { keyCode = null; }\n var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;\n var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?\n parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;\n var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?\n selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin)) :\n selectedLI.offsetTop;\n var nextOffset = selectedLiOffsetTop - (virtualListCount * (selectedLI.offsetHeight +\n selectedListMargin)) - this.list.scrollTop;\n var firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ?\n this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;\n nextOffset = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (selectedLiOffsetTop - (virtualListCount * (selectedLI.offsetHeight + selectedListMargin)) +\n (selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop);\n var isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;\n if (activeIndex === 0 && !this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0 || isPageUpKeyAction) {\n var currentElementValue = selectedLI ? selectedLI.getAttribute('data-value') : null;\n var liCount = keyCode === 33 ? this.getPageCount() - 2 : 1;\n if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue &&\n currentElementValue === firstElementValue && keyCode !== 36 && !this.isVirtualScrolling) {\n this.isUpwardScrolling = true;\n this.isPreventKeyAction = true;\n this.isKeyBoardAction = false;\n this.list.scrollTop -= (selectedLI.offsetHeight + selectedListMargin) * liCount;\n this.isPreventKeyAction = this.list.scrollTop !== 0 ? this.isPreventKeyAction : false;\n this.isPreventScrollAction = false;\n }\n else if (this.enableVirtualization && keyCode === 36) {\n this.isPreventScrollAction = false;\n this.isPreventKeyAction = true;\n this.isKeyBoardAction = false;\n this.list.scrollTo(0, 0);\n }\n else {\n if (keyCode === 33 && this.enableVirtualization && !this.isVirtualScrolling) {\n this.isPreventKeyAction = false;\n this.isKeyBoardAction = false;\n this.isPreventScrollAction = false;\n }\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n };\n MultiSelect.prototype.isScrollerAtEnd = function () {\n return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;\n };\n MultiSelect.prototype.selectListByKey = function (e) {\n var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var limit = this.value && this.value.length ? this.value.length : 0;\n var target;\n if (li !== null) {\n e.preventDefault();\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (this.isValidLI(li) && limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.addListFocus(li);\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.updateDelimeter(this.delimiterChar, e);\n this.refreshInputHight();\n this.checkPlaceholderSize();\n if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n target = li.firstElementChild.lastElementChild;\n this.findGroupStart(target);\n this.deselectHeader();\n }\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n var isFilterData = this.targetElement().trim() !== '' ? true : false;\n this.makeTextBoxEmpty();\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(li.textContent, isFilterData);\n }\n if (!this.changeOnBlur) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n this.refreshPopup();\n }\n else {\n if (!this.isValidLI(li) && limit < this.maximumSelectionLength) {\n target = li.firstElementChild.lastElementChild;\n if (target.classList.contains('e-check')) {\n this.selectAllItem(false, e, li);\n }\n else {\n this.selectAllItem(true, e, li);\n }\n }\n }\n this.refreshSelection();\n if (this.closePopupOnSelect) {\n this.hidePopup(e);\n }\n }\n var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];\n if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {\n var selectAllCheckBox = selectAllParent.childNodes[0];\n if (!selectAllCheckBox.classList.contains('e-check')) {\n selectAllCheckBox.classList.add('e-check');\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n value: 'check',\n name: 'checkSelectAll'\n };\n this.notify('checkSelectAll', args);\n this.selectAllItem(true, e, li);\n }\n else {\n selectAllCheckBox.classList.remove('e-check');\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n value: 'check',\n name: 'checkSelectAll'\n };\n this.notify('checkSelectAll', args);\n this.selectAllItem(false, e, li);\n }\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshListItems = function (data, isFilterData) {\n if ((this.allowFiltering || (this.mode === 'CheckBox' && this.enableSelectionOrder === true)\n || this.allowCustomValue) && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n if (this.enableVirtualization) {\n if (this.allowCustomValue && this.virtualCustomData && data == null && this.virtualCustomData &&\n this.viewPortInfo && this.viewPortInfo.startIndex === 0 && this.viewPortInfo.endIndex === this.itemCount) {\n this.virtualCustomData = null;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.renderItems(this.mainData, this.fields);\n }\n else {\n if (this.allowFiltering && isFilterData) {\n this.updateInitialData();\n this.onActionComplete(list, this.mainData);\n this.isVirtualTrackHeight = false;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n }\n else {\n this.onActionComplete(this.list, this.listData);\n }\n }\n }\n else {\n this.onActionComplete(list, this.mainData);\n }\n this.focusAtLastListItem(data);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n }\n else if (!isNullOrUndefined(this.fields.groupBy) && this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.removeSelectedChip = function (e) {\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n var temp;\n if (selectedElem !== null) {\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();\n }\n temp = selectedElem.nextElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n var currentChip = this.allowObjectBinding ?\n this.getDataByValue(this.getFormattedValue(selectedElem.getAttribute('data-value'))) :\n selectedElem.getAttribute('data-value');\n this.removeValue(currentChip, e);\n this.makeTextBoxEmpty();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup(e);\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.moveByTop = function (state) {\n var elements = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n var index;\n if (elements.length > 1) {\n this.removeFocus();\n index = state ? 0 : (elements.length - 1);\n this.addListFocus(elements[index]);\n this.scrollBottom(elements[index], index);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.clickHandler = function (e) {\n var targetElement = e.target;\n var filterInputClassName = targetElement.className;\n var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];\n if ((filterInputClassName === 'e-input-filter e-input' ||\n filterInputClassName === 'e-input-group e-control-wrapper e-input-focus') &&\n selectAllParent.classList.contains('e-item-focus')) {\n selectAllParent.classList.remove('e-item-focus');\n }\n };\n MultiSelect.prototype.moveByList = function (position, isVirtualKeyAction) {\n if (this.list) {\n var elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n }\n var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {\n selectedElem = this.getElementByValue(this.getFormattedValue(this.currentFocuedListElement.getAttribute('data-value')));\n }\n var temp = -1;\n var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];\n if (this.mode === 'CheckBox' && this.showSelectAll && position === 1 && !isNullOrUndefined(selectAllParent) &&\n !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length === 0 &&\n this.liCollections.length > 1) {\n if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {\n selectAllParent.classList.remove('e-item-focus');\n }\n else if (!selectAllParent.classList.contains('e-item-focus')) {\n selectAllParent.classList.add('e-item-focus');\n }\n }\n else if (elements.length) {\n if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent && position === -1)) {\n if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {\n selectAllParent.classList.remove('e-item-focus');\n }\n else if (this.focusFirstListItem && !selectAllParent.classList.contains('e-item-focus')) {\n selectAllParent.classList.add('e-item-focus');\n }\n }\n for (var index = 0; index < elements.length; index++) {\n if (elements[index] === selectedElem) {\n temp = index;\n break;\n }\n }\n if (position > 0) {\n if (temp < (elements.length - 1)) {\n this.removeFocus();\n if (this.enableVirtualization && isVirtualKeyAction) {\n this.addListFocus(elements[temp]);\n }\n else {\n if (this.enableVirtualization && elements[temp + 1].classList.contains('e-virtual-list')) {\n this.addListFocus(elements[this.skeletonCount]);\n }\n else {\n this.addListFocus(elements[++temp]);\n }\n }\n if (temp > -1) {\n this.updateCheck(elements[temp]);\n this.scrollBottom(elements[temp], temp);\n this.currentFocuedListElement = elements[temp];\n }\n }\n }\n else {\n if (temp > 0) {\n if (this.enableVirtualization) {\n var isVirtualElement = elements[temp - 1].classList.contains('e-virtual-list');\n var elementIndex = isVirtualKeyAction ? temp : temp - 1;\n if (isVirtualKeyAction || !isVirtualElement) {\n this.removeFocus();\n }\n if (isVirtualKeyAction || !isVirtualElement) {\n this.addListFocus(elements[elementIndex]);\n this.updateCheck(elements[elementIndex]);\n this.scrollTop(elements[elementIndex], temp);\n this.currentFocuedListElement = elements[elementIndex];\n }\n }\n else {\n this.removeFocus();\n this.addListFocus(elements[--temp]);\n this.updateCheck(elements[temp]);\n this.scrollTop(elements[temp], temp);\n }\n }\n }\n }\n }\n var focusedLi = this.list ? this.list.querySelector('.e-item-focus') : null;\n if (this.isDisabledElement(focusedLi)) {\n if (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem):not(.e-disabled)').length === 0 || (this.keyCode === 38 && this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy) && focusedLi === this.list.querySelector('li.e-list-group-item'))) {\n this.removeFocus();\n return;\n }\n var index = this.getIndexByValue(focusedLi.getAttribute('data-value'));\n if (index === 0 && this.mode !== 'CheckBox') {\n position = 1;\n }\n if (index === (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem)').length - 1)) {\n position = -1;\n }\n this.moveByList(position);\n }\n };\n MultiSelect.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n MultiSelect.prototype.updateCheck = function (element) {\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox &&\n !isNullOrUndefined(this.fields.groupBy)) {\n var checkElement = element.firstElementChild.lastElementChild;\n if (checkElement.classList.contains('e-check')) {\n element.classList.add('e-active');\n }\n else {\n element.classList.remove('e-active');\n }\n }\n };\n MultiSelect.prototype.moveBy = function (position, e) {\n var temp;\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1);\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n if (selectedElem === null) {\n if (position < 0) {\n this.addChipSelection(elements[elements.length - 1], e);\n }\n }\n else {\n if (position < 0) {\n temp = selectedElem.previousElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n }\n else {\n temp = selectedElem.nextElementSibling;\n this.removeChipSelection();\n if (temp !== null) {\n this.addChipSelection(temp, e);\n }\n }\n }\n };\n MultiSelect.prototype.chipClick = function (e) {\n if (this.enabled) {\n var elem = closest(e.target, '.' + CHIP$1);\n this.removeChipSelection();\n this.addChipSelection(elem, e);\n }\n };\n MultiSelect.prototype.removeChipSelection = function () {\n if (this.chipCollectionWrapper) {\n this.removeChipFocus();\n }\n };\n MultiSelect.prototype.addChipSelection = function (element, e) {\n addClass([element], CHIP_SELECTED);\n this.trigger('chipSelection', e);\n };\n MultiSelect.prototype.onChipRemove = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.enabled && !this.readonly) {\n var element = e.target.parentElement;\n var customVal = element.getAttribute('data-value');\n var value = this.allowObjectBinding ?\n this.getDataByValue(this.getFormattedValue(customVal)) : this.getFormattedValue(customVal);\n if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||\n (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {\n value = customVal;\n }\n if (this.isPopupOpen() && this.mode !== 'CheckBox') {\n this.hidePopup(e);\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n this.removeValue(value, e);\n value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;\n if (isNullOrUndefined(this.findListElement(this.list, 'li', 'data-value', value)) &&\n this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.updateDelimeter(this.delimiterChar, e);\n if (this.placeholder && this.floatLabelType === 'Never') {\n this.makeTextBoxEmpty();\n this.checkPlaceholderSize();\n }\n else {\n this.inputElement.value = '';\n }\n e.preventDefault();\n }\n };\n MultiSelect.prototype.makeTextBoxEmpty = function () {\n this.inputElement.value = '';\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshPlaceHolder = function () {\n if (this.placeholder && this.floatLabelType === 'Never') {\n if ((this.value && this.value.length) || (!isNullOrUndefined(this.text) && this.text !== '')) {\n this.inputElement.placeholder = '';\n }\n else {\n this.inputElement.placeholder = encodePlaceholder(this.placeholder);\n }\n }\n else {\n this.setFloatLabelType();\n }\n this.expandTextbox();\n };\n MultiSelect.prototype.removeAllItems = function (value, eve, isClearAll, element, mainElement) {\n var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :\n this.value.indexOf(value);\n var removeVal = this.value.slice(0);\n removeVal.splice(index, 1);\n this.setProperties({ value: [].concat([], removeVal) }, true);\n element.setAttribute('aria-selected', 'false');\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n removeClass([element], className);\n this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox', li: element,\n e: this, index: index\n });\n this.invokeCheckboxSelection(element, eve, isClearAll);\n var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ?\n this.fields.value : ''), value) : value;\n this.updateMainList(true, currentValue, mainElement);\n this.updateChipStatus();\n };\n MultiSelect.prototype.invokeCheckboxSelection = function (element, eve, isClearAll) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });\n this.updateAriaActiveDescendant();\n if ((this.value && this.value.length !== this.mainData.length)\n && (this.mode === 'CheckBox' && this.showSelectAll && !(this.isSelectAll || isClearAll))) {\n this.notify('checkSelectAll', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n value: 'uncheck'\n });\n }\n };\n MultiSelect.prototype.removeValue = function (value, eve, length, isClearAll) {\n var _this = this;\n var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :\n this.value.indexOf(this.getFormattedValue(value));\n if (index === -1 && this.allowCustomValue && !isNullOrUndefined(value)) {\n index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :\n this.value.indexOf(value.toString());\n }\n var targetEle = eve && eve.target;\n isClearAll = (isClearAll || targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (index !== -1) {\n var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ?\n this.fields.value : ''), value) : value;\n var element_1 = this.virtualSelectAll ? null : this.findListElement(this.list, 'li', 'data-value', currentValue);\n var val_1 = this.allowObjectBinding ? value : this.getDataByValue(value);\n var eventArgs = {\n e: eve,\n item: element_1,\n itemData: val_1,\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('removing', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n _this.removeIndex++;\n }\n else {\n _this.isRemoveSelection = _this.enableVirtualization ? true : _this.isRemoveSelection;\n _this.currentRemoveValue = _this.allowObjectBinding ? getValue(((_this.fields.value) ?\n _this.fields.value : ''), value) : value;\n _this.virtualSelectAll = false;\n var removeVal = _this.value.slice(0);\n removeVal.splice(index, 1);\n if (_this.enableVirtualization && _this.mode === 'CheckBox') {\n _this.selectedListData.splice(index, 1);\n }\n _this.setProperties({ value: [].concat([], removeVal) }, true);\n if (_this.enableVirtualization) {\n var currentText = index === 0 && _this.text.split(_this.delimiterChar) &&\n _this.text.split(_this.delimiterChar).length === 1 ?\n _this.text.replace(_this.text.split(_this.delimiterChar)[index], '') :\n index === 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] +\n _this.delimiterChar, '') :\n _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');\n _this.setProperties({ text: currentText.toString() }, true);\n }\n if (element_1 !== null) {\n var currentValue_1 = _this.allowObjectBinding ? getValue(((_this.fields.value) ?\n _this.fields.value : ''), value) : value;\n var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', currentValue_1);\n element_1.setAttribute('aria-selected', 'false');\n removeClass([element_1], className);\n if (hideElement) {\n hideElement.setAttribute('aria-selected', 'false');\n removeClass([element_1, hideElement], className);\n }\n _this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox', li: element_1,\n e: _this, index: index\n });\n _this.invokeCheckboxSelection(element_1, eve, isClearAll);\n }\n var currentValue_2 = _this.allowObjectBinding ? getValue(((_this.fields.value) ?\n _this.fields.value : ''), value) : value;\n if (_this.hideSelectedItem && _this.fields.groupBy && element_1) {\n _this.hideGroupItem(currentValue_2);\n }\n if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox' &&\n _this.isPopupOpen()) {\n _super.prototype.scrollStop.call(_this);\n }\n _this.updateMainList(true, currentValue_2);\n _this.removeChip(currentValue_2, isClearAll);\n _this.updateChipStatus();\n var limit = _this.value && _this.value.length ? _this.value.length : 0;\n if (limit < _this.maximumSelectionLength) {\n var collection = _this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n _this.trigger('removed', eventArgs);\n var targetEle_1 = eve && eve.currentTarget;\n var isSelectAll = (targetEle_1 && targetEle_1.classList.contains('e-selectall-parent')) ? true : null;\n if (!_this.changeOnBlur && !isClearAll && (eve && length && !isSelectAll && _this.isSelectAllTarget)) {\n _this.updateValueState(eve, _this.value, _this.tempValues);\n }\n if (length) {\n _this.selectAllEventData.push(val_1);\n _this.selectAllEventEle.push(element_1);\n }\n if (length === 1) {\n if (!_this.changeOnBlur) {\n _this.updateValueState(eve, _this.value, _this.tempValues);\n }\n var args = {\n event: eve,\n items: _this.selectAllEventEle,\n itemData: _this.selectAllEventData,\n isInteracted: eve ? true : false,\n isChecked: false\n };\n _this.trigger('selectedAll', args);\n _this.selectAllEventData = [];\n _this.selectAllEventEle = [];\n }\n if (isClearAll && (length === 1 || length === null)) {\n _this.clearAllCallback(eve, isClearAll);\n }\n if (_this.isPopupOpen() && element_1 && element_1.parentElement.classList.contains('e-reorder')) {\n if (_this.hideSelectedItem && _this.value && Array.isArray(_this.value) && _this.value.length > 0) {\n _this.totalItemsCount();\n }\n _this.notify('setCurrentViewDataAsync', {\n module: 'VirtualScroll'\n });\n }\n }\n });\n }\n };\n MultiSelect.prototype.updateMainList = function (state, value, mainElement) {\n if (this.allowFiltering || this.mode === 'CheckBox') {\n var element2 = mainElement ? mainElement :\n this.findListElement(this.mainList, 'li', 'data-value', value);\n if (element2) {\n if (state) {\n element2.setAttribute('aria-selected', 'false');\n removeClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n removeClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n else {\n element2.setAttribute('aria-selected', 'true');\n addClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n addClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n }\n }\n };\n MultiSelect.prototype.removeChip = function (value, isClearAll) {\n if (this.chipCollectionWrapper) {\n if (!(this.enableVirtualization && isClearAll)) {\n var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);\n if (element) {\n remove(element);\n }\n }\n }\n };\n MultiSelect.prototype.setWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.overAllWrapper.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.overAllWrapper.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n MultiSelect.prototype.updateChipStatus = function () {\n if (this.value && this.value.length) {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n (this.chipCollectionWrapper.style.display = '');\n }\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n this.showOverAllClear();\n }\n else {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n if (!isNullOrUndefined(this.delimiterWrapper)) {\n (this.delimiterWrapper.style.display = 'none');\n }\n this.hideOverAllClear();\n }\n };\n MultiSelect.prototype.indexOfObjectInArray = function (objectToFind, array) {\n var _loop_1 = function (i) {\n var item = array[i];\n // eslint-disable-next-line no-prototype-builtins\n if (Object.keys(objectToFind).every(function (key) { return item.hasOwnProperty(key) &&\n item[key] === objectToFind[key]; })) {\n return { value: i };\n }\n };\n for (var i = 0; i < array.length; i++) {\n var state_1 = _loop_1(i);\n if (typeof state_1 === \"object\")\n return state_1.value;\n }\n return -1; // Return -1 if the object is not found\n };\n MultiSelect.prototype.addValue = function (value, text, eve) {\n if (!this.value) {\n this.value = [];\n }\n var currentValue = this.allowObjectBinding ? this.getDataByValue(value) : value;\n if ((this.allowObjectBinding && !this.isObjectInArray(this.getDataByValue(value), this.value)) || (!this.allowObjectBinding &&\n this.value.indexOf(currentValue) < 0)) {\n this.setProperties({ value: [].concat([], this.value, [currentValue]) }, true);\n if (this.enableVirtualization && !this.isSelectAllLoop) {\n var data = this.viewWrapper.innerHTML;\n var temp = void 0;\n data += (this.value.length === 1) ? '' : this.delimiterChar + ' ';\n temp = this.getOverflowVal(this.value.length - 1);\n data += temp;\n temp = this.viewWrapper.innerHTML;\n this.updateWrapperText(this.viewWrapper, data);\n }\n if (this.enableVirtualization && this.mode === 'CheckBox') {\n var currentText = [];\n var value_1 = this.allowObjectBinding ?\n getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :\n this.value[this.value.length - 1];\n var temp = text;\n var textValues = this.text != null && this.text !== '' ? this.text + ',' + temp : temp;\n currentText.push(textValues);\n this.setProperties({ text: currentText.toString() }, true);\n }\n }\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.removeFocus();\n if (element) {\n this.addListFocus(element);\n this.addListSelection(element);\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.addChip(text, value, eve);\n }\n if (this.hideSelectedItem && this.fields.groupBy) {\n this.hideGroupItem(value);\n }\n this.updateChipStatus();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.checkMaxSelection = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit === this.maximumSelectionLength) {\n var activeItems = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + '.e-active');\n removeClass(activeItems, 'e-disable');\n var inactiveItems = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n addClass(inactiveItems, 'e-disable');\n }\n if (limit < this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li);\n removeClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.dispatchSelect = function (value, eve, element, isNotTrigger, length, dataValue, text) {\n var _this = this;\n var list = this.listData;\n if (this.initStatus && !isNotTrigger) {\n value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;\n var val_2 = dataValue ? dataValue : this.getDataByValue(value);\n var eventArgs = {\n e: eve,\n item: element,\n itemData: val_2,\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (length) {\n _this.selectAllEventData.push(val_2);\n _this.selectAllEventEle.push(element);\n }\n if (length === 1) {\n var args = {\n event: eve,\n items: _this.selectAllEventEle,\n itemData: _this.selectAllEventData,\n isInteracted: eve ? true : false,\n isChecked: true\n };\n _this.trigger('selectedAll', args);\n _this.selectAllEventData = [];\n }\n if (_this.allowCustomValue && _this.isServerRendered && _this.listData !== list) {\n _this.listData = list;\n }\n value = _this.allowObjectBinding ? _this.getDataByValue(value) : value;\n if (_this.enableVirtualization) {\n if (isNullOrUndefined(_this.selectedListData)) {\n _this.selectedListData = [(_this.getDataByValue(value))];\n }\n else {\n if (dataValue) {\n if (Array.isArray(_this.selectedListData)) {\n _this.selectedListData.push(dataValue);\n }\n else {\n _this.selectedListData = [_this.selectedListData, dataValue];\n }\n }\n else {\n if (Array.isArray(_this.selectedListData)) {\n _this.selectedListData.push((_this.getDataByValue(value)));\n }\n else {\n _this.selectedListData = [_this.selectedListData, (_this.getDataByValue(value))];\n }\n }\n }\n }\n if ((_this.enableVirtualization && value) || !_this.enableVirtualization) {\n _this.updateListSelectEventCallback(value, element, eve, text);\n }\n if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox') {\n _super.prototype.scrollStop.call(_this);\n }\n }\n });\n }\n };\n MultiSelect.prototype.addChip = function (text, value, e) {\n if (this.chipCollectionWrapper) {\n this.getChip(text, value, e);\n }\n };\n MultiSelect.prototype.removeChipFocus = function () {\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1 + '.' + CHIP_SELECTED);\n removeClass(elements, CHIP_SELECTED);\n if (Browser.isDevice) {\n var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE$1.split(' ')[0]);\n for (var index = 0; index < closeElements.length; index++) {\n closeElements[index].style.display = 'none';\n }\n }\n };\n MultiSelect.prototype.onMobileChipInteraction = function (e) {\n var chipElem = closest(e.target, '.' + CHIP$1);\n var chipClose = chipElem.querySelector('span.' + CHIP_CLOSE$1.split(' ')[0]);\n if (this.enabled && !this.readonly) {\n if (!chipElem.classList.contains(CHIP_SELECTED)) {\n this.removeChipFocus();\n chipClose.style.display = '';\n chipElem.classList.add(CHIP_SELECTED);\n }\n this.refreshPopup();\n e.preventDefault();\n }\n };\n MultiSelect.prototype.multiCompiler = function (multiselectTemplate) {\n var checkTemplate = false;\n if (typeof multiselectTemplate !== 'function' && multiselectTemplate) {\n try {\n checkTemplate = (selectAll(multiselectTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n MultiSelect.prototype.encodeHtmlEntities = function (input) {\n return input.replace(/[\\u00A0-\\u9999<>&]/g, function (match) {\n return \"&#\" + match.charCodeAt(0) + \";\";\n });\n };\n MultiSelect.prototype.getChip = function (data, value, e) {\n var _this = this;\n var itemData = { text: value, value: value };\n var chip = this.createElement('span', {\n className: CHIP$1,\n attrs: { 'data-value': value, 'title': data }\n });\n var compiledString;\n var chipContent = this.createElement('span', { className: CHIP_CONTENT$1 });\n var chipClose = this.createElement('span', { className: CHIP_CLOSE$1 });\n if (this.mainData) {\n itemData = this.getDataByValue(value);\n }\n if (this.valueTemplate && !isNullOrUndefined(itemData)) {\n var valuecheck = this.multiCompiler(this.valueTemplate);\n if (typeof this.valueTemplate !== 'function' && valuecheck) {\n compiledString = compile(select(this.valueTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.valueTemplate);\n }\n var valueCompTemp = compiledString(itemData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, chipContent);\n if (valueCompTemp && valueCompTemp.length > 0) {\n append(valueCompTemp, chipContent);\n }\n this.renderReactTemplates();\n }\n else if (this.enableHtmlSanitizer) {\n chipContent.innerText = data;\n }\n else {\n chipContent.innerHTML = this.encodeHtmlEntities(data.toString());\n }\n chip.appendChild(chipContent);\n var eventArgs = {\n isInteracted: e ? true : false,\n itemData: itemData,\n e: e,\n setClass: function (classes) {\n addClass([chip], classes);\n },\n cancel: false\n };\n this.isPreventChange = this.isAngular && this.preventChange;\n this.trigger('tagging', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (Browser.isDevice) {\n chip.classList.add(MOBILE_CHIP);\n append([chipClose], chip);\n chipClose.style.display = 'none';\n EventHandler.add(chip, 'click', _this.onMobileChipInteraction, _this);\n }\n else {\n EventHandler.add(chip, 'mousedown', _this.chipClick, _this);\n if (_this.showClearButton) {\n chip.appendChild(chipClose);\n }\n }\n EventHandler.add(chipClose, 'mousedown', _this.onChipRemove, _this);\n _this.chipCollectionWrapper.appendChild(chip);\n if (!_this.changeOnBlur && e) {\n _this.updateValueState(e, _this.value, _this.tempValues);\n }\n }\n });\n };\n MultiSelect.prototype.calcPopupWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = (this.componentWrapper.offsetWidth) * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n MultiSelect.prototype.mouseIn = function () {\n if (this.enabled && !this.readonly) {\n this.showOverAllClear();\n }\n };\n MultiSelect.prototype.mouseOut = function () {\n if (!this.inputFocus) {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldProperty = isNullOrUndefined(fields.properties) ? fields :\n fields.properties;\n this.listCurrentOptions = (fields.text !== null || fields.value !== null) ? {\n fields: fieldProperty, showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n extend(this.listCurrentOptions, this.listCurrentOptions, fields, true);\n if (this.mode === 'CheckBox') {\n this.notify('listoption', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', dataSource: dataSource, fieldProperty: fieldProperty });\n }\n return this.listCurrentOptions;\n };\n MultiSelect.prototype.renderPopup = function () {\n var _this = this;\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n if (!this.popupObj) {\n if (!isNullOrUndefined(this.popupWrapper)) {\n document.body.appendChild(this.popupWrapper);\n var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);\n if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {\n checkboxFilter.remove();\n this.filterParent = null;\n }\n var overAllHeight = parseInt(this.popupHeight, 10);\n this.popupWrapper.style.visibility = 'hidden';\n if (this.headerTemplate) {\n this.setHeaderTemplate();\n overAllHeight -= this.header.offsetHeight;\n }\n append([this.list], this.popupWrapper);\n if (!this.list.classList.contains(dropDownBaseClasses.noData) && this.getItems()[1]) {\n this.listItemHeight = this.getItems()[1].offsetHeight +\n parseInt(window.getComputedStyle(this.getItems()[1]).marginBottom, 10);\n }\n if (this.enableVirtualization && !this.list.classList.contains(dropDownBaseClasses.noData)) {\n if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n })).appendChild(this.list.querySelector('.e-list-parent'));\n }\n else if (this.list.querySelector('.e-virtual-ddl-content')) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n }\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.virtualItemCount = this.itemCount;\n if (this.mode !== 'CheckBox') {\n this.totalItemsCount();\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n }\n if (this.footerTemplate) {\n this.setFooterTemplate();\n overAllHeight -= this.footer.offsetHeight;\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight -= this.selectAllHeight;\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n if (this.headerTemplate && this.header) {\n overAllHeight -= this.header.offsetHeight;\n }\n if (this.footerTemplate && this.footer) {\n overAllHeight -= this.footer.offsetHeight;\n }\n }\n if (this.mode === 'CheckBox') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n popupElement: this.popupWrapper\n };\n if (this.allowFiltering) {\n this.notify('searchBox', args);\n overAllHeight -= this.searchBoxHeight;\n }\n addClass([this.popupWrapper], 'e-checkbox');\n }\n if (this.popupHeight !== 'auto') {\n this.list.style.maxHeight = formatUnit(overAllHeight);\n this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n this.list.style.maxHeight = formatUnit(this.popupHeight);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.calcPopupWidth(), targetType: 'relative',\n position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },\n relateTo: this.overAllWrapper,\n collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: 1,\n enableRtl: this.enableRtl, zIndex: this.zIndex,\n close: function () {\n if (_this.popupObj.element.parentElement) {\n _this.popupObj.unwireScrollEvents();\n // For restrict the page scrolling in safari browser\n var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);\n if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {\n checkboxFilterInput.blur();\n }\n detach(_this.popupObj.element);\n }\n },\n open: function () {\n _this.popupObj.resolveCollision();\n if (!_this.isFirstClick) {\n var ulElement = _this.list.querySelector('ul');\n if (ulElement) {\n if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&\n _this.targetElement().trim() !== '')) {\n _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n }\n }\n _this.isFirstClick = true;\n }\n _this.popupObj.wireScrollEvents();\n if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&\n _this.targetElement().trim() !== '') && !_this.enableVirtualization) {\n _this.loadTemplate();\n if (_this.enableVirtualization && _this.mode === 'CheckBox') {\n _this.UpdateSkeleton();\n }\n }\n _this.isPreventScrollAction = true;\n _this.setScrollPosition();\n if (!_this.list.classList.contains(dropDownBaseClasses.noData) && _this.getItems()[1] &&\n _this.getItems()[1].offsetHeight !== 0) {\n _this.listItemHeight = _this.getItems()[1].offsetHeight +\n parseInt(window.getComputedStyle(_this.getItems()[1]).marginBottom, 10);\n if (_this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = _this.getTransformValues();\n }\n }\n if (_this.allowFiltering) {\n _this.notify('inputFocus', {\n module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'\n });\n }\n if (_this.enableVirtualization) {\n _this.notify('bindScrollEvent', {\n module: 'VirtualScroll',\n component: _this.getModuleName(),\n enable: _this.enableVirtualization\n });\n setTimeout(function () {\n if (_this.value) {\n _this.updateSelectionList();\n }\n else if (_this.viewPortInfo && _this.viewPortInfo.offsets.top) {\n _this.list.scrollTop = _this.viewPortInfo.offsets.top;\n }\n }, 5);\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n this.checkCollision(this.popupWrapper);\n this.popupContentElement = this.popupObj.element.querySelector('.e-content');\n if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering && this.isDeviceFullScreen) {\n this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n this.popupObj.close();\n this.popupWrapper.style.visibility = '';\n }\n }\n };\n MultiSelect.prototype.checkCollision = function (popupEle) {\n if (!(this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering && this.isDeviceFullScreen)) {\n var collision = isCollide(popupEle);\n if (collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n }\n this.popupObj.resolveCollision();\n }\n };\n MultiSelect.prototype.setHeaderTemplate = function () {\n var compiledString;\n if (this.header) {\n this.header.remove();\n }\n this.header = this.createElement('div');\n addClass([this.header], HEADER$1);\n var headercheck = this.multiCompiler(this.headerTemplate);\n if (typeof this.headerTemplate !== 'function' && headercheck) {\n compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.headerTemplate);\n }\n // eslint-disable-next-line\n var elements = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, null, this.header);\n if (elements && elements.length > 0) {\n append(elements, this.header);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n prepend([this.header], this.popupWrapper);\n }\n else {\n append([this.header], this.popupWrapper);\n }\n EventHandler.add(this.header, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.setFooterTemplate = function () {\n var compiledString;\n if (this.footer) {\n this.footer.remove();\n }\n this.footer = this.createElement('div');\n addClass([this.footer], FOOTER$1);\n var footercheck = this.multiCompiler(this.footerTemplate);\n if (typeof this.footerTemplate !== 'function' && footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // eslint-disable-next-line\n var elements = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, null, this.footer);\n if (elements && elements.length > 0) {\n append(elements, this.footer);\n }\n append([this.footer], this.popupWrapper);\n EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.updateInitialData = function () {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var currentData = this.selectData;\n var ulElement = this.renderItems(currentData, this.fields);\n this.list.scrollTop = 0;\n this.virtualListInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: this.itemCount\n };\n this.previousStartIndex = 0;\n this.previousEndIndex = this.itemCount;\n if (this.dataSource instanceof DataManager) {\n if (this.remoteDataCount >= 0) {\n this.totalItemCount = this.dataCount = this.remoteDataCount;\n }\n else {\n this.resetList(this.dataSource);\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n }\n if (this.mode !== 'CheckBox') {\n this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;\n }\n this.getSkeletonCount();\n this.UpdateSkeleton();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n this.listData = currentData;\n this.liCollections = this.list.querySelectorAll('.e-list-item');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n }\n if (this.enableVirtualization) {\n this.notify('setGeneratedData', {\n module: 'VirtualScroll'\n });\n }\n };\n MultiSelect.prototype.clearAll = function (e) {\n if (this.enabled && !this.readonly) {\n var temp = void 0;\n this.setDynValue = false;\n if (this.value && this.value.length > 0) {\n if (this.allowFiltering) {\n this.refreshListItems(null);\n if (this.mode === 'CheckBox' && this.targetInputElement) {\n this.targetInputElement.value = '';\n }\n }\n var liElement = this.list && this.list.querySelectorAll('li.e-list-item');\n if (liElement && liElement.length > 0) {\n this.selectAllItems(false, e);\n }\n else {\n this.removeIndex = 0;\n for (temp = this.value[this.removeIndex]; this.removeIndex < this.value.length; temp = this.value[this.removeIndex]) {\n this.removeValue(temp, e, null, true);\n }\n }\n this.selectedElementID = null;\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n else {\n this.clearAllCallback(e);\n }\n this.checkAndResetCache();\n Input.createSpanElement(this.overAllWrapper, this.createElement);\n this.calculateWidth();\n if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n if (this.enableVirtualization) {\n this.updateInitialData();\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.innerHTML = '';\n }\n if (!this.isCustomDataUpdated) {\n this.notify('setGeneratedData', {\n module: 'VirtualScroll'\n });\n }\n }\n if (this.enableVirtualization) {\n this.list.scrollTop = 0;\n this.virtualListInfo = null;\n this.previousStartIndex = 0;\n this.previousEndIndex = 0;\n }\n }\n this.isClearAllItem = true;\n EventHandler.add(document, 'mouseup', this.preventSelection, this);\n };\n MultiSelect.prototype.preventSelection = function (e) {\n if (this.isClearAllItem) {\n e.stopPropagation();\n }\n this.isClearAllItem = false;\n EventHandler.remove(document, 'mouseup', this.preventSelection);\n };\n MultiSelect.prototype.clearAllCallback = function (e, isClearAll) {\n var tempValues = this.value ? this.value.slice() : [];\n if (this.mainList && this.listData && ((this.allowFiltering && this.mode !== 'CheckBox') || this.allowCustomValue)) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.focusAtFirstListItem();\n this.updateDelimeter(this.delimiterChar, e);\n if (this.mode !== 'Box' && (!this.inputFocus || this.mode === 'CheckBox')) {\n this.updateDelimView();\n }\n if (this.inputElement.value !== '') {\n this.makeTextBoxEmpty();\n this.search(null);\n }\n this.checkPlaceholderSize();\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n if (!this.inputFocus) {\n if (this.changeOnBlur) {\n this.updateValueState(e, this.value, tempValues);\n }\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n }\n if (this.mode === 'CheckBox') {\n this.refreshPlaceHolder();\n this.refreshInputHight();\n if (this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n }\n if (!this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n this.updateListItems(this.list.querySelectorAll('li.e-list-item'), this.mainList.querySelectorAll('li.e-list-item'));\n }\n e.preventDefault();\n };\n MultiSelect.prototype.windowResize = function () {\n this.refreshPopup();\n if ((!this.inputFocus || this.mode === 'CheckBox') && this.viewWrapper && this.viewWrapper.parentElement) {\n this.updateDelimView();\n }\n };\n MultiSelect.prototype.resetValueHandler = function (e) {\n if (!isNullOrUndefined(this.inputElement)) {\n var formElement = closest(this.inputElement, 'form');\n if (formElement && e.target === formElement) {\n var textVal = (this.element.tagName === this.getNgDirective()) ?\n null : this.element.getAttribute('data-initial-value');\n this.text = textVal;\n }\n }\n };\n MultiSelect.prototype.wireEvent = function () {\n EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n EventHandler.add(this.inputElement, 'focus', this.focusInHandler, this);\n EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);\n EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);\n if (this.mode !== 'CheckBox') {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n }\n EventHandler.add(this.inputElement, 'blur', this.onBlurHandler, this);\n EventHandler.add(this.componentWrapper, 'mouseover', this.mouseIn, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);\n EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);\n EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);\n };\n MultiSelect.prototype.onInput = function (e) {\n if (this.keyDownStatus) {\n this.isValidKey = true;\n }\n else {\n this.isValidKey = false;\n }\n this.keyDownStatus = false;\n // For Filtering works in mobile firefox\n if (Browser.isDevice && Browser.info.name === 'mozilla') {\n this.search(e);\n }\n };\n MultiSelect.prototype.pasteHandler = function (event) {\n var _this = this;\n setTimeout(function () {\n _this.expandTextbox();\n _this.search(event);\n });\n };\n MultiSelect.prototype.search = function (e) {\n var _this = this;\n this.resetFilteredData = true;\n this.preventSetCurrentData = false;\n this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;\n if (!isNullOrUndefined(e)) {\n this.keyCode = e.keyCode;\n }\n if (!this.isPopupOpen() && this.openOnClick) {\n this.showPopup(e);\n }\n this.openClick(e);\n if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {\n this.focusAtFirstListItem();\n }\n else {\n var text = this.targetElement();\n if (this.allowFiltering) {\n if (this.allowCustomValue) {\n this.isRemoteSelection = true;\n }\n this.checkAndResetCache();\n this.isRequesting = false;\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.targetElement(),\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.customFilterQuery = query;\n _this.remoteFilterAction = true;\n _this.dataUpdater(dataSource, query, fields);\n },\n event: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (!_this.isFiltered && !eventArgs.preventDefaultAction) {\n _this.filterAction = true;\n if (_this.dataSource instanceof DataManager && _this.allowCustomValue) {\n _this.isCustomRendered = false;\n }\n _this.dataUpdater(_this.dataSource, null, _this.fields);\n }\n }\n });\n }\n else if (this.allowCustomValue) {\n var query = new Query();\n query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;\n if (this.enableVirtualization) {\n this.dataUpdater(this.dataSource, query, this.fields);\n }\n else {\n this.dataUpdater(this.mainData, query, this.fields);\n }\n this.UpdateSkeleton();\n }\n else {\n var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');\n var type = this.typeOfData(this.listData).typeof;\n var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);\n if (this.enableVirtualization && this.targetElement().trim() !== '' && !this.allowFiltering) {\n var updatingincrementalindex = false;\n if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) ||\n this.incrementalEndIndex === 0) {\n updatingincrementalindex = true;\n this.incrementalStartIndex = 0;\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = false;\n }\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeElement = Search(this.targetElement(), this.incrementalLiCollections, this.filterType, true, this.listData, this.fields, type);\n while (isNullOrUndefined(activeElement) && this.incrementalEndIndex < this.totalItemCount) {\n this.incrementalStartIndex = this.incrementalEndIndex;\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount :\n this.incrementalEndIndex + 100;\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeElement = Search(this.targetElement(), this.incrementalLiCollections, this.filterType, true, this.listData, this.fields, type);\n if (!isNullOrUndefined(activeElement)) {\n break;\n }\n if (isNullOrUndefined(activeElement) && this.incrementalEndIndex >= this.totalItemCount) {\n this.incrementalStartIndex = 0;\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n break;\n }\n }\n if (activeElement.index) {\n if (!(this.viewPortInfo.startIndex >= activeElement.index) ||\n !(activeElement.index >= this.viewPortInfo.endIndex)) {\n var startIndex = activeElement.index - ((this.itemCount / 2) - 2) > 0\n ? activeElement.index - ((this.itemCount / 2) - 2)\n : 0;\n var endIndex = startIndex + this.itemCount > this.totalItemCount\n ? this.totalItemCount\n : startIndex + this.itemCount;\n if (startIndex !== this.viewPortInfo.startIndex) {\n this.updateIncrementalView(startIndex, endIndex);\n }\n }\n }\n if (!isNullOrUndefined(activeElement.item)) {\n var index1 = this.getIndexByValue(activeElement.item.getAttribute('data-value')) - this.skeletonCount;\n if (index1 > this.itemCount / 2) {\n var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount\n ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2)\n : this.totalItemCount;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount\n ? this.totalItemCount\n : this.viewPortInfo.startIndex + this.itemCount;\n this.updateIncrementalView(startIndex, endIndex);\n }\n activeElement.item = this.getElementByValue(activeElement.item.getAttribute('data-value'));\n }\n else {\n this.updateIncrementalView(0, this.itemCount);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n this.list.scrollTop = 0;\n }\n if (activeElement && activeElement.item) {\n activeElement.item = this.getElementByValue(activeElement.item.getAttribute('data-value'));\n }\n }\n if (activeElement && activeElement.item) {\n this.addListFocus(activeElement.item);\n this.list.scrollTop =\n activeElement.item.offsetHeight * activeElement.index;\n }\n else if (this.targetElement() !== '') {\n this.removeFocus();\n }\n else {\n this.focusAtFirstListItem();\n }\n }\n }\n if (this.enableVirtualization && this.allowFiltering) {\n this.getFilteringSkeletonCount();\n }\n };\n MultiSelect.prototype.preRender = function () {\n if (this.allowFiltering === null) {\n this.allowFiltering = (this.mode === 'CheckBox') ? true : false;\n }\n this.preventSetCurrentData = false;\n this.initializeData();\n this.updateDataAttribute(this.htmlAttributes);\n _super.prototype.preRender.call(this);\n };\n MultiSelect.prototype.getLocaleName = function () {\n return 'multi-select';\n };\n MultiSelect.prototype.initializeData = function () {\n this.mainListCollection = [];\n this.beforePopupOpen = false;\n this.filterAction = false;\n this.remoteFilterAction = false;\n this.isFirstClick = false;\n this.mobFilter = true;\n this.isFiltered = false;\n this.focused = true;\n this.initial = true;\n this.backCommand = true;\n this.isCustomRendered = false;\n this.isRemoteSelection = false;\n this.isSelectAllTarget = true;\n this.viewPortInfo = {\n currentPageNumber: null,\n direction: null,\n sentinelInfo: {},\n offsets: {},\n startIndex: 0,\n endIndex: this.itemCount\n };\n };\n MultiSelect.prototype.updateData = function (delimiterChar, e, isInitialVirtualData) {\n var data = '';\n var delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';\n var text = [];\n var temp;\n var tempData = this.listData;\n if (!this.enableVirtualization) {\n this.listData = this.mainData;\n }\n if (!isNullOrUndefined(this.hiddenElement) && !this.enableVirtualization) {\n this.hiddenElement.innerHTML = '';\n }\n if (!isNullOrUndefined(this.value)) {\n var valueLength = this.value.length;\n var hiddenElementContent = '';\n var _loop_2 = function (index) {\n var valueItem = this_1.allowObjectBinding ?\n getValue((this_1.fields.value) ? this_1.fields.value : '', this_1.value[index]) : this_1.value[index];\n var listValue = this_1.findListElement((!isNullOrUndefined(this_1.mainList) ? this_1.mainList : this_1.ulElement), 'li', 'data-value', valueItem);\n if (this_1.enableVirtualization) {\n listValue = this_1.findListElement((!isNullOrUndefined(this_1.list) ? this_1.list : this_1.ulElement), 'li', 'data-value', valueItem);\n }\n if (isNullOrUndefined(listValue) && !this_1.allowCustomValue && !this_1.enableVirtualization &&\n this_1.listData && this_1.listData.length > 0) {\n this_1.value.splice(index, 1);\n index -= 1;\n valueLength -= 1;\n }\n else {\n if (this_1.listData) {\n if (this_1.enableVirtualization) {\n if (delim) {\n data = this_1.delimiterWrapper && this_1.delimiterWrapper.innerHTML === '' ? data :\n this_1.delimiterWrapper.innerHTML;\n }\n var value = this_1.allowObjectBinding ?\n getValue(((this_1.fields.value) ? this_1.fields.value : ''), this_1.value[this_1.value.length - 1]) :\n this_1.value[this_1.value.length - 1];\n if (this_1.isRemoveSelection) {\n data = this_1.text.replace(/,/g, delimiterChar + ' ') + delimiterChar + ' ';\n text = this_1.text.split(delimiterChar);\n }\n else {\n temp = isInitialVirtualData && delim ? this_1.text : this_1.getTextByValue(value);\n var textValues = isInitialVirtualData ? this_1.text : (this_1.text && this_1.text !== '' ? this_1.text + ',' + temp : temp);\n data += temp + delimiterChar + ' ';\n text.push(textValues);\n hiddenElementContent = this_1.hiddenElement.innerHTML;\n }\n if ((e && e.currentTarget && e.currentTarget.classList.contains('e-chips-close')) ||\n (e && (e.key === 'Backspace'))) {\n var item_1 = e.target.parentElement.getAttribute('data-value');\n if (e.key === 'Backspace') {\n var lastChild = this_1.hiddenElement.lastChild;\n if (lastChild) {\n this_1.hiddenElement.removeChild(lastChild);\n }\n }\n else {\n this_1.hiddenElement.childNodes.forEach(function (option) {\n if (option.value === item_1) {\n option.parentNode.removeChild(option);\n }\n });\n }\n hiddenElementContent = this_1.hiddenElement.innerHTML;\n }\n else {\n hiddenElementContent += '';\n }\n return out_index_1 = index, \"break\";\n }\n else {\n temp = this_1.getTextByValue(valueItem);\n }\n }\n else {\n temp = valueItem;\n }\n data += temp + delimiterChar + ' ';\n text.push(temp);\n }\n hiddenElementContent += \"\";\n out_index_1 = index;\n };\n var this_1 = this, out_index_1;\n for (var index = 0; index < valueLength; index++) {\n var state_2 = _loop_2(index);\n index = out_index_1;\n if (state_2 === \"break\")\n break;\n }\n if (!isNullOrUndefined(this.hiddenElement)) {\n if (this.isRemoveSelection) {\n if (this.findListElement(this.hiddenElement, 'option', 'value', this.currentRemoveValue)) {\n this.hiddenElement.removeChild(this.findListElement(this.hiddenElement, 'option', 'value', this.currentRemoveValue));\n }\n this.isRemoveSelection = false;\n }\n else {\n this.hiddenElement.innerHTML = hiddenElementContent;\n }\n }\n }\n var isChipRemove = e && e.target && e.target.classList.contains('e-chips-close');\n if (!this.enableVirtualization || (this.enableVirtualization && this.mode !== 'CheckBox' && !isChipRemove)) {\n this.setProperties({ text: text.toString() }, true);\n }\n if (delim) {\n this.updateWrapperText(this.delimiterWrapper, data);\n this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));\n this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);\n }\n var targetEle = e && e.target;\n var isClearAll = (targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;\n if (!this.changeOnBlur && ((e && !isClearAll)) || this.isSelectAll) {\n this.isSelectAll = false;\n this.updateValueState(e, this.value, this.tempValues);\n }\n this.listData = tempData;\n this.addValidInputClass();\n };\n MultiSelect.prototype.initialTextUpdate = function () {\n if (!isNullOrUndefined(this.text)) {\n var textArr = this.text.split(this.delimiterChar);\n var textVal = [];\n for (var index = 0; textArr.length > index; index++) {\n var val = this.getValueByText(textArr[index]);\n if (!isNullOrUndefined(val)) {\n textVal.push(val);\n }\n else if (this.allowCustomValue) {\n textVal.push(textArr[index]);\n }\n }\n if (textVal && textVal.length) {\n var value = this.allowObjectBinding ? this.getDataByValue(textVal) : textVal;\n this.setProperties({ value: value }, true);\n }\n }\n else {\n this.setProperties({ value: null }, true);\n }\n };\n MultiSelect.prototype.renderList = function (isEmptyData) {\n if (!isEmptyData && this.allowCustomValue && this.list && (this.list.textContent === this.noRecordsTemplate\n || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {\n isEmptyData = true;\n }\n _super.prototype.render.call(this, null, isEmptyData);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n this.unwireListEvents();\n this.wireListEvents();\n };\n MultiSelect.prototype.initialValueUpdate = function (listItems, isInitialVirtualData) {\n if (this.list) {\n var text = void 0;\n var element = void 0;\n var value = void 0;\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.innerHTML = '';\n }\n this.removeListSelection();\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.allowObjectBinding ?\n getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :\n this.value[index];\n element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);\n var isCustomData = false;\n if (this.enableVirtualization) {\n text = null;\n if (listItems != null && listItems.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n if ((this.isPrimitiveData && listItems[i] === value) || (!this.isPrimitiveData\n && getValue((this.fields.value ? this.fields.value :\n 'value'), listItems[i]) === value)) {\n text = this.isPrimitiveData ? listItems[i] :\n getValue(this.fields.text, listItems[i]);\n if (this.enableVirtualization) {\n if (isNullOrUndefined(this.selectedListData)) {\n this.selectedListData = [listItems[i]];\n }\n else {\n if (Array.isArray(this.selectedListData)) {\n this.selectedListData.push((listItems[i]));\n }\n else {\n this.selectedListData = [this.selectedListData, (listItems[i])];\n }\n }\n }\n break;\n }\n }\n }\n if ((isNullOrUndefined(text) && this.allowCustomValue) &&\n ((!(this.dataSource instanceof DataManager)) ||\n (this.dataSource instanceof DataManager && isInitialVirtualData))) {\n text = this.getTextByValue(value);\n isCustomData = true;\n }\n }\n else {\n text = this.getTextByValue(value);\n }\n if (((element && (element.getAttribute('aria-selected') !== 'true')) ||\n (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&\n (this.mode === 'Box' || this.mode === 'Default'))) ||\n (this.enableVirtualization && value != null && text != null && !isCustomData)) {\n var currentText = [];\n var textValues = this.text != null && this.text !== '' ? this.text + ',' + text : text;\n currentText.push(textValues);\n this.setProperties({ text: currentText.toString() }, true);\n this.addChip(text, value);\n this.addListSelection(element);\n }\n else if ((!this.enableVirtualization && value && this.allowCustomValue) ||\n (this.enableVirtualization &&\n value &&\n this.allowCustomValue &&\n ((!(this.dataSource instanceof DataManager)) ||\n (this.dataSource instanceof DataManager && isInitialVirtualData)))) {\n var indexItem = this.listData.length;\n var newValue = {};\n setValue(this.fields.text, value, newValue);\n setValue(this.fields.value, value, newValue);\n var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);\n if (!this.enableVirtualization) {\n this.addItem(newValue, indexItem);\n }\n if (this.enableVirtualization) {\n if (this.virtualCustomSelectData && this.virtualCustomSelectData.length >= 0) {\n this.virtualCustomSelectData.push(newValue);\n }\n else {\n this.virtualCustomSelectData = [newValue];\n }\n }\n element = element ? element : this.findListElement(this.hideSelectedItem ?\n this.ulElement : this.list, 'li', 'data-value', value);\n if (this.popupWrapper.contains(noDataEle)) {\n this.list.setAttribute('style', noDataEle.getAttribute('style'));\n this.popupWrapper.replaceChild(this.list, noDataEle);\n this.wireListEvents();\n }\n var currentText = [];\n var textValues = this.text != null && this.text !== '' ? this.text + ',' + text : text;\n currentText.push(textValues);\n this.setProperties({ text: currentText.toString() }, true);\n this.addChip(text, value);\n this.addListSelection(element);\n }\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (this.changeOnBlur) {\n this.updateValueState(null, this.value, this.tempValues);\n }\n this.updateDelimeter(this.delimiterChar);\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar, null, isInitialVirtualData);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll && (isNullOrUndefined(this.value) || !this.value.length)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (this.mode === 'Box' || (this.mode === 'Default' && this.inputFocus)) {\n this.chipCollectionWrapper.style.display = '';\n }\n else if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateActionCompleteData = function (li, item) {\n if (this.value && ((!this.allowObjectBinding && this.value.indexOf(li.getAttribute('data-value')) > -1) ||\n (this.allowObjectBinding && this.isObjectInArray(this.getDataByValue(li.getAttribute('data-value')), this.value)))) {\n this.mainList = this.ulElement;\n if (this.hideSelectedItem) {\n addClass([li], HIDE_LIST);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateAddItemList = function (list, itemCount) {\n if (this.popupObj && this.popupObj.element && this.popupObj.element.querySelector('.' + dropDownBaseClasses.noData) && list) {\n this.list = list;\n this.mainList = this.ulElement = list.querySelector('ul');\n remove(this.popupWrapper.querySelector('.e-content'));\n this.popupObj = null;\n this.renderPopup();\n }\n else if (this.allowCustomValue) {\n this.list = list;\n this.mainList = this.ulElement = list.querySelector('ul');\n }\n };\n MultiSelect.prototype.updateDataList = function () {\n if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {\n var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;\n var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&\n this.ulElement.children[0].childElementCount > 0) &&\n (this.mainList.children[0] && (this.mainList.children[0].childElementCount <\n this.ulElement.children[0].childElementCount)));\n var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 &&\n !(this.ulElement.childElementCount < this.mainList.childElementCount) &&\n (this.ulElement.children[0].childElementCount > 0 ||\n (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));\n if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {\n //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;)\n this.mainList = this.ulElement;\n }\n }\n };\n MultiSelect.prototype.isValidLI = function (li) {\n return (li && !li.classList.contains(dropDownBaseClasses.disabled) && !li.classList.contains(dropDownBaseClasses.group) &&\n li.classList.contains(dropDownBaseClasses.li));\n };\n MultiSelect.prototype.updateListSelection = function (li, e, length) {\n var customVal = li.getAttribute('data-value');\n var value = this.allowObjectBinding ?\n this.getDataByValue(this.getFormattedValue(customVal)) : this.getFormattedValue(customVal);\n if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||\n (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {\n value = customVal;\n }\n this.removeHover();\n if (!this.value || ((!this.allowObjectBinding && this.value.indexOf(value) === -1) ||\n (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) === -1))) {\n this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'), length);\n }\n else {\n this.removeValue(value, e, length);\n }\n };\n MultiSelect.prototype.updateListSelectEventCallback = function (value, li, e, currentText) {\n var _this = this;\n value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;\n var text = currentText ? currentText : this.getTextByValue(value);\n if ((this.allowCustomValue || this.allowFiltering) &&\n !this.findListElement(this.mainList, 'li', 'data-value', value) &&\n (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {\n var temp_1 = li ? li.cloneNode(true) : li;\n var fieldValue = this.fields.value ? this.fields.value : 'value';\n if (this.allowCustomValue && this.mainData.length && typeof getValue(fieldValue, this.mainData[0]) === 'number') {\n value = !isNaN(parseFloat(value.toString())) ? parseFloat(value.toString()) : value;\n }\n var data_1 = this.getDataByValue(value);\n var eventArgs = {\n newData: data_1,\n cancel: false\n };\n this.trigger('customValueSelection', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (_this.enableVirtualization && _this.virtualCustomData) {\n if (_this.virtualCustomSelectData && _this.virtualCustomSelectData.length >= 0) {\n _this.virtualCustomSelectData.push(data_1);\n }\n else {\n _this.virtualCustomSelectData = [data_1];\n }\n _this.remoteCustomValue = false;\n _this.addValue(value, text, e);\n }\n else {\n append([temp_1], _this.mainList);\n _this.mainData.push(data_1);\n _this.remoteCustomValue = false;\n _this.addValue(value, text, e);\n }\n }\n });\n }\n else {\n this.remoteCustomValue = false;\n this.addValue(value, text, e);\n }\n };\n MultiSelect.prototype.removeListSelection = function () {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n var selectedItems = this.list.querySelectorAll('.' + className);\n var temp = selectedItems.length;\n if (selectedItems && selectedItems.length) {\n removeClass(selectedItems, className);\n while (temp > 0) {\n selectedItems[temp - 1].setAttribute('aria-selected', 'false');\n temp--;\n }\n }\n if (!isNullOrUndefined(this.mainList)) {\n var selectItems = this.mainList.querySelectorAll('.' + className);\n var temp1 = selectItems.length;\n if (selectItems && selectItems.length) {\n removeClass(selectItems, className);\n while (temp1 > 0) {\n selectItems[temp1 - 1].setAttribute('aria-selected', 'false');\n if (this.mode === 'CheckBox') {\n if (selectedItems && (selectedItems.length > (temp1 - 1))) {\n removeClass([selectedItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n temp1--;\n }\n }\n }\n };\n MultiSelect.prototype.removeHover = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n };\n MultiSelect.prototype.removeFocus = function () {\n if (this.list && this.mainList) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.focus);\n var mainlist = this.mainList.querySelectorAll('.' + dropDownBaseClasses.focus);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.focus);\n removeClass(mainlist, dropDownBaseClasses.focus);\n }\n }\n };\n MultiSelect.prototype.addListHover = function (li) {\n if (this.enabled && this.isValidLI(li)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n else {\n if ((li !== null && li.classList.contains('e-list-group-item')) && this.enableGroupCheckBox && this.mode === 'CheckBox'\n && !isNullOrUndefined(this.fields.groupBy)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n }\n };\n MultiSelect.prototype.addListFocus = function (element) {\n if (this.enabled && (this.isValidLI(element) || (this.fields.disabled && this.isDisabledElement(element)))) {\n this.removeFocus();\n addClass([element], dropDownBaseClasses.focus);\n this.updateAriaActiveDescendant();\n }\n else {\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n addClass([element], dropDownBaseClasses.focus);\n this.updateAriaActiveDescendant();\n }\n }\n };\n MultiSelect.prototype.addListSelection = function (element, mainElement) {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (this.isValidLI(element) && !element.classList.contains(dropDownBaseClasses.hover)) {\n addClass([element], className);\n this.updateMainList(false, element.getAttribute('data-value'), mainElement);\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {\n var ariaCheck = element.getElementsByClassName('e-check').length;\n if (ariaCheck === 0) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n }\n }\n this.notify('activeList', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n if (this.chipCollectionWrapper) {\n this.removeChipSelection();\n }\n this.selectedElementID = element.id;\n }\n };\n MultiSelect.prototype.updateDelimeter = function (delimChar, e, isInitialVirtualData) {\n this.updateData(delimChar, e, isInitialVirtualData);\n };\n MultiSelect.prototype.onMouseClick = function (e) {\n var _this = this;\n if (!this.isClearAllItem) {\n this.keyCode = null;\n this.scrollFocusStatus = false;\n this.keyboardEvent = null;\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (this.enableVirtualization && li && li.classList.contains('e-virtual-list')) {\n return;\n }\n var headerLi = closest(target, '.' + dropDownBaseClasses.group);\n if (headerLi && this.enableGroupCheckBox && this.mode === 'CheckBox' && this.fields.groupBy) {\n target = target.classList.contains('e-list-group-item') ? target.firstElementChild.lastElementChild\n : e.target;\n if (target.classList.contains('e-check')) {\n this.selectAllItem(false, e);\n target.classList.remove('e-check');\n target.classList.remove('e-stop');\n closest(target, '.' + 'e-list-group-item').classList.remove('e-active');\n target.setAttribute('aria-selected', 'false');\n }\n else {\n this.selectAllItem(true, e);\n target.classList.remove('e-stop');\n target.classList.add('e-check');\n closest(target, '.' + 'e-list-group-item').classList.add('e-active');\n target.setAttribute('aria-selected', 'true');\n }\n this.refreshSelection();\n this.checkSelectAll();\n }\n else {\n if (this.isValidLI(li)) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.checkPlaceholderSize();\n this.addListFocus(li);\n if ((this.allowCustomValue || this.allowFiltering) && this.mainList && this.listData) {\n if (this.mode !== 'CheckBox') {\n this.focusAtLastListItem(li.getAttribute('data-value'));\n this.refreshSelection();\n }\n }\n else {\n this.makeTextBoxEmpty();\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (this.value && this.value.length > 50) {\n setTimeout(function () {\n _this.updateDelimeter(_this.delimiterChar, e);\n }, 0);\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.checkSelectAll();\n this.refreshPopup();\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup(e);\n }\n else {\n e.preventDefault();\n }\n var isFilterData = this.targetElement().trim() !== '' ? true : false;\n this.makeTextBoxEmpty();\n this.findGroupStart(target);\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(isNullOrUndefined(li) ? null : li.textContent, isFilterData);\n }\n }\n else {\n e.preventDefault();\n }\n if (this.enableVirtualization && this.hideSelectedItem) {\n var visibleListElements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');\n if (visibleListElements.length) {\n var actualCount = this.virtualListHeight > 0 ?\n Math.floor(this.virtualListHeight / this.listItemHeight) : 0;\n if (visibleListElements.length < (actualCount + 2)) {\n var query = this.getForQuery(this.value).clone();\n query = query.skip(this.virtualItemStartIndex);\n this.resetList(this.dataSource, this.fields, query);\n this.UpdateSkeleton();\n this.liCollections = this.list.querySelectorAll('.'\n + dropDownBaseClasses.li);\n this.virtualItemCount = this.itemCount;\n if (this.mode !== 'CheckBox') {\n this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length :\n this.totalItemCount;\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();\n }\n if (this.list.querySelector('.e-virtual-ddl-content')) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n }\n }\n }\n }\n this.refreshPlaceHolder();\n this.deselectHeader();\n }\n }\n };\n MultiSelect.prototype.findGroupStart = function (target) {\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n var count = 0;\n var liChecked = 0;\n var liUnchecked = 0;\n var groupValues = void 0;\n if (this.itemTemplate && !target.getElementsByClassName('e-frame').length) {\n while (!target.getElementsByClassName('e-frame').length) {\n target = target.parentElement;\n }\n }\n if (target.classList.contains('e-frame')) {\n target = target.parentElement.parentElement;\n }\n groupValues = this.findGroupAttrtibutes(target, liChecked, liUnchecked, count, 0);\n groupValues = this.findGroupAttrtibutes(target, groupValues[0], groupValues[1], groupValues[2], 1);\n while (!target.classList.contains('e-list-group-item')) {\n if (target.classList.contains('e-list-icon')) {\n target = target.parentElement;\n }\n target = target.previousElementSibling;\n if (target == null) {\n break;\n }\n }\n this.updateCheckBox(target, groupValues[0], groupValues[1], groupValues[2]);\n }\n };\n MultiSelect.prototype.findGroupAttrtibutes = function (listElement, checked, unChecked, count, position) {\n while (!listElement.classList.contains('e-list-group-item')) {\n if (!(this.fields.disabled && this.isDisabledElement(listElement))) {\n if (listElement.classList.contains('e-list-icon')) {\n listElement = listElement.parentElement;\n }\n if (listElement.getElementsByClassName('e-frame')[0].classList.contains('e-check') &&\n listElement.classList.contains('e-list-item')) {\n checked++;\n }\n else if (listElement.classList.contains('e-list-item')) {\n unChecked++;\n }\n count++;\n }\n listElement = position ? listElement.nextElementSibling : listElement.previousElementSibling;\n if (listElement == null) {\n break;\n }\n }\n return [checked, unChecked, count];\n };\n MultiSelect.prototype.updateCheckBox = function (groupHeader, checked, unChecked, count) {\n if (groupHeader === null || (!isNullOrUndefined(this.fields.disabled) && count === 0)) {\n return;\n }\n var checkBoxElement = groupHeader.getElementsByClassName('e-frame')[0];\n if (count === checked) {\n checkBoxElement.classList.remove('e-stop');\n checkBoxElement.classList.add('e-check');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n groupHeader.setAttribute('aria-selected', 'true');\n }\n else if (count === unChecked) {\n checkBoxElement.classList.remove('e-check');\n checkBoxElement.classList.remove('e-stop');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.remove('e-active');\n groupHeader.setAttribute('aria-selected', 'false');\n }\n else if (this.maximumSelectionLength === checked - 1) {\n checkBoxElement.classList.remove('e-stop');\n groupHeader.setAttribute('aria-selected', 'true');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n checkBoxElement.classList.add('e-check');\n }\n else {\n checkBoxElement.classList.remove('e-check');\n checkBoxElement.classList.add('e-stop');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n groupHeader.setAttribute('aria-selected', 'false');\n }\n };\n MultiSelect.prototype.disableGroupHeader = function () {\n var collection = this.list.querySelectorAll('li.e-list-group-item');\n if (collection) {\n for (var index = 0; index < collection.length; index++) {\n var isDisabled = true;\n var target = collection[index].nextElementSibling;\n while (!target.classList.contains('e-list-group-item')) {\n if (!this.isDisabledElement(target)) {\n isDisabled = false;\n break;\n }\n target = target.nextElementSibling;\n if (target == null) {\n break;\n }\n }\n if (isDisabled) {\n this.disableListItem(collection[index]);\n }\n }\n }\n };\n MultiSelect.prototype.deselectHeader = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n var collection = this.list.querySelectorAll('li.e-list-group-item:not(.e-active)');\n if (limit < this.maximumSelectionLength) {\n removeClass(collection, 'e-disable');\n }\n if (limit === this.maximumSelectionLength) {\n addClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n if (currentLi === null && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)\n && this.enableGroupCheckBox) {\n currentLi = closest(e.target, '.' + dropDownBaseClasses.group);\n }\n this.addListHover(currentLi);\n };\n MultiSelect.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n MultiSelect.prototype.onListMouseDown = function (e) {\n e.preventDefault();\n this.scrollFocusStatus = true;\n };\n MultiSelect.prototype.onDocumentClick = function (e) {\n if (this.mode !== 'CheckBox') {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) &&\n !this.overAllWrapper.contains(e.target)) {\n this.scrollFocusStatus = false;\n }\n else {\n this.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement);\n }\n }\n };\n MultiSelect.prototype.wireListEvents = function () {\n if (!isNullOrUndefined(this.list)) {\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);\n EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n }\n };\n MultiSelect.prototype.unwireListEvents = function () {\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n if (this.list) {\n EventHandler.remove(this.list, 'mousedown', this.onListMouseDown);\n EventHandler.remove(this.list, 'mouseup', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n }\n };\n MultiSelect.prototype.hideOverAllClear = function () {\n if (!this.value || !this.value.length || this.inputElement.value === '') {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.showOverAllClear = function () {\n if (((this.value && this.value.length) || this.inputElement.value !== '') && this.showClearButton && this.readonly !== true) {\n this.overAllClear.style.display = '';\n }\n else {\n this.overAllClear.style.display = 'none';\n }\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n MultiSelect.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n MultiSelect.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement && this.enabled) {\n this.inputElement.blur();\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n */\n MultiSelect.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n var filterClear = this.filterParent && this.filterParent.querySelector('.e-clear-icon.e-icons');\n if (this.overAllClear.style.display !== 'none' || filterClear) {\n this.spinnerElement = filterClear ? filterClear : this.overAllClear;\n }\n else {\n this.spinnerElement = this.createElement('span', { className: CLOSEICON_CLASS$1 + ' ' + SPINNER_CLASS$1 });\n this.componentWrapper.appendChild(this.spinnerElement);\n }\n createSpinner({ target: this.spinnerElement, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);\n addClass([this.spinnerElement], DISABLE_ICON);\n showSpinner(this.spinnerElement);\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n */\n MultiSelect.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], DISABLE_ICON);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS$1)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n MultiSelect.prototype.updateWrapperText = function (wrapperType, wrapperData) {\n if (this.valueTemplate || !this.enableHtmlSanitizer) {\n wrapperType.innerHTML = this.encodeHtmlEntities(wrapperData);\n }\n else {\n wrapperType.innerText = wrapperData;\n }\n };\n MultiSelect.prototype.updateDelimView = function () {\n if (this.delimiterWrapper) {\n this.hideDelimWrapper();\n }\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n if (!isNullOrUndefined(this.viewWrapper)) {\n this.viewWrapper.style.display = '';\n this.viewWrapper.style.width = '';\n this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);\n }\n if (this.value && this.value.length) {\n var data = '';\n var temp = void 0;\n var tempData = void 0;\n var tempIndex = 1;\n var wrapperleng = void 0;\n var remaining = void 0;\n var downIconWidth = 0;\n var overAllContainer = void 0;\n if (!this.enableVirtualization) {\n this.updateWrapperText(this.viewWrapper, data);\n }\n var l10nLocale = {\n noRecordsTemplate: 'No records found',\n actionFailureTemplate: 'Request failed',\n overflowCountTemplate: '+${count} more..',\n totalCountTemplate: '${count} selected'\n };\n var l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);\n if (l10n.getConstant('actionFailureTemplate') === '') {\n l10n = new L10n('dropdowns', l10nLocale, this.locale);\n }\n if (l10n.getConstant('noRecordsTemplate') === '') {\n l10n = new L10n('dropdowns', l10nLocale, this.locale);\n }\n var remainContent = l10n.getConstant('overflowCountTemplate');\n var totalContent = l10n.getConstant('totalCountTemplate');\n var raminElement = this.createElement('span', {\n className: REMAIN_WRAPPER$1\n });\n var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());\n raminElement.innerText = remainCompildTemp;\n this.viewWrapper.appendChild(raminElement);\n this.renderReactTemplates();\n var remainSize = raminElement.offsetWidth;\n remove(raminElement);\n if (this.showDropDownIcon) {\n downIconWidth = this.dropIcon.offsetWidth + parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);\n }\n this.checkClearIconWidth();\n if (!isNullOrUndefined(this.value) && (this.allowCustomValue || (this.listData && this.listData.length > 0))) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n var items = this.text && this.text.split(this.delimiterChar);\n if (!this.enableVirtualization) {\n data += (index === 0) ? '' : this.delimiterChar + ' ';\n temp = this.getOverflowVal(index);\n data += temp;\n temp = this.viewWrapper.innerHTML;\n this.updateWrapperText(this.viewWrapper, data);\n }\n else if (items) {\n data += (index === 0) ? '' : this.delimiterChar + ' ';\n temp = items[index];\n data += temp;\n temp = this.viewWrapper.innerHTML;\n this.updateWrapperText(this.viewWrapper, data);\n }\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n overAllContainer = this.componentWrapper.offsetWidth -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {\n if (tempData !== undefined && tempData !== '') {\n temp = tempData;\n index = tempIndex + 1;\n }\n this.updateWrapperText(this.viewWrapper, temp);\n remaining = this.value.length - index;\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) > overAllContainer) && wrapperleng !== 0\n && this.viewWrapper.innerHTML !== '') {\n var textArr = [];\n this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);\n remaining = this.value.length;\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n }\n break;\n }\n else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {\n tempData = data;\n tempIndex = index;\n }\n else if (index === 0) {\n tempData = '';\n tempIndex = -1;\n }\n }\n }\n if (remaining > 0) {\n var totalWidth = overAllContainer - downIconWidth - this.clearIconWidth;\n this.viewWrapper.appendChild(this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth));\n this.updateRemainWidth(this.viewWrapper, totalWidth);\n this.updateRemainingText(raminElement, downIconWidth, remaining, remainContent, totalContent);\n }\n }\n else {\n if (!isNullOrUndefined(this.viewWrapper)) {\n this.viewWrapper.innerHTML = '';\n this.viewWrapper.style.display = 'none';\n }\n }\n };\n MultiSelect.prototype.checkClearIconWidth = function () {\n if (this.showClearButton) {\n this.clearIconWidth = this.overAllClear.offsetWidth;\n }\n };\n MultiSelect.prototype.updateRemainWidth = function (viewWrapper, totalWidth) {\n if (viewWrapper.classList.contains(TOTAL_COUNT_WRAPPER$1) && totalWidth < (viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(viewWrapper).paddingLeft, 10)\n + parseInt(window.getComputedStyle(viewWrapper).paddingLeft, 10))) {\n viewWrapper.style.width = totalWidth + 'px';\n }\n };\n MultiSelect.prototype.updateRemainTemplate = function (raminElement, viewWrapper, remaining, remainContent, totalContent, totalWidth) {\n if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3 && viewWrapper.firstChild.nodeValue === '') {\n viewWrapper.removeChild(viewWrapper.firstChild);\n }\n raminElement.innerHTML = '';\n var remainTemp = remainContent.replace('${count}', remaining.toString());\n var totalTemp = totalContent.replace('${count}', remaining.toString());\n raminElement.innerText = (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ? remainTemp : totalTemp;\n if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) {\n viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);\n }\n else {\n viewWrapper.classList.add(TOTAL_COUNT_WRAPPER$1);\n this.updateRemainWidth(viewWrapper, totalWidth);\n }\n return raminElement;\n };\n MultiSelect.prototype.updateRemainingText = function (raminElement, downIconWidth, remaining, remainContent, totalContent) {\n var overAllContainer = this.componentWrapper.offsetWidth -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n var wrapperleng = this.viewWrapper.offsetWidth + parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n if (((wrapperleng + downIconWidth) >= overAllContainer) && wrapperleng !== 0 && this.viewWrapper.firstChild &&\n this.viewWrapper.firstChild.nodeType === 3) {\n while (((wrapperleng + downIconWidth) > overAllContainer) && wrapperleng !== 0 && this.viewWrapper.firstChild &&\n this.viewWrapper.firstChild.nodeType === 3) {\n var textArr = this.viewWrapper.firstChild.nodeValue.split(this.delimiterChar);\n textArr.pop();\n this.viewWrapper.firstChild.nodeValue = textArr.join(this.delimiterChar);\n if (this.viewWrapper.firstChild.nodeValue === '') {\n this.viewWrapper.removeChild(this.viewWrapper.firstChild);\n }\n remaining++;\n wrapperleng = this.viewWrapper.offsetWidth;\n }\n var totalWidth = overAllContainer - downIconWidth;\n this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth);\n }\n };\n MultiSelect.prototype.getOverflowVal = function (index) {\n var temp;\n if (this.mainData && this.mainData.length) {\n var value = this.allowObjectBinding ?\n getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];\n if (this.mode === 'CheckBox') {\n var newTemp = this.listData;\n this.listData = this.mainData;\n temp = this.getTextByValue(value);\n this.listData = newTemp;\n }\n else {\n temp = this.getTextByValue(value);\n }\n }\n else {\n temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :\n this.value[index];\n }\n return temp;\n };\n MultiSelect.prototype.unWireEvent = function () {\n if (!isNullOrUndefined(this.componentWrapper)) {\n EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);\n }\n EventHandler.remove(window, 'resize', this.windowResize);\n if (!isNullOrUndefined(this.inputElement)) {\n EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);\n EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);\n if (this.mode !== 'CheckBox') {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n }\n EventHandler.remove(this.inputElement, 'keyup', this.keyUp);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);\n }\n if (!isNullOrUndefined(this.componentWrapper)) {\n EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);\n EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);\n }\n if (!isNullOrUndefined(this.overAllClear)) {\n EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);\n }\n if (!isNullOrUndefined(this.inputElement)) {\n EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);\n }\n };\n MultiSelect.prototype.selectAllItem = function (state, event, list) {\n var li;\n if (!isNullOrUndefined(this.list)) {\n li = this.list.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');\n }\n if (this.value && this.value.length && event && event.target\n && closest(event.target, '.e-close-hooker') && this.allowFiltering) {\n li = this.mainList.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');\n }\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n var target = (event ? (this.groupTemplate ?\n closest(event.target, '.e-list-group-item') : event.target) : null);\n target = (event && event.keyCode === 32) ? list : target;\n target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;\n if (target && target.classList.contains('e-list-group-item')) {\n var listElement = target.nextElementSibling;\n if (isNullOrUndefined(listElement)) {\n return;\n }\n while (listElement.classList.contains('e-list-item')) {\n if (!(this.fields.disabled && this.isDisabledElement(listElement))) {\n if (state) {\n if (!listElement.firstElementChild.lastElementChild.classList.contains('e-check')) {\n var selectionLimit = this.value && this.value.length ? this.value.length : 0;\n if (listElement.classList.contains('e-active')) {\n selectionLimit -= 1;\n }\n if (selectionLimit < this.maximumSelectionLength) {\n this.updateListSelection(listElement, event);\n }\n }\n }\n else {\n if (listElement.firstElementChild.lastElementChild.classList.contains('e-check')) {\n this.updateListSelection(listElement, event);\n }\n }\n }\n listElement = listElement.nextElementSibling;\n if (listElement == null) {\n break;\n }\n }\n if (target.classList.contains('e-list-group-item')) {\n var focusedElement = this.list.getElementsByClassName('e-item-focus')[0];\n if (focusedElement) {\n focusedElement.classList.remove('e-item-focus');\n }\n if (state) {\n target.classList.add('e-active');\n }\n else {\n target.classList.remove('e-active');\n }\n target.classList.add('e-item-focus');\n this.updateAriaActiveDescendant();\n }\n this.textboxValueUpdate();\n this.checkPlaceholderSize();\n if (!this.changeOnBlur && event) {\n this.updateValueState(event, this.value, this.tempValues);\n }\n }\n else {\n this.updateValue(event, li, state);\n }\n }\n else {\n this.updateValue(event, li, state);\n }\n this.addValidInputClass();\n };\n MultiSelect.prototype.virtualSelectionAll = function (state, li, event) {\n var _this = this;\n var index = 0;\n var length = li.length;\n var count = this.maximumSelectionLength;\n if (state) {\n this.virtualSelectAll = true;\n length = this.virtualSelectAllData && this.virtualSelectAllData.length !== 0 ? this.virtualSelectAllData.length : length;\n this.listData = this.virtualSelectAllData;\n var ulElement = this.createListItems(this.virtualSelectAllData.slice(0, 30), this.fields);\n var firstItems = ulElement.querySelectorAll('li');\n var fragment_1 = document.createDocumentFragment();\n firstItems.forEach(function (node) {\n fragment_1.appendChild(node.cloneNode(true));\n });\n li.forEach(function (node) {\n fragment_1.appendChild(node.cloneNode(true));\n });\n var concatenatedNodeList = fragment_1.childNodes;\n if (this.virtualSelectAllData instanceof Array) {\n while (index < length && index <= 50 && index < count) {\n this.isSelectAllTarget = (length === index + 1);\n if (concatenatedNodeList[index]) {\n var value = this.allowObjectBinding\n ? this.getDataByValue(concatenatedNodeList[index].getAttribute('data-value'))\n : this.getFormattedValue(concatenatedNodeList[index].getAttribute('data-value'));\n if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) >= 0) ||\n (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) >= 0))) {\n index++;\n continue;\n }\n this.updateListSelection(concatenatedNodeList[index], event, length - index);\n }\n else {\n var value = getValue(this.fields.value ? this.fields.value : '', this.virtualSelectAllData[index]);\n value = this.allowObjectBinding ? this.getDataByValue(value) : value;\n if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) >= 0) ||\n (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) >= 0))) {\n index++;\n continue;\n }\n if (this.value && value != null && Array.isArray(this.value) &&\n ((!this.allowObjectBinding && this.value.indexOf(value) < 0) ||\n (this.allowObjectBinding && !this.isObjectInArray(value, this.value)))) {\n this.dispatchSelect(value, event, null, false, length);\n }\n }\n index++;\n }\n if (length > 50) {\n setTimeout(function () {\n if (_this.virtualSelectAllData && _this.virtualSelectAllData.length > 0) {\n _this.virtualSelectAllData.map(function (obj) {\n if (_this.value && obj[_this.fields.value] != null && Array.isArray(_this.value) &&\n ((!_this.allowObjectBinding && _this.value.indexOf(obj[_this.fields.value]) < 0) ||\n (_this.allowObjectBinding && !_this.isObjectInArray(obj[_this.fields.value], _this.value)))) {\n var value = obj[_this.fields.value];\n var text = (obj[_this.fields.text]).toString();\n _this.dispatchSelect(value, event, null, false, length, obj, text);\n }\n });\n }\n _this.updatedataValueItems(event);\n _this.isSelectAllLoop = false;\n if (!_this.changeOnBlur) {\n _this.updateValueState(event, _this.value, _this.tempValues);\n _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;\n }\n _this.updateHiddenElement(true);\n if (_this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {\n var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];\n if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {\n li[index - 1].classList.remove('e-item-focus');\n }\n }\n }, 0);\n }\n }\n }\n else {\n if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {\n this.virtualSelectAllData.map(function (obj) {\n _this.virtualSelectAll = true;\n _this.removeValue(_this.value[index], event, _this.value.length - index);\n });\n }\n this.updatedataValueItems(event);\n if (!this.changeOnBlur) {\n this.updateValueState(event, this.value, this.tempValues);\n this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;\n }\n this.updateHiddenElement();\n this.setProperties({ value: [] }, true);\n this.virtualSelectAll = false;\n if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {\n this.notify('setCurrentViewDataAsync', {\n component: this.getModuleName(),\n module: 'VirtualScroll'\n });\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var virtualTrackElement = this.list.getElementsByClassName('e-virtual-ddl')[0];\n if (virtualTrackElement) {\n virtualTrackElement.style = this.GetVirtualTrackHeight();\n }\n this.UpdateSkeleton();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var virtualContentElement = this.list.getElementsByClassName('e-virtual-ddl-content')[0];\n if (virtualContentElement) {\n virtualContentElement.style = this.getTransformValues();\n }\n };\n MultiSelect.prototype.updateValue = function (event, li, state) {\n var _this = this;\n var length = li.length;\n var beforeSelectArgs = {\n event: event,\n items: state ? li : [],\n itemData: state ? this.listData : [],\n isInteracted: event ? true : false,\n isChecked: state,\n preventSelectEvent: false\n };\n this.trigger('beforeSelectAll', beforeSelectArgs);\n if ((li && li.length) || (this.enableVirtualization && !state)) {\n var index_1 = 0;\n var count_1 = 0;\n if (this.enableGroupCheckBox) {\n count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;\n }\n else {\n count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;\n }\n if (!beforeSelectArgs.preventSelectEvent) {\n if (this.enableVirtualization) {\n this.virtualSelectAllState = state;\n this.virtualSelectAll = true;\n this.CurrentEvent = event;\n if (!this.virtualSelectAllData) {\n this.resetList(this.dataSource, this.fields, new Query());\n }\n if (this.virtualSelectAllData) {\n this.virtualSelectionAll(state, li, event);\n }\n }\n else {\n while (index_1 < length && index_1 <= 50 && index_1 < count_1) {\n this.isSelectAllTarget = (length === index_1 + 1);\n this.updateListSelection(li[index_1], event, length - index_1);\n if (this.enableGroupCheckBox) {\n this.findGroupStart(li[index_1]);\n }\n index_1++;\n }\n if (length > 50) {\n setTimeout(function () {\n while (index_1 < length && index_1 < count_1) {\n _this.isSelectAllTarget = (length === index_1 + 1);\n _this.updateListSelection(li[index_1], event, length - index_1);\n if (_this.enableGroupCheckBox) {\n _this.findGroupStart(li[index_1]);\n }\n index_1++;\n }\n _this.updatedataValueItems(event);\n if (!_this.changeOnBlur) {\n _this.updateValueState(event, _this.value, _this.tempValues);\n _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;\n }\n _this.updateHiddenElement();\n if (_this.popupWrapper && li[index_1 - 1].classList.contains('e-item-focus')) {\n var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];\n if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {\n li[index_1 - 1].classList.remove('e-item-focus');\n }\n }\n }, 0);\n }\n }\n }\n else {\n for (var i = 0; i < li.length && i < count_1; i++) {\n this.removeHover();\n var customVal = li[i].getAttribute('data-value');\n var value = this.getFormattedValue(customVal);\n value = this.allowObjectBinding ? this.getDataByValue(value) : value;\n var mainElement = this.mainList ? this.mainList.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide)')[i] : null;\n if (state) {\n this.value = !this.value ? [] : this.value;\n if ((!this.allowObjectBinding && this.value.indexOf(value) < 0) ||\n (this.allowObjectBinding && !this.isObjectInArray(value, this.value))) {\n this.setProperties({ value: [].concat([], this.value, [value]) }, true);\n }\n this.removeFocus();\n this.addListSelection(li[i], mainElement);\n this.updateChipStatus();\n this.checkMaxSelection();\n }\n else {\n this.removeAllItems(value, event, false, li[i], mainElement);\n }\n if (this.enableGroupCheckBox) {\n this.findGroupStart(li[i]);\n }\n }\n if (!state) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit < this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n }\n var args = {\n event: event,\n items: state ? li : [],\n itemData: state ? this.listData : [],\n isInteracted: event ? true : false,\n isChecked: state\n };\n this.trigger('selectedAll', args);\n }\n }\n this.updatedataValueItems(event);\n this.checkPlaceholderSize();\n if (length <= 50 && !beforeSelectArgs.preventSelectEvent) {\n if (!this.changeOnBlur) {\n this.updateValueState(event, this.value, this.tempValues);\n this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;\n }\n if ((this.enableVirtualization && this.value && this.value.length > 0) || !this.enableVirtualization) {\n this.updateHiddenElement();\n }\n }\n };\n MultiSelect.prototype.updateHiddenElement = function (isVirtualSelectAll) {\n var _this = this;\n var hiddenValue = '';\n var wrapperText = '';\n var data = '';\n var text = [];\n if (this.mode === 'CheckBox') {\n this.value.map(function (value, index) {\n hiddenValue += '';\n if (!isVirtualSelectAll) {\n if (_this.listData) {\n data = _this.getTextByValue(value);\n }\n else {\n data = value;\n }\n wrapperText += data + _this.delimiterChar + ' ';\n text.push(data);\n }\n });\n this.hiddenElement.innerHTML = hiddenValue;\n if (!isVirtualSelectAll) {\n this.updateWrapperText(this.delimiterWrapper, wrapperText);\n this.setProperties({ text: text.toString() }, true);\n }\n this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));\n this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);\n this.refreshInputHight();\n this.refreshPlaceHolder();\n }\n };\n MultiSelect.prototype.updatedataValueItems = function (event) {\n this.deselectHeader();\n this.textboxValueUpdate(event);\n };\n MultiSelect.prototype.textboxValueUpdate = function (event) {\n var isRemoveAll = event && event.target && (closest(event.target, '.e-selectall-parent')\n || closest(event.target, '.e-close-hooker'));\n if (this.mode !== 'Box' && !this.isPopupOpen() && !(this.mode === 'CheckBox' && (this.isSelectAll || isRemoveAll))) {\n this.updateDelimView();\n }\n else {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if ((!(isRemoveAll || this.isSelectAll) && this.isSelectAllTarget) || (this.isSelectAll && this.isSelectAllTarget)) {\n this.updateDelimeter(this.delimiterChar, event);\n }\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar, event);\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateDataSource = function (prop) {\n if (isNullOrUndefined(this.list)) {\n this.renderPopup();\n }\n else {\n this.resetList(this.dataSource);\n }\n if (this.value && this.value.length) {\n this.setProperties({ 'value': this.value });\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.onLoadSelect = function () {\n this.setDynValue = true;\n this.renderPopup();\n };\n MultiSelect.prototype.selectAllItems = function (state, event) {\n var _this = this;\n if (isNullOrUndefined(this.list)) {\n this.selectAllAction = function () {\n if (_this.mode === 'CheckBox' && _this.showSelectAll) {\n var args = {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox',\n value: state ? 'check' : 'uncheck'\n };\n _this.notify('checkSelectAll', args);\n }\n _this.selectAllItem(state, event);\n _this.selectAllAction = null;\n };\n _super.prototype.render.call(this);\n }\n else {\n this.selectAllAction = null;\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n var args = {\n value: state ? 'check' : 'uncheck',\n enable: this.mode === 'CheckBox',\n module: 'CheckBoxSelection'\n };\n this.notify('checkSelectAll', args);\n }\n this.selectAllItem(state, event);\n }\n if (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualSelectAllData)) {\n this.virtualSelectAll = false;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n MultiSelect.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {MultiSelectModel} newProp - Returns the dynamic property value of the component.\n * @param {MultiSelectModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))\n || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {\n if (this.resetFilteredData) {\n // The filtered data is not being reset in the component after the user focuses out.\n this.resetMainList = !this.resetMainList ? this.mainList : this.resetMainList;\n this.resetFilteredData = false;\n }\n this.mainList = null;\n this.mainData = null;\n this.isFirstClick = false;\n this.isDynamicDataChange = true;\n }\n if (this.getModuleName() === 'multiselect') {\n this.filterAction = false;\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'dataSource':\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n if (!isNullOrUndefined(this.popupObj)) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttribute();\n break;\n case 'showClearButton':\n this.updateClearButton(newProp.showClearButton);\n break;\n case 'text':\n if (this.fields.disabled) {\n this.text =\n this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;\n }\n this.updateVal(this.value, this.value, 'text');\n break;\n case 'value':\n if (this.fields.disabled) {\n this.removeDisabledItemsValue(this.value);\n }\n this.updateVal(this.value, oldProp.value, 'value');\n this.addValidInputClass();\n if (!this.closePopupOnSelect && this.isPopupOpen()) {\n this.refreshPopup();\n }\n if (this.isPopupOpen() && this.mode === 'CheckBox' && this.list && this.list.querySelector('.e-active.e-disable')) {\n var activeItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active' + '.e-disable');\n removeClass(activeItems, 'e-disable');\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n break;\n case 'width':\n this.setWidth(newProp.width);\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n break;\n case 'placeholder':\n this.refreshPlaceHolder();\n break;\n case 'filterBarPlaceholder':\n if (this.allowFiltering) {\n this.notify('filterBarPlaceholder', { filterBarPlaceholder: newProp.filterBarPlaceholder });\n }\n break;\n case 'delimiterChar':\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.updateData(newProp.delimiterChar);\n break;\n case 'cssClass':\n this.updateOldPropCssClass(oldProp.cssClass);\n this.updateCssClass();\n this.calculateWidth();\n break;\n case 'enableRtl':\n this.enableRTL(newProp.enableRtl);\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n case 'readonly':\n this.updateReadonly(newProp.readonly);\n this.hidePopup();\n break;\n case 'enabled':\n this.hidePopup();\n this.enable(newProp.enabled);\n break;\n case 'showSelectAll':\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n break;\n case 'showDropDownIcon':\n this.dropDownIcon();\n break;\n case 'floatLabelType':\n this.setFloatLabelType();\n this.addValidInputClass();\n Input.createSpanElement(this.overAllWrapper, this.createElement);\n this.calculateWidth();\n if (!isNullOrUndefined(this.overAllWrapper) &&\n !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n break;\n case 'enableSelectionOrder':\n break;\n case 'selectAllText':\n this.notify('selectAllText', false);\n break;\n case 'popupHeight':\n if (this.popupObj) {\n var overAllHeight = parseInt(this.popupHeight, 10);\n if (this.popupHeight !== 'auto') {\n this.list.style.maxHeight = formatUnit(overAllHeight);\n this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n this.list.style.maxHeight = formatUnit(this.popupHeight);\n }\n }\n break;\n case 'headerTemplate':\n case 'footerTemplate':\n this.reInitializePoup();\n break;\n case 'allowFiltering':\n if (this.mode === 'CheckBox' && this.popupObj) {\n this.reInitializePoup();\n }\n this.updateSelectElementData(this.allowFiltering);\n break;\n case 'fields':\n if (isNullOrUndefined(this.fields.groupBy)) {\n this.removeScrollEvent();\n }\n break;\n default:\n {\n var msProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, msProps.newProperty, msProps.oldProperty);\n }\n break;\n }\n }\n };\n MultiSelect.prototype.reInitializePoup = function () {\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n };\n MultiSelect.prototype.totalItemsCount = function () {\n var dataSourceCount;\n if (this.dataSource instanceof DataManager) {\n if (this.remoteDataCount >= 0) {\n dataSourceCount = this.totalItemCount = this.dataCount = this.remoteDataCount;\n }\n else {\n this.resetList(this.dataSource);\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;\n }\n if (this.mode === 'CheckBox') {\n this.totalItemCount = dataSourceCount !== 0 ? dataSourceCount : this.totalItemCount;\n }\n else {\n if (this.hideSelectedItem) {\n this.totalItemCount = dataSourceCount !== 0 && this.value ? dataSourceCount - this.value.length : this.totalItemCount;\n if (this.allowCustomValue && this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {\n for (var i = 0; i < this.virtualCustomSelectData.length; i++) {\n for (var j = 0; j < this.value.length; j++) {\n var value = this.allowObjectBinding ? getValue((this.fields.value) ?\n this.fields.value : '', this.value[j]) : this.value[j];\n var customValue = getValue((this.fields.value) ?\n this.fields.value : '', this.virtualCustomSelectData[i]);\n if (value === customValue) {\n this.totalItemCount += 1;\n }\n }\n }\n }\n }\n else {\n this.totalItemCount = dataSourceCount !== 0 ? dataSourceCount : this.totalItemCount;\n if (this.allowCustomValue && this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {\n this.totalItemCount += this.virtualCustomSelectData.length;\n }\n }\n }\n };\n MultiSelect.prototype.presentItemValue = function (ulElement) {\n var valuecheck = [];\n for (var i = 0; i < this.value.length; i++) {\n var value = this.allowObjectBinding ? getValue((this.fields.value) ?\n this.fields.value : '', this.value[i]) : this.value[i];\n var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);\n if (!checkEle) {\n var checkvalue = this.allowObjectBinding ?\n this.getDataByValue(this.value[i]) : this.value[i];\n valuecheck.push(checkvalue);\n }\n }\n return valuecheck;\n };\n MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {\n var _this = this;\n this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, list.length);\n }\n _this.updateActionList(ulElement, list, event);\n });\n };\n MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {\n if (!this.list) {\n this.onLoadSelect();\n }\n else if ((this.dataSource instanceof DataManager) && (!this.listData || !(this.mainList && this.mainData))) {\n this.onLoadSelect();\n }\n else {\n var valuecheck = [];\n if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {\n valuecheck = this.presentItemValue(this.ulElement);\n }\n if (prop === 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)\n && this.listData != null && !this.enableVirtualization) {\n this.mainData = null;\n this.setDynValue = true;\n this.addNonPresentItems(valuecheck, this.ulElement, this.listData);\n }\n else {\n if (prop === 'text') {\n this.initialTextUpdate();\n newProp = this.value;\n }\n if (isNullOrUndefined(this.value) || this.value.length === 0) {\n this.tempValues = oldProp;\n }\n // eslint-disable-next-line\n if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus\n && this.isPopupOpen() && this.mainData !== this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {\n this.initialValueUpdate();\n }\n if (this.mode !== 'Box' && !this.inputFocus) {\n this.updateDelimView();\n }\n if (!this.inputFocus) {\n this.refreshInputHight();\n }\n this.refreshPlaceHolder();\n if (this.mode !== 'CheckBox' && this.changeOnBlur) {\n this.updateValueState(null, newProp, oldProp);\n }\n this.checkPlaceholderSize();\n }\n }\n if (!this.changeOnBlur) {\n this.updateValueState(null, newProp, oldProp);\n }\n };\n /**\n * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}\n */\n MultiSelect.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n };\n /**\n * Hides the popup, if the popup in a open state.\n *\n * @param {MouseEvent | KeyboardEventArgs} e - Specifies the mouse event or keyboard event.\n * @returns {void}\n */\n MultiSelect.prototype.hidePopup = function (e) {\n var _this = this;\n var delay = 100;\n if (this.isPopupOpen()) {\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay \n };\n this.customFilterQuery = null;\n var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (_this.fields.groupBy && _this.mode !== 'CheckBox' && _this.fixedHeaderElement) {\n remove(_this.fixedHeaderElement);\n _this.fixedHeaderElement = null;\n }\n _this.beforePopupOpen = false;\n _this.overAllWrapper.classList.remove(iconAnimation);\n var typedValue = _this.mode === 'CheckBox' ? _this.targetElement() : null;\n _this.popupObj.hide(new Animation(eventArgs.animation));\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n _this.inputElement.removeAttribute('aria-owns');\n _this.inputElement.removeAttribute('aria-activedescendant');\n if (_this.allowFiltering) {\n _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'clear' });\n }\n _this.popupObj.hide();\n removeClass([document.body, _this.popupObj.element], 'e-popup-full-page');\n EventHandler.remove(_this.list, 'keydown', _this.onKeyDown);\n if (_this.mode === 'CheckBox' && _this.showSelectAll) {\n EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);\n }\n if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value && _this.value.length > 0 &&\n _this.enableSelectionOrder) {\n _this.viewPortInfo.startIndex = _this.virtualItemStartIndex = 0;\n _this.viewPortInfo.endIndex = _this.virtualItemEndIndex = _this.viewPortInfo.startIndex > 0 ?\n _this.viewPortInfo.endIndex : _this.itemCount;\n _this.virtualListInfo = _this.viewPortInfo;\n _this.previousStartIndex = 0;\n _this.previousEndIndex = 0;\n }\n var dataSourceCount = void 0;\n if (_this.dataSource instanceof DataManager) {\n if (_this.remoteDataCount >= 0) {\n _this.totalItemCount = _this.dataCount = _this.remoteDataCount;\n }\n else {\n _this.resetList(_this.dataSource);\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dataSourceCount = _this.dataSource && _this.dataSource.length ? _this.dataSource.length : 0;\n }\n if (_this.enableVirtualization && (_this.allowFiltering || _this.allowCustomValue) &&\n (_this.targetElement() || typedValue) && _this.totalItemCount !== dataSourceCount) {\n _this.checkAndResetCache();\n _this.updateInitialData();\n }\n if (_this.virtualCustomData && _this.viewPortInfo && _this.viewPortInfo.startIndex === 0 &&\n _this.viewPortInfo.endIndex === _this.itemCount) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.renderItems(_this.mainData, _this.fields);\n }\n _this.virtualCustomData = null;\n _this.isVirtualTrackHeight = false;\n }\n });\n }\n };\n /**\n * Shows the popup, if the popup in a closed state.\n *\n * @param {MouseEvent | KeyboardEventArgs} e - Specifies the mouse event or keyboard event.\n * @returns {void}\n */\n MultiSelect.prototype.showPopup = function (e) {\n var _this = this;\n if (!this.enabled) {\n return;\n }\n this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n if (!_this.ulElement) {\n _this.beforePopupOpen = true;\n if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering && _this.isDeviceFullScreen) {\n _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });\n }\n _super.prototype.render.call(_this, e);\n return;\n }\n if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering && _this.isDeviceFullScreen) {\n _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });\n }\n var mainLiLength = _this.ulElement.querySelectorAll('li.' + 'e-list-item').length;\n var liLength = _this.ulElement.querySelectorAll('li.'\n + dropDownBaseClasses.li + '.' + HIDE_LIST).length;\n if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length) &&\n !(_this.targetElement() !== '' && _this.allowCustomValue)) {\n _this.beforePopupOpen = false;\n return;\n }\n _this.onPopupShown(e);\n if (_this.enableVirtualization && _this.listData && _this.listData.length) {\n if (!isNullOrUndefined(_this.value) && (_this.getModuleName() === 'dropdownlist' ||\n _this.getModuleName() === 'combobox')) {\n _this.removeHover();\n }\n if (!_this.beforePopupOpen) {\n if (_this.hideSelectedItem && _this.value && Array.isArray(_this.value) && _this.value.length > 0) {\n _this.totalItemsCount();\n }\n if (!_this.preventSetCurrentData && !isNullOrUndefined(_this.viewPortInfo.startIndex) &&\n !isNullOrUndefined(_this.viewPortInfo.endIndex)) {\n _this.notify('setCurrentViewDataAsync', {\n component: _this.getModuleName(),\n module: 'VirtualScroll'\n });\n }\n }\n }\n if (_this.enableVirtualization && !_this.allowFiltering && _this.selectedValueInfo != null &&\n _this.selectedValueInfo.startIndex > 0 && _this.value != null) {\n _this.notify('dataProcessAsync', {\n module: 'VirtualScroll',\n isOpen: true\n });\n }\n if (_this.enableVirtualization) {\n _this.updatevirtualizationList();\n }\n else {\n if (_this.value && _this.value.length) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var element = void 0;\n var listItems = _this.getItems();\n for (var _i = 0, _a = _this.value; _i < _a.length; _i++) {\n var value = _a[_i];\n var checkValue = _this.allowObjectBinding ?\n getValue((_this.fields.value) ? _this.fields.value : '', value) : value;\n element = _this.getElementByValue(checkValue);\n if (element) {\n _this.addListSelection(element);\n }\n }\n }\n }\n _this.preventSetCurrentData = true;\n }\n });\n };\n /**\n * Based on the state parameter, entire list item will be selected/deselected.\n * parameter\n * `true` - Selects entire list items.\n * `false` - Un Selects entire list items.\n *\n * @param {boolean} state - if it’s true then Selects the entire list items. If it’s false the Unselects entire list items.\n * @returns {void}\n */\n MultiSelect.prototype.selectAll = function (state) {\n this.isSelectAll = true;\n this.selectAllItems(state);\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n MultiSelect.prototype.getModuleName = function () {\n return 'multiselect';\n };\n /**\n * Allows you to clear the selected values from the Multiselect component.\n *\n * @returns {void}\n */\n MultiSelect.prototype.clear = function () {\n var _this = this;\n this.selectAll(false);\n if (this.value && this.value.length) {\n setTimeout(function () {\n _this.setProperties({ value: null }, true);\n }, 0);\n }\n else {\n this.setProperties({ value: null }, true);\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n MultiSelect.prototype.render = function () {\n if (!isNullOrUndefined(this.value) && this.value.length > 0) {\n // eslint-disable-next-line\n this.value = this.value.slice();\n }\n this.setDynValue = this.initStatus = false;\n this.isSelectAll = false;\n this.selectAllEventEle = [];\n this.searchWrapper = this.createElement('span', {\n className: SEARCHBOX_WRAPPER + ' ' + ((this.mode === 'Box') ?\n BOX_ELEMENT : '')\n });\n this.viewWrapper = this.createElement('span', {\n className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;'\n });\n this.overAllClear = this.createElement('span', {\n className: CLOSEICON_CLASS$1, styles: 'display:none;'\n });\n this.componentWrapper = this.createElement('div', { className: ELEMENT_WRAPPER });\n this.overAllWrapper = this.createElement('div', { className: OVER_ALL_WRAPPER });\n if (this.mode === 'CheckBox') {\n addClass([this.overAllWrapper], 'e-checkbox');\n }\n if (Browser.isDevice) {\n this.componentWrapper.classList.add(ELEMENT_MOBILE_WRAPPER);\n }\n this.setWidth(this.width);\n this.overAllWrapper.appendChild(this.componentWrapper);\n this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });\n this.popupWrapper.setAttribute('aria-label', this.element.id);\n this.popupWrapper.setAttribute('role', 'dialog');\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });\n this.componentWrapper.appendChild(this.delimiterWrapper);\n }\n else {\n this.chipCollectionWrapper = this.createElement('span', {\n className: CHIP_WRAPPER$1,\n styles: 'display:none'\n });\n if (this.mode === 'Default') {\n this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_default'));\n }\n else if (this.mode === 'Box') {\n this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_box'));\n }\n this.componentWrapper.appendChild(this.chipCollectionWrapper);\n }\n if (this.mode !== 'Box') {\n this.componentWrapper.appendChild(this.viewWrapper);\n }\n this.componentWrapper.appendChild(this.searchWrapper);\n if (this.showClearButton && !Browser.isDevice) {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n else {\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n this.dropDownIcon();\n this.inputElement = this.createElement('input', {\n className: INPUT_ELEMENT,\n attrs: {\n spellcheck: 'false',\n type: 'text',\n autocomplete: 'off',\n tabindex: '0',\n role: 'combobox'\n }\n });\n if (this.mode === 'Default' || this.mode === 'Box') {\n this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);\n }\n if (!isNullOrUndefined(this.inputElement)) {\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n if (!this.inputElement.hasAttribute('aria-label')) {\n this.inputElement.setAttribute('aria-label', this.getModuleName());\n }\n }\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.overAllWrapper);\n this.searchWrapper.appendChild(this.inputElement);\n }\n else {\n this.element.parentElement.insertBefore(this.overAllWrapper, this.element);\n this.searchWrapper.appendChild(this.inputElement);\n this.searchWrapper.appendChild(this.element);\n this.element.removeAttribute('tabindex');\n }\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n else if (this.floatLabelType === 'Never') {\n this.refreshPlaceHolder();\n }\n this.addValidInputClass();\n this.element.style.opacity = '';\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'class': HIDDEN_ELEMENT, 'tabindex': '-1', 'multiple': '' }\n });\n this.componentWrapper.appendChild(this.hiddenElement);\n this.validationAttribute(this.element, this.hiddenElement);\n if (this.mode !== 'CheckBox') {\n this.hideOverAllClear();\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) &&\n closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.wireEvent();\n this.enable(this.enabled);\n this.enableRTL(this.enableRtl);\n if (this.enableVirtualization) {\n this.updateVirtualizationProperties(this.itemCount, this.allowFiltering, this.mode === 'CheckBox');\n }\n this.listItemHeight = this.getListHeight();\n this.getSkeletonCount();\n this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;\n this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ?\n this.viewPortInfo.endIndex : this.itemCount;\n this.checkInitialValue();\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n Input.createSpanElement(this.overAllWrapper, this.createElement);\n this.calculateWidth();\n if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n this.renderComplete();\n };\n MultiSelect.prototype.getListHeight = function () {\n var listParent = this.createElement('div', {\n className: 'e-dropdownbase'\n });\n var item = this.createElement('li', {\n className: 'e-list-item'\n });\n var listParentHeight = formatUnit(this.popupHeight);\n listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';\n listParent.appendChild(item);\n document.body.appendChild(listParent);\n this.virtualListHeight = listParent.getBoundingClientRect().height;\n var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +\n parseInt(window.getComputedStyle(item).marginBottom, 10);\n listParent.remove();\n return listItemHeight;\n };\n /**\n * Removes disabled values from the given array.\n *\n * @param { number[] | string[] | boolean[] | object[] } value - The array to check.\n * @returns {void}\n */\n MultiSelect.prototype.removeDisabledItemsValue = function (value) {\n if (value) {\n var data = [];\n var dataIndex = 0;\n for (var index = 0; index < value.length; index++) {\n var indexValue = value[index];\n if (typeof (indexValue) === 'object') {\n indexValue = JSON.parse(JSON.stringify(indexValue))[this.fields.value];\n }\n if ((indexValue != null) && !(this.isDisabledItemByIndex(this.getIndexByValue(indexValue)))) {\n data[dataIndex++] = value[index];\n }\n }\n this.value = data.length > 0 ? data : null;\n }\n };\n MultiSelect.prototype.checkInitialValue = function () {\n var _this = this;\n if (this.fields.disabled) {\n this.removeDisabledItemsValue(this.value);\n }\n var isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)\n : !isNullOrUndefined(this.dataSource);\n if (!(this.value && this.value.length) &&\n isNullOrUndefined(this.text) &&\n !isData &&\n this.element.tagName === 'SELECT' &&\n this.element.options.length > 0) {\n var optionsElement = this.element.options;\n var valueCol = [];\n var textCol = '';\n for (var index = 0, optionsLen = optionsElement.length; index < optionsLen; index++) {\n var opt = optionsElement[index];\n if (!isNullOrUndefined(opt.getAttribute('selected'))) {\n if (opt.getAttribute('value')) {\n var value = this.allowObjectBinding ? this.getDataByValue(opt.getAttribute('value')) : opt.getAttribute('value');\n valueCol.push(value);\n }\n else {\n textCol += (opt.text + this.delimiterChar);\n }\n }\n }\n if (valueCol.length > 0) {\n this.setProperties({ value: valueCol }, true);\n }\n else if (textCol !== '') {\n this.setProperties({ text: textCol }, true);\n }\n if (valueCol.length > 0 || textCol !== '') {\n this.refreshInputHight();\n this.refreshPlaceHolder();\n }\n }\n if ((this.value && this.value.length) || !isNullOrUndefined(this.text)) {\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n }\n if (this.fields.disabled) {\n this.text = this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;\n }\n if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.initialTextUpdate();\n }\n if (this.value && this.value.length) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var listItems_2;\n if (this.enableVirtualization) {\n var fields = !this.isPrimitiveData ? this.fields.value : '';\n var predicate = void 0;\n for (var i = 0; i < this.value.length; i++) {\n var value = this.allowObjectBinding ?\n getValue((this.fields.value) ? this.fields.value : '', this.value[i]) :\n this.value[i];\n if (i === 0) {\n predicate = new Predicate(fields, 'equal', value);\n }\n else {\n predicate = predicate.or(fields, 'equal', value);\n }\n }\n if (this.dataSource instanceof DataManager) {\n this.dataSource.executeQuery(new Query().where(predicate))\n .then(function (e) {\n if (e.result.length > 0) {\n listItems_2 = e.result;\n _this.initStatus = false;\n setTimeout(function () {\n _this.initialValueUpdate(listItems_2, true);\n _this.initialUpdate();\n }, 100);\n _this.initStatus = true;\n }\n });\n }\n else {\n listItems_2 = new DataManager(this.dataSource).executeLocal(new Query().where(predicate));\n }\n }\n if (!(this.dataSource instanceof DataManager)) {\n this.initialValueUpdate(listItems_2, true);\n this.initialUpdate();\n }\n else {\n this.setInitialValue = function () {\n _this.initStatus = false;\n if (!_this.enableVirtualization || (_this.enableVirtualization && (!(_this.dataSource instanceof DataManager)))) {\n _this.initialValueUpdate(listItems_2);\n }\n _this.initialUpdate();\n _this.setInitialValue = null;\n _this.initStatus = true;\n };\n }\n this.updateTempValue();\n }\n else {\n this.initialUpdate();\n }\n this.initStatus = true;\n this.checkAutoFocus();\n if (!isNullOrUndefined(this.text)) {\n this.element.setAttribute('data-initial-value', this.text);\n }\n };\n MultiSelect.prototype.checkAutoFocus = function () {\n if (this.element.hasAttribute('autofocus')) {\n this.inputElement.focus();\n }\n };\n MultiSelect.prototype.updatevirtualizationList = function () {\n if (this.value && this.value.length) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var element = void 0;\n for (var _i = 0, _a = this.value; _i < _a.length; _i++) {\n var value = _a[_i];\n var checkValue = this.allowObjectBinding ? getValue((this.fields.value) ?\n this.fields.value : '', value) : value;\n element = this.getElementByValue(checkValue);\n if (element) {\n this.addListSelection(element);\n }\n }\n if (this.enableVirtualization && this.hideSelectedItem) {\n var visibleListElements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');\n if (visibleListElements.length) {\n var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;\n if (visibleListElements.length < (actualCount + 2)) {\n var query = this.getForQuery(this.value).clone();\n query = query.skip(this.viewPortInfo.startIndex);\n this.resetList(this.dataSource, this.fields, query);\n }\n }\n }\n }\n };\n MultiSelect.prototype.setFloatLabelType = function () {\n removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n };\n MultiSelect.prototype.addValidInputClass = function () {\n if (!isNullOrUndefined(this.overAllWrapper)) {\n if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {\n addClass([this.overAllWrapper], 'e-valid-input');\n }\n else {\n removeClass([this.overAllWrapper], 'e-valid-input');\n }\n }\n };\n MultiSelect.prototype.dropDownIcon = function () {\n if (this.showDropDownIcon) {\n this.dropIcon = this.createElement('span', { className: dropdownIcon });\n this.componentWrapper.appendChild(this.dropIcon);\n addClass([this.componentWrapper], ['e-down-icon']);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.dropIcon.parentElement.removeChild(this.dropIcon);\n removeClass([this.componentWrapper], ['e-down-icon']);\n }\n }\n };\n MultiSelect.prototype.initialUpdate = function () {\n if (this.mode !== 'Box' && !(this.setDynValue && this.mode === 'Default' && this.inputFocus)) {\n this.updateDelimView();\n }\n this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;\n this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;\n this.updateCssClass();\n this.updateHTMLAttribute();\n this.updateReadonly(this.readonly);\n this.refreshInputHight();\n this.checkPlaceholderSize();\n };\n /**\n * Method to disable specific item in the popup.\n *\n * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.\n * @returns {void}\n * @deprecated\n */\n MultiSelect.prototype.disableItem = function (item) {\n if (this.fields.disabled) {\n if (!this.list) {\n this.renderList();\n }\n var itemIndex = -1;\n if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {\n if (typeof (item) === 'string') {\n itemIndex = this.getIndexByValue(item);\n }\n else if (typeof item === 'object') {\n if (item instanceof HTMLLIElement) {\n for (var index = 0; index < this.liCollections.length; index++) {\n if (this.liCollections[index] === item) {\n itemIndex = this.getIndexByValue(item.getAttribute('data-value'));\n break;\n }\n }\n }\n else {\n var value = JSON.parse(JSON.stringify(item))[this.fields.value];\n for (var index = 0; index < this.listData.length; index++) {\n if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {\n itemIndex = this.getIndexByValue(value);\n break;\n }\n }\n }\n }\n else {\n itemIndex = item;\n }\n var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;\n if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {\n var li = this.liCollections[itemIndex];\n if (li) {\n this.disableListItem(li);\n var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));\n parsedData[this.fields.disabled] = true;\n this.listData[itemIndex] = parsedData;\n if (li.classList.contains(dropDownBaseClasses.focus)) {\n this.removeFocus();\n }\n if (li.classList.contains(HIDE_LIST) || li.classList.contains(dropDownBaseClasses.selected)) {\n var oldValue = this.value;\n this.removeDisabledItemsValue(this.value);\n this.updateVal(this.value, oldValue, 'value');\n }\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n this.disableGroupHeader();\n }\n }\n }\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n MultiSelect.prototype.destroy = function () {\n // eslint-disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n if (!isNullOrUndefined(this.popupObj)) {\n this.popupObj.hide();\n this.popupObj.destroy();\n }\n this.notify(destroy, {});\n this.unwireListEvents();\n this.unWireEvent();\n var temp = ['readonly', 'aria-disabled', 'placeholder', 'aria-label', 'aria-expanded'];\n var length = temp.length;\n if (!isNullOrUndefined(this.inputElement)) {\n while (length > 0) {\n this.inputElement.removeAttribute(temp[length - 1]);\n length--;\n }\n }\n if (!isNullOrUndefined(this.element)) {\n this.element.removeAttribute('data-initial-value');\n this.element.style.display = 'block';\n }\n if (this.overAllWrapper && this.overAllWrapper.parentElement) {\n if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {\n remove(this.overAllWrapper);\n }\n else {\n this.overAllWrapper.parentElement.insertBefore(this.element, this.overAllWrapper);\n remove(this.overAllWrapper);\n }\n }\n if (this.popupWrapper && this.popupWrapper.parentElement) {\n this.popupWrapper.parentElement.remove();\n }\n while (this.searchWrapper && this.searchWrapper.firstChild) {\n this.searchWrapper.removeChild(this.searchWrapper.firstChild);\n }\n if (this.searchWrapper && this.searchWrapper.parentElement) {\n this.searchWrapper.parentElement.remove();\n }\n if (this.viewWrapper && this.viewWrapper.parentElement) {\n this.viewWrapper.parentElement.remove();\n }\n if (this.overAllClear && this.overAllClear.parentElement) {\n this.overAllClear.parentElement.remove();\n }\n if (this.delimiterWrapper && this.delimiterWrapper.parentElement) {\n this.delimiterWrapper.parentElement.remove();\n }\n // Remove the select element if it exists\n var selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');\n if (selectElement && selectElement.parentElement) {\n selectElement.parentElement.remove();\n }\n while (this.componentWrapper && this.componentWrapper.firstChild) {\n this.componentWrapper.removeChild(this.componentWrapper.firstChild);\n }\n if (this.componentWrapper && this.componentWrapper.parentElement) {\n this.componentWrapper.removeAttribute('class');\n this.componentWrapper.parentElement.remove();\n }\n while (this.popupWrapper && this.popupWrapper.firstChild) {\n this.popupWrapper.removeChild(this.popupWrapper.firstChild);\n }\n if (this.inputElement) {\n var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',\n 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-label', 'aria-hidden', 'tabindex', 'aria-controls',\n 'aria-describedby', 'size', 'role', 'type', 'class'];\n for (var i = 0; i < attrArray.length; i++) {\n this.inputElement.removeAttribute(attrArray[i]);\n }\n }\n if (this.inputElement) {\n this.inputElement.remove();\n }\n this.list = null;\n this.popupObj = null;\n this.mainData = null;\n this.filterParent = null;\n this.ulElement = null;\n this.componentWrapper = null;\n this.overAllClear = null;\n this.overAllWrapper = null;\n this.hiddenElement = null;\n this.searchWrapper = null;\n this.viewWrapper = null;\n this.chipCollectionWrapper = null;\n this.targetInputElement = null;\n this.popupWrapper = null;\n this.inputElement = null;\n this.delimiterWrapper = null;\n this.liCollections = null;\n this.header = null;\n this.mainList = null;\n this.mainListCollection = null;\n this.footer = null;\n this.selectAllEventEle = null;\n _super.prototype.destroy.call(this);\n };\n __decorate$5([\n Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)\n ], MultiSelect.prototype, \"fields\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"enablePersistence\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"groupTemplate\", void 0);\n __decorate$5([\n Property('No records found')\n ], MultiSelect.prototype, \"noRecordsTemplate\", void 0);\n __decorate$5([\n Property('Request failed')\n ], MultiSelect.prototype, \"actionFailureTemplate\", void 0);\n __decorate$5([\n Property('None')\n ], MultiSelect.prototype, \"sortOrder\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"enabled\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"enableVirtualization\", void 0);\n __decorate$5([\n Property([])\n ], MultiSelect.prototype, \"dataSource\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"query\", void 0);\n __decorate$5([\n Property('StartsWith')\n ], MultiSelect.prototype, \"filterType\", void 0);\n __decorate$5([\n Property(1000)\n ], MultiSelect.prototype, \"zIndex\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"ignoreAccent\", void 0);\n __decorate$5([\n Property()\n ], MultiSelect.prototype, \"locale\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"enableGroupCheckBox\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"cssClass\", void 0);\n __decorate$5([\n Property('100%')\n ], MultiSelect.prototype, \"width\", void 0);\n __decorate$5([\n Property('300px')\n ], MultiSelect.prototype, \"popupHeight\", void 0);\n __decorate$5([\n Property('100%')\n ], MultiSelect.prototype, \"popupWidth\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"placeholder\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"filterBarPlaceholder\", void 0);\n __decorate$5([\n Property({})\n ], MultiSelect.prototype, \"htmlAttributes\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"valueTemplate\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"headerTemplate\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"footerTemplate\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"itemTemplate\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"allowFiltering\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"isDeviceFullScreen\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"changeOnBlur\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"allowCustomValue\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"showClearButton\", void 0);\n __decorate$5([\n Property(1000)\n ], MultiSelect.prototype, \"maximumSelectionLength\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"readonly\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"text\", void 0);\n __decorate$5([\n Property(null)\n ], MultiSelect.prototype, \"value\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"allowObjectBinding\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"hideSelectedItem\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"closePopupOnSelect\", void 0);\n __decorate$5([\n Property('Default')\n ], MultiSelect.prototype, \"mode\", void 0);\n __decorate$5([\n Property(',')\n ], MultiSelect.prototype, \"delimiterChar\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"ignoreCase\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"showDropDownIcon\", void 0);\n __decorate$5([\n Property('Never')\n ], MultiSelect.prototype, \"floatLabelType\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"showSelectAll\", void 0);\n __decorate$5([\n Property('Select All')\n ], MultiSelect.prototype, \"selectAllText\", void 0);\n __decorate$5([\n Property('Unselect All')\n ], MultiSelect.prototype, \"unSelectAllText\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"enableSelectionOrder\", void 0);\n __decorate$5([\n Property(true)\n ], MultiSelect.prototype, \"openOnClick\", void 0);\n __decorate$5([\n Property(false)\n ], MultiSelect.prototype, \"addTagOnBlur\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"change\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"removing\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"removed\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"beforeSelectAll\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"selectedAll\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"beforeOpen\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"open\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"close\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"blur\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"focus\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"chipSelection\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"filtering\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"tagging\", void 0);\n __decorate$5([\n Event()\n ], MultiSelect.prototype, \"customValueSelection\", void 0);\n MultiSelect = __decorate$5([\n NotifyPropertyChanges\n ], MultiSelect);\n return MultiSelect;\n}(DropDownBase));\n\nvar ICON = 'e-icons';\nvar CHECKBOXFRAME$1 = 'e-frame';\nvar CHECK$1 = 'e-check';\nvar CHECKBOXWRAP$1 = 'e-checkbox-wrapper';\nvar INDETERMINATE = 'e-stop';\nvar checkAllParent = 'e-selectall-parent';\nvar searchBackIcon = 'e-input-group-icon e-back-icon e-icons';\nvar filterBarClearIcon = 'e-input-group-icon e-clear-icon e-icons';\nvar filterInput = 'e-input-filter';\nvar filterParent = 'e-filter-parent';\nvar mobileFilter = 'e-ddl-device-filter';\nvar clearIcon = 'e-clear-icon';\nvar popupFullScreen = 'e-popup-full-page';\nvar device = 'e-ddl-device';\nvar FOCUS$1 = 'e-input-focus';\n/**\n * The Multiselect enable CheckBoxSelection call this inject module.\n */\nvar CheckBoxSelection = /** @__PURE__ @class */ (function () {\n function CheckBoxSelection(parent) {\n this.activeLi = [];\n this.activeEle = [];\n this.parent = parent;\n this.removeEventListener();\n this.addEventListener();\n }\n CheckBoxSelection.prototype.getModuleName = function () {\n return 'CheckBoxSelection';\n };\n CheckBoxSelection.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('updatelist', this.listSelection, this);\n this.parent.on('listoption', this.listOption, this);\n this.parent.on('selectAll', this.setSelectAll, this);\n this.parent.on('checkSelectAll', this.checkSelectAll, this);\n this.parent.on('searchBox', this.setSearchBox, this);\n this.parent.on('blur', this.onBlurHandler, this);\n this.parent.on('targetElement', this.targetElement, this);\n this.parent.on('deviceSearchBox', this.setDeviceSearchBox, this);\n this.parent.on('inputFocus', this.getFocus, this);\n this.parent.on('reOrder', this.setReorder, this);\n this.parent.on('activeList', this.getActiveList, this);\n this.parent.on('selectAllText', this.setLocale, this);\n this.parent.on('filterBarPlaceholder', this.setPlaceholder, this);\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n this.parent.on('addItem', this.checboxCreate, this);\n this.parent.on('popupFullScreen', this.setPopupFullScreen, this);\n };\n CheckBoxSelection.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('updatelist', this.listSelection);\n this.parent.off('listoption', this.listOption);\n this.parent.off('selectAll', this.setSelectAll);\n this.parent.off('checkSelectAll', this.checkSelectAll);\n this.parent.off('searchBox', this.setSearchBox);\n this.parent.off('blur', this.onBlurHandler);\n this.parent.off('targetElement', this.targetElement);\n this.parent.off('deviceSearchBox', this.setDeviceSearchBox);\n this.parent.off('inputFocus', this.getFocus);\n this.parent.off('reOrder', this.setReorder);\n this.parent.off('activeList', this.getActiveList);\n this.parent.off('selectAllText', this.setLocale);\n this.parent.off('filterBarPlaceholder', this.setPlaceholder);\n this.parent.off('addItem', this.checboxCreate);\n this.parent.off('popupFullScreen', this.setPopupFullScreen);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n CheckBoxSelection.prototype.listOption = function (args) {\n var _this = this;\n if (isNullOrUndefined(this.parent.listCurrentOptions.itemCreated)) {\n this.parent.listCurrentOptions.itemCreated = function (e) {\n _this.checboxCreate(e);\n };\n }\n else {\n var itemCreated_1 = this.parent.listCurrentOptions.itemCreated;\n this.parent.listCurrentOptions.itemCreated = function (e) {\n _this.checboxCreate(e);\n itemCreated_1.apply(_this, [e]);\n };\n }\n };\n CheckBoxSelection.prototype.setPlaceholder = function (props) {\n Input.setPlaceholder(props.filterBarPlaceholder, this.filterInput);\n };\n CheckBoxSelection.prototype.checboxCreate = function (e) {\n var item;\n if (!isNullOrUndefined(e.item)) {\n item = e.item;\n }\n else {\n item = e;\n }\n if (this.parent.enableGroupCheckBox || (item.className !== 'e-list-group-item '\n && item.className !== 'e-list-group-item')) {\n var checkboxEle = createCheckBox(this.parent.createElement, true);\n var icon = select('div.' + ICON, item);\n item.insertBefore(checkboxEle, item.childNodes[isNullOrUndefined(icon) ? 0 : 1]);\n select('.' + CHECKBOXFRAME$1, checkboxEle);\n if (this.parent.enableGroupCheckBox) {\n this.parent.popupWrapper.classList.add('e-multiselect-group');\n }\n return item;\n }\n else {\n return item;\n }\n };\n CheckBoxSelection.prototype.setSelectAll = function () {\n if (this.parent.showSelectAll) {\n if (isNullOrUndefined(this.checkAllParent)) {\n this.checkAllParent = this.parent.createElement('div', {\n className: checkAllParent\n });\n this.selectAllSpan = this.parent.createElement('span', {\n className: 'e-all-text'\n });\n this.selectAllSpan.textContent = '';\n this.checkAllParent.appendChild(this.selectAllSpan);\n this.setLocale();\n this.checboxCreate(this.checkAllParent);\n if (this.parent.headerTemplate) {\n if (!isNullOrUndefined(this.parent.filterParent)) {\n append([this.checkAllParent], this.parent.filterParent);\n }\n else {\n append([this.checkAllParent], this.parent.popupWrapper);\n }\n }\n if (!this.parent.headerTemplate) {\n if (!isNullOrUndefined(this.parent.filterParent)) {\n this.parent.filterParent.parentNode.insertBefore(this.checkAllParent, this.parent.filterParent.nextSibling);\n }\n else {\n prepend([this.checkAllParent], this.parent.popupWrapper);\n }\n }\n EventHandler.add(this.checkAllParent, 'mousedown', this.clickHandler, this);\n }\n if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 && !this.parent.enableVirtualization &&\n !(this.parent.isDynamicDataChange)) || (this.parent.isDynamicDataChange &&\n this.parent.listData && this.parent.listData.length <= 1)) {\n this.checkAllParent.style.display = 'none';\n }\n else {\n this.checkAllParent.style.display = 'block';\n }\n this.parent.selectAllHeight = this.checkAllParent.getBoundingClientRect().height;\n }\n else if (!isNullOrUndefined(this.checkAllParent)) {\n this.checkAllParent.parentElement.removeChild(this.checkAllParent);\n this.checkAllParent = null;\n }\n };\n CheckBoxSelection.prototype.destroy = function () {\n this.removeEventListener();\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.checkAllParent = null;\n this.clearIconElement = null;\n this.filterInput = null;\n this.filterInputObj = null;\n this.checkWrapper = null;\n this.selectAllSpan = null;\n };\n CheckBoxSelection.prototype.listSelection = function (args) {\n var target;\n if (!isNullOrUndefined(args.e)) {\n var frameElm = args.li.querySelector('.e-checkbox-wrapper .e-frame');\n target = !isNullOrUndefined(args.e.target) ?\n (args.e.target.classList.contains('e-frame')\n && (!this.parent.showSelectAll\n || (this.checkAllParent && !this.checkAllParent.contains(args.e.target)))) ?\n args.e.target : args.li.querySelector('.e-checkbox-wrapper').childNodes[1]\n : args.li.querySelector('.e-checkbox-wrapper').childNodes[1];\n }\n else {\n var checkboxWrapper = args.li.querySelector('.e-checkbox-wrapper');\n target = checkboxWrapper ? checkboxWrapper.childNodes[1] : args.li.lastElementChild.childNodes[1];\n }\n if (this.parent.itemTemplate || this.parent.enableGroupCheckBox) {\n target = args.li.firstElementChild.childNodes[1];\n }\n if (!isNullOrUndefined(target)) {\n this.checkWrapper = closest(target, '.' + CHECKBOXWRAP$1);\n }\n if (!isNullOrUndefined(this.checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME$1, this.checkWrapper);\n var selectAll = false;\n this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK$1), args.li, args.e, selectAll);\n }\n };\n CheckBoxSelection.prototype.validateCheckNode = function (checkWrap, isCheck, li, e, selectAll) {\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true, selectAll);\n };\n CheckBoxSelection.prototype.clickHandler = function (e) {\n var target;\n if (e.currentTarget.classList.contains(this.checkAllParent.className) ||\n (e.currentTarget.classList.value === this.checkAllParent.className)) {\n target = e.currentTarget.firstElementChild.lastElementChild;\n }\n else {\n target = e.currentTarget;\n }\n this.checkWrapper = closest(target, '.' + CHECKBOXWRAP$1);\n var selectAll = true;\n if (!isNullOrUndefined(this.checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME$1, this.checkWrapper);\n this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK$1), null, e, selectAll);\n }\n e.preventDefault();\n };\n CheckBoxSelection.prototype.changeState = function (wrapper, state, e, isPrevent, selectAll) {\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME$1)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK$1)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK$1);\n if (selectAll) {\n this.parent.selectAllItems(true, e);\n this.setLocale(true);\n }\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK$1) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK$1, INDETERMINATE]);\n if (selectAll) {\n this.parent.selectAllItems(false, e);\n this.setLocale();\n }\n }\n else if (state === 'indeterminate' && !(frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK$1]);\n frameSpan.classList.add(INDETERMINATE);\n if (selectAll) {\n this.parent.selectAllItems(false, e);\n this.setLocale();\n }\n }\n };\n CheckBoxSelection.prototype.setSearchBox = function (args) {\n if (isNullOrUndefined(this.parent.filterParent)) {\n this.parent.filterParent = this.parent.createElement('span', {\n className: filterParent\n });\n this.filterInput = this.parent.createElement('input', {\n attrs: { type: 'text' },\n className: filterInput\n });\n this.parent.element.parentNode.insertBefore(this.filterInput, this.parent.element);\n var backIcon = false;\n if (Browser.isDevice && this.parent.isDeviceFullScreen) {\n backIcon = true;\n this.parent.mobFilter = false;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ? [searchBackIcon, filterBarClearIcon] : [filterBarClearIcon],\n properties: { placeholder: this.parent.filterBarPlaceholder }\n }, this.parent.createElement);\n if (!isNullOrUndefined(this.parent.cssClass)) {\n if (this.parent.cssClass.split(' ').indexOf('e-outline') !== -1) {\n addClass([this.filterInputObj.container], 'e-outline');\n }\n else if (this.parent.cssClass.split(' ').indexOf('e-filled') !== -1) {\n addClass([this.filterInputObj.container], 'e-filled');\n }\n }\n append([this.filterInputObj.container], this.parent.filterParent);\n prepend([this.parent.filterParent], args.popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'role': 'combobox',\n 'autocomplete': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false',\n 'aria-label': 'multiselect',\n 'aria-expanded': 'true',\n 'aria-controls': args.popupElement.id\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'mousedown', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n EventHandler.add(this.filterInput, 'input', this.parent.onInput, this.parent);\n EventHandler.add(this.filterInput, 'keyup', this.parent.keyUp, this.parent);\n EventHandler.add(this.filterInput, 'keydown', this.parent.onKeyDown, this.parent);\n EventHandler.add(this.filterInput, 'blur', this.onBlurHandler, this);\n EventHandler.add(this.filterInput, 'paste', this.parent.pasteHandler, this.parent);\n this.parent.searchBoxHeight = (this.filterInputObj.container.parentElement).getBoundingClientRect().height;\n return this.filterInputObj;\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n CheckBoxSelection.prototype.clickOnBackIcon = function (e) {\n this.parent.hidePopup();\n removeClass([document.body, this.parent.popupObj.element], popupFullScreen);\n this.parent.inputElement.focus();\n };\n CheckBoxSelection.prototype.clearText = function (e) {\n this.parent.targetInputElement.value = '';\n if (this.parent.allowFiltering && this.parent.targetInputElement.value === '') {\n this.parent.search(null);\n }\n this.parent.refreshListItems(null);\n this.parent.refreshPopup();\n this.clearIconElement.style.visibility = 'hidden';\n this.filterInput.focus();\n if (!this.parent.enableVirtualization || (this.parent.enableVirtualization && (isNullOrUndefined(this.parent.value)\n || (this.parent.value && this.parent.value.length === 0)))) {\n this.setReorder(e);\n }\n this.boundPreventListSelection = this.preventListSelection.bind(this);\n this.parent.popupWrapper.addEventListener('mouseup', this.boundPreventListSelection, true);\n e.preventDefault();\n };\n CheckBoxSelection.prototype.preventListSelection = function (e) {\n e.stopPropagation();\n this.parent.popupWrapper.removeEventListener('mouseup', this.boundPreventListSelection, true);\n this.boundPreventListSelection = null;\n };\n CheckBoxSelection.prototype.setDeviceSearchBox = function () {\n this.parent.popupObj.element.classList.add(device);\n this.parent.popupObj.element.classList.add(mobileFilter);\n this.parent.popupObj.position = { X: 0, Y: 0 };\n this.parent.popupObj.dataBind();\n this.setSearchBoxPosition();\n this.backIconElement = this.filterInputObj.container.querySelector('.e-back-icon');\n this.clearIconElement = this.filterInputObj.container.querySelector('.' + clearIcon);\n this.clearIconElement.style.visibility = 'hidden';\n EventHandler.add(this.backIconElement, 'click', this.clickOnBackIcon, this);\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n };\n CheckBoxSelection.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n var selectAllHeight = 0;\n var footerHeight = 0;\n var headerHeight = 0;\n if (this.checkAllParent) {\n selectAllHeight = this.checkAllParent.getBoundingClientRect().height;\n }\n if (this.parent.header) {\n headerHeight = this.parent.header.getBoundingClientRect().height;\n }\n if (this.parent.footer) {\n footerHeight = this.parent.footer.getBoundingClientRect().height;\n }\n this.parent.popupObj.element.style.maxHeight = '100%';\n this.parent.popupObj.element.style.width = '100%';\n this.parent.list.style.maxHeight = (window.innerHeight - searchBoxHeight - selectAllHeight - headerHeight - footerHeight) + 'px';\n this.parent.list.style.height = (window.innerHeight - searchBoxHeight - selectAllHeight - headerHeight - footerHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n CheckBoxSelection.prototype.setPopupFullScreen = function () {\n if (this.parent && this.parent.popupObj) {\n attributes(this.parent.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, this.parent.popupObj.element], popupFullScreen);\n this.parent.popupObj.element.style.maxHeight = '100%';\n this.parent.popupObj.element.style.width = '100%';\n }\n };\n CheckBoxSelection.prototype.targetElement = function () {\n if (!isNullOrUndefined(this.clearIconElement)) {\n this.parent.targetInputElement = this.filterInput;\n this.clearIconElement.style.visibility = this.parent.targetInputElement.value === '' ? 'hidden' : 'visible';\n }\n return this.parent.targetInputElement.value;\n };\n CheckBoxSelection.prototype.onBlurHandler = function (e) {\n if (!this.parent.element.classList.contains('e-listbox')) {\n var target = void 0;\n if (this.parent.keyAction) {\n return;\n }\n if (Browser.isIE) {\n target = !isNullOrUndefined(e) && e.target;\n }\n if (!Browser.isIE) {\n target = !isNullOrUndefined(e) && e.relatedTarget;\n }\n // eslint-disable-next-line max-len\n if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element) && this.parent.popupObj.element.contains(target)\n && !Browser.isIE && this.filterInput) {\n this.filterInput.focus();\n return;\n }\n if (this.parent.scrollFocusStatus && this.filterInput) {\n e.preventDefault();\n this.filterInput.focus();\n this.parent.scrollFocusStatus = false;\n return;\n }\n if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element)\n && !this.parent.popupObj.element.classList.contains('e-popup-close')) {\n this.parent.inputFocus = false;\n this.parent.updateValueState(e, this.parent.value, this.parent.tempValues);\n this.parent.dispatchEvent(this.parent.hiddenElement, 'change');\n }\n if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element) &&\n !this.parent.popupObj.element.classList.contains('e-popup-close')) {\n this.parent.inputFocus = false;\n this.parent.overAllWrapper.classList.remove(FOCUS$1);\n this.parent.trigger('blur');\n this.parent.focused = true;\n }\n if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element) &&\n !this.parent.popupObj.element.classList.contains('e-popup-close') && !Browser.isDevice) {\n this.parent.hidePopup();\n }\n }\n };\n CheckBoxSelection.prototype.onDocumentClick = function (e) {\n if (this.parent.getLocaleName() !== 'listbox') {\n var target = e.target;\n if (!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id=\"' + this.parent.popupObj.element.id + '\"]')) {\n if (!(this.filterInput && this.filterInput.value !== '')) {\n e.preventDefault();\n }\n }\n if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id=\"' + this.parent.popupObj.element.id + '\"]'))\n && !isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target)) {\n if (this.parent.overAllWrapper.classList.contains(dropDownBaseClasses.focus) || this.parent.isPopupOpen()) {\n this.parent.inputFocus = false;\n this.parent.scrollFocusStatus = false;\n this.parent.hidePopup();\n this.parent.onBlurHandler(e, true);\n this.parent.focused = true;\n }\n }\n else {\n this.parent.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') &&\n (document.activeElement === this.filterInput);\n }\n if (!isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&\n !this.parent.isPopupOpen()) {\n if (Browser.isIE) {\n this.parent.onBlurHandler();\n }\n else {\n this.parent.onBlurHandler(e);\n }\n }\n if (this.filterInput === target) {\n this.filterInput.focus();\n }\n }\n };\n CheckBoxSelection.prototype.getFocus = function (e) {\n this.parent.overAllWrapper.classList.remove(FOCUS$1);\n if (this.parent.keyAction && e.value !== 'clear' && e.value !== 'focus') {\n this.parent.keyAction = false;\n return;\n }\n if (e.value === 'focus') {\n this.filterInput.focus();\n this.parent.removeFocus();\n EventHandler.remove(this.parent.list, 'keydown', this.parent.onKeyDown);\n }\n if (e.value === 'clear') {\n this.filterInput.value = '';\n this.clearIconElement.style.visibility = 'hidden';\n }\n };\n CheckBoxSelection.prototype.checkSelectAll = function (e) {\n if (e.value === 'check') {\n this.changeState(this.checkAllParent, e.value, null, null, false);\n this.setLocale(true);\n }\n if (e.value === 'uncheck') {\n this.changeState(this.checkAllParent, e.value, null, null, false);\n this.setLocale();\n }\n if (e.value === 'indeterminate') {\n this.changeState(this.checkAllParent, e.value, null, null, false);\n this.setLocale();\n }\n };\n CheckBoxSelection.prototype.setLocale = function (unSelect) {\n if (this.parent.selectAllText !== 'Select All' || this.parent.unSelectAllText !== 'Unselect All') {\n var template = unSelect ? this.parent.unSelectAllText : this.parent.selectAllText;\n this.selectAllSpan.textContent = '';\n var compiledString = compile(template);\n var templateName = unSelect ? 'unSelectAllText' : 'selectAllText';\n for (var _i = 0, _a = compiledString({}, this.parent, templateName, null, !this.parent.isStringTemplate); _i < _a.length; _i++) {\n var item = _a[_i];\n this.selectAllSpan.textContent = item.textContent;\n }\n }\n else {\n var l10nLocale = { selectAllText: 'Select All', unSelectAllText: 'Unselect All' };\n var l10n = new L10n(this.parent.getLocaleName(), {}, this.parent.locale);\n if (l10n.getConstant('selectAllText') === '') {\n l10n = new L10n('dropdowns', l10nLocale, this.parent.locale);\n }\n if (!isNullOrUndefined(this.selectAllSpan)) {\n this.selectAllSpan.textContent = unSelect ? l10n.getConstant('unSelectAllText') : l10n.getConstant('selectAllText');\n }\n }\n };\n CheckBoxSelection.prototype.getActiveList = function (args) {\n if (args.li.classList.contains('e-active')) {\n this.activeLi.push(args.li.cloneNode(true));\n }\n else {\n this.activeLi.splice(args.index, 1);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n CheckBoxSelection.prototype.setReorder = function (args) {\n if (this.parent.enableSelectionOrder && !isNullOrUndefined(this.parent.value)) {\n var activeLiCount = this.parent.ulElement.querySelectorAll('li.e-active').length;\n var remLi = void 0;\n var ulEle_1 = this.parent.createElement('ul', {\n className: 'e-list-parent e-ul e-reorder'\n });\n if (activeLiCount > 0) {\n var activeListItems = this.parent.ulElement.querySelectorAll('li.e-active');\n activeListItems.forEach(function (item) {\n ulEle_1.appendChild(item);\n });\n remLi = this.parent.ulElement.querySelectorAll('li.e-active');\n addClass(remLi, 'e-reorder-hide');\n if (this.parent.enableVirtualization) {\n var virtualUlElement = this.parent.list.querySelector('.e-virtual-ddl-content');\n prepend([ulEle_1], virtualUlElement);\n }\n else {\n prepend([ulEle_1], this.parent.list);\n }\n }\n this.parent.focusAtFirstListItem();\n }\n };\n return CheckBoxSelection;\n}());\n\nvar __extends$6 = (undefined && undefined.__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$6 = (undefined && undefined.__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/**\n * Defines the Selection settings of List Box.\n */\nvar SelectionSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$6(SelectionSettings, _super);\n function SelectionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$6([\n Property('Multiple')\n ], SelectionSettings.prototype, \"mode\", void 0);\n __decorate$6([\n Property(false)\n ], SelectionSettings.prototype, \"showCheckbox\", void 0);\n __decorate$6([\n Property(false)\n ], SelectionSettings.prototype, \"showSelectAll\", void 0);\n __decorate$6([\n Property('Left')\n ], SelectionSettings.prototype, \"checkboxPosition\", void 0);\n return SelectionSettings;\n}(ChildProperty));\n/**\n * Defines the toolbar settings of List Box.\n */\nvar ToolbarSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$6(ToolbarSettings, _super);\n function ToolbarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$6([\n Property([])\n ], ToolbarSettings.prototype, \"items\", void 0);\n __decorate$6([\n Property('Right')\n ], ToolbarSettings.prototype, \"position\", void 0);\n return ToolbarSettings;\n}(ChildProperty));\n/**\n * The ListBox is a graphical user interface component used to display a list of items.\n * Users can select one or more items in the list using a checkbox or by keyboard selection.\n * It supports sorting, grouping, reordering and drag and drop of items.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar ListBox = /** @__PURE__ @class */ (function (_super) {\n __extends$6(ListBox, _super);\n /**\n * Constructor for creating the ListBox component.\n *\n * @param {ListBoxModel} options - Specifies ListBox model\n * @param {string | HTMLElement} element - Specifies the element.\n */\n function ListBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isValidKey = false;\n _this.isDataSourceUpdate = false;\n _this.keyDownStatus = false;\n return _this;\n }\n ListBox_1 = ListBox;\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}.\n * @private\n */\n ListBox.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n if (this.allowFiltering && this.filterInput.value !== '') {\n this.filteringAction(this.jsonData, new Query(), this.fields);\n }\n };\n /**\n * Build and render the component.\n *\n * @private\n * @returns {void}\n */\n ListBox.prototype.render = function () {\n if (this.isAngular && this.allowFiltering) {\n var originalElement = this.element;\n var clonedElement = originalElement.cloneNode(true);\n originalElement.parentNode.replaceChild(clonedElement, originalElement);\n this.element = clonedElement;\n setValue('ej2_instances', [this], this.element);\n }\n this.inputString = '';\n this.initLoad = true;\n this.isCustomFiltering = false;\n this.initialSelectedOptions = this.value;\n this.inputFormName = this.element.getAttribute('name');\n _super.prototype.render.call(this);\n this.setEnabled();\n this.renderComplete();\n };\n ListBox.prototype.initWrapper = function () {\n var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });\n hiddenSelect.style.visibility = 'hidden';\n this.list.classList.add('e-listbox-wrapper');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.querySelector('.e-list-parent').setAttribute('role', 'presentation');\n var groupHdrs = this.list.querySelectorAll('.e-list-group-item');\n for (var i = 0; i < groupHdrs.length; i++) {\n groupHdrs[i].removeAttribute('tabindex');\n groupHdrs[i].setAttribute('role', 'option');\n }\n if (this.itemTemplate) {\n this.list.classList.add('e-list-template');\n }\n this.list.classList.add('e-wrapper');\n this.list.classList.add('e-lib');\n if (this.element.tagName === 'EJS-LISTBOX') {\n this.element.setAttribute('tabindex', '0');\n if (this.initLoad) {\n this.element.appendChild(this.list);\n }\n }\n else {\n if (this.initLoad && this.element.parentElement) {\n this.element.parentElement.insertBefore(this.list, this.element);\n }\n this.list.insertBefore(this.element, this.list.firstChild);\n this.element.style.display = 'none';\n }\n this.list.insertBefore(hiddenSelect, this.list.firstChild);\n if (this.list.getElementsByClassName('e-list-item')[0]) {\n this.list.getElementsByClassName('e-list-item')[0].classList.remove(dropDownBaseClasses.focus);\n }\n if (this.itemTemplate) {\n this.renderReactTemplates();\n }\n removeClass([this.list], [dropDownBaseClasses.content, dropDownBaseClasses.root]);\n this.validationAttribute(this.element, hiddenSelect);\n this.list.setAttribute('role', 'listbox');\n attributes(this.list, { 'role': 'listbox', 'aria-label': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });\n this.updateSelectionSettings();\n };\n ListBox.prototype.updateSelectionSettings = function () {\n if (this.selectionSettings.showCheckbox && this.selectionSettings.showSelectAll && this.liCollections.length) {\n var l10nSelect = new L10n(this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);\n this.showSelectAll = true;\n this.selectAllText = l10nSelect.getConstant('selectAllText');\n this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');\n this.popupWrapper = this.list;\n this.checkBoxSelectionModule.checkAllParent = null;\n this.notify('selectAll', {});\n }\n };\n ListBox.prototype.initDraggable = function () {\n var _this = this;\n if (this.ulElement) {\n this.ulElement.id = this.element.id + '_parent';\n }\n if (this.allowDragAndDrop) {\n new Sortable(this.ulElement, {\n scope: this.scope,\n itemClass: 'e-list-item',\n dragStart: this.triggerDragStart.bind(this),\n drag: this.triggerDrag.bind(this),\n beforeDrop: this.beforeDragEnd.bind(this),\n drop: this.dragEnd.bind(this),\n placeHolder: function () { return _this.createElement('span', { className: 'e-placeholder' }); },\n helper: function (e) {\n var wrapper = _this.list.cloneNode();\n var ele = e.sender.cloneNode(true);\n wrapper.appendChild(ele);\n var refEle = _this.getItems()[0];\n wrapper.style.width = refEle.offsetWidth + 'px';\n wrapper.style.height = refEle.offsetHeight + 'px';\n if ((_this.value && _this.value.length) > 1 && _this.isSelected(ele)) {\n ele.appendChild(_this.createElement('span', {\n className: 'e-list-badge', innerHTML: _this.value.length + ''\n }));\n }\n wrapper.style.zIndex = getZindexPartial(_this.element) + '';\n return wrapper;\n }\n });\n }\n };\n ListBox.prototype.updateActionCompleteData = function (li, item, index) {\n this.jsonData.splice(index === null ? this.jsonData.length : index, 0, item);\n };\n ListBox.prototype.initToolbar = function () {\n var pos = this.toolbarSettings.position;\n var prevScope = this.element.getAttribute('data-value');\n this.toolbarSettings.items = isNullOrUndefined(this.toolbarSettings.items) ? [] : this.toolbarSettings.items;\n if (this.toolbarSettings.items.length) {\n var toolElem = this.createElement('div', { className: 'e-listbox-tool', attrs: { 'role': 'toolbar' } });\n var wrapper = this.createElement('div', {\n className: 'e-listboxtool-wrapper e-lib e-' + pos.toLowerCase()\n });\n this.list.parentElement.insertBefore(wrapper, this.list);\n wrapper.appendChild(pos === 'Right' ? this.list : toolElem);\n wrapper.appendChild(pos === 'Right' ? toolElem : this.list);\n this.createButtons(toolElem);\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.scope) {\n document.querySelector(this.scope).setAttribute('data-value', this.element.id);\n }\n else {\n this.updateToolBarState();\n }\n }\n var scope = this.element.getAttribute('data-value');\n if (prevScope && scope && (prevScope !== scope)) {\n this.tBListBox = getComponent(document.getElementById(prevScope), this.getModuleName());\n this.tBListBox.updateToolBarState();\n }\n else if (scope) {\n this.tBListBox = getComponent(document.getElementById(scope), this.getModuleName());\n this.tBListBox.updateToolBarState();\n }\n };\n ListBox.prototype.createButtons = function (toolElem) {\n var _this = this;\n var btn;\n var ele;\n var title;\n var l10n = new L10n(this.getModuleName(), {\n moveUp: 'Move Up', moveDown: 'Move Down', moveTo: 'Move To',\n moveFrom: 'Move From', moveAllTo: 'Move All To', moveAllFrom: 'Move All From'\n }, this.locale);\n this.toolbarSettings.items.forEach(function (value) {\n title = l10n.getConstant(value);\n ele = _this.createElement('button', {\n attrs: {\n 'type': 'button',\n 'data-value': value,\n 'title': title,\n 'aria-label': title\n }\n });\n toolElem.appendChild(ele);\n btn = new Button({ iconCss: 'e-icons e-' + value.toLowerCase() }, ele);\n btn.createElement = _this.createElement;\n });\n };\n ListBox.prototype.validationAttribute = function (input, hiddenSelect) {\n if (this.inputFormName) {\n input.setAttribute('name', this.inputFormName);\n }\n _super.prototype.validationAttribute.call(this, input, hiddenSelect);\n hiddenSelect.required = input.required;\n input.required = false;\n };\n ListBox.prototype.setHeight = function () {\n var ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;\n ele.style.height = formatUnit(this.height);\n if (this.allowFiltering && this.height.toString().indexOf('%') < 0) {\n addClass([this.list], 'e-filter-list');\n }\n else {\n removeClass([this.list], 'e-filter-list');\n }\n };\n ListBox.prototype.setCssClass = function () {\n var wrap = this.toolbarSettings.items.length ? this.list.parentElement : this.list;\n if (this.cssClass) {\n addClass([wrap], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.enableRtl) {\n addClass([this.list], 'e-rtl');\n }\n };\n ListBox.prototype.setEnable = function () {\n var ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;\n if (this.enabled) {\n removeClass([ele], cssClass.disabled);\n }\n else {\n addClass([ele], cssClass.disabled);\n }\n };\n ListBox.prototype.showSpinner = function () {\n if (!this.spinner) {\n this.spinner = this.createElement('div', { className: 'e-listbox-wrapper' });\n }\n this.spinner.style.height = formatUnit(this.height);\n if (this.element.parentElement) {\n this.element.parentElement.insertBefore(this.spinner, this.element.nextSibling);\n }\n createSpinner({ target: this.spinner }, this.createElement);\n showSpinner(this.spinner);\n };\n ListBox.prototype.hideSpinner = function () {\n if (this.spinner.querySelector('.e-spinner-pane')) {\n hideSpinner(this.spinner);\n }\n if (this.spinner.parentElement) {\n detach(this.spinner);\n }\n };\n ListBox.prototype.onInput = function () {\n this.isDataSourceUpdate = false;\n if (this.keyDownStatus) {\n this.isValidKey = true;\n }\n else {\n this.isValidKey = false;\n }\n this.keyDownStatus = false;\n this.refreshClearIcon();\n };\n ListBox.prototype.clearText = function () {\n this.filterInput.value = '';\n this.refreshClearIcon();\n var event = document.createEvent('KeyboardEvent');\n this.isValidKey = true;\n this.KeyUp(event);\n };\n ListBox.prototype.refreshClearIcon = function () {\n if (this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon)) {\n var clearElement = this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon);\n clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';\n }\n };\n ListBox.prototype.onActionComplete = function (ulElement, list, e) {\n var searchEle;\n var filterElem;\n var txtLength;\n if (this.allowFiltering && this.list.getElementsByClassName('e-filter-parent')[0]) {\n searchEle = this.list.getElementsByClassName('e-filter-parent')[0].cloneNode(true);\n }\n if (list.length === 0) {\n var noRecElem = ulElement.childNodes[0];\n if (noRecElem) {\n ulElement.removeChild(noRecElem);\n }\n }\n if (this.allowFiltering) {\n filterElem = this.list.getElementsByClassName('e-input-filter')[0];\n if (filterElem) {\n txtLength = filterElem.selectionStart;\n }\n }\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.allowFiltering && !isNullOrUndefined(searchEle)) {\n this.list.insertBefore(searchEle, this.list.firstElementChild);\n this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];\n this.filterWireEvents(searchEle);\n var inputSearch = searchEle.querySelector('.e-input-filter');\n if (inputSearch) {\n inputSearch.addEventListener('focus', function () {\n if (!searchEle.childNodes[0].classList.contains('e-input-focus')) {\n searchEle.childNodes[0].classList.add('e-input-focus');\n }\n });\n inputSearch.addEventListener('blur', function () {\n if (searchEle.childNodes[0].classList.contains('e-input-focus')) {\n searchEle.childNodes[0].classList.remove('e-input-focus');\n }\n });\n }\n }\n this.initWrapper();\n this.setSelection(this.value, true, false, !this.isRendered);\n this.initDraggable();\n this.mainList = this.ulElement;\n if (this.initLoad) {\n this.jsonData = [];\n extend(this.jsonData, list, []);\n this.initToolbarAndStyles();\n this.wireEvents();\n if (this.showCheckbox) {\n this.setCheckboxPosition();\n }\n if (this.allowFiltering) {\n this.setFiltering();\n }\n }\n else {\n if (this.isDataSourceUpdate) {\n this.jsonData = [];\n extend(this.jsonData, list, []);\n this.isDataSourceUpdate = false;\n }\n if (this.allowFiltering) {\n filterElem = this.list.getElementsByClassName('e-input-filter')[0];\n if (isNullOrUndefined(filterElem)) {\n return;\n }\n filterElem.selectionStart = txtLength;\n filterElem.selectionEnd = txtLength;\n if (filterElem.value !== '') {\n filterElem.focus();\n }\n }\n }\n if (this.toolbarSettings.items.length && this.scope && this.scope.indexOf('#') > -1 && !isNullOrUndefined(e)) {\n var scope = this.scope.replace('#', '');\n var scopedLB = getComponent(document.getElementById(scope), this.getModuleName());\n scopedLB.initToolbar();\n }\n this.initLoad = false;\n };\n ListBox.prototype.initToolbarAndStyles = function () {\n this.initToolbar();\n this.setCssClass();\n this.setEnable();\n this.setHeight();\n };\n ListBox.prototype.triggerDragStart = function (args) {\n var _this = this;\n var badge;\n args = extend(this.getDragArgs(args), { dragSelected: true });\n if (Browser.isIos) {\n this.list.style.overflow = 'hidden';\n }\n this.trigger('dragStart', args, function (dragEventArgs) {\n _this.allowDragAll = dragEventArgs.dragSelected;\n if (!_this.allowDragAll) {\n badge = _this.ulElement.getElementsByClassName('e-list-badge')[0];\n if (badge) {\n detach(badge);\n }\n }\n });\n };\n ListBox.prototype.triggerDrag = function (args) {\n var _this = this;\n var scrollParent;\n var boundRect;\n var scrollMoved = 36;\n var scrollHeight = 10;\n if (this.itemTemplate && args.target) {\n if (args.target && args.target.closest('.e-list-item')) {\n scrollHeight = args.target.closest('.e-list-item').scrollHeight;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var listItem = args.element.querySelector('.e-list-item');\n if (listItem) {\n scrollHeight = listItem.scrollHeight;\n }\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var event = args.event;\n var wrapper;\n this.stopTimer();\n if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')\n || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group')\n || args.target.closest('.e-list-item'))) {\n if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')\n || args.target.classList.contains('e-input-group')\n || args.target.closest('.e-list-item')) {\n wrapper = args.target.closest('.e-listbox-wrapper');\n }\n else {\n wrapper = args.target;\n }\n if (this.allowFiltering) {\n scrollParent = wrapper.querySelector('.e-list-parent');\n }\n else {\n scrollParent = wrapper;\n }\n if (scrollParent) {\n boundRect = scrollParent.getBoundingClientRect();\n if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {\n this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);\n }\n else if ((event.clientY - scrollMoved) - boundRect.y < 1) {\n this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);\n }\n }\n }\n if (args.target === null) {\n return;\n }\n this.trigger('drag', this.getDragArgs(args));\n };\n ListBox.prototype.setScrollDown = function (scrollElem, scrollPixel, isScrollDown) {\n if (isScrollDown) {\n scrollElem.scrollTop = scrollElem.scrollTop + scrollPixel;\n }\n else {\n scrollElem.scrollTop = scrollElem.scrollTop - scrollPixel;\n }\n };\n ListBox.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n ListBox.prototype.beforeDragEnd = function (args) {\n this.stopTimer();\n var items = [];\n this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));\n if (this.value.indexOf(this.dragValue) > -1) {\n args.items = this.getDataByValues(this.value);\n }\n else {\n args.items = this.getDataByValues([this.dragValue]);\n }\n extend(items, args.items);\n this.trigger('beforeDrop', args);\n if (JSON.stringify(args.items) !== JSON.stringify(items)) {\n this.customDraggedItem = args.items;\n }\n };\n ListBox.prototype.dragEnd = function (args) {\n var _this = this;\n var listData;\n var liColl;\n var jsonData;\n var droppedData;\n var selectedOptions;\n var sortedData;\n var dropValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));\n var listObj = this.getComponent(args.droppedElement);\n var getArgs = this.getDragArgs({ target: args.droppedElement }, true);\n var sourceArgs = { previousData: this.dataSource };\n var destArgs = { previousData: listObj.dataSource };\n var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },\n previousIndex: args.previousIndex, currentIndex: args.currentIndex });\n if (listObj !== this) {\n var sourceArgs1 = extend(sourceArgs, { currentData: this.listData });\n dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });\n }\n if (Browser.isIos) {\n this.list.style.overflow = '';\n }\n var targetListObj = this.getComponent(args.target);\n if (targetListObj && targetListObj.listData.length === 0) {\n var noRecElem = targetListObj.ulElement.childNodes[0];\n if (noRecElem) {\n targetListObj.ulElement.removeChild(noRecElem);\n }\n }\n if (listObj === this) {\n var ul_1 = this.ulElement;\n listData = [].slice.call(this.listData);\n liColl = [].slice.call(this.liCollections);\n jsonData = [].slice.call(this.jsonData);\n sortedData = [].slice.call(this.sortedData);\n var toSortIdx_1 = args.currentIndex;\n var toIdx_1 = args.currentIndex = this.getCurIdx(this, args.currentIndex);\n var rIdx = listData.indexOf(this.getDataByValue(dropValue));\n var jsonIdx = jsonData.indexOf(this.getDataByValue(dropValue));\n var sIdx = sortedData.indexOf(this.getDataByValue(dropValue));\n listData.splice(toIdx_1, 0, listData.splice(rIdx, 1)[0]);\n sortedData.splice(toSortIdx_1, 0, sortedData.splice(sIdx, 1)[0]);\n jsonData.splice(toIdx_1, 0, jsonData.splice(jsonIdx, 1)[0]);\n liColl.splice(toIdx_1, 0, liColl.splice(rIdx, 1)[0]);\n if (this.allowDragAll) {\n selectedOptions = this.value && Array.prototype.indexOf.call(this.value, dropValue) > -1 ? this.value : [dropValue];\n if (!isNullOrUndefined(this.customDraggedItem)) {\n selectedOptions = [];\n this.customDraggedItem.forEach(function (item) {\n selectedOptions.push(getValue(_this.fields.value, item));\n });\n }\n selectedOptions.forEach(function (value) {\n if (value !== dropValue) {\n var idx = listData.indexOf(_this.getDataByValue(value));\n var jsonIdx_1 = jsonData.indexOf(_this.getDataByValue(value));\n var sIdx_1 = sortedData.indexOf(_this.getDataByValue(value));\n if (idx > toIdx_1) {\n toIdx_1++;\n }\n jsonData.splice(toIdx_1, 0, jsonData.splice(jsonIdx_1, 1)[0]);\n listData.splice(toIdx_1, 0, listData.splice(idx, 1)[0]);\n sortedData.splice(toSortIdx_1, 0, sortedData.splice(sIdx_1, 1)[0]);\n liColl.splice(toIdx_1, 0, liColl.splice(idx, 1)[0]);\n ul_1.insertBefore(_this.getItems()[_this.getIndexByValue(value)], ul_1.getElementsByClassName('e-placeholder')[0]);\n }\n });\n }\n this.listData = listData;\n this.jsonData = jsonData;\n this.sortedData = sortedData;\n this.liCollections = liColl;\n }\n else {\n var li_1;\n var fLiColl_1 = [].slice.call(this.liCollections);\n var currIdx_1 = args.currentIndex = this.getCurIdx(listObj, args.currentIndex);\n var ul_2 = listObj.ulElement;\n listData = [].slice.call(listObj.listData);\n liColl = [].slice.call(listObj.liCollections);\n jsonData = [].slice.call(listObj.jsonData);\n sortedData = [].slice.call(listObj.sortedData);\n selectedOptions = (this.value && Array.prototype.indexOf.call(this.value, dropValue) > -1 && this.allowDragAll)\n ? this.value : [dropValue];\n if (!isNullOrUndefined(this.customDraggedItem)) {\n selectedOptions = [];\n this.customDraggedItem.forEach(function (item) {\n selectedOptions.push(getValue(_this.fields.value, item));\n });\n }\n var fListData_1 = [].slice.call(this.listData);\n var fSortData_1 = [].slice.call(this.sortedData);\n selectedOptions.forEach(function (value) {\n droppedData = _this.getDataByValue(value);\n var srcIdx = _this.listData.indexOf(droppedData);\n var jsonSrcIdx = _this.jsonData.indexOf(droppedData);\n var sortIdx = _this.sortedData.indexOf(droppedData);\n fListData_1.splice(srcIdx, 1);\n _this.jsonData.splice(jsonSrcIdx, 1);\n fSortData_1.splice(sortIdx, 1);\n _this.listData = fListData_1;\n _this.sortedData = fSortData_1;\n var destIdx = value === dropValue ? args.currentIndex : currIdx_1;\n listData.splice(destIdx, 0, droppedData);\n jsonData.splice(destIdx, 0, droppedData);\n sortedData.splice(destIdx, 0, droppedData);\n liColl.splice(destIdx, 0, fLiColl_1.splice(srcIdx, 1)[0]);\n if (!value) {\n var liCollElem_1 = _this.getItems();\n for (var i = 0; i < liCollElem_1.length; i++) {\n if (liCollElem_1[i].getAttribute('data-value') === null && liCollElem_1[i].classList.contains('e-list-item')) {\n li_1 = liCollElem_1[i];\n break;\n }\n }\n }\n else {\n li_1 = _this.getItems()[_this.getIndexByValue(value)];\n }\n if (!li_1) {\n li_1 = args.helper;\n }\n _this.removeSelected(_this, value === dropValue ? [args.droppedElement] : [li_1]);\n ul_2.insertBefore(li_1, ul_2.getElementsByClassName('e-placeholder')[0]);\n currIdx_1++;\n });\n if (this.fields.groupBy) {\n var sourceElem = this.renderItems(this.listData, this.fields);\n this.updateListItems(sourceElem, this.ulElement);\n this.setSelection();\n }\n if (listObj.sortOrder !== 'None' || this.selectionSettings.showCheckbox\n !== listObj.selectionSettings.showCheckbox || listObj.fields.groupBy || listObj.itemTemplate || this.itemTemplate) {\n var sortable = getComponent(ul_2, 'sortable');\n var sourceElem = listObj.renderItems(listData, listObj.fields);\n listObj.updateListItems(sourceElem, ul_2);\n this.setSelection();\n if (sortable.placeHolderElement) {\n ul_2.appendChild(sortable.placeHolderElement);\n }\n ul_2.appendChild(args.helper);\n listObj.setSelection();\n }\n this.liCollections = fLiColl_1;\n listObj.liCollections = liColl;\n listObj.jsonData = extend([], [], jsonData, false);\n listObj.listData = extend([], [], listData, false);\n listObj.sortedData = extend([], [], sortedData, false);\n if (this.listData.length === 0) {\n this.l10nUpdate();\n }\n }\n if (this === listObj) {\n var sourceArgs1 = extend(sourceArgs, { currentData: listData });\n dragArgs = extend(dragArgs, { source: sourceArgs1 });\n }\n else {\n var dragArgs1 = extend(destArgs, { currentData: listData });\n dragArgs = extend(dragArgs, { destination: dragArgs1 });\n }\n if (!isNullOrUndefined(this.customDraggedItem)) {\n dragArgs.items = this.customDraggedItem;\n }\n this.trigger('drop', dragArgs);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var liCollElem = dragArgs.elements;\n if (liCollElem.length) {\n for (var i = 0; i < liCollElem.length; i++) {\n liCollElem[i].classList.remove('e-grabbed');\n }\n }\n if (this.toolbarSettings.items.length > 0) {\n this.updateToolBarState();\n }\n else if (this.tBListBox && this.tBListBox.toolbarSettings.items.length > 0) {\n this.tBListBox.updateToolBarState();\n }\n };\n ListBox.prototype.updateListItems = function (sourceElem, destElem) {\n destElem.innerHTML = '';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n destElem.append.apply(destElem, sourceElem.childNodes);\n };\n ListBox.prototype.removeSelected = function (listObj, elems) {\n if (listObj.selectionSettings.showCheckbox) {\n elems.forEach(function (ele) { ele.getElementsByClassName('e-frame')[0].classList.remove('e-check'); });\n }\n else {\n removeClass(elems, cssClass.selected);\n }\n };\n ListBox.prototype.getCurIdx = function (listObj, idx) {\n if (listObj.fields.groupBy) {\n idx -= [].slice.call(listObj.ulElement.children).slice(0, idx)\n .filter(function (ele) { return ele.classList.contains(cssClass.group); }).length;\n }\n return idx;\n };\n ListBox.prototype.getComponent = function (li) {\n var listObj;\n var ele = (this.element.tagName === 'EJS-LISTBOX' ? closest(li, '.e-listbox')\n : closest(li, '.e-listbox-wrapper') && closest(li, '.e-listbox-wrapper').querySelector('.e-listbox'));\n if (ele) {\n listObj = getComponent(ele, this.getModuleName());\n }\n return listObj;\n };\n /**\n * Sets the enabled state to DropDownBase.\n *\n * @returns {void}\n */\n ListBox.prototype.setEnabled = function () {\n this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');\n };\n ListBox.prototype.listOption = function (dataSource, fields) {\n this.listCurrentOptions = _super.prototype.listOption.call(this, dataSource, fields);\n this.listCurrentOptions = extend({}, this.listCurrentOptions, { itemCreated: this.triggerBeforeItemRender.bind(this) }, true);\n this.notify('listoption', { module: 'CheckBoxSelection' });\n return this.listCurrentOptions;\n };\n ListBox.prototype.triggerBeforeItemRender = function (e) {\n e.item.setAttribute('tabindex', '-1');\n this.trigger('beforeItemRender', { element: e.item, item: e.curData });\n };\n ListBox.prototype.requiredModules = function () {\n var modules = [];\n if (this.selectionSettings.showCheckbox) {\n modules.push({\n member: 'CheckBoxSelection',\n args: [this]\n });\n }\n return modules;\n };\n /**\n * This method is used to enable or disable the items in the ListBox based on the items and enable argument.\n *\n * @param {string[]} items - Text items that needs to be enabled/disabled.\n * @param {boolean} enable - Set `true`/`false` to enable/disable the list items.\n * @param {boolean} isValue - Set `true` if `items` parameter is a array of unique values.\n * @returns {void}\n */\n ListBox.prototype.enableItems = function (items, enable, isValue) {\n var _this = this;\n if (enable === void 0) { enable = true; }\n var li;\n items.forEach(function (item) {\n var text = item;\n li = _this.findListElement(_this.list, 'li', 'data-value', isValue ? text : _this.getValueByText(text));\n if (!li) {\n return;\n }\n if (enable) {\n removeClass([li], cssClass.disabled);\n li.removeAttribute('aria-disabled');\n }\n else {\n addClass([li], cssClass.disabled);\n li.setAttribute('aria-disabled', 'true');\n }\n });\n if (this.allowFiltering && this.filterInput && this.filterInput.value !== '' && this.toolbarSettings.items.length > 0) {\n var canDisable_1 = false;\n this.ulElement.childNodes.forEach(function (li) { if (!li.classList.contains('e-disabled')) {\n canDisable_1 = true;\n } });\n if (!canDisable_1) {\n var wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];\n var btn = wrap.querySelector('[data-value=\"moveAllTo\"]');\n btn.disabled = true;\n }\n }\n };\n /**\n * Based on the state parameter, specified list item will be selected/deselected.\n *\n * @param {string[]} items - Array of text value of the item.\n * @param {boolean} state - Set `true`/`false` to select/un select the list items.\n * @param {boolean} isValue - Set `true` if `items` parameter is a array of unique values.\n * @returns {void}\n */\n ListBox.prototype.selectItems = function (items, state, isValue) {\n if (state === void 0) { state = true; }\n if (state && !this.selectionSettings.showCheckbox && this.selectionSettings.mode === 'Single') {\n this.getSelectedItems().forEach(function (li) {\n li.classList.remove('e-active');\n li.removeAttribute('aria-selected');\n removeClass([li], cssClass.selected);\n });\n }\n this.setSelection(items, state, !isValue);\n this.updateSelectedOptions();\n var selElems = [];\n for (var i = 0; i < items.length; i++) {\n var liColl = this.list.querySelectorAll('[aria-selected=\"true\"]');\n for (var j = 0; j < liColl.length; j++) {\n if (items[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {\n selElems.push(liColl[j]);\n }\n }\n }\n this.triggerChange(selElems, null);\n };\n /**\n * Based on the state parameter, entire list item will be selected/deselected.\n *\n * @param {boolean} state - Set `true`/`false` to select/un select the entire list items.\n * @returns {void}\n */\n ListBox.prototype.selectAll = function (state) {\n if (state === void 0) { state = true; }\n this.selectAllItems(state);\n };\n /**\n * Adds a new item to the list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the list.\n * @returns {void}.\n */\n ListBox.prototype.addItems = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n if (this.allowFiltering && this.filterInput.value !== '') {\n this.filteringAction(this.jsonData, new Query(), this.fields);\n }\n };\n /**\n * Removes a item from the list. By default, removed the last item in the list,\n * but you can remove based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to remove the item from the list.\n * @returns {void}.\n */\n ListBox.prototype.removeItems = function (items, itemIndex) {\n this.removeItem(items, itemIndex);\n };\n /**\n * Removes a item from the list. By default, removed the last item in the list,\n * but you can remove based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to remove the item from the list.\n * @returns {void}.\n */\n ListBox.prototype.removeItem = function (items, itemIndex) {\n var _this = this;\n var liCollections = [];\n var liElement = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n if (items) {\n items = (items instanceof Array ? items : [items]);\n var fields = this.fields;\n var dataValue = void 0;\n var objValue = {};\n var dupData = [];\n extend(dupData, [], this.jsonData);\n var removeIdxes = [];\n var removeLiIdxes = [];\n for (var i = 0; i < dupData.length; i++) {\n var value = (dupData[i] instanceof Object) ? dupData[i][fields.value] :\n dupData[i].toString();\n objValue[value] = i;\n }\n for (var j = 0; j < items.length; j++) {\n dataValue = (items[j] instanceof Object) ? items[j][fields.value] :\n items[j].toString();\n if (Object.prototype.hasOwnProperty.call(objValue, dataValue)) {\n var idx = objValue[dataValue];\n liCollections.push(liElement[idx]);\n removeIdxes.push(idx);\n removeLiIdxes.push(idx);\n }\n }\n var validRemoveIdxes = removeIdxes.sort(function (a, b) { return b - a; });\n validRemoveIdxes.forEach(function (idx) {\n _this.listData.splice(idx, 1);\n _this.jsonData.splice(idx, 1);\n });\n for (var k = removeLiIdxes.length - 1; k >= 0; k--) {\n this.updateLiCollection(removeLiIdxes[k]);\n }\n }\n else {\n itemIndex = itemIndex ? itemIndex : 0;\n liCollections.push(liElement[itemIndex]);\n this.listData.splice(itemIndex, 1);\n this.jsonData.splice(itemIndex, 1);\n this.updateLiCollection(itemIndex);\n }\n for (var i = 0; i < liCollections.length; i++) {\n this.ulElement.removeChild(liCollections[i]);\n }\n if (this.listData.length === 0) {\n this.l10nUpdate();\n }\n if (this.listData.length !== this.sortedData.length) {\n this.sortedData = this.listData;\n }\n this.value = [];\n this.updateToolBarState();\n };\n /**\n * Gets the array of data Object that matches the given array of values.\n *\n * @param { string[] | number[] | boolean[] } value - Specifies the array value of the list item.\n * @returns {object[]}.\n */\n ListBox.prototype.getDataByValues = function (value) {\n var data = [];\n for (var i = 0; i < value.length; i++) {\n data.push(this.getDataByValue(value[i]));\n }\n return data;\n };\n /**\n * Moves the given value(s) / selected value(s) upwards.\n *\n * @param { string[] | number[] | boolean[] } value - Specifies the value(s).\n * @returns {void}\n */\n ListBox.prototype.moveUp = function (value) {\n var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();\n this.moveUpDown(true, false, elem);\n };\n /**\n * Moves the given value(s) / selected value(s) downwards.\n *\n * @param { string[] | number[] | boolean[] } value - Specifies the value(s).\n * @returns {void}\n */\n ListBox.prototype.moveDown = function (value) {\n var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();\n this.moveUpDown(false, false, elem);\n };\n /**\n * Moves the given value(s) / selected value(s) in Top of the list.\n *\n * @param { string[] | number[] | boolean[] } value - Specifies the value(s).\n * @returns {void}\n */\n ListBox.prototype.moveTop = function (value) {\n var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();\n this.moveUpDown(null, false, elem, true);\n };\n /**\n * Moves the given value(s) / selected value(s) in bottom of the list.\n *\n * @param { string[] | number[] | boolean[] } value - Specifies the value(s).\n * @returns {void}\n */\n ListBox.prototype.moveBottom = function (value) {\n var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();\n this.moveUpDown(true, false, elem, false, true);\n };\n /**\n * Moves the given value(s) / selected value(s) to the given / default scoped ListBox.\n *\n * @param { string[] | number[] | boolean[] } value - Specifies the value or array value of the list item.\n * @param {number} index - Specifies the index.\n * @param {string} targetId - Specifies the target id.\n * @returns {void}\n */\n ListBox.prototype.moveTo = function (value, index, targetId) {\n var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();\n var tlistbox = (targetId) ? getComponent(targetId, ListBox_1) : this.getScopedListBox();\n this.moveData(this, tlistbox, false, elem, index);\n };\n /**\n * Moves all the values from one ListBox to the scoped ListBox.\n *\n * @param { string } targetId - Specifies the scoped ListBox ID.\n * @param { string } index - Specifies the index to where the items moved.\n * @returns {void}\n */\n ListBox.prototype.moveAllTo = function (targetId, index) {\n this.toolbarAction = 'moveAllTo';\n if (this.listData.length > 0) {\n var tlistbox = (targetId) ? getComponent(targetId, ListBox_1) : this.getScopedListBox();\n this.moveAllData(this, tlistbox, false, index);\n }\n };\n /* eslint-disable */\n /**\n * Gets the updated dataSource in ListBox.\n *\n * @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Updated DataSource.\n */\n /* eslint-enable */\n ListBox.prototype.getDataList = function () {\n return this.jsonData;\n };\n /* eslint-disable */\n /**\n * Returns the sorted Data in ListBox.\n *\n * @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Sorted data\n */\n /* eslint-enable */\n ListBox.prototype.getSortedList = function () {\n var sortData;\n var tempData;\n sortData = tempData = this.sortedData;\n if (this.fields.groupBy) {\n sortData = [];\n for (var i = 0; i < tempData.length; i++) {\n if (tempData[i].isHeader) {\n continue;\n }\n sortData.push(tempData[i]);\n }\n }\n return sortData;\n };\n ListBox.prototype.getElemByValue = function (value) {\n var elem = [];\n for (var i = 0; i < value.length; i++) {\n elem.push(this.ulElement.querySelector('[data-value =\"' + value[i] + '\"]'));\n }\n return elem;\n };\n ListBox.prototype.updateLiCollection = function (index) {\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 1);\n this.liCollections = tempLi;\n };\n ListBox.prototype.selectAllItems = function (state, event) {\n var _this = this;\n [].slice.call(this.getItems()).forEach(function (li) {\n if (!li.classList.contains(cssClass.disabled)) {\n if (_this.selectionSettings.showCheckbox) {\n var ele = li.getElementsByClassName('e-check')[0];\n if ((!ele && state) || (ele && !state)) {\n _this.notify('updatelist', { li: li, module: 'listbox' });\n if (_this.maximumSelectionLength >= _this.list.querySelectorAll('.e-list-item span.e-check').length) {\n _this.checkMaxSelection();\n }\n }\n }\n else {\n if (state) {\n li.classList.add(cssClass.selected);\n }\n else {\n li.classList.remove(cssClass.selected);\n }\n }\n }\n });\n this.updateSelectedOptions();\n if (this.allowFiltering && this.selectionSettings.showCheckbox) {\n var liEle = this.list.getElementsByTagName('li');\n var index = 0;\n if (state) {\n var _loop_1 = function () {\n var dataValue1 = this_1.getFormattedValue(liEle[index].getAttribute('data-value'));\n if (!this_1.value.some(function (e) { return e === dataValue1; })) {\n this_1.value.push(this_1.getFormattedValue(liEle[index].getAttribute('data-value')));\n }\n };\n var this_1 = this;\n for (index = 0; index < liEle.length; index++) {\n _loop_1();\n }\n }\n else {\n var _loop_2 = function () {\n var dataValue2 = this_2.getFormattedValue(liEle[index].getAttribute('data-value'));\n this_2.value = this_2.value.filter(function (e) { return e !== dataValue2; });\n };\n var this_2 = this;\n for (index = 0; index < liEle.length; index++) {\n _loop_2();\n }\n }\n if (document.querySelectorAll('ul').length < 2) {\n this.updateMainList();\n }\n }\n this.triggerChange(this.getSelectedItems(), event);\n };\n ListBox.prototype.updateMainList = function () {\n var mainList = this.mainList.querySelectorAll('.e-list-item');\n var ulList = this.ulElement.querySelectorAll('.e-list-item');\n var mainCount = mainList.length;\n var ulEleCount = ulList.length;\n if (this.selectionSettings.showCheckbox || (document.querySelectorAll('ul').length > 1 || mainCount !== ulEleCount)) {\n var listindex = 0;\n var valueindex = 0;\n var count = 0;\n for (listindex; listindex < mainCount;) {\n if (this.value) {\n for (valueindex; valueindex < this.value.length; valueindex++) {\n if (mainList[listindex].getAttribute('data-value') === this.value[valueindex]) {\n count++;\n }\n }\n }\n if (!count && this.selectionSettings.showCheckbox) {\n mainList[listindex].getElementsByClassName('e-frame')[0].classList.remove('e-check');\n }\n if (document.querySelectorAll('ul').length > 1 && count && mainCount !== ulEleCount) {\n this.mainList.removeChild(this.mainList.getElementsByTagName('li')[listindex]);\n listindex = 0;\n }\n else {\n listindex++;\n }\n count = 0;\n valueindex = 0;\n }\n }\n };\n ListBox.prototype.wireEvents = function () {\n var form = closest(this.element, 'form');\n var wrapper = this.element.tagName === 'EJS-LISTBOX' ? this.element : this.list;\n EventHandler.add(this.list, 'click', this.clickHandler, this);\n EventHandler.add(wrapper, 'keydown', this.keyDownHandler, this);\n EventHandler.add(wrapper, 'focusout', this.focusOutHandler, this);\n this.wireToolbarEvent();\n if (this.selectionSettings.showCheckbox) {\n EventHandler.remove(document, 'mousedown', this.checkBoxSelectionModule.onDocumentClick);\n }\n if (this.fields.groupBy || this.element.querySelector('select>optgroup')) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n }\n if (form) {\n EventHandler.add(form, 'reset', this.formResetHandler, this);\n }\n window.addEventListener('resize', this.resizeHandler.bind(this));\n };\n ListBox.prototype.wireToolbarEvent = function () {\n if (this.toolbarSettings.items.length) {\n EventHandler.add(this.getToolElem(), 'click', this.toolbarClickHandler, this);\n }\n };\n ListBox.prototype.unwireEvents = function () {\n var form = closest(this.element, 'form');\n var wrapper = this.element.tagName === 'EJS-LISTBOX' ? this.element : this.list;\n EventHandler.remove(this.list, 'click', this.clickHandler);\n EventHandler.remove(wrapper, 'keydown', this.keyDownHandler);\n EventHandler.remove(wrapper, 'focusout', this.focusOutHandler);\n if (this.allowFiltering && this.clearFilterIconElem) {\n EventHandler.remove(this.clearFilterIconElem, 'click', this.clearText);\n }\n if (this.toolbarSettings.items.length) {\n EventHandler.remove(this.getToolElem(), 'click', this.toolbarClickHandler);\n }\n if (form) {\n EventHandler.remove(form, 'reset', this.formResetHandler);\n }\n window.removeEventListener('resize', this.resizeHandler.bind(this));\n };\n ListBox.prototype.clickHandler = function (e) {\n var li = closest(e.target, '.' + 'e-list-item');\n if (isNullOrUndefined(li)) {\n return;\n }\n this.selectHandler(e);\n };\n ListBox.prototype.checkSelectAll = function () {\n var searchCount = 0;\n var liItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n for (var i = 0; i < liItems.length; i++) {\n if (!liItems[i].classList.contains('e-disabled')) {\n searchCount++;\n }\n }\n var len = this.getSelectedItems().length;\n if (this.showSelectAll && searchCount) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection',\n value: (searchCount === len) ? 'check' : (len === 0) ? 'uncheck' : 'indeterminate' });\n }\n };\n ListBox.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n if (this.allowFiltering) {\n var filterType = this.inputString === '' ? 'contains' : this.filterType;\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (dataType === null) {\n dataType = this.typeOfData(this.jsonData).typeof;\n }\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, this.inputString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var fields = (this.fields.text) ? this.fields.text : '';\n filterQuery.where(fields, filterType, this.inputString, this.ignoreCase, this.ignoreAccent);\n }\n }\n else {\n filterQuery = query ? query : this.query ? this.query : new Query();\n }\n return filterQuery;\n };\n ListBox.prototype.setFiltering = function () {\n var filterInputObj;\n if (this.initLoad || isNullOrUndefined(this.filterParent)) {\n this.filterParent = this.createElement('span', {\n className: listBoxClasses.filterParent\n });\n this.filterInput = this.createElement('input', {\n attrs: { type: 'text' },\n className: listBoxClasses.filterInput\n });\n this.element.parentNode.insertBefore(this.filterInput, this.element);\n filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: [listBoxClasses.filterBarClearIcon],\n properties: { placeholder: this.filterBarPlaceholder }\n }, this.createElement);\n append([filterInputObj.container], this.filterParent);\n prepend([this.filterParent], this.list);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'aria-label': 'search list item',\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false',\n 'role': 'textbox'\n });\n if (this.height.toString().indexOf('%') < 0) {\n addClass([this.list], 'e-filter-list');\n }\n else if (this.height.toString().indexOf('%') > 0) {\n this.ulElement.style.height = (this.ulElement.offsetHeight - this.filterParent.offsetHeight) + 'px';\n }\n this.inputString = this.filterInput.value;\n this.filterWireEvents();\n this.ulElement.style.setProperty('height', 'calc(100% - ' + (this.filterParent.offsetHeight) + 'px)', 'important');\n return filterInputObj;\n }\n };\n ListBox.prototype.filterWireEvents = function (filterElem) {\n if (filterElem) {\n this.filterInput = filterElem.querySelector('.e-input-filter');\n }\n this.clearFilterIconElem = this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon);\n if (this.clearFilterIconElem) {\n EventHandler.add(this.clearFilterIconElem, 'click', this.clearText, this);\n if (!filterElem) {\n this.clearFilterIconElem.style.visibility = 'hidden';\n }\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.KeyUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onKeyDown, this);\n };\n ListBox.prototype.selectHandler = function (e, isKey) {\n var isSelect = true;\n var currSelIdx;\n var li = closest(e.target, '.' + 'e-list-item');\n var selectedLi = [li];\n if (li && li.parentElement) {\n currSelIdx = [].slice.call(li.parentElement.children).indexOf(li);\n if (!this.selectionSettings.showCheckbox) {\n if ((e.ctrlKey || e.metaKey || Browser.isDevice) && this.isSelected(li)) {\n li.classList.remove(cssClass.selected);\n li.removeAttribute('aria-selected');\n isSelect = false;\n }\n else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || e.metaKey || Browser.isDevice))) {\n this.getSelectedItems().forEach(function (ele) {\n ele.removeAttribute('aria-selected');\n });\n removeClass(this.getSelectedItems(), cssClass.selected);\n }\n }\n else {\n isSelect = !li.getElementsByClassName('e-frame')[0].classList.contains('e-check');\n }\n if (e.shiftKey && !this.selectionSettings.showCheckbox && this.selectionSettings.mode !== 'Single') {\n selectedLi = [].slice.call(li.parentElement.children)\n .slice(Math.min(currSelIdx, this.prevSelIdx), Math.max(currSelIdx, this.prevSelIdx) + 1)\n .filter(function (ele) { return ele.classList.contains('e-list-item'); });\n }\n else {\n this.prevSelIdx = [].slice.call(li.parentElement.children).indexOf(li);\n }\n if (isSelect) {\n if (!this.selectionSettings.showCheckbox) {\n addClass(selectedLi, cssClass.selected);\n }\n selectedLi.forEach(function (ele) {\n ele.setAttribute('aria-selected', 'true');\n });\n this.list.setAttribute('aria-activedescendant', li.id);\n }\n else {\n selectedLi.forEach(function (ele) {\n ele.setAttribute('aria-selected', 'false');\n });\n }\n if (!isKey && (this.maximumSelectionLength > (this.value && this.value.length) || !isSelect) &&\n (this.maximumSelectionLength >= (this.value && this.value.length) || !isSelect) &&\n !(this.maximumSelectionLength < (this.value && this.value.length))) {\n this.notify('updatelist', { li: li, e: e, module: 'listbox' });\n }\n if (this.allowFiltering && !isKey) {\n var liDataValue_1 = this.getFormattedValue(li.getAttribute('data-value'));\n if (!isSelect) {\n this.value = this.value.filter(function (value1) {\n return value1 !== liDataValue_1;\n });\n }\n else {\n var values = [];\n extend(values, this.value);\n values.push(liDataValue_1);\n this.value = values;\n }\n if (document.querySelectorAll('ul').length < 2) {\n this.updateMainList();\n }\n }\n this.updateSelectedOptions();\n this.triggerChange(this.getSelectedItems(), e);\n if (this.list) {\n this.checkMaxSelection();\n }\n }\n };\n ListBox.prototype.triggerChange = function (selectedLis, event) {\n this.trigger('change', { elements: selectedLis, items: this.getDataByElements(selectedLis), value: this.value, event: event });\n };\n ListBox.prototype.getDataByElems = function (elems) {\n var data = [];\n var len = elems.length;\n for (var i = 0; i < len; i++) {\n var elem = elems[i];\n var value = elem.getAttribute('data-value');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var formattedValue = this.getFormattedValue(value);\n data.push(this.getDataByValue(formattedValue));\n }\n return data;\n };\n ListBox.prototype.getDataByElements = function (elems) {\n var data = [];\n var value;\n var sIdx = 0;\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n for (var i = sIdx, len = elems.length; i < len; i++) {\n value = this.getFormattedValue(elems[i].getAttribute('data-value'));\n if (!isNullOrUndefined(item) && item === value) {\n sIdx = i;\n data.push(item);\n break;\n }\n }\n if (elems.length === data.length) {\n break;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n for (var i = sIdx, len = elems.length; i < len; i++) {\n value = this.getFormattedValue(elems[i].getAttribute('data-value'));\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n sIdx = i;\n data.push(item);\n break;\n }\n }\n if (elems.length === data.length) {\n break;\n }\n }\n }\n return data;\n }\n return null;\n };\n ListBox.prototype.checkMaxSelection = function () {\n var limit = this.list.querySelectorAll('.e-list-item span.e-check').length;\n if (this.selectionSettings.showCheckbox) {\n var index = 0;\n var liCollElem = this.list.getElementsByClassName('e-list-item');\n for (index; index < liCollElem.length; index++) {\n if (!liCollElem[index].querySelector('.e-frame.e-check')) {\n if (limit === this.maximumSelectionLength) {\n liCollElem[index].classList.add('e-disable');\n }\n else if (liCollElem[index].classList.contains('e-disable')) {\n liCollElem[index].classList.remove('e-disable');\n }\n }\n }\n }\n };\n ListBox.prototype.toolbarClickHandler = function (e) {\n var btn = closest(e.target, 'button');\n if (btn) {\n this.toolbarAction = btn.getAttribute('data-value');\n if (btn.disabled) {\n return;\n }\n switch (this.toolbarAction) {\n case 'moveUp':\n this.moveUpDown(true);\n break;\n case 'moveDown':\n this.moveUpDown();\n break;\n case 'moveTo':\n this.moveItemTo();\n break;\n case 'moveFrom':\n this.moveItemFrom();\n break;\n case 'moveAllTo':\n this.moveAllItemTo();\n break;\n case 'moveAllFrom':\n this.moveAllItemFrom();\n break;\n default:\n this.trigger('actionBegin', { cancel: false, items: this.getDataByElems(this.getSelectedItems()),\n eventName: this.toolbarAction });\n break;\n }\n }\n };\n ListBox.prototype.moveUpDown = function (isUp, isKey, value, isTop, isBottom) {\n var _this = this;\n var elems = this.getSelectedItems();\n if (value) {\n elems = value;\n }\n if (((isUp && this.isSelected(this.ulElement.firstElementChild))\n || (!isUp && this.isSelected(this.ulElement.lastElementChild))) && !value) {\n return;\n }\n var tempItems = this.getDataByElems(elems);\n var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };\n this.trigger('actionBegin', localDataArgs);\n if (localDataArgs.cancel) {\n return;\n }\n (isUp ? elems : elems.reverse()).forEach(function (ele) {\n var jsonToIdx = Array.prototype.indexOf.call(_this.ulElement.querySelectorAll('.e-list-item'), ele);\n var idx = Array.prototype.indexOf.call(_this.ulElement.children, ele);\n if (isTop) {\n moveTo(_this.ulElement, _this.ulElement, [idx], 0);\n _this.changeData(idx, 0, jsonToIdx, ele);\n }\n else if (isBottom) {\n moveTo(_this.ulElement, _this.ulElement, [idx], _this.ulElement.querySelectorAll('.e-list-item').length);\n _this.changeData(idx, _this.ulElement.querySelectorAll('.e-list-item').length, jsonToIdx, ele);\n }\n else {\n moveTo(_this.ulElement, _this.ulElement, [idx], isUp ? idx - 1 : idx + 2);\n _this.changeData(idx, isUp ? idx - 1 : idx + 1, isUp ? jsonToIdx - 1 : jsonToIdx + 1, ele);\n }\n });\n this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });\n elems[0].focus();\n if (!isKey && this.toolbarSettings.items.length) {\n this.getToolElem().querySelector('[data-value=' + (isUp ? 'moveUp' : 'moveDown') + ']').focus();\n }\n this.updateToolBarState();\n };\n ListBox.prototype.moveItemTo = function () {\n this.moveData(this, this.getScopedListBox());\n };\n ListBox.prototype.moveItemFrom = function () {\n this.moveData(this.getScopedListBox(), this);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ListBox} fListBox - Specifies the from listbox.\n * @param {ListBox} tListBox - Specifies the to listbox.\n * @param {boolean} isKey - Specifies the key.\n * @param {Element[]} value - Specifies the value.\n * @param {number} index - Specifies the index.\n * @returns {void}\n * @private\n */\n ListBox.prototype.moveData = function (fListBox, tListBox, isKey, value, index) {\n var idx = [];\n var dataIdx = [];\n var jsonIdx = [];\n var sortIdx = [];\n var listData = [].slice.call(fListBox.listData);\n var tListData = [].slice.call(tListBox.listData);\n var sortData = [].slice.call(fListBox.sortedData);\n var tSortData = [].slice.call(tListBox.sortedData);\n var fliCollections = [].slice.call(fListBox.liCollections);\n var dataLiIdx = [];\n var tliCollections = [].slice.call(tListBox.liCollections);\n var tempItems = [];\n var data = [];\n var elems = fListBox.getSelectedItems();\n if (value) {\n elems = value;\n }\n var isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==\n fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;\n fListBox.value = [];\n if (elems.length) {\n this.removeSelected(fListBox, elems);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var ulChildren_1 = Array.prototype.slice.call(fListBox.ulElement.children);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var listItems_1 = Array.prototype.slice.call(fListBox.ulElement.querySelectorAll('.e-list-item'));\n var lData_1 = fListBox.listData;\n var sData_1 = fListBox.sortedData;\n var jData_1 = fListBox.jsonData;\n var eData_1;\n var listDataMap_1 = {};\n if (elems.length > 199) {\n for (var _i = 0, _a = fListBox.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item)) {\n var key = fListBox.getFormattedValue(getValue((fListBox.fields.value ? fListBox.fields.value : 'value'), item));\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listDataMap_1[key] = item;\n }\n }\n }\n elems.forEach(function (ele) {\n if (elems.length < 200) {\n eData_1 = fListBox.getDataByElems([ele])[0];\n }\n else {\n var value_1 = ele.getAttribute('data-value');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var formattedValue = fListBox.getFormattedValue(value_1);\n eData_1 = listDataMap_1[formattedValue];\n }\n idx.push(ulChildren_1.indexOf(ele));\n dataLiIdx.push(listItems_1.indexOf(ele));\n dataIdx.push(lData_1.indexOf(eData_1));\n sortIdx.push(sData_1.indexOf(eData_1));\n jsonIdx.push(jData_1.indexOf(eData_1));\n });\n if (this.sortOrder !== 'None') {\n sortIdx.forEach(function (i) {\n tempItems.push(fListBox.sortedData[i]);\n });\n }\n else {\n jsonIdx.forEach(function (i) {\n tempItems.push(fListBox.jsonData[i]);\n });\n }\n var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };\n fListBox.trigger('actionBegin', localDataArgs);\n if (localDataArgs.cancel) {\n return;\n }\n var rLiCollection_1 = [];\n dataLiIdx.sort(function (n1, n2) { return n1 - n2; }).reverse().forEach(function (i) {\n rLiCollection_1.push(fliCollections.splice(i, 1)[0]);\n });\n fListBox.liCollections = fliCollections;\n if (index) {\n var toColl = tliCollections.splice(0, index);\n tListBox.liCollections = toColl.concat(rLiCollection_1.reverse()).concat(tliCollections);\n }\n else {\n tListBox.liCollections = tliCollections.concat(rLiCollection_1.reverse());\n }\n if (tListBox.listData.length === 0) {\n var noRecElem = tListBox.ulElement.childNodes[0];\n if (noRecElem) {\n tListBox.ulElement.removeChild(noRecElem);\n }\n }\n dataIdx.sort(function (n1, n2) { return n2 - n1; }).forEach(function (i) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n listData.splice(i, 1)[0];\n });\n sortIdx.sort(function (n1, n2) { return n2 - n1; }).forEach(function (i) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n sortData.splice(i, 1)[0];\n });\n jsonIdx.slice().reverse().forEach(function (i) {\n data.push(fListBox.jsonData.splice(i, 1)[0]);\n });\n if (isRefresh) {\n if (fListBox.fields.groupBy) {\n var sourceElem = fListBox.renderItems(listData, fListBox.fields);\n fListBox.updateListItems(sourceElem, fListBox.ulElement);\n }\n else {\n elems.forEach(function (ele) { detach(ele); });\n }\n }\n else {\n moveTo(fListBox.ulElement, tListBox.ulElement, idx, index);\n fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });\n }\n if (tListBox.mainList.childElementCount !== tListBox.jsonData.length) {\n tListBox.mainList = tListBox.ulElement;\n }\n var tJsonData = [].slice.call(tListBox.jsonData);\n tSortData = [].slice.call(tListBox.sortedData);\n this.selectNextList(elems, dataLiIdx, dataIdx, fListBox);\n if (isKey) {\n this.list.focus();\n }\n fListBox.listData = listData;\n fListBox.sortedData = sortData;\n index = (index) ? index : tListData.length;\n for (var i = tempItems.length - 1; i >= 0; i--) {\n tListData.splice(index, 0, tempItems[i]);\n tJsonData.splice(index, 0, tempItems[i]);\n tSortData.splice(index, 0, tempItems[i]);\n }\n tListBox.listData = tListData;\n tListBox.jsonData = tJsonData;\n tListBox.sortedData = tSortData;\n if (isRefresh) {\n var sourceElem = tListBox.renderItems(tListData, tListBox.fields);\n tListBox.updateListItems(sourceElem, tListBox.ulElement);\n tListBox.setSelection();\n fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });\n }\n fListBox.updateSelectedOptions();\n if (fListBox.listData.length === 0) {\n fListBox.l10nUpdate();\n }\n }\n if (fListBox.value.length === 1 && fListBox.getSelectedItems().length) {\n fListBox.value[0] = fListBox.getFormattedValue(fListBox.getSelectedItems()[0].getAttribute('data-value'));\n }\n if (fListBox.liCollections.length === fListBox.ulElement.querySelectorAll('.e-disabled').length && this.toolbarAction) {\n var wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];\n var toolbarAction = this.toolbarAction === 'moveFrom' ? 'moveAllFrom' : 'moveAllTo';\n if (wrap) {\n var btn = wrap.querySelector('[data-value=\"' + toolbarAction + '\"]');\n btn.disabled = true;\n }\n }\n };\n ListBox.prototype.selectNextList = function (elems, dataLiIdx, dataIdx, inst) {\n var childCnt = inst.ulElement.querySelectorAll('.e-list-item').length;\n var ele;\n var liIdx;\n var validIdx = -1;\n if (elems.length === 1 && childCnt && !inst.selectionSettings.showCheckbox) {\n liIdx = childCnt <= dataLiIdx[0] ? childCnt - 1 : dataLiIdx[0];\n ele = inst.ulElement.querySelectorAll('.e-list-item')[liIdx];\n validIdx = inst.getValidIndex(ele, liIdx, childCnt === dataIdx[0] ? 38 : 40);\n if (validIdx > -1) {\n (inst.ulElement.querySelectorAll('.e-list-item')[validIdx].classList.add(cssClass.selected));\n }\n }\n };\n ListBox.prototype.moveAllItemTo = function () {\n this.moveAllData(this, this.getScopedListBox());\n };\n ListBox.prototype.moveAllItemFrom = function () {\n this.moveAllData(this.getScopedListBox(), this);\n };\n ListBox.prototype.moveAllData = function (fListBox, tListBox, isKey, index) {\n var listData = [].slice.call(tListBox.listData);\n var jsonData = [].slice.call(tListBox.jsonData);\n var isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==\n fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;\n var tempLiColl = [];\n var tempData = [];\n var flistboxarray = [];\n this.removeSelected(fListBox, fListBox.getSelectedItems());\n var tempItems = [].slice.call(fListBox.listData);\n var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };\n fListBox.trigger('actionBegin', localDataArgs);\n if (localDataArgs.cancel) {\n return;\n }\n if (tListBox.listData.length === 0) {\n var noRecElem = tListBox.ulElement.childNodes[0];\n if (noRecElem) {\n tListBox.ulElement.removeChild(noRecElem);\n }\n }\n if (fListBox.listData.length > 0) {\n // eslint-disable-next-line prefer-spread\n flistboxarray = Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var childNodes = fListBox.ulElement.childNodes;\n var childElementCount = fListBox.ulElement.childElementCount;\n var newFlistboxArray = [];\n for (var i = 0; i < childElementCount; i++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var childNode = childNodes[i];\n if (childNode.classList.contains('e-disabled')) {\n tempLiColl.push(childNode);\n if (this.sortOrder != null) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n tempData.push(fListBox.sortedData[i]);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n tempData.push(fListBox.listData[i]);\n }\n }\n else {\n newFlistboxArray.push(i);\n }\n }\n flistboxarray = newFlistboxArray;\n moveTo(fListBox.ulElement, tListBox.ulElement, flistboxarray, index);\n fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });\n if (isKey) {\n this.list.focus();\n }\n index = (index) ? index : listData.length;\n for (var i = 0; i < flistboxarray.length; i++) {\n if (this.sortOrder != null) {\n listData.splice(index + i, 0, fListBox.sortedData[flistboxarray[i]]);\n }\n else {\n listData.splice(index + i, 0, fListBox.listData[flistboxarray[i]]);\n }\n }\n for (var i = 0; i < flistboxarray.length; i++) {\n jsonData.splice(index + i, 0, fListBox.jsonData[flistboxarray[i]]);\n }\n var fliCollections = [];\n if (tempLiColl.length > 0) {\n fListBox.liCollections = tempLiColl;\n fliCollections = [].slice.call(fListBox.liCollections);\n }\n else {\n fliCollections = [].slice.call(fListBox.liCollections);\n fListBox.liCollections = [];\n }\n var tliCollections = [].slice.call(tListBox.liCollections);\n if (index) {\n var toColl = tliCollections.splice(0, index);\n tListBox.liCollections = toColl.concat(fliCollections).concat(tliCollections);\n }\n else {\n tListBox.liCollections = tliCollections.concat(fliCollections);\n }\n fListBox.value = [];\n listData = listData.filter(function (data) { return (data !== undefined); });\n listData = listData\n .filter(function (data) { return data.isHeader !== true; });\n var sortedData = listData.filter(function (val) {\n return tListBox.jsonData.indexOf(val) === -1;\n });\n for (var i = 0; i < sortedData.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n tListBox.jsonData.splice(index + i, 0, sortedData[i]);\n }\n tListBox.listData = listData;\n if (fListBox.listData.length === fListBox.jsonData.length) {\n fListBox.listData = fListBox.sortedData = fListBox.jsonData = tempData;\n }\n else if (fListBox.allowFiltering) {\n var disabledData_1 = [];\n if (tempLiColl.length > 0) {\n for (var i = 0; i < tempLiColl.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n disabledData_1.push(fListBox.getDataByValue(tempLiColl[i].getAttribute('data-value')));\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n fListBox.listData = fListBox.listData.filter(function (obj1) {\n return !disabledData_1.some(function (obj2) { return obj1 === obj2; });\n });\n }\n for (var i = 0; i < fListBox.listData.length; i++) {\n for (var j = 0; j < fListBox.jsonData.length; j++) {\n if (fListBox.listData[i] === fListBox.jsonData[j]) {\n fListBox.jsonData.splice(j, 1);\n }\n }\n }\n if (tempLiColl.length > 0) {\n fListBox.listData = disabledData_1;\n fListBox.sortedData = [];\n }\n else {\n fListBox.listData = fListBox.sortedData = [];\n }\n }\n if (isRefresh) {\n var sourceElem = tListBox.renderItems(listData, tListBox.fields);\n tListBox.updateListItems(sourceElem, tListBox.ulElement);\n }\n else {\n tListBox.sortedData = listData;\n }\n fListBox.updateSelectedOptions();\n if (tempLiColl.length > 0) {\n var wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];\n var btn = wrap.querySelector('[data-value=\"' + this.toolbarAction + '\"]');\n btn.disabled = true;\n }\n if (fListBox.listData.length === 0 && tempLiColl.length === 0) {\n fListBox.l10nUpdate();\n }\n };\n ListBox.prototype.changeData = function (fromIdx, toIdx, jsonToIdx, ele) {\n var listData = [].slice.call(this.listData);\n var jsonData = [].slice.call(this.jsonData);\n var sortData = [].slice.call(this.sortedData);\n var jsonIdx = Array.prototype.indexOf.call(this.jsonData, this.getDataByElems([ele])[0]);\n var sortIdx = Array.prototype.indexOf.call(this.sortedData, this.getDataByElems([ele])[0]);\n var liColl = [].slice.call(this.liCollections);\n listData.splice(toIdx, 0, listData.splice(fromIdx, 1)[0]);\n jsonData.splice(jsonToIdx, 0, jsonData.splice(jsonIdx, 1)[0]);\n sortData.splice(toIdx, 0, sortData.splice(sortIdx, 1)[0]);\n liColl.splice(toIdx, 0, liColl.splice(fromIdx, 1)[0]);\n this.listData = listData;\n this.jsonData = jsonData;\n this.liCollections = liColl;\n this.sortedData = sortData;\n };\n ListBox.prototype.getSelectedItems = function () {\n var ele = [];\n if (this.selectionSettings.showCheckbox) {\n [].slice.call(this.ulElement.getElementsByClassName('e-check')).forEach(function (cbox) {\n ele.push(closest(cbox, '.' + 'e-list-item'));\n });\n }\n else {\n ele = [].slice.call(this.ulElement.getElementsByClassName(cssClass.selected));\n }\n return ele;\n };\n ListBox.prototype.getScopedListBox = function () {\n var _this = this;\n var listObj;\n if (this.scope) {\n [].slice.call(document.querySelectorAll(this.scope)).forEach(function (ele) {\n if (getComponent(ele, _this.getModuleName())) {\n listObj = getComponent(ele, _this.getModuleName());\n }\n });\n }\n return listObj;\n };\n ListBox.prototype.getGrabbedItems = function (args) {\n var grabbItems = false;\n for (var i = 0; i < this.value.length; i++) {\n if (this.value[i] === this.getFormattedValue(args.target.getAttribute('data-value'))) {\n grabbItems = true;\n break;\n }\n }\n if (grabbItems) {\n for (var i = 0; i < this.value.length; i++) {\n var liColl = this.list.querySelectorAll('[aria-selected=\"true\"]');\n for (var j = 0; j < liColl.length; j++) {\n if (this.value[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {\n liColl[j].classList.add('e-grabbed');\n }\n }\n }\n }\n var elems;\n if (this.isAngular) {\n elems = Array.prototype.slice.call(this.element.getElementsByClassName('e-list-parent')[0].querySelectorAll('.e-grabbed'));\n }\n else {\n elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));\n }\n return elems;\n };\n ListBox.prototype.getDragArgs = function (args, isDragEnd) {\n var elems = this.getGrabbedItems(args);\n if (elems.length) {\n if (isDragEnd) {\n elems.push(args.target);\n }\n }\n else {\n elems = [args.target];\n }\n return { elements: elems, event: args.event, items: this.getDataByElems(elems) };\n };\n ListBox.prototype.onKeyDown = function (e) {\n this.keyDownHandler(e);\n e.stopPropagation();\n };\n ListBox.prototype.keyDownHandler = function (e) {\n if ([32, 35, 36, 37, 38, 39, 40, 65].indexOf(e.keyCode) > -1 && (!this.allowFiltering ||\n (this.allowFiltering && e.target !== this.filterInput))) {\n if (e.target && e.target.className.indexOf('e-edit-template') > -1) {\n return;\n }\n e.preventDefault();\n if (e.keyCode === 32 && this.ulElement.children.length) {\n this.selectHandler({\n target: this.ulElement.getElementsByClassName('e-focused')[0],\n ctrlKey: e.ctrlKey, shiftKey: e.shiftKey\n });\n }\n else if (e.keyCode === 65 && e.ctrlKey) {\n this.selectAll();\n }\n else if ((e.keyCode === 38 || e.keyCode === 40) && e.ctrlKey && e.shiftKey) {\n this.moveUpDown(e.keyCode === 38 ? true : false, true);\n }\n else if ((this.toolbarSettings.items.length || this.tBListBox) && (e.keyCode === 39 || e.keyCode === 37) && e.ctrlKey) {\n var listObj = this.tBListBox || this.getScopedListBox();\n if (e.keyCode === 39) {\n if (e.shiftKey) {\n this.moveAllData(this, listObj, true);\n }\n else {\n this.moveData(this, listObj, true);\n }\n }\n else {\n if (e.shiftKey) {\n this.moveAllData(listObj, this, true);\n }\n else {\n this.moveData(listObj, this, true);\n }\n }\n }\n else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {\n this.upDownKeyHandler(e);\n }\n }\n else if (this.allowFiltering) {\n if (e.keyCode === 40 || e.keyCode === 38) {\n this.upDownKeyHandler(e);\n }\n }\n };\n ListBox.prototype.upDownKeyHandler = function (e) {\n var ul = this.ulElement;\n var defaultIdx = (e.keyCode === 40 || e.keyCode === 36) ? 0 : ul.childElementCount - 1;\n var fliIdx = defaultIdx;\n var fli = ul.getElementsByClassName('e-focused')[0] || ul.getElementsByClassName(cssClass.selected)[0];\n if (fli) {\n if (e.keyCode !== 35 && e.keyCode !== 36) {\n fliIdx = Array.prototype.indexOf.call(ul.children, fli);\n if (e.keyCode === 40) {\n fliIdx++;\n }\n else {\n fliIdx--;\n }\n if (fliIdx < 0 || fliIdx > ul.childElementCount - 1) {\n return;\n }\n }\n removeClass([fli], 'e-focused');\n }\n var cli = ul.children[fliIdx];\n if (cli) {\n fliIdx = this.getValidIndex(cli, fliIdx, e.keyCode);\n if (fliIdx === -1) {\n addClass([fli], 'e-focused');\n return;\n }\n ul.children[fliIdx].focus();\n ul.children[fliIdx].classList.add('e-focused');\n if (!e.ctrlKey || !this.selectionSettings.showCheckbox && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {\n this.selectHandler({ target: ul.children[fliIdx], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);\n }\n if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {\n var selectedidx = Array.prototype.indexOf.call(ul.children, fli);\n var sidx = e.code === 'Home' ? 0 : selectedidx;\n var eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;\n for (var i = sidx; i <= eidx; i++) {\n var item = ul.children[i];\n this.notify('updatelist', { li: item, e: {\n target: this.ulElement.getElementsByClassName('e-focused')[0],\n ctrlKey: e.ctrlKey, shiftKey: e.shiftKey\n }, module: 'listbox' });\n }\n }\n }\n };\n ListBox.prototype.KeyUp = function (e) {\n var _this = this;\n if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {\n e.preventDefault();\n return;\n }\n var char = String.fromCharCode(e.keyCode);\n var isWordCharacter = char.match(/\\w/);\n if (!isNullOrUndefined(isWordCharacter)) {\n this.isValidKey = true;\n }\n this.isValidKey = (e.keyCode === 8) || (e.keyCode === 46) || this.isValidKey;\n if (this.isValidKey) {\n this.isValidKey = false;\n switch (e.keyCode) {\n default:\n if (this.allowFiltering) {\n var eventArgsData_1 = {\n preventDefaultAction: false,\n text: this.targetElement(),\n updateData: function (dataSource, query, fields) {\n if (eventArgsData_1.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.remoteFilterAction = true;\n _this.preventDefActionFilter = eventArgsData_1.preventDefaultAction;\n _this.dataUpdater(dataSource, query, fields);\n _this.preventDefActionFilter = false;\n },\n event: e,\n cancel: false\n };\n this.trigger('filtering', eventArgsData_1, function (args) {\n _this.isDataFetched = false;\n if (args.cancel || (_this.filterInput.value !== '' && _this.isFiltered)) {\n return;\n }\n _this.preventDefActionFilter = false;\n if (!args.cancel && !_this.isCustomFiltering && !args.preventDefaultAction) {\n _this.inputString = _this.filterInput.value;\n _this.filteringAction(_this.jsonData, new Query(), _this.fields);\n if (_this.toolbarSettings.items.length > 0) {\n _this.updateToolBarState();\n }\n }\n if (!_this.isFiltered && !_this.isCustomFiltering && !args.preventDefaultAction) {\n _this.dataUpdater(_this.jsonData, new Query(), _this.fields);\n }\n });\n }\n }\n }\n };\n /**\n * To filter the data from given data source by using query.\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}.\n */\n ListBox.prototype.filter = function (dataSource, query, fields) {\n this.isCustomFiltering = true;\n this.filteringAction(dataSource, query, fields);\n };\n ListBox.prototype.filteringAction = function (dataSource, query, fields) {\n this.resetList(dataSource, fields, query);\n };\n ListBox.prototype.targetElement = function () {\n this.targetInputElement = this.list.getElementsByClassName('e-input-filter')[0];\n return isNullOrUndefined(this.targetInputElement) ? null : this.targetInputElement.value;\n };\n ListBox.prototype.dataUpdater = function (dataSource, query, fields) {\n this.isDataFetched = false;\n if (this.targetElement() && this.targetElement().trim() === '') {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n {\n this.remoteCustomValue = false;\n if (this.isAngular && this.itemTemplate) {\n list = this.renderItems(this.listData, fields);\n }\n this.onActionComplete(list, this.jsonData);\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.selectionSettings.showCheckbox, e: this });\n }\n }\n else {\n this.resetList(dataSource, fields, query);\n }\n };\n ListBox.prototype.focusOutHandler = function () {\n var ele = this.list.getElementsByClassName('e-focused')[0];\n if (ele) {\n ele.classList.remove('e-focused');\n }\n if (this.allowFiltering) {\n this.refreshClearIcon();\n }\n };\n ListBox.prototype.resizeHandler = function () {\n if (this.list && !(this.cssClass && this.cssClass.indexOf('e-horizontal-listbox') > -1)) {\n if (this.list.getElementsByClassName('e-filter-parent').length > 0 && this.allowFiltering) {\n this.ulElement.style.setProperty('height', 'calc(100% - ' + (this.filterParent.offsetHeight) + 'px)', 'important');\n }\n }\n };\n ListBox.prototype.getValidIndex = function (cli, index, keyCode) {\n var cul = this.ulElement;\n if (cli.classList.contains('e-disabled') || cli.classList.contains(cssClass.group)) {\n if (keyCode === 40 || keyCode === 36) {\n index++;\n }\n else {\n index--;\n }\n }\n if (index < 0 || index === cul.childElementCount) {\n return -1;\n }\n cli = cul.childNodes[index];\n if (cli.classList.contains('e-disabled') || cli.classList.contains(cssClass.group)) {\n index = this.getValidIndex(cli, index, keyCode);\n }\n return index;\n };\n ListBox.prototype.updateSelectedOptions = function () {\n var _this = this;\n var selectedOptions = [];\n var values = [];\n extend(values, this.value);\n this.getSelectedItems().forEach(function (ele) {\n if (!ele.classList.contains('e-grabbed')) {\n selectedOptions.push(_this.getFormattedValue(ele.getAttribute('data-value')));\n }\n });\n if (this.mainList.childElementCount === this.ulElement.childElementCount) {\n if (this.allowFiltering && this.selectionSettings.showCheckbox) {\n for (var i = 0; i < selectedOptions.length; i++) {\n if (values.indexOf(selectedOptions[i]) > -1) {\n continue;\n }\n else {\n values.push(selectedOptions[i]);\n }\n }\n this.setProperties({ value: values }, true);\n }\n else {\n this.setProperties({ value: selectedOptions }, true);\n }\n }\n this.updateSelectTag();\n this.updateToolBarState();\n if (this.tBListBox) {\n this.tBListBox.updateToolBarState();\n }\n };\n ListBox.prototype.clearSelection = function (values) {\n var _this = this;\n if (values === void 0) { values = this.value; }\n if (this.selectionSettings.showCheckbox) {\n var dvalue_1;\n this.getSelectedItems().forEach(function (li) {\n dvalue_1 = _this.getFormattedValue(li.getAttribute('data-value'));\n if (values.indexOf(dvalue_1) < 0) {\n li.getElementsByClassName('e-check')[0].classList.remove('e-check');\n li.removeAttribute('aria-selected');\n }\n });\n }\n };\n ListBox.prototype.setSelection = function (\n // eslint-disable-next-line max-len\n values, isSelect, isText, canFocus) {\n var _this = this;\n if (values === void 0) { values = this.value; }\n if (isSelect === void 0) { isSelect = true; }\n if (isText === void 0) { isText = false; }\n if (canFocus === void 0) { canFocus = true; }\n var li;\n var liselect;\n if (values) {\n values.forEach(function (value) {\n var text;\n if (isText) {\n text = _this.getValueByText(value);\n }\n else {\n text = value;\n }\n if (typeof (text) === 'string') {\n text = text.split('\\\\').join('\\\\\\\\');\n li = _this.list.querySelector('[data-value=\"' + text.replace(/\"/g, '\\\\\"') + '\"]');\n }\n else {\n li = _this.list.querySelector('[data-value=\"' + text + '\"]');\n }\n if (li) {\n if (_this.selectionSettings.showCheckbox && !li.classList.contains('e-disabled')) {\n liselect = li.getElementsByClassName('e-frame')[0].classList.contains('e-check');\n }\n else {\n liselect = li.classList.contains('e-selected');\n }\n if (!isSelect && liselect || isSelect && !liselect && li) {\n if (_this.selectionSettings.showCheckbox && !li.classList.contains('e-disabled')) {\n _this.notify('updatelist', { li: li, module: 'listbox' });\n if (canFocus) {\n li.focus();\n }\n }\n else {\n if (isSelect && !li.classList.contains('e-disabled')) {\n li.classList.add(cssClass.selected);\n li.setAttribute('aria-selected', 'true');\n if (canFocus) {\n li.focus();\n }\n }\n else {\n li.classList.remove(cssClass.selected);\n li.removeAttribute('aria-selected');\n }\n }\n }\n }\n });\n }\n this.updateSelectTag();\n };\n ListBox.prototype.updateSelectTag = function () {\n var ele = this.getSelectTag();\n var innerHTML = '';\n if (isNullOrUndefined(ele)) {\n return;\n }\n ele.innerHTML = '';\n if (this.value) {\n for (var i = 0, len = this.value.length; i < len; i++) {\n innerHTML += '';\n }\n ele.innerHTML += innerHTML;\n for (var i = 0, len = ele.childNodes.length; i < len; i++) {\n ele.childNodes[i].setAttribute('value', this.value[i].toString());\n }\n }\n this.checkSelectAll();\n };\n ListBox.prototype.checkDisabledState = function (inst) {\n if (isNullOrUndefined(inst.ulElement)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!isNullOrUndefined(this.dataSource) && isNullOrUndefined(this.dataSource.length)) {\n return false;\n }\n else {\n return true;\n }\n }\n else {\n if (inst.ulElement.querySelectorAll('.e-disabled').length > 0) {\n return inst.liCollections.length === inst.ulElement.querySelectorAll('.e-disabled').length;\n }\n return inst.ulElement.querySelectorAll('.' + cssClass.li).length === 0;\n }\n };\n ListBox.prototype.updateToolBarState = function () {\n var _this = this;\n if (this.toolbarSettings.items.length) {\n var listObj_1 = this.getScopedListBox();\n var wrap_1 = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];\n this.toolbarSettings.items.forEach(function (value) {\n var btn = wrap_1.querySelector('[data-value=\"' + value + '\"]');\n switch (value) {\n case 'moveAllTo':\n btn.disabled = _this.checkDisabledState(_this);\n break;\n case 'moveAllFrom':\n btn.disabled = _this.checkDisabledState(listObj_1);\n break;\n case 'moveFrom':\n btn.disabled = listObj_1.value && listObj_1.value.length ? false : true;\n break;\n case 'moveUp':\n btn.disabled = _this.value && _this.value.length\n && !_this.isSelected(_this.ulElement.children[0]) ? false : true;\n break;\n case 'moveDown':\n btn.disabled = _this.value && _this.value.length\n && !_this.isSelected(_this.ulElement.children[_this.ulElement.childElementCount - 1]) ? false : true;\n break;\n default:\n btn.disabled = _this.value && _this.value.length ? false : true;\n break;\n }\n });\n }\n };\n ListBox.prototype.setCheckboxPosition = function () {\n var listWrap = this.list;\n if (!this.initLoad && this.selectionSettings.checkboxPosition === 'Left') {\n listWrap.classList.remove('e-right');\n }\n if (this.selectionSettings.checkboxPosition === 'Right') {\n listWrap.classList.add('e-right');\n }\n };\n ListBox.prototype.showCheckbox = function (showCheckbox) {\n var index = 0;\n var liColl = this.list.lastElementChild.querySelectorAll('li');\n var liCollLen = this.list.lastElementChild.getElementsByClassName('e-list-item').length;\n if (showCheckbox) {\n this.ulElement = this.renderItems(this.listData, this.fields);\n this.mainList = this.ulElement;\n this.list.removeChild(this.list.getElementsByTagName('ul')[0]);\n this.list.appendChild(this.ulElement);\n if (this.selectionSettings.showSelectAll && !this.list.getElementsByClassName('e-selectall-parent')[0]) {\n var l10nShow = new L10n(this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);\n this.showSelectAll = true;\n this.selectAllText = l10nShow.getConstant('selectAllText');\n this.unSelectAllText = l10nShow.getConstant('unSelectAllText');\n this.popupWrapper = this.list;\n this.checkBoxSelectionModule.checkAllParent = null;\n this.notify('selectAll', {});\n this.checkSelectAll();\n }\n }\n else {\n if (this.list.getElementsByClassName('e-selectall-parent')[0]) {\n this.list.removeChild(this.list.getElementsByClassName('e-selectall-parent')[0]);\n }\n for (index; index < liCollLen; index++) {\n if (liColl[index].classList.contains('e-list-item')) {\n liColl[index].removeChild(liColl[index].getElementsByClassName('e-checkbox-wrapper')[0]);\n }\n if (liColl[index].hasAttribute('aria-selected')) {\n liColl[index].removeAttribute('aria-selected');\n }\n }\n this.mainList = this.ulElement;\n }\n this.value = [];\n };\n ListBox.prototype.isSelected = function (ele) {\n if (!isNullOrUndefined(ele)) {\n return ele.classList.contains(cssClass.selected) || ele.querySelector('.e-check') !== null;\n }\n else {\n return false;\n }\n };\n ListBox.prototype.getSelectTag = function () {\n return this.list.getElementsByClassName('e-hidden-select')[0];\n };\n ListBox.prototype.getToolElem = function () {\n return this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];\n };\n ListBox.prototype.formResetHandler = function () {\n this.value = this.initialSelectedOptions;\n };\n /**\n * Return the module name.\n *\n * @private\n * @returns {string} - Module name\n */\n ListBox.prototype.getModuleName = function () {\n return 'listbox';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n ListBox.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ListBox.prototype.getLocaleName = function () {\n return 'listbox';\n };\n ListBox.prototype.destroy = function () {\n this.unwireEvents();\n if (this.element.tagName === 'EJS-LISTBOX') {\n this.element.innerHTML = '';\n }\n else {\n this.element.style.display = 'inline-block';\n if (this.toolbarSettings.items.length) {\n this.list.parentElement.parentElement.insertBefore(this.list, this.list.parentElement);\n detach(this.list.nextElementSibling);\n }\n this.list.parentElement.insertBefore(this.element, this.list);\n }\n _super.prototype.destroy.call(this);\n this.enableRtlElements = [];\n this.liCollections = null;\n this.list = null;\n this.ulElement = null;\n this.mainList = null;\n this.spinner = null;\n this.rippleFun = null;\n if (this.itemTemplate) {\n this.clearTemplate();\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ListBoxModel} newProp - Specifies the new properties.\n * @param {ListBoxModel} oldProp - Specifies the old properties.\n * @returns {void}\n * @private\n */\n ListBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrap = this.toolbarSettings.items.length ? this.list.parentElement : this.list;\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\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 this.list.classList.add('e-rtl');\n }\n else {\n this.list.classList.remove('e-rtl');\n }\n break;\n case 'value':\n removeClass(this.list.querySelectorAll('.' + cssClass.selected), cssClass.selected);\n this.clearSelection(this.value);\n this.setSelection();\n break;\n case 'height':\n this.setHeight();\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'allowDragAndDrop':\n if (newProp.allowDragAndDrop) {\n this.initDraggable();\n }\n else {\n if (this.ulElement.classList.contains('e-sortable')) {\n getComponent(this.ulElement, 'sortable').destroy();\n }\n }\n break;\n case 'allowFiltering':\n if (this.allowFiltering) {\n this.setFiltering();\n }\n else {\n this.list.removeChild(this.list.getElementsByClassName('e-filter-parent')[0]);\n this.filterParent = null;\n removeClass([this.list], 'e-filter-list');\n }\n break;\n case 'filterBarPlaceholder':\n if (this.allowFiltering) {\n if (this.filterInput) {\n Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);\n }\n }\n break;\n case 'scope':\n if (this.allowDragAndDrop) {\n getComponent(this.ulElement, 'sortable').scope = newProp.scope;\n }\n if (this.toolbarSettings.items.length) {\n if (oldProp.scope) {\n getComponent(document.querySelector(oldProp.scope), this.getModuleName())\n .tBListBox = null;\n }\n if (newProp.scope) {\n getComponent(document.querySelector(newProp.scope), this.getModuleName())\n .tBListBox = this;\n }\n }\n break;\n case 'toolbarSettings': {\n var ele = void 0;\n var pos = newProp.toolbarSettings.position;\n var toolElem = this.getToolElem();\n if (pos) {\n removeClass([wrap], ['e-right', 'e-left']);\n wrap.classList.add('e-' + pos.toLowerCase());\n if (pos === 'Left') {\n wrap.insertBefore(toolElem, this.list);\n }\n else {\n wrap.appendChild(toolElem);\n }\n }\n if (newProp.toolbarSettings.items) {\n oldProp.toolbarSettings.items = isNullOrUndefined(oldProp.toolbarSettings.items) ? [] : oldProp.toolbarSettings.items;\n if (oldProp.toolbarSettings && oldProp.toolbarSettings.items.length) {\n ele = this.list.parentElement;\n ele.parentElement.insertBefore(this.list, ele);\n detach(ele);\n }\n this.initToolbarAndStyles();\n this.wireToolbarEvent();\n }\n break;\n }\n case 'selectionSettings': {\n var showSelectAll = newProp.selectionSettings.showSelectAll;\n var showCheckbox = newProp.selectionSettings.showCheckbox;\n if (!isNullOrUndefined(showSelectAll)) {\n this.showSelectAll = showSelectAll;\n if (this.showSelectAll) {\n var l10nSel = new L10n(this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);\n this.checkBoxSelectionModule.checkAllParent = null;\n this.showSelectAll = true;\n this.selectAllText = l10nSel.getConstant('selectAllText');\n this.unSelectAllText = l10nSel.getConstant('selectAllText');\n this.popupWrapper = this.list;\n }\n this.notify('selectAll', {});\n this.checkSelectAll();\n }\n if (!isNullOrUndefined(showCheckbox)) {\n this.showCheckbox(showCheckbox);\n }\n if (this.selectionSettings.showCheckbox) {\n this.setCheckboxPosition();\n }\n break;\n }\n case 'dataSource':\n this.isDataSourceUpdate = true;\n this.jsonData = [].slice.call(this.dataSource);\n break;\n }\n }\n };\n var ListBox_1;\n __decorate$6([\n Property('')\n ], ListBox.prototype, \"cssClass\", void 0);\n __decorate$6([\n Property([])\n ], ListBox.prototype, \"value\", void 0);\n __decorate$6([\n Property('')\n ], ListBox.prototype, \"height\", void 0);\n __decorate$6([\n Property(true)\n ], ListBox.prototype, \"enabled\", void 0);\n __decorate$6([\n Property(false)\n ], ListBox.prototype, \"enablePersistence\", void 0);\n __decorate$6([\n Property(false)\n ], ListBox.prototype, \"allowDragAndDrop\", void 0);\n __decorate$6([\n Property(1000)\n ], ListBox.prototype, \"maximumSelectionLength\", void 0);\n __decorate$6([\n Property(false)\n ], ListBox.prototype, \"allowFiltering\", void 0);\n __decorate$6([\n Property('')\n ], ListBox.prototype, \"scope\", void 0);\n __decorate$6([\n Property(true)\n ], ListBox.prototype, \"ignoreCase\", void 0);\n __decorate$6([\n Property(null)\n ], ListBox.prototype, \"filterBarPlaceholder\", void 0);\n __decorate$6([\n Property('None')\n ], ListBox.prototype, \"sortOrder\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"beforeItemRender\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"filtering\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"select\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"change\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"beforeDrop\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"dragStart\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"drag\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"drop\", void 0);\n __decorate$6([\n Event()\n ], ListBox.prototype, \"dataBound\", void 0);\n __decorate$6([\n Property(null)\n ], ListBox.prototype, \"groupTemplate\", void 0);\n __decorate$6([\n Property('Request failed')\n ], ListBox.prototype, \"actionFailureTemplate\", void 0);\n __decorate$6([\n Property(1000)\n ], ListBox.prototype, \"zIndex\", void 0);\n __decorate$6([\n Property(false)\n ], ListBox.prototype, \"ignoreAccent\", void 0);\n __decorate$6([\n Complex({}, ToolbarSettings)\n ], ListBox.prototype, \"toolbarSettings\", void 0);\n __decorate$6([\n Complex({}, SelectionSettings)\n ], ListBox.prototype, \"selectionSettings\", void 0);\n ListBox = ListBox_1 = __decorate$6([\n NotifyPropertyChanges\n ], ListBox);\n return ListBox;\n}(DropDownBase));\nvar listBoxClasses = {\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n clearIcon: 'e-clear-icon'\n};\n\nvar __extends$7 = (undefined && undefined.__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$7 = (undefined && undefined.__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/**\n * The Mention component is used to list someone or something based on user input in textarea, input,\n * or any other editable element from which the user can select.\n */\nvar Mention = /** @__PURE__ @class */ (function (_super) {\n __extends$7(Mention, _super);\n /**\n * * Constructor for creating the widget\n *\n * @param {MentionModel} options - Specifies the MentionComponent model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function Mention(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n *\n * @param {MentionModel} newProp - Returns the dynamic property value of the component.\n * @param {MentionModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n Mention.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 'minLength':\n this.minLength = newProp.minLength;\n break;\n case 'suffixText':\n this.suffixText = newProp.suffixText;\n break;\n case 'allowSpaces':\n this.allowSpaces = newProp.allowSpaces;\n break;\n case 'mentionChar':\n this.mentionChar = newProp.mentionChar;\n break;\n case 'showMentionChar':\n this.showMentionChar = newProp.showMentionChar;\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n }\n }\n };\n Mention.prototype.updateCssClass = function (newClass, oldClass) {\n if (!isNullOrUndefined(oldClass)) {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newClass)) {\n newClass = (newClass.replace(/\\s+/g, ' ')).trim();\n }\n this.setCssClass(newClass, [this.inputElement], oldClass);\n if (this.popupObj) {\n this.setCssClass(newClass, [this.popupObj.element], oldClass);\n }\n };\n Mention.prototype.setCssClass = function (cssClass, elements, oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass.split(' '));\n }\n if (!isNullOrUndefined(cssClass) && cssClass !== '') {\n addClass(elements, cssClass.split(' '));\n }\n };\n Mention.prototype.initializeData = function () {\n this.isSelected = false;\n this.isFiltered = false;\n this.beforePopupOpen = false;\n this.initRemoteRender = false;\n this.isListResetted = false;\n this.isPopupOpen = false;\n this.isCollided = false;\n this.lineBreak = false;\n this.isRTE = false;\n this.keyEventName = 'mousedown';\n };\n /**\n * Execute before render the list items\n *\n * @private\n * @returns {void}\n */\n Mention.prototype.preRender = function () {\n this.initializeData();\n _super.prototype.preRender.call(this);\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n Mention.prototype.render = function () {\n var isSelector = typeof this.target === 'string';\n this.inputElement = !isNullOrUndefined(this.target) ?\n this.checkAndUpdateInternalComponent(isSelector\n ? document.querySelector(this.target)\n : this.target) : this.element;\n if (this.isContentEditable(this.inputElement)) {\n this.inputElement.setAttribute('contenteditable', 'true');\n addClass([this.inputElement], ['e-mention']);\n if (isNullOrUndefined(this.target)) {\n addClass([this.inputElement], ['e-editable-element']);\n }\n }\n this.inputElement.setAttribute('role', 'textbox');\n this.inputElement.setAttribute('aria-label', 'mention');\n this.queryString = this.elementValue();\n this.wireEvent();\n };\n Mention.prototype.wireEvent = function () {\n EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);\n this.bindCommonEvent();\n };\n Mention.prototype.unWireEvent = function () {\n EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);\n this.unBindCommonEvent();\n };\n Mention.prototype.bindCommonEvent = function () {\n if (!Browser.isDevice) {\n this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @private\n * @returns {void}\n */\n Mention.prototype.hideSpinner = function () {\n this.hideWaitingSpinner();\n };\n Mention.prototype.hideWaitingSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n }\n if (!isNullOrUndefined(this.spinnerTemplate) && !isNullOrUndefined(this.spinnerTemplateElement)) {\n detach(this.spinnerTemplateElement);\n }\n };\n Mention.prototype.checkAndUpdateInternalComponent = function (targetElement) {\n if (!this.isVue && targetElement.classList.contains('e-richtexteditor')) {\n return targetElement.querySelector('.e-content');\n }\n if (this.isVue && targetElement.nodeName === 'TEXTAREA' && targetElement.classList.contains('e-rte-hidden')) {\n var parentElement = targetElement.parentElement;\n if (parentElement && parentElement.classList.contains('e-richtexteditor')) {\n return parentElement.querySelector('.e-content');\n }\n }\n if (targetElement && targetElement.parentElement && targetElement.parentElement.classList.contains('e-rte-content')) {\n this.isRTE = true;\n this.keyEventName = 'click';\n }\n return targetElement;\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n */\n Mention.prototype.showWaitingSpinner = function () {\n if (!isNullOrUndefined(this.popupObj)) {\n if (isNullOrUndefined(this.spinnerTemplate) && isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = this.popupObj.element;\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n if (!isNullOrUndefined(this.spinnerTemplate)) {\n this.setSpinnerTemplate();\n }\n }\n };\n Mention.prototype.keyDownHandler = function (e) {\n var isKeyAction = true;\n switch (e.keyCode) {\n case 38:\n e.action = e.altKey ? 'hide' : 'up';\n break;\n case 40:\n e.action = e.altKey ? 'open' : 'down';\n break;\n case 33:\n e.action = 'pageUp';\n break;\n case 34:\n e.action = 'pageDown';\n break;\n case 36:\n e.action = 'home';\n break;\n case 35:\n e.action = 'end';\n break;\n case 9:\n e.action = e.shiftKey ? 'close' : 'tab';\n break;\n case 27:\n e.action = 'escape';\n break;\n case 32:\n e.action = 'space';\n break;\n case 13:\n e.action = 'enter';\n break;\n default:\n isKeyAction = false;\n break;\n }\n if (isKeyAction) {\n this.keyActionHandler(e);\n }\n };\n Mention.prototype.keyActionHandler = function (e) {\n var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'\n || e.action === 'home' || e.action === 'end');\n var isTabAction = e.action === 'tab' || e.action === 'close';\n if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape' && e.action !== 'space' && this.mentionChar.charCodeAt(0) === this.getLastLetter(this.getTextRange()).charCodeAt(0)) {\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n isNavigation && this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if (e.action === 'escape') {\n e.preventDefault();\n }\n this.isSelected = e.action === 'escape' ? false : this.isSelected;\n switch (e.action) {\n case 'down':\n case 'up':\n this.isUpDownKey = true;\n this.updateUpDownAction(e);\n break;\n case 'tab':\n if (this.isPopupOpen) {\n e.preventDefault();\n var li = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (li) {\n this.setSelection(li, e);\n }\n if (this.isPopupOpen) {\n this.hidePopup(e);\n }\n }\n break;\n case 'enter':\n if (this.isPopupOpen) {\n e.preventDefault();\n if (this.popupObj && this.popupObj.element.contains(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, e, false, true);\n }\n }\n break;\n case 'escape':\n if (this.isPopupOpen) {\n this.hidePopup(e);\n }\n break;\n }\n };\n Mention.prototype.updateUpDownAction = function (e) {\n if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {\n return;\n }\n var focusEle = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else if (!isNullOrUndefined(this.liCollections)) {\n var li = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (!isNullOrUndefined(li)) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n }\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n var startIndex = 0;\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n var nextItem = isNullOrUndefined(this.activeIndex) ?\n this.liCollections[startIndex] : this.liCollections[index];\n if (!isNullOrUndefined(nextItem)) {\n this.setSelection(nextItem, e);\n }\n }\n var itemIndex;\n for (var index = 0; index < this.liCollections.length; index++) {\n if (this.liCollections[index].classList.contains(dropDownBaseClasses.focus)\n || this.liCollections[index].classList.contains(dropDownBaseClasses.selected)) {\n itemIndex = index;\n break;\n }\n }\n if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {\n this.updateUpDownAction(e);\n }\n if (this.isPopupOpen) {\n e.preventDefault();\n }\n };\n Mention.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n Mention.prototype.unBindCommonEvent = function () {\n if (!Browser.isDevice) {\n this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);\n }\n };\n Mention.prototype.onKeyUp = function (e) {\n var rangetextContent;\n if (this.isUpDownKey && this.isPopupOpen && e.keyCode === 229) {\n this.isUpDownKey = false;\n return;\n }\n this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;\n var isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;\n if (document.activeElement !== this.inputElement && !isRteImage) {\n this.inputElement.focus();\n }\n if (this.isContentEditable(this.inputElement)) {\n this.range = this.getCurrentRange();\n rangetextContent = this.range.startContainer.textContent.split('');\n }\n var currentRange = this.getTextRange();\n var lastWordRange = this.getLastLetter(currentRange);\n var lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();\n // eslint-disable-next-line security/detect-non-literal-regexp\n var Regex = new RegExp(this.mentionChar.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'), 'g');\n var charRegex = new RegExp('[a-zA-Z]', 'g');\n if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {\n return;\n }\n if (this.beforePopupOpen && this.isPopupOpen && lastWordRange === lastTwoLetters) {\n this.hidePopup();\n return;\n }\n if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||\n (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||\n (this.isContentEditable(this.inputElement) && this.range.startContainer &&\n this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&\n (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||\n this.range.startContainer.nodeType === 1))) {\n if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1\n && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&\n (this.list && this.list.querySelectorAll('ul').length > 0) && e.code !== 'Enter') {\n this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\\u00a0', ' ');\n this.searchLists(e);\n }\n else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange) && (e.code !== 'ArrowDown' && e.code !== 'ArrowUp')) {\n this.hidePopup();\n this.lineBreak = true;\n }\n return;\n }\n if (lastWordRange.includes(this.mentionChar)) {\n this.queryString = lastWordRange.replace(this.mentionChar, '');\n }\n if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&\n this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {\n this.searchLists(e);\n if (!this.isPopupOpen && this.queryString.length >= this.minLength) {\n if (!this.isContentEditable(this.inputElement)) {\n this.showPopup();\n }\n else if (this.isContentEditable(this.inputElement) && this.range &&\n this.range.startContainer !== this.inputElement && e.keyCode !== 9) {\n this.showPopup();\n }\n }\n }\n else if (lastWordRange.indexOf(this.mentionChar) === 0 && !this.isPopupOpen && e.keyCode !== 8 && (!this.popupObj ||\n (isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element) ||\n !isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element)))) {\n if (this.initRemoteRender && this.list && this.list.classList.contains('e-nodata')) {\n this.searchLists(e);\n }\n this.resetList(this.dataSource, this.fields);\n if (isNullOrUndefined(this.list)) {\n this.initValue();\n }\n if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40 && this.queryString.length >= this.minLength) {\n this.didPopupOpenByTypingInitialChar = true;\n this.showPopup();\n if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {\n this.showWaitingSpinner();\n }\n this.lineBreak = false;\n }\n }\n else if (this.allowSpaces && this.queryString !== '' && currentRange && currentRange.trim() !== '' && currentRange.replace('\\u00a0', ' ').lastIndexOf(' ') < currentRange.length - 1 &&\n e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) ||\n (this.liCollections && this.liCollections.length > 0))) {\n this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\\u00a0', ' ');\n this.searchLists(e);\n }\n else if (this.queryString === '' && this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40 && this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0)) {\n this.searchLists(e);\n if (!this.isListResetted) {\n this.resetList(this.dataSource, this.fields);\n }\n }\n this.isListResetted = false;\n };\n Mention.prototype.isMatchedText = function () {\n var isMatched = false;\n for (var i = 0; i < (this.liCollections && this.liCollections.length); i++) {\n if (this.getTextRange() &&\n this.getTextRange().substring(this.getTextRange().lastIndexOf(this.mentionChar) + 1).replace('\\u00a0', ' ').trim() === this.liCollections[i].getAttribute('data-value').toLowerCase()) {\n isMatched = true;\n }\n }\n return isMatched;\n };\n Mention.prototype.getCurrentRange = function () {\n this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);\n return this.range;\n };\n Mention.prototype.searchLists = function (e) {\n var _this = this;\n this.isDataFetched = false;\n if (isNullOrUndefined(this.list)) {\n _super.prototype.render.call(this);\n this.unWireListEvents();\n this.wireListEvents();\n }\n if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {\n this.queryString = this.queryString === '' ? null : this.queryString;\n this.beforePopupOpen = true;\n this.resetList(this.dataSource, this.fields);\n return;\n }\n this.isSelected = false;\n this.activeIndex = null;\n var eventArgs = {\n preventDefaultAction: false,\n text: this.queryString,\n updateData: function (dataSource, query, fields) {\n if (eventArgs.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.filterAction(dataSource, query, fields);\n },\n cancel: false\n };\n this.trigger('filtering', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel && !_this.isFiltered && !eventArgs.preventDefaultAction) {\n _this.filterAction(_this.dataSource, null, _this.fields);\n }\n });\n };\n Mention.prototype.filterAction = function (dataSource, query, fields) {\n this.beforePopupOpen = true;\n if (this.queryString.length >= this.minLength) {\n this.resetList(dataSource, fields, query);\n this.isListResetted = true;\n }\n else {\n if (this.isPopupOpen) {\n this.hidePopup();\n }\n this.beforePopupOpen = false;\n }\n this.setDataIndex();\n this.renderReactTemplates();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Mention.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isActive) {\n if (!isNullOrUndefined(ulElement)) {\n attributes(ulElement, { 'id': this.inputElement.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n var isRTESlashMenuPopup = this.isRTE && this.cssClass && this.cssClass.indexOf('e-slash-menu') > -1;\n if (isRTESlashMenuPopup) {\n ulElement.id = this.inputElement.id + '_slash_menu_options';\n }\n }\n var focusItem = this.fields.disabled ? ulElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled)') : ulElement.querySelector('.' + dropDownBaseClasses.li);\n if (focusItem) {\n focusItem.classList.add(dropDownBaseClasses.selected);\n this.selectedLI = focusItem;\n var value = this.getFormattedValue(focusItem.getAttribute('data-value'));\n this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);\n }\n if (this.beforePopupOpen && this.isPopupOpen) {\n if (!isNullOrUndefined(this.popupObj.element)) {\n this.popupObj.element.remove();\n }\n this.renderPopup();\n }\n }\n };\n Mention.prototype.setDataIndex = function () {\n for (var i = 0; this.liCollections && i < this.liCollections.length; i++) {\n this.liCollections[i].setAttribute('data-index', i.toString());\n }\n };\n Mention.prototype.listOption = function (dataSource, fieldsSettings) {\n var _this = this;\n var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);\n if (isNullOrUndefined(fields.itemCreated)) {\n fields.itemCreated = function (e) {\n if (_this.highlight) {\n if (_this.inputElement.tagName === _this.getNgDirective() && _this.itemTemplate) {\n setTimeout(function () {\n highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);\n }, 0);\n }\n else {\n highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);\n }\n }\n };\n }\n else {\n var itemCreated_1 = fields.itemCreated;\n fields.itemCreated = function (e) {\n if (_this.highlight) {\n highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);\n }\n itemCreated_1.apply(_this, [e]);\n };\n }\n return fields;\n };\n Mention.prototype.elementValue = function () {\n if (!this.isContentEditable(this.inputElement)) {\n return this.inputElement.value.replace(this.mentionChar, '');\n }\n else {\n return this.inputElement.textContent.replace(this.mentionChar, '');\n }\n };\n Mention.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ? 'equal' : this.filterType;\n var queryString = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ?\n this.elementValue() : this.queryString;\n if (this.isFiltered) {\n return filterQuery;\n }\n if (this.queryString !== null && this.queryString !== '') {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var mapping = !isNullOrUndefined(this.fields.text) ? this.fields.text : '';\n filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (!isNullOrUndefined(this.suggestionCount)) {\n // Since defualt value of suggestioncount is 25, checked the condition\n if (this.suggestionCount !== 25) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n filterQuery.queries.splice(queryElements, 1);\n }\n }\n }\n filterQuery.take(this.suggestionCount);\n }\n return filterQuery;\n };\n Mention.prototype.renderHightSearch = function () {\n if (this.highlight) {\n for (var i = 0; i < this.liCollections.length; i++) {\n var isHighlight = this.ulElement.querySelector('.e-active');\n if (!isHighlight) {\n revertHighlightSearch(this.liCollections[i]);\n highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);\n }\n }\n }\n };\n Mention.prototype.getTextRange = function () {\n var text;\n if (!this.isContentEditable(this.inputElement)) {\n var component = this.inputElement;\n if (!isNullOrUndefined(component)) {\n var startPos = component.selectionStart;\n if (component.value && startPos >= 0) {\n text = component.value.substring(0, startPos);\n }\n }\n }\n else {\n if (this.range) {\n var selectedElem = this.range.startContainer;\n if (!isNullOrUndefined(selectedElem)) {\n var workingNodeContent = selectedElem.textContent;\n var selectStartOffset = this.range.startOffset;\n if (workingNodeContent && selectStartOffset >= 0) {\n text = workingNodeContent.substring(0, selectStartOffset);\n }\n }\n }\n }\n return text;\n };\n Mention.prototype.getLastLetter = function (text) {\n if (isNullOrUndefined(text)) {\n return '';\n }\n var textValue = text.indexOf('\\u200B') > -1 ? text.replace(/\\u200B/g, '').replace(/\\u00A0/g, ' ') : text.replace(/\\u00A0/g, ' ');\n var words = textValue.split(/\\s+/);\n var wordCnt = words.length - 1;\n return words[wordCnt].trim();\n };\n Mention.prototype.isContentEditable = function (element) {\n return element && element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA';\n };\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n */\n Mention.prototype.showPopup = function () {\n this.beforePopupOpen = true;\n if (document.activeElement !== this.inputElement) {\n this.inputElement.focus();\n }\n this.queryString = this.didPopupOpenByTypingInitialChar ? this.queryString : '';\n this.didPopupOpenByTypingInitialChar = false;\n if (this.isContentEditable(this.inputElement)) {\n this.range = this.getCurrentRange();\n }\n if (!this.isTyped) {\n this.resetList(this.dataSource, this.fields);\n }\n if (isNullOrUndefined(this.list)) {\n this.initValue();\n }\n this.renderPopup();\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElementID });\n if (this.selectedElementID == null) {\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in an open state.\n *\n * @returns {void}\n */\n Mention.prototype.hidePopup = function (e) {\n this.removeSelection();\n this.closePopup(0, e);\n };\n Mention.prototype.closePopup = function (delay, e) {\n var _this = this;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.inputElement.removeAttribute('aria-owns');\n this.inputElement.removeAttribute('aria-activedescendant');\n this.beforePopupOpen = false;\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var popupInstance = this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };\n this.trigger('closed', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel && _this.popupObj) {\n if (_this.isPopupOpen) {\n _this.popupObj.hide(new Animation(eventArgs.animation));\n }\n else {\n _this.destroyPopup();\n }\n }\n });\n };\n Mention.prototype.renderPopup = function () {\n var _this = this;\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n var popupEle_1;\n if (isNullOrUndefined(_this.target)) {\n popupEle_1 = _this.createElement('div', {\n id: _this.inputElement.id + '_popup', className: 'e-mention e-popup ' + (_this.cssClass != null ? _this.cssClass : '')\n });\n }\n else {\n popupEle_1 = _this.element;\n if (_this.cssClass != null) {\n addClass([popupEle_1], _this.cssClass.split(' '));\n }\n }\n var isRTESlashMenuPopup = _this.isRTE && _this.cssClass && _this.cssClass.indexOf('e-slash-menu') > -1;\n if (isRTESlashMenuPopup) {\n popupEle_1.id = _this.inputElement.id + '_slash_menu_popup';\n }\n else {\n if (!isNullOrUndefined(_this.target)) {\n popupEle_1.id = _this.inputElement.id + '_popup';\n }\n }\n _this.listHeight = formatUnit(_this.popupHeight);\n if (!isNullOrUndefined(_this.list.querySelector('li')) && !_this.initRemoteRender) {\n var li = _this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(li)) {\n _this.selectedLI = li;\n var value = _this.getFormattedValue(li.getAttribute('data-value'));\n _this.selectEventCallback(li, _this.getDataByValue(value), value, true);\n }\n }\n append([_this.list], popupEle_1);\n if (_this.inputElement.parentElement) {\n var rteRootElement = _this.inputElement.parentElement.closest('.e-richtexteditor');\n if (rteRootElement && popupEle_1.firstElementChild && popupEle_1.firstElementChild.childElementCount > 0) {\n popupEle_1.firstElementChild.setAttribute('aria-owns', rteRootElement.id);\n addClass([popupEle_1], 'e-rte-elements');\n }\n }\n if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||\n !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {\n document.body.appendChild(popupEle_1);\n }\n var coordinates_1;\n popupEle_1.style.visibility = 'hidden';\n _this.setHeight(popupEle_1);\n var offsetValue = 0;\n var left = 0;\n _this.initializePopup(popupEle_1, offsetValue, left);\n _this.checkCollision(popupEle_1);\n popupEle_1.style.visibility = 'visible';\n var popupLeft_1 = popupEle_1.parentElement.offsetWidth - popupEle_1.offsetWidth;\n var popupHeight_1 = popupEle_1.offsetHeight;\n addClass([popupEle_1], ['e-mention', 'e-popup', 'e-popup-close']);\n if (!isNullOrUndefined(_this.list)) {\n _this.unWireListEvents();\n _this.wireListEvents();\n }\n _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;\n attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options', 'aria-activedescendant': _this.selectedElementID });\n if (_this.selectedElementID == null) {\n _this.inputElement.removeAttribute('aria-activedescendant');\n }\n var animModel = { name: 'FadeIn', duration: 100 };\n _this.beforePopupOpen = true;\n var popupInstance = _this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };\n _this.trigger('opened', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.renderReactTemplates();\n if (_this.popupObj) {\n _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);\n }\n if (isNullOrUndefined(_this.getTriggerCharPosition())) {\n return;\n }\n coordinates_1 = _this.getCoordinates(_this.inputElement, _this.getTriggerCharPosition());\n if (!_this.isCollided) {\n popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\\n left: ').concat(coordinates_1.left.toString(), 'px;\\nposition: absolute;\\n display: block;');\n }\n else {\n if (_this.collision.length > 0 && _this.collision.indexOf('right') > -1 && _this.collision.indexOf('bottom') === -1) {\n popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\\n left: ').concat(popupLeft_1.toString(), 'px;\\nposition: absolute;\\n display: block;');\n }\n else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') === -1) {\n popupEle_1.style.left = formatUnit(coordinates_1.left);\n popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString(), 10));\n }\n else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') > -1) {\n popupEle_1.style.left = formatUnit(popupLeft_1);\n popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString(), 10));\n }\n else {\n popupEle_1.style.left = formatUnit(coordinates_1.left);\n popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(_this.popupHeight.toString(), 10));\n }\n _this.isCollided = false;\n _this.collision = [];\n }\n popupEle_1.style.width = _this.popupWidth !== '100%' && !isNullOrUndefined(_this.popupWidth) ? formatUnit(_this.popupWidth) : 'auto';\n _this.setHeight(popupEle_1);\n popupEle_1.style.zIndex = _this.zIndex === 1000 ? getZindexPartial(popupEle_1).toString() : _this.zIndex.toString();\n }\n else {\n _this.beforePopupOpen = false;\n _this.destroyPopup();\n }\n });\n }\n else {\n _this.beforePopupOpen = false;\n }\n });\n };\n Mention.prototype.setHeight = function (popupEle) {\n if (this.popupHeight !== 'auto' && this.list) {\n this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property\n popupEle.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n popupEle.style.height = 'auto';\n }\n };\n Mention.prototype.checkCollision = function (popupEle) {\n if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {\n var coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());\n this.collision = isCollide(popupEle, null, coordinates.left, coordinates.top);\n if (this.collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n this.isCollided = true;\n }\n this.popupObj.resolveCollision();\n }\n };\n Mention.prototype.getTriggerCharPosition = function () {\n var mostRecentTriggerCharPos;\n var currentRange = this.getTextRange();\n if (currentRange !== undefined && currentRange !== null) {\n mostRecentTriggerCharPos = 0;\n var idx = currentRange.lastIndexOf(this.mentionChar);\n if (idx >= mostRecentTriggerCharPos) {\n mostRecentTriggerCharPos = idx;\n }\n }\n return mostRecentTriggerCharPos ? mostRecentTriggerCharPos : 0;\n };\n Mention.prototype.initializePopup = function (element, offsetValue, left) {\n var _this = this;\n this.popupObj = new Popup(element, {\n width: this.setWidth(), targetType: 'relative',\n relateTo: this.inputElement, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,\n enableRtl: this.enableRtl, offsetX: left, position: { X: 'left', Y: 'bottom' }, actionOnScroll: 'hide',\n zIndex: this.zIndex,\n close: function () {\n _this.destroyPopup();\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n _this.setDataIndex();\n }\n });\n };\n Mention.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.inputElement.offsetWidth * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n Mention.prototype.destroyPopup = function () {\n this.isPopupOpen = false;\n this.popupObj.destroy();\n if (isNullOrUndefined(this.target)) {\n detach(this.popupObj.element);\n }\n else {\n this.popupObj.element.innerHTML = '';\n this.popupObj.element.removeAttribute('style');\n this.popupObj.element.removeAttribute('aria-disabled');\n }\n if (this.list.classList.contains('e-nodata')) {\n this.list = null;\n }\n };\n Mention.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + this.popupObj.element.id))) {\n this.hidePopup(e);\n }\n };\n Mention.prototype.getCoordinates = function (element, position) {\n var properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing'];\n var div;\n var span;\n var range;\n var globalRange;\n var coordinates;\n var computed;\n var rect;\n if (!this.isContentEditable(this.inputElement)) {\n div = this.createElement('div', { className: 'e-form-mirror-div' });\n document.body.appendChild(div);\n computed = getComputedStyle(element);\n div.style.position = 'absolute';\n div.style.visibility = 'hidden';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n properties.forEach(function (prop) {\n // eslint-disable-next-line security/detect-object-injection\n div.style[prop] = computed[prop];\n });\n div.textContent = element.value.substring(0, position);\n if (this.inputElement.nodeName === 'INPUT') {\n div.textContent = div.textContent.replace(/\\s/g, '\\u00a0');\n }\n span = this.createElement('span');\n span.textContent = element.value.substring(position) || '.';\n div.appendChild(span);\n rect = element.getBoundingClientRect();\n }\n else {\n var selectedNodePosition = this.getTriggerCharPosition();\n globalRange = this.range;\n range = document.createRange();\n if (this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1) {\n range.setStart(globalRange.startContainer, selectedNodePosition);\n range.setEnd(globalRange.startContainer, selectedNodePosition);\n }\n else {\n range.setStart(globalRange.startContainer, globalRange.startOffset);\n range.setEnd(globalRange.startContainer, globalRange.endOffset);\n }\n this.isTyped = false;\n range.collapse(false);\n rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] :\n range.getBoundingClientRect();\n }\n var rectTop = rect.top;\n var rectLeft = rect.left;\n var iframes = document.querySelectorAll('iframe');\n if (iframes.length > 0) {\n for (var i = 0; i < iframes.length; i++) {\n // eslint-disable-next-line security/detect-object-injection\n var iframe = iframes[i];\n if (iframe.contentDocument && iframe.contentDocument.contains(element)) {\n var iframeRect = iframe.getBoundingClientRect();\n rectTop += iframeRect.top;\n rectLeft += iframeRect.left;\n }\n }\n }\n var doc = document.documentElement;\n var windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);\n var windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);\n var width = 0;\n if (!isNullOrUndefined(range) && range.getBoundingClientRect().top === 0) {\n for (var i = 0; i < this.range.startContainer.childNodes.length; i++) {\n if (this.range.startContainer.childNodes[i].nodeType !== Node.TEXT_NODE && this.range.startContainer.childNodes[i].textContent.trim() !== '') {\n width += this.range.startContainer.childNodes[i].getClientRects()[0].width;\n }\n else if (this.range.startContainer.childNodes[i].textContent !== '') {\n var span_1 = document.createElement('span');\n span_1.innerHTML = this.range.startContainer.childNodes[i].nodeValue;\n document.body.appendChild(span_1);\n var textNodeWidth = span_1.offsetWidth;\n document.body.removeChild(span_1);\n width += textNodeWidth;\n }\n }\n }\n if (!this.isContentEditable(this.inputElement)) {\n coordinates = {\n top: rectTop + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +\n parseInt(computed.fontSize, 10) + 3 - element.scrollTop -\n (this.isCollided ? 10 : 0),\n left: rectLeft + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth, 10)\n };\n document.body.removeChild(div);\n }\n else {\n if (this.collision && this.collision.length > 0 && this.collision.indexOf('right') > -1 && this.collision.indexOf('bottom') === -1) {\n coordinates = {\n top: rectTop + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10),\n left: rectLeft + windowLeft + width\n };\n }\n else {\n coordinates = {\n top: rectTop + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10) - (this.isCollided ? 10 : 0),\n left: rectLeft + windowLeft + width\n };\n }\n }\n return coordinates;\n };\n Mention.prototype.initValue = function () {\n this.isDataFetched = false;\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n Mention.prototype.updateValues = function () {\n var li = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, null);\n }\n };\n Mention.prototype.renderList = function () {\n _super.prototype.render.call(this);\n this.unWireListEvents();\n this.wireListEvents();\n };\n /**\n * Event binding for list\n *\n * @returns {void}\n */\n Mention.prototype.wireListEvents = function () {\n EventHandler.add(this.list, this.keyEventName, this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n /**\n * Event un binding for list items.\n *\n * @returns {void}\n */\n Mention.prototype.unWireListEvents = function () {\n EventHandler.remove(this.list, this.keyEventName, this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n };\n Mention.prototype.onMouseClick = function (e) {\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li) || this.isDisabledElement(li)) {\n return;\n }\n this.isSelected = true;\n this.setSelection(li, e);\n var delay = 100;\n this.closePopup(delay, e);\n this.inputElement.focus();\n if (!this.isRTE) {\n e.preventDefault();\n }\n };\n Mention.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {\n var _this = this;\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n var selectedData = this.getDataByValue(value);\n if (!preventSelect && !isNullOrUndefined(e) && !(e.action === 'down' || e.action === 'up')) {\n var items = this.detachChanges(selectedData);\n this.isSelected = true;\n var eventArgs = {\n e: e,\n item: li,\n itemData: items,\n isInteracted: e ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n li.classList.remove(dropDownBaseClasses.selected);\n _this.isSelected = false;\n _this.isSelectCancel = true;\n }\n else {\n _this.selectEventCallback(li, selectedData, value);\n if (isSelection) {\n _this.setSelectOptions(li, e);\n }\n }\n });\n }\n else {\n this.selectEventCallback(li, selectedData, value);\n if (isSelection) {\n this.setSelectOptions(li, e);\n }\n }\n };\n Mention.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected\n && li.classList.contains(dropDownBaseClasses.selected)))) {\n this.updateSelectedItem(li, e, false, true);\n }\n else {\n this.setSelectOptions(li, e);\n }\n };\n Mention.prototype.setSelectOptions = function (li, e) {\n if (this.list) {\n this.removeHover();\n }\n this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;\n this.selectedLI = li;\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI)) {\n this.setScrollPosition(e);\n }\n if (e && (e.keyCode === 38 || e.keyCode === 40)) {\n return;\n }\n if (isNullOrUndefined(e) || this.setValue(e)) {\n return;\n }\n };\n Mention.prototype.setScrollPosition = function (e) {\n if (!isNullOrUndefined(e)) {\n switch (e.action) {\n case 'pageDown':\n case 'down':\n case 'end':\n this.scrollBottom();\n break;\n default:\n this.scrollTop();\n break;\n }\n }\n else {\n this.scrollBottom(true);\n }\n };\n Mention.prototype.scrollBottom = function (isInitial) {\n if (!isNullOrUndefined(this.selectedLI)) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;\n var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n }\n };\n Mention.prototype.scrollTop = function () {\n if (!isNullOrUndefined(this.selectedLI)) {\n var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;\n nextOffset = this.fields.groupBy && nextOffset;\n var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop;\n }\n }\n };\n Mention.prototype.selectEventCallback = function (li, selectedData, value, selectLi) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n this.item = li;\n this.itemData = selectedData;\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (focusedItem) {\n removeClass([focusedItem], dropDownBaseClasses.focus);\n }\n if (selectLi) {\n addClass([li], dropDownBaseClasses.selected);\n }\n li.setAttribute('aria-selected', 'true');\n this.activeIndex = this.getIndexByValue(value);\n };\n Mention.prototype.detachChanges = function (value) {\n var items;\n if (typeof value === 'string' ||\n typeof value === 'boolean' ||\n typeof value === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: value,\n enumerable: true\n },\n text: {\n value: value,\n enumerable: true\n }\n });\n }\n else {\n items = value;\n }\n return items;\n };\n Mention.prototype.setValue = function (e) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact) {\n if (!isNullOrUndefined(this.displayTemplate)) {\n this.setDisplayTemplate();\n }\n this.updateMentionValue(e);\n return true;\n }\n else {\n if (!isNullOrUndefined(this.displayTemplate)) {\n this.setDisplayTemplate(e);\n }\n else {\n this.updateMentionValue(e);\n }\n return true;\n }\n };\n Mention.prototype.updateMentionValue = function (e) {\n var dataItem = this.getItemData();\n var textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';\n var value;\n var endPos;\n var range;\n var globalRange;\n var selection = this.inputElement.ownerDocument.getSelection();\n var startPos = this.getTriggerCharPosition();\n if (this.isSelectCancel) {\n this.isSelectCancel = false;\n return;\n }\n if (dataItem.text !== null) {\n value = this.mentionVal(dataItem.text);\n }\n if (!this.isContentEditable(this.inputElement)) {\n var myField = this.inputElement;\n var currentTriggerSnippet = this.getTextRange().substring(startPos + this.mentionChar.length, this.getTextRange().length);\n value += textSuffix;\n endPos = startPos + this.mentionChar.length;\n endPos += currentTriggerSnippet.length;\n myField.value = myField.value.substring(0, startPos) + value + myField.value.substring(endPos, myField.value.length);\n myField.selectionStart = startPos + value.length;\n myField.selectionEnd = startPos + value.length;\n if (this.isPopupOpen) {\n this.hidePopup();\n }\n this.onChangeEvent(e);\n }\n else {\n endPos = this.getTriggerCharPosition() + this.mentionChar.length;\n if (this.range && (this.range.startContainer.textContent.trim() !== this.mentionChar)) {\n endPos = this.range.endOffset;\n }\n globalRange = this.range;\n range = document.createRange();\n if (((this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1) || this.getTextRange() &&\n this.getTextRange().trim() === this.mentionChar)) {\n range.setStart(globalRange.startContainer, startPos);\n range.setEnd(globalRange.startContainer, endPos);\n }\n else {\n if (globalRange.commonAncestorContainer.textContent.trim() !== '' && !isNullOrUndefined(globalRange.commonAncestorContainer.textContent.trim()) && this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1) {\n range.setStart(globalRange.startContainer, globalRange.startOffset - 1);\n range.setEnd(globalRange.startContainer, globalRange.endOffset - 1);\n }\n else {\n range.setStart(globalRange.startContainer, globalRange.startOffset);\n range.setEnd(globalRange.startContainer, globalRange.endOffset);\n }\n }\n this.isTyped = false;\n range.deleteContents();\n range.startContainer.parentElement.normalize();\n var element = this.createElement('div');\n element.innerHTML = value;\n var frag = document.createDocumentFragment();\n var node = void 0;\n var lastNode = void 0;\n // eslint-disable-next-line no-cond-assign\n while (node = element.firstChild) {\n lastNode = frag.appendChild(node);\n }\n range.insertNode(frag);\n if (lastNode) {\n range = range.cloneRange();\n if (this.isRTE) {\n range.setStart(lastNode, 0);\n range.setEnd(lastNode, lastNode.textContent.length);\n }\n else {\n range.setStartAfter(lastNode);\n }\n range.collapse(true);\n selection.removeAllRanges();\n selection.addRange(range);\n }\n if (this.isPopupOpen) {\n this.hidePopup();\n }\n //New event to update the RichTextEditor value, when a mention item is selected using mouse click action.\n if (!isNullOrUndefined(e.pointerType) && e.pointerType === 'mouse') {\n var event_1 = new CustomEvent('content-changed', { detail: { click: true } });\n this.inputElement.dispatchEvent(event_1);\n }\n this.onChangeEvent(e);\n }\n };\n Mention.prototype.mentionVal = function (value) {\n var showChar = this.showMentionChar ? this.mentionChar : '';\n if (!isNullOrUndefined(this.displayTemplate) && !isNullOrUndefined(this.displayTempElement)) {\n value = this.displayTempElement.innerHTML;\n }\n if (this.isContentEditable(this.inputElement)) {\n if (Browser.isAndroid) {\n return '' + showChar + value + ''.concat(typeof this.suffixText === 'string' ? this.suffixText : '');\n }\n else {\n return '' + showChar + value + ''.concat(typeof this.suffixText === 'string' ? this.suffixText : '');\n }\n }\n else {\n return showChar + value;\n }\n };\n Mention.prototype.setDisplayTemplate = function (e) {\n var _this = this;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['displayTemplate']);\n if (this.displayTempElement) {\n detach(this.displayTempElement);\n this.displayTempElement = null;\n }\n }\n if (!this.displayTempElement) {\n this.displayTempElement = this.createElement('div');\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact) {\n this.displayTempElement.innerHTML = '';\n }\n var compiledString = compile(this.displayTemplate);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var displayCompTemp = compiledString(this.itemData, this, 'displayTemplate', this.displayTemplateId, this.isStringTemplate, null, this.displayTempElement);\n if (displayCompTemp && displayCompTemp.length > 0) {\n append(displayCompTemp, this.displayTempElement);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact) {\n this.renderTemplates();\n }\n else {\n this.renderTemplates(function () {\n _this.updateMentionValue(e);\n });\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Mention.prototype.renderTemplates = function (callBack) {\n this.renderReactTemplates(callBack);\n };\n Mention.prototype.setSpinnerTemplate = function () {\n var _this = this;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['spinnerTemplate']);\n if (this.spinnerTemplateElement) {\n detach(this.spinnerTemplateElement);\n this.spinnerTemplateElement = null;\n }\n }\n if (!this.spinnerTemplateElement) {\n this.spinnerTemplateElement = this.createElement('div');\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact) {\n this.spinnerTemplateElement.innerHTML = '';\n }\n var compiledString = compile(this.spinnerTemplate);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var spinnerCompTemp = compiledString(null, this, 'spinnerTemplate', this.spinnerTemplateId, this.isStringTemplate, null, this.spinnerTemplateElement);\n if (spinnerCompTemp && spinnerCompTemp.length > 0) {\n for (var i = 0; i < spinnerCompTemp.length; i++) {\n this.spinnerTemplateElement.appendChild(spinnerCompTemp[i]);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact) {\n this.renderTemplates();\n this.popupObj.element.appendChild(this.spinnerTemplateElement);\n }\n else {\n this.renderTemplates(function () {\n _this.popupObj.element.appendChild(_this.spinnerTemplateElement);\n });\n }\n };\n Mention.prototype.onChangeEvent = function (eve) {\n this.isSelected = false;\n var items = this.detachMentionChanges(this.itemData);\n var preItems;\n if (typeof this.previousItemData === 'string' ||\n typeof this.previousItemData === 'boolean' ||\n typeof this.previousItemData === 'number') {\n preItems = Object.defineProperties({}, {\n value: {\n value: this.previousItemData,\n enumerable: true\n },\n text: {\n value: this.previousItemData,\n enumerable: true\n }\n });\n }\n else {\n preItems = this.previousItemData;\n }\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: items,\n previousItem: this.previousSelectedLI,\n previousItemData: preItems,\n isInteracted: eve ? true : false,\n value: this.item.innerHTML,\n element: this.inputElement\n };\n this.trigger('change', eventArgs);\n };\n Mention.prototype.detachMentionChanges = function (value) {\n var items;\n if (typeof value === 'string' ||\n typeof value === 'boolean' ||\n typeof value === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: value,\n enumerable: true\n },\n text: {\n value: value,\n enumerable: true\n }\n });\n }\n else {\n items = value;\n }\n return items;\n };\n Mention.prototype.getItemData = function () {\n var fields = this.fields;\n var dataItem = null;\n dataItem = this.itemData;\n var dataValue;\n var dataText;\n if (!isNullOrUndefined(dataItem)) {\n dataValue = getValue(fields.value, dataItem);\n dataText = getValue(fields.text, dataItem);\n }\n var value = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataValue : dataItem);\n var text = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataText : dataItem);\n return { value: value, text: text };\n };\n Mention.prototype.removeSelection = function () {\n if (this.list) {\n var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);\n if (selectedItems.length) {\n removeClass(selectedItems, dropDownBaseClasses.selected);\n selectedItems[0].removeAttribute('aria-selected');\n }\n }\n };\n Mention.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n Mention.prototype.setHover = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n Mention.prototype.removeHover = function () {\n if (this.list) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n }\n };\n Mention.prototype.isValidLI = function (li) {\n return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');\n };\n Mention.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n /**\n * Search the entered text and show it in the suggestion list if available.\n *\n * @returns {void}\n */\n Mention.prototype.search = function (text, positionX, positionY) {\n if (this.isContentEditable(this.inputElement)) {\n this.range = this.getCurrentRange();\n }\n var currentRange = this.getTextRange();\n var lastWordRange = this.getLastLetter(currentRange);\n if ((this.ignoreCase && (text === lastWordRange || text === lastWordRange.toLowerCase()))\n || !this.ignoreCase && text === lastWordRange) {\n this.resetList(this.dataSource, this.fields);\n }\n else {\n if (this.isPopupOpen) {\n this.hidePopup();\n }\n return;\n }\n if (isNullOrUndefined(this.list)) {\n this.renderList();\n this.renderPopup();\n }\n else {\n this.showPopup();\n }\n this.popupObj.element.style.left = formatUnit(positionX);\n this.popupObj.element.style.top = formatUnit(positionY);\n };\n /**\n * Method to disable specific item in the popup.\n *\n * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.\n * @returns {void}\n * @deprecated\n */\n Mention.prototype.disableItem = function (item) {\n if (this.fields.disabled) {\n if (!this.list) {\n this.renderList();\n }\n var itemIndex = -1;\n if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {\n if (typeof (item) === 'string') {\n itemIndex = this.getIndexByValue(item);\n }\n else if (typeof item === 'object') {\n if (item instanceof HTMLLIElement) {\n for (var index = 0; index < this.liCollections.length; index++) {\n if (this.liCollections[index] === item) {\n itemIndex = this.getIndexByValue(item.getAttribute('data-value'));\n break;\n }\n }\n }\n else {\n var value = JSON.parse(JSON.stringify(item))[this.fields.value];\n for (var index = 0; index < this.listData.length; index++) {\n if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {\n itemIndex = this.getIndexByValue(value);\n break;\n }\n }\n }\n }\n else {\n itemIndex = item;\n }\n var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;\n if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {\n var li = this.liCollections[itemIndex];\n if (li) {\n this.disableListItem(li);\n var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));\n parsedData[this.fields.disabled] = true;\n this.listData[itemIndex] = parsedData;\n this.dataSource = this.listData;\n }\n }\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n Mention.prototype.destroy = function () {\n this.hidePopup();\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n }\n if (this.inputElement && !this.inputElement.classList.contains('e-' + this.getModuleName())) {\n return;\n }\n this.previousSelectedLI = null;\n this.item = null;\n this.selectedLI = null;\n this.popupObj = null;\n _super.prototype.destroy.call(this);\n };\n Mention.prototype.getLocaleName = function () {\n return 'mention';\n };\n Mention.prototype.getNgDirective = function () {\n return 'EJS-MENTION';\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n Mention.prototype.getModuleName = function () {\n return 'mention';\n };\n __decorate$7([\n Property(null)\n ], Mention.prototype, \"cssClass\", void 0);\n __decorate$7([\n Property('@')\n ], Mention.prototype, \"mentionChar\", void 0);\n __decorate$7([\n Property(false)\n ], Mention.prototype, \"showMentionChar\", void 0);\n __decorate$7([\n Property(false)\n ], Mention.prototype, \"allowSpaces\", void 0);\n __decorate$7([\n Property(null)\n ], Mention.prototype, \"suffixText\", void 0);\n __decorate$7([\n Property(25)\n ], Mention.prototype, \"suggestionCount\", void 0);\n __decorate$7([\n Property(0)\n ], Mention.prototype, \"minLength\", void 0);\n __decorate$7([\n Property('None')\n ], Mention.prototype, \"sortOrder\", void 0);\n __decorate$7([\n Property(true)\n ], Mention.prototype, \"ignoreCase\", void 0);\n __decorate$7([\n Property(false)\n ], Mention.prototype, \"highlight\", void 0);\n __decorate$7([\n Property()\n ], Mention.prototype, \"locale\", void 0);\n __decorate$7([\n Property('auto')\n ], Mention.prototype, \"popupWidth\", void 0);\n __decorate$7([\n Property('300px')\n ], Mention.prototype, \"popupHeight\", void 0);\n __decorate$7([\n Property(null)\n ], Mention.prototype, \"displayTemplate\", void 0);\n __decorate$7([\n Property(null)\n ], Mention.prototype, \"itemTemplate\", void 0);\n __decorate$7([\n Property('No records found')\n ], Mention.prototype, \"noRecordsTemplate\", void 0);\n __decorate$7([\n Property(null)\n ], Mention.prototype, \"spinnerTemplate\", void 0);\n __decorate$7([\n Property()\n ], Mention.prototype, \"target\", void 0);\n __decorate$7([\n Property([])\n ], Mention.prototype, \"dataSource\", void 0);\n __decorate$7([\n Property(null)\n ], Mention.prototype, \"query\", void 0);\n __decorate$7([\n Property('Contains')\n ], Mention.prototype, \"filterType\", void 0);\n __decorate$7([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], Mention.prototype, \"fields\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"actionBegin\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"actionComplete\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"actionFailure\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"change\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"beforeOpen\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"opened\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"closed\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"select\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"filtering\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"created\", void 0);\n __decorate$7([\n Event()\n ], Mention.prototype, \"destroyed\", void 0);\n Mention = __decorate$7([\n NotifyPropertyChanges\n ], Mention);\n return Mention;\n}(DropDownBase));\n\nexport { AutoComplete, CheckBoxSelection, ComboBox, DropDownBase, DropDownList, DropDownTree, FieldSettings, Fields, ListBox, Mention, MultiSelect, Search, SelectionSettings, ToolbarSettings, TreeSettings, VirtualScroll, createFloatLabel, dropDownBaseClasses, dropDownListClasses, encodePlaceholder, escapeCharRegExp, floatLabelBlur, floatLabelFocus, highlightSearch, incrementalSearch, removeFloating, resetIncrementalSearchValues, revertHighlightSearch, setPlaceHolder, updateFloatLabelState };\n","import { extend, deleteObject, addClass, isNullOrUndefined, Property, ChildProperty, attributes, getComponent, select, getUniqueID, SanitizeHtmlHelper, detach, removeClass, EventHandler, rippleEffect, isRippleEnabled, closest, classList, Collection, Event, NotifyPropertyChanges, Component, getValue, setValue, remove, KeyboardEvents, getInstance, createElement, Animation, animationMode, Complex } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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/**\n * @param {Object} props - Specifies the properties\n * @param {string[]} model - Specifies the model\n * @returns {Object} Component Model\n */\nfunction getModel(props, model) {\n var obj = extend({}, props);\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((model).indexOf(prop) < 0) {\n deleteObject(obj, prop);\n }\n }\n return obj;\n}\n/** @hidden\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {number} keyCode - Specifies the keycode\n * @returns {void}\n */\nfunction upDownKeyHandler(ul, keyCode) {\n var defaultIdx = keyCode === 40 ? 0 : ul.childElementCount - 1;\n var liIdx = defaultIdx;\n var li;\n var selectedLi = ul.querySelector('.e-selected');\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains('e-focused')) {\n li = ul.children[i];\n liIdx = i;\n li.classList.remove('e-focused');\n if (keyCode === 40) {\n liIdx++;\n }\n else {\n liIdx--;\n }\n if (liIdx === (keyCode === 40 ? ul.childElementCount : -1)) {\n liIdx = defaultIdx;\n }\n }\n }\n li = ul.children[liIdx];\n liIdx = isValidLI(ul, li, liIdx, keyCode);\n if (liIdx !== -1) {\n addClass([ul.children[liIdx]], 'e-focused');\n ul.children[liIdx].focus();\n }\n}\n/**\n * Get Valid LI element\n *\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {Element} li - Specifies the LI element\n * @param {number} index - Specifies the index\n * @param {number} keyCode - Specifies the keycode\n * @param {number} count - Specifies the count\n * @returns {number} - Index\n */\nfunction isValidLI(ul, li, index, keyCode, count) {\n if (count === void 0) { count = 0; }\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n if (index === (keyCode === 40 ? ul.childElementCount - 1 : 0)) {\n index = keyCode === 40 ? 0 : ul.childElementCount - 1;\n }\n else {\n if (keyCode === 40) {\n index++;\n }\n else {\n index--;\n }\n }\n }\n li = ul.children[index];\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n count++;\n if (count === ul.childElementCount) {\n return index = -1;\n }\n index = isValidLI(ul, li, index, keyCode, count);\n }\n return index;\n}\n// eslint-disable-next-line jsdoc/require-param, valid-jsdoc\n/** @hidden\n * @param {HTMLElement} popup - Specifies the popup element.\n * @returns {void}\n */\nfunction setBlankIconStyle(popup, blankIcon) {\n var blankIconList = [].slice.call(popup.getElementsByClassName('e-blank-icon'));\n if (blankIcon) {\n var menuItem = [].slice.call(popup.getElementsByClassName('e-item'));\n menuItem.forEach(function (li) {\n if (li.style.paddingLeft || li.style.paddingRight) {\n li.removeAttribute('style');\n }\n });\n }\n if (!blankIconList.length) {\n return;\n }\n var iconLi = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)');\n if (isNullOrUndefined(iconLi)) {\n return;\n }\n if (iconLi.classList.contains('e-url')) {\n iconLi = iconLi.querySelector('.e-menu-url');\n }\n var icon = iconLi.querySelector('.e-menu-icon');\n var cssProp;\n var enableRtl = popup.classList.contains('e-rtl');\n if (enableRtl) {\n cssProp = { padding: 'paddingRight', margin: 'marginLeft' };\n }\n else {\n cssProp = { padding: 'paddingLeft', margin: 'marginRight' };\n }\n /* eslint-disable */\n var size = parseInt(getComputedStyle(icon).fontSize, 10) + parseInt((enableRtl ? getComputedStyle(icon)[cssProp.margin] : getComputedStyle(icon)[cssProp.margin]), 10)\n + parseInt(getComputedStyle(iconLi).paddingLeft, 10) + \"px\";\n blankIconList.forEach(function (li) {\n if (li.classList.contains('e-url')) {\n li.querySelector('.e-menu-url').style[cssProp.padding] = size;\n }\n else {\n li.style[cssProp.padding] = size;\n }\n });\n /* eslint-enable */\n}\n/**\n * Defines the items of Split Button/DropDownButton.\n */\nvar Item = /** @__PURE__ @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"separator\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"url\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n return Item;\n}(ChildProperty));\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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};\nvar classNames = {\n DISABLED: 'e-disabled',\n FOCUS: 'e-focused',\n ICON: 'e-menu-icon',\n ITEM: 'e-item',\n POPUP: 'e-dropdown-popup',\n RTL: 'e-rtl',\n SEPARATOR: 'e-separator',\n VERTICAL: 'e-vertical'\n};\n/**\n * DropDownButton component is used to toggle contextual overlays for displaying list of action items.\n * It can contain both text and images.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar DropDownButton = /** @__PURE__ @class */ (function (_super) {\n __extends$1(DropDownButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DropDownButtonModel} options - Specifies dropdown button model\n * @param {string|HTMLButtonElement} element - Specifies element\n * @hidden\n */\n function DropDownButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isPopupCreated = true;\n return _this;\n }\n DropDownButton.prototype.preRender = function () {\n /** */\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n DropDownButton.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To open/close DropDownButton popup based on current state of the DropDownButton.\n *\n * @returns {void}\n */\n DropDownButton.prototype.toggle = function () {\n if (this.canOpen()) {\n this.openPopUp();\n }\n else if (this.createPopupOnClick && !this.isPopupCreated) {\n this.createPopup();\n this.openPopUp();\n }\n else {\n this.closePopup();\n }\n };\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n DropDownButton.prototype.addItems = function (items, text) {\n var newItem;\n var idx = this.items.length;\n for (var j = 0, len = this.items.length; j < len; j++) {\n if (text === this.items[j].text) {\n idx = j;\n break;\n }\n }\n for (var i = items.length - 1; i >= 0; i--) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newItem = new Item(this, 'items', items[i], true);\n this.items.splice(idx, 0, newItem);\n }\n if (!this.canOpen()) {\n this.createItems();\n }\n };\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n DropDownButton.prototype.removeItems = function (items, isUniqueId) {\n var refresh = false;\n for (var i = 0, len = items.length; i < len; i++) {\n for (var j = 0, len_1 = this.items.length; j < len_1; j++) {\n if (items[i] === (isUniqueId ? this.items[j].id : this.items[j].text)) {\n this.items.splice(j, 1);\n refresh = true;\n break;\n }\n }\n }\n if (refresh && this.getULElement()) {\n this.createItems();\n }\n };\n DropDownButton.prototype.createPopup = function () {\n var _a;\n var div = this.createElement('div', {\n className: classNames.POPUP,\n id: this.element.id + '-popup'\n });\n document.body.appendChild(div);\n this.dropDown = new Popup(div, {\n relateTo: this.element,\n collision: { X: 'fit', Y: 'flip' },\n position: { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n content: this.target ? this.getTargetElement() : '',\n enableRtl: this.enableRtl\n });\n this.dropDown.element.setAttribute('role', 'dialog');\n this.dropDown.element.setAttribute('aria-label', 'dropdown menu');\n if (!isNullOrUndefined(this.popupContent)) {\n this.popupContent.style.display = '';\n }\n if (this.dropDown.element.style.position === 'fixed') {\n this.dropDown.refreshPosition(this.element);\n }\n this.dropDown.hide();\n attributes(this.element, (_a = {},\n _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false',\n _a['aria-expanded'] = 'false',\n _a['type'] = 'button',\n _a));\n if (this.cssClass) {\n addClass([div], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n this.isPopupCreated = true;\n if (this.createPopupOnClick) {\n var splitButton = getComponent(this.activeElem[0], 'split-btn');\n if (splitButton) {\n splitButton.isPopupCreated = true;\n }\n }\n };\n DropDownButton.prototype.getTargetElement = function () {\n if (this.createPopupOnClick && !this.isColorPicker() && !isNullOrUndefined(this.popupContent)) {\n return this.popupContent;\n }\n return typeof (this.target) === 'string' ? select(this.target) : this.target;\n };\n DropDownButton.prototype.createItems = function (appendItems) {\n var items = this.items;\n var showIcon = this.hasIcon(this.items, 'iconCss');\n var span;\n var item;\n var li;\n var eventArgs;\n var ul = this.getULElement();\n if (ul) {\n ul.innerHTML = '';\n }\n else {\n ul = this.createElement('ul', {\n attrs: { 'role': 'menu', 'tabindex': '0' }\n });\n }\n for (var i = 0; i < items.length; i++) {\n item = items[i];\n var tempItem = item.text;\n li = this.createElement('li', {\n innerHTML: item.url ? '' : tempItem,\n className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,\n attrs: item.separator ? { 'role': 'separator', 'tabindex': '-1', 'aria-label': 'separator', 'aria-hidden': 'true' } : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': tempItem },\n id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')\n });\n if (this.enableHtmlSanitizer) {\n li.textContent = item.url ? '' : tempItem;\n }\n else {\n li.innerHTML = item.url ? '' : tempItem;\n }\n if (item.url) {\n li.appendChild(this.createAnchor(item));\n li.classList.add('e-url');\n }\n if (item.iconCss) {\n span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });\n if (item.url) {\n li.childNodes[0].appendChild(span);\n }\n else {\n li.insertBefore(span, li.childNodes[0]);\n }\n }\n else {\n if (showIcon && !item.separator) {\n li.classList.add('e-blank-icon');\n }\n }\n var beforeDisabled = item.disabled;\n if (item.disabled) {\n li.classList.add('e-disabled');\n }\n eventArgs = { item: item, element: li };\n this.trigger('beforeItemRender', eventArgs);\n var afterDisabled = eventArgs.item.disabled;\n if (beforeDisabled !== afterDisabled) {\n if (eventArgs.item.disabled) {\n li.classList.add('e-disabled');\n }\n else {\n li.classList.remove('e-disabled');\n }\n }\n ul.appendChild(li);\n }\n if (appendItems) {\n this.getPopUpElement().appendChild(ul);\n }\n if (showIcon) {\n setBlankIconStyle(this.getPopUpElement());\n }\n };\n DropDownButton.prototype.hasIcon = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][\"\" + field]) {\n return true;\n }\n }\n return false;\n };\n DropDownButton.prototype.createAnchor = function (item) {\n var tempItem = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(item.text) : item.text;\n return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: tempItem, attrs: { 'href': item.url } });\n };\n DropDownButton.prototype.initialize = function () {\n this.button = new Button({\n iconCss: this.iconCss, iconPosition: this.iconPosition, cssClass: this.cssClass, content: this.content,\n disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence\n });\n this.button.createElement = this.createElement;\n this.button.appendTo(this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.appendArrowSpan();\n this.setActiveElem([this.element]);\n this.element.setAttribute('tabindex', '0');\n this.element.setAttribute('aria-label', this.element.textContent ? this.element.textContent : 'dropdownbutton');\n if ((this.target && !this.isColorPicker() && !this.createPopupOnClick) || !this.createPopupOnClick) {\n this.createPopup();\n }\n else {\n this.isPopupCreated = false;\n if (this.target && !this.isColorPicker() && this.createPopupOnClick) {\n this.popupContent = this.getTargetElement();\n this.popupContent.style.display = 'none';\n }\n }\n };\n DropDownButton.prototype.isColorPicker = function () {\n if (!this.element) {\n return false;\n }\n var prevElem = this.element.previousSibling;\n if (prevElem && prevElem.classList && prevElem.classList.contains('e-split-colorpicker')) {\n return true;\n }\n return false;\n };\n DropDownButton.prototype.appendArrowSpan = function () {\n this.cssClass = isNullOrUndefined(this.cssClass) ? '' : this.cssClass;\n this.element.appendChild(this.createElement('span', {\n className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1\n ? 'bottom' : 'right') + ' e-caret'\n }));\n };\n DropDownButton.prototype.setActiveElem = function (elem) {\n this.activeElem = elem;\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n DropDownButton.prototype.getModuleName = function () {\n return 'dropdown-btn';\n };\n DropDownButton.prototype.canOpen = function () {\n var val = false;\n if (this.isPopupCreated) {\n val = this.getPopUpElement().classList.contains('e-popup-close');\n }\n return val;\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n DropDownButton.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'dropdown-btn') {\n var classList_1;\n if (this.element.querySelector('span.e-caret')) {\n detach(this.element.querySelector('span.e-caret'));\n }\n if (this.cssClass) {\n classList_1 = this.cssClass.split(' ');\n }\n this.button.destroy();\n if (classList_1) {\n removeClass([this.element], classList_1);\n }\n removeClass(this.activeElem, ['e-active']);\n var attrList = this.element.getAttribute('class') ? ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type']\n : ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type', 'class'];\n attrList.forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.popupUnWireEvents();\n this.destroyPopup();\n this.isPopupCreated = false;\n if (!this.disabled) {\n this.unWireEvents();\n }\n }\n };\n DropDownButton.prototype.destroyPopup = function () {\n if (this.isPopupCreated) {\n this.dropDown.destroy();\n if (this.getPopUpElement()) {\n var popupEle = document.getElementById(this.getPopUpElement().id);\n if (popupEle) {\n removeClass([popupEle], ['e-popup-open', 'e-popup-close']);\n detach(popupEle);\n }\n }\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated && this.dropDown) {\n this.dropDown.element = null;\n this.dropDown = undefined;\n }\n }\n this.isPopupCreated = false;\n var splitButton = getComponent(this.activeElem[0], 'split-btn');\n if (this.createPopupOnClick && splitButton) {\n var dropDownButton = getComponent(this.activeElem[1], 'dropdown-btn');\n if (dropDownButton) {\n dropDownButton.isPopupCreated = false;\n }\n }\n };\n DropDownButton.prototype.getPopUpElement = function () {\n var val = null;\n if (!this.dropDown && this.activeElem[0].classList.contains('e-split-btn')) {\n var dropDownBtn = getComponent(this.activeElem[1], 'dropdown-btn');\n if (dropDownBtn) {\n this.dropDown = dropDownBtn.dropDown;\n }\n }\n if (this.dropDown) {\n val = this.dropDown.element;\n }\n return val;\n };\n DropDownButton.prototype.getULElement = function () {\n var val = null;\n if (this.getPopUpElement()) {\n val = this.getPopUpElement().children[0];\n }\n return val;\n };\n DropDownButton.prototype.wireEvents = function () {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n if (!this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.add(window, 'resize', this.windowResize, this);\n };\n DropDownButton.prototype.windowResize = function () {\n if (!this.canOpen() && this.dropDown) {\n this.dropDown.refreshPosition(this.element);\n }\n };\n DropDownButton.prototype.popupWireEvents = function () {\n if (!this.delegateMousedownHandler) {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n }\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n if (popupElement) {\n EventHandler.add(popupElement, 'click', this.clickHandler, this);\n EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);\n if (this.closeActionEvents) {\n EventHandler.add(popupElement, this.closeActionEvents, this.focusoutHandler, this);\n }\n }\n this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });\n };\n DropDownButton.prototype.popupUnWireEvents = function () {\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n if (popupElement && popupElement.parentElement) {\n EventHandler.remove(popupElement, 'click', this.clickHandler);\n EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);\n if (this.closeActionEvents) {\n EventHandler.remove(popupElement, this.closeActionEvents, this.focusoutHandler);\n }\n }\n if (isRippleEnabled && this.rippleFn) {\n this.rippleFn();\n }\n };\n /**\n * Handles the keyboard interactions.\n *\n * @param {KeyboardEventArgs} e - Specifies keyboard event args.\n * @returns {void}\n * @hidden\n */\n DropDownButton.prototype.keyBoardHandler = function (e) {\n if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {\n return;\n }\n switch (e.keyCode) {\n case 38:\n case 40:\n if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {\n this.keyEventHandler(e);\n }\n else {\n this.upDownKeyHandler(e);\n }\n break;\n case 9:\n case 13:\n case 27:\n case 32:\n this.keyEventHandler(e);\n break;\n }\n };\n DropDownButton.prototype.isSafari = function () {\n return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n };\n DropDownButton.prototype.upDownKeyHandler = function (e) {\n if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {\n return;\n }\n e.preventDefault();\n upDownKeyHandler(this.getULElement(), e.keyCode);\n };\n DropDownButton.prototype.keyEventHandler = function (e) {\n if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {\n return;\n }\n if (e.keyCode === 13 && this.activeElem[0].classList.contains('e-split-btn')) {\n this.triggerSelect(e);\n this.activeElem[0].focus();\n return;\n }\n if (e.target && e.target.className.indexOf('e-edit-template') > -1 && e.keyCode === 32) {\n return;\n }\n if (e.keyCode !== 9) {\n e.preventDefault();\n }\n if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {\n if (!this.canOpen()) {\n this.closePopup(e, this.element);\n }\n }\n else {\n this.clickHandler(e);\n }\n };\n DropDownButton.prototype.getLI = function (elem) {\n return elem.tagName === 'LI' ? elem : closest(elem, 'li');\n };\n DropDownButton.prototype.mousedownHandler = function (e) {\n var trgt = e.target;\n if (this.dropDown && !this.canOpen() && this.getPopUpElement() && !(closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')\n || closest(trgt, '[id=\"' + this.element.id + '\"]'))) {\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.focusoutHandler = function (e) {\n if (this.isPopupCreated && !this.canOpen()) {\n var liTarget = (e.relatedTarget || e.target);\n if (liTarget && liTarget.className.indexOf('e-item') > -1) {\n var li = this.getLI(liTarget);\n if (li) {\n var liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n var item = this.items[liIdx];\n if (item) {\n var selectEventArgs = { element: li, item: item, event: e };\n this.trigger('select', selectEventArgs);\n }\n }\n }\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.clickHandler = function (e) {\n var trgt = e.target;\n if (closest(trgt, '[id=\"' + this.element.id + '\"]')) {\n if (!this.createPopupOnClick || (this.target && this.target !== '' && !this.isColorPicker() && !this.createPopupOnClick)) {\n if (this.getPopUpElement().classList.contains('e-popup-close')) {\n this.openPopUp(e);\n }\n else {\n this.closePopup(e);\n }\n }\n else if (this.isPopupCreated) {\n this.closePopup(e, this.activeElem[0]);\n }\n else {\n this.createPopup();\n this.openPopUp(e);\n }\n }\n else {\n if (closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')) {\n var li = this.getLI(e.target);\n if (li) {\n this.triggerSelect(e);\n this.closePopup(e, this.activeElem[0]);\n }\n }\n }\n };\n DropDownButton.prototype.triggerSelect = function (e) {\n var eventArgs;\n var liIdx;\n var item;\n var li = this.getLI(e.target);\n if (li) {\n liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n item = this.items[liIdx];\n if (item) {\n eventArgs = { element: li, item: item, event: e };\n this.trigger('select', eventArgs);\n }\n }\n };\n DropDownButton.prototype.openPopUp = function (e) {\n var _this = this;\n if (e === void 0) { e = null; }\n var popupElem = this.getPopUpElement();\n if (!this.target) {\n this.createItems(true);\n }\n else {\n if (this.activeElem.length > 1) {\n var splitButton = getComponent(this.activeElem[0], 'split-btn');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (splitButton.isReact && popupElem.childNodes.length < 1) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (splitButton.appendReactElement) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n splitButton.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n }\n this.renderReactTemplates();\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact && popupElem.childNodes.length < 1) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.appendReactElement) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n }\n this.renderReactTemplates();\n }\n }\n }\n var ul = this.getULElement();\n this.popupWireEvents();\n var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeOpen', beforeOpenArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var ul_1 = _this.getULElement();\n _this.dropDown.show(null, _this.element);\n addClass([_this.element], 'e-active');\n _this.element.setAttribute('aria-expanded', 'true');\n _this.element.setAttribute('aria-owns', _this.getPopUpElement().id);\n if (ul_1 && !_this.isSafari()) {\n ul_1.focus();\n }\n if (_this.enableRtl && ul_1.parentElement.style.left !== '0px') {\n var wrapperWidth = void 0;\n if (_this.element.parentElement && _this.element.parentElement.classList.contains('e-split-btn-wrapper')) {\n wrapperWidth = _this.element.parentElement.offsetWidth;\n }\n else {\n wrapperWidth = _this.element.offsetWidth;\n }\n var popupRect = ul_1.parentElement.offsetWidth - wrapperWidth;\n var popupLeft = parseFloat(ul_1.parentElement.style.left) - popupRect;\n if (popupLeft < 0) {\n popupLeft = 0;\n }\n ul_1.parentElement.style.left = popupLeft + 'px';\n }\n var openArgs = { element: ul_1, items: _this.items };\n _this.trigger('open', openArgs);\n if (ul_1 && _this.isSafari()) {\n ul_1.focus();\n }\n }\n });\n };\n DropDownButton.prototype.closePopup = function (e, focusEle) {\n var _this = this;\n if (e === void 0) { e = null; }\n var ul = this.getULElement();\n var beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var popupElement = _this.getPopUpElement();\n if (popupElement) {\n EventHandler.remove(popupElement, 'keydown', _this.keyBoardHandler);\n }\n _this.popupUnWireEvents();\n var ul_2 = _this.getULElement();\n var selectedLi = void 0;\n if (ul_2) {\n selectedLi = ul_2.querySelector('.e-selected');\n }\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n if (_this.dropDown) {\n _this.dropDown.hide();\n }\n removeClass(_this.activeElem, 'e-active');\n _this.element.setAttribute('aria-expanded', 'false');\n _this.element.removeAttribute('aria-owns');\n if (focusEle) {\n focusEle.focus();\n }\n var closeArgs = { element: ul_2, items: _this.items };\n _this.trigger('close', closeArgs);\n if (!_this.target && ul_2) {\n detach(ul_2);\n }\n if (!_this.target || _this.isColorPicker() || (_this.target && !_this.isColorPicker())) {\n if (_this.createPopupOnClick) {\n _this.destroyPopup();\n }\n }\n }\n else {\n if (ul) {\n ul.focus();\n }\n }\n });\n };\n DropDownButton.prototype.unWireEvents = function () {\n if (!this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated) {\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.remove(window, 'resize', this.windowResize);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DropDownButtonModel} newProp - Specifies new properties\n * @param {DropDownButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];\n this.button.setProperties(getModel(newProp, btnModel));\n var popupElement;\n if (this.isPopupCreated) {\n popupElement = this.getPopUpElement();\n this.dropDown.setProperties(getModel(newProp, ['enableRtl']));\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.unWireEvents();\n if (this.isPopupCreated && !this.canOpen()) {\n this.closePopup();\n }\n }\n else {\n this.wireEvents();\n }\n break;\n case 'cssClass':\n oldProp.cssClass = isNullOrUndefined(oldProp.cssClass) ? '' : oldProp.cssClass;\n if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1 || oldProp.cssClass.indexOf(classNames.VERTICAL) > -1) {\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n var arrowSpan = this.element.querySelector('span.e-caret');\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n newProp.cssClass.indexOf(classNames.VERTICAL) > -1 ? classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right'])\n : classList(arrowSpan, ['e-icon-right'], ['e-icon-bottom']);\n }\n if (this.isPopupCreated) {\n if (oldProp.cssClass) {\n removeClass([popupElement], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([popupElement], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n }\n break;\n case 'target':\n this.dropDown.content = this.getTargetElement();\n this.dropDown.dataBind();\n break;\n case 'items':\n if (this.isPopupCreated && this.getULElement()) {\n this.createItems();\n }\n break;\n case 'createPopupOnClick':\n if (newProp.createPopupOnClick) {\n this.destroyPopup();\n }\n else {\n this.createPopup();\n }\n break;\n }\n }\n };\n /**\n * Sets the focus to DropDownButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n DropDownButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate$1([\n Property('')\n ], DropDownButton.prototype, \"content\", void 0);\n __decorate$1([\n Property('')\n ], DropDownButton.prototype, \"cssClass\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownButton.prototype, \"disabled\", void 0);\n __decorate$1([\n Property('')\n ], DropDownButton.prototype, \"iconCss\", void 0);\n __decorate$1([\n Property('Left')\n ], DropDownButton.prototype, \"iconPosition\", void 0);\n __decorate$1([\n Property(true)\n ], DropDownButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$1([\n Collection([], Item)\n ], DropDownButton.prototype, \"items\", void 0);\n __decorate$1([\n Property(false)\n ], DropDownButton.prototype, \"createPopupOnClick\", void 0);\n __decorate$1([\n Property('')\n ], DropDownButton.prototype, \"target\", void 0);\n __decorate$1([\n Property('')\n ], DropDownButton.prototype, \"closeActionEvents\", void 0);\n __decorate$1([\n Event()\n ], DropDownButton.prototype, \"beforeItemRender\", void 0);\n __decorate$1([\n Event()\n ], DropDownButton.prototype, \"beforeOpen\", void 0);\n __decorate$1([\n Event()\n ], DropDownButton.prototype, \"beforeClose\", void 0);\n __decorate$1([\n Event()\n ], DropDownButton.prototype, \"close\", void 0);\n __decorate$1([\n Event()\n ], DropDownButton.prototype, \"open\", void 0);\n __decorate$1([\n Event()\n ], DropDownButton.prototype, \"select\", void 0);\n __decorate$1([\n Event()\n ], DropDownButton.prototype, \"created\", void 0);\n DropDownButton = __decorate$1([\n NotifyPropertyChanges\n ], DropDownButton);\n return DropDownButton;\n}(Component));\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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};\nvar RTL = 'e-rtl';\nvar TAGNAME = 'EJS-SPLITBUTTON';\n/**\n * SplitButton component has primary and secondary button. Primary button is used to select\n * default action and secondary button is used to toggle contextual overlays for displaying list of\n * action items. It can contain both text and images.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar SplitButton = /** @__PURE__ @class */ (function (_super) {\n __extends$2(SplitButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {SplitButtonModel} options - Specifies the splitbutton model\n * @param {string|HTMLButtonElement} element - Specifies the element\n * @hidden\n */\n function SplitButton(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize Angular support.\n *\n * @private\n * @returns {void}\n */\n SplitButton.prototype.preRender = function () {\n var ele = this.element;\n if (ele.tagName === TAGNAME) {\n var ejInstance = getValue('ej2_instances', ele);\n var btn = this.createElement('button', { attrs: { 'type': 'button' } });\n var wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {\n btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);\n }\n ele.parentNode.insertBefore(wrapper, ele);\n detach(ele);\n ele = btn;\n wrapper.appendChild(ele);\n setValue('ej2_instances', ejInstance, ele);\n this.wrapper = wrapper;\n this.element = ele;\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the Component rendering.\n *\n * @returns {void}\n * @private\n */\n SplitButton.prototype.render = function () {\n this.initWrapper();\n this.createPrimaryButton();\n this.renderControl();\n };\n SplitButton.prototype.renderControl = function () {\n this.createSecondaryButton();\n this.setActiveElem([this.element, this.secondaryBtnObj.element]);\n this.setAria();\n this.wireEvents();\n this.renderComplete();\n };\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n SplitButton.prototype.addItems = function (items, text) {\n _super.prototype.addItems.call(this, items, text);\n this.secondaryBtnObj.items = this.items;\n };\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n SplitButton.prototype.removeItems = function (items, isUniqueId) {\n _super.prototype.removeItems.call(this, items, isUniqueId);\n this.secondaryBtnObj.items = this.items;\n };\n SplitButton.prototype.initWrapper = function () {\n if (!this.wrapper) {\n this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(this.wrapper, this.element);\n }\n this.element.classList.remove('e-' + this.getModuleName());\n if (this.enableRtl) {\n this.wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([this.wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n };\n SplitButton.prototype.createPrimaryButton = function () {\n var btnModel = {\n cssClass: this.cssClass,\n enableRtl: this.enableRtl,\n iconCss: this.iconCss,\n iconPosition: this.iconPosition,\n content: this.content,\n disabled: this.disabled\n };\n this.primaryBtnObj = new Button(btnModel);\n this.primaryBtnObj.createElement = this.createElement;\n this.primaryBtnObj.appendTo(this.element);\n this.element.classList.add('e-' + this.getModuleName());\n this.element.type = 'button';\n this.wrapper.appendChild(this.element);\n };\n SplitButton.prototype.createSecondaryButton = function () {\n var _this = this;\n var btnElem = this.createElement('button', {\n className: 'e-icon-btn',\n attrs: { 'tabindex': '-1' },\n id: this.element.id + '_dropdownbtn'\n });\n this.wrapper.appendChild(btnElem);\n var dropDownBtnModel = {\n cssClass: this.cssClass,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n items: this.items,\n target: this.target,\n createPopupOnClick: this.createPopupOnClick\n };\n dropDownBtnModel.beforeItemRender = function (args) {\n if (_this.createPopupOnClick) {\n _this.secondaryBtnObj.dropDown.relateTo = _this.wrapper;\n _this.dropDown = _this.secondaryBtnObj.dropDown;\n }\n _this.trigger('beforeItemRender', args);\n };\n dropDownBtnModel.open = function (args) {\n _this.trigger('open', args);\n };\n dropDownBtnModel.close = function (args) {\n _this.trigger('close', args);\n };\n dropDownBtnModel.select = function (args) {\n _this.trigger('select', args);\n };\n dropDownBtnModel.beforeOpen = function (args) {\n if (_this.createPopupOnClick && _this.items.length === 0) {\n _this.secondaryBtnObj.dropDown.relateTo = _this.wrapper;\n _this.dropDown = _this.secondaryBtnObj.dropDown;\n }\n var callBackPromise = new Deferred();\n _this.trigger('beforeOpen', args, function (observedArgs) {\n callBackPromise.resolve(observedArgs);\n });\n return callBackPromise;\n };\n dropDownBtnModel.beforeClose = function (args) {\n var callBackPromise = new Deferred();\n _this.trigger('beforeClose', args, function (observedArgs) {\n callBackPromise.resolve(observedArgs);\n });\n return callBackPromise;\n };\n this.secondaryBtnObj = new DropDownButton(dropDownBtnModel);\n this.secondaryBtnObj.createElement = this.createElement;\n this.secondaryBtnObj.appendTo(btnElem);\n if (!this.createPopupOnClick) {\n this.secondaryBtnObj.dropDown.relateTo = this.wrapper;\n this.dropDown = this.secondaryBtnObj.dropDown;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.isPopupCreated = this.secondaryBtnObj.isPopupCreated;\n this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];\n this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');\n if (this.disabled) {\n this.wrapper.classList.add('e-splitbtn-disabled');\n }\n };\n SplitButton.prototype.setAria = function () {\n attributes(this.element, {\n 'aria-expanded': 'false', 'aria-haspopup': 'true',\n 'aria-label': this.element.textContent ? this.element.textContent + ' splitbutton' : 'splitbutton', 'aria-owns': this.element.id + '_dropdownbtn-popup'\n });\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n SplitButton.prototype.getModuleName = function () {\n return 'split-btn';\n };\n /**\n * To open/close SplitButton popup based on current state of the SplitButton.\n *\n * @returns {void}\n */\n SplitButton.prototype.toggle = function () {\n this.secondaryBtnObj.toggle();\n };\n SplitButton.prototype.destroy = function () {\n var _this = this;\n var classList = [RTL];\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n if (this.element) {\n var element = document.getElementById(this.element.id);\n if (element && element.parentElement === this.wrapper) {\n if (this.wrapper.tagName === TAGNAME) {\n this.wrapper.innerHTML = '';\n removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);\n removeClass([this.wrapper], this.cssClass.split(' '));\n }\n else {\n removeClass([this.element], classList);\n ['aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.wrapper.parentNode.insertBefore(this.element, this.wrapper);\n remove(this.wrapper);\n }\n this.unWireEvents();\n }\n }\n this.primaryBtnObj.destroy();\n this.secondaryBtnObj.destroy();\n _super.prototype.destroy.call(this);\n if (this.element && !this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.refreshing && this.isAngular) {\n this.element = this.wrapper;\n ['e-control', 'e-split-btn', 'e-lib'].forEach(function (key) {\n _this.element.classList.add(key);\n });\n setValue('ej2_instances', [this], this.element);\n }\n this.wrapper = null;\n };\n SplitButton.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.primaryBtnClickHandler, this);\n new KeyboardEvents(this.element, {\n keyAction: this.btnKeyBoardHandler.bind(this),\n keyConfigs: {\n altdownarrow: 'alt+downarrow',\n enter: 'enter'\n }\n });\n };\n SplitButton.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);\n getInstance(this.element, KeyboardEvents).destroy();\n };\n SplitButton.prototype.primaryBtnClickHandler = function () {\n this.trigger('click', { element: this.element });\n };\n SplitButton.prototype.btnKeyBoardHandler = function (e) {\n switch (e.action) {\n case 'altdownarrow':\n this.clickHandler(e);\n break;\n case 'enter':\n this.clickHandler(e);\n if (this.getPopUpElement() && !this.getPopUpElement().classList.contains('e-popup-close')) {\n this.element.classList.remove('e-active');\n this.secondaryBtnObj.element.classList.add('e-active');\n }\n else {\n this.secondaryBtnObj.element.classList.remove('e-active');\n }\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {SplitButtonModel} newProp - Specifies new properties\n * @param {SplitButtonModel} oldProp - Specifies old properties\n * @returns {void}\n */\n SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];\n this.primaryBtnObj.setProperties(getModel(newProp, model));\n model = ['beforeOpen', 'beforeItemRender', 'select', 'open',\n 'close', 'cssClass', 'disabled', 'enableRtl', 'createPopupOnClick'];\n if (Object.keys(newProp).indexOf('items') > -1) {\n this.secondaryBtnObj.items = newProp.items;\n this.secondaryBtnObj.dataBind();\n }\n this.secondaryBtnObj.setProperties(getModel(newProp, model));\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.wrapper], oldProp.cssClass.split(' '));\n }\n addClass([this.wrapper], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n addClass([this.wrapper], RTL);\n }\n else {\n removeClass([this.wrapper], RTL);\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n addClass([this.wrapper], 'e-splitbtn-disabled');\n }\n else {\n removeClass([this.wrapper], 'e-splitbtn-disabled');\n }\n }\n }\n };\n /**\n * Sets the focus to SplitButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n SplitButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate$2([\n Property('')\n ], SplitButton.prototype, \"content\", void 0);\n __decorate$2([\n Property('')\n ], SplitButton.prototype, \"cssClass\", void 0);\n __decorate$2([\n Property(false)\n ], SplitButton.prototype, \"disabled\", void 0);\n __decorate$2([\n Property('')\n ], SplitButton.prototype, \"iconCss\", void 0);\n __decorate$2([\n Property('Left')\n ], SplitButton.prototype, \"iconPosition\", void 0);\n __decorate$2([\n Property(false)\n ], SplitButton.prototype, \"createPopupOnClick\", void 0);\n __decorate$2([\n Collection([], Item)\n ], SplitButton.prototype, \"items\", void 0);\n __decorate$2([\n Property('')\n ], SplitButton.prototype, \"target\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"beforeItemRender\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"beforeOpen\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"beforeClose\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"click\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"close\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"open\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"select\", void 0);\n __decorate$2([\n Event()\n ], SplitButton.prototype, \"created\", void 0);\n SplitButton = __decorate$2([\n NotifyPropertyChanges\n ], SplitButton);\n return SplitButton;\n}(DropDownButton));\n/**\n * Deferred is used to handle asynchronous operation.\n */\nvar Deferred = /** @__PURE__ @class */ (function () {\n function Deferred() {\n var _this = this;\n /**\n * Promise is an object that represents a value that may not be available yet, but will be resolved at some point in the future.\n */\n this.promise = new Promise(function (resolve, reject) {\n _this.resolve = resolve;\n _this.reject = reject;\n });\n /**\n * Defines the callback function triggers when the Deferred object is rejected.\n */\n this.catch = this.promise.catch.bind(this.promise);\n /**\n * Defines the callback function triggers when the Deferred object is resolved.\n */\n this.then = this.promise.then.bind(this.promise);\n }\n return Deferred;\n}());\n\n/**\n * Initialize ButtonGroup CSS component with specified properties.\n * ```html\n * \n * ```\n * ```typescript\n * createButtonGroup('#buttongroup', {\n * cssClass: 'e-outline',\n * buttons: [\n * { content: 'Day' },\n * { content: 'Week' },\n * { content: 'Work Week'}\n * ]\n * });\n * ```\n *\n * @param {string} selector\n * @param {CreateButtonGroupModel} options\n * @returns HTMLElement\n */\n/**\n * Creates button group.\n *\n * @param {string} selector - Specifies the selector.\n * @param {CreateButtonGroupModel} options - Specifies the button group model.\n * @param {Function} createElement - Specifies the element.\n * @returns {HTMLElement} - Button group element.\n */\nfunction createButtonGroup(selector, options, createElement$1) {\n if (options === void 0) { options = {}; }\n var child;\n var btnElem;\n var nextChild;\n var btnModel;\n if (isNullOrUndefined(createElement$1)) {\n createElement$1 = createElement;\n }\n var wrapper = document.querySelector(selector);\n addClass([wrapper], ['e-btn-group', 'e-css']);\n wrapper.setAttribute('role', 'group');\n var childs = wrapper.children;\n options.buttons = options.buttons || [];\n for (var i = 0, j = 0; j < childs.length; i++, j++) {\n child = childs[j];\n btnModel = options.buttons[i];\n if (btnModel !== null) {\n if (child.tagName === 'BUTTON') {\n btnElem = child;\n }\n else {\n btnElem = createElement$1('label');\n nextChild = childs[j + 1];\n if (nextChild) {\n wrapper.insertBefore(btnElem, nextChild);\n }\n else {\n wrapper.appendChild(btnElem);\n }\n if (child.id) {\n btnElem.setAttribute('for', child.id);\n }\n if (btnModel && btnModel.disabled) {\n child.disabled = true;\n }\n j++;\n }\n if (options.cssClass && btnModel && !btnModel.cssClass) {\n btnModel.cssClass = options.cssClass;\n }\n new Button(btnModel || {}, btnElem);\n }\n }\n return wrapper;\n}\n\nvar __extends$3 = (undefined && undefined.__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$3 = (undefined && undefined.__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};\nvar HIDESPINNER = 'e-hide-spinner';\nvar PROGRESS = 'e-progress';\nvar PROGRESSACTIVE = 'e-progress-active';\nvar CONTENTCLS = 'e-btn-content';\n/**\n * Defines the spin settings.\n */\nvar SpinSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$3(SpinSettings, _super);\n function SpinSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$3([\n Property(null)\n ], SpinSettings.prototype, \"template\", void 0);\n __decorate$3([\n Property(16)\n ], SpinSettings.prototype, \"width\", void 0);\n __decorate$3([\n Property('Left')\n ], SpinSettings.prototype, \"position\", void 0);\n return SpinSettings;\n}(ChildProperty));\n/**\n * Defines the animation settings.\n */\nvar AnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$3(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$3([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate$3([\n Property('None')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate$3([\n Property('ease')\n ], AnimationSettings.prototype, \"easing\", void 0);\n return AnimationSettings;\n}(ChildProperty));\n/**\n * The ProgressButton visualizes the progression of an operation to indicate the user\n * that a process is happening in the background with visual representation.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar ProgressButton = /** @__PURE__ @class */ (function (_super) {\n __extends$3(ProgressButton, _super);\n /**\n * Constructor for creating the widget.\n *\n * @param {ProgressButtonModel} options - Specifies progress button model\n * @param {string|HTMLButtonElement} element - Specifies element\n */\n function ProgressButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.step = 1;\n return _this;\n }\n ProgressButton.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n ProgressButton.prototype.render = function () {\n _super.prototype.render.call(this);\n this.init();\n this.wireEvents();\n this.setAria();\n this.renderComplete();\n };\n /**\n * Starts the button progress at the specified percent.\n *\n * @param {number} percent - Starts the button progress at this percent.\n * @returns {void}\n */\n ProgressButton.prototype.start = function (percent) {\n this.isPaused = false;\n this.startProgress(percent ? percent : this.percent, this.progressTime);\n };\n /**\n * Stops the button progress.\n *\n * @returns {void}\n */\n ProgressButton.prototype.stop = function () {\n this.isPaused = true;\n cancelAnimationFrame(this.timerId);\n };\n /**\n * Complete the button progress.\n *\n * @returns {void}\n */\n ProgressButton.prototype.progressComplete = function () {\n this.isPaused = false;\n this.finishProgress();\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n ProgressButton.prototype.getModuleName = function () {\n return 'progress-btn';\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n ProgressButton.prototype.destroy = function () {\n var _this = this;\n var classList = [HIDESPINNER, PROGRESSACTIVE, 'e-round-corner', 'e-' + _super.prototype.getModuleName.call(this)];\n if (this.spinSettings.position) {\n classList.push('e-spin-' + this.spinSettings.position.toLowerCase());\n }\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n this.element.innerHTML = '';\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n removeClass([this.element], classList);\n var css = this.element.getAttribute('class') ? ['aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow']\n : ['aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'class'];\n css.forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n if (this.disabled) {\n this.element.removeAttribute('disabled');\n }\n };\n ProgressButton.prototype.init = function () {\n this.element.classList.add('e-' + _super.prototype.getModuleName.call(this));\n this.setContent();\n this.createSpinner();\n if (this.enableProgress) {\n this.createProgress();\n }\n };\n ProgressButton.prototype.createSpinner = function () {\n var spinner = this.createElement('span', { className: 'e-spinner' });\n this.setSpinPosition(spinner);\n createSpinner({\n target: spinner, width: this.spinSettings.width || 16, template: this.spinSettings.template\n }, this.createElement);\n };\n ProgressButton.prototype.getSpinner = function () {\n return this.element.getElementsByClassName('e-spinner')[0];\n };\n ProgressButton.prototype.getProgress = function () {\n return this.element.getElementsByClassName(PROGRESS)[0];\n };\n ProgressButton.prototype.setSpinPosition = function (ele) {\n var position = this.spinSettings.position || 'Left';\n if (position === 'Left' || position === 'Top') {\n this.element.insertBefore(ele, this.element.getElementsByClassName(CONTENTCLS)[0]);\n }\n else {\n this.element.appendChild(ele);\n }\n this.element.classList.add('e-spin-' + position.toLowerCase());\n };\n ProgressButton.prototype.createProgress = function () {\n this.element.appendChild(this.createElement('span', { className: PROGRESS }));\n };\n ProgressButton.prototype.setContent = function () {\n var cont;\n cont = this.element.innerHTML;\n if (this.enableHtmlSanitizer) {\n cont = SanitizeHtmlHelper.sanitize(this.element.innerHTML);\n }\n this.element.innerHTML = '';\n this.element.appendChild(this.createElement('span', { className: CONTENTCLS, innerHTML: cont }));\n };\n ProgressButton.prototype.clickHandler = function () {\n if (this.element.classList.contains(PROGRESSACTIVE)) {\n return;\n }\n this.startProgress();\n };\n ProgressButton.prototype.startProgress = function (percent, progressTime) {\n var clsList = this.element.classList;\n var isVertical = clsList.contains('e-vertical');\n clsList.add(PROGRESSACTIVE);\n if (!(clsList.contains(HIDESPINNER))) {\n showSpinner(this.element.querySelector('.e-spinner'));\n }\n this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);\n this.startContAnimate();\n };\n ProgressButton.prototype.startAnimate = function (timestamp, progressTime, prevTime, percent, prevPercent, step, prevProgressTime, isVertical) {\n var _this = this;\n try {\n var timeDiff = timestamp - prevTime;\n var stepTime = this.duration * step / 100;\n var timeDiffBuffer_1 = timeDiff ? (timeDiff < stepTime ? timeDiff - stepTime : timeDiff % stepTime) : 0;\n this.progressTime = progressTime = progressTime + timeDiff - timeDiffBuffer_1;\n prevTime = timestamp - timeDiffBuffer_1;\n percent = percent + (timeDiff - timeDiffBuffer_1) / this.duration * 100;\n prevPercent = ((progressTime - prevProgressTime) % stepTime === 0 || percent === 100) ? percent : prevPercent;\n var args = { percent: prevPercent, currentDuration: progressTime, step: step };\n this.eIsVertical = isVertical;\n if (percent === 0) {\n this.trigger('begin', args, function (observedArgs) {\n _this.successCallback(observedArgs, percent, prevPercent, progressTime, prevProgressTime, timeDiffBuffer_1, prevTime);\n });\n }\n else if (percent === 100 || progressTime === this.duration) {\n this.trigger('end', args, function (observedArgs) {\n _this.successCallback(observedArgs, percent, prevPercent, progressTime, prevProgressTime, timeDiffBuffer_1, prevTime);\n });\n }\n else {\n this.trigger('progress', args, function (observedArgs) {\n _this.successCallback(observedArgs, percent, prevPercent, progressTime, prevProgressTime, timeDiffBuffer_1, prevTime);\n });\n }\n }\n catch (e) {\n cancelAnimationFrame(this.timerId);\n this.trigger('fail', e);\n }\n };\n ProgressButton.prototype.successCallback = function (args, perc, pPerc, prgTim, pPrgTim, timDif, pTim) {\n var _this = this;\n var percent = perc;\n var prevPercent = pPerc;\n var timeDiffBuffer = timDif;\n var progressTime = prgTim;\n var prevProgressTime = pPrgTim;\n var prevTime = pTim;\n var isVertical = this.eIsVertical;\n if (percent !== args.percent && args.percent !== prevPercent) {\n percent = args.percent;\n }\n this.percent = percent;\n this.step = args.step;\n if ((progressTime - prevProgressTime) % (this.duration * args.step / 100) === 0 || percent === 100) {\n this.timerId = requestAnimationFrame(function () {\n if (_this.enableProgress && _this.getProgress()) {\n _this.getProgress().style[isVertical ? 'height' : 'width'] = percent + '%';\n }\n _this.element.setAttribute('aria-valuenow', percent.toString());\n });\n prevPercent = percent;\n prevProgressTime = progressTime;\n }\n if (!this.isPaused) {\n if (progressTime < this.duration && percent < 100) {\n this.interval = window.setTimeout(function () {\n _this.startAnimate(Date.now(), progressTime, prevTime, percent, prevPercent, args.step, prevProgressTime, isVertical);\n }, (this.duration / 100) - timeDiffBuffer);\n }\n else {\n this.interval = window.setTimeout(function () {\n _this.progressTime = _this.percent = 0;\n if (_this.enableProgress && _this.getProgress()) {\n _this.getProgress().style[isVertical ? 'height' : 'width'] = '0%';\n }\n _this.element.setAttribute('aria-valuenow', '0');\n _this.hideSpin();\n }, 100);\n }\n }\n };\n ProgressButton.prototype.startContAnimate = function () {\n var _this = this;\n var ele = this.element.getElementsByClassName(CONTENTCLS)[0];\n if (this.animationSettings.effect !== 'None') {\n (new Animation({})).animate(ele, {\n duration: (this.animationSettings.duration === 0 && animationMode === 'Enable') ? 400 : this.animationSettings.duration,\n name: 'Progress' + this.animationSettings.effect,\n timingFunction: this.animationSettings.easing,\n begin: function () {\n if (_this.spinSettings.position === 'Center') {\n _this.setSpinnerSize();\n }\n },\n end: function () {\n ele.classList.add('e-animate-end');\n }\n });\n }\n else if (this.spinSettings.position === 'Center') {\n this.setSpinnerSize();\n }\n };\n ProgressButton.prototype.finishProgress = function () {\n var clsList = this.element.classList;\n var isVertical = clsList.contains('e-vertical');\n clsList.add(PROGRESSACTIVE);\n var count = 100;\n for (var i = this.percent; i < count; i++) {\n i += 10;\n if (i > 100) {\n i = 100;\n }\n if (this.enableProgress && this.getProgress()) {\n this.getProgress().style[isVertical ? 'height' : 'width'] = (this.percent < 100) ? (i + '%') : '100%';\n }\n }\n this.element.setAttribute('aria-valuenow', '0');\n this.hideSpin();\n var args = { step: this.step, currentDuration: this.progressTime, percent: 100 };\n clearTimeout(this.interval);\n this.trigger('end', args);\n this.progressTime = this.percent = 0;\n };\n ProgressButton.prototype.setSpinnerSize = function () {\n var ele = this.element.getElementsByClassName(CONTENTCLS)[0];\n var spinner = this.getSpinner();\n spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';\n spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';\n ele.classList.add('e-cont-animate');\n };\n ProgressButton.prototype.hideSpin = function () {\n var cont = this.element.getElementsByClassName(CONTENTCLS)[0];\n if (!(this.element.classList.contains(HIDESPINNER))) {\n hideSpinner(this.element.querySelector('.e-spinner'));\n }\n this.element.classList.remove(PROGRESSACTIVE);\n if (this.animationSettings.effect !== 'None') {\n cont.classList.remove('e-animate-end');\n }\n if (this.spinSettings.position === 'Center') {\n var ele = this.getSpinner();\n cont.classList.remove('e-cont-animate');\n ele.style.width = 'auto';\n ele.style.height = 'auto';\n }\n };\n ProgressButton.prototype.setIconSpan = function () {\n var cont = this.element.getElementsByClassName(CONTENTCLS)[0];\n var iconSpan = this.element.getElementsByClassName('e-btn-icon')[0];\n if (cont.childNodes[0] && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n cont.insertBefore(iconSpan, cont.childNodes[0]);\n }\n else {\n cont.appendChild(iconSpan);\n }\n };\n ProgressButton.prototype.setAria = function () {\n attributes(this.element, {\n 'aria-label': this.element.textContent + ' progress'\n });\n };\n ProgressButton.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n };\n ProgressButton.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ProgressButtonModel} newProp - Specifies new properties\n * @param {ProgressButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n ProgressButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var ele = this.element;\n var isSpinning = false;\n var clsList = this.element.querySelector('.e-spinner-pane').classList;\n if (clsList.contains('e-spin-show')) {\n isSpinning = true;\n }\n _super.prototype.onPropertyChanged.call(this, 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 'content':\n this.setContent();\n this.createSpinner();\n if (isSpinning) {\n showSpinner(this.element.querySelector('.e-spinner'));\n isSpinning = false;\n }\n if (this.enableProgress) {\n this.createProgress();\n }\n ele.setAttribute('aria-label', ele.textContent + ' progress');\n break;\n case 'iconCss':\n if (!oldProp.iconCss) {\n this.setIconSpan();\n }\n break;\n case 'iconPosition':\n this.setIconSpan();\n break;\n case 'enableProgress':\n if (newProp.enableProgress) {\n this.createProgress();\n }\n else {\n remove(this.getProgress());\n }\n break;\n case 'spinSettings':\n if (newProp.spinSettings.position) {\n ele.classList.remove('e-spin-' + oldProp.spinSettings.position.toLowerCase());\n this.setSpinPosition(this.getSpinner());\n }\n if (newProp.spinSettings.template || newProp.spinSettings.width) {\n ele.removeChild(this.getSpinner());\n this.createSpinner();\n }\n break;\n }\n }\n };\n /**\n * Sets the focus to ProgressButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n ProgressButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate$3([\n Property(false)\n ], ProgressButton.prototype, \"enableProgress\", void 0);\n __decorate$3([\n Property(2000)\n ], ProgressButton.prototype, \"duration\", void 0);\n __decorate$3([\n Property('Left')\n ], ProgressButton.prototype, \"iconPosition\", void 0);\n __decorate$3([\n Property('')\n ], ProgressButton.prototype, \"iconCss\", void 0);\n __decorate$3([\n Property(false)\n ], ProgressButton.prototype, \"disabled\", void 0);\n __decorate$3([\n Property(false)\n ], ProgressButton.prototype, \"isPrimary\", void 0);\n __decorate$3([\n Property('')\n ], ProgressButton.prototype, \"cssClass\", void 0);\n __decorate$3([\n Property('')\n ], ProgressButton.prototype, \"content\", void 0);\n __decorate$3([\n Property(false)\n ], ProgressButton.prototype, \"isToggle\", void 0);\n __decorate$3([\n Property(true)\n ], ProgressButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$3([\n Complex({}, SpinSettings)\n ], ProgressButton.prototype, \"spinSettings\", void 0);\n __decorate$3([\n Complex({}, AnimationSettings)\n ], ProgressButton.prototype, \"animationSettings\", void 0);\n __decorate$3([\n Event()\n ], ProgressButton.prototype, \"created\", void 0);\n __decorate$3([\n Event()\n ], ProgressButton.prototype, \"begin\", void 0);\n __decorate$3([\n Event()\n ], ProgressButton.prototype, \"progress\", void 0);\n __decorate$3([\n Event()\n ], ProgressButton.prototype, \"end\", void 0);\n __decorate$3([\n Event()\n ], ProgressButton.prototype, \"fail\", void 0);\n ProgressButton = __decorate$3([\n NotifyPropertyChanges\n ], ProgressButton);\n return ProgressButton;\n}(Button));\n\nexport { AnimationSettings, Deferred, DropDownButton, Item, ProgressButton, SpinSettings, SplitButton, createButtonGroup, getModel, setBlankIconStyle, upDownKeyHandler };\n","import { isNullOrUndefined, createElement, addClass, attributes, removeClass, formatUnit, remove, detach, classList, closest, getValue, setValue, L10n, getUniqueID, Internationalization, EventHandler, Browser, merge, getNumericObject, Property, Event, NotifyPropertyChanges, Component, extend, ChildProperty, setStyleAttribute, SanitizeHtmlHelper, initializeCSPTemplate, Collection, Complex, onIntlChange, select, selectAll, Base, KeyboardEvents, Ajax, append, Animation, compile, rippleEffect, getInstance } from '@syncfusion/ej2-base';\nimport { Tooltip, getZindexPartial, createSpinner, showSpinner, hideSpinner, isCollide, Popup } from '@syncfusion/ej2-popups';\nimport { SplitButton, Deferred, getModel } from '@syncfusion/ej2-splitbuttons';\n\n/* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\nvar CLASSNAMES = {\n RTL: 'e-rtl',\n DISABLE: 'e-disabled',\n INPUT: 'e-input',\n TEXTAREA: 'e-multi-line-input',\n INPUTGROUP: 'e-input-group',\n FLOATINPUT: 'e-float-input',\n FLOATLINE: 'e-float-line',\n FLOATTEXT: 'e-float-text',\n FLOATTEXTCONTENT: 'e-float-text-content',\n CLEARICON: 'e-clear-icon',\n CLEARICONHIDE: 'e-clear-icon-hide',\n LABELTOP: 'e-label-top',\n LABELBOTTOM: 'e-label-bottom',\n NOFLOATLABEL: 'e-no-float-label',\n INPUTCUSTOMTAG: 'e-input-custom-tag',\n FLOATCUSTOMTAG: 'e-float-custom-tag'\n};\n/**\n * Defines the constant attributes for the input element container.\n */\nvar containerAttributes = ['title', 'style', 'class'];\n/**\n * Defines the constant focus class for the input element.\n */\nvar TEXTBOX_FOCUS = 'e-input-focus';\n/**\n * Base for Input creation through util methods.\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nvar Input;\n(function (Input) {\n var floatType;\n var isBindClearAction = true;\n /**\n * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.\n * ```\n * E.g : Input.createInput({ element: element, floatLabelType : \"Auto\", properties: { placeholder: 'Search' } });\n * ```\n *\n */\n function createInput(args, internalCreateElement) {\n args.element.__eventHandlers = {};\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var inputObject = { container: null, buttons: [], clearButton: null };\n floatType = args.floatLabelType;\n isBindClearAction = args.bindClearAction;\n if (isNullOrUndefined(args.floatLabelType) || args.floatLabelType === 'Never') {\n inputObject.container = createInputContainer(args, CLASSNAMES.INPUTGROUP, CLASSNAMES.INPUTCUSTOMTAG, 'span', makeElement);\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n addClass([args.element], CLASSNAMES.INPUT);\n inputObject.container.appendChild(args.element);\n }\n else {\n createFloatingInput(args, inputObject, makeElement);\n }\n bindInitialEvent(args);\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) &&\n args.properties.showClearButton) {\n setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);\n inputObject.clearButton.setAttribute('role', 'button');\n if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([inputObject.container], CLASSNAMES.INPUTGROUP);\n }\n }\n if (!isNullOrUndefined(args.buttons)) {\n for (var i = 0; i < args.buttons.length; i++) {\n inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container, makeElement));\n }\n }\n if (!isNullOrUndefined(args.element) && args.element.tagName === 'TEXTAREA') {\n addClass([inputObject.container], CLASSNAMES.TEXTAREA);\n }\n validateInputType(inputObject.container, args.element);\n inputObject = setPropertyValue(args, inputObject);\n createSpanElement(inputObject.container, makeElement);\n return inputObject;\n }\n Input.createInput = createInput;\n function bindFocusEventHandler(args) {\n var parent = getParentNode(args.element);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || parent.classList.contains('e-filled')) {\n parent.classList.add('e-input-focus');\n }\n if (args.floatLabelType !== 'Never') {\n setTimeout(function () {\n Input.calculateWidth(args.element, parent);\n }, 80);\n }\n }\n function bindBlurEventHandler(args) {\n var parent = getParentNode(args.element);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || parent.classList.contains('e-filled')) {\n parent.classList.remove('e-input-focus');\n }\n if (args.floatLabelType !== 'Never') {\n setTimeout(function () {\n Input.calculateWidth(args.element, parent);\n }, 80);\n }\n }\n function bindInputEventHandler(args) {\n checkInputValue(args.floatLabelType, args.element);\n }\n function bindInitialEvent(args) {\n checkInputValue(args.floatLabelType, args.element);\n var focusHandler = function () { return bindFocusEventHandler(args); };\n var blurHandler = function () { return bindBlurEventHandler(args); };\n var inputHandler = function () { return bindInputEventHandler(args); };\n args.element.addEventListener('focus', focusHandler);\n args.element.addEventListener('blur', blurHandler);\n args.element.addEventListener('input', inputHandler);\n args.element.__eventHandlers['inputFocusHandler'] = { focusHandler: focusHandler };\n args.element.__eventHandlers['inputBlurHandler'] = { blurHandler: blurHandler };\n args.element.__eventHandlers['inputHandler'] = { inputHandler: inputHandler };\n }\n Input.bindInitialEvent = bindInitialEvent;\n function unbindInitialEvent(args) {\n if (!isNullOrUndefined(args.element)) {\n if (!isNullOrUndefined(args.element.__eventHandlers)) {\n if (!isNullOrUndefined(args.element.__eventHandlers['inputFocusHandler'])\n && !isNullOrUndefined(args.element.__eventHandlers['inputBlurHandler'])\n && !isNullOrUndefined(args.element.__eventHandlers['inputHandler'])) {\n var focusHandler_1 = args.element.__eventHandlers['inputFocusHandler'].focusHandler;\n var blurHandler_1 = args.element.__eventHandlers['inputBlurHandler'].blurHandler;\n var inputHandler_1 = args.element.__eventHandlers['inputHandler'].inputHandler;\n args.element.removeEventListener('focus', focusHandler_1);\n args.element.removeEventListener('blur', blurHandler_1);\n args.element.removeEventListener('input', inputHandler_1);\n // Clean up stored bound functions\n delete args.element.__eventHandlers['inputFocusHandler'];\n delete args.element.__eventHandlers['inputBlurHandler'];\n delete args.element.__eventHandlers['inputHandler'];\n }\n }\n }\n }\n function checkInputValue(floatLabelType, inputElement) {\n var inputValue = inputElement.value;\n var inputParent = inputElement.parentElement;\n var grandParent = inputParent && inputParent.parentElement;\n if (inputValue !== '' && !isNullOrUndefined(inputValue)) {\n if (inputParent && inputParent.classList.contains('e-input-group')) {\n inputParent.classList.add('e-valid-input');\n }\n else if (grandParent && grandParent.classList.contains('e-input-group')) {\n grandParent.classList.add('e-valid-input');\n }\n }\n else if (floatLabelType !== 'Always') {\n if (inputParent && inputParent.classList.contains('e-input-group')) {\n inputParent.classList.remove('e-valid-input');\n }\n else if (grandParent && grandParent.classList.contains('e-input-group')) {\n grandParent.classList.remove('e-valid-input');\n }\n }\n }\n function _focusFn() {\n var label = getParentNode(this).getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function _blurFn() {\n var parent = getParentNode(this);\n if ((parent.getElementsByTagName('textarea')[0]) ? parent.getElementsByTagName('textarea')[0].value === '' :\n parent.getElementsByTagName('input')[0].value === '') {\n var label = parent.getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function wireFloatingEvents(element) {\n element.addEventListener('focus', _focusFn);\n element.addEventListener('blur', _blurFn);\n }\n Input.wireFloatingEvents = wireFloatingEvents;\n function unwireFloatingEvents(element) {\n if (!isNullOrUndefined(element)) {\n element.removeEventListener('focus', _focusFn);\n element.removeEventListener('blur', _blurFn);\n }\n }\n function inputEventHandler(args) {\n validateLabel(args.element, args.floatLabelType);\n }\n function blurEventHandler(args) {\n validateLabel(args.element, args.floatLabelType);\n }\n function createFloatingInput(args, inputObject, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (args.floatLabelType === 'Auto') {\n wireFloatingEvents(args.element);\n }\n if (isNullOrUndefined(inputObject.container)) {\n inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div', makeElement);\n inputObject.container.classList.add(CLASSNAMES.INPUTGROUP);\n if (args.element.parentNode) {\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n }\n }\n else {\n if (!isNullOrUndefined(args.customTag)) {\n inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG);\n }\n inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);\n }\n var floatLinelement = makeElement('span', { className: CLASSNAMES.FLOATLINE });\n var floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });\n if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {\n floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');\n attributes(args.element, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.element.placeholder);\n args.element.removeAttribute('placeholder');\n }\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.placeholder) &&\n args.properties.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.properties.placeholder);\n }\n if (!floatLabelElement.innerText) {\n inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL);\n }\n if (inputObject.container.classList.contains('e-float-icon-left')) {\n var inputWrap = inputObject.container.querySelector('.e-input-in-wrap');\n inputWrap.appendChild(args.element);\n inputWrap.appendChild(floatLinelement);\n inputWrap.appendChild(floatLabelElement);\n }\n else {\n inputObject.container.appendChild(args.element);\n inputObject.container.appendChild(floatLinelement);\n inputObject.container.appendChild(floatLabelElement);\n }\n updateLabelState(args.element.value, floatLabelElement);\n if (args.floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM);\n }\n addClass([floatLabelElement], CLASSNAMES.LABELTOP);\n }\n if (args.floatLabelType === 'Auto') {\n var inputFloatHandler = function () { return inputEventHandler(args); };\n var blurFloatHandler = function () { return blurEventHandler(args); };\n // Add event listeners using the defined functions\n args.element.addEventListener('input', inputFloatHandler);\n args.element.addEventListener('blur', blurFloatHandler);\n // Store the event handler functions to remove them later\n args.element.__eventHandlers['floatInputHandler'] = { inputFloatHandler: inputFloatHandler };\n args.element.__eventHandlers['floatBlurHandler'] = { blurFloatHandler: blurFloatHandler };\n }\n else {\n unWireFloatLabelEvents(args);\n }\n if (!isNullOrUndefined(args.element.getAttribute('id'))) {\n floatLabelElement.setAttribute('for', args.element.getAttribute('id'));\n }\n }\n function unWireFloatLabelEvents(args) {\n if (!isNullOrUndefined(args.element) &&\n !isNullOrUndefined(args.element.__eventHandlers)\n && !isNullOrUndefined(args.element.__eventHandlers['floatInputHandler'])\n && !isNullOrUndefined(args.element.__eventHandlers['floatBlurHandler'])) {\n var inputFloatHandler = args.element.__eventHandlers['floatInputHandler'].inputFloatHandler;\n var blurFloatHandler = args.element.__eventHandlers['floatBlurHandler'].blurFloatHandler;\n // Remove the event listeners using the defined functions\n args.element.removeEventListener('input', inputFloatHandler);\n args.element.removeEventListener('blur', blurFloatHandler);\n // Clean up stored event handler functions\n delete args.element.__eventHandlers['floatInputHandler'];\n delete args.element.__eventHandlers['floatBlurHandler'];\n }\n }\n function checkFloatLabelType(type, container) {\n if (type === 'Always' && container.classList.contains('e-outline')) {\n container.classList.add('e-valid-input');\n }\n }\n function setPropertyValue(args, inputObject) {\n if (!isNullOrUndefined(args.properties)) {\n for (var _i = 0, _a = Object.keys(args.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n setCssClass(args.properties.cssClass, [inputObject.container]);\n checkFloatLabelType(args.floatLabelType, inputObject.container);\n break;\n case 'enabled':\n setEnabled(args.properties.enabled, args.element, args.floatLabelType, inputObject.container);\n break;\n case 'enableRtl':\n setEnableRtl(args.properties.enableRtl, [inputObject.container]);\n break;\n case 'placeholder':\n setPlaceholder(args.properties.placeholder, args.element);\n break;\n case 'readonly':\n setReadonly(args.properties.readonly, args.element);\n break;\n }\n }\n }\n return inputObject;\n }\n function updateIconState(value, button, readonly) {\n if (!isNullOrUndefined(button)) {\n if (value && !readonly) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n }\n function updateLabelState(value, label, element) {\n if (element === void 0) { element = null; }\n if (value) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n else {\n var isNotFocused = element != null ? element !== document.activeElement : true;\n if (isNotFocused) {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function getParentNode(element) {\n var parentNode = isNullOrUndefined(element.parentNode) ? element\n : element.parentNode;\n if (parentNode && parentNode.classList.contains('e-input-in-wrap')) {\n parentNode = parentNode.parentNode;\n }\n return parentNode;\n }\n /**\n * To create clear button.\n */\n function createClearButton(element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = makeElement('span', { className: CLASSNAMES.CLEARICON });\n var container = inputObject.container;\n if (!isNullOrUndefined(initial)) {\n container.appendChild(button);\n }\n else {\n var baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ?\n inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element;\n baseElement.insertAdjacentElement('afterend', button);\n }\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n wireClearBtnEvents(element, button);\n button.setAttribute('aria-label', 'close');\n return button;\n }\n function clickHandler(event, element, button) {\n if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {\n event.preventDefault();\n if (element !== document.activeElement) {\n element.focus();\n }\n element.value = '';\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n function inputHandler(element, button) {\n updateIconState(element.value, button);\n }\n function focusHandler(element, button) {\n updateIconState(element.value, button, element.readOnly);\n }\n function blurHandler(element, button) {\n setTimeout(function () {\n if (!isNullOrUndefined(button)) {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n button = !isNullOrUndefined(element) && element.classList.contains('e-combobox') ? null : button;\n }\n }, 200);\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function wireClearBtnEvents(element, button, container) {\n if (isBindClearAction === undefined || isBindClearAction) {\n var clickHandlerEvent = function (e) { return clickHandler(e, element, button); };\n button.addEventListener('click', clickHandlerEvent);\n element.__eventHandlers['clearClickHandler'] = { clickHandlerEvent: clickHandlerEvent };\n }\n var inputHandlerEvent = function () { return inputHandler(element, button); };\n var focusHandlerEvent = function () { return focusHandler(element, button); };\n var blurHandlerEvent = function () { return blurHandler(element, button); };\n element.addEventListener('input', inputHandlerEvent);\n element.addEventListener('focus', focusHandlerEvent);\n element.addEventListener('blur', blurHandlerEvent);\n // Store the bound functions to remove them later\n element.__eventHandlers['clearInputHandler'] = { inputHandlerEvent: inputHandlerEvent };\n element.__eventHandlers['clearFocusHandler'] = { focusHandlerEvent: focusHandlerEvent };\n element.__eventHandlers['clearBlurHandler'] = { blurHandlerEvent: blurHandlerEvent };\n }\n Input.wireClearBtnEvents = wireClearBtnEvents;\n function unWireClearBtnEvents(element, button) {\n if (!isNullOrUndefined(element) &&\n !isNullOrUndefined(element.__eventHandlers)) {\n if (!isNullOrUndefined(element.__eventHandlers['clearClickHandler'])) {\n var clickHandlerEvent = element.__eventHandlers['clearClickHandler'].clickHandlerEvent;\n if (isBindClearAction === undefined || isBindClearAction) {\n if (!isNullOrUndefined(button)) {\n button.removeEventListener('click', clickHandlerEvent);\n }\n }\n delete element.__eventHandlers['clearClickHandler'];\n }\n if (!isNullOrUndefined(element.__eventHandlers['clearInputHandler'])\n && !isNullOrUndefined(element.__eventHandlers['clearFocusHandler'])\n && !isNullOrUndefined(element.__eventHandlers['clearBlurHandler'])) {\n var inputHandlerEvent = element.__eventHandlers['clearInputHandler'].inputHandlerEvent;\n var focusHandlerEvent = element.__eventHandlers['clearFocusHandler'].focusHandlerEvent;\n var blurHandlerEvent = element.__eventHandlers['clearBlurHandler'].blurHandlerEvent;\n element.removeEventListener('input', inputHandlerEvent);\n element.removeEventListener('focus', focusHandlerEvent);\n element.removeEventListener('blur', blurHandlerEvent);\n // Clean up stored Event functions\n delete element.__eventHandlers['clearInputHandler'];\n delete element.__eventHandlers['clearFocusHandler'];\n delete element.__eventHandlers['clearBlurHandler'];\n }\n }\n }\n function destroy(args, button) {\n if (button === void 0) { button = null; }\n unbindInitialEvent(args);\n if (args.floatLabelType === 'Auto') {\n unWireFloatLabelEvents(args);\n }\n if (args.properties.showClearButton) {\n unWireClearBtnEvents(args.element, button);\n }\n if (!isNullOrUndefined(args.buttons)) {\n _internalRipple(false, null, args.buttons);\n }\n unwireFloatingEvents(args.element);\n if (!isNullOrUndefined(args.element)) {\n delete args.element.__eventHandlers;\n if (args.element.classList.contains(CLASSNAMES.INPUT)) {\n args.element.classList.remove(CLASSNAMES.INPUT);\n }\n }\n }\n Input.destroy = destroy;\n function validateLabel(element, floatLabelType) {\n var parent = getParentNode(element);\n if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {\n var label = getParentNode(element).getElementsByClassName('e-float-text')[0];\n updateLabelState(element.value, label, element);\n }\n }\n /**\n * To create input box contianer.\n */\n function createInputContainer(args, className, tagClass, tag, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var container;\n if (!isNullOrUndefined(args.customTag)) {\n container = makeElement(args.customTag, { className: className });\n container.classList.add(tagClass);\n }\n else {\n container = makeElement(tag, { className: className });\n }\n container.classList.add('e-control-wrapper');\n return container;\n }\n function encodePlaceHolder(placeholder) {\n var result = '';\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var spanEle = document.createElement('span');\n spanEle.innerHTML = '';\n var hiddenInput = (spanEle.children[0]);\n result = hiddenInput.placeholder;\n }\n return result;\n }\n /**\n * Sets the value to the input element.\n * ```\n * E.g : Input.setValue('content', element, \"Auto\", true );\n * ```\n *\n * @param {string} value - Specify the value of the input element.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the specified value is updated.\n * @param {string} floatLabelType - Specify the float label type of the input element.\n * @param {boolean} clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input.\n */\n function setValue(value, element, floatLabelType, clearButton) {\n element.value = value;\n if (floatLabelType !== 'Never') {\n calculateWidth(element, element.parentElement);\n }\n if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {\n validateLabel(element, floatLabelType);\n }\n if (!isNullOrUndefined(clearButton) && clearButton) {\n var parentElement = getParentNode(element);\n if (!isNullOrUndefined(parentElement)) {\n var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0];\n if (!isNullOrUndefined(button)) {\n if (element.value && !isNullOrUndefined(parentElement) && parentElement.classList.contains('e-input-focus')) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n }\n }\n checkInputValue(floatLabelType, element);\n }\n Input.setValue = setValue;\n /**\n * Sets the single or multiple cssClass to wrapper of input element.\n * ```\n * E.g : Input.setCssClass('e-custom-class', [element]);\n * ```\n *\n * @param {string} cssClass - Css class names which are needed to add.\n * @param {Element[] | NodeList} elements - The elements which are needed to add / remove classes.\n * @param {string} oldClass\n * - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter.\n */\n function setCssClass(cssClass, elements, oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass.split(' '));\n }\n if (!isNullOrUndefined(cssClass) && cssClass !== '') {\n addClass(elements, cssClass.split(' '));\n }\n }\n Input.setCssClass = setCssClass;\n /**\n * Set the width to the placeholder when it overflows on the button such as spinbutton, clearbutton, icon etc\n * ```\n * E.g : Input.calculateWidth(element, container);\n * ```\n *\n * @param {any} element - Input element which is need to add.\n * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width\n */\n function calculateWidth(element, container, moduleName) {\n if (moduleName !== 'multiselect' && !_isElementVisible(element)) {\n return;\n }\n var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);\n if (!isNullOrUndefined(container) && !isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {\n if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {\n container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');\n }\n if (elementWidth < container.getElementsByClassName('e-float-text-content')[0].clientWidth || elementWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {\n container.getElementsByClassName('e-float-text-content')[0].classList.add('e-float-text-overflow');\n }\n }\n }\n Input.calculateWidth = calculateWidth;\n /**\n * Set the width to the wrapper of input element.\n * ```\n * E.g : Input.setWidth('200px', container);\n * ```\n *\n * @param {number | string} width - Width value which is need to add.\n * @param {HTMLElement} container - The element on which the width is need to add.\n */\n function setWidth(width, container) {\n if (typeof width === 'number') {\n container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n calculateWidth(container.firstChild, container);\n }\n Input.setWidth = setWidth;\n /**\n * Set the placeholder attribute to the input element.\n * ```\n * E.g : Input.setPlaceholder('Search here', element);\n * ```\n *\n * @param {string} placeholder - Placeholder value which is need to add.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the placeholder is need to add.\n */\n function setPlaceholder(placeholder, element) {\n placeholder = encodePlaceHolder(placeholder);\n var parentElement = getParentNode(element);\n if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var floatTextContent = parentElement.getElementsByClassName('e-float-text-content')[0];\n if (floatTextContent && floatTextContent.children[0]) {\n floatTextContent.children[0].textContent = placeholder;\n }\n else {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;\n }\n parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);\n element.removeAttribute('placeholder');\n }\n else {\n parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);\n var floatTextContent = parentElement.getElementsByClassName('e-float-text-content')[0];\n if (floatTextContent) {\n floatTextContent.children[0].textContent = '';\n }\n else {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n }\n }\n else {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n attributes(element, { 'placeholder': placeholder });\n }\n else {\n element.removeAttribute('placeholder');\n }\n }\n }\n Input.setPlaceholder = setPlaceholder;\n /**\n * Set the read only attribute to the input element\n * ```\n * E.g : Input.setReadonly(true, element);\n * ```\n *\n * @param {boolean} isReadonly\n * - Boolean value to specify whether to set read only. Setting \"True\" value enables read only.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - The element which is need to enable read only.\n */\n function setReadonly(isReadonly, element, floatLabelType) {\n if (isReadonly) {\n attributes(element, { readonly: '' });\n }\n else {\n element.removeAttribute('readonly');\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setReadonly = setReadonly;\n /**\n * Displays the element direction from right to left when its enabled.\n * ```\n * E.g : Input.setEnableRtl(true, [inputObj.container]);\n * ```\n *\n * @param {boolean} isRtl\n * - Boolean value to specify whether to set RTL. Setting \"True\" value enables the RTL mode.\n * @param {Element[] | NodeList} elements\n * - The elements that are needed to enable/disable RTL.\n */\n function setEnableRtl(isRtl, elements) {\n if (isRtl) {\n addClass(elements, CLASSNAMES.RTL);\n }\n else {\n removeClass(elements, CLASSNAMES.RTL);\n }\n }\n Input.setEnableRtl = setEnableRtl;\n /**\n * Enables or disables the given input element.\n * ```\n * E.g : Input.setEnabled(false, element);\n * ```\n *\n * @param {boolean} isEnable\n * - Boolean value to specify whether to enable or disable.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - Element to be enabled or disabled.\n */\n function setEnabled(isEnable, element, floatLabelType, inputContainer) {\n var disabledAttrs = { 'disabled': '', 'aria-disabled': 'true' };\n var considerWrapper = isNullOrUndefined(inputContainer) ? false : true;\n if (isEnable) {\n element.classList.remove(CLASSNAMES.DISABLE);\n removeAttributes(disabledAttrs, element);\n if (considerWrapper) {\n removeClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n else {\n element.classList.add(CLASSNAMES.DISABLE);\n addAttributes(disabledAttrs, element);\n if (considerWrapper) {\n addClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setEnabled = setEnabled;\n function setClearButton(isClear, element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (isClear) {\n inputObject.clearButton = createClearButton(element, inputObject, initial, makeElement);\n }\n else {\n remove(inputObject.clearButton);\n inputObject.clearButton = null;\n }\n }\n Input.setClearButton = setClearButton;\n /**\n * Removing the multiple attributes from the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.removeAttributes({ 'disabled': 'disabled', 'aria-disabled': 'true' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which are need to removed from the element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be removed.\n */\n function removeAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n else {\n element.removeAttribute(key);\n }\n }\n }\n Input.removeAttributes = removeAttributes;\n /**\n * Adding the multiple attributes to the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.addAttributes({ 'id': 'inputpopup' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which is added to element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be added.\n */\n function addAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[\"\" + key];\n }\n else {\n element.setAttribute(key, attrs[\"\" + key]);\n }\n }\n }\n Input.addAttributes = addAttributes;\n function removeFloating(input) {\n var container = input.container;\n if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n var inputEle = container.querySelector('textarea') ? container.querySelector('textarea') :\n container.querySelector('input');\n var placeholder = container.querySelector('.' + CLASSNAMES.FLOATTEXT).textContent;\n var clearButton = container.querySelector('.e-clear-icon') !== null;\n detach(container.querySelector('.' + CLASSNAMES.FLOATLINE));\n detach(container.querySelector('.' + CLASSNAMES.FLOATTEXT));\n classList(container, [CLASSNAMES.INPUTGROUP], [CLASSNAMES.FLOATINPUT]);\n unwireFloatingEvents(inputEle);\n attributes(inputEle, { 'placeholder': placeholder });\n inputEle.classList.add(CLASSNAMES.INPUT);\n if (!clearButton && inputEle.tagName === 'INPUT') {\n inputEle.removeAttribute('required');\n }\n }\n }\n Input.removeFloating = removeFloating;\n function addFloating(input, type, placeholder, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var container = closest(input, '.' + CLASSNAMES.INPUTGROUP);\n floatType = type;\n var customTag = container.tagName;\n customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;\n var args = { element: input, floatLabelType: type,\n customTag: customTag, properties: { placeholder: placeholder } };\n if (type !== 'Never') {\n var iconEle = container.querySelector('.e-clear-icon');\n var inputObj = { container: container };\n input.classList.remove(CLASSNAMES.INPUT);\n createFloatingInput(args, inputObj, makeElement);\n createSpanElement(inputObj.container, makeElement);\n calculateWidth(args.element, inputObj.container);\n var isPrependIcon = container.classList.contains('e-float-icon-left');\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n var inputWrap = container.querySelector('.e-input-in-wrap');\n iconEle = inputWrap.querySelector('.e-input-group-icon');\n }\n else {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n }\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n }\n else {\n var floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE);\n var floatText = container.querySelector('.' + CLASSNAMES.FLOATTEXT);\n var wrapper = isPrependIcon ? container.querySelector('.e-input-in-wrap') : container;\n wrapper.insertBefore(input, iconEle);\n wrapper.insertBefore(floatLine, iconEle);\n wrapper.insertBefore(floatText, iconEle);\n }\n }\n else {\n unWireFloatLabelEvents(args);\n }\n checkFloatLabelType(type, input.parentElement);\n }\n Input.addFloating = addFloating;\n /**\n * Create the span inside the label and add the label text into the span textcontent\n * ```\n * E.g : Input.createSpanElement(inputObject, makeElement);\n * ```\n *\n * @param {Element} inputObject\n * - Element which is need to get the label\n * @param {createElementParams} makeElement\n * - Element which is need to create the span\n */\n function createSpanElement(inputObject, makeElement) {\n if (inputObject.classList.contains('e-outline') && inputObject.getElementsByClassName('e-float-text')[0]) {\n var labelSpanElement = makeElement('span', { className: CLASSNAMES.FLOATTEXTCONTENT });\n labelSpanElement.innerHTML = inputObject.getElementsByClassName('e-float-text')[0].innerHTML;\n inputObject.getElementsByClassName('e-float-text')[0].innerHTML = '';\n inputObject.getElementsByClassName('e-float-text')[0].appendChild(labelSpanElement);\n }\n }\n Input.createSpanElement = createSpanElement;\n /**\n * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.\n * ```\n * E.g : Input.setRipple(true, [inputObjects]);\n * ```\n *\n * @param {boolean} isRipple\n * - Boolean value to specify whether to enable the ripple effect.\n * @param {InputObject[]} inputObj\n * - Specify the collection of input objects.\n */\n function setRipple(isRipple, inputObj) {\n for (var i = 0; i < inputObj.length; i++) {\n _internalRipple(isRipple, inputObj[parseInt(i.toString(), 10)].container);\n }\n }\n Input.setRipple = setRipple;\n function _internalRipple(isRipple, container, button) {\n var argsButton = [];\n argsButton.push(button);\n var buttons = isNullOrUndefined(button) ?\n container.querySelectorAll('.e-input-group-icon') : argsButton;\n if (isRipple && buttons.length > 0) {\n for (var index = 0; index < buttons.length; index++) {\n buttons[parseInt(index.toString(), 10)].addEventListener('mousedown', _onMouseDownRipple, false);\n buttons[parseInt(index.toString(), 10)].addEventListener('mouseup', _onMouseUpRipple, false);\n }\n }\n else if (buttons.length > 0) {\n for (var index = 0; index < buttons.length; index++) {\n buttons[parseInt(index.toString(), 10)].removeEventListener('mousedown', _onMouseDownRipple, this);\n buttons[parseInt(index.toString(), 10)].removeEventListener('mouseup', _onMouseUpRipple, this);\n }\n }\n }\n function _onMouseRipple(container, button) {\n if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) {\n button.classList.add('e-input-btn-ripple');\n }\n }\n function _isElementVisible(element) {\n if (!element) {\n return false;\n }\n // Check if the element or any of its parents are hidden using display: none\n var currentElement = element;\n while (currentElement && currentElement !== document.body) {\n var style = window.getComputedStyle(currentElement);\n if (style.display === 'none') {\n return false;\n }\n currentElement = currentElement.parentElement;\n }\n // If none of the elements have display: none, the element is considered visible\n return true;\n }\n function _onMouseDownRipple() {\n var ele = this;\n var parentEle = this.parentElement;\n while (!parentEle.classList.contains('e-input-group')) {\n parentEle = parentEle.parentElement;\n }\n _onMouseRipple(parentEle, ele);\n }\n function _onMouseUpRipple() {\n var ele = this;\n setTimeout(function () {\n ele.classList.remove('e-input-btn-ripple');\n }, 500);\n }\n function createIconEle(iconClass, makeElement) {\n var button = makeElement('span', { className: iconClass });\n button.classList.add('e-input-group-icon');\n return button;\n }\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.addIcon('append', 'e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} position - Specify the icon placement on the input.Possible values are append and prepend.\n * @param {string | string[]} icons - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} input - The inputElement on which created span element is going to prepend.\n */\n function addIcon(position, icons, container, input, internalCreate) {\n var result = typeof (icons) === 'string' ? icons.split(',')\n : icons;\n if (position.toLowerCase() === 'append') {\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var icon = result_1[_i];\n appendSpan(icon, container, internalCreate);\n }\n }\n else {\n for (var _a = 0, result_2 = result; _a < result_2.length; _a++) {\n var icon = result_2[_a];\n prependSpan(icon, container, input, internalCreate);\n }\n }\n if (container.getElementsByClassName('e-input-group-icon')[0] && container.getElementsByClassName('e-float-text-overflow')[0]) {\n container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n }\n Input.addIcon = addIcon;\n /**\n * Creates a new span element with the given icons added and prepend it in input element.\n * ```\n * E.g : Input.prependSpan('e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} inputElement - The inputElement on which created span element is going to prepend.\n */\n function prependSpan(iconClass, container, inputElement, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = createIconEle(iconClass, makeElement);\n container.classList.add('e-float-icon-left');\n var innerWrapper = container.querySelector('.e-input-in-wrap');\n if (isNullOrUndefined(innerWrapper)) {\n innerWrapper = makeElement('span', { className: 'e-input-in-wrap' });\n inputElement.parentNode.insertBefore(innerWrapper, inputElement);\n var result = container.querySelectorAll(inputElement.tagName + ' ~ *');\n innerWrapper.appendChild(inputElement);\n for (var i = 0; i < result.length; i++) {\n var element = result[parseInt(i.toString(), 10)];\n var parentElement = innerWrapper.parentElement;\n if (!(element.classList.contains('e-float-line')) || (!(parentElement && parentElement.classList.contains('e-filled')) && parentElement)) {\n innerWrapper.appendChild(element);\n }\n }\n }\n innerWrapper.parentNode.insertBefore(button, innerWrapper);\n _internalRipple(true, container, button);\n return button;\n }\n Input.prependSpan = prependSpan;\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.appendSpan('e-icon-spin', inputObj.container);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n */\n function appendSpan(iconClass, container, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = createIconEle(iconClass, makeElement);\n var wrap = (container.classList.contains('e-float-icon-left')) ? container.querySelector('.e-input-in-wrap') :\n container;\n wrap.appendChild(button);\n _internalRipple(true, container, button);\n return button;\n }\n Input.appendSpan = appendSpan;\n function validateInputType(containerElement, input) {\n if (input.type === 'hidden') {\n containerElement.classList.add('e-hidden');\n }\n else if (containerElement.classList.contains('e-hidden')) {\n containerElement.classList.remove('e-hidden');\n }\n }\n Input.validateInputType = validateInputType;\n function updateHTMLAttributesToElement(htmlAttributes, element) {\n if (!isNullOrUndefined(htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttributes.indexOf(key) < 0) {\n element.setAttribute(key, htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n Input.updateHTMLAttributesToElement = updateHTMLAttributesToElement;\n function updateCssClass(newClass, oldClass, container) {\n setCssClass(getInputValidClassList(newClass), [container], getInputValidClassList(oldClass));\n }\n Input.updateCssClass = updateCssClass;\n function getInputValidClassList(inputClassName) {\n var result = inputClassName;\n if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {\n result = (inputClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n }\n Input.getInputValidClassList = getInputValidClassList;\n function updateHTMLAttributesToWrapper(htmlAttributes, container) {\n if (!isNullOrUndefined(htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttributes.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValues = this.getInputValidClassList(htmlAttributes[\"\" + key]);\n if (updatedClassValues !== '') {\n addClass([container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var setStyle = container.getAttribute(key);\n setStyle = !isNullOrUndefined(setStyle) ? (setStyle + htmlAttributes[\"\" + key]) :\n htmlAttributes[\"\" + key];\n container.setAttribute(key, setStyle);\n }\n else {\n container.setAttribute(key, htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n }\n Input.updateHTMLAttributesToWrapper = updateHTMLAttributesToWrapper;\n function isBlank(inputString) {\n return (!inputString || /^\\s*$/.test(inputString));\n }\n Input.isBlank = isBlank;\n})(Input || (Input = {}));\n/* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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};\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nvar DECIMALSEPARATOR = '.';\nvar COMPONENT = 'e-numerictextbox';\nvar CONTROL = 'e-control';\nvar NUMERIC_FOCUS = 'e-input-focus';\nvar HIDDENELEMENT = 'e-numeric-hidden';\nvar wrapperAttributes = ['title', 'style', 'class'];\nvar selectionTimeOut = 0;\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @__PURE__ @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function NumericTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.preventChange = false;\n _this.isDynamicChange = false;\n _this.numericOptions = options;\n return _this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id' && attributeName !== 'class') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n else if (attributeName === 'class') {\n input.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off' });\n var localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('numerictextbox'));\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n this.wireEvents();\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder') && !this.element.hasAttribute('aria-label')) {\n this.element.setAttribute('aria-label', 'numerictextbox');\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n }\n };\n NumericTextBox.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'aria-label': 'hidden', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n if (this.isAngular && this.angularTagName === 'EJS-NUMERICTEXTBOX' && this.cloneElement.id.length > 0) {\n attributes(this.hiddenInput, { 'name': this.cloneElement.id });\n }\n else {\n attributes(this.hiddenInput, { 'name': this.inputName });\n }\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n NumericTextBox.prototype.updateDataAttribute = function (isDynamic) {\n var attr = {};\n if (!isDynamic) {\n for (var a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[\"\" + key]);\n }\n }\n };\n NumericTextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n };\n NumericTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n };\n NumericTextBox.prototype.getNumericValidClassList = function (numericClassName) {\n var result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[\"\" + pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n var numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[\"\" + pro]) :\n this.htmlAttributes[\"\" + pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n }\n };\n NumericTextBox.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n if (this.min !== -(Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemin': this.min.toString() });\n }\n if (this.max !== (Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemax': this.max.toString() });\n }\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.resetFormHandler = function () {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n };\n NumericTextBox.prototype.setSpinButton = function () {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n this.inputValue = (isNullOrUndefined(this.inputValue) || isNaN(this.inputValue)) ? null : this.inputValue;\n if (this.prevValue !== this.value || this.prevValue !== this.inputValue) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.preventHandler = function () {\n var _this = this;\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(function () {\n if (_this.element.selectionStart > 0) {\n var currentPos = _this.element.selectionStart;\n var prevPos = _this.element.selectionStart - 1;\n var start = 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.element.value.trim();\n }\n else if (prevPos !== 0) {\n _this.element.value = _this.prevVal;\n }\n else if (prevPos === 0) {\n _this.element.value = _this.element.value.trim();\n }\n _this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n _this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0\n && _this.element.value.length) {\n _this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.setSelectionRange(prevPos, prevPos);\n _this.nextEle = _this.element.value[_this.element.selectionStart];\n _this.cursorPosChanged = true;\n _this.preventHandler();\n }\n }\n if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&\n isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {\n _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);\n _this.cursorPosChanged = false;\n _this.nextEle = null;\n }\n if (_this.element.value.trim() === '') {\n _this.element.setSelectionRange(start, start);\n }\n if (_this.element.selectionStart > 0) {\n if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {\n if (!isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.prevVal;\n }\n _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);\n }\n if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator &&\n _this.decimals === 0 &&\n _this.validateDecimalOnType) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n }\n }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.inputHandler = function (event) {\n var numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n var fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n var parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n //EJ2-54963-if type \".\" or \".0\" or \"-.0\" it converts to \"0\" automatically when binding v-model\n var nonZeroRegex = new RegExp('[^0-9]+$');\n if (nonZeroRegex.test(this.element.value) ||\n ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) &&\n this.element.value[this.element.value.length - 1] === '0')) {\n current = this.value;\n }\n var eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n }\n }\n };\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.inputValue = value;\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (!isNullOrUndefined(this.hiddenInput)) {\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.getNumberOfDecimals = function (value) {\n var numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n var EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n var valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n var result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n var decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var decimalSeparator = getValue('decimal', getNumericObject(this.locale));\n var isAlterNumPadDecimalChar = event.code === 'NumpadDecimal' && currentChar !== decimalSeparator;\n //EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different\n if (isAlterNumPadDecimalChar) {\n currentChar = decimalSeparator;\n }\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n //EJ2-59813-update the numberpad decimal separator and update the cursor position\n if (isAlterNumPadDecimalChar) {\n var start = this.element.selectionStart + 1;\n this.element.value = text;\n this.element.setSelectionRange(start, start);\n event.preventDefault();\n event.stopPropagation();\n }\n return true;\n }\n };\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n return new RegExp('^\\\\s*(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusHandler = function (event) {\n var _this = this;\n clearTimeout(selectionTimeOut);\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue_1 = this.formatNumber();\n this.setElementValue(formatValue_1);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue_1.length);\n }\n else {\n var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n selectionTimeOut = setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n NumericTextBox.prototype.focusOutHandler = function (event) {\n var _this = this;\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n };\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () {\n _this.isCalled = true;\n _this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target;\n if (event.type === 'touchmove') {\n var touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n this.prevValue = this.value;\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.floatLabelTypeUpdate = function () {\n Input.removeFloating(this.inputWrapper);\n var hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n if (this.spinUp) {\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n }\n if (this.spinDown) {\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n }\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',\n 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n this.spinUp = null;\n this.spinDown = null;\n this.container = null;\n this.hiddenInput = null;\n this.changeEventArgs = null;\n this.blurEventArgs = null;\n this.focusEventArgs = null;\n this.inputWrapper = null;\n Input.destroy({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n _super.prototype.destroy.call(this);\n };\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n * @returns {string} - Returns the formatted value of the NumericTextBox.\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string} - Returns the persisted data.\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n NumericTextBox.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 'width':\n this.setElementWidth(newProp.width);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n this.bindClearEvent();\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n NumericTextBox.prototype.updateClearButton = function (newProp) {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n };\n NumericTextBox.prototype.updateSpinButton = function (newProp) {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property({})\n ], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"blur\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\n\n/* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\nvar ERROR$1 = 'e-error';\nvar INPUTGROUP = 'e-input-group';\nvar FLOATINPUT = 'e-float-input';\nvar UTILMASK = 'e-utility-mask';\nvar TOPLABEL = 'e-label-top';\nvar BOTTOMLABEL = 'e-label-bottom';\n/**\n * @hidden\n * Built-in masking elements collection.\n */\nvar regularExpressions = {\n '0': '[0-9]',\n '9': '[0-9 ]',\n '#': '[0-9 +-]',\n 'L': '[A-Za-z]',\n '?': '[A-Za-z ]',\n '&': '[^\\x7f ]+',\n 'C': '[^\\x7f]+',\n 'A': '[A-Za-z0-9]',\n 'a': '[A-Za-z0-9 ]'\n};\n/**\n * Generate required masking elements to the MaskedTextBox from user mask input.\n *\n * @hidden\n */\nfunction createMask() {\n attributes(this.element, {\n 'role': 'textbox', 'autocomplete': 'off', 'autocapitalize': 'off',\n 'spellcheck': 'false', 'aria-live': 'assertive'\n });\n if (this.mask) {\n var splitMask = this.mask.split(']');\n for (var i = 0; i < splitMask.length; i++) {\n if (splitMask[i][splitMask[i].length - 1] === '\\\\') {\n splitMask[i] = splitMask[i] + ']';\n var splitInnerMask = splitMask[i].split('[');\n for (var j = 0; j < splitInnerMask.length; j++) {\n if (splitInnerMask[j][splitInnerMask[j].length - 1] === '\\\\') {\n splitInnerMask[j] = splitInnerMask[j] + '[';\n }\n pushIntoRegExpCollec.call(this, splitInnerMask[j]);\n }\n }\n else {\n var splitInnerMask = splitMask[i].split('[');\n if (splitInnerMask.length > 1) {\n var chkSpace = false;\n for (var j = 0; j < splitInnerMask.length; j++) {\n if (splitInnerMask[j] === '\\\\') {\n this.customRegExpCollec.push('[');\n this.hiddenMask += splitInnerMask[j] + '[';\n }\n else if (splitInnerMask[j] === '') {\n chkSpace = true;\n }\n else if ((splitInnerMask[j] !== '' && chkSpace) || j === splitInnerMask.length - 1) {\n this.customRegExpCollec.push('[' + splitInnerMask[j] + ']');\n this.hiddenMask += this.promptChar;\n chkSpace = false;\n }\n else {\n pushIntoRegExpCollec.call(this, splitInnerMask[j]);\n }\n }\n }\n else {\n pushIntoRegExpCollec.call(this, splitInnerMask[0]);\n }\n }\n }\n this.escapeMaskValue = this.hiddenMask;\n this.promptMask = this.hiddenMask.replace(/[09?LCAa#&]/g, this.promptChar);\n if (!isNullOrUndefined(this.customCharacters)) {\n for (var i = 0; i < this.promptMask.length; i++) {\n if (!isNullOrUndefined(this.customCharacters[this.promptMask[i]])) {\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar);\n }\n }\n }\n var escapeNumber = 0;\n if (this.hiddenMask.match(new RegExp(/\\\\/))) {\n for (var i = 0; i < this.hiddenMask.length; i++) {\n var j = 0;\n if (i >= 1) {\n j = i;\n }\n escapeNumber = this.hiddenMask.length - this.promptMask.length;\n j = j - escapeNumber;\n if ((i > 0 && this.hiddenMask[i - 1] !== '\\\\') && (this.hiddenMask[i] === '>' ||\n this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|')) {\n this.promptMask = this.promptMask.substring(0, j) +\n this.promptMask.substring((i + 1) - escapeNumber, this.promptMask.length);\n this.escapeMaskValue = this.escapeMaskValue.substring(0, j) +\n this.escapeMaskValue.substring((i + 1) - escapeNumber, this.escapeMaskValue.length);\n }\n if (this.hiddenMask[i] === '\\\\') {\n this.promptMask = this.promptMask.substring(0, j) + this.hiddenMask[i + 1] +\n this.promptMask.substring((i + 2) - escapeNumber, this.promptMask.length);\n this.escapeMaskValue = this.escapeMaskValue.substring(0, j) + this.escapeMaskValue[i + 1] +\n this.escapeMaskValue.substring((i + 2) - escapeNumber, this.escapeMaskValue.length);\n }\n }\n }\n else {\n this.promptMask = this.promptMask.replace(/[>|<]/g, '');\n this.escapeMaskValue = this.hiddenMask.replace(/[>|<]/g, '');\n }\n attributes(this.element, { 'aria-invalid': 'false' });\n }\n}\n/**\n * Apply mask ability with masking elements to the MaskedTextBox.\n *\n * @hidden\n */\nfunction applyMask() {\n setElementValue.call(this, this.promptMask);\n setMaskValue.call(this, this.value);\n}\n/**\n * To wire required events to the MaskedTextBox.\n *\n * @hidden\n */\nfunction wireEvents() {\n EventHandler.add(this.element, 'keydown', maskInputKeyDownHandler, this);\n EventHandler.add(this.element, 'keypress', maskInputKeyPressHandler, this);\n EventHandler.add(this.element, 'keyup', maskInputKeyUpHandler, this);\n EventHandler.add(this.element, 'input', maskInputHandler, this);\n EventHandler.add(this.element, 'focus', maskInputFocusHandler, this);\n EventHandler.add(this.element, 'blur', maskInputBlurHandler, this);\n EventHandler.add(this.element, 'paste', maskInputPasteHandler, this);\n EventHandler.add(this.element, 'cut', maskInputCutHandler, this);\n EventHandler.add(this.element, 'drop', maskInputDropHandler, this);\n EventHandler.add(this.element, 'mousedown', maskInputMouseDownHandler, this);\n EventHandler.add(this.element, 'mouseup', maskInputMouseUpHandler, this);\n if (this.enabled) {\n bindClearEvent.call(this);\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', resetFormHandler, this);\n }\n }\n}\n/**\n * To unwire events attached to the MaskedTextBox.\n *\n * @hidden\n */\nfunction unwireEvents() {\n EventHandler.remove(this.element, 'keydown', maskInputKeyDownHandler);\n EventHandler.remove(this.element, 'keypress', maskInputKeyPressHandler);\n EventHandler.remove(this.element, 'keyup', maskInputKeyUpHandler);\n EventHandler.remove(this.element, 'input', maskInputHandler);\n EventHandler.remove(this.element, 'focus', maskInputFocusHandler);\n EventHandler.remove(this.element, 'blur', maskInputBlurHandler);\n EventHandler.remove(this.element, 'paste', maskInputPasteHandler);\n EventHandler.remove(this.element, 'cut', maskInputCutHandler);\n EventHandler.remove(this.element, 'drop', maskInputDropHandler);\n EventHandler.remove(this.element, 'mousedown', maskInputMouseDownHandler);\n EventHandler.remove(this.element, 'mouseup', maskInputMouseUpHandler);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', resetFormHandler);\n }\n}\n/**\n * To bind required events to the MaskedTextBox clearButton.\n *\n * @hidden\n */\nfunction bindClearEvent() {\n if (this.showClearButton) {\n EventHandler.add(this.inputObj.clearButton, 'mousedown touchstart', resetHandler, this);\n }\n}\nfunction resetHandler(e) {\n e.preventDefault();\n if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide') || (this.inputObj.container.classList.contains('e-static-clear'))) {\n clear.call(this, e);\n this.value = '';\n }\n}\nfunction clear(event) {\n var value = this.element.value;\n setElementValue.call(this, this.promptMask);\n this.redoCollec.unshift({\n value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n triggerMaskChangeEvent.call(this, event, value);\n this.element.setSelectionRange(0, 0);\n}\nfunction resetFormHandler() {\n if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {\n setElementValue.call(this, this.promptMask);\n }\n else {\n this.value = this.initInputValue;\n }\n}\n/**\n * To get masked value from the MaskedTextBox.\n *\n * @hidden\n */\nfunction unstrippedValue(element) {\n return element.value;\n}\n/**\n * To extract raw value from the MaskedTextBox.\n *\n * @hidden\n */\nfunction strippedValue(element, maskValues) {\n var value = '';\n var k = 0;\n var checkMask = false;\n var maskValue = (!isNullOrUndefined(maskValues)) ? maskValues : (!isNullOrUndefined(element) &&\n !isNullOrUndefined(this)) ? element.value : maskValues;\n if (maskValue !== this.promptMask) {\n for (var i = 0; i < this.customRegExpCollec.length; i++) {\n if (checkMask) {\n checkMask = false;\n }\n if (this.customRegExpCollec[k] === '>' || this.customRegExpCollec[k] === '<' ||\n this.customRegExpCollec[k] === '|' || this.customRegExpCollec[k] === '\\\\') {\n --i;\n checkMask = true;\n }\n if (!checkMask) {\n if ((maskValue[i] !== this.promptChar) && (!isNullOrUndefined(this.customRegExpCollec[k]) &&\n ((this._callPasteHandler || (!isNullOrUndefined(this.regExpCollec[this.customRegExpCollec[k]]) &&\n !this.maskedRegExp.includes(this.customRegExpCollec[k]))) ||\n (this.customRegExpCollec[k].length > 2 && this.customRegExpCollec[k][0] === '[' &&\n this.customRegExpCollec[k][this.customRegExpCollec[k].length - 1] === ']') ||\n (!isNullOrUndefined(this.customCharacters) &&\n (!isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (maskValue !== '')) {\n value += maskValue[i];\n }\n }\n ++k;\n }\n }\n if (this.mask === null || this.mask === '' && this.value !== undefined) {\n value = maskValue;\n }\n return value;\n}\nfunction pushIntoRegExpCollec(value) {\n for (var k = 0; k < value.length; k++) {\n this.hiddenMask += value[k];\n if (value[k] !== '\\\\') {\n this.customRegExpCollec.push(value[k]);\n }\n else if (value[k] === '\\\\' && !isNullOrUndefined(this.regExpCollec[value[k + 1]])) {\n this.maskedRegExp.push(value[k + 1]);\n }\n }\n}\nfunction maskInputMouseDownHandler() {\n this.isClicked = true;\n}\nfunction maskInputMouseUpHandler() {\n this.isClicked = false;\n}\nfunction maskInputFocusHandler(event) {\n var _this = this;\n var inputElement = this.element;\n var startIndex = 0;\n var modelValue = strippedValue.call(this, inputElement);\n var toAllowForward = false;\n var toAllowBackward = false;\n var eventArgs = {\n selectionStart: inputElement.selectionStart,\n event: event,\n value: this.value,\n maskedValue: inputElement.value,\n container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj,\n selectionEnd: inputElement.selectionEnd\n };\n if (!this.isClicked) {\n triggerFocus.call(this, eventArgs, inputElement);\n }\n if (this.mask) {\n if (!(!(modelValue === null || modelValue === '') || this.floatLabelType === 'Always' ||\n this.placeholder === null || this.placeholder === '')) {\n inputElement.value = this.promptMask;\n }\n setTimeout(function () {\n if (inputElement.selectionStart === _this.promptMask.length ||\n inputElement.value[inputElement.selectionStart] === _this.promptChar) {\n toAllowForward = true;\n }\n else {\n for (var i = inputElement.selectionStart; i < _this.promptMask.length; i++) {\n if (inputElement.value[i] !== _this.promptChar) {\n if ((inputElement.value[i] !== _this.promptMask[i])) {\n toAllowForward = false;\n break;\n }\n }\n else {\n toAllowForward = true;\n break;\n }\n }\n }\n });\n setTimeout(function () {\n var backSelectionStart = inputElement.selectionStart - 1;\n if (backSelectionStart === _this.promptMask.length - 1 ||\n inputElement.value[backSelectionStart] === _this.promptChar) {\n toAllowBackward = true;\n }\n else {\n for (var i = backSelectionStart; i >= 0; i--) {\n if (inputElement.value[i] !== _this.promptChar) {\n if ((inputElement.value[i] !== _this.promptMask[i])) {\n toAllowBackward = false;\n break;\n }\n }\n else {\n toAllowBackward = true;\n break;\n }\n }\n }\n });\n if ((this.isClicked || (this.floatLabelType !== 'Always' &&\n ((modelValue === null || modelValue === '') &&\n (this.placeholder !== null && this.placeholder !== ''))))) {\n for (startIndex = 0; startIndex < this.promptMask.length; startIndex++) {\n if (inputElement.value[startIndex] === this.promptChar) {\n setTimeout(function () {\n if (toAllowForward || toAllowBackward) {\n inputElement.selectionEnd = startIndex;\n inputElement.selectionStart = startIndex;\n }\n eventArgs = {\n selectionStart: inputElement.selectionStart,\n event: event,\n value: _this.value,\n maskedValue: inputElement.value,\n container: !isNullOrUndefined(_this.inputObj) ? _this.inputObj.container : _this.inputObj,\n selectionEnd: inputElement.selectionEnd\n };\n triggerFocus.call(_this, eventArgs, inputElement);\n }, 110);\n break;\n }\n }\n if (isNullOrUndefined(inputElement.value.match(escapeRegExp(this.promptChar)))) {\n eventArgs = {\n selectionStart: inputElement.selectionStart,\n event: event,\n value: this.value,\n maskedValue: inputElement.value,\n container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj,\n selectionEnd: inputElement.selectionEnd\n };\n triggerFocus.call(this, eventArgs, inputElement);\n }\n this.isClicked = false;\n }\n }\n}\nfunction triggerFocus(eventArgs, inputElement) {\n this.trigger('focus', eventArgs, function (eventArgs) {\n inputElement.selectionStart = eventArgs.selectionStart;\n inputElement.selectionEnd = eventArgs.selectionEnd;\n });\n}\nfunction escapeRegExp(text) {\n return !isNullOrUndefined(text) ? text.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '\\\\$&') : text;\n}\nfunction maskInputBlurHandler(event) {\n this.blurEventArgs = {\n event: event,\n value: this.value,\n maskedValue: this.element.value,\n container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj\n };\n this.trigger('blur', this.blurEventArgs);\n if (this.mask) {\n this.isFocus = false;\n if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') {\n setElementValue.call(this, '');\n var labelElement = this.element.parentNode.querySelector('.e-float-text');\n if (this.floatLabelType === 'Auto' && !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL)) {\n removeClass([labelElement], TOPLABEL);\n }\n }\n }\n}\nfunction maskInputPasteHandler(event) {\n var _this = this;\n if (this.mask && !this.readonly) {\n var sIndex_1 = this.element.selectionStart;\n var eIndex_1 = this.element.selectionEnd;\n var oldValue_1 = this.element.value;\n setElementValue.call(this, '');\n this._callPasteHandler = true;\n setTimeout(function () {\n var value = _this.element.value.replace(/ /g, '');\n if (_this.redoCollec.length > 0 && _this.redoCollec[0].value === _this.element.value) {\n value = strippedValue.call(_this, _this.element);\n }\n setElementValue.call(_this, oldValue_1);\n _this.element.selectionStart = sIndex_1;\n _this.element.selectionEnd = eIndex_1;\n var i = 0;\n _this.maskKeyPress = true;\n do {\n validateValue.call(_this, value[i], false, null);\n ++i;\n } while (i < value.length);\n _this.maskKeyPress = false;\n _this._callPasteHandler = false;\n if (_this.element.value === oldValue_1) {\n var i_1 = 0;\n _this.maskKeyPress = true;\n do {\n validateValue.call(_this, value[i_1], false, null);\n ++i_1;\n } while (i_1 < value.length);\n _this.maskKeyPress = false;\n }\n else {\n triggerMaskChangeEvent.call(_this, event, oldValue_1);\n }\n }, 1);\n }\n}\nfunction maskInputCutHandler(event) {\n var _this = this;\n if (this.mask && !this.readonly) {\n var preValue_1 = this.element.value;\n var sIndex_2 = this.element.selectionStart;\n var eIndex = this.element.selectionEnd;\n this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd });\n var value_1 = this.element.value.substring(0, sIndex_2) + this.promptMask.substring(sIndex_2, eIndex) +\n this.element.value.substring(eIndex);\n setTimeout(function () {\n setElementValue.call(_this, value_1);\n _this.element.selectionStart = _this.element.selectionEnd = sIndex_2;\n if (_this.element.value !== preValue_1) {\n triggerMaskChangeEvent.call(_this, event, null);\n }\n }, 0);\n }\n}\nfunction maskInputDropHandler(event) {\n event.preventDefault();\n}\nfunction maskInputHandler(event) {\n if (Browser.isIE === true && this.element.value === '' && this.floatLabelType === 'Never') {\n return;\n }\n var eventArgs = { ctrlKey: false, keyCode: 229 };\n extend(event, eventArgs);\n if (this.mask) {\n if (this.element.value === '') {\n this.redoCollec.unshift({\n value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n if (this.element.value.length === 1) {\n this.element.value = this.element.value + this.promptMask;\n this.element.setSelectionRange(1, 1);\n }\n if (!this._callPasteHandler) {\n removeMaskInputValues.call(this, event);\n }\n if (this.element.value.length > this.promptMask.length) {\n var startIndex = this.element.selectionStart;\n var addedValues = this.element.value.length - this.promptMask.length;\n var value = this.element.value.substring(startIndex - addedValues, startIndex);\n this.maskKeyPress = false;\n var i = 0;\n do {\n validateValue.call(this, value[i], event.ctrlKey, event);\n ++i;\n } while (i < value.length);\n if (this.element.value !== this.preEleVal) {\n triggerMaskChangeEvent.call(this, event, null);\n }\n }\n var val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (val === '') {\n setElementValue.call(this, this.promptMask);\n this.element.setSelectionRange(0, 0);\n }\n }\n}\nfunction maskInputKeyDownHandler(event) {\n if (this.mask && !this.readonly) {\n if (event.keyCode !== 229) {\n if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {\n event.preventDefault();\n }\n removeMaskInputValues.call(this, event);\n }\n var startValue = this.element.value;\n if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {\n var collec = void 0;\n if (event.keyCode === 90 && this.undoCollec.length > 0 && startValue !== this.undoCollec[this.undoCollec.length - 1].value) {\n collec = this.undoCollec[this.undoCollec.length - 1];\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n setElementValue.call(this, collec.value);\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n this.undoCollec.splice(this.undoCollec.length - 1, 1);\n }\n else if (event.keyCode === 89 && this.redoCollec.length > 0 && startValue !== this.redoCollec[0].value) {\n collec = this.redoCollec[0];\n this.undoCollec.push({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n setElementValue.call(this, collec.value);\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n this.redoCollec.splice(0, 1);\n }\n }\n }\n}\nfunction mobileRemoveFunction() {\n var collec;\n var sIndex = this.element.selectionStart;\n var eIndex = this.element.selectionEnd;\n if (this.redoCollec.length > 0) {\n collec = this.redoCollec[0];\n setElementValue.call(this, collec.value);\n if ((collec.startIndex - sIndex) === 1) {\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n }\n else {\n this.element.selectionStart = sIndex + 1;\n this.element.selectionEnd = eIndex + 1;\n }\n }\n else {\n setElementValue.call(this, this.promptMask);\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n }\n}\nfunction autoFillMaskInputValues(isRemove, oldEventVal, event) {\n if (event.type === 'input') {\n isRemove = false;\n oldEventVal = this.element.value;\n setElementValue.call(this, this.promptMask);\n setMaskValue.call(this, oldEventVal);\n }\n return isRemove;\n}\nfunction removeMaskInputValues(event) {\n var isRemove = false;\n var oldEventVal;\n var isDeleted = false;\n if (this.element.value.length < this.promptMask.length) {\n isRemove = true;\n oldEventVal = this.element.value;\n isRemove = autoFillMaskInputValues.call(this, isRemove, oldEventVal, event);\n mobileRemoveFunction.call(this);\n }\n if (this.element.value.length >= this.promptMask.length && event.type === 'input') {\n isRemove = autoFillMaskInputValues.call(this, isRemove, oldEventVal, event);\n }\n var initStartIndex = this.element.selectionStart;\n var initEndIndex = this.element.selectionEnd;\n var startIndex = this.element.selectionStart;\n var endIndex = this.element.selectionEnd;\n var maskValue = this.hiddenMask.replace(/[>|\\\\<]/g, '');\n var curMask = maskValue[startIndex - 1];\n var deleteEndIndex = this.element.selectionEnd;\n if (isRemove || event.keyCode === 8 || event.keyCode === 46) {\n this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: endIndex });\n var multipleDel = false;\n var preValue = this.element.value;\n if (startIndex > 0 || ((event.keyCode === 8 || event.keyCode === 46) && startIndex < this.element.value.length\n && ((this.element.selectionEnd - startIndex) !== this.element.value.length))) {\n var index = startIndex;\n if (startIndex !== endIndex) {\n startIndex = endIndex;\n if (event.keyCode === 46) {\n multipleDel = true;\n }\n }\n else if (event.keyCode === 46) {\n ++index;\n }\n else {\n --index;\n }\n for (var k = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? k > index : k < index; (event.keyCode === 8 || isRemove || multipleDel) ? k-- : k++) {\n for (var i = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? i > 0 : i < this.element.value.length; (event.keyCode === 8 || isRemove || multipleDel) ? i-- : i++) {\n var sIndex = void 0;\n if (((event.keyCode === 8 || multipleDel) && ((initStartIndex !== initEndIndex && initStartIndex !== startIndex) ||\n (initStartIndex === initEndIndex))) || isRemove) {\n curMask = maskValue[i - 1];\n sIndex = startIndex - 1;\n }\n else {\n curMask = maskValue[i];\n sIndex = startIndex;\n ++startIndex;\n }\n var oldValue = this.element.value[sIndex];\n if ((isNullOrUndefined(this.regExpCollec[\"\" + curMask]) && (!isNullOrUndefined(this.customCharacters)\n && isNullOrUndefined(this.customCharacters[\"\" + curMask]))\n && ((this.hiddenMask[sIndex] !== this.promptChar && this.customRegExpCollec[sIndex][0] !== '['\n && this.customRegExpCollec[sIndex][this.customRegExpCollec[sIndex].length - 1] !== ']')))\n || (this.promptMask[sIndex] !== this.promptChar && isNullOrUndefined(this.customCharacters))) {\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n event.preventDefault();\n if (event.keyCode === 46 && !multipleDel) {\n ++this.element.selectionStart;\n }\n }\n else {\n var value = this.element.value;\n var prompt_1 = this.promptChar;\n var elementValue = value.substring(0, sIndex) + prompt_1 + value.substring(startIndex, value.length);\n setElementValue.call(this, elementValue);\n event.preventDefault();\n if (event.keyCode === 46 && !multipleDel) {\n sIndex++;\n }\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n isDeleted = true;\n }\n startIndex = this.element.selectionStart;\n if ((!isDeleted && event.keyCode === 8) || multipleDel || (!isDeleted && !(event.keyCode === 46))) {\n sIndex = startIndex - 1;\n }\n else {\n sIndex = startIndex;\n isDeleted = false;\n }\n oldValue = this.element.value[sIndex];\n if (((initStartIndex !== initEndIndex) && (this.element.selectionStart === initStartIndex))\n || (this.promptMask[sIndex] === this.promptChar) || ((oldValue !== this.promptMask[sIndex]) &&\n (this.promptMask[sIndex] !== this.promptChar) && !isNullOrUndefined(this.customCharacters))) {\n break;\n }\n }\n }\n }\n if (event.keyCode === 46 && multipleDel && isDeleted) {\n this.element.selectionStart = this.element.selectionEnd = deleteEndIndex;\n }\n if (this.element.selectionStart === 0 && (this.element.selectionEnd === this.element.value.length)) {\n setElementValue.call(this, this.promptMask);\n event.preventDefault();\n this.element.selectionStart = this.element.selectionEnd = startIndex;\n }\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n if (this.element.value !== preValue) {\n triggerMaskChangeEvent.call(this, event, oldEventVal);\n }\n }\n}\nfunction maskInputKeyPressHandler(event) {\n if (this.mask && !this.readonly) {\n var oldValue = this.element.value;\n if (!(event.ctrlKey || event.metaKey) || ((event.ctrlKey || event.metaKey) && event.code !== 'KeyA' && event.code !== 'KeyY'\n && event.code !== 'KeyZ' && event.code !== 'KeyX' && event.code !== 'KeyC' && event.code !== 'KeyV')) {\n this.maskKeyPress = true;\n var key = event.key;\n if (key === 'Spacebar') {\n key = String.fromCharCode(event.keyCode);\n }\n if (!key) {\n this.isIosInvalid = true;\n validateValue.call(this, String.fromCharCode(event.keyCode), event.ctrlKey, event);\n event.preventDefault();\n this.isIosInvalid = false;\n }\n else if (key && key.length === 1) {\n validateValue.call(this, key, event.ctrlKey, event);\n event.preventDefault();\n }\n if (event.keyCode === 32 && key === ' ' && this.promptChar === ' ') {\n this.element.selectionStart = this.element.selectionEnd = this.element.selectionStart - key.length;\n }\n }\n if (this.element.value !== oldValue) {\n triggerMaskChangeEvent.call(this, event, oldValue);\n }\n }\n}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction triggerMaskChangeEvent(event, oldValue) {\n var prevOnChange = this.isProtectedOnChange;\n if (!isNullOrUndefined(this.changeEventArgs) && !this.isInitial) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.element.value, maskedValue: this.element.value, isInteraction: false, isInteracted: false };\n if (this.mask) {\n this.changeEventArgs.value = strippedValue.call(this, this.element);\n }\n if (!isNullOrUndefined(event)) {\n this.changeEventArgs.isInteracted = true;\n this.changeEventArgs.isInteraction = true;\n this.changeEventArgs.event = event;\n }\n this.isProtectedOnChange = true;\n this.value = this.changeEventArgs.value;\n this.isProtectedOnChange = prevOnChange;\n merge(eventArgs, this.changeEventArgs);\n /* istanbul ignore next */\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n }\n this.preEleVal = this.element.value;\n this.prevValue = strippedValue.call(this, this.element);\n}\nfunction maskInputKeyUpHandler(event) {\n if (this.mask && !this.readonly) {\n var collec = void 0;\n if (!this.maskKeyPress && event.keyCode === 229) {\n var oldEventVal = void 0;\n if (this.element.value.length === 1) {\n this.element.value = this.element.value + this.promptMask;\n this.element.setSelectionRange(1, 1);\n }\n if (this.element.value.length > this.promptMask.length) {\n var startIndex = this.element.selectionStart;\n var addedValues = this.element.value.length - this.promptMask.length;\n var val_1 = this.element.value.substring(startIndex - addedValues, startIndex);\n if (this.undoCollec.length > 0) {\n collec = this.undoCollec[this.undoCollec.length - 1];\n var startIndex_1 = this.element.selectionStart;\n oldEventVal = collec.value;\n var oldVal = collec.value.substring(startIndex_1 - addedValues, startIndex_1);\n collec = this.redoCollec[0];\n val_1 = val_1.trim();\n var isSpace = Browser.isAndroid && val_1 === '';\n if (!isSpace && oldVal !== val_1 && collec.value.substring(startIndex_1 - addedValues, startIndex_1) !== val_1) {\n validateValue.call(this, val_1, event.ctrlKey, event);\n }\n else if (isSpace) {\n preventUnsupportedValues.call(this, event, startIndex_1 - 1, this.element.selectionEnd - 1, val_1, event.ctrlKey, false);\n }\n }\n else {\n oldEventVal = this.promptMask;\n validateValue.call(this, val_1, event.ctrlKey, event);\n }\n this.maskKeyPress = false;\n triggerMaskChangeEvent.call(this, event, oldEventVal);\n }\n }\n else {\n removeMaskError.call(this);\n }\n var val = strippedValue.call(this, this.element);\n if (!((this.element.selectionStart === 0) && (this.promptMask === this.element.value) && val === '')\n || (val === '' && this.value !== val)) {\n this.prevValue = val;\n this.value = val;\n }\n }\n else {\n triggerMaskChangeEvent.call(this, event);\n }\n if (this.element.selectionStart === 0 && this.element.selectionEnd === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var temp_1 = this.element;\n setTimeout(function () {\n temp_1.setSelectionRange(0, 0);\n }, 0);\n }\n}\nfunction mobileSwipeCheck(key) {\n if (key.length > 1 && ((this.promptMask.length + key.length) < this.element.value.length)) {\n var elementValue = this.redoCollec[0].value.substring(0, this.redoCollec[0].startIndex) + key +\n this.redoCollec[0].value.substring(this.redoCollec[0].startIndex, this.redoCollec[0].value.length);\n setElementValue.call(this, elementValue);\n this.element.selectionStart = this.element.selectionEnd = this.redoCollec[0].startIndex + key.length;\n }\n this.element.selectionStart = this.element.selectionStart - key.length;\n this.element.selectionEnd = this.element.selectionEnd - key.length;\n}\nfunction mobileValidation(key) {\n if (!this.maskKeyPress) {\n mobileSwipeCheck.call(this, key);\n }\n}\nfunction validateValue(key, isCtrlKey, event) {\n mobileValidation.call(this, key);\n if (isNullOrUndefined(this) || isNullOrUndefined(key)) {\n return;\n }\n var startIndex = this.element.selectionStart;\n var initStartIndex = startIndex;\n var curMask;\n var allowText = false;\n var value = this.element.value;\n var eventOldVal;\n var prevSupport = false;\n var isEqualVal = false;\n for (var k = 0; k < key.length; k++) {\n var keyValue = key[k];\n startIndex = this.element.selectionStart;\n if (!this.maskKeyPress && initStartIndex === startIndex) {\n startIndex = startIndex + k;\n }\n if ((!this.maskKeyPress || startIndex < this.promptMask.length)) {\n for (var i = startIndex; i < this.promptMask.length; i++) {\n var maskValue = this.escapeMaskValue;\n curMask = maskValue[startIndex];\n if (this.hiddenMask[startIndex] === '\\\\' && this.hiddenMask[startIndex + 1] === key) {\n isEqualVal = true;\n }\n if ((isNullOrUndefined(this.regExpCollec[\"\" + curMask]) && (isNullOrUndefined(this.customCharacters)\n || (!isNullOrUndefined(this.customCharacters) && isNullOrUndefined(this.customCharacters[\"\" + curMask])))\n && ((this.hiddenMask[startIndex] !== this.promptChar && this.customRegExpCollec[startIndex][0] !== '['\n && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] !== ']')))\n || ((this.promptMask[startIndex] !== this.promptChar) && isNullOrUndefined(this.customCharacters))\n || (this.promptChar === curMask && this.escapeMaskValue === this.mask)) {\n this.element.selectionStart = this.element.selectionEnd = startIndex + 1;\n startIndex = this.element.selectionStart;\n curMask = this.hiddenMask[startIndex];\n }\n }\n if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters[\"\" + curMask])) {\n var customValStr = this.customCharacters[\"\" + curMask];\n var customValArr = customValStr.split(',');\n for (var i = 0; i < customValArr.length; i++) {\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) {\n allowText = true;\n break;\n }\n }\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n }\n else if (!isNullOrUndefined(this.regExpCollec[\"\" + curMask]) && keyValue.match(new RegExp(this.regExpCollec[\"\" + curMask]))\n && this.promptMask[startIndex] === this.promptChar) {\n allowText = true;\n }\n else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '['\n && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']'\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) {\n allowText = true;\n }\n if ((!this.maskKeyPress || startIndex < this.hiddenMask.length) && allowText) {\n if (k === 0) {\n if (this.maskKeyPress) {\n this.undoCollec.push({ value: value, startIndex: startIndex, endIndex: startIndex });\n }\n else {\n var sIndex = this.element.selectionStart;\n var eIndex = this.element.selectionEnd;\n if (this.redoCollec.length > 0) {\n eventOldVal = this.redoCollec[0].value;\n setElementValue.call(this, eventOldVal);\n this.undoCollec.push(this.redoCollec[0]);\n }\n else {\n this.undoCollec.push({ value: this.promptMask, startIndex: startIndex, endIndex: startIndex });\n eventOldVal = this.promptMask;\n setElementValue.call(this, eventOldVal);\n }\n this.element.selectionStart = sIndex;\n this.element.selectionEnd = eIndex;\n }\n }\n startIndex = this.element.selectionStart;\n applySupportedValues.call(this, event, startIndex, keyValue, eventOldVal, isEqualVal);\n prevSupport = true;\n if (k === key.length - 1) {\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n allowText = false;\n }\n else {\n startIndex = this.element.selectionStart;\n preventUnsupportedValues.call(this, event, startIndex, initStartIndex, key, isCtrlKey, prevSupport);\n }\n if (k === key.length - 1 && !allowText) {\n if (!Browser.isAndroid || (Browser.isAndroid && startIndex < this.promptMask.length)) {\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n }\n }\n else {\n if (key.length === 1 && !isCtrlKey && !isNullOrUndefined(event)) {\n addMaskErrorClass.call(this);\n }\n }\n }\n}\nfunction applySupportedValues(event, startIndex, keyValue, eventOldVal, isEqualVal) {\n if (this.hiddenMask.length > this.promptMask.length) {\n keyValue = changeToLowerUpperCase.call(this, keyValue, this.element.value);\n }\n if (!isEqualVal) {\n var value = this.element.value;\n var elementValue = value.substring(0, startIndex) + keyValue + value.substring(startIndex + 1, value.length);\n setElementValue.call(this, elementValue);\n this.element.selectionStart = this.element.selectionEnd = startIndex + 1;\n }\n}\nfunction preventUnsupportedValues(event, sIdx, idx, key, ctrl, chkSupport) {\n if (!this.maskKeyPress) {\n var value = this.element.value;\n if (sIdx >= this.promptMask.length) {\n setElementValue.call(this, value.substring(0, sIdx));\n }\n else {\n if (idx === sIdx) {\n setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx + 1, value.length));\n }\n else {\n if (this.promptMask.length === this.element.value.length) {\n setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx, value.length));\n }\n else {\n setElementValue.call(this, value.substring(0, idx) + value.substring(idx + 1, value.length));\n }\n }\n this.element.selectionStart = this.element.selectionEnd = (chkSupport ||\n this.element.value[idx] !== this.promptChar) ? sIdx : idx;\n }\n addMaskErrorClass.call(this);\n }\n if (key.length === 1 && !ctrl && !isNullOrUndefined(event)) {\n addMaskErrorClass.call(this);\n }\n}\nfunction addMaskErrorClass() {\n var _this = this;\n var parentElement = this.element.parentNode;\n var timer = 200;\n if (parentElement.classList.contains(INPUTGROUP) || parentElement.classList.contains(FLOATINPUT)) {\n addClass([parentElement], ERROR$1);\n }\n else {\n addClass([this.element], ERROR$1);\n }\n if (this.isIosInvalid === true) {\n timer = 400;\n }\n attributes(this.element, { 'aria-invalid': 'true' });\n setTimeout(function () {\n if (!_this.maskKeyPress) {\n removeMaskError.call(_this);\n }\n }, timer);\n}\nfunction removeMaskError() {\n var parentElement = this.element.parentNode;\n if (!isNullOrUndefined(parentElement)) {\n removeClass([parentElement], ERROR$1);\n }\n removeClass([this.element], ERROR$1);\n attributes(this.element, { 'aria-invalid': 'false' });\n}\n/**\n * Validates user input using masking elements '<' , '>' and '|'.\n *\n * @hidden\n */\nfunction changeToLowerUpperCase(key, value) {\n var promptMask;\n var i;\n var curVal = value;\n var caseCount = 0;\n for (i = 0; i < this.hiddenMask.length; i++) {\n if (this.hiddenMask[i] === '\\\\') {\n promptMask = curVal.substring(0, i) + '\\\\' + curVal.substring(i, curVal.length);\n }\n if (this.hiddenMask[i] === '>' || this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|') {\n if (this.hiddenMask[i] !== curVal[i]) {\n promptMask = curVal.substring(0, i) + this.hiddenMask[i] + curVal.substring(i, curVal.length);\n }\n ++caseCount;\n }\n if (promptMask) {\n if (((promptMask[i] === this.promptChar) && (i > this.element.selectionStart)) ||\n (this.element.value.indexOf(this.promptChar) < 0 && (this.element.selectionStart + caseCount) === i)) {\n caseCount = 0;\n break;\n }\n curVal = promptMask;\n }\n }\n while (i >= 0 && promptMask) {\n if (i === 0 || promptMask[i - 1] !== '\\\\') {\n if (promptMask[i] === '>') {\n key = key.toUpperCase();\n break;\n }\n else if (promptMask[i] === '<') {\n key = key.toLowerCase();\n break;\n }\n else if (promptMask[i] === '|') {\n break;\n }\n }\n --i;\n }\n return key;\n}\n/**\n * To set updated values in the MaskedTextBox.\n *\n * @hidden\n */\nfunction setMaskValue(val) {\n if (this.mask && val !== undefined && (this.prevValue === undefined || this.prevValue !== val)) {\n this.maskKeyPress = true;\n setElementValue.call(this, this.promptMask);\n if (val !== '' && !(val === null && this.floatLabelType === 'Never' && this.placeholder)) {\n this.element.selectionStart = 0;\n this.element.selectionEnd = 0;\n }\n if (val !== null) {\n for (var i = 0; i < val.length; i++) {\n validateValue.call(this, val[i], false, null);\n }\n }\n var newVal = strippedValue.call(this, this.element);\n this.prevValue = newVal;\n this.value = newVal;\n triggerMaskChangeEvent.call(this, null, null);\n this.maskKeyPress = false;\n var labelElement = this.element.parentNode.querySelector('.e-float-text');\n if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' && this.placeholder &&\n !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL) && !this.isFocus) {\n removeClass([labelElement], TOPLABEL);\n addClass([labelElement], BOTTOMLABEL);\n setElementValue.call(this, '');\n }\n }\n if (this.mask === null || this.mask === '' && this.value !== undefined) {\n setElementValue.call(this, this.value);\n }\n}\n/**\n * To set updated values in the input element.\n *\n * @hidden\n */\nfunction setElementValue(val, element) {\n if (!this.isFocus && this.floatLabelType === 'Auto' && this.placeholder && isNullOrUndefined(this.value)) {\n val = '';\n }\n var value = strippedValue.call(this, (element ? element : this.element), val);\n if (value === null || value === '') {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, false);\n if (this.showClearButton) {\n this.inputObj.clearButton.classList.add('e-clear-icon-hide');\n }\n }\n else {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n }\n}\n/**\n * Provide mask support to input textbox through utility method.\n *\n * @hidden\n */\nfunction maskInput(args) {\n var inputEle = getMaskInput(args);\n applyMask.call(inputEle);\n var val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (args.mask) {\n unwireEvents.call(inputEle);\n wireEvents.call(inputEle);\n }\n}\nfunction getMaskInput(args) {\n addClass([args.element], UTILMASK);\n var inputEle = {\n element: args.element,\n mask: args.mask,\n promptMask: '',\n hiddenMask: '',\n escapeMaskValue: '',\n promptChar: args.promptChar ? (args.promptChar.length > 1) ? args.promptChar = args.promptChar[0]\n : args.promptChar : '_',\n value: args.value ? args.value : null,\n regExpCollec: regularExpressions,\n customRegExpCollec: [],\n customCharacters: args.customCharacters,\n undoCollec: [],\n redoCollec: [],\n maskKeyPress: false,\n prevValue: ''\n };\n createMask.call(inputEle);\n return inputEle;\n}\n/**\n * Gets raw value of the textbox which has been masked through utility method.\n *\n * @hidden\n */\nfunction getVal(args) {\n return strippedValue.call(getUtilMaskEle(args), args.element);\n}\n/**\n * Gets masked value of the textbox which has been masked through utility method.\n *\n * @hidden\n */\nfunction getMaskedVal(args) {\n return unstrippedValue.call(getUtilMaskEle(args), args.element);\n}\nfunction getUtilMaskEle(args) {\n var inputEle;\n if (!isNullOrUndefined(args) && args.element.classList.contains(UTILMASK)) {\n inputEle = getMaskInput(args);\n }\n return inputEle;\n}\n/**\n * Arguments to perform undo and redo functionalities.\n *\n * @hidden\n */\nvar MaskUndo = /** @__PURE__ @class */ (function () {\n function MaskUndo() {\n }\n return MaskUndo;\n}());\n/* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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};\nvar ROOT$1 = 'e-control-wrapper e-mask';\nvar INPUT = 'e-input';\nvar COMPONENT$1 = 'e-maskedtextbox';\nvar CONTROL$1 = 'e-control';\nvar MASKINPUT_FOCUS = 'e-input-focus';\nvar wrapperAttr = ['title', 'style', 'class'];\n/**\n * The MaskedTextBox allows the user to enter the valid input only based on the provided mask.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar MaskedTextBox = /** @__PURE__ @class */ (function (_super) {\n __extends$1(MaskedTextBox, _super);\n /**\n *\n * @param {MaskedTextBoxModel} options - Specifies the MaskedTextBox model.\n * @param {string | HTMLElement | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function MaskedTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.initInputValue = '';\n _this.preventChange = false;\n _this.isClicked = false;\n _this.maskOptions = options;\n return _this;\n }\n /**\n * Gets the component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n MaskedTextBox.prototype.getModuleName = function () {\n return 'maskedtextbox';\n };\n /**\n * Initializes the event handler\n *\n * @returns {void}\n * @private\n */\n MaskedTextBox.prototype.preRender = function () {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.regExpCollec = regularExpressions;\n this.customRegExpCollec = [];\n this.maskedRegExp = [];\n this.undoCollec = [];\n this.redoCollec = [];\n this.changeEventArgs = {};\n this.focusEventArgs = {};\n this.blurEventArgs = {};\n this.maskKeyPress = false;\n this.isFocus = false;\n this.isInitial = false;\n this.isIosInvalid = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL$1, COMPONENT$1, 'e-lib']);\n this.angularTagName = null;\n this.formElement = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n for (var i = 0; i < this.element.attributes.length; i++) {\n input.setAttribute(this.element.attributes[i].nodeName, this.element.attributes[i].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n if (this.element.hasAttribute('id')) {\n this.element.removeAttribute('id');\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-maskedtextbox');\n this.element.classList.add('e-mask-container');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttrToElement();\n this.checkHtmlAttributes(false);\n if (this.formElement) {\n this.initInputValue = this.value;\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n MaskedTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initializes the component rendering.\n *\n * @returns {void}\n * @private\n */\n MaskedTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n if (this.floatLabelType === 'Never') {\n addClass([this.element], INPUT);\n }\n this.createWrapper();\n this.updateHTMLAttrToWrapper();\n if (this.element.name === '') {\n this.element.setAttribute('name', this.element.id);\n }\n this.isInitial = true;\n this.resetMaskedTextBox();\n this.isInitial = false;\n this.setMaskPlaceholder(true, false);\n this.setWidth(this.width);\n this.preEleVal = this.element.value;\n if (!Browser.isDevice && (Browser.info.version === '11.0' || Browser.info.name === 'edge')) {\n this.element.blur();\n }\n if (Browser.isDevice && Browser.isIos) {\n this.element.blur();\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder') && !this.element.hasAttribute('aria-label')) {\n this.element.setAttribute('aria-label', 'maskedtextbox');\n }\n this.renderComplete();\n }\n };\n MaskedTextBox.prototype.updateHTMLAttrToElement = 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 if (wrapperAttr.indexOf(key) < 0) {\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n MaskedTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getValidClassList(newClass), [this.inputObj.container], this.getValidClassList(oldClass));\n };\n MaskedTextBox.prototype.getValidClassList = function (maskClassName) {\n var result = maskClassName;\n if (!isNullOrUndefined(maskClassName) && maskClassName !== '') {\n result = (maskClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n MaskedTextBox.prototype.updateHTMLAttrToWrapper = 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 if (wrapperAttr.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValues = (this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValues !== '') {\n addClass([this.inputObj.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var maskStyle = this.inputObj.container.getAttribute(key);\n maskStyle = !isNullOrUndefined(maskStyle) ? (maskStyle + this.htmlAttributes[\"\" + key]) :\n this.htmlAttributes[\"\" + key];\n this.inputObj.container.setAttribute(key, maskStyle);\n }\n else {\n this.inputObj.container.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n };\n MaskedTextBox.prototype.resetMaskedTextBox = function () {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.customRegExpCollec = [];\n this.undoCollec = [];\n this.redoCollec = [];\n if (this.promptChar && this.promptChar.length > 1) {\n this.promptChar = this.promptChar[0];\n }\n createMask.call(this);\n applyMask.call(this);\n if (this.mask === null || this.mask === '' && this.value !== undefined) {\n setElementValue.call(this, this.value);\n }\n var val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (!this.isInitial) {\n unwireEvents.call(this);\n }\n wireEvents.call(this);\n };\n MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) {\n if (dynamicPlaceholder || this.placeholder) {\n Input.setPlaceholder(this.placeholder, this.element);\n if ((this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') ||\n this.element.value === this.promptMask && this.floatLabelType === 'Never') {\n setElementValue.call(this, '');\n }\n }\n };\n MaskedTextBox.prototype.setWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.inputObj.container.style.width = formatUnit(width);\n this.element.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n var elementWidth = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n this.inputObj.container.style.width = elementWidth;\n this.element.style.width = elementWidth;\n }\n }\n };\n MaskedTextBox.prototype.checkHtmlAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes)\n : ['placeholder', 'disabled', 'value', 'readonly'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var key = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'placeholder':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['enabled'] === undefined)) || isDynamic) {\n var isEnabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: isEnabled }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['value'] === undefined)) || isDynamic) {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['readonly'] === undefined)) || isDynamic) {\n var isReadonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: isReadonly }, !isDynamic);\n }\n break;\n }\n }\n }\n };\n MaskedTextBox.prototype.createWrapper = function () {\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = this.getValidClassList(this.cssClass);\n }\n this.inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n }, this.createElement);\n this.inputObj.container.setAttribute('class', ROOT$1 + ' ' + this.inputObj.container.getAttribute('class'));\n };\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {MaskedTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {MaskedTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @hidden\n */\n MaskedTextBox.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 'value':\n setMaskValue.call(this, this.value);\n if (this.placeholder && !this.isFocus) {\n this.setMaskPlaceholder(false, false);\n }\n if (this.value === '' && oldProp.value != null) {\n this.element.selectionStart = 0;\n this.element.selectionEnd = 0;\n }\n break;\n case 'placeholder':\n this.setMaskPlaceholder(true, true);\n break;\n case 'width':\n this.setWidth(newProp.width);\n Input.calculateWidth(this.element, this.inputObj.container);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element, this.floatLabelType, this.inputObj.container);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]);\n break;\n case 'customCharacters':\n this.customCharacters = newProp.customCharacters;\n this.resetMaskedTextBox();\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.element, this.inputObj, undefined, this.createElement);\n bindClearEvent.call(this);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputObj);\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.checkHtmlAttributes(true);\n break;\n case 'mask':\n {\n var strippedValue_1 = this.value;\n this.mask = newProp.mask;\n this.maskedRegExp = [];\n this.updateValue(strippedValue_1);\n }\n break;\n case 'promptChar': {\n if (newProp.promptChar.length > 1) {\n newProp.promptChar = newProp.promptChar[0];\n }\n if (newProp.promptChar) {\n this.promptChar = newProp.promptChar;\n }\n else {\n this.promptChar = '_';\n }\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n if (this.promptMask === this.element.value) {\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n }\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n this.undoCollec = this.redoCollec = [];\n setElementValue.call(this, value);\n break;\n }\n }\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n };\n MaskedTextBox.prototype.updateValue = function (strippedVal) {\n this.resetMaskedTextBox();\n setMaskValue.call(this, strippedVal);\n };\n /**\n * Gets the value of the MaskedTextBox with the masked format.\n * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters.\n *\n * @returns {string} Returns the value with the masked format.\n */\n MaskedTextBox.prototype.getMaskedValue = function () {\n return unstrippedValue.call(this, this.element);\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n MaskedTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.isFocus = true;\n this.element.focus();\n addClass([this.inputObj.container], [MASKINPUT_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n MaskedTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.isFocus = false;\n this.element.blur();\n removeClass([this.inputObj.container], [MASKINPUT_FOCUS]);\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n MaskedTextBox.prototype.destroy = function () {\n unwireEvents.call(this);\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n if (this.inputObj) {\n this.inputObj.container.insertAdjacentElement('afterend', this.element);\n detach(this.inputObj.container);\n }\n this.blurEventArgs = null;\n Input.destroy({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n this.changeEventArgs = null;\n this.inputObj = null;\n _super.prototype.destroy.call(this);\n };\n __decorate$1([\n Property(null)\n ], MaskedTextBox.prototype, \"cssClass\", void 0);\n __decorate$1([\n Property(null)\n ], MaskedTextBox.prototype, \"width\", void 0);\n __decorate$1([\n Property(null)\n ], MaskedTextBox.prototype, \"placeholder\", void 0);\n __decorate$1([\n Property('Never')\n ], MaskedTextBox.prototype, \"floatLabelType\", void 0);\n __decorate$1([\n Property({})\n ], MaskedTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate$1([\n Property(true)\n ], MaskedTextBox.prototype, \"enabled\", void 0);\n __decorate$1([\n Property(false)\n ], MaskedTextBox.prototype, \"readonly\", void 0);\n __decorate$1([\n Property(false)\n ], MaskedTextBox.prototype, \"showClearButton\", void 0);\n __decorate$1([\n Property(false)\n ], MaskedTextBox.prototype, \"enablePersistence\", void 0);\n __decorate$1([\n Property(null)\n ], MaskedTextBox.prototype, \"mask\", void 0);\n __decorate$1([\n Property('_')\n ], MaskedTextBox.prototype, \"promptChar\", void 0);\n __decorate$1([\n Property(null)\n ], MaskedTextBox.prototype, \"value\", void 0);\n __decorate$1([\n Property(null)\n ], MaskedTextBox.prototype, \"customCharacters\", void 0);\n __decorate$1([\n Event()\n ], MaskedTextBox.prototype, \"created\", void 0);\n __decorate$1([\n Event()\n ], MaskedTextBox.prototype, \"destroyed\", void 0);\n __decorate$1([\n Event()\n ], MaskedTextBox.prototype, \"change\", void 0);\n __decorate$1([\n Event()\n ], MaskedTextBox.prototype, \"focus\", void 0);\n __decorate$1([\n Event()\n ], MaskedTextBox.prototype, \"blur\", void 0);\n MaskedTextBox = __decorate$1([\n NotifyPropertyChanges\n ], MaskedTextBox);\n return MaskedTextBox;\n}(Component));\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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/**\n * Configures the ticks data of the Slider.\n */\nvar TicksData = /** @__PURE__ @class */ (function (_super) {\n __extends$2(TicksData, _super);\n function TicksData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property('None')\n ], TicksData.prototype, \"placement\", void 0);\n __decorate$2([\n Property(10)\n ], TicksData.prototype, \"largeStep\", void 0);\n __decorate$2([\n Property(1)\n ], TicksData.prototype, \"smallStep\", void 0);\n __decorate$2([\n Property(false)\n ], TicksData.prototype, \"showSmallTicks\", void 0);\n __decorate$2([\n Property(null)\n ], TicksData.prototype, \"format\", void 0);\n return TicksData;\n}(ChildProperty));\n/**\n * It illustrates the color track data in slider.\n * {% codeBlock src='slider/colorrange/index.md' %}{% endcodeBlock %}\n */\nvar ColorRangeData = /** @__PURE__ @class */ (function (_super) {\n __extends$2(ColorRangeData, _super);\n function ColorRangeData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property(null)\n ], ColorRangeData.prototype, \"color\", void 0);\n __decorate$2([\n Property(null)\n ], ColorRangeData.prototype, \"start\", void 0);\n __decorate$2([\n Property(null)\n ], ColorRangeData.prototype, \"end\", void 0);\n return ColorRangeData;\n}(ChildProperty));\n/**\n * It illustrates the limit data in slider.\n * {% codeBlock src='slider/limits/index.md' %}{% endcodeBlock %}\n */\nvar LimitData = /** @__PURE__ @class */ (function (_super) {\n __extends$2(LimitData, _super);\n function LimitData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property(false)\n ], LimitData.prototype, \"enabled\", void 0);\n __decorate$2([\n Property(null)\n ], LimitData.prototype, \"minStart\", void 0);\n __decorate$2([\n Property(null)\n ], LimitData.prototype, \"minEnd\", void 0);\n __decorate$2([\n Property(null)\n ], LimitData.prototype, \"maxStart\", void 0);\n __decorate$2([\n Property(null)\n ], LimitData.prototype, \"maxEnd\", void 0);\n __decorate$2([\n Property(false)\n ], LimitData.prototype, \"startHandleFixed\", void 0);\n __decorate$2([\n Property(false)\n ], LimitData.prototype, \"endHandleFixed\", void 0);\n return LimitData;\n}(ChildProperty));\n/**\n * It illustrates the tooltip data in slider.\n */\nvar TooltipData = /** @__PURE__ @class */ (function (_super) {\n __extends$2(TooltipData, _super);\n function TooltipData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property('')\n ], TooltipData.prototype, \"cssClass\", void 0);\n __decorate$2([\n Property('Before')\n ], TooltipData.prototype, \"placement\", void 0);\n __decorate$2([\n Property('Focus')\n ], TooltipData.prototype, \"showOn\", void 0);\n __decorate$2([\n Property(false)\n ], TooltipData.prototype, \"isVisible\", void 0);\n __decorate$2([\n Property(null)\n ], TooltipData.prototype, \"format\", void 0);\n return TooltipData;\n}(ChildProperty));\nvar bootstrapTooltipOffset = 6;\nvar bootstrap4TooltipOffset = 3;\nvar classNames = {\n root: 'e-slider',\n rtl: 'e-rtl',\n sliderHiddenInput: 'e-slider-input',\n controlWrapper: 'e-control-wrapper',\n sliderHandle: 'e-handle',\n rangeBar: 'e-range',\n sliderButton: 'e-slider-button',\n firstButton: 'e-first-button',\n secondButton: 'e-second-button',\n scale: 'e-scale',\n tick: 'e-tick',\n large: 'e-large',\n tickValue: 'e-tick-value',\n sliderTooltip: 'e-slider-tooltip',\n sliderHover: 'e-slider-hover',\n sliderFirstHandle: 'e-handle-first',\n sliderSecondHandle: 'e-handle-second',\n sliderDisabled: 'e-disabled',\n sliderContainer: 'e-slider-container',\n horizontalTooltipBefore: 'e-slider-horizontal-before',\n horizontalTooltipAfter: 'e-slider-horizontal-after',\n verticalTooltipBefore: 'e-slider-vertical-before',\n verticalTooltipAfter: 'e-slider-vertical-after',\n materialTooltip: 'e-material-tooltip',\n materialTooltipOpen: 'e-material-tooltip-open',\n materialTooltipActive: 'e-tooltip-active',\n materialSlider: 'e-material-slider',\n sliderTrack: 'e-slider-track',\n sliderHorizantalColor: 'e-slider-horizantal-color',\n sliderVerticalColor: 'e-slider-vertical-color',\n sliderHandleFocused: 'e-handle-focused',\n verticalSlider: 'e-vertical',\n horizontalSlider: 'e-horizontal',\n sliderHandleStart: 'e-handle-start',\n sliderTooltipStart: 'e-material-tooltip-start',\n sliderTabHandle: 'e-tab-handle',\n sliderButtonIcon: 'e-button-icon',\n sliderSmallSize: 'e-small-size',\n sliderTickPosition: 'e-tick-pos',\n sliderFirstTick: 'e-first-tick',\n sliderLastTick: 'e-last-tick',\n sliderButtonClass: 'e-slider-btn',\n sliderTooltipWrapper: 'e-tooltip-wrap',\n sliderTabTrack: 'e-tab-track',\n sliderTabRange: 'e-tab-range',\n sliderActiveHandle: 'e-handle-active',\n sliderMaterialHandle: 'e-material-handle',\n sliderMaterialRange: 'e-material-range',\n sliderMaterialDefault: 'e-material-default',\n materialTooltipShow: 'e-material-tooltip-show',\n materialTooltipHide: 'e-material-tooltip-hide',\n readonly: 'e-read-only',\n limits: 'e-limits',\n limitBarDefault: 'e-limit-bar',\n limitBarFirst: 'e-limit-first',\n limitBarSecond: 'e-limit-second',\n dragHorizontal: 'e-drag-horizontal',\n dragVertical: 'e-drag-vertical'\n};\n/**\n * The Slider component allows the user to select a value or range\n * of values in-between a min and max range, by dragging the handle over the slider bar.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Slider = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Slider, _super);\n function Slider(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.horDir = 'left';\n _this.verDir = 'bottom';\n _this.transition = {\n handle: 'left .4s cubic-bezier(.25, .8, .25, 1), right .4s cubic-bezier(.25, .8, .25, 1), ' +\n 'top .4s cubic-bezier(.25, .8, .25, 1) , bottom .4s cubic-bezier(.25, .8, .25, 1)',\n rangeBar: 'all .4s cubic-bezier(.25, .8, .25, 1)'\n };\n _this.transitionOnMaterialTooltip = {\n handle: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, top 1ms ease-out',\n rangeBar: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, width 1ms ease-out, height 1ms ease-out'\n };\n _this.scaleTransform = 'transform .4s cubic-bezier(.25, .8, .25, 1)';\n _this.customAriaText = null;\n _this.drag = true;\n _this.isDragComplete = false;\n _this.initialTooltip = true;\n return _this;\n }\n Slider.prototype.preRender = function () {\n var localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };\n this.l10n = new L10n('slider', localeText, this.locale);\n this.isElementFocused = false;\n this.tickElementCollection = [];\n this.tooltipFormatInfo = {};\n this.ticksFormatInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.formChecker();\n };\n Slider.prototype.formChecker = function () {\n var formElement = closest(this.element, 'form');\n if (formElement) {\n this.isForm = true;\n // this condition needs to be checked, if the slider is going to be refreshed by `refresh()`\n // then we need to revert the slider `value` back to `formResetValue` to preserve the initial value\n if (!isNullOrUndefined(this.formResetValue)) {\n this.setProperties({ 'value': this.formResetValue }, true);\n }\n this.formResetValue = this.value;\n if (this.type === 'Range' &&\n (isNullOrUndefined(this.formResetValue) || typeof (this.formResetValue) !== 'object')) {\n this.formResetValue = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n else if (isNullOrUndefined(this.formResetValue)) {\n this.formResetValue = parseFloat(formatUnit(this.min));\n }\n this.formElement = formElement;\n }\n else {\n this.isForm = false;\n }\n };\n Slider.prototype.initCultureFunc = function () {\n this.internationalization = new Internationalization(this.locale);\n };\n Slider.prototype.initCultureInfo = function () {\n this.tooltipFormatInfo.format = (!isNullOrUndefined(this.tooltip.format)) ? this.tooltip.format : null;\n this.ticksFormatInfo.format = (!isNullOrUndefined(this.ticks.format)) ? this.ticks.format : null;\n };\n Slider.prototype.formatString = function (value, formatInfo) {\n var formatValue = null;\n var formatString = null;\n if ((value || value === 0)) {\n formatValue = this.formatNumber(value);\n var numberOfDecimals = this.numberOfDecimals(value);\n formatString = this.internationalization.getNumberFormat(formatInfo)(this.makeRoundNumber(value, numberOfDecimals));\n }\n return { elementVal: formatValue, formatString: formatString };\n };\n Slider.prototype.formatNumber = function (value) {\n var numberOfDecimals = this.numberOfDecimals(value);\n return this.internationalization.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(value);\n };\n Slider.prototype.numberOfDecimals = function (value) {\n var decimalPart = value.toString().split('.')[1];\n var numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n return numberOfDecimals;\n };\n Slider.prototype.makeRoundNumber = function (value, precision) {\n var decimals = precision || 0;\n return Number(value.toFixed(decimals));\n };\n Slider.prototype.fractionalToInteger = function (value) {\n value = (this.numberOfDecimals(value) === 0) ? Number(value).toFixed(this.noOfDecimals) : value;\n var tens = 1;\n for (var i = 0; i < this.noOfDecimals; i++) {\n tens *= 10;\n }\n value = Number((value * tens).toFixed(0));\n return value;\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Slider.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.initRender();\n this.wireEvents();\n this.setZindex();\n this.renderComplete();\n if (this.element.tagName === 'EJS-SLIDER') {\n if (this.getTheme(this.sliderContainer) === 'none') {\n setTimeout(function () {\n _this.refresh();\n }, 0);\n }\n }\n };\n Slider.prototype.initialize = function () {\n addClass([this.element], classNames.root);\n this.setCSSClass();\n };\n Slider.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width) && !isNullOrUndefined(this.sliderContainer)) {\n if (typeof width === 'number') {\n this.sliderContainer.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.sliderContainer.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n Slider.prototype.setCSSClass = function (oldCSSClass) {\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Slider.prototype.setEnabled = function () {\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {\n this.tooltipElement.classList.add(classNames.sliderDisabled);\n }\n this.unwireEvents();\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {\n this.tooltipElement.classList.remove(classNames.sliderDisabled);\n }\n this.wireEvents();\n }\n };\n Slider.prototype.getTheme = function (container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n };\n /**\n * Initialize the rendering\n *\n * @returns {void}\n * @private\n */\n Slider.prototype.initRender = function () {\n this.sliderContainer = this.createElement('div', { className: classNames.sliderContainer + ' ' + classNames.controlWrapper });\n this.element.parentNode.insertBefore(this.sliderContainer, this.element);\n this.sliderContainer.appendChild(this.element);\n this.sliderTrack = this.createElement('div', { className: classNames.sliderTrack });\n this.element.appendChild(this.sliderTrack);\n this.setElementWidth(this.width);\n this.element.tabIndex = -1;\n this.getThemeInitialization();\n this.setHandler();\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setOrientClass();\n this.hiddenInput = (this.createElement('input', {\n attrs: {\n type: 'hidden', value: (isNullOrUndefined(this.value) ? (isNullOrUndefined(this.min) ? '0' : this.min.toString()) : this.value.toString()),\n name: this.element.getAttribute('name') || this.element.getAttribute('id') ||\n '_' + (Math.random() * 1000).toFixed(0) + 'slider', class: classNames.sliderHiddenInput\n }\n }));\n this.hiddenInput.tabIndex = -1;\n this.sliderContainer.appendChild(this.hiddenInput);\n if (this.showButtons) {\n this.setButtons();\n }\n this.setEnableRTL();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n else {\n this.value = isNullOrUndefined(this.value) ? (isNullOrUndefined(this.min) ? 0 :\n parseFloat(formatUnit(this.min.toString()))) : this.value;\n }\n this.previousVal = this.type !== 'Range' ? this.checkHandleValue(parseFloat(formatUnit(this.value.toString()))) :\n [this.checkHandleValue(parseFloat(formatUnit(this.value[0].toString()))),\n this.checkHandleValue(parseFloat(formatUnit(this.value[1].toString())))];\n this.previousChanged = this.previousVal;\n if (!isNullOrUndefined(this.element.hasAttribute('name'))) {\n this.element.removeAttribute('name');\n }\n this.setValue();\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n }\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n }\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n if (this.readonly) {\n addClass([this.sliderContainer], [classNames.readonly]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.readonly]);\n }\n };\n Slider.prototype.getThemeInitialization = function () {\n this.isMaterial = this.getTheme(this.sliderContainer) === 'material'\n || this.getTheme(this.sliderContainer) === 'material-dark';\n this.isMaterial3 = this.getTheme(this.sliderContainer) === 'Material3'\n || this.getTheme(this.sliderContainer) === 'Material3-dark';\n this.isBootstrap = this.getTheme(this.sliderContainer) === 'bootstrap'\n || this.getTheme(this.sliderContainer) === 'bootstrap-dark';\n this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';\n this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';\n this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';\n this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';\n this.isFluent2 = this.getTheme(this.sliderContainer) === 'fluent2';\n this.isBootstrap5Dot3 = this.getTheme(this.sliderContainer) === 'bootstrap5.3';\n this.isMaterialTooltip = (this.isMaterial || this.isMaterial3) && this.type !== 'Range' && this.tooltip.isVisible;\n };\n Slider.prototype.createRangeBar = function () {\n if (this.type !== 'Default') {\n this.rangeBar = (this.createElement('div', { attrs: { class: classNames.rangeBar } }));\n this.element.appendChild(this.rangeBar);\n if (this.drag && this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n this.rangeBar.classList.add(classNames.dragHorizontal);\n }\n else {\n this.rangeBar.classList.add(classNames.dragVertical);\n }\n }\n }\n };\n Slider.prototype.createLimitBar = function () {\n var firstElementClassName = this.type !== 'Range' ? classNames.limitBarDefault :\n classNames.limitBarFirst;\n firstElementClassName += ' ' + classNames.limits;\n this.limitBarFirst = (this.createElement('div', {\n attrs: { class: firstElementClassName }\n }));\n this.element.appendChild(this.limitBarFirst);\n if (this.type === 'Range') {\n this.limitBarSecond = (this.createElement('div', {\n attrs: {\n class: classNames.limitBarSecond + ' ' + classNames.limits\n }\n }));\n this.element.appendChild(this.limitBarSecond);\n }\n };\n Slider.prototype.setOrientClass = function () {\n if (this.orientation !== 'Vertical') {\n this.sliderContainer.classList.remove(classNames.verticalSlider);\n this.sliderContainer.classList.add(classNames.horizontalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'horizontal');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'horizontal');\n }\n }\n else {\n this.sliderContainer.classList.remove(classNames.horizontalSlider);\n this.sliderContainer.classList.add(classNames.verticalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'vertical');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'vertical');\n }\n }\n };\n Slider.prototype.setAriaAttributes = function (element) {\n var _this = this;\n var min = this.min;\n var max = this.max;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n min = this.customValues[0];\n max = this.customValues[this.customValues.length - 1];\n }\n if (this.type !== 'Range') {\n attributes(element, {\n 'aria-valuemin': isNullOrUndefined(min) ? '0' : min.toString(), 'aria-valuemax': (isNullOrUndefined(max) ? '100' : max.toString())\n });\n }\n else {\n var range = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n [[min.toString(), (this.customValues[this.value[1]]).toString()],\n [(this.customValues[this.value[0]]).toString(), max.toString()]] :\n [[min.toString(), this.value[1].toString()], [this.value[0].toString(), max.toString()]];\n range.forEach(function (range, index) {\n var element = index === 0 ? _this.firstHandle : _this.secondHandle;\n if (element) {\n attributes(element, {\n 'aria-valuemin': range[0], 'aria-valuemax': range[1]\n });\n }\n });\n }\n };\n Slider.prototype.createSecondHandle = function () {\n this.secondHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'\n }\n });\n this.secondHandle.classList.add(classNames.sliderSecondHandle);\n this.element.appendChild(this.secondHandle);\n };\n Slider.prototype.createFirstHandle = function () {\n this.firstHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'\n }\n });\n this.firstHandle.classList.add(classNames.sliderFirstHandle);\n this.element.appendChild(this.firstHandle);\n if (this.isMaterialTooltip) {\n this.materialHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle + ' ' +\n classNames.sliderMaterialHandle\n }\n });\n this.element.appendChild(this.materialHandle);\n }\n };\n Slider.prototype.wireFirstHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.firstHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.firstHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.firstHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.firstHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.firstHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.firstHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.firstHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.wireSecondHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.secondHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.secondHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.secondHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.secondHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.secondHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.secondHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.secondHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.secondHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.handleStart = function () {\n if (this.type !== 'Range') {\n this.firstHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);\n if (this.isMaterialTooltip) {\n this.materialHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);\n if (this.tooltipElement) {\n this.tooltipElement.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderTooltipStart);\n }\n }\n }\n };\n Slider.prototype.transitionEnd = function (e) {\n if (e.propertyName !== 'transform') {\n this.handleStart();\n if (!this.enableAnimation) {\n this.getHandle().style.transition = 'none';\n }\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if ((this.isMaterial || this.isMaterial3) && this.tooltip.isVisible && this.type === 'Default') {\n this.tooltipElement.style.transition = this.transition.handle;\n }\n this.tooltipToggle(this.getHandle());\n this.closeTooltip();\n }\n };\n Slider.prototype.handleFocusOut = function () {\n if (this.firstHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.firstHandle.classList.remove(classNames.sliderHandleFocused);\n }\n if (this.type === 'Range') {\n if (this.secondHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.secondHandle.classList.remove(classNames.sliderHandleFocused);\n }\n }\n };\n Slider.prototype.handleFocus = function (e) {\n this.focusSliderElement();\n this.sliderBarClick(e);\n if (e.currentTarget === this.firstHandle) {\n this.firstHandle.classList.add(classNames.sliderHandleFocused);\n this.firstHandle.classList.add(classNames.sliderTabHandle);\n }\n else {\n this.secondHandle.classList.add(classNames.sliderHandleFocused);\n this.secondHandle.classList.add(classNames.sliderTabHandle);\n }\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n };\n Slider.prototype.handleOver = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover') {\n this.tooltipToggle(e.currentTarget);\n }\n if (this.type === 'Default') {\n this.tooltipToggle(this.getHandle());\n }\n };\n Slider.prototype.handleLeave = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover' &&\n !e.currentTarget.classList.contains(classNames.sliderHandleFocused) &&\n !e.currentTarget.classList.contains(classNames.sliderTabHandle)) {\n this.closeTooltip();\n }\n };\n Slider.prototype.setHandler = function () {\n this.createFirstHandle();\n if (this.type === 'Range') {\n this.createSecondHandle();\n }\n };\n Slider.prototype.setEnableRTL = function () {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n addClass([this.sliderContainer], classNames.rtl);\n }\n else {\n removeClass([this.sliderContainer], classNames.rtl);\n }\n var preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (this.enableRtl) {\n this.horDir = 'right';\n this.verDir = 'bottom';\n }\n else {\n this.horDir = 'left';\n this.verDir = 'bottom';\n }\n var currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (preDir !== currDir) {\n if (this.orientation === 'Horizontal') {\n setStyleAttribute(this.firstHandle, { 'right': '', 'left': 'auto' });\n if (this.type === 'Range') {\n setStyleAttribute(this.secondHandle, { 'top': '', 'left': 'auto' });\n }\n }\n }\n this.setBarColor();\n };\n Slider.prototype.tooltipValue = function () {\n var _this = this;\n var text;\n var args = {\n value: this.value,\n text: ''\n };\n if (this.initialTooltip) {\n this.initialTooltip = false;\n this.setTooltipContent();\n args.text = text = (typeof (this.tooltipObj.content) === 'function' ? this.tooltipObj.content() : this.tooltipObj.content);\n this.trigger('tooltipChange', args, function (observedArgs) {\n _this.addTooltipClass(observedArgs.text);\n if (text !== observedArgs.text) {\n _this.customAriaText = observedArgs.text;\n if (_this.enableHtmlSanitizer) {\n observedArgs.text = SanitizeHtmlHelper.sanitize(observedArgs.text.toString());\n }\n else {\n observedArgs.text = observedArgs.text.toString();\n }\n var contentTemp = function () {\n return observedArgs.text;\n };\n _this.tooltipObj.content = initializeCSPTemplate(contentTemp);\n _this.setAriaAttrValue(_this.firstHandle);\n if (_this.type === 'Range') {\n _this.setAriaAttrValue(_this.secondHandle);\n }\n }\n });\n if (this.isMaterialTooltip) {\n this.setPreviousVal('change', this.value);\n }\n }\n };\n Slider.prototype.setTooltipContent = function () {\n var content = this.formatContent(this.tooltipFormatInfo, false);\n var contentTemp = function () {\n return content;\n };\n this.tooltipObj.content = initializeCSPTemplate(contentTemp);\n };\n Slider.prototype.formatContent = function (formatInfo, ariaContent) {\n var content = '';\n var handle1 = this.handleVal1;\n var handle2 = this.handleVal2;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n handle1 = this.customValues[this.handleVal1];\n handle2 = this.customValues[this.handleVal2];\n }\n if (!ariaContent) {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle2, formatInfo)\n .formatString + ' - ' + this.formatString(handle1, formatInfo).formatString) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle1, formatInfo)\n .formatString + ' - ' + this.formatString(handle2, formatInfo).formatString) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(formatInfo.format)) ?\n this.formatString(handle1, formatInfo).formatString : handle1.toString();\n }\n }\n return content;\n }\n else {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle2, formatInfo).elementVal + ' - ' +\n this.formatString(handle1, formatInfo).elementVal) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle1, formatInfo).elementVal + ' - ' +\n this.formatString(handle2, formatInfo).elementVal) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n this.formatString(handle1, formatInfo).elementVal : handle1.toString();\n }\n }\n return content;\n }\n };\n Slider.prototype.addTooltipClass = function (content) {\n if (this.isMaterialTooltip) {\n var count = content.toString().length;\n if (!this.tooltipElement) {\n var cssClass = count > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;\n this.tooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;\n }\n else {\n var cssClass = count > 4 ?\n { oldCss: classNames.sliderMaterialDefault, newCss: classNames.sliderMaterialRange } :\n { oldCss: classNames.sliderMaterialRange, newCss: classNames.sliderMaterialDefault };\n this.tooltipElement.classList.remove(cssClass.oldCss);\n if (!this.tooltipElement.classList.contains(cssClass.newCss)) {\n this.tooltipElement.classList.add(cssClass.newCss);\n this.tooltipElement.style.transform = count > 4 ? 'scale(1)' :\n this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n }\n }\n };\n Slider.prototype.tooltipPlacement = function () {\n return this.orientation === 'Horizontal' ? (this.tooltip.placement === 'Before' ? 'TopCenter' : 'BottomCenter') :\n (this.tooltip.placement === 'Before' ? 'LeftCenter' : 'RightCenter');\n };\n Slider.prototype.tooltipBeforeOpen = function (args) {\n this.tooltipElement = args.element;\n if (this.tooltip.cssClass) {\n addClass([this.tooltipElement], this.tooltip.cssClass.split(' ').filter(function (css) { return css; }));\n }\n args.target.removeAttribute('aria-describedby');\n if (this.isMaterialTooltip) {\n this.tooltipElement.firstElementChild.classList.add(classNames.materialTooltipHide);\n this.handleStart();\n this.setTooltipTransform();\n }\n };\n Slider.prototype.tooltipCollision = function (position) {\n if (this.isBootstrap || this.isBootstrap4 || ((this.isMaterial || this.isMaterial3) && !this.isMaterialTooltip)) {\n var tooltipOffsetValue = this.isBootstrap4 ? bootstrap4TooltipOffset : bootstrapTooltipOffset;\n switch (position) {\n case 'TopCenter':\n this.tooltipObj.setProperties({ 'offsetY': -(tooltipOffsetValue) }, false);\n break;\n case 'BottomCenter':\n this.tooltipObj.setProperties({ 'offsetY': tooltipOffsetValue }, false);\n break;\n case 'LeftCenter':\n this.tooltipObj.setProperties({ 'offsetX': -(tooltipOffsetValue) }, false);\n break;\n case 'RightCenter':\n this.tooltipObj.setProperties({ 'offsetX': tooltipOffsetValue }, false);\n break;\n }\n }\n };\n Slider.prototype.materialTooltipEventCallBack = function (event) {\n this.sliderBarClick(event);\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n };\n Slider.prototype.wireMaterialTooltipEvent = function (destroy) {\n if (this.isMaterialTooltip) {\n if (!destroy) {\n EventHandler.add(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack, this);\n }\n else {\n EventHandler.remove(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack);\n }\n }\n };\n Slider.prototype.tooltipPositionCalculation = function (position) {\n var cssClass;\n switch (position) {\n case 'TopCenter':\n cssClass = classNames.horizontalTooltipBefore;\n break;\n case 'BottomCenter':\n cssClass = classNames.horizontalTooltipAfter;\n break;\n case 'LeftCenter':\n cssClass = classNames.verticalTooltipBefore;\n break;\n case 'RightCenter':\n cssClass = classNames.verticalTooltipAfter;\n break;\n }\n return cssClass;\n };\n Slider.prototype.getTooltipTransformProperties = function (className) {\n var transformProperties;\n if (this.tooltipElement) {\n var position = this.orientation === 'Horizontal' ?\n ((this.tooltipElement.clientHeight + 14) - (this.tooltipElement.clientHeight / 2)) :\n ((this.tooltipElement.clientWidth + 14) - (this.tooltipElement.clientWidth / 2));\n transformProperties = this.orientation === 'Horizontal' ?\n (className === classNames.horizontalTooltipBefore ? { rotate: 'rotate(45deg)', translate: \"translateY(\" + position + \"px)\" } :\n { rotate: 'rotate(225deg)', translate: \"translateY(\" + -(position) + \"px)\" }) :\n (className === classNames.verticalTooltipBefore ? { rotate: 'rotate(-45deg)', translate: \"translateX(\" + position + \"px)\" } :\n { rotate: 'rotate(-225deg)', translate: \"translateX(\" + (-position) + \"px)\" });\n }\n return transformProperties;\n };\n Slider.prototype.openMaterialTooltip = function () {\n var _this = this;\n if (this.isMaterialTooltip) {\n this.refreshTooltip(this.firstHandle);\n var tooltipContentElement = this.tooltipElement.firstElementChild;\n tooltipContentElement.classList.remove(classNames.materialTooltipHide);\n tooltipContentElement.classList.add(classNames.materialTooltipShow);\n this.firstHandle.style.cursor = 'default';\n this.tooltipElement.style.transition = this.scaleTransform;\n this.tooltipElement.classList.add(classNames.materialTooltipOpen);\n this.materialHandle.style.transform = 'scale(0)';\n if (tooltipContentElement.innerText.length > 4) {\n this.tooltipElement.style.transform = 'scale(1)';\n }\n else {\n this.tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n if (this.type === 'Default') {\n setTimeout(function () { if (_this.tooltipElement) {\n _this.tooltipElement.style.transition = _this.transition.handle;\n } }, 2500);\n }\n else {\n setTimeout(function () { if (_this.tooltipElement) {\n _this.tooltipElement.style.transition = 'none';\n } }, 2500);\n }\n }\n };\n Slider.prototype.closeMaterialTooltip = function () {\n var _this = this;\n if (this.isMaterialTooltip) {\n var tooltipContentElement = this.tooltipElement.firstElementChild;\n this.tooltipElement.style.transition = this.scaleTransform;\n tooltipContentElement.classList.remove(classNames.materialTooltipShow);\n tooltipContentElement.classList.add(classNames.materialTooltipHide);\n this.firstHandle.style.cursor = '-webkit-grab';\n this.firstHandle.style.cursor = 'grab';\n if (this.materialHandle) {\n this.materialHandle.style.transform = 'scale(1)';\n }\n this.tooltipElement.classList.remove(classNames.materialTooltipOpen);\n this.setTooltipTransform();\n this.tooltipTarget = undefined;\n setTimeout(function () { if (_this.tooltipElement) {\n _this.tooltipElement.style.transition = 'none';\n } }, 2500);\n }\n };\n Slider.prototype.checkTooltipPosition = function (args) {\n var tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);\n if (this.tooltipCollidedPosition === undefined ||\n this.tooltipCollidedPosition !== args.collidedPosition || !args.element.classList.contains(tooltipClass)) {\n if (this.isMaterialTooltip) {\n if (tooltipClass !== undefined) {\n args.element.classList.remove(this.previousTooltipClass);\n args.element.classList.add(tooltipClass);\n this.previousTooltipClass = tooltipClass;\n }\n if (args.element.style.transform && args.element.classList.contains(classNames.materialTooltipOpen) &&\n args.element.firstElementChild.innerText.length <= 4) {\n args.element.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n }\n this.tooltipCollidedPosition = args.collidedPosition;\n }\n if (this.isMaterialTooltip && this.tooltipElement && this.tooltipElement.style.transform.indexOf('translate') !== -1) {\n this.setTooltipTransform();\n }\n };\n Slider.prototype.setTooltipTransform = function () {\n var transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);\n if (isNullOrUndefined(this.tooltipElement)) {\n return;\n }\n if (this.tooltipElement.firstElementChild.innerText.length > 4) {\n this.tooltipElement.style.transform = transformProperties.translate + \" scale(0.01)\";\n }\n else {\n this.tooltipElement.style.transform = transformProperties.translate + \" \" + transformProperties.rotate + \" scale(0.01)\";\n }\n };\n Slider.prototype.renderTooltip = function () {\n this.tooltipObj = new Tooltip({\n showTipPointer: this.isBootstrap || this.isMaterial || this.isMaterial3 ||\n this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent || this.isFluent2 || this.isBootstrap5Dot3,\n cssClass: classNames.sliderTooltip,\n height: (this.isMaterial || this.isMaterial3) ? 30 : 'auto',\n animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },\n opensOn: 'Custom',\n beforeOpen: this.tooltipBeforeOpen.bind(this),\n beforeCollision: this.checkTooltipPosition.bind(this),\n beforeClose: this.tooltipBeforeClose.bind(this),\n enableHtmlSanitizer: this.enableHtmlSanitizer\n });\n this.tooltipObj.appendTo(this.firstHandle);\n this.initializeTooltipProps();\n };\n Slider.prototype.initializeTooltipProps = function () {\n var tooltipShowOn = (this.tooltip.showOn === 'Auto' ? 'Hover' : this.tooltip.showOn);\n this.setProperties({ tooltip: { showOn: tooltipShowOn } }, true);\n this.tooltipObj.position = this.tooltipPlacement();\n this.tooltipCollision(this.tooltipObj.position);\n [this.firstHandle, this.rangeBar, this.secondHandle].forEach(function (handle) {\n if (!isNullOrUndefined(handle)) {\n handle.style.transition = 'none';\n }\n });\n if (this.isMaterialTooltip) {\n this.sliderContainer.classList.add(classNames.materialSlider);\n this.tooltipValue();\n this.tooltipObj.animation.close.effect = 'None';\n this.tooltipObj.open(this.firstHandle);\n }\n };\n Slider.prototype.tooltipBeforeClose = function () {\n this.tooltipElement = undefined;\n this.tooltipCollidedPosition = undefined;\n };\n Slider.prototype.setButtons = function () {\n this.firstBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.firstButton });\n this.firstBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n if (this.isTailwind) {\n this.firstBtn.querySelector('span').classList.add('e-icons');\n }\n this.firstBtn.tabIndex = -1;\n this.secondBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.secondButton });\n this.secondBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n if (this.isTailwind) {\n this.secondBtn.querySelector('span').classList.add('e-icons');\n }\n this.secondBtn.tabIndex = -1;\n this.sliderContainer.classList.add(classNames.sliderButtonClass);\n this.sliderContainer.appendChild(this.firstBtn);\n this.sliderContainer.appendChild(this.secondBtn);\n this.sliderContainer.appendChild(this.element);\n this.buttonTitle();\n };\n Slider.prototype.buttonTitle = function () {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n this.l10n.setLocale(this.locale);\n var decrementTitle = this.l10n.getConstant('decrementTitle');\n var incrementTitle = this.l10n.getConstant('incrementTitle');\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': decrementTitle, title: decrementTitle });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });\n };\n Slider.prototype.buttonFocusOut = function () {\n if (this.isMaterial || this.isMaterial3) {\n this.getHandle().classList.remove('e-large-thumb-size');\n }\n };\n Slider.prototype.repeatButton = function (args) {\n var hVal = this.handleValueUpdate();\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var value;\n if (args.target.parentElement.classList.contains(classNames.firstButton)\n || args.target.classList.contains(classNames.firstButton)) {\n if (enabledRTL) {\n value = this.add(hVal, parseFloat(this.step.toString()), true);\n }\n else {\n value = this.add(hVal, parseFloat(this.step.toString()), false);\n }\n }\n else if (args.target.parentElement.classList.contains(classNames.secondButton)\n || (args.target.classList.contains(classNames.secondButton))) {\n if (enabledRTL) {\n value = this.add(hVal, parseFloat(this.step.toString()), false);\n }\n else {\n value = this.add(hVal, parseFloat(this.step.toString()), true);\n }\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n if (value >= this.min && value <= this.max) {\n this.changeHandleValue(value);\n this.tooltipToggle(this.getHandle());\n }\n };\n Slider.prototype.repeatHandlerMouse = function (args) {\n args.preventDefault();\n if (args.type === ('mousedown') || args.type === ('touchstart')) {\n this.buttonClick(args);\n this.repeatInterval = setInterval(this.repeatButton.bind(this), 180, args);\n }\n };\n Slider.prototype.materialChange = function () {\n if (!this.getHandle().classList.contains('e-large-thumb-size')) {\n this.getHandle().classList.add('e-large-thumb-size');\n }\n };\n Slider.prototype.focusHandle = function () {\n if (!this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.getHandle().classList.add(classNames.sliderTabHandle);\n }\n };\n Slider.prototype.repeatHandlerUp = function (e) {\n this.changeEvent('changed', e);\n this.closeTooltip();\n clearInterval(this.repeatInterval);\n this.getHandle().focus();\n };\n Slider.prototype.customTickCounter = function (bigNum) {\n var tickCount = 4;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n if (bigNum > 4) {\n tickCount = 3;\n }\n if (bigNum > 7) {\n tickCount = 2;\n }\n if (bigNum > 14) {\n tickCount = 1;\n }\n if (bigNum > 28) {\n tickCount = 0;\n }\n }\n return tickCount;\n };\n Slider.prototype.renderScale = function () {\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n this.noOfDecimals = this.numberOfDecimals(this.step);\n this.ul = this.createElement('ul', {\n className: classNames.scale + ' ' + 'e-' + orien + '-scale ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', 'aria-hidden': 'true' }\n });\n this.ul.style.zIndex = '-1';\n if (Browser.isAndroid && orien === 'h') {\n this.ul.classList.add(classNames.sliderTickPosition);\n }\n var smallStep = this.ticks.smallStep;\n if (!this.ticks.showSmallTicks) {\n if (this.ticks.largeStep > 0) {\n smallStep = this.ticks.largeStep;\n }\n else {\n smallStep = (parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)));\n }\n }\n else if (smallStep <= 0) {\n smallStep = parseFloat(formatUnit(this.step));\n }\n var min = this.fractionalToInteger(this.min);\n var max = this.fractionalToInteger(this.max);\n var steps = this.fractionalToInteger(smallStep);\n var bigNum = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 && this.customValues.length - 1;\n var customStep = this.customTickCounter(bigNum);\n var count = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n (bigNum * customStep) + bigNum : Math.abs((max - min) / steps);\n this.element.appendChild(this.ul);\n var li;\n var start = parseFloat(this.min.toString());\n if (orien === 'v') {\n start = parseFloat(this.max.toString());\n }\n var left = 0;\n var islargeTick;\n var tickWidth = 100 / count;\n if (tickWidth === Infinity) {\n tickWidth = 5;\n }\n for (var i = 0, y = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n this.customValues.length - 1 : 0, k = 0; i <= count; i++) {\n li = (this.createElement('li', {\n attrs: {\n class: classNames.tick, role: 'presentation',\n 'aria-hidden': 'true'\n }\n }));\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n islargeTick = i % (customStep + 1) === 0;\n if (islargeTick) {\n if (orien === 'h') {\n start = this.customValues[k];\n k++;\n }\n else {\n start = this.customValues[y];\n y--;\n }\n li.setAttribute('title', start.toString());\n }\n }\n else {\n li.setAttribute('title', start.toString());\n if (this.numberOfDecimals(this.max) === 0 && this.numberOfDecimals(this.min) === 0 &&\n this.numberOfDecimals(this.step) === 0) {\n if (orien === 'h') {\n islargeTick = ((start - parseFloat(this.min.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(start - parseFloat(this.max.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n }\n else {\n var largestep = this.fractionalToInteger(this.ticks.largeStep);\n var startValue = this.fractionalToInteger(start);\n if (orien === 'h') {\n islargeTick = ((startValue - min) % largestep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(startValue - parseFloat(max.toString())) % largestep === 0) ? true : false;\n }\n }\n }\n if (islargeTick) {\n li.classList.add(classNames.large);\n }\n if (orien === 'h') {\n li.style.width = tickWidth + '%';\n }\n else {\n li.style.height = tickWidth + '%';\n }\n var repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;\n if (islargeTick) {\n for (var j = 0; j < repeat; j++) {\n this.createTick(li, start);\n }\n }\n else if (isNullOrUndefined(this.customValues)) {\n this.formatTicksValue(li, start);\n }\n this.ul.appendChild(li);\n this.tickElementCollection.push(li);\n var decimalPoints = void 0;\n if (isNullOrUndefined(this.customValues)) {\n if (this.numberOfDecimals(smallStep) > this.numberOfDecimals(start)) {\n decimalPoints = this.numberOfDecimals(smallStep);\n }\n else {\n decimalPoints = this.numberOfDecimals(start);\n }\n if (orien === 'h') {\n start = this.makeRoundNumber(start + smallStep, decimalPoints);\n }\n else {\n if (this.min > this.max) {\n start = this.makeRoundNumber(start + smallStep, decimalPoints);\n }\n else {\n start = this.makeRoundNumber(start - smallStep, decimalPoints);\n }\n }\n left = this.makeRoundNumber(left + smallStep, decimalPoints);\n }\n }\n this.ticksAlignment(orien, tickWidth);\n };\n Slider.prototype.ticksAlignment = function (orien, tickWidth, triggerEvent) {\n if (triggerEvent === void 0) { triggerEvent = true; }\n this.firstChild = this.ul.firstElementChild;\n this.lastChild = this.ul.lastElementChild;\n this.firstChild.classList.add(classNames.sliderFirstTick);\n this.lastChild.classList.add(classNames.sliderLastTick);\n this.sliderContainer.classList.add(classNames.scale + '-' + this.ticks.placement.toLowerCase());\n if (orien === 'h') {\n this.firstChild.style.width = tickWidth / 2 + '%';\n this.lastChild.style.width = tickWidth / 2 + '%';\n }\n else {\n this.firstChild.style.height = tickWidth / 2 + '%';\n this.lastChild.style.height = tickWidth / 2 + '%';\n }\n var eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };\n if (triggerEvent) {\n this.trigger('renderedTicks', eventArgs);\n }\n this.scaleAlignment();\n };\n Slider.prototype.createTick = function (li, start) {\n var span = this.createElement('span', {\n className: classNames.tickValue + ' ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', 'aria-hidden': 'true' }\n });\n li.appendChild(span);\n if (isNullOrUndefined(this.customValues)) {\n this.formatTicksValue(li, start, span);\n }\n else {\n if (this.enableHtmlSanitizer) {\n span.innerHTML = SanitizeHtmlHelper.sanitize(start.toString());\n }\n else {\n span.innerHTML = start.toString();\n }\n }\n };\n Slider.prototype.formatTicksValue = function (li, start, spanElement) {\n var _this = this;\n var tickText = this.formatNumber(start);\n var text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?\n this.formatString(start, this.ticksFormatInfo).formatString : tickText;\n var eventArgs = { value: start, text: text, tickElement: li };\n this.trigger('renderingTicks', eventArgs, function (observedArgs) {\n li.setAttribute('title', observedArgs.text.toString());\n if (spanElement) {\n if (_this.enableHtmlSanitizer) {\n spanElement.innerHTML = SanitizeHtmlHelper.sanitize(observedArgs.text.toString());\n }\n else {\n spanElement.innerHTML = observedArgs.text.toString();\n }\n }\n });\n };\n Slider.prototype.scaleAlignment = function () {\n this.tickValuePosition();\n if (this.orientation === 'Vertical') {\n if (this.element.getBoundingClientRect().width <= 15) {\n this.sliderContainer.classList.add(classNames.sliderSmallSize);\n }\n else {\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n }\n else {\n if (this.element.getBoundingClientRect().height <= 15) {\n this.sliderContainer.classList.add(classNames.sliderSmallSize);\n }\n else {\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n }\n };\n Slider.prototype.tickValuePosition = function () {\n this.firstChild = this.element.querySelector('ul').children[0];\n var first = this.firstChild.getBoundingClientRect();\n var firstChild;\n var otherChild;\n var smallStep = this.ticks.smallStep;\n var count = Math.abs((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)))) / smallStep;\n if (this.firstChild.children.length > 0) {\n firstChild = this.firstChild.children[0].getBoundingClientRect();\n }\n var tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +\n classNames.large + ' .' + classNames.tickValue)];\n var other;\n if (this.ticks.placement === 'Both') {\n other = [].slice.call(tickElements[0], 2);\n }\n else {\n other = [].slice.call(tickElements[0], 1);\n }\n var tickWidth = this.orientation === 'Vertical' ?\n (first.height * 2) : (first.width * 2);\n for (var i = 0; i < this.firstChild.children.length; i++) {\n if (this.orientation === 'Vertical') {\n this.firstChild.children[i].style.top = -(firstChild.height / 2) + 'px';\n }\n else {\n if (!this.enableRtl) {\n this.firstChild.children[i].style.left = -(firstChild.width / 2) + 'px';\n }\n else {\n this.firstChild.children[i].style.left = (tickWidth -\n this.firstChild.children[i].getBoundingClientRect().width) / 2 + 'px';\n }\n }\n }\n for (var i = 0; i < other.length; i++) {\n otherChild = other[i].getBoundingClientRect();\n if (this.orientation === 'Vertical') {\n setStyleAttribute(other[i], { top: (tickWidth - otherChild.height) / 2 + 'px' });\n }\n else {\n setStyleAttribute(other[i], { left: (tickWidth - otherChild.width) / 2 + 'px' });\n }\n }\n if (this.enableRtl && this.lastChild.children.length && count !== 0) {\n this.lastChild.children[0].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n if (this.ticks.placement === 'Both') {\n this.lastChild.children[1].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n }\n }\n if (count === 0) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.left = this.firstHandle.style.left;\n }\n else {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.right = this.firstHandle.style.right;\n this.firstChild.children[0].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n if (this.ticks.placement === 'Both') {\n this.firstChild.children[1].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n }\n }\n }\n if (this.orientation === 'Vertical') {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n }\n }\n };\n Slider.prototype.setAriaAttrValue = function (element) {\n var ariaValueText;\n var isTickFormatted = ((!isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format))) ? true : false;\n var text = !isTickFormatted ?\n this.formatContent(this.ticksFormatInfo, false) : this.formatContent(this.tooltipFormatInfo, false);\n var valuenow = isTickFormatted ? this.formatContent(this.ticksFormatInfo, true) :\n this.formatContent(this.tooltipFormatInfo, true);\n text = (!this.customAriaText) ? (text) : (this.customAriaText);\n if (text.split(' - ').length === 2) {\n ariaValueText = text.split(' - ');\n }\n else {\n ariaValueText = [text, text];\n }\n this.setAriaAttributes(element);\n if (this.type !== 'Range') {\n attributes(element, { 'aria-valuenow': valuenow, 'aria-valuetext': text });\n }\n else {\n if (!this.enableRtl) {\n if (element === this.firstHandle) {\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] });\n }\n else {\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] });\n }\n }\n else {\n if (element === this.firstHandle) {\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] });\n }\n else {\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] });\n }\n }\n }\n };\n Slider.prototype.handleValueUpdate = function () {\n var hVal;\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n hVal = this.handleVal1;\n }\n else {\n hVal = this.handleVal2;\n }\n }\n else {\n hVal = this.handleVal1;\n }\n return hVal;\n };\n Slider.prototype.getLimitCorrectedValues = function (value) {\n if (this.type === 'MinRange' || this.type === 'Default') {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n if (this.activeHandle === 1) {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n value = (this.getLimitValueAndPosition(value, this.limits.maxStart, this.limits.maxEnd))[0];\n }\n }\n return value;\n };\n Slider.prototype.focusSliderElement = function () {\n if (!this.isElementFocused) {\n this.element.focus();\n this.isElementFocused = true;\n }\n };\n Slider.prototype.buttonClick = function (args) {\n this.focusSliderElement();\n var value;\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var hVal = this.handleValueUpdate();\n if ((args.keyCode === 40) || (args.keyCode === 37)\n || args.currentTarget.classList.contains(classNames.firstButton)) {\n if (enabledRTL) {\n value = this.add(hVal, parseFloat(this.step.toString()), true);\n }\n else {\n value = this.add(hVal, parseFloat(this.step.toString()), false);\n }\n }\n else if ((args.keyCode === 38) || (args.keyCode === 39) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n if (enabledRTL) {\n value = this.add(hVal, parseFloat(this.step.toString()), false);\n }\n else {\n value = this.add(hVal, parseFloat(this.step.toString()), true);\n }\n }\n else if ((args.keyCode === 33\n || args.currentTarget.classList.contains(classNames.firstButton))) {\n if (enabledRTL) {\n value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false);\n }\n else {\n value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true);\n }\n }\n else if ((args.keyCode === 34) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n if (enabledRTL) {\n value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true);\n }\n else {\n value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false);\n }\n }\n else if ((args.keyCode === 36)) {\n value = parseFloat(this.min < this.max ? this.min.toString() : this.max.toString());\n }\n else if ((args.keyCode === 35)) {\n value = parseFloat(this.min < this.max ? this.max.toString() : this.min.toString());\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n this.changeHandleValue(value);\n if ((this.isMaterial || this.isMaterial3) && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipToggle(this.getHandle());\n this.getHandle().focus();\n this.focusHandle();\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.add(this.secondBtn, 'mouseup touchend', this.buttonUp, this);\n }\n };\n Slider.prototype.tooltipToggle = function (target) {\n if (this.isMaterialTooltip) {\n if (!this.tooltipElement.classList.contains(classNames.materialTooltipOpen)) {\n this.openMaterialTooltip();\n }\n else {\n this.refreshTooltip(this.firstHandle);\n }\n }\n else {\n if (!this.tooltipElement) {\n this.openTooltip(target);\n }\n else {\n this.refreshTooltip(target);\n }\n }\n };\n Slider.prototype.buttonUp = function (args) {\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.remove(this.firstBtn, 'mouseup touchend', this.buttonUp);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.remove(this.secondBtn, 'mouseup touchend', this.buttonUp);\n }\n };\n Slider.prototype.setRangeBar = function () {\n if (this.orientation === 'Horizontal' && !isNullOrUndefined(this.rangeBar)) {\n if (this.type === 'MinRange') {\n if (this.enableRtl) {\n this.rangeBar.style.right = '0px';\n }\n else {\n this.rangeBar.style.left = '0px';\n }\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n if (this.enableRtl) {\n this.rangeBar.style.right = this.handlePos1 + 'px';\n }\n else {\n this.rangeBar.style.left = this.handlePos1 + 'px';\n }\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else if (!isNullOrUndefined(this.rangeBar)) {\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = this.min > this.max ? this.handlePos1 + 'px' : '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.min > this.max ? this.element.clientHeight - this.handlePos1 + 'px' : this.handlePos1 + 'px' });\n }\n else {\n this.rangeBar.style.bottom = this.min > this.max ? this.handlePos2 + 'px' : this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.min > this.max ? this.handlePos1 - this.handlePos2 + 'px' : this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n };\n Slider.prototype.checkValidValueAndPos = function (value) {\n value = this.checkHandleValue(value);\n value = this.checkHandlePosition(value);\n return value;\n };\n Slider.prototype.setLimitBarPositions = function (fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarFirst.style.left = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n else {\n this.limitBarFirst.style.right = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n }\n else {\n this.limitBarFirst.style.bottom = (this.min < this.max ? fromMinPostion : fromMaxpostion) + 'px';\n this.limitBarFirst.style.height = (this.min < this.max ? (fromMaxpostion - fromMinPostion) : (fromMinPostion - fromMaxpostion)) + 'px';\n }\n if (this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarSecond.style.left = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n else {\n this.limitBarSecond.style.right = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n }\n else {\n this.limitBarSecond.style.bottom = (this.min < this.max ? toMinPostion : toMaxpostion) + 'px';\n this.limitBarSecond.style.height = (this.min < this.max ? (toMaxpostion - toMinPostion) : (toMinPostion - toMaxpostion)) + 'px';\n }\n }\n };\n Slider.prototype.setLimitBar = function () {\n if (this.type === 'Default' || this.type === 'MinRange') {\n var fromPosition = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromPosition = this.checkValidValueAndPos(fromPosition);\n var toPosition = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n toPosition = this.checkValidValueAndPos(toPosition);\n this.setLimitBarPositions(fromPosition, toPosition);\n }\n else if (this.type === 'Range') {\n var fromMinPostion = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMinPostion = this.checkValidValueAndPos(fromMinPostion);\n var fromMaxpostion = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMaxpostion = this.checkValidValueAndPos(fromMaxpostion);\n var toMinPostion = (this.getLimitValueAndPosition(this.limits.maxStart, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMinPostion = this.checkValidValueAndPos(toMinPostion);\n var toMaxpostion = (this.getLimitValueAndPosition(this.limits.maxEnd, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMaxpostion = this.checkValidValueAndPos(toMaxpostion);\n this.setLimitBarPositions(fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion);\n }\n };\n Slider.prototype.getLimitValueAndPosition = function (currentValue, minValue, maxValue, limitBar) {\n if (isNullOrUndefined(minValue)) {\n minValue = this.min < this.max ? this.min : this.max;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = minValue;\n }\n }\n if (isNullOrUndefined(maxValue)) {\n maxValue = this.min < this.max ? this.max : this.min;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = maxValue;\n }\n }\n if (currentValue < minValue) {\n currentValue = minValue;\n }\n if (currentValue > maxValue) {\n currentValue = maxValue;\n }\n return [currentValue, this.checkHandlePosition(currentValue)];\n };\n Slider.prototype.setValue = function () {\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n this.min = 0;\n this.max = this.customValues.length - 1;\n this.setBarColor();\n }\n this.setAriaAttributes(this.firstHandle);\n this.handleVal1 = isNullOrUndefined(this.value) ? this.checkHandleValue(parseFloat(this.min.toString())) :\n this.checkHandleValue(parseFloat(this.value.toString()));\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.preHandlePos1 = this.handlePos1;\n if (isNullOrUndefined(this.activeHandle)) {\n this.activeHandle = this.type === 'Range' ? 2 : 1;\n }\n if (this.type === 'Default' || this.type === 'MinRange') {\n if (this.limits.enabled) {\n var values = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values[0];\n this.handlePos1 = values[1];\n this.preHandlePos1 = this.handlePos1;\n }\n this.setHandlePosition(null);\n this.handleStart();\n this.value = this.handleVal1;\n this.setAriaAttrValue(this.firstHandle);\n this.changeEvent('changed', null);\n }\n else {\n this.validateRangeValue();\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n };\n Slider.prototype.rangeValueUpdate = function () {\n if (this.value === null || typeof (this.value) !== 'object') {\n this.value = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n };\n Slider.prototype.validateRangeValue = function () {\n this.rangeValueUpdate();\n this.setRangeValue();\n };\n Slider.prototype.modifyZindex = function () {\n if (this.type === 'Range' && !isNullOrUndefined(this.firstHandle) && !isNullOrUndefined(this.secondHandle)) {\n if (this.activeHandle === 1) {\n this.firstHandle.style.zIndex = (this.zIndex + 4) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 3) + '';\n }\n else {\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n }\n else if (this.isMaterialTooltip && this.tooltipElement) {\n this.tooltipElement.style.zIndex = getZindexPartial(this.element) + '';\n }\n };\n Slider.prototype.setHandlePosition = function (event) {\n var _this = this;\n var handle;\n var pos = (this.activeHandle === 1) ? this.handlePos1 : this.handlePos2;\n if (this.isMaterialTooltip) {\n handle = [this.firstHandle, this.materialHandle];\n }\n else {\n handle = [this.getHandle()];\n }\n this.handleStart();\n handle.forEach(function (handle) {\n if (isNullOrUndefined(handle)) {\n return;\n }\n if (_this.orientation === 'Horizontal') {\n if (_this.enableRtl) {\n handle.style.right = pos + \"px\";\n }\n else {\n handle.style.left = pos + \"px\";\n }\n }\n else {\n handle.style.bottom = pos + \"px\";\n }\n });\n this.changeEvent('change', event);\n };\n Slider.prototype.getHandle = function () {\n return (this.activeHandle === 1) ? this.firstHandle : this.secondHandle;\n };\n Slider.prototype.setRangeValue = function () {\n this.updateRangeValue();\n this.activeHandle = 1;\n this.setHandlePosition(null);\n this.activeHandle = 2;\n this.setHandlePosition(null);\n this.activeHandle = 1;\n };\n Slider.prototype.changeEvent = function (eventName, e) {\n var previous = eventName === 'change' ? this.previousVal : this.previousChanged;\n if (this.type !== 'Range') {\n this.setProperties({ 'value': this.handleVal1 }, true);\n if (previous !== this.value && (!this.isMaterialTooltip || !this.initialTooltip)) {\n this.trigger(eventName, this.changeEventArgs(eventName, e));\n this.initialTooltip = true;\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.firstHandle);\n }\n else {\n var value = this.value = [this.handleVal1, this.handleVal2];\n this.setProperties({ 'value': value }, true);\n if (previous.length === this.value.length\n && this.value[0] !== previous[0] || this.value[1] !== previous[1]) {\n this.initialTooltip = false;\n this.trigger(eventName, this.changeEventArgs(eventName, e));\n this.initialTooltip = true;\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.getHandle());\n }\n this.hiddenInput.value = this.value.toString();\n };\n Slider.prototype.changeEventArgs = function (eventName, e) {\n var eventArgs;\n if (this.tooltip.isVisible && this.tooltipObj && this.initialTooltip) {\n this.tooltipValue();\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: (typeof (this.tooltipObj.content) === 'function' ? this.tooltipObj.content() : this.tooltipObj.content), isInteracted: isNullOrUndefined(e) ? false : true\n };\n }\n else {\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: isNullOrUndefined(this.ticksFormatInfo.format) ? this.value.toString() :\n (this.type !== 'Range' ? this.formatString(this.value, this.ticksFormatInfo).formatString :\n (this.formatString(this.value[0], this.ticksFormatInfo).formatString + ' - ' +\n this.formatString(this.value[1], this.ticksFormatInfo).formatString)),\n isInteracted: isNullOrUndefined(e) ? false : true\n };\n }\n return eventArgs;\n };\n Slider.prototype.setPreviousVal = function (eventName, value) {\n if (eventName === 'change') {\n this.previousVal = value;\n }\n else {\n this.previousChanged = value;\n }\n };\n Slider.prototype.updateRangeValue = function () {\n var values = this.value.toString().split(',').map(Number);\n if ((this.enableRtl && this.orientation !== 'Vertical') || this.rtl) {\n this.value = [values[1], values[0]];\n }\n else {\n this.value = [values[0], values[1]];\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n this.handleVal1 = this.checkHandleValue(this.value[1]);\n this.handleVal2 = this.checkHandleValue(this.value[0]);\n }\n else {\n this.handleVal1 = this.checkHandleValue(this.value[0]);\n this.handleVal2 = this.checkHandleValue(this.value[1]);\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.min < this.max && this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n if (this.min > this.max && this.handlePos1 < this.handlePos2) {\n this.handlePos2 = this.handlePos1;\n this.handleVal2 = this.handleVal1;\n }\n this.preHandlePos1 = this.handlePos1;\n this.preHandlePos2 = this.handlePos2;\n if (this.limits.enabled) {\n this.activeHandle = 1;\n var values_1 = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values_1[0];\n this.handlePos1 = values_1[1];\n this.preHandlePos1 = this.handlePos1;\n this.activeHandle = 2;\n values_1 = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = values_1[0];\n this.handlePos2 = values_1[1];\n this.preHandlePos2 = this.handlePos2;\n }\n };\n Slider.prototype.checkHandlePosition = function (value) {\n var pos;\n value = (100 *\n (value - (parseFloat(formatUnit(this.min))))) / ((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (value / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (value / 100);\n }\n if (((parseFloat(formatUnit(this.max))) === (parseFloat(formatUnit(this.min))))) {\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width;\n }\n else {\n pos = this.element.getBoundingClientRect().height;\n }\n }\n return pos;\n };\n Slider.prototype.checkHandleValue = function (value) {\n if (this.min === this.max) {\n return (parseFloat(formatUnit(this.max)));\n }\n var handle = this.tempStartEnd();\n if (value < handle.start) {\n value = handle.start;\n }\n else if (value > handle.end) {\n value = handle.end;\n }\n return value;\n };\n /**\n * It is used to reposition slider.\n *\n * @returns {void}\n */\n Slider.prototype.reposition = function () {\n var _this = this;\n if (!isNullOrUndefined(this.firstHandle)) {\n this.firstHandle.style.transition = 'none';\n }\n if (this.type !== 'Default' && !isNullOrUndefined(this.rangeBar)) {\n this.rangeBar.style.transition = 'none';\n }\n if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle)) {\n this.secondHandle.style.transition = 'none';\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.handleVal2) {\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n }\n if (this.orientation === 'Horizontal') {\n if (this.enableRtl) {\n this.firstHandle.style.right = this.handlePos1 + \"px\";\n }\n else {\n this.firstHandle.style.left = this.handlePos1 + \"px\";\n }\n if (this.isMaterialTooltip && !isNullOrUndefined(this.materialHandle)) {\n if (this.enableRtl) {\n this.materialHandle.style.right = this.handlePos1 + \"px\";\n }\n else {\n this.materialHandle.style.left = this.handlePos1 + \"px\";\n }\n }\n if (this.type === 'MinRange' && !isNullOrUndefined(this.rangeBar)) {\n if (this.enableRtl) {\n this.rangeBar.style.right = '0px';\n }\n else {\n this.rangeBar.style.left = '0px';\n }\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle) && !isNullOrUndefined(this.rangeBar)) {\n if (this.enableRtl) {\n this.secondHandle.style.right = this.handlePos2 + \"px\";\n this.rangeBar.style.right = this.handlePos1 + 'px';\n }\n else {\n this.secondHandle.style.left = this.handlePos2 + \"px\";\n this.rangeBar.style.left = this.handlePos1 + 'px';\n }\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n this.firstHandle.style.bottom = this.handlePos1 + \"px\";\n if (this.isMaterialTooltip) {\n this.materialHandle.style.bottom = this.handlePos1 + \"px\";\n }\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = this.min > this.max ? this.handlePos1 + 'px' : '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.min > this.max ? this.element.clientHeight - this.handlePos1 + 'px' : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n this.secondHandle.style.bottom = this.handlePos2 + \"px\";\n this.rangeBar.style.bottom = this.min > this.max ? this.handlePos2 + 'px' : this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.min > this.max ? this.handlePos1 - this.handlePos2 + 'px' : this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None' && this.ul) {\n this.removeElement(this.ul);\n this.ul = undefined;\n this.renderScale();\n }\n this.handleStart();\n if (!this.tooltip.isVisible) {\n setTimeout(function () {\n if (!isNullOrUndefined(_this.firstHandle)) {\n _this.firstHandle.style.transition = _this.scaleTransform;\n }\n if (_this.type === 'Range' && !isNullOrUndefined(_this.secondHandle)) {\n _this.secondHandle.style.transition = _this.scaleTransform;\n }\n });\n }\n this.refreshTooltip(this.tooltipTarget);\n this.setBarColor();\n };\n Slider.prototype.changeHandleValue = function (value) {\n var position = null;\n if (this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n this.handleVal1 = this.checkHandleValue(value);\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.type === 'Range' && ((this.handlePos1 > this.handlePos2 && this.min < this.max) || (this.handlePos1 < this.handlePos2 && this.min > this.max))) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n if (this.handlePos1 !== this.preHandlePos1) {\n position = this.preHandlePos1 = this.handlePos1;\n }\n }\n this.modifyZindex();\n }\n else {\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n this.handleVal2 = this.checkHandleValue(value);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.type === 'Range' && ((this.handlePos2 < this.handlePos1 && this.min < this.max) || (this.handlePos2 > this.handlePos1 && this.min > this.max))) {\n this.handlePos2 = this.handlePos1;\n this.handleVal2 = this.handleVal1;\n }\n if (this.handlePos2 !== this.preHandlePos2) {\n position = this.preHandlePos2 = this.handlePos2;\n }\n }\n this.modifyZindex();\n }\n if (position !== null) {\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n this.setHandlePosition(null);\n }\n };\n Slider.prototype.tempStartEnd = function () {\n if (this.min > this.max) {\n return {\n start: this.max,\n end: this.min\n };\n }\n else {\n return {\n start: this.min,\n end: this.max\n };\n }\n };\n Slider.prototype.xyToPosition = function (position) {\n var pos;\n if (this.min === this.max) {\n return 100;\n }\n if (this.orientation === 'Horizontal') {\n var left = position.x - this.element.getBoundingClientRect().left;\n var num = this.element.offsetWidth / 100;\n this.val = (left / num);\n }\n else {\n var top_1 = position.y - this.element.getBoundingClientRect().top;\n var num = this.element.offsetHeight / 100;\n this.val = 100 - (top_1 / num);\n }\n var val = this.stepValueCalculation(this.val);\n if (val < 0) {\n val = 0;\n }\n else if (val > 100) {\n val = 100;\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n val = 100 - val;\n }\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (val / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (val / 100);\n }\n return pos;\n };\n Slider.prototype.stepValueCalculation = function (value) {\n if (this.step === 0) {\n this.step = 1;\n }\n var percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);\n var remain = value % Math.abs(percentStep);\n if (remain !== 0) {\n if ((percentStep / 2) > remain) {\n value -= remain;\n }\n else {\n value += Math.abs(percentStep) - remain;\n }\n }\n return value;\n };\n Slider.prototype.add = function (a, b, addition) {\n var x = Math.pow(10, 3);\n var val;\n if (addition) {\n val = (Math.round(a * x) + Math.round(b * x)) / x;\n }\n else {\n val = (Math.round(a * x) - Math.round(b * x)) / x;\n }\n return val;\n };\n Slider.prototype.positionToValue = function (pos) {\n var val;\n var diff = parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min));\n if (this.orientation === 'Horizontal') {\n val = (pos / this.element.getBoundingClientRect().width) * diff;\n }\n else {\n val = (pos / this.element.getBoundingClientRect().height) * diff;\n }\n var total = this.add(val, parseFloat(this.min.toString()), true);\n return (total);\n };\n Slider.prototype.sliderBarClick = function (evt) {\n evt.preventDefault();\n var pos;\n if (evt.type === 'mousedown' || evt.type === 'mouseup' || evt.type === 'click') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else if (evt.type === 'touchend' || evt.type === 'touchstart') {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n if (this.type === 'Range' && (this.min < (this.max) && (this.handlePos2 - handlepos) < (handlepos - this.handlePos1) || (this.min > this.max) && (this.handlePos1 - handlepos) > (handlepos - this.handlePos2))) {\n this.activeHandle = 2;\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n }\n this.modifyZindex();\n this.secondHandle.focus();\n }\n else {\n this.activeHandle = 1;\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.modifyZindex();\n this.firstHandle.focus();\n }\n if (this.isMaterialTooltip) {\n this.tooltipElement.classList.add(classNames.materialTooltipActive);\n }\n var focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement && this.getHandle() !== focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n var handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;\n var behindElement;\n if ((evt.type === 'click' || evt.type === 'mousedown') && evt.target === handle) {\n var eventX = evt.clientX, eventY = evt.clientY;\n behindElement = document.elementFromPoint(eventX, eventY);\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n var transition = (this.isMaterial || this.isMaterial3) && this.tooltip.isVisible ?\n this.transitionOnMaterialTooltip : this.transition;\n this.getHandle().style.transition = transition.handle;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = transition.rangeBar;\n }\n this.setHandlePosition(evt);\n if (this.isMaterialTooltip) {\n this.initialTooltip = false;\n }\n if (evt.target !== handle) {\n this.changeEvent('changed', evt);\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.handleValueAdjust = function (handleValue, assignValue, handleNumber) {\n if (handleNumber === 1) {\n this.handleVal1 = assignValue;\n this.handleVal2 = this.handleVal1 + this.minDiff;\n }\n else if (handleNumber === 2) {\n this.handleVal2 = assignValue;\n this.handleVal1 = this.handleVal2 - this.minDiff;\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n };\n Slider.prototype.dragRangeBarMove = function (event) {\n var _a, _b;\n if (event.type !== 'touchmove') {\n event.preventDefault();\n }\n this.rangeBarDragged = true;\n var pos;\n this.rangeBar.style.transition = 'none';\n this.firstHandle.style.transition = 'none';\n this.secondHandle.style.transition = 'none';\n var xPostion;\n var yPostion;\n if (event.type === 'mousemove') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\n }\n if (!(this.limits.enabled && this.limits.startHandleFixed) && !(this.limits.enabled && this.limits.endHandleFixed)) {\n if (!this.enableRtl) {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion + this.secondPartRemain };\n }\n else {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion + this.secondPartRemain };\n }\n if (this.min > this.max) {\n this.handlePos2 = this.xyToPosition(pos);\n this.handleVal2 = this.positionToValue(this.handlePos2);\n }\n else {\n this.handlePos1 = this.xyToPosition(pos);\n this.handleVal1 = this.positionToValue(this.handlePos1);\n }\n if (!this.enableRtl) {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion - this.firstPartRemain };\n }\n else {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion - this.firstPartRemain };\n }\n if (this.min > this.max) {\n this.handlePos1 = this.xyToPosition(pos);\n this.handleVal1 = this.positionToValue(this.handlePos1);\n }\n else {\n this.handlePos2 = this.xyToPosition(pos);\n this.handleVal2 = this.positionToValue(this.handlePos2);\n }\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = value[0];\n this.handlePos1 = value[1];\n if (this.handleVal1 === this.limits.minEnd) {\n this.handleValueAdjust(this.handleVal1, this.limits.minEnd, 1);\n }\n if (this.handleVal1 === this.limits.minStart) {\n this.handleValueAdjust(this.handleVal1, this.limits.minStart, 1);\n }\n value = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = value[0];\n this.handlePos2 = value[1];\n if (this.handleVal2 === this.limits.maxStart) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxStart, 2);\n }\n if (this.handleVal2 === this.limits.maxEnd) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxEnd, 2);\n }\n }\n if (this.handleVal2 === (this.min > this.max ? this.min : this.max)) {\n this.handleValueAdjust(this.handleVal2, (this.min > this.max ? this.min : this.max), 2);\n }\n if (this.handleVal1 === (this.min > this.max ? this.max : this.min)) {\n this.handleValueAdjust(this.handleVal1, (this.min > this.max ? this.max : this.min), 1);\n }\n }\n this.activeHandle = 1;\n this.setHandlePosition(event);\n this.activeHandle = 2;\n this.setHandlePosition(event);\n this.tooltipToggle(this.rangeBar);\n this.setRangeBar();\n };\n Slider.prototype.sliderBarUp = function (event) {\n this.changeEvent('changed', event);\n this.handleFocusOut();\n this.firstHandle.classList.remove(classNames.sliderActiveHandle);\n if (this.type === 'Range') {\n this.initialTooltip = false;\n this.secondHandle.classList.remove(classNames.sliderActiveHandle);\n }\n this.closeTooltip();\n if (this.isMaterial || this.isMaterial3) {\n this.getHandle().classList.remove('e-large-thumb-size');\n if (this.isMaterialTooltip) {\n this.tooltipElement.classList.remove(classNames.materialTooltipActive);\n }\n }\n EventHandler.remove(document, 'mousemove touchmove', this.sliderBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.sliderBarUp);\n };\n Slider.prototype.sliderBarMove = function (evt) {\n if (evt.type !== 'touchmove') {\n evt.preventDefault();\n }\n var pos;\n if (evt.type === 'mousemove') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n handlepos = Math.round(handlepos);\n if (this.type !== 'Range' && this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n var valueAndPostion = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handlepos = valueAndPostion[1];\n handleVal = valueAndPostion[0];\n }\n this.handlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n }\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if ((this.min < this.max && handlepos > this.handlePos2 || (this.min > this.max && handlepos < this.handlePos2))) {\n handlepos = this.handlePos2;\n handleVal = this.handleVal2;\n }\n if (handlepos !== this.preHandlePos1) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n this.activeHandle = 1;\n }\n }\n }\n else if (this.activeHandle === 2) {\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if ((this.min < this.max && handlepos < this.handlePos1) || (this.min > this.max && handlepos > this.handlePos1)) {\n handlepos = this.handlePos1;\n handleVal = this.handleVal1;\n }\n if (handlepos !== this.preHandlePos2) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n this.activeHandle = 2;\n }\n }\n }\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n this.getHandle().style.transition = this.scaleTransform;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n this.setHandlePosition(evt);\n if ((this.isMaterial || this.isMaterial3) && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipToggle(this.getHandle());\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.dragRangeBarUp = function (event) {\n if (!this.rangeBarDragged) {\n this.focusSliderElement();\n this.sliderBarClick(event);\n }\n else {\n this.isDragComplete = true;\n }\n this.changeEvent('changed', event);\n this.closeTooltip();\n EventHandler.remove(document, 'mousemove touchmove', this.dragRangeBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.dragRangeBarUp);\n this.rangeBarDragged = false;\n };\n Slider.prototype.checkRepeatedValue = function (currentValue) {\n if (this.type === 'Range') {\n var previousVal = this.enableRtl && this.orientation !== 'Vertical' ? (this.activeHandle === 1 ?\n this.previousVal[1] : this.previousVal[0]) :\n (this.activeHandle === 1 ? this.previousVal[0] : this.previousVal[1]);\n if (currentValue === previousVal) {\n return 0;\n }\n }\n else {\n if (currentValue === this.previousVal) {\n return 0;\n }\n }\n return 1;\n };\n Slider.prototype.refreshTooltip = function (target) {\n if (this.tooltip.isVisible && this.tooltipObj) {\n this.tooltipValue();\n if (target) {\n this.tooltipObj.refresh(target);\n this.tooltipTarget = target;\n }\n }\n };\n Slider.prototype.openTooltip = function (target) {\n if (this.tooltip.isVisible && this.tooltipObj && !this.isMaterialTooltip) {\n this.tooltipValue();\n this.tooltipObj.open(target);\n this.tooltipTarget = target;\n }\n };\n Slider.prototype.closeTooltip = function () {\n if (this.tooltip.isVisible && this.tooltipObj && this.tooltip.showOn !== 'Always' && !this.isMaterialTooltip) {\n this.tooltipValue();\n this.tooltipObj.close();\n this.tooltipTarget = undefined;\n }\n };\n Slider.prototype.keyDown = function (event) {\n switch (event.keyCode) {\n case 37:\n case 38:\n case 39:\n case 40:\n case 33:\n case 34:\n case 36:\n case 35:\n event.preventDefault();\n this.buttonClick(event);\n break;\n }\n };\n Slider.prototype.wireButtonEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.firstBtn, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.secondBtn, 'focusout', this.sliderFocusOut, this);\n }\n else {\n EventHandler.remove(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.firstBtn, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.secondBtn, 'focusout', this.sliderFocusOut);\n }\n };\n Slider.prototype.rangeBarMousedown = function (event) {\n var _a, _b;\n event.preventDefault();\n this.focusSliderElement();\n if (this.type === 'Range' && this.drag && event.target === this.rangeBar) {\n var xPostion = void 0;\n var yPostion = void 0;\n if (event.type === 'mousedown') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else if (event.type === 'touchstart') {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\n }\n if (this.orientation === 'Horizontal') {\n this.firstPartRemain = xPostion - this.rangeBar.getBoundingClientRect().left;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().right - xPostion;\n }\n else {\n this.firstPartRemain = yPostion - this.rangeBar.getBoundingClientRect().top;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().bottom - yPostion;\n }\n this.minDiff = this.handleVal2 - this.handleVal1;\n this.tooltipToggle(this.rangeBar);\n var focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n EventHandler.add(document, 'mousemove touchmove', this.dragRangeBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.dragRangeBarUp, this);\n }\n };\n Slider.prototype.elementClick = function (event) {\n if (this.isDragComplete) {\n this.isDragComplete = false;\n return;\n }\n event.preventDefault();\n this.focusSliderElement();\n this.sliderBarClick(event);\n this.focusHandle();\n };\n Slider.prototype.wireEvents = function () {\n this.onresize = this.reposition.bind(this);\n window.addEventListener('resize', this.onresize);\n if (this.enabled && !this.readonly) {\n EventHandler.add(this.element, 'click', this.elementClick, this);\n if (this.type === 'Range' && this.drag) {\n EventHandler.add(this.rangeBar, 'mousedown touchstart', this.rangeBarMousedown, this);\n }\n EventHandler.add(this.sliderContainer, 'keydown', this.keyDown, this);\n EventHandler.add(this.sliderContainer, 'keyup', this.keyUp, this);\n EventHandler.add(this.element, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover, this);\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n if (this.showButtons) {\n this.wireButtonEvt(false);\n }\n this.wireMaterialTooltipEvent(false);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n }\n };\n Slider.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.elementClick);\n if (this.type === 'Range' && this.drag) {\n EventHandler.remove(this.rangeBar, 'mousedown touchstart', this.rangeBarMousedown);\n }\n EventHandler.remove(this.sliderContainer, 'keydown', this.keyDown);\n EventHandler.remove(this.sliderContainer, 'keyup', this.keyUp);\n EventHandler.remove(this.element, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover);\n this.wireFirstHandleEvt(true);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(true);\n }\n if (this.showButtons) {\n this.wireButtonEvt(true);\n }\n this.wireMaterialTooltipEvent(true);\n EventHandler.remove(this.element, 'reset', this.formResetHandler);\n };\n Slider.prototype.formResetHandler = function () {\n this.setProperties({ 'value': this.formResetValue }, true);\n this.setValue();\n };\n Slider.prototype.keyUp = function (event) {\n if (event.keyCode === 9 && event.target.classList.contains(classNames.sliderHandle)) {\n this.focusSliderElement();\n if (!event.target.classList.contains(classNames.sliderTabHandle)) {\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n event.target.classList.add(classNames.sliderTabHandle);\n var parentElement = event.target.parentElement;\n if (parentElement === this.element) {\n parentElement.querySelector('.' + classNames.sliderTrack).classList.add(classNames.sliderTabTrack);\n if (this.type === 'Range' || this.type === 'MinRange') {\n parentElement.querySelector('.' + classNames.rangeBar).classList.add(classNames.sliderTabRange);\n }\n }\n if (this.type === 'Range') {\n var previousSibling = event.target.previousSibling;\n if (previousSibling && previousSibling.classList.contains(classNames.sliderHandle)) {\n this.activeHandle = 2;\n }\n else {\n this.activeHandle = 1;\n }\n }\n this.getHandle().focus();\n this.tooltipToggle(this.getHandle());\n }\n }\n this.closeTooltip();\n this.changeEvent('changed', event);\n };\n Slider.prototype.hover = function (event) {\n if (!isNullOrUndefined(event)) {\n if (event.type === 'mouseover' || event.type === 'touchmove' || event.type === 'mousemove' ||\n event.type === 'pointermove' || event.type === 'touchstart') {\n this.sliderContainer.classList.add(classNames.sliderHover);\n }\n else {\n this.sliderContainer.classList.remove(classNames.sliderHover);\n var curTarget = event.currentTarget;\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && this.tooltipObj && this.isMaterialTooltip &&\n !curTarget.classList.contains(classNames.sliderHandleFocused) &&\n !curTarget.classList.contains(classNames.sliderTabHandle)) {\n this.closeMaterialTooltip();\n }\n }\n }\n };\n Slider.prototype.sliderFocusOut = function (event) {\n if (event.relatedTarget !== this.secondHandle && event.relatedTarget !== this.firstHandle &&\n event.relatedTarget !== this.element && event.relatedTarget !== this.firstBtn && event.relatedTarget !== this.secondBtn) {\n this.closeMaterialTooltip();\n this.closeTooltip();\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n if (this.element.querySelector('.' + classNames.sliderTabTrack)) {\n this.element.querySelector('.' + classNames.sliderTabTrack).classList.remove(classNames.sliderTabTrack);\n if ((this.type === 'Range' || this.type === 'MinRange') &&\n this.element.querySelector('.' + classNames.sliderTabRange)) {\n this.element.querySelector('.' + classNames.sliderTabRange).classList.remove(classNames.sliderTabRange);\n }\n }\n this.hiddenInput.focus();\n this.hiddenInput.blur();\n this.isElementFocused = false;\n }\n };\n Slider.prototype.removeElement = function (element) {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n };\n Slider.prototype.changeSliderType = function (type, args) {\n if (this.isMaterialTooltip && this.materialHandle) {\n this.sliderContainer.classList.remove(classNames.materialSlider);\n this.removeElement(this.materialHandle);\n this.materialHandle = undefined;\n }\n this.removeElement(this.firstHandle);\n this.firstHandle = undefined;\n if (type !== 'Default') {\n if (type === 'Range') {\n this.removeElement(this.secondHandle);\n this.secondHandle = undefined;\n }\n this.removeElement(this.rangeBar);\n this.rangeBar = undefined;\n }\n if (this.tooltip.isVisible && !isNullOrUndefined(this.tooltipObj)) {\n this.tooltipObj.destroy();\n this.tooltipElement = undefined;\n this.tooltipCollidedPosition = undefined;\n }\n if (this.limits.enabled) {\n if (type === 'MinRange' || type === 'Default') {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n this.removeElement(this.limitBarFirst);\n this.limitBarFirst = undefined;\n }\n }\n else {\n if (!isNullOrUndefined(this.limitBarSecond)) {\n this.removeElement(this.limitBarSecond);\n this.limitBarSecond = undefined;\n }\n }\n }\n this.activeHandle = 1;\n this.getThemeInitialization();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setHandler();\n this.setOrientClass();\n this.wireFirstHandleEvt(!this.enabled);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(!this.enabled);\n }\n this.setValue();\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n this.wireMaterialTooltipEvent(false);\n }\n this.setBarColor();\n if (args !== 'tooltip') {\n this.updateConfig();\n }\n if (this.readonly) {\n this.sliderContainer.classList.remove(classNames.readonly);\n this.setReadOnly();\n }\n };\n Slider.prototype.changeRtl = function () {\n if (!this.enableRtl && this.type === 'Range') {\n this.value = [this.handleVal2, this.handleVal1];\n }\n this.updateConfig();\n if (this.tooltip.isVisible) {\n this.tooltipObj.refresh(this.firstHandle);\n }\n if (this.showButtons) {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': 'Decrease', title: 'Decrease' });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': 'Increase', title: 'Increase' });\n }\n };\n Slider.prototype.changeOrientation = function () {\n this.changeSliderType(this.type, 'null');\n };\n Slider.prototype.updateConfig = function () {\n this.setEnableRTL();\n this.setValue();\n if (this.tooltip.isVisible) {\n this.refreshTooltip(this.tooltipTarget);\n }\n if (this.ticks.placement !== 'None') {\n if (this.ul) {\n this.removeElement(this.ul);\n this.ul = undefined;\n this.renderScale();\n }\n }\n this.limitsPropertyChange();\n };\n Slider.prototype.limitsPropertyChange = function () {\n if (this.limits.enabled) {\n if (isNullOrUndefined(this.limitBarFirst) && this.type !== 'Range') {\n this.createLimitBar();\n }\n if (isNullOrUndefined(this.limitBarFirst) && isNullOrUndefined(this.limitBarSecond) && this.type === 'Range') {\n this.createLimitBar();\n }\n this.setLimitBar();\n this.setValue();\n }\n else {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n detach(this.limitBarFirst);\n }\n if (!isNullOrUndefined(this.limitBarSecond)) {\n detach(this.limitBarSecond);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Returns the string\n * @private\n */\n Slider.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n Slider.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n window.removeEventListener('resize', this.onresize);\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n this.firstHandle.removeAttribute('aria-orientation');\n if (this.type === 'Range') {\n this.secondHandle.removeAttribute('aria-orientation');\n }\n if (this.sliderContainer.parentNode) {\n this.sliderContainer.parentNode.insertBefore(this.element, this.sliderContainer);\n }\n detach(this.sliderContainer);\n if (this.tooltip.isVisible) {\n this.tooltipObj.destroy();\n }\n this.element.innerHTML = '';\n this.hiddenInput = null;\n this.sliderContainer = null;\n this.sliderTrack = null;\n this.rangeBar = null;\n this.firstHandle = null;\n this.secondHandle = null;\n this.tickElementCollection = null;\n this.ul = null;\n this.firstBtn = null;\n this.secondBtn = null;\n this.materialHandle = null;\n this.tooltipObj = null;\n this.tooltipTarget = null;\n this.limitBarFirst = null;\n this.limitBarSecond = null;\n this.firstChild = null;\n this.lastChild = null;\n this.tooltipElement = null;\n };\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {SliderModel} newProp - Specifies the new properties\n * @param {SliderModel} oldProp - Specifies the old properties\n * @returns {void}\n * @private\n */\n Slider.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'value':\n if (newProp && oldProp) {\n var value = isNullOrUndefined(newProp.value) ?\n (this.type === 'Range' ? [this.min, this.max] : this.min) : newProp.value;\n this.setProperties({ 'value': value }, true);\n if (!isNullOrUndefined(oldProp.value) && oldProp.value.toString() !== value.toString()) {\n this.setValue();\n this.refreshTooltip(this.tooltipTarget);\n if (this.type === 'Range') {\n if (isNullOrUndefined(newProp.value) || oldProp.value[1] === value[1]) {\n this.activeHandle = 1;\n }\n else {\n this.activeHandle = 2;\n }\n }\n }\n }\n break;\n case 'min':\n case 'step':\n case 'max':\n this.setMinMaxValue();\n break;\n case 'tooltip':\n if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {\n this.initialTooltip = true;\n this.setTooltip(prop);\n if (!this.showButtons) {\n this.wireEvents();\n }\n }\n break;\n case 'type':\n if (!isNullOrUndefined(oldProp) && Object.keys(oldProp).length\n && !isNullOrUndefined(oldProp.type)) {\n this.changeSliderType(oldProp.type, prop);\n this.setZindex();\n }\n break;\n case 'enableRtl':\n if (oldProp.enableRtl !== newProp.enableRtl && this.orientation !== 'Vertical') {\n this.rtl = oldProp.enableRtl;\n this.changeRtl();\n }\n break;\n case 'limits':\n this.limitsPropertyChange();\n break;\n case 'orientation':\n this.changeOrientation();\n break;\n case 'ticks':\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n break;\n case 'locale':\n if (this.showButtons) {\n this.buttonTitle();\n }\n break;\n case 'showButtons':\n if (newProp.showButtons) {\n this.setButtons();\n this.reposition();\n if (this.enabled && !this.readonly) {\n this.wireButtonEvt(false);\n }\n }\n else {\n if (this.firstBtn && this.secondBtn) {\n this.sliderContainer.removeChild(this.firstBtn);\n this.sliderContainer.removeChild(this.secondBtn);\n this.sliderContainer.classList.remove(classNames.sliderButtonClass);\n this.firstBtn = undefined;\n this.secondBtn = undefined;\n this.reposition();\n }\n }\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'readonly':\n this.setReadOnly();\n break;\n case 'customValues':\n this.setValue();\n this.reposition();\n break;\n case 'colorRange':\n this.reposition();\n break;\n case 'width':\n this.setElementWidth(newProp.width);\n this.setMinMaxValue();\n if (this.limits) {\n this.limitsPropertyChange();\n }\n break;\n }\n }\n };\n Slider.prototype.setReadOnly = function () {\n if (this.readonly) {\n this.unwireEvents();\n this.sliderContainer.classList.add(classNames.readonly);\n }\n else {\n this.wireEvents();\n this.sliderContainer.classList.remove(classNames.readonly);\n }\n };\n Slider.prototype.setMinMaxValue = function () {\n var _this = this;\n this.setValue();\n this.refreshTooltip(this.tooltipTarget);\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n if (this.ul) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n };\n Slider.prototype.setZindex = function () {\n this.zIndex = 6;\n if (!isNullOrUndefined(this.ticks) && this.ticks.placement !== 'None' && !isNullOrUndefined(this.ul) && !isNullOrUndefined(this.element)) {\n this.ul.style.zIndex = (this.zIndex + -7) + '';\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n if (!this.isMaterial && !this.isMaterial3 && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n if (!isNullOrUndefined(this.firstHandle)) {\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n }\n if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle)) {\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n };\n Slider.prototype.setTooltip = function (args) {\n this.changeSliderType(this.type, args);\n };\n Slider.prototype.setBarColor = function () {\n var trackPosition;\n var trackClassName;\n var child = this.sliderTrack.lastElementChild;\n while (child) {\n this.sliderTrack.removeChild(child);\n child = this.sliderTrack.lastElementChild;\n }\n for (var i = 0; i < this.colorRange.length; i++) {\n if (!isNullOrUndefined(this.colorRange[i].start) && !isNullOrUndefined(this.colorRange[i].end)) {\n if (this.colorRange[i].end > this.colorRange[i].start) {\n if (this.colorRange[i].start < this.min) {\n this.colorRange[i].start = this.min;\n }\n if (this.colorRange[i].end > this.max) {\n this.colorRange[i].end = this.max;\n }\n var startingPosition = this.checkHandlePosition(this.colorRange[i].start);\n var endPosition = this.checkHandlePosition(this.colorRange[i].end);\n var trackContainer = this.createElement('div');\n trackContainer.style.backgroundColor = this.colorRange[i].color;\n trackContainer.style.border = '1px solid ' + this.colorRange[i].color;\n if (this.orientation === 'Horizontal') {\n trackClassName = classNames.sliderHorizantalColor;\n if (this.enableRtl) {\n if (isNullOrUndefined(this.customValues)) {\n trackPosition =\n this.checkHandlePosition(this.max) - this.checkHandlePosition(this.colorRange[i].end);\n }\n else {\n trackPosition = this.checkHandlePosition(this.customValues.length - this.colorRange[i].end - 1);\n }\n }\n else {\n trackPosition = this.checkHandlePosition(this.colorRange[i].start);\n }\n trackContainer.style.width = endPosition - startingPosition + 'px';\n trackContainer.style.left = trackPosition + 'px';\n }\n else {\n trackClassName = classNames.sliderVerticalColor;\n trackPosition = this.checkHandlePosition(this.colorRange[i].start);\n trackContainer.style.height = endPosition - startingPosition + 'px';\n trackContainer.style.bottom = trackPosition + 'px';\n }\n trackContainer.classList.add(trackClassName);\n this.sliderTrack.appendChild(trackContainer);\n }\n }\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} - Returns the string\n * @private\n */\n Slider.prototype.getModuleName = function () {\n return 'slider';\n };\n __decorate$2([\n Property(null)\n ], Slider.prototype, \"value\", void 0);\n __decorate$2([\n Property(null)\n ], Slider.prototype, \"customValues\", void 0);\n __decorate$2([\n Property(1)\n ], Slider.prototype, \"step\", void 0);\n __decorate$2([\n Property(null)\n ], Slider.prototype, \"width\", void 0);\n __decorate$2([\n Property(0)\n ], Slider.prototype, \"min\", void 0);\n __decorate$2([\n Property(100)\n ], Slider.prototype, \"max\", void 0);\n __decorate$2([\n Property(false)\n ], Slider.prototype, \"readonly\", void 0);\n __decorate$2([\n Property('Default')\n ], Slider.prototype, \"type\", void 0);\n __decorate$2([\n Collection([{}], ColorRangeData)\n ], Slider.prototype, \"colorRange\", void 0);\n __decorate$2([\n Complex({}, TicksData)\n ], Slider.prototype, \"ticks\", void 0);\n __decorate$2([\n Complex({}, LimitData)\n ], Slider.prototype, \"limits\", void 0);\n __decorate$2([\n Property(true)\n ], Slider.prototype, \"enabled\", void 0);\n __decorate$2([\n Complex({}, TooltipData)\n ], Slider.prototype, \"tooltip\", void 0);\n __decorate$2([\n Property(false)\n ], Slider.prototype, \"showButtons\", void 0);\n __decorate$2([\n Property(true)\n ], Slider.prototype, \"enableAnimation\", void 0);\n __decorate$2([\n Property('Horizontal')\n ], Slider.prototype, \"orientation\", void 0);\n __decorate$2([\n Property('')\n ], Slider.prototype, \"cssClass\", void 0);\n __decorate$2([\n Property(true)\n ], Slider.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$2([\n Event()\n ], Slider.prototype, \"created\", void 0);\n __decorate$2([\n Event()\n ], Slider.prototype, \"change\", void 0);\n __decorate$2([\n Event()\n ], Slider.prototype, \"changed\", void 0);\n __decorate$2([\n Event()\n ], Slider.prototype, \"renderingTicks\", void 0);\n __decorate$2([\n Event()\n ], Slider.prototype, \"renderedTicks\", void 0);\n __decorate$2([\n Event()\n ], Slider.prototype, \"tooltipChange\", void 0);\n Slider = __decorate$2([\n NotifyPropertyChanges\n ], Slider);\n return Slider;\n}(Component));\n\nvar __extends$3 = (undefined && undefined.__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$3 = (undefined && undefined.__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/**\n * global declarations\n */\nvar regex = {\n /* eslint-disable no-useless-escape */\n EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +\n '|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),\n /* eslint-disable-next-line security/detect-unsafe-regex */\n URL: /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/m,\n DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),\n DIGITS: new RegExp('^[0-9]*$'),\n PHONE: new RegExp('^[+]?[0-9]{9,13}$'),\n CREDITCARD: new RegExp('^\\\\d{13,16}$')\n /* eslint-enable no-useless-escape */\n};\n/**\n * ErrorOption values\n *\n * @private\n */\nvar ErrorOption;\n(function (ErrorOption) {\n /**\n * Defines the error message.\n */\n ErrorOption[ErrorOption[\"Message\"] = 0] = \"Message\";\n /**\n * Defines the error element type.\n */\n ErrorOption[ErrorOption[\"Label\"] = 1] = \"Label\";\n})(ErrorOption || (ErrorOption = {}));\n/**\n * FormValidator class enables you to validate the form fields based on your defined rules\n * ```html\n * \n * \n * ```\n */\nvar FormValidator = /** @__PURE__ @class */ (function (_super) {\n __extends$3(FormValidator, _super);\n /**\n * Initializes the FormValidator.\n *\n * @param {string | HTMLFormElement} element - Specifies the element to render as component.\n * @param {FormValidatorModel} options - Specifies the FormValidator model.\n * @private\n */\n function FormValidator(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.validated = [];\n _this.errorRules = [];\n _this.allowSubmit = false;\n _this.required = 'required';\n _this.infoElement = null;\n _this.inputElement = null;\n _this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.localyMessage = {};\n /**\n * Specifies the default messages for validation rules.\n *\n * @default { List of validation message }\n */\n _this.defaultMessages = {\n required: 'This field is required.',\n email: 'Please enter a valid email address.',\n url: 'Please enter a valid URL.',\n date: 'Please enter a valid date.',\n dateIso: 'Please enter a valid date ( ISO ).',\n creditcard: 'Please enter valid card number',\n number: 'Please enter a valid number.',\n digits: 'Please enter only digits.',\n maxLength: 'Please enter no more than {0} characters.',\n minLength: 'Please enter at least {0} characters.',\n rangeLength: 'Please enter a value between {0} and {1} characters long.',\n range: 'Please enter a value between {0} and {1}.',\n max: 'Please enter a value less than or equal to {0}.',\n min: 'Please enter a value greater than or equal to {0}.',\n regex: 'Please enter a correct value.',\n tel: 'Please enter a valid phone number.',\n pattern: 'Please enter a correct pattern value.',\n equalTo: 'Please enter the valid match text'\n };\n if (typeof _this.rules === 'undefined') {\n _this.rules = {};\n }\n _this.l10n = new L10n('formValidator', _this.defaultMessages, _this.locale);\n if (_this.locale) {\n _this.localeFunc();\n }\n onIntlChange.on('notifyExternalChange', _this.afterLocalization, _this);\n element = typeof element === 'string' ? select(element, document) : element;\n // Set novalidate to prevent default HTML5 form validation\n if (_this.element != null) {\n _this.element.setAttribute('novalidate', '');\n _this.inputElements = selectAll(_this.selectQuery, _this.element);\n _this.createHTML5Rules();\n _this.wireEvents();\n }\n else {\n return undefined;\n }\n return _this;\n }\n FormValidator_1 = FormValidator;\n /* eslint-enable @typescript-eslint/no-explicit-any */\n /**\n * Add validation rules to the corresponding input element based on `name` attribute.\n *\n * @param {string} name `name` of form field.\n * @param {Object} rules Validation rules for the corresponding element.\n * @returns {void}\n */\n FormValidator.prototype.addRules = function (name, rules) {\n if (name) {\n // eslint-disable-next-line no-prototype-builtins\n if (this.rules.hasOwnProperty(name)) {\n extend(this.rules[\"\" + name], rules, {});\n }\n else {\n this.rules[\"\" + name] = rules;\n }\n }\n };\n /**\n * Remove validation to the corresponding field based on name attribute.\n * When no parameter is passed, remove all the validations in the form.\n *\n * @param {string} name Input name attribute value.\n * @param {string[]} rules List of validation rules need to be remove from the corresponding element.\n * @returns {void}\n */\n FormValidator.prototype.removeRules = function (name, rules) {\n if (!name && !rules) {\n this.rules = {};\n }\n else if (this.rules[\"\" + name] && !rules) {\n delete this.rules[\"\" + name];\n }\n else if (!isNullOrUndefined(this.rules[\"\" + name] && rules)) {\n for (var i = 0; i < rules.length; i++) {\n delete this.rules[\"\" + name][rules[parseInt(i.toString(), 10)]];\n }\n }\n else {\n return;\n }\n };\n /**\n * Validate the current form values using defined rules.\n * Returns `true` when the form is valid otherwise `false`\n *\n * @param {string} selected - Optional parameter to validate specified element.\n * @returns {boolean} - Returns form validation status.\n */\n FormValidator.prototype.validate = function (selected) {\n var rules = Object.keys(this.rules);\n if (selected && rules.length) {\n this.validateRules(selected);\n //filter the selected element it don't have any valid input element\n return rules.indexOf(selected) !== -1 && this.errorRules.filter(function (data) {\n return data.name === selected;\n }).length === 0;\n }\n else {\n this.errorRules = [];\n for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) {\n var name_1 = rules_1[_i];\n this.validateRules(name_1);\n }\n return this.errorRules.length === 0;\n }\n };\n /**\n * Reset the value of all the fields in form.\n *\n * @returns {void}\n */\n FormValidator.prototype.reset = function () {\n this.element.reset();\n this.clearForm();\n };\n /**\n * Get input element by name.\n *\n * @param {string} name - Input element name attribute value.\n * @returns {HTMLInputElement} - Returns the input element.\n */\n FormValidator.prototype.getInputElement = function (name) {\n this.inputElement = (select('[name=\"' + name + '\"]', this.element));\n return this.inputElement;\n };\n /**\n * Destroy the form validator object and error elements.\n *\n * @returns {void}\n */\n FormValidator.prototype.destroy = function () {\n this.reset();\n this.unwireEvents();\n this.rules = {};\n var elements = selectAll('.' + this.errorClass + ', .' + this.validClass, this.element);\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element = elements_1[_i];\n detach(element);\n }\n _super.prototype.destroy.call(this);\n this.infoElement = null;\n onIntlChange.off('notifyExternalChange', this.afterLocalization);\n };\n /**\n * @param {FormValidatorModel} newProp - Returns the dynamic property value of the component.\n * @param {FormValidatorModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n FormValidator.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 'locale':\n this.localeFunc();\n break;\n }\n }\n };\n /**\n * @private\n * @returns {void}\n */\n FormValidator.prototype.localeFunc = function () {\n for (var _i = 0, _a = Object.keys(this.defaultMessages); _i < _a.length; _i++) {\n var key = _a[_i];\n this.l10n.setLocale(this.locale);\n var value = this.l10n.getConstant(key);\n this.localyMessage[\"\" + key] = value;\n }\n };\n /**\n * @private\n * @returns {string} - Returns the component name.\n */\n FormValidator.prototype.getModuleName = function () {\n return 'formvalidator';\n };\n /**\n * @param {any} args - Specifies the culture name.\n * @returns {void}\n * @private\n */\n FormValidator.prototype.afterLocalization = function (args) {\n this.locale = args.locale;\n this.localeFunc();\n };\n /**\n * Allows you to refresh the form validator base events to the elements inside the form.\n *\n * @returns {void}\n */\n FormValidator.prototype.refresh = function () {\n this.unwireEvents();\n this.inputElements = selectAll(this.selectQuery, this.element);\n this.wireEvents();\n };\n FormValidator.prototype.clearForm = function () {\n this.errorRules = [];\n this.validated = [];\n var elements = selectAll(this.selectQuery, this.element);\n for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {\n var element = elements_2[_i];\n var input = element;\n input.removeAttribute('aria-invalid');\n var inputParent = input.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||\n (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.remove(this.errorClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||\n grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.remove(this.errorClass);\n }\n else {\n input.classList.remove(this.errorClass);\n }\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||\n (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||\n grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.remove(this.validClass);\n }\n else {\n input.classList.remove(this.validClass);\n }\n }\n };\n FormValidator.prototype.createHTML5Rules = function () {\n var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits',\n 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',\n 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',\n 'data-val-creditcard', 'data-val-phone'];\n var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel'];\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n // Default attribute rules\n var allRule = {};\n for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {\n var rule = defRules_1[_b];\n if (input.getAttribute(rule) !== null) {\n switch (rule) {\n case 'required':\n this.defRule(input, allRule, rule, input.required);\n break;\n case 'data-validation':\n rule = input.getAttribute(rule);\n this.defRule(input, allRule, rule, true);\n break;\n case 'type':\n if (acceptedTypes.indexOf(input.type) !== -1) {\n this.defRule(input, allRule, input.type, true);\n }\n break;\n case 'rangeLength':\n case 'range':\n this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));\n break;\n case 'equalTo':\n {\n var id = input.getAttribute(rule);\n this.defRule(input, allRule, rule, id);\n }\n break;\n default:\n if (input.getAttribute('data-val') === 'true') {\n this.annotationRule(input, allRule, rule, input.getAttribute(rule));\n }\n else {\n this.defRule(input, allRule, rule, input.getAttribute(rule));\n }\n }\n }\n }\n //adding pattern type validation\n if (Object.keys(allRule).length !== 0) {\n this.addRules(input.name, allRule);\n }\n }\n };\n FormValidator.prototype.annotationRule = function (input, ruleCon, ruleName, value) {\n var annotationRule = ruleName.split('-');\n var rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto'];\n var ruleFirstName = annotationRule[annotationRule.length - 1];\n var ruleSecondName = annotationRule[annotationRule.length - 2];\n if (rulesList.indexOf(ruleFirstName) !== -1) {\n switch (ruleFirstName) {\n case 'required':\n this.defRule(input, ruleCon, 'required', value);\n break;\n case 'creditcard':\n this.defRule(input, ruleCon, 'creditcard', value);\n break;\n case 'phone':\n this.defRule(input, ruleCon, 'tel', value);\n break;\n }\n }\n else if (rulesList.indexOf(ruleSecondName) !== -1) {\n switch (ruleSecondName) {\n case 'maxlength':\n this.defRule(input, ruleCon, 'maxLength', value);\n break;\n case 'minlength':\n this.defRule(input, ruleCon, 'minLength', value);\n break;\n case 'range':\n {\n var minvalue = input.getAttribute('data-val-range-min');\n var maxvalue = input.getAttribute('data-val-range-max');\n this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]);\n }\n break;\n case 'equalto':\n {\n var id = input.getAttribute(ruleName).split('.');\n this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]);\n }\n break;\n case 'regex':\n this.defRule(input, ruleCon, 'regex', value);\n break;\n }\n }\n };\n FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) {\n var message = input.getAttribute('data-' + ruleName + '-message');\n var annotationMessage = input.getAttribute('data-val-' + ruleName);\n var customMessage;\n if (this.rules[input.name] && ruleName !== 'validateHidden' && ruleName !== 'hidden') {\n this.getInputElement(input.name);\n customMessage = this.getErrorMessage(this.rules[input.name][\"\" + ruleName], ruleName);\n }\n if (message) {\n value = [value, message];\n }\n else if (annotationMessage) {\n value = [value, annotationMessage];\n }\n else if (customMessage) {\n value = [value, customMessage];\n }\n ruleCon[\"\" + ruleName] = value;\n };\n // Wire events to the form elements\n FormValidator.prototype.wireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n if (FormValidator_1.isCheckable(input)) {\n EventHandler.add(input, 'click', this.clickHandler, this);\n }\n else if (input.tagName === 'SELECT') {\n EventHandler.add(input, 'change', this.changeHandler, this);\n }\n else {\n EventHandler.add(input, 'focusout', this.focusOutHandler, this);\n EventHandler.add(input, 'keyup', this.keyUpHandler, this);\n }\n }\n EventHandler.add(this.element, 'submit', this.submitHandler, this);\n EventHandler.add(this.element, 'reset', this.resetHandler, this);\n };\n // UnWire events to the form elements\n FormValidator.prototype.unwireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n EventHandler.clearEvents(input);\n }\n EventHandler.remove(this.element, 'submit', this.submitHandler);\n EventHandler.remove(this.element, 'reset', this.resetHandler);\n };\n // Handle input element focusout event\n FormValidator.prototype.focusOutHandler = function (e) {\n this.trigger('focusout', e);\n //FormValidator.triggerCallback(this.focusout, e);\n var element = e.target;\n if (this.rules[element.name]) {\n if (this.rules[element.name][this.required] || element.value.length > 0) {\n this.validate(element.name);\n }\n else if (this.validated.indexOf(element.name) === -1) {\n this.validated.push(element.name);\n }\n }\n };\n // Handle input element keyup event\n FormValidator.prototype.keyUpHandler = function (e) {\n this.trigger('keyup', e);\n var element = e.target;\n // List of keys need to prevent while validation\n var excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225];\n if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) {\n return;\n }\n if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) {\n this.validate(element.name);\n }\n };\n // Handle input click event\n FormValidator.prototype.clickHandler = function (e) {\n this.trigger('click', e);\n var element = e.target;\n // If element type is not submit allow validation\n if (element.type !== 'submit') {\n this.validate(element.name);\n }\n else if (element.getAttribute('formnovalidate') !== null) {\n // Prevent form validation, if submit button has formnovalidate attribute\n this.allowSubmit = true;\n }\n };\n // Handle input change event\n FormValidator.prototype.changeHandler = function (e) {\n this.trigger('change', e);\n var element = e.target;\n this.validate(element.name);\n };\n // Handle form submit event\n FormValidator.prototype.submitHandler = function (e) {\n this.trigger('submit', e);\n //FormValidator.triggerCallback(this.submit, e);\n // Prevent form submit if validation failed\n if (!this.allowSubmit && !this.validate()) {\n e.preventDefault();\n }\n else {\n this.allowSubmit = false;\n }\n };\n // Handle form reset\n FormValidator.prototype.resetHandler = function () {\n this.clearForm();\n };\n // Validate each rule based on input element name\n FormValidator.prototype.validateRules = function (name) {\n if (!this.rules[\"\" + name]) {\n return;\n }\n var rules = Object.keys(this.rules[\"\" + name]);\n var hiddenType = false;\n var validateHiddenType = false;\n var vhPos = rules.indexOf('validateHidden');\n var hPos = rules.indexOf('hidden');\n this.getInputElement(name);\n if (hPos !== -1) {\n hiddenType = true;\n }\n if (vhPos !== -1) {\n validateHiddenType = true;\n }\n if (!hiddenType || (hiddenType && validateHiddenType)) {\n if (vhPos !== -1) {\n rules.splice(vhPos, 1);\n }\n if (hPos !== -1) {\n rules.splice((hPos - 1), 1);\n }\n this.getErrorElement(name);\n for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {\n var rule = rules_2[_i];\n var errorMessage = this.getErrorMessage(this.rules[\"\" + name][\"\" + rule], rule);\n var errorRule = { name: name, message: errorMessage };\n var eventArgs = {\n inputName: name,\n element: this.inputElement,\n message: errorMessage\n };\n if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {\n this.removeErrorRules(name);\n this.errorRules.push(errorRule);\n // Set aria attributes to invalid elements\n this.inputElement.setAttribute('aria-invalid', 'true');\n this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||\n (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.errorClass);\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||\n grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.errorClass);\n grandParent.classList.remove(this.validClass);\n }\n else {\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n }\n if (!this.infoElement) {\n this.createErrorElement(name, errorRule.message, this.inputElement);\n }\n else {\n this.showMessage(errorRule);\n }\n eventArgs.errorElement = this.infoElement;\n eventArgs.status = 'failure';\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||\n (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.errorClass);\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||\n grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.errorClass);\n grandParent.classList.remove(this.validClass);\n }\n else {\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n }\n this.optionalValidationStatus(name, eventArgs);\n this.trigger('validationComplete', eventArgs);\n // Set aria-required to required rule elements\n if (rule === 'required') {\n this.inputElement.setAttribute('aria-required', 'true');\n }\n break;\n }\n else {\n this.hideMessage(name);\n eventArgs.status = 'success';\n this.trigger('validationComplete', eventArgs);\n }\n }\n }\n else {\n return;\n }\n };\n // Update the optional validation status\n FormValidator.prototype.optionalValidationStatus = function (name, refer) {\n if (!this.rules[\"\" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n refer.status = '';\n this.hideMessage(name);\n }\n };\n // Check the input element whether it's value satisfy the validation rule or not\n FormValidator.prototype.isValid = function (name, rule) {\n var params = this.rules[\"\" + name][\"\" + rule];\n var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;\n var currentRule = this.rules[\"\" + name][\"\" + rule];\n var dateFormat = ((rule === 'min' || rule === 'max') && this.rules['' + name].date &&\n typeof (this.rules['' + name].date) === 'string') ? this.rules['' + name].date : null;\n var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element, format: dateFormat };\n this.trigger('validationBegin', args);\n if (!args.param && rule === 'required') {\n return true;\n }\n if (currentRule && typeof currentRule[0] === 'function') {\n var fn = currentRule[0];\n return fn.call(this, { element: this.inputElement, value: this.inputElement.value });\n }\n else if (FormValidator_1.isCheckable(this.inputElement)) {\n if (rule !== 'required') {\n return true;\n }\n return selectAll('input[name=\"' + name + '\"]:checked', this.element).length > 0;\n }\n else {\n return FormValidator_1.checkValidator[\"\" + rule](args);\n }\n };\n // Return default error message or custom error message\n FormValidator.prototype.getErrorMessage = function (ruleValue, rule) {\n var message = this.inputElement.getAttribute('data-' + rule + '-message') ?\n this.inputElement.getAttribute('data-' + rule + '-message') :\n (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :\n (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[\"\" + rule] : this.defaultMessages[\"\" + rule];\n var formats = message.match(/{(\\d)}/g);\n if (!isNullOrUndefined(formats)) {\n for (var i = 0; i < formats.length; i++) {\n var value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString(), 10)] : ruleValue;\n message = message.replace(formats[parseInt(i.toString(), 10)], value);\n }\n }\n return message;\n };\n // Create error element based on name and error message\n FormValidator.prototype.createErrorElement = function (name, message, input) {\n var errorElement = createElement(this.errorElement, {\n className: this.errorClass,\n innerHTML: message,\n attrs: { for: name }\n });\n // Create message design if errorOption is message\n if (this.errorOption === ErrorOption.Message) {\n errorElement.classList.remove(this.errorClass);\n errorElement.classList.add('e-message');\n errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML });\n }\n errorElement.id = this.inputElement.name + '-info';\n // Append error message into MVC error message element\n if (this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]')) {\n this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]').appendChild(errorElement);\n }\n else if (input.hasAttribute('data-msg-containerid') === true) {\n // Append error message into custom div element\n var containerId = input.getAttribute('data-msg-containerid');\n var divElement = select('#' + containerId, this.element);\n divElement.appendChild(errorElement);\n }\n else if (this.customPlacement != null) {\n // Call custom placement function if customPlacement is not null\n this.customPlacement.call(this, this.inputElement, errorElement);\n }\n else {\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {\n grandParent.insertBefore(errorElement, inputParent.nextSibling);\n }\n else if (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper')) {\n grandParent.parentElement.insertBefore(errorElement, grandParent.nextSibling);\n }\n else {\n inputParent.insertBefore(errorElement, this.inputElement.nextSibling);\n }\n }\n errorElement.style.display = 'block';\n this.getErrorElement(name);\n this.validated.push(name);\n this.checkRequired(name);\n };\n // Get error element by name\n FormValidator.prototype.getErrorElement = function (name) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement);\n if (!this.infoElement) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]', this.element);\n }\n return this.infoElement;\n };\n // Remove existing rule from errorRules object\n FormValidator.prototype.removeErrorRules = function (name) {\n for (var i = 0; i < this.errorRules.length; i++) {\n var rule = this.errorRules[parseInt(i.toString(), 10)];\n if (rule.name === name) {\n this.errorRules.splice(i, 1);\n }\n }\n };\n // Show error message to the input element\n FormValidator.prototype.showMessage = function (errorRule) {\n this.infoElement.style.display = 'block';\n this.infoElement.innerHTML = errorRule.message;\n this.checkRequired(errorRule.name);\n };\n // Hide error message based on input name\n FormValidator.prototype.hideMessage = function (name) {\n if (this.infoElement) {\n this.infoElement.style.display = 'none';\n this.removeErrorRules(name);\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||\n (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.validClass);\n inputParent.classList.remove(this.errorClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.validClass);\n grandParent.classList.remove(this.errorClass);\n }\n else {\n this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\n }\n this.inputElement.setAttribute('aria-invalid', 'false');\n }\n };\n // Check whether the input element have required rule and its value is not empty\n FormValidator.prototype.checkRequired = function (name) {\n if (!this.rules[\"\" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n this.hideMessage(name);\n }\n };\n // Return boolean result if the input have checkable or submit types\n FormValidator.isCheckable = function (input) {\n var inputType = input.getAttribute('type');\n return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');\n };\n var FormValidator_1;\n // List of function to validate the rules\n FormValidator.checkValidator = {\n required: function (option) {\n return !isNaN(Date.parse(option.value)) ? !isNaN(new Date(option.value).getTime()) : option.value.toString().length > 0;\n },\n email: function (option) {\n return regex.EMAIL.test(option.value);\n },\n url: function (option) {\n return regex.URL.test(option.value);\n },\n dateIso: function (option) {\n return regex.DATE_ISO.test(option.value);\n },\n tel: function (option) {\n return regex.PHONE.test(option.value);\n },\n creditcard: function (option) {\n return regex.CREDITCARD.test(option.value);\n },\n number: function (option) {\n return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1;\n },\n digits: function (option) {\n return regex.DIGITS.test(option.value);\n },\n maxLength: function (option) {\n return option.value.length <= Number(option.param);\n },\n minLength: function (option) {\n return option.value.length >= Number(option.param);\n },\n rangeLength: function (option) {\n var param = option.param;\n return option.value.length >= param[0] && option.value.length <= param[1];\n },\n range: function (option) {\n var param = option.param;\n return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];\n },\n date: function (option) {\n if (!isNullOrUndefined(option.param) && (typeof (option.param) === 'string' && option.param !== '')) {\n var globalize = new Internationalization;\n var dateOptions = { format: option.param.toString(), type: 'dateTime', skeleton: 'yMd' };\n var dateValue = globalize.parseDate(option.value, dateOptions);\n return (!isNullOrUndefined(dateValue) && dateValue instanceof Date && !isNaN(+dateValue));\n }\n else {\n return !isNaN(new Date(option.value).getTime());\n }\n },\n max: function (option) {\n if (!isNaN(Number(option.value))) {\n // Maximum rule validation for number\n return +option.value <= +option.param;\n }\n // Maximum rule validation for date\n if (option.format && option.format !== '') {\n var globalize = new Internationalization;\n var dateOptions = { format: option.format.toString(), type: 'dateTime', skeleton: 'yMd' };\n var dateValue = globalize.parseDate(option.value, dateOptions);\n var maxValue = (typeof (option.param) === 'string') ? globalize.parseDate(JSON.parse(JSON.stringify(option.param)), dateOptions) : option.param;\n return new Date(dateValue).getTime() <= new Date(maxValue).getTime();\n }\n else {\n return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n }\n },\n min: function (option) {\n if (!isNaN(Number(option.value))) {\n // Minimum rule validation for number\n return +option.value >= +option.param;\n }\n else if ((option.value).indexOf(',') !== -1) {\n var uNum = (option.value).replace(/,/g, '');\n return parseFloat(uNum) >= Number(option.param); // Convert option.param to a number\n }\n else {\n // Minimum rule validation for date\n if (option.format && option.format !== '') {\n var globalize = new Internationalization;\n var dateOptions = { format: option.format.toString(), type: 'dateTime', skeleton: 'yMd' };\n var dateValue = globalize.parseDate(option.value, dateOptions);\n var minValue = (typeof (option.param) === 'string') ? globalize.parseDate(JSON.parse(JSON.stringify(option.param)), dateOptions) : option.param;\n return new Date(dateValue).getTime() >= new Date(minValue).getTime();\n }\n else {\n return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n }\n }\n },\n regex: function (option) {\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n return new RegExp(option.param).test(option.value);\n },\n equalTo: function (option) {\n var compareTo = option.formElement.querySelector('#' + option.param);\n option.param = compareTo.value;\n return option.param === option.value;\n }\n };\n __decorate$3([\n Property('')\n ], FormValidator.prototype, \"locale\", void 0);\n __decorate$3([\n Property('e-hidden')\n ], FormValidator.prototype, \"ignore\", void 0);\n __decorate$3([\n Property()\n ], FormValidator.prototype, \"rules\", void 0);\n __decorate$3([\n Property('e-error')\n ], FormValidator.prototype, \"errorClass\", void 0);\n __decorate$3([\n Property('e-valid')\n ], FormValidator.prototype, \"validClass\", void 0);\n __decorate$3([\n Property('label')\n ], FormValidator.prototype, \"errorElement\", void 0);\n __decorate$3([\n Property('div')\n ], FormValidator.prototype, \"errorContainer\", void 0);\n __decorate$3([\n Property(ErrorOption.Label)\n ], FormValidator.prototype, \"errorOption\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"focusout\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"keyup\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"click\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"change\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"submit\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"validationBegin\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"validationComplete\", void 0);\n __decorate$3([\n Event()\n ], FormValidator.prototype, \"customPlacement\", void 0);\n FormValidator = FormValidator_1 = __decorate$3([\n NotifyPropertyChanges\n ], FormValidator);\n return FormValidator;\n}(Base));\n\nvar __extends$4 = (undefined && undefined.__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$4 = (undefined && undefined.__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};\nvar CONTROL_WRAPPER = 'e-upload e-control-wrapper';\nvar INPUT_WRAPPER = 'e-file-select';\nvar DROP_AREA = 'e-file-drop';\nvar DROP_WRAPPER = 'e-file-select-wrap';\nvar LIST_PARENT = 'e-upload-files';\nvar FILE = 'e-upload-file-list';\nvar STATUS = 'e-file-status';\nvar ACTION_BUTTONS = 'e-upload-actions';\nvar UPLOAD_BUTTONS = 'e-file-upload-btn e-css e-btn e-flat e-primary';\nvar CLEAR_BUTTONS = 'e-file-clear-btn e-css e-btn e-flat';\nvar FILE_NAME = 'e-file-name';\nvar FILE_TYPE = 'e-file-type';\nvar FILE_SIZE = 'e-file-size';\nvar REMOVE_ICON = 'e-file-remove-btn';\nvar DELETE_ICON = 'e-file-delete-btn';\nvar SPINNER_PANE = 'e-spinner-pane';\nvar ABORT_ICON = 'e-file-abort-btn';\nvar RETRY_ICON = 'e-file-reload-btn';\nvar DRAG_HOVER = 'e-upload-drag-hover';\nvar PROGRESS_WRAPPER = 'e-upload-progress-wrap';\nvar PROGRESSBAR = 'e-upload-progress-bar';\nvar PROGRESSBAR_TEXT = 'e-progress-bar-text';\nvar UPLOAD_INPROGRESS = 'e-upload-progress';\nvar UPLOAD_SUCCESS = 'e-upload-success';\nvar UPLOAD_FAILED = 'e-upload-fails';\nvar TEXT_CONTAINER = 'e-file-container';\nvar VALIDATION_FAILS = 'e-validation-fails';\nvar RTL = 'e-rtl';\nvar DISABLED = 'e-disabled';\nvar RTL_CONTAINER = 'e-rtl-container';\nvar ICON_FOCUSED = 'e-clear-icon-focus';\nvar PROGRESS_INNER_WRAPPER = 'e-progress-inner-wrap';\nvar PAUSE_UPLOAD = 'e-file-pause-btn';\nvar RESUME_UPLOAD = 'e-file-play-btn';\nvar RESTRICT_RETRY = 'e-restrict-retry';\nvar wrapperAttr$1 = ['title', 'style', 'class'];\nvar FORM_UPLOAD = 'e-form-upload';\nvar HIDDEN_INPUT = 'e-hidden-file-input';\nvar INVALID_FILE = 'e-file-invalid';\nvar INFORMATION = 'e-file-information';\nvar FilesProp = /** @__PURE__ @class */ (function (_super) {\n __extends$4(FilesProp, _super);\n function FilesProp() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$4([\n Property('')\n ], FilesProp.prototype, \"name\", void 0);\n __decorate$4([\n Property(null)\n ], FilesProp.prototype, \"size\", void 0);\n __decorate$4([\n Property('')\n ], FilesProp.prototype, \"type\", void 0);\n return FilesProp;\n}(ChildProperty));\nvar ButtonsProps = /** @__PURE__ @class */ (function (_super) {\n __extends$4(ButtonsProps, _super);\n function ButtonsProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$4([\n Property('Browse...')\n ], ButtonsProps.prototype, \"browse\", void 0);\n __decorate$4([\n Property('Upload')\n ], ButtonsProps.prototype, \"upload\", void 0);\n __decorate$4([\n Property('Clear')\n ], ButtonsProps.prototype, \"clear\", void 0);\n return ButtonsProps;\n}(ChildProperty));\nvar AsyncSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$4(AsyncSettings, _super);\n function AsyncSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$4([\n Property('')\n ], AsyncSettings.prototype, \"saveUrl\", void 0);\n __decorate$4([\n Property('')\n ], AsyncSettings.prototype, \"removeUrl\", void 0);\n __decorate$4([\n Property(0)\n ], AsyncSettings.prototype, \"chunkSize\", void 0);\n __decorate$4([\n Property(3)\n ], AsyncSettings.prototype, \"retryCount\", void 0);\n __decorate$4([\n Property(500)\n ], AsyncSettings.prototype, \"retryAfterDelay\", void 0);\n return AsyncSettings;\n}(ChildProperty));\n/**\n * The uploader component allows to upload images, documents, and other files from local to server.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Uploader = /** @__PURE__ @class */ (function (_super) {\n __extends$4(Uploader, _super);\n /**\n * Triggers when change the Uploader value.\n *\n * @param {UploaderModel} options - Specifies the Uploader model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function Uploader(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.initialAttr = { accept: null, multiple: false, disabled: false };\n _this.uploadedFilesData = [];\n _this.base64String = [];\n _this.isForm = false;\n _this.allTypes = false;\n _this.pausedData = [];\n _this.uploadMetaData = [];\n _this.tabIndex = '0';\n _this.btnTabIndex = '0';\n _this.disableKeyboardNavigation = false;\n _this.count = -1;\n _this.actionCompleteCount = 0;\n _this.flag = true;\n _this.selectedFiles = [];\n _this.uploaderName = 'UploadFiles';\n _this.fileStreams = [];\n _this.newFileRef = 0;\n _this.isFirstFileOnSelection = false;\n _this.dragCounter = 0;\n /**\n * Get the file item(li) which are shown in file list.\n *\n * @private\n */\n _this.fileList = [];\n /**\n * Get the data of files which are shown in file list.\n *\n * @private\n */\n _this.filesData = [];\n _this.uploaderOptions = options;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {UploaderModel} newProp - Returns the dynamic property value of the component.\n * @param {UploaderModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n Uploader.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 'allowedExtensions':\n this.setExtensions(this.allowedExtensions);\n this.clearAll();\n break;\n case 'enabled':\n this.setControlStatus();\n break;\n case 'multiple':\n this.setMultipleSelection();\n break;\n case 'enableRtl':\n this.setRTL();\n this.reRenderFileList();\n break;\n case 'buttons':\n this.buttons.browse = isNullOrUndefined(this.buttons.browse) ? '' : this.buttons.browse;\n this.buttons.clear = isNullOrUndefined(this.buttons.clear) ? '' : this.buttons.clear;\n this.buttons.upload = isNullOrUndefined(this.buttons.upload) ? '' : this.buttons.upload;\n this.renderButtonTemplates();\n break;\n case 'dropArea':\n this.unBindDropEvents();\n this.updateDropArea();\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.checkHTMLAttributes(true);\n break;\n case 'files':\n this.renderPreLoadFiles();\n break;\n case 'directoryUpload':\n this.updateDirectoryAttributes();\n break;\n case 'template':\n if (this.isReact) {\n this.reRenderFileList();\n }\n else {\n this.clearAll();\n }\n break;\n case 'minFileSize':\n case 'maxFileSize':\n case 'autoUpload':\n this.clearAll();\n break;\n case 'sequentialUpload':\n this.clearAll();\n break;\n case 'locale':\n this.l10n.setLocale(this.locale);\n this.setLocalizedTexts();\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n }\n }\n };\n Uploader.prototype.setLocalizedTexts = function () {\n if (isNullOrUndefined(this.template)) {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n if (this.uploadWrapper && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + DROP_AREA))) {\n this.uploadWrapper.querySelector('.' + DROP_AREA).innerHTML = this.localizedTexts('dropFilesHint');\n }\n }\n this.updateFileList();\n }\n };\n Uploader.prototype.getKeyValue = function (val) {\n var keyValue;\n for (var _i = 0, _a = Object.keys(this.preLocaleObj); _i < _a.length; _i++) {\n var key = _a[_i];\n if (this.preLocaleObj[\"\" + key] === val) {\n keyValue = key;\n }\n }\n return keyValue;\n };\n Uploader.prototype.updateFileList = function () {\n var element;\n /* istanbul ignore next */\n if (this.fileList.length > 0 && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + LIST_PARENT))) {\n for (var i = 0; i < this.fileList.length; i++) {\n element = this.fileList[i].querySelector('.e-file-status');\n element.innerHTML = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n this.filesData[i].status = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n if (this.fileList[i].classList.contains(UPLOAD_SUCCESS)) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('delete'));\n }\n if (this.fileList[i].querySelector('.e-file-play-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('resume'));\n }\n if (this.fileList[i].querySelector('.e-file-remove-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('remove'));\n }\n if (this.fileList[i].querySelector('.e-file-reload-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('retry'));\n }\n if (!this.autoUpload) {\n this.uploadButton.innerText = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.uploadButton.setAttribute('title', this.localizedTexts('Upload'));\n this.clearButton.innerText = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n this.clearButton.setAttribute('title', this.localizedTexts('Clear'));\n }\n }\n }\n };\n Uploader.prototype.reRenderFileList = function () {\n if (this.listParent) {\n detach(this.listParent);\n this.listParent = null;\n this.fileList = [];\n this.internalCreateFileList(this.filesData);\n if (this.actionButtons) {\n this.removeActionButtons();\n this.renderActionButtons();\n this.checkActionButtonStatus();\n }\n }\n };\n Uploader.prototype.preRender = function () {\n this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload', invalidFileName: 'File Name is not allowed',\n dropFilesHint: 'Or drop files here', invalidMaxFileSize: 'File size is too large',\n invalidMinFileSize: 'File size is too small', invalidFileType: 'File type is not allowed',\n uploadFailedMessage: 'File failed to upload', uploadSuccessMessage: 'File uploaded successfully',\n removedSuccessMessage: 'File removed successfully', removedFailedMessage: 'Unable to remove file', inProgress: 'Uploading',\n readyToUploadMessage: 'Ready to upload', abort: 'Abort', remove: 'Remove', cancel: 'Cancel', delete: 'Delete file',\n pauseUpload: 'File upload paused', pause: 'Pause', resume: 'Resume', retry: 'Retry',\n fileUploadCancel: 'File upload canceled', invalidFileSelection: 'Invalid files selected', totalFiles: 'Total files',\n size: 'Size'\n };\n this.l10n = new L10n('uploader', this.localeText, this.locale);\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n this.formRendered();\n this.updateHTMLAttrToElement();\n this.checkHTMLAttributes(false);\n var ejInstance = getValue('ej2_instances', this.element);\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-UPLOADER') {\n var inputElement = this.createElement('input', { attrs: { type: 'file' } });\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n if (this.element.attributes[index].nodeName !== 'id') {\n inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n }\n else if (this.element.attributes[index].nodeName === 'id') {\n inputElement.setAttribute(this.element.attributes[index].nodeName, getUniqueID('uploader'));\n }\n inputElement.innerHTML = this.element.innerHTML;\n }\n if (!inputElement.hasAttribute('name')) {\n inputElement.setAttribute('name', 'UploadFiles');\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n /* istanbul ignore next */\n if (ejInstance[0].isPureReactComponent) {\n if (!isNullOrUndefined(ejInstance[0].props.name)) {\n this.element.setAttribute('name', ejInstance[0].props.name);\n }\n else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {\n this.element.setAttribute('name', ejInstance[0].props.id);\n }\n else {\n this.element.setAttribute('name', 'UploadFiles');\n }\n }\n if (isNullOrUndefined(this.element.getAttribute('name'))) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (!this.element.hasAttribute('type')) {\n this.element.setAttribute('type', 'file');\n }\n this.updateDirectoryAttributes();\n this.keyConfigs = {\n enter: 'enter'\n };\n if (this.element.hasAttribute('tabindex')) {\n this.tabIndex = this.element.getAttribute('tabindex');\n }\n this.browserName = Browser.info.name;\n this.uploaderName = this.element.getAttribute('name');\n };\n Uploader.prototype.formRendered = function () {\n var parentEle = closest(this.element, 'form');\n if (!isNullOrUndefined(parentEle)) {\n for (; parentEle && parentEle !== document.documentElement; parentEle = parentEle.parentElement) {\n if (parentEle.tagName === 'FORM') {\n this.isForm = true;\n this.formElement = parentEle;\n parentEle.setAttribute('enctype', 'multipart/form-data');\n parentEle.setAttribute('encoding', 'multipart/form-data');\n }\n }\n }\n };\n Uploader.prototype.getPersistData = function () {\n return this.addOnPersist(['filesData']);\n };\n /**\n * Return the module name of the component.\n *\n * @returns {string} Returns the component name.\n */\n Uploader.prototype.getModuleName = function () {\n return 'uploader';\n };\n Uploader.prototype.updateDirectoryAttributes = function () {\n if (this.directoryUpload) {\n this.element.setAttribute('directory', 'true');\n this.element.setAttribute('webkitdirectory', 'true');\n }\n else {\n this.element.removeAttribute('directory');\n this.element.removeAttribute('webkitdirectory');\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n Uploader.prototype.render = function () {\n this.renderBrowseButton();\n this.initializeUpload();\n this.updateHTMLAttrToWrapper();\n this.wireEvents();\n this.setMultipleSelection();\n this.setExtensions(this.allowedExtensions);\n this.setRTL();\n this.renderPreLoadFiles();\n this.setControlStatus();\n this.setCSSClass();\n };\n Uploader.prototype.renderBrowseButton = function () {\n this.browseButton = this.createElement('button', { className: 'e-css e-btn', attrs: { 'type': 'button' } });\n this.browseButton.setAttribute('tabindex', this.tabIndex);\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.textContent = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n }\n else {\n this.browseButton.appendChild(this.buttons.browse);\n }\n this.element.setAttribute('aria-label', 'Uploader');\n };\n Uploader.prototype.renderActionButtons = function () {\n this.element.setAttribute('tabindex', '-1');\n this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });\n this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS,\n attrs: { 'type': 'button', 'tabindex': this.btnTabIndex, 'aria-label': this.localizedTexts('Upload') } });\n this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS,\n attrs: { 'type': 'button', 'tabindex': this.btnTabIndex, 'aria-label': this.localizedTexts('Clear') } });\n this.actionButtons.appendChild(this.clearButton);\n this.actionButtons.appendChild(this.uploadButton);\n this.renderButtonTemplates();\n this.uploadWrapper.appendChild(this.actionButtons);\n this.browseButton.blur();\n if (!this.isPreloadFiles) {\n this.uploadButton.focus();\n }\n this.wireActionButtonEvents();\n };\n /* istanbul ignore next */\n Uploader.prototype.serverActionButtonsEventBind = function (element) {\n if (element && !this.isForm) {\n this.browseButton.blur();\n this.actionButtons = element;\n this.uploadButton = this.actionButtons.querySelector('.e-file-upload-btn');\n this.clearButton = this.actionButtons.querySelector('.e-file-clear-btn');\n this.uploadButton.focus();\n this.unwireActionButtonEvents();\n this.wireActionButtonEvents();\n this.checkActionButtonStatus();\n }\n };\n Uploader.prototype.wireActionButtonEvents = function () {\n EventHandler.add(this.uploadButton, 'click', this.uploadButtonClick, this);\n EventHandler.add(this.clearButton, 'click', this.clearButtonClick, this);\n };\n Uploader.prototype.unwireActionButtonEvents = function () {\n EventHandler.remove(this.uploadButton, 'click', this.uploadButtonClick);\n EventHandler.remove(this.clearButton, 'click', this.clearButtonClick);\n };\n Uploader.prototype.removeActionButtons = function () {\n if (this.actionButtons) {\n this.unwireActionButtonEvents();\n detach(this.actionButtons);\n this.actionButtons = null;\n }\n };\n Uploader.prototype.renderButtonTemplates = function () {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.textContent = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.textContent);\n }\n else {\n this.browseButton.innerHTML = '';\n this.browseButton.appendChild(this.buttons.browse);\n }\n if (this.uploadButton) {\n var uploadText = isNullOrUndefined(this.buttons.upload) ? 'Upload' : this.buttons.upload;\n this.buttons.upload = uploadText;\n if (typeof (this.buttons.upload) === 'string') {\n this.uploadButton.textContent = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.uploadButton.setAttribute('title', this.uploadButton.textContent);\n }\n else {\n this.uploadButton.innerHTML = '';\n this.uploadButton.appendChild(this.buttons.upload);\n }\n }\n if (this.clearButton) {\n var clearText = isNullOrUndefined(this.buttons.clear) ? 'Clear' : this.buttons.clear;\n this.buttons.clear = clearText;\n if (typeof (this.buttons.clear) === 'string') {\n this.clearButton.textContent = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n this.clearButton.setAttribute('title', this.clearButton.textContent);\n }\n else {\n this.clearButton.innerHTML = '';\n this.clearButton.appendChild(this.buttons.clear);\n }\n }\n };\n Uploader.prototype.initializeUpload = function () {\n this.element.setAttribute('tabindex', '-1');\n var inputWrapper = this.createElement('span', { className: INPUT_WRAPPER });\n this.element.parentElement.insertBefore(inputWrapper, this.element);\n this.dropAreaWrapper = this.createElement('div', { className: DROP_WRAPPER });\n this.element.parentElement.insertBefore(this.dropAreaWrapper, this.element);\n inputWrapper.appendChild(this.element);\n this.dropAreaWrapper.appendChild(this.browseButton);\n this.dropAreaWrapper.appendChild(inputWrapper);\n this.uploadWrapper = this.createElement('div', { className: CONTROL_WRAPPER });\n this.dropAreaWrapper.parentElement.insertBefore(this.uploadWrapper, this.dropAreaWrapper);\n this.uploadWrapper.appendChild(this.dropAreaWrapper);\n this.setDropArea();\n };\n Uploader.prototype.renderPreLoadFiles = function () {\n if (this.files.length) {\n if (this.enablePersistence && this.filesData.length) {\n this.internalCreateFileList(this.filesData);\n return;\n }\n if (isNullOrUndefined(this.files[0].size)) {\n return;\n }\n this.isPreloadFiles = true;\n var files = [].slice.call(this.files);\n var filesData = [];\n if (!this.multiple) {\n this.clearData();\n files = [files[0]];\n }\n for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {\n var data = files_1[_i];\n var fileData = {\n name: data.name + '.' + data.type.split('.')[data.type.split('.').length - 1],\n rawFile: '',\n size: data.size,\n status: this.localizedTexts('uploadSuccessMessage'),\n type: data.type,\n validationMessages: { minSize: '', maxSize: '' },\n statusCode: '2'\n };\n filesData.push(fileData);\n this.filesData.push(fileData);\n }\n this.internalCreateFileList(filesData);\n if (!this.autoUpload && this.listParent && !this.actionButtons && (!this.isForm || this.allowUpload()) && this.showFileList) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n if (this.sequentialUpload) {\n this.count = this.filesData.length - 1;\n }\n this.isPreloadFiles = false;\n }\n };\n Uploader.prototype.checkActionButtonStatus = function () {\n if (this.actionButtons) {\n var length_1 = this.uploadWrapper.querySelectorAll('.' + VALIDATION_FAILS).length +\n this.uploadWrapper.querySelectorAll('.e-upload-fails:not(.e-upload-progress)').length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_SUCCESS).length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_INPROGRESS).length;\n if (length_1 > 0 && length_1 === this.uploadWrapper.querySelectorAll('li').length) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n else {\n this.uploadButton.removeAttribute('disabled');\n }\n }\n };\n Uploader.prototype.setDropArea = function () {\n var dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');\n if (this.dropArea) {\n this.dropZoneElement = (typeof (this.dropArea) !== 'string') ? this.dropArea :\n select(this.dropArea, document);\n var element = this.element;\n var enableDropText = false;\n while (element.parentNode) {\n element = element.parentNode;\n if (element === this.dropZoneElement) {\n enableDropText = true;\n if (!dropTextArea) {\n this.createDropTextHint();\n }\n else {\n dropTextArea.innerHTML = this.localizedTexts('dropFilesHint');\n }\n }\n }\n if (!enableDropText && dropTextArea) {\n remove(dropTextArea);\n }\n }\n else if (!isNullOrUndefined(this.uploaderOptions) && this.uploaderOptions.dropArea === undefined) {\n this.createDropTextHint();\n this.dropZoneElement = this.uploadWrapper;\n this.setProperties({ dropArea: this.uploadWrapper }, true);\n }\n this.bindDropEvents();\n };\n Uploader.prototype.updateDropArea = function () {\n if (this.dropArea) {\n this.setDropArea();\n }\n else {\n this.dropZoneElement = null;\n var dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');\n if (dropTextArea) {\n remove(dropTextArea);\n }\n }\n };\n Uploader.prototype.createDropTextHint = function () {\n var fileDropArea = this.createElement('span', { className: DROP_AREA });\n fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');\n this.dropAreaWrapper.appendChild(fileDropArea);\n };\n Uploader.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttr$1.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n };\n Uploader.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttr$1.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValues = (this.htmlAttributes[\"\" + pro].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValues !== '') {\n addClass([this.uploadWrapper], updatedClassValues.split(' '));\n }\n }\n else if (pro === 'style') {\n var uploadStyle = this.uploadWrapper.getAttribute(pro);\n uploadStyle = !isNullOrUndefined(uploadStyle) ? (uploadStyle + this.htmlAttributes[\"\" + pro]) :\n this.htmlAttributes[\"\" + pro];\n this.uploadWrapper.setAttribute(pro, uploadStyle);\n }\n else {\n this.uploadWrapper.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n }\n };\n Uploader.prototype.setMultipleSelection = function () {\n if (this.multiple && !this.element.hasAttribute('multiple')) {\n var newAttr = document.createAttribute('multiple');\n newAttr.value = 'multiple';\n this.element.setAttributeNode(newAttr);\n }\n else if (!this.multiple) {\n this.element.removeAttribute('multiple');\n }\n };\n Uploader.prototype.checkAutoUpload = function (fileData) {\n if (this.autoUpload) {\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n this.sequenceUpload(fileData);\n }\n else {\n this.upload(fileData);\n }\n this.removeActionButtons();\n }\n else if (!this.actionButtons) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n };\n Uploader.prototype.sequenceUpload = function (fileData) {\n if (this.filesData.length - fileData.length === 0 ||\n this.filesData[(this.filesData.length - fileData.length - 1)].statusCode !== '1') {\n if (this.multiple || this.count < 0) {\n ++this.count;\n }\n var isFileListCreated = this.showFileList ? false : true;\n if (typeof this.filesData[this.count] === 'object') {\n this.isFirstFileOnSelection = false;\n this.upload(this.filesData[this.count], isFileListCreated);\n if (this.filesData[this.count].statusCode === '0') {\n this.sequenceUpload(fileData);\n }\n }\n else {\n --this.count;\n }\n }\n };\n Uploader.prototype.setCSSClass = function (oldCSSClass) {\n var updatedOldCssClass = oldCSSClass;\n if (!isNullOrUndefined(oldCSSClass)) {\n updatedOldCssClass = (oldCSSClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(oldCSSClass) && updatedOldCssClass !== '') {\n removeClass([this.uploadWrapper], updatedOldCssClass.split(' '));\n }\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(this.cssClass) && updatedCssClassValue !== '') {\n addClass([this.uploadWrapper], updatedCssClassValue.split(updatedCssClassValue.indexOf(',') > -1 ? ',' : ' '));\n }\n };\n Uploader.prototype.wireEvents = function () {\n EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);\n EventHandler.add(this.element, 'change', this.onSelectFiles, this);\n EventHandler.add(document, 'click', this.removeFocus, this);\n this.keyboardModule = new KeyboardEvents(this.uploadWrapper, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n };\n Uploader.prototype.unWireEvents = function () {\n EventHandler.remove(this.browseButton, 'click', this.browseButtonClick);\n EventHandler.remove(this.element, 'change', this.onSelectFiles);\n EventHandler.remove(document, 'click', this.removeFocus);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n if (this.keyboardModule) {\n this.keyboardModule.destroy();\n }\n };\n Uploader.prototype.resetForm = function () {\n this.clearAll();\n };\n Uploader.prototype.keyActionHandler = function (e) {\n var targetElement = e.target;\n switch (e.action) {\n case 'enter':\n if (e.target === this.clearButton) {\n this.clearButtonClick();\n }\n else if (e.target === this.uploadButton) {\n this.uploadButtonClick();\n }\n else if (e.target === this.browseButton) {\n this.browseButtonClick();\n }\n else if (targetElement.classList.contains(PAUSE_UPLOAD)) {\n var metaData = this.getCurrentMetaData(null, e);\n metaData.file.statusCode = '4';\n metaData.file.status = this.localizedTexts('pauseUpload');\n this.abortUpload(metaData, false);\n }\n else if (targetElement.classList.contains(RESUME_UPLOAD)) {\n this.resumeUpload(this.getCurrentMetaData(null, e), e);\n }\n else if (targetElement.classList.contains(RETRY_ICON)) {\n var metaData = this.getCurrentMetaData(null, e);\n if (!isNullOrUndefined(metaData)) {\n metaData.file.statusCode = '1';\n metaData.file.status = this.localizedTexts('readyToUploadMessage');\n this.chunkUpload(metaData.file);\n }\n else {\n var target = e.target.parentElement;\n var fileData = this.filesData[this.fileList.indexOf(target)];\n this.retry(fileData);\n }\n }\n else {\n this.removeFiles(e);\n if (!targetElement.classList.contains(ABORT_ICON)) {\n this.browseButton.focus();\n }\n }\n e.preventDefault();\n e.stopPropagation();\n break;\n }\n };\n Uploader.prototype.getCurrentMetaData = function (fileInfo, e) {\n var fileData;\n var targetMetaData;\n if (isNullOrUndefined(fileInfo)) {\n var target = e.target.parentElement;\n fileData = this.filesData[this.fileList.indexOf(target)];\n }\n else {\n fileData = fileInfo;\n }\n for (var i = 0; i < this.uploadMetaData.length; i++) {\n if (this.uploadMetaData[i].file.name === fileData.name) {\n targetMetaData = this.uploadMetaData[i];\n }\n }\n return targetMetaData;\n };\n Uploader.prototype.removeFocus = function () {\n if (this.uploadWrapper && this.listParent && this.listParent.querySelector('.' + ICON_FOCUSED)) {\n document.activeElement.blur();\n this.listParent.querySelector('.' + ICON_FOCUSED).classList.remove(ICON_FOCUSED);\n }\n };\n Uploader.prototype.browseButtonClick = function () {\n this.element.click();\n };\n Uploader.prototype.uploadButtonClick = function () {\n if (this.sequentialUpload) {\n this.sequenceUpload(this.filesData);\n }\n else {\n this.upload(this.filesData);\n }\n };\n Uploader.prototype.clearButtonClick = function () {\n this.clearAll();\n /* istanbul ignore next */\n if (this.sequentialUpload) {\n this.count = -1;\n }\n this.actionCompleteCount = 0;\n };\n Uploader.prototype.bindDropEvents = function () {\n if (this.dropZoneElement) {\n EventHandler.add(this.dropZoneElement, 'drop', this.dropElement, this);\n EventHandler.add(this.dropZoneElement, 'dragover', this.dragHover, this);\n EventHandler.add(this.dropZoneElement, 'dragleave', this.onDragLeave, this);\n EventHandler.add(this.dropZoneElement, 'paste', this.onPasteFile, this);\n EventHandler.add(this.dropZoneElement, 'dragenter', this.onDragEnter, this);\n }\n };\n Uploader.prototype.unBindDropEvents = function () {\n if (this.dropZoneElement) {\n EventHandler.remove(this.dropZoneElement, 'drop', this.dropElement);\n EventHandler.remove(this.dropZoneElement, 'dragover', this.dragHover);\n EventHandler.remove(this.dropZoneElement, 'dragleave', this.onDragLeave);\n EventHandler.remove(this.dropZoneElement, 'dragenter', this.onDragEnter);\n }\n };\n Uploader.prototype.onDragEnter = function (e) {\n if (!this.enabled) {\n return;\n }\n this.dropZoneElement.classList.add(DRAG_HOVER);\n this.dragCounter = this.dragCounter + 1;\n e.preventDefault();\n e.stopPropagation();\n };\n Uploader.prototype.onDragLeave = function () {\n if (!this.enabled) {\n return;\n }\n this.dragCounter = this.dragCounter - 1;\n if (!this.dragCounter) {\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n }\n };\n Uploader.prototype.dragHover = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.dropEffect !== 'Default') {\n e.dataTransfer.dropEffect = this.dropEffect.toLowerCase();\n }\n e.preventDefault();\n e.stopPropagation();\n };\n /* istanbul ignore next */\n Uploader.prototype.dropElement = function (e) {\n this.dragCounter = 0;\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n this.onSelectFiles(e);\n e.preventDefault();\n e.stopPropagation();\n };\n /* istanbul ignore next */\n Uploader.prototype.onPasteFile = function (event) {\n var item = event.clipboardData.items;\n if (event.type === 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {\n this.element.files = event.clipboardData.files;\n }\n if (item.length !== 1 && !this.multiple) {\n return;\n }\n for (var file = 0; file < item.length; file++) {\n var pasteFile = [].slice.call(item)[file];\n if ((pasteFile.kind === 'file') || pasteFile.type.match('^image/')) {\n this.renderSelectedFiles(event, [pasteFile.getAsFile()], false, true);\n }\n }\n };\n Uploader.prototype.getSelectedFiles = function (index) {\n var data = [];\n var liElement = this.fileList[index];\n var allFiles = this.getFilesData();\n var nameElements = +liElement.getAttribute('data-files-count');\n var startIndex = 0;\n for (var i = 0; i < index; i++) {\n startIndex += (+this.fileList[i].getAttribute('data-files-count'));\n }\n for (var j = startIndex; j < (startIndex + nameElements); j++) {\n data.push(allFiles[j]);\n }\n return data;\n };\n Uploader.prototype.removeFiles = function (args) {\n if (!this.enabled) {\n return;\n }\n var selectedElement = args.target.parentElement;\n var index = this.fileList.indexOf(selectedElement);\n var liElement = this.fileList[index];\n var formUpload = this.isFormUpload();\n var fileData = formUpload ? this.getSelectedFiles(index) : this.getFilesInArray(this.filesData[index]);\n if (isNullOrUndefined(fileData)) {\n return;\n }\n if (args.target.classList.contains(ABORT_ICON) && !formUpload) {\n fileData[0].statusCode = '5';\n if (!isNullOrUndefined(liElement)) {\n var spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n this.uploadSequential();\n }\n if (!(liElement.classList.contains(RESTRICT_RETRY))) {\n this.checkActionComplete(true);\n }\n }\n else if (!closest(args.target, '.' + SPINNER_PANE)) {\n this.remove(fileData, false, false, true, args);\n }\n if (this.isForm && liElement && liElement.classList.contains(INVALID_FILE)) {\n this.element.value = '';\n }\n this.checkActionButtonStatus();\n };\n Uploader.prototype.removeFilesData = function (file, customTemplate) {\n var index;\n if (customTemplate) {\n if (!this.showFileList) {\n index = this.filesData.indexOf(file);\n this.filesData.splice(index, 1);\n }\n return;\n }\n var selectedElement = this.getLiElement(file);\n if (isNullOrUndefined(selectedElement)) {\n return;\n }\n this.element.value = '';\n detach(selectedElement);\n index = this.fileList.indexOf(selectedElement);\n this.fileList.splice(index, 1);\n this.filesData.splice(index, 1);\n if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {\n detach(this.listParent);\n this.listParent = null;\n this.removeActionButtons();\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n if (index <= this.count) {\n --this.count;\n }\n }\n };\n Uploader.prototype.removeUploadedFile = function (file, eventArgs, removeDirectly, custom) {\n var _this = this;\n var selectedFiles = file;\n var ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);\n ajax.emitError = false;\n var formData = new FormData();\n ajax.beforeSend = function (e) {\n eventArgs.currentRequest = ajax.httpRequest;\n if (!removeDirectly) {\n _this.trigger('removing', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n e.cancel = true;\n }\n else {\n _this.removingEventCallback(eventArgs, formData, selectedFiles, file);\n }\n });\n }\n else {\n _this.removingEventCallback(eventArgs, formData, selectedFiles, file);\n }\n };\n ajax.onLoad = function (e) {\n _this.removeCompleted(e, selectedFiles, custom);\n return {};\n };\n /* istanbul ignore next */\n ajax.onError = function (e) {\n _this.removeFailed(e, selectedFiles, custom);\n return {};\n };\n ajax.send(formData);\n };\n Uploader.prototype.removingEventCallback = function (eventArgs, formData, selectedFiles, file) {\n /* istanbul ignore next */\n var name = this.element.getAttribute('name');\n var liElement = this.getLiElement(file);\n if (!isNullOrUndefined(liElement) && (!isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON)) ||\n !isNullOrUndefined(liElement.querySelector('.' + REMOVE_ICON)))) {\n var spinnerTarget = liElement.querySelector('.' + DELETE_ICON) ?\n liElement.querySelector('.' + DELETE_ICON) :\n liElement.querySelector('.' + REMOVE_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {\n formData.append(name, selectedFiles.rawFile, selectedFiles.name);\n }\n else {\n formData.append(name, selectedFiles.name);\n }\n this.updateFormData(formData, eventArgs.customFormData);\n };\n /* istanbul ignore next */\n Uploader.prototype.updateFormData = function (formData, customData) {\n if (customData.length > 0 && customData[0]) {\n var _loop_1 = function (i) {\n var data = customData[i];\n // eslint-disable-next-line @typescript-eslint/tslint/config\n var value = Object.keys(data).map(function (e) {\n return data[\"\" + e];\n });\n formData.append(Object.keys(data)[0], value);\n };\n for (var i = 0; i < customData.length; i++) {\n _loop_1(i);\n }\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.updateCustomheader = function (request, currentRequest) {\n if (currentRequest.length > 0 && currentRequest[0]) {\n var _loop_2 = function (i) {\n var data = currentRequest[i];\n // eslint-disable-next-line @typescript-eslint/tslint/config\n var value = Object.keys(data).map(function (e) {\n return data[\"\" + e];\n });\n request.setRequestHeader(Object.keys(data)[0], value);\n };\n for (var i = 0; i < currentRequest.length; i++) {\n _loop_2(i);\n }\n }\n };\n Uploader.prototype.removeCompleted = function (e, files, customTemplate) {\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var status = e.target;\n if (status.readyState === 4 && status.status >= 200 && status.status <= 299) {\n var args = {\n e: e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedSuccessMessage'), '2')\n };\n this.trigger('success', args);\n this.removeFilesData(files, customTemplate);\n var index = this.uploadedFilesData.indexOf(files);\n this.uploadedFilesData.splice(index, 1);\n this.trigger('change', { files: this.uploadedFilesData });\n }\n else {\n this.removeFailed(e, files, customTemplate);\n }\n };\n Uploader.prototype.removeFailed = function (e, files, customTemplate) {\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var args = {\n e: e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedFailedMessage'), '0')\n };\n if (!customTemplate) {\n var index = this.filesData.indexOf(files);\n var rootElement = this.fileList[index];\n if (rootElement) {\n rootElement.classList.remove(UPLOAD_SUCCESS);\n rootElement.classList.add(UPLOAD_FAILED);\n var statusElement = rootElement.querySelector('.' + STATUS);\n if (statusElement) {\n statusElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.add(UPLOAD_FAILED);\n }\n }\n this.checkActionButtonStatus();\n }\n this.trigger('failure', args);\n var liElement = this.getLiElement(files);\n /* istanbul ignore next */\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON))) {\n var spinnerTarget = liElement.querySelector('.' + DELETE_ICON);\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.getFilesFromFolder = function (event) {\n this.filesEntries = [];\n var items = this.multiple ?\n event.dataTransfer.items : [event.dataTransfer.items[0]];\n var validDirectoryUpload = this.checkDirectoryUpload(items);\n if (!validDirectoryUpload) {\n return;\n }\n var _loop_3 = function (i) {\n var item = items[i].webkitGetAsEntry();\n if (item.isFile) {\n var files_2 = [];\n (item).file(function (fileObj) {\n var path = item.fullPath;\n files_2.push({ 'path': path, 'file': fileObj });\n });\n this_1.renderSelectedFiles(event, files_2, true);\n }\n else if (item.isDirectory) {\n this_1.traverseFileTree(item, event);\n }\n };\n var this_1 = this;\n for (var i = 0; i < items.length; i++) {\n _loop_3(i);\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.checkDirectoryUpload = function (items) {\n for (var i = 0; items && i < items.length; i++) {\n var item = items[i].webkitGetAsEntry();\n if (item.isDirectory) {\n return true;\n }\n }\n return false;\n };\n /* istanbul ignore next */\n Uploader.prototype.traverseFileTree = function (item, event) {\n if (item.isFile) {\n this.filesEntries.push(item);\n }\n else if (item.isDirectory) {\n var directoryReader = item.createReader();\n this.readFileFromDirectory(directoryReader, event);\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.readFileFromDirectory = function (directoryReader, event) {\n var _this = this;\n directoryReader.readEntries(function (entries) {\n for (var i = 0; i < entries.length; i++) {\n _this.traverseFileTree(entries[i], event);\n }\n _this.pushFilesEntries(event);\n if (entries.length) {\n _this.readFileFromDirectory(directoryReader);\n }\n });\n };\n Uploader.prototype.pushFilesEntries = function (event) {\n var _this = this;\n var files = [];\n var _loop_4 = function (i) {\n this_2.filesEntries[i].file(function (fileObj) {\n if (_this.filesEntries.length) {\n var path = _this.filesEntries[i].fullPath;\n files.push({ 'path': path, 'file': fileObj });\n if (i === _this.filesEntries.length - 1) {\n _this.filesEntries = [];\n _this.renderSelectedFiles(event, files, true);\n }\n }\n });\n };\n var this_2 = this;\n for (var i = 0; i < this.filesEntries.length; i++) {\n _loop_4(i);\n }\n };\n Uploader.prototype.onSelectFiles = function (args) {\n if (!this.enabled) {\n return;\n }\n var targetFiles;\n /* istanbul ignore next */\n if (args.type === 'drop') {\n if (this.directoryUpload) {\n this.getFilesFromFolder(args);\n }\n else {\n var files = this.sortFilesList = args.dataTransfer.files;\n if (this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {\n this.element.files = files;\n }\n if (files.length > 0) {\n targetFiles = this.multiple ? this.sortFileList(files) : [files[0]];\n this.renderSelectedFiles(args, targetFiles);\n }\n }\n }\n else {\n targetFiles = [].slice.call(args.target.files);\n this.renderSelectedFiles(args, targetFiles);\n }\n if (this.isAngular || this.isReact) {\n args.stopPropagation();\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.getBase64 = function (file) {\n return new Promise(function (resolve, reject) {\n var fileReader = new FileReader();\n fileReader.readAsDataURL(file);\n fileReader.onload = function () { return resolve(fileReader.result); };\n fileReader.onerror = function (error) { return reject(error); };\n });\n };\n /* istanbul ignore next */\n /* tslint:ignore */\n Uploader.prototype.renderSelectedFiles = function (args, targetFiles, directory, paste) {\n var _this = this;\n this.base64String = [];\n var eventArgs = {\n event: args,\n cancel: false,\n filesData: [],\n isModified: false,\n modifiedFilesData: [],\n progressInterval: '',\n isCanceled: false,\n currentRequest: null,\n customFormData: null\n };\n /* istanbul ignore next */\n if (targetFiles.length < 1) {\n eventArgs.isCanceled = true;\n this.trigger('selected', eventArgs);\n return;\n }\n this.flag = true;\n var fileData = [];\n if (!this.multiple) {\n this.clearData(true);\n this.actionCompleteCount = 0;\n targetFiles = [targetFiles[0]];\n }\n for (var i = 0; i < targetFiles.length; i++) {\n var file = directory ? targetFiles[i].file : targetFiles[i];\n this.updateInitialFileDetails(args, targetFiles, file, i, fileData, directory, paste);\n }\n eventArgs.filesData = fileData;\n if (this.allowedExtensions.indexOf('*') > -1) {\n this.allTypes = true;\n }\n if (this.enableHtmlSanitizer) {\n for (var i = 0; i < fileData.length; i++) {\n var sanitizeFile = SanitizeHtmlHelper.beforeSanitize();\n var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString(), 10)].name);\n var currentFileName = fileData[parseInt(i.toString(), 10)].name;\n var isUTF8 = false;\n for (var i_1 = 0; i_1 < currentFileName.length; i_1++) {\n if (currentFileName.charCodeAt(i_1) > 127) {\n isUTF8 = true;\n break;\n }\n }\n var htmlTagRegex = /<([a-z][a-z0-9]*)\\b[^>]*>(.*?)<\\/\\1>/i;\n var hasHTMLString = htmlTagRegex.test(currentFileName);\n if ((sanitizeFileName !== fileData[parseInt(i.toString(), 10)].name) && !(isUTF8 && !hasHTMLString)) {\n var encodedFileName = targetFiles[parseInt(i.toString(), 10)].name.replace(/[\\u00A0-\\u9999<>\\\\&]/g, function (i) {\n return '&#' + i.charCodeAt(0) + ';';\n });\n fileData[parseInt(i.toString(), 10)].name = encodedFileName;\n fileData[parseInt(i.toString(), 10)].status = this.localizedTexts('invalidFileName');\n fileData[parseInt(i.toString(), 10)].statusCode = '0';\n }\n }\n }\n if (!this.allTypes) {\n fileData = this.checkExtension(fileData);\n }\n this.trigger('selected', eventArgs, function (eventArgs) {\n _this._internalRenderSelect(eventArgs, fileData);\n });\n };\n Uploader.prototype.updateInitialFileDetails = function (args, targetFiles, file, i, fileData, directory, paste) {\n var fileName = directory ? targetFiles[i].path.substring(1, targetFiles[i].path.length) : paste ?\n getUniqueID(file.name.substring(0, file.name.lastIndexOf('.'))) + '.' + this.getFileType(file.name) :\n this.directoryUpload ? targetFiles[i].webkitRelativePath : file.name;\n var fileDetails = {\n name: fileName,\n rawFile: file,\n size: file.size,\n status: this.localizedTexts('readyToUploadMessage'),\n type: this.getFileType(file.name),\n validationMessages: this.validatedFileSize(file.size),\n statusCode: '1',\n id: getUniqueID(file.name.substring(0, file.name.lastIndexOf('.'))) + '.' + this.getFileType(file.name)\n };\n /* istanbul ignore next */\n if (paste) {\n fileDetails.fileSource = 'paste';\n }\n fileDetails.status = fileDetails.validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n fileDetails.validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : fileDetails.status;\n if (fileDetails.validationMessages.minSize !== '' || fileDetails.validationMessages.maxSize !== '') {\n fileDetails.statusCode = '0';\n this.checkActionComplete(true);\n }\n fileData.push(fileDetails);\n };\n Uploader.prototype._internalRenderSelect = function (eventArgs, fileData) {\n if (!eventArgs.cancel) {\n /* istanbul ignore next */\n this.selectedFiles = this.selectedFiles.concat(fileData);\n this.btnTabIndex = this.disableKeyboardNavigation ? '-1' : '0';\n if (this.showFileList) {\n if (eventArgs.isModified && eventArgs.modifiedFilesData.length > 0) {\n for (var j = 0; j < eventArgs.modifiedFilesData.length; j++) {\n for (var k = 0; k < fileData.length; k++) {\n if (eventArgs.modifiedFilesData[j].id === fileData[k].id) {\n eventArgs.modifiedFilesData[j].rawFile = fileData[k].rawFile;\n }\n }\n }\n var dataFiles = this.allTypes ? eventArgs.modifiedFilesData :\n this.checkExtension(eventArgs.modifiedFilesData);\n this.updateSortedFileList(dataFiles);\n this.filesData = this.filesData.concat(dataFiles);\n if (!this.isForm || this.allowUpload()) {\n this.checkAutoUpload(dataFiles);\n }\n }\n else {\n this.internalCreateFileList(fileData);\n if (this.autoUpload && this.sequenceUpload && this.sequentialUpload && this.filesData.length > 0 && this.filesData[this.filesData.length - 1].statusCode !== '2' && this.filesData[this.filesData.length - 1].statusCode !== '0') {\n this.filesData = this.filesData.concat(fileData);\n return;\n }\n this.filesData = this.filesData.concat(fileData);\n if (!this.isForm || this.allowUpload()) {\n this.checkAutoUpload(fileData);\n }\n }\n if (!isNullOrUndefined(eventArgs.progressInterval) && eventArgs.progressInterval !== '') {\n this.progressInterval = eventArgs.progressInterval;\n }\n }\n else {\n this.filesData = this.filesData.concat(fileData);\n if (this.autoUpload) {\n this.upload(this.filesData, true);\n }\n }\n this.raiseActionComplete();\n this.isFirstFileOnSelection = true;\n }\n };\n Uploader.prototype.allowUpload = function () {\n var allowFormUpload = false;\n if (this.isForm && (!isNullOrUndefined(this.asyncSettings.saveUrl) && this.asyncSettings.saveUrl !== '')) {\n allowFormUpload = true;\n }\n return allowFormUpload;\n };\n Uploader.prototype.isFormUpload = function () {\n var isFormUpload = false;\n if (this.isForm && ((isNullOrUndefined(this.asyncSettings.saveUrl) || this.asyncSettings.saveUrl === '')\n && (isNullOrUndefined(this.asyncSettings.removeUrl) || this.asyncSettings.removeUrl === ''))) {\n isFormUpload = true;\n }\n return isFormUpload;\n };\n Uploader.prototype.clearData = function (singleUpload) {\n if (!isNullOrUndefined(this.listParent)) {\n detach(this.listParent);\n this.listParent = null;\n }\n if (this.browserName !== 'msie' && !singleUpload) {\n this.element.value = '';\n }\n this.fileList = [];\n this.filesData = [];\n this.removeActionButtons();\n };\n Uploader.prototype.updateSortedFileList = function (filesData) {\n var previousListClone = this.createElement('div', { id: 'clonewrapper' });\n var added = -1;\n if (this.listParent) {\n for (var i = 0; i < this.listParent.querySelectorAll('li').length; i++) {\n var liElement = this.listParent.querySelectorAll('li')[i];\n previousListClone.appendChild(liElement.cloneNode(true));\n }\n this.removeActionButtons();\n var oldList = [].slice.call(previousListClone.childNodes);\n this.createParentUL();\n for (var index = 0; index < filesData.length; index++) {\n for (var j = 0; j < this.filesData.length; j++) {\n if (this.filesData[j].name === filesData[index].name) {\n this.listParent.appendChild(oldList[j]);\n EventHandler.add(oldList[j].querySelector('.e-icons'), 'click', this.removeFiles, this);\n this.fileList.push(oldList[j]);\n added = index;\n }\n }\n if (added !== index) {\n this.internalCreateFileList([filesData[index]]);\n }\n }\n }\n else {\n this.internalCreateFileList(filesData);\n }\n };\n Uploader.prototype.isBlank = function (str) {\n return (!str || /^\\s*$/.test(str));\n };\n Uploader.prototype.checkExtension = function (files) {\n var dropFiles = files;\n if (!this.isBlank(this.allowedExtensions)) {\n var allowedExtensions = [];\n var extensions = this.allowedExtensions.split(',');\n for (var _i = 0, extensions_1 = extensions; _i < extensions_1.length; _i++) {\n var extension = extensions_1[_i];\n allowedExtensions.push(extension.trim().toLocaleLowerCase());\n }\n for (var i = 0; i < files.length; i++) {\n var checkFileType = files[i].type.indexOf('.') !== -1 ?\n files[i].type.replace('.', '') : files[i].type;\n if (allowedExtensions.indexOf(('.' + checkFileType).toLocaleLowerCase()) === -1) {\n files[i].status = this.localizedTexts('invalidFileType');\n files[i].statusCode = '0';\n }\n }\n }\n return dropFiles;\n };\n Uploader.prototype.validatedFileSize = function (fileSize) {\n var minSizeError = '';\n var maxSizeError = '';\n if (fileSize < this.minFileSize) {\n minSizeError = this.localizedTexts('invalidMinFileSize');\n }\n else if (fileSize > this.maxFileSize) {\n maxSizeError = this.localizedTexts('invalidMaxFileSize');\n }\n else {\n minSizeError = '';\n maxSizeError = '';\n }\n var errorMessage = { minSize: minSizeError, maxSize: maxSizeError };\n return errorMessage;\n };\n Uploader.prototype.isPreLoadFile = function (fileData) {\n var isPreload = false;\n for (var i = 0; i < this.files.length; i++) {\n if (this.files[i].name === fileData.name.slice(0, fileData.name.lastIndexOf('.')) &&\n this.files[i].type === fileData.type) {\n isPreload = true;\n }\n }\n return isPreload;\n };\n Uploader.prototype.createCustomfileList = function (fileData) {\n this.createParentUL();\n for (var _i = 0, fileData_1 = fileData; _i < fileData_1.length; _i++) {\n var listItem = fileData_1[_i];\n var listElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });\n this.uploadTemplateFn = this.templateComplier(this.template);\n var liTempCompiler = this.uploadTemplateFn(listItem, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, listElement);\n if (liTempCompiler) {\n var fromElements = [].slice.call(liTempCompiler);\n append(fromElements, listElement);\n }\n var index = fileData.indexOf(listItem);\n var eventArgs = {\n element: listElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n var eventsArgs = {\n element: listElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(listElement);\n this.fileList.push(listElement);\n }\n this.renderReactTemplates();\n };\n Uploader.prototype.createParentUL = function () {\n if (isNullOrUndefined(this.listParent)) {\n this.listParent = this.createElement('ul', { className: LIST_PARENT });\n this.uploadWrapper.appendChild(this.listParent);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Uploader.prototype.formFileList = function (fileData, files) {\n var fileList = this.createElement('li', { className: FILE });\n fileList.setAttribute('data-files-count', fileData.length + '');\n var fileContainer = this.createElement('span', { className: TEXT_CONTAINER });\n var statusMessage;\n for (var _i = 0, fileData_2 = fileData; _i < fileData_2.length; _i++) {\n var listItem = fileData_2[_i];\n var fileNameEle = this.createElement('span', { className: FILE_NAME });\n fileNameEle.innerHTML = this.getFileNameOnly(listItem.name);\n var fileTypeEle = this.createElement('span', { className: FILE_TYPE });\n var fileType = this.getFileType(listItem.name);\n fileTypeEle.innerHTML = '.' + fileType;\n if (!fileType) {\n fileTypeEle.classList.add('e-hidden');\n }\n if (!this.enableRtl) {\n fileContainer.appendChild(fileNameEle);\n fileContainer.appendChild(fileTypeEle);\n }\n else {\n var rtlContainer = this.createElement('span', { className: RTL_CONTAINER });\n rtlContainer.appendChild(fileTypeEle);\n rtlContainer.appendChild(fileNameEle);\n fileContainer.appendChild(rtlContainer);\n }\n this.truncateName(fileNameEle);\n statusMessage = this.formValidateFileInfo(listItem, fileList);\n }\n fileList.appendChild(fileContainer);\n this.setListToFileInfo(fileData, fileList);\n var index = this.listParent.querySelectorAll('li').length;\n var infoEle = this.createElement('span');\n if (fileList.classList.contains(INVALID_FILE)) {\n infoEle.classList.add(STATUS);\n infoEle.classList.add(INVALID_FILE);\n infoEle.innerText = fileData.length > 1 ? this.localizedTexts('invalidFileSelection') : statusMessage;\n }\n else {\n infoEle.classList.add(fileData.length > 1 ? INFORMATION : FILE_SIZE);\n infoEle.innerText = fileData.length > 1 ? this.localizedTexts('totalFiles') + ': ' + fileData.length + ' , '\n + this.localizedTexts('size') + ': ' +\n this.bytesToSize(this.getFileSize(fileData)) : this.bytesToSize(fileData[0].size);\n this.createFormInput(fileData);\n }\n fileContainer.appendChild(infoEle);\n if (isNullOrUndefined(fileList.querySelector('.e-icons'))) {\n var iconElement = this.createElement('span', { className: 'e-icons', attrs: { 'tabindex': this.btnTabIndex } });\n /* istanbul ignore next */\n if (this.browserName === 'msie') {\n iconElement.classList.add('e-msie');\n }\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n fileList.appendChild(fileContainer);\n fileList.appendChild(iconElement);\n EventHandler.add(iconElement, 'click', this.removeFiles, this);\n iconElement.classList.add(REMOVE_ICON);\n }\n var eventArgs = {\n element: fileList,\n fileInfo: this.mergeFileInfo(fileData, fileList),\n index: index,\n isPreload: this.isPreLoadFile(this.mergeFileInfo(fileData, fileList))\n };\n var eventsArgs = {\n element: fileList,\n fileInfo: this.mergeFileInfo(fileData, fileList),\n index: index,\n isPreload: this.isPreLoadFile(this.mergeFileInfo(fileData, fileList))\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(fileList);\n this.fileList.push(fileList);\n };\n Uploader.prototype.formValidateFileInfo = function (listItem, fileList) {\n var statusMessage = listItem.status;\n var validationMessages = this.validatedFileSize(listItem.size);\n if (validationMessages.minSize !== '' || validationMessages.maxSize !== '') {\n this.addInvalidClass(fileList);\n statusMessage = validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : statusMessage;\n }\n var typeValidationMessage = this.checkExtension(this.getFilesInArray(listItem))[0].status;\n if (typeValidationMessage === this.localizedTexts('invalidFileType')) {\n this.addInvalidClass(fileList);\n statusMessage = typeValidationMessage;\n }\n return statusMessage;\n };\n Uploader.prototype.addInvalidClass = function (fileList) {\n fileList.classList.add(INVALID_FILE);\n };\n Uploader.prototype.createFormInput = function (fileData) {\n if (this.browserName !== 'safari') {\n var inputElement = this.element.cloneNode(true);\n inputElement.classList.add(HIDDEN_INPUT);\n for (var _i = 0, fileData_3 = fileData; _i < fileData_3.length; _i++) {\n var listItem = fileData_3[_i];\n listItem.input = inputElement;\n }\n inputElement.setAttribute('id', getUniqueID('hiddenUploader'));\n inputElement.setAttribute('name', this.uploaderName);\n this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);\n if (this.browserName !== 'msie' && this.browserName !== 'edge') {\n this.element.value = '';\n }\n }\n };\n Uploader.prototype.getFileSize = function (fileData) {\n var fileSize = 0;\n for (var _i = 0, fileData_4 = fileData; _i < fileData_4.length; _i++) {\n var file = fileData_4[_i];\n fileSize += file.size;\n }\n return fileSize;\n };\n Uploader.prototype.mergeFileInfo = function (fileData, fileList) {\n var result = {\n name: '',\n rawFile: '',\n size: 0,\n status: '',\n type: '',\n validationMessages: { minSize: '', maxSize: '' },\n statusCode: '1',\n list: fileList\n };\n var fileNames = [];\n var type = '';\n for (var _i = 0, fileData_5 = fileData; _i < fileData_5.length; _i++) {\n var listItem = fileData_5[_i];\n fileNames.push(listItem.name);\n type = listItem.type;\n }\n result.name = fileNames.join(', ');\n result.size = this.getFileSize(fileData);\n result.type = type;\n result.status = this.statusForFormUpload(fileData, fileList);\n return result;\n };\n Uploader.prototype.statusForFormUpload = function (fileData, fileList) {\n var isValid = true;\n var statusMessage;\n for (var _i = 0, fileData_6 = fileData; _i < fileData_6.length; _i++) {\n var listItem = fileData_6[_i];\n statusMessage = listItem.status;\n var validationMessages = this.validatedFileSize(listItem.size);\n if (validationMessages.minSize !== '' || validationMessages.maxSize !== '') {\n isValid = false;\n statusMessage = validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : statusMessage;\n }\n var typeValidationMessage = this.checkExtension(this.getFilesInArray(listItem))[0].status;\n if (typeValidationMessage === this.localizedTexts('invalidFileType')) {\n isValid = false;\n statusMessage = typeValidationMessage;\n }\n }\n if (!isValid) {\n fileList.classList.add(INVALID_FILE);\n statusMessage = fileData.length > 1 ? this.localizedTexts('invalidFileSelection') : statusMessage;\n }\n else {\n statusMessage = this.localizedTexts('totalFiles') + ': ' + fileData.length + ' , '\n + this.localizedTexts('size') + ': ' +\n this.bytesToSize(this.getFileSize(fileData));\n }\n return statusMessage;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Uploader.prototype.formCustomFileList = function (fileData, files) {\n this.createParentUL();\n var fileList = this.createElement('li', { className: FILE });\n fileList.setAttribute('data-files-count', fileData.length + '');\n this.setListToFileInfo(fileData, fileList);\n var result = this.mergeFileInfo(fileData, fileList);\n fileList.setAttribute('data-file-name', result.name);\n this.uploadTemplateFn = this.templateComplier(this.template);\n var liTempCompiler = this.uploadTemplateFn(result, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, fileList);\n if (liTempCompiler) {\n var fromElements = [].slice.call(liTempCompiler);\n append(fromElements, fileList);\n }\n var index = this.listParent.querySelectorAll('li').length;\n if (!fileList.classList.contains(INVALID_FILE)) {\n this.createFormInput(fileData);\n }\n var eventArgs = {\n element: fileList,\n fileInfo: result,\n index: index,\n isPreload: this.isPreLoadFile(result)\n };\n var eventsArgs = {\n element: fileList,\n fileInfo: result,\n index: index,\n isPreload: this.isPreLoadFile(result)\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(fileList);\n this.fileList.push(fileList);\n this.renderReactTemplates();\n };\n /**\n * Create the file list for specified files data.\n *\n * @param { FileInfo[] } fileData - Specifies the files data for file list creation.\n * @returns {void}\n */\n Uploader.prototype.createFileList = function (fileData) {\n this.filesData = this.filesData && this.filesData.length > 0 ? this.filesData.concat(fileData) : fileData;\n this.internalCreateFileList(fileData);\n };\n Uploader.prototype.internalCreateFileList = function (fileData) {\n this.createParentUL();\n if (this.template !== '' && !isNullOrUndefined(this.template)) {\n if (this.isFormUpload()) {\n this.uploadWrapper.classList.add(FORM_UPLOAD);\n this.formCustomFileList(fileData, this.element.files);\n }\n else {\n this.createCustomfileList(fileData);\n }\n }\n else if (this.isFormUpload()) {\n this.uploadWrapper.classList.add(FORM_UPLOAD);\n this.formFileList(fileData, this.element.files);\n }\n else {\n for (var _i = 0, fileData_7 = fileData; _i < fileData_7.length; _i++) {\n var listItem = fileData_7[_i];\n var liElement = this.createElement('li', {\n className: FILE,\n attrs: { 'data-file-name': listItem.name, 'data-files-count': '1' }\n });\n var textContainer = this.createElement('span', { className: TEXT_CONTAINER });\n var textElement = this.createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });\n textElement.innerHTML = this.getFileNameOnly(listItem.name);\n var fileExtension = this.createElement('span', { className: FILE_TYPE });\n var fileType = this.getFileType(listItem.name);\n fileExtension.innerHTML = '.' + fileType;\n if (!fileType) {\n fileExtension.classList.add('e-hidden');\n }\n if (!this.enableRtl) {\n textContainer.appendChild(textElement);\n textContainer.appendChild(fileExtension);\n }\n else {\n var rtlContainer = this.createElement('span', { className: RTL_CONTAINER });\n rtlContainer.appendChild(fileExtension);\n rtlContainer.appendChild(textElement);\n textContainer.appendChild(rtlContainer);\n }\n var fileSize = this.createElement('span', { className: FILE_SIZE });\n fileSize.innerHTML = this.bytesToSize(listItem.size);\n textContainer.appendChild(fileSize);\n var statusElement = this.createElement('span', { className: STATUS });\n textContainer.appendChild(statusElement);\n statusElement.innerHTML = listItem.status;\n liElement.appendChild(textContainer);\n var iconElement = this.createElement('span', { className: ' e-icons',\n attrs: { 'tabindex': this.btnTabIndex } });\n /* istanbul ignore next */\n if (this.browserName === 'msie') {\n iconElement.classList.add('e-msie');\n }\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n liElement.appendChild(iconElement);\n EventHandler.add(iconElement, 'click', this.removeFiles, this);\n if (listItem.statusCode === '2') {\n statusElement.classList.add(UPLOAD_SUCCESS);\n iconElement.classList.add(DELETE_ICON);\n iconElement.setAttribute('title', this.localizedTexts('delete'));\n iconElement.setAttribute('aria-label', this.localizedTexts('delete'));\n }\n else if (listItem.statusCode !== '1') {\n statusElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.add(VALIDATION_FAILS);\n }\n if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {\n statusElement.innerHTML = '';\n }\n if (!iconElement.classList.contains(DELETE_ICON)) {\n iconElement.classList.add(REMOVE_ICON);\n iconElement.setAttribute('aria-label', this.localizedTexts('remove'));\n }\n var index = fileData.indexOf(listItem);\n var eventArgs = {\n element: liElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n var eventsArgs = {\n element: liElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(liElement);\n this.fileList.push(liElement);\n this.truncateName(textElement);\n var preventActionComplete = this.flag;\n if (this.isPreLoadFile(listItem)) {\n this.flag = false;\n this.checkActionComplete(true);\n this.flag = preventActionComplete;\n }\n }\n }\n };\n Uploader.prototype.getSlicedName = function (nameElement) {\n var text = nameElement.textContent;\n nameElement.dataset.tail = text.slice(text.length - 10);\n };\n Uploader.prototype.setListToFileInfo = function (fileData, fileList) {\n for (var _i = 0, fileData_8 = fileData; _i < fileData_8.length; _i++) {\n var listItem = fileData_8[_i];\n listItem.list = fileList;\n }\n };\n Uploader.prototype.truncateName = function (name) {\n var nameElement = name;\n if (this.browserName !== 'edge' && nameElement.offsetWidth < nameElement.scrollWidth) {\n this.getSlicedName(nameElement);\n /* istanbul ignore next */\n }\n else if (nameElement.offsetWidth + 1 < nameElement.scrollWidth) {\n this.getSlicedName(nameElement);\n }\n };\n Uploader.prototype.getFileType = function (name) {\n var extension;\n var index = name.lastIndexOf('.');\n if (index >= 0) {\n extension = name.substring(index + 1);\n }\n return extension ? extension : '';\n };\n Uploader.prototype.getFileNameOnly = function (name) {\n var type = this.getFileType(name);\n var names = name.split('.' + type);\n return type = names[0];\n };\n Uploader.prototype.setInitialAttributes = function () {\n if (this.initialAttr.accept) {\n this.element.setAttribute('accept', this.initialAttr.accept);\n }\n if (this.initialAttr.disabled) {\n this.element.setAttribute('disabled', 'disabled');\n }\n if (this.initialAttr.multiple) {\n var newAttr = document.createAttribute('multiple');\n this.element.setAttributeNode(newAttr);\n }\n };\n Uploader.prototype.filterfileList = function (files) {\n var filterFiles = [];\n var li;\n for (var i = 0; i < files.length; i++) {\n li = this.getLiElement(files[i]);\n if (!isNullOrUndefined(li) && !li.classList.contains(UPLOAD_SUCCESS)) {\n filterFiles.push(files[i]);\n }\n else if (!this.showFileList && files[i].status !== 'File uploaded successfully') {\n filterFiles.push(files[i]);\n }\n }\n return filterFiles;\n };\n Uploader.prototype.updateStatus = function (files, status, statusCode, updateLiStatus) {\n if (updateLiStatus === void 0) { updateLiStatus = true; }\n if (!(status === '' || isNullOrUndefined(status)) && !(statusCode === '' || isNullOrUndefined(statusCode))) {\n files.status = status;\n files.statusCode = statusCode;\n }\n if (updateLiStatus) {\n var li = this.getLiElement(files);\n if (!isNullOrUndefined(li)) {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS)) && !((status === '' || isNullOrUndefined(status)))) {\n li.querySelector('.' + STATUS).textContent = status;\n }\n }\n }\n return files;\n };\n Uploader.prototype.getLiElement = function (files) {\n var index;\n for (var i = 0; i < this.filesData.length; i++) {\n if (!isNullOrUndefined(files) && ((!isNullOrUndefined(this.filesData[i].id) &&\n !isNullOrUndefined(files.id)) ? (this.filesData[i].name === files.name &&\n this.filesData[i].id === files.id) : this.filesData[i].name === files.name)) {\n index = i;\n }\n }\n return this.fileList[index];\n };\n Uploader.prototype.createProgressBar = function (liElement) {\n var progressbarWrapper = this.createElement('span', { className: PROGRESS_WRAPPER });\n var progressBar = this.createElement('progressbar', { className: PROGRESSBAR, attrs: { value: '0', max: '100' } });\n var progressbarInnerWrapper = this.createElement('span', { className: PROGRESS_INNER_WRAPPER });\n progressBar.setAttribute('style', 'width: 0%');\n var progressbarText = this.createElement('span', { className: PROGRESSBAR_TEXT });\n progressbarText.textContent = '0%';\n progressbarInnerWrapper.appendChild(progressBar);\n progressbarWrapper.appendChild(progressbarInnerWrapper);\n progressbarWrapper.appendChild(progressbarText);\n liElement.querySelector('.' + TEXT_CONTAINER).appendChild(progressbarWrapper);\n };\n /* istanbul ignore next */\n Uploader.prototype.updateProgressbar = function (e, li) {\n if (!isNaN(Math.round((e.loaded / e.total) * 100)) && !isNullOrUndefined(li.querySelector('.' + PROGRESSBAR))) {\n if (!isNullOrUndefined(this.progressInterval) && this.progressInterval !== '') {\n var value = (Math.round((e.loaded / e.total) * 100)) % parseInt(this.progressInterval, 10);\n if (value === 0 || value === 100) {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n else {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n };\n Uploader.prototype.changeProgressValue = function (li, progressValue) {\n li.querySelector('.' + PROGRESSBAR).setAttribute('style', 'width:' + progressValue);\n li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;\n };\n Uploader.prototype.uploadInProgress = function (e, files, customUI, request) {\n var li = this.getLiElement(files);\n if (isNullOrUndefined(li) && (!customUI)) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n /* istanbul ignore next */\n if (files.statusCode === '5') {\n this.cancelUploadingFile(files, e, request, li);\n }\n if (!(li.querySelectorAll('.' + PROGRESS_WRAPPER).length > 0) && li.querySelector('.' + STATUS)) {\n li.querySelector('.' + STATUS).classList.add(UPLOAD_INPROGRESS);\n this.createProgressBar(li);\n this.updateProgressBarClasses(li, UPLOAD_INPROGRESS);\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_FAILED);\n }\n this.updateProgressbar(e, li);\n var iconEle = li.querySelector('.' + REMOVE_ICON);\n if (!isNullOrUndefined(iconEle)) {\n iconEle.classList.add(ABORT_ICON, UPLOAD_INPROGRESS);\n iconEle.setAttribute('title', this.localizedTexts('abort'));\n iconEle.classList.remove(REMOVE_ICON);\n }\n }\n else {\n this.cancelUploadingFile(files, e, request);\n }\n var args = { e: e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('inProgress'), '3') };\n this.trigger('progress', args);\n };\n /* istanbul ignore next */\n Uploader.prototype.cancelUploadingFile = function (files, e, request, li) {\n var _this = this;\n if (files.statusCode === '5') {\n var eventArgs = {\n event: e,\n fileData: files,\n cancel: false,\n customFormData: [],\n currentRequest: null\n };\n this.trigger('canceling', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n files.statusCode = '3';\n if (!isNullOrUndefined(li)) {\n var spinnerTarget = li.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(spinnerTarget)) {\n hideSpinner(spinnerTarget);\n detach(li.querySelector('.e-spinner-pane'));\n }\n }\n }\n else {\n request.emitError = false;\n request.httpRequest.abort();\n var formData = new FormData();\n if (files.statusCode === '5') {\n var name_1 = _this.element.getAttribute('name');\n formData.append(name_1, files.name);\n formData.append('cancel-uploading', files.name);\n _this.updateFormData(formData, eventArgs.customFormData);\n var ajax_1 = new Ajax(_this.asyncSettings.removeUrl, 'POST', true, null);\n ajax_1.emitError = false;\n ajax_1.beforeSend = function (e) {\n if (eventArgs.currentRequest) {\n _this.updateCustomheader(ajax_1.httpRequest, eventArgs.currentRequest);\n }\n };\n ajax_1.onLoad = function (e) {\n _this.removecanceledFile(e, files);\n return {};\n };\n ajax_1.send(formData);\n }\n }\n });\n }\n };\n Uploader.prototype.removecanceledFile = function (e, file) {\n var liElement = this.getLiElement(file);\n if (isNullOrUndefined(liElement) || liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {\n return;\n }\n this.updateStatus(file, this.localizedTexts('fileUploadCancel'), '5');\n this.renderFailureState(e, file, liElement);\n var spinnerTarget = liElement.querySelector('.' + REMOVE_ICON);\n if (!isNullOrUndefined(liElement)) {\n hideSpinner(spinnerTarget);\n if (!isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n }\n var requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n var args = { event: e, response: requestResponse, operation: 'cancel', file: file };\n this.trigger('success', args);\n };\n Uploader.prototype.renderFailureState = function (e, file, liElement) {\n var _this = this;\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n if (!isNullOrUndefined(liElement.querySelector('.e-file-status'))) {\n liElement.querySelector('.e-file-status').classList.add(UPLOAD_FAILED);\n }\n var deleteIcon = liElement.querySelector('.' + ABORT_ICON);\n if (isNullOrUndefined(deleteIcon)) {\n return;\n }\n deleteIcon.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);\n deleteIcon.classList.add(REMOVE_ICON);\n deleteIcon.setAttribute('title', this.localizedTexts('remove'));\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-reload-btn', attrs: { 'tabindex': this.btnTabIndex } });\n deleteIcon.parentElement.insertBefore(this.pauseButton, deleteIcon);\n this.pauseButton.setAttribute('title', this.localizedTexts('retry'));\n this.pauseButton.setAttribute('aria-label', this.localizedTexts('retry'));\n var retryElement = liElement.querySelector('.' + RETRY_ICON);\n /* istanbul ignore next */\n retryElement.addEventListener('click', function (e) {\n _this.reloadcanceledFile(e, file, liElement, false);\n }, false);\n };\n Uploader.prototype.reloadcanceledFile = function (e, file, liElement, custom) {\n file.statusCode = '1';\n file.status = this.localizedTexts('readyToUploadMessage');\n if (!custom) {\n if (!isNullOrUndefined(liElement.querySelector('.' + STATUS))) {\n liElement.querySelector('.' + STATUS).classList.remove(UPLOAD_FAILED);\n }\n if (!isNullOrUndefined(liElement.querySelector('.' + RETRY_ICON))) {\n detach(liElement.querySelector('.' + RETRY_ICON));\n }\n this.pauseButton = null;\n }\n /* istanbul ignore next */\n if (!isNullOrUndefined(liElement)) {\n liElement.classList.add(RESTRICT_RETRY);\n }\n this.upload([file]);\n };\n /* istanbul ignore next */\n Uploader.prototype.uploadComplete = function (e, file, customUI) {\n var status = e.target;\n if (status.readyState === 4 && status.status >= 200 && status.status <= 299) {\n var li = this.getLiElement(file);\n if (isNullOrUndefined(li) && (!customUI || isNullOrUndefined(customUI)) && this.showFileList) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n this.updateProgressBarClasses(li, UPLOAD_SUCCESS);\n this.removeProgressbar(li, 'success');\n var iconEle = li.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(iconEle)) {\n iconEle.classList.add(DELETE_ICON);\n iconEle.setAttribute('title', this.localizedTexts('delete'));\n iconEle.setAttribute('aria-label', this.localizedTexts('delete'));\n iconEle.classList.remove(ABORT_ICON);\n iconEle.classList.remove(UPLOAD_INPROGRESS);\n }\n }\n this.raiseSuccessEvent(e, file);\n }\n else {\n this.uploadFailed(e, file);\n }\n };\n Uploader.prototype.getResponse = function (e) {\n var target = e.currentTarget;\n var response = {\n readyState: target.readyState,\n statusCode: target.status,\n statusText: target.statusText,\n headers: target.getAllResponseHeaders(),\n withCredentials: target.withCredentials\n };\n return response;\n };\n Uploader.prototype.raiseSuccessEvent = function (e, file) {\n var _this = this;\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var statusMessage = this.localizedTexts('uploadSuccessMessage');\n var args = {\n e: e, response: response, operation: 'upload', file: this.updateStatus(file, statusMessage, '2', false), statusText: statusMessage\n };\n var liElement = this.getLiElement(file);\n if (!isNullOrUndefined(liElement)) {\n var spinnerEle = liElement.querySelector('.' + SPINNER_PANE);\n if (!isNullOrUndefined(spinnerEle)) {\n hideSpinner(liElement);\n detach(spinnerEle);\n }\n }\n this.trigger('success', args, function (args) {\n _this.updateStatus(file, args.statusText, '2');\n if (_this.multiple) {\n _this.uploadedFilesData.push(file);\n }\n else {\n _this.uploadedFilesData = [file];\n }\n _this.trigger('change', { file: _this.uploadedFilesData });\n _this.checkActionButtonStatus();\n if (_this.fileList.length > 0) {\n if ((!(_this.getLiElement(file)).classList.contains(RESTRICT_RETRY))) {\n _this.uploadSequential();\n _this.checkActionComplete(true);\n }\n else {\n /* istanbul ignore next */\n (_this.getLiElement(file)).classList.remove(RESTRICT_RETRY);\n }\n }\n else if (!_this.showFileList) {\n _this.checkActionComplete(true);\n }\n });\n };\n Uploader.prototype.uploadFailed = function (e, file) {\n var _this = this;\n var li = this.getLiElement(file);\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var statusMessage = this.localizedTexts('uploadFailedMessage');\n var args = {\n e: e, response: response, operation: 'upload', file: this.updateStatus(file, statusMessage, '0', false), statusText: statusMessage\n };\n if (!isNullOrUndefined(li)) {\n this.renderFailureState(e, file, li);\n }\n this.trigger('failure', args, function (args) {\n _this.updateStatus(file, args.statusText, '0');\n _this.checkActionButtonStatus();\n _this.uploadSequential();\n _this.checkActionComplete(true);\n });\n };\n Uploader.prototype.uploadSequential = function () {\n if (this.sequentialUpload) {\n if (this.autoUpload) {\n /* istanbul ignore next */\n this.checkAutoUpload(this.filesData);\n }\n else {\n this.uploadButtonClick();\n }\n }\n };\n Uploader.prototype.checkActionComplete = function (increment) {\n if (increment) {\n ++this.actionCompleteCount;\n }\n else {\n --this.actionCompleteCount;\n }\n this.raiseActionComplete();\n };\n Uploader.prototype.raiseActionComplete = function () {\n if ((this.filesData.length === this.actionCompleteCount) && this.flag) {\n this.flag = false;\n var eventArgs = {\n fileData: []\n };\n eventArgs.fileData = this.getSelectedFileStatus(this.selectedFiles);\n this.trigger('actionComplete', eventArgs);\n }\n };\n Uploader.prototype.getSelectedFileStatus = function (selectedFiles) {\n var matchFiles = [];\n var matchFilesIndex = 0;\n for (var selectFileIndex = 0; selectFileIndex < selectedFiles.length; selectFileIndex++) {\n var selectedFileData = selectedFiles[selectFileIndex];\n for (var fileDataIndex = 0; fileDataIndex < this.filesData.length; fileDataIndex++) {\n if (this.filesData[fileDataIndex].name === selectedFileData.name &&\n this.filesData[fileDataIndex].status === selectedFileData.status) {\n matchFiles[matchFilesIndex] = this.filesData[fileDataIndex];\n ++matchFilesIndex;\n break;\n }\n }\n }\n return matchFiles;\n };\n Uploader.prototype.updateProgressBarClasses = function (li, className) {\n var progressBar = li.querySelector('.' + PROGRESSBAR);\n if (!isNullOrUndefined(progressBar)) {\n progressBar.classList.add(className);\n }\n };\n Uploader.prototype.removeProgressbar = function (li, callType) {\n var _this = this;\n if (!isNullOrUndefined(li.querySelector('.' + PROGRESS_WRAPPER))) {\n this.progressAnimation = new Animation({ duration: 1250 });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESS_WRAPPER), { name: 'FadeOut' });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESSBAR_TEXT), { name: 'FadeOut' });\n setTimeout(function () {\n _this.animateProgressBar(li, callType);\n }, 750);\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.animateProgressBar = function (li, callType) {\n if (callType === 'success') {\n li.classList.add(UPLOAD_SUCCESS);\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_SUCCESS);\n }\n }\n else {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_FAILED);\n }\n }\n if (li.querySelector('.' + PROGRESS_WRAPPER)) {\n detach(li.querySelector('.' + PROGRESS_WRAPPER));\n }\n };\n Uploader.prototype.setExtensions = function (extensions) {\n if (extensions !== '' && !isNullOrUndefined(extensions)) {\n this.element.setAttribute('accept', extensions);\n }\n else {\n this.element.removeAttribute('accept');\n }\n };\n Uploader.prototype.templateComplier = function (uploadTemplate) {\n if (uploadTemplate) {\n try {\n if (typeof uploadTemplate !== 'function' && selectAll(uploadTemplate, document).length) {\n return compile(select(uploadTemplate, document).innerHTML.trim());\n }\n else {\n return compile(uploadTemplate);\n }\n }\n catch (exception) {\n return compile(uploadTemplate);\n }\n }\n return undefined;\n };\n Uploader.prototype.setRTL = function () {\n if (this.enableRtl) {\n addClass([this.uploadWrapper], RTL);\n }\n else {\n removeClass([this.uploadWrapper], RTL);\n }\n };\n Uploader.prototype.localizedTexts = function (localeText) {\n this.l10n.setLocale(this.locale);\n return this.l10n.getConstant(localeText);\n };\n Uploader.prototype.setControlStatus = function () {\n if (!this.enabled) {\n this.uploadWrapper.classList.add(DISABLED);\n this.element.setAttribute('disabled', 'disabled');\n this.browseButton.setAttribute('disabled', 'disabled');\n if (!isNullOrUndefined(this.clearButton)) {\n this.clearButton.setAttribute('disabled', 'disabled');\n }\n if (!isNullOrUndefined(this.uploadButton)) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n }\n else {\n if (this.uploadWrapper.classList.contains(DISABLED)) {\n this.uploadWrapper.classList.remove(DISABLED);\n }\n if (!isNullOrUndefined(this.browseButton) && this.element.hasAttribute('disabled')) {\n this.element.removeAttribute('disabled');\n this.browseButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.clearButton) && this.clearButton.hasAttribute('disabled')) {\n this.clearButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.uploadButton) && this.uploadButton.hasAttribute('disabled')) {\n this.uploadButton.hasAttribute('disabled');\n }\n }\n };\n Uploader.prototype.checkHTMLAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['accept', 'multiple', 'disabled'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'accept':\n if ((isNullOrUndefined(this.uploaderOptions) || (this.uploaderOptions['allowedExtensions'] === undefined))\n || isDynamic) {\n this.setProperties({ allowedExtensions: this.element.getAttribute('accept') }, !isDynamic);\n this.initialAttr.accept = this.allowedExtensions;\n }\n break;\n case 'multiple':\n if ((isNullOrUndefined(this.uploaderOptions) || (this.uploaderOptions['multiple'] === undefined)) || isDynamic) {\n var isMutiple = this.element.getAttribute(prop) === 'multiple' ||\n this.element.getAttribute(prop) === '' || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ multiple: isMutiple }, !isDynamic);\n this.initialAttr.multiple = true;\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.uploaderOptions) || (this.uploaderOptions['enabled'] === undefined)) || isDynamic) {\n var isDisabled = this.element.getAttribute(prop) === 'disabled' ||\n this.element.getAttribute(prop) === '' || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: isDisabled }, !isDynamic);\n this.initialAttr.disabled = true;\n }\n }\n }\n }\n };\n Uploader.prototype.chunkUpload = function (file, custom, fileIndex) {\n var start = 0;\n var end = Math.min(this.asyncSettings.chunkSize, file.size);\n var index = 0;\n var blob = file.rawFile.slice(start, end);\n var metaData = { chunkIndex: index, blob: blob, file: file, start: start, end: end, retryCount: 0, request: null };\n this.sendRequest(file, metaData, custom, fileIndex);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Uploader.prototype.sendRequest = function (file, metaData, custom, fileIndex) {\n var _this = this;\n var formData = new FormData();\n var blob = file.rawFile.slice(metaData.start, metaData.end);\n formData.append(this.uploaderName, blob, file.name);\n formData.append('chunk-index', metaData.chunkIndex.toString());\n formData.append('chunkIndex', metaData.chunkIndex.toString());\n var totalChunk = Math.max(Math.ceil(file.size / this.asyncSettings.chunkSize), 1);\n formData.append('total-chunk', totalChunk.toString());\n formData.append('totalChunk', totalChunk.toString());\n var ajax = new Ajax({ url: this.asyncSettings.saveUrl, type: 'POST', async: true, contentType: null });\n ajax.emitError = false;\n ajax.onLoad = function (e) {\n _this.chunkUploadComplete(e, metaData, custom);\n return {};\n };\n ajax.onUploadProgress = function (e) {\n _this.chunkUploadInProgress(e, metaData, custom);\n return {};\n };\n var eventArgs = {\n fileData: file,\n customFormData: [],\n cancel: false,\n chunkSize: this.asyncSettings.chunkSize === 0 ? null : this.asyncSettings.chunkSize\n };\n ajax.beforeSend = function (e) {\n eventArgs.currentRequest = ajax.httpRequest;\n eventArgs.currentChunkIndex = metaData.chunkIndex;\n if (eventArgs.currentChunkIndex === 0) {\n // This event is currently not required but to avoid breaking changes for previous customer, we have included.\n _this.trigger('uploading', eventArgs, function (eventArgs) {\n _this.uploadingEventCallback(formData, eventArgs, e, file);\n });\n }\n else {\n _this.trigger('chunkUploading', eventArgs, function (eventArgs) {\n _this.uploadingEventCallback(formData, eventArgs, e, file);\n });\n }\n };\n /* istanbul ignore next */\n ajax.onError = function (e) {\n _this.chunkUploadFailed(e, metaData, custom);\n return {};\n };\n ajax.send(formData);\n metaData.request = ajax;\n };\n Uploader.prototype.uploadingEventCallback = function (formData, eventArgs, e, file) {\n if (eventArgs.cancel) {\n this.eventCancelByArgs(e, eventArgs, file);\n }\n else {\n this.updateFormData(formData, eventArgs.customFormData);\n }\n };\n Uploader.prototype.eventCancelByArgs = function (e, eventArgs, file) {\n var _this = this;\n e.cancel = true;\n if (eventArgs.fileData.statusCode === '5') {\n return;\n }\n eventArgs.fileData.statusCode = '5';\n eventArgs.fileData.status = this.localizedTexts('fileUploadCancel');\n var liElement = this.getLiElement(eventArgs.fileData);\n if (liElement) {\n if (!isNullOrUndefined(liElement.querySelector('.' + STATUS))) {\n liElement.querySelector('.' + STATUS).innerHTML = this.localizedTexts('fileUploadCancel');\n liElement.querySelector('.' + STATUS).classList.add(UPLOAD_FAILED);\n }\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-reload-btn', attrs: { 'tabindex': this.btnTabIndex } });\n var removeIcon = liElement.querySelector('.' + REMOVE_ICON);\n if (removeIcon) {\n removeIcon.parentElement.insertBefore(this.pauseButton, removeIcon);\n }\n this.pauseButton.setAttribute('title', this.localizedTexts('retry'));\n /* istanbul ignore next */\n this.pauseButton.addEventListener('click', function (e) {\n _this.reloadcanceledFile(e, file, liElement);\n }, false);\n this.checkActionButtonStatus();\n }\n };\n Uploader.prototype.checkChunkUpload = function () {\n return (this.asyncSettings.chunkSize <= 0 || isNullOrUndefined(this.asyncSettings.chunkSize)) ? false : true;\n };\n Uploader.prototype.chunkUploadComplete = function (e, metaData, custom) {\n var _this = this;\n var response = e.target;\n var liElement;\n if (response.readyState === 4 && response.status >= 200 && response.status < 300) {\n var requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n var totalChunk = Math.max(Math.ceil(metaData.file.size / this.asyncSettings.chunkSize), 1);\n var eventArgs = {\n event: e,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n totalChunk: totalChunk,\n chunkSize: this.asyncSettings.chunkSize,\n response: requestResponse\n };\n this.trigger('chunkSuccess', eventArgs);\n if (isNullOrUndefined(custom) || !custom) {\n liElement = this.getLiElement(metaData.file);\n }\n this.updateMetaData(metaData);\n if (metaData.end === metaData.file.size) {\n metaData.file.statusCode = '3';\n }\n if (metaData.file.statusCode === '5') {\n var eventArgs_1 = { event: e, fileData: metaData.file, cancel: false, customFormData: [] };\n this.trigger('canceling', eventArgs_1, function (eventArgs) {\n /* istanbul ignore next */\n if (eventArgs.cancel) {\n metaData.file.statusCode = '3';\n var spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(spinnerTarget)) {\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n _this.sendNextRequest(metaData);\n }\n else {\n metaData.request.emitError = false;\n response.abort();\n var formData = new FormData();\n var name_2 = _this.element.getAttribute('name');\n formData.append(name_2, metaData.file.name);\n formData.append('cancel-uploading', metaData.file.name);\n formData.append('cancelUploading', metaData.file.name);\n _this.updateFormData(formData, eventArgs.customFormData);\n var ajax = new Ajax(_this.asyncSettings.removeUrl, 'POST', true, null);\n ajax.emitError = false;\n ajax.onLoad = function (e) {\n _this.removeChunkFile(e, metaData, custom);\n return {};\n };\n ajax.send(formData);\n }\n });\n }\n else {\n if ((totalChunk - 1) === metaData.chunkIndex && totalChunk > metaData.chunkIndex) {\n var index = this.pausedData.indexOf(metaData);\n if (index >= 0) {\n this.pausedData.splice(index, 1);\n }\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {\n if (liElement && !isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD))) {\n detach(liElement.querySelector('.' + PAUSE_UPLOAD));\n }\n this.removeChunkProgressBar(metaData);\n }\n this.raiseSuccessEvent(e, metaData.file);\n return;\n }\n if (metaData.file.statusCode !== '4') {\n this.sendNextRequest(metaData);\n }\n }\n }\n else {\n this.chunkUploadFailed(e, metaData);\n }\n };\n Uploader.prototype.sendNextRequest = function (metaData) {\n metaData.start = metaData.end;\n metaData.end += this.asyncSettings.chunkSize;\n metaData.end = Math.min(metaData.end, metaData.file.size);\n metaData.chunkIndex += 1;\n this.sendRequest(metaData.file, metaData);\n };\n Uploader.prototype.removeChunkFile = function (e, metaData, custom) {\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) && !custom)) {\n var liElement = this.getLiElement(metaData.file);\n var deleteIcon = liElement.querySelector('.' + ABORT_ICON);\n var spinnerTarget = deleteIcon;\n this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n if (deleteIcon) {\n deleteIcon.classList.remove(ABORT_ICON);\n deleteIcon.classList.add(REMOVE_ICON);\n deleteIcon.setAttribute('title', this.localizedTexts('remove'));\n }\n var pauseIcon = liElement.querySelector('.' + PAUSE_UPLOAD);\n if (pauseIcon) {\n pauseIcon.classList.add(RETRY_ICON);\n pauseIcon.classList.remove(PAUSE_UPLOAD);\n pauseIcon.setAttribute('title', this.localizedTexts('retry'));\n }\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(deleteIcon)\n && !isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n }\n };\n Uploader.prototype.pauseUpload = function (metaData, e, custom) {\n metaData.file.statusCode = '4';\n metaData.file.status = this.localizedTexts('pause');\n this.updateMetaData(metaData);\n var eventArgs = {\n event: e ? e : null,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n chunkCount: Math.round(metaData.file.size / this.asyncSettings.chunkSize),\n chunkSize: this.asyncSettings.chunkSize\n };\n this.abortUpload(metaData, custom, eventArgs);\n if (this.sequentialUpload) {\n this.uploadSequential();\n }\n };\n Uploader.prototype.abortUpload = function (metaData, custom, eventArgs) {\n if (metaData.file.statusCode !== '4') {\n metaData.request.emitError = false;\n metaData.request.httpRequest.abort();\n }\n var liElement = this.getLiElement(metaData.file);\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom)) {\n var targetElement = liElement.querySelector('.' + PAUSE_UPLOAD);\n targetElement.classList.remove(PAUSE_UPLOAD);\n targetElement.classList.add(RESUME_UPLOAD);\n targetElement.setAttribute('title', this.localizedTexts('resume'));\n targetElement.nextElementSibling.classList.add(REMOVE_ICON);\n targetElement.nextElementSibling.classList.remove(ABORT_ICON);\n targetElement.nextElementSibling.setAttribute('title', this.localizedTexts('remove'));\n }\n for (var i = 0; i < this.pausedData.length; i++) {\n if (this.pausedData[i].file.name === metaData.file.name) {\n this.pausedData.splice(i, 1);\n }\n }\n this.pausedData.push(metaData);\n this.trigger('pausing', eventArgs);\n };\n Uploader.prototype.resumeUpload = function (metaData, e, custom) {\n var liElement = this.getLiElement(metaData.file);\n var targetElement;\n if (!isNullOrUndefined(liElement)) {\n targetElement = liElement.querySelector('.' + RESUME_UPLOAD);\n }\n if (!isNullOrUndefined(targetElement) && (isNullOrUndefined(custom) || !custom)) {\n targetElement.classList.remove(RESUME_UPLOAD);\n targetElement.classList.add(PAUSE_UPLOAD);\n targetElement.setAttribute('title', this.localizedTexts('pause'));\n targetElement.nextElementSibling.classList.remove(REMOVE_ICON);\n targetElement.nextElementSibling.classList.add(ABORT_ICON);\n targetElement.nextElementSibling.setAttribute('title', this.localizedTexts('abort'));\n }\n metaData.file.status = this.localizedTexts('inProgress');\n metaData.file.statusCode = '3';\n this.updateMetaData(metaData);\n var eventArgs = {\n event: e ? e : null,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n chunkCount: Math.round(metaData.file.size / this.asyncSettings.chunkSize),\n chunkSize: this.asyncSettings.chunkSize\n };\n this.trigger('resuming', eventArgs);\n for (var i = 0; i < this.pausedData.length; i++) {\n if (this.pausedData[i].end === this.pausedData[i].file.size) {\n this.chunkUploadComplete(e, metaData, custom);\n }\n else {\n if (this.pausedData[i].file.name === metaData.file.name) {\n this.pausedData[i].start = this.pausedData[i].end;\n this.pausedData[i].end = this.pausedData[i].end + this.asyncSettings.chunkSize;\n this.pausedData[i].end = Math.min(this.pausedData[i].end, this.pausedData[i].file.size);\n this.pausedData[i].chunkIndex = this.pausedData[i].chunkIndex + 1;\n this.sendRequest(this.pausedData[i].file, this.pausedData[i], custom);\n }\n }\n }\n };\n Uploader.prototype.updateMetaData = function (metaData) {\n if (this.uploadMetaData.indexOf(metaData) === -1) {\n this.uploadMetaData.push(metaData);\n }\n else {\n this.uploadMetaData.splice(this.uploadMetaData.indexOf(metaData), 1);\n this.uploadMetaData.push(metaData);\n }\n };\n Uploader.prototype.removeChunkProgressBar = function (metaData) {\n var liElement = this.getLiElement(metaData.file);\n if (!isNullOrUndefined(liElement)) {\n this.updateProgressBarClasses(liElement, UPLOAD_SUCCESS);\n this.removeProgressbar(liElement, 'success');\n var cancelButton = liElement.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(cancelButton)) {\n cancelButton.classList.add(DELETE_ICON);\n cancelButton.setAttribute('title', this.localizedTexts('delete'));\n cancelButton.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);\n }\n }\n };\n Uploader.prototype.chunkUploadFailed = function (e, metaData, custom) {\n var _this = this;\n var chunkCount = Math.max(Math.ceil(metaData.file.size / this.asyncSettings.chunkSize), 1);\n var liElement;\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom)) {\n liElement = this.getLiElement(metaData.file);\n }\n var requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n var eventArgs = {\n event: e,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n totalChunk: chunkCount,\n chunkSize: this.asyncSettings.chunkSize,\n cancel: false,\n response: requestResponse\n };\n this.trigger('chunkFailure', eventArgs, function (eventArgs) {\n // To prevent triggering of failure event\n if (!eventArgs.cancel) {\n if (metaData.retryCount < _this.asyncSettings.retryCount) {\n setTimeout(function () {\n _this.retryRequest(liElement, metaData, custom);\n }, _this.asyncSettings.retryAfterDelay);\n }\n else {\n if (!isNullOrUndefined(liElement)) {\n var pauseButton = liElement.querySelector('.' + PAUSE_UPLOAD) ?\n liElement.querySelector('.' + PAUSE_UPLOAD) : liElement.querySelector('.' + RESUME_UPLOAD);\n if (!isNullOrUndefined(pauseButton)) {\n pauseButton.classList.add(RETRY_ICON);\n pauseButton.classList.remove(PAUSE_UPLOAD, RESUME_UPLOAD);\n }\n _this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n _this.removeProgressbar(liElement, 'failure');\n liElement.querySelector('.e-icons').classList.remove(UPLOAD_INPROGRESS);\n var iconElement = liElement.querySelector('.' + ABORT_ICON) ?\n liElement.querySelector('.' + ABORT_ICON) : liElement.querySelector('.' + REMOVE_ICON);\n iconElement.classList.remove(ABORT_ICON);\n if (!isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD))) {\n detach(liElement.querySelector('.' + PAUSE_UPLOAD));\n }\n if (metaData.start > 0) {\n iconElement.classList.add(DELETE_ICON);\n iconElement.setAttribute('title', _this.localizedTexts('delete'));\n }\n else {\n iconElement.classList.add(REMOVE_ICON);\n iconElement.setAttribute('title', _this.localizedTexts('remove'));\n }\n }\n metaData.retryCount = 0;\n var file_1 = metaData.file;\n var failureMessage = _this.localizedTexts('uploadFailedMessage');\n var args = {\n e: e, response: requestResponse,\n operation: 'upload',\n file: _this.updateStatus(file_1, failureMessage, '0', false),\n statusText: failureMessage\n };\n _this.trigger('failure', args, function (args) {\n _this.updateStatus(file_1, args.statusText, '0');\n _this.uploadSequential();\n _this.checkActionComplete(true);\n });\n }\n }\n });\n };\n Uploader.prototype.retryRequest = function (liElement, metaData, custom) {\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n }\n metaData.retryCount += 1;\n this.sendRequest(metaData.file, metaData);\n };\n Uploader.prototype.checkPausePlayAction = function (e) {\n var targetElement = e.target;\n var selectedElement = e.target.parentElement;\n var index = this.fileList.indexOf(selectedElement);\n var fileData = this.filesData[index];\n var metaData = this.getCurrentMetaData(fileData);\n if (targetElement.classList.contains(PAUSE_UPLOAD)) {\n /* istanbul ignore next */\n this.pauseUpload(metaData, e);\n }\n else if (targetElement.classList.contains(RESUME_UPLOAD)) {\n /* istanbul ignore next */\n this.resumeUpload(metaData, e);\n }\n else if (targetElement.classList.contains(RETRY_ICON)) {\n if (metaData.file.status === this.localizedTexts('fileUploadCancel')) {\n this.retryUpload(metaData, false);\n }\n else {\n this.retryUpload(metaData, true);\n }\n }\n };\n Uploader.prototype.retryUpload = function (metaData, fromcanceledStage) {\n if (fromcanceledStage) {\n metaData.end = metaData.end + this.asyncSettings.chunkSize;\n metaData.start = metaData.start + this.asyncSettings.chunkSize;\n this.sendRequest(metaData.file, metaData);\n }\n else {\n metaData.file.statusCode = '1';\n metaData.file.status = this.localizedTexts('readyToUploadMessage');\n this.chunkUpload(metaData.file);\n }\n /* istanbul ignore next */\n (this.getLiElement(metaData.file)).classList.add(RESTRICT_RETRY);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Uploader.prototype.chunkUploadInProgress = function (e, metaData, custom) {\n var _this = this;\n if (metaData.file.statusCode === '4') {\n return;\n }\n if (metaData.file.statusCode !== '4' && metaData.file.statusCode !== '5') {\n metaData.file.statusCode = '3';\n metaData.file.status = this.localizedTexts('inProgress');\n }\n this.updateMetaData(metaData);\n var liElement = this.getLiElement(metaData.file);\n if (isNullOrUndefined(liElement)) {\n return;\n }\n var retryElement = liElement.querySelector('.' + RETRY_ICON);\n if (!isNullOrUndefined(retryElement)) {\n retryElement.classList.add(PAUSE_UPLOAD);\n retryElement.setAttribute('title', this.localizedTexts('pause'));\n retryElement.classList.remove(RETRY_ICON);\n }\n if (!isNullOrUndefined(liElement)) {\n if (!(liElement.querySelectorAll('.' + PROGRESS_WRAPPER).length > 0)) {\n var statusElement = liElement.querySelector('.' + STATUS);\n if (isNullOrUndefined(this.template)) {\n statusElement.classList.add(UPLOAD_INPROGRESS);\n statusElement.classList.remove(UPLOAD_FAILED);\n this.createProgressBar(liElement);\n this.updateProgressBarClasses(liElement, UPLOAD_INPROGRESS);\n }\n var clearIcon = liElement.querySelector('.' + REMOVE_ICON) ? liElement.querySelector('.' + REMOVE_ICON) :\n liElement.querySelector('.' + DELETE_ICON);\n if (!isNullOrUndefined(clearIcon)) {\n clearIcon.classList.add(ABORT_ICON);\n clearIcon.setAttribute('title', this.localizedTexts('abort'));\n clearIcon.classList.remove(REMOVE_ICON);\n }\n }\n if (!isNaN(Math.round((e.loaded / e.total) * 100)) && isNullOrUndefined(this.template) && metaData.file.statusCode !== '4') {\n var progressVal = void 0;\n var totalChunks = Math.ceil(metaData.file.size / this.asyncSettings.chunkSize) - 1;\n if (this.asyncSettings.chunkSize && totalChunks) {\n progressVal = Math.round(metaData.chunkIndex / totalChunks * 100);\n this.changeProgressValue(liElement, progressVal.toString() + '%');\n }\n }\n if (metaData.chunkIndex === 0) {\n this.checkActionButtonStatus();\n }\n }\n if (isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD)) && isNullOrUndefined(this.template)\n && isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON))) {\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-pause-btn', attrs: { 'tabindex': this.btnTabIndex } });\n if (this.browserName === 'msie') {\n this.pauseButton.classList.add('e-msie');\n }\n var abortIcon = liElement.querySelector('.' + ABORT_ICON);\n abortIcon.parentElement.insertBefore(this.pauseButton, abortIcon);\n this.pauseButton.setAttribute('title', this.localizedTexts('pause'));\n this.pauseButton.addEventListener('click', function (e) {\n _this.checkPausePlayAction(e);\n }, false);\n }\n };\n /**\n * It is used to convert bytes value into kilobytes or megabytes depending on the size based\n * on [binary prefix](https://en.wikipedia.org/wiki/Binary_prefix).\n *\n * @param { number } bytes - Specifies the file size in bytes.\n * @returns {string} - Returns the file size.\n */\n Uploader.prototype.bytesToSize = function (bytes) {\n var i = -1;\n if (!bytes) {\n return '0.0 KB';\n }\n do {\n bytes = bytes / 1024;\n i++;\n } while (bytes > 99);\n if (i >= 2) {\n bytes = bytes * 1024;\n i = 1;\n }\n return Math.max(bytes, 0).toFixed(1) + ' ' + ['KB', 'MB'][i];\n };\n /**\n * Allows you to sort the file data alphabetically based on its file name clearly.\n *\n * @param { FileList } filesData - specifies the files data for upload.\n * @returns {File[]}\n */\n /* istanbul ignore next */\n Uploader.prototype.sortFileList = function (filesData) {\n filesData = filesData ? filesData : this.sortFilesList;\n var files = filesData;\n var fileNames = [];\n for (var i = 0; i < files.length; i++) {\n fileNames.push(files[i].name);\n }\n var sortedFileNames = fileNames.sort();\n var sortedFilesData = [];\n for (var _i = 0, sortedFileNames_1 = sortedFileNames; _i < sortedFileNames_1.length; _i++) {\n var name_3 = sortedFileNames_1[_i];\n for (var i = 0; i < files.length; i++) {\n if (name_3 === files[i].name) {\n sortedFilesData.push(files[i]);\n }\n }\n }\n return sortedFilesData;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n Uploader.prototype.destroy = function () {\n this.element.value = null;\n this.clearTemplate();\n this.clearAll();\n this.unWireEvents();\n this.unBindDropEvents();\n if (this.multiple) {\n this.element.removeAttribute('multiple');\n }\n if (!this.enabled) {\n this.element.removeAttribute('disabled');\n }\n this.element.removeAttribute('accept');\n this.setInitialAttributes();\n var attributes = ['aria-label', 'directory', 'webkitdirectory', 'tabindex'];\n for (var _i = 0, attributes_2 = attributes; _i < attributes_2.length; _i++) {\n var key = attributes_2[_i];\n this.element.removeAttribute(key);\n }\n if (!isNullOrUndefined(this.uploadWrapper)) {\n this.uploadWrapper.parentElement.appendChild(this.element);\n detach(this.uploadWrapper);\n }\n this.uploadWrapper = null;\n this.uploadWrapper = null;\n this.browseButton = null;\n this.dropAreaWrapper = null;\n this.dropZoneElement = null;\n this.dropArea = null;\n this.keyboardModule = null;\n this.clearButton = null;\n this.uploadButton = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Allows you to call the upload process manually by calling save URL action.\n * To process the selected files (added in upload queue), pass an empty argument otherwise\n * upload the specific file based on its argument.\n *\n * @param { FileInfo | FileInfo[] } files - Specifies the files data for upload.\n * @param {boolean} custom - Specifies whether the uploader is rendered with custom file list.\n * @returns {void}\n */\n Uploader.prototype.upload = function (files, custom) {\n var _this = this;\n files = files ? files : this.filesData;\n if (this.sequentialUpload && (this.isFirstFileOnSelection || custom)) {\n this.sequenceUpload(files);\n }\n else {\n var uploadFiles_1 = this.getFilesInArray(files);\n var eventArgs = {\n customFormData: [],\n currentRequest: null,\n cancel: false\n };\n this.trigger('beforeUpload', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.customFormDatas = (eventArgs.customFormData && eventArgs.customFormData.length > 0) ?\n eventArgs.customFormData : _this.customFormDatas;\n _this.uploadFiles(uploadFiles_1, custom);\n }\n });\n }\n };\n Uploader.prototype.getFilesInArray = function (files) {\n var uploadFiles = [];\n if (files instanceof Array) {\n uploadFiles = files;\n }\n else {\n uploadFiles.push(files);\n }\n return uploadFiles;\n };\n /* istanbul ignore next */\n Uploader.prototype.serverReadFileBase64 = function (fileIndex, position, totalCount) {\n var _this = this;\n return new Promise(function (resolve, reject) {\n var file = _this.fileStreams[fileIndex].rawFile;\n try {\n var reader = new FileReader();\n reader.onload = (function (args) {\n return function () {\n try {\n var contents = args.result;\n var data = contents ? contents.split(';base64,')[1] : null;\n resolve(data);\n }\n catch (e) {\n reject(e);\n }\n };\n })(reader);\n reader.readAsDataURL(file.slice(position, position + totalCount));\n }\n catch (e) {\n reject(e);\n }\n });\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n /* istanbul ignore next */\n Uploader.prototype.uploadFileCount = function (ele) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n var files = this.filesData;\n if (!files || files.length === 0) {\n return -1;\n }\n var result = files.length;\n return result;\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n /* istanbul ignore next */\n Uploader.prototype.getFileRead = function (index, ele) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n var files = this.filesData;\n if (!files || files.length === 0) {\n return -1;\n }\n var file = files[index];\n var fileCount = this.newFileRef++;\n this.fileStreams[fileCount] = file;\n return fileCount;\n };\n Uploader.prototype.uploadFiles = function (files, custom) {\n var selectedFiles = [];\n if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {\n return;\n }\n if (!custom || isNullOrUndefined(custom)) {\n if (!this.multiple) {\n var file = [];\n file.push(files[0]);\n selectedFiles = this.filterfileList(file);\n }\n else {\n selectedFiles = this.filterfileList(files);\n }\n }\n else {\n selectedFiles = files;\n }\n for (var i = 0; i < selectedFiles.length; i++) {\n this.uploadFilesRequest(selectedFiles, i, custom);\n }\n };\n Uploader.prototype.uploadFilesRequest = function (selectedFiles, i, custom) {\n var _this = this;\n var chunkEnabled = this.checkChunkUpload();\n var ajax = new Ajax(this.asyncSettings.saveUrl, 'POST', true, null);\n ajax.emitError = false;\n var eventArgs = {\n fileData: selectedFiles[i],\n customFormData: [],\n cancel: false\n };\n var formData = new FormData();\n ajax.beforeSend = function (e) {\n eventArgs.currentRequest = ajax.httpRequest;\n _this.trigger('uploading', eventArgs, function (eventArgs) {\n /* istanbul ignore next */\n if (eventArgs.cancel) {\n _this.eventCancelByArgs(e, eventArgs, selectedFiles[i]);\n }\n if (_this.customFormDatas && _this.customFormDatas.length > 0) {\n _this.updateFormData(formData, _this.customFormDatas);\n }\n _this.updateFormData(formData, eventArgs.customFormData);\n });\n };\n if (selectedFiles[i].statusCode === '1') {\n var name_4 = this.element.getAttribute('name');\n formData.append(name_4, selectedFiles[i].rawFile, selectedFiles[i].name);\n if (chunkEnabled && selectedFiles[i].size > this.asyncSettings.chunkSize) {\n this.chunkUpload(selectedFiles[i], custom, i);\n }\n else {\n ajax.onLoad = function (e) {\n if (eventArgs.cancel) {\n return {};\n }\n else {\n _this.uploadComplete(e, selectedFiles[i], custom);\n return {};\n }\n };\n ajax.onUploadProgress = function (e) {\n if (eventArgs.cancel) {\n return {};\n }\n else {\n _this.uploadInProgress(e, selectedFiles[i], custom, ajax);\n return {};\n }\n };\n /* istanbul ignore next */\n ajax.onError = function (e) {\n _this.uploadFailed(e, selectedFiles[i]);\n return {};\n };\n ajax.send(formData);\n }\n }\n };\n Uploader.prototype.spliceFiles = function (liIndex) {\n var liElement = this.fileList[liIndex];\n var allFiles = this.getFilesData();\n var nameElements = +liElement.getAttribute('data-files-count');\n var startIndex = 0;\n for (var i = 0; i < liIndex; i++) {\n startIndex += (+this.fileList[i].getAttribute('data-files-count'));\n }\n var endIndex = (startIndex + nameElements) - 1;\n for (var j = endIndex; j >= startIndex; j--) {\n allFiles.splice(j, 1);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Remove the uploaded file from server manually by calling the remove URL action.\n * If you pass an empty argument to this method, the complete file list can be cleared,\n * otherwise remove the specific file based on its argument (“file_data”).\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to remove from file list/server.\n * @param { boolean } customTemplate - Set true if the component rendering with customize template.\n * @param { boolean } removeDirectly - Set true if files remove without removing event.\n * @param { boolean } postRawFile - Set false, to post file name only to the remove action.\n * @returns {void}\n */\n Uploader.prototype.remove = function (fileData, customTemplate, removeDirectly, postRawFile, args) {\n var _this = this;\n if (isNullOrUndefined(postRawFile)) {\n postRawFile = true;\n }\n var eventArgs = {\n event: args,\n cancel: false,\n filesData: [],\n customFormData: [],\n postRawFile: postRawFile,\n currentRequest: null\n };\n var beforeEventArgs = {\n cancel: false,\n customFormData: [],\n currentRequest: null\n };\n this.trigger('beforeRemove', beforeEventArgs, function (beforeEventArgs) {\n if (!beforeEventArgs.cancel) {\n if (_this.isFormUpload()) {\n eventArgs.filesData = fileData;\n _this.trigger('removing', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n var removingFiles = _this.getFilesInArray(fileData);\n var isLiRemoved = false;\n var liIndex = void 0;\n for (var _i = 0, removingFiles_1 = removingFiles; _i < removingFiles_1.length; _i++) {\n var data = removingFiles_1[_i];\n if (!isLiRemoved) {\n liIndex = _this.fileList.indexOf(data.list);\n }\n if (liIndex > -1) {\n var inputElement = !isNullOrUndefined(data.input) ? data.input : null;\n if (inputElement) {\n detach(inputElement);\n }\n _this.spliceFiles(liIndex);\n detach(_this.fileList[liIndex]);\n _this.fileList.splice(liIndex, 1);\n isLiRemoved = true;\n liIndex = -1;\n }\n }\n }\n });\n }\n else if (_this.isForm && (isNullOrUndefined(_this.asyncSettings.removeUrl) || _this.asyncSettings.removeUrl === '')) {\n eventArgs.filesData = _this.getFilesData();\n _this.trigger('removing', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.clearAll();\n }\n });\n }\n else {\n var removeFiles = [];\n fileData = !isNullOrUndefined(fileData) ? fileData : _this.filesData;\n if (fileData instanceof Array) {\n removeFiles = fileData;\n }\n else {\n removeFiles.push(fileData);\n }\n eventArgs.filesData = removeFiles;\n var removeUrl = _this.asyncSettings.removeUrl;\n var validUrl = (removeUrl === '' || isNullOrUndefined(removeUrl)) ? false : true;\n var _loop_5 = function (files) {\n var fileUploadedIndex = _this.uploadedFilesData.indexOf(files);\n if ((files.statusCode === '2' || files.statusCode === '4' || (files.statusCode === '0' &&\n fileUploadedIndex !== -1)) && validUrl) {\n _this.removeUploadedFile(files, eventArgs, removeDirectly, customTemplate);\n }\n else {\n if (!removeDirectly) {\n _this.trigger('removing', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.removeFilesData(files, customTemplate);\n }\n });\n }\n else {\n _this.removeFilesData(files, customTemplate);\n }\n }\n if (args && !args.target.classList.contains(REMOVE_ICON)) {\n _this.checkActionComplete(false);\n }\n };\n for (var _i = 0, removeFiles_1 = removeFiles; _i < removeFiles_1.length; _i++) {\n var files = removeFiles_1[_i];\n _loop_5(files);\n }\n }\n }\n });\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n /**\n * Clear all the file entries from list that can be uploaded files or added in upload queue.\n *\n * @returns {void}\n */\n Uploader.prototype.clearAll = function () {\n var _this = this;\n if (isNullOrUndefined(this.listParent)) {\n if (this.browserName !== 'msie') {\n this.element.value = '';\n }\n this.filesData = [];\n return;\n }\n var eventArgs = {\n cancel: false,\n filesData: this.filesData\n };\n this.trigger('clearing', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.clearData();\n _this.actionCompleteCount = 0;\n _this.count = -1;\n }\n });\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Get the data of files which are shown in file list.\n *\n * @param { number } index - specifies the file list item(li) index.\n * @returns {FileInfo[]}\n */\n Uploader.prototype.getFilesData = function (index) {\n if (isNullOrUndefined(index)) {\n return this.filesData;\n }\n else {\n return this.getSelectedFiles(index);\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Pauses the in-progress chunked upload based on the file data.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to pause from uploading.\n * @param { boolean } custom - Set true if used custom UI.\n * @returns {void}\n */\n Uploader.prototype.pause = function (fileData, custom) {\n fileData = fileData ? fileData : this.filesData;\n var fileDataFiles = this.getFilesInArray(fileData);\n this.pauseUploading(fileDataFiles, custom);\n };\n Uploader.prototype.pauseUploading = function (fileData, custom) {\n var files = this.getFiles(fileData);\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n this.pauseUpload(this.getCurrentMetaData(files[i], null), null, custom);\n }\n }\n };\n Uploader.prototype.getFiles = function (fileData) {\n var files = [];\n if (!isNullOrUndefined(fileData) && !(fileData instanceof Array)) {\n files.push(fileData);\n }\n else {\n files = fileData;\n }\n return files;\n };\n /**\n * Resumes the chunked upload that is previously paused based on the file data.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to resume the paused file.\n * @param { boolean } custom - Set true if used custom UI.\n * @returns {void}\n */\n Uploader.prototype.resume = function (fileData, custom) {\n fileData = fileData ? fileData : this.filesData;\n var fileDataFiles = this.getFilesInArray(fileData);\n this.resumeFiles(fileDataFiles, custom);\n };\n Uploader.prototype.resumeFiles = function (fileData, custom) {\n var files = this.getFiles(fileData);\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '4') {\n this.resumeUpload(this.getCurrentMetaData(files[i], null), null, custom);\n }\n }\n };\n /**\n * Retries the canceled or failed file upload based on the file data.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to retry the canceled or failed file.\n * @param { boolean } fromcanceledStage - Set true to retry from canceled stage and set false to retry from initial stage.\n * @param {boolean} custom -Specifies whether the uploader is rendered with custom file list.\n * @returns {void}\n */\n Uploader.prototype.retry = function (fileData, fromcanceledStage, custom) {\n fileData = fileData ? fileData : this.filesData;\n var fileDataFiles = this.getFilesInArray(fileData);\n if (this.sequentialUpload && this.isFirstFileOnSelection) {\n this.isFirstFileOnSelection = false;\n }\n this.retryFailedFiles(fileDataFiles, fromcanceledStage, custom);\n };\n Uploader.prototype.retryFailedFiles = function (fileData, fromcanceledStage, custom) {\n var files = this.getFiles(fileData);\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '5' || files[i].statusCode === '0') {\n if (this.asyncSettings.chunkSize > 0 && this.getCurrentMetaData(files[i], null)) {\n this.retryUpload(this.getCurrentMetaData(files[i], null), fromcanceledStage);\n }\n else {\n var liElement = void 0;\n if (!custom) {\n liElement = this.fileList[this.filesData.indexOf(files[i])];\n }\n this.reloadcanceledFile(null, files[i], liElement, custom);\n }\n }\n }\n };\n /**\n * Stops the in-progress chunked upload based on the file data.\n * When the file upload is canceled, the partially uploaded file is removed from server.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to cancel the progressing file.\n * @returns {void}\n */\n Uploader.prototype.cancel = function (fileData) {\n fileData = fileData ? fileData : this.filesData;\n var cancelingFiles = this.getFilesInArray(fileData);\n this.cancelUpload(cancelingFiles);\n };\n Uploader.prototype.cancelUpload = function (fileData) {\n var files = this.getFiles(fileData);\n if (this.asyncSettings.chunkSize > 0) {\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n var metaData = this.getCurrentMetaData(files[i], null);\n metaData.file.statusCode = '5';\n metaData.file.status = this.localizedTexts('fileUploadCancel');\n this.updateMetaData(metaData);\n this.showHideUploadSpinner(files[i]);\n }\n }\n }\n else {\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n files[i].statusCode = '5';\n files[i].status = this.localizedTexts('fileUploadCancel');\n this.showHideUploadSpinner(files[i]);\n }\n }\n }\n };\n Uploader.prototype.showHideUploadSpinner = function (files) {\n var liElement = this.getLiElement(files);\n if (!isNullOrUndefined(liElement) && isNullOrUndefined(this.template)) {\n var spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n };\n __decorate$4([\n Complex({ saveUrl: '', removeUrl: '' }, AsyncSettings)\n ], Uploader.prototype, \"asyncSettings\", void 0);\n __decorate$4([\n Property(false)\n ], Uploader.prototype, \"sequentialUpload\", void 0);\n __decorate$4([\n Property({})\n ], Uploader.prototype, \"htmlAttributes\", void 0);\n __decorate$4([\n Property('')\n ], Uploader.prototype, \"cssClass\", void 0);\n __decorate$4([\n Property(true)\n ], Uploader.prototype, \"enabled\", void 0);\n __decorate$4([\n Property(null)\n ], Uploader.prototype, \"template\", void 0);\n __decorate$4([\n Property(true)\n ], Uploader.prototype, \"multiple\", void 0);\n __decorate$4([\n Property(true)\n ], Uploader.prototype, \"autoUpload\", void 0);\n __decorate$4([\n Property(true)\n ], Uploader.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$4([\n Complex({}, ButtonsProps)\n ], Uploader.prototype, \"buttons\", void 0);\n __decorate$4([\n Property('')\n ], Uploader.prototype, \"allowedExtensions\", void 0);\n __decorate$4([\n Property(0)\n ], Uploader.prototype, \"minFileSize\", void 0);\n __decorate$4([\n Property(30000000)\n ], Uploader.prototype, \"maxFileSize\", void 0);\n __decorate$4([\n Property(null)\n ], Uploader.prototype, \"dropArea\", void 0);\n __decorate$4([\n Collection([{}], FilesProp)\n ], Uploader.prototype, \"files\", void 0);\n __decorate$4([\n Property(true)\n ], Uploader.prototype, \"showFileList\", void 0);\n __decorate$4([\n Property(false)\n ], Uploader.prototype, \"directoryUpload\", void 0);\n __decorate$4([\n Property('Default')\n ], Uploader.prototype, \"dropEffect\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"created\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"actionComplete\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"rendering\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"beforeUpload\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"fileListRendering\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"selected\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"uploading\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"success\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"failure\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"removing\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"beforeRemove\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"clearing\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"progress\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"change\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"chunkSuccess\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"chunkFailure\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"chunkUploading\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"canceling\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"pausing\", void 0);\n __decorate$4([\n Event()\n ], Uploader.prototype, \"resuming\", void 0);\n Uploader = __decorate$4([\n NotifyPropertyChanges\n ], Uploader);\n return Uploader;\n}(Component));\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nvar __extends$5 = (undefined && undefined.__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$5 = (undefined && undefined.__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};\nvar APPLY = 'e-apply';\nvar CANCEL = 'e-cancel';\nvar CURRENT = 'e-current';\nvar CONTAINER = 'e-container';\nvar CTRLBTN = 'e-ctrl-btn';\nvar CTRLSWITCH = 'e-switch-ctrl-btn';\nvar DISABLED$1 = 'e-disabled';\nvar FORMATSWITCH = 'e-value-switch-btn';\nvar HANDLER = 'e-handler';\nvar HEX = 'e-hex';\nvar HIDEHEX = 'e-hide-hex-value';\nvar HIDEOPACITY = 'e-hide-opacity';\nvar HIDERGBA = 'e-hide-switchable-value';\nvar HIDEVALUE = 'e-hide-value';\nvar HIDEVALUESWITCH = 'e-hide-valueswitcher';\nvar HSVAREA = 'e-hsv-color';\nvar HSVCONTAINER = 'e-hsv-container';\nvar INPUTWRAPPER = 'e-selected-value';\nvar MODESWITCH = 'e-mode-switch-btn';\nvar NOCOLOR = 'e-nocolor-item';\nvar OPACITY = 'e-opacity-value';\nvar PALETTES = 'e-palette';\nvar PALETTECONTENT = 'e-color-palette';\nvar PICKERCONTENT = 'e-color-picker';\nvar PREVIEW = 'e-preview-container';\nvar PREVIOUS = 'e-previous';\nvar RTL$1 = 'e-rtl';\nvar SHOWVALUE = 'e-show-value';\nvar SELECT = 'e-selected';\nvar SPLITPREVIEW = 'e-split-preview';\nvar TILE = 'e-tile';\nvar presets = {\n default: ['#000000', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#ffeb3b',\n '#ffffff', '#ffebee', '#fce4ec', '#f3e5f5', '#ede7f6', '#e3f2fd', '#e1f5fe', '#e0f7fa', '#e0f2f1', '#fffde7',\n '#f2f2f2', '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#bbdefb', '#b3e5fc', '#b2ebf2', '#b2dfdb', '#fff9c4',\n '#e6e6e6', '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#fff59d',\n '#cccccc', '#e57373', '#f06292', '#ba68c8', '#9575cd', '#64b5f6', '#4fc3f7', '#4dd0e1', '#4db6ac', '#fff176',\n '#b3b3b3', '#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#42a5f5', '#29b6f6', '#26c6da', '#26a69a', '#ffee58',\n '#999999', '#e53935', '#d81b60', '#8e24aa', '#5e35b1', '#1e88e5', '#039be5', '#00acc1', '#00897b', '#fdd835',\n '#808080', '#d32f2f', '#c2185b', '#7b1fa2', '#512da8', '#1976d2', '#0288d1', '#0097a7', '#00796b', '#fbc02d',\n '#666666', '#c62828', '#ad1457', '#6a1b9a', '#4527a0', '#1565c0', '#0277bd', '#00838f', '#00695c', '#f9a825',\n '#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1', '#01579b', '#006064', '#004d40', '#f57f17']\n};\n/**\n * ColorPicker component is a user interface to select and adjust color values. It provides supports for various\n * color specification like Red Green Blue, Hue Saturation Value and Hex codes.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar ColorPicker = /** @__PURE__ @class */ (function (_super) {\n __extends$5(ColorPicker, _super);\n function ColorPicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.recentColors = [];\n return _this;\n }\n ColorPicker.prototype.preRender = function () {\n var ele = this.element;\n this.formElement = closest(this.element, 'form');\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode', RecentColors: 'Recent colors' };\n this.l10n = new L10n('colorpicker', localeText, this.locale);\n if (ele.getAttribute('ejs-for') && !ele.getAttribute('name')) {\n ele.setAttribute('name', ele.id);\n }\n };\n /**\n * To Initialize the component rendering\n *\n * @private\n * @returns {void}\n */\n ColorPicker.prototype.render = function () {\n this.initWrapper();\n if (this.inline) {\n this.createWidget();\n }\n else {\n this.createSplitBtn();\n }\n if (!this.enableOpacity) {\n addClass([this.container.parentElement], HIDEOPACITY);\n }\n this.renderComplete();\n };\n ColorPicker.prototype.initWrapper = function () {\n var wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(wrapper, this.element);\n wrapper.appendChild(this.element);\n attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false', 'aria-label': 'colorpicker' });\n this.container = this.createElement('div', { className: CONTAINER });\n this.getWrapper().appendChild(this.container);\n var value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';\n if (this.noColor && this.mode === 'Palette' && this.value === '') {\n value = '';\n }\n var slicedValue = value.slice(0, 7);\n if (isNullOrUndefined(this.initialInputValue)) {\n this.initialInputValue = slicedValue;\n }\n this.element.value = slicedValue;\n if (this.enableOpacity) {\n this.setProperties({ 'value': value }, true);\n }\n else {\n this.setProperties({ 'value': slicedValue }, true);\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL$1);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });\n this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });\n };\n ColorPicker.prototype.getWrapper = function () {\n return this.element.parentElement;\n };\n ColorPicker.prototype.createWidget = function () {\n if (this.mode === 'Palette') {\n this.createPalette();\n if (!this.inline) {\n this.firstPaletteFocus();\n }\n }\n else {\n this.createPicker();\n if (!this.inline) {\n this.getDragHandler().focus();\n }\n }\n this.isRgb = true;\n this.createInput();\n this.createCtrlBtn();\n if (!this.disabled) {\n this.wireEvents();\n }\n if (this.inline && this.disabled) {\n this.toggleDisabled(true);\n }\n if (Browser.isDevice) {\n this.refreshPopupPos();\n }\n };\n ColorPicker.prototype.createSplitBtn = function () {\n var _this = this;\n var splitButton = this.createElement('button', { className: 'e-split-colorpicker' });\n this.getWrapper().appendChild(splitButton);\n this.splitBtn = new SplitButton({\n iconCss: 'e-selected-color',\n target: this.container,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n createPopupOnClick: this.createPopupOnClick,\n open: this.onOpen.bind(this),\n click: function () {\n var ev = new MouseEvent('click', { bubbles: true, cancelable: false });\n _this.trigger('change', {\n currentValue: { hex: _this.value.slice(0, 7), rgba: _this.convertToRgbString(_this.hexToRgb(_this.value)) },\n previousValue: { hex: null, rgba: null }, value: _this.value, event: ev\n });\n }\n });\n this.splitBtn.createElement = this.createElement;\n this.splitBtn.appendTo(splitButton);\n this.splitBtn.element.setAttribute('aria-label', 'colorpicker');\n var preview = this.createElement('span', { className: SPLITPREVIEW });\n select('.e-selected-color', splitButton).appendChild(preview);\n preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(this.value));\n var popupEle = this.getPopupEle();\n addClass([popupEle], 'e-colorpicker-popup');\n if (this.cssClass) {\n addClass([popupEle], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (Browser.isDevice && !this.createPopupOnClick) {\n var popupInst = this.getPopupInst();\n popupInst.relateTo = document.body;\n popupInst.position = { X: 'center', Y: 'center' };\n popupInst.targetType = 'container';\n popupInst.collision = { X: 'fit', Y: 'fit' };\n popupInst.offsetY = 4;\n popupEle.style.zIndex = getZindexPartial(this.splitBtn.element).toString();\n }\n this.bindCallBackEvent();\n };\n ColorPicker.prototype.onOpen = function () {\n this.trigger('open', { element: this.container });\n if (!Browser.isDevice) {\n var popupInst = this.getPopupInst();\n var collision = isCollide(popupInst.element);\n if (collision.length > 0) {\n popupInst.collision = { X: 'flip', Y: 'fit' };\n popupInst.position = { X: 'right', Y: 'bottom' };\n popupInst.targetType = 'container';\n }\n }\n };\n ColorPicker.prototype.getPopupInst = function () {\n return getInstance(this.getPopupEle(), Popup);\n };\n ColorPicker.prototype.bindCallBackEvent = function () {\n var _this = this;\n this.splitBtn.beforeOpen = function (args) {\n var callBackPromise = new Deferred();\n _this.trigger('beforeOpen', args, function (observeOpenArgs) {\n if (!observeOpenArgs.cancel) {\n var popupEle = _this.getPopupEle();\n popupEle.style.top = formatUnit(0 + pageYOffset);\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.display = 'block';\n _this.createWidget();\n popupEle.style.display = '';\n if (Browser.isDevice) {\n if (_this.createPopupOnClick) {\n var popupInst = _this.getPopupInst();\n popupInst.relateTo = document.body;\n popupInst.position = { X: 'center', Y: 'center' };\n popupInst.targetType = 'container';\n popupInst.collision = { X: 'fit', Y: 'fit' };\n popupInst.offsetY = 4;\n popupEle.style.zIndex = getZindexPartial(_this.splitBtn.element).toString();\n }\n _this.modal = _this.createElement('div');\n _this.modal.className = 'e-' + _this.getModuleName() + ' e-modal';\n _this.modal.style.display = 'none';\n document.body.insertBefore(_this.modal, popupEle);\n document.body.className += ' e-colorpicker-overflow';\n _this.modal.style.display = 'block';\n _this.modal.style.zIndex = (Number(popupEle.style.zIndex) - 1).toString();\n }\n }\n args.cancel = observeOpenArgs.cancel;\n callBackPromise.resolve(observeOpenArgs);\n });\n return callBackPromise;\n };\n this.splitBtn.beforeClose = function (args) {\n var callBackPromise = new Deferred();\n if (!isNullOrUndefined(args.event)) {\n var beforeCloseArgs = { element: _this.container, event: args.event, cancel: false };\n _this.trigger('beforeClose', beforeCloseArgs, function (observedCloseArgs) {\n if (Browser.isDevice && args.event.target === _this.modal) {\n observedCloseArgs.cancel = true;\n }\n if (!observedCloseArgs.cancel) {\n _this.onPopupClose();\n }\n args.cancel = observedCloseArgs.cancel;\n callBackPromise.resolve(observedCloseArgs);\n });\n }\n else {\n callBackPromise.resolve(args);\n }\n return callBackPromise;\n };\n };\n ColorPicker.prototype.onPopupClose = function () {\n this.unWireEvents();\n this.destroyOtherComp();\n this.container.style.width = '';\n select('.' + SPLITPREVIEW, this.splitBtn.element).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n this.container.innerHTML = '';\n removeClass([this.container], [PICKERCONTENT, PALETTECONTENT]);\n if (Browser.isDevice && this.modal) {\n removeClass([document.body], 'e-colorpicker-overflow');\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n };\n ColorPicker.prototype.createPalette = function () {\n classList(this.container, [PALETTECONTENT], [PICKERCONTENT]);\n if (this.presetColors) {\n var paletteGroup = this.createElement('div', { className: 'e-custom-palette' });\n this.appendElement(paletteGroup);\n var keys = Object.keys(this.presetColors);\n if (keys.length === 1) {\n this.appendPalette(this.presetColors[keys[0]], keys[0], paletteGroup);\n }\n else {\n for (var i = 0, len = keys.length; i < len; i++) {\n this.appendPalette(this.presetColors[keys[i]], keys[i], paletteGroup);\n }\n }\n if (selectAll('.e-row', paletteGroup).length > 10) {\n addClass([paletteGroup], 'e-palette-group');\n }\n }\n else {\n this.appendPalette(presets.default, 'default');\n }\n if (this.mode === 'Palette' && !this.modeSwitcher && this.noColor) {\n this.setNoColor();\n }\n if (this.showRecentColors && this.recentColors && this.recentColors.length > 0) {\n this.renderRecentColor();\n }\n var width = parseInt(getComputedStyle(this.container).borderBottomWidth, 10);\n this.container.style.width = formatUnit(this.container.children[0].offsetWidth + width + width);\n this.rgb = this.hexToRgb(this.roundValue(this.value));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n };\n ColorPicker.prototype.renderRecentColor = function () {\n var _this = this;\n var recentClrWpr = this.container.querySelector('.e-clr-pal-rec-wpr');\n if (recentClrWpr) {\n detach(recentClrWpr);\n }\n var recentColorWrapper = this.createElement('div', { className: 'e-clr-pal-rec-wpr' });\n var refEle = this.container.querySelector('.e-switch-ctrl-btn');\n if (refEle) {\n this.container.insertBefore(recentColorWrapper, refEle);\n }\n else {\n this.container.appendChild(recentColorWrapper);\n }\n var recentClrSpan = this.createElement('label', { className: 'e-recent-clr-span' });\n recentClrSpan.textContent = this.l10n.getConstant('RecentColors');\n recentColorWrapper.appendChild(recentClrSpan);\n if (this.recentColors.length > 0) {\n this.recentColors = this.recentColors.filter(function (item, index) { return _this.recentColors.indexOf(item) === index; });\n while (this.recentColors.length > 10) {\n this.recentColors.pop();\n }\n this.appendPalette(this.recentColors, 'recent-color', recentColorWrapper);\n }\n };\n ColorPicker.prototype.firstPaletteFocus = function () {\n if (!select('.' + SELECT, this.container.children[0])) {\n selectAll('.' + PALETTES, this.container)[0].focus();\n }\n };\n ColorPicker.prototype.appendPalette = function (colors, key, refEle) {\n var palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0', 'role': 'grid' } });\n if (key === 'recent-color') {\n palette.classList.add('e-recent-palette');\n }\n if (refEle) {\n refEle.appendChild(palette);\n }\n else {\n this.appendElement(palette);\n }\n var row;\n var tile;\n var roundedColor;\n for (var i = 0, len = colors.length; i < len; i++) {\n if (i === 0 || i % this.columns === 0) {\n row = this.createElement('div', {\n className: 'e-row', attrs: { 'role': 'row' }\n });\n palette.appendChild(row);\n }\n roundedColor = this.roundValue(colors[i]).toLowerCase();\n tile = this.createElement('span', {\n className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }\n });\n this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });\n row.appendChild(tile);\n if (this.value === roundedColor && key !== 'recent-color') {\n this.addTileSelection(tile);\n palette.focus();\n }\n tile.style.backgroundColor = this.convertToRgbString(this.hexToRgb(roundedColor));\n }\n };\n ColorPicker.prototype.setNoColor = function () {\n var noColorEle = this.container.querySelector('.e-row').children[0];\n noColorEle.classList.add(NOCOLOR);\n if (!this.value) {\n noColorEle.classList.add(SELECT);\n closest(noColorEle, '.' + PALETTES).focus();\n }\n ['aria-selected', 'aria-label'].forEach(function (attr) { noColorEle.removeAttribute(attr); });\n noColorEle.style.backgroundColor = '';\n };\n ColorPicker.prototype.appendElement = function (ele, insertPos) {\n if (insertPos === void 0) { insertPos = 0; }\n var refEle = this.container.children[insertPos];\n if (refEle) {\n this.container.insertBefore(ele, refEle);\n }\n else {\n this.container.appendChild(ele);\n }\n };\n ColorPicker.prototype.addTileSelection = function (ele) {\n if (ele) {\n ele.classList.add(SELECT);\n ele.setAttribute('aria-selected', 'true');\n }\n };\n ColorPicker.prototype.createPicker = function () {\n classList(this.container, [PICKERCONTENT], [PALETTECONTENT]);\n var hsvContainer = this.createElement('div', { className: HSVCONTAINER });\n this.appendElement(hsvContainer);\n hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));\n var dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });\n hsvContainer.appendChild(dragHandler);\n if (this.value === null || this.value === '') {\n this.value = '#008000ff';\n }\n this.rgb = this.hexToRgb(this.value);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHsvContainerBg();\n this.setHandlerPosition();\n this.createSlider();\n this.createDragTooltip();\n };\n ColorPicker.prototype.setHsvContainerBg = function (h) {\n if (h === void 0) { h = this.hsv[0]; }\n this.getHsvContainer().style.backgroundColor = this.convertToRgbString(this.hsvToRgb(h, 100, 100, 1));\n };\n ColorPicker.prototype.getHsvContainer = function () {\n return select('.' + HSVCONTAINER, this.container);\n };\n ColorPicker.prototype.setHandlerPosition = function () {\n var dragHandler = this.getDragHandler();\n var hsvArea = select('.' + HSVAREA, this.container);\n if (this.enableRtl) {\n dragHandler.style.left = formatUnit((hsvArea.offsetWidth - dragHandler.offsetWidth / 2.5) * Math.abs(100 - this.hsv[1]) / 100);\n }\n else {\n dragHandler.style.left = formatUnit((hsvArea.offsetWidth - dragHandler.offsetWidth / 2.5) * this.hsv[1] / 100);\n }\n dragHandler.style.top = formatUnit((hsvArea.offsetHeight - dragHandler.offsetHeight / 2.5) * (100 - this.hsv[2]) / 100);\n };\n ColorPicker.prototype.createSlider = function () {\n var sliderPreviewWrapper = this.createElement('div', { className: 'e-slider-preview' });\n this.appendElement(sliderPreviewWrapper, 1);\n this.createPreview(sliderPreviewWrapper);\n var sliderWrapper = this.createElement('div', { className: 'e-colorpicker-slider' });\n sliderPreviewWrapper.insertBefore(sliderWrapper, sliderPreviewWrapper.children[0]);\n var slider = this.createElement('div', { className: 'e-hue-slider' });\n sliderWrapper.appendChild(slider);\n this.hueSlider = new Slider({\n value: this.hsv[0],\n min: 0,\n max: 359,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.hueChange.bind(this)\n });\n this.hueSlider.createElement = this.createElement;\n this.hueSlider.appendTo(slider);\n if (this.enableOpacity) {\n slider = this.createElement('div', { className: 'e-opacity-slider' });\n sliderWrapper.appendChild(slider);\n this.createOpacitySlider(slider);\n }\n };\n ColorPicker.prototype.createOpacitySlider = function (slider) {\n this.opacitySlider = new Slider({\n value: this.rgb[3] * 100,\n min: 0,\n max: 100,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.opacityChange.bind(this)\n });\n this.opacitySlider.createElement = this.createElement;\n this.opacitySlider.appendTo(slider);\n var opacityBgTrack = this.createElement('div', { className: 'e-opacity-empty-track' });\n slider.appendChild(opacityBgTrack);\n this.updateOpacitySliderBg();\n };\n ColorPicker.prototype.updateOpacitySliderBg = function () {\n var direction = this.enableRtl ? 'to left' : 'to right';\n var opacityEle = select('.e-opacity-empty-track', this.opacitySlider.element);\n if (opacityEle) {\n opacityEle.style.background =\n 'linear-gradient(' + direction + ', rgba(' + this.rgb.slice(0, 3) + ', 0) 0%, ' +\n this.convertToRgbString(this.rgb.slice(0, 3)) + ' 100%)';\n }\n };\n ColorPicker.prototype.hueChange = function (args) {\n this.hsv[0] = args.value;\n this.setHsvContainerBg();\n this.convertToOtherFormat();\n };\n ColorPicker.prototype.opacityChange = function (args) {\n var value = args.value;\n var pValue = this.rgbToHex(this.rgb);\n this.hsv[3] = value / 100;\n this.rgb[3] = value / 100;\n var cValue = this.rgbToHex(this.rgb);\n this.updateOpacityInput(value);\n var rgb = this.convertToRgbString(this.rgb);\n this.updatePreview(rgb);\n this.triggerEvent(cValue, pValue, rgb);\n };\n ColorPicker.prototype.updateOpacityInput = function (value) {\n if (this.enableOpacity && !this.getWrapper().classList.contains(HIDEVALUE)) {\n var opacityTextBoxInst = getInstance(select('.' + OPACITY, this.container), NumericTextBox);\n opacityTextBoxInst.value = value;\n opacityTextBoxInst.dataBind();\n }\n };\n ColorPicker.prototype.createPreview = function (parentEle) {\n var previewContainer = this.createElement('div', { className: PREVIEW });\n parentEle.appendChild(previewContainer);\n var preview = this.createElement('span', { className: 'e-preview ' + CURRENT });\n previewContainer.appendChild(preview);\n var colorValue = this.convertToRgbString(this.rgb);\n preview.style.backgroundColor = colorValue;\n preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS });\n previewContainer.appendChild(preview);\n preview.style.backgroundColor = colorValue;\n };\n ColorPicker.prototype.isPicker = function () {\n return !this.container.classList.contains(PALETTECONTENT);\n };\n ColorPicker.prototype.getPopupEle = function () {\n return this.container.parentElement;\n };\n ColorPicker.prototype.createNumericInput = function (element, value, label, max) {\n var _this = this;\n var numericInput = new NumericTextBox({\n value: value,\n placeholder: label,\n min: 0,\n max: max,\n format: '###.##',\n showSpinButton: false,\n floatLabelType: 'Always',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true,\n change: function (args) {\n if (args.event) {\n _this.inputHandler(args.event);\n }\n }\n });\n numericInput.createElement = this.createElement;\n numericInput.appendTo(element);\n };\n ColorPicker.prototype.createInput = function () {\n var isPicker = this.isPicker();\n var wrapper = this.getWrapper();\n if ((isPicker && !wrapper.classList.contains(HIDEVALUE)) || (!isPicker && wrapper.classList.contains(SHOWVALUE))) {\n var inputWrap = this.createElement('div', { className: INPUTWRAPPER });\n if (isPicker) {\n this.appendElement(inputWrap, 2);\n }\n else {\n this.appendElement(inputWrap, 1);\n }\n var container = this.createElement('div', { className: 'e-input-container' });\n inputWrap.appendChild(container);\n if (!wrapper.classList.contains(HIDEVALUESWITCH)) {\n this.appendValueSwitchBtn(inputWrap);\n }\n if (!wrapper.classList.contains(HIDEHEX)) {\n var hexInput = this.createElement('input', {\n className: HEX,\n attrs: { 'maxlength': '7', 'spellcheck': 'false', 'aria-label': 'HEX' }\n });\n container.appendChild(hexInput);\n Input.createInput({\n element: hexInput,\n floatLabelType: 'Always',\n properties: {\n placeholder: 'HEX',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true\n }\n }, this.createElement);\n Input.setValue(this.value.slice(0, 7), hexInput);\n hexInput.addEventListener('input', this.inputHandler.bind(this));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n var label = void 0;\n var value = void 0;\n if (this.isRgb) {\n label = 'RGB';\n value = this.rgb;\n }\n else {\n label = 'HSV';\n value = this.hsv;\n }\n var clsName = ['rh', 'gs', 'bv'];\n for (var i = 0; i < 3; i++) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: 'e-' + clsName[i] + '-value' })), value[i], label[i], 255);\n }\n if (this.enableOpacity) {\n this.appendOpacityValue(container);\n }\n }\n }\n };\n ColorPicker.prototype.appendOpacityValue = function (container) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: OPACITY })), this.rgb[3] * 100, 'A', 100);\n };\n ColorPicker.prototype.appendValueSwitchBtn = function (targetEle) {\n var valueSwitchBtn = this.createElement('button', {\n className: 'e-icons e-css e-btn e-flat e-icon-btn ' + FORMATSWITCH,\n attrs: { 'title': 'Toggle format' }\n });\n targetEle.appendChild(valueSwitchBtn);\n if (this.isPicker() && !this.getWrapper().classList.contains(HIDERGBA)) {\n valueSwitchBtn.addEventListener('click', this.formatSwitchHandler.bind(this));\n }\n };\n ColorPicker.prototype.createCtrlBtn = function () {\n if (this.modeSwitcher || this.showButtons) {\n this.l10n.setLocale(this.locale);\n var btnWrapper = this.createElement('div', { className: CTRLSWITCH });\n this.container.appendChild(btnWrapper);\n if (this.showButtons) {\n var controlBtnWrapper = this.createElement('div', { className: CTRLBTN });\n btnWrapper.appendChild(controlBtnWrapper);\n var apply = this.l10n.getConstant('Apply');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: apply,\n className: 'e-btn e-css e-flat e-primary e-small ' + APPLY,\n attrs: { 'title': apply }\n }));\n var cancel = this.l10n.getConstant('Cancel');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: cancel,\n className: 'e-btn e-css e-flat e-small ' + CANCEL,\n attrs: { 'title': cancel }\n }));\n }\n if (this.modeSwitcher) {\n this.appendModeSwitchBtn();\n }\n }\n };\n ColorPicker.prototype.appendModeSwitchBtn = function () {\n var modeSwitcher = this.createElement('button', {\n className: 'e-icons e-btn e-flat e-icon-btn ' + MODESWITCH, attrs: { title: this.l10n.getConstant('ModeSwitcher') }\n });\n select('.' + CTRLSWITCH, this.container).insertBefore(modeSwitcher, select('.' + CTRLBTN, this.container));\n };\n ColorPicker.prototype.createDragTooltip = function () {\n var _this = this;\n var tooltip = new Tooltip({\n opensOn: 'Custom',\n showTipPointer: false,\n cssClass: 'e-color-picker-tooltip',\n htmlAttributes: { title: 'tooltip' },\n beforeOpen: function (args) {\n _this.tooltipEle = args.element;\n },\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n });\n tooltip.createElement = this.createElement;\n tooltip.appendTo(this.container);\n tooltip.open(this.container);\n this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();\n this.tooltipEle.setAttribute('aria-label', 'colorpicker-tooltip');\n select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));\n };\n ColorPicker.prototype.getTooltipInst = function () {\n return getInstance(this.container, Tooltip);\n };\n ColorPicker.prototype.setTooltipOffset = function (value) {\n this.getTooltipInst().offsetY = value;\n };\n ColorPicker.prototype.toggleDisabled = function (enable) {\n if (enable) {\n this.getWrapper().classList.add(DISABLED$1);\n }\n else {\n this.getWrapper().classList.remove(DISABLED$1);\n }\n if (this.showButtons) {\n ([].slice.call(selectAll('.e-btn', this.container))).forEach(function (ele) {\n if (enable) {\n attributes(ele, { 'disabled': '' });\n }\n else {\n ele.removeAttribute('disabled');\n }\n });\n }\n };\n ColorPicker.prototype.convertToRgbString = function (rgb) {\n return rgb.length ? rgb.length === 4 ? 'rgba(' + rgb.join() + ')' : 'rgb(' + rgb.join() + ')' : '';\n };\n ColorPicker.prototype.convertToHsvString = function (hsv) {\n return hsv.length === 4 ? 'hsva(' + hsv.join() + ')' : 'hsv(' + hsv.join() + ')';\n };\n ColorPicker.prototype.updateHsv = function () {\n this.hsv[1] = this.hsv[1] > 100 ? 100 : this.hsv[1];\n this.hsv[2] = this.hsv[2] > 100 ? 100 : this.hsv[2];\n this.setHandlerPosition();\n };\n ColorPicker.prototype.convertToOtherFormat = function (isKey, e) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hsvToRgb.apply(this, this.hsv);\n var cValue = this.rgbToHex(this.rgb);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.updateInput(cValue);\n this.triggerEvent(cValue, pValue, rgba, isKey, e);\n };\n ColorPicker.prototype.updateInput = function (value) {\n var wrapper = this.getWrapper();\n if (!wrapper.classList.contains(HIDEVALUE)) {\n if (!wrapper.classList.contains(HIDEHEX)) {\n Input.setValue(value.substr(0, 7), select('.' + HEX, this.container));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n if (this.isRgb) {\n this.updateValue(this.rgb, false);\n }\n else {\n this.updateValue(this.hsv, false);\n }\n }\n }\n };\n ColorPicker.prototype.updatePreview = function (value) {\n if (this.enableOpacity) {\n this.updateOpacitySliderBg();\n }\n select('.e-tip-transparent', this.tooltipEle).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + PREVIOUS, this.container).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n };\n ColorPicker.prototype.getDragHandler = function () {\n return select('.' + HANDLER, this.container);\n };\n ColorPicker.prototype.removeTileSelection = function () {\n var selectedEle = [].slice.call(selectAll('.' + SELECT, this.container));\n selectedEle.forEach(function (ele) {\n ele.classList.remove(SELECT);\n ele.setAttribute('aria-selected', 'false');\n });\n };\n ColorPicker.prototype.convertRgbToNumberArray = function (value) {\n return (value.slice(value.indexOf('(') + 1, value.indexOf(')'))).split(',').map(function (n, i) {\n return (i !== 3) ? parseInt(n, 10) : parseFloat(n);\n });\n };\n /**\n * To get color value in specified type.\n *\n * @param {string} value - Specify the color value.\n * @param {string} type - Specify the type to which the specified color needs to be converted.\n * @method getValue\n * @returns {string} - Color value\n */\n ColorPicker.prototype.getValue = function (value, type) {\n if (!value) {\n value = this.value;\n }\n type = !type ? 'hex' : type.toLowerCase();\n if (value[0] === 'r') {\n var cValue = this.convertRgbToNumberArray(value);\n if (type === 'hex' || type === 'hexa') {\n var hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue.slice(0, 3)));\n }\n else {\n if (type === 'hsva') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n if (value[0] === 'h') {\n var cValue = this.hsvToRgb.apply(this, this.convertRgbToNumberArray(value));\n if (type === 'rgba') {\n return this.convertToRgbString(cValue);\n }\n else {\n if (type === 'hex' || type === 'hexa') {\n var hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'rgb') {\n return this.convertToRgbString(cValue.slice(0, 3));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n value = this.roundValue(value);\n var rgb = this.hexToRgb(value);\n if (type === 'rgb' || type === 'hsv') {\n rgb = rgb.slice(0, 3);\n }\n if (type === 'rgba' || type === 'rgb') {\n return this.convertToRgbString(rgb);\n }\n else {\n if (type === 'hsva' || type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, rgb));\n }\n else {\n if (type === 'hex') {\n return value.slice(0, 7);\n }\n else {\n if (type === 'a') {\n return rgb[3].toString();\n }\n else {\n return 'null';\n }\n }\n }\n }\n }\n }\n };\n /**\n * To show/hide ColorPicker popup based on current state of the SplitButton.\n *\n * @method toggle\n * @returns {void}\n */\n ColorPicker.prototype.toggle = function () {\n if (this.container.parentElement.classList.contains('e-popup-close')) {\n this.splitBtn.toggle();\n }\n else {\n this.closePopup(null);\n }\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n ColorPicker.prototype.getModuleName = function () {\n return 'colorpicker';\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n ColorPicker.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ColorPicker.prototype.wireEvents = function () {\n if (this.isPicker()) {\n var dragHandler = this.getDragHandler();\n EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);\n var ctrlBtn = select('.' + CTRLBTN, this.container);\n if (ctrlBtn) {\n EventHandler.add(ctrlBtn, 'keydown', this.ctrlBtnKeyDown, this);\n }\n EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);\n if (this.modeSwitcher || this.showButtons) {\n this.addCtrlSwitchEvent();\n }\n EventHandler.add(select('.' + PREVIOUS, this.container), 'click', this.previewHandler, this);\n }\n else {\n EventHandler.add(this.container, 'click', this.paletteClickHandler, this);\n EventHandler.add(this.container, 'keydown', this.paletteKeyDown, this);\n }\n };\n ColorPicker.prototype.formResetHandler = function () {\n this.value = this.initialInputValue;\n attributes(this.element, { 'value': this.initialInputValue });\n };\n ColorPicker.prototype.addCtrlSwitchEvent = function () {\n var ctrlSwitchBtn = select('.' + CTRLSWITCH, this.container);\n if (ctrlSwitchBtn) {\n EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);\n }\n };\n ColorPicker.prototype.ctrlBtnKeyDown = function (e) {\n if (e.keyCode === 13) {\n var applyBtn = select('.' + APPLY, this.container);\n if (applyBtn) {\n var cValue = this.rgbToHex(this.rgb);\n this.triggerChangeEvent(cValue);\n }\n this.splitBtn.element.focus();\n }\n };\n ColorPicker.prototype.pickerKeyDown = function (e) {\n switch (e.keyCode) {\n case 39:\n this.handlerDragPosition(1, this.enableRtl ? -1 : 1, e);\n break;\n case 37:\n this.handlerDragPosition(1, this.enableRtl ? 1 : -1, e);\n break;\n case 38:\n this.handlerDragPosition(2, 1, e);\n break;\n case 40:\n this.handlerDragPosition(2, -1, e);\n break;\n case 13: {\n e.preventDefault();\n var cValue = this.rgbToHex(this.rgb);\n this.enterKeyHandler(cValue);\n }\n }\n };\n ColorPicker.prototype.enterKeyHandler = function (value) {\n this.triggerChangeEvent(value);\n if (!this.inline) {\n this.splitBtn.element.focus();\n }\n };\n ColorPicker.prototype.closePopup = function (e) {\n var _this = this;\n var beforeCloseArgs = { element: this.container, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedcloseArgs) {\n if (!observedcloseArgs.cancel) {\n _this.splitBtn.toggle();\n _this.onPopupClose();\n }\n });\n };\n ColorPicker.prototype.triggerChangeEvent = function (value, e) {\n var hex = value.slice(0, 7);\n this.trigger('change', {\n currentValue: { hex: hex, rgba: this.convertToRgbString(this.rgb) }, event: e,\n previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) },\n value: this.enableOpacity ? value : hex\n });\n if (this.showRecentColors) {\n this.recentColors.unshift(hex);\n if (this.inline) {\n this.renderRecentColor();\n }\n }\n if (this.enableOpacity) {\n this.setProperties({ 'value': value }, true);\n }\n else {\n this.setProperties({ 'value': hex }, true);\n }\n this.element.value = hex ? hex : '#000000';\n };\n ColorPicker.prototype.handlerDragPosition = function (prob, value, e) {\n e.preventDefault();\n this.hsv[prob] += value * (e.ctrlKey ? 1 : 3);\n if (this.hsv[prob] < 0) {\n this.hsv[prob] = 0;\n }\n this.updateHsv();\n this.convertToOtherFormat(true, e);\n };\n ColorPicker.prototype.handlerDown = function (e) {\n e.preventDefault();\n if (e.type === 'mousedown') {\n this.clientX = Math.abs(e.pageX - pageXOffset);\n this.clientY = Math.abs(e.pageY - pageYOffset);\n this.setTooltipOffset(8);\n }\n else {\n this.clientX = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n this.clientY = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n this.setTooltipOffset(-8);\n }\n this.setHsv(this.clientX, this.clientY);\n this.getDragHandler().style.transition = 'left .4s cubic-bezier(.25, .8, .25, 1), top .4s cubic-bezier(.25, .8, .25, 1)';\n this.updateHsv();\n this.convertToOtherFormat(false, e);\n this.getDragHandler().focus();\n EventHandler.add(document, 'mousemove touchmove', this.handlerMove, this);\n EventHandler.add(document, 'mouseup touchend', this.handlerEnd, this);\n };\n ColorPicker.prototype.handlerMove = function (e) {\n if (e.type !== 'touchmove') {\n e.preventDefault();\n }\n var x;\n var y;\n if (e.type === 'mousemove') {\n x = Math.abs(e.pageX - pageXOffset);\n y = Math.abs(e.pageY - pageYOffset);\n }\n else {\n x = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n y = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n }\n this.setHsv(x, y);\n var dragHandler = this.getDragHandler();\n this.updateHsv();\n this.convertToOtherFormat(false, e);\n this.getTooltipInst().refresh(dragHandler);\n if (!this.tooltipEle.style.transform) {\n if (Math.abs(this.clientX - x) > 8 || Math.abs(this.clientY - y) > 8) {\n select('.' + HSVAREA, this.container).style.cursor = 'pointer';\n dragHandler.style.transition = 'none';\n if (!this.inline) {\n this.tooltipEle.style.zIndex = (parseInt(this.getPopupEle().style.zIndex, 10) + 1).toString();\n }\n this.tooltipEle.style.transform = 'rotate(45deg)';\n dragHandler.classList.add('e-hide-handler');\n }\n }\n };\n ColorPicker.prototype.setHsv = function (clientX, clientY) {\n var ele = select('.' + HSVAREA, this.container);\n var position = ele.getBoundingClientRect();\n if (this.enableRtl) {\n clientX = clientX > position.right ? 0 : Math.abs(clientX - position.right);\n }\n else {\n clientX = clientX > position.left ? Math.abs(clientX - position.left) : 0;\n }\n clientY = clientY > position.top ? Math.abs(clientY - position.top) : 0;\n this.hsv[2] = Math.round(Number(100 * (ele.offsetHeight -\n Math.max(0, Math.min(ele.offsetHeight, (clientY - ele.offsetTop)))) / ele.offsetHeight) * 10) / 10;\n this.hsv[1] =\n Math.round(Number(100 * (Math.max(0, Math.min(ele.offsetWidth, (clientX - ele.offsetLeft)))) / ele.offsetWidth) * 10) / 10;\n };\n ColorPicker.prototype.handlerEnd = function (e) {\n if (e.type !== 'touchend') {\n e.preventDefault();\n }\n EventHandler.remove(document, 'mousemove touchmove', this.handlerMove);\n EventHandler.remove(document, 'mouseup touchend', this.handlerEnd);\n var dragHandler = this.getDragHandler();\n select('.' + HSVAREA, this.container).style.cursor = '';\n if (this.tooltipEle.style.transform) {\n this.tooltipEle.style.transform = '';\n dragHandler.classList.remove('e-hide-handler');\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n };\n ColorPicker.prototype.btnClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.' + MODESWITCH)) {\n e.stopPropagation();\n this.switchToPalette();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n }\n };\n ColorPicker.prototype.switchToPalette = function () {\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Palette' });\n this.unWireEvents();\n this.destroyOtherComp();\n detach(select('.e-slider-preview', this.container));\n if (!this.getWrapper().classList.contains(HIDEVALUE)) {\n remove(select('.' + INPUTWRAPPER, this.container));\n }\n detach(this.getHsvContainer());\n this.createPalette();\n this.firstPaletteFocus();\n this.createInput();\n this.refreshPopupPos();\n //for image editor popup position refreshing\n if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {\n this.refreshImageEditorPopupPos();\n }\n this.wireEvents();\n this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });\n };\n //for image editor popup position refreshing\n ColorPicker.prototype.refreshImageEditorPopupPos = function () {\n if (Browser.isDevice) {\n var popupEle = this.getPopupEle();\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.top = formatUnit(0 + pageYOffset);\n var btnElem = document.querySelector(\"#\" + this.element.parentElement.parentElement.id.split('-popup')[0]);\n if (btnElem) {\n //eslint-disable-next-line @typescript-eslint/no-explicit-any\n popupEle.parentElement.ej2_instances[0].refreshPosition(btnElem);\n }\n }\n };\n ColorPicker.prototype.refreshPopupPos = function () {\n if (!this.inline) {\n var popupEle = this.getPopupEle();\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.top = formatUnit(0 + pageYOffset);\n this.getPopupInst().refreshPosition(this.splitBtn.element.parentElement);\n }\n };\n ColorPicker.prototype.formatSwitchHandler = function () {\n if (this.isRgb) {\n this.updateValue(this.hsv, true, 3, [360, 100, 100]);\n this.isRgb = false;\n }\n else {\n this.updateValue(this.rgb, true, 2);\n this.isRgb = true;\n }\n };\n ColorPicker.prototype.updateValue = function (value, format, idx, max) {\n var clsName = ['e-rh-value', 'e-gs-value', 'e-bv-value'];\n var inst;\n for (var i = 0, len = clsName.length; i < len; i++) {\n inst = getInstance(select('.' + clsName[i], this.container), NumericTextBox);\n inst.value = Math.round(value[i]);\n if (format) {\n inst.placeholder = clsName[i].substr(idx, 1).toUpperCase();\n inst.max = max ? max[i] : 255;\n }\n inst.dataBind();\n }\n };\n ColorPicker.prototype.previewHandler = function (e) {\n var target = e.target;\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.convertRgbToNumberArray(target.style.backgroundColor);\n if (!this.rgb[3]) {\n this.rgb[3] = 1;\n }\n var cValue = this.rgbToHex(this.rgb);\n var hsv = this.rgbToHsv.apply(this, this.rgb);\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n }\n this.setHsvContainerBg(hsv[0]);\n if (this.enableOpacity && hsv[3] !== this.hsv[3]) {\n this.opacitySlider.setProperties({ 'value': hsv[3] * 100 }, true);\n this.opacitySlider.refresh();\n this.updateOpacitySliderBg();\n }\n this.hsv = hsv;\n this.setHandlerPosition();\n this.updateInput(cValue);\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = this.convertToRgbString(this.rgb);\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), false, e);\n };\n ColorPicker.prototype.paletteClickHandler = function (e) {\n e.preventDefault();\n var target = e.target;\n if (target.classList.contains(TILE)) {\n this.removeTileSelection();\n this.addTileSelection(target);\n if (target.classList.contains(NOCOLOR)) {\n this.noColorTile();\n }\n else {\n var cValue = target.getAttribute('aria-label');\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(this.roundValue(cValue));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), false, e);\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n }\n else {\n if (closest(target, '.' + MODESWITCH)) {\n this.switchToPicker();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n else {\n if (this.getWrapper().classList.contains(SHOWVALUE) && closest(target, '.' + FORMATSWITCH)) {\n this.formatSwitchHandler();\n }\n }\n }\n }\n };\n ColorPicker.prototype.noColorTile = function (isKey) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = [];\n this.hsv = [];\n this.triggerEvent('', pValue, '', isKey);\n };\n ColorPicker.prototype.switchToPicker = function () {\n var wrapper = this.getWrapper();\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Picker' });\n this.unWireEvents();\n ([].slice.call(selectAll('.' + PALETTES, this.container))).forEach(function (ele) {\n detach(ele);\n });\n if (this.container.querySelector('.e-clr-pal-rec-wpr')) {\n detach(this.container.querySelector('.e-clr-pal-rec-wpr'));\n }\n if (wrapper.classList.contains(SHOWVALUE)) {\n detach(select('.' + INPUTWRAPPER, this.container));\n }\n this.container.style.width = '';\n var grpEle = select('.e-custom-palette', this.container);\n if (this.presetColors) {\n remove(grpEle);\n }\n this.createPicker();\n this.getDragHandler().focus();\n this.createInput();\n this.refreshPopupPos();\n //for image editor popup position refreshing\n if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {\n this.refreshImageEditorPopupPos();\n }\n this.wireEvents();\n this.trigger('onModeSwitch', { element: this.container, mode: 'Picker' });\n };\n ColorPicker.prototype.ctrlBtnClick = function (ele, e) {\n if (ele.classList.contains(APPLY)) {\n var cValue = this.rgbToHex(this.rgb);\n this.triggerChangeEvent(cValue, e);\n }\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n else if (ele.classList.contains(CANCEL)) {\n var beforeCloseArgs = { element: this.container, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs);\n }\n };\n ColorPicker.prototype.paletteKeyDown = function (e) {\n var target = e.target;\n if (!target.classList.contains(PALETTES)) {\n return;\n }\n var selectedEle;\n var idx;\n var tiles = [].slice.call(selectAll('.' + TILE, target));\n var prevSelectedEle = (tiles.filter(function (tile) { return tile.classList.contains('e-selected'); })).pop();\n switch (!e.altKey && e.keyCode) {\n case 39:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? -1 : 1)]\n : tiles[this.enableRtl ? tiles.length - 1 : 0];\n this.keySelectionChanges(selectedEle);\n break;\n case 37:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? 1 : -1)]\n : tiles[this.enableRtl ? 0 : tiles.length - 1];\n this.keySelectionChanges(selectedEle);\n break;\n case 38:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, -this.columns) : 0;\n selectedEle = tiles[idx] ? tiles[idx] : tiles[idx - this.columns];\n this.keySelectionChanges(selectedEle);\n break;\n case 40:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, this.columns) : tiles.length - 1;\n if (tiles[idx]) {\n selectedEle = tiles[idx];\n }\n else {\n idx %= tiles.length;\n idx += tiles[tiles.length - 1].parentElement.childElementCount;\n selectedEle = tiles[idx];\n }\n this.keySelectionChanges(selectedEle);\n break;\n case 13:\n e.preventDefault();\n if (prevSelectedEle) {\n var cValue = prevSelectedEle.getAttribute('aria-label');\n this.enterKeyHandler(cValue ? cValue : '');\n }\n break;\n }\n };\n ColorPicker.prototype.keySelectionChanges = function (newEle) {\n this.removeTileSelection();\n this.addTileSelection(newEle);\n if (newEle.classList.contains(NOCOLOR)) {\n this.noColorTile(true);\n }\n else {\n var cValue = newEle.getAttribute('aria-label');\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(cValue);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), true);\n }\n };\n ColorPicker.prototype.tilePosition = function (items, element, cIdx) {\n items = Array.prototype.slice.call(items);\n var n = items.length;\n var emptyCount = this.columns - items[n - 1].parentElement.childElementCount;\n var idx = items.indexOf(element);\n idx += cIdx;\n if (idx < 0) {\n idx += n + emptyCount;\n }\n else {\n idx %= n + emptyCount;\n }\n return idx;\n };\n ColorPicker.prototype.inputHandler = function (e) {\n var target = e.target;\n if (!target.value.length) {\n return;\n }\n var hsv;\n var pValue;\n var label = select('.e-float-text', target.parentElement).textContent;\n switch (label) {\n case 'HEX': {\n var value = '';\n if ((target.value[0] === '#' && target.value.length !== 5) || (target.value[0] !== '#' && target.value.length !== 4)) {\n value = this.roundValue(target.value);\n }\n if (value.length === 9) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(value + value.substr(-2));\n this.inputValueChange(this.rgbToHsv.apply(this, this.rgb), pValue, target.value, e);\n }\n else {\n return;\n }\n break;\n }\n case 'R':\n if (this.rgb[0] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[0] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue, null, e);\n }\n break;\n case 'G':\n if (this.rgb[1] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[1] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue, null, e);\n }\n break;\n case 'B':\n if (this.rgb[2] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[2] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue, null, e);\n }\n break;\n case 'H':\n this.hueSlider.value = Number(target.value);\n break;\n case 'S':\n if (this.hsv[1] !== Number(target.value)) {\n this.hsv[1] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat(false, e);\n }\n break;\n case 'V':\n if (this.hsv[2] !== Number(target.value)) {\n this.hsv[2] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat(false, e);\n }\n break;\n case 'A':\n this.opacitySlider.value = Number(target.value);\n break;\n }\n };\n ColorPicker.prototype.inputValueChange = function (hsv, pValue, value, e) {\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n this.setHsvContainerBg(hsv[0]);\n }\n this.hsv = hsv;\n var cValue = this.rgbToHex(this.rgb);\n this.setHandlerPosition();\n this.updateInput(value ? value : cValue);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.triggerEvent(cValue, pValue, rgba, false, e);\n };\n ColorPicker.prototype.triggerEvent = function (cValue, pValue, rgba, isKey, e) {\n if (isKey === void 0) { isKey = false; }\n var hex = cValue.slice(0, 7);\n if (isNullOrUndefined(e)) {\n e = new MouseEvent('click', { bubbles: true, cancelable: false });\n }\n if (!this.showButtons && !isKey) {\n this.trigger('change', { currentValue: { hex: hex, rgba: rgba }, event: e,\n previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) }, value: cValue });\n if (this.showRecentColors) {\n this.recentColors.unshift(hex);\n if (this.inline) {\n this.renderRecentColor();\n }\n }\n if (this.enableOpacity) {\n this.setProperties({ 'value': cValue }, true);\n }\n else {\n this.setProperties({ 'value': hex }, true);\n }\n this.element.value = hex ? hex : '#000000';\n }\n else {\n this.trigger('select', {\n currentValue: { hex: hex, rgba: rgba }, event: e,\n previousValue: { hex: pValue.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(pValue)) }\n });\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n ColorPicker.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n ['tabindex', 'spellcheck'].forEach(function (attr) { _this.element.removeAttribute(attr); });\n if (this.inline) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n else {\n if (this.isPopupOpen()) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n this.splitBtn.destroy();\n this.splitBtn = null;\n }\n this.tileRipple();\n this.tileRipple = null;\n this.ctrlBtnRipple();\n this.ctrlBtnRipple = null;\n if (this.element.nextElementSibling) {\n detach(this.element.nextElementSibling);\n }\n if (wrapper) {\n wrapper.parentElement.insertBefore(this.element, wrapper);\n detach(wrapper);\n }\n this.container = null;\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n ColorPicker.prototype.destroyOtherComp = function () {\n if (this.isPicker()) {\n var popup = closest(this.hueSlider.element, '.e-color-picker');\n var numericElemColl = popup.querySelectorAll('.e-numerictextbox');\n for (var i = 0; i < numericElemColl.length; i++) {\n getInstance(numericElemColl[i], NumericTextBox).destroy();\n }\n this.hueSlider.destroy();\n if (this.enableOpacity) {\n this.opacitySlider.destroy();\n this.opacitySlider = null;\n }\n this.hueSlider = null;\n var tooltipInst = this.getTooltipInst();\n tooltipInst.close();\n tooltipInst.destroy();\n this.tooltipEle = null;\n }\n };\n ColorPicker.prototype.isPopupOpen = function () {\n return this.getPopupEle().classList.contains('e-popup-open');\n };\n ColorPicker.prototype.unWireEvents = function () {\n if (this.isPicker()) {\n var dragHandler = this.getDragHandler();\n EventHandler.remove(dragHandler, 'keydown', this.pickerKeyDown);\n var ctrlBtn = select('.' + CTRLBTN, this.container);\n if (ctrlBtn) {\n EventHandler.remove(ctrlBtn, 'keydown', this.ctrlBtnKeyDown);\n }\n EventHandler.remove(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown);\n if (this.modeSwitcher || this.showButtons) {\n EventHandler.remove(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler);\n }\n EventHandler.remove(select('.' + PREVIOUS, this.container), 'click', this.previewHandler);\n }\n else {\n EventHandler.remove(this.container, 'click', this.paletteClickHandler);\n EventHandler.remove(this.container, 'keydown', this.paletteKeyDown);\n }\n };\n ColorPicker.prototype.roundValue = function (value) {\n if (!value) {\n return '';\n }\n if (value[0] !== '#') {\n value = '#' + value;\n }\n var len = value.length;\n if (len === 4) {\n value += 'f';\n len = 5;\n }\n if (len === 5) {\n var tempValue = '';\n for (var i = 1, len_1 = value.length; i < len_1; i++) {\n tempValue += (value.charAt(i) + value.charAt(i));\n }\n value = '#' + tempValue;\n len = 9;\n }\n if (len === 7) {\n value += 'ff';\n }\n return value;\n };\n ColorPicker.prototype.hexToRgb = function (hex) {\n if (!hex) {\n return [];\n }\n hex = hex.trim();\n if (hex.length !== 9) {\n hex = this.roundValue(hex);\n }\n var opacity = Number((parseInt(hex.slice(-2), 16) / 255).toFixed(2));\n hex = hex.slice(1, 7);\n var bigInt = parseInt(hex, 16);\n var h = [];\n h.push((bigInt >> 16) & 255);\n h.push((bigInt >> 8) & 255);\n h.push(bigInt & 255);\n h.push(opacity);\n return h;\n };\n ColorPicker.prototype.rgbToHsv = function (r, g, b, opacity) {\n if (this.rgb && !this.rgb.length) {\n return [];\n }\n r /= 255;\n g /= 255;\n b /= 255;\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h;\n var v = max;\n var d = max - min;\n var s = max === 0 ? 0 : d / max;\n if (max === min) {\n h = 0;\n }\n else {\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n var hsv = [Math.round(h * 360), Math.round(s * 1000) / 10, Math.round(v * 1000) / 10];\n if (!isNullOrUndefined(opacity)) {\n hsv.push(opacity);\n }\n return hsv;\n };\n ColorPicker.prototype.hsvToRgb = function (h, s, v, opacity) {\n var r;\n var g;\n var b;\n s /= 100;\n v /= 100;\n if (s === 0) {\n r = g = b = v;\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), opacity];\n }\n h /= 60;\n var i = Math.floor(h);\n var f = h - i;\n var p = v * (1 - s);\n var q = v * (1 - s * f);\n var t = v * (1 - s * (1 - f));\n switch (i) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n default:\n r = v;\n g = p;\n b = q;\n }\n var rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n if (!isNullOrUndefined(opacity)) {\n rgb.push(opacity);\n }\n return rgb;\n };\n ColorPicker.prototype.rgbToHex = function (rgb) {\n return rgb.length ? ('#' + this.hex(rgb[0]) + this.hex(rgb[1]) + this.hex(rgb[2]) +\n (!isNullOrUndefined(rgb[3]) ? (rgb[3] !== 0 ? (Math.round(rgb[3] * 255) + 0x10000).toString(16).substr(-2) : '00') : '')) : '';\n };\n ColorPicker.prototype.hex = function (x) {\n return ('0' + x.toString(16)).slice(-2);\n };\n ColorPicker.prototype.changeModeSwitcherProp = function (prop) {\n var ctrlSwitchWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlSwitchWrapper) {\n this.appendModeSwitchBtn();\n }\n else {\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n }\n else {\n if (ctrlSwitchWrapper) {\n if (this.showButtons) {\n detach(select('.' + MODESWITCH, ctrlSwitchWrapper));\n }\n else {\n remove(ctrlSwitchWrapper);\n }\n }\n }\n };\n ColorPicker.prototype.changeShowBtnProps = function (prop) {\n var ctrlBtnWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlBtnWrapper) {\n remove(ctrlBtnWrapper);\n }\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n else {\n if (this.modeSwitcher) {\n detach(select('.' + CTRLBTN, ctrlBtnWrapper));\n }\n else {\n remove(ctrlBtnWrapper);\n }\n }\n };\n ColorPicker.prototype.changeValueProp = function (newProp) {\n if (this.isPicker()) {\n this.rgb = this.hexToRgb(newProp);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHandlerPosition();\n detach(closest(this.hueSlider.element, '.e-slider-preview'));\n this.createSlider();\n this.setHsvContainerBg();\n this.updateInput(newProp);\n if (this.rgb.length === 4) {\n this.updateOpacityInput(this.rgb[3] * 100);\n }\n }\n else {\n this.removeTileSelection();\n var ele = this.container.querySelector('span[aria-label=\"' + this.roundValue(newProp) + '\"]');\n if (ele) {\n this.addTileSelection(ele);\n }\n }\n };\n ColorPicker.prototype.setInputEleProps = function () {\n remove(select('.' + INPUTWRAPPER, this.container));\n this.createInput();\n };\n ColorPicker.prototype.changeDisabledProp = function (newProp) {\n if (this.isPicker()) {\n this.hueSlider.enabled = !newProp;\n this.opacitySlider.enabled = !newProp;\n this.setInputEleProps();\n }\n if (newProp) {\n this.toggleDisabled(true);\n this.unWireEvents();\n }\n else {\n this.toggleDisabled(false);\n this.wireEvents();\n }\n };\n ColorPicker.prototype.changeCssClassProps = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n var popupWrapper = this.getPopupEle();\n if (oldProp) {\n removeClass([wrapper, popupWrapper], oldProp.split(' '));\n }\n if (newProp) {\n addClass([wrapper, popupWrapper], newProp.replace(/\\s+/g, ' ').trim().split(' '));\n }\n };\n ColorPicker.prototype.changeRtlProps = function (newProp) {\n if (newProp) {\n addClass([this.getWrapper()], 'e-rtl');\n }\n else {\n removeClass([this.getWrapper()], 'e-rtl');\n }\n };\n ColorPicker.prototype.changePaletteProps = function () {\n detach(this.container.children[0]);\n this.container.style.width = '';\n this.createPalette();\n };\n ColorPicker.prototype.changeOpacityProps = function (newProp) {\n var wrapper = this.getWrapper();\n if (newProp) {\n removeClass([this.container.parentElement], HIDEOPACITY);\n this.createOpacitySlider(select('.e-colorpicker-slider', this.container).appendChild(this.createElement('div', { className: 'e-opacity-slider' })));\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n this.appendOpacityValue(select('.e-input-container', this.container));\n }\n }\n else {\n addClass([this.container.parentElement], HIDEOPACITY);\n this.opacitySlider.destroy();\n remove(this.opacitySlider.element);\n this.opacitySlider = null;\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n remove(select('.' + OPACITY, this.container).parentElement);\n }\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ColorPickerModel} newProp - Specifies new properties\n * @param {ColorPickerModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n ColorPicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n if (!isNullOrUndefined(newProp.value)) {\n var value = this.roundValue(newProp.value);\n if (value.length === 9) {\n this.element.value = this.roundValue(value).slice(0, 7);\n var preview = this.splitBtn && select('.' + SPLITPREVIEW, this.splitBtn.element);\n if (preview) {\n preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(newProp.value));\n }\n }\n else if (this.noColor && this.mode === 'Palette' && this.value === '') {\n var preview = this.splitBtn && select('.' + SPLITPREVIEW, this.splitBtn.element);\n preview.style.backgroundColor = '';\n }\n else {\n this.value = oldProp.value;\n }\n }\n if (!this.inline && isNullOrUndefined(newProp.inline)) {\n var otherCompModel = ['disabled', 'enableRtl'];\n this.splitBtn.setProperties(getModel(newProp, otherCompModel));\n if (!this.isPopupOpen()) {\n this.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n this.changeRtlProps(newProp.enableRtl);\n return;\n }\n }\n var _loop_1 = function (prop) {\n switch (prop) {\n case 'inline':\n if (newProp.inline) {\n this_1.getWrapper().appendChild(this_1.container);\n this_1.splitBtn.destroy();\n detach(this_1.element.nextElementSibling);\n if (!this_1.container.children.length) {\n this_1.createWidget();\n }\n }\n else {\n this_1.destroyOtherComp();\n this_1.unWireEvents();\n this_1.container.innerHTML = '';\n this_1.createSplitBtn();\n }\n break;\n case 'cssClass': {\n this_1.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n var props = newProp.cssClass.split(' ').concat(oldProp.cssClass.split(' '));\n props = props.reduce(function (a, b) { if (a.indexOf(b) < 0) {\n a.push(b);\n } return a; }, []);\n var count_1 = 0;\n props.forEach(function (cls) {\n if (count_1 === 0 &&\n (cls === HIDEVALUE || cls === HIDEVALUESWITCH || cls === SHOWVALUE || cls === HIDEHEX || cls === HIDERGBA)) {\n var inputWrap = select('.' + INPUTWRAPPER, _this.container);\n if (inputWrap) {\n remove(select('.' + INPUTWRAPPER, _this.container));\n }\n _this.createInput();\n count_1++;\n }\n });\n break;\n }\n case 'enableRtl':\n if (this_1.isPicker()) {\n this_1.hueSlider.enableRtl = newProp.enableRtl;\n if (this_1.enableOpacity) {\n this_1.opacitySlider.enableRtl = newProp.enableRtl;\n }\n this_1.setInputEleProps();\n }\n this_1.changeRtlProps(newProp.enableRtl);\n break;\n case 'disabled':\n this_1.changeDisabledProp(newProp.disabled);\n break;\n case 'value':\n if (this_1.value !== oldProp.value) {\n this_1.changeValueProp(newProp.value);\n }\n break;\n case 'showButtons':\n this_1.changeShowBtnProps(newProp.showButtons);\n break;\n case 'mode':\n if (newProp.mode === 'Picker') {\n this_1.switchToPicker();\n }\n else {\n this_1.switchToPalette();\n }\n break;\n case 'modeSwitcher':\n this_1.changeModeSwitcherProp(newProp.modeSwitcher);\n break;\n case 'columns':\n case 'presetColors':\n if (!this_1.isPicker()) {\n this_1.changePaletteProps();\n }\n break;\n case 'noColor':\n if (newProp.noColor) {\n if (this_1.mode === 'Palette' && !this_1.modeSwitcher) {\n this_1.setNoColor();\n }\n }\n else {\n this_1.changePaletteProps();\n }\n break;\n case 'enableOpacity':\n this_1.changeOpacityProps(newProp.enableOpacity);\n break;\n case 'showRecentColors':\n if (!newProp.showRecentColors) {\n var recentClrWpr = this_1.container.querySelector('.e-clr-pal-rec-wpr');\n if (recentClrWpr) {\n detach(recentClrWpr);\n }\n }\n this_1.recentColors = [];\n break;\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n _loop_1(prop);\n }\n };\n /**\n * Sets the focus to Colorpicker\n * its native method\n *\n * @public\n * @returns {void}\n */\n ColorPicker.prototype.focusIn = function () {\n this.element.parentElement.focus();\n };\n __decorate$5([\n Property('#008000ff')\n ], ColorPicker.prototype, \"value\", void 0);\n __decorate$5([\n Property('')\n ], ColorPicker.prototype, \"cssClass\", void 0);\n __decorate$5([\n Property(false)\n ], ColorPicker.prototype, \"disabled\", void 0);\n __decorate$5([\n Property('Picker')\n ], ColorPicker.prototype, \"mode\", void 0);\n __decorate$5([\n Property(true)\n ], ColorPicker.prototype, \"modeSwitcher\", void 0);\n __decorate$5([\n Property(null)\n ], ColorPicker.prototype, \"presetColors\", void 0);\n __decorate$5([\n Property(true)\n ], ColorPicker.prototype, \"showButtons\", void 0);\n __decorate$5([\n Property(10)\n ], ColorPicker.prototype, \"columns\", void 0);\n __decorate$5([\n Property(false)\n ], ColorPicker.prototype, \"inline\", void 0);\n __decorate$5([\n Property(false)\n ], ColorPicker.prototype, \"noColor\", void 0);\n __decorate$5([\n Property(false)\n ], ColorPicker.prototype, \"enablePersistence\", void 0);\n __decorate$5([\n Property(true)\n ], ColorPicker.prototype, \"enableOpacity\", void 0);\n __decorate$5([\n Property(false)\n ], ColorPicker.prototype, \"createPopupOnClick\", void 0);\n __decorate$5([\n Property(false)\n ], ColorPicker.prototype, \"showRecentColors\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"select\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"change\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"beforeTileRender\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"beforeOpen\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"open\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"beforeClose\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"beforeModeSwitch\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"onModeSwitch\", void 0);\n __decorate$5([\n Event()\n ], ColorPicker.prototype, \"created\", void 0);\n ColorPicker = __decorate$5([\n NotifyPropertyChanges\n ], ColorPicker);\n return ColorPicker;\n}(Component));\n\nvar __extends$6 = (undefined && undefined.__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$6 = (undefined && undefined.__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};\nvar HIDE_CLEAR = 'e-clear-icon-hide';\n/**\n * Represents the TextBox component that allows the user to enter the values based on it's type.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar TextBox = /** @__PURE__ @class */ (function (_super) {\n __extends$6(TextBox, _super);\n /**\n *\n * @param {TextBoxModel} options - Specifies the TextBox model.\n * @param {string | HTMLInputElement | HTMLTextAreaElement} element - Specifies the element to render as component.\n * @private\n */\n function TextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n _this.isHiddenInput = false;\n _this.isForm = false;\n _this.inputPreviousValue = null;\n _this.textboxOptions = options;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {TextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {TextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TextBox.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 'floatLabelType':\n Input.removeFloating(this.textboxWrapper);\n Input.addFloating(this.respectiveElement, this.floatLabelType, this.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n this.bindClearEvent();\n break;\n case 'width':\n Input.setWidth(newProp.width, this.textboxWrapper.container);\n break;\n case 'value':\n {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (!Input.isBlank(this.value)) {\n this.value = this.value.toString();\n }\n this.isProtectedOnChange = prevOnChange;\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if ((this.isAngular || this.isVue) && this.preventChange === true) {\n this.previousValue = this.isAngular ? this.value : this.previousValue;\n this.preventChange = false;\n }\n else if (isNullOrUndefined(this.isAngular) || !this.isAngular\n || (this.isAngular && !this.preventChange) || (this.isAngular && isNullOrUndefined(this.preventChange))) {\n this.raiseChangeEvent();\n }\n }\n break;\n case 'htmlAttributes':\n {\n this.updateHTMLAttributesToElement();\n this.updateHTMLAttributesToWrapper();\n this.checkAttributes(true);\n if (this.multiline && !isNullOrUndefined(this.textarea)) {\n Input.validateInputType(this.textboxWrapper.container, this.textarea);\n }\n else {\n Input.validateInputType(this.textboxWrapper.container, this.element);\n }\n }\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.respectiveElement);\n break;\n case 'type':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n this.respectiveElement.setAttribute('type', this.type);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n this.raiseChangeEvent();\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.respectiveElement, this.textboxWrapper);\n this.bindClearEvent();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n Input.calculateWidth(this.respectiveElement, this.textboxWrapper.container);\n break;\n case 'autocomplete':\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else {\n this.removeAttributes(['autocomplete']);\n }\n break;\n case 'cssClass':\n Input.updateCssClass(newProp.cssClass, oldProp.cssClass, this.textboxWrapper.container);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n break;\n }\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n TextBox.prototype.getModuleName = function () {\n return 'textbox';\n };\n TextBox.prototype.preRender = function () {\n this.cloneElement = this.element.cloneNode(true);\n this.formElement = closest(this.element, 'form');\n if (!isNullOrUndefined(this.formElement)) {\n this.isForm = true;\n }\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-TEXTBOX') {\n var ejInstance = getValue('ej2_instances', this.element);\n var inputElement = this.multiline ?\n this.createElement('textarea') :\n this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id' && attributeName !== 'class') {\n inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n if (attributeName === 'name') {\n this.element.removeAttribute('name');\n }\n }\n else if (attributeName === 'class') {\n inputElement.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));\n }\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttributesToElement();\n this.checkAttributes(false);\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) && this.element.value !== '') {\n this.setProperties({ value: this.element.value }, true);\n }\n if (this.element.tagName !== 'TEXTAREA') {\n this.element.setAttribute('type', this.type);\n }\n if (this.type === 'text' || (this.element.tagName === 'INPUT' && this.multiline && this.isReact)) {\n this.element.setAttribute('role', 'textbox');\n }\n this.globalize = new Internationalization(this.locale);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('textbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('textbox'));\n }\n if (!this.element.hasAttribute('name')) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (this.element.tagName === 'INPUT' && this.multiline) {\n this.isHiddenInput = true;\n this.textarea = this.createElement('textarea');\n this.element.parentNode.insertBefore(this.textarea, this.element);\n this.element.setAttribute('type', 'hidden');\n this.textarea.setAttribute('name', this.element.getAttribute('name'));\n this.element.removeAttribute('name');\n this.textarea.setAttribute('role', this.element.getAttribute('role'));\n this.element.removeAttribute('role');\n this.textarea.setAttribute('id', getUniqueID('textarea'));\n var apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (var index = 0; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (this.element.hasAttribute(attributeName) && containerAttributes.indexOf(attributeName) < 0 &&\n !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {\n // e-mappinguid attribute is handled for Grid component.\n this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n if (apiAttributes.indexOf(attributeName) < 0) {\n this.element.removeAttribute(attributeName);\n index--;\n }\n }\n }\n }\n };\n TextBox.prototype.checkAttributes = function (isDynamic) {\n var attrs = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (var _i = 0, attrs_1 = attrs; _i < attrs_1.length; _i++) {\n var key = attrs_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'disabled':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'autocomplete':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['autocomplete'] === undefined)) || isDynamic) {\n var autoCompleteTxt = this.element.autocomplete === 'off' ? 'off' : 'on';\n this.setProperties({ autocomplete: autoCompleteTxt }, !isDynamic);\n }\n break;\n case 'value':\n if (((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || isDynamic) && this.element.value !== '') {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n case 'type':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['type'] === undefined)) || isDynamic) {\n this.setProperties({ type: this.element.type }, !isDynamic);\n }\n break;\n }\n }\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n TextBox.prototype.render = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = Input.getInputValidClassList(this.cssClass);\n }\n this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;\n this.textboxWrapper = Input.createInput({\n element: this.respectiveElement,\n floatLabelType: this.floatLabelType,\n properties: {\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValue,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n });\n this.updateHTMLAttributesToWrapper();\n if (this.isHiddenInput) {\n this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);\n }\n this.wireEvents();\n if (!isNullOrUndefined(this.value)) {\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n }\n if (!isNullOrUndefined(this.value)) {\n this.initialValue = this.value;\n this.setInitialValue();\n }\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else if (!isNullOrUndefined(this.textboxOptions) && (this.textboxOptions['autocomplete'] !== undefined)) {\n this.removeAttributes(['autocomplete']);\n }\n this.previousValue = this.value;\n this.inputPreviousValue = this.value;\n this.respectiveElement.defaultValue = this.respectiveElement.value;\n Input.setWidth(this.width, this.textboxWrapper.container);\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder') && !this.element.hasAttribute('aria-label')) {\n this.element.setAttribute('aria-label', 'textbox');\n }\n this.renderComplete();\n };\n TextBox.prototype.updateHTMLAttributesToWrapper = function () {\n Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textboxWrapper.container);\n };\n TextBox.prototype.updateHTMLAttributesToElement = function () {\n Input.updateHTMLAttributesToElement(this.htmlAttributes, this.respectiveElement ? this.respectiveElement :\n (this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea : this.element));\n };\n TextBox.prototype.setInitialValue = function () {\n if (!this.isAngular) {\n this.respectiveElement.setAttribute('value', this.initialValue);\n }\n };\n TextBox.prototype.wireEvents = function () {\n EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);\n EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.respectiveElement, 'keydown', this.keydownHandler, this);\n EventHandler.add(this.respectiveElement, 'input', this.inputHandler, this);\n EventHandler.add(this.respectiveElement, 'change', this.changeHandler, this);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n this.bindClearEvent();\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-autofill') &&\n this.textboxWrapper.container.classList.contains('e-outline')) {\n EventHandler.add((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler, this);\n }\n };\n TextBox.prototype.animationHandler = function () {\n this.textboxWrapper.container.classList.add('e-valid-input');\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n label.classList.add('e-label-top');\n if (label.classList.contains('e-label-bottom')) {\n label.classList.remove('e-label-bottom');\n }\n }\n };\n TextBox.prototype.resetValue = function (value) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.value = value;\n if (value == null && this.textboxWrapper.container.classList.contains('e-valid-input') && !(this.floatLabelType === 'Always' && this.textboxWrapper.container.classList.contains('e-outline'))) {\n this.textboxWrapper.container.classList.remove('e-valid-input');\n }\n this.isProtectedOnChange = prevOnChange;\n };\n TextBox.prototype.resetForm = function () {\n if (this.isAngular) {\n this.resetValue('');\n }\n else {\n this.resetValue(this.initialValue);\n }\n if (!isNullOrUndefined(this.textboxWrapper)) {\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label) && this.floatLabelType !== 'Always') {\n if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {\n label.classList.add('e-label-bottom');\n label.classList.remove('e-label-top');\n }\n else if (this.initialValue !== '') {\n label.classList.add('e-label-top');\n label.classList.remove('e-label-bottom');\n }\n }\n }\n };\n TextBox.prototype.focusHandler = function (args) {\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('focus', eventArgs);\n };\n TextBox.prototype.focusOutHandler = function (args) {\n if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&\n (this.previousValue !== this.value)) {\n this.raiseChangeEvent(args, true);\n }\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('blur', eventArgs);\n };\n TextBox.prototype.keydownHandler = function (args) {\n if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === '') && (this.value === null || this.value === '') && this.respectiveElement.value === '')) {\n this.setProperties({ value: this.respectiveElement.value }, true);\n }\n };\n TextBox.prototype.inputHandler = function (args) {\n var textboxObj = this;\n var eventArgs = {\n event: args,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if (this.isAngular) {\n textboxObj.localChange({ value: this.respectiveElement.value });\n this.preventChange = true;\n }\n if (this.isVue) {\n this.preventChange = true;\n }\n this.trigger('input', eventArgs);\n args.stopPropagation();\n };\n TextBox.prototype.changeHandler = function (args) {\n this.setProperties({ value: this.respectiveElement.value }, true);\n if (this.previousValue !== this.value) {\n this.raiseChangeEvent(args, true);\n }\n args.stopPropagation();\n };\n TextBox.prototype.raiseChangeEvent = function (event, interaction) {\n var eventArgs = {\n event: event,\n value: this.value,\n previousValue: this.previousValue,\n container: this.textboxWrapper.container,\n isInteraction: interaction ? interaction : false,\n isInteracted: interaction ? interaction : false\n };\n this.preventChange = false;\n this.trigger('change', eventArgs);\n this.previousValue = this.value;\n //EJ2CORE-738:For this task we update the textarea value to the input when input tag with multiline is present\n if (this.element.tagName === 'INPUT' && this.multiline && Browser.info.name === 'mozilla') {\n this.element.value = this.respectiveElement.value;\n }\n };\n TextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n if (this.enabled) {\n EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);\n }\n else {\n EventHandler.remove(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler);\n }\n }\n };\n TextBox.prototype.resetInputHandler = function (event) {\n event.preventDefault();\n if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR)) || this.textboxWrapper.container.classList.contains('e-static-clear')) {\n Input.setValue('', this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.setProperties({ value: this.respectiveElement.value }, true);\n var eventArgs = {\n event: event,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.trigger('input', eventArgs);\n this.inputPreviousValue = this.respectiveElement.value;\n this.raiseChangeEvent(event, true);\n if (closest(this.element, 'form')) {\n var element = this.element;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n }\n };\n TextBox.prototype.unWireEvents = function () {\n EventHandler.remove(this.respectiveElement, 'focus', this.focusHandler);\n EventHandler.remove(this.respectiveElement, 'blur', this.focusOutHandler);\n EventHandler.remove(this.respectiveElement, 'keydown', this.keydownHandler);\n EventHandler.remove(this.respectiveElement, 'input', this.inputHandler);\n EventHandler.remove(this.respectiveElement, 'change', this.changeHandler);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-outline') &&\n this.textboxWrapper.container.classList.contains('e-autofill')) {\n EventHandler.remove((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler);\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also, it maintains the initial TextBox element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n TextBox.prototype.destroy = function () {\n this.unWireEvents();\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n if (this.element.tagName === 'INPUT' && this.multiline) {\n detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);\n this.respectiveElement = this.element;\n this.element.removeAttribute('type');\n }\n this.respectiveElement.value = this.respectiveElement.defaultValue;\n this.respectiveElement.classList.remove('e-input');\n this.removeAttributes(['aria-disabled', 'aria-readonly', 'aria-labelledby']);\n if (!isNullOrUndefined(this.textboxWrapper)) {\n this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);\n detach(this.textboxWrapper.container);\n }\n this.textboxWrapper = null;\n Input.destroy({\n element: this.respectiveElement,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n _super.prototype.destroy.call(this);\n };\n /**\n * Adding the icons to the TextBox component.\n *\n * @param { string } position - Specify the icon placement on the TextBox. Possible values are append and prepend.\n * @param { string | string[] } icons - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for TextBox.\n * @returns {void}\n */\n TextBox.prototype.addIcon = function (position, icons) {\n Input.addIcon(position, icons, this.textboxWrapper.container, this.respectiveElement, this.createElement);\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted data.\n */\n TextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Adding the multiple attributes as key-value pair to the TextBox element.\n *\n * @param {string} attributes - Specifies the attributes to be add to TextBox element.\n * @returns {void}\n */\n TextBox.prototype.addAttributes = function (attributes) {\n for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'class') {\n this.respectiveElement.classList.add(attributes[\"\" + key]);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attributes[\"\" + key] }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {\n this.respectiveElement.setAttribute(key, attributes[\"\" + key]);\n }\n else {\n this.respectiveElement.setAttribute(key, attributes[\"\" + key]);\n }\n }\n };\n /**\n * Removing the multiple attributes as key-value pair to the TextBox element.\n *\n * @param { string[] } attributes - Specifies the attributes name to be removed from TextBox element.\n * @returns {void}\n */\n TextBox.prototype.removeAttributes = function (attributes) {\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var key = attributes_1[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: true }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: false }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: null }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else {\n this.respectiveElement.removeAttribute(key);\n }\n }\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n TextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.respectiveElement && this.enabled) {\n this.respectiveElement.focus();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n addClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n TextBox.prototype.focusOut = function () {\n if (document.activeElement === this.respectiveElement && this.enabled) {\n this.respectiveElement.blur();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n removeClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n __decorate$6([\n Property('text')\n ], TextBox.prototype, \"type\", void 0);\n __decorate$6([\n Property(false)\n ], TextBox.prototype, \"readonly\", void 0);\n __decorate$6([\n Property(null)\n ], TextBox.prototype, \"value\", void 0);\n __decorate$6([\n Property('Never')\n ], TextBox.prototype, \"floatLabelType\", void 0);\n __decorate$6([\n Property('')\n ], TextBox.prototype, \"cssClass\", void 0);\n __decorate$6([\n Property(null)\n ], TextBox.prototype, \"placeholder\", void 0);\n __decorate$6([\n Property('on')\n ], TextBox.prototype, \"autocomplete\", void 0);\n __decorate$6([\n Property({})\n ], TextBox.prototype, \"htmlAttributes\", void 0);\n __decorate$6([\n Property(false)\n ], TextBox.prototype, \"multiline\", void 0);\n __decorate$6([\n Property(true)\n ], TextBox.prototype, \"enabled\", void 0);\n __decorate$6([\n Property(false)\n ], TextBox.prototype, \"showClearButton\", void 0);\n __decorate$6([\n Property(false)\n ], TextBox.prototype, \"enablePersistence\", void 0);\n __decorate$6([\n Property(null)\n ], TextBox.prototype, \"width\", void 0);\n __decorate$6([\n Event()\n ], TextBox.prototype, \"created\", void 0);\n __decorate$6([\n Event()\n ], TextBox.prototype, \"destroyed\", void 0);\n __decorate$6([\n Event()\n ], TextBox.prototype, \"change\", void 0);\n __decorate$6([\n Event()\n ], TextBox.prototype, \"blur\", void 0);\n __decorate$6([\n Event()\n ], TextBox.prototype, \"focus\", void 0);\n __decorate$6([\n Event()\n ], TextBox.prototype, \"input\", void 0);\n TextBox = __decorate$6([\n NotifyPropertyChanges\n ], TextBox);\n return TextBox;\n}(Component));\n\nvar __extends$7 = (undefined && undefined.__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$7 = (undefined && undefined.__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};\nvar HIDE_CLEAR$1 = 'e-clear-icon-hide';\nvar AUTO_WIDTH = 'e-auto-width';\nvar RESIZE_X = 'e-resize-x';\nvar RESIZE_Y = 'e-resize-y';\nvar RESIZE_XY = 'e-resize-xy';\nvar RESIZE_NONE = 'e-resize-none';\nvar TextArea = /** @__PURE__ @class */ (function (_super) {\n __extends$7(TextArea, _super);\n function TextArea(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n _this.isForm = false;\n _this.inputPreviousValue = null;\n _this.textareaOptions = options;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {TextAreaModel} newProp - Returns the dynamic property value of the component.\n * @param {TextAreaModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TextArea.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 'floatLabelType':\n Input.removeFloating(this.textareaWrapper);\n Input.addFloating(this.element, this.floatLabelType, this.placeholder);\n if (this.floatLabelType === 'Never') {\n this.element.removeAttribute('aria-labelledby');\n }\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);\n this.bindClearEvent();\n if (!this.enabled && this.resizeMode !== 'None') {\n this.element.classList.remove(this.getCurrentResizeClass(this.resizeMode));\n this.element.classList.add(RESIZE_NONE);\n }\n else {\n this.element.classList.add(this.getCurrentResizeClass(this.resizeMode));\n }\n break;\n case 'width':\n if (this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') {\n this.setElementWidth(newProp.width);\n this.textareaWrapper.container.classList.add(AUTO_WIDTH);\n }\n else {\n if (this.textareaWrapper.container.classList.contains(AUTO_WIDTH)) {\n this.textareaWrapper.container.classList.remove(AUTO_WIDTH);\n }\n Input.setWidth(newProp.width, this.textareaWrapper.container);\n }\n break;\n case 'value':\n {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (!Input.isBlank(this.value)) {\n this.value = this.value.toString();\n }\n this.isProtectedOnChange = prevOnChange;\n Input.setValue(this.value, this.element, this.floatLabelType, this.showClearButton);\n this.inputPreviousValue = this.element.value;\n /* istanbul ignore next */\n if ((this.isAngular || this.isVue) && this.preventChange === true) {\n this.previousValue = this.isAngular ? this.value : this.previousValue;\n this.preventChange = false;\n }\n else if (isNullOrUndefined(this.isAngular) || !this.isAngular\n || (this.isAngular && !this.preventChange) || (this.isAngular && isNullOrUndefined(this.preventChange))) {\n this.raiseChangeEvent();\n }\n }\n break;\n case 'htmlAttributes':\n {\n this.updateHTMLAttributesToElement();\n this.updateHTMLAttributesToWrapper();\n this.checkAttributes(true);\n Input.validateInputType(this.textareaWrapper.container, this.element);\n }\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.element);\n if (this.readonly) {\n this.element.setAttribute('aria-readonly', 'true');\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.element, this.textareaWrapper);\n this.bindClearEvent();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.textareaWrapper.container]);\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.element);\n Input.calculateWidth(this.element, this.textareaWrapper.container);\n break;\n case 'cssClass':\n Input.updateCssClass(newProp.cssClass, oldProp.cssClass, this.textareaWrapper.container);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.element);\n break;\n case 'rows':\n if (this.rows) {\n this.element.setAttribute('rows', this.rows.toString());\n }\n break;\n case 'cols':\n if (this.cols) {\n this.element.setAttribute('cols', this.cols.toString());\n if (this.width == null) {\n this.textareaWrapper.container.classList.add(AUTO_WIDTH);\n }\n }\n break;\n case 'maxLength':\n if (this.maxLength) {\n this.element.setAttribute('maxlength', this.maxLength.toString());\n }\n break;\n case 'resizeMode':\n if (this.enabled) {\n if (this.element.classList.contains(this.getCurrentResizeClass(oldProp.resizeMode))) {\n this.element.classList.remove(this.getCurrentResizeClass(oldProp.resizeMode));\n }\n this.element.classList.add(this.getCurrentResizeClass(this.resizeMode));\n if (this.element.style.width && (this.resizeMode === 'None' || this.resizeMode === 'Vertical')) {\n Input.setWidth(this.element.style.width, this.textareaWrapper.container);\n }\n else {\n var currentWidth = this.element.offsetWidth;\n this.element.style.width = currentWidth + 'px';\n if (this.textareaWrapper.container.style.width) {\n this.textareaWrapper.container.style.width = '';\n }\n }\n this.setWrapperWidth();\n }\n break;\n }\n }\n };\n TextArea.prototype.preRender = function () {\n this.formElement = closest(this.element, 'form');\n if (!isNullOrUndefined(this.formElement)) {\n this.isForm = true;\n }\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-TEXTAREA' || this.element.tagName === 'EJS-SMARTTEXTAREA') {\n var ejInstance = getValue('ej2_instances', this.element);\n var inputElement = this.createElement('textarea');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id' && attributeName !== 'class') {\n inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n if (attributeName === 'name') {\n this.element.removeAttribute('name');\n }\n }\n else if (attributeName === 'class') {\n inputElement.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));\n }\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttributesToElement();\n this.checkAttributes(false);\n if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['value'] === undefined)) && this.element.value !== '') {\n this.setProperties({ value: this.element.value }, true);\n }\n this.globalize = new Internationalization(this.locale);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('textarea', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('textbox'));\n }\n if (!this.element.hasAttribute('name')) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (this.rows) {\n this.element.setAttribute('rows', this.rows.toString());\n }\n if (this.cols) {\n this.element.setAttribute('cols', this.cols.toString());\n }\n if (this.maxLength) {\n this.element.setAttribute('maxlength', this.maxLength.toString());\n }\n if (!this.element.style.resize && this.enabled) {\n this.element.classList.add(this.getCurrentResizeClass(this.resizeMode));\n }\n if (this.enabled) {\n this.element.setAttribute('aria-multiline', 'true');\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n TextArea.prototype.render = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = Input.getInputValidClassList(this.cssClass);\n }\n this.textareaWrapper = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValue,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n });\n this.updateHTMLAttributesToWrapper();\n this.wireEvents();\n if (!isNullOrUndefined(this.value)) {\n Input.setValue(this.value, this.element, this.floatLabelType, this.showClearButton);\n }\n if (!isNullOrUndefined(this.value)) {\n this.initialValue = this.value;\n if (!this.isAngular) {\n this.element.setAttribute('value', this.initialValue);\n }\n }\n this.previousValue = this.value;\n this.inputPreviousValue = this.value;\n this.element.defaultValue = this.element.value;\n Input.setWidth(this.width, this.textareaWrapper.container);\n this.setWrapperWidth();\n this.renderComplete();\n };\n TextArea.prototype.getModuleName = function () {\n return 'textarea';\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string} - Returns the string value.\n */\n TextArea.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n TextArea.prototype.checkAttributes = function (isDynamic) {\n var attrs = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['placeholder', 'disabled', 'value', 'readonly'];\n for (var _i = 0, attrs_1 = attrs; _i < attrs_1.length; _i++) {\n var key = attrs_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'disabled':\n if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if (((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['value'] === undefined)) || isDynamic) && this.element.value !== '') {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n }\n }\n }\n };\n TextArea.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keydownHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n this.bindClearEvent();\n };\n TextArea.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keydown', this.keydownHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also, it maintains the initial TextArea element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n TextArea.prototype.destroy = function () {\n this.unWireEvents();\n if (this.showClearButton) {\n this.clearButton = document.getElementsByClassName('e-clear-icon')[0];\n }\n this.element.value = this.element.defaultValue;\n this.element.classList.remove('e-input', RESIZE_X, RESIZE_Y, RESIZE_XY, RESIZE_NONE);\n this.removeAttributes(['aria-disabled', 'aria-readonly', 'aria-labelledby', 'aria-multiline']);\n if (!isNullOrUndefined(this.textareaWrapper)) {\n this.textareaWrapper.container.insertAdjacentElement('afterend', this.element);\n detach(this.textareaWrapper.container);\n }\n this.textareaWrapper = null;\n Input.destroy({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n }, this.clearButton);\n this.formElement = null;\n _super.prototype.destroy.call(this);\n };\n TextArea.prototype.focusHandler = function (args) {\n var eventArgs = {\n container: this.textareaWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('focus', eventArgs);\n };\n TextArea.prototype.focusOutHandler = function (args) {\n if (!(this.previousValue === null && this.value === null) &&\n (this.previousValue !== this.value)) {\n this.raiseChangeEvent(args, true);\n }\n var eventArgs = {\n container: this.textareaWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('blur', eventArgs);\n };\n TextArea.prototype.keydownHandler = function (args) {\n if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === '') && (this.value === null || this.value === '') && this.element.value === '')) {\n this.setProperties({ value: this.element.value }, true);\n }\n };\n TextArea.prototype.inputHandler = function (args) {\n var textareaObj = this;\n var eventArgs = {\n event: args,\n value: this.element.value,\n previousValue: this.inputPreviousValue,\n container: this.textareaWrapper.container\n };\n this.inputPreviousValue = this.element.value;\n /* istanbul ignore next */\n if (this.isAngular) {\n textareaObj.localChange({ value: this.element.value });\n this.preventChange = true;\n }\n if (this.isVue) {\n this.preventChange = true;\n }\n this.trigger('input', eventArgs);\n args.stopPropagation();\n };\n TextArea.prototype.changeHandler = function (args) {\n this.setProperties({ value: this.element.value }, true);\n if (this.previousValue !== this.value) {\n this.raiseChangeEvent(args, true);\n }\n args.stopPropagation();\n };\n TextArea.prototype.raiseChangeEvent = function (event, interaction) {\n var eventArgs = {\n event: event,\n value: this.value,\n previousValue: this.previousValue,\n container: this.textareaWrapper.container,\n isInteraction: interaction ? interaction : false,\n isInteracted: interaction ? interaction : false\n };\n this.preventChange = false;\n this.trigger('change', eventArgs);\n this.previousValue = this.value;\n };\n TextArea.prototype.updateHTMLAttributesToWrapper = function () {\n Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textareaWrapper.container);\n };\n TextArea.prototype.updateHTMLAttributesToElement = function () {\n Input.updateHTMLAttributesToElement(this.htmlAttributes, this.element);\n };\n TextArea.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n if (this.enabled) {\n EventHandler.add(this.textareaWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);\n }\n else {\n EventHandler.remove(this.textareaWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler);\n }\n }\n };\n TextArea.prototype.resetInputHandler = function (event) {\n event.preventDefault();\n if (!(this.textareaWrapper.clearButton.classList.contains(HIDE_CLEAR$1)) || this.textareaWrapper.container.classList.contains('e-static-clear')) {\n Input.setValue('', this.element, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: this.element.value }, true);\n }\n var eventArgs = {\n event: event,\n value: this.element.value,\n previousValue: this.inputPreviousValue,\n container: this.textareaWrapper.container\n };\n this.trigger('input', eventArgs);\n this.inputPreviousValue = this.element.value;\n this.raiseChangeEvent(event, true);\n if (closest(this.element, 'form')) {\n var element = this.element;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n /**\n * Adding the multiple attributes as key-value pair to the TextArea element.\n *\n * @param {string} attributes - Specifies the attributes to be add to TextArea element.\n * @returns {void}\n */\n TextArea.prototype.addAttributes = function (attributes) {\n for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n Input.setReadonly(this.readonly, this.element);\n }\n else if (key === 'class') {\n this.element.classList.add(attributes[\"\" + key]);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attributes[\"\" + key] }, true);\n Input.setPlaceholder(this.placeholder, this.element);\n }\n else {\n this.element.setAttribute(key, attributes[\"\" + key]);\n }\n }\n };\n /**\n * Removing the multiple attributes as key-value pair to the TextArea element.\n *\n * @param { string[] } attributes - Specifies the attributes name to be removed from TextArea element.\n * @returns {void}\n */\n TextArea.prototype.removeAttributes = function (attributes) {\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var key = attributes_1[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: true }, true);\n Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: false }, true);\n Input.setReadonly(this.readonly, this.element);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: null }, true);\n Input.setPlaceholder(this.placeholder, this.element);\n }\n else {\n this.element.removeAttribute(key);\n }\n }\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n TextArea.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n if (this.textareaWrapper.container.classList.contains('e-input-group')\n || this.textareaWrapper.container.classList.contains('e-outline')\n || this.textareaWrapper.container.classList.contains('e-filled')) {\n addClass([this.textareaWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n TextArea.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n if (this.textareaWrapper.container.classList.contains('e-input-group')\n || this.textareaWrapper.container.classList.contains('e-outline')\n || this.textareaWrapper.container.classList.contains('e-filled')) {\n removeClass([this.textareaWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n /**\n * Sets up the width for the textarea wrapper.\n *\n * @returns {void}\n */\n TextArea.prototype.setWrapperWidth = function () {\n if (this.enabled && ((this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') || (this.cols || this.element.getAttribute('cols')))) {\n if (this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') {\n if (this.textareaWrapper.container.style.width) {\n this.setElementWidth(this.textareaWrapper.container.style.width);\n this.textareaWrapper.container.style.width = '';\n this.textareaWrapper.container.classList.add(AUTO_WIDTH);\n }\n }\n this.textareaWrapper.container.classList.add(AUTO_WIDTH);\n }\n else {\n if (this.textareaWrapper.container.classList.contains(AUTO_WIDTH)) {\n this.textareaWrapper.container.classList.remove(AUTO_WIDTH);\n }\n }\n };\n TextArea.prototype.resetForm = function () {\n if (this.isAngular) {\n this.resetValue('');\n }\n else {\n this.resetValue(this.initialValue);\n }\n if (!isNullOrUndefined(this.textareaWrapper)) {\n var label = this.textareaWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label) && this.floatLabelType !== 'Always') {\n if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {\n label.classList.add('e-label-bottom');\n label.classList.remove('e-label-top');\n }\n else if (this.initialValue !== '') {\n label.classList.add('e-label-top');\n label.classList.remove('e-label-bottom');\n }\n }\n }\n };\n TextArea.prototype.resetValue = function (value) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.value = value;\n if (value == null && this.textareaWrapper.container.classList.contains('e-valid-input') && !(this.floatLabelType === 'Always' && this.textareaWrapper.container.classList.contains('e-outline'))) {\n this.textareaWrapper.container.classList.remove('e-valid-input');\n }\n this.isProtectedOnChange = prevOnChange;\n };\n TextArea.prototype.setElementWidth = function (width) {\n if (typeof width === 'number') {\n this.element.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.element.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n };\n TextArea.prototype.getCurrentResizeClass = function (resizeMode) {\n return resizeMode === 'None' ? RESIZE_NONE : (resizeMode === 'Both' ? RESIZE_XY : resizeMode === 'Horizontal' ? RESIZE_X : RESIZE_Y);\n };\n __decorate$7([\n Property(false)\n ], TextArea.prototype, \"readonly\", void 0);\n __decorate$7([\n Property(null)\n ], TextArea.prototype, \"value\", void 0);\n __decorate$7([\n Property('Never')\n ], TextArea.prototype, \"floatLabelType\", void 0);\n __decorate$7([\n Property('')\n ], TextArea.prototype, \"cssClass\", void 0);\n __decorate$7([\n Property(null)\n ], TextArea.prototype, \"placeholder\", void 0);\n __decorate$7([\n Property({})\n ], TextArea.prototype, \"htmlAttributes\", void 0);\n __decorate$7([\n Property(true)\n ], TextArea.prototype, \"enabled\", void 0);\n __decorate$7([\n Property(false)\n ], TextArea.prototype, \"showClearButton\", void 0);\n __decorate$7([\n Property(false)\n ], TextArea.prototype, \"enablePersistence\", void 0);\n __decorate$7([\n Property(null)\n ], TextArea.prototype, \"width\", void 0);\n __decorate$7([\n Property('Both')\n ], TextArea.prototype, \"resizeMode\", void 0);\n __decorate$7([\n Property(null)\n ], TextArea.prototype, \"maxLength\", void 0);\n __decorate$7([\n Property(null)\n ], TextArea.prototype, \"cols\", void 0);\n __decorate$7([\n Property(null)\n ], TextArea.prototype, \"rows\", void 0);\n __decorate$7([\n Event()\n ], TextArea.prototype, \"created\", void 0);\n __decorate$7([\n Event()\n ], TextArea.prototype, \"destroyed\", void 0);\n __decorate$7([\n Event()\n ], TextArea.prototype, \"change\", void 0);\n __decorate$7([\n Event()\n ], TextArea.prototype, \"blur\", void 0);\n __decorate$7([\n Event()\n ], TextArea.prototype, \"focus\", void 0);\n __decorate$7([\n Event()\n ], TextArea.prototype, \"input\", void 0);\n TextArea = __decorate$7([\n NotifyPropertyChanges\n ], TextArea);\n return TextArea;\n}(Component));\n\nvar CaretPositionHelper = /** @__PURE__ @class */ (function () {\n function CaretPositionHelper() {\n }\n CaretPositionHelper.createStyledDiv = function (target, htmlContent) {\n var div = document.createElement('div');\n var styles = {\n position: 'absolute',\n left: -9999,\n top: 0,\n zIndex: -2000\n };\n this.properties.forEach(function (prop) {\n styles[\"\" + prop] = getComputedStyle(target)[prop];\n });\n Object.keys(styles).forEach(function (key) {\n div.style[\"\" + key] = styles[\"\" + key];\n });\n var scrollbarWidth = target.offsetWidth - target.clientWidth;\n div.style.width = (target.clientWidth + scrollbarWidth) + 'px';\n div.innerHTML = htmlContent;\n if (target && target.parentNode) {\n target.parentNode.insertBefore(div, target.nextSibling);\n }\n return div;\n };\n CaretPositionHelper.createCaretMarker = function (target, htmlContent) {\n var div = this.createStyledDiv(target, htmlContent);\n var marker = div.ownerDocument.getElementById('caret-position-marker');\n var position = {\n left: marker.offsetLeft,\n top: marker.offsetTop,\n height: marker.offsetHeight\n };\n if (div && div.parentNode) {\n div.parentNode.removeChild(div);\n }\n return position;\n };\n CaretPositionHelper.escapeHtml = function (value) {\n return value.replace(/<|>|`|\"|&/g, '?').replace(/\\r\\n|\\r|\\n/g, '
');\n };\n CaretPositionHelper.getCaretPosition = function (target) {\n var position = target.selectionStart || 0;\n var textBeforeCaret = target.value.slice(0, position);\n var textAfterCaret = target.value.slice(position);\n var content = \"\" + this.escapeHtml(textBeforeCaret) + \"\";\n content += '|';\n content += \"\" + this.escapeHtml(textAfterCaret) + \"\";\n var rect = this.createCaretMarker(target, content);\n rect.pos = position;\n return rect;\n };\n CaretPositionHelper.adjustScrollToCaretPosition = function (element) {\n var caretPosition = this.getCaretPosition(element);\n var lineHeight = parseFloat(window.getComputedStyle(element).lineHeight);\n if (caretPosition.top > element.clientHeight + element.scrollTop - lineHeight) {\n element.scrollTop = caretPosition.top - element.clientHeight + lineHeight;\n }\n };\n CaretPositionHelper.getTextAreaPosition = function (element) {\n var computedStyle = window.getComputedStyle(element);\n var position = this.getCaretPosition(element);\n return {\n top: position.top + parseFloat(computedStyle.borderTopWidth) + element.offsetTop - element.scrollTop,\n left: position.left + parseFloat(computedStyle.borderLeftWidth) + element.offsetLeft - element.scrollLeft - 0.25,\n height: position.height,\n elemStyle: computedStyle\n };\n };\n CaretPositionHelper.insertCharacter = function (element, text) {\n var start = element.selectionStart;\n var end = element.selectionEnd;\n element.value = element.value.substring(0, start) + text + element.value.substring(end);\n start += text.length;\n element.setSelectionRange(start, start);\n };\n CaretPositionHelper.properties = [\n 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopStyle',\n 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderTopWidth',\n 'boxSizing', 'fontFamily', 'fontSize', 'fontWeight', 'height', 'letterSpacing',\n 'lineHeight', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop',\n 'outlineWidth', 'overflow', 'overflowX', 'overflowY', 'paddingBottom',\n 'paddingLeft', 'paddingRight', 'paddingTop', 'textAlign', 'textOverflow',\n 'textTransform', 'whiteSpace', 'wordBreak', 'wordWrap', 'width'\n ];\n return CaretPositionHelper;\n}());\n\nvar __extends$8 = (undefined && undefined.__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$8 = (undefined && undefined.__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};\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (undefined && undefined.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\nvar ChatMessageRole;\n(function (ChatMessageRole) {\n ChatMessageRole[\"System\"] = \"system\";\n ChatMessageRole[\"User\"] = \"user\";\n ChatMessageRole[\"Assistant\"] = \"assistant\";\n})(ChatMessageRole || (ChatMessageRole = {}));\nvar SmartTextArea = /** @__PURE__ @class */ (function (_super) {\n __extends$8(SmartTextArea, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {SmartTextArea} options - Specifies Smart text area model\n * @param {string | HTMLTextAreaElement} element - Specifies target element\n */\n function SmartTextArea(options, element) {\n return _super.call(this, options, element) || this;\n }\n SmartTextArea.prototype.render = function () {\n _super.prototype.render.call(this);\n if (!(this.element instanceof HTMLTextAreaElement)) {\n return;\n }\n this.textArea = this.element;\n var smartTextArea = createElement('smart-textarea');\n smartTextArea.classList.add('e-smart-textarea');\n this.textArea.after(smartTextArea);\n if (this.showSuggestionOnPopup !== 'None') {\n var suggestionState = this.showSuggestionOnPopup === 'Enable' ? 'false' : 'true';\n this.textArea.setAttribute('data-inline-suggestions', suggestionState);\n }\n this.suggestionDisplay = this.shouldShowInlineSuggestions(this.textArea) ?\n new InlineSuggestion(smartTextArea, this.textArea) : new ContextSuggestion(smartTextArea, this.textArea);\n };\n SmartTextArea.prototype.wireEvents = function () {\n var _this = this;\n _super.prototype.wireEvents.call(this);\n EventHandler.add(this.element, 'keyup', this.handleKeyUp, this);\n EventHandler.add(this.element, 'keydown', this.handleKeyDown, this);\n EventHandler.add(this.element, 'mousedown', this.removeExistingOrPendingSuggestion, this);\n EventHandler.add(this.element, 'focusout', this.removeExistingOrPendingSuggestion, this);\n this.element.addEventListener('scroll', (function () { return _this.suggestionDisplay.reject(); }), {\n passive: true\n });\n };\n SmartTextArea.prototype.unWireEvents = function () {\n var _this = this;\n _super.prototype.unWireEvents.call(this);\n EventHandler.remove(this.element, 'keyup', this.handleKeyUp);\n EventHandler.remove(this.element, 'keydown', this.handleKeyDown);\n EventHandler.remove(this.element, 'mousedown', this.removeExistingOrPendingSuggestion);\n EventHandler.remove(this.element, 'focusout', this.removeExistingOrPendingSuggestion);\n this.element.removeEventListener('scroll', (function () { return _this.suggestionDisplay.reject(); }));\n };\n SmartTextArea.prototype.keydownHandler = function () {\n // Overridden to prevent default behavior\n };\n SmartTextArea.prototype.shouldShowInlineSuggestions = function (textArea) {\n var inlineSuggestions = textArea.getAttribute('data-inline-suggestions');\n if (inlineSuggestions) {\n return inlineSuggestions.toLowerCase() === 'true';\n }\n return !('ontouchstart' in window);\n };\n SmartTextArea.prototype.handleKeyDown = function (event) {\n switch (event.key) {\n case 'Tab':\n if (this.suggestionDisplay.isShowing()) {\n this.suggestionDisplay.accept();\n event.preventDefault();\n }\n break;\n case 'Alt':\n case 'Control':\n case 'Shift':\n case 'Command':\n break;\n default:\n if (this.suggestionDisplay.isShowing() && this.suggestionDisplay.currentSuggestion.startsWith(event.key)) {\n CaretPositionHelper.insertCharacter(this.textArea, event.key);\n event.preventDefault();\n this.suggestionDisplay.show(this.suggestionDisplay.currentSuggestion.substring(event.key.length));\n CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);\n }\n else {\n this.removeExistingOrPendingSuggestion();\n }\n break;\n }\n };\n SmartTextArea.prototype.handleKeyUp = function () {\n var _this = this;\n if (!this.suggestionDisplay.isShowing()) {\n clearTimeout(this.typingDebounceTimeout);\n this.typingDebounceTimeout = setTimeout(function () { return _this.handleTypingPaused(); }, 350);\n }\n };\n SmartTextArea.prototype.handleTypingPaused = function () {\n return __awaiter(this, void 0, void 0, function () {\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (document.activeElement !== this.textArea) {\n return [2 /*return*/];\n }\n if (!(this.textArea.selectionStart === this.textArea.selectionEnd &&\n (this.textArea.selectionStart === this.textArea.value.length ||\n this.textArea.value[this.textArea.selectionStart] === '\\n'))) return [3 /*break*/, 2];\n return [4 /*yield*/, this.requestSuggestionAsync()];\n case 1:\n _a.sent();\n _a.label = 2;\n case 2: return [2 /*return*/];\n }\n });\n });\n };\n SmartTextArea.prototype.removeExistingOrPendingSuggestion = function () {\n clearTimeout(this.typingDebounceTimeout);\n if (this.pendingSuggestionAbort) {\n this.pendingSuggestionAbort.abort();\n this.pendingSuggestionAbort = null;\n }\n this.suggestionDisplay.reject();\n };\n SmartTextArea.prototype.createSuggestionPrompt = function (textBefore, textAfter) {\n var stringBuilder = 'Predict what text the user in the given ROLE would insert at the cursor position indicated by ^^^.\\nOnly give predictions for which you have' +\n ' an EXTREMELY high confidence that the user would insert that EXACT text.\\nDo not make up new information. If you are not sure, ' +\n 'just reply with NO_PREDICTION.\\n\\nRULES:\\n1. Reply with OK:, then in square brackets the predicted text, then END_INSERTION, and no other output.\\n2. ' +\n 'When a specific value or quantity cannot be inferred and would need to be provided, use the word NEED_INFO.\\n3. ' +\n 'If there is not enough information to predict any words that the user would type next, just reply with the word NO_PREDICTION.' +\n '\\n4. NEVER invent new information. If you can not be sure what the user is about to type, ALWAYS stop the prediction with END_INSERTION.';\n var userPhrases = this.UserPhrases;\n if (userPhrases && userPhrases.length > 0) {\n stringBuilder += '\\nAlways try to use variations on the following phrases as part of the predictions:\\n';\n for (var _i = 0, userPhrases_1 = userPhrases; _i < userPhrases_1.length; _i++) {\n var phrase = userPhrases_1[_i];\n stringBuilder += \"- \" + phrase + \"\\n\";\n }\n }\n var chatMessageList = [\n { role: ChatMessageRole.System, content: stringBuilder },\n { role: ChatMessageRole.User, content: 'ROLE: Family member sending a text\\nUSER_TEXT: Hey, it is a nice day - the weather is ^^^' },\n { role: ChatMessageRole.Assistant, content: 'OK:[great!]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Customer service assistant\\nUSER_TEXT: You can find more information on^^^\\n\\nAlternatively, phone us.' },\n { role: ChatMessageRole.Assistant, content: 'OK:[ our website at NEED_INFO]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Casual\\nUSER_TEXT: Oh I see!\\n\\nWell sure thing, we can' },\n { role: ChatMessageRole.Assistant, content: 'OK:[ help you out with that!]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Storyteller\\nUSER_TEXT: Sir Digby Chicken Caesar, also know^^^' },\n { role: ChatMessageRole.Assistant, content: 'OK:[n as NEED_INFO]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Customer support agent\\nUSER_TEXT: Goodbye for now.^^^' },\n { role: ChatMessageRole.Assistant, content: 'NO_PREDICTION END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Pirate\\nUSER_TEXT: Have you found^^^' },\n { role: ChatMessageRole.Assistant, content: 'OK:[ the treasure, me hearties?]END_INSERTION' },\n { role: ChatMessageRole.User, content: \"ROLE: \" + this.userRole + \"\\nUSER_TEXT: \" + textBefore + \"^^^\" + textAfter }\n ];\n return {\n messages: chatMessageList,\n temperature: 0.0,\n maxTokens: 400,\n stopSequences: ['END_INSERTION', 'NEED_INFO'],\n frequencyPenalty: 0.0,\n presencePenalty: 0.0\n };\n };\n SmartTextArea.prototype.requestSuggestionAsync = function () {\n return __awaiter(this, void 0, void 0, function () {\n var requestDetails, suggestionData, chatConfig, insertSuggestion, response;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (this.pendingSuggestionAbort) {\n this.pendingSuggestionAbort.abort();\n return [2 /*return*/];\n }\n this.pendingSuggestionAbort = new AbortController();\n requestDetails = {\n textAreaValue: this.textArea.value,\n cursorPosition: this.textArea.selectionStart\n };\n suggestionData = {\n textBefore: requestDetails.textAreaValue.substring(0, requestDetails.cursorPosition),\n textAfter: requestDetails.textAreaValue.substring(requestDetails.cursorPosition)\n };\n chatConfig = this.createSuggestionPrompt(suggestionData.textBefore, suggestionData.textAfter);\n if (!(typeof this.aiSuggestionHandler === 'function')) return [3 /*break*/, 2];\n return [4 /*yield*/, this.aiSuggestionHandler(chatConfig)];\n case 1:\n response = _a.sent();\n insertSuggestion = this.validateSuggestion(response, suggestionData.textBefore);\n _a.label = 2;\n case 2:\n if (insertSuggestion && requestDetails.textAreaValue === this.textArea.value &&\n requestDetails.cursorPosition === this.textArea.selectionStart) {\n if (!insertSuggestion.endsWith(' ')) {\n insertSuggestion += ' ';\n }\n this.suggestionDisplay.show(insertSuggestion);\n }\n return [2 /*return*/];\n }\n });\n });\n };\n SmartTextArea.prototype.validateSuggestion = function (response, textBefore) {\n var suggestion;\n if (typeof response !== 'string' || response.length <= 5 || response.indexOf('OK:[') !== 0) {\n return '';\n }\n var endIndex = this.indexOfAny(response, ['.', '?', '!']);\n if (endIndex > 0 && response.length > endIndex + 1 && response[endIndex + 1] === ' ') {\n response = response.substring(0, endIndex + 1);\n }\n suggestion = response.substring(4).replace(/[\\]\\s]+$/, '');\n if (textBefore.length > 0 && textBefore[textBefore.length - 1] === ' ') {\n suggestion = suggestion.replace(/^\\s+/, '');\n }\n return suggestion;\n };\n SmartTextArea.prototype.indexOfAny = function (str, chars) {\n for (var i = 0; i < str.length; i++) {\n if (chars.indexOf(str[\"\" + i]) !== -1) {\n return i;\n }\n }\n return -1;\n };\n SmartTextArea.prototype.getModuleName = function () {\n return 'smarttextarea';\n };\n SmartTextArea.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.textArea = null;\n this.suggestionDisplay = null;\n this.typingDebounceTimeout = null;\n };\n __decorate$8([\n Property('')\n ], SmartTextArea.prototype, \"userRole\", void 0);\n __decorate$8([\n Property([])\n ], SmartTextArea.prototype, \"UserPhrases\", void 0);\n __decorate$8([\n Property()\n ], SmartTextArea.prototype, \"aiSuggestionHandler\", void 0);\n __decorate$8([\n Property('None')\n ], SmartTextArea.prototype, \"showSuggestionOnPopup\", void 0);\n return SmartTextArea;\n}(TextArea));\nvar InlineSuggestion = /** @__PURE__ @class */ (function () {\n function InlineSuggestion(smartTextArea, textArea) {\n this.owner = smartTextArea;\n this.textArea = textArea;\n this.latestSuggestionText = '';\n this.suggestionStartPos = null;\n this.suggestionEndPos = null;\n this.virtualCaret = null;\n this.originalValueProperty = this.getOriginalValueProperty(textArea, 'value');\n }\n Object.defineProperty(InlineSuggestion.prototype, \"value\", {\n get: function () {\n var value = this.originalValueProperty.get.call(this.textArea);\n return this.isShowing() ? value.substring(0, this.suggestionStartPos) + value.substring(this.suggestionEndPos) : value;\n },\n set: function (newValue) {\n this.originalValueProperty.set.call(this.textArea, newValue);\n },\n enumerable: true,\n configurable: true\n });\n InlineSuggestion.prototype.getOriginalValueProperty = function (obj, property) {\n while (obj) {\n var descriptor = Object.getOwnPropertyDescriptor(obj, property);\n if (descriptor) {\n return descriptor;\n }\n obj = Object.getPrototypeOf(obj);\n }\n throw new Error(\"Property \" + property + \" not found on object or its prototype chain\");\n };\n Object.defineProperty(InlineSuggestion.prototype, \"valueIncludingSuggestion\", {\n get: function () {\n return this.originalValueProperty.get.call(this.textArea);\n },\n set: function (newValue) {\n this.originalValueProperty.set.call(this.textArea, newValue);\n },\n enumerable: true,\n configurable: true\n });\n InlineSuggestion.prototype.isShowing = function () {\n return this.suggestionStartPos !== null;\n };\n InlineSuggestion.prototype.show = function (suggestionText) {\n this.latestSuggestionText = suggestionText;\n this.suggestionStartPos = this.textArea.selectionStart;\n this.suggestionEndPos = this.suggestionStartPos + suggestionText.length;\n this.textArea.setAttribute('data-suggestion-visible', '');\n this.valueIncludingSuggestion = this.valueIncludingSuggestion.substring(0, this.suggestionStartPos) +\n suggestionText +\n this.valueIncludingSuggestion.substring(this.suggestionStartPos);\n this.textArea.setSelectionRange(this.suggestionStartPos, this.suggestionEndPos);\n if (!this.virtualCaret) {\n this.virtualCaret = new VirtualCaret(this.owner, this.textArea);\n }\n this.virtualCaret.show();\n };\n Object.defineProperty(InlineSuggestion.prototype, \"currentSuggestion\", {\n get: function () {\n return this.latestSuggestionText;\n },\n enumerable: true,\n configurable: true\n });\n InlineSuggestion.prototype.accept = function () {\n this.textArea.setSelectionRange(this.suggestionEndPos, this.suggestionEndPos);\n this.suggestionStartPos = null;\n this.suggestionEndPos = null;\n if (this.virtualCaret) {\n this.virtualCaret.hide();\n }\n this.textArea.removeAttribute('data-suggestion-visible');\n CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);\n };\n InlineSuggestion.prototype.reject = function () {\n if (!this.isShowing()) {\n return;\n }\n var selectionStart = this.textArea.selectionStart;\n var selectionEnd = this.textArea.selectionEnd;\n this.valueIncludingSuggestion = this.valueIncludingSuggestion.substring(0, this.suggestionStartPos) +\n this.valueIncludingSuggestion.substring(this.suggestionEndPos);\n if (this.suggestionStartPos === selectionStart && this.suggestionEndPos === selectionEnd) {\n this.textArea.setSelectionRange(selectionStart, selectionStart);\n }\n this.suggestionStartPos = null;\n this.suggestionEndPos = null;\n this.textArea.removeAttribute('data-suggestion-visible');\n if (this.virtualCaret) {\n this.virtualCaret.hide();\n }\n };\n return InlineSuggestion;\n}());\nvar ContextSuggestion = /** @__PURE__ @class */ (function () {\n function ContextSuggestion(container, textArea) {\n var _this = this;\n this.latestSuggestionText = '';\n this.showing = false;\n this.textArea = textArea;\n this.suggestionElement = document.createElement('div');\n this.suggestionElement.classList.add('smart-textarea-suggestion-overlay');\n this.suggestionElement.addEventListener('mousedown', function (event) { return _this.handleSuggestionClicked(event); });\n this.suggestionElement.addEventListener('touchend', function (event) { return _this.handleSuggestionClicked(event); });\n this.suggestionPrefixElement = document.createElement('span');\n this.suggestionTextElement = document.createElement('span');\n this.suggestionElement.appendChild(this.suggestionPrefixElement);\n this.suggestionElement.appendChild(this.suggestionTextElement);\n this.suggestionPrefixElement.style.opacity = '0.3';\n var computedStyle = window.getComputedStyle(this.textArea);\n this.suggestionElement.style.font = computedStyle.font;\n this.suggestionElement.style.marginTop = 1.4 * parseFloat(computedStyle.fontSize) + \"px\";\n container.appendChild(this.suggestionElement);\n }\n Object.defineProperty(ContextSuggestion.prototype, \"currentSuggestion\", {\n get: function () {\n return this.latestSuggestionText;\n },\n enumerable: true,\n configurable: true\n });\n ContextSuggestion.prototype.show = function (suggestionText) {\n this.latestSuggestionText = suggestionText;\n this.suggestionPrefixElement.textContent = suggestionText[0] !== ' ' ? this.getPrefixText(this.textArea, 20) : '';\n this.suggestionTextElement.textContent = suggestionText;\n var position = CaretPositionHelper.getTextAreaPosition(this.textArea);\n var style = this.suggestionElement.style;\n style.minWidth = null;\n this.suggestionElement.classList.add('smart-textarea-suggestion-overlay-visible');\n style.zIndex = this.textArea.style.zIndex + 1;\n style.top = position.top + \"px\";\n var leftPosition = position.left - this.suggestionPrefixElement.offsetWidth;\n if (!style.left || Math.abs(parseFloat(style.left) - leftPosition) > 10) {\n style.left = leftPosition + \"px\";\n }\n this.showing = true;\n var computedStyle = window.getComputedStyle(this.suggestionElement);\n var lineHeight = parseFloat(computedStyle.lineHeight);\n var paddingTop = parseFloat(computedStyle.paddingTop);\n var paddingBottom = parseFloat(computedStyle.paddingBottom);\n var lines = Math.round((this.suggestionElement.offsetHeight - paddingTop - paddingBottom) / lineHeight);\n if (lines > 2) {\n var elementWidth = this.suggestionElement.offsetWidth;\n style.minWidth = \"calc(min(70vw, \" + (lines * elementWidth) / 2 + \"px))\";\n }\n var rect = this.suggestionElement.getBoundingClientRect();\n if (rect.right > document.body.clientWidth - 20) {\n style.left = \"calc(\" + (parseFloat(style.left) - (rect.right - document.body.clientWidth)) + \"px - 2rem)\";\n }\n };\n ContextSuggestion.prototype.accept = function () {\n if (this.showing) {\n CaretPositionHelper.insertCharacter(this.textArea, this.currentSuggestion);\n CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);\n this.hide();\n }\n };\n ContextSuggestion.prototype.reject = function () {\n this.hide();\n };\n ContextSuggestion.prototype.hide = function () {\n if (this.showing) {\n this.showing = false;\n this.suggestionElement.classList.remove('smart-textarea-suggestion-overlay-visible');\n }\n };\n ContextSuggestion.prototype.isShowing = function () {\n return this.showing;\n };\n ContextSuggestion.prototype.handleSuggestionClicked = function (event) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.accept();\n };\n ContextSuggestion.prototype.getPrefixText = function (textArea, maxLength) {\n var value = textArea.value;\n var selectionStart = textArea.selectionStart;\n for (var i = selectionStart - 1; i > selectionStart - maxLength; i--) {\n if (i < 0 || /\\s/.test(value[\"\" + i])) {\n return value.substring(i + 1, selectionStart);\n }\n }\n return '';\n };\n return ContextSuggestion;\n}());\nvar VirtualCaret = /** @__PURE__ @class */ (function () {\n function VirtualCaret(smartTextArea, textArea) {\n this.textArea = textArea;\n this.caretDiv = document.createElement('div');\n this.caretDiv.classList.add('smart-textarea-caret');\n smartTextArea.appendChild(this.caretDiv);\n }\n VirtualCaret.prototype.show = function () {\n var textAreaPosition = CaretPositionHelper.getTextAreaPosition(this.textArea);\n var caretStyle = this.caretDiv.style;\n caretStyle.display = 'block';\n caretStyle.top = textAreaPosition.top + 'px';\n caretStyle.left = textAreaPosition.left + 'px';\n caretStyle.height = textAreaPosition.height + 'px';\n caretStyle.zIndex = this.textArea.style.zIndex;\n caretStyle.backgroundColor = textAreaPosition.elemStyle.caretColor;\n };\n VirtualCaret.prototype.hide = function () {\n this.caretDiv.style.display = 'none';\n };\n return VirtualCaret;\n}());\n\nvar __extends$9 = (undefined && undefined.__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 SignatureBase = /** @__PURE__ @class */ (function (_super) {\n __extends$9(SignatureBase, _super);\n function SignatureBase() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /* minDistance(distance between the two point) was calaculated for smoothness.*/\n _this.minDistance = 5;\n _this.previous = 0;\n /* interval handles for the smoothness in the mouse move event.*/\n _this.interval = 30;\n _this.timeout = null;\n _this.isSignatureEmpty = true;\n _this.backgroundLoaded = null;\n _this.isBlazor = false;\n _this.isResponsive = false;\n _this.signPointsColl = [];\n _this.signRatioPointsColl = [];\n _this.canRedraw = true;\n return _this;\n }\n /**\n * To Initialize the component rendering\n *\n * @private\n * @param {HTMLCanvasElement} element - Specifies the canvas element.\n * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.\n * @returns {void}\n */\n SignatureBase.prototype.initialize = function (element, dotnetRef) {\n this.clearArray = [];\n this.element = element;\n this.canvasContext = this.element.getContext('2d');\n this.canvasContext.canvas.tabIndex = -1;\n if (dotnetRef) {\n this.dotnetRef = dotnetRef;\n this.isBlazor = true;\n if (this.signatureValue) {\n this.loadPersistedSignature();\n }\n }\n this.setHTMLProperties();\n if (isNullOrUndefined(this.signatureValue)) {\n this.updateSnapCollection(true);\n }\n this.wireEvents();\n if (!this.isBlazor) {\n this.trigger('created', null);\n }\n };\n SignatureBase.prototype.wireEvents = function () {\n if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {\n EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);\n EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);\n window.addEventListener('resize', this.resizeHandler.bind(this));\n }\n else if (this.pointColl) {\n EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);\n EventHandler.add(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler, this);\n EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);\n }\n };\n SignatureBase.prototype.unwireEvents = function (type) {\n if (type === 'mouseup' || type === 'touchend') {\n EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);\n EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);\n EventHandler.remove(document, 'mouseup', this.mouseUpHandler);\n }\n else {\n EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);\n EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);\n window.removeEventListener('resize', this.resizeHandler);\n }\n };\n SignatureBase.prototype.setHTMLProperties = function () {\n // eslint-disable-next-line max-len\n if (this.element.height === 150 && this.element.width === 300 && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {\n this.element.height = this.element.offsetHeight;\n this.element.width = this.element.offsetWidth;\n this.isResponsive = true;\n }\n else if ((this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1)\n && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {\n this.element.height = this.element.offsetHeight;\n this.element.width = this.element.offsetWidth;\n }\n this.canvasContext.fillStyle = this.strokeColor;\n this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });\n this.tempContext = this.tempCanvas.getContext('2d');\n this.tempCanvas.width = this.element.width;\n this.tempCanvas.height = this.element.height;\n if (this.backgroundImage) {\n this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';\n this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';\n if (this.saveWithBackground) {\n this.setBackgroundImage(this.backgroundImage, 'temp');\n }\n }\n else if (this.backgroundColor) {\n this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;\n }\n };\n SignatureBase.prototype.mouseDownHandler = function (e) {\n if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {\n if (e.type === 'touchstart') {\n e.preventDefault();\n e.stopPropagation();\n }\n this.beginStroke(e);\n this.wireEvents();\n }\n };\n SignatureBase.prototype.mouseMoveHandler = function (e) {\n if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchmove') {\n if (e.type === 'touchmove') {\n e.preventDefault();\n e.stopPropagation();\n }\n if (this.interval) {\n this.updateStrokeWithThrottle(e);\n }\n else {\n this.updateStroke(e);\n }\n }\n };\n SignatureBase.prototype.mouseUpHandler = function (e) {\n var args = { actionName: 'strokeUpdate' };\n if (e.type === 'touchstart') {\n e.preventDefault();\n e.stopPropagation();\n }\n this.endDraw();\n this.updateSnapCollection();\n this.unwireEvents(e.type);\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'mouseUp');\n }\n this.signatureValue = this.snapColl[this.incStep];\n for (var i = 0; i < this.signPointsColl.length; i++) {\n this.signRatioPointsColl.push({ x: (this.signPointsColl[i].x / this.canvasContext.canvas.width),\n y: (this.signPointsColl[i].y / this.canvasContext.canvas.height) });\n }\n this.signPointsColl = [];\n };\n SignatureBase.prototype.keyboardHandler = function (e) {\n var _this = this;\n var args = { fileName: 'Signature', type: 'Png', cancel: false };\n switch (e.key) {\n case 'Delete':\n this.clear();\n break;\n case (e.ctrlKey && 's'):\n if (!this.isBlazor) {\n this.trigger('beforeSave', args, function (observableSaveArgs) {\n if (!args.cancel) {\n _this.save(observableSaveArgs.type, observableSaveArgs.fileName);\n }\n });\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'beforeSave');\n }\n e.preventDefault();\n e.stopImmediatePropagation();\n break;\n case (e.ctrlKey && 'z'):\n this.undo();\n break;\n case (e.ctrlKey && 'y'):\n this.redo();\n break;\n }\n };\n SignatureBase.prototype.resizeHandler = function () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (this.isResponsive && this.canRedraw) {\n this.canvasContext.canvas.width = this.element.offsetWidth;\n this.canvasContext.canvas.height = this.element.offsetHeight;\n this.canvasContext.scale(1, 1);\n var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;\n for (var i = 0; i < this.signRatioPointsColl.length; i++) {\n this.arcDraw((this.signRatioPointsColl[i].x * this.canvasContext.canvas.width), (this.signRatioPointsColl[i].y * this.canvasContext.canvas.height), pointSize);\n }\n this.signPointsColl = [];\n this.canvasContext.closePath();\n this.canvasContext.fill();\n }\n else {\n var restoreImg_1 = new Image();\n restoreImg_1.src = this.snapColl[this.incStep];\n restoreImg_1.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(restoreImg_1, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n };\n SignatureBase.prototype.beginStroke = function (e) {\n this.internalRefresh();\n this.updateStroke(e);\n };\n SignatureBase.prototype.updateStroke = function (e) {\n var point = this.createPoint(e);\n this.addPoint(point);\n };\n SignatureBase.prototype.updateStrokeWithThrottle = function (args) {\n var now = Date.now();\n var remaining = this.interval - (now - this.previous);\n this.storedArgs = args;\n if (remaining <= 0 || remaining > this.interval) {\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n this.previous = now;\n this.updateStroke(this.storedArgs);\n if (!this.timeout) {\n this.storedArgs = null;\n }\n }\n else if (!this.timeout) {\n this.timeout = window.setTimeout(this.delay.bind(this), remaining);\n }\n };\n SignatureBase.prototype.delay = function () {\n this.previous = Date.now();\n this.timeout = null;\n this.updateStroke(this.storedArgs);\n if (!this.timeout) {\n this.storedArgs = null;\n }\n };\n SignatureBase.prototype.createPoint = function (e) {\n var rect = this.canvasContext.canvas.getBoundingClientRect();\n if (e.type === 'mousedown' || e.type === 'mousemove') {\n return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());\n }\n else {\n return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());\n }\n };\n /* Returns the current point corrdinates(x, y) and time.*/\n SignatureBase.prototype.point = function (pointX, pointY, time) {\n this.pointX = pointX;\n this.pointY = pointY;\n this.time = time || new Date().getTime();\n return { x: this.pointX, y: this.pointY, time: this.time };\n };\n SignatureBase.prototype.addPoint = function (point) {\n var points = this.pointColl;\n var controlPoint1;\n var controlPoint2;\n var lastPoint = points.length > 0 && points[points.length - 1];\n var isLastPointTooClose = lastPoint ? this.distanceTo(lastPoint) <= this.minDistance : false;\n if (!lastPoint || !(lastPoint && isLastPointTooClose)) {\n points.push(point);\n if (points.length > 2) {\n if (points.length === 3) {\n points.unshift(points[0]);\n }\n controlPoint1 = (this.calculateCurveControlPoints(points[0], points[1], points[2])).controlPoint2;\n controlPoint2 = (this.calculateCurveControlPoints(points[1], points[2], points[3])).controlPoint1;\n this.startPoint = points[1];\n this.controlPoint1 = controlPoint1;\n this.controlPoint2 = controlPoint2;\n this.endPoint = points[2];\n this.startDraw();\n points.shift();\n }\n }\n };\n SignatureBase.prototype.startDraw = function () {\n var velocity;\n velocity = this.pointVelocityCalc(this.startPoint);\n velocity = this.velocity * velocity + (1 - this.velocity) * this.lastVelocity;\n var newWidth = Math.max(this.maxStrokeWidth / (velocity + 1), this.minStrokeWidth);\n this.curveDraw(this.lastWidth, newWidth);\n this.lastVelocity = velocity;\n this.lastWidth = newWidth;\n };\n SignatureBase.prototype.endDraw = function () {\n if (isNullOrUndefined(this.pointColl)) {\n return;\n }\n var canDrawCurve = this.pointColl.length > 2;\n var point = this.pointColl[0];\n if (!canDrawCurve && point) {\n this.strokeDraw(point);\n }\n };\n /* Calculate the Bezier (x, y) coordinate of the curve. */\n SignatureBase.prototype.curveDraw = function (startWidth, endWidth) {\n var context = this.canvasContext;\n var width;\n var i;\n var t1;\n var t2;\n var t3;\n var u1;\n var u2;\n var u3;\n var x;\n var y;\n var widthValue = endWidth - startWidth;\n var bezierLength = this.bezierLengthCalc();\n var drawSteps = Math.ceil(bezierLength) * 2;\n context.beginPath();\n for (i = 0; i < drawSteps; i++) {\n t1 = i / drawSteps;\n t2 = t1 * t1;\n t3 = t2 * t1;\n u1 = 1 - t1;\n u2 = u1 * u1;\n u3 = u2 * u1;\n x = u3 * this.startPoint.x;\n x += 3 * u2 * t1 * this.controlPoint1.x;\n x += 3 * u1 * t2 * this.controlPoint2.x;\n x += t3 * this.endPoint.x;\n y = u3 * this.startPoint.y;\n y += 3 * u2 * t1 * this.controlPoint1.y;\n y += 3 * u1 * t2 * this.controlPoint2.y;\n y += t3 * this.endPoint.y;\n width = Math.min(startWidth + t3 * widthValue, this.maxStrokeWidth);\n this.arcDraw(x, y, width);\n }\n context.closePath();\n context.fill();\n this.isSignatureEmpty = false;\n };\n SignatureBase.prototype.strokeDraw = function (point) {\n var context = this.canvasContext;\n var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;\n context.beginPath();\n this.arcDraw(point.x, point.y, pointSize);\n context.closePath();\n context.fill();\n this.isSignatureEmpty = false;\n };\n SignatureBase.prototype.arcDraw = function (x, y, size) {\n this.signPointsColl.push({ x: x, y: y });\n var context = this.canvasContext;\n context.moveTo(x, y);\n context.arc(x, y, size, 0, 2 * Math.PI, false);\n };\n /* Utility functions for Bezier algorithm*/\n SignatureBase.prototype.calculateCurveControlPoints = function (p1, p2, p3) {\n var dx1 = p1.x - p2.x;\n var dy1 = p1.y - p2.y;\n var dx2 = p2.x - p3.x;\n var dy2 = p2.y - p3.y;\n var m1 = { x: (p1.x + p2.x) / 2.0, y: (p1.y + p2.y) / 2.0 };\n var m2 = { x: (p2.x + p3.x) / 2.0, y: (p2.y + p3.y) / 2.0 };\n var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);\n var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);\n var dxm = (m1.x - m2.x);\n var dym = (m1.y - m2.y);\n var k = l2 / (l1 + l2);\n var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };\n var tx = p2.x - cm.x;\n var ty = p2.y - cm.y;\n return {\n controlPoint1: this.point(m1.x + tx, m1.y + ty, 0),\n controlPoint2: this.point(m2.x + tx, m2.y + ty, 0)\n };\n };\n /* Returns approximated bezier length of the curuve.*/\n SignatureBase.prototype.bezierLengthCalc = function () {\n var steps = 10;\n var length = 0;\n var i;\n var t;\n var pointx1;\n var pointy1;\n var pointx2;\n var pointy2;\n var pointx3;\n var pointy3;\n for (i = 0; i <= steps; i++) {\n t = i / steps;\n pointx1 = this.bezierPointCalc(t, this.startPoint.x, this.controlPoint1.x, this.controlPoint2.x, this.endPoint.x);\n pointy1 = this.bezierPointCalc(t, this.startPoint.y, this.controlPoint1.y, this.controlPoint2.y, this.endPoint.y);\n if (i > 0) {\n pointx3 = pointx1 - pointx2;\n pointy3 = pointy1 - pointy2;\n length += Math.sqrt(pointx3 * pointx3 + pointy3 * pointy3);\n }\n pointx2 = pointx1;\n pointy2 = pointy1;\n }\n return length;\n };\n /* Calculate parametric value of x or y given t and the\n four point(startpoint, controlpoint1, controlpoint2, endpoint) coordinates of a cubic bezier curve.*/\n SignatureBase.prototype.bezierPointCalc = function (t, startpoint, cp1, cp2, endpoint) {\n return startpoint * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * cp1 * (1.0 - t) * (1.0 - t) * t + 3.0 *\n cp2 * (1.0 - t) * t * t + endpoint * t * t * t;\n };\n /* Velocity between the current point and last point.*/\n SignatureBase.prototype.pointVelocityCalc = function (startPoint) {\n return (this.time !== startPoint.time) ? this.distanceTo(startPoint) / (this.time - startPoint.time) : 0;\n };\n /* Distance between the current point and last point.*/\n SignatureBase.prototype.distanceTo = function (start) {\n return Math.sqrt(Math.pow(this.pointX - start.x, 2) + Math.pow(this.pointY - start.y, 2));\n };\n SignatureBase.prototype.isRead = function (isRead) {\n if (isRead) {\n EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);\n }\n else if (!this.disabled) {\n EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);\n }\n };\n SignatureBase.prototype.enableOrDisable = function (isDisable) {\n this.disabled = isDisable;\n if (isDisable) {\n this.canvasContext.canvas.style.filter = 'opacity(0.5)';\n this.isRead(true);\n }\n else {\n this.canvasContext.canvas.style.filter = '';\n this.isRead(false);\n }\n };\n SignatureBase.prototype.updateSnapCollection = function (isClear) {\n if (isNullOrUndefined(this.incStep)) {\n this.incStep = -1;\n this.incStep++;\n this.snapColl = [];\n this.clearArray = [];\n }\n else {\n this.incStep++;\n }\n if (this.incStep < this.snapColl.length) {\n this.snapColl.length = this.incStep;\n }\n if (this.incStep > 0) {\n var canvasNew = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-wrapper' });\n var canvasContextNew = canvasNew.getContext('2d');\n canvasNew.width = this.canvasContext.canvas.width;\n canvasNew.height = this.canvasContext.canvas.height;\n canvasContextNew.drawImage(this.canvasContext.canvas, 0, 0, canvasNew.width, canvasNew.height);\n this.snapColl.push(canvasNew.toDataURL());\n }\n else {\n this.snapColl.push(this.canvasContext.canvas.toDataURL());\n }\n if (isClear) {\n this.clearArray.push(this.incStep);\n }\n };\n SignatureBase.prototype.setBackgroundImage = function (imageSrc, type) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var imageObj = new Image();\n imageObj.crossOrigin = 'anonymous';\n imageObj.src = imageSrc;\n if (type === 'temp') {\n imageObj.onload = function () {\n proxy.tempContext.globalCompositeOperation = 'source-over';\n proxy.tempContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n else {\n imageObj.onload = function () {\n proxy.canvasContext.globalCompositeOperation = 'source-over';\n proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);\n proxy.updateSnapCollection();\n proxy.saveBackground(true);\n };\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n }\n };\n SignatureBase.prototype.setBackgroundColor = function (color) {\n var canvasEle = this.canvasContext;\n canvasEle.strokeStyle = color;\n var i;\n var j;\n for (i = 1; i <= canvasEle.canvas.width; i++) {\n for (j = 1; j <= canvasEle.canvas.height; j++) {\n canvasEle.strokeRect(0, 0, i, j);\n }\n }\n this.updateSnapCollection();\n };\n SignatureBase.prototype.loadPersistedSignature = function () {\n if (isNullOrUndefined(this.signatureValue)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var lastImage = new Image();\n lastImage.src = this.signatureValue;\n lastImage.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(lastImage, 0, 0);\n proxy.updateSnapCollection();\n };\n this.isSignatureEmpty = false;\n };\n /**\n * To get the signature as Blob.\n *\n * @param {string} url - specify the url/base 64 string to get blob of the signature.\n * @returns {Blob}.\n */\n SignatureBase.prototype.getBlob = function (url) {\n var arr = url.split(',');\n var type = arr[0].match(/:(.*?);/)[1];\n var bstr = atob(arr[1]);\n var n = bstr.length;\n var u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new Blob([u8arr], { type: type });\n };\n SignatureBase.prototype.download = function (blob, fileName) {\n var blobUrl = URL.createObjectURL(blob);\n var a = document.createElement('a');\n a.href = blobUrl;\n a.target = '_parent';\n a.download = fileName;\n (document.body || document.documentElement).appendChild(a);\n a.click();\n a.parentNode.removeChild(a);\n };\n SignatureBase.prototype.internalRefresh = function () {\n this.pointColl = [];\n this.lastVelocity = 0;\n this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;\n };\n /**\n * To refresh the signature.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.refresh = function () {\n this.isResponsive = false;\n this.setHTMLProperties();\n this.resizeHandler();\n this.internalRefresh();\n };\n /**\n * Erases all the signature strokes signed by user.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.clear = function () {\n var args = { actionName: 'clear' };\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n this.tempContext.clearRect(0, 0, this.tempContext.canvas.width, this.tempContext.canvas.height);\n if (this.saveWithBackground && this.backgroundImage) {\n this.setBackgroundImage(this.backgroundImage, 'temp');\n }\n this.internalRefresh();\n this.signRatioPointsColl = [];\n this.updateSnapCollection(true);\n this.isSignatureEmpty = this.canRedraw = true;\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Clear');\n }\n };\n /**\n * Undo the last user action.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.undo = function () {\n var args = { actionName: 'undo' };\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (this.incStep > 0) {\n this.incStep--;\n var undoImg_1 = new Image();\n undoImg_1.src = this.snapColl[this.incStep];\n undoImg_1.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(undoImg_1, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n this.isClear();\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Undo');\n }\n };\n /**\n * Redo the last user action.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.redo = function () {\n var args = { actionName: 'redo' };\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (this.incStep < this.snapColl.length - 1) {\n this.incStep++;\n var redoImg_1 = new Image();\n redoImg_1.src = this.snapColl[this.incStep];\n redoImg_1.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(redoImg_1, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n this.isClear();\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Redo');\n }\n };\n SignatureBase.prototype.isClear = function () {\n if (this.clearArray) {\n var empty = false;\n for (var i = 0; i < this.clearArray.length; i++) {\n if (this.clearArray[i] === this.incStep) {\n this.isSignatureEmpty = true;\n empty = true;\n }\n }\n if (!empty) {\n this.isSignatureEmpty = false;\n }\n }\n };\n /**\n * To check whether the signature is empty or not.\n *\n * @returns {boolean}.\n */\n SignatureBase.prototype.isEmpty = function () {\n return this.isSignatureEmpty;\n };\n /**\n * To check whether the undo collection is empty or not.\n *\n * @returns {boolean}.\n */\n SignatureBase.prototype.canUndo = function () {\n return this.incStep > 0;\n };\n /**\n * To check whether the redo collection is empty or not.\n *\n * @returns {boolean}.\n */\n SignatureBase.prototype.canRedo = function () {\n return this.incStep < this.snapColl.length - 1;\n };\n /**\n * To draw the signature based on the given text, with the font family and font size.\n *\n * @param {string} text - specify text to be drawn as signature.\n * @param {string} fontFamily - specify font family of a signature.\n * @param {number} fontSize - specify font size of a signature.\n * @param {number} x- Specifies the x-coordinate to start the text of a signature. Default to the center point of the image if it not specified.\n * @param {number} y - Specifies the y-coordinate to start the text of a signature. Default to the center point of the image if it not specified.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.draw = function (text, fontFamily, fontSize, x, y) {\n var args = { actionName: 'draw-text' };\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n fontFamily = fontFamily || 'Arial';\n fontSize = fontSize || 30;\n this.canvasContext.font = fontSize + 'px ' + fontFamily;\n var startX = this.element.width / 2;\n var startY = this.element.height / 2;\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n this.canvasContext.textAlign = 'center';\n this.canvasContext.textBaseline = 'middle';\n }\n else {\n startX = isNullOrUndefined(x) ? startX : x;\n startY = isNullOrUndefined(y) ? startY + fontSize / 2 : (y + fontSize / 2);\n }\n this.canvasContext.fillText(text, startX, startY);\n this.updateSnapCollection();\n this.isSignatureEmpty = false;\n this.trigger('change', args);\n };\n /**\n * To load the signature with the given base 64 string, height and width.\n *\n * @param {string} signature - specify the url/base 64 string to be drawn as signature.\n * @param {number} width - specify the width of the loaded signature image.\n * @param {number} height - specify the height of the loaded signature image.\n * @returns {void}.\n */\n SignatureBase.prototype.load = function (signature, width, height) {\n height = height || this.element.height;\n width = width || this.element.width;\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var bitmapImage = new Image();\n bitmapImage.src = signature;\n if (signature.slice(0, 4) !== 'data') {\n bitmapImage.crossOrigin = 'anonymous';\n }\n bitmapImage.onload = function () {\n Promise.all([\n createImageBitmap(bitmapImage, 0, 0, width, height)\n ]).then(function (results) {\n var tempCanvas = document.createElement('canvas');\n tempCanvas.width = width;\n tempCanvas.height = height;\n tempCanvas.getContext('2d').drawImage(results[0], 0, 0);\n if (signature.slice(0, 4) !== 'data') {\n proxy.canvasContext.globalCompositeOperation = 'source-over';\n }\n proxy.canvasContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, proxy.element.width, proxy.element.height);\n proxy.updateSnapCollection();\n });\n };\n this.isSignatureEmpty = this.canRedraw = false;\n };\n SignatureBase.prototype.saveBackground = function (savebg) {\n var imageSrc;\n if (savebg && this.backgroundImage) {\n imageSrc = this.snapColl[this.incStep - 1];\n }\n else {\n imageSrc = this.snapColl[this.incStep];\n }\n if (!savebg) {\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n if (this.backgroundImage) {\n this.setBackgroundImage(this.backgroundImage);\n }\n else if (this.backgroundColor) {\n this.setBackgroundColor(this.backgroundColor);\n savebg = true;\n }\n }\n if (savebg) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n var imageObj_1 = new Image();\n imageObj_1.crossOrigin = 'anonymous';\n imageObj_1.src = imageSrc;\n imageObj_1.onload = function () {\n proxy_1.backgroundLoaded = true;\n proxy_1.canvasContext.globalCompositeOperation = 'source-over';\n proxy_1.canvasContext.drawImage(imageObj_1, 0, 0, proxy_1.element.width, proxy_1.element.height);\n proxy_1.save(proxy_1.fileType, proxy_1.fileName);\n };\n }\n };\n /**\n * To save the signature with the given file type and file name.\n *\n * @param {SignatureFileType} type - specify type of the file to be saved a signature.\n * @param {string} fileName - specify name of the file to be saved a signature.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.save = function (type, fileName) {\n if (this.saveWithBackground && this.backgroundLoaded == null && (this.backgroundImage || this.backgroundColor)) {\n this.backgroundLoaded = false;\n this.fileType = type;\n this.fileName = fileName;\n this.saveBackground(false);\n }\n else if (type === 'Svg') {\n fileName = fileName || 'Signature';\n this.toSVG(fileName, this.canvasContext.canvas.toDataURL('image/png'));\n }\n else if (type === 'Jpeg') {\n fileName = fileName || 'Signature';\n if (!this.saveWithBackground || this.saveWithBackground && !(this.backgroundImage || this.backgroundColor)) {\n this.toJPEG(fileName);\n }\n else {\n var dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');\n this.download(this.getBlob(dataURL), fileName + '.' + 'jpeg');\n }\n }\n else {\n fileName = fileName || 'Signature';\n var dataURL = this.canvasContext.canvas.toDataURL('image/png');\n this.download(this.getBlob(dataURL), fileName + '.' + 'png');\n }\n if (this.saveWithBackground && this.backgroundLoaded) {\n this.resetSnap();\n }\n };\n SignatureBase.prototype.resetSnap = function () {\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var restoreObj = new Image();\n restoreObj.src = this.snapColl[this.incStep - 1];\n restoreObj.onload = function () {\n proxy.canvasContext.drawImage(restoreObj, 0, 0, proxy.element.width, proxy.element.height);\n proxy.updateSnapCollection();\n };\n this.backgroundLoaded = null;\n this.snapColl.pop();\n this.incStep--;\n this.snapColl.pop();\n this.incStep--;\n };\n SignatureBase.prototype.toJPEG = function (fileName) {\n var _this = this;\n var imageSrc = this.snapColl[this.incStep];\n this.setBackgroundColor('#ffffff');\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var imageObj = new Image();\n imageObj.crossOrigin = 'anonymous';\n imageObj.src = imageSrc;\n imageObj.onload = function () {\n proxy.canvasContext.globalCompositeOperation = 'source-over';\n proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);\n var dataURL = proxy.canvasContext.canvas.toDataURL('image/jpeg');\n proxy.download(proxy.getBlob(dataURL), fileName + '.' + 'jpeg');\n proxy.canvasContext.clearRect(0, 0, proxy.canvasContext.canvas.width, proxy.canvasContext.canvas.height);\n _this.resizeHandler();\n };\n this.snapColl.pop();\n this.incStep--;\n };\n SignatureBase.prototype.toSVG = function (fileName, dataUrl) {\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('width', this.canvasContext.canvas.width.toString());\n svg.setAttribute('height', this.canvasContext.canvas.height.toString());\n var XLinkNS = 'http://www.w3.org/1999/xlink';\n var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');\n img.setAttributeNS(null, 'height', this.canvasContext.canvas.height.toString());\n img.setAttributeNS(null, 'width', this.canvasContext.canvas.width.toString());\n img.setAttributeNS(XLinkNS, 'xlink:href', dataUrl);\n svg.appendChild(img);\n var prefix = 'data:image/svg+xml;base64,';\n var header = '';\n var footer = '';\n var body = svg.innerHTML;\n var data = header + body + footer;\n var svgDataUrl = prefix + btoa(data);\n if (fileName == null) {\n return svgDataUrl;\n }\n else {\n this.download(this.getBlob(svgDataUrl), fileName + '.' + 'svg');\n return null;\n }\n };\n /**\n * To save the signature as Blob.\n *\n * @returns {Blob}.\n */\n SignatureBase.prototype.saveAsBlob = function () {\n return this.getBlob(this.canvasContext.canvas.toDataURL('image/png'));\n };\n /**\n * To get the signature as Base 64.\n *\n * @private\n * @param {SignatureFileType} type - Specifies the type of the image format.\n * @returns {string}.\n */\n SignatureBase.prototype.getSignature = function (type) {\n if (this.saveWithBackground && this.backgroundColor && !this.backgroundImage) {\n this.tempContext.fillStyle = this.backgroundColor;\n this.tempContext.fillRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n }\n else if (!this.backgroundColor && !this.backgroundImage && type === 'Jpeg') {\n this.tempContext.fillStyle = '#fff';\n this.tempContext.fillRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n }\n this.tempContext.drawImage(this.element, 0, 0);\n if (type === 'Jpeg') {\n return this.tempCanvas.toDataURL('image/jpeg');\n }\n else if (type === 'Svg') {\n return this.toSVG(null, this.tempCanvas.toDataURL('image/png'));\n }\n else {\n return this.tempCanvas.toDataURL('image/png');\n }\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n SignatureBase.prototype.getModuleName = function () {\n return 'signature';\n };\n /**\n * To get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n SignatureBase.prototype.getPersistData = function () {\n this.signatureValue = this.snapColl[this.incStep];\n return this.addOnPersist(['signatureValue']);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n SignatureBase.prototype.destroy = function () {\n if (this.getModuleName() !== 'image-editor') {\n this.unwireEvents(null);\n removeClass([this.element], 'e-' + this.getModuleName());\n this.element.removeAttribute('tabindex');\n this.pointColl = null;\n }\n _super.prototype.destroy.call(this);\n };\n /**\n * Modified onPropertyChanged method for both blazor and EJ2 signature component.\n *\n * @private\n * @param {string} key - Specifies the property, which changed.\n * @param {string} value - Specifies the property value changed.\n * @returns {void}\n */\n SignatureBase.prototype.propertyChanged = function (key, value) {\n var canvasNew = this.canvasContext;\n switch (key) {\n case 'backgroundColor':\n canvasNew.canvas.style.backgroundColor = value;\n this.backgroundColor = value;\n break;\n case 'backgroundImage':\n canvasNew.canvas.style.backgroundImage = 'url(' + value + ')';\n this.backgroundImage = value;\n if (this.saveWithBackground) {\n this.setBackgroundImage(this.backgroundImage, 'temp');\n }\n break;\n case 'strokeColor':\n canvasNew.fillStyle = value;\n this.strokeColor = value;\n break;\n case 'saveWithBackground':\n this.saveWithBackground = value;\n break;\n case 'maxStrokeWidth':\n this.maxStrokeWidth = value;\n break;\n case 'minStrokeWidth':\n this.minStrokeWidth = value;\n break;\n case 'velocity':\n this.velocity = value;\n break;\n case 'isReadOnly':\n this.isRead(value);\n break;\n case 'disabled':\n this.enableOrDisable(value);\n break;\n }\n };\n return SignatureBase;\n}(Component));\n\nvar __extends$a = (undefined && undefined.__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$9 = (undefined && undefined.__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/**\n * The Signature component allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation.\n * It allows to save signature as image.\n * You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this Signature component.\n * Signature component is a user interface to draw the Signature or Text.\n * It provides supports for various Background color, Stroke color and Background Image.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Signature = /** @__PURE__ @class */ (function (_super) {\n __extends$a(Signature, _super);\n /**\n * Constructor for creating the widget.\n *\n * @param {SignatureModel} options - Specifies the Signature model.\n * @param {string | HTMLCanvasElement} element - Specifies the element.\n * @private\n */\n function Signature(options, element) {\n return _super.call(this, options, element) || this;\n }\n Signature.prototype.preRender = function () {\n // pre render code snippets\n };\n /**\n * To Initialize the component rendering\n *\n * @private\n * @returns {void}\n */\n Signature.prototype.render = function () {\n this.initialize();\n };\n Signature.prototype.initialize = function () {\n this.element.setAttribute('role', 'img');\n this.element.setAttribute('aria-label', 'signature');\n addClass([this.element], 'e-' + this.getModuleName());\n _super.prototype.initialize.call(this, this.element);\n if (this.enablePersistence) {\n this.loadPersistedSignature();\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n Signature.prototype.getModuleName = function () {\n return _super.prototype.getModuleName.call(this);\n };\n /**\n * To get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n Signature.prototype.getPersistData = function () {\n return _super.prototype.getPersistData.call(this);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {SignatureModel} newProp - Specifies new properties\n * @param {SignatureModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n Signature.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 'backgroundColor':\n _super.prototype.propertyChanged.call(this, prop, newProp.backgroundColor);\n break;\n case 'backgroundImage':\n _super.prototype.propertyChanged.call(this, prop, newProp.backgroundImage);\n break;\n case 'strokeColor':\n if (newProp.strokeColor !== oldProp.strokeColor) {\n _super.prototype.propertyChanged.call(this, prop, newProp.strokeColor);\n }\n break;\n case 'maxStrokeWidth':\n if (newProp.maxStrokeWidth !== oldProp.maxStrokeWidth) {\n _super.prototype.propertyChanged.call(this, prop, newProp.maxStrokeWidth);\n }\n break;\n case 'minStrokeWidth':\n if (newProp.minStrokeWidth !== oldProp.minStrokeWidth) {\n _super.prototype.propertyChanged.call(this, prop, newProp.minStrokeWidth);\n }\n break;\n case 'velocity':\n if (newProp.velocity !== oldProp.velocity) {\n _super.prototype.propertyChanged.call(this, prop, newProp.velocity);\n }\n break;\n case 'saveWithBackground':\n _super.prototype.propertyChanged.call(this, prop, newProp.saveWithBackground);\n break;\n case 'isReadOnly':\n _super.prototype.propertyChanged.call(this, prop, newProp.isReadOnly);\n break;\n case 'disabled':\n _super.prototype.propertyChanged.call(this, prop, newProp.disabled);\n break;\n }\n }\n };\n __decorate$9([\n Property('')\n ], Signature.prototype, \"backgroundColor\", void 0);\n __decorate$9([\n Property('')\n ], Signature.prototype, \"backgroundImage\", void 0);\n __decorate$9([\n Property(false)\n ], Signature.prototype, \"disabled\", void 0);\n __decorate$9([\n Property(false)\n ], Signature.prototype, \"isReadOnly\", void 0);\n __decorate$9([\n Property(true)\n ], Signature.prototype, \"saveWithBackground\", void 0);\n __decorate$9([\n Property('#000000')\n ], Signature.prototype, \"strokeColor\", void 0);\n __decorate$9([\n Property(0.5)\n ], Signature.prototype, \"minStrokeWidth\", void 0);\n __decorate$9([\n Property(2)\n ], Signature.prototype, \"maxStrokeWidth\", void 0);\n __decorate$9([\n Property(0.7)\n ], Signature.prototype, \"velocity\", void 0);\n __decorate$9([\n Property('en-US')\n ], Signature.prototype, \"locale\", void 0);\n __decorate$9([\n Property(false)\n ], Signature.prototype, \"enableRtl\", void 0);\n __decorate$9([\n Property(false)\n ], Signature.prototype, \"enablePersistence\", void 0);\n __decorate$9([\n Event()\n ], Signature.prototype, \"beforeSave\", void 0);\n __decorate$9([\n Event()\n ], Signature.prototype, \"change\", void 0);\n __decorate$9([\n Event()\n ], Signature.prototype, \"created\", void 0);\n Signature = __decorate$9([\n NotifyPropertyChanges\n ], Signature);\n return Signature;\n}(SignatureBase));\n\nvar __extends$b = (undefined && undefined.__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$a = (undefined && undefined.__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};\nvar ICONCSS = 'e-rating-icon e-icons e-star-filled';\nvar ITEMLIST = 'e-rating-item-list';\nvar ITEMCONTAINER = 'e-rating-item-container';\nvar SELECTED = 'e-rating-selected';\nvar INTERMEDIATE = 'e-rating-intermediate';\nvar LABEL = 'e-rating-label';\nvar RESET = 'e-icons e-reset';\nvar HIDDEN = 'e-rating-hidden';\nvar DISABLED$2 = 'e-disabled';\nvar READONLY = 'e-rating-readonly';\nvar RTL$2 = 'e-rtl';\nvar ANIMATION = 'e-rating-animation';\nvar FULLTEMPLATE = 'e-rating-full';\nvar EMPTYTEMPLATE = 'e-rating-empty';\nvar SELECTEDVALUE = 'e-selected-value';\nvar RATINGVALUE = '--rating-value';\n/**\n * Defines where to position the label in rating\n */\nvar LabelPosition;\n(function (LabelPosition) {\n /**\n * The label is positioned at the top center of the rating component.\n */\n LabelPosition[\"Top\"] = \"Top\";\n /**\n * The label is positioned at the bottom center of the rating component.\n */\n LabelPosition[\"Bottom\"] = \"Bottom\";\n /**\n * The label is positioned at the left side of the rating component.\n */\n LabelPosition[\"Left\"] = \"Left\";\n /**\n * The label is positioned at the right side of the rating component.\n */\n LabelPosition[\"Right\"] = \"Right\";\n})(LabelPosition || (LabelPosition = {}));\n/**\n * Defines the precision type of the rating.\n * It is used to component the granularity of the rating, allowing users to provide ratings with varying levels of precision.\n */\nvar PrecisionType;\n(function (PrecisionType) {\n /**\n * The rating is increased in whole number increments.\n */\n PrecisionType[\"Full\"] = \"Full\";\n /**\n * The rating is increased in increments of 0.5 (half).\n */\n PrecisionType[\"Half\"] = \"Half\";\n /**\n * The rating is increased in increments of 0.25 (quarter).\n */\n PrecisionType[\"Quarter\"] = \"Quarter\";\n /**\n * The rating is increased in increments of 0.1.\n */\n PrecisionType[\"Exact\"] = \"Exact\";\n})(PrecisionType || (PrecisionType = {}));\n/**\n * The Rating component allows the user to rate something by clicking on a set of symbols on a numeric scale.\n * This allows users to provide feedback or ratings for products, services, or content.\n *\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Rating = /** @__PURE__ @class */ (function (_super) {\n __extends$b(Rating, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {RatingModel} options - Specifies the rating model\n * @param {string|HTMLButtonElement} element - Specifies the target element\n */\n function Rating(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.itemElements = [];\n return _this;\n }\n Rating.prototype.preRender = function () {\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.keyConfigs = {\n downarrow: 'downarrow',\n leftarrow: 'leftarrow',\n rightarrow: 'rightarrow',\n uparrow: 'uparrow',\n space: 'space'\n };\n this.tooltipOpen = false;\n this.isTouchSelected = false;\n };\n Rating.prototype.render = function () {\n this.initialize();\n this.updateMinValue();\n this.updateTemplateFunction();\n this.triggerChange(null, this.value, false);\n this.renderItems();\n this.displayLabel();\n };\n Rating.prototype.initialize = function () {\n this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-container ' });\n this.element.parentNode.insertBefore(this.wrapper, this.element);\n this.wrapper.appendChild(this.element);\n if ((this.element.getAttribute('name') == null)) {\n this.element.setAttribute('name', this.element.id);\n }\n attributes(this.element, { 'aria-label': 'rating' });\n this.renderItemList();\n this.updateReset();\n if (this.readOnly) {\n this.wrapper.classList.add(READONLY);\n }\n if (!this.visible) {\n this.wrapper.classList.add(HIDDEN);\n }\n if (this.enableRtl) {\n this.wrapper.classList.add(RTL$2);\n }\n if (this.enableAnimation) {\n this.wrapper.classList.add(ANIMATION);\n }\n if (this.cssClass) {\n addClass([this.wrapper], this.cssClass.split(' '));\n }\n this.updateTooltip();\n this.wireKeyboardEvent();\n this.updateDisabled();\n };\n Rating.prototype.updateDisabled = function () {\n this.wrapper.classList[this.disabled ? 'add' : 'remove'](DISABLED$2);\n attributes(this.ratingItemList, { 'tabindex': (this.disabled) ? '-1' : '0' });\n this.updateResetButton();\n };\n Rating.prototype.updateResetButton = function () {\n if (this.allowReset) {\n var isDisabled = (this.value <= this.min) || this.disabled;\n this.resetElement.classList[isDisabled ? 'add' : 'remove'](DISABLED$2);\n attributes(this.resetElement, { 'tabindex': (isDisabled ? '-1' : '0'), 'aria-hidden': isDisabled.toString() });\n }\n };\n Rating.prototype.renderItemList = function () {\n var _this = this;\n this.ratingItemList = this.createElement('div', {\n className: ITEMLIST,\n id: this.element.id + '_item-list'\n });\n attributes(this.ratingItemList, { 'aria-label': 'rating', 'role': 'slider' });\n this.wrapper.appendChild(this.ratingItemList);\n EventHandler.add(this.ratingItemList, 'touchmove', function (e) { return _this.touchMoveHandler(e); }, this);\n EventHandler.add(this.ratingItemList, Browser.touchEndEvent, this.touchEndHandler, this);\n };\n Rating.prototype.touchMoveHandler = function (e) {\n if (!this.isTouchSelected) {\n this.wrapper.classList.add('e-rating-touch');\n this.isTouchSelected = true;\n }\n this.wrapper.classList.add('e-touch-select');\n var rect = this.ratingItemList.getBoundingClientRect();\n var x = e.touches[0].clientX - rect.x;\n var currValue = (x / rect.width) * this.itemsCount;\n currValue = (this.enableRtl) ? (this.itemsCount - currValue) : currValue;\n currValue = currValue < this.min ? this.min : currValue > this.itemsCount ? this.itemsCount : currValue;\n currValue = this.validateValue(currValue);\n var element = currValue === 0 ? null : this.itemElements[parseInt((Math.ceil(currValue) - 1).toString(), 10)];\n if (currValue === this.currentValue) {\n if (this.showTooltip && element) {\n this.openRatingTooltip(element, false);\n }\n return;\n }\n var previousValue = this.currentValue;\n this.triggerChange(e, currValue);\n this.updateCurrentValue(currValue);\n if (this.showTooltip) {\n if (element) {\n if (Math.ceil(currValue) !== Math.ceil(previousValue)) {\n this.closeRatingTooltip();\n }\n this.openRatingTooltip(element, true);\n }\n else {\n this.closeRatingTooltip();\n }\n }\n };\n Rating.prototype.touchEndHandler = function () {\n this.closeRatingTooltip();\n this.wrapper.classList.remove('e-touch-select');\n };\n Rating.prototype.updateTemplateFunction = function () {\n this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;\n this.fullTemplateFunction = this.fullTemplate ? this.getTemplateString(this.fullTemplate) : null;\n };\n Rating.prototype.renderItems = function () {\n var _this = this;\n for (var i = 0; i < this.itemsCount; i++) {\n var ratingItemContainer = this.createElement('span', { className: ITEMCONTAINER });\n var spanItem = this.createElement('span', { className: 'e-rating-item' });\n var ratingValue = this.getRatingValue(this.value, i);\n this.renderItemContent(spanItem, ratingValue, i, false);\n ratingItemContainer.appendChild(spanItem);\n this.wireItemsEvents(ratingItemContainer, i + 1);\n this.itemElements.push(ratingItemContainer);\n var eventArgs = { element: ratingItemContainer, value: i + 1 };\n this.trigger('beforeItemRender', eventArgs, function (args) {\n _this.ratingItemList.appendChild(args.element);\n });\n }\n attributes(this.ratingItemList, { 'aria-valuemax': this.itemsCount.toString() });\n this.updateItemValue(false);\n };\n Rating.prototype.renderItemContent = function (spanEle, val, index, isrerender) {\n if (isrerender) {\n this.removeItemContent(spanEle);\n }\n if (this.fullTemplate && val === 1) {\n spanEle.classList.add(FULLTEMPLATE);\n append(this.fullTemplateFunction({ index: index, ratingValue: val }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate), spanEle);\n }\n else if (this.emptyTemplate) {\n spanEle.classList.add(EMPTYTEMPLATE);\n append(this.emptyTemplateFunction({ index: index, ratingValue: val }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate'), this.isStringTemplate), spanEle);\n }\n else {\n addClass([spanEle], ICONCSS.split(' '));\n }\n };\n Rating.prototype.removeItemContent = function (spanEle) {\n spanEle.classList.remove(FULLTEMPLATE, EMPTYTEMPLATE);\n removeClass([spanEle], ICONCSS.split(' '));\n if (spanEle.firstChild) {\n spanEle.innerHTML = '';\n }\n };\n Rating.prototype.updateTooltip = function () {\n if (this.showTooltip) {\n this.tooltipObj = new Tooltip({\n target: '.e-rating-item-container', windowCollision: true,\n opensOn: 'Custom', cssClass: this.cssClass ? ('e-rating-tooltip ' + this.cssClass) : 'e-rating-tooltip'\n });\n this.tooltipObj.appendTo(this.ratingItemList);\n }\n else {\n if (!isNullOrUndefined(this.tooltipObj)) {\n this.tooltipObj.destroy();\n this.tooltipObj = null;\n }\n }\n };\n Rating.prototype.updateMinValue = function () {\n this.setProperties({ min: this.validateValue(this.min) }, true);\n if (this.min > 0 && this.value < this.min) {\n this.triggerChange(null, this.min, false);\n }\n attributes(this.ratingItemList, { 'aria-valuemin': this.min.toString() });\n };\n Rating.prototype.validateValue = function (currentValue) {\n if (currentValue > this.itemsCount) {\n currentValue = this.itemsCount;\n }\n else if (currentValue < 0) {\n currentValue = 0;\n }\n else {\n currentValue = ((this.precision === PrecisionType.Full) || this.enableSingleSelection) ? Math.round(currentValue) :\n (this.precision === PrecisionType.Half) ? (Math.round(currentValue * 2) / 2) :\n (this.precision === PrecisionType.Quarter) ? (Math.round(currentValue * 4) / 4) : (Math.round(currentValue * 10) / 10);\n }\n return currentValue;\n };\n Rating.prototype.getRatingValue = function (value, i) {\n return (this.enableSingleSelection) ? (((value > i) && (value <= i + 1)) ? 1 : 0) :\n (value >= i + 1) ? 1 : ((value < i) ? 0 : (value - i));\n };\n Rating.prototype.updateItemValue = function (isUpdate) {\n if (isUpdate === void 0) { isUpdate = true; }\n if (isUpdate && this.isReact) {\n this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);\n }\n for (var i = 0; i < this.itemsCount; i++) {\n var itemElement = this.itemElements[parseInt(i.toString(), 10)];\n itemElement.classList.remove(SELECTED, INTERMEDIATE, SELECTEDVALUE);\n var ratingValue = this.getRatingValue(this.currentValue, i);\n if (ratingValue === 1) {\n itemElement.classList.add(SELECTED);\n }\n else if (ratingValue > 0) {\n itemElement.classList.add(INTERMEDIATE);\n }\n else if ((this.precision === PrecisionType.Full) && (i + 1 <= this.value) && (!this.enableSingleSelection)) {\n itemElement.classList.add(SELECTEDVALUE);\n }\n if (isUpdate) {\n this.updateItemContent(ratingValue, i);\n }\n itemElement.style.setProperty(RATINGVALUE, (ratingValue * 100) + '%');\n itemElement.classList[((this.value === 0) && (i === 0)) || (this.value === i + 1) || ((ratingValue > 0) && (ratingValue < 1)) ? 'add' : 'remove']('e-rating-focus');\n }\n if (isUpdate) {\n this.renderReactTemplates();\n }\n this.updateResetButton();\n attributes(this.ratingItemList, { 'aria-valuenow': this.currentValue.toString() });\n attributes(this.element, { 'value': this.value.toString() });\n };\n Rating.prototype.updateItemContent = function (ratingValue, index) {\n if (!this.fullTemplate && !this.emptyTemplate) {\n return;\n }\n var spanEle = this.itemElements[parseInt(index.toString(), 10)].querySelector('.e-rating-item');\n if (this.fullTemplate && ratingValue === 1) {\n if (!this.isReact && spanEle.classList.contains(FULLTEMPLATE)) {\n return;\n }\n this.removeItemContent(spanEle);\n spanEle.classList.add(FULLTEMPLATE);\n append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate), spanEle);\n }\n else if (this.emptyTemplate) {\n if (!this.isReact && spanEle.classList.contains(EMPTYTEMPLATE)) {\n return;\n }\n this.removeItemContent(spanEle);\n spanEle.classList.add(EMPTYTEMPLATE);\n append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate), spanEle);\n }\n else {\n this.removeItemContent(spanEle);\n addClass([spanEle], ICONCSS.split(' '));\n }\n };\n Rating.prototype.updateTooltipContent = function (isChange) {\n var _this = this;\n if (this.showTooltip) {\n if (this.isReact) {\n this.clearTemplate(['ratingTooltipTemplate']);\n }\n var content_1;\n if (this.tooltipTemplate) {\n content_1 = this.createElement('span', { className: 'e-rating-tooltip-content' });\n var templateFunction = this.getTemplateString(this.tooltipTemplate);\n append(templateFunction({ value: this.currentValue }, this, 'ratingTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate), content_1);\n this.tooltipObj.setProperties({ content: content_1 }, isChange);\n if (this.isAngular) {\n setTimeout(function () {\n var ratingSpan = _this.ratingItemList.querySelectorAll('.' + ITEMCONTAINER + '.' + SELECTED);\n _this.tooltipObj.refresh(ratingSpan[ratingSpan.length - 1]);\n });\n }\n }\n else {\n content_1 = this.currentValue.toString();\n this.tooltipObj.setProperties({ content: initializeCSPTemplate(function () { return content_1; }) }, isChange);\n }\n this.renderReactTemplates();\n }\n };\n Rating.prototype.getTemplateString = function (template) {\n var stringContent = '';\n try {\n if (typeof template !== 'function') {\n var tempEle = select(template);\n if (tempEle) {\n //Return innerHTML incase of jsrenderer script else outerHTML\n stringContent = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;\n }\n else {\n stringContent = template;\n }\n }\n else {\n stringContent = template;\n }\n }\n catch (e) {\n stringContent = template;\n }\n return compile(stringContent);\n };\n Rating.prototype.displayLabel = function () {\n if (this.showLabel) {\n this.spanLabel = this.createElement('span', { className: LABEL });\n this.updateLabel();\n this.updateLabelPosition();\n }\n else {\n if (this.wrapper.contains(this.spanLabel)) {\n remove(this.spanLabel);\n this.spanLabel = null;\n }\n }\n };\n Rating.prototype.updateLabel = function () {\n if (this.showLabel) {\n if (this.labelTemplate) {\n if (this.isReact) {\n this.clearTemplate(['ratingLabelTemplate']);\n }\n if (this.spanLabel.firstChild) {\n this.spanLabel.innerHTML = '';\n }\n var templateFunction = this.getTemplateString(this.labelTemplate);\n append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate), this.spanLabel);\n this.renderReactTemplates();\n }\n else {\n this.spanLabel.textContent = this.currentValue + ' / ' + this.itemsCount;\n }\n }\n };\n Rating.prototype.updateReset = function () {\n if (this.allowReset) {\n this.resetElement = this.createElement('span', {\n className: RESET,\n attrs: { 'aria-label': 'resetbutton', 'role': 'button' }\n });\n this.updateResetButton();\n EventHandler.add(this.resetElement, 'click', this.resetClicked, this);\n this.wrapper.insertBefore(this.resetElement, this.ratingItemList);\n }\n else {\n if (this.wrapper.contains(this.resetElement)) {\n remove(this.resetElement);\n this.resetElement = null;\n }\n }\n };\n Rating.prototype.updateLabelPosition = function () {\n this.clearLabelPosition();\n this.spanLabel.classList.add('e-label-' + this.labelPosition.toLowerCase());\n if (this.labelPosition === 'Left' || this.labelPosition === 'Top') {\n this.wrapper.firstChild.after(this.spanLabel);\n }\n else {\n this.wrapper.appendChild(this.spanLabel);\n }\n };\n Rating.prototype.clearLabelPosition = function () {\n var removeCss = this.spanLabel.classList.value.match(/(e-label-[top|bottom|right|left]+)/g);\n if (removeCss) {\n removeClass([this.spanLabel], removeCss);\n }\n };\n Rating.prototype.wireItemsEvents = function (itemElement, index) {\n var _this = this;\n EventHandler.add(itemElement, 'click', function (e) { return _this.clickHandler(e); }, this);\n EventHandler.add(itemElement, 'mousemove', function (e) { return _this.mouseMoveHandler(index, e); }, this);\n EventHandler.add(itemElement, 'mouseleave', this.mouseLeaveHandler, this);\n };\n Rating.prototype.clickHandler = function (e) {\n this.currentValue = (this.min > 0 && this.currentValue < this.min) ? this.min : this.currentValue;\n this.triggerChange(e, this.currentValue);\n this.updateItemValue();\n this.updateLabel();\n this.updateResetButton();\n };\n Rating.prototype.updateValueChange = function (e, val, isInteracted) {\n if (isInteracted === void 0) { isInteracted = true; }\n this.triggerChange(e, val, isInteracted);\n this.updateItemValue();\n this.updateLabel();\n };\n Rating.prototype.triggerChange = function (e, val, isInteracted) {\n if (isInteracted === void 0) { isInteracted = true; }\n val = this.validateValue(val);\n this.currentValue = val;\n if (this.currentValue === this.value) {\n return;\n }\n var eventArgs = { event: e, isInteracted: isInteracted, value: val, previousValue: this.value };\n this.setProperties({ value: val }, true);\n this.trigger('valueChanged', eventArgs);\n };\n Rating.prototype.mouseMoveHandler = function (index, e) {\n if (this.isTouchSelected) {\n this.wrapper.classList.remove('e-rating-touch');\n this.isTouchSelected = false;\n }\n var currValue = this.calculateCurrentValue(index, e);\n currValue = this.validateValue(currValue);\n var element = this.itemElements[parseInt((index - 1).toString(), 10)];\n if (currValue === this.currentValue) {\n this.openRatingTooltip(element, false);\n return;\n }\n this.updateCurrentValue(currValue);\n this.openRatingTooltip(element, true);\n var eventArgs = { element: element, event: e, value: currValue };\n this.trigger('onItemHover', eventArgs);\n };\n Rating.prototype.openRatingTooltip = function (element, isChange) {\n if (this.showTooltip) {\n if (!this.tooltipOpen) {\n this.updateTooltipContent(false);\n this.tooltipObj.open(element);\n this.tooltipOpen = true;\n }\n else if (isChange) {\n this.updateTooltipContent(true);\n this.tooltipObj.refresh(element);\n }\n }\n };\n Rating.prototype.closeRatingTooltip = function () {\n if (this.tooltipOpen) {\n this.tooltipObj.close();\n this.tooltipOpen = false;\n }\n };\n Rating.prototype.updateCurrentValue = function (currValue) {\n this.currentValue = currValue;\n this.updateItemValue();\n this.updateLabel();\n };\n Rating.prototype.mouseLeaveHandler = function () {\n this.closeRatingTooltip();\n this.updateCurrentValue(this.value);\n };\n Rating.prototype.calculateCurrentValue = function (index, args) {\n var currentValue = index;\n if (!(this.enableSingleSelection || (this.precision === PrecisionType.Full))) {\n currentValue = args.offsetX / this.itemElements[index - 1].clientWidth;\n currentValue = (this.enableRtl) ? (1 - currentValue) : currentValue;\n if (this.precision === PrecisionType.Quarter) {\n currentValue = currentValue <= 0.25 ? 0.25 : currentValue <= 0.5 ? 0.5 : currentValue < 0.75 ? 0.75 : 1.0;\n }\n else if (this.precision === PrecisionType.Half) {\n currentValue = currentValue <= 0.5 ? 0.5 : 1;\n }\n currentValue = currentValue + index - 1;\n }\n return currentValue;\n };\n /**\n * Reset’s the value to minimum.\n *\n * {% codeBlock src='rating/reset/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n */\n Rating.prototype.reset = function () {\n this.resetClicked(null, false);\n };\n Rating.prototype.resetClicked = function (e, isInteracted) {\n if (isInteracted === void 0) { isInteracted = true; }\n this.updateValueChange(e, this.min, isInteracted);\n this.updateResetButton();\n };\n Rating.prototype.wireKeyboardEvent = function () {\n this.keyboardModuleRating = new KeyboardEvents(this.wrapper, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n };\n Rating.prototype.keyActionHandler = function (e) {\n e.preventDefault();\n if (this.disabled || this.readOnly) {\n return;\n }\n if (e.target.classList.contains(ITEMLIST)) {\n switch (e.action) {\n case 'uparrow':\n this.handleNavigation(e, true);\n break;\n case 'downarrow':\n this.handleNavigation(e, false);\n break;\n case 'leftarrow':\n this.handleNavigation(e, this.enableRtl);\n break;\n case 'rightarrow':\n this.handleNavigation(e, !this.enableRtl);\n break;\n }\n }\n if (this.allowReset && e.target.classList.contains('e-reset')) {\n switch (e.action) {\n case 'space':\n this.resetClicked(e);\n break;\n }\n }\n };\n Rating.prototype.handleNavigation = function (e, isIncrease) {\n if ((!isIncrease && (this.value > this.min)) || (isIncrease && (this.value < this.itemsCount))) {\n var currentValue = (this.precision === PrecisionType.Full || this.enableSingleSelection) ? 1 :\n (this.precision === PrecisionType.Half) ? 0.5 : (this.precision === PrecisionType.Quarter) ? 0.25 :\n Math.round(0.1 * 10) / 10;\n currentValue = isIncrease ? this.value + currentValue : this.value - currentValue;\n this.updateValueChange(e, (currentValue));\n this.updateResetButton();\n }\n };\n Rating.prototype.updateContent = function () {\n if (this.isReact) {\n this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);\n }\n for (var i = 0; i < this.itemsCount; i++) {\n var itemElement = this.itemElements[parseInt(i.toString(), 10)].firstElementChild;\n this.renderItemContent(itemElement, this.getRatingValue(this.value, i), i, true);\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n Rating.prototype.getModuleName = function () {\n return 'rating';\n };\n /**\n * To get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n Rating.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n Rating.prototype.removeItemElements = function () {\n for (var i = 0; i < this.itemElements.length; i++) {\n remove(this.itemElements[parseInt(i.toString(), 10)]);\n }\n this.itemElements = [];\n };\n /**\n * Destroys the Rating instance.\n *\n * @returns {void}\n */\n Rating.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n // unwires the events and detach the li elements\n this.removeItemElements();\n this.clearTemplate();\n if (this.spanLabel) {\n remove(this.spanLabel);\n this.spanLabel = null;\n }\n if (this.resetElement) {\n remove(this.resetElement);\n this.resetElement = null;\n }\n if (this.showTooltip) {\n this.tooltipObj.destroy();\n this.tooltipObj = null;\n }\n remove(this.ratingItemList);\n this.ratingItemList = null;\n this.wrapper.parentNode.insertBefore(this.element, this.wrapper);\n remove(this.wrapper);\n this.wrapper = null;\n this.keyboardModuleRating.destroy();\n this.keyboardModuleRating = null;\n ['value', 'aria-label', 'name'].forEach(function (attr) {\n _this.element.removeAttribute(attr);\n });\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RatingModel} newProp - Specifies new properties\n * @param {RatingModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n Rating.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 'value':\n this.updateValueChange(null, (this.value > this.min) ? this.value : this.min, false);\n break;\n case 'min':\n this.updateMinValue();\n this.updateItemValue();\n this.updateLabel();\n break;\n case 'showLabel':\n this.displayLabel();\n break;\n case 'visible':\n this.wrapper.classList[!this.visible ? 'add' : 'remove'](HIDDEN);\n break;\n case 'disabled':\n this.updateDisabled();\n break;\n case 'readOnly':\n this.wrapper.classList[this.readOnly ? 'add' : 'remove'](READONLY);\n break;\n case 'allowReset':\n this.updateReset();\n break;\n case 'enableRtl':\n this.wrapper.classList[this.enableRtl ? 'add' : 'remove'](RTL$2);\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.wrapper], newProp.cssClass.split(' '));\n }\n if (this.tooltipObj) {\n this.tooltipObj.setProperties({ cssClass: this.cssClass ? ('e-rating-tooltip ' + this.cssClass) : 'e-rating-tooltip' });\n }\n break;\n case 'labelPosition':\n this.updateLabelPosition();\n break;\n case 'showTooltip':\n this.updateTooltip();\n break;\n case 'precision':\n this.updateMinValue();\n this.triggerChange(null, this.value, false);\n this.updateItemValue();\n this.updateLabel();\n break;\n case 'enableSingleSelection':\n //To validate the value against single selection and update the items, label + trigger change event if value changed\n this.updateValueChange(null, this.currentValue, false);\n break;\n case 'enableAnimation':\n this.wrapper.classList[this.enableAnimation ? 'add' : 'remove'](ANIMATION);\n break;\n case 'emptyTemplate':\n case 'fullTemplate':\n this.updateTemplateFunction();\n this.updateContent();\n break;\n case 'labelTemplate':\n this.updateLabel();\n break;\n case 'itemsCount':\n this.removeItemElements();\n this.renderItems();\n this.updateLabel();\n break;\n }\n }\n };\n __decorate$a([\n Property(false)\n ], Rating.prototype, \"allowReset\", void 0);\n __decorate$a([\n Property('')\n ], Rating.prototype, \"cssClass\", void 0);\n __decorate$a([\n Property(false)\n ], Rating.prototype, \"disabled\", void 0);\n __decorate$a([\n Property('')\n ], Rating.prototype, \"emptyTemplate\", void 0);\n __decorate$a([\n Property(true)\n ], Rating.prototype, \"enableAnimation\", void 0);\n __decorate$a([\n Property(false)\n ], Rating.prototype, \"enableSingleSelection\", void 0);\n __decorate$a([\n Property('')\n ], Rating.prototype, \"fullTemplate\", void 0);\n __decorate$a([\n Property(5)\n ], Rating.prototype, \"itemsCount\", void 0);\n __decorate$a([\n Property(LabelPosition.Right)\n ], Rating.prototype, \"labelPosition\", void 0);\n __decorate$a([\n Property('')\n ], Rating.prototype, \"labelTemplate\", void 0);\n __decorate$a([\n Property(0.0)\n ], Rating.prototype, \"min\", void 0);\n __decorate$a([\n Property(PrecisionType.Full)\n ], Rating.prototype, \"precision\", void 0);\n __decorate$a([\n Property(false)\n ], Rating.prototype, \"readOnly\", void 0);\n __decorate$a([\n Property(false)\n ], Rating.prototype, \"showLabel\", void 0);\n __decorate$a([\n Property(true)\n ], Rating.prototype, \"showTooltip\", void 0);\n __decorate$a([\n Property('')\n ], Rating.prototype, \"tooltipTemplate\", void 0);\n __decorate$a([\n Property(0.0)\n ], Rating.prototype, \"value\", void 0);\n __decorate$a([\n Property(true)\n ], Rating.prototype, \"visible\", void 0);\n __decorate$a([\n Event()\n ], Rating.prototype, \"beforeItemRender\", void 0);\n __decorate$a([\n Event()\n ], Rating.prototype, \"created\", void 0);\n __decorate$a([\n Event()\n ], Rating.prototype, \"onItemHover\", void 0);\n __decorate$a([\n Event()\n ], Rating.prototype, \"valueChanged\", void 0);\n Rating = __decorate$a([\n NotifyPropertyChanges\n ], Rating);\n return Rating;\n}(Component));\n\nvar __extends$c = (undefined && undefined.__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$b = (undefined && undefined.__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};\nvar INPUTFIELD = 'e-otp-input-field';\nvar RTL$3 = 'e-rtl';\n/**\n * Specifies the type of input for the Otp (One-Time Password) input component.\n */\nvar OtpInputType;\n(function (OtpInputType) {\n /**\n * Specifies the type of input to be number for the Otp input.\n */\n OtpInputType[\"Number\"] = \"number\";\n /**\n * Specifies the type of input to be text for the Otp input.\n */\n OtpInputType[\"Text\"] = \"text\";\n /**\n * Specifies the type of input to be password for the Otp input.\n */\n OtpInputType[\"Password\"] = \"password\";\n})(OtpInputType || (OtpInputType = {}));\n/**\n * Specifies the style variant for the Otp (One-Time Password) input component.\n */\nvar OtpInputStyle;\n(function (OtpInputStyle) {\n /**\n * Specifies the style of the Otp input to be outlined.\n */\n OtpInputStyle[\"Outlined\"] = \"outlined\";\n /**\n * Specifies the style of the Otp input to be underlined.\n */\n OtpInputStyle[\"Underlined\"] = \"underlined\";\n /**\n * Specifies the style of the Otp input to be filled.\n */\n OtpInputStyle[\"Filled\"] = \"filled\";\n})(OtpInputStyle || (OtpInputStyle = {}));\n/**\n * Enum for the case transformation options for OTP input text.\n *\n * @readonly\n * @enum {string}\n */\nvar TextTransform;\n(function (TextTransform) {\n /**\n * No case transformation. The input text remains unchanged.\n */\n TextTransform[\"None\"] = \"none\";\n /**\n * Convert the input text to uppercase.\n */\n TextTransform[\"Uppercase\"] = \"uppercase\";\n /**\n * Convert the input text to lowercase.\n */\n TextTransform[\"Lowercase\"] = \"lowercase\";\n})(TextTransform || (TextTransform = {}));\n/**\n * Represents the Otp component that allows the user to enter the otp values.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar OtpInput = /** @__PURE__ @class */ (function (_super) {\n __extends$c(OtpInput, _super);\n function OtpInput(options, element) {\n var _this = _super.call(this, options, element) || this;\n /* Private variables */\n _this.inputs = [];\n _this.previousValue = '';\n _this.separatorElements = [];\n _this.shouldFireFocus = true;\n _this.shouldFireBlur = true;\n _this.isFocusInCalled = false;\n _this.isFocusOutCalled = false;\n _this.handleWheelEvent = function (e) {\n e.preventDefault();\n };\n return _this;\n }\n OtpInput.prototype.preRender = function () {\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n OtpInput.prototype.render = function () {\n this.initialize();\n };\n OtpInput.prototype.initialize = function () {\n attributes(this.element, { 'role': 'group' });\n this.renderInputs();\n this.renderSeparator(1, this.inputs.length);\n this.addPlaceHolder();\n this.updateCssClass(this.cssClass);\n this.updateVariantClass();\n this.updateAriaLabel(this.ariaLabels);\n this.setElementAttributes(this.htmlAttributes, this.element);\n if (this.enableRtl) {\n this.element.classList.add(RTL$3);\n }\n this.previousValue = this.value.toString();\n if (this.autoFocus) {\n this.focusIn();\n }\n };\n OtpInput.prototype.renderInputs = function () {\n this.hiddenInputEle = this.createElement('input', {\n id: 'otpInput_hidden',\n attrs: {\n name: this.element.id,\n type: 'hidden',\n value: this.type === 'number' ? this.value.toString().replace(/\\D/g, '') : this.value.toString(),\n autoComplete: 'off'\n }\n });\n this.element.appendChild(this.hiddenInputEle);\n for (var i = 0; i < this.length; i++) {\n this.createOtpInput(i);\n }\n };\n OtpInput.prototype.createOtpInput = function (index) {\n var valueContainer = this.getDefaultValue();\n var inputValue = '';\n if (valueContainer) {\n if (this.type === 'number') {\n var valueAtIndex = valueContainer[parseInt(index.toString(), 10)];\n if (!isNaN(Number(valueAtIndex))) {\n inputValue = valueAtIndex;\n }\n }\n else {\n inputValue = valueContainer[parseInt(index.toString(), 10)] || '';\n }\n }\n var inputEle = this.createElement('input', {\n id: this.element.id + \"-\" + (index + 1),\n className: INPUTFIELD + ' ' + 'e-input',\n attrs: {\n maxlength: '1',\n type: this.type,\n inputmode: 'inputmode' in this.htmlAttributes ? this.htmlAttributes['inputmode'] : (this.type === 'number' ? 'numeric' : 'text')\n }\n });\n if (this.disabled) {\n inputEle.setAttribute('disabled', 'disabled');\n }\n this.element.appendChild(inputEle);\n this.inputs.push(inputEle);\n if (inputValue) {\n inputEle.value = inputValue;\n }\n this.wireEvents(inputEle, index);\n };\n OtpInput.prototype.renderSeparator = function (index, length) {\n if (this.separator.length > 0) {\n for (var i = index; i < length; i++) {\n var separatorElement = this.createElement('span', {\n className: 'e-otp-separator'\n });\n separatorElement.textContent = this.separator;\n this.separatorElements.push(separatorElement);\n this.element.insertBefore(separatorElement, this.inputs[parseInt(i.toString(), 10)]);\n }\n }\n };\n OtpInput.prototype.updateSeparatorValue = function () {\n if (this.separator === '') {\n for (var i = 0; i < this.separatorElements.length; i++) {\n remove(this.separatorElements[parseInt(i.toString(), 10)]);\n }\n this.separatorElements = [];\n return;\n }\n for (var i = 0; i < this.separatorElements.length; i++) {\n this.separatorElements[parseInt(i.toString(), 10)].textContent = this.separator;\n }\n };\n OtpInput.prototype.addPlaceHolder = function () {\n for (var i = 0; i < this.inputs.length; i++) {\n this.setElementAttributes({ 'placeholder': this.placeholder.length === 1 || this.placeholder.length === 0 ? this.placeholder : this.placeholder.charAt(i) }, this.inputs[parseInt(i.toString(), 10)]);\n }\n };\n OtpInput.prototype.updateInputType = function (inputType) {\n var _this = this;\n this.inputs.forEach(function (input) {\n input.type = inputType;\n input.setAttribute('inputmode', 'inputmode' in _this.htmlAttributes ? _this.htmlAttributes['inputmode'] : (inputType === 'number' ? 'numeric' : 'text'));\n });\n };\n OtpInput.prototype.getDefaultValue = function () {\n var extractedValue = typeof this.value === 'number' ? this.value.toString() : this.value;\n if (this.textTransform) {\n extractedValue = this.getTransformedText(extractedValue);\n }\n // To remove the white space if present.\n var value = extractedValue.replace(/\\s/g, '');\n if (value.length > 0) {\n return value.split('');\n }\n return undefined;\n };\n OtpInput.prototype.getTransformedText = function (transformingText) {\n var transformedText = this.textTransform.toLowerCase() === TextTransform.Lowercase ? transformingText.toLowerCase() :\n this.textTransform.toLowerCase() === TextTransform.Uppercase ? transformingText.toUpperCase() : transformingText;\n return transformedText;\n };\n OtpInput.prototype.handleInputChange = function (index, event) {\n var currentInputElement = this.inputs[parseInt(index.toString(), 10)];\n if (currentInputElement && index < this.length - 1 && currentInputElement.value.length > 0) {\n var nextInputElement = this.inputs[parseInt(index.toString(), 10) + 1];\n this.shouldFireFocus = this.shouldFireBlur = false;\n nextInputElement.focus();\n if (nextInputElement && nextInputElement.value.length > 0) {\n nextInputElement.select();\n }\n }\n var target = event.target;\n if (target.value.length > 1) {\n target.value = target.value.slice(0, 1);\n }\n if (this.textTransform) {\n target.value = this.getTransformedText(target.value);\n }\n this.triggerInputEvent(index, event);\n this.triggerValuechanged(event, true);\n };\n OtpInput.prototype.handleKeyAction = function (index, event) {\n if (event.key.length > 1 && !((index === 0 && event.key === 'Backspace') ||\n (index === this.length - 1 && event.key === 'Delete'))) {\n this.shouldFireFocus = this.shouldFireBlur = false;\n }\n var currentInputElement = this.inputs[parseInt(index.toString(), 10)];\n var previousInputElement = this.inputs[parseInt(index.toString(), 10) - 1];\n var nextInputElement = this.inputs[parseInt(index.toString(), 10) + 1];\n if (event.key === 'Delete') {\n var value = '';\n if (currentInputElement.value.length > 0) {\n value = currentInputElement.value;\n currentInputElement.value = '';\n }\n else {\n if (index !== this.inputs.length - 1) {\n value = nextInputElement.value;\n nextInputElement.value = '';\n nextInputElement.focus();\n }\n }\n if (value.length > 0) {\n this.triggerInputEvent(index, event);\n }\n }\n else if (event.key === 'Backspace') {\n if (index !== 0 && currentInputElement.value.length === 0) {\n var previousValue = previousInputElement.value;\n previousInputElement.value = '';\n previousInputElement.focus();\n if (previousValue.length > 0) {\n this.triggerInputEvent(index, event);\n }\n }\n }\n else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n if (event.key === 'ArrowLeft') {\n if (index > 0) {\n previousInputElement.focus();\n previousInputElement.select();\n }\n }\n else {\n if (index < this.inputs.length - 1) {\n nextInputElement.focus();\n nextInputElement.select();\n }\n }\n event.preventDefault();\n }\n else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n }\n else {\n if (event.key !== 'Tab' && !event.shiftKey && !event.ctrlKey) {\n if (this.type === 'number' && (/\\D/.test(event.key.toLocaleLowerCase()))) {\n event.preventDefault();\n }\n }\n }\n };\n OtpInput.prototype.handleSelection = function (index) {\n var currentInputElement = this.inputs[parseInt(index.toString(), 10)];\n if (currentInputElement.value) {\n currentInputElement.select();\n }\n };\n OtpInput.prototype.handleFocus = function (index, event) {\n addClass([this.inputs[parseInt(index.toString(), 10)]], 'e-otp-input-focus');\n if (this.shouldFireFocus) {\n var eventArgs = {\n element: this.element,\n event: event,\n index: index,\n isInteracted: this.isFocusInCalled ? false : true,\n value: this.value\n };\n this.trigger('focus', eventArgs);\n }\n this.shouldFireFocus = true;\n };\n OtpInput.prototype.handleBlur = function (index, event) {\n removeClass([this.inputs[parseInt(index.toString(), 10)]], 'e-otp-input-focus');\n if (this.shouldFireBlur) {\n var eventArgs = {\n element: this.element,\n event: event,\n value: this.value,\n index: index,\n isInteracted: this.isFocusOutCalled ? false : true\n };\n this.trigger('blur', eventArgs);\n }\n this.shouldFireBlur = true;\n };\n OtpInput.prototype.handlePaste = function (index, event) {\n var clipboardData = event.clipboardData;\n if (clipboardData) {\n var pastedText = clipboardData.getData('text');\n var pastedValues = pastedText.split('');\n var pastedValueIndex = 0;\n for (var i = index; i < this.inputs.length; i++) {\n if (pastedValues.length > 0 && pastedValues[parseInt(pastedValueIndex.toString(), 10)]) {\n this.inputs[parseInt(i.toString(), 10)].value = pastedValues[parseInt(pastedValueIndex.toString(), 10)];\n pastedValueIndex++;\n this.updateValueProperty();\n }\n }\n this.focusIn();\n this.triggerValuechanged(event, true);\n }\n };\n OtpInput.prototype.triggerInputEvent = function (index, event) {\n var previousValue = this.value.toString();\n this.updateValueProperty();\n var inputEventArgs = {\n element: this.element,\n event: event,\n previousValue: previousValue,\n value: this.value.toString(),\n index: index\n };\n this.trigger('input', inputEventArgs);\n };\n OtpInput.prototype.triggerValuechanged = function (event, isInteracted) {\n if (this.length === this.value.toString().length) {\n if (this.previousValue !== this.value) {\n var eventArgs = {\n element: this.element,\n event: event,\n isInteracted: isInteracted ? isInteracted : false,\n previousValue: this.previousValue,\n value: this.value\n };\n this.trigger('valueChanged', eventArgs);\n this.previousValue = this.value.toString();\n }\n }\n };\n OtpInput.prototype.wireEvents = function (inputEle, index) {\n EventHandler.add(inputEle, 'focus', this.handleFocus.bind(this, index), this);\n EventHandler.add(inputEle, 'blur', this.handleBlur.bind(this, index), this);\n EventHandler.add(inputEle, 'input', this.handleInputChange.bind(this, index), this);\n EventHandler.add(inputEle, 'keydown', this.handleKeyAction.bind(this, index), this);\n EventHandler.add(inputEle, 'click', this.handleSelection.bind(this, index), this);\n EventHandler.add(inputEle, 'paste', this.handlePaste.bind(this, index), this);\n EventHandler.add(inputEle, 'wheel', this.handleWheelEvent, this);\n };\n OtpInput.prototype.unWireEvents = function () {\n for (var i = 0; i < this.inputs.length; i++) {\n var currentInputElement = this.inputs[parseInt(i.toString(), 10)];\n EventHandler.remove(currentInputElement, 'focus', this.handleFocus.bind(this, i));\n EventHandler.remove(currentInputElement, 'blur', this.handleBlur.bind(this, i));\n EventHandler.remove(currentInputElement, 'input', this.handleInputChange.bind(this, i));\n EventHandler.remove(currentInputElement, 'keydown', this.handleKeyAction.bind(this, i));\n EventHandler.remove(currentInputElement, 'click', this.handleSelection.bind(this, i));\n EventHandler.remove(currentInputElement, 'paste', this.handlePaste.bind(this, i));\n EventHandler.remove(currentInputElement, 'wheel', this.handleWheelEvent);\n }\n };\n OtpInput.prototype.updateValueProperty = function () {\n var value = '';\n this.inputs.forEach(function (input) {\n value += input.value;\n });\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.value = typeof this.value === 'number' ? parseInt(value, 10) : value;\n this.isProtectedOnChange = prevOnChange;\n this.hiddenInputEle.value = this.value.toString();\n };\n OtpInput.prototype.updateInputValue = function (previousValue) {\n var stringifiedValue = this.value.toString();\n if (this.textTransform) {\n stringifiedValue = this.getTransformedText(stringifiedValue);\n }\n for (var i = 0; i < this.inputs.length; i++) {\n var isValueChanged = previousValue.toString().charAt(i) !== stringifiedValue.charAt(i);\n if (isValueChanged) {\n this.inputs[parseInt(i.toString(), 10)].value = stringifiedValue.charAt(i);\n this.hiddenInputEle.value = stringifiedValue;\n }\n }\n this.focusIn();\n };\n OtpInput.prototype.updateCssClass = function (addCss, removeCss) {\n if (removeCss === void 0) { removeCss = ''; }\n var _a, _b;\n var cssClasses;\n if (removeCss) {\n cssClasses = removeCss.trim().split(' ');\n (_a = this.element.classList).remove.apply(_a, cssClasses);\n }\n if (addCss) {\n cssClasses = addCss.trim().split(' ');\n (_b = this.element.classList).add.apply(_b, cssClasses);\n }\n };\n OtpInput.prototype.updateVariantClass = function () {\n var variantClass = this.stylingMode.toLocaleLowerCase();\n variantClass = variantClass === 'outlined' ? 'outline' : variantClass;\n if (variantClass === 'underlined' || variantClass === 'filled' || variantClass === 'outline') {\n removeClass([this.element], ['e-underlined', 'e-filled', 'e-outline']);\n addClass([this.element], \"e-\" + variantClass);\n }\n };\n OtpInput.prototype.updateAriaLabel = function (customAriaLabel) {\n this.inputs.forEach(function (input, index) {\n var defaultLabel = \"Enter Otp Character \" + (index + 1);\n var ariaLabel = customAriaLabel && customAriaLabel.length > 0\n ? customAriaLabel[parseInt(index.toString(), 10)] || defaultLabel\n : defaultLabel;\n input.setAttribute('aria-label', ariaLabel);\n });\n };\n OtpInput.prototype.updateDisabledState = function () {\n var _this = this;\n this.inputs.forEach(function (input) {\n if (_this.disabled) {\n input.setAttribute('disabled', 'disabled');\n }\n else {\n input.removeAttribute('disabled');\n }\n });\n };\n OtpInput.prototype.setElementAttributes = function (htmlAttributes, element) {\n if (!isNullOrUndefined(htmlAttributes)) {\n for (var key in htmlAttributes) {\n if (key === 'class') {\n var elementClass = htmlAttributes['class'].replace(/\\s+/g, ' ').trim();\n if (elementClass) {\n addClass([element], elementClass.split(' '));\n }\n }\n else if (key === 'inputmode') {\n this.setInputMode(htmlAttributes[\"\" + key]);\n }\n else if (key === 'name' && this.element.id === element.id) {\n this.hiddenInputEle.setAttribute(key, htmlAttributes[\"\" + key]);\n }\n else {\n element.setAttribute(key, htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n OtpInput.prototype.setInputMode = function (inputModeValue) {\n for (var i = 0; i < this.inputs.length; i++) {\n this.inputs[parseInt(i.toString(), 10)].setAttribute('inputmode', inputModeValue);\n }\n };\n OtpInput.prototype.handleLengthChange = function (currentValue, previousValue) {\n var isLengthAdded = (currentValue - previousValue) > 0;\n if (isLengthAdded) {\n for (var i = previousValue; i < currentValue; i++) {\n this.createOtpInput(i);\n }\n this.renderSeparator(previousValue, currentValue);\n this.addPlaceHolder();\n this.updateAriaLabel(this.ariaLabels);\n }\n else {\n if (currentValue >= 0 && this.inputs.length > 0) {\n for (var i = currentValue; i < this.inputs.length; i++) {\n remove(this.inputs[parseInt(i.toString(), 10)]);\n }\n this.inputs.splice(currentValue);\n if (this.separatorElements.length > 0) {\n // separator should be completely removed when length is 0 or 1;\n var index = currentValue === 0 ? 0 : currentValue - 1;\n for (var i = index; i < this.separatorElements.length; i++) {\n remove(this.separatorElements[parseInt(i.toString(), 10)]);\n }\n this.separatorElements.splice(index);\n }\n }\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n OtpInput.prototype.getModuleName = function () {\n return 'otpinput';\n };\n /**\n * To get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n OtpInput.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Destroy the Otp input.\n *\n * @returns {void}\n */\n OtpInput.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n for (var i = 0; i < this.inputs.length; i++) {\n remove(this.inputs[parseInt(i.toString(), 10)]);\n }\n for (var i = 0; i < this.separatorElements.length; i++) {\n remove(this.separatorElements[parseInt(i.toString(), 10)]);\n }\n remove(this.hiddenInputEle);\n removeClass([this.element], ['e-underlined', 'e-filled', 'e-outline', 'e-rtl']);\n if (this.cssClass) {\n removeClass([this.element], this.cssClass.trim().split(' '));\n }\n this.element.removeAttribute('role');\n this.inputs = [];\n this.separatorElements = [];\n this.hiddenInputEle = null;\n };\n /**\n * Sets the focus to the Otp input for interaction.\n *\n * @returns {void}\n */\n OtpInput.prototype.focusIn = function () {\n this.isFocusInCalled = true;\n var focusIndex = this.inputs.length - 1;\n for (var index = 0; index < this.inputs.length; index++) {\n if (!(this.inputs[parseInt(index.toString(), 10)].value.length > 0)) {\n focusIndex = index;\n break;\n }\n }\n this.inputs[parseInt(focusIndex.toString(), 10)].focus();\n this.isFocusInCalled = false;\n };\n /**\n * Remove the focus from Otp input, if it is in focus state.\n *\n * @returns {void}\n */\n OtpInput.prototype.focusOut = function () {\n this.isFocusOutCalled = true;\n this.inputs.forEach(function (input) {\n input.blur();\n });\n this.isFocusOutCalled = false;\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {OtpInputModel} newProp - Specifies new properties\n * @param {OtpInputModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n OtpInput.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 'textTransform':\n this.updateInputValue(this.value);\n break;\n case 'value':\n this.updateInputValue(oldProp.value);\n this.triggerValuechanged();\n break;\n case 'placeholder':\n this.addPlaceHolder();\n break;\n case 'disabled':\n this.updateDisabledState();\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'separator':\n if (oldProp.separator === '') {\n this.renderSeparator(1, this.inputs.length);\n }\n else {\n this.updateSeparatorValue();\n }\n break;\n case 'htmlAttributes':\n this.setElementAttributes(newProp.htmlAttributes, this.element);\n break;\n case 'type':\n this.updateInputType(newProp.type);\n break;\n case 'stylingMode':\n this.updateVariantClass();\n break;\n case 'ariaLabels':\n this.updateAriaLabel(newProp.ariaLabels);\n break;\n case 'length':\n this.handleLengthChange(newProp.length, oldProp.length);\n break;\n case 'enableRtl':\n this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL$3);\n break;\n case 'autoFocus':\n if (this.autoFocus) {\n this.focusIn();\n }\n break;\n }\n }\n };\n __decorate$b([\n Property(4)\n ], OtpInput.prototype, \"length\", void 0);\n __decorate$b([\n Property('')\n ], OtpInput.prototype, \"value\", void 0);\n __decorate$b([\n Property(OtpInputType.Number)\n ], OtpInput.prototype, \"type\", void 0);\n __decorate$b([\n Property('')\n ], OtpInput.prototype, \"separator\", void 0);\n __decorate$b([\n Property('')\n ], OtpInput.prototype, \"placeholder\", void 0);\n __decorate$b([\n Property(OtpInputStyle.Outlined)\n ], OtpInput.prototype, \"stylingMode\", void 0);\n __decorate$b([\n Property(false)\n ], OtpInput.prototype, \"disabled\", void 0);\n __decorate$b([\n Property('')\n ], OtpInput.prototype, \"cssClass\", void 0);\n __decorate$b([\n Property(false)\n ], OtpInput.prototype, \"autoFocus\", void 0);\n __decorate$b([\n Property(TextTransform.None)\n ], OtpInput.prototype, \"textTransform\", void 0);\n __decorate$b([\n Property({})\n ], OtpInput.prototype, \"htmlAttributes\", void 0);\n __decorate$b([\n Property([])\n ], OtpInput.prototype, \"ariaLabels\", void 0);\n __decorate$b([\n Event()\n ], OtpInput.prototype, \"created\", void 0);\n __decorate$b([\n Event()\n ], OtpInput.prototype, \"valueChanged\", void 0);\n __decorate$b([\n Event()\n ], OtpInput.prototype, \"focus\", void 0);\n __decorate$b([\n Event()\n ], OtpInput.prototype, \"blur\", void 0);\n __decorate$b([\n Event()\n ], OtpInput.prototype, \"input\", void 0);\n OtpInput = __decorate$b([\n NotifyPropertyChanges\n ], OtpInput);\n return OtpInput;\n}(Component));\n\nexport { AsyncSettings, ButtonsProps, ChatMessageRole, ColorPicker, ColorRangeData, ErrorOption, FilesProp, FormValidator, Input, LabelPosition, LimitData, MaskUndo, MaskedTextBox, NumericTextBox, OtpInput, OtpInputStyle, OtpInputType, PrecisionType, Rating, Signature, SignatureBase, Slider, SmartTextArea, TEXTBOX_FOCUS, TextArea, TextBox, TextTransform, TicksData, TooltipData, Uploader, applyMask, bindClearEvent, containerAttributes, createMask, escapeRegExp, getMaskedVal, getVal, maskInput, maskInputBlurHandler, maskInputDropHandler, maskInputFocusHandler, maskInputMouseDownHandler, maskInputMouseUpHandler, mobileRemoveFunction, regex, regularExpressions, setElementValue, setMaskValue, strippedValue, triggerFocus, unstrippedValue, unwireEvents, wireEvents };\n","import { isNullOrUndefined, getValue, extend, prepend, SanitizeHtmlHelper, merge, addClass, isVisible, attributes, append, compile, Property, ChildProperty, detach, removeClass, formatUnit, animationMode, Animation, closest, EventHandler, Touch, remove, rippleEffect, Complex, Event, NotifyPropertyChanges, Component, select, isBlazor, getComponent, getUniqueID, Draggable, compareElementParent, Base } from '@syncfusion/ej2-base';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\n\n/* eslint-disable no-inner-declarations */\nvar cssClass = {\n li: 'e-list-item',\n ul: 'e-list-parent e-ul',\n group: 'e-list-group-item',\n icon: 'e-list-icon',\n text: 'e-list-text',\n check: 'e-list-check',\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: 'e-list-url',\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: 'e-list-img',\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable'\n};\n/**\n * Base List Generator\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nvar ListBase;\n(function (ListBase) {\n /**\n *\n * Default mapped fields.\n */\n ListBase.defaultMappedFields = {\n id: 'id',\n text: 'text',\n url: 'url',\n value: 'value',\n isChecked: 'isChecked',\n enabled: 'enabled',\n expanded: 'expanded',\n selected: 'selected',\n iconCss: 'iconCss',\n child: 'child',\n isVisible: 'isVisible',\n hasChildren: 'hasChildren',\n tooltip: 'tooltip',\n htmlAttributes: 'htmlAttributes',\n urlAttributes: 'urlAttributes',\n imageAttributes: 'imageAttributes',\n imageUrl: 'imageUrl',\n groupBy: null,\n sortBy: null\n };\n var defaultAriaAttributes = {\n level: 1,\n listRole: 'presentation',\n itemRole: 'presentation',\n groupItemRole: 'group',\n itemText: 'list-item',\n wrapperRole: 'presentation'\n };\n var defaultListBaseOptions = {\n showCheckBox: false,\n showIcon: false,\n enableHtmlSanitizer: false,\n expandCollapse: false,\n fields: ListBase.defaultMappedFields,\n ariaAttributes: defaultAriaAttributes,\n listClass: '',\n itemClass: '',\n processSubChild: false,\n sortOrder: 'None',\n template: null,\n groupTemplate: null,\n headerTemplate: null,\n expandIconClass: 'e-icon-collapsible',\n moduleName: 'list',\n expandIconPosition: 'Right',\n itemNavigable: false\n };\n /**\n * Function helps to created and return the UL Li element based on your data.\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} [options] - Specifies the list options that need to provide.\n *\n * @param {boolean} [isSingleLevel] - Specifies the list options that need to provide.\n *\n * @param {any} [componentInstance] - Specifies the list options that need to provide.\n *\n * @returns {createElement} createListFromJson - Specifies the list options that need to provide.\n */\n function createList(createElement, dataSource, options, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var type = typeofData(dataSource).typeof;\n if (type === 'string' || type === 'number') {\n return createListFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n }\n else {\n return createListFromJson(createElement, dataSource, options, ariaAttributes.level, isSingleLevel, componentInstance);\n }\n }\n ListBase.createList = createList;\n /**\n * Function helps to created an element list based on string array input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {boolean} [isSingleLevel] - Specifies the list options that need to provide.\n *\n * @param {ListBaseOptions} [options] - Specifies the list options that need to provide.\n *\n * @param {any} [componentInstance] - Specifies the list options that need to provide.\n *\n * @returns {createElement} generateUL - returns the list options that need to provide.\n */\n function createListFromArray(createElement, dataSource, isSingleLevel, options, componentInstance) {\n var subChild = createListItemFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n return generateUL(createElement, subChild, null, options);\n }\n ListBase.createListFromArray = createListFromArray;\n /**\n * Function helps to created an element list based on string array input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {boolean} [isSingleLevel] - Specifies the list options that need to provide.\n *\n * @param {ListBaseOptions} [options] - Specifies the list options that need to provide.\n *\n * @param {any} [componentInstance] - Specifies the list options that need to provide.\n *\n * @returns {HTMLElement[]} subChild - returns the list options that need to provide.\n */\n function createListItemFromArray(createElement, dataSource, isSingleLevel, options, componentInstance) {\n var subChild = [];\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n var li = void 0;\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n options: curOpt\n };\n curOpt.itemCreating(curData);\n }\n if (isSingleLevel) {\n li = generateSingleLevelLI(createElement, dataSource[i], undefined, null, null, [], null, id, i, options);\n }\n else {\n li = generateLI(createElement, dataSource[i], undefined, null, null, options, componentInstance);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n item: li,\n options: curOpt\n };\n curOpt.itemCreated(curData);\n }\n subChild.push(li);\n }\n return subChild;\n }\n ListBase.createListItemFromArray = createListItemFromArray;\n /**\n * Function helps to created an element list based on array of JSON input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} [options] - Specifies the list options that need to provide.\n *\n * @param {number} [level] - Specifies the list options that need to provide.\n *\n * @param {boolean} [isSingleLevel] - Specifies the list options that need to provide.\n *\n * @param {any} [componentInstance] - Specifies the list options that need to provide.\n *\n * @returns {HTMLElement[]} child - returns the list options that need to provide.\n */\n function createListItemFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var fields = (componentInstance &&\n (componentInstance.getModuleName() === 'listview' || componentInstance.getModuleName() === 'multiselect'))\n ? curOpt.fields : extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var id;\n var checkboxElement = [];\n if (level) {\n ariaAttributes.level = level;\n }\n var child = [];\n var li;\n var anchorElement;\n if (dataSource && dataSource.length && !isNullOrUndefined(typeofData(dataSource).item) &&\n !Object.prototype.hasOwnProperty.call(typeofData(dataSource).item, fields.id)) {\n id = generateId(); // generate id for drop-down-list option.\n }\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], fields);\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreating(curData);\n }\n var curItem = dataSource[i];\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], fields);\n }\n if (Object.prototype.hasOwnProperty.call(fieldData, fields.id) && !isNullOrUndefined(fieldData[fields.id])) {\n id = fieldData[fields.id];\n }\n var innerEle = [];\n if (curOpt.showCheckBox) {\n if (curOpt.itemNavigable && (fieldData[fields.url] || fieldData[fields.urlAttributes])) {\n checkboxElement.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n else {\n innerEle.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n }\n if (isSingleLevel === true) {\n if (curOpt.showIcon && Object.prototype.hasOwnProperty.call(fieldData, fields.iconCss)\n && !isNullOrUndefined(fieldData[fields.iconCss])) {\n innerEle.push(createElement('span', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] }));\n }\n li = generateSingleLevelLI(createElement, curItem, fieldData, fields, curOpt.itemClass, innerEle, (Object.prototype.hasOwnProperty.call(curItem, 'isHeader') &&\n curItem.isHeader) ? true : false, id, i, options);\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n }\n else {\n li = generateLI(createElement, curItem, fieldData, fields, curOpt.itemClass, options, componentInstance);\n li.classList.add(cssClass.level + '-' + ariaAttributes.level);\n li.setAttribute('aria-level', ariaAttributes.level.toString());\n if (ariaAttributes.groupItemRole === 'presentation' || ariaAttributes.itemRole === 'presentation') {\n li.removeAttribute('aria-level');\n }\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n if (Object.prototype.hasOwnProperty.call(fieldData, fields.tooltip)) {\n var tooltipText = fieldData[fields.tooltip];\n if (options && options.enableHtmlSanitizer) {\n tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);\n }\n else {\n var tooltipTextElement = createElement('span', { innerHTML: tooltipText });\n tooltipText = tooltipTextElement.innerText;\n tooltipTextElement = null;\n }\n li.setAttribute('title', tooltipText);\n }\n if (Object.prototype.hasOwnProperty.call(fieldData, fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n var htmlAttributes = fieldData[fields.htmlAttributes];\n // Check if 'class' attribute is present and not an empty string\n if ('class' in htmlAttributes && typeof htmlAttributes['class'] === 'string' && htmlAttributes['class'].trim() === '') {\n delete htmlAttributes['class'];\n }\n setAttribute(li, htmlAttributes);\n }\n if (Object.prototype.hasOwnProperty.call(fieldData, fields.enabled) && fieldData[fields.enabled] === false) {\n li.classList.add(cssClass.disabled);\n }\n if (Object.prototype.hasOwnProperty.call(fieldData, fields.isVisible) && fieldData[fields.isVisible] === false) {\n li.style.display = 'none';\n }\n if (Object.prototype.hasOwnProperty.call(fieldData, fields.imageUrl) && !isNullOrUndefined(fieldData[fields.imageUrl])\n && !curOpt.template) {\n var attr = { src: fieldData[fields.imageUrl], alt: !isNullOrUndefined(fieldData.name) ? ('Displaying ' + fieldData.name + ' Image') : 'Displaying Image' };\n merge(attr, fieldData[fields.imageAttributes]);\n var imageElemnt = createElement('img', { className: cssClass.image, attrs: attr });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', imageElemnt);\n }\n else {\n prepend([imageElemnt], li.firstElementChild);\n }\n }\n if (curOpt.showIcon && Object.prototype.hasOwnProperty.call(fieldData, fields.iconCss) &&\n !isNullOrUndefined(fieldData[fields.iconCss]) && !curOpt.template) {\n var iconElement = createElement('div', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', iconElement);\n }\n else {\n prepend([iconElement], li.firstElementChild);\n }\n }\n if (innerEle.length) {\n prepend(innerEle, li.firstElementChild);\n }\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n processSubChild(createElement, fieldData, fields, dataSource, curOpt, li, ariaAttributes.level);\n }\n if (anchorElement) {\n addClass([li], [cssClass.navigable]);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n item: li,\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreated(curData);\n }\n checkboxElement = [];\n child.push(li);\n }\n return child;\n }\n ListBase.createListItemFromJson = createListItemFromJson;\n /**\n * Function helps to created an element list based on array of JSON input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} [options] - Specifies the list options that need to provide.\n *\n * @param {number} [level] - Specifies the list options that need to provide.\n *\n * @param {boolean} [isSingleLevel] - Specifies the list options that need to provide.\n *\n * @param {any} [componentInstance] - Specifies the list options that need to provide.\n *\n * @returns {createElement} generateUL - Specifies the list options that need to provide.\n */\n function createListFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var li = createListItemFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance);\n return generateUL(createElement, li, curOpt.listClass, options);\n }\n ListBase.createListFromJson = createListFromJson;\n /**\n * Return the next or previous visible element.\n *\n * @param {Element[]|NodeList} elementArray - An element array to find next or previous element.\n * @param {Element} element - An element to find next or previous after this element.\n * @param {boolean} [isPrevious] - Specify when the need get previous element from array.\n * @returns {Element|undefined} The next or previous visible element, or undefined if the element array is empty.\n */\n function getSiblingLI(elementArray, element, isPrevious) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n if (!elementArray || !elementArray.length) {\n return void 0;\n }\n var siblingLI;\n var liIndex;\n var liCollections = Array.prototype.slice.call(elementArray);\n if (element) {\n liIndex = indexOf(element, liCollections);\n }\n else {\n liIndex = (isPrevious === true ? liCollections.length : -1);\n }\n siblingLI = liCollections[liIndex + (isPrevious === true ? -1 : 1)];\n while (siblingLI && (!isVisible(siblingLI) || siblingLI.classList.contains(cssClass.disabled))) {\n liIndex = liIndex + (isPrevious === true ? -1 : 1);\n siblingLI = liCollections[liIndex];\n }\n return siblingLI;\n }\n ListBase.getSiblingLI = getSiblingLI;\n /**\n * Return the index of the li element\n *\n * @param {Element} item - An element to find next or previous after this element.\n * @param {Element[]} elementArray - An element array to find index of given li.\n * @returns {number} - The index of the item in the element array, or undefined if either parameter is false.\n */\n function indexOf(item, elementArray) {\n if (!elementArray || !item) {\n return void 0;\n }\n else {\n var liCollections = elementArray;\n liCollections = Array.prototype.slice.call(elementArray);\n return liCollections.indexOf(item);\n }\n }\n ListBase.indexOf = indexOf;\n /**\n * Returns the grouped data from given dataSource.\n *\n * @param {{Object}[]} dataSource - The JSON data which is necessary to process.\n * @param {FieldsMapping} fields - Fields that are mapped from the data source.\n * @param {SortOrder} [sortOrder='None'] - Specifies final result sort order. Defaults to 'None'.\n * @returns {Object[]} - The grouped data.\n */\n function groupDataSource(dataSource, fields, sortOrder) {\n if (sortOrder === void 0) { sortOrder = 'None'; }\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var cusQuery = new Query().group(curFields.groupBy);\n // need to remove once sorting issues fixed in DataManager\n cusQuery = addSorting(sortOrder, 'key', cusQuery);\n var ds = getDataSource(dataSource, cusQuery);\n dataSource = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n var grpItem = {};\n var hdr = 'isHeader';\n grpItem[curFields.text] = ds[j].key;\n grpItem[\"\" + hdr] = true;\n var newtext = curFields.text;\n if (newtext === 'id') {\n newtext = 'text';\n grpItem[\"\" + newtext] = ds[j].key;\n }\n grpItem._id = 'group-list-item-' + (ds[j].key ?\n ds[j].key.toString().trim() : 'undefined');\n grpItem.items = itemObj;\n dataSource.push(grpItem);\n for (var k = 0; k < itemObj.length; k++) {\n dataSource.push(itemObj[k]);\n }\n }\n return dataSource;\n }\n ListBase.groupDataSource = groupDataSource;\n /**\n * Returns a sorted query object.\n *\n * @param {SortOrder} sortOrder - Specifies that sort order.\n * @param {string} sortBy - Specifies sortBy fields.\n * @param {Query} query - Pass if any existing query.\n * @returns {Query} - The updated query object with sorting applied.\n */\n function addSorting(sortOrder, sortBy, query) {\n if (query === void 0) { query = new Query(); }\n if (sortOrder === 'Ascending') {\n query.sortBy(sortBy, 'ascending', true);\n }\n else if (sortOrder === 'Descending') {\n query.sortBy(sortBy, 'descending', true);\n }\n else {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i].fn === 'onSortBy') {\n query.queries.splice(i, 1);\n }\n }\n }\n return query;\n }\n ListBase.addSorting = addSorting;\n /**\n * Return an array of JSON Data that processed based on queries.\n *\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n *\n * @param {Query} query - Specifies query that need to process.\n *\n * @returns {Object[]} - An array of objects representing the retrieved data.\n */\n function getDataSource(dataSource, query) {\n return new DataManager(dataSource)\n .executeLocal(query);\n }\n ListBase.getDataSource = getDataSource;\n /**\n * Created JSON data based the UL and LI element\n *\n * @param {HTMLElement|Element} element - UL element that need to convert as a JSON\n * @param {ListBaseOptions} [options] - Specifies ListBase option for fields.\n * @returns {Object[]} - An array of objects representing the JSON data.\n */\n function createJsonFromElement(element, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var curEle = element.cloneNode(true);\n var jsonAr = [];\n curEle.classList.add('json-parent');\n var childs = curEle.querySelectorAll('.json-parent>li');\n curEle.classList.remove('json-parent');\n for (var i = 0; i < childs.length; i++) {\n var li = childs[i];\n var anchor = li.querySelector('a');\n var ul = li.querySelector('ul');\n var json = {};\n var childNodes = anchor ? anchor.childNodes : li.childNodes;\n var keys = Object.keys(childNodes);\n for (var i_1 = 0; i_1 < childNodes.length; i_1++) {\n if (!(childNodes[Number(keys[i_1])]).hasChildNodes()) {\n json[fields.text] = childNodes[Number(keys[i_1])].textContent;\n }\n }\n var attributes_1 = getAllAttributes(li);\n if (attributes_1.id) {\n json[fields.id] = attributes_1.id;\n delete attributes_1.id;\n }\n else {\n json[fields.id] = generateId();\n }\n if (Object.keys(attributes_1).length) {\n json[fields.htmlAttributes] = attributes_1;\n }\n if (anchor) {\n attributes_1 = getAllAttributes(anchor);\n if (Object.keys(attributes_1).length) {\n json[fields.urlAttributes] = attributes_1;\n }\n }\n if (ul) {\n json[fields.child] = createJsonFromElement(ul, options);\n }\n jsonAr.push(json);\n }\n return jsonAr;\n }\n ListBase.createJsonFromElement = createJsonFromElement;\n /**\n * Determines the type of data in an array of objects, strings, or numbers.\n *\n * @param {Object[] | string[] | number[]} data - The array containing objects, strings, or numbers.\n * @returns {{typeof: (string | null), item: (Object | string | number)}} - An object containing the type of data and the corresponding item.\n */\n function typeofData(data) {\n var match = { typeof: null, item: null };\n for (var i = 0; i < data.length; i++) {\n if (!isNullOrUndefined(data[i])) {\n return match = { typeof: typeof data[i], item: data[i] };\n }\n }\n return match;\n }\n /**\n * Sets attributes on an HTML element.\n *\n * @param {HTMLElement} element - The HTML element to set attributes on.\n * @param {Object.} elementAttributes - An object containing attribute names and their corresponding values.\n * @returns {void}\n */\n function setAttribute(element, elementAttributes) {\n var attr = {};\n merge(attr, elementAttributes);\n if (attr.class) {\n addClass([element], attr.class.split(' '));\n delete attr.class;\n }\n attributes(element, attr);\n }\n /**\n * Retrieves all attributes of an HTML element.\n *\n * @param {HTMLElement} element - The HTML element to retrieve attributes from.\n * @returns {Object.} - An object containing attribute names as keys and their corresponding values as values.\n */\n function getAllAttributes(element) {\n var attributes = {};\n var attr = element.attributes;\n for (var index = 0; index < attr.length; index++) {\n attributes[attr[index].nodeName] = attr[index].nodeValue;\n }\n return attributes;\n }\n /**\n * Created UL element from content template.\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n * @param {string} template - that need to convert and generate li element.\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n * @param {FieldsMapping} [fields] - Specifies fields for mapping the dataSource.\n * @param {ListBaseOptions} [options] - Specifies ListBase option for fields.\n * @param {any} [componentInstance] - Specifies component instance.\n * @returns {HTMLElement} - The generated LI element.\n */\n function renderContentTemplate(createElement, template, dataSource, fields, options, componentInstance) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });\n var curOpt = extend({}, defaultListBaseOptions, options);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var compiledString = compileTemplate(template);\n var liCollection = [];\n var value;\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], curFields);\n var curItem = dataSource[i];\n var isHeader = curItem.isHeader;\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreating(curData);\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], curFields);\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n }\n var li = createElement('li', {\n id: id + '-' + i,\n className: isHeader ? cssClass.group : cssClass.li, attrs: { role: 'presentation' }\n });\n if (isHeader) {\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n li.innerText = curItem;\n }\n else {\n li.innerText = fieldData[curFields.text];\n }\n }\n else {\n var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;\n if (isHeader) {\n if (componentInstance && componentInstance.getModuleName() !== 'listview') {\n var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate), li);\n }\n }\n else {\n if (componentInstance && componentInstance.getModuleName() !== 'listview') {\n var compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate), li);\n }\n }\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n item: li,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreated(curData);\n }\n liCollection.push(li);\n }\n append(liCollection, ulElement);\n return ulElement;\n }\n ListBase.renderContentTemplate = renderContentTemplate;\n /**\n * Created header items from group template.\n *\n * @param {string | Function} groupTemplate - that need to convert and generate li element.\n *\n * @param {{Object}[]} groupDataSource - Specifies local JSON data source.\n *\n * @param {FieldsMapping} fields - Specifies fields for mapping the dataSource.\n *\n * @param {Element[]} headerItems - Specifies ListBase header items.\n *\n * @param {ListBaseOptions} [options] - Optional ListBase options.\n *\n * @param {*} [componentInstance] - Optional component instance.\n *\n * @returns {Element[]} - An array of header elements with the rendered group template content.\n */\n function renderGroupTemplate(groupTemplate, \n // tslint:disable-next-line\n groupDataSource, fields, headerItems, options, componentInstance) {\n var compiledString = compileTemplate(groupTemplate);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var curOpt = extend({}, defaultListBaseOptions, options);\n var category = curFields.groupBy;\n for (var _i = 0, headerItems_1 = headerItems; _i < headerItems_1.length; _i++) {\n var header = headerItems_1[_i];\n var headerData = {};\n headerData[\"\" + category] = header.textContent;\n header.innerHTML = '';\n if (componentInstance && componentInstance.getModuleName() !== 'listview') {\n var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);\n if (compiledElement) {\n append(compiledElement, header);\n }\n }\n else {\n append(compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), header);\n }\n }\n return headerItems;\n }\n ListBase.renderGroupTemplate = renderGroupTemplate;\n /**\n * Generates a random hexadecimal ID string.\n *\n * @returns {string} - The generated ID string.\n */\n function generateId() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n }\n ListBase.generateId = generateId;\n /**\n * Processes the sub-child elements and creates corresponding elements based on the provided field data and options.\n *\n * @param {Function} createElement - Function for creating elements.\n * @param {Object} fieldData - Field data containing sub-child information.\n * @param {FieldsMapping} fields - Field mappings.\n * @param {Object[]} ds - The data source array containing sub-child elements.\n * @param {ListBaseOptions} options - ListBase options.\n * @param {HTMLElement} element - The parent HTML element to append sub-child elements to.\n * @param {number} level - The level of the sub-child elements.\n * @returns {void}\n */\n function processSubChild(createElement, fieldData, fields, ds, options, element, level) {\n // Get SubList\n var subDS = fieldData[fields.child] || [];\n var hasChildren = fieldData[fields.hasChildren];\n //Create Sub child\n if (subDS.length) {\n hasChildren = true;\n element.classList.add(cssClass.hasChild);\n if (options.processSubChild) {\n var subLi = createListFromJson(createElement, subDS, options, ++level);\n element.appendChild(subLi);\n }\n }\n // Create expand and collapse node\n if (!!options.expandCollapse && hasChildren && !options.template) {\n element.firstElementChild.classList.add(cssClass.iconWrapper);\n var expandElement = options.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));\n }\n }\n /**\n * Generates a single-level LI (list item) element based on the provided item and field data.\n *\n * @param {Function} createElement - Function for creating elements.\n * @param {string | Object | number} item - The item data.\n * @param {Object} fieldData - Field data mapped from the item.\n * @param {FieldsMapping} [fields] - Field mappings.\n * @param {string} [className] - Optional class name to add to the created LI element.\n * @param {HTMLElement[]} [innerElements] - Optional array of inner elements to append to the LI element.\n * @param {boolean} [grpLI] - Indicates if the LI element is a group item.\n * @param {string} [id] - The ID of the LI element.\n * @param {number} [index] - The index of the LI element.\n * @param {ListBaseOptions} [options] - Optional ListBase options.\n * @returns {HTMLElement} - The generated LI element.\n */\n function generateSingleLevelLI(createElement, item, fieldData, fields, className, innerElements, grpLI, id, index, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var value = item;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number' && typeof item !== 'boolean') {\n dataSource = item;\n text = (typeof fieldData[fields.text] === 'boolean' || typeof fieldData[fields.text] === 'number') ?\n fieldData[fields.text] : (fieldData[fields.text] || '');\n value = fieldData[fields.value];\n }\n var elementID;\n if (!isNullOrUndefined(dataSource) && !isNullOrUndefined(fieldData[fields.id])\n && fieldData[fields.id] !== '') {\n elementID = id;\n }\n else {\n elementID = id + '-' + index;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n id: elementID, attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n if (dataSource && Object.prototype.hasOwnProperty.call(fieldData, fields.enabled) && fieldData[fields.enabled].toString() === 'false') {\n li.classList.add(cssClass.disabled);\n }\n if (grpLI) {\n li.innerText = text;\n }\n else {\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n if (dataSource && Object.prototype.hasOwnProperty.call(fieldData, fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n if (innerElements.length && !curOpt.itemNavigable) {\n append(innerElements, li);\n }\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n li.appendChild(anchorTag(createElement, dataSource, fields, text, innerElements, curOpt.itemNavigable));\n }\n else {\n if (innerElements.length && curOpt.itemNavigable) {\n append(innerElements, li);\n }\n li.appendChild(document.createTextNode(text));\n }\n }\n return li;\n }\n /**\n * Returns a set of CSS class names based on the provided module name.\n *\n * @param {string} moduleName - The name of the module.\n * @returns {ClassList} - The CSS class names associated with the module.\n */\n function getModuleClass(moduleName) {\n var moduleClass;\n // eslint-disable-next-line\n return moduleClass = {\n li: \"e-\" + moduleName + \"-item\",\n ul: \"e-\" + moduleName + \"-parent e-ul\",\n group: \"e-\" + moduleName + \"-group-item\",\n icon: \"e-\" + moduleName + \"-icon\",\n text: \"e-\" + moduleName + \"-text\",\n check: \"e-\" + moduleName + \"-check\",\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: \"e-\" + moduleName + \"-url\",\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: \"e-\" + moduleName + \"-img\",\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable'\n };\n }\n /**\n * Creates an anchor tag () element based on the provided data source, fields, and text.\n *\n * @param {Function} createElement - Function for creating elements.\n * @param {object} dataSource - The data source containing URL-related fields.\n * @param {FieldsMapping} fields - Field mappings for the data source.\n * @param {string} text - The text content of the anchor tag.\n * @param {HTMLElement[]} innerElements - Optional array of inner elements to append to the anchor tag.\n * @param {boolean} isFullNavigation - Indicates whether the anchor tag should be for full navigation.\n * @returns {HTMLElement} The created anchor tag element.\n */\n function anchorTag(createElement, dataSource, fields, text, innerElements, isFullNavigation) {\n var fieldData = getFieldValues(dataSource, fields);\n var attr = { href: fieldData[fields.url] };\n if (Object.prototype.hasOwnProperty.call(fieldData, fields.urlAttributes) && fieldData[fields.urlAttributes]) {\n merge(attr, fieldData[fields.urlAttributes]);\n attr.href = fieldData[fields.url] ? fieldData[fields.url] :\n fieldData[fields.urlAttributes].href;\n }\n var anchorTag;\n if (!isFullNavigation) {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url, innerHTML: text });\n }\n else {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url });\n var anchorWrapper = createElement('div', { className: cssClass.anchorWrap });\n if (innerElements && innerElements.length) {\n append(innerElements, anchorWrapper);\n }\n anchorWrapper.appendChild(document.createTextNode(text));\n append([anchorWrapper], anchorTag);\n }\n setAttribute(anchorTag, attr);\n return anchorTag;\n }\n /**\n * Generates an LI element based on the provided item and field data.\n *\n * @param {Function} createElement - Function for creating elements.\n * @param {string | Object | number} item - The item data.\n * @param {Object} fieldData - Field data mapped from the item.\n * @param {FieldsMapping} fields - Field mappings.\n * @param {string} [className] - Optional class name to add to the created LI element.\n * @param {ListBaseOptions} [options] - Optional ListBase options.\n * @param {*} [componentInstance] - Optional component instance.\n * @returns {HTMLElement} - The generated LI element.\n */\n function generateLI(createElement, item, fieldData, fields, className, options, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var uID;\n var grpLI;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number') {\n dataSource = item;\n text = fieldData[fields.text] || '';\n uID = (isNullOrUndefined(fieldData['_id'])) ? fieldData[fields.id] : fieldData['_id'];\n grpLI = (Object.prototype.hasOwnProperty.call(item, 'isHeader') && item.isHeader)\n ? true : false;\n }\n if (options && options.enableHtmlSanitizer) {\n // eslint-disable-next-line no-self-assign\n text = text;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n if (!isNullOrUndefined(uID) === true) {\n li.setAttribute('data-uid', uID);\n }\n else {\n li.setAttribute('data-uid', generateId());\n }\n if (grpLI && options && options.groupTemplate) {\n var compiledString = compileTemplate(options.groupTemplate);\n if (componentInstance && componentInstance.getModuleName() !== 'listview') {\n var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), li);\n }\n }\n else if (!grpLI && options && options.template) {\n var compiledString = compileTemplate(options.template);\n if (componentInstance && componentInstance.getModuleName() !== 'listview') {\n var compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate), li);\n }\n }\n else {\n var innerDiv = createElement('div', {\n className: cssClass.textContent,\n attrs: (ariaAttributes.wrapperRole !== '' ? { role: ariaAttributes.wrapperRole } : {})\n });\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n innerDiv.appendChild(anchorTag(createElement, dataSource, fields, text, null, curOpt.itemNavigable));\n }\n else {\n var element = createElement('span', {\n className: cssClass.text,\n attrs: (ariaAttributes.itemText !== '' ? { role: ariaAttributes.itemText } : {})\n });\n if (options && options.enableHtmlSanitizer) {\n element.innerText = SanitizeHtmlHelper.sanitize(text);\n }\n else {\n element.innerHTML = text;\n }\n innerDiv.appendChild(element);\n }\n li.appendChild(innerDiv);\n }\n return li;\n }\n /**\n * Returns UL element based on the given LI element.\n *\n * @param {Function} createElement - Function for creating elements.\n *\n * @param {HTMLElement[]} liElement - Specifies array of LI element.\n *\n * @param {string} [className] - Specifies class name that need to be added in UL element.\n *\n * @param {ListBaseOptions} [options] - Specifies ListBase options.\n *\n * @returns {HTMLElement} - The created UL element.\n */\n function generateUL(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n cssClass = getModuleClass(curOpt.moduleName);\n var ulElement = createElement('ul', {\n className: cssClass.ul + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.listRole !== '' ? { role: ariaAttributes.listRole } : {})\n });\n append(liElement, ulElement);\n return ulElement;\n }\n ListBase.generateUL = generateUL;\n /**\n * Returns LI element with additional DIV tag based on the given LI element.\n *\n * @param {Function} createElement - Function for creating elements.\n *\n * @param {liElement} liElement - Specifies LI element.\n *\n * @param {string} [className] - Specifies class name that need to be added in created DIV element.\n *\n * @param {ListBaseOptions} [options] - Specifies ListBase options.\n *\n * @returns {HTMLElement} - The modified LI element.\n */\n function generateIcon(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', {\n className: 'e-icons ' + curOpt.expandIconClass + ' ' +\n (isNullOrUndefined(className) ? '' : className)\n })], liElement.querySelector('.' + cssClass.textContent));\n return liElement;\n }\n ListBase.generateIcon = generateIcon;\n})(ListBase || (ListBase = {}));\n/**\n * Used to get dataSource item from complex data using fields.\n *\n * @param {Object} dataItem - Specifies an JSON or String data.\n *\n * @param {FieldsMapping} fields - Fields that are mapped from the dataSource.\n * @returns {Object|string|number} - The retrieved field values.\n */\nfunction getFieldValues(dataItem, fields) {\n var fieldData = {};\n if (isNullOrUndefined(dataItem) || typeof (dataItem) === 'string' || typeof (dataItem) === 'number'\n || !isNullOrUndefined(dataItem.isHeader)) {\n return dataItem;\n }\n else {\n for (var _i = 0, _a = Object.keys(fields); _i < _a.length; _i++) {\n var field = _a[_i];\n var dataField = fields[\"\" + field];\n var value = !isNullOrUndefined(dataField) &&\n typeof (dataField) === 'string' ? getValue(dataField, dataItem) : undefined;\n if (!isNullOrUndefined(value)) {\n fieldData[\"\" + dataField] = value;\n }\n }\n }\n return fieldData;\n}\n/**\n * Compiles a template string or function into a compiled function.\n *\n * @param {string | Function} template - The template string or function to compile.\n * @returns {Function | undefined} - The compiled function, or undefined if the input is false.\n */\nfunction compileTemplate(template) {\n if (template) {\n try {\n if (typeof template !== 'function' && document.querySelector(template)) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n else {\n return compile(template);\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n return undefined;\n}\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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 @typescript-eslint/no-explicit-any */\n// Effect Configuration Effect[] = [fromViewBackward,fromViewForward,toViewBackward,toviewForward];\nvar effectsConfig = {\n 'None': [],\n 'SlideLeft': ['SlideRightOut', 'SlideLeftOut', 'SlideLeftIn', 'SlideRightIn'],\n 'SlideDown': ['SlideTopOut', 'SlideBottomOut', 'SlideBottomIn', 'SlideTopIn'],\n 'Zoom': ['FadeOut', 'FadeZoomOut', 'FadeZoomIn', 'FadeIn'],\n 'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']\n};\nvar effectsRTLConfig = {\n 'None': [],\n 'SlideLeft': ['SlideLeftOut', 'SlideRightOut', 'SlideRightIn', 'SlideLeftIn'],\n 'SlideDown': ['SlideBottomOut', 'SlideTopOut', 'SlideTopIn', 'SlideBottomIn'],\n 'Zoom': ['FadeZoomOut', 'FadeOut', 'FadeIn', 'FadeZoomIn'],\n 'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']\n};\n// don't use space in classnames.\nvar classNames = {\n root: 'e-listview',\n hover: 'e-hover',\n selected: 'e-active',\n focused: 'e-focused',\n parentItem: 'e-list-parent',\n listItem: 'e-list-item',\n listIcon: 'e-list-icon',\n textContent: 'e-text-content',\n listItemText: 'e-list-text',\n groupListItem: 'e-list-group-item',\n hasChild: 'e-has-child',\n view: 'e-view',\n header: 'e-list-header',\n headerText: 'e-headertext',\n headerTemplateText: 'e-headertemplate-text',\n text: 'e-text',\n disable: 'e-disabled',\n container: 'e-list-container',\n icon: 'e-icons',\n backIcon: 'e-icon-back',\n backButton: 'e-back-button',\n checkboxWrapper: 'e-checkbox-wrapper',\n checkbox: 'e-checkbox',\n checked: 'e-check',\n checklist: 'e-checklist',\n checkboxIcon: 'e-frame',\n checkboxRight: 'e-checkbox-right',\n checkboxLeft: 'e-checkbox-left',\n listviewCheckbox: 'e-listview-checkbox',\n itemCheckList: 'e-checklist',\n virtualElementContainer: 'e-list-virtualcontainer'\n};\nvar LISTVIEW_TEMPLATE_PROPERTY = 'Template';\nvar LISTVIEW_GROUPTEMPLATE_PROPERTY = 'GroupTemplate';\nvar LISTVIEW_HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';\nvar swipeVelocity = 0.5;\n/**\n * Represents the field settings of the ListView.\n */\nvar FieldSettings = /** @__PURE__ @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('id')\n ], FieldSettings.prototype, \"id\", void 0);\n __decorate([\n Property('text')\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property('isChecked')\n ], FieldSettings.prototype, \"isChecked\", void 0);\n __decorate([\n Property('isVisible')\n ], FieldSettings.prototype, \"isVisible\", void 0);\n __decorate([\n Property('enabled')\n ], FieldSettings.prototype, \"enabled\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('child')\n ], FieldSettings.prototype, \"child\", void 0);\n __decorate([\n Property('tooltip')\n ], FieldSettings.prototype, \"tooltip\", void 0);\n __decorate([\n Property('groupBy')\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property('text')\n ], FieldSettings.prototype, \"sortBy\", void 0);\n __decorate([\n Property('htmlAttributes')\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('tableName')\n ], FieldSettings.prototype, \"tableName\", void 0);\n return FieldSettings;\n}(ChildProperty));\n/**\n * Represents the EJ2 ListView control.\n * ```html\n *
');\n };\n CaretPositionHelper.getCaretPosition = function (target) {\n var position = target.selectionStart || 0;\n var textBeforeCaret = target.value.slice(0, position);\n var textAfterCaret = target.value.slice(position);\n var content = \"\" + this.escapeHtml(textBeforeCaret) + \"\";\n content += '|';\n content += \"\" + this.escapeHtml(textAfterCaret) + \"\";\n var rect = this.createCaretMarker(target, content);\n rect.pos = position;\n return rect;\n };\n CaretPositionHelper.adjustScrollToCaretPosition = function (element) {\n var caretPosition = this.getCaretPosition(element);\n var lineHeight = parseFloat(window.getComputedStyle(element).lineHeight);\n if (caretPosition.top > element.clientHeight + element.scrollTop - lineHeight) {\n element.scrollTop = caretPosition.top - element.clientHeight + lineHeight;\n }\n };\n CaretPositionHelper.getTextAreaPosition = function (element) {\n var computedStyle = window.getComputedStyle(element);\n var position = this.getCaretPosition(element);\n return {\n top: position.top + parseFloat(computedStyle.borderTopWidth) + element.offsetTop - element.scrollTop,\n left: position.left + parseFloat(computedStyle.borderLeftWidth) + element.offsetLeft - element.scrollLeft - 0.25,\n height: position.height,\n elemStyle: computedStyle\n };\n };\n CaretPositionHelper.insertCharacter = function (element, text) {\n var start = element.selectionStart;\n var end = element.selectionEnd;\n element.value = element.value.substring(0, start) + text + element.value.substring(end);\n start += text.length;\n element.setSelectionRange(start, start);\n };\n CaretPositionHelper.properties = [\n 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopStyle',\n 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderTopWidth',\n 'boxSizing', 'fontFamily', 'fontSize', 'fontWeight', 'height', 'letterSpacing',\n 'lineHeight', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop',\n 'outlineWidth', 'overflow', 'overflowX', 'overflowY', 'paddingBottom',\n 'paddingLeft', 'paddingRight', 'paddingTop', 'textAlign', 'textOverflow',\n 'textTransform', 'whiteSpace', 'wordBreak', 'wordWrap', 'width'\n ];\n return CaretPositionHelper;\n}());\n\nvar __extends$8 = (undefined && undefined.__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$8 = (undefined && undefined.__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};\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (undefined && undefined.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\nvar ChatMessageRole;\n(function (ChatMessageRole) {\n ChatMessageRole[\"System\"] = \"system\";\n ChatMessageRole[\"User\"] = \"user\";\n ChatMessageRole[\"Assistant\"] = \"assistant\";\n})(ChatMessageRole || (ChatMessageRole = {}));\nvar SmartTextArea = /** @__PURE__ @class */ (function (_super) {\n __extends$8(SmartTextArea, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {SmartTextArea} options - Specifies Smart text area model\n * @param {string | HTMLTextAreaElement} element - Specifies target element\n */\n function SmartTextArea(options, element) {\n return _super.call(this, options, element) || this;\n }\n SmartTextArea.prototype.render = function () {\n _super.prototype.render.call(this);\n if (!(this.element instanceof HTMLTextAreaElement)) {\n return;\n }\n this.textArea = this.element;\n var smartTextArea = createElement('smart-textarea');\n smartTextArea.classList.add('e-smart-textarea');\n this.textArea.after(smartTextArea);\n if (this.showSuggestionOnPopup !== 'None') {\n var suggestionState = this.showSuggestionOnPopup === 'Enable' ? 'false' : 'true';\n this.textArea.setAttribute('data-inline-suggestions', suggestionState);\n }\n this.suggestionDisplay = this.shouldShowInlineSuggestions(this.textArea) ?\n new InlineSuggestion(smartTextArea, this.textArea) : new ContextSuggestion(smartTextArea, this.textArea);\n };\n SmartTextArea.prototype.wireEvents = function () {\n var _this = this;\n _super.prototype.wireEvents.call(this);\n EventHandler.add(this.element, 'keyup', this.handleKeyUp, this);\n EventHandler.add(this.element, 'keydown', this.handleKeyDown, this);\n EventHandler.add(this.element, 'mousedown', this.removeExistingOrPendingSuggestion, this);\n EventHandler.add(this.element, 'focusout', this.removeExistingOrPendingSuggestion, this);\n this.element.addEventListener('scroll', (function () { return _this.suggestionDisplay.reject(); }), {\n passive: true\n });\n };\n SmartTextArea.prototype.unWireEvents = function () {\n var _this = this;\n _super.prototype.unWireEvents.call(this);\n EventHandler.remove(this.element, 'keyup', this.handleKeyUp);\n EventHandler.remove(this.element, 'keydown', this.handleKeyDown);\n EventHandler.remove(this.element, 'mousedown', this.removeExistingOrPendingSuggestion);\n EventHandler.remove(this.element, 'focusout', this.removeExistingOrPendingSuggestion);\n this.element.removeEventListener('scroll', (function () { return _this.suggestionDisplay.reject(); }));\n };\n SmartTextArea.prototype.keydownHandler = function () {\n // Overridden to prevent default behavior\n };\n SmartTextArea.prototype.shouldShowInlineSuggestions = function (textArea) {\n var inlineSuggestions = textArea.getAttribute('data-inline-suggestions');\n if (inlineSuggestions) {\n return inlineSuggestions.toLowerCase() === 'true';\n }\n return !('ontouchstart' in window);\n };\n SmartTextArea.prototype.handleKeyDown = function (event) {\n switch (event.key) {\n case 'Tab':\n if (this.suggestionDisplay.isShowing()) {\n this.suggestionDisplay.accept();\n event.preventDefault();\n }\n break;\n case 'Alt':\n case 'Control':\n case 'Shift':\n case 'Command':\n break;\n default:\n if (this.suggestionDisplay.isShowing() && this.suggestionDisplay.currentSuggestion.startsWith(event.key)) {\n CaretPositionHelper.insertCharacter(this.textArea, event.key);\n event.preventDefault();\n this.suggestionDisplay.show(this.suggestionDisplay.currentSuggestion.substring(event.key.length));\n CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);\n }\n else {\n this.removeExistingOrPendingSuggestion();\n }\n break;\n }\n };\n SmartTextArea.prototype.handleKeyUp = function () {\n var _this = this;\n if (!this.suggestionDisplay.isShowing()) {\n clearTimeout(this.typingDebounceTimeout);\n this.typingDebounceTimeout = setTimeout(function () { return _this.handleTypingPaused(); }, 350);\n }\n };\n SmartTextArea.prototype.handleTypingPaused = function () {\n return __awaiter(this, void 0, void 0, function () {\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (document.activeElement !== this.textArea) {\n return [2 /*return*/];\n }\n if (!(this.textArea.selectionStart === this.textArea.selectionEnd &&\n (this.textArea.selectionStart === this.textArea.value.length ||\n this.textArea.value[this.textArea.selectionStart] === '\\n'))) return [3 /*break*/, 2];\n return [4 /*yield*/, this.requestSuggestionAsync()];\n case 1:\n _a.sent();\n _a.label = 2;\n case 2: return [2 /*return*/];\n }\n });\n });\n };\n SmartTextArea.prototype.removeExistingOrPendingSuggestion = function () {\n clearTimeout(this.typingDebounceTimeout);\n if (this.pendingSuggestionAbort) {\n this.pendingSuggestionAbort.abort();\n this.pendingSuggestionAbort = null;\n }\n this.suggestionDisplay.reject();\n };\n SmartTextArea.prototype.createSuggestionPrompt = function (textBefore, textAfter) {\n var stringBuilder = 'Predict what text the user in the given ROLE would insert at the cursor position indicated by ^^^.\\nOnly give predictions for which you have' +\n ' an EXTREMELY high confidence that the user would insert that EXACT text.\\nDo not make up new information. If you are not sure, ' +\n 'just reply with NO_PREDICTION.\\n\\nRULES:\\n1. Reply with OK:, then in square brackets the predicted text, then END_INSERTION, and no other output.\\n2. ' +\n 'When a specific value or quantity cannot be inferred and would need to be provided, use the word NEED_INFO.\\n3. ' +\n 'If there is not enough information to predict any words that the user would type next, just reply with the word NO_PREDICTION.' +\n '\\n4. NEVER invent new information. If you can not be sure what the user is about to type, ALWAYS stop the prediction with END_INSERTION.';\n var userPhrases = this.UserPhrases;\n if (userPhrases && userPhrases.length > 0) {\n stringBuilder += '\\nAlways try to use variations on the following phrases as part of the predictions:\\n';\n for (var _i = 0, userPhrases_1 = userPhrases; _i < userPhrases_1.length; _i++) {\n var phrase = userPhrases_1[_i];\n stringBuilder += \"- \" + phrase + \"\\n\";\n }\n }\n var chatMessageList = [\n { role: ChatMessageRole.System, content: stringBuilder },\n { role: ChatMessageRole.User, content: 'ROLE: Family member sending a text\\nUSER_TEXT: Hey, it is a nice day - the weather is ^^^' },\n { role: ChatMessageRole.Assistant, content: 'OK:[great!]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Customer service assistant\\nUSER_TEXT: You can find more information on^^^\\n\\nAlternatively, phone us.' },\n { role: ChatMessageRole.Assistant, content: 'OK:[ our website at NEED_INFO]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Casual\\nUSER_TEXT: Oh I see!\\n\\nWell sure thing, we can' },\n { role: ChatMessageRole.Assistant, content: 'OK:[ help you out with that!]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Storyteller\\nUSER_TEXT: Sir Digby Chicken Caesar, also know^^^' },\n { role: ChatMessageRole.Assistant, content: 'OK:[n as NEED_INFO]END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Customer support agent\\nUSER_TEXT: Goodbye for now.^^^' },\n { role: ChatMessageRole.Assistant, content: 'NO_PREDICTION END_INSERTION' },\n { role: ChatMessageRole.User, content: 'ROLE: Pirate\\nUSER_TEXT: Have you found^^^' },\n { role: ChatMessageRole.Assistant, content: 'OK:[ the treasure, me hearties?]END_INSERTION' },\n { role: ChatMessageRole.User, content: \"ROLE: \" + this.userRole + \"\\nUSER_TEXT: \" + textBefore + \"^^^\" + textAfter }\n ];\n return {\n messages: chatMessageList,\n temperature: 0.0,\n maxTokens: 400,\n stopSequences: ['END_INSERTION', 'NEED_INFO'],\n frequencyPenalty: 0.0,\n presencePenalty: 0.0\n };\n };\n SmartTextArea.prototype.requestSuggestionAsync = function () {\n return __awaiter(this, void 0, void 0, function () {\n var requestDetails, suggestionData, chatConfig, insertSuggestion, response;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (this.pendingSuggestionAbort) {\n this.pendingSuggestionAbort.abort();\n return [2 /*return*/];\n }\n this.pendingSuggestionAbort = new AbortController();\n requestDetails = {\n textAreaValue: this.textArea.value,\n cursorPosition: this.textArea.selectionStart\n };\n suggestionData = {\n textBefore: requestDetails.textAreaValue.substring(0, requestDetails.cursorPosition),\n textAfter: requestDetails.textAreaValue.substring(requestDetails.cursorPosition)\n };\n chatConfig = this.createSuggestionPrompt(suggestionData.textBefore, suggestionData.textAfter);\n if (!(typeof this.aiSuggestionHandler === 'function')) return [3 /*break*/, 2];\n return [4 /*yield*/, this.aiSuggestionHandler(chatConfig)];\n case 1:\n response = _a.sent();\n insertSuggestion = this.validateSuggestion(response, suggestionData.textBefore);\n _a.label = 2;\n case 2:\n if (insertSuggestion && requestDetails.textAreaValue === this.textArea.value &&\n requestDetails.cursorPosition === this.textArea.selectionStart) {\n if (!insertSuggestion.endsWith(' ')) {\n insertSuggestion += ' ';\n }\n this.suggestionDisplay.show(insertSuggestion);\n }\n return [2 /*return*/];\n }\n });\n });\n };\n SmartTextArea.prototype.validateSuggestion = function (response, textBefore) {\n var suggestion;\n if (typeof response !== 'string' || response.length <= 5 || response.indexOf('OK:[') !== 0) {\n return '';\n }\n var endIndex = this.indexOfAny(response, ['.', '?', '!']);\n if (endIndex > 0 && response.length > endIndex + 1 && response[endIndex + 1] === ' ') {\n response = response.substring(0, endIndex + 1);\n }\n suggestion = response.substring(4).replace(/[\\]\\s]+$/, '');\n if (textBefore.length > 0 && textBefore[textBefore.length - 1] === ' ') {\n suggestion = suggestion.replace(/^\\s+/, '');\n }\n return suggestion;\n };\n SmartTextArea.prototype.indexOfAny = function (str, chars) {\n for (var i = 0; i < str.length; i++) {\n if (chars.indexOf(str[\"\" + i]) !== -1) {\n return i;\n }\n }\n return -1;\n };\n SmartTextArea.prototype.getModuleName = function () {\n return 'smarttextarea';\n };\n SmartTextArea.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.textArea = null;\n this.suggestionDisplay = null;\n this.typingDebounceTimeout = null;\n };\n __decorate$8([\n Property('')\n ], SmartTextArea.prototype, \"userRole\", void 0);\n __decorate$8([\n Property([])\n ], SmartTextArea.prototype, \"UserPhrases\", void 0);\n __decorate$8([\n Property()\n ], SmartTextArea.prototype, \"aiSuggestionHandler\", void 0);\n __decorate$8([\n Property('None')\n ], SmartTextArea.prototype, \"showSuggestionOnPopup\", void 0);\n return SmartTextArea;\n}(TextArea));\nvar InlineSuggestion = /** @__PURE__ @class */ (function () {\n function InlineSuggestion(smartTextArea, textArea) {\n this.owner = smartTextArea;\n this.textArea = textArea;\n this.latestSuggestionText = '';\n this.suggestionStartPos = null;\n this.suggestionEndPos = null;\n this.virtualCaret = null;\n this.originalValueProperty = this.getOriginalValueProperty(textArea, 'value');\n }\n Object.defineProperty(InlineSuggestion.prototype, \"value\", {\n get: function () {\n var value = this.originalValueProperty.get.call(this.textArea);\n return this.isShowing() ? value.substring(0, this.suggestionStartPos) + value.substring(this.suggestionEndPos) : value;\n },\n set: function (newValue) {\n this.originalValueProperty.set.call(this.textArea, newValue);\n },\n enumerable: true,\n configurable: true\n });\n InlineSuggestion.prototype.getOriginalValueProperty = function (obj, property) {\n while (obj) {\n var descriptor = Object.getOwnPropertyDescriptor(obj, property);\n if (descriptor) {\n return descriptor;\n }\n obj = Object.getPrototypeOf(obj);\n }\n throw new Error(\"Property \" + property + \" not found on object or its prototype chain\");\n };\n Object.defineProperty(InlineSuggestion.prototype, \"valueIncludingSuggestion\", {\n get: function () {\n return this.originalValueProperty.get.call(this.textArea);\n },\n set: function (newValue) {\n this.originalValueProperty.set.call(this.textArea, newValue);\n },\n enumerable: true,\n configurable: true\n });\n InlineSuggestion.prototype.isShowing = function () {\n return this.suggestionStartPos !== null;\n };\n InlineSuggestion.prototype.show = function (suggestionText) {\n this.latestSuggestionText = suggestionText;\n this.suggestionStartPos = this.textArea.selectionStart;\n this.suggestionEndPos = this.suggestionStartPos + suggestionText.length;\n this.textArea.setAttribute('data-suggestion-visible', '');\n this.valueIncludingSuggestion = this.valueIncludingSuggestion.substring(0, this.suggestionStartPos) +\n suggestionText +\n this.valueIncludingSuggestion.substring(this.suggestionStartPos);\n this.textArea.setSelectionRange(this.suggestionStartPos, this.suggestionEndPos);\n if (!this.virtualCaret) {\n this.virtualCaret = new VirtualCaret(this.owner, this.textArea);\n }\n this.virtualCaret.show();\n };\n Object.defineProperty(InlineSuggestion.prototype, \"currentSuggestion\", {\n get: function () {\n return this.latestSuggestionText;\n },\n enumerable: true,\n configurable: true\n });\n InlineSuggestion.prototype.accept = function () {\n this.textArea.setSelectionRange(this.suggestionEndPos, this.suggestionEndPos);\n this.suggestionStartPos = null;\n this.suggestionEndPos = null;\n if (this.virtualCaret) {\n this.virtualCaret.hide();\n }\n this.textArea.removeAttribute('data-suggestion-visible');\n CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);\n };\n InlineSuggestion.prototype.reject = function () {\n if (!this.isShowing()) {\n return;\n }\n var selectionStart = this.textArea.selectionStart;\n var selectionEnd = this.textArea.selectionEnd;\n this.valueIncludingSuggestion = this.valueIncludingSuggestion.substring(0, this.suggestionStartPos) +\n this.valueIncludingSuggestion.substring(this.suggestionEndPos);\n if (this.suggestionStartPos === selectionStart && this.suggestionEndPos === selectionEnd) {\n this.textArea.setSelectionRange(selectionStart, selectionStart);\n }\n this.suggestionStartPos = null;\n this.suggestionEndPos = null;\n this.textArea.removeAttribute('data-suggestion-visible');\n if (this.virtualCaret) {\n this.virtualCaret.hide();\n }\n };\n return InlineSuggestion;\n}());\nvar ContextSuggestion = /** @__PURE__ @class */ (function () {\n function ContextSuggestion(container, textArea) {\n var _this = this;\n this.latestSuggestionText = '';\n this.showing = false;\n this.textArea = textArea;\n this.suggestionElement = document.createElement('div');\n this.suggestionElement.classList.add('smart-textarea-suggestion-overlay');\n this.suggestionElement.addEventListener('mousedown', function (event) { return _this.handleSuggestionClicked(event); });\n this.suggestionElement.addEventListener('touchend', function (event) { return _this.handleSuggestionClicked(event); });\n this.suggestionPrefixElement = document.createElement('span');\n this.suggestionTextElement = document.createElement('span');\n this.suggestionElement.appendChild(this.suggestionPrefixElement);\n this.suggestionElement.appendChild(this.suggestionTextElement);\n this.suggestionPrefixElement.style.opacity = '0.3';\n var computedStyle = window.getComputedStyle(this.textArea);\n this.suggestionElement.style.font = computedStyle.font;\n this.suggestionElement.style.marginTop = 1.4 * parseFloat(computedStyle.fontSize) + \"px\";\n container.appendChild(this.suggestionElement);\n }\n Object.defineProperty(ContextSuggestion.prototype, \"currentSuggestion\", {\n get: function () {\n return this.latestSuggestionText;\n },\n enumerable: true,\n configurable: true\n });\n ContextSuggestion.prototype.show = function (suggestionText) {\n this.latestSuggestionText = suggestionText;\n this.suggestionPrefixElement.textContent = suggestionText[0] !== ' ' ? this.getPrefixText(this.textArea, 20) : '';\n this.suggestionTextElement.textContent = suggestionText;\n var position = CaretPositionHelper.getTextAreaPosition(this.textArea);\n var style = this.suggestionElement.style;\n style.minWidth = null;\n this.suggestionElement.classList.add('smart-textarea-suggestion-overlay-visible');\n style.zIndex = this.textArea.style.zIndex + 1;\n style.top = position.top + \"px\";\n var leftPosition = position.left - this.suggestionPrefixElement.offsetWidth;\n if (!style.left || Math.abs(parseFloat(style.left) - leftPosition) > 10) {\n style.left = leftPosition + \"px\";\n }\n this.showing = true;\n var computedStyle = window.getComputedStyle(this.suggestionElement);\n var lineHeight = parseFloat(computedStyle.lineHeight);\n var paddingTop = parseFloat(computedStyle.paddingTop);\n var paddingBottom = parseFloat(computedStyle.paddingBottom);\n var lines = Math.round((this.suggestionElement.offsetHeight - paddingTop - paddingBottom) / lineHeight);\n if (lines > 2) {\n var elementWidth = this.suggestionElement.offsetWidth;\n style.minWidth = \"calc(min(70vw, \" + (lines * elementWidth) / 2 + \"px))\";\n }\n var rect = this.suggestionElement.getBoundingClientRect();\n if (rect.right > document.body.clientWidth - 20) {\n style.left = \"calc(\" + (parseFloat(style.left) - (rect.right - document.body.clientWidth)) + \"px - 2rem)\";\n }\n };\n ContextSuggestion.prototype.accept = function () {\n if (this.showing) {\n CaretPositionHelper.insertCharacter(this.textArea, this.currentSuggestion);\n CaretPositionHelper.adjustScrollToCaretPosition(this.textArea);\n this.hide();\n }\n };\n ContextSuggestion.prototype.reject = function () {\n this.hide();\n };\n ContextSuggestion.prototype.hide = function () {\n if (this.showing) {\n this.showing = false;\n this.suggestionElement.classList.remove('smart-textarea-suggestion-overlay-visible');\n }\n };\n ContextSuggestion.prototype.isShowing = function () {\n return this.showing;\n };\n ContextSuggestion.prototype.handleSuggestionClicked = function (event) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.accept();\n };\n ContextSuggestion.prototype.getPrefixText = function (textArea, maxLength) {\n var value = textArea.value;\n var selectionStart = textArea.selectionStart;\n for (var i = selectionStart - 1; i > selectionStart - maxLength; i--) {\n if (i < 0 || /\\s/.test(value[\"\" + i])) {\n return value.substring(i + 1, selectionStart);\n }\n }\n return '';\n };\n return ContextSuggestion;\n}());\nvar VirtualCaret = /** @__PURE__ @class */ (function () {\n function VirtualCaret(smartTextArea, textArea) {\n this.textArea = textArea;\n this.caretDiv = document.createElement('div');\n this.caretDiv.classList.add('smart-textarea-caret');\n smartTextArea.appendChild(this.caretDiv);\n }\n VirtualCaret.prototype.show = function () {\n var textAreaPosition = CaretPositionHelper.getTextAreaPosition(this.textArea);\n var caretStyle = this.caretDiv.style;\n caretStyle.display = 'block';\n caretStyle.top = textAreaPosition.top + 'px';\n caretStyle.left = textAreaPosition.left + 'px';\n caretStyle.height = textAreaPosition.height + 'px';\n caretStyle.zIndex = this.textArea.style.zIndex;\n caretStyle.backgroundColor = textAreaPosition.elemStyle.caretColor;\n };\n VirtualCaret.prototype.hide = function () {\n this.caretDiv.style.display = 'none';\n };\n return VirtualCaret;\n}());\n\nvar __extends$9 = (undefined && undefined.__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 SignatureBase = /** @__PURE__ @class */ (function (_super) {\n __extends$9(SignatureBase, _super);\n function SignatureBase() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /* minDistance(distance between the two point) was calaculated for smoothness.*/\n _this.minDistance = 5;\n _this.previous = 0;\n /* interval handles for the smoothness in the mouse move event.*/\n _this.interval = 30;\n _this.timeout = null;\n _this.isSignatureEmpty = true;\n _this.backgroundLoaded = null;\n _this.isBlazor = false;\n _this.isResponsive = false;\n _this.signPointsColl = [];\n _this.signRatioPointsColl = [];\n _this.canRedraw = true;\n return _this;\n }\n /**\n * To Initialize the component rendering\n *\n * @private\n * @param {HTMLCanvasElement} element - Specifies the canvas element.\n * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.\n * @returns {void}\n */\n SignatureBase.prototype.initialize = function (element, dotnetRef) {\n this.clearArray = [];\n this.element = element;\n this.canvasContext = this.element.getContext('2d');\n this.canvasContext.canvas.tabIndex = -1;\n if (dotnetRef) {\n this.dotnetRef = dotnetRef;\n this.isBlazor = true;\n if (this.signatureValue) {\n this.loadPersistedSignature();\n }\n }\n this.setHTMLProperties();\n if (isNullOrUndefined(this.signatureValue)) {\n this.updateSnapCollection(true);\n }\n this.wireEvents();\n if (!this.isBlazor) {\n this.trigger('created', null);\n }\n };\n SignatureBase.prototype.wireEvents = function () {\n if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {\n EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);\n EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);\n window.addEventListener('resize', this.resizeHandler.bind(this));\n }\n else if (this.pointColl) {\n EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);\n EventHandler.add(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler, this);\n EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);\n }\n };\n SignatureBase.prototype.unwireEvents = function (type) {\n if (type === 'mouseup' || type === 'touchend') {\n EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);\n EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);\n EventHandler.remove(document, 'mouseup', this.mouseUpHandler);\n }\n else {\n EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);\n EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);\n window.removeEventListener('resize', this.resizeHandler);\n }\n };\n SignatureBase.prototype.setHTMLProperties = function () {\n // eslint-disable-next-line max-len\n if (this.element.height === 150 && this.element.width === 300 && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {\n this.element.height = this.element.offsetHeight;\n this.element.width = this.element.offsetWidth;\n this.isResponsive = true;\n }\n else if ((this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1)\n && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {\n this.element.height = this.element.offsetHeight;\n this.element.width = this.element.offsetWidth;\n }\n this.canvasContext.fillStyle = this.strokeColor;\n this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });\n this.tempContext = this.tempCanvas.getContext('2d');\n this.tempCanvas.width = this.element.width;\n this.tempCanvas.height = this.element.height;\n if (this.backgroundImage) {\n this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';\n this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';\n if (this.saveWithBackground) {\n this.setBackgroundImage(this.backgroundImage, 'temp');\n }\n }\n else if (this.backgroundColor) {\n this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;\n }\n };\n SignatureBase.prototype.mouseDownHandler = function (e) {\n if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {\n if (e.type === 'touchstart') {\n e.preventDefault();\n e.stopPropagation();\n }\n this.beginStroke(e);\n this.wireEvents();\n }\n };\n SignatureBase.prototype.mouseMoveHandler = function (e) {\n if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchmove') {\n if (e.type === 'touchmove') {\n e.preventDefault();\n e.stopPropagation();\n }\n if (this.interval) {\n this.updateStrokeWithThrottle(e);\n }\n else {\n this.updateStroke(e);\n }\n }\n };\n SignatureBase.prototype.mouseUpHandler = function (e) {\n var args = { actionName: 'strokeUpdate' };\n if (e.type === 'touchstart') {\n e.preventDefault();\n e.stopPropagation();\n }\n this.endDraw();\n this.updateSnapCollection();\n this.unwireEvents(e.type);\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'mouseUp');\n }\n this.signatureValue = this.snapColl[this.incStep];\n for (var i = 0; i < this.signPointsColl.length; i++) {\n this.signRatioPointsColl.push({ x: (this.signPointsColl[i].x / this.canvasContext.canvas.width),\n y: (this.signPointsColl[i].y / this.canvasContext.canvas.height) });\n }\n this.signPointsColl = [];\n };\n SignatureBase.prototype.keyboardHandler = function (e) {\n var _this = this;\n var args = { fileName: 'Signature', type: 'Png', cancel: false };\n switch (e.key) {\n case 'Delete':\n this.clear();\n break;\n case (e.ctrlKey && 's'):\n if (!this.isBlazor) {\n this.trigger('beforeSave', args, function (observableSaveArgs) {\n if (!args.cancel) {\n _this.save(observableSaveArgs.type, observableSaveArgs.fileName);\n }\n });\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'beforeSave');\n }\n e.preventDefault();\n e.stopImmediatePropagation();\n break;\n case (e.ctrlKey && 'z'):\n this.undo();\n break;\n case (e.ctrlKey && 'y'):\n this.redo();\n break;\n }\n };\n SignatureBase.prototype.resizeHandler = function () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (this.isResponsive && this.canRedraw) {\n this.canvasContext.canvas.width = this.element.offsetWidth;\n this.canvasContext.canvas.height = this.element.offsetHeight;\n this.canvasContext.scale(1, 1);\n var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;\n for (var i = 0; i < this.signRatioPointsColl.length; i++) {\n this.arcDraw((this.signRatioPointsColl[i].x * this.canvasContext.canvas.width), (this.signRatioPointsColl[i].y * this.canvasContext.canvas.height), pointSize);\n }\n this.signPointsColl = [];\n this.canvasContext.closePath();\n this.canvasContext.fill();\n }\n else {\n var restoreImg_1 = new Image();\n restoreImg_1.src = this.snapColl[this.incStep];\n restoreImg_1.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(restoreImg_1, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n };\n SignatureBase.prototype.beginStroke = function (e) {\n this.internalRefresh();\n this.updateStroke(e);\n };\n SignatureBase.prototype.updateStroke = function (e) {\n var point = this.createPoint(e);\n this.addPoint(point);\n };\n SignatureBase.prototype.updateStrokeWithThrottle = function (args) {\n var now = Date.now();\n var remaining = this.interval - (now - this.previous);\n this.storedArgs = args;\n if (remaining <= 0 || remaining > this.interval) {\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n this.previous = now;\n this.updateStroke(this.storedArgs);\n if (!this.timeout) {\n this.storedArgs = null;\n }\n }\n else if (!this.timeout) {\n this.timeout = window.setTimeout(this.delay.bind(this), remaining);\n }\n };\n SignatureBase.prototype.delay = function () {\n this.previous = Date.now();\n this.timeout = null;\n this.updateStroke(this.storedArgs);\n if (!this.timeout) {\n this.storedArgs = null;\n }\n };\n SignatureBase.prototype.createPoint = function (e) {\n var rect = this.canvasContext.canvas.getBoundingClientRect();\n if (e.type === 'mousedown' || e.type === 'mousemove') {\n return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());\n }\n else {\n return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());\n }\n };\n /* Returns the current point corrdinates(x, y) and time.*/\n SignatureBase.prototype.point = function (pointX, pointY, time) {\n this.pointX = pointX;\n this.pointY = pointY;\n this.time = time || new Date().getTime();\n return { x: this.pointX, y: this.pointY, time: this.time };\n };\n SignatureBase.prototype.addPoint = function (point) {\n var points = this.pointColl;\n var controlPoint1;\n var controlPoint2;\n var lastPoint = points.length > 0 && points[points.length - 1];\n var isLastPointTooClose = lastPoint ? this.distanceTo(lastPoint) <= this.minDistance : false;\n if (!lastPoint || !(lastPoint && isLastPointTooClose)) {\n points.push(point);\n if (points.length > 2) {\n if (points.length === 3) {\n points.unshift(points[0]);\n }\n controlPoint1 = (this.calculateCurveControlPoints(points[0], points[1], points[2])).controlPoint2;\n controlPoint2 = (this.calculateCurveControlPoints(points[1], points[2], points[3])).controlPoint1;\n this.startPoint = points[1];\n this.controlPoint1 = controlPoint1;\n this.controlPoint2 = controlPoint2;\n this.endPoint = points[2];\n this.startDraw();\n points.shift();\n }\n }\n };\n SignatureBase.prototype.startDraw = function () {\n var velocity;\n velocity = this.pointVelocityCalc(this.startPoint);\n velocity = this.velocity * velocity + (1 - this.velocity) * this.lastVelocity;\n var newWidth = Math.max(this.maxStrokeWidth / (velocity + 1), this.minStrokeWidth);\n this.curveDraw(this.lastWidth, newWidth);\n this.lastVelocity = velocity;\n this.lastWidth = newWidth;\n };\n SignatureBase.prototype.endDraw = function () {\n if (isNullOrUndefined(this.pointColl)) {\n return;\n }\n var canDrawCurve = this.pointColl.length > 2;\n var point = this.pointColl[0];\n if (!canDrawCurve && point) {\n this.strokeDraw(point);\n }\n };\n /* Calculate the Bezier (x, y) coordinate of the curve. */\n SignatureBase.prototype.curveDraw = function (startWidth, endWidth) {\n var context = this.canvasContext;\n var width;\n var i;\n var t1;\n var t2;\n var t3;\n var u1;\n var u2;\n var u3;\n var x;\n var y;\n var widthValue = endWidth - startWidth;\n var bezierLength = this.bezierLengthCalc();\n var drawSteps = Math.ceil(bezierLength) * 2;\n context.beginPath();\n for (i = 0; i < drawSteps; i++) {\n t1 = i / drawSteps;\n t2 = t1 * t1;\n t3 = t2 * t1;\n u1 = 1 - t1;\n u2 = u1 * u1;\n u3 = u2 * u1;\n x = u3 * this.startPoint.x;\n x += 3 * u2 * t1 * this.controlPoint1.x;\n x += 3 * u1 * t2 * this.controlPoint2.x;\n x += t3 * this.endPoint.x;\n y = u3 * this.startPoint.y;\n y += 3 * u2 * t1 * this.controlPoint1.y;\n y += 3 * u1 * t2 * this.controlPoint2.y;\n y += t3 * this.endPoint.y;\n width = Math.min(startWidth + t3 * widthValue, this.maxStrokeWidth);\n this.arcDraw(x, y, width);\n }\n context.closePath();\n context.fill();\n this.isSignatureEmpty = false;\n };\n SignatureBase.prototype.strokeDraw = function (point) {\n var context = this.canvasContext;\n var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;\n context.beginPath();\n this.arcDraw(point.x, point.y, pointSize);\n context.closePath();\n context.fill();\n this.isSignatureEmpty = false;\n };\n SignatureBase.prototype.arcDraw = function (x, y, size) {\n this.signPointsColl.push({ x: x, y: y });\n var context = this.canvasContext;\n context.moveTo(x, y);\n context.arc(x, y, size, 0, 2 * Math.PI, false);\n };\n /* Utility functions for Bezier algorithm*/\n SignatureBase.prototype.calculateCurveControlPoints = function (p1, p2, p3) {\n var dx1 = p1.x - p2.x;\n var dy1 = p1.y - p2.y;\n var dx2 = p2.x - p3.x;\n var dy2 = p2.y - p3.y;\n var m1 = { x: (p1.x + p2.x) / 2.0, y: (p1.y + p2.y) / 2.0 };\n var m2 = { x: (p2.x + p3.x) / 2.0, y: (p2.y + p3.y) / 2.0 };\n var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);\n var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);\n var dxm = (m1.x - m2.x);\n var dym = (m1.y - m2.y);\n var k = l2 / (l1 + l2);\n var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };\n var tx = p2.x - cm.x;\n var ty = p2.y - cm.y;\n return {\n controlPoint1: this.point(m1.x + tx, m1.y + ty, 0),\n controlPoint2: this.point(m2.x + tx, m2.y + ty, 0)\n };\n };\n /* Returns approximated bezier length of the curuve.*/\n SignatureBase.prototype.bezierLengthCalc = function () {\n var steps = 10;\n var length = 0;\n var i;\n var t;\n var pointx1;\n var pointy1;\n var pointx2;\n var pointy2;\n var pointx3;\n var pointy3;\n for (i = 0; i <= steps; i++) {\n t = i / steps;\n pointx1 = this.bezierPointCalc(t, this.startPoint.x, this.controlPoint1.x, this.controlPoint2.x, this.endPoint.x);\n pointy1 = this.bezierPointCalc(t, this.startPoint.y, this.controlPoint1.y, this.controlPoint2.y, this.endPoint.y);\n if (i > 0) {\n pointx3 = pointx1 - pointx2;\n pointy3 = pointy1 - pointy2;\n length += Math.sqrt(pointx3 * pointx3 + pointy3 * pointy3);\n }\n pointx2 = pointx1;\n pointy2 = pointy1;\n }\n return length;\n };\n /* Calculate parametric value of x or y given t and the\n four point(startpoint, controlpoint1, controlpoint2, endpoint) coordinates of a cubic bezier curve.*/\n SignatureBase.prototype.bezierPointCalc = function (t, startpoint, cp1, cp2, endpoint) {\n return startpoint * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * cp1 * (1.0 - t) * (1.0 - t) * t + 3.0 *\n cp2 * (1.0 - t) * t * t + endpoint * t * t * t;\n };\n /* Velocity between the current point and last point.*/\n SignatureBase.prototype.pointVelocityCalc = function (startPoint) {\n return (this.time !== startPoint.time) ? this.distanceTo(startPoint) / (this.time - startPoint.time) : 0;\n };\n /* Distance between the current point and last point.*/\n SignatureBase.prototype.distanceTo = function (start) {\n return Math.sqrt(Math.pow(this.pointX - start.x, 2) + Math.pow(this.pointY - start.y, 2));\n };\n SignatureBase.prototype.isRead = function (isRead) {\n if (isRead) {\n EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);\n }\n else if (!this.disabled) {\n EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);\n }\n };\n SignatureBase.prototype.enableOrDisable = function (isDisable) {\n this.disabled = isDisable;\n if (isDisable) {\n this.canvasContext.canvas.style.filter = 'opacity(0.5)';\n this.isRead(true);\n }\n else {\n this.canvasContext.canvas.style.filter = '';\n this.isRead(false);\n }\n };\n SignatureBase.prototype.updateSnapCollection = function (isClear) {\n if (isNullOrUndefined(this.incStep)) {\n this.incStep = -1;\n this.incStep++;\n this.snapColl = [];\n this.clearArray = [];\n }\n else {\n this.incStep++;\n }\n if (this.incStep < this.snapColl.length) {\n this.snapColl.length = this.incStep;\n }\n if (this.incStep > 0) {\n var canvasNew = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-wrapper' });\n var canvasContextNew = canvasNew.getContext('2d');\n canvasNew.width = this.canvasContext.canvas.width;\n canvasNew.height = this.canvasContext.canvas.height;\n canvasContextNew.drawImage(this.canvasContext.canvas, 0, 0, canvasNew.width, canvasNew.height);\n this.snapColl.push(canvasNew.toDataURL());\n }\n else {\n this.snapColl.push(this.canvasContext.canvas.toDataURL());\n }\n if (isClear) {\n this.clearArray.push(this.incStep);\n }\n };\n SignatureBase.prototype.setBackgroundImage = function (imageSrc, type) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var imageObj = new Image();\n imageObj.crossOrigin = 'anonymous';\n imageObj.src = imageSrc;\n if (type === 'temp') {\n imageObj.onload = function () {\n proxy.tempContext.globalCompositeOperation = 'source-over';\n proxy.tempContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n else {\n imageObj.onload = function () {\n proxy.canvasContext.globalCompositeOperation = 'source-over';\n proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);\n proxy.updateSnapCollection();\n proxy.saveBackground(true);\n };\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n }\n };\n SignatureBase.prototype.setBackgroundColor = function (color) {\n var canvasEle = this.canvasContext;\n canvasEle.strokeStyle = color;\n var i;\n var j;\n for (i = 1; i <= canvasEle.canvas.width; i++) {\n for (j = 1; j <= canvasEle.canvas.height; j++) {\n canvasEle.strokeRect(0, 0, i, j);\n }\n }\n this.updateSnapCollection();\n };\n SignatureBase.prototype.loadPersistedSignature = function () {\n if (isNullOrUndefined(this.signatureValue)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var lastImage = new Image();\n lastImage.src = this.signatureValue;\n lastImage.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(lastImage, 0, 0);\n proxy.updateSnapCollection();\n };\n this.isSignatureEmpty = false;\n };\n /**\n * To get the signature as Blob.\n *\n * @param {string} url - specify the url/base 64 string to get blob of the signature.\n * @returns {Blob}.\n */\n SignatureBase.prototype.getBlob = function (url) {\n var arr = url.split(',');\n var type = arr[0].match(/:(.*?);/)[1];\n var bstr = atob(arr[1]);\n var n = bstr.length;\n var u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new Blob([u8arr], { type: type });\n };\n SignatureBase.prototype.download = function (blob, fileName) {\n var blobUrl = URL.createObjectURL(blob);\n var a = document.createElement('a');\n a.href = blobUrl;\n a.target = '_parent';\n a.download = fileName;\n (document.body || document.documentElement).appendChild(a);\n a.click();\n a.parentNode.removeChild(a);\n };\n SignatureBase.prototype.internalRefresh = function () {\n this.pointColl = [];\n this.lastVelocity = 0;\n this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;\n };\n /**\n * To refresh the signature.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.refresh = function () {\n this.isResponsive = false;\n this.setHTMLProperties();\n this.resizeHandler();\n this.internalRefresh();\n };\n /**\n * Erases all the signature strokes signed by user.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.clear = function () {\n var args = { actionName: 'clear' };\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n this.tempContext.clearRect(0, 0, this.tempContext.canvas.width, this.tempContext.canvas.height);\n if (this.saveWithBackground && this.backgroundImage) {\n this.setBackgroundImage(this.backgroundImage, 'temp');\n }\n this.internalRefresh();\n this.signRatioPointsColl = [];\n this.updateSnapCollection(true);\n this.isSignatureEmpty = this.canRedraw = true;\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Clear');\n }\n };\n /**\n * Undo the last user action.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.undo = function () {\n var args = { actionName: 'undo' };\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (this.incStep > 0) {\n this.incStep--;\n var undoImg_1 = new Image();\n undoImg_1.src = this.snapColl[this.incStep];\n undoImg_1.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(undoImg_1, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n this.isClear();\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Undo');\n }\n };\n /**\n * Redo the last user action.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.redo = function () {\n var args = { actionName: 'redo' };\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (this.incStep < this.snapColl.length - 1) {\n this.incStep++;\n var redoImg_1 = new Image();\n redoImg_1.src = this.snapColl[this.incStep];\n redoImg_1.onload = function () {\n proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);\n proxy.canvasContext.drawImage(redoImg_1, 0, 0, proxy.element.width, proxy.element.height);\n };\n }\n this.isClear();\n if (!this.isBlazor) {\n this.trigger('change', args);\n }\n else {\n this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Redo');\n }\n };\n SignatureBase.prototype.isClear = function () {\n if (this.clearArray) {\n var empty = false;\n for (var i = 0; i < this.clearArray.length; i++) {\n if (this.clearArray[i] === this.incStep) {\n this.isSignatureEmpty = true;\n empty = true;\n }\n }\n if (!empty) {\n this.isSignatureEmpty = false;\n }\n }\n };\n /**\n * To check whether the signature is empty or not.\n *\n * @returns {boolean}.\n */\n SignatureBase.prototype.isEmpty = function () {\n return this.isSignatureEmpty;\n };\n /**\n * To check whether the undo collection is empty or not.\n *\n * @returns {boolean}.\n */\n SignatureBase.prototype.canUndo = function () {\n return this.incStep > 0;\n };\n /**\n * To check whether the redo collection is empty or not.\n *\n * @returns {boolean}.\n */\n SignatureBase.prototype.canRedo = function () {\n return this.incStep < this.snapColl.length - 1;\n };\n /**\n * To draw the signature based on the given text, with the font family and font size.\n *\n * @param {string} text - specify text to be drawn as signature.\n * @param {string} fontFamily - specify font family of a signature.\n * @param {number} fontSize - specify font size of a signature.\n * @param {number} x- Specifies the x-coordinate to start the text of a signature. Default to the center point of the image if it not specified.\n * @param {number} y - Specifies the y-coordinate to start the text of a signature. Default to the center point of the image if it not specified.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.draw = function (text, fontFamily, fontSize, x, y) {\n var args = { actionName: 'draw-text' };\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n fontFamily = fontFamily || 'Arial';\n fontSize = fontSize || 30;\n this.canvasContext.font = fontSize + 'px ' + fontFamily;\n var startX = this.element.width / 2;\n var startY = this.element.height / 2;\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n this.canvasContext.textAlign = 'center';\n this.canvasContext.textBaseline = 'middle';\n }\n else {\n startX = isNullOrUndefined(x) ? startX : x;\n startY = isNullOrUndefined(y) ? startY + fontSize / 2 : (y + fontSize / 2);\n }\n this.canvasContext.fillText(text, startX, startY);\n this.updateSnapCollection();\n this.isSignatureEmpty = false;\n this.trigger('change', args);\n };\n /**\n * To load the signature with the given base 64 string, height and width.\n *\n * @param {string} signature - specify the url/base 64 string to be drawn as signature.\n * @param {number} width - specify the width of the loaded signature image.\n * @param {number} height - specify the height of the loaded signature image.\n * @returns {void}.\n */\n SignatureBase.prototype.load = function (signature, width, height) {\n height = height || this.element.height;\n width = width || this.element.width;\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var bitmapImage = new Image();\n bitmapImage.src = signature;\n if (signature.slice(0, 4) !== 'data') {\n bitmapImage.crossOrigin = 'anonymous';\n }\n bitmapImage.onload = function () {\n Promise.all([\n createImageBitmap(bitmapImage, 0, 0, width, height)\n ]).then(function (results) {\n var tempCanvas = document.createElement('canvas');\n tempCanvas.width = width;\n tempCanvas.height = height;\n tempCanvas.getContext('2d').drawImage(results[0], 0, 0);\n if (signature.slice(0, 4) !== 'data') {\n proxy.canvasContext.globalCompositeOperation = 'source-over';\n }\n proxy.canvasContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, proxy.element.width, proxy.element.height);\n proxy.updateSnapCollection();\n });\n };\n this.isSignatureEmpty = this.canRedraw = false;\n };\n SignatureBase.prototype.saveBackground = function (savebg) {\n var imageSrc;\n if (savebg && this.backgroundImage) {\n imageSrc = this.snapColl[this.incStep - 1];\n }\n else {\n imageSrc = this.snapColl[this.incStep];\n }\n if (!savebg) {\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n if (this.backgroundImage) {\n this.setBackgroundImage(this.backgroundImage);\n }\n else if (this.backgroundColor) {\n this.setBackgroundColor(this.backgroundColor);\n savebg = true;\n }\n }\n if (savebg) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n var imageObj_1 = new Image();\n imageObj_1.crossOrigin = 'anonymous';\n imageObj_1.src = imageSrc;\n imageObj_1.onload = function () {\n proxy_1.backgroundLoaded = true;\n proxy_1.canvasContext.globalCompositeOperation = 'source-over';\n proxy_1.canvasContext.drawImage(imageObj_1, 0, 0, proxy_1.element.width, proxy_1.element.height);\n proxy_1.save(proxy_1.fileType, proxy_1.fileName);\n };\n }\n };\n /**\n * To save the signature with the given file type and file name.\n *\n * @param {SignatureFileType} type - specify type of the file to be saved a signature.\n * @param {string} fileName - specify name of the file to be saved a signature.\n *\n * @returns {void}.\n */\n SignatureBase.prototype.save = function (type, fileName) {\n if (this.saveWithBackground && this.backgroundLoaded == null && (this.backgroundImage || this.backgroundColor)) {\n this.backgroundLoaded = false;\n this.fileType = type;\n this.fileName = fileName;\n this.saveBackground(false);\n }\n else if (type === 'Svg') {\n fileName = fileName || 'Signature';\n this.toSVG(fileName, this.canvasContext.canvas.toDataURL('image/png'));\n }\n else if (type === 'Jpeg') {\n fileName = fileName || 'Signature';\n if (!this.saveWithBackground || this.saveWithBackground && !(this.backgroundImage || this.backgroundColor)) {\n this.toJPEG(fileName);\n }\n else {\n var dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');\n this.download(this.getBlob(dataURL), fileName + '.' + 'jpeg');\n }\n }\n else {\n fileName = fileName || 'Signature';\n var dataURL = this.canvasContext.canvas.toDataURL('image/png');\n this.download(this.getBlob(dataURL), fileName + '.' + 'png');\n }\n if (this.saveWithBackground && this.backgroundLoaded) {\n this.resetSnap();\n }\n };\n SignatureBase.prototype.resetSnap = function () {\n this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var restoreObj = new Image();\n restoreObj.src = this.snapColl[this.incStep - 1];\n restoreObj.onload = function () {\n proxy.canvasContext.drawImage(restoreObj, 0, 0, proxy.element.width, proxy.element.height);\n proxy.updateSnapCollection();\n };\n this.backgroundLoaded = null;\n this.snapColl.pop();\n this.incStep--;\n this.snapColl.pop();\n this.incStep--;\n };\n SignatureBase.prototype.toJPEG = function (fileName) {\n var _this = this;\n var imageSrc = this.snapColl[this.incStep];\n this.setBackgroundColor('#ffffff');\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n var imageObj = new Image();\n imageObj.crossOrigin = 'anonymous';\n imageObj.src = imageSrc;\n imageObj.onload = function () {\n proxy.canvasContext.globalCompositeOperation = 'source-over';\n proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);\n var dataURL = proxy.canvasContext.canvas.toDataURL('image/jpeg');\n proxy.download(proxy.getBlob(dataURL), fileName + '.' + 'jpeg');\n proxy.canvasContext.clearRect(0, 0, proxy.canvasContext.canvas.width, proxy.canvasContext.canvas.height);\n _this.resizeHandler();\n };\n this.snapColl.pop();\n this.incStep--;\n };\n SignatureBase.prototype.toSVG = function (fileName, dataUrl) {\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('width', this.canvasContext.canvas.width.toString());\n svg.setAttribute('height', this.canvasContext.canvas.height.toString());\n var XLinkNS = 'http://www.w3.org/1999/xlink';\n var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');\n img.setAttributeNS(null, 'height', this.canvasContext.canvas.height.toString());\n img.setAttributeNS(null, 'width', this.canvasContext.canvas.width.toString());\n img.setAttributeNS(XLinkNS, 'xlink:href', dataUrl);\n svg.appendChild(img);\n var prefix = 'data:image/svg+xml;base64,';\n var header = '
\n *
\n * ```\n * ```typescript\n * var listviewObject = new ListView({});\n * listviewObject.appendTo(\"#listview\");\n * ```\n */\nvar ListView = /** @__PURE__ @class */ (function (_super) {\n __extends(ListView, _super);\n /**\n * Constructor for creating the widget\n *\n * @param options\n *\n * @param element\n */\n function ListView(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousSelectedItems = [];\n _this.hiddenItems = [];\n _this.enabledItems = [];\n _this.disabledItems = [];\n return _this;\n }\n /**\n * @param newProp\n *\n * @param oldProp\n *\n * @private\n */\n ListView.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 'htmlAttributes':\n this.setHTMLAttribute();\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'enable':\n this.setEnable();\n break;\n case 'width':\n case 'height':\n this.setSize();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'fields':\n this.listBaseOption.fields = this.fields.properties;\n if (this.enableVirtualization) {\n this.virtualizationModule.reRenderUiVirtualization();\n }\n else {\n this.reRender();\n }\n break;\n case 'headerTitle':\n if (!this.curDSLevel.length) {\n this.header(this.headerTitle, false, 'header');\n }\n break;\n case 'query':\n if (this.enableVirtualization) {\n this.virtualizationModule.reRenderUiVirtualization();\n }\n else {\n this.reRender();\n }\n break;\n case 'showHeader':\n this.header(this.headerTitle, false, 'header');\n break;\n case 'enableVirtualization':\n if (!isNullOrUndefined(this.contentContainer)) {\n detach(this.contentContainer);\n }\n this.refresh();\n break;\n case 'showCheckBox':\n case 'checkBoxPosition':\n if (this.enableVirtualization) {\n this.virtualizationModule.reRenderUiVirtualization();\n }\n else {\n this.setCheckbox();\n }\n break;\n case 'dataSource':\n this.previousScrollTop = this.element.scrollTop;\n if (this.enableVirtualization) {\n this.virtualizationModule.reRenderUiVirtualization();\n }\n else {\n this.reRender();\n }\n break;\n case 'sortOrder':\n case 'template':\n if (!this.enableVirtualization) {\n this.refresh();\n }\n break;\n case 'showIcon':\n if (this.enableVirtualization) {\n this.virtualizationModule.reRenderUiVirtualization();\n }\n else {\n this.listBaseOption.showIcon = this.showIcon;\n this.curViewDS = this.getSubDS();\n this.resetCurrentList();\n }\n break;\n }\n }\n };\n // Model Changes\n ListView.prototype.setHTMLAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes) && Object.keys(this.htmlAttributes).length) {\n attributes(this.element, this.htmlAttributes);\n }\n };\n ListView.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' ').filter(function (css) { return css; }));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' ').filter(function (css) { return css; }));\n }\n };\n ListView.prototype.setSize = function () {\n this.element.style.height = formatUnit(this.height);\n this.element.style.width = formatUnit(this.width);\n this.isWindow = this.element.clientHeight ? false : true;\n };\n ListView.prototype.setEnable = function () {\n this.enableElement(this.element, this.enable);\n };\n ListView.prototype.setEnableRTL = function () {\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n else {\n this.element.classList.remove('e-rtl');\n }\n };\n ListView.prototype.enableElement = function (element, isEnabled) {\n if (isEnabled) {\n element.classList.remove(classNames.disable);\n }\n else {\n element.classList.add(classNames.disable);\n }\n };\n // Support Component Functions\n ListView.prototype.header = function (text, showBack, prop) {\n if (this.headerEle === undefined && this.showHeader) {\n this.headerEle = this.createElement('div', { className: classNames.header });\n var innerHeaderEle = this.createElement('span', { className: classNames.headerText });\n if (this.enableHtmlSanitizer) {\n this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);\n innerHeaderEle.innerText = this.headerTitle;\n }\n else {\n innerHeaderEle.innerHTML = this.headerTitle;\n }\n var textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });\n var hedBackButton = this.createElement('div', {\n className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,\n attrs: { style: 'display:none;' }\n });\n this.headerEle.appendChild(hedBackButton);\n this.headerEle.appendChild(textEle);\n if (this.headerTemplate) {\n var compiledString = compile(this.headerTemplate);\n var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });\n var compiledElement = compiledString({}, this, prop, this.LISTVIEW_HEADERTEMPLATE_ID, null, null, this.headerEle);\n if (compiledElement) {\n append(compiledElement, headerTemplateEle);\n }\n append([headerTemplateEle], this.headerEle);\n if (this.isReact) {\n this.renderReactTemplates();\n }\n }\n if (this.headerTemplate && this.headerTitle) {\n textEle.classList.add('header');\n }\n this.element.classList.add('e-has-header');\n prepend([this.headerEle], this.element);\n }\n else if (this.headerEle) {\n if (this.showHeader) {\n this.headerEle.style.display = '';\n var textEle = this.headerEle.querySelector('.' + classNames.headerText);\n var hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);\n if (this.enableHtmlSanitizer) {\n text = SanitizeHtmlHelper.sanitize(text);\n }\n textEle.innerHTML = text;\n if (this.headerTemplate && showBack) {\n textEle.parentElement.classList.remove('header');\n this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('nested-header');\n }\n if (this.headerTemplate && !showBack) {\n textEle.parentElement.classList.add('header');\n this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.remove('nested-header');\n this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('header');\n }\n if (showBack === true) {\n hedBackButton.style.display = '';\n }\n else {\n hedBackButton.style.display = 'none';\n }\n }\n else {\n this.headerEle.style.display = 'none';\n }\n }\n };\n // Animation Related Functions\n ListView.prototype.switchView = function (fromView, toView, reverse) {\n var _this = this;\n if (fromView && toView) {\n var fPos_1 = fromView.style.position;\n var overflow_1 = (this.element.style.overflow !== 'hidden') ? this.element.style.overflow : '';\n fromView.style.position = 'absolute';\n fromView.classList.add('e-view');\n var anim = void 0;\n var duration = this.animation.duration;\n if (this.animation.effect) {\n anim = (this.enableRtl ? effectsRTLConfig[this.animation.effect] : effectsConfig[this.animation.effect]);\n }\n else {\n var slideLeft = 'SlideLeft';\n anim = effectsConfig[\"\" + slideLeft];\n reverse = this.enableRtl;\n duration = 0;\n }\n this.element.style.overflow = 'hidden';\n this.aniObj.animate(fromView, {\n name: (reverse === true ? anim[0] : anim[1]),\n duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,\n timingFunction: this.animation.easing,\n end: function () {\n fromView.style.display = 'none';\n _this.element.style.overflow = overflow_1;\n fromView.style.position = fPos_1;\n fromView.classList.remove('e-view');\n }\n });\n toView.style.display = '';\n this.aniObj.animate(toView, {\n name: (reverse === true ? anim[2] : anim[3]),\n duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,\n timingFunction: this.animation.easing,\n end: function () {\n _this.trigger('actionComplete');\n }\n });\n this.curUL = toView;\n }\n };\n ListView.prototype.preRender = function () {\n if (this.template) {\n try {\n if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {\n this.setProperties({ template: document.querySelector(this.template).innerHTML.trim() }, true);\n }\n }\n catch (e) {\n compile(this.template);\n }\n }\n this.listBaseOption = {\n template: this.template,\n headerTemplate: this.headerTemplate,\n groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',\n ariaAttributes: {\n itemRole: 'listitem', listRole: 'list', itemText: '',\n groupItemRole: 'presentation', wrapperRole: 'presentation'\n },\n fields: (this.fields.properties),\n sortOrder: this.sortOrder,\n showIcon: this.showIcon,\n itemCreated: this.renderCheckbox.bind(this),\n templateID: \"\" + this.element.id + LISTVIEW_TEMPLATE_PROPERTY,\n groupTemplateID: \"\" + this.element.id + LISTVIEW_GROUPTEMPLATE_PROPERTY,\n enableHtmlSanitizer: this.enableHtmlSanitizer\n };\n this.initialization();\n };\n ListView.prototype.initialization = function () {\n this.curDSLevel = [];\n this.animateOptions = {};\n this.curViewDS = [];\n this.currentLiElements = [];\n this.isNestedList = false;\n this.selectedData = [];\n this.selectedId = this.enablePersistence ? this.selectedId : [];\n this.LISTVIEW_TEMPLATE_ID = \"\" + this.element.id + LISTVIEW_TEMPLATE_PROPERTY;\n this.LISTVIEW_GROUPTEMPLATE_ID = \"\" + this.element.id + LISTVIEW_GROUPTEMPLATE_PROPERTY;\n this.LISTVIEW_HEADERTEMPLATE_ID = \"\" + this.element.id + LISTVIEW_HEADERTEMPLATE_PROPERTY;\n this.aniObj = new Animation(this.animateOptions);\n this.removeElement(this.curUL);\n this.removeElement(this.ulElement);\n this.removeElement(this.headerEle);\n this.removeElement(this.contentContainer);\n this.curUL = this.ulElement = this.liCollection = this.headerEle = this.contentContainer = undefined;\n };\n ListView.prototype.renderCheckbox = function (args) {\n var _this = this;\n if (args.item.classList.contains(classNames.hasChild)) {\n this.isNestedList = true;\n }\n if (this.showCheckBox && args.item.classList.contains(classNames.listItem)) {\n var fieldData_1;\n var checkboxElement = createCheckBox(this.createElement, false, {\n checked: false, enableRtl: this.enableRtl,\n cssClass: classNames.listviewCheckbox\n });\n checkboxElement.setAttribute('role', 'checkbox');\n var frameElement_1 = checkboxElement.querySelector('.' + classNames.checkboxIcon);\n args.item.classList.add(classNames.itemCheckList);\n args.item.firstElementChild.classList.add(classNames.checkbox);\n if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {\n fieldData_1 = getFieldValues(args.curData, this.listBaseOption.fields);\n if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {\n var index = this.selectedId.findIndex(function (e) { return e === fieldData_1[_this.listBaseOption.fields.id].toString(); });\n if (index !== -1) {\n this.checkInternally(args, checkboxElement);\n }\n }\n else if (fieldData_1[this.listBaseOption.fields.isChecked]) {\n this.checkInternally(args, checkboxElement);\n }\n }\n else if (((typeof this.dataSource[0] === 'string' ||\n typeof this.dataSource[0] === 'number') && this.selectedData.indexOf(args.text) !== -1)) {\n this.checkInternally(args, checkboxElement);\n }\n checkboxElement.setAttribute('aria-checked', frameElement_1.classList.contains(classNames.checked) ? 'true' : 'false');\n checkboxElement.setAttribute('aria-label', args.text);\n if (this.checkBoxPosition === 'Left') {\n checkboxElement.classList.add(classNames.checkboxLeft);\n args.item.firstElementChild.classList.add(classNames.checkboxLeft);\n args.item.firstElementChild.insertBefore(checkboxElement, args.item.firstElementChild.childNodes[0]);\n }\n else {\n checkboxElement.classList.add(classNames.checkboxRight);\n args.item.firstElementChild.classList.add(classNames.checkboxRight);\n args.item.firstElementChild.appendChild(checkboxElement);\n }\n this.currentLiElements.push(args.item);\n if (this.checkBoxPosition === 'Left') {\n this.virtualCheckBox = args.item.firstElementChild.children[0];\n }\n else {\n this.virtualCheckBox = args.item.firstElementChild.lastElementChild;\n }\n }\n };\n ListView.prototype.checkInternally = function (args, checkboxElement) {\n args.item.classList.add(classNames.selected);\n checkboxElement.querySelector('.' + classNames.checkboxIcon).classList.add(classNames.checked);\n checkboxElement.setAttribute('aria-checked', 'true');\n };\n /**\n * Checks the specific list item by passing the unchecked fields as an argument to this method.\n *\n * @param {Fields | HTMLElement | Element} item - It accepts Fields or HTML list element as an argument.\n */\n ListView.prototype.checkItem = function (item) {\n this.toggleCheckBase(item, true);\n };\n ListView.prototype.toggleCheckBase = function (item, checked) {\n if (this.showCheckBox) {\n var liElement = item;\n if (item instanceof Object && item.constructor !== HTMLLIElement) {\n liElement = this.getLiFromObjOrElement(item);\n }\n if (!isNullOrUndefined(liElement)) {\n var checkboxIcon = liElement.querySelector('.' + classNames.checkboxIcon);\n if (checked === true) {\n liElement.classList.add(classNames.selected);\n }\n else {\n liElement.classList.remove(classNames.selected);\n }\n if (checked === true) {\n checkboxIcon.classList.add(classNames.checked);\n }\n else {\n checkboxIcon.classList.remove(classNames.checked);\n }\n checkboxIcon.parentElement.setAttribute('aria-checked', checked ? 'true' : 'false');\n }\n this.setSelectedItemData(liElement);\n this.updateSelectedId();\n }\n };\n /**\n * Uncheck the specific list item by passing the checked fields as an argument to this method.\n *\n * @param {Fields | HTMLElement | Element} item - It accepts Fields or HTML list element as an argument.\n */\n ListView.prototype.uncheckItem = function (item) {\n this.toggleCheckBase(item, false);\n };\n /**\n * Checks all the unchecked items in the ListView.\n */\n ListView.prototype.checkAllItems = function () {\n this.toggleAllCheckBase(true);\n };\n /**\n * Uncheck all the checked items in ListView.\n */\n ListView.prototype.uncheckAllItems = function () {\n this.toggleAllCheckBase(false);\n };\n ListView.prototype.toggleAllCheckBase = function (checked) {\n if (this.showCheckBox) {\n for (var i = 0; i < this.liCollection.length; i++) {\n var checkIcon = this.liCollection[i].querySelector('.' + classNames.checkboxIcon);\n if (checkIcon) {\n if (checked) {\n if (!checkIcon.classList.contains(classNames.checked)) {\n this.checkItem(this.liCollection[i]);\n }\n }\n else {\n if (checkIcon.classList.contains(classNames.checked)) {\n this.uncheckItem(this.liCollection[i]);\n }\n }\n }\n }\n if (this.enableVirtualization) {\n this.virtualizationModule.checkedItem(checked);\n }\n this.updateSelectedId();\n }\n };\n ListView.prototype.setCheckbox = function () {\n if (this.showCheckBox) {\n var liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.listItem));\n var args = {\n item: undefined, curData: undefined, dataSource: undefined, fields: undefined,\n options: undefined, text: ''\n };\n for (var i = 0; i < liCollection.length; i++) {\n var element = liCollection[i];\n args.item = element;\n args.curData = this.getItemData(element);\n if (element.querySelector('.' + classNames.checkboxWrapper)) {\n this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));\n }\n this.renderCheckbox(args);\n if (args.item.classList.contains(classNames.selected)) {\n this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));\n }\n }\n }\n else {\n var liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.itemCheckList));\n for (var i = 0; i < liCollection.length; i++) {\n var element = liCollection[i];\n element.classList.remove(classNames.selected);\n element.firstElementChild.classList.remove(classNames.checkbox);\n this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));\n }\n if (this.selectedItems) {\n this.selectedItems.item.classList.add(classNames.selected);\n }\n }\n };\n /**\n * Refresh the height of the list item only on enabling the virtualization property.\n */\n ListView.prototype.refreshItemHeight = function () {\n if (this.virtualizationModule) {\n this.virtualizationModule.refreshItemHeight();\n }\n };\n ListView.prototype.handleCheckboxState = function (li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, isSetCheckboxLI, textAreaFocus) {\n this.trigger('select', eventArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n if (isSetCheckboxLI ? isCheckedBefore : !isCheckedBefore) {\n checkIcon.classList.add(classNames.checked);\n li.classList.add(classNames.selected);\n }\n else {\n checkIcon.classList.remove(classNames.checked);\n li.classList.remove(classNames.selected);\n }\n checkboxElement.setAttribute('aria-checked', isSetCheckboxLI ? (isCheckedBefore ? 'true' : 'false') : (isCheckedBefore ? 'false' : 'true'));\n merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });\n if (isFocusedBefore) {\n li.classList.remove(classNames.focused);\n if (textAreaFocus) {\n textAreaFocus.classList.remove('e-focused');\n }\n }\n }\n });\n };\n ListView.prototype.clickHandler = function (e) {\n if (Array.isArray(this.dataSource) && this.dataSource.length === 0) {\n return;\n }\n var target = e.target;\n this.targetElement = target;\n var classList = target.classList;\n var closestElement;\n if (classList.contains(classNames.backIcon) || classList.contains(classNames.headerText)) {\n if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {\n this.uncheckAllItems();\n }\n this.back();\n }\n else {\n var li = closest(target.parentNode, '.' + classNames.listItem);\n if (li === null) {\n li = target;\n }\n this.removeFocus();\n if (this.enable && this.showCheckBox && this.isValidLI(li)) {\n if (e.target.classList.contains(classNames.checkboxIcon)) {\n li.classList.add(classNames.focused);\n if (isNullOrUndefined(li.querySelector('.' + classNames.checked))) {\n var args = {\n curData: undefined, dataSource: undefined, fields: undefined, options: undefined,\n text: undefined, item: li\n };\n this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));\n }\n else {\n this.uncheckItem(li);\n li.classList.add(classNames.focused);\n }\n if (this.enableVirtualization) {\n this.virtualizationModule.setCheckboxLI(li, e);\n }\n if (e) {\n var eventArgs = this.selectEventData(li, e);\n var checkIcon = li.querySelector('.' + classNames.checkboxIcon);\n merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });\n var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);\n var isCheckedBefore = checkIcon.classList.contains(classNames.checked);\n var isFocusedBefore = li.classList.contains(classNames.focused);\n this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, false);\n }\n }\n else if (li.classList.contains(classNames.hasChild)) {\n this.removeHover();\n this.removeSelect();\n this.removeSelect(li);\n this.setSelectLI(li, e);\n li.classList.remove(classNames.selected);\n }\n else {\n this.setCheckboxLI(li, e);\n if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {\n target.classList.add('e-focused');\n this.targetElement = target;\n }\n }\n }\n else {\n this.setSelectLI(li, e);\n if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {\n target.classList.add('e-focused');\n this.targetElement = target;\n }\n }\n closestElement = closest(e.target, 'li');\n if (!isNullOrUndefined(closestElement)) {\n if (closestElement.classList.contains('e-has-child') &&\n !e.target.parentElement.classList.contains('e-listview-checkbox')) {\n closestElement.classList.add(classNames.disable);\n }\n }\n }\n this.updateSelectedId();\n };\n ListView.prototype.removeElement = function (element) {\n return element && element.parentNode && element.parentNode.removeChild(element);\n };\n ListView.prototype.hoverHandler = function (e) {\n var curLi = closest(e.target.parentNode, '.' + classNames.listItem);\n this.setHoverLI(curLi);\n };\n ListView.prototype.leaveHandler = function () {\n this.removeHover();\n };\n ListView.prototype.homeKeyHandler = function (e, end) {\n e.preventDefault();\n if (Object.keys(this.dataSource).length && this.curUL) {\n var li = this.curUL.querySelectorAll('.' + classNames.listItem);\n var focusedElement = this.curUL.querySelector('.' + classNames.focused) ||\n this.curUL.querySelector('.' + classNames.selected);\n if (focusedElement) {\n focusedElement.classList.remove(classNames.focused);\n if (!this.showCheckBox) {\n focusedElement.classList.remove(classNames.selected);\n }\n }\n var index = !end ? 0 : li.length - 1;\n if (li[index].classList.contains(classNames.hasChild) || this.showCheckBox) {\n li[index].classList.add(classNames.focused);\n }\n else {\n this.setSelectLI(li[index], e);\n }\n if (li[index]) {\n this.element.setAttribute('aria-activedescendant', li[index].id.toString());\n }\n else {\n this.element.removeAttribute('aria-activedescendant');\n }\n }\n };\n ListView.prototype.onArrowKeyDown = function (e, prev) {\n var siblingLI;\n var li;\n var hasChild = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;\n if (hasChild || this.showCheckBox) {\n li = this.curUL.querySelector('.' + classNames.focused) || this.curUL.querySelector('.' + classNames.selected);\n siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);\n if (!isNullOrUndefined(siblingLI)) {\n if (li) {\n li.classList.remove(classNames.focused);\n if (!this.showCheckBox) {\n li.classList.remove(classNames.selected);\n }\n }\n if (siblingLI.classList.contains(classNames.hasChild) || this.showCheckBox) {\n siblingLI.classList.add(classNames.focused);\n }\n else {\n this.setSelectLI(siblingLI, e);\n }\n }\n }\n else {\n li = this.curUL.querySelector('.' + classNames.selected);\n siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);\n this.setSelectLI(siblingLI, e);\n }\n if (siblingLI) {\n this.element.setAttribute('aria-activedescendant', siblingLI.id.toString());\n }\n else {\n this.element.removeAttribute('aria-activedescendant');\n }\n return siblingLI;\n };\n ListView.prototype.arrowKeyHandler = function (e, prev) {\n var _this = this;\n e.preventDefault();\n if (Object.keys(this.dataSource).length && this.curUL) {\n var siblingLI = this.onArrowKeyDown(e, prev);\n var elementTop = this.element.getBoundingClientRect().top;\n var elementHeight = this.element.getBoundingClientRect().height;\n var firstItemBounds = this.curUL.querySelector('.' + classNames.listItem).getBoundingClientRect();\n var heightDiff = void 0;\n var groupItemBounds = void 0;\n if (this.fields.groupBy) {\n groupItemBounds = this.curUL.querySelector('.' + classNames.groupListItem).getBoundingClientRect();\n }\n if (siblingLI) {\n var siblingTop = siblingLI.getBoundingClientRect().top;\n var siblingHeight = siblingLI.getBoundingClientRect().height;\n if (!prev) {\n var height = this.isWindow ? window.innerHeight : elementHeight;\n heightDiff = this.isWindow ? (siblingTop + siblingHeight) :\n ((siblingTop - elementTop) + siblingHeight);\n if (heightDiff > height) {\n if (this.isWindow === true) {\n window.scroll(0, pageYOffset + (heightDiff - height));\n }\n else {\n this.element.scrollTop = this.element.scrollTop + (heightDiff - height);\n }\n }\n }\n else {\n heightDiff = this.isWindow ? siblingTop : (siblingTop - elementTop);\n if (heightDiff < 0) {\n if (this.isWindow === true) {\n window.scroll(0, pageYOffset + heightDiff);\n }\n else {\n this.element.scrollTop = this.element.scrollTop + heightDiff;\n }\n }\n }\n }\n else if (this.enableVirtualization && prev && this.virtualizationModule.uiFirstIndex) {\n this.onUIScrolled = function () {\n _this.onArrowKeyDown(e, prev);\n _this.onUIScrolled = undefined;\n };\n heightDiff = this.virtualizationModule.listItemHeight;\n if (this.isWindow === true) {\n window.scroll(0, pageYOffset - heightDiff);\n }\n else {\n this.element.scrollTop = this.element.scrollTop - heightDiff;\n }\n }\n else if (prev) {\n if (this.showHeader && this.headerEle) {\n var topHeight = groupItemBounds ? groupItemBounds.top : firstItemBounds.top;\n var headerBounds = this.headerEle.getBoundingClientRect();\n heightDiff = headerBounds.top < 0 ? (headerBounds.height - topHeight) : 0;\n if (this.isWindow === true) {\n window.scroll(0, pageYOffset - heightDiff);\n }\n else {\n this.element.scrollTop = 0;\n }\n }\n else if (this.fields.groupBy) {\n heightDiff = this.isWindow ? (groupItemBounds.top < 0 ? groupItemBounds.top : 0) :\n (elementTop - firstItemBounds.top) + groupItemBounds.height;\n if (this.isWindow === true) {\n window.scroll(0, pageYOffset + heightDiff);\n }\n else {\n this.element.scrollTop = this.element.scrollTop - heightDiff;\n }\n }\n }\n }\n };\n ListView.prototype.enterKeyHandler = function (e) {\n if (Object.keys(this.dataSource).length && this.curUL) {\n var hasChild = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;\n var li = this.curUL.querySelector('.' + classNames.focused);\n if (hasChild && li) {\n li.classList.remove(classNames.focused);\n if (this.showCheckBox) {\n this.removeSelect();\n this.removeSelect(li);\n this.removeHover();\n }\n this.setSelectLI(li, e);\n }\n }\n };\n ListView.prototype.spaceKeyHandler = function (e) {\n if (this.enable && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {\n e.preventDefault();\n var li = this.curUL.querySelector('.' + classNames.focused);\n var checkboxElement = void 0;\n var checkIcon = void 0;\n if (!isNullOrUndefined(li) && isNullOrUndefined(li.querySelector('.' + classNames.checked))) {\n var args = {\n curData: undefined, dataSource: undefined, fields: undefined, options: undefined,\n text: undefined, item: li\n };\n checkboxElement = args.item.querySelector('.' + classNames.checkboxWrapper);\n this.checkInternally(args, checkboxElement);\n checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);\n }\n else {\n this.uncheckItem(li);\n }\n var eventArgs = this.selectEventData(li, e);\n merge(eventArgs, { isChecked: checkIcon ? checkIcon.classList.contains(classNames.checked) : false });\n if (!isNullOrUndefined(li)) {\n var cbElement = li.querySelector('.' + classNames.checkboxWrapper);\n var checkboxIcon = li.querySelector('.' + classNames.checkboxIcon);\n var isCheckedBefore = checkboxIcon.classList.contains(classNames.checked);\n var isFocusedBefore = li.classList.contains(classNames.focused);\n this.handleCheckboxState(li, checkboxIcon, cbElement, isCheckedBefore, isFocusedBefore, eventArgs, false);\n }\n this.updateSelectedId();\n }\n };\n ListView.prototype.keyActionHandler = function (e) {\n switch (e.keyCode) {\n case 36:\n this.homeKeyHandler(e);\n break;\n case 35:\n this.homeKeyHandler(e, true);\n break;\n case 40:\n this.arrowKeyHandler(e);\n break;\n case 38:\n this.arrowKeyHandler(e, true);\n break;\n case 13:\n this.enterKeyHandler(e);\n break;\n case 8:\n if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {\n this.uncheckAllItems();\n }\n this.back();\n break;\n case 32:\n if (isNullOrUndefined(this.targetElement) || !(this.targetElement.classList.contains('e-focused'))) {\n this.spaceKeyHandler(e);\n }\n break;\n }\n };\n ListView.prototype.swipeActionHandler = function (e) {\n if (e.swipeDirection === 'Right' && e.velocity > swipeVelocity && e.originalEvent.type === 'touchend') {\n if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {\n this.uncheckAllItems();\n }\n this.back();\n }\n };\n ListView.prototype.focusout = function () {\n if (Object.keys(this.dataSource).length && this.curUL) {\n var focusedElement = this.curUL.querySelector('.' + classNames.focused);\n if (focusedElement) {\n focusedElement.classList.remove(classNames.focused);\n if (!this.showCheckBox && !isNullOrUndefined(this.selectedLI)) {\n this.selectedLI.classList.add(classNames.selected);\n }\n }\n }\n };\n ListView.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'keydown', this.keyActionHandler, this);\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);\n EventHandler.add(this.element, 'mouseout', this.leaveHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusout, this);\n this.touchModule = new Touch(this.element, { swipe: this.swipeActionHandler.bind(this) });\n if (!isNullOrUndefined(this.scroll)) {\n EventHandler.add(this.element, 'scroll', this.onListScroll, this);\n }\n };\n ListView.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'keydown', this.keyActionHandler);\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'mouseover', this.hoverHandler);\n EventHandler.remove(this.element, 'mouseout', this.leaveHandler);\n EventHandler.remove(this.element, 'mouseover', this.hoverHandler);\n EventHandler.remove(this.element, 'mouseout', this.leaveHandler);\n EventHandler.remove(this.element, 'focusout', this.focusout);\n if (!isNullOrUndefined(this.scroll)) {\n EventHandler.remove(this.element, 'scroll', this.onListScroll);\n }\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n this.touchModule = null;\n };\n ListView.prototype.removeFocus = function () {\n var focusedLI = this.element.querySelectorAll('.' + classNames.focused);\n for (var _i = 0, focusedLI_1 = focusedLI; _i < focusedLI_1.length; _i++) {\n var ele = focusedLI_1[_i];\n ele.classList.remove(classNames.focused);\n }\n };\n ListView.prototype.removeHover = function () {\n var hoverLI = this.element.querySelector('.' + classNames.hover);\n if (hoverLI) {\n hoverLI.classList.remove(classNames.hover);\n }\n };\n ListView.prototype.removeSelect = function (li) {\n if (isNullOrUndefined(li)) {\n var selectedLI = this.element.querySelectorAll('.' + classNames.selected);\n for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {\n var ele = selectedLI_1[_i];\n if (this.showCheckBox && ele.querySelector('.' + classNames.checked)) {\n continue;\n }\n else {\n ele.classList.remove(classNames.selected);\n }\n }\n }\n else {\n li.classList.remove(classNames.selected);\n }\n };\n ListView.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(classNames.listItem)\n && !li.classList.contains(classNames.groupListItem)\n && !li.classList.contains(classNames.disable));\n };\n ListView.prototype.setCheckboxLI = function (li, e) {\n if (this.isValidLI(li) && this.enable && this.showCheckBox) {\n if (this.curUL.querySelector('.' + classNames.focused)) {\n this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);\n }\n var textAreaFocus = li.querySelector('textarea') || li.querySelector('input');\n li.classList.add(classNames.focused);\n if (!isNullOrUndefined(e)) {\n if (e.target === textAreaFocus) {\n textAreaFocus.classList.add('e-focused');\n }\n }\n var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);\n var checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);\n this.removeHover();\n var isCheckedBefore = checkIcon.classList.contains(classNames.checked);\n var isFocusedBefore = li.classList.contains(classNames.focused);\n if (!isCheckedBefore) {\n checkIcon.classList.add(classNames.checked);\n li.classList.add(classNames.selected);\n }\n else {\n checkIcon.classList.remove(classNames.checked);\n li.classList.remove(classNames.selected);\n }\n checkboxElement.setAttribute('aria-checked', checkIcon.classList.contains(classNames.checked) ?\n 'true' : 'false');\n var eventArgs = this.selectEventData(li, e);\n merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });\n if (this.enableVirtualization) {\n this.virtualizationModule.setCheckboxLI(li, e);\n }\n this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, true, textAreaFocus);\n this.setSelectedItemData(li);\n this.renderSubList(li);\n }\n };\n ListView.prototype.selectEventData = function (li, e) {\n var data = this.getItemData(li);\n var fieldData = getFieldValues(data, this.listBaseOption.fields);\n var selectedItem;\n if (!isNullOrUndefined(data)\n && typeof this.dataSource[0] === 'string' || typeof this.dataSource[0] === 'number') {\n selectedItem = { item: li, text: li && li.innerText.trim(), data: this.dataSource };\n }\n else {\n selectedItem =\n {\n item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],\n data: data\n };\n }\n var eventArgs = {};\n merge(eventArgs, selectedItem);\n if (e) {\n merge(eventArgs, {\n isInteracted: true,\n event: e,\n cancel: false,\n index: this.curUL && Array.prototype.indexOf.call(this.curUL.children, li)\n });\n }\n return eventArgs;\n };\n ListView.prototype.setSelectedItemData = function (li) {\n var data = this.getItemData(li);\n var fieldData = getFieldValues(data, this.listBaseOption.fields);\n if (!isNullOrUndefined(data) && ((typeof this.dataSource[0] === 'string') ||\n (typeof this.dataSource[0] === 'number'))) {\n this.selectedItems = {\n item: li,\n text: li && li.innerText.trim(),\n data: this.dataSource\n };\n }\n else {\n this.selectedItems = {\n item: li,\n text: fieldData && fieldData[this.listBaseOption.fields.text],\n data: data\n };\n }\n };\n ListView.prototype.setSelectLI = function (li, e) {\n var _this = this;\n if (this.isValidLI(li) && !li.classList.contains(classNames.selected) && this.enable) {\n if (!this.showCheckBox) {\n this.removeSelect();\n }\n li.classList.add(classNames.selected);\n this.removeHover();\n this.setSelectedItemData(li);\n if (this.enableVirtualization) {\n this.virtualizationModule.setSelectLI(li, e);\n }\n var eventArgs = this.selectEventData(li, e);\n this.trigger('select', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.selectedLI = li;\n _this.renderSubList(li);\n }\n else {\n li.classList.remove(classNames.selected);\n _this.selectedLI = li;\n }\n });\n }\n };\n ListView.prototype.setHoverLI = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(classNames.hover) && this.enable) {\n var lastLi = this.element.querySelectorAll('.' + classNames.hover);\n if (lastLi && lastLi.length) {\n removeClass(lastLi, classNames.hover);\n }\n if (!li.classList.contains(classNames.selected) || this.showCheckBox) {\n li.classList.add(classNames.hover);\n }\n }\n };\n //Data Source Related Functions\n ListView.prototype.getSubDS = function () {\n var levelKeys = this.curDSLevel;\n if (levelKeys.length) {\n var ds = this.localData;\n for (var _i = 0, levelKeys_1 = levelKeys; _i < levelKeys_1.length; _i++) {\n var key = levelKeys_1[_i];\n var field = {};\n field[this.fields.id] = key;\n this.curDSJSON = this.findItemFromDS(ds, field);\n var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);\n ds = this.curDSJSON ? fieldData[this.fields.child] : ds;\n }\n return ds;\n }\n return this.localData;\n };\n ListView.prototype.getItemData = function (li) {\n var dataSource = this.dataSource instanceof DataManager ?\n this.localData : this.dataSource;\n var fields = this.getElementUID(li);\n var curDS;\n if (isNullOrUndefined(this.element.querySelector('.' + classNames.hasChild)) && this.fields.groupBy) {\n curDS = this.curViewDS;\n }\n else {\n curDS = dataSource;\n }\n return this.findItemFromDS(curDS, fields);\n };\n ListView.prototype.findItemFromDS = function (dataSource, fields, parent) {\n var _this = this;\n var resultJSON;\n if (dataSource && dataSource.length && fields) {\n dataSource.some(function (data) {\n var fieldData = getFieldValues(data, _this.listBaseOption.fields);\n //(!(fid) || id === fid) && (!(ftext) || text === ftext) && (!!fid || !!ftext)\n if ((fields[_this.fields.id] || fields[_this.fields.text]) &&\n (!fields[_this.fields.id] || (!isNullOrUndefined(fieldData[_this.fields.id]) &&\n fieldData[_this.fields.id].toString()) === fields[_this.fields.id].toString()) &&\n (!fields[_this.fields.text] || fieldData[_this.fields.text] === fields[_this.fields.text])) {\n resultJSON = (parent ? dataSource : data);\n }\n else if (typeof data !== 'object' && dataSource.indexOf(data) !== -1) {\n resultJSON = (parent ? dataSource : data);\n }\n else if (!isNullOrUndefined(fields[_this.fields.id]) && isNullOrUndefined(fieldData[_this.fields.id])) {\n var li = _this.element.querySelector('[data-uid=\"'\n + fields[_this.fields.id] + '\"]');\n if (li && li.innerText.trim() === fieldData[_this.fields.text]) {\n resultJSON = data;\n }\n }\n else if (Object.prototype.hasOwnProperty.call(fieldData, _this.fields.child) &&\n fieldData[_this.fields.child].length) {\n resultJSON = _this.findItemFromDS(fieldData[_this.fields.child], fields, parent);\n }\n return !!resultJSON;\n });\n }\n else {\n resultJSON = dataSource;\n }\n return resultJSON;\n };\n ListView.prototype.getQuery = function () {\n var columns = [];\n var query = (this.query ? this.query : new Query());\n if (!this.query) {\n for (var _i = 0, _a = Object.keys(this.fields.properties); _i < _a.length; _i++) {\n var column = _a[_i];\n if (column !== 'tableName' && !!(this.fields[\"\" + column]) &&\n this.fields[\"\" + column] !==\n ListBase.defaultMappedFields[\"\" + column]\n && columns.indexOf(this.fields[\"\" + column]) === -1) {\n columns.push(this.fields[\"\" + column]);\n }\n }\n query.select(columns);\n if (Object.prototype.hasOwnProperty.call(this.fields.properties, 'tableName')) {\n query.from(this.fields.tableName);\n }\n }\n return query;\n };\n ListView.prototype.setViewDataSource = function (dataSource) {\n if (dataSource === void 0) { dataSource = this.localData; }\n var fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;\n var query = ListBase.addSorting(this.sortOrder, fieldValue);\n if (dataSource && this.fields.groupBy) {\n if (this.sortOrder !== 'None') {\n this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, query), this.listBaseOption.fields, this.sortOrder);\n }\n else {\n this.curViewDS = ListBase.groupDataSource(dataSource, this.listBaseOption.fields, this.sortOrder);\n }\n }\n else if (dataSource && this.sortOrder !== 'None') {\n this.curViewDS = ListBase.getDataSource(dataSource, query);\n }\n else {\n this.curViewDS = dataSource;\n }\n };\n ListView.prototype.isInAnimation = function () {\n return this.curUL.classList.contains('.e-animate');\n };\n ListView.prototype.renderRemoteLists = function (e, listViewComponent) {\n if (this.isDestroyed) {\n return;\n }\n this.localData = e.result;\n listViewComponent.removeElement(listViewComponent.contentContainer);\n this.renderList();\n this.trigger('actionComplete', e);\n };\n ListView.prototype.triggerActionFailure = function (e) {\n if (this.isDestroyed) {\n return;\n }\n this.trigger('actionFailure', e);\n };\n ListView.prototype.setLocalData = function () {\n var _this = this;\n this.trigger('actionBegin');\n if (this.dataSource instanceof DataManager) {\n if (this.dataSource.ready) {\n this.dataSource.ready.then(function (e) {\n _this.isOffline = _this.dataSource.dataSource.offline;\n if (_this.dataSource instanceof DataManager && _this.isOffline) {\n _this.renderRemoteLists(e, _this);\n }\n }).catch(function (e) {\n _this.triggerActionFailure(e);\n });\n }\n else {\n this.dataSource.executeQuery(this.getQuery()).then(function (e) {\n _this.renderRemoteLists(e, _this);\n }).catch(function (e) {\n _this.triggerActionFailure(e);\n });\n }\n }\n else if (!this.dataSource || !this.dataSource.length) {\n var ul = this.element.querySelector('ul');\n if (ul) {\n remove(ul);\n this.setProperties({ dataSource: ListBase.createJsonFromElement(ul) }, true);\n this.localData = this.dataSource;\n this.renderList();\n this.trigger('actionComplete', { data: this.localData });\n }\n }\n else {\n this.localData = this.dataSource;\n this.renderList();\n this.trigger('actionComplete', { data: this.localData });\n }\n };\n ListView.prototype.reRender = function () {\n this.removeElement(this.headerEle);\n this.removeElement(this.ulElement);\n this.removeElement(this.contentContainer);\n if (this.isReact) {\n this.clearTemplate();\n }\n if (Object.keys(window).indexOf('ejsInterop') === -1) {\n this.element.innerHTML = '';\n }\n this.headerEle = this.ulElement = this.liCollection = undefined;\n this.header();\n this.setLocalData();\n };\n ListView.prototype.resetCurrentList = function () {\n this.setViewDataSource(this.curViewDS);\n this.contentContainer.innerHTML = '';\n this.createList();\n this.renderIntoDom(this.curUL);\n };\n ListView.prototype.setAttributes = function (liElements) {\n for (var i = 0; i < liElements.length; i++) {\n var element = liElements[parseInt(i.toString(), 10)];\n if (element.classList.contains('e-list-item')) {\n element.setAttribute('id', this.element.id + '_' + element.getAttribute('data-uid'));\n element.setAttribute('tabindex', '-1');\n }\n }\n };\n ListView.prototype.createList = function () {\n this.currentLiElements = [];\n this.isNestedList = false;\n this.ulElement = this.curUL = ListBase.createList(this.createElement, this.curViewDS, this.listBaseOption, null, this);\n this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);\n this.setAttributes(this.liCollection);\n };\n ListView.prototype.renderSubList = function (li) {\n this.liElement = li;\n var uID = li.getAttribute('data-uid');\n if (li.classList.contains(classNames.hasChild) && uID) {\n var ul = closest(li.parentNode, '.' + classNames.parentItem);\n var ele = this.element.querySelector('[pid=\\'' + uID + '\\']');\n this.curDSLevel.push(uID);\n this.setViewDataSource(this.getSubDS());\n if (this.enableVirtualization) {\n this.virtualizationModule.updateDOMItemCount();\n }\n if (!ele) {\n var data = this.curViewDS;\n ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);\n if (this.isReact) {\n this.renderReactTemplates();\n }\n var lists = ele.querySelectorAll('.' + classNames.listItem);\n this.setAttributes(lists);\n ele.setAttribute('pID', uID);\n ele.style.display = 'none';\n this.renderIntoDom(ele);\n }\n this.switchView(ul, ele);\n this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);\n if (this.selectedItems) {\n var fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);\n this.header((fieldData[this.listBaseOption.fields.text]), true, 'header');\n }\n this.selectedLI = undefined;\n }\n };\n ListView.prototype.renderIntoDom = function (ele) {\n this.contentContainer.appendChild(ele);\n };\n ListView.prototype.renderList = function (data) {\n this.setViewDataSource(data);\n if (this.enableVirtualization) {\n if (Object.keys(this.dataSource).length) {\n if ((this.template || this.groupTemplate) && !this.virtualizationModule.isNgTemplate()) {\n this.listBaseOption.itemCreated = this.virtualizationModule.createUIItem.bind(this.virtualizationModule);\n }\n }\n this.virtualizationModule.uiVirtualization();\n }\n else {\n this.createList();\n this.contentContainer = this.createElement('div', { className: classNames.container });\n this.element.appendChild(this.contentContainer);\n this.renderIntoDom(this.ulElement);\n if (this.isReact) {\n this.renderReactTemplates();\n }\n }\n };\n ListView.prototype.getElementUID = function (obj) {\n var fields = {};\n if (obj instanceof Element) {\n fields[this.fields.id] = obj.getAttribute('data-uid');\n }\n else {\n fields = obj;\n }\n return fields;\n };\n /**\n * Initializes the ListView component rendering.\n */\n ListView.prototype.render = function () {\n this.element.classList.add(classNames.root);\n attributes(this.element, { tabindex: '0' });\n this.setCSSClass();\n this.setEnableRTL();\n this.setEnable();\n this.setSize();\n this.wireEvents();\n this.header();\n this.setLocalData();\n this.setHTMLAttribute();\n this.rippleFn = rippleEffect(this.element, {\n selector: '.' + classNames.listItem\n });\n this.renderComplete();\n this.previousScrollTop = this.element.scrollTop;\n };\n /**\n * It is used to destroy the ListView component.\n */\n ListView.prototype.destroy = function () {\n if (this.isReact) {\n this.clearTemplate();\n }\n this.unWireEvents();\n var classAr = [classNames.root, classNames.disable, 'e-rtl',\n 'e-has-header', 'e-lib'].concat(this.cssClass ? this.cssClass.split(' ').filter(function (css) { return css; }) : []);\n removeClass([this.element], classAr);\n this.element.removeAttribute('role');\n this.element.removeAttribute('tabindex');\n this.curUL = this.ulElement = this.liCollection = this.headerEle = undefined;\n this.element.innerHTML = '';\n this.contentContainer = null;\n this.selectedItems = null;\n this.selectedLI = null;\n this.liElement = null;\n this.targetElement = null;\n this.currentLiElements = null;\n this.virtualCheckBox = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Switches back from the navigated sub list item.\n */\n ListView.prototype.back = function () {\n var pID = this.curDSLevel[this.curDSLevel.length - 1];\n if (pID === undefined || this.isInAnimation()) {\n return;\n }\n this.curDSLevel.pop();\n this.setViewDataSource(this.getSubDS());\n if (this.enableVirtualization) {\n this.virtualizationModule.updateDOMItemCount();\n }\n var toUL = this.element.querySelector('[data-uid=\\'' + pID + '\\']');\n var fromUL = this.curUL;\n if (!toUL) {\n this.createList();\n this.renderIntoDom(this.ulElement);\n toUL = this.curUL;\n }\n else {\n toUL = toUL.parentElement;\n }\n var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);\n var text = fieldData[this.fields.text];\n this.switchView(fromUL, toUL, true);\n this.removeFocus();\n var li = this.element.querySelector('[data-uid=\\'' + pID + '\\']');\n li.classList.remove(classNames.disable);\n li.classList.add(classNames.focused);\n if (!(this.showCheckBox && li.querySelector('.' + classNames.checkboxIcon).classList.contains(classNames.checked))) {\n li.classList.remove(classNames.selected);\n }\n this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);\n if (this.enableHtmlSanitizer) {\n this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);\n }\n this.header((this.curDSLevel.length ? text : this.headerTitle), (this.curDSLevel.length ? true : false), 'header');\n };\n /**\n * Selects the list item from the ListView by passing the elements or field object.\n *\n * @param {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.selectItem = function (item) {\n if (this.enableVirtualization) {\n this.virtualizationModule.selectItem(item);\n }\n else if (this.showCheckBox) {\n this.setCheckboxLI(this.getLiFromObjOrElement(item));\n }\n else {\n if (isNullOrUndefined(item) === true) {\n this.removeSelect();\n }\n else {\n this.setSelectLI(this.getLiFromObjOrElement(item));\n }\n }\n };\n /**\n * This method allows for deselecting a list item within the ListView. The item to be deselected can be specified by passing the element or field object.\n *\n * @param {Fields | HTMLElement | Element} item - We can pass an element Object or Fields as an Object with ID and Text fields.\n */\n ListView.prototype.unselectItem = function (item) {\n if (isNullOrUndefined(item)) {\n this.removeSelect();\n }\n else {\n var li = this.getLiFromObjOrElement(item);\n if (!isNullOrUndefined(li)) {\n this.removeSelect(li);\n }\n }\n };\n ListView.prototype.getLiFromObjOrElement = function (obj) {\n var li;\n var dataSource = this.dataSource instanceof DataManager ?\n this.localData : this.dataSource;\n if (!isNullOrUndefined(obj)) {\n if (typeof dataSource[0] === 'string' || typeof dataSource[0] === 'number') {\n if (obj instanceof Element) {\n var uid = obj.getAttribute('data-uid').toString();\n for (var i = 0; i < this.liCollection.length; i++) {\n if (this.liCollection[parseInt(i.toString(), 10)].getAttribute('data-uid').toString() === uid) {\n li = this.liCollection[parseInt(i.toString(), 10)];\n break;\n }\n }\n }\n else {\n Array.prototype.some.call(this.curUL.querySelectorAll('.' + classNames.listItem), function (item) {\n if (item.innerText.trim() === obj.toString()) {\n li = item;\n return true;\n }\n else {\n return false;\n }\n });\n }\n }\n else {\n var resultJSON = this.getItemData(obj);\n var fieldData = getFieldValues(resultJSON, this.listBaseOption.fields);\n if (resultJSON) {\n li = this.element.querySelector('[data-uid=\"'\n + fieldData[this.fields.id] + '\"]');\n if (!this.enableVirtualization && isNullOrUndefined(li)) {\n var curLi = this.element.querySelectorAll('.' + classNames.listItem);\n for (var i = 0; i < curLi.length; i++) {\n if (curLi[parseInt(i.toString(), 10)].innerText.trim() ===\n fieldData[this.fields.text]) {\n li = curLi[parseInt(i.toString(), 10)];\n }\n }\n }\n }\n }\n }\n return li;\n };\n /**\n * Selects multiple list items from the ListView.\n *\n * @param {Fields[] | HTMLElement[] | Element[]} item - We can pass array of\n * elements or array of fields Object with ID and Text fields.\n */\n ListView.prototype.selectMultipleItems = function (item) {\n if (!isNullOrUndefined(item)) {\n for (var i = 0; i < item.length; i++) {\n if (!isNullOrUndefined(item[parseInt(i.toString(), 10)])) {\n this.selectItem(item[parseInt(i.toString(), 10)]);\n }\n }\n }\n };\n ListView.prototype.getParentId = function () {\n var parentId = [];\n if (this.isNestedList) {\n for (var i = this.curDSLevel.length - 1; i >= 0; i--) {\n parentId.push(this.curDSLevel[parseInt(i.toString(), 10)]);\n }\n }\n return parentId;\n };\n ListView.prototype.updateSelectedId = function () {\n this.selectedId = [];\n var liCollection = this.curUL.getElementsByClassName(classNames.selected);\n for (var i = 0; i < liCollection.length; i++) {\n var tempData = this.getItemData(liCollection[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(tempData) && tempData[this.listBaseOption.fields.id]) {\n this.selectedId.push(tempData[this.listBaseOption.fields.id]);\n }\n }\n };\n /**\n * Gets the details of the currently selected item from the list items.\n *\n */\n ListView.prototype.getSelectedItems = function () {\n var finalValue;\n var isCompleted = false;\n this.selectedId = [];\n var dataSource = this.dataSource instanceof DataManager ?\n this.localData : this.dataSource;\n if (this.enableVirtualization && !isCompleted) {\n finalValue = this.virtualizationModule.getSelectedItems();\n isCompleted = true;\n }\n else if (this.showCheckBox && !isCompleted) {\n var liCollection = this.curUL.getElementsByClassName(classNames.selected);\n var liTextCollection = [];\n var liDataCollection = [];\n this.selectedId = [];\n var dataParent = [];\n for (var i = 0; i < liCollection.length; i++) {\n if (typeof dataSource[0] === 'string' || typeof dataSource[0] === 'number') {\n liTextCollection.push(liCollection[parseInt(i.toString(), 10)].innerText.trim());\n }\n else {\n var tempData = this.getItemData(liCollection[parseInt(i.toString(), 10)]);\n var fieldData = getFieldValues(tempData, this.listBaseOption.fields);\n if (this.isNestedList) {\n dataParent.push({ data: tempData, parentId: this.getParentId() });\n }\n else {\n liDataCollection.push(tempData);\n }\n if (fieldData) {\n liTextCollection.push(fieldData[this.listBaseOption.fields.text]);\n this.selectedId.push(fieldData[this.listBaseOption.fields.id]);\n }\n else {\n liTextCollection.push(undefined);\n this.selectedId.push(undefined);\n }\n }\n }\n if ((typeof dataSource[0] === 'string'\n || typeof dataSource[0] === 'number')\n && !isCompleted) {\n finalValue = { item: liCollection, data: dataSource, text: liTextCollection };\n isCompleted = true;\n }\n if (this.isNestedList && !isCompleted) {\n finalValue = { item: liCollection, data: dataParent, text: liTextCollection };\n isCompleted = true;\n }\n else if (!isCompleted) {\n finalValue = { item: liCollection, data: liDataCollection, text: liTextCollection };\n isCompleted = true;\n }\n }\n else if (!isCompleted) {\n var liElement = this.element.getElementsByClassName(classNames.selected)[0];\n var fieldData = getFieldValues(this.getItemData(liElement), this.listBaseOption.fields);\n if ((typeof dataSource[0] === 'string'\n || typeof dataSource[0] === 'number')\n && !isCompleted) {\n finalValue = (!isNullOrUndefined(liElement)) ? {\n item: liElement, data: dataSource,\n text: liElement.innerText.trim()\n } : undefined;\n isCompleted = true;\n }\n else if (!isCompleted) {\n if (isNullOrUndefined(fieldData) || isNullOrUndefined(liElement)) {\n finalValue = undefined;\n isCompleted = true;\n }\n else {\n this.selectedId.push(fieldData[this.listBaseOption.fields.id]);\n finalValue = {\n text: fieldData[this.listBaseOption.fields.text], item: liElement,\n data: this.getItemData(liElement)\n };\n isCompleted = true;\n }\n }\n }\n return finalValue;\n };\n /**\n * Finds out an item details from the current list.\n *\n * @param {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.findItem = function (item) {\n return this.getItemData(item);\n };\n /**\n * Enables the disabled list items by passing the Id and text fields.\n *\n * @param {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.enableItem = function (item) {\n this.setItemState(item, true);\n if (this.enableVirtualization) {\n this.virtualizationModule.enableItem(item);\n }\n };\n /**\n * Disables the list items by passing the Id and text fields.\n *\n * @param {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.disableItem = function (item) {\n this.setItemState(item, false);\n if (this.enableVirtualization) {\n this.virtualizationModule.disableItem(item);\n }\n };\n //A function that used to set state of the list item like enable, disable.\n ListView.prototype.setItemState = function (item, isEnable) {\n var resultJSON = this.getItemData(item);\n var fieldData = getFieldValues(resultJSON, this.listBaseOption.fields);\n if (resultJSON) {\n var li = this.element.querySelector('[data-uid=\"' + fieldData[this.fields.id] + '\"]');\n if (isEnable) {\n if (li) {\n li.classList.remove(classNames.disable);\n }\n delete resultJSON[this.fields.enabled];\n }\n else if (!isEnable) {\n if (li) {\n li.classList.add(classNames.disable);\n }\n resultJSON[this.fields.enabled] = false;\n }\n }\n };\n /**\n * Shows the hide list item from the ListView.\n *\n * @param {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.showItem = function (item) {\n this.showHideItem(item, false, '');\n if (this.enableVirtualization) {\n this.virtualizationModule.showItem(item);\n }\n };\n /**\n * Hides an list item from the ListView.\n *\n * @param {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.hideItem = function (item) {\n this.showHideItem(item, true, 'none');\n if (this.enableVirtualization) {\n this.virtualizationModule.hideItem(item);\n }\n };\n ListView.prototype.showHideItem = function (obj, isHide, display) {\n var resultJSON = this.getItemData(obj);\n var fieldData = getFieldValues(resultJSON, this.listBaseOption.fields);\n if (resultJSON) {\n var li = this.element.querySelector('[data-uid=\"' + fieldData[this.fields.id] + '\"]');\n if (li) {\n li.style.display = display;\n }\n if (isHide) {\n resultJSON[this.fields.isVisible] = false;\n }\n else {\n delete resultJSON[this.fields.isVisible];\n }\n }\n };\n /**\n * Adds the new list item(s) to the current ListView.\n * To add a new list item(s) in the ListView, we need to pass the `data` as an array of items that need\n * to be added and `fields` as the target item to which we need to add the given item(s) as its children.\n * For example fields: { text: 'Name', tooltip: 'Name', id:'id'}\n *\n * @param {{Object}[]} data - JSON Array Data that need to add.\n *\n * @param {Fields} fields - Target item to add the given data as its children (can be null).\n *\n * @param {number} index - Indicates the index where the data to be added.\n */\n ListView.prototype.addItem = function (data, fields, index) {\n if (fields === void 0) { fields = undefined; }\n var dataSource = this.dataSource instanceof DataManager\n ? this.localData : this.dataSource;\n this.addItemInternally(data, fields, dataSource, index);\n };\n ListView.prototype.addItemInternally = function (data, fields, dataSource, index) {\n if (data instanceof Array) {\n if (this.enableVirtualization) {\n this.virtualizationModule.addItem(data, fields, dataSource, index);\n }\n else {\n var ds = this.findItemFromDS(dataSource, fields);\n var child = void 0;\n if (ds) {\n var fieldData = getFieldValues(ds, this.listBaseOption.fields);\n child = fieldData[this.fields.child];\n if (!child) {\n child = [];\n }\n child = child.concat(data);\n }\n // check for whether target is nested level or top level in list\n if (ds instanceof Array) {\n for (var i = 0; i < data.length; i++) {\n dataSource = this.addItemAtIndex(index, dataSource, data[parseInt(i.toString(), 10)]);\n this.setViewDataSource(dataSource);\n // since it is top level target, get the content container's first child\n // as it is always the top level UL\n var targetUL = this.contentContainer\n ? this.contentContainer.children[0]\n : null;\n // check for whether the list was previously empty or not, if it is\n // proceed to call initial render\n if (this.contentContainer && targetUL) {\n this.addItemIntoDom(data[parseInt(i.toString(), 10)], targetUL, this.curViewDS);\n }\n else {\n this.reRender();\n }\n }\n this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);\n }\n else {\n // proceed as target item is in nested level, only if it is a valid target ds\n if (ds) {\n ds[this.fields.child] = child;\n this.addItemInNestedList(ds, data);\n }\n }\n }\n }\n };\n ListView.prototype.addItemAtIndex = function (index, newDataSource, itemData) {\n var isIndexValid = !(isNullOrUndefined(index)) && index >= 0 &&\n index < newDataSource.length && isNullOrUndefined(this.listBaseOption.fields.groupBy);\n if (isIndexValid) {\n newDataSource.splice(index, 0, itemData);\n }\n else {\n newDataSource.push(itemData);\n }\n return newDataSource;\n };\n ListView.prototype.addItemInNestedList = function (targetItemData, itemQueue) {\n var targetItemId = targetItemData[this.fields.id];\n var targetChildDS = targetItemData[this.fields.child];\n var isAlreadyRenderedUL = this.element.querySelector('[pid=\\'' + targetItemId + '\\']');\n var targetLi = this.element.querySelector('[data-uid=\\'' + targetItemId + '\\']');\n var targetUL = isAlreadyRenderedUL\n ? isAlreadyRenderedUL\n : targetLi\n ? closest(targetLi, 'ul')\n : null;\n var targetDS = isAlreadyRenderedUL ? targetChildDS : [targetItemData];\n var isTargetEmptyChild = targetLi ? !targetLi.classList.contains(classNames.hasChild) : false;\n // if li element is already rendered, that element needs to be refreshed so that\n // it becomes child viewable due to new child items are added now\n if (isTargetEmptyChild) {\n var targetRefreshedElement = ListBase.createListItemFromJson(this.createElement, targetDS, this.listBaseOption, null, null, this);\n this.setAttributes(targetRefreshedElement);\n targetUL.insertBefore(targetRefreshedElement[0], targetLi);\n detach(targetLi);\n }\n // if it is already rendered element, we need to create and append new elements\n if (isAlreadyRenderedUL && itemQueue) {\n for (var i = 0; i < itemQueue.length; i++) {\n targetDS.push(itemQueue[parseInt(i.toString(), 10)]);\n this.addItemIntoDom(itemQueue[parseInt(i.toString(), 10)], targetUL, targetDS);\n }\n }\n };\n ListView.prototype.addItemIntoDom = function (currentItem, targetUL, curViewDS) {\n var index = curViewDS.indexOf(currentItem);\n this.addListItem(currentItem, index, targetUL, curViewDS);\n var curItemDS = curViewDS[index - 1];\n if (curItemDS && curItemDS.isHeader && curItemDS.items.length === 1) {\n this.addListItem(curItemDS, (index - 1), targetUL, curViewDS);\n }\n };\n ListView.prototype.addListItem = function (dataSource, index, ulElement, curViewDS) {\n var target = this.getLiFromObjOrElement(curViewDS[index + 1]) ||\n this.getLiFromObjOrElement(curViewDS[index + 2]) || null;\n var li = ListBase.createListItemFromJson(this.createElement, [dataSource], this.listBaseOption, null, null, this);\n this.setAttributes(li);\n if (this.template && this.isReact) {\n this.renderReactTemplates();\n }\n if (this.fields.groupBy && curViewDS[index + 1] && curViewDS[index + 1].isHeader) {\n var targetEle = this.getLiFromObjOrElement(curViewDS[index - 1]);\n if (targetEle) {\n target = targetEle.nextElementSibling;\n }\n }\n ulElement.insertBefore(li[0], target);\n };\n /**\n * Removes the list item from the data source based on a passed\n * element like fields: { text: 'Name', tooltip: 'Name', id:'id'}\n *\n * @param {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.removeItem = function (item) {\n var listDataSource = this.dataSource instanceof DataManager\n ? this.localData : this.dataSource;\n if (this.enableVirtualization) {\n this.virtualizationModule.removeItem(item);\n }\n else {\n this.removeItemFromList(item, listDataSource);\n }\n };\n ListView.prototype.removeItemFromList = function (obj, listDataSource) {\n var _this = this;\n var curViewDS = this.curViewDS;\n var fields = obj instanceof Element ? this.getElementUID(obj) : obj;\n var dataSource = this.findItemFromDS(listDataSource, fields, true);\n if (dataSource) {\n var data_1 = this.findItemFromDS(dataSource, fields);\n var index = curViewDS.indexOf(data_1);\n var li = this.getLiFromObjOrElement(obj);\n var groupLi = void 0;\n this.validateNestedView(li);\n if (this.fields.groupBy && this.curViewDS[index - 1] &&\n curViewDS[index - 1].isHeader &&\n curViewDS[index - 1].items.length === 1) {\n if (li && li.previousElementSibling.classList.contains(classNames.groupListItem) &&\n (isNullOrUndefined(li.nextElementSibling) || (li.nextElementSibling &&\n li.nextElementSibling.classList.contains(classNames.groupListItem)))) {\n groupLi = li.previousElementSibling;\n }\n }\n if (li) {\n detach(li);\n }\n if (groupLi) {\n detach(groupLi);\n }\n var foundData = (dataSource.length - 1) <= 0\n ? this.findParent(this.localData, this.fields.id, function (value) { return value === data_1[_this.fields.id]; }, null) : null;\n var dsIndex = dataSource.indexOf(data_1);\n dataSource.splice(dsIndex, 1);\n this.setViewDataSource(listDataSource);\n if (foundData\n && foundData.parent\n && Array.isArray(foundData.parent[this.fields.child])\n && foundData.parent[this.fields.child].length <= 0) {\n var parentLi = this.getLiFromObjOrElement(foundData.parent);\n if (parentLi) {\n var li_1 = ListBase.createListItemFromJson(this.createElement, [foundData.parent], this.listBaseOption, null, null, this);\n this.setAttributes(li_1);\n parentLi.parentElement.insertBefore(li_1[0], parentLi);\n parentLi.parentElement.removeChild(parentLi);\n }\n }\n if (dataSource.length <= 0) {\n this.back();\n }\n this.liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.listItem));\n }\n };\n // validate before removing an element whether the current view is inside target element's child view\n ListView.prototype.validateNestedView = function (li) {\n var liID = li ? li.getAttribute('data-uid').toString().toLowerCase() : null;\n if (liID && this.curDSLevel && this.curDSLevel.length > 0) {\n while (this.curDSLevel.some(function (id) { return id.toString().toLowerCase() === liID; })) {\n this.back();\n }\n }\n };\n /**\n * Removes multiple items from the ListView by passing the array of elements or array of field objects.\n *\n * @param {Fields[] | HTMLElement[] | Element[]} item - We can pass array of elements or array of field Object with ID and Text fields.\n */\n ListView.prototype.removeMultipleItems = function (item) {\n if (item.length) {\n for (var i = 0; i < item.length; i++) {\n this.removeItem(item[parseInt(i.toString(), 10)]);\n }\n }\n };\n ListView.prototype.findParent = function (dataSource, id, callback, parent) {\n if (Object.prototype.hasOwnProperty.call(dataSource, id) && callback(dataSource[id]) === true) {\n return extend({}, dataSource);\n }\n for (var i = 0; i < Object.keys(dataSource).length; i++) {\n if (dataSource[Object.keys(dataSource)[parseInt(i.toString(), 10)]]\n && typeof dataSource[Object.keys(dataSource)[parseInt(i.toString(), 10)]] === 'object') {\n var result = this.findParent(dataSource[Object.keys(dataSource)[parseInt(i.toString(), 10)]], id, callback, dataSource);\n if (result != null) {\n if (!result.parent) {\n result.parent = parent;\n }\n return result;\n }\n }\n }\n return null;\n };\n // Module Required function\n ListView.prototype.getModuleName = function () {\n return 'listview';\n };\n ListView.prototype.requiredModules = function () {\n var modules = [];\n if (this.enableVirtualization) {\n modules.push({ args: [this], member: 'virtualization', name: 'Virtualization' });\n }\n return modules;\n };\n ListView.prototype.onListScroll = function (e) {\n var args = { originalEvent: e, scrollDirection: 'Bottom', distanceY: this.element.scrollHeight - this.element.scrollTop };\n var currentScrollTop = this.element.scrollTop;\n if (currentScrollTop > this.previousScrollTop) {\n args.scrollDirection = 'Bottom';\n args.distanceY = this.element.scrollHeight - this.element.clientHeight - this.element.scrollTop;\n this.trigger('scroll', args);\n }\n else if (this.previousScrollTop > currentScrollTop) {\n args.scrollDirection = 'Top';\n args.distanceY = this.element.scrollTop;\n this.trigger('scroll', args);\n }\n this.previousScrollTop = currentScrollTop;\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n ListView.prototype.getPersistData = function () {\n return this.addOnPersist(['cssClass', 'enableRtl', 'htmlAttributes',\n 'enable', 'fields', 'animation', 'headerTitle',\n 'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition', 'selectedId']);\n };\n __decorate([\n Property('')\n ], ListView.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], ListView.prototype, \"enableVirtualization\", void 0);\n __decorate([\n Property({})\n ], ListView.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], ListView.prototype, \"enable\", void 0);\n __decorate([\n Property([])\n ], ListView.prototype, \"dataSource\", void 0);\n __decorate([\n Property()\n ], ListView.prototype, \"query\", void 0);\n __decorate([\n Complex(ListBase.defaultMappedFields, FieldSettings)\n ], ListView.prototype, \"fields\", void 0);\n __decorate([\n Property({ effect: 'SlideLeft', duration: 400, easing: 'ease' })\n ], ListView.prototype, \"animation\", void 0);\n __decorate([\n Property('None')\n ], ListView.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(false)\n ], ListView.prototype, \"showIcon\", void 0);\n __decorate([\n Property(false)\n ], ListView.prototype, \"showCheckBox\", void 0);\n __decorate([\n Property('Left')\n ], ListView.prototype, \"checkBoxPosition\", void 0);\n __decorate([\n Property('')\n ], ListView.prototype, \"headerTitle\", void 0);\n __decorate([\n Property(false)\n ], ListView.prototype, \"showHeader\", void 0);\n __decorate([\n Property(true)\n ], ListView.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property('')\n ], ListView.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], ListView.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], ListView.prototype, \"template\", void 0);\n __decorate([\n Property(null)\n ], ListView.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], ListView.prototype, \"groupTemplate\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"scroll\", void 0);\n ListView = __decorate([\n NotifyPropertyChanges\n ], ListView);\n return ListView;\n}(Component));\n\nvar listElementCount = 1.5;\nvar windowElementCount = 3;\nvar Virtualization = /** @__PURE__ @class */ (function () {\n function Virtualization(instance) {\n this.elementDifference = 0;\n this.listViewInstance = instance;\n }\n /**\n * For internal use only.\n *\n * @private\n */\n Virtualization.prototype.isNgTemplate = function () {\n return !isNullOrUndefined(this.listViewInstance.templateRef) && typeof this.listViewInstance.templateRef !== 'string';\n };\n /**\n * Checks if the platform is a Vue and its template property is a function type.\n *\n * @returns {boolean} indicating the result of the check\n */\n Virtualization.prototype.isVueFunctionTemplate = function () {\n return this.listViewInstance.isVue && typeof this.listViewInstance.template === 'function';\n };\n /**\n * For internal use only.\n *\n * @private\n */\n Virtualization.prototype.uiVirtualization = function () {\n this.wireScrollEvent(false);\n var curViewDS = this.listViewInstance.curViewDS;\n var isRendered = this.listViewInstance.isRendered;\n var firstIndex = isRendered && !isNullOrUndefined(this.uiFirstIndex) && this.uiLastIndex <= Object.keys(curViewDS).length\n ? this.uiFirstIndex : 0;\n var firstDs = curViewDS.slice(firstIndex, firstIndex + 1);\n this.listViewInstance.ulElement = this.listViewInstance.curUL = ListBase.createList(this.listViewInstance.createElement, firstDs, this.listViewInstance.listBaseOption, null, this.listViewInstance);\n this.listViewInstance.contentContainer = this.listViewInstance.createElement('div', { className: classNames.container });\n this.listViewInstance.element.appendChild(this.listViewInstance.contentContainer);\n this.listViewInstance.contentContainer.appendChild(this.listViewInstance.ulElement);\n this.listItemHeight = this.listViewInstance.ulElement.firstElementChild.getBoundingClientRect().height;\n this.expectedDomItemCount = this.ValidateItemCount(10000);\n this.updateDOMItemCount();\n var lastIndex = isRendered && !isNullOrUndefined(this.uiLastIndex) && this.listDiff !== 0\n ? this.uiLastIndex : this.domItemCount - 1;\n this.uiFirstIndex = firstIndex;\n this.uiLastIndex = lastIndex;\n var otherDs = curViewDS.slice(firstIndex + 1, lastIndex + 1);\n var listItems = ListBase.createListItemFromJson(this.listViewInstance.createElement, otherDs, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);\n append(listItems, this.listViewInstance.ulElement);\n this.listViewInstance.liCollection = this.listViewInstance.curUL.querySelectorAll('li');\n this.topElement = this.listViewInstance.createElement('div');\n this.listViewInstance.ulElement.insertBefore(this.topElement, this.listViewInstance.ulElement.firstElementChild);\n this.bottomElement = this.listViewInstance.createElement('div');\n this.listViewInstance.ulElement.insertBefore(this.bottomElement, null);\n this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);\n this.topElement.style.height = isRendered ? this.topElementHeight + 'px' : '0px';\n this.bottomElement.style.height = isRendered ? (this.totalHeight - this.topElementHeight) + 'px' : this.totalHeight + 'px';\n this.topElementHeight = isRendered ? this.topElementHeight : 0;\n this.bottomElementHeight = isRendered ? (this.totalHeight - this.topElementHeight) : this.totalHeight;\n this.listDiff = isRendered && Object.keys(curViewDS).length !== this.domItemCount ? this.listDiff : 0;\n if (isRendered) {\n this.listViewInstance.element.scrollTop = this.listViewInstance.previousScrollTop;\n }\n this.uiIndicesInitialization();\n };\n Virtualization.prototype.wireScrollEvent = function (destroy) {\n if (!destroy) {\n if (this.listViewInstance.isWindow) {\n this.onVirtualScroll = this.onVirtualUiScroll.bind(this);\n window.addEventListener('scroll', this.onVirtualScroll);\n }\n else {\n EventHandler.add(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll, this);\n }\n }\n else {\n if (this.listViewInstance.isWindow === true) {\n window.removeEventListener('scroll', this.onVirtualScroll);\n window.removeEventListener('scroll', this.updateUl);\n }\n else {\n EventHandler.remove(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll);\n }\n }\n };\n Virtualization.prototype.ValidateItemCount = function (dataSourceLength) {\n var height = parseFloat(formatUnit(this.listViewInstance.height));\n var itemCount;\n if (this.listViewInstance.isWindow) {\n itemCount = Math.round((window.innerHeight / this.listItemHeight) * windowElementCount);\n }\n else {\n if (typeof this.listViewInstance.height === 'string' && this.listViewInstance.height.indexOf('%') !== -1) {\n itemCount = Math.round((this.listViewInstance.element.getBoundingClientRect().height / this.listItemHeight) * listElementCount);\n }\n else {\n itemCount = Math.round((height / this.listItemHeight) * listElementCount);\n }\n }\n if (itemCount > dataSourceLength) {\n itemCount = dataSourceLength;\n }\n return itemCount;\n };\n Virtualization.prototype.updateDOMItemCount = function () {\n this.domItemCount = this.ValidateItemCount(Object.keys(this.listViewInstance.curViewDS).length);\n };\n Virtualization.prototype.uiIndicesInitialization = function () {\n this.uiIndices = { 'activeIndices': [], 'disabledItemIndices': [], 'hiddenItemIndices': [] };\n var data = this.listViewInstance.curViewDS;\n for (var i = 0; i < data.length; i++) {\n if (this.listViewInstance.showCheckBox && data[i][this.listViewInstance.fields.isChecked]) {\n this.uiIndices.activeIndices.push(i);\n }\n if (!isNullOrUndefined(data[parseInt(i.toString(), 10)][this.listViewInstance.fields.enabled]) &&\n !data[i][this.listViewInstance.fields.enabled]) {\n (this.uiIndices.disabledItemIndices.push(i));\n }\n }\n if (this.isNgTemplate()) {\n var items = this.listViewInstance.element.querySelectorAll('.' + classNames.listItem);\n for (var index = 0; index < items.length; index++) {\n items[index].context = this.listViewInstance.viewContainerRef.get(index).context;\n }\n }\n };\n Virtualization.prototype.refreshItemHeight = function () {\n if (this.listViewInstance.curViewDS.length) {\n var curViewDS = this.listViewInstance.curViewDS;\n this.listItemHeight = this.topElement.nextSibling.getBoundingClientRect().height;\n this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);\n this.bottomElementHeight = this.totalHeight;\n this.bottomElement.style.height = this.totalHeight + 'px';\n }\n };\n Virtualization.prototype.getscrollerHeight = function (startingHeight) {\n return this.listViewInstance.isWindow ? (((pageYOffset - startingHeight) <= 0) ? 0 :\n (pageYOffset - startingHeight)) : ((this.listViewInstance.element.scrollTop - startingHeight) <= 0) ? 0 :\n (this.listViewInstance.element.scrollTop - startingHeight);\n };\n Virtualization.prototype.onVirtualUiScroll = function () {\n var _a;\n var startingHeight;\n var curViewDS = this.listViewInstance.curViewDS;\n this.listItemHeight = select('.e-list-item', this.listViewInstance.element).getBoundingClientRect().height;\n this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);\n if (this.listViewInstance.isWindow) {\n startingHeight = this.listViewInstance.ulElement.getBoundingClientRect().top -\n document.documentElement.getBoundingClientRect().top;\n }\n else {\n startingHeight = this.listViewInstance.headerEle ? this.listViewInstance.headerEle.getBoundingClientRect().height : 0;\n }\n this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;\n var scroll = this.getscrollerHeight(startingHeight);\n this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);\n this.bottomElementHeight = this.totalHeight - this.topElementHeight;\n _a = scroll <= this.totalHeight ?\n [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0], this.topElementHeight = _a[0], this.bottomElementHeight = _a[1];\n if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {\n this.topElement.style.height = this.topElementHeight + 'px';\n this.bottomElement.style.height = this.bottomElementHeight + 'px';\n if (scroll > this.scrollPosition) {\n var listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));\n if (listDiff > (this.expectedDomItemCount + 5)) {\n this.onLongScroll(listDiff, true);\n }\n else {\n this.onNormalScroll(listDiff, true);\n }\n }\n else {\n var listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));\n if (listDiff > (this.expectedDomItemCount + 5)) {\n this.onLongScroll(listDiff, false);\n }\n else {\n this.onNormalScroll(listDiff, false);\n }\n }\n }\n this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);\n if (typeof this.listViewInstance.onUIScrolled === 'function') {\n this.listViewInstance.onUIScrolled();\n }\n this.scrollPosition = scroll;\n };\n Virtualization.prototype.onLongScroll = function (listDiff, isScrollingDown) {\n var index = isScrollingDown ? (this.uiFirstIndex + listDiff) : (this.uiFirstIndex - listDiff);\n var elements = this.listViewInstance.ulElement.querySelectorAll('li');\n for (var i = 0; i < elements.length; i++) {\n this.updateUI(elements[i], index);\n index++;\n }\n this.uiLastIndex = isScrollingDown ? (this.uiLastIndex + listDiff) : (this.uiLastIndex - listDiff);\n this.uiFirstIndex = isScrollingDown ? (this.uiFirstIndex + listDiff) : (this.uiFirstIndex - listDiff);\n };\n Virtualization.prototype.onNormalScroll = function (listDiff, isScrollingDown) {\n if (isScrollingDown) {\n for (var i = 0; i < listDiff; i++) {\n var index = ++this.uiLastIndex;\n this.updateUI(this.topElement.nextElementSibling, index, this.bottomElement);\n this.uiFirstIndex++;\n }\n }\n else {\n for (var i = 0; i < listDiff; i++) {\n var index = --this.uiFirstIndex;\n var target = this.topElement.nextSibling;\n this.updateUI(this.bottomElement.previousElementSibling, index, target);\n this.uiLastIndex--;\n }\n }\n };\n Virtualization.prototype.updateUiContent = function (element, index) {\n var curViewDs = this.listViewInstance.curViewDS;\n if (typeof this.listViewInstance.dataSource[0] === 'string' ||\n typeof this.listViewInstance.dataSource[0] === 'number') {\n element.dataset.uid = ListBase.generateId();\n element.getElementsByClassName(classNames.listItemText)[0].innerHTML =\n this.listViewInstance.curViewDS[index].toString();\n }\n else {\n element.dataset.uid = (curViewDs[parseInt(index.toString(), 10)][this.listViewInstance.fields.id]) ?\n (curViewDs[parseInt(index.toString(), 10)][this.listViewInstance.fields.id]) : ListBase.generateId();\n element.getElementsByClassName(classNames.listItemText)[0].innerHTML =\n (curViewDs[parseInt(index.toString(), 10)][this.listViewInstance.fields.text]);\n }\n if (this.listViewInstance.showIcon) {\n if (element.querySelector('.' + classNames.listIcon)) {\n detach(element.querySelector('.' + classNames.listIcon));\n }\n if (this.listViewInstance.curViewDS[index][this.listViewInstance.fields.iconCss]) {\n var textContent = element.querySelector('.' + classNames.textContent);\n var curViewDS = this.listViewInstance.curViewDS[index];\n var iconCss = curViewDS[this.listViewInstance.fields.iconCss].toString();\n var target = this.listViewInstance.createElement('div', {\n className: classNames.listIcon + ' ' + iconCss\n });\n textContent.insertBefore(target, element.querySelector('.' + classNames.listItemText));\n }\n }\n if (this.listViewInstance.showCheckBox && this.listViewInstance.fields.groupBy) {\n if (!this.checkListWrapper) {\n this.checkListWrapper = this.listViewInstance.curUL.querySelector('.' + classNames.checkboxWrapper).cloneNode(true);\n }\n var textContent = element.querySelector('.' + classNames.textContent);\n if (this.listViewInstance.curViewDS[index].isHeader) {\n if (element.querySelector('.' + classNames.checkboxWrapper)) {\n element.classList.remove(classNames.checklist);\n textContent.classList.remove(classNames.checkbox);\n detach(element.querySelector('.' + classNames.checkboxWrapper));\n }\n }\n else {\n if (!element.querySelector('.' + classNames.checkboxWrapper)) {\n element.classList.add(classNames.checklist);\n textContent.classList.add(classNames.checkbox);\n if (this.listViewInstance.checkBoxPosition === 'Left') {\n textContent.classList.add('e-checkbox-left');\n }\n else {\n textContent.classList.add('e-checkbox-right');\n }\n textContent.append(this.checkListWrapper.cloneNode(true));\n }\n }\n }\n };\n Virtualization.prototype.changeElementAttributes = function (element, index) {\n element.classList.remove(classNames.disable);\n if (this.uiIndices.disabledItemIndices.length && this.uiIndices.disabledItemIndices.indexOf(index) !== -1) {\n element.classList.add(classNames.disable);\n }\n element.style.display = '';\n if (this.uiIndices.hiddenItemIndices.length && this.uiIndices.hiddenItemIndices.indexOf(index) !== -1) {\n element.style.display = 'none';\n }\n if (this.listViewInstance.showCheckBox) {\n var checklistElement = element.querySelector('.' + classNames.checkboxWrapper);\n element.classList.remove(classNames.selected);\n element.classList.remove(classNames.focused);\n if (checklistElement) {\n checklistElement.removeAttribute('aria-checked');\n checklistElement.firstElementChild.classList.remove(classNames.checked);\n }\n if (this.uiIndices.activeIndices.length && this.uiIndices.activeIndices.indexOf(index) !== -1 &&\n !this.listViewInstance.curUL.querySelector(classNames.selected)) {\n element.classList.add(classNames.selected);\n checklistElement.firstElementChild.classList.add(classNames.checked);\n checklistElement.setAttribute('aria-checked', 'true');\n if (this.activeIndex === index) {\n element.classList.add(classNames.focused);\n }\n }\n }\n else {\n element.classList.remove(classNames.selected);\n element.removeAttribute('aria-selected');\n if (!isNullOrUndefined(this.activeIndex) && this.activeIndex === index &&\n !this.listViewInstance.curUL.querySelector(classNames.selected)) {\n element.classList.add(classNames.selected);\n element.setAttribute('aria-selected', 'true');\n }\n }\n if (this.listViewInstance.fields.groupBy) {\n if (this.listViewInstance.curViewDS[index].isHeader) {\n if (element.classList.contains(classNames.listItem)) {\n element.classList.remove(classNames.listItem);\n element.setAttribute('role', 'group');\n element.classList.add(classNames.groupListItem);\n }\n }\n else {\n if (element.classList.contains(classNames.groupListItem)) {\n element.classList.remove(classNames.groupListItem);\n element.setAttribute('role', 'listitem');\n element.classList.add(classNames.listItem);\n }\n }\n }\n };\n Virtualization.prototype.findDSAndIndexFromId = function (ds, fields) {\n var _this = this;\n var resultJSON = {};\n fields = this.listViewInstance.getElementUID(fields);\n if (!isNullOrUndefined(fields)) {\n ds.some(function (data, index) {\n if ((fields[_this.listViewInstance.fields.id] &&\n fields[_this.listViewInstance.fields.id]\n === (data[_this.listViewInstance.fields.id] && data[_this.listViewInstance.fields.id]) || fields === data)) {\n resultJSON.index = index;\n resultJSON.data = data;\n return true;\n }\n else {\n return false;\n }\n });\n }\n return resultJSON;\n };\n Virtualization.prototype.getSelectedItems = function () {\n var _this = this;\n if (!isNullOrUndefined(this.activeIndex) || (this.listViewInstance.showCheckBox && this.uiIndices.activeIndices.length)) {\n var dataCollection = [];\n var textCollection = [];\n if (typeof this.listViewInstance.dataSource[0] === 'string' ||\n typeof this.listViewInstance.dataSource[0] === 'number') {\n var curViewDS_1 = this.listViewInstance.curViewDS;\n if (this.listViewInstance.showCheckBox) {\n var indices = this.uiIndices.activeIndices;\n for (var i = 0; i < indices.length; i++) {\n dataCollection.push(curViewDS_1[indices[i]]);\n }\n return {\n text: dataCollection,\n data: dataCollection,\n index: this.uiIndices.activeIndices.map(function (index) {\n return _this.listViewInstance.dataSource.indexOf(curViewDS_1[index]);\n })\n };\n }\n else {\n return {\n text: curViewDS_1[this.activeIndex],\n data: curViewDS_1[this.activeIndex],\n index: this.listViewInstance.dataSource.indexOf(curViewDS_1[this.activeIndex])\n };\n }\n }\n else {\n var curViewDS_2 = this.listViewInstance.curViewDS;\n var text = this.listViewInstance.fields.text;\n if (this.listViewInstance.showCheckBox) {\n var indexArray = this.uiIndices.activeIndices;\n for (var i = 0; i < indexArray.length; i++) {\n textCollection.push(curViewDS_2[indexArray[i]][\"\" + text]);\n dataCollection.push(curViewDS_2[indexArray[parseInt(i.toString(), 10)]]);\n }\n var dataSource_1 = this.listViewInstance.dataSource instanceof DataManager\n ? curViewDS_2 : this.listViewInstance.dataSource;\n return {\n text: textCollection,\n data: dataCollection,\n index: this.uiIndices.activeIndices.map(function (index) {\n return dataSource_1.indexOf(curViewDS_2[index]);\n })\n };\n }\n else {\n var dataSource = this.listViewInstance.dataSource instanceof DataManager\n ? curViewDS_2 : this.listViewInstance.dataSource;\n return {\n text: curViewDS_2[this.activeIndex][this.listViewInstance.fields.text],\n data: curViewDS_2[this.activeIndex],\n index: dataSource.indexOf(curViewDS_2[this.activeIndex])\n };\n }\n }\n }\n else {\n return undefined;\n }\n };\n Virtualization.prototype.selectItem = function (obj) {\n var _this = this;\n var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);\n if (Object.keys(resutJSON).length) {\n var isSelected = this.activeIndex === resutJSON.index;\n var isChecked_1;\n this.activeIndex = resutJSON.index;\n if (this.listViewInstance.showCheckBox) {\n if (this.uiIndices.activeIndices.indexOf(resutJSON.index) === -1) {\n isChecked_1 = true;\n this.uiIndices.activeIndices.push(resutJSON.index);\n }\n else {\n isChecked_1 = false;\n this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(resutJSON.index), 1);\n }\n if (this.listViewInstance.curUL.querySelector('.' + classNames.focused)) {\n this.listViewInstance.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);\n }\n }\n if (this.listViewInstance.getLiFromObjOrElement(obj)) {\n if (this.listViewInstance.showCheckBox) {\n this.listViewInstance.setCheckboxLI(this.listViewInstance.getLiFromObjOrElement(obj));\n }\n else {\n this.listViewInstance.setSelectLI(this.listViewInstance.getLiFromObjOrElement(obj));\n }\n }\n else {\n var eventArgs_1;\n if (typeof this.listViewInstance.dataSource[0] === 'string' ||\n typeof this.listViewInstance.dataSource[0] === 'number') {\n eventArgs_1 = {\n text: this.listViewInstance.curViewDS[this.activeIndex],\n data: this.listViewInstance.curViewDS[this.activeIndex],\n index: this.activeIndex\n };\n }\n else {\n var curViewDS = this.listViewInstance.curViewDS;\n eventArgs_1 = {\n text: curViewDS[this.activeIndex][this.listViewInstance.fields.text],\n data: curViewDS[this.activeIndex],\n index: this.activeIndex\n };\n }\n if (this.listViewInstance.showCheckBox) {\n this.listViewInstance.trigger('select', eventArgs_1, function (observedArgs) {\n if (observedArgs.cancel) {\n if (!isChecked_1) {\n eventArgs_1.isChecked = isChecked_1;\n _this.uiIndices.activeIndices.push(resutJSON.index);\n }\n else {\n eventArgs_1.isChecked = !isChecked_1;\n _this.uiIndices.activeIndices.splice(_this.uiIndices.activeIndices.indexOf(resutJSON.index), 1);\n }\n }\n });\n }\n else if (!isSelected) {\n this.listViewInstance.removeSelect();\n this.listViewInstance.trigger('select', eventArgs_1, function (observedArgs) {\n if (observedArgs.cancel) {\n _this.activeIndex = undefined;\n }\n });\n }\n }\n }\n else if (isNullOrUndefined(obj) && !this.listViewInstance.showCheckBox) {\n this.listViewInstance.removeSelect();\n this.activeIndex = undefined;\n }\n };\n Virtualization.prototype.enableItem = function (obj) {\n var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);\n if (Object.keys(resutJSON).length) {\n this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);\n }\n };\n Virtualization.prototype.disableItem = function (obj) {\n var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);\n if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index) === -1) {\n this.uiIndices.disabledItemIndices.push(resutJSON.index);\n }\n };\n Virtualization.prototype.showItem = function (obj) {\n var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);\n if (Object.keys(resutJSON).length) {\n this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);\n }\n };\n Virtualization.prototype.hideItem = function (obj) {\n var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);\n if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index) === -1) {\n this.uiIndices.hiddenItemIndices.push(resutJSON.index);\n }\n };\n Virtualization.prototype.removeItem = function (obj) {\n var dataSource;\n var curViewDS = this.listViewInstance.curViewDS;\n var resutJSON = this.findDSAndIndexFromId(curViewDS, obj);\n if (Object.keys(resutJSON).length) {\n dataSource = resutJSON.data;\n if (curViewDS[resutJSON.index - 1] &&\n curViewDS[resutJSON.index - 1].isHeader &&\n (curViewDS[resutJSON.index - 1])\n .items.length === 1) {\n this.removeUiItem(resutJSON.index - 1);\n this.removeUiItem(resutJSON.index - 1);\n }\n else {\n this.removeUiItem(resutJSON.index);\n }\n }\n var listDataSource = this.listViewInstance.dataSource instanceof DataManager\n ? this.listViewInstance.localData : this.listViewInstance.dataSource;\n var index = listDataSource.indexOf(dataSource);\n if (index !== -1) {\n listDataSource.splice(index, 1);\n this.listViewInstance.setViewDataSource(listDataSource);\n }\n // recollect all the list item into collection\n this.listViewInstance.liCollection =\n this.listViewInstance.curUL.querySelectorAll('li');\n };\n // eslint-disable-next-line\n Virtualization.prototype.setCheckboxLI = function (li, e) {\n var index = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;\n this.activeIndex = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;\n if (li.classList.contains(classNames.selected)) {\n if (this.uiIndices.activeIndices.indexOf(index) === -1) {\n this.uiIndices.activeIndices.push(index);\n }\n }\n else {\n this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(index), 1);\n }\n };\n // eslint-disable-next-line\n Virtualization.prototype.setSelectLI = function (li, e) {\n this.activeIndex = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;\n };\n Virtualization.prototype.checkedItem = function (checked) {\n if (checked) {\n this.uiIndices.activeIndices = [];\n this.activeIndex = undefined;\n var data = this.listViewInstance.curViewDS;\n for (var index = 0; index < data.length; index++) {\n if (!data[index].isHeader) {\n this.uiIndices.activeIndices.push(index);\n }\n }\n }\n else {\n this.activeIndex = undefined;\n this.uiIndices.activeIndices = [];\n }\n };\n Virtualization.prototype.addUiItem = function (index) {\n // virtually new add list item based on the scollbar position\n // if the scroll bar is at the top, just pretend the new item has been added since no UI\n // change is required for the item that has been added at last but when scroll bar is at the bottom\n // just detach top and inject into bottom to mimic new item is added\n var curViewDs = this.listViewInstance.curViewDS;\n this.changeUiIndices(index, true);\n if (this.activeIndex && this.activeIndex >= index) {\n this.activeIndex++;\n }\n if (this.listViewInstance.showCheckBox &&\n curViewDs[index][this.listViewInstance.fields.isChecked]) {\n this.uiIndices.activeIndices.push(index);\n }\n if (!parseFloat(this.bottomElement.style.height) && !parseFloat(this.topElement.style.height)) {\n this.bottomElement.style.height = parseFloat(this.bottomElement.style.height) + this.listItemHeight + 'px';\n }\n if (parseFloat(this.bottomElement.style.height)) {\n var liItem = this.listViewInstance.curUL.lastElementChild.previousSibling;\n var target = this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 1]) ||\n this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 2]);\n if (target) {\n this.bottomElement.style.height = parseFloat(this.bottomElement.style.height) + this.listItemHeight + 'px';\n this.updateUI(liItem, index, target);\n }\n }\n else {\n var liItem = this.listViewInstance.curUL.firstElementChild.nextSibling;\n var target = void 0;\n if ((Object.keys(this.listViewInstance.curViewDS).length - 1) === index) {\n target = this.listViewInstance.curUL.lastElementChild;\n }\n else {\n target = this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 1]) ||\n this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 2]);\n }\n this.topElement.style.height = parseFloat(this.topElement.style.height) + this.listItemHeight + 'px';\n this.uiFirstIndex++;\n this.uiLastIndex++;\n if (target) {\n this.updateUI(liItem, index, target);\n if (this.listViewInstance.isWindow === true) {\n window.scrollTo(0, (pageYOffset + this.listItemHeight));\n }\n else {\n this.listViewInstance.element.scrollTop += this.listItemHeight;\n }\n }\n }\n this.totalHeight += this.listItemHeight;\n this.listDiff = Math.round(parseFloat(this.topElement.style.height) / this.listItemHeight);\n };\n Virtualization.prototype.removeUiItem = function (index) {\n this.totalHeight -= this.listItemHeight;\n var curViewDS = this.listViewInstance.curViewDS[index];\n var liItem = this.listViewInstance.getLiFromObjOrElement(curViewDS);\n this.listViewInstance.curViewDS.splice(index, 1);\n if (this.activeIndex && this.activeIndex >= index) {\n this.activeIndex--;\n }\n if (liItem) {\n if (this.domItemCount > Object.keys(this.listViewInstance.curViewDS).length) {\n detach(liItem);\n this.domItemCount--;\n this.uiLastIndex--;\n this.totalHeight = 0;\n }\n else {\n if (liItem.classList.contains(classNames.disable)) {\n liItem.classList.remove(classNames.disable);\n this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(index), 1);\n }\n if (liItem.style.display === 'none') {\n liItem.style.display = '';\n this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(index), 1);\n }\n if (this.listViewInstance.showCheckBox && liItem.classList.contains(classNames.selected)) {\n this.listViewInstance.removeSelect();\n this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(index), 1);\n var checklistElement = liItem.querySelector('.' + classNames.checkboxWrapper);\n checklistElement.removeAttribute('aria-checked');\n checklistElement.firstElementChild.classList.remove(classNames.checked);\n if (liItem.classList.contains(classNames.focused)) {\n liItem.classList.remove(classNames.focused);\n this.activeIndex = undefined;\n }\n }\n else if (liItem.classList.contains(classNames.selected)) {\n this.listViewInstance.removeSelect();\n this.activeIndex = undefined;\n }\n if (!parseFloat(this.bottomElement.style.height) && !parseFloat(this.topElement.style.height)) {\n this.updateUI(liItem, this.uiLastIndex, this.bottomElement);\n }\n else if (parseFloat(this.bottomElement.style.height)) {\n this.bottomElement.style.height = parseFloat(this.bottomElement.style.height) - this.listItemHeight + 'px';\n this.updateUI(liItem, this.uiLastIndex, this.bottomElement);\n }\n else {\n this.topElement.style.height = parseFloat(this.topElement.style.height) - this.listItemHeight + 'px';\n this.updateUI(liItem, (this.uiFirstIndex - 1), this.topElement.nextSibling);\n this.uiLastIndex--;\n this.uiFirstIndex--;\n }\n }\n }\n this.changeUiIndices(index, false);\n this.listDiff = Math.round(parseFloat(this.topElement.style.height) / this.listItemHeight);\n };\n Virtualization.prototype.changeUiIndices = function (index, increment) {\n var keys = Object.keys(this.uiIndices);\n for (var ind = 0; ind < keys.length; ind++) {\n this.uiIndices[keys[ind]] = this.uiIndices[keys[ind]].map(function (i) {\n if (i >= index) {\n return increment ? ++i : --i;\n }\n else {\n return i;\n }\n });\n }\n };\n Virtualization.prototype.addItem = function (data, fields, dataSource, index) {\n for (var i = 0; i < data.length; i++) {\n var currentItem = data[i];\n // push the given data to main data array\n dataSource = this.listViewInstance.addItemAtIndex(index, dataSource, currentItem);\n // recalculate all the group data or other datasource related things\n this.listViewInstance.setViewDataSource(dataSource);\n // render list items for first time due to no datasource present earlier\n if (!this.domItemCount) {\n // fresh rendering for first time\n if ((this.listViewInstance.template || this.listViewInstance.groupTemplate) && !this.isNgTemplate()) {\n this.listViewInstance.listBaseOption.template = null;\n this.listViewInstance.listBaseOption.groupTemplate = null;\n this.listViewInstance.listBaseOption.itemCreated = this.createUIItem.bind(this);\n }\n this.uiVirtualization();\n // when expected expected DOM count doesn't meet the condition we need to create and inject new item into DOM\n }\n else if (this.domItemCount < this.expectedDomItemCount) {\n var ds = this.listViewInstance.findItemFromDS(dataSource, fields);\n if (ds instanceof Array) {\n if (this.listViewInstance.ulElement) {\n var index_1 = this.listViewInstance.curViewDS.indexOf(currentItem);\n // inject new list item into DOM\n this.createAndInjectNewItem(currentItem, index_1);\n // check for group header item\n var curViewDS = this.listViewInstance.curViewDS[index_1 - 1];\n if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {\n // target group item index in datasource\n --index_1;\n // inject new group header into DOM for previously created list item\n this.createAndInjectNewItem(curViewDS, index_1);\n }\n }\n // recollect all the list item into collection\n this.listViewInstance.liCollection =\n this.listViewInstance.curUL.querySelectorAll('li');\n }\n }\n else {\n var index_2 = this.listViewInstance.curViewDS.indexOf(currentItem);\n // virtually new add list item based on the scollbar position\n this.addUiItem(index_2);\n // check for group header item needs to be added\n var curViewDS = this.listViewInstance.curViewDS[index_2 - 1];\n if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {\n this.addUiItem(index_2 - 1);\n }\n }\n }\n };\n Virtualization.prototype.createAndInjectNewItem = function (itemData, index) {\n // generate li item for given datasource\n var target;\n var li = ListBase.createListItemFromJson(this.listViewInstance.createElement, [itemData], this.listViewInstance.listBaseOption, null, null, this.listViewInstance);\n // check for target element whether to insert before last item or group item\n if ((Object.keys(this.listViewInstance.curViewDS).length - 1) === index) {\n target = this.listViewInstance.curUL.lastElementChild;\n }\n else {\n // target group header's first child item to append its header\n target = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 1]) ||\n this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 2]);\n }\n if (this.listViewInstance.fields.groupBy\n && this.listViewInstance.curViewDS[index + 1]\n && this.listViewInstance.curViewDS[index + 1].isHeader) {\n var targetEle = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index - 1]);\n if (targetEle) {\n target = targetEle.nextElementSibling;\n }\n }\n // insert before the target element\n this.listViewInstance.ulElement.insertBefore(li[0], target);\n // increment internal DOM count, last index count for new element\n this.domItemCount++;\n if (this.bottomElementHeight <= 0) {\n this.uiLastIndex++;\n }\n // recalculate the current item height, to avoid jumpy scroller\n this.refreshItemHeight();\n };\n Virtualization.prototype.createUIItem = function (args) {\n if (!args.item.classList.contains('e-list-group-item')) {\n this.templateData = args.curData.isHeader ? args.curData.items[0] :\n args.curData;\n if (this.listViewInstance.showCheckBox) {\n this.listViewInstance.renderCheckbox(args);\n if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&\n (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {\n var div_1 = document.createElement('div');\n var commonTemplate = '- \n *
- Favorite \n *
- Documents \n *
- Downloads \n *
' +\n ' ${' + this.listViewInstance.fields.text + '}
';\n var templateFunction = compile(this.listViewInstance.template || commonTemplate, this.listViewInstance);\n var nodes = templateFunction(this.templateData, this.listViewInstance);\n if (this.listViewInstance.template && this.listViewInstance.isReact) {\n this.listViewInstance.renderReactTemplates();\n }\n [].slice.call(nodes).forEach(function (ele) {\n div_1.appendChild(ele);\n });\n if (div_1.children && div_1.children[0]) {\n div_1.children[0].classList.add('e-checkbox');\n if (this.listViewInstance.checkBoxPosition === 'Left') {\n div_1.children[0].classList.add('e-checkbox-left');\n }\n else {\n div_1.children[0].classList.add('e-checkbox-right');\n }\n if (this.listViewInstance.checkBoxPosition === 'Left') {\n div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);\n }\n else {\n div_1.children[0].appendChild(this.listViewInstance.virtualCheckBox);\n }\n while (args.item.lastChild) {\n args.item.removeChild(args.item.lastChild);\n }\n [].slice.call(div_1.children).forEach(function (ele) {\n args.item.appendChild(ele);\n });\n }\n }\n }\n }\n };\n Virtualization.prototype.reRenderUiVirtualization = function () {\n this.wireScrollEvent(true);\n if (this.listViewInstance.contentContainer) {\n detach(this.listViewInstance.contentContainer);\n }\n this.listViewInstance.preRender();\n // resetting the dom count to 0, to avoid edge case of dataSource suddenly becoming zero\n // and then manually adding item using addItem API\n this.domItemCount = 0;\n this.listViewInstance.header();\n this.listViewInstance.setLocalData();\n };\n Virtualization.prototype.updateUI = function (element, index, targetElement) {\n var onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;\n if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {\n var curViewDS = this.listViewInstance.curViewDS[index];\n element.dataset.uid = (curViewDS[this.listViewInstance.fields.id]) ?\n (curViewDS[this.listViewInstance.fields.id]) : ListBase.generateId();\n onChange(curViewDS, element, this);\n }\n else {\n this.updateUiContent(element, index);\n }\n this.changeElementAttributes(element, index);\n if (targetElement) {\n this.listViewInstance.ulElement.insertBefore(element, targetElement);\n }\n };\n /**\n * Handles the UI change in vue for the list view.\n *\n * @param {DataSource} newData - The new data source for the list view.\n * @param {ElementContext} listElement - The HTML element context for the list view.\n * @param {Virtualization} virtualThis - The virtualization context for the list view.\n * @returns {void}\n */\n Virtualization.prototype.onChange = function (newData, listElement, virtualThis) {\n var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);\n if (virtualThis.listViewInstance.isReact) {\n virtualThis.listViewInstance.renderReactTemplates();\n }\n while (listElement.lastChild) {\n listElement.removeChild(listElement.lastChild);\n }\n [].slice.call(liItem[0].children).forEach(function (ele) {\n listElement.appendChild(ele);\n });\n };\n Virtualization.prototype.onNgChange = function (newData, listElement, virtualThis) {\n // compile given target element with template for new data\n var templateCompiler = compile(virtualThis.listViewInstance.template);\n var resultElement = templateCompiler(newData);\n while (listElement.lastChild) {\n listElement.removeChild(listElement.lastChild);\n }\n listElement.appendChild(resultElement[0]);\n };\n Virtualization.prototype.getModuleName = function () {\n return 'virtualization';\n };\n Virtualization.prototype.destroy = function () {\n this.wireScrollEvent(true);\n this.topElement = null;\n this.bottomElement = null;\n };\n return Virtualization;\n}());\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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 @typescript-eslint/no-explicit-any */\n/**\n * Sortable Module provides support to enable sortable functionality in Dom Elements.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * let ele: HTMLElement = document.getElementById('sortable');\n * let sortObj: Sortable = new Sortable(ele, {});\n * ```\n */\nvar Sortable = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Sortable, _super);\n function Sortable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.getHelper = function (e) {\n var target = _this.getSortableElement(e.sender.target);\n if (!_this.isValidTarget(target, _this)) {\n return false;\n }\n var element;\n if (_this.helper) {\n element = _this.helper({ sender: target, element: e.element });\n }\n else {\n element = target.cloneNode(true);\n element.style.width = target.offsetWidth + \"px\";\n element.style.height = target.offsetHeight + \"px\";\n }\n addClass([element], ['e-sortableclone']);\n document.body.appendChild(element);\n return element;\n };\n _this.onDrag = function (e) {\n if (!e.target) {\n return;\n }\n _this.trigger('drag', { event: e.event, element: _this.element, target: e.target });\n var newInst = _this.getSortableInstance(e.target);\n var target = _this.getSortableElement(e.target, newInst);\n if ((_this.isValidTarget(target, newInst) || (e.target && typeof e.target.className === 'string' && e.target.className.indexOf('e-list-group-item') > -1)) && (_this.curTarget !== target ||\n !isNullOrUndefined(newInst.placeHolder)) && (newInst.placeHolderElement ? newInst.placeHolderElement !== e.target : true)) {\n if (e.target.classList.contains('e-list-group-item')) {\n target = e.target;\n }\n _this.curTarget = target;\n if (_this.target === target) {\n return;\n }\n var oldIdx = _this.getIndex(newInst.placeHolderElement, newInst);\n var placeHolder = _this.getPlaceHolder(target, newInst);\n var newIdx = void 0;\n if (placeHolder) {\n oldIdx = isNullOrUndefined(oldIdx) ? _this.getIndex(_this.target) : oldIdx;\n newIdx = _this.getIndex(target, newInst, e.event);\n var isPlaceHolderPresent = _this.isPlaceHolderPresent(newInst);\n if (isPlaceHolderPresent && oldIdx === newIdx) {\n return;\n }\n if (isPlaceHolderPresent) {\n remove(newInst.placeHolderElement);\n }\n newInst.placeHolderElement = placeHolder;\n if (e.target && typeof e.target.className === 'string' && e.target.className.indexOf('e-list-group-item') > -1) {\n newInst.element.insertBefore(newInst.placeHolderElement, newInst.element.children[newIdx]);\n }\n else if (newInst.element !== _this.element && newIdx === newInst.element.childElementCount) {\n newInst.element.appendChild(newInst.placeHolderElement);\n }\n else {\n newInst.element.insertBefore(newInst.placeHolderElement, newInst.element.children[newIdx]);\n }\n _this.refreshDisabled(oldIdx, newIdx, newInst);\n }\n else {\n oldIdx = isNullOrUndefined(oldIdx) ? _this.getIndex(_this.target) :\n _this.getIndex(target, newInst) < oldIdx || !oldIdx ? oldIdx : oldIdx - 1;\n newIdx = _this.getIndex(target, newInst);\n var idx = newInst.element !== _this.element ? newIdx : oldIdx < newIdx ? newIdx + 1 : newIdx;\n _this.updateItemClass(newInst);\n newInst.element.insertBefore(_this.target, newInst.element.children[idx]);\n _this.refreshDisabled(oldIdx, newIdx, newInst);\n _this.curTarget = _this.target;\n _this.trigger('drop', {\n droppedElement: _this.target, element: newInst.element, previousIndex: oldIdx, currentIndex: newIdx,\n target: e.target, helper: document.getElementsByClassName('e-sortableclone')[0], event: e.event, scope: _this.scope\n });\n }\n }\n else if (_this.curTarget !== _this.target && _this.scope && _this.curTarget !== target && !isNullOrUndefined(newInst.placeHolder)) {\n remove(_this.getSortableInstance(_this.curTarget).placeHolderElement);\n _this.curTarget = _this.target;\n }\n newInst = _this.getSortableInstance(_this.curTarget);\n if (isNullOrUndefined(target) && e.target !== newInst.placeHolderElement) {\n if (_this.isPlaceHolderPresent(newInst)) {\n _this.removePlaceHolder(newInst);\n }\n }\n else {\n var placeHolders = [].slice.call(document.getElementsByClassName('e-sortable-placeholder'));\n var inst_1;\n placeHolders.forEach(function (placeHolder) {\n inst_1 = _this.getSortableInstance(placeHolder);\n if (inst_1.element && inst_1 !== newInst) {\n _this.removePlaceHolder(inst_1);\n }\n });\n }\n };\n _this.onDragStart = function (e) {\n _this.target = _this.getSortableElement(e.target);\n var cancelDrag = false;\n _this.target.classList.add('e-grabbed');\n _this.curTarget = _this.target;\n e.helper = document.getElementsByClassName('e-sortableclone')[0];\n var args = { cancel: false, element: _this.element, target: _this.target };\n _this.trigger('beforeDragStart', args, function (observedArgs) {\n if (observedArgs.cancel) {\n cancelDrag = observedArgs.cancel;\n _this.onDragStop(e);\n }\n });\n if (cancelDrag) {\n return;\n }\n if (isBlazor) {\n _this.trigger('dragStart', {\n event: e.event, element: _this.element, target: _this.target,\n bindEvents: e.bindEvents, dragElement: e.dragElement\n });\n }\n else {\n _this.trigger('dragStart', { event: e.event, element: _this.element, target: _this.target });\n }\n };\n _this.onDragStop = function (e) {\n var dropInst = _this.getSortableInstance(_this.curTarget);\n var prevIdx;\n var curIdx;\n var handled;\n prevIdx = _this.getIndex(_this.target);\n var isPlaceHolderPresent = _this.isPlaceHolderPresent(dropInst);\n if (isPlaceHolderPresent) {\n var curIdx_1 = _this.getIndex(dropInst.placeHolderElement, dropInst);\n var args = {\n previousIndex: prevIdx, currentIndex: curIdx_1, target: e.target, droppedElement: _this.target,\n helper: e.helper, cancel: false, handled: false\n };\n _this.trigger('beforeDrop', args, function (observedArgs) {\n if (!observedArgs.cancel) {\n handled = observedArgs.handled;\n _this.updateItemClass(dropInst);\n if (observedArgs.handled) {\n var ele = _this.target.cloneNode(true);\n _this.target.classList.remove('e-grabbed');\n _this.target = ele;\n }\n dropInst.element.insertBefore(_this.target, dropInst.placeHolderElement);\n var curIdx_2 = _this.getIndex(_this.target, dropInst);\n prevIdx = _this === dropInst && (prevIdx - curIdx_2) > 1 ? prevIdx - 1 : prevIdx;\n _this.trigger('drop', {\n event: e.event, element: dropInst.element, previousIndex: prevIdx, currentIndex: curIdx_2,\n target: e.target, helper: e.helper, droppedElement: _this.target, scopeName: _this.scope, handled: handled\n });\n }\n remove(dropInst.placeHolderElement);\n });\n }\n dropInst = _this.getSortableInstance(e.target);\n curIdx = dropInst.element.childElementCount;\n prevIdx = _this.getIndex(_this.target);\n if (dropInst.element.querySelector('.e-list-nrt')) {\n curIdx = curIdx - 1;\n }\n if (_this.curTarget === _this.target && e.target === _this.curTarget) {\n curIdx = prevIdx;\n }\n if (dropInst.element === e.target || (!isPlaceHolderPresent && _this.curTarget === _this.target)) {\n var beforeDropArgs = {\n previousIndex: prevIdx, currentIndex: curIdx,\n target: e.target, droppedElement: _this.target, helper: e.helper, cancel: false\n };\n _this.trigger('beforeDrop', beforeDropArgs, function (observedArgs) {\n if ((dropInst.element === e.target || (typeof e.target.className === 'string' && e.target.className.indexOf('e-list-nrt') > -1) || (typeof e.target.className === 'string' && e.target.className.indexOf('e-list-nr-template') > -1)\n || e.target.closest('.e-list-nr-template')) && !observedArgs.cancel) {\n _this.updateItemClass(dropInst);\n dropInst.element.appendChild(_this.target);\n _this.trigger('drop', {\n event: e.event, element: dropInst.element, previousIndex: prevIdx, currentIndex: curIdx,\n target: e.target, helper: e.helper, droppedElement: _this.target, scopeName: _this.scope\n });\n }\n });\n }\n _this.target.classList.remove('e-grabbed');\n _this.target = null;\n _this.curTarget = null;\n remove(e.helper);\n getComponent(_this.element, 'draggable').intDestroy(e.event);\n };\n _this.bind();\n return _this;\n }\n Sortable_1 = Sortable;\n Sortable.prototype.bind = function () {\n if (!this.element.id) {\n this.element.id = getUniqueID('sortable');\n }\n if (!this.itemClass) {\n this.itemClass = 'e-sort-item';\n this.dataBind();\n }\n this.initializeDraggable();\n };\n Sortable.prototype.initializeDraggable = function () {\n new Draggable(this.element, {\n helper: this.getHelper,\n dragStart: this.onDragStart,\n drag: this.onDrag,\n dragStop: this.onDragStop,\n dragTarget: \".\" + this.itemClass,\n enableTapHold: true,\n tapHoldThreshold: 200,\n queryPositionInfo: this.queryPositionInfo,\n distance: 1\n });\n this.wireEvents();\n };\n Sortable.prototype.wireEvents = function () {\n var wrapper = this.element;\n EventHandler.add(wrapper, 'keydown', this.keyDownHandler, this);\n };\n Sortable.prototype.unwireEvents = function () {\n var wrapper = this.element;\n EventHandler.remove(wrapper, 'keydown', this.keyDownHandler);\n };\n Sortable.prototype.keyDownHandler = function (e) {\n if (e.keyCode === 27) {\n var dragStop = getComponent(this.element, 'draggable');\n if (dragStop) {\n dragStop.intDestroy(null);\n }\n var dragWrapper = document.getElementsByClassName('e-sortableclone')[0];\n if (dragWrapper) {\n dragWrapper.remove();\n }\n var dragPlaceholder = document.getElementsByClassName('e-sortable-placeholder')[0];\n if (dragPlaceholder) {\n dragPlaceholder.remove();\n }\n }\n };\n Sortable.prototype.getPlaceHolder = function (target, instance) {\n if (instance.placeHolder) {\n var placeHolderElement = instance.placeHolder({ element: instance.element, grabbedElement: this.target, target: target });\n placeHolderElement.classList.add('e-sortable-placeholder');\n return placeHolderElement;\n }\n return null;\n };\n Sortable.prototype.isValidTarget = function (target, instance) {\n return target && compareElementParent(target, instance.element) && target.classList.contains(instance.itemClass) &&\n !target.classList.contains('e-disabled');\n };\n Sortable.prototype.removePlaceHolder = function (instance) {\n remove(instance.placeHolderElement);\n instance.placeHolderElement = null;\n };\n Sortable.prototype.updateItemClass = function (instance) {\n if (this !== instance) {\n this.target.classList.remove(this.itemClass);\n this.target.classList.add(instance.itemClass);\n }\n };\n Sortable.prototype.getSortableInstance = function (element) {\n element = closest(element, \".e-\" + this.getModuleName());\n if (element) {\n var inst = getComponent(element, Sortable_1);\n return inst.scope && this.scope && inst.scope === this.scope ? inst : this;\n }\n else {\n return this;\n }\n };\n Sortable.prototype.refreshDisabled = function (oldIdx, newIdx, instance) {\n if (instance === this) {\n var element = void 0;\n var increased = oldIdx < newIdx;\n var disabledIdx = void 0;\n var start = increased ? oldIdx : newIdx;\n var end = increased ? newIdx : oldIdx;\n while (start <= end) {\n element = this.element.children[start];\n if (element.classList.contains('e-disabled')) {\n disabledIdx = this.getIndex(element);\n this.element.insertBefore(element, this.element.children[increased ? disabledIdx + 2 : disabledIdx - 1]);\n start = increased ? disabledIdx + 2 : disabledIdx + 1;\n }\n else {\n start++;\n }\n }\n }\n };\n Sortable.prototype.getIndex = function (target, instance, e) {\n if (instance === void 0) { instance = this; }\n var idx;\n var placeHolderPresent;\n [].slice.call(instance.element.children).forEach(function (element, index) {\n if (element.classList.contains('e-sortable-placeholder')) {\n placeHolderPresent = true;\n }\n if (element === target) {\n idx = index;\n if (!isNullOrUndefined(e)) {\n if (placeHolderPresent) {\n idx -= 1;\n }\n var offset = target.getBoundingClientRect();\n var clientY = offset.bottom - ((offset.bottom - offset.top) / 2);\n var cltY = e.changedTouches ? e.changedTouches[0].clientY : e.clientY;\n idx = cltY <= clientY ? idx : idx + 1;\n }\n return;\n }\n });\n return idx;\n };\n Sortable.prototype.getSortableElement = function (element, instance) {\n if (instance === void 0) { instance = this; }\n return closest(element, \".\" + instance.itemClass);\n };\n Sortable.prototype.queryPositionInfo = function (value) {\n value.left = pageXOffset ? parseFloat(value.left) - pageXOffset + \"px\" : value.left;\n value.top = pageYOffset ? parseFloat(value.top) - pageYOffset + \"px\" : value.top;\n return value;\n };\n Sortable.prototype.isPlaceHolderPresent = function (instance) {\n return instance.placeHolderElement && !!closest(instance.placeHolderElement, \"#\" + instance.element.id);\n };\n /**\n * It is used to sort array of elements from source element to destination element.\n *\n * @param destination - Defines the destination element to which the sortable elements needs to be appended.\n *\n * If it is null, then the Sortable library element will be considered as destination.\n * @param targetIndexes - Specifies the sortable elements indexes which needs to be sorted.\n * @param insertBefore - Specifies the index before which the sortable elements needs to be appended.\n * If it is null, elements will be appended as last child.\n * @function moveTo\n * @returns {void}\n */\n Sortable.prototype.moveTo = function (destination, targetIndexes, insertBefore) {\n moveTo(this.element, destination, targetIndexes, insertBefore);\n };\n /**\n * It is used to destroy the Sortable library.\n */\n Sortable.prototype.destroy = function () {\n this.unwireEvents();\n if (this.itemClass === 'e-sort-item') {\n this.itemClass = null;\n this.dataBind();\n }\n getComponent(this.element, Draggable).destroy();\n _super.prototype.destroy.call(this);\n };\n Sortable.prototype.getModuleName = function () {\n return 'sortable';\n };\n Sortable.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 'itemClass':\n [].slice.call(this.element.children).forEach(function (element) {\n if (element.classList.contains(oldProp.itemClass)) {\n element.classList.remove(oldProp.itemClass);\n }\n if (newProp.itemClass) {\n element.classList.add(newProp.itemClass);\n }\n });\n break;\n }\n }\n };\n var Sortable_1;\n __decorate$1([\n Property(false)\n ], Sortable.prototype, \"enableAnimation\", void 0);\n __decorate$1([\n Property(null)\n ], Sortable.prototype, \"itemClass\", void 0);\n __decorate$1([\n Property(null)\n ], Sortable.prototype, \"scope\", void 0);\n __decorate$1([\n Property()\n ], Sortable.prototype, \"helper\", void 0);\n __decorate$1([\n Property()\n ], Sortable.prototype, \"placeHolder\", void 0);\n __decorate$1([\n Event()\n ], Sortable.prototype, \"drag\", void 0);\n __decorate$1([\n Event()\n ], Sortable.prototype, \"beforeDragStart\", void 0);\n __decorate$1([\n Event()\n ], Sortable.prototype, \"dragStart\", void 0);\n __decorate$1([\n Event()\n ], Sortable.prototype, \"beforeDrop\", void 0);\n __decorate$1([\n Event()\n ], Sortable.prototype, \"drop\", void 0);\n Sortable = Sortable_1 = __decorate$1([\n NotifyPropertyChanges\n ], Sortable);\n return Sortable;\n}(Base));\n/**\n * It is used to sort array of elements from source element to destination element.\n *\n * @param {HTMLElement} from - The source element from which to move elements.\n * @param {HTMLElement} [to=from] - The destination element to which to move elements. Defaults to the source element.\n * @param {number[]} [targetIndexes] - The indexes of elements to move. If not provided, all children of the source element will be moved.\n * @param {number} [insertBefore] - The index before which to insert the moved elements in the destination element. If not provided, elements will be appended to the end of the destination element.\n * @returns {void}\n * @private\n */\nfunction moveTo(from, to, targetIndexes, insertBefore) {\n var targetElements = [];\n if (!to) {\n to = from;\n }\n if (targetIndexes && targetIndexes.length) {\n targetIndexes.forEach(function (index) {\n targetElements.push(from.children[index]);\n });\n }\n else {\n targetElements = [].slice.call(from.children);\n }\n if (isNullOrUndefined(insertBefore)) {\n targetElements.forEach(function (target) {\n to.appendChild(target);\n });\n }\n else {\n var insertElement_1 = to.children[insertBefore];\n targetElements.forEach(function (target) {\n to.insertBefore(target, insertElement_1);\n });\n }\n}\n\nexport { FieldSettings, ListBase, ListView, Sortable, Virtualization, classNames, cssClass, getFieldValues, moveTo };\n","import { Browser, getUniqueID, Touch, EventHandler, isNullOrUndefined, selectAll, detach, classList, Property, NotifyPropertyChanges, Component, createElement, removeClass, select, ChildProperty, Collection, Animation, getValue, setValue, append, addClass, isBlazor, rippleEffect, KeyboardEvents, closest, getInstance, isVisible, SanitizeHtmlHelper, Event, Complex, formatUnit, setStyleAttribute, attributes, compile, isRippleEnabled, animationMode, remove, getRandomId, L10n, Draggable, isUndefined, getElement, Droppable, matches, extend, merge, initializeCSPTemplate } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { getScrollableParent, Popup, getZindexPartial, fit, isCollide, calculatePosition, createSpinner, showSpinner, hideSpinner, Tooltip } from '@syncfusion/ej2-popups';\nimport { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { Input } from '@syncfusion/ej2-inputs';\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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};\nvar CLS_ROOT = 'e-hscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_HSCROLLCON = 'e-hscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVRIGHTARROW = 'e-nav-right-arrow';\nvar CLS_NAVLEFTARROW = 'e-nav-left-arrow';\nvar CLS_HSCROLLNAV = 'e-scroll-nav';\nvar CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';\nvar CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_RIGHTOVERLAY = 'e-scroll-right-overlay';\nvar CLS_LEFTOVERLAY = 'e-scroll-left-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * HScroll module is introduces horizontal scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs horizontal scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n * Item 1
\n * Item 2
\n * Item 3
\n * Item 4
\n * Item 5
\n * \n * \n * ```\n */\nvar HScroll = /** @__PURE__ @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n *\n * @param {HScrollModel} options - Specifies HScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which horizontal scrolling applies.\n */\n function HScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var element = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (element.id === '') {\n element.id = getUniqueID('hscroll');\n this.uniqueId = true;\n }\n element.style.display = 'block';\n if (this.enableRtl) {\n element.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the horizontal scroll rendering\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlay(this.element);\n }\n this.setScrollState();\n };\n HScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetWidth;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });\n var scrollDiv = this.createElement('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n HScroll.prototype.getModuleName = function () {\n return 'hScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n HScroll.prototype.destroy = function () {\n var ele = this.element;\n ele.style.display = '';\n ele.classList.remove(CLS_ROOT);\n ele.classList.remove(CLS_DEVICE);\n ele.classList.remove(CLS_RTL);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n var overlay = selectAll('.' + CLS_OVERLAY, ele);\n [].slice.call(overlay).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n ele.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (nav.length > 0) {\n detach(nav[0]);\n if (!isNullOrUndefined(nav[1])) {\n detach(nav[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the HScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, HScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n HScroll.prototype.disable = function (value) {\n var navEles = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEles).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n HScroll.prototype.createOverlay = function (element) {\n var id = element.id.concat('_nav');\n var rightOverlayEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_RIGHTOVERLAY });\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightEle = this.createElement('div', { id: id.concat('_right'), className: clsRight });\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n rightEle.appendChild(navItem);\n var leftEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_LEFTOVERLAY });\n if (this.ieCheck) {\n rightEle.classList.add('e-ie-align');\n }\n element.appendChild(rightOverlayEle);\n element.appendChild(rightEle);\n element.insertBefore(leftEle, element.firstChild);\n this.eventBinding([rightEle]);\n };\n HScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };\n var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };\n var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\n element.appendChild(nav);\n element.insertBefore(navEle, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navEle.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navEle]);\n };\n HScroll.prototype.onKeyPress = function (e) {\n var _this = this;\n if (e.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, e.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n HScroll.prototype.onKeyUp = function (e) {\n if (e.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n e.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n HScroll.prototype.eventBinding = function (ele) {\n var _this = this;\n [].slice.call(ele).forEach(function (el) {\n new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n el.addEventListener('keydown', _this.onKeyPress.bind(_this));\n el.addEventListener('keyup', _this.onKeyUp.bind(_this));\n el.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n el.addEventListener('touchend', _this.repeatScroll.bind(_this));\n el.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(el, 'click', _this.clickEventHandler, _this);\n });\n };\n HScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n HScroll.prototype.tabHoldHandler = function (e) {\n var _this = this;\n var trgt = e.originalEvent.target;\n trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDis = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDis, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n HScroll.prototype.contains = function (ele, className) {\n return ele.classList.contains(className);\n };\n HScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var rootEle = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_HSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {\n scrollDis = -scrollDis;\n }\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target, false);\n };\n HScroll.prototype.swipeHandler = function (e) {\n var swipeEle = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceX / (e.velocity * 10);\n }\n else {\n distance = e.distanceX / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Left') {\n swipeEle.scrollLeft += distance * step;\n }\n else if (e.swipeDirection === 'Right') {\n swipeEle.scrollLeft -= distance * step;\n }\n start -= 0.5;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollLeft += scrollVal;\n }\n else {\n this.scrollEle.scrollLeft -= scrollVal;\n }\n if (this.enableRtl && this.scrollEle.scrollLeft > 0) {\n this.scrollEle.scrollLeft = 0;\n }\n };\n HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollVal, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollVal -= el.offsetWidth;\n });\n }\n var animate = function () {\n var scrollValue;\n var scrollStep;\n if (_this.contains(_this.element, CLS_RTL) && _this.browserCheck) {\n scrollValue = -scrollVal;\n scrollStep = -step;\n }\n else {\n scrollValue = scrollVal;\n scrollStep = step;\n }\n if (scrollValue < step) {\n window.cancelAnimationFrame(scrollStep);\n }\n else {\n _this.scrollUpdating(scrollStep, action);\n scrollVal -= scrollStep;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance = e.distanceX;\n if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {\n distance = -distance;\n }\n if (e.scrollDirection === 'Left') {\n ele.scrollLeft = ele.scrollLeft + distance;\n }\n else if (e.scrollDirection === 'Right') {\n ele.scrollLeft = ele.scrollLeft - distance;\n }\n };\n HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisable) ? removeDisable : addDisable;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisable)) {\n classList(arrowIcon, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);\n }\n }\n else if (addDisable && removeDisable) {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n HScroll.prototype.scrollHandler = function (e) {\n var target = e.target;\n var width = target.offsetWidth;\n var rootEle = this.element;\n var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);\n var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);\n var leftOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n var rightOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (this.isDevice) {\n if (this.enableRtl && !(this.browserCheck || this.ieCheck)) {\n leftOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n rightOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n }\n if (scrollLeft < OVERLAY_MAXWID) {\n leftOverlay.style.width = scrollLeft + 'px';\n }\n else {\n leftOverlay.style.width = '40px';\n }\n if ((target.scrollWidth - Math.ceil(width + scrollLeft)) < OVERLAY_MAXWID) {\n rightOverlay.style.width = (target.scrollWidth - Math.ceil(width + scrollLeft)) + 'px';\n }\n else {\n rightOverlay.style.width = '40px';\n }\n }\n if (scrollLeft === 0) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {HScrollModel} newProp - It contains the new value of data.\n * @param {HScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n HScroll.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 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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};\nvar CLS_ROOT$1 = 'e-vscroll';\nvar CLS_RTL$1 = 'e-rtl';\nvar CLS_DISABLE$1 = 'e-overlay';\nvar CLS_VSCROLLBAR = 'e-vscroll-bar';\nvar CLS_VSCROLLCON = 'e-vscroll-content';\nvar CLS_NAVARROW$1 = 'e-nav-arrow';\nvar CLS_NAVUPARROW = 'e-nav-up-arrow';\nvar CLS_NAVDOWNARROW = 'e-nav-down-arrow';\nvar CLS_VSCROLLNAV = 'e-scroll-nav';\nvar CLS_VSCROLLNAVUP = 'e-scroll-up-nav';\nvar CLS_VSCROLLNAVDOWN = 'e-scroll-down-nav';\nvar CLS_DEVICE$1 = 'e-scroll-device';\nvar CLS_OVERLAY$1 = 'e-scroll-overlay';\nvar CLS_UPOVERLAY = 'e-scroll-up-overlay';\nvar CLS_DOWNOVERLAY = 'e-scroll-down-overlay';\nvar OVERLAY_MAXWID$1 = 40;\n/**\n * VScroll module is introduces vertical scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs vertical scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n *
\n * \n * ```\n */\nvar VScroll = /** @__PURE__ @class */ (function (_super) {\n __extends$1(VScroll, _super);\n /**\n * Initializes a new instance of the VScroll class.\n *\n * @param {VScrollModel} options - Specifies VScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which vertical scrolling applies.\n */\n function VScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var ele = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (ele.id === '') {\n ele.id = getUniqueID('vscroll');\n this.uniqueId = true;\n }\n ele.style.display = 'block';\n if (this.enableRtl) {\n ele.classList.add(CLS_RTL$1);\n }\n };\n /**\n * To Initialize the vertical scroll rendering\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE$1);\n this.createOverlayElement(this.element);\n }\n this.setScrollState();\n EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);\n };\n VScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetHeight;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n VScroll.prototype.initialize = function () {\n var scrollCnt = createElement('div', { className: CLS_VSCROLLCON });\n var scrollBar = createElement('div', { className: CLS_VSCROLLBAR });\n scrollBar.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollCnt.appendChild(ele_1);\n }\n scrollBar.appendChild(scrollCnt);\n ele.appendChild(scrollBar);\n scrollBar.style.overflow = 'hidden';\n this.scrollEle = scrollBar;\n this.scrollItems = scrollCnt;\n };\n VScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n VScroll.prototype.getModuleName = function () {\n return 'vScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n VScroll.prototype.destroy = function () {\n var el = this.element;\n el.style.display = '';\n removeClass([this.element], [CLS_ROOT$1, CLS_DEVICE$1, CLS_RTL$1]);\n var navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);\n var overlays = selectAll('.' + CLS_OVERLAY$1, el);\n [].slice.call(overlays).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n el.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (navs.length > 0) {\n detach(navs[0]);\n if (!isNullOrUndefined(navs[1])) {\n detach(navs[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the VScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n VScroll.prototype.disable = function (value) {\n var navEle = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE$1 + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE$1);\n }\n else {\n this.element.classList.remove(CLS_DISABLE$1);\n }\n [].slice.call(navEle).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n VScroll.prototype.createOverlayElement = function (element) {\n var id = element.id.concat('_nav');\n var downOverlayEle = createElement('div', { className: CLS_OVERLAY$1 + ' ' + CLS_DOWNOVERLAY });\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var downEle = createElement('div', { id: id.concat('down'), className: clsDown });\n var navItem = createElement('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW$1 + ' e-icons' });\n downEle.appendChild(navItem);\n var upEle = createElement('div', { className: CLS_OVERLAY$1 + ' ' + CLS_UPOVERLAY });\n if (this.ieCheck) {\n downEle.classList.add('e-ie-align');\n }\n element.appendChild(downOverlayEle);\n element.appendChild(downEle);\n element.insertBefore(upEle, element.firstChild);\n this.eventBinding([downEle]);\n };\n VScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var nav = createElement('div', { id: id.concat('_down'), className: clsDown });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = createElement('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW$1 + ' e-icons' });\n var clsUp = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVUP);\n var navElement = createElement('div', { id: id.concat('_up'), className: clsUp + ' ' + CLS_DISABLE$1 });\n navElement.setAttribute('aria-disabled', 'true');\n var navUpItem = createElement('div', { className: CLS_NAVUPARROW + ' ' + CLS_NAVARROW$1 + ' e-icons' });\n navElement.appendChild(navUpItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navElement, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navElement.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navElement]);\n };\n VScroll.prototype.onKeyPress = function (ev) {\n var _this = this;\n if (ev.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, ev.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n VScroll.prototype.onKeyUp = function (ev) {\n if (ev.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n ev.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n VScroll.prototype.eventBinding = function (element) {\n var _this = this;\n [].slice.call(element).forEach(function (ele) {\n new Touch(ele, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n ele.addEventListener('keydown', _this.onKeyPress.bind(_this));\n ele.addEventListener('keyup', _this.onKeyUp.bind(_this));\n ele.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n ele.addEventListener('touchend', _this.repeatScroll.bind(_this));\n ele.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(ele, 'click', _this.clickEventHandler, _this);\n });\n };\n VScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n VScroll.prototype.tabHoldHandler = function (ev) {\n var _this = this;\n var trgt = ev.originalEvent.target;\n trgt = this.contains(trgt, CLS_VSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDistance = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDistance, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n VScroll.prototype.contains = function (element, className) {\n return element.classList.contains(className);\n };\n VScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var classList = trgt.classList;\n if (classList.contains(CLS_VSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW$1).classList;\n }\n if (classList.contains(CLS_NAVDOWNARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else if (classList.contains(CLS_NAVUPARROW)) {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n };\n VScroll.prototype.clickEventHandler = function (event) {\n this.eleScrolling(this.scrollStep, event.target, false);\n };\n VScroll.prototype.wheelEventHandler = function (e) {\n e.preventDefault();\n this.frameScrollRequest(this.scrollStep, (e.deltaY > 0 ? 'add' : ''), false);\n };\n VScroll.prototype.swipeHandler = function (e) {\n var swipeElement = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceY / (e.velocity * 10);\n }\n else {\n distance = e.distanceY / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Up') {\n swipeElement.scrollTop += distance * step;\n }\n else if (e.swipeDirection === 'Down') {\n swipeElement.scrollTop -= distance * step;\n }\n start -= 0.02;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollTop += scrollVal;\n }\n else {\n this.scrollEle.scrollTop -= scrollVal;\n }\n };\n VScroll.prototype.frameScrollRequest = function (scrollValue, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollValue, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY$1, this.element)).forEach(function (el) {\n scrollValue -= el.offsetHeight;\n });\n }\n var animate = function () {\n if (scrollValue < step) {\n window.cancelAnimationFrame(step);\n }\n else {\n _this.scrollUpdating(step, action);\n scrollValue -= step;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.touchHandler = function (e) {\n var el = this.scrollEle;\n var distance = e.distanceY;\n if (e.scrollDirection === 'Up') {\n el.scrollTop = el.scrollTop + distance;\n }\n else if (e.scrollDirection === 'Down') {\n el.scrollTop = el.scrollTop - distance;\n }\n };\n VScroll.prototype.arrowDisabling = function (addDisableCls, removeDisableCls) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisableCls) ? removeDisableCls : addDisableCls;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW$1);\n if (isNullOrUndefined(addDisableCls)) {\n classList(arrowIcon, [CLS_NAVDOWNARROW], [CLS_NAVUPARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVUPARROW], [CLS_NAVDOWNARROW]);\n }\n }\n else {\n addDisableCls.classList.add(CLS_DISABLE$1);\n addDisableCls.setAttribute('aria-disabled', 'true');\n addDisableCls.removeAttribute('tabindex');\n removeDisableCls.classList.remove(CLS_DISABLE$1);\n removeDisableCls.setAttribute('aria-disabled', 'false');\n removeDisableCls.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n VScroll.prototype.scrollEventHandler = function (e) {\n var target = e.target;\n var height = target.offsetHeight;\n var navUpEle = this.element.querySelector('.' + CLS_VSCROLLNAVUP);\n var navDownEle = this.element.querySelector('.' + CLS_VSCROLLNAVDOWN);\n var upOverlay = this.element.querySelector('.' + CLS_UPOVERLAY);\n var downOverlay = this.element.querySelector('.' + CLS_DOWNOVERLAY);\n var scrollTop = target.scrollTop;\n if (scrollTop <= 0) {\n scrollTop = -scrollTop;\n }\n if (this.isDevice) {\n if (scrollTop < OVERLAY_MAXWID$1) {\n upOverlay.style.height = scrollTop + 'px';\n }\n else {\n upOverlay.style.height = '40px';\n }\n if ((target.scrollHeight - Math.ceil(height + scrollTop)) < OVERLAY_MAXWID$1) {\n downOverlay.style.height = (target.scrollHeight - Math.ceil(height + scrollTop)) + 'px';\n }\n else {\n downOverlay.style.height = '40px';\n }\n }\n if (scrollTop === 0) {\n this.arrowDisabling(navUpEle, navDownEle);\n }\n else if (Math.ceil(height + scrollTop + .1) >= target.scrollHeight) {\n this.arrowDisabling(navDownEle, navUpEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_VSCROLLNAV + '.' + CLS_DISABLE$1);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE$1);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {VScrollModel} newProp - It contains the new value of data.\n * @param {VScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n VScroll.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 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(CLS_RTL$1);\n }\n else {\n this.element.classList.remove(CLS_RTL$1);\n }\n break;\n }\n }\n };\n __decorate$1([\n Property(null)\n ], VScroll.prototype, \"scrollStep\", void 0);\n VScroll = __decorate$1([\n NotifyPropertyChanges\n ], VScroll);\n return VScroll;\n}(Component));\n\n/**\n * Used to add scroll in menu.\n *\n * @param {createElementType} createElement - Specifies the create element model\n * @param {HTMLElement} container - Specifies the element container\n * @param {HTMLElement} content - Specifies the content element\n * @param {string} scrollType - Specifies the scroll type\n * @param {boolean} enableRtl - Specifies the enable RTL property\n * @param {boolean} offset - Specifies the offset value\n * @returns {HTMLElement} - Element\n * @hidden\n */\nfunction addScrolling(createElement, container, content, scrollType, enableRtl, offset) {\n var containerOffset;\n var contentOffset;\n var parentElem = container.parentElement;\n if (scrollType === 'vscroll') {\n containerOffset = offset || container.getBoundingClientRect().height;\n contentOffset = content.getBoundingClientRect().height;\n }\n else {\n containerOffset = container.getBoundingClientRect().width;\n contentOffset = content.getBoundingClientRect().width;\n }\n if (containerOffset < contentOffset) {\n return createScrollbar(createElement, container, content, scrollType, enableRtl, offset);\n }\n else if (parentElem) {\n var width = parentElem.getBoundingClientRect().width;\n if (width < containerOffset && scrollType === 'hscroll') {\n contentOffset = width;\n container.style.maxWidth = width + 'px';\n return createScrollbar(createElement, container, content, scrollType, enableRtl, offset);\n }\n return content;\n }\n else {\n return content;\n }\n}\n/**\n * Used to create scroll bar in menu.\n *\n * @param {createElementType} createElement - Specifies the create element model\n * @param {HTMLElement} container - Specifies the element container\n * @param {HTMLElement} content - Specifies the content element\n * @param {string} scrollType - Specifies the scroll type\n * @param {boolean} enableRtl - Specifies the enable RTL property\n * @param {boolean} offset - Specifies the offset value\n * @returns {HTMLElement} - Element\n * @hidden\n */\nfunction createScrollbar(createElement, container, content, scrollType, enableRtl, offset) {\n var scrollEle = createElement('div', { className: 'e-menu-' + scrollType });\n container.appendChild(scrollEle);\n scrollEle.appendChild(content);\n if (offset) {\n scrollEle.style.overflow = 'hidden';\n scrollEle.style.height = offset + 'px';\n }\n else {\n scrollEle.style.maxHeight = container.style.maxHeight;\n container.style.overflow = 'hidden';\n }\n var scrollObj;\n if (scrollType === 'vscroll') {\n scrollObj = new VScroll({ enableRtl: enableRtl }, scrollEle);\n scrollObj.scrollStep = select('.e-' + scrollType + '-bar', container).offsetHeight / 2;\n }\n else {\n scrollObj = new HScroll({ enableRtl: enableRtl }, scrollEle);\n scrollObj.scrollStep = select('.e-' + scrollType + '-bar', container).offsetWidth;\n }\n return scrollEle;\n}\n/**\n * Used to destroy the scroll option.\n *\n * @param {VScroll | HScroll} scrollObj - Specifies the scroller object\n * @param {Element} element - Specifies the element\n * @param {HTMLElement} skipEle - Specifies the skip element\n * @returns {void}\n * @hidden\n */\nfunction destroyScroll(scrollObj, element, skipEle) {\n if (scrollObj) {\n var menu = select('.e-menu-parent', element);\n if (menu) {\n if (!skipEle || skipEle === menu) {\n scrollObj.destroy();\n element.parentElement.appendChild(menu);\n detach(element);\n }\n }\n else {\n scrollObj.destroy();\n detach(element);\n }\n }\n}\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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};\nvar ENTER = 'enter';\nvar ESCAPE = 'escape';\nvar FOCUSED = 'e-focused';\nvar HEADER = 'e-menu-header';\nvar SELECTED = 'e-selected';\nvar SEPARATOR = 'e-separator';\nvar UPARROW = 'uparrow';\nvar DOWNARROW = 'downarrow';\nvar LEFTARROW = 'leftarrow';\nvar RIGHTARROW = 'rightarrow';\nvar HOME = 'home';\nvar END = 'end';\nvar TAB = 'tab';\nvar CARET = 'e-caret';\nvar ITEM = 'e-menu-item';\nvar DISABLED = 'e-disabled';\nvar HIDE = 'e-menu-hide';\nvar ICONS = 'e-icons';\nvar RTL = 'e-rtl';\nvar POPUP = 'e-menu-popup';\nvar TEMPLATE_PROPERTY = 'Template';\n/**\n * Configures the field options of the Menu.\n */\nvar FieldSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$2(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property('id')\n ], FieldSettings.prototype, \"itemId\", void 0);\n __decorate$2([\n Property('parentId')\n ], FieldSettings.prototype, \"parentId\", void 0);\n __decorate$2([\n Property('text')\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate$2([\n Property('iconCss')\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate$2([\n Property('url')\n ], FieldSettings.prototype, \"url\", void 0);\n __decorate$2([\n Property('separator')\n ], FieldSettings.prototype, \"separator\", void 0);\n __decorate$2([\n Property('items')\n ], FieldSettings.prototype, \"children\", void 0);\n return FieldSettings;\n}(ChildProperty));\n/**\n * Specifies menu items.\n */\nvar MenuItem = /** @__PURE__ @class */ (function (_super) {\n __extends$2(MenuItem, _super);\n function MenuItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property(null)\n ], MenuItem.prototype, \"iconCss\", void 0);\n __decorate$2([\n Property('')\n ], MenuItem.prototype, \"id\", void 0);\n __decorate$2([\n Property(false)\n ], MenuItem.prototype, \"separator\", void 0);\n __decorate$2([\n Collection([], MenuItem)\n ], MenuItem.prototype, \"items\", void 0);\n __decorate$2([\n Property('')\n ], MenuItem.prototype, \"text\", void 0);\n __decorate$2([\n Property('')\n ], MenuItem.prototype, \"url\", void 0);\n return MenuItem;\n}(ChildProperty));\n/**\n * Animation configuration settings.\n */\nvar MenuAnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$2(MenuAnimationSettings, _super);\n function MenuAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property('SlideDown')\n ], MenuAnimationSettings.prototype, \"effect\", void 0);\n __decorate$2([\n Property(400)\n ], MenuAnimationSettings.prototype, \"duration\", void 0);\n __decorate$2([\n Property('ease')\n ], MenuAnimationSettings.prototype, \"easing\", void 0);\n return MenuAnimationSettings;\n}(ChildProperty));\n/**\n * Base class for Menu and ContextMenu components.\n *\n * @private\n */\nvar MenuBase = /** @__PURE__ @class */ (function (_super) {\n __extends$2(MenuBase, _super);\n /**\n * Constructor for creating the widget.\n *\n * @private\n * @param {MenuBaseModel} options - Specifies the menu base model\n * @param {string | HTMLUListElement} element - Specifies the element\n */\n function MenuBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.navIdx = [];\n _this.animation = new Animation({});\n _this.isTapHold = false;\n _this.tempItem = [];\n _this.showSubMenuOn = 'Auto';\n _this.isAnimationNone = false;\n return _this;\n }\n /**\n * Initialized third party configuration settings.\n *\n * @private\n * @returns {void}\n */\n MenuBase.prototype.preRender = function () {\n if (!this.isMenu) {\n var ul = void 0;\n if (this.element.tagName === 'EJS-CONTEXTMENU') {\n ul = this.createElement('ul', {\n id: getUniqueID(this.getModuleName()), className: 'e-control e-lib e-' + this.getModuleName()\n });\n var ejInst = getValue('ej2_instances', this.element);\n removeClass([this.element], ['e-control', 'e-lib', 'e-' + this.getModuleName()]);\n this.clonedElement = this.element;\n this.element = ul;\n setValue('ej2_instances', ejInst, this.element);\n }\n else {\n ul = this.createElement('ul', { id: getUniqueID(this.getModuleName()) });\n append([].slice.call(this.element.cloneNode(true).children), ul);\n var refEle = this.element.nextElementSibling;\n if (refEle) {\n this.element.parentElement.insertBefore(ul, refEle);\n }\n else {\n this.element.parentElement.appendChild(ul);\n }\n this.clonedElement = ul;\n }\n this.clonedElement.style.display = 'none';\n }\n if (this.element.tagName === 'EJS-MENU') {\n var ele = this.element;\n var ejInstance = getValue('ej2_instances', ele);\n var ul = this.createElement('ul');\n var wrapper = this.createElement('EJS-MENU', { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {\n ul.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);\n }\n ele.parentNode.insertBefore(wrapper, ele);\n detach(ele);\n ele = ul;\n wrapper.appendChild(ele);\n setValue('ej2_instances', ejInstance, ele);\n this.clonedElement = wrapper;\n this.element = ele;\n if (!this.element.id) {\n this.element.id = getUniqueID(this.getModuleName());\n }\n }\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n MenuBase.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.renderItems();\n this.wireEvents();\n this.renderComplete();\n var wrapper = this.getWrapper();\n // eslint-disable-next-line\n if (this.template && this.enableScrolling && (this.isReact || this.isAngular)) {\n requestAnimationFrame(function () {\n addScrolling(_this.createElement, wrapper, _this.element, 'hscroll', _this.enableRtl);\n });\n }\n };\n MenuBase.prototype.initialize = function () {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n if (this.isMenu) {\n this.element.parentElement.insertBefore(wrapper, this.element);\n }\n else {\n document.body.appendChild(wrapper);\n }\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n wrapper.appendChild(this.element);\n if (this.isMenu && this.hamburgerMode) {\n if (!this.target) {\n this.createHeaderContainer(wrapper);\n }\n }\n this.defaultOption = this.showItemOnClick;\n };\n MenuBase.prototype.renderItems = function () {\n if (!this.items.length) {\n var items = ListBase.createJsonFromElement(this.element, { fields: { child: 'items' } });\n this.setProperties({ items: items }, true);\n if (isBlazor() && !this.isMenu) {\n this.element = this.removeChildElement(this.element);\n }\n else {\n this.element.innerHTML = '';\n }\n }\n var ul = this.createItems(this.items);\n append(Array.prototype.slice.call(ul.children), this.element);\n this.element.classList.add('e-menu-parent');\n if (this.isMenu) {\n if (!this.hamburgerMode && this.element.classList.contains('e-vertical')) {\n this.setBlankIconStyle(this.element);\n }\n if (this.enableScrolling) {\n var wrapper = this.getWrapper();\n if (this.element.classList.contains('e-vertical')) {\n addScrolling(this.createElement, wrapper, this.element, 'vscroll', this.enableRtl);\n }\n else {\n addScrolling(this.createElement, wrapper, this.element, 'hscroll', this.enableRtl);\n }\n }\n }\n else {\n this.element.parentElement.setAttribute('role', 'dialog');\n this.element.parentElement.setAttribute('aria-label', 'context menu');\n }\n };\n MenuBase.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n if (this.target) {\n var target = void 0;\n var targetElems = selectAll(this.target);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (this.isMenu) {\n EventHandler.add(target, 'click', this.menuHeaderClickHandler, this);\n }\n else {\n if (Browser.isIos) {\n new Touch(target, { tapHold: this.touchHandler.bind(this) });\n }\n else {\n EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);\n }\n }\n }\n this.targetElement = target;\n if (!this.isMenu) {\n EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);\n }\n }\n }\n if (!Browser.isDevice) {\n this.delegateMoverHandler = this.moverHandler.bind(this);\n this.delegateMouseDownHandler = this.mouseDownHandler.bind(this);\n EventHandler.add(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler, this);\n EventHandler.add(document, 'mousedown', this.delegateMouseDownHandler, this);\n if (!this.isMenu && !this.target) {\n EventHandler.add(document, 'scroll', this.scrollHandler, this);\n }\n }\n this.delegateClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.delegateClickHandler, this);\n this.wireKeyboardEvent(wrapper);\n this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });\n };\n MenuBase.prototype.wireKeyboardEvent = function (element) {\n var keyConfigs = {\n downarrow: DOWNARROW,\n uparrow: UPARROW,\n enter: ENTER,\n leftarrow: LEFTARROW,\n rightarrow: RIGHTARROW,\n escape: ESCAPE\n };\n if (this.isMenu) {\n keyConfigs.home = HOME;\n keyConfigs.end = END;\n keyConfigs.tab = TAB;\n }\n new KeyboardEvents(element, {\n keyAction: this.keyBoardHandler.bind(this),\n keyConfigs: keyConfigs\n });\n };\n MenuBase.prototype.mouseDownHandler = function (e) {\n if (closest(e.target, '.e-' + this.getModuleName() + '-wrapper') !== this.getWrapper()\n && (!closest(e.target, '.e-' + this.getModuleName() + '-popup'))) {\n this.closeMenu(this.isMenu ? null : this.navIdx.length, e);\n }\n };\n MenuBase.prototype.keyHandler = function (e) {\n if (e.keyCode === 38 || e.keyCode === 40) {\n if (e.target && (e.target.classList.contains('e-contextmenu') || e.target.classList.contains('e-menu-item'))) {\n e.preventDefault();\n }\n }\n };\n MenuBase.prototype.keyBoardHandler = function (e) {\n var actionName = '';\n var trgt = e.target;\n var actionNeeded = this.isMenu && !this.hamburgerMode && !this.element.classList.contains('e-vertical')\n && this.navIdx.length < 1;\n e.preventDefault();\n if (this.enableScrolling && e.keyCode === 13 && trgt.classList.contains('e-scroll-nav')) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [closest(trgt, '.e-' + this.getModuleName() + '-wrapper')]);\n }\n if (actionNeeded) {\n switch (e.action) {\n case RIGHTARROW:\n actionName = RIGHTARROW;\n e.action = DOWNARROW;\n break;\n case LEFTARROW:\n actionName = LEFTARROW;\n e.action = UPARROW;\n break;\n case DOWNARROW:\n actionName = DOWNARROW;\n e.action = RIGHTARROW;\n break;\n case UPARROW:\n actionName = UPARROW;\n e.action = '';\n break;\n }\n }\n else if (this.enableRtl) {\n switch (e.action) {\n case LEFTARROW:\n actionNeeded = true;\n actionName = LEFTARROW;\n e.action = RIGHTARROW;\n break;\n case RIGHTARROW:\n actionNeeded = true;\n actionName = RIGHTARROW;\n e.action = LEFTARROW;\n break;\n }\n }\n switch (e.action) {\n case DOWNARROW:\n case UPARROW:\n case END:\n case HOME:\n case TAB:\n this.upDownKeyHandler(e);\n break;\n case RIGHTARROW:\n this.rightEnterKeyHandler(e);\n break;\n case LEFTARROW:\n this.leftEscKeyHandler(e);\n break;\n case ENTER:\n if (this.hamburgerMode && trgt.tagName === 'SPAN' && trgt.classList.contains('e-menu-icon')) {\n this.menuHeaderClickHandler(e);\n }\n else {\n this.rightEnterKeyHandler(e);\n }\n break;\n case ESCAPE:\n this.leftEscKeyHandler(e);\n break;\n }\n if (actionNeeded) {\n e.action = actionName;\n }\n };\n MenuBase.prototype.upDownKeyHandler = function (e) {\n var cul = this.getUlByNavIdx();\n var defaultIdx = (e.action === DOWNARROW || e.action === HOME || e.action === TAB) ? 0 : cul.childElementCount - 1;\n var fliIdx = defaultIdx;\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n if (e.action !== END && e.action !== HOME) {\n fliIdx = this.getIdx(cul, fli);\n }\n fli.classList.remove(FOCUSED);\n if (e.action !== END && e.action !== HOME) {\n if (e.action === DOWNARROW) {\n fliIdx++;\n }\n else {\n fliIdx--;\n }\n if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {\n fliIdx = defaultIdx;\n }\n }\n }\n var cli = cul.children[fliIdx];\n fliIdx = this.isValidLI(cli, fliIdx, e.action);\n cul.children[fliIdx].classList.add(FOCUSED);\n cul.children[fliIdx].focus();\n };\n MenuBase.prototype.isValidLI = function (cli, index, action) {\n var cul = this.getUlByNavIdx();\n var defaultIdx = (action === DOWNARROW || action === HOME || action === TAB) ? 0 : cul.childElementCount - 1;\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n if (action === DOWNARROW && index === cul.childElementCount - 1) {\n index = defaultIdx;\n }\n else if (action === UPARROW && index === 0) {\n index = defaultIdx;\n }\n else if ((action === DOWNARROW) || (action === RIGHTARROW)) {\n index++;\n }\n else if (action === 'tab' && cli.classList.contains(SEPARATOR)) {\n index++;\n }\n else {\n index--;\n }\n }\n cli = cul.children[index];\n if (cli && (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE))) {\n index = this.isValidLI(cli, index, action);\n }\n return index;\n };\n MenuBase.prototype.getUlByNavIdx = function (navIdxLen) {\n var _this = this;\n if (navIdxLen === void 0) { navIdxLen = this.navIdx.length; }\n if (this.isMenu) {\n var popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];\n var popups_1 = [];\n var allPopup = selectAll('.' + POPUP);\n allPopup.forEach(function (elem) {\n if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {\n popups_1.push(elem);\n }\n });\n popup = [this.getWrapper()].concat([].slice.call(popups_1))[navIdxLen];\n return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);\n }\n else {\n if (!document.body.contains(this.element) && navIdxLen === 0) {\n return null;\n }\n return this.getWrapper().children[navIdxLen];\n }\n };\n MenuBase.prototype.rightEnterKeyHandler = function (e) {\n var eventArgs;\n var cul = this.getUlByNavIdx();\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n var fliIdx = this.getIdx(cul, fli);\n var navIdx = this.navIdx.concat(fliIdx);\n var item = this.getItem(navIdx);\n if (item.items.length) {\n this.navIdx.push(fliIdx);\n this.keyType = 'right';\n this.action = e.action;\n this.openMenu(fli, item, -1, -1, e);\n }\n else {\n if (e.action === ENTER) {\n if (this.isMenu && this.navIdx.length === 0) {\n this.removeLIStateByClass([SELECTED], [this.getWrapper()]);\n }\n else {\n fli.classList.remove(FOCUSED);\n }\n fli.classList.add(SELECTED);\n eventArgs = { element: fli, item: item, event: e };\n this.trigger('select', eventArgs);\n var aEle = fli.querySelector('.e-menu-url');\n if (item.url && aEle) {\n switch (aEle.getAttribute('target')) {\n case '_blank':\n window.open(item.url, '_blank');\n break;\n case '_parent':\n window.parent.location.href = item.url;\n break;\n default:\n window.location.href = item.url;\n }\n }\n this.closeMenu(null, e);\n var sli = this.getLIByClass(this.getUlByNavIdx(), SELECTED);\n if (sli) {\n sli.classList.add(FOCUSED);\n sli.focus();\n }\n }\n }\n }\n };\n MenuBase.prototype.leftEscKeyHandler = function (e) {\n if (this.navIdx.length) {\n this.keyType = 'left';\n this.closeMenu(this.navIdx.length, e);\n }\n else {\n if (e.action === ESCAPE) {\n this.closeMenu(null, e);\n }\n }\n };\n MenuBase.prototype.scrollHandler = function (e) {\n this.closeMenu(null, e);\n };\n MenuBase.prototype.touchHandler = function (e) {\n this.isTapHold = true;\n this.cmenuHandler(e.originalEvent);\n };\n MenuBase.prototype.cmenuHandler = function (e) {\n e.preventDefault();\n this.currentTarget = e.target;\n this.isCMenu = true;\n this.pageX = e.changedTouches ? e.changedTouches[0].pageX + 1 : e.pageX + 1;\n this.pageY = e.changedTouches ? e.changedTouches[0].pageY + 1 : e.pageY + 1;\n this.closeMenu(null, e);\n if (this.isCMenu) {\n if (this.canOpen(e.target)) {\n this.openMenu(null, null, this.pageY, this.pageX, e);\n }\n this.isCMenu = false;\n }\n };\n // eslint:disable-next-line:max-func-body-length\n MenuBase.prototype.closeMenu = function (ulIndex, e, isIterated) {\n var _this = this;\n if (ulIndex === void 0) { ulIndex = 0; }\n if (e === void 0) { e = null; }\n if (this.isMenuVisible()) {\n var sli = void 0;\n var item_1;\n var wrapper_1 = this.getWrapper();\n var beforeCloseArgs = void 0;\n var items_1;\n var popups = this.getPopups();\n var isClose = false;\n var cnt = this.isMenu ? popups.length + 1 : wrapper_1.childElementCount;\n var ul_1 = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])\n : selectAll('.e-menu-parent', wrapper_1)[cnt - 1];\n if (this.isMenu && ul_1.classList.contains('e-menu')) {\n sli = this.getLIByClass(ul_1, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n isClose = true;\n }\n if (!isClose) {\n var liElem_1 = e && e.target && this.getLI(e.target);\n if (liElem_1) {\n this.cli = liElem_1;\n }\n else {\n this.cli = ul_1.children[0];\n }\n item_1 = this.navIdx.length ? this.getItem(this.navIdx) : null;\n items_1 = item_1 ? item_1.items : this.items;\n beforeCloseArgs = { element: ul_1, parentItem: item_1, items: items_1, event: e, cancel: false, isFocused: true };\n this.trigger('beforeClose', beforeCloseArgs, function (observedCloseArgs) {\n var popupEle;\n var closeArgs;\n var popupId = '';\n var popupObj;\n var isOpen = !observedCloseArgs.cancel;\n if (isOpen || _this.isCMenu) {\n if (_this.isMenu) {\n popupEle = closest(ul_1, '.' + POPUP);\n if (_this.hamburgerMode) {\n popupEle.parentElement.style.minHeight = '';\n closest(ul_1, '.e-menu-item').setAttribute('aria-expanded', 'false');\n }\n _this.unWireKeyboardEvent(popupEle);\n destroyScroll(getInstance(popupEle.children[0], VScroll), popupEle.children[0]);\n popupObj = getInstance(popupEle, Popup);\n popupObj.hide();\n popupId = popupEle.id;\n popupObj.destroy();\n detach(popupEle);\n }\n else {\n _this.isContextMenuClosed = false;\n _this.toggleAnimation(ul_1, false);\n }\n closeArgs = { element: ul_1, parentItem: item_1, items: items_1 };\n _this.trigger('onClose', closeArgs);\n _this.navIdx.pop();\n if (_this.navIdx.length === 0 && e && e.type === 'keyup') {\n _this.showSubMenu = false;\n }\n if (!_this.isMenu) {\n EventHandler.remove(ul_1, 'keydown', _this.keyHandler);\n if (_this.keyType === 'right') {\n _this.keyType = '';\n }\n }\n }\n _this.updateReactTemplate();\n var trgtliId;\n var closedLi;\n var trgtLi;\n var trgtpopUp = _this.getWrapper() && _this.getUlByNavIdx();\n if (_this.isCMenu) {\n if (_this.canOpen(e.target)) {\n _this.openMenu(null, null, _this.pageY, _this.pageX, e);\n }\n _this.isCMenu = false;\n }\n if (_this.isMenu && trgtpopUp && popupId.length) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var regExp = RegExp;\n trgtliId = new regExp('(.*)-ej2menu-' + _this.element.id + '-popup').exec(popupId)[1];\n closedLi = trgtpopUp.querySelector('[id=\"' + trgtliId + '\"]');\n trgtLi = (liElem_1 && trgtpopUp.querySelector('[id=\"' + liElem_1.id + '\"]'));\n }\n else if (trgtpopUp) {\n closedLi = trgtpopUp.querySelector('.e-menu-item.e-selected');\n trgtLi = (liElem_1 && trgtpopUp.querySelector('[id=\"' + liElem_1.id + '\"]'));\n }\n var submenus = liElem_1 && liElem_1.querySelectorAll('.e-menu-item');\n if (isOpen && _this.hamburgerMode && ulIndex && !(submenus.length)) {\n _this.afterCloseMenu(e);\n }\n else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {\n var ele = (e && e.target.classList && (e.target.classList.contains('e-vscroll') || e.target.classList.contains('e-scroll-nav')))\n ? closest(e.target, '.e-menu-wrapper') : null;\n if (ele) {\n ele = ele.querySelector('.e-menu-item');\n if (_this.showItemOnClick || (ele && _this.getIndex(ele.id, true).length <= _this.navIdx.length)) {\n _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e, true);\n }\n }\n else {\n if (!(e && e.target.classList && e.target.classList.contains('e-nav-arrow'))) {\n _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e);\n }\n }\n }\n else if (isOpen && !isIterated && !ulIndex && ((_this.hamburgerMode && _this.navIdx.length) ||\n _this.navIdx.length === 1 && liElem_1 && trgtpopUp !== liElem_1.parentElement)) {\n _this.closeMenu(null, e);\n }\n else if (isOpen && isNullOrUndefined(ulIndex) && _this.navIdx.length) {\n _this.closeMenu(null, e);\n }\n else if (isOpen && !_this.isMenu && !ulIndex && _this.navIdx.length === 0 &&\n !_this.isMenusClosed && !_this.isCmenuHover) {\n _this.isMenusClosed = true;\n _this.closeMenu(0, e);\n }\n else if (isOpen && _this.isMenu && e && e.target &&\n _this.navIdx.length !== 0 && closest(e.target, '.e-menu-parent.e-control')) {\n _this.closeMenu(0, e);\n }\n else if (isOpen && !_this.isMenu && selectAll('.e-menu-parent', wrapper_1)[ulIndex - 1] && e.which === 3) {\n _this.closeMenu(null, e);\n }\n else {\n if (isOpen && (_this.keyType === 'right' || _this.keyType === 'click')) {\n _this.afterCloseMenu(e);\n }\n else {\n var cul = _this.getUlByNavIdx();\n var sli_1 = _this.getLIByClass(cul, SELECTED);\n if (sli_1) {\n sli_1.setAttribute('aria-expanded', 'false');\n sli_1.classList.remove(SELECTED);\n if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === 'left') {\n sli_1.classList.add(FOCUSED);\n if (!e.target || !e.target.classList.contains('e-edit-template')) {\n sli_1.focus();\n }\n }\n }\n if (!isOpen && _this.hamburgerMode && liElem_1 && liElem_1.getAttribute('aria-expanded') === 'false' &&\n liElem_1.getAttribute('aria-haspopup') === 'true') {\n if (closest(liElem_1, '.e-menu-parent.e-control')) {\n _this.navIdx = [];\n }\n else {\n _this.navIdx.pop();\n }\n _this.navIdx.push(_this.cliIdx);\n var item_2 = _this.getItem(_this.navIdx);\n liElem_1.setAttribute('aria-expanded', 'true');\n _this.openMenu(liElem_1, item_2, -1, -1, e);\n }\n }\n if (_this.navIdx.length < 1) {\n if (_this.showSubMenuOn === 'Hover' || _this.showSubMenuOn === 'Click') {\n _this.showItemOnClick = _this.defaultOption;\n _this.showSubMenuOn = 'Auto';\n }\n }\n }\n _this.removeStateWrapper();\n });\n }\n }\n };\n MenuBase.prototype.updateReactTemplate = function () {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact && this.template && this.navIdx.length === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var portals = void 0;\n if (this.portals) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n portals = this.portals.splice(0, this.items.length);\n }\n this.clearTemplate(['template']);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.portals = portals;\n this.renderReactTemplates();\n }\n };\n MenuBase.prototype.getMenuItemModel = function (item, level) {\n if (isNullOrUndefined(item)) {\n return null;\n }\n if (isNullOrUndefined(level)) {\n level = 0;\n }\n var fields = this.getFields(level);\n return { text: item[fields.text], id: item[fields.id], items: item[fields.child], separator: item[fields.separator],\n iconCss: item[fields.iconCss], url: item[fields.url] };\n };\n MenuBase.prototype.getPopups = function () {\n var _this = this;\n var popups = [];\n [].slice.call(document.querySelectorAll('.' + POPUP)).forEach(function (elem) {\n if (!isNullOrUndefined(elem.querySelector('.' + ITEM)) && _this.getIndex(elem.querySelector('.' + ITEM).id, true).length) {\n popups.push(elem);\n }\n });\n return popups;\n };\n MenuBase.prototype.isMenuVisible = function () {\n return (this.navIdx.length > 0 || (this.element.classList.contains('e-contextmenu') && isVisible(this.element).valueOf()));\n };\n MenuBase.prototype.canOpen = function (target) {\n var canOpen = true;\n if (this.filter) {\n canOpen = false;\n var filter = this.filter.split(' ');\n for (var i = 0, len = filter.length; i < len; i++) {\n if (closest(target, '.' + filter[i])) {\n canOpen = true;\n break;\n }\n }\n }\n return canOpen;\n };\n MenuBase.prototype.openMenu = function (li, item, top, left, e, target) {\n var _this = this;\n if (top === void 0) { top = 0; }\n if (left === void 0) { left = 0; }\n if (e === void 0) { e = null; }\n if (target === void 0) { target = this.targetElement; }\n var wrapper = this.getWrapper();\n this.lItem = li;\n var elemId = this.element.id !== '' ? this.element.id : 'menu';\n this.isMenusClosed = false;\n if (isNullOrUndefined(top)) {\n top = -1;\n }\n if (isNullOrUndefined(left)) {\n left = -1;\n }\n if (li) {\n this.uList = this.createItems(item[this.getField('children', this.navIdx.length - 1)]);\n if (!this.isMenu && Browser.isDevice) {\n wrapper.lastChild.style.display = 'none';\n var data = {\n text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'\n };\n var hdata = new MenuItem(this.items[0], 'items', data, true);\n var hli = this.createItems([hdata]).children[0];\n hli.classList.add(HEADER);\n this.uList.insertBefore(hli, this.uList.children[0]);\n }\n if (this.isMenu) {\n this.popupWrapper = this.createElement('div', {\n className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'\n });\n if (this.hamburgerMode) {\n top = li.offsetHeight;\n li.appendChild(this.popupWrapper);\n }\n else {\n document.body.appendChild(this.popupWrapper);\n }\n this.isNestedOrVertical = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;\n this.popupObj = this.generatePopup(this.popupWrapper, this.uList, li, this.isNestedOrVertical);\n if (this.template) {\n this.renderReactTemplates();\n }\n if (this.hamburgerMode) {\n this.calculateIndentSize(this.uList, li);\n }\n else {\n if (this.cssClass) {\n addClass([this.popupWrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n this.popupObj.hide();\n }\n if (!this.hamburgerMode && !this.showItemOnClick && this.hoverDelay) {\n window.clearInterval(this.timer);\n this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, 0, 0, 'menu'); }, this.hoverDelay);\n }\n else {\n this.triggerBeforeOpen(li, this.uList, item, e, 0, 0, 'menu');\n }\n }\n else {\n this.uList.style.zIndex = this.element.style.zIndex;\n wrapper.appendChild(this.uList);\n if (!this.showItemOnClick && this.hoverDelay) {\n window.clearInterval(this.timer);\n this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, top, left, 'none'); }, this.hoverDelay);\n }\n else {\n this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');\n }\n }\n }\n else {\n this.uList = this.element;\n this.uList.style.zIndex = getZindexPartial(target ? target : this.element).toString();\n if (isNullOrUndefined(e)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var ev = document.createEvent('MouseEvents');\n ev.initEvent('click', true, false);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var targetEvent = this.copyObject(ev, {});\n targetEvent.target = targetEvent.srcElement = target;\n targetEvent.currentTarget = target;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.triggerBeforeOpen(li, this.uList, item, targetEvent, top, left, 'none');\n }\n else {\n this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n MenuBase.prototype.copyObject = function (source, destination) {\n // eslint-disable-next-line guard-for-in\n for (var prop in source) {\n destination[\"\" + prop] = source[\"\" + prop];\n }\n return destination;\n };\n MenuBase.prototype.calculateIndentSize = function (ul, li) {\n var liStyle = getComputedStyle(li);\n var liIndent = parseInt(liStyle.textIndent, 10);\n if (this.navIdx.length < 2 && !li.classList.contains('e-blankicon')) {\n liIndent *= 2;\n }\n else {\n liIndent += (liIndent / 4);\n }\n ul.style.textIndent = liIndent + 'px';\n var blankIconElem = ul.querySelectorAll('.e-blankicon');\n if (blankIconElem && blankIconElem.length) {\n var menuIconElem = ul.querySelector('.e-menu-icon');\n var menuIconElemStyle = getComputedStyle(menuIconElem);\n var blankIconIndent = (parseInt(menuIconElemStyle.marginRight, 10) + menuIconElem.offsetWidth + liIndent);\n for (var i = 0; i < blankIconElem.length; i++) {\n blankIconElem[i].style.textIndent = blankIconIndent + 'px';\n }\n }\n };\n MenuBase.prototype.generatePopup = function (popupWrapper, ul, li, isNestedOrVertical) {\n var _this = this;\n var popupObj = new Popup(popupWrapper, {\n actionOnScroll: this.hamburgerMode ? 'none' : 'reposition',\n relateTo: li,\n collision: this.hamburgerMode ? { X: 'none', Y: 'none' } : { X: isNestedOrVertical ||\n this.enableRtl ? 'none' : 'flip', Y: 'fit' },\n position: (isNestedOrVertical && !this.hamburgerMode) ? { X: 'right', Y: 'top' } : { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n enableRtl: this.enableRtl,\n content: ul,\n open: function () {\n var scrollEle = select('.e-menu-vscroll', popupObj.element);\n if (scrollEle) {\n scrollEle.style.height = 'inherit';\n scrollEle.style.maxHeight = '';\n }\n var ul = select('.e-ul', popupObj.element);\n popupObj.element.style.maxHeight = '';\n ul.focus();\n _this.triggerOpen(ul);\n }\n });\n return popupObj;\n };\n MenuBase.prototype.createHeaderContainer = function (wrapper) {\n wrapper = wrapper || this.getWrapper();\n var spanElem = this.createElement('span', { className: 'e-' + this.getModuleName() + '-header' });\n var tempTitle = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.title) : this.title;\n var spanTitle = this.createElement('span', {\n className: 'e-' + this.getModuleName() + '-title', innerHTML: tempTitle\n });\n var spanIcon = this.createElement('span', {\n className: 'e-icons e-' + this.getModuleName() + '-icon', attrs: { 'tabindex': '0' }\n });\n spanElem.appendChild(spanTitle);\n spanElem.appendChild(spanIcon);\n wrapper.insertBefore(spanElem, this.element);\n };\n MenuBase.prototype.openHamburgerMenu = function (e) {\n if (this.hamburgerMode) {\n this.triggerBeforeOpen(null, this.element, null, e, 0, 0, 'hamburger');\n }\n };\n MenuBase.prototype.closeHamburgerMenu = function (e) {\n var _this = this;\n var beforeCloseArgs = { element: this.element, parentItem: null, event: e,\n items: this.items, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedHamburgerCloseArgs) {\n if (!observedHamburgerCloseArgs.cancel) {\n _this.closeMenu(null, e);\n _this.element.classList.add('e-hide-menu');\n _this.trigger('onClose', { element: _this.element, parentItem: null, items: _this.items });\n }\n });\n };\n MenuBase.prototype.callFit = function (element, x, y, top, left) {\n return fit(element, null, { X: x, Y: y }, { top: top, left: left });\n };\n MenuBase.prototype.triggerBeforeOpen = function (li, ul, item, e, top, left, type) {\n var _this = this;\n var items = li ? item[this.getField('children', this.navIdx.length - 1)] : this.items;\n var eventArgs = {\n element: ul, items: items, parentItem: item, event: e, cancel: false, top: top, left: left, showSubMenuOn: 'Auto'\n };\n var menuType = type;\n this.trigger('beforeOpen', eventArgs, function (observedOpenArgs) {\n switch (menuType) {\n case 'menu':\n if (!_this.hamburgerMode) {\n if (observedOpenArgs.showSubMenuOn !== 'Auto') {\n _this.showItemOnClick = !_this.defaultOption;\n _this.showSubMenuOn = observedOpenArgs.showSubMenuOn;\n }\n _this.top = observedOpenArgs.top;\n _this.left = observedOpenArgs.left;\n }\n _this.popupWrapper.style.display = 'block';\n if (!_this.hamburgerMode) {\n _this.popupWrapper.style.maxHeight = _this.popupWrapper.getBoundingClientRect().height + 'px';\n if (_this.enableScrolling) {\n addScrolling(_this.createElement, _this.popupWrapper, _this.uList, 'vscroll', _this.enableRtl);\n }\n _this.checkScrollOffset(e);\n }\n if (!_this.hamburgerMode && !_this.left && !_this.top) {\n _this.popupObj.refreshPosition(_this.lItem, true);\n _this.left = parseInt(_this.popupWrapper.style.left, 10);\n _this.top = parseInt(_this.popupWrapper.style.top, 10);\n if (_this.enableRtl) {\n _this.left =\n _this.isNestedOrVertical ? _this.left - _this.popupWrapper.offsetWidth - _this.lItem.parentElement.offsetWidth + 2\n : _this.left - _this.popupWrapper.offsetWidth + _this.lItem.offsetWidth;\n }\n // eslint-disable-next-line\n if (_this.template && (_this.isReact || _this.isAngular)) {\n requestAnimationFrame(function () {\n _this.collision();\n _this.popupWrapper.style.display = '';\n });\n }\n else {\n _this.collision();\n _this.popupWrapper.style.display = '';\n }\n }\n else {\n _this.popupObj.collision = { X: 'none', Y: 'none' };\n _this.popupWrapper.style.display = '';\n }\n break;\n case 'none':\n _this.top = observedOpenArgs.top;\n _this.left = observedOpenArgs.left;\n _this.isContextMenuClosed = true;\n break;\n case 'hamburger':\n if (!observedOpenArgs.cancel) {\n _this.element.classList.remove('e-hide-menu');\n _this.triggerOpen(_this.element);\n }\n break;\n }\n if (menuType !== 'hamburger') {\n if (observedOpenArgs.cancel) {\n if (_this.isMenu) {\n _this.popupObj.destroy();\n detach(_this.popupWrapper);\n }\n else if (ul.className.indexOf('e-ul') > -1) {\n detach(ul);\n }\n _this.navIdx.pop();\n }\n else {\n if (_this.isMenu) {\n if (_this.hamburgerMode) {\n _this.popupWrapper.style.top = _this.top + 'px';\n _this.popupWrapper.style.left = 0 + 'px';\n _this.toggleAnimation(_this.popupWrapper);\n }\n else {\n _this.setBlankIconStyle(_this.popupWrapper);\n _this.wireKeyboardEvent(_this.popupWrapper);\n rippleEffect(_this.popupWrapper, { selector: '.' + ITEM });\n _this.popupWrapper.style.left = _this.left + 'px';\n _this.popupWrapper.style.top = _this.top + 'px';\n var animationOptions = _this.animationSettings.effect !== 'None' ? {\n name: _this.animationSettings.effect, duration: _this.animationSettings.duration,\n timingFunction: _this.animationSettings.easing\n } : null;\n _this.popupObj.show(animationOptions, _this.lItem);\n }\n }\n else {\n _this.setBlankIconStyle(_this.uList);\n _this.setPosition(_this.lItem, _this.uList, _this.top, _this.left);\n _this.toggleAnimation(_this.uList);\n }\n }\n }\n if (_this.keyType === 'right') {\n var cul = _this.getUlByNavIdx();\n li.classList.remove(FOCUSED);\n if (_this.isMenu && _this.navIdx.length === 1) {\n _this.removeLIStateByClass([SELECTED], [_this.getWrapper()]);\n }\n li.classList.add(SELECTED);\n if (_this.action === ENTER) {\n var eventArgs_1 = { element: li, item: item, event: e };\n _this.trigger('select', eventArgs_1);\n }\n li.focus();\n cul = _this.getUlByNavIdx();\n var index = _this.isValidLI(cul.children[0], 0, _this.action);\n cul.children[index].classList.add(FOCUSED);\n cul.children[index].focus();\n }\n });\n };\n MenuBase.prototype.collision = function () {\n var collide;\n collide = isCollide(this.popupWrapper, null, this.left, this.top);\n if ((this.isNestedOrVertical || this.enableRtl) && (collide.indexOf('right') > -1\n || collide.indexOf('left') > -1)) {\n this.popupObj.collision.X = 'none';\n var offWidth = closest(this.lItem, '.e-' + this.getModuleName() + '-wrapper').offsetWidth;\n this.left =\n this.enableRtl ? calculatePosition(this.lItem, this.isNestedOrVertical ? 'right' : 'left', 'top').left\n : this.left - this.popupWrapper.offsetWidth - offWidth + 2;\n }\n collide = isCollide(this.popupWrapper, null, this.left, this.top);\n if (collide.indexOf('left') > -1 || collide.indexOf('right') > -1) {\n this.left = this.callFit(this.popupWrapper, true, false, this.top, this.left).left;\n }\n this.popupWrapper.style.left = this.left + 'px';\n };\n MenuBase.prototype.setBlankIconStyle = function (menu) {\n var blankIconList = [].slice.call(menu.getElementsByClassName('e-blankicon'));\n if (!blankIconList.length) {\n return;\n }\n var iconLi = menu.querySelector('.e-menu-item:not(.e-blankicon):not(.e-separator)');\n if (!iconLi) {\n return;\n }\n var icon = iconLi.querySelector('.e-menu-icon');\n if (!icon) {\n return;\n }\n var cssProp = this.enableRtl ? { padding: 'paddingRight', margin: 'marginLeft' } :\n { padding: 'paddingLeft', margin: 'marginRight' };\n var iconCssProps = getComputedStyle(icon);\n var iconSize = parseInt(iconCssProps.fontSize, 10);\n if (!!parseInt(iconCssProps.width, 10) && parseInt(iconCssProps.width, 10) > iconSize) {\n iconSize = parseInt(iconCssProps.width, 10);\n }\n // eslint:disable\n var size = iconSize + parseInt(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n iconCssProps[cssProp.margin], 10) + parseInt(getComputedStyle(iconLi)[cssProp.padding], 10) + \"px\";\n blankIconList.forEach(function (li) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n li.style[cssProp.padding] = size;\n });\n // eslint:enable\n };\n MenuBase.prototype.checkScrollOffset = function (e) {\n var wrapper = this.getWrapper();\n if (wrapper.children[0].classList.contains('e-menu-hscroll') && this.navIdx.length === 1) {\n var trgt = isNullOrUndefined(e) ? this.element : closest(e.target, '.' + ITEM);\n var offsetEle = select('.e-hscroll-bar', wrapper);\n if (offsetEle.scrollLeft > trgt.offsetLeft) {\n offsetEle.scrollLeft -= (offsetEle.scrollLeft - trgt.offsetLeft);\n }\n var offsetLeft = offsetEle.scrollLeft + offsetEle.offsetWidth;\n var offsetRight = trgt.offsetLeft + trgt.offsetWidth;\n if (offsetLeft < offsetRight) {\n offsetEle.scrollLeft += (offsetRight - offsetLeft);\n }\n }\n };\n MenuBase.prototype.setPosition = function (li, ul, top, left) {\n var px = 'px';\n this.toggleVisiblity(ul);\n if (ul === this.element || (left > -1 && top > -1)) {\n var collide = isCollide(ul, null, left, top);\n if (collide.indexOf('right') > -1) {\n left = left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n var offset = this.callFit(ul, false, true, top, left);\n top = offset.top - 20;\n if (top < 0) {\n var newTop = (pageYOffset + document.documentElement.clientHeight) - ul.getBoundingClientRect().height;\n if (newTop > -1) {\n top = newTop;\n }\n }\n }\n collide = isCollide(ul, null, left, top);\n if (collide.indexOf('left') > -1) {\n var offset = this.callFit(ul, true, false, top, left);\n left = offset.left;\n }\n }\n else {\n if (Browser.isDevice) {\n top = Number(this.element.style.top.replace(px, ''));\n left = Number(this.element.style.left.replace(px, ''));\n }\n else {\n var x = this.enableRtl ? 'left' : 'right';\n var offset = calculatePosition(li, x, 'top');\n top = offset.top;\n left = offset.left;\n var collide = isCollide(ul, null, this.enableRtl ? left - ul.offsetWidth : left, top);\n var xCollision = collide.indexOf('left') > -1 || collide.indexOf('right') > -1;\n if (xCollision) {\n offset = calculatePosition(li, this.enableRtl ? 'right' : 'left', 'top');\n left = offset.left;\n }\n if (this.enableRtl || xCollision) {\n left = (this.enableRtl && xCollision) ? left : left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n offset = this.callFit(ul, false, true, top, left);\n top = offset.top;\n }\n }\n }\n this.toggleVisiblity(ul, false);\n ul.style.top = top + px;\n ul.style.left = left + px;\n };\n MenuBase.prototype.toggleVisiblity = function (ul, isVisible) {\n if (isVisible === void 0) { isVisible = true; }\n ul.style.visibility = isVisible ? 'hidden' : '';\n ul.style.display = isVisible ? 'block' : 'none';\n };\n MenuBase.prototype.createItems = function (items) {\n var _this = this;\n var level = this.navIdx ? this.navIdx.length : 0;\n var fields = this.getFields(level);\n var showIcon = this.hasField(items, this.getField('iconCss', level));\n var listBaseOptions = {\n showIcon: showIcon,\n moduleName: 'menu',\n fields: fields,\n template: this.template,\n itemNavigable: true,\n itemCreating: function (args) {\n if (!args.curData[args.fields[fields.id]]) {\n args.curData[args.fields[fields.id]] = getUniqueID('menuitem');\n }\n if (isNullOrUndefined(args.curData.htmlAttributes)) {\n args.curData.htmlAttributes = {};\n }\n if (Browser.isIE) {\n args.curData.htmlAttributes.role = 'menuitem';\n args.curData.htmlAttributes.tabindex = '-1';\n }\n else {\n Object.assign(args.curData.htmlAttributes, { role: 'menuitem', tabindex: '-1' });\n }\n if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {\n args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?\n args.curData[args.fields.text] : args.curData[args.fields.id];\n }\n if (args.curData[args.fields[fields.iconCss]] === '') {\n args.curData[args.fields[fields.iconCss]] = null;\n }\n },\n itemCreated: function (args) {\n if (args.curData[_this.getField('separator', level)]) {\n args.item.classList.add(SEPARATOR);\n args.item.setAttribute('role', 'separator');\n }\n if (showIcon && !args.curData[args.fields.iconCss]\n && !args.curData[_this.getField('separator', level)]) {\n args.item.classList.add('e-blankicon');\n }\n if (args.curData[args.fields.child]\n && args.curData[args.fields.child].length) {\n var span = _this.createElement('span', { className: ICONS + ' ' + CARET });\n args.item.appendChild(span);\n args.item.setAttribute('aria-haspopup', 'true');\n args.item.setAttribute('aria-expanded', 'false');\n args.item.classList.add('e-menu-caret-icon');\n }\n if (_this.isMenu && _this.template) {\n args.item.setAttribute('id', args.curData[args.fields.id].toString());\n args.item.removeAttribute('data-uid');\n if (args.item.classList.contains('e-level-1')) {\n args.item.classList.remove('e-level-1');\n }\n if (args.item.classList.contains('e-has-child')) {\n args.item.classList.remove('e-has-child');\n }\n args.item.removeAttribute('aria-level');\n }\n var eventArgs = { item: args.curData, element: args.item };\n _this.trigger('beforeItemRender', eventArgs);\n }\n };\n this.setProperties({ 'items': this.items }, true);\n if (this.isMenu) {\n listBaseOptions.templateID = this.element.id + TEMPLATE_PROPERTY;\n }\n var ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template, this);\n ul.setAttribute('tabindex', '0');\n if (this.isMenu) {\n ul.setAttribute('role', 'menu');\n }\n else {\n ul.setAttribute('role', 'menubar');\n }\n return ul;\n };\n MenuBase.prototype.moverHandler = function (e) {\n var trgt = e.target;\n this.liTrgt = trgt;\n if (!this.isMenu) {\n this.isCmenuHover = true;\n }\n var cli = this.getLI(trgt);\n var wrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : this.getWrapper();\n var hdrWrapper = this.getWrapper();\n var regex = new RegExp('-ej2menu-(.*)-popup');\n var ulId;\n var isDifferentElem = false;\n if (!wrapper) {\n return;\n }\n if (wrapper.id !== '') {\n ulId = regex.exec(wrapper.id)[1];\n }\n else {\n ulId = wrapper.querySelector('ul').id;\n }\n if (ulId !== this.element.id) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [this.getWrapper()]);\n if (this.navIdx.length) {\n isDifferentElem = true;\n }\n else {\n return;\n }\n }\n if (cli && closest(cli, '.e-' + this.getModuleName() + '-wrapper') && !isDifferentElem) {\n this.removeLIStateByClass([FOCUSED], this.isMenu ? [wrapper].concat(this.getPopups()) : [wrapper]);\n this.removeLIStateByClass([FOCUSED], this.isMenu ? [hdrWrapper].concat(this.getPopups()) : [hdrWrapper]);\n cli.classList.add(FOCUSED);\n if (!this.showItemOnClick) {\n this.clickHandler(e);\n }\n }\n else if (this.isMenu && this.showItemOnClick && !isDifferentElem) {\n this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));\n }\n if (this.isMenu) {\n if (!this.showItemOnClick && (trgt.parentElement !== wrapper && !closest(trgt, '.e-' + this.getModuleName() + '-popup'))\n && (!cli || (cli && !this.getIndex(cli.id, true).length)) && this.showSubMenuOn !== 'Hover') {\n this.removeLIStateByClass([FOCUSED], [wrapper]);\n if (this.navIdx.length) {\n this.isClosed = true;\n this.closeMenu(null, e);\n }\n }\n else if (isDifferentElem && !this.showItemOnClick) {\n if (this.navIdx.length) {\n this.isClosed = true;\n this.closeMenu(null, e);\n }\n }\n if (!this.isClosed) {\n this.removeStateWrapper();\n }\n this.isClosed = false;\n }\n if (!this.isMenu) {\n this.isCmenuHover = false;\n }\n };\n MenuBase.prototype.removeStateWrapper = function () {\n if (this.liTrgt) {\n var wrapper = closest(this.liTrgt, '.e-menu-vscroll');\n if (this.liTrgt.tagName === 'DIV' && wrapper) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);\n }\n }\n };\n MenuBase.prototype.removeLIStateByClass = function (classList, element) {\n var li;\n var _loop_1 = function (i) {\n classList.forEach(function (className) {\n li = select('.' + className, element[i]);\n if (li) {\n li.classList.remove(className);\n }\n });\n };\n for (var i = 0; i < element.length; i++) {\n _loop_1(i);\n }\n };\n MenuBase.prototype.getField = function (propName, level) {\n if (level === void 0) { level = 0; }\n var fieldName = this.fields[\"\" + propName];\n return typeof fieldName === 'string' ? fieldName :\n (!fieldName[level] ? fieldName[fieldName.length - 1].toString()\n : fieldName[level].toString());\n };\n MenuBase.prototype.getFields = function (level) {\n if (level === void 0) { level = 0; }\n return {\n id: this.getField('itemId', level),\n iconCss: this.getField('iconCss', level),\n text: this.getField('text', level),\n url: this.getField('url', level),\n child: this.getField('children', level),\n separator: this.getField('separator', level)\n };\n };\n MenuBase.prototype.hasField = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][\"\" + field]) {\n return true;\n }\n }\n return false;\n };\n MenuBase.prototype.menuHeaderClickHandler = function (e) {\n var menuWrapper = closest(e.target, '.e-menu-wrapper');\n if (menuWrapper && menuWrapper.querySelector('ul.e-menu-parent').id !== this.element.id) {\n return;\n }\n if (this.element.className.indexOf('e-hide-menu') > -1) {\n this.openHamburgerMenu(e);\n }\n else {\n this.closeHamburgerMenu(e);\n }\n };\n MenuBase.prototype.clickHandler = function (e) {\n this.isTapHold = this.isTapHold ? false : this.isTapHold;\n var wrapper = this.getWrapper();\n var trgt = e.target;\n var cli = this.cli = this.getLI(trgt);\n var regex = new RegExp('-ej2menu-(.*)-popup');\n var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;\n var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0\n : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);\n if (Browser.isDevice && this.isMenu) {\n this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));\n this.mouseDownHandler(e);\n }\n if (cli && cliWrapper && this.isMenu) {\n var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;\n if (this.element.id !== cliWrapperId) {\n return;\n }\n }\n if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {\n this.setLISelected(cli);\n var navIdx = this.getIndex(cli.id, true);\n var item = this.getItem(navIdx);\n var eventArgs = { element: cli, item: item, event: e };\n this.trigger('select', eventArgs);\n }\n if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {\n var ul = void 0;\n if (cli.classList.contains(HEADER)) {\n ul = wrapper.children[this.navIdx.length - 1];\n this.toggleAnimation(ul);\n var sli = this.getLIByClass(ul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n detach(cli.parentNode);\n this.navIdx.pop();\n }\n else {\n if (!cli.classList.contains(SEPARATOR)) {\n this.showSubMenu = true;\n var cul = cli.parentNode;\n if (isNullOrUndefined(cul)) {\n return;\n }\n this.cliIdx = this.getIdx(cul, cli);\n if (this.isMenu || !Browser.isDevice) {\n var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))\n : this.getIdx(wrapper, cul);\n if (this.navIdx[culIdx] === this.cliIdx) {\n this.showSubMenu = false;\n }\n if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n this.isClosed = true;\n this.keyType = 'click';\n if (this.showItemOnClick) {\n this.setLISelected(cli);\n if (!this.isMenu) {\n this.isCmenuHover = true;\n }\n }\n this.closeMenu(culIdx + 1, e);\n if (this.showItemOnClick) {\n this.setLISelected(cli);\n if (!this.isMenu) {\n this.isCmenuHover = false;\n }\n }\n }\n }\n if (!this.isClosed) {\n this.afterCloseMenu(e);\n }\n this.isClosed = false;\n }\n }\n }\n else {\n if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {\n var popupEle = closest(trgt, '.' + POPUP);\n var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;\n if (cIdx < this.navIdx.length) {\n this.closeMenu(cIdx + 1, e);\n if (popupEle) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);\n }\n }\n }\n else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'\n && trgt.classList.contains('e-menu-icon')) {\n this.menuHeaderClickHandler(e);\n }\n else {\n if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&\n !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {\n if (!cli) {\n this.removeLIStateByClass([SELECTED], [wrapper]);\n }\n if (!this.isAnimationNone && !cli || (cli && !cli.querySelector('.' + CARET))) {\n if (navigator.platform.toUpperCase().indexOf('MAC') < 0 || (navigator.platform.toUpperCase().indexOf('MAC') >= 0 && !e.ctrlKey)) {\n this.closeMenu(null, e);\n }\n }\n }\n }\n }\n };\n MenuBase.prototype.afterCloseMenu = function (e) {\n if (isNullOrUndefined(e)) {\n return;\n }\n var isHeader;\n if (this.showSubMenu) {\n if (this.showItemOnClick && this.navIdx.length === 0) {\n isHeader = closest(e.target, '.e-menu-parent.e-control');\n }\n else {\n isHeader = closest(this.element, '.e-menu-parent.e-control');\n }\n var idx = this.navIdx.concat(this.cliIdx);\n var item = this.getItem(idx);\n if (item && item[this.getField('children', idx.length - 1)] &&\n item[this.getField('children', idx.length - 1)].length) {\n if (e.type === 'mouseover' || (Browser.isDevice && this.isMenu)) {\n this.setLISelected(this.cli);\n }\n if ((!this.hamburgerMode && isHeader) || (this.hamburgerMode && this.cli.getAttribute('aria-expanded') === 'false')) {\n this.cli.setAttribute('aria-expanded', 'true');\n this.navIdx.push(this.cliIdx);\n this.openMenu(this.cli, item, null, null, e);\n }\n }\n else {\n if (e.type !== 'mouseover') {\n this.closeMenu(null, e);\n }\n }\n if (!isHeader) {\n var cul = this.getUlByNavIdx();\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.setAttribute('aria-expanded', 'false');\n sli.classList.remove(SELECTED);\n }\n }\n }\n this.keyType = '';\n };\n MenuBase.prototype.setLISelected = function (li) {\n var sli = this.getLIByClass(li.parentElement, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n if (!this.isMenu) {\n li.classList.remove(FOCUSED);\n }\n li.classList.add(SELECTED);\n };\n MenuBase.prototype.getLIByClass = function (ul, classname) {\n if (ul && ul.children) {\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains(classname)) {\n return ul.children[i];\n }\n }\n }\n return null;\n };\n /**\n * This method is used to get the index of the menu item in the Menu based on the argument.\n *\n * @param {MenuItem | string} item - item be passed to get the index | id to be passed to get the item index.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.getItemIndex = function (item, isUniqueId) {\n var idx;\n if (typeof item === 'string') {\n idx = item;\n }\n else {\n idx = item.id;\n }\n var isText = (isUniqueId === false) ? false : true;\n var navIdx = this.getIndex(idx, isText);\n return navIdx;\n };\n /**\n * This method is used to set the menu item in the Menu based on the argument.\n *\n * @param {MenuItem} item - item need to be updated.\n * @param {string} id - id / text to be passed to update the item.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.setItem = function (item, id, isUniqueId) {\n var idx;\n if (isUniqueId) {\n idx = id ? id : item.id;\n }\n else {\n idx = id ? id : item.text;\n }\n var navIdx = this.getIndex(idx, isUniqueId);\n var newItem = this.getItem(navIdx);\n Object.assign(newItem, item);\n };\n MenuBase.prototype.getItem = function (navIdx) {\n navIdx = navIdx.slice();\n var idx = navIdx.pop();\n var items = this.getItems(navIdx);\n return items[idx];\n };\n MenuBase.prototype.getItems = function (navIdx) {\n var items = this.items;\n for (var i = 0; i < navIdx.length; i++) {\n items = items[navIdx[i]][this.getField('children', i)];\n }\n return items;\n };\n MenuBase.prototype.setItems = function (newItems, navIdx) {\n var items = this.getItems(navIdx);\n items.splice(0, items.length);\n for (var i = 0; i < newItems.length; i++) {\n items.splice(i, 0, newItems[i]);\n }\n };\n MenuBase.prototype.getIdx = function (ul, li, skipHdr) {\n if (skipHdr === void 0) { skipHdr = true; }\n var idx = Array.prototype.indexOf.call(ul.children, li);\n if (skipHdr && ul.children[0].classList.contains(HEADER)) {\n idx--;\n }\n return idx;\n };\n MenuBase.prototype.getLI = function (elem) {\n if (elem.tagName === 'LI' && elem.classList.contains('e-menu-item')) {\n return elem;\n }\n return closest(elem, 'li.e-menu-item');\n };\n MenuBase.prototype.updateItemsByNavIdx = function () {\n var items = this.items;\n var count = 0;\n for (var index = 0; index < this.navIdx.length; index++) {\n items = items[index].items;\n if (!items) {\n break;\n }\n count++;\n var ul = this.getUlByNavIdx(count);\n if (!ul) {\n break;\n }\n this.updateItem(ul, items);\n }\n };\n MenuBase.prototype.removeChildElement = function (elem) {\n while (elem.firstElementChild) {\n elem.removeChild(elem.firstElementChild);\n }\n return elem;\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @private\n * @param {MenuBaseModel} newProp - Specifies the new properties\n * @param {MenuBaseModel} oldProp - Specifies the old properties\n * @returns {void}\n */\n MenuBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n var wrapper = this.getWrapper();\n var _loop_2 = function (prop) {\n switch (prop) {\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 (this_1.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'showItemOnClick':\n this_1.unWireEvents();\n this_1.showItemOnClick = newProp.showItemOnClick;\n this_1.wireEvents();\n break;\n case 'enableScrolling':\n if (newProp.enableScrolling) {\n var ul_2;\n if (this_1.element.classList.contains('e-vertical')) {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'vscroll', this_1.enableRtl);\n }\n else {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'hscroll', this_1.enableRtl);\n }\n this_1.getPopups().forEach(function (wrapper) {\n ul_2 = select('.e-ul', wrapper);\n addScrolling(_this.createElement, wrapper, ul_2, 'vscroll', _this.enableRtl);\n });\n }\n else {\n var ul_3 = wrapper.children[0];\n if (this_1.element.classList.contains('e-vertical')) {\n destroyScroll(getInstance(ul_3, VScroll), ul_3);\n }\n else {\n destroyScroll(getInstance(ul_3, HScroll), ul_3);\n }\n wrapper.style.overflow = '';\n wrapper.appendChild(this_1.element);\n this_1.getPopups().forEach(function (wrapper) {\n ul_3 = wrapper.children[0];\n destroyScroll(getInstance(ul_3, VScroll), ul_3);\n wrapper.style.overflow = '';\n });\n }\n break;\n case 'items': {\n var idx = void 0;\n var navIdx = void 0;\n var item = void 0;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this_1.isReact && this_1.template) {\n this_1.clearTemplate(['template']);\n }\n if (!Object.keys(oldProp.items).length) {\n this_1.updateItem(this_1.element, this_1.items);\n if (this_1.enableScrolling && this_1.element.parentElement.classList.contains('e-custom-scroll')) {\n if (this_1.element.classList.contains('e-vertical')) {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'vscroll', this_1.enableRtl);\n }\n else {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'hscroll', this_1.enableRtl);\n }\n }\n if (!this_1.hamburgerMode) {\n for (var i = 1, count = wrapper.childElementCount; i < count; i++) {\n detach(wrapper.lastElementChild);\n }\n }\n this_1.navIdx = [];\n }\n else {\n var keys = Object.keys(newProp.items);\n for (var i = 0; i < keys.length; i++) {\n navIdx = this_1.getChangedItemIndex(newProp, [], Number(keys[i]));\n if (navIdx.length <= this_1.getWrapper().children.length) {\n idx = navIdx.pop();\n item = this_1.getItems(navIdx);\n this_1.insertAfter([item[idx]], item[idx].text);\n this_1.removeItem(item, navIdx, idx);\n this_1.setItems(item, navIdx);\n }\n navIdx.length = 0;\n }\n }\n break;\n }\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n _loop_2(prop);\n }\n };\n MenuBase.prototype.updateItem = function (ul, items) {\n if (isBlazor() && !this.isMenu) {\n ul = this.removeChildElement(ul);\n }\n else {\n if (this.enableScrolling) {\n var wrapper1 = this.getWrapper();\n var ul1 = wrapper1.children[0];\n if (this.element.classList.contains('e-vertical')) {\n destroyScroll(getInstance(ul1, VScroll), ul1);\n }\n else {\n destroyScroll(getInstance(ul1, HScroll), ul1);\n }\n }\n ul.innerHTML = '';\n }\n var lis = [].slice.call(this.createItems(items).children);\n lis.forEach(function (li) {\n ul.appendChild(li);\n });\n };\n MenuBase.prototype.getChangedItemIndex = function (newProp, index, idx) {\n index.push(idx);\n var key = Object.keys(newProp.items[idx]).pop();\n if (key === 'items') {\n var item = newProp.items[idx];\n var popStr = Object.keys(item.items).pop();\n if (popStr) {\n this.getChangedItemIndex(item, index, Number(popStr));\n }\n }\n else {\n if (key === 'isParentArray' && index.length > 1) {\n index.pop();\n }\n }\n return index;\n };\n MenuBase.prototype.removeItem = function (item, navIdx, idx) {\n item.splice(idx, 1);\n var uls = this.getWrapper().children;\n if (navIdx.length < uls.length) {\n detach(uls[navIdx.length].children[idx]);\n }\n };\n /**\n * Used to unwire the bind events.\n *\n * @private\n * @param {string} targetSelctor - Specifies the target selector\n * @returns {void}\n */\n MenuBase.prototype.unWireEvents = function (targetSelctor) {\n if (targetSelctor === void 0) { targetSelctor = this.target; }\n var wrapper = this.getWrapper();\n if (targetSelctor) {\n var target = void 0;\n var touchModule = void 0;\n var targetElems = selectAll(targetSelctor);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (this.isMenu) {\n EventHandler.remove(target, 'click', this.menuHeaderClickHandler);\n }\n else {\n if (Browser.isIos) {\n touchModule = getInstance(target, Touch);\n if (touchModule) {\n touchModule.destroy();\n }\n }\n else {\n EventHandler.remove(target, 'contextmenu', this.cmenuHandler);\n }\n }\n }\n if (!this.isMenu) {\n EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollHandler);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);\n EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);\n if (!this.isMenu && !this.target) {\n EventHandler.remove(document, 'scroll', this.scrollHandler);\n }\n }\n EventHandler.remove(document, 'click', this.delegateClickHandler);\n this.unWireKeyboardEvent(wrapper);\n this.rippleFn();\n };\n MenuBase.prototype.unWireKeyboardEvent = function (element) {\n var keyboardModule = getInstance(element, KeyboardEvents);\n if (keyboardModule) {\n keyboardModule.destroy();\n }\n };\n MenuBase.prototype.toggleAnimation = function (ul, isMenuOpen) {\n var _this = this;\n if (isMenuOpen === void 0) { isMenuOpen = true; }\n var pUlHeight;\n var pElement;\n if (this.animationSettings.effect === 'None' || !isMenuOpen) {\n if (this.hamburgerMode && ul) {\n ul.style.top = '0px';\n }\n this.isAnimationNone = this.animationSettings.effect === 'None';\n this.end(ul, isMenuOpen);\n }\n else {\n this.animation.animate(ul, {\n name: this.animationSettings.effect,\n duration: this.animationSettings.duration,\n timingFunction: this.animationSettings.easing,\n begin: function (options) {\n if (_this.hamburgerMode) {\n pElement = options.element.parentElement;\n options.element.style.position = 'absolute';\n if (pElement) {\n pUlHeight = pElement.offsetHeight;\n }\n options.element.style.maxHeight = options.element.offsetHeight + 'px';\n if (pElement) {\n pElement.style.maxHeight = '';\n }\n }\n else {\n options.element.style.display = 'block';\n options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';\n }\n },\n progress: function (options) {\n if (_this.hamburgerMode && pElement) {\n pElement.style.minHeight = (pUlHeight + options.element.offsetHeight) + 'px';\n }\n },\n end: function (options) {\n if (_this.hamburgerMode) {\n options.element.style.position = '';\n options.element.style.maxHeight = '';\n if (pElement) {\n pElement.style.minHeight = '';\n }\n options.element.style.top = 0 + 'px';\n options.element.children[0].focus();\n _this.triggerOpen(options.element.children[0]);\n }\n else {\n _this.end(options.element, isMenuOpen);\n }\n }\n });\n }\n };\n MenuBase.prototype.triggerOpen = function (ul) {\n var item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n var eventArgs = {\n element: ul, parentItem: item, items: item ? item.items : this.items\n };\n this.trigger('onOpen', eventArgs);\n if (!this.isMenu) {\n EventHandler.add(ul, 'keydown', this.keyHandler, this);\n }\n };\n MenuBase.prototype.end = function (ul, isMenuOpen) {\n if (isMenuOpen && (this.isMenu || (!this.isMenu && this.isContextMenuClosed))) {\n if (this.isMenu || !Browser.isDevice) {\n ul.style.display = 'block';\n }\n ul.style.maxHeight = '';\n this.triggerOpen(ul);\n if (ul.querySelector('.' + FOCUSED)) {\n ul.querySelector('.' + FOCUSED).focus();\n }\n else {\n var ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];\n if (this.currentTarget) {\n if (!(this.currentTarget.classList.contains('e-numerictextbox') || this.currentTarget.classList.contains('e-textbox') || this.currentTarget.tagName === 'INPUT')) {\n if (ele) {\n ele.querySelector('.' + SELECTED).focus();\n }\n else {\n this.element.focus();\n }\n }\n }\n else {\n if (ele) {\n ele.querySelector('.' + SELECTED).focus();\n }\n else {\n this.element.focus();\n }\n }\n }\n }\n else {\n if (ul === this.element) {\n var fli = this.getLIByClass(this.element, FOCUSED);\n if (fli) {\n fli.classList.remove(FOCUSED);\n }\n var sli = this.getLIByClass(this.element, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n ul.style.display = 'none';\n this.isAnimationNone = false;\n }\n else {\n detach(ul);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n MenuBase.prototype.getPersistData = function () {\n return '';\n };\n /**\n * Get wrapper element.\n *\n * @returns {Element} - Wrapper element\n * @private\n */\n MenuBase.prototype.getWrapper = function () {\n return closest(this.element, '.e-' + this.getModuleName() + '-wrapper');\n };\n MenuBase.prototype.getIndex = function (data, isUniqueId, items, nIndex, isCallBack, level) {\n if (items === void 0) { items = this.items; }\n if (nIndex === void 0) { nIndex = []; }\n if (isCallBack === void 0) { isCallBack = false; }\n if (level === void 0) { level = 0; }\n var item;\n level = isCallBack ? level + 1 : 0;\n for (var i = 0, len = items.length; i < len; i++) {\n item = items[i];\n if ((isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)]) === data) {\n nIndex.push(i);\n break;\n }\n else if (item[this.getField('children', level)]\n && item[this.getField('children', level)].length) {\n nIndex = this.getIndex(data, isUniqueId, item[this.getField('children', level)], nIndex, true, level);\n if (nIndex[nIndex.length - 1] === -1) {\n if (i !== len - 1) {\n nIndex.pop();\n }\n }\n else {\n nIndex.unshift(i);\n break;\n }\n }\n else {\n if (i === len - 1) {\n nIndex.push(-1);\n }\n }\n }\n return (!isCallBack && nIndex[0] === -1) ? [] : nIndex;\n };\n /**\n * This method is used to enable or disable the menu items in the Menu based on the items and enable argument.\n *\n * @param {string[]} items - Text items that needs to be enabled/disabled.\n * @param {boolean} enable - Set `true`/`false` to enable/disable the list items.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.enableItems = function (items, enable, isUniqueId) {\n if (enable === void 0) { enable = true; }\n var ul;\n var idx;\n var navIdx;\n var disabled = DISABLED;\n var skipItem;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n if (this.navIdx.length) {\n if (navIdx.length !== 1) {\n skipItem = false;\n for (var i_1 = 0, len = navIdx.length - 1; i_1 < len; i_1++) {\n if (navIdx[i_1] !== this.navIdx[i_1]) {\n skipItem = true;\n break;\n }\n }\n if (skipItem) {\n continue;\n }\n }\n }\n else {\n if (navIdx.length !== 1) {\n continue;\n }\n }\n idx = navIdx.pop();\n ul = this.getUlByNavIdx(navIdx.length);\n if (ul && !isNullOrUndefined(idx)) {\n if (enable) {\n if (this.isMenu) {\n ul.children[idx].classList.remove(disabled);\n ul.children[idx].removeAttribute('aria-disabled');\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.remove(disabled);\n }\n else {\n ul.children[idx].classList.remove(disabled);\n }\n }\n }\n else {\n if (this.isMenu) {\n ul.children[idx].classList.add(disabled);\n ul.children[idx].setAttribute('aria-disabled', 'true');\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.add(disabled);\n }\n else {\n ul.children[idx].classList.add(disabled);\n }\n }\n }\n }\n }\n };\n /**\n * This method is used to show the menu items in the Menu based on the items text.\n *\n * @param {string[]} items - Text items that needs to be shown.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.showItems = function (items, isUniqueId) {\n this.showHideItems(items, false, isUniqueId);\n };\n /**\n * This method is used to hide the menu items in the Menu based on the items text.\n *\n * @param {string[]} items - Text items that needs to be hidden.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.hideItems = function (items, isUniqueId) {\n this.showHideItems(items, true, isUniqueId);\n };\n MenuBase.prototype.showHideItems = function (items, ishide, isUniqueId) {\n var ul;\n var index;\n var navIdx;\n var item;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n index = navIdx.pop();\n ul = this.getUlByNavIdx(navIdx.length);\n item = this.getItems(navIdx);\n if (ul) {\n var validUl = isUniqueId ? ul.children[index].id : item[index].text.toString();\n if (ishide && validUl === items[i]) {\n ul.children[index].classList.add(HIDE);\n }\n else if (!ishide && validUl === items[i]) {\n ul.children[index].classList.remove(HIDE);\n }\n }\n }\n };\n /**\n * It is used to remove the menu items from the Menu based on the items text.\n *\n * @param {string[]} items Text items that needs to be removed.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.removeItems = function (items, isUniqueId) {\n var idx;\n var navIdx;\n var iitems;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n if (!isNullOrUndefined(idx)) {\n this.removeItem(iitems, navIdx, idx);\n }\n }\n };\n /**\n * It is used to insert the menu items after the specified menu item text.\n *\n * @param {MenuItemModel[]} items - Items that needs to be inserted.\n * @param {string} text - Text item after that the element to be inserted.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.insertAfter = function (items, text, isUniqueId) {\n this.insertItems(items, text, isUniqueId);\n };\n /**\n * It is used to insert the menu items before the specified menu item text.\n *\n * @param {MenuItemModel[]} items - Items that needs to be inserted.\n * @param {string} text - Text item before that the element to be inserted.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.insertBefore = function (items, text, isUniqueId) {\n this.insertItems(items, text, isUniqueId, false);\n };\n MenuBase.prototype.insertItems = function (items, text, isUniqueId, isAfter) {\n if (isAfter === void 0) { isAfter = true; }\n var li;\n var idx;\n var navIdx;\n var iitems;\n var menuitem;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(text, isUniqueId);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n menuitem = new MenuItem(iitems[0], 'items', items[i], true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n menuitem.parentObj = iitems[0].parentObj;\n iitems.splice(isAfter ? idx + 1 : idx, 0, menuitem);\n var uls = this.isMenu ? [this.getWrapper()].concat(this.getPopups()) : [].slice.call(this.getWrapper().children);\n if (!isNullOrUndefined(idx) && navIdx.length < uls.length) {\n idx = isAfter ? idx + 1 : idx;\n li = this.createItems(iitems).children[idx];\n var ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];\n ul.insertBefore(li, ul.children[idx]);\n if (i === items.length - 1 && !this.isMenu && ul.style.display === 'block') {\n this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));\n ul.style.display = 'block';\n }\n }\n }\n };\n MenuBase.prototype.removeAttributes = function () {\n var _this = this;\n ['top', 'left', 'display', 'z-index'].forEach(function (key) {\n _this.element.style.removeProperty(key);\n });\n ['role', 'tabindex', 'class', 'style'].forEach(function (key) {\n if (key === 'class' && _this.element.classList.contains('e-menu-parent')) {\n _this.element.classList.remove('e-menu-parent');\n }\n if (['class', 'style'].indexOf(key) === -1 || !_this.element.getAttribute(key)) {\n _this.element.removeAttribute(key);\n }\n if (_this.isMenu && key === 'class' && _this.element.classList.contains('e-vertical')) {\n _this.element.classList.remove('e-vertical');\n }\n });\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n MenuBase.prototype.destroy = function () {\n var wrapper = this.getWrapper();\n if (wrapper) {\n this.unWireEvents();\n if (!this.isMenu) {\n this.clonedElement.style.display = '';\n if (this.clonedElement.tagName === 'EJS-CONTEXTMENU') {\n addClass([this.clonedElement], ['e-control', 'e-lib', 'e-' + this.getModuleName()]);\n this.element = this.clonedElement;\n }\n else {\n if (this.refreshing && this.clonedElement.childElementCount && this.clonedElement.children[0].tagName === 'LI') {\n this.setProperties({ 'items': [] }, true);\n }\n if (document.getElementById(this.clonedElement.id)) {\n var refEle = this.clonedElement.nextElementSibling;\n if (refEle && refEle !== wrapper) {\n this.clonedElement.parentElement.insertBefore(this.element, refEle);\n }\n else {\n this.clonedElement.parentElement.appendChild(this.element);\n }\n if (isBlazor() && !this.isMenu) {\n this.element = this.removeChildElement(this.element);\n }\n else {\n this.element.innerHTML = '';\n }\n append([].slice.call(this.clonedElement.children), this.element);\n detach(this.clonedElement);\n this.removeAttributes();\n }\n }\n this.clonedElement = null;\n }\n else {\n this.closeMenu();\n if (isBlazor() && !this.isMenu) {\n this.element = this.removeChildElement(this.element);\n }\n else {\n this.element.innerHTML = '';\n }\n this.removeAttributes();\n wrapper.parentNode.insertBefore(this.element, wrapper);\n this.clonedElement = null;\n }\n detach(wrapper);\n _super.prototype.destroy.call(this);\n if (this.template) {\n this.clearTemplate(['template']);\n }\n }\n this.rippleFn = null;\n };\n __decorate$2([\n Event()\n ], MenuBase.prototype, \"beforeItemRender\", void 0);\n __decorate$2([\n Event()\n ], MenuBase.prototype, \"beforeOpen\", void 0);\n __decorate$2([\n Event()\n ], MenuBase.prototype, \"onOpen\", void 0);\n __decorate$2([\n Event()\n ], MenuBase.prototype, \"beforeClose\", void 0);\n __decorate$2([\n Event()\n ], MenuBase.prototype, \"onClose\", void 0);\n __decorate$2([\n Event()\n ], MenuBase.prototype, \"select\", void 0);\n __decorate$2([\n Event()\n ], MenuBase.prototype, \"created\", void 0);\n __decorate$2([\n Property('')\n ], MenuBase.prototype, \"cssClass\", void 0);\n __decorate$2([\n Property(0)\n ], MenuBase.prototype, \"hoverDelay\", void 0);\n __decorate$2([\n Property(false)\n ], MenuBase.prototype, \"showItemOnClick\", void 0);\n __decorate$2([\n Property('')\n ], MenuBase.prototype, \"target\", void 0);\n __decorate$2([\n Property('')\n ], MenuBase.prototype, \"filter\", void 0);\n __decorate$2([\n Property(null)\n ], MenuBase.prototype, \"template\", void 0);\n __decorate$2([\n Property(false)\n ], MenuBase.prototype, \"enableScrolling\", void 0);\n __decorate$2([\n Property(true)\n ], MenuBase.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$2([\n Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)\n ], MenuBase.prototype, \"fields\", void 0);\n __decorate$2([\n Collection([], MenuItem)\n ], MenuBase.prototype, \"items\", void 0);\n __decorate$2([\n Complex({ duration: 400, easing: 'ease', effect: 'SlideDown' }, MenuAnimationSettings)\n ], MenuBase.prototype, \"animationSettings\", void 0);\n MenuBase = __decorate$2([\n NotifyPropertyChanges\n ], MenuBase);\n return MenuBase;\n}(Component));\n\nvar __extends$3 = (undefined && undefined.__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$3 = (undefined && undefined.__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};\nvar CLS_VERTICAL = 'e-vertical';\nvar CLS_ITEMS = 'e-toolbar-items';\nvar CLS_ITEM = 'e-toolbar-item';\nvar CLS_RTL$2 = 'e-rtl';\nvar CLS_SEPARATOR = 'e-separator';\nvar CLS_POPUPICON = 'e-popup-up-icon';\nvar CLS_POPUPDOWN = 'e-popup-down-icon';\nvar CLS_POPUPOPEN = 'e-popup-open';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_DISABLE$2 = 'e-overlay';\nvar CLS_POPUPTEXT = 'e-toolbar-text';\nvar CLS_TBARTEXT = 'e-popup-text';\nvar CLS_TBAROVERFLOW = 'e-overflow-show';\nvar CLS_POPOVERFLOW = 'e-overflow-hide';\nvar CLS_TBARBTN = 'e-tbar-btn';\nvar CLS_TBARNAV = 'e-hor-nav';\nvar CLS_TBARSCRLNAV = 'e-scroll-nav';\nvar CLS_TBARRIGHT = 'e-toolbar-right';\nvar CLS_TBARLEFT = 'e-toolbar-left';\nvar CLS_TBARCENTER = 'e-toolbar-center';\nvar CLS_TBARPOS = 'e-tbar-pos';\nvar CLS_HSCROLLCNT = 'e-hscroll-content';\nvar CLS_VSCROLLCNT = 'e-vscroll-content';\nvar CLS_HSCROLLBAR$1 = 'e-hscroll-bar';\nvar CLS_POPUPNAV = 'e-hor-nav';\nvar CLS_POPUPCLASS = 'e-toolbar-pop';\nvar CLS_POPUP = 'e-toolbar-popup';\nvar CLS_TBARBTNTEXT = 'e-tbar-btn-text';\nvar CLS_TBARNAVACT = 'e-nav-active';\nvar CLS_TBARIGNORE = 'e-ignore';\nvar CLS_POPPRI = 'e-popup-alone';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_MULTIROW = 'e-toolbar-multirow';\nvar CLS_MULTIROWPOS = 'e-multirow-pos';\nvar CLS_MULTIROW_SEPARATOR = 'e-multirow-separator';\nvar CLS_EXTENDABLE_SEPARATOR = 'e-extended-separator';\nvar CLS_EXTEANDABLE_TOOLBAR = 'e-extended-toolbar';\nvar CLS_EXTENDABLECLASS = 'e-toolbar-extended';\nvar CLS_EXTENDPOPUP = 'e-expended-nav';\nvar CLS_EXTENDEDPOPOPEN = 'e-tbar-extended';\n/**\n * An item object that is used to configure Toolbar commands.\n */\nvar Item = /** @__PURE__ @class */ (function (_super) {\n __extends$3(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$3([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate$3([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate$3([\n Property('auto')\n ], Item.prototype, \"width\", void 0);\n __decorate$3([\n Property('')\n ], Item.prototype, \"cssClass\", void 0);\n __decorate$3([\n Property(false)\n ], Item.prototype, \"showAlwaysInPopup\", void 0);\n __decorate$3([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n __decorate$3([\n Property('')\n ], Item.prototype, \"prefixIcon\", void 0);\n __decorate$3([\n Property('')\n ], Item.prototype, \"suffixIcon\", void 0);\n __decorate$3([\n Property(true)\n ], Item.prototype, \"visible\", void 0);\n __decorate$3([\n Property('None')\n ], Item.prototype, \"overflow\", void 0);\n __decorate$3([\n Property('')\n ], Item.prototype, \"template\", void 0);\n __decorate$3([\n Property('Button')\n ], Item.prototype, \"type\", void 0);\n __decorate$3([\n Property('Both')\n ], Item.prototype, \"showTextOn\", void 0);\n __decorate$3([\n Property(null)\n ], Item.prototype, \"htmlAttributes\", void 0);\n __decorate$3([\n Property('')\n ], Item.prototype, \"tooltipText\", void 0);\n __decorate$3([\n Property('Left')\n ], Item.prototype, \"align\", void 0);\n __decorate$3([\n Event()\n ], Item.prototype, \"click\", void 0);\n __decorate$3([\n Property(-1)\n ], Item.prototype, \"tabIndex\", void 0);\n return Item;\n}(ChildProperty));\n/**\n * The Toolbar control contains a group of commands that are aligned horizontally.\n * ```html\n *
\n * \n * ```\n */\nvar Toolbar = /** @__PURE__ @class */ (function (_super) {\n __extends$3(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n *\n * @param {ToolbarModel} options - Specifies Toolbar model properties as options.\n * @param { string | HTMLElement} element - Specifies the element that is rendered as a Toolbar.\n */\n function Toolbar(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.resizeContext = _this.resize.bind(_this);\n _this.orientationChangeContext = _this.orientationChange.bind(_this);\n /**\n * Contains the keyboard configuration of the Toolbar.\n */\n _this.keyConfigs = {\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n popupOpen: 'enter',\n popupClose: 'escape',\n tab: 'tab',\n home: 'home',\n end: 'end'\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n var btnItems = this.element.querySelectorAll('.e-control.e-btn');\n [].slice.call(btnItems).forEach(function (el) {\n if (!isNullOrUndefined(el) && !isNullOrUndefined(el.ej2_instances) && !isNullOrUndefined(el.ej2_instances[0]) && !(el.ej2_instances[0].isDestroyed)) {\n el.ej2_instances[0].destroy();\n }\n });\n this.unwireEvents();\n this.tempId.forEach(function (ele) {\n if (!isNullOrUndefined(_this.element.querySelector(ele))) {\n document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';\n }\n });\n this.destroyItems();\n while (this.element.lastElementChild) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n this.trgtEle = null;\n this.ctrlTem = null;\n }\n if (this.popObj) {\n this.popObj.destroy();\n detach(this.popObj.element);\n }\n if (this.activeEle) {\n this.activeEle = null;\n }\n this.popObj = null;\n this.tbarAlign = null;\n this.tbarItemsCol = [];\n this.remove(this.element, 'e-toolpop');\n if (this.cssClass) {\n removeClass([this.element], this.cssClass.split(' '));\n }\n this.element.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n _super.prototype.destroy.call(this);\n };\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n Toolbar.prototype.preRender = function () {\n var eventArgs = { enableCollision: this.enableCollision, scrollStep: this.scrollStep };\n this.trigger('beforeCreate', eventArgs);\n this.enableCollision = eventArgs.enableCollision;\n this.scrollStep = eventArgs.scrollStep;\n this.scrollModule = null;\n this.popObj = null;\n this.tempId = [];\n this.tbarItemsCol = this.items;\n this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;\n this.isExtendedOpen = false;\n this.popupPriCount = 0;\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL$2);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resizeContext);\n window.addEventListener('orientationchange', this.orientationChangeContext);\n if (this.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n };\n Toolbar.prototype.wireKeyboardEvent = function () {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.updateTabIndex('0');\n };\n Toolbar.prototype.updateTabIndex = function (tabIndex) {\n var ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n if (!isNullOrUndefined(ele) && !isNullOrUndefined(ele.firstElementChild)) {\n var dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');\n if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {\n ele.firstElementChild.setAttribute('tabindex', tabIndex);\n }\n }\n };\n Toolbar.prototype.unwireKeyboardEvent = function () {\n if (this.keyModule) {\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n this.keyModule.destroy();\n this.keyModule = null;\n }\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n var popCheck = !isNullOrUndefined(this.popObj) && isVisible(this.popObj.element) && this.overflowMode !== 'Extended';\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && popCheck) {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyScroll();\n this.unwireKeyboardEvent();\n window.removeEventListener('resize', this.resizeContext);\n window.removeEventListener('orientationchange', this.orientationChangeContext);\n document.removeEventListener('scroll', this.clickEvent);\n document.removeEventListener('click', this.scrollEvent);\n this.scrollEvent = null;\n this.clickEvent = null;\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n };\n Toolbar.prototype.destroyScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n if (this.element) {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });\n }\n if (this.tbarAlign) {\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL$2);\n this.destroyScroll();\n }\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n this.remove(this.element, CLS_EXTEANDABLE_TOOLBAR);\n var tempEle = this.element.querySelector('.e-toolbar-multirow');\n if (tempEle) {\n this.remove(tempEle, CLS_MULTIROW);\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n }\n else {\n clst = closest(trgt, '.' + CLS_ITEM);\n }\n return clst;\n };\n Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {\n var popObj = this.popObj;\n var rootEle = this.element;\n var popAnimate = { name: 'FadeOut', duration: 100 };\n var value = e.action === 'moveUp' ? 'previous' : 'next';\n var ele;\n var nodes;\n switch (e.action) {\n case 'moveRight':\n if (this.isVertical) {\n return;\n }\n if (rootEle === trgt) {\n this.elementFocus(clst);\n }\n else if (!navChk) {\n this.eleFocus(clst, 'next');\n }\n break;\n case 'moveLeft':\n if (this.isVertical) {\n return;\n }\n if (!navChk) {\n this.eleFocus(clst, 'previous');\n }\n break;\n case 'home':\n case 'end':\n if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {\n popupCheck = e.action === 'end' ? extendedPopup : null;\n }\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n if (!this.isVertical) {\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst)) {\n popEle.lastElementChild.firstChild.focus();\n }\n else if (value === 'next' && popEle.lastElementChild === clst) {\n popFrstEle.firstChild.focus();\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n }\n else {\n if (e.action === 'moveUp') {\n this.eleFocus(clst, 'previous');\n }\n else {\n this.eleFocus(clst, 'next');\n }\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n }\n }\n break;\n case 'popupClose':\n if (popObj && this.overflowMode !== 'Extended') {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE$2)) {\n return;\n }\n e.preventDefault();\n var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n var clst = this.clstElement(tbrNavChk, trgt);\n if (clst || tbarScrollChk) {\n this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);\n }\n };\n /**\n * Specifies the value to disable/enable the Toolbar component.\n * When set to `true`, the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n Toolbar.prototype.disable = function (value) {\n var rootEle = this.element;\n if (value) {\n rootEle.classList.add(CLS_DISABLE$2);\n }\n else {\n rootEle.classList.remove(CLS_DISABLE$2);\n }\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', this.activeEle.getAttribute('data-tabindex'));\n }\n if (this.scrollModule) {\n this.scrollModule.disable(value);\n }\n if (this.popObj) {\n if (isVisible(this.popObj.element) && this.overflowMode !== 'Extended') {\n this.popObj.hide();\n }\n rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');\n }\n };\n Toolbar.prototype.eleContains = function (el) {\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);\n };\n Toolbar.prototype.focusFirstVisibleEle = function (nodes) {\n var element;\n var index = 0;\n while (index < nodes.length) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {\n return ele;\n }\n index++;\n }\n return element;\n };\n Toolbar.prototype.focusLastVisibleEle = function (nodes) {\n var element;\n var index = nodes.length - 1;\n while (index >= 0) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {\n return ele;\n }\n index--;\n }\n return element;\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n if (sib) {\n var skipEle = this.eleContains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNullOrUndefined(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNullOrUndefined(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n else if (!isNullOrUndefined(closest)) {\n var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE$2 + ')' + ':not(.' + CLS_HIDDEN + ')');\n if (pos === 'next' && tbrItems) {\n this.elementFocus(tbrItems[0]);\n }\n else if (pos === 'previous' && tbrItems) {\n this.elementFocus(tbrItems[tbrItems.length - 1]);\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var ele = this.element;\n var isPopupElement = !isNullOrUndefined(closest(trgt, '.' + CLS_POPUPCLASS));\n var clsList = trgt.classList;\n var popupNav = closest(trgt, ('.' + CLS_TBARNAV));\n if (!popupNav) {\n popupNav = trgt;\n }\n if (!ele.children[0].classList.contains('e-hscroll') && !ele.children[0].classList.contains('e-vscroll')\n && (clsList.contains(CLS_TBARNAV))) {\n clsList = trgt.querySelector('.e-icons').classList;\n }\n if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {\n this.popupClickHandler(ele, popupNav, CLS_RTL$2);\n }\n var itemObj;\n var clst = closest(e.target, '.' + CLS_ITEM);\n if ((isNullOrUndefined(clst) || clst.classList.contains(CLS_DISABLE$2)) && !popupNav.classList.contains(CLS_TBARNAV)) {\n return;\n }\n if (clst) {\n var tempItem = this.items[this.tbarEle.indexOf(clst)];\n itemObj = tempItem;\n }\n var eventArgs = { originalEvent: e, item: itemObj };\n var isClickBinded = itemObj && !isNullOrUndefined(itemObj.click) && typeof itemObj.click == 'object' ?\n !isNullOrUndefined(itemObj.click.observers) && itemObj.click.observers.length > 0 :\n !isNullOrUndefined(itemObj) && !isNullOrUndefined(itemObj.click);\n if (isClickBinded) {\n this.trigger('items[' + this.tbarEle.indexOf(clst) + '].click', eventArgs);\n }\n if (!eventArgs.cancel) {\n this.trigger('clicked', eventArgs, function (clickedArgs) {\n if (!isNullOrUndefined(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&\n clickedArgs.item && clickedArgs.item.type !== 'Input') {\n _this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n });\n }\n };\n Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {\n var popObj = this.popObj;\n if (isVisible(popObj.element)) {\n popupNav.classList.remove(CLS_TBARNAVACT);\n popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n else {\n if (ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = true;\n popObj.position = { X: 'left', Y: 'top' };\n }\n if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = false;\n popObj.position = { X: 'right', Y: 'top' };\n }\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '0px';\n popObj.width = this.getToolbarPopupWidth(this.element);\n }\n popObj.dataBind();\n popObj.refreshPosition();\n popObj.element.style.top = this.getElementOffsetY() + 'px';\n popupNav.classList.add(CLS_TBARNAVACT);\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n };\n Toolbar.prototype.getToolbarPopupWidth = function (ele) {\n var eleStyles = window.getComputedStyle(ele);\n return parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n Toolbar.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.clickEvent = this.docEvent.bind(this);\n this.scrollEvent = this.docEvent.bind(this);\n this.renderComplete();\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n _this.refreshOverflow();\n });\n }\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {\n setStyleAttribute(this.element, { 'height': height });\n }\n setStyleAttribute(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false',\n 'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'\n };\n attributes(this.element, ariaAttr);\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Toolbar.prototype.renderControl = function () {\n var ele = this.element;\n this.trgtEle = (ele.children.length > 0) ? ele.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderLayout();\n };\n Toolbar.prototype.renderLayout = function () {\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n this.separator();\n };\n Toolbar.prototype.itemsAlign = function (items, itemEleDom) {\n var innerItem;\n var innerPos;\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n for (var i = 0; i < items.length; i++) {\n innerItem = this.renderSubComponent(items[parseInt(i.toString(), 10)], i);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[parseInt(i.toString(), 10)], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());\n if (innerPos) {\n if (!(items[parseInt(i.toString(), 10)].showAlwaysInPopup && items[parseInt(i.toString(), 10)].overflow !== 'Show')) {\n this.tbarAlgEle[(items[parseInt(i.toString(), 10)].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n if (this.isReact) {\n var portals = 'portals';\n this.notify('render-react-toolbar-template', this[\"\" + portals]);\n this.renderReactTemplates();\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\n Toolbar.prototype.changeOrientation = function () {\n var ele = this.element;\n if (this.isVertical) {\n ele.classList.remove(CLS_VERTICAL);\n this.isVertical = false;\n if (this.height === 'auto' || this.height === '100%') {\n ele.style.height = this.height;\n }\n ele.setAttribute('aria-orientation', 'horizontal');\n }\n else {\n ele.classList.add(CLS_VERTICAL);\n this.isVertical = true;\n ele.setAttribute('aria-orientation', 'vertical');\n setStyleAttribute(this.element, { 'height': formatUnit(this.height), 'width': formatUnit(this.width) });\n }\n this.destroyMode();\n this.refreshOverflow();\n };\n Toolbar.prototype.initScroll = function (element, innerItems) {\n if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {\n if (this.tbarAlign) {\n this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');\n }\n if (this.isVertical) {\n this.scrollModule = new VScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n else {\n this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n if (this.cssClass) {\n addClass([innerItems[0]], this.cssClass.split(' '));\n }\n var scrollEle = this.scrollModule.element.querySelector('.' + CLS_HSCROLLBAR$1 + ', .' + 'e-vscroll-bar');\n if (scrollEle) {\n scrollEle.removeAttribute('tabindex');\n }\n this.remove(this.scrollModule.element, CLS_TBARPOS);\n setStyleAttribute(this.element, { overflow: 'hidden' });\n }\n };\n Toolbar.prototype.itemWidthCal = function (items) {\n var _this = this;\n var width = 0;\n var style;\n [].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {\n if (isVisible(el)) {\n style = window.getComputedStyle(el);\n width += _this.isVertical ? el.offsetHeight : el.offsetWidth;\n width += parseFloat(_this.isVertical ? style.marginTop : style.marginRight);\n width += parseFloat(_this.isVertical ? style.marginBottom : style.marginLeft);\n }\n });\n return width;\n };\n Toolbar.prototype.getScrollCntEle = function (innerItem) {\n var trgClass = (this.isVertical) ? '.e-vscroll-content' : '.e-hscroll-content';\n return innerItem.querySelector(trgClass);\n };\n Toolbar.prototype.checkOverflow = function (element, innerItem) {\n if (isNullOrUndefined(element) || isNullOrUndefined(innerItem) || !isVisible(element)) {\n return false;\n }\n var eleWidth = this.isVertical ? element.offsetHeight : element.offsetWidth;\n var itemWidth = this.isVertical ? innerItem.offsetHeight : innerItem.offsetWidth;\n if (this.tbarAlign || this.scrollModule || (eleWidth === itemWidth)) {\n itemWidth = this.itemWidthCal(this.scrollModule ? this.getScrollCntEle(innerItem) : innerItem);\n }\n var popNav = element.querySelector('.' + CLS_TBARNAV);\n var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);\n var navEleWidth = 0;\n if (popNav) {\n navEleWidth = this.isVertical ? popNav.offsetHeight : popNav.offsetWidth;\n }\n else if (scrollNav) {\n navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);\n }\n if (itemWidth > eleWidth - navEleWidth) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Refresh the whole Toolbar component without re-rendering.\n * - It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.\n * - It will refresh the Toolbar component after loading items dynamically.\n *\n * @returns {void}.\n */\n Toolbar.prototype.refreshOverflow = function () {\n this.resize();\n };\n Toolbar.prototype.toolbarAlign = function (innerItems) {\n if (this.tbarAlign) {\n this.add(innerItems, CLS_TBARPOS);\n this.itemPositioning();\n }\n };\n Toolbar.prototype.renderOverflowMode = function () {\n var ele = this.element;\n var innerItems = ele.querySelector('.' + CLS_ITEMS);\n var priorityCheck = this.popupPriCount > 0;\n if (ele && ele.children.length > 0) {\n this.offsetWid = ele.offsetWidth;\n this.remove(this.element, 'e-toolpop');\n if (Browser.info.name === 'msie' && this.height === 'auto') {\n ele.style.height = '';\n }\n switch (this.overflowMode) {\n case 'Scrollable':\n if (isNullOrUndefined(this.scrollModule)) {\n this.initScroll(ele, [].slice.call(ele.getElementsByClassName(CLS_ITEMS)));\n }\n break;\n case 'Popup':\n this.add(this.element, 'e-toolpop');\n if (this.tbarAlign) {\n this.removePositioning();\n }\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n break;\n case 'MultiRow':\n this.add(innerItems, CLS_MULTIROW);\n if (this.checkOverflow(ele, innerItems) && this.tbarAlign) {\n this.removePositioning();\n this.add(innerItems, CLS_MULTIROWPOS);\n }\n if (ele.style.overflow === 'hidden') {\n ele.style.overflow = '';\n }\n if (Browser.info.name === 'msie' || ele.style.height !== 'auto') {\n ele.style.height = 'auto';\n }\n break;\n case 'Extended':\n this.add(this.element, CLS_EXTEANDABLE_TOOLBAR);\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n }\n }\n };\n Toolbar.prototype.setOverflowAttributes = function (ele) {\n this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));\n var ariaAttr = {\n 'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',\n 'aria-label': 'overflow'\n };\n attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);\n var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);\n var eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;\n if (eleInlineItem !== null) {\n if (this.overflowMode === 'MultiRow') {\n eleInlineItem.classList.remove(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleInlineItem.classList.remove(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n for (var i = 0; i <= eleItem.length - 1; i++) {\n if (eleItem[parseInt(i.toString(), 10)].offsetLeft < 30 && eleItem[parseInt(i.toString(), 10)].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[parseInt(i.toString(), 10)].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[parseInt(i.toString(), 10)].classList.add(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var vertical = this.isVertical;\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerNavDom = (vertical ? innerNav.offsetHeight : innerNav.offsetWidth);\n var eleWidth = ((vertical ? ele.offsetHeight : ele.offsetWidth) - (innerNavDom));\n this.element.classList.remove('e-rtl');\n setStyleAttribute(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {\n var element = tbarObj.element;\n var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\n var nodePri = 0;\n poppedEle.forEach(function (el, index) {\n nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {\n if (tbarObj.tbResize && nodes.length > index) {\n ele.insertBefore(el, nodes[parseInt(index.toString(), 10)]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n if (el.classList.contains(CLS_SEPARATOR)) {\n setStyleAttribute(el, { display: '', height: sepHeight + 'px' });\n }\n else {\n setStyleAttribute(el, { display: '', height: eleHeight + 'px' });\n }\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[parseInt(i.toString(), 10)];\n if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {\n setStyleAttribute(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR);\n sepHeight =\n (element.style.height === 'auto' || element.style.height === '') ? null : (sepItem && sepItem.offsetHeight);\n }\n var eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');\n var eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);\n var ele;\n var popupPri = [];\n if (select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element)) {\n ele = select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element);\n }\n else {\n var extendEle = this.createElement('div', {\n id: element.id + '_popup', className: CLS_POPUPCLASS + ' ' + CLS_EXTENDABLECLASS\n });\n var popupEle = this.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });\n ele = this.overflowMode === 'Extended' ? extendEle : popupEle;\n }\n this.pushingPoppedEle(this, popupPri, ele, eleHeight, sepHeight);\n this.popupInit(element, ele);\n };\n Toolbar.prototype.getElementOffsetY = function () {\n return (this.overflowMode === 'Extended' && window.getComputedStyle(this.element).getPropertyValue('box-sizing') === 'border-box' ?\n this.element.clientHeight : this.element.offsetHeight);\n };\n Toolbar.prototype.popupInit = function (element, ele) {\n if (!this.popObj) {\n element.appendChild(ele);\n if (this.cssClass) {\n addClass([ele], this.cssClass.split(' '));\n }\n setStyleAttribute(this.element, { overflow: '' });\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (this.isVertical) ? 0 : this.getElementOffsetY(),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose.bind(this),\n collision: { Y: this.enableCollision ? 'flip' : 'none' },\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n if (this.overflowMode === 'Extended') {\n popup.width = this.getToolbarPopupWidth(this.element);\n popup.offsetX = 0;\n }\n popup.appendTo(ele);\n document.addEventListener('scroll', this.clickEvent);\n document.addEventListener('click', this.scrollEvent);\n if (this.overflowMode !== 'Extended') {\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n }\n if (this.isVertical) {\n popup.element.style.visibility = 'hidden';\n }\n if (this.isExtendedOpen) {\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);\n }\n else {\n popup.hide();\n }\n this.popObj = popup;\n }\n else if (this.overflowMode !== 'Extended') {\n var popupEle = this.popObj.element;\n setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });\n setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.tbarPopupHandler = function (isOpen) {\n if (this.overflowMode === 'Extended') {\n if (isOpen) {\n this.add(this.element, CLS_EXTENDEDPOPOPEN);\n }\n else {\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n if (!this.isVertical) {\n popObj.offsetY = this.getElementOffsetY();\n popObj.dataBind();\n }\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n popupNav.setAttribute('aria-expanded', 'true');\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '';\n }\n else {\n setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n }\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.tbarPopupHandler(true);\n var scrollVal = isNullOrUndefined(window.scrollY) ? 0 : window.scrollY;\n if (!this.isVertical && ((window.innerHeight + scrollVal) < popupElePos) && (this.element.offsetTop < popupEle.offsetHeight)) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[parseInt(i.toString(), 10)];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n if (this.overflowMode !== 'Extended') {\n setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n }\n else if (this.isVertical && this.overflowMode !== 'Extended') {\n var tbEleData = this.element.getBoundingClientRect();\n setStyleAttribute(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });\n }\n if (popObj) {\n var popupOffset = popupEle.getBoundingClientRect();\n if (popupOffset.right > document.documentElement.clientWidth && popupOffset.width > toolEle.getBoundingClientRect().width) {\n popObj.collision = { Y: 'none' };\n popObj.dataBind();\n }\n popObj.refreshPosition();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n popupNav.setAttribute('aria-expanded', 'false');\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n this.tbarPopupHandler(false);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var eleOffset;\n var checkoffset;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = void 0;\n var compuStyle = window.getComputedStyle(inEle[parseInt(i.toString(), 10)]);\n if (this.isVertical) {\n mrgn = parseFloat((compuStyle).marginTop);\n mrgn += parseFloat((compuStyle).marginBottom);\n }\n else {\n mrgn = parseFloat((compuStyle).marginRight);\n mrgn += parseFloat((compuStyle).marginLeft);\n }\n var fstEleCheck = inEle[parseInt(i.toString(), 10)] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight : inEle[parseInt(i.toString(), 10)].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[parseInt(i.toString(), 10)], [CLS_POPPRI]) && popPriority) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetTop + inEle[parseInt(i.toString(), 10)].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetLeft + inEle[parseInt(i.toString(), 10)].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n var sepEle = inEle[parseInt(i.toString(), 10)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n itemPopCount++;\n }\n itemCount++;\n }\n else if (this.overflowMode === 'Popup') {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyleAttribute(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n }\n else {\n itemCount++;\n }\n if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[parseInt(i.toString(), 10)], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyleAttribute(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n className = this.overflowMode === 'Extended' ? className + ' ' + CLS_EXTENDPOPUP : className;\n var nav = this.createElement('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n nav.setAttribute('role', 'button');\n element.appendChild(nav);\n };\n // eslint-disable-next-line max-len\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig, eleStyles) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNullOrUndefined(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNullOrUndefined(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n eleSep.style.display = 'unset';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNullOrUndefined(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n setStyleAttribute(el, eleStyles);\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = 'none';\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var _this = this;\n var ele = this.element;\n var isVer = this.isVertical;\n var innerEle = ele.querySelector('.' + CLS_ITEMS);\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\n if (isNullOrUndefined(popNav)) {\n return;\n }\n innerEle.removeAttribute('style');\n popupEle.style.display = 'block';\n var dimension;\n if (isVer) {\n dimension = ele.offsetHeight - (popNav.offsetHeight + innerEle.offsetHeight);\n }\n else {\n dimension = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);\n }\n var popupEleWidth = 0;\n [].slice.call(popupEle.children).forEach(function (el) {\n popupEleWidth += _this.popupEleWidth(el);\n setStyleAttribute(el, { 'position': '' });\n });\n if ((dimension + (isVer ? popNav.offsetHeight : popNav.offsetWidth)) > (popupEleWidth) && this.popupPriCount === 0) {\n destroy = true;\n }\n this.popupEleRefresh(dimension, popupEle, destroy);\n popupEle.style.display = '';\n if (popupEle.children.length === 0 && popNav && this.popObj) {\n detach(popNav);\n popNav = null;\n this.popObj.destroy();\n detach(this.popObj.element);\n this.popObj = null;\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNullOrUndefined(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNullOrUndefined(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(!this.isVertical ? el.style.minWidth : el.style.minHeight);\n btn.style.minWidth = '';\n btn.style.minHeight = '';\n if (!isNullOrUndefined(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n var inlineStyles = {\n minWidth: el.style.minWidth, height: el.style.height,\n minHeight: el.style.minHeight\n };\n setStyleAttribute(el, { minWidth: '', height: '', minHeight: '' });\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[parseInt(index.toString(), 10)].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n if (this_1.overflowMode !== 'Extended') {\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n }\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount, inlineStyles);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n var checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);\n if (checkOverflow && !destroy) {\n this.renderOverflowMode();\n }\n };\n Toolbar.prototype.removePositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n this.remove(item, CLS_TBARPOS);\n var innerItem = [].slice.call(item.childNodes);\n innerItem[1].removeAttribute('style');\n innerItem[2].removeAttribute('style');\n };\n Toolbar.prototype.refreshPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n this.add(item, CLS_TBARPOS);\n this.itemPositioning();\n };\n Toolbar.prototype.itemPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n var margin;\n if (isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n var innerItem;\n if (this.scrollModule) {\n var trgClass = (this.isVertical) ? CLS_VSCROLLCNT : CLS_HSCROLLCNT;\n innerItem = [].slice.call(item.querySelector('.' + trgClass).children);\n }\n else {\n innerItem = [].slice.call(item.childNodes);\n }\n if (this.isVertical) {\n margin = innerItem[0].offsetHeight + innerItem[2].offsetHeight;\n }\n else {\n margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;\n }\n var tbarWid = this.isVertical ? this.element.offsetHeight : this.element.offsetWidth;\n if (popupNav) {\n tbarWid -= (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth);\n var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';\n innerItem[2].removeAttribute('style');\n if (this.isVertical) {\n if (this.enableRtl) {\n innerItem[2].style.top = popWid;\n }\n else {\n innerItem[2].style.bottom = popWid;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[2].style.left = popWid;\n }\n else {\n innerItem[2].style.right = popWid;\n }\n }\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - (!this.isVertical ? innerItem[1].offsetWidth : innerItem[1].offsetHeight)) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';\n if (this.isVertical) {\n if (this.enableRtl) {\n innerItem[1].style.marginBottom = mrgn;\n }\n else {\n innerItem[1].style.marginTop = mrgn;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[1].style.marginRight = mrgn;\n }\n else {\n innerItem[1].style.marginLeft = mrgn;\n }\n }\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT, attrs: { role: 'group' } }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER, attrs: { role: 'group' } }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT, attrs: { role: 'group' } }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n if (!isNullOrUndefined(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var items = this.items;\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n var itemEleDom = void 0;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (!itemEleDom) {\n itemEleDom = this.createElement('div', { className: CLS_ITEMS });\n }\n this.itemsAlign(items, itemEleDom);\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[parseInt(i.toString(), 10)];\n if (keyVal === 'class') {\n this.add(element, attr[\"\" + keyVal]);\n }\n else {\n element.setAttribute(keyVal, attr[\"\" + keyVal]);\n }\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n *\n * @param {number|HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns {void}.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n var ele;\n if (isNullOrUndefined(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE$2);\n if (!isNullOrUndefined(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\n }\n else {\n ele.classList.add(CLS_DISABLE$2);\n if (!isNullOrUndefined(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'true');\n }\n }\n };\n if (!isNullOrUndefined(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[parseInt(a.toString(), 10)];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNullOrUndefined(ele)) {\n return;\n }\n else {\n elements[parseInt(a.toString(), 10)] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n if (isEnable) {\n removeClass(elements, CLS_DISABLE$2);\n }\n else {\n addClass(elements, CLS_DISABLE$2);\n }\n }\n else {\n if (typeof (elements) === 'number') {\n ele = this.getElementByIndex(elements);\n if (isNullOrUndefined(ele)) {\n return;\n }\n }\n else {\n ele = items;\n }\n enable(isEnable, ele);\n }\n };\n Toolbar.prototype.getElementByIndex = function (index) {\n if (this.tbarEle[parseInt(index.toString(), 10)]) {\n return this.tbarEle[parseInt(index.toString(), 10)];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n *\n * @param {ItemModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns {void}.\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n this.extendedOpen();\n var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);\n if (isNullOrUndefined(itemsDiv)) {\n this.itemsRerender(items);\n return;\n }\n var innerEle;\n var itemAgn = 'Left';\n if (isNullOrUndefined(index)) {\n index = 0;\n }\n items.forEach(function (e) {\n if (!isNullOrUndefined(e.align) && e.align !== 'Left' && itemAgn === 'Left') {\n itemAgn = e.align;\n }\n });\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (isNullOrUndefined(item.type)) {\n item.type = 'Button';\n }\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n item.align = itemAgn;\n innerEle = this.renderSubComponent(item, index);\n if (this.tbarEle.length >= index && innerItems.length >= 0) {\n if (isNullOrUndefined(this.scrollModule)) {\n this.destroyMode();\n }\n var algIndex = item.align[0] === 'L' ? 0 : item.align[0] === 'C' ? 1 : 2;\n var ele = void 0;\n if (!this.tbarAlign && itemAgn !== 'Left') {\n this.tbarItemAlign(item, itemsDiv, 1);\n this.tbarAlign = true;\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];\n ele.insertBefore(innerEle, ele.children[parseInt(index.toString(), 10)]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else if (innerItems.length === 0) {\n innerItems = selectAll('.' + CLS_ITEMS, this.element);\n innerItems[0].appendChild(innerEle);\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[parseInt(index.toString(), 10)]);\n }\n this.items.splice(index, 0, item);\n if (item.template) {\n this.tbarEle.splice(this.tbarEle.length - 1, 1);\n }\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n *\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns {void}.\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[parseInt(index.toString(), 10)] && innerItems[parseInt(index.toString(), 10)]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[parseInt(index.toString(), 10)]);\n if (this.tbarAlign) {\n var indexAgn = this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].indexOf(this.tbarEle[parseInt(eleIdx.toString(), 10)]);\n this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);\n }\n if (this.isReact) {\n this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);\n }\n var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');\n if (!isNullOrUndefined(btnItem) && !isNullOrUndefined(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {\n btnItem.ej2_instances[0].destroy();\n }\n detach(innerItems[parseInt(index.toString(), 10)]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item, index) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n var regEx = new RegExp(/<(?=.*? .*?\\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\\/\\1>/i);\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n try {\n if (typeof (templateProp) === 'object' && !isNullOrUndefined(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (typeof (templateProp) === 'string' && regEx.test(val)) {\n innerEle.innerHTML = val;\n }\n else if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n innerEle.appendChild(ele);\n ele.style.display = '';\n if (!isNullOrUndefined(tempStr)) {\n this.tempId.push(val);\n }\n }\n else {\n templateFn = compile(val);\n }\n }\n catch (e) {\n templateFn = compile(val);\n }\n var tempArray = void 0;\n if (!isNullOrUndefined(templateFn)) {\n var toolbarTemplateID = this.element.id + index + '_template';\n tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate, undefined, undefined, this.root);\n }\n if (!isNullOrUndefined(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNullOrUndefined(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = this.createElement('input');\n if (item.id) {\n ele.id = item.id;\n }\n else {\n ele.id = getUniqueID('tbr-ipt');\n }\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n var firstChild = innerEle.firstElementChild;\n if (!isNullOrUndefined(firstChild)) {\n firstChild.setAttribute('tabindex', isNullOrUndefined(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));\n firstChild.setAttribute('data-tabindex', isNullOrUndefined(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));\n }\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = this.createElement('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n if (item.id) {\n dom.id = item.id;\n }\n else {\n dom.id = getUniqueID('e-tbr-btn');\n }\n var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n var btnObj = new Button({ iconCss: iconCss, iconPosition: iconPos });\n btnObj.createElement = this.createElement;\n btnObj.appendTo(dom);\n if (item.width) {\n setStyleAttribute(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item, index) {\n var dom;\n var innerEle = this.createElement('div', { className: CLS_ITEM });\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer && !isNullOrUndefined(item.tooltipText) ?\n SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText\n });\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', tempDom.textContent);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item, index);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('data-tabindex', isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n dom.setAttribute('aria-disabled', 'false');\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n if (item.disabled) {\n this.add(innerEle, CLS_DISABLE$2);\n }\n if (item.visible === false) {\n this.add(innerEle, CLS_HIDDEN);\n }\n return innerEle;\n };\n Toolbar.prototype.getDataTabindex = function (ele) {\n return isNullOrUndefined(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n var previousEle = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n if (!isNullOrUndefined(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));\n if (previousEle) {\n previousEle.removeAttribute('tabindex');\n }\n previousEle = this.activeEle;\n }\n this.activeEle = curEle;\n if (this.getDataTabindex(this.activeEle) === '-1') {\n if (isNullOrUndefined(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n if (!isNullOrUndefined(this.element.querySelector('.e-hor-nav')) && this.element.querySelector('.e-hor-nav').classList.contains('e-nav-active')) {\n this.updateTabIndex('0');\n var tabindexValue = this.getDataTabindex(previousEle) === '-1' ? '0' : this.getDataTabindex(previousEle);\n previousEle.setAttribute('tabindex', tabindexValue);\n }\n else {\n this.updateTabIndex('-1');\n }\n curEle.removeAttribute('tabindex');\n }\n else {\n var tabIndex = parseInt(this.getDataTabindex(this.activeEle), 10) + 1;\n this.activeEle.setAttribute('tabindex', tabIndex.toString());\n }\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - Returns the module name as string.\n * @private\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n Toolbar.prototype.itemsRerender = function (newProp) {\n this.items = this.tbarItemsCol;\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Toolbar.prototype.resize = function () {\n var ele = this.element;\n this.tbResize = true;\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.overflowMode === 'Popup') {\n this.popObj.hide();\n }\n var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);\n if (!checkOverflow) {\n this.destroyScroll();\n var multirowele = ele.querySelector('.' + CLS_ITEMS);\n if (!isNullOrUndefined(multirowele)) {\n this.remove(multirowele, CLS_MULTIROWPOS);\n if (this.tbarAlign) {\n this.add(multirowele, CLS_TBARPOS);\n }\n }\n }\n if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {\n return;\n }\n if (this.offsetWid > ele.offsetWidth || checkOverflow) {\n this.renderOverflowMode();\n }\n if (this.popObj) {\n if (this.overflowMode === 'Extended') {\n this.popObj.width = this.getToolbarPopupWidth(this.element);\n }\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.popupRefresh(this.popObj.element, false);\n if (this.tbarAlign) {\n this.refreshPositioning();\n }\n }\n if (this.element.querySelector('.' + CLS_HSCROLLBAR$1)) {\n this.scrollStep = this.element.querySelector('.' + CLS_HSCROLLBAR$1).offsetWidth;\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n this.separator();\n };\n Toolbar.prototype.orientationChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.resize();\n }, 500);\n };\n Toolbar.prototype.extendedOpen = function () {\n var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && sib) {\n this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);\n }\n };\n Toolbar.prototype.updateHideEleTabIndex = function (ele, isHidden, isElement, eleIndex, innerItems) {\n if (isElement) {\n eleIndex = innerItems.indexOf(ele);\n }\n var nextEle = innerItems[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n var dataTabIndex = nextEle.firstElementChild.getAttribute('data-tabindex');\n if (isHidden && dataTabIndex === '-1') {\n nextEle.firstElementChild.setAttribute('tabindex', '0');\n }\n else if (dataTabIndex !== nextEle.firstElementChild.getAttribute('tabindex')) {\n nextEle.firstElementChild.setAttribute('tabindex', dataTabIndex);\n }\n break;\n }\n nextEle = innerItems[++eleIndex];\n }\n };\n Toolbar.prototype.clearToolbarTemplate = function (templateEle) {\n if (this.registeredTemplate && this.registeredTemplate[\"\" + 'template']) {\n var registeredTemplates = this.registeredTemplate;\n for (var index = 0; index < registeredTemplates[\"\" + 'template'].length; index++) {\n var registeredItem = registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)].rootNodes[0];\n var closestItem = closest(registeredItem, '.' + CLS_ITEM);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], [registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)]]);\n break;\n }\n }\n }\n else if (this.portals && this.portals.length > 0) {\n var portals = this.portals;\n for (var index = 0; index < portals.length; index++) {\n var portalItem = portals[parseInt(index.toString(), 10)];\n var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], index);\n break;\n }\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n *\n * @param {ToolbarModel} newProp - It contains new value of the data.\n * @param {ToolbarModel} oldProp - It contains old value of the data.\n * @returns {void}\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n this.extendedOpen();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);\n var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];\n var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[\"\" + property];\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n this.trigger('created');\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;\n if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {\n --this.popupPriCount;\n }\n if (isNullOrUndefined(this.scrollModule)) {\n this.destroyMode();\n }\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {\n this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);\n }\n detach(itemCol[parseInt(index.toString(), 10)]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[parseInt(index.toString(), 10)]], index);\n this.items.splice(index, 1);\n if (this.items[parseInt(index.toString(), 10)].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n setStyleAttribute(tEle, { 'width': formatUnit(newProp.width) });\n this.refreshOverflow();\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL$2);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.add(tEle, CLS_RTL$2);\n }\n else {\n this.remove(tEle, CLS_RTL$2);\n }\n if (!isNullOrUndefined(this.scrollModule)) {\n if (newProp.enableRtl) {\n this.add(this.scrollModule.element, CLS_RTL$2);\n }\n else {\n this.remove(this.scrollModule.element, CLS_RTL$2);\n }\n }\n if (!isNullOrUndefined(this.popObj)) {\n if (newProp.enableRtl) {\n this.add(this.popObj.element, CLS_RTL$2);\n }\n else {\n this.remove(this.popObj.element, CLS_RTL$2);\n }\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n case 'scrollStep':\n if (this.scrollModule) {\n this.scrollModule.scrollStep = this.scrollStep;\n }\n break;\n case 'enableCollision':\n if (this.popObj) {\n this.popObj.collision = { Y: this.enableCollision ? 'flip' : 'none' };\n }\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.split(' '));\n }\n break;\n case 'allowKeyboard':\n this.unwireKeyboardEvent();\n if (newProp.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n *\n * @param {number | HTMLElement} index - Index value of target item or DOM element of items to be hidden or shown.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns {void}.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n var isElement = (typeof (index) === 'object') ? true : false;\n var eleIndex = index;\n var ele;\n if (!isElement && isNullOrUndefined(eleIndex)) {\n return;\n }\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[parseInt(eleIndex.toString(), 10)]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[parseInt(eleIndex.toString(), 10)];\n }\n if (ele) {\n if (value) {\n ele.classList.add(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n if (isNullOrUndefined(ele.firstElementChild.getAttribute('tabindex')) ||\n ele.firstElementChild.getAttribute('tabindex') !== '-1') {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\n }\n }\n }\n else {\n ele.classList.remove(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\n }\n }\n this.refreshOverflow();\n }\n };\n __decorate$3([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate$3([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate$3([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate$3([\n Property('')\n ], Toolbar.prototype, \"cssClass\", void 0);\n __decorate$3([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate$3([\n Property()\n ], Toolbar.prototype, \"scrollStep\", void 0);\n __decorate$3([\n Property(true)\n ], Toolbar.prototype, \"enableCollision\", void 0);\n __decorate$3([\n Property(true)\n ], Toolbar.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$3([\n Property(true)\n ], Toolbar.prototype, \"allowKeyboard\", void 0);\n __decorate$3([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate$3([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate$3([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate$3([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate$3([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\n\nvar __extends$4 = (undefined && undefined.__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$4 = (undefined && undefined.__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};\nvar CLS_ACRDN_ROOT = 'e-acrdn-root';\nvar CLS_ROOT$2 = 'e-accordion';\nvar CLS_ITEM$1 = 'e-acrdn-item';\nvar CLS_ITEMFOCUS = 'e-item-focus';\nvar CLS_ITEMHIDE = 'e-hide';\nvar CLS_HEADER = 'e-acrdn-header';\nvar CLS_HEADERICN = 'e-acrdn-header-icon';\nvar CLS_HEADERCTN = 'e-acrdn-header-content';\nvar CLS_CONTENT = 'e-acrdn-panel';\nvar CLS_CTENT = 'e-acrdn-content';\nvar CLS_TOOGLEICN = 'e-toggle-icon';\nvar CLS_COLLAPSEICN = 'e-tgl-collapse-icon e-icons';\nvar CLS_EXPANDICN = 'e-expand-icon';\nvar CLS_RTL$3 = 'e-rtl';\nvar CLS_CTNHIDE = 'e-content-hide';\nvar CLS_SLCT = 'e-select';\nvar CLS_SLCTED = 'e-selected';\nvar CLS_ACTIVE = 'e-active';\nvar CLS_ANIMATE = 'e-animate';\nvar CLS_DISABLE$3 = 'e-overlay';\nvar CLS_TOGANIMATE = 'e-toggle-animation';\nvar CLS_NEST = 'e-nested';\nvar CLS_EXPANDSTATE = 'e-expand-state';\nvar CLS_CONTAINER = 'e-accordion-container';\n/**\n * Objects used for configuring the Accordion expanding item action properties.\n */\nvar AccordionActionSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$4(AccordionActionSettings, _super);\n function AccordionActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$4([\n Property('SlideDown')\n ], AccordionActionSettings.prototype, \"effect\", void 0);\n __decorate$4([\n Property(400)\n ], AccordionActionSettings.prototype, \"duration\", void 0);\n __decorate$4([\n Property('linear')\n ], AccordionActionSettings.prototype, \"easing\", void 0);\n return AccordionActionSettings;\n}(ChildProperty));\n/**\n * Objects used for configuring the Accordion animation properties.\n */\nvar AccordionAnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$4(AccordionAnimationSettings, _super);\n function AccordionAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$4([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"collapse\", void 0);\n __decorate$4([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"expand\", void 0);\n return AccordionAnimationSettings;\n}(ChildProperty));\n/**\n * An item object that is used to configure Accordion items.\n */\nvar AccordionItem = /** @__PURE__ @class */ (function (_super) {\n __extends$4(AccordionItem, _super);\n function AccordionItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$4([\n Property(null)\n ], AccordionItem.prototype, \"content\", void 0);\n __decorate$4([\n Property(null)\n ], AccordionItem.prototype, \"header\", void 0);\n __decorate$4([\n Property(null)\n ], AccordionItem.prototype, \"cssClass\", void 0);\n __decorate$4([\n Property(null)\n ], AccordionItem.prototype, \"iconCss\", void 0);\n __decorate$4([\n Property(false)\n ], AccordionItem.prototype, \"expanded\", void 0);\n __decorate$4([\n Property(true)\n ], AccordionItem.prototype, \"visible\", void 0);\n __decorate$4([\n Property(false)\n ], AccordionItem.prototype, \"disabled\", void 0);\n __decorate$4([\n Property()\n ], AccordionItem.prototype, \"id\", void 0);\n return AccordionItem;\n}(ChildProperty));\n/**\n * The Accordion is a vertically collapsible content panel that displays one or more panels at a time within the available space.\n * ```html\n * \n * \n * ```\n */\nvar Accordion = /** @__PURE__ @class */ (function (_super) {\n __extends$4(Accordion, _super);\n /**\n * Initializes a new instance of the Accordion class.\n *\n * @param {AccordionModel} options - Specifies Accordion model properties as options.\n * @param {string | HTMLElement} element - Specifies the element that is rendered as an Accordion.\n */\n function Accordion(options, element) {\n var _this = _super.call(this, options, element) || this;\n /**\n * Contains the keyboard configuration of the Accordion.\n */\n _this.keyConfigs = {\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n enter: 'enter',\n space: 'space',\n home: 'home',\n end: 'end'\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n Accordion.prototype.destroy = function () {\n if (this.isReact || this.isAngular || this.isVue) {\n this.clearTemplate();\n }\n var ele = this.element;\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n this.isDestroy = true;\n this.restoreContent(null);\n [].slice.call(ele.children).forEach(function (el) {\n ele.removeChild(el);\n });\n if (this.trgtEle) {\n this.trgtEle = null;\n while (this.ctrlTem.firstElementChild) {\n ele.appendChild(this.ctrlTem.firstElementChild);\n }\n this.ctrlTem = null;\n }\n ele.classList.remove(CLS_ACRDN_ROOT);\n ele.removeAttribute('style');\n this.element.removeAttribute('data-ripple');\n if (!this.isNested && isRippleEnabled) {\n this.removeRippleEffect();\n }\n };\n Accordion.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.isNested = false;\n this.templateEle = [];\n if (!this.isDestroy) {\n this.isDestroy = false;\n }\n if (nested && nested.firstElementChild && nested.firstElementChild.firstElementChild) {\n if (nested.firstElementChild.firstElementChild.classList.contains(CLS_ROOT$2)) {\n nested.classList.add(CLS_NEST);\n this.isNested = true;\n }\n }\n else {\n this.element.classList.add(CLS_ACRDN_ROOT);\n }\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL$3);\n }\n };\n Accordion.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Accordion.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n /**\n * To initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n Accordion.prototype.render = function () {\n this.initializeHeaderTemplate();\n this.initializeItemTemplate();\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n };\n Accordion.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n setStyleAttribute(this.element, { 'width': width, 'height': height });\n if (isNullOrUndefined(this.initExpand)) {\n this.initExpand = [];\n }\n if (!isNullOrUndefined(this.expandedIndices) && this.expandedIndices.length > 0) {\n this.initExpand = this.expandedIndices;\n }\n };\n Accordion.prototype.renderControl = function () {\n this.trgtEle = (this.element.children.length > 0) ? select('div', this.element) : null;\n this.renderItems();\n this.initItemExpand();\n };\n Accordion.prototype.wireFocusEvents = function () {\n var acrdItem = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1));\n for (var _i = 0, acrdItem_1 = acrdItem; _i < acrdItem_1.length; _i++) {\n var item = acrdItem_1[_i];\n var headerEle = item.querySelector('.' + CLS_HEADER);\n if (item.childElementCount > 0 && headerEle) {\n EventHandler.clearEvents(headerEle);\n EventHandler.add(headerEle, 'focus', this.focusIn, this);\n EventHandler.add(headerEle, 'blur', this.focusOut, this);\n }\n }\n };\n Accordion.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n if (!isNullOrUndefined(this.keyModule)) {\n this.keyModule.destroy();\n }\n };\n Accordion.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n if (!this.isNested && !this.isDestroy) {\n this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + CLS_HEADER });\n }\n if (!this.isNested) {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n }\n };\n Accordion.prototype.templateParser = function (template) {\n if (template) {\n try {\n if (typeof template !== 'function' && document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n else {\n return compile(template);\n }\n }\n catch (error) {\n return compile(template);\n }\n }\n return undefined;\n };\n Accordion.prototype.initializeHeaderTemplate = function () {\n if (this.headerTemplate) {\n this.headerTemplateFn = this.templateParser(this.headerTemplate);\n }\n };\n Accordion.prototype.initializeItemTemplate = function () {\n if (this.itemTemplate) {\n this.itemTemplateFn = this.templateParser(this.itemTemplate);\n }\n };\n Accordion.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n Accordion.prototype.getItemTemplate = function () {\n return this.itemTemplateFn;\n };\n Accordion.prototype.focusIn = function (e) {\n e.target.parentElement.classList.add(CLS_ITEMFOCUS);\n };\n Accordion.prototype.focusOut = function (e) {\n e.target.parentElement.classList.remove(CLS_ITEMFOCUS);\n };\n Accordion.prototype.ctrlTemplate = function () {\n this.ctrlTem = this.element.cloneNode(true);\n var innerEles;\n var rootEle = select('.' + CLS_CONTAINER, this.element);\n if (rootEle) {\n innerEles = rootEle.children;\n }\n else {\n innerEles = this.element.children;\n }\n var items = [];\n [].slice.call(innerEles).forEach(function (el) {\n items.push({\n header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]) : '',\n content: (el.childElementCount > 1 && el.children[1]) ? (el.children[1]) : ''\n });\n el.parentNode.removeChild(el);\n });\n if (rootEle) {\n this.element.removeChild(rootEle);\n }\n this.setProperties({ items: items }, true);\n };\n Accordion.prototype.toggleIconGenerate = function () {\n var tglIcon = this.createElement('div', { className: CLS_TOOGLEICN });\n var hdrColIcon = this.createElement('span', { className: CLS_COLLAPSEICN });\n tglIcon.appendChild(hdrColIcon);\n return tglIcon;\n };\n Accordion.prototype.initItemExpand = function () {\n var len = this.initExpand.length;\n if (len === 0) {\n return;\n }\n if (this.expandMode === 'Single') {\n this.expandItem(true, this.initExpand[len - 1]);\n }\n else {\n for (var i = 0; i < len; i++) {\n this.expandItem(true, this.initExpand[parseInt(i.toString(), 10)]);\n }\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.renderItems = function () {\n var _this = this;\n var ele = this.element;\n var innerItem;\n var innerDataSourceItem;\n if (!isNullOrUndefined(this.trgtEle)) {\n this.ctrlTemplate();\n }\n if (!isNullOrUndefined(this.dataSource) && this.dataSource.length > 0) {\n this.dataSource.forEach(function (item, index) {\n innerDataSourceItem = _this.renderInnerItem(item, index);\n ele.appendChild(innerDataSourceItem);\n if (innerDataSourceItem.childElementCount > 0) {\n EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n }\n });\n }\n else {\n var items = this.items;\n if (ele && items.length > 0) {\n items.forEach(function (item, index) {\n innerItem = _this.renderInnerItem(item, index);\n ele.appendChild(innerItem);\n if (innerItem.childElementCount > 0) {\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n }\n });\n }\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.clickHandler = function (e) {\n var trgt = e.target;\n var items = this.getItems();\n var eventArgs = {};\n var tglIcon;\n var acrdEle = closest(trgt, '.' + CLS_ROOT$2);\n if (acrdEle !== this.element) {\n return;\n }\n trgt.classList.add('e-target');\n var acrdnItem = closest(trgt, '.' + CLS_ITEM$1);\n var acrdnHdr = closest(trgt, '.' + CLS_HEADER);\n var acrdnCtn = closest(trgt, '.' + CLS_CONTENT);\n if (acrdnItem && (isNullOrUndefined(acrdnHdr) || isNullOrUndefined(acrdnCtn))) {\n acrdnHdr = acrdnItem.children[0];\n acrdnCtn = acrdnItem.children[1];\n }\n if (acrdnHdr) {\n tglIcon = select('.' + CLS_TOOGLEICN, acrdnHdr);\n }\n var acrdnCtnItem;\n if (acrdnHdr) {\n acrdnCtnItem = closest(acrdnHdr, '.' + CLS_ITEM$1);\n }\n else if (acrdnCtn) {\n acrdnCtnItem = closest(acrdnCtn, '.' + CLS_ITEM$1);\n }\n var index = this.getIndexByItem(acrdnItem);\n if (acrdnCtnItem) {\n eventArgs.item = items[this.getIndexByItem(acrdnCtnItem)];\n }\n eventArgs.originalEvent = e;\n var ctnCheck = !isNullOrUndefined(tglIcon) && acrdnItem.childElementCount <= 1;\n if (ctnCheck && (isNullOrUndefined(acrdnCtn) || !isNullOrUndefined(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {\n acrdnItem.appendChild(this.contentRendering(index));\n this.ariaAttrUpdate(acrdnItem);\n this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);\n }\n else {\n this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.afterContentRender = function (trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem) {\n var _this = this;\n var acrdActive = [];\n this.trigger('clicked', eventArgs);\n var cntclkCheck = (acrdnCtn && !isNullOrUndefined(select('.e-target', acrdnCtn)));\n var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT$2;\n var inlineEleAcrdn = acrdnCtn && !isNullOrUndefined(select('.' + CLS_ROOT$2, acrdnCtn)) && isNullOrUndefined(closest(trgt, inlineAcrdnSel));\n var nestContCheck = acrdnCtn && isNullOrUndefined(select('.' + CLS_ROOT$2, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT$2) === this.element);\n cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);\n trgt.classList.remove('e-target');\n if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {\n return;\n }\n var acrdcontainer = this.element.querySelector('.' + CLS_CONTAINER);\n var acrdnchild = (acrdcontainer) ? acrdcontainer.children : this.element.children;\n [].slice.call(acrdnchild).forEach(function (el) {\n if (el.classList.contains(CLS_ACTIVE)) {\n acrdActive.push(el);\n }\n });\n var acrdAniEle = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1 + ' [' + CLS_ANIMATE + ']'));\n if (acrdAniEle.length > 0) {\n for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {\n var el = acrdAniEle_1[_i];\n acrdActive.push(el.parentElement);\n }\n }\n var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';\n var sameHeader = false;\n if (!isNullOrUndefined(acrdnItem) && !isNullOrUndefined(acrdnHdr)) {\n var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);\n var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n if (isNullOrUndefined(acrdnCtn_1)) {\n return;\n }\n sameHeader = (expandState === acrdnItem);\n if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {\n this.collapse(acrdnCtn_1);\n }\n else {\n if ((acrdActive.length > 0) && this.expandMode === 'Single' && !sameContentCheck) {\n acrdActive.forEach(function (el) {\n _this.collapse(select('.' + CLS_CONTENT, el));\n el.classList.remove(CLS_EXPANDSTATE);\n });\n }\n this.expand(acrdnCtn_1);\n }\n if (!isNullOrUndefined(expandState) && !sameHeader) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n }\n };\n Accordion.prototype.eleMoveFocus = function (action, root, trgt) {\n var clst;\n var clstItem = closest(trgt, '.' + CLS_ITEM$1);\n if (trgt === root) {\n clst = ((action === 'moveUp' ? trgt.lastElementChild : trgt).querySelector('.' + CLS_HEADER));\n }\n else if (trgt.classList.contains(CLS_HEADER)) {\n clstItem = (action === 'moveUp' ? clstItem.previousElementSibling : clstItem.nextElementSibling);\n if (clstItem) {\n clst = select('.' + CLS_HEADER, clstItem);\n }\n }\n if (clst) {\n clst.focus();\n }\n };\n Accordion.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n var header = closest(e.target, CLS_HEADER);\n if (isNullOrUndefined(header) && !trgt.classList.contains(CLS_ROOT$2) && !trgt.classList.contains(CLS_HEADER)) {\n return;\n }\n var clst;\n var root = this.element;\n var content;\n switch (e.action) {\n case 'moveUp':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'moveDown':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'space':\n case 'enter':\n content = trgt.nextElementSibling;\n if (!isNullOrUndefined(content) && content.classList.contains(CLS_CONTENT)) {\n if (content.getAttribute('e-animate') !== 'true') {\n trgt.click();\n }\n }\n else {\n trgt.click();\n }\n e.preventDefault();\n break;\n case 'home':\n case 'end':\n clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];\n clst.focus();\n e.preventDefault();\n break;\n }\n };\n Accordion.prototype.headerEleGenerate = function () {\n var header = this.createElement('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });\n var ariaAttr = {\n 'tabindex': '0', 'role': 'button', 'aria-disabled': 'false', 'aria-expanded': 'false'\n };\n attributes(header, ariaAttr);\n return header;\n };\n Accordion.prototype.renderInnerItem = function (item, index) {\n var innerEle = this.createElement('div', {\n className: CLS_ITEM$1, id: item.id || getUniqueID('acrdn_item')\n });\n if (this.headerTemplate) {\n var ctnEle = this.headerEleGenerate();\n var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });\n ctnEle.appendChild(hdrEle);\n append(this.getHeaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);\n innerEle.appendChild(ctnEle);\n ctnEle.appendChild(this.toggleIconGenerate());\n this.add(innerEle, CLS_SLCT);\n return innerEle;\n }\n if (item.header && this.angularnativeCondiCheck(item, 'header')) {\n var header = item.header;\n if (this.enableHtmlSanitizer && typeof (item.header) === 'string') {\n header = SanitizeHtmlHelper.sanitize(item.header);\n }\n var ctnEle = this.headerEleGenerate();\n var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });\n ctnEle.appendChild(hdrEle);\n ctnEle.appendChild(this.fetchElement(hdrEle, header, index));\n innerEle.appendChild(ctnEle);\n }\n var hdr = select('.' + CLS_HEADER, innerEle);\n if (item.expanded && !isNullOrUndefined(index) && (!this.enablePersistence)) {\n if (this.initExpand.indexOf(index) === -1) {\n this.initExpand.push(index);\n }\n }\n if (item.cssClass) {\n addClass([innerEle], item.cssClass.split(' '));\n }\n if (item.disabled) {\n addClass([innerEle], CLS_DISABLE$3);\n }\n if (item.visible === false) {\n addClass([innerEle], CLS_ITEMHIDE);\n }\n if (item.iconCss) {\n var hdrIcnEle = this.createElement('div', { className: CLS_HEADERICN });\n var icon = this.createElement('span', { className: item.iconCss + ' e-icons' });\n hdrIcnEle.appendChild(icon);\n if (isNullOrUndefined(hdr)) {\n hdr = this.headerEleGenerate();\n hdr.appendChild(hdrIcnEle);\n innerEle.appendChild(hdr);\n }\n else {\n hdr.insertBefore(hdrIcnEle, hdr.childNodes[0]);\n }\n }\n if (item.content && this.angularnativeCondiCheck(item, 'content')) {\n var hdrIcon = this.toggleIconGenerate();\n if (isNullOrUndefined(hdr)) {\n hdr = this.headerEleGenerate();\n innerEle.appendChild(hdr);\n }\n hdr.appendChild(hdrIcon);\n this.add(innerEle, CLS_SLCT);\n }\n return innerEle;\n };\n Accordion.prototype.angularnativeCondiCheck = function (item, prop) {\n var property = prop === 'content' ? item.content : item.header;\n var content = property;\n if (this.isAngular && !isNullOrUndefined(content.elementRef)) {\n var data = content.elementRef.nativeElement.data;\n if (isNullOrUndefined(data) || data === '' || (data.indexOf('bindings=') === -1)) {\n return true;\n }\n var parseddata = JSON.parse(content.elementRef.nativeElement.data.replace('bindings=', ''));\n if (!isNullOrUndefined(parseddata) && parseddata['ng-reflect-ng-if'] === 'false') {\n return false;\n }\n else {\n return true;\n }\n }\n else {\n return true;\n }\n };\n Accordion.prototype.fetchElement = function (ele, value, index) {\n var templateFn;\n var temString;\n try {\n if (document.querySelectorAll(value).length && value !== 'Button') {\n var eleVal = document.querySelector(value);\n temString = eleVal.outerHTML.trim();\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n else {\n templateFn = compile(value);\n }\n }\n catch (e) {\n if (typeof (value) === 'string') {\n ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;\n }\n else if (value instanceof (HTMLElement)) {\n ele.appendChild(value);\n if (this.trgtEle) {\n ele.firstElementChild.style.display = '';\n }\n }\n else {\n templateFn = compile(value);\n }\n }\n var tempArray;\n if (!isNullOrUndefined(templateFn)) {\n if (this.isReact) {\n this.renderReactTemplates();\n }\n var templateProps = void 0;\n var templateName = void 0;\n if (ele.classList.contains(CLS_HEADERCTN)) {\n templateProps = this.element.id + index + '_header';\n templateName = 'header';\n }\n else if (ele.classList.contains(CLS_CTENT)) {\n templateProps = this.element.id + index + '_content';\n templateName = 'content';\n }\n tempArray = templateFn({}, this, templateName, templateProps, this.isStringTemplate);\n }\n if (!isNullOrUndefined(tempArray) && tempArray.length > 0 && !(isNullOrUndefined(tempArray[0].tagName) && tempArray.length === 1)) {\n [].slice.call(tempArray).forEach(function (el) {\n if (!isNullOrUndefined(el.tagName)) {\n el.style.display = '';\n }\n ele.appendChild(el);\n });\n }\n else if (ele.childElementCount === 0) {\n ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;\n }\n if (!isNullOrUndefined(temString)) {\n if (this.templateEle.indexOf(value) === -1) {\n this.templateEle.push(value);\n }\n }\n return ele;\n };\n Accordion.prototype.ariaAttrUpdate = function (itemEle) {\n var header = select('.' + CLS_HEADER, itemEle);\n var content = select('.' + CLS_CONTENT, itemEle);\n header.setAttribute('aria-controls', content.id);\n content.setAttribute('aria-labelledby', header.id);\n content.setAttribute('role', 'region');\n };\n Accordion.prototype.contentRendering = function (index) {\n var itemcnt = this.createElement('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });\n attributes(itemcnt, { 'aria-hidden': 'true' });\n var ctn = this.createElement('div', { className: CLS_CTENT });\n if (!isNullOrUndefined(this.dataSource) && this.dataSource.length > 0) {\n if (this.isReact) {\n this.renderReactTemplates();\n }\n append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);\n itemcnt.appendChild(ctn);\n }\n else {\n var content = this.items[parseInt(index.toString(), 10)].content;\n if (this.enableHtmlSanitizer && typeof (content) === 'string') {\n content = SanitizeHtmlHelper.sanitize(content);\n }\n itemcnt.appendChild(this.fetchElement(ctn, content, index));\n }\n return itemcnt;\n };\n Accordion.prototype.expand = function (trgt) {\n var _this = this;\n var items = this.getItems();\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM$1);\n if (isNullOrUndefined(trgt) || (isVisible(trgt) && trgt.getAttribute('e-animate') !== 'true') || trgtItemEle.classList.contains(CLS_DISABLE$3)) {\n return;\n }\n var acrdnRoot = closest(trgtItemEle, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n var animation = {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n var eventArgs = {\n element: trgtItemEle,\n item: items[this.getIndexByItem(trgtItemEle)],\n index: this.getIndexByItem(trgtItemEle),\n content: trgtItemEle.querySelector('.' + CLS_CONTENT),\n isExpanded: true\n };\n this.trigger('expanding', eventArgs, function (expandArgs) {\n if (!expandArgs.cancel) {\n icon.classList.add(CLS_TOGANIMATE);\n _this.expandedItemsPush(trgtItemEle);\n if (!isNullOrUndefined(expandState)) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n trgtItemEle.classList.add(CLS_EXPANDSTATE);\n if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {\n _this.expandProgress('begin', icon, trgt, trgtItemEle, expandArgs);\n _this.expandProgress('end', icon, trgt, trgtItemEle, expandArgs);\n }\n else {\n _this.expandAnimation(animation.name, icon, trgt, trgtItemEle, animation, expandArgs);\n }\n }\n });\n };\n Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {\n var _this = this;\n if (ef === 'None' && animationMode === 'Enable') {\n ef = 'SlideDown';\n animate.name = 'SlideDown';\n }\n var height;\n this.lastActiveItemId = trgtItemEle.id;\n if (ef === 'SlideDown') {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n trgt.style.position = 'absolute';\n height = trgtItemEle.offsetHeight;\n trgt.style.maxHeight = (trgt.offsetHeight) + 'px';\n trgtItemEle.style.maxHeight = '';\n };\n animate.progress = function () {\n trgtItemEle.style.minHeight = (height + trgt.offsetHeight) + 'px';\n };\n animate.end = function () {\n setStyleAttribute(trgt, { 'position': '', 'maxHeight': '' });\n trgtItemEle.style.minHeight = '';\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n else {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n };\n animate.end = function () {\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.expandProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(trgt, CLS_CTNHIDE);\n this.add(trgtItemEle, CLS_SLCTED);\n this.add(icon, CLS_EXPANDICN);\n if (progress === 'end') {\n this.add(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'false');\n attributes(trgt.previousElementSibling, { 'aria-expanded': 'true' });\n icon.classList.remove(CLS_TOGANIMATE);\n this.trigger('expanded', eventArgs);\n }\n };\n Accordion.prototype.expandedItemsPush = function (item) {\n var index = this.getIndexByItem(item);\n if (this.expandedIndices.indexOf(index) === -1) {\n var temp = [].slice.call(this.expandedIndices);\n temp.push(index);\n this.setProperties({ expandedIndices: temp }, true);\n }\n };\n Accordion.prototype.getIndexByItem = function (item) {\n var itemEle = this.getItemElements();\n return [].slice.call(itemEle).indexOf(item);\n };\n Accordion.prototype.getItemElements = function () {\n var itemEle = [];\n var itemCollection = this.element.children;\n [].slice.call(itemCollection).forEach(function (el) {\n if (el.classList.contains(CLS_ITEM$1)) {\n itemEle.push(el);\n }\n });\n return itemEle;\n };\n Accordion.prototype.expandedItemsPop = function (item) {\n var index = this.getIndexByItem(item);\n var temp = [].slice.call(this.expandedIndices);\n temp.splice(temp.indexOf(index), 1);\n this.setProperties({ expandedIndices: temp }, true);\n };\n Accordion.prototype.collapse = function (trgt) {\n var _this = this;\n var items = this.getItems();\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM$1);\n if (isNullOrUndefined(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE$3)) {\n return;\n }\n var animation = {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n var eventArgs = {\n element: trgtItemEle,\n item: items[this.getIndexByItem(trgtItemEle)],\n index: this.getIndexByItem(trgtItemEle),\n content: trgtItemEle.querySelector('.' + CLS_CONTENT),\n isExpanded: false\n };\n this.trigger('expanding', eventArgs, function (expandArgs) {\n if (!expandArgs.cancel) {\n _this.expandedItemsPop(trgtItemEle);\n trgtItemEle.classList.remove(CLS_EXPANDSTATE);\n icon.classList.add(CLS_TOGANIMATE);\n if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {\n _this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);\n _this.collapseProgress('end', icon, trgt, trgtItemEle, expandArgs);\n }\n else {\n _this.collapseAnimation(animation.name, trgt, trgtItemEle, icon, animation, expandArgs);\n }\n }\n });\n };\n Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {\n var _this = this;\n if (ef === 'None' && animationMode === 'Enable') {\n ef = 'SlideUp';\n animate.name = 'SlideUp';\n }\n var height;\n var trgtHeight;\n var itemHeight;\n var remain;\n this.lastActiveItemId = trgtItEl.id;\n if (ef === 'SlideUp') {\n animate.begin = function () {\n itemHeight = trgtItEl.offsetHeight;\n trgtItEl.style.minHeight = itemHeight + 'px';\n trgt.style.position = 'absolute';\n height = trgtItEl.offsetHeight;\n trgtHeight = trgt.offsetHeight;\n trgt.style.maxHeight = trgtHeight + 'px';\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.progress = function () {\n remain = ((height - (trgtHeight - trgt.offsetHeight)));\n if (remain < itemHeight) {\n trgtItEl.style.minHeight = remain + 'px';\n }\n };\n animate.end = function () {\n trgt.style.display = 'none';\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n trgtItEl.style.minHeight = '';\n setStyleAttribute(trgt, { 'position': '', 'maxHeight': '', 'display': '' });\n };\n }\n else {\n animate.begin = function () {\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.end = function () {\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.collapseProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(icon, CLS_EXPANDICN);\n this.remove(trgtItemEle, CLS_SLCTED);\n if (progress === 'end') {\n this.add(trgt, CLS_CTNHIDE);\n icon.classList.remove(CLS_TOGANIMATE);\n this.remove(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'true');\n attributes(trgt.previousElementSibling, { 'aria-expanded': 'false' });\n this.trigger('expanded', eventArgs);\n }\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n Accordion.prototype.getModuleName = function () {\n return 'accordion';\n };\n Accordion.prototype.getItems = function () {\n var items;\n if (this.itemTemplate && this.headerTemplate) {\n items = this.dataSource;\n }\n else {\n items = this.items;\n }\n return items;\n };\n /**\n * Adds new item to the Accordion with the specified index of the Accordion.\n *\n * @param {AccordionItemModel | AccordionItemModel[] | Object | Object[]} item - Item array that is to be added to the Accordion.\n * @param {number} index - Number value that determines where the item should be added.\n * By default, item is added at the last index if the index is not specified.\n * @returns {void}\n */\n Accordion.prototype.addItem = function (item, index) {\n var _this = this;\n var ele = this.element;\n var itemEle = this.getItemElements();\n var items = this.getItems();\n if (isNullOrUndefined(index)) {\n index = items.length;\n }\n if (ele.childElementCount >= index) {\n var addItems = (item instanceof Array) ? item : [item];\n addItems.forEach(function (addItem, i) {\n var itemIndex = index + i;\n items.splice(itemIndex, 0, addItem);\n var innerItemEle = _this.renderInnerItem(addItem, itemIndex);\n if (ele.childElementCount === itemIndex) {\n ele.appendChild(innerItemEle);\n }\n else {\n ele.insertBefore(innerItemEle, itemEle[parseInt(itemIndex.toString(), 10)]);\n }\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n _this.expandedIndices = [];\n _this.expandedItemRefresh();\n if (addItem && addItem.expanded) {\n _this.expandItem(true, itemIndex);\n }\n });\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.expandedItemRefresh = function () {\n var _this = this;\n var itemEle = this.getItemElements();\n [].slice.call(itemEle).forEach(function (el) {\n if (el.classList.contains(CLS_SLCTED)) {\n _this.expandedItemsPush(el);\n }\n });\n };\n /**\n * Dynamically removes item from Accordion.\n *\n * @param {number} index - Number value that determines which item should be removed.\n * @returns {void}.\n */\n Accordion.prototype.removeItem = function (index) {\n if (this.isReact || this.isAngular) {\n var item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];\n var header = select('.' + CLS_HEADERCTN, item);\n var content = select('.' + CLS_CTENT, item);\n this.clearAccordionTemplate(header, this.dataSource.length > 0 ? 'headerTemplate' : 'header', CLS_HEADERCTN);\n this.clearAccordionTemplate(content, this.dataSource.length > 0 ? 'itemTemplate' : 'content', CLS_CTENT);\n }\n var itemEle = this.getItemElements();\n var ele = itemEle[parseInt(index.toString(), 10)];\n var items = this.getItems();\n if (isNullOrUndefined(ele)) {\n return;\n }\n this.restoreContent(index);\n detach(ele);\n items.splice(index, 1);\n this.expandedIndices = [];\n this.expandedItemRefresh();\n };\n /**\n * Sets focus to the specified index item header in Accordion.\n *\n * @param {number} index - Number value that determines which item should be focused.\n * @returns {void}.\n */\n Accordion.prototype.select = function (index) {\n var itemEle = this.getItemElements();\n var ele = itemEle[parseInt(index.toString(), 10)];\n if (isNullOrUndefined(ele) || isNullOrUndefined(select('.' + CLS_HEADER, ele))) {\n return;\n }\n ele.children[0].focus();\n };\n /**\n * Shows or hides the specified item from Accordion.\n *\n * @param {number} index - Number value that determines which item should be hidden/shown.\n * @param {boolean} isHidden - Boolean value that determines the action either hide (true) or show (false). Default value is false.\n * If the `isHidden` value is false, the item is shown or else item it is hidden.\n * @returns {void}.\n */\n Accordion.prototype.hideItem = function (index, isHidden) {\n var itemEle = this.getItemElements();\n var ele = itemEle[parseInt(index.toString(), 10)];\n if (isNullOrUndefined(ele)) {\n return;\n }\n if (isNullOrUndefined(isHidden)) {\n isHidden = true;\n }\n if (isHidden) {\n this.add(ele, CLS_ITEMHIDE);\n }\n else {\n this.remove(ele, CLS_ITEMHIDE);\n }\n };\n /**\n * Enables/Disables the specified Accordion item.\n *\n * @param {number} index - Number value that determines which item should be enabled/disabled.\n * @param {boolean} isEnable - Boolean value that determines the action as enable (true) or disable (false).\n * If the `isEnable` value is true, the item is enabled or else it is disabled.\n * @returns {void}.\n */\n Accordion.prototype.enableItem = function (index, isEnable) {\n var itemEle = this.getItemElements();\n var ele = itemEle[parseInt(index.toString(), 10)];\n if (isNullOrUndefined(ele)) {\n return;\n }\n var eleHeader = ele.firstElementChild;\n if (isEnable) {\n this.remove(ele, CLS_DISABLE$3);\n attributes(eleHeader, { 'tabindex': '0', 'aria-disabled': 'false' });\n eleHeader.focus();\n }\n else {\n if (ele.classList.contains(CLS_ACTIVE)) {\n this.expandItem(false, index);\n this.eleMoveFocus('movedown', this.element, eleHeader);\n }\n this.add(ele, CLS_DISABLE$3);\n eleHeader.setAttribute('aria-disabled', 'true');\n eleHeader.removeAttribute('tabindex');\n }\n };\n /**\n * Expands/Collapses the specified Accordion item.\n *\n * @param {boolean} isExpand - Boolean value that determines the action as expand or collapse.\n * @param {number} index - Number value that determines which item should be expanded/collapsed.`index` is optional parameter.\n * Without Specifying index, based on the `isExpand` value all Accordion item can be expanded or collapsed.\n * @returns {void}.\n */\n Accordion.prototype.expandItem = function (isExpand, index) {\n var _this = this;\n var itemEle = this.getItemElements();\n if (isNullOrUndefined(index)) {\n if (this.expandMode === 'Single' && isExpand) {\n var ele = itemEle[itemEle.length - 1];\n this.itemExpand(isExpand, ele, this.getIndexByItem(ele));\n }\n else {\n var item = select('#' + this.lastActiveItemId, this.element);\n [].slice.call(itemEle).forEach(function (el) {\n _this.itemExpand(isExpand, el, _this.getIndexByItem(el));\n el.classList.remove(CLS_EXPANDSTATE);\n });\n var expandedItem = select('.' + CLS_EXPANDSTATE, this.element);\n if (expandedItem) {\n expandedItem.classList.remove(CLS_EXPANDSTATE);\n }\n if (item) {\n item.classList.add(CLS_EXPANDSTATE);\n }\n }\n }\n else {\n var ele = itemEle[parseInt(index.toString(), 10)];\n if (isNullOrUndefined(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {\n return;\n }\n else {\n if (this.expandMode === 'Single') {\n this.expandItem(false);\n }\n this.itemExpand(isExpand, ele, index);\n }\n }\n };\n Accordion.prototype.itemExpand = function (isExpand, ele, index) {\n var ctn = ele.children[1];\n if (ele.classList.contains(CLS_DISABLE$3)) {\n return;\n }\n if (isNullOrUndefined(ctn) && isExpand) {\n ctn = this.contentRendering(index);\n ele.appendChild(ctn);\n this.ariaAttrUpdate(ele);\n this.expand(ctn);\n }\n else if (!isNullOrUndefined(ctn)) {\n if (isExpand) {\n this.expand(ctn);\n }\n else {\n this.collapse(ctn);\n }\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.destroyItems = function () {\n this.restoreContent(null);\n if (this.isReact || this.isAngular || this.isVue) {\n this.clearTemplate();\n }\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1)).forEach(function (el) {\n detach(el);\n });\n };\n Accordion.prototype.restoreContent = function (index) {\n var ctnElePos;\n if (isNullOrUndefined(index)) {\n ctnElePos = this.element;\n }\n else {\n ctnElePos = this.element.querySelectorAll('.' + CLS_ITEM$1)[parseInt(index.toString(), 10)];\n }\n this.templateEle.forEach(function (eleStr) {\n if (!isNullOrUndefined(ctnElePos.querySelector(eleStr))) {\n document.body.appendChild(ctnElePos.querySelector(eleStr)).style.display = 'none';\n }\n });\n };\n Accordion.prototype.updateItem = function (item, index) {\n if (!isNullOrUndefined(item)) {\n var items = this.getItems();\n var itemObj = items[parseInt(index.toString(), 10)];\n items.splice(index, 1);\n this.restoreContent(index);\n var header = select('.' + CLS_HEADERCTN, item);\n var content = select('.' + CLS_CTENT, item);\n if (this.isReact || this.isAngular) {\n this.clearAccordionTemplate(header, 'header', CLS_HEADERCTN);\n this.clearAccordionTemplate(content, 'content', CLS_CTENT);\n }\n detach(item);\n this.addItem(itemObj, index);\n }\n };\n Accordion.prototype.setTemplate = function (template, toElement, index) {\n this.fetchElement(toElement, template, index);\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.clearAccordionTemplate = function (templateEle, templateName, className) {\n if (this.registeredTemplate && this.registeredTemplate[\"\" + templateName]) {\n var registeredTemplates = this.registeredTemplate;\n for (var index = 0; index < registeredTemplates[\"\" + templateName].length; index++) {\n var registeredItem = registeredTemplates[\"\" + templateName][parseInt(index.toString(), 10)].rootNodes[0];\n var closestItem = closest(registeredItem, '.' + className);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle || isNullOrUndefined(registeredItem.parentNode)) {\n this.clearTemplate([templateName], [registeredTemplates[\"\" + templateName][parseInt(index.toString(), 10)]]);\n break;\n }\n }\n }\n else if (this.portals && this.portals.length > 0) {\n var portals = this.portals;\n for (var index = 0; index < portals.length; index++) {\n var portalItem = portals[parseInt(index.toString(), 10)];\n var closestItem = closest(portalItem.containerInfo, '.' + className);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {\n this.clearTemplate([templateName], index);\n break;\n }\n }\n }\n };\n Accordion.prototype.getPersistData = function () {\n var keyEntity = ['expandedIndices'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n *\n * @param {AccordionModel} newProp - It contains the new value of data.\n * @param {AccordionModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n Accordion.prototype.onPropertyChanged = function (newProp, oldProp) {\n var acrdn = this.element;\n var isRefresh = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var j = 0; j < changedProp.length; j++) {\n var index = parseInt(Object.keys(newProp.items)[parseInt(j.toString(), 10)], 10);\n var property = Object.keys(newProp.items[parseInt(index.toString(), 10)]);\n for (var k = 0; k < property.length; k++) {\n var item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];\n var oldVal = Object(oldProp.items[parseInt(index.toString(), 10)])[\"\" + property[parseInt(k.toString(), 10)]];\n var newVal = Object(newProp.items[parseInt(index.toString(), 10)])[\"\" + property[parseInt(k.toString(), 10)]];\n var temp = property[parseInt(k.toString(), 10)];\n var content = select('.' + CLS_CTENT, item);\n if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {\n this.updateItem(item, index);\n }\n if (property[parseInt(k.toString(), 10)] === 'cssClass' && !isNullOrUndefined(item)) {\n if (oldVal) {\n removeClass([item], oldVal.split(' '));\n }\n if (newVal) {\n addClass([item], newVal.split(' '));\n }\n }\n if (property[parseInt(k.toString(), 10)] === 'visible' && !isNullOrUndefined(item)) {\n if (Object(newProp.items[parseInt(index.toString(), 10)])[\"\" + property[parseInt(k.toString(), 10)]] === false) {\n item.classList.add(CLS_ITEMHIDE);\n }\n else {\n item.classList.remove(CLS_ITEMHIDE);\n }\n }\n if (property[parseInt(k.toString(), 10)] === 'disabled' && !isNullOrUndefined(item)) {\n this.enableItem(index, !newVal);\n }\n if (property.indexOf('header') < 0 && property[parseInt(k.toString(), 10)] === 'content'\n && !isNullOrUndefined(item) && item.children.length === 2) {\n if (typeof newVal === 'function') {\n if (this.isAngular || this.isReact) {\n this.clearAccordionTemplate(content, property[parseInt(k.toString(), 10)], CLS_CTENT);\n }\n var activeContent = item.querySelector('.' + CLS_CTENT);\n activeContent.innerHTML = '';\n this.setTemplate(newVal, activeContent, index);\n }\n else {\n if (item.classList.contains(CLS_SLCTED)) {\n this.expandItem(false, index);\n }\n detach(item.querySelector('.' + CLS_CONTENT));\n }\n }\n }\n }\n }\n else {\n isRefresh = true;\n }\n break;\n case 'dataSource':\n case 'expandedIndices':\n if (this.expandedIndices === null) {\n this.expandedIndices = [];\n }\n isRefresh = true;\n break;\n case 'headerTemplate':\n this.initializeHeaderTemplate();\n isRefresh = true;\n break;\n case 'itemTemplate':\n this.initializeItemTemplate();\n isRefresh = true;\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.add(acrdn, CLS_RTL$3);\n }\n else {\n this.remove(acrdn, CLS_RTL$3);\n }\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'expandMode':\n if (newProp.expandMode === 'Single' && !isNullOrUndefined(this.expandedIndices) && this.expandedIndices.length > 1) {\n this.expandItem(false);\n }\n break;\n }\n }\n if (isRefresh) {\n this.initExpand = [];\n if (!isNullOrUndefined(this.expandedIndices) && this.expandedIndices.length > 0) {\n this.initExpand = this.expandedIndices;\n }\n this.destroyItems();\n this.renderItems();\n this.initItemExpand();\n }\n };\n __decorate$4([\n Collection([], AccordionItem)\n ], Accordion.prototype, \"items\", void 0);\n __decorate$4([\n Property([])\n ], Accordion.prototype, \"dataSource\", void 0);\n __decorate$4([\n Property()\n ], Accordion.prototype, \"itemTemplate\", void 0);\n __decorate$4([\n Property()\n ], Accordion.prototype, \"headerTemplate\", void 0);\n __decorate$4([\n Property('100%')\n ], Accordion.prototype, \"width\", void 0);\n __decorate$4([\n Property('auto')\n ], Accordion.prototype, \"height\", void 0);\n __decorate$4([\n Property([])\n ], Accordion.prototype, \"expandedIndices\", void 0);\n __decorate$4([\n Property('Multiple')\n ], Accordion.prototype, \"expandMode\", void 0);\n __decorate$4([\n Property(true)\n ], Accordion.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$4([\n Complex({}, AccordionAnimationSettings)\n ], Accordion.prototype, \"animation\", void 0);\n __decorate$4([\n Event()\n ], Accordion.prototype, \"clicked\", void 0);\n __decorate$4([\n Event()\n ], Accordion.prototype, \"expanding\", void 0);\n __decorate$4([\n Event()\n ], Accordion.prototype, \"expanded\", void 0);\n __decorate$4([\n Event()\n ], Accordion.prototype, \"created\", void 0);\n __decorate$4([\n Event()\n ], Accordion.prototype, \"destroyed\", void 0);\n Accordion = __decorate$4([\n NotifyPropertyChanges\n ], Accordion);\n return Accordion;\n}(Component));\n\nvar __extends$5 = (undefined && undefined.__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$5 = (undefined && undefined.__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/**\n * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.\n * ```html\n * \n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar ContextMenu = /** @__PURE__ @class */ (function (_super) {\n __extends$5(ContextMenu, _super);\n /**\n * Constructor for creating the widget.\n *\n * @private\n * @param {ContextMenuModel} options - Specifies the context menu model\n * @param {string} element - Specifies the element\n */\n function ContextMenu(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * For internal use only - prerender processing.\n *\n * @private\n * @returns {void}\n */\n ContextMenu.prototype.preRender = function () {\n this.isMenu = false;\n this.element.id = this.element.id || getUniqueID('ej2-contextmenu');\n _super.prototype.preRender.call(this);\n };\n ContextMenu.prototype.initialize = function () {\n _super.prototype.initialize.call(this);\n attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });\n this.element.style.zIndex = getZindexPartial(this.element).toString();\n };\n /**\n * This method is used to open the ContextMenu in specified position.\n *\n * @param {number} top - To specify ContextMenu vertical positioning.\n * @param {number} left - To specify ContextMenu horizontal positioning.\n * @param {HTMLElement} target - To calculate z-index for ContextMenu based upon the specified target.\n * @function open\n * @returns {void}\n */\n ContextMenu.prototype.open = function (top, left, target) {\n _super.prototype.openMenu.call(this, null, null, top, left, null, target);\n };\n /**\n * Closes the ContextMenu if it is opened.\n *\n * @function close\n * @returns {void}\n */\n ContextMenu.prototype.close = function () {\n _super.prototype.closeMenu.call(this);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @private\n * @param {ContextMenuModel} newProp - Specifies new properties\n * @param {ContextMenuModel} oldProp - Specifies old properties\n * @returns {void}\n */\n ContextMenu.prototype.onPropertyChanged = function (newProp, oldProp) {\n _super.prototype.onPropertyChanged.call(this, 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 'filter':\n this.close();\n this.filter = newProp.filter;\n break;\n case 'target':\n this.unWireEvents(oldProp.target);\n this.wireEvents();\n break;\n }\n }\n };\n /**\n * Get module name.\n *\n * @returns {string} - Module Name\n * @private\n */\n ContextMenu.prototype.getModuleName = function () {\n return 'contextmenu';\n };\n __decorate$5([\n Property('')\n ], ContextMenu.prototype, \"target\", void 0);\n __decorate$5([\n Property('')\n ], ContextMenu.prototype, \"filter\", void 0);\n __decorate$5([\n Collection([], MenuItem)\n ], ContextMenu.prototype, \"items\", void 0);\n ContextMenu = __decorate$5([\n NotifyPropertyChanges\n ], ContextMenu);\n return ContextMenu;\n}(MenuBase));\n\nvar __extends$6 = (undefined && undefined.__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$6 = (undefined && undefined.__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};\nvar VMENU = 'e-vertical';\nvar SCROLLABLE = 'e-scrollable';\nvar HAMBURGER = 'e-hamburger';\n/**\n * The Menu is a graphical user interface that serve as navigation headers for your application or site.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Menu = /** @__PURE__ @class */ (function (_super) {\n __extends$6(Menu, _super);\n /**\n * Constructor for creating the component.\n *\n * @private\n * @param {MenuModel} options - Specifies the menu model\n * @param {string} element - Specifies the element\n */\n function Menu(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.tempItems = [];\n return _this;\n }\n /**\n * Get module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n Menu.prototype.getModuleName = function () {\n return 'menu';\n };\n /**\n * For internal use only - prerender processing.\n *\n * @private\n * @returns {void}\n */\n Menu.prototype.preRender = function () {\n this.isMenu = true;\n this.element.id = this.element.id || getUniqueID('ej2-menu');\n if (this.template) {\n try {\n if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {\n this.template = document.querySelector(this.template).innerHTML.trim();\n this.clearChanges();\n }\n }\n catch (e) {\n /* action on catch */\n }\n this.updateMenuItems(this.items);\n }\n else {\n this.updateMenuItems(this.items);\n }\n _super.prototype.preRender.call(this);\n };\n Menu.prototype.initialize = function () {\n _super.prototype.initialize.call(this);\n attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });\n if (this.orientation === 'Vertical') {\n this.element.classList.add(VMENU);\n if (this.hamburgerMode && !this.target) {\n this.element.previousElementSibling.classList.add(VMENU);\n }\n this.element.setAttribute('aria-orientation', 'vertical');\n }\n else {\n if (Browser.isDevice && !this.enableScrolling) {\n this.element.parentElement.classList.add(SCROLLABLE);\n }\n }\n if (this.hamburgerMode) {\n this.element.parentElement.classList.add(HAMBURGER);\n if (this.orientation === 'Horizontal') {\n this.element.classList.add('e-hide-menu');\n }\n }\n };\n Menu.prototype.updateMenuItems = function (items) {\n this.tempItems = items;\n this.items = [];\n this.tempItems.map(this.createMenuItems, this);\n this.setProperties({ items: this.items }, true);\n this.tempItems = [];\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @private\n * @param {MenuModel} newProp - Specifies the new properties.\n * @param {MenuModel} oldProp - Specifies the old properties.\n * @returns {void}\n */\n Menu.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'orientation':\n if (newProp.orientation === 'Vertical') {\n this.element.classList.add(VMENU);\n if (this.hamburgerMode) {\n if (!this.target) {\n this.element.previousElementSibling.classList.add(VMENU);\n }\n this.element.classList.remove('e-hide-menu');\n }\n this.element.setAttribute('aria-orientation', 'vertical');\n }\n else {\n this.element.classList.remove(VMENU);\n if (this.hamburgerMode) {\n if (!this.target) {\n this.element.previousElementSibling.classList.remove(VMENU);\n }\n this.element.classList.add('e-hide-menu');\n }\n this.element.removeAttribute('aria-orientation');\n }\n break;\n case 'items':\n if (!Object.keys(oldProp.items).length) {\n this.updateMenuItems(newProp.items);\n }\n break;\n case 'hamburgerMode':\n if (!this.element.previousElementSibling) {\n _super.prototype.createHeaderContainer.call(this);\n }\n if (newProp.hamburgerMode) {\n this.element.parentElement.classList.add(HAMBURGER);\n [].slice.call(this.element.getElementsByClassName('e-blankicon')).forEach(function (li) {\n li.style[_this.enableRtl ? 'paddingRight' : 'paddingLeft'] = '';\n });\n }\n else {\n this.element.parentElement.classList.remove(HAMBURGER);\n if (this.orientation === 'Vertical') {\n this.setBlankIconStyle(this.element);\n }\n }\n if (this.orientation === 'Vertical') {\n if (!this.target) {\n this.element.previousElementSibling.classList.add(VMENU);\n }\n this.element.classList.remove('e-hide-menu');\n }\n else {\n if (this.target) {\n this.element.previousElementSibling.classList.add(VMENU);\n }\n else {\n this.element.previousElementSibling.classList.remove(VMENU);\n }\n this.element.classList[newProp.hamburgerMode ? 'add' : 'remove']('e-hide-menu');\n }\n break;\n case 'title':\n if (this.hamburgerMode && this.element.previousElementSibling) {\n newProp.title = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(newProp.title) : newProp.title;\n this.element.previousElementSibling.querySelector('.e-menu-title').innerHTML = newProp.title;\n }\n break;\n case 'target':\n if (this.hamburgerMode) {\n this.unWireEvents(oldProp.target);\n this.wireEvents();\n if (this.orientation === 'Horizontal') {\n if (!newProp.target) {\n if (!this.element.previousElementSibling) {\n _super.prototype.createHeaderContainer.call(this);\n }\n this.element.previousElementSibling.classList.remove(VMENU);\n }\n else {\n this.element.previousElementSibling.classList.add(VMENU);\n }\n this.element.classList.add('e-hide-menu');\n }\n }\n break;\n }\n }\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n };\n Menu.prototype.createMenuItems = function (item) {\n var idx;\n var i;\n var items = this.items;\n var pIdField = this.getField('parentId');\n if (item[\"\" + pIdField]) {\n idx = this.getIndex(item[\"\" + pIdField].toString(), true);\n for (i = 0; i < idx.length; i++) {\n if (!items[idx[i]].items) {\n items[idx[i]].items = [];\n }\n items = items[idx[i]].items;\n }\n items.push(item);\n }\n else {\n this.items.push(item);\n }\n };\n /**\n * This method is used to open the Menu in hamburger mode.\n *\n * @function open\n * @returns {void}\n */\n Menu.prototype.open = function () {\n _super.prototype.openHamburgerMenu.call(this);\n };\n /**\n * Closes the Menu if it is opened in hamburger mode.\n *\n * @function close\n * @returns {void}\n */\n Menu.prototype.close = function () {\n _super.prototype.closeHamburgerMenu.call(this);\n };\n __decorate$6([\n Property('Horizontal')\n ], Menu.prototype, \"orientation\", void 0);\n __decorate$6([\n Property('')\n ], Menu.prototype, \"target\", void 0);\n __decorate$6([\n Property(null)\n ], Menu.prototype, \"template\", void 0);\n __decorate$6([\n Property(false)\n ], Menu.prototype, \"enableScrolling\", void 0);\n __decorate$6([\n Property(false)\n ], Menu.prototype, \"hamburgerMode\", void 0);\n __decorate$6([\n Property('Menu')\n ], Menu.prototype, \"title\", void 0);\n __decorate$6([\n Property(true)\n ], Menu.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$6([\n Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)\n ], Menu.prototype, \"fields\", void 0);\n Menu = __decorate$6([\n NotifyPropertyChanges\n ], Menu);\n return Menu;\n}(MenuBase));\n\nvar __extends$7 = (undefined && undefined.__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$7 = (undefined && undefined.__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};\nvar CLS_TAB = 'e-tab';\nvar CLS_HEADER$1 = 'e-tab-header';\nvar CLS_BLA_TEM = 'blazor-template';\nvar CLS_CONTENT$1 = 'e-content';\nvar CLS_NEST$1 = 'e-nested';\nvar CLS_ITEMS$1 = 'e-items';\nvar CLS_ITEM$2 = 'e-item';\nvar CLS_TEMPLATE$1 = 'e-template';\nvar CLS_RTL$4 = 'e-rtl';\nvar CLS_ACTIVE$1 = 'e-active';\nvar CLS_DISABLE$4 = 'e-disable';\nvar CLS_HIDDEN$1 = 'e-hidden';\nvar CLS_FOCUS = 'e-focused';\nvar CLS_ICONS = 'e-icons';\nvar CLS_ICON = 'e-icon';\nvar CLS_ICON_TAB = 'e-icon-tab';\nvar CLS_ICON_CLOSE = 'e-close-icon';\nvar CLS_CLOSE_SHOW = 'e-close-show';\nvar CLS_TEXT = 'e-tab-text';\nvar CLS_INDICATOR = 'e-indicator';\nvar CLS_WRAP = 'e-tab-wrap';\nvar CLS_TEXT_WRAP = 'e-text-wrap';\nvar CLS_TAB_ICON = 'e-tab-icon';\nvar CLS_TB_ITEMS = 'e-toolbar-items';\nvar CLS_TB_ITEM = 'e-toolbar-item';\nvar CLS_TB_POP = 'e-toolbar-pop';\nvar CLS_TB_POPUP = 'e-toolbar-popup';\nvar CLS_HOR_NAV = 'e-hor-nav';\nvar CLS_POPUP_OPEN = 'e-popup-open';\nvar CLS_POPUP_CLOSE = 'e-popup-close';\nvar CLS_PROGRESS = 'e-progress';\nvar CLS_IGNORE = 'e-ignore';\nvar CLS_OVERLAY$2 = 'e-overlay';\nvar CLS_HSCRCNT = 'e-hscroll-content';\nvar CLS_VSCRCNT = 'e-vscroll-content';\nvar CLS_VTAB = 'e-vertical-tab';\nvar CLS_VERTICAL$1 = 'e-vertical';\nvar CLS_VLEFT = 'e-vertical-left';\nvar CLS_VRIGHT = 'e-vertical-right';\nvar CLS_HBOTTOM = 'e-horizontal-bottom';\nvar CLS_FILL = 'e-fill-mode';\nvar TABITEMPREFIX = 'tabitem_';\nvar CLS_REORDER_ACTIVE_ITEM = 'e-reorder-active-item';\n/**\n * Objects used for configuring the Tab selecting item action properties.\n */\nvar TabActionSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$7(TabActionSettings, _super);\n function TabActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$7([\n Property('SlideLeftIn')\n ], TabActionSettings.prototype, \"effect\", void 0);\n __decorate$7([\n Property(600)\n ], TabActionSettings.prototype, \"duration\", void 0);\n __decorate$7([\n Property('ease')\n ], TabActionSettings.prototype, \"easing\", void 0);\n return TabActionSettings;\n}(ChildProperty));\n/**\n * Objects used for configuring the Tab animation properties.\n */\nvar TabAnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$7(TabAnimationSettings, _super);\n function TabAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$7([\n Complex({ effect: 'SlideLeftIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"previous\", void 0);\n __decorate$7([\n Complex({ effect: 'SlideRightIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"next\", void 0);\n return TabAnimationSettings;\n}(ChildProperty));\n/**\n * Objects used for configuring the Tab item header properties.\n */\nvar Header = /** @__PURE__ @class */ (function (_super) {\n __extends$7(Header, _super);\n function Header() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$7([\n Property('')\n ], Header.prototype, \"text\", void 0);\n __decorate$7([\n Property('')\n ], Header.prototype, \"iconCss\", void 0);\n __decorate$7([\n Property('left')\n ], Header.prototype, \"iconPosition\", void 0);\n return Header;\n}(ChildProperty));\n/**\n * An array of object that is used to configure the Tab.\n */\nvar TabItem = /** @__PURE__ @class */ (function (_super) {\n __extends$7(TabItem, _super);\n function TabItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$7([\n Complex({}, Header)\n ], TabItem.prototype, \"header\", void 0);\n __decorate$7([\n Property(null)\n ], TabItem.prototype, \"headerTemplate\", void 0);\n __decorate$7([\n Property('')\n ], TabItem.prototype, \"content\", void 0);\n __decorate$7([\n Property('')\n ], TabItem.prototype, \"cssClass\", void 0);\n __decorate$7([\n Property(false)\n ], TabItem.prototype, \"disabled\", void 0);\n __decorate$7([\n Property(true)\n ], TabItem.prototype, \"visible\", void 0);\n __decorate$7([\n Property()\n ], TabItem.prototype, \"id\", void 0);\n __decorate$7([\n Property(-1)\n ], TabItem.prototype, \"tabIndex\", void 0);\n return TabItem;\n}(ChildProperty));\n/**\n * Tab is a content panel to show multiple contents in a single space, one at a time.\n * Each Tab item has an associated content, that will be displayed based on the active Tab header item.\n * ```html\n * \n * \n * ```\n */\nvar Tab = /** @__PURE__ @class */ (function (_super) {\n __extends$7(Tab, _super);\n /**\n * Initializes a new instance of the Tab class.\n *\n * @param {TabModel} options - Specifies Tab model properties as options.\n * @param {string | HTMLElement} element - Specifies the element that is rendered as a Tab.\n */\n function Tab(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.show = {};\n _this.hide = {};\n _this.maxHeight = 0;\n _this.title = 'Close';\n _this.isInteracted = false;\n _this.lastIndex = 0;\n _this.isAdd = false;\n _this.isIconAlone = false;\n _this.draggableItems = [];\n _this.resizeContext = _this.refreshActiveTabBorder.bind(_this);\n /**\n * Contains the keyboard configuration of the Tab.\n */\n _this.keyConfigs = {\n tab: 'tab',\n home: 'home',\n end: 'end',\n enter: 'enter',\n space: 'space',\n delete: 'delete',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow'\n };\n return _this;\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.\n *\n * @returns {void}\n */\n Tab.prototype.destroy = function () {\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n if (!isNullOrUndefined(this.tbObj)) {\n this.tbObj.destroy();\n this.tbObj = null;\n }\n this.unWireEvents();\n this.element.removeAttribute('aria-disabled');\n this.expTemplateContent();\n if (!this.isTemplate) {\n while (this.element.firstElementChild) {\n remove(this.element.firstElementChild);\n }\n }\n else {\n var cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT$1, this.element);\n this.element.classList.remove(CLS_TEMPLATE$1);\n if (!isNullOrUndefined(cntEle)) {\n cntEle.innerHTML = this.cnt;\n }\n }\n if (this.btnCls) {\n this.btnCls = null;\n }\n this.hdrEle = null;\n this.cntEle = null;\n this.tbItems = null;\n this.tbItem = null;\n this.tbPop = null;\n this.prevItem = null;\n this.popEle = null;\n this.bdrLine = null;\n this.content = null;\n this.dragItem = null;\n this.cloneElement = null;\n this.draggingItems = [];\n if (this.draggableItems && this.draggableItems.length > 0) {\n for (var i = 0; i < this.draggableItems.length; i++) {\n this.draggableItems[i].destroy();\n this.draggableItems[i] = null;\n }\n this.draggableItems = [];\n }\n _super.prototype.destroy.call(this);\n this.trigger('destroyed');\n };\n /**\n * Refresh the tab component\n *\n * @returns {void}\n */\n Tab.prototype.refresh = function () {\n if (this.isReact) {\n this.clearTemplate();\n }\n _super.prototype.refresh.call(this);\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Reorganizes and adjusts the Tab headers to fit the available width without re-rendering the entire Tab component.\n *\n * This method is useful for optimizing the layout when:\n * - A hidden tab item becomes visible.\n * - The number of tab items changes dynamically.\n *\n * @returns {void} This method does not return a value.\n */\n Tab.prototype.refreshOverflow = function () {\n if (!isNullOrUndefined(this.tbObj)) {\n this.tbObj.refreshOverflow();\n }\n };\n /**\n * Initialize component\n *\n * @private\n * @returns {void}\n */\n Tab.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT$1);\n this.prevIndex = 0;\n this.isNested = false;\n this.isPopup = false;\n this.initRender = true;\n this.isSwiped = false;\n this.itemIndexArray = [];\n this.templateEle = [];\n if (this.allowDragAndDrop) {\n this.dragArea = !isNullOrUndefined(this.dragArea) ? this.dragArea : '#' + this.element.id + ' ' + ('.' + CLS_HEADER$1);\n }\n if (!isNullOrUndefined(nested)) {\n nested.parentElement.classList.add(CLS_NEST$1);\n this.isNested = true;\n }\n var name = Browser.info.name;\n var css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';\n setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });\n this.setCssClass(this.element, this.cssClass, true);\n attributes(this.element, { 'aria-disabled': 'false' });\n this.setCssClass(this.element, css, true);\n this.updatePopAnimationConfig();\n };\n /**\n * Initialize the component rendering\n *\n * @private\n * @returns {void}\n */\n Tab.prototype.render = function () {\n var _this = this;\n this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });\n this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();\n this.renderContainer();\n this.wireEvents();\n this.initRender = false;\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n _this.refreshOverflow();\n _this.refreshActiveBorder();\n });\n }\n };\n Tab.prototype.renderContainer = function () {\n var ele = this.element;\n this.items.forEach(function (item, index) {\n if (isNullOrUndefined(item.id) && !isNullOrUndefined(item.setProperties)) {\n item.setProperties({ id: TABITEMPREFIX + index.toString() }, true);\n }\n });\n if (this.items.length > 0 && ele.children.length === 0) {\n ele.appendChild(this.createElement('div', { className: CLS_CONTENT$1 }));\n this.setOrientation(this.headerPlacement, this.createElement('div', { className: CLS_HEADER$1 }));\n this.isTemplate = false;\n }\n else if (this.element.children.length > 0) {\n this.isTemplate = true;\n ele.classList.add(CLS_TEMPLATE$1);\n var header = ele.querySelector('.' + CLS_HEADER$1);\n if (header && this.headerPlacement === 'Bottom') {\n this.setOrientation(this.headerPlacement, header);\n }\n }\n if (!isNullOrUndefined(select('.' + CLS_HEADER$1, this.element)) && !isNullOrUndefined(select('.' + CLS_CONTENT$1, this.element))) {\n this.renderHeader();\n this.tbItems = select('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEMS, this.element);\n if (!isNullOrUndefined(this.tbItems)) {\n rippleEffect(this.tbItems, { selector: '.e-tab-wrap' });\n }\n this.renderContent();\n if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {\n this.tbItems = select('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEMS, this.element);\n this.bdrLine = this.createElement('div', { className: CLS_INDICATOR + ' ' + CLS_HIDDEN$1 + ' ' + CLS_IGNORE });\n var scrCnt = select('.' + this.scrCntClass, this.tbItems);\n if (!isNullOrUndefined(scrCnt)) {\n scrCnt.insertBefore(this.bdrLine, scrCnt.firstChild);\n }\n else {\n this.tbItems.insertBefore(this.bdrLine, this.tbItems.firstChild);\n }\n this.setContentHeight(true);\n this.select(this.selectedItem);\n }\n this.setRTL(this.enableRtl);\n }\n };\n Tab.prototype.renderHeader = function () {\n var _this = this;\n var hdrPlace = this.headerPlacement;\n var tabItems = [];\n this.hdrEle = this.getTabHeader();\n this.addVerticalClass();\n if (!this.isTemplate) {\n tabItems = this.parseObject(this.items, 0);\n }\n else {\n if (this.element.children.length > 1 && this.element.children[1].classList.contains(CLS_HEADER$1)) {\n this.setProperties({ headerPlacement: 'Bottom' }, true);\n }\n var count = this.hdrEle.children.length;\n var hdrItems = [];\n for (var i = 0; i < count; i++) {\n hdrItems.push(this.hdrEle.children.item(i));\n }\n if (count > 0) {\n var tabItems_1 = this.createElement('div', { className: CLS_ITEMS$1 });\n this.hdrEle.appendChild(tabItems_1);\n hdrItems.forEach(function (item, index) {\n _this.lastIndex = index;\n var attr = {\n className: CLS_ITEM$2, id: CLS_ITEM$2 + _this.tabId + '_' + index\n };\n var txt = _this.createElement('span', {\n className: CLS_TEXT, attrs: { 'role': 'presentation' }\n }).outerHTML;\n var cont = _this.createElement('div', {\n className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls.outerHTML\n }).outerHTML;\n var wrap = _this.createElement('div', {\n className: CLS_WRAP, innerHTML: cont,\n attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT$1 + _this.tabId + '_' + index, 'aria-disabled': 'false' }\n });\n wrap.querySelector('.' + CLS_TEXT).appendChild(item);\n tabItems_1.appendChild(_this.createElement('div', attr));\n selectAll('.' + CLS_ITEM$2, tabItems_1)[index].appendChild(wrap);\n });\n }\n }\n this.tbObj = new Toolbar({\n width: (hdrPlace === 'Left' || hdrPlace === 'Right') ? 'auto' : '100%',\n height: (hdrPlace === 'Left' || hdrPlace === 'Right') ? '100%' : 'auto',\n overflowMode: this.overflowMode,\n items: (tabItems.length !== 0) ? tabItems : [],\n clicked: this.clickHandler.bind(this),\n scrollStep: this.scrollStep,\n enableHtmlSanitizer: this.enableHtmlSanitizer,\n cssClass: this.cssClass\n });\n this.tbObj.isStringTemplate = true;\n this.tbObj.createElement = this.createElement;\n this.tbObj.appendTo(this.hdrEle);\n attributes(this.hdrEle, { role: 'tablist' });\n if (!isNullOrUndefined(this.element.getAttribute('aria-label'))) {\n this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));\n this.element.removeAttribute('aria-label');\n }\n else if (!isNullOrUndefined(this.element.getAttribute('aria-labelledby'))) {\n this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));\n this.element.removeAttribute('aria-labelledby');\n }\n this.setCloseButton(this.showCloseButton);\n var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);\n if (!isNullOrUndefined(toolbarHeader)) {\n if (isNullOrUndefined(toolbarHeader.id) || toolbarHeader.id === '') {\n toolbarHeader.id = this.element.id + '_' + 'tab_header_items';\n }\n }\n };\n Tab.prototype.renderContent = function () {\n this.cntEle = select('.' + CLS_CONTENT$1, this.element);\n var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);\n if (this.isTemplate) {\n this.cnt = (this.cntEle.children.length > 0) ? this.cntEle.innerHTML : '';\n var contents = this.cntEle.children;\n for (var i = 0; i < hdrItem.length; i++) {\n if (contents.length - 1 >= i) {\n addClass([contents.item(i)], CLS_ITEM$2);\n attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + i });\n contents.item(i).id = CLS_CONTENT$1 + this.tabId + '_' + i;\n }\n }\n }\n };\n Tab.prototype.reRenderItems = function () {\n this.renderContainer();\n if (!isNullOrUndefined(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n };\n Tab.prototype.parseObject = function (items, index) {\n var _this = this;\n var tbItems = Array.prototype.slice.call(selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element));\n var maxId = this.lastIndex;\n if (!this.isReplace && tbItems.length > 0) {\n maxId = this.getMaxIndicesFromItems(tbItems);\n }\n var tItems = [];\n var txtWrapEle;\n var spliceArray = [];\n items.forEach(function (item, i) {\n var pos = (isNullOrUndefined(item.header) || isNullOrUndefined(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNullOrUndefined(item.header) || isNullOrUndefined(item.header.iconCss)) ? '' : item.header.iconCss;\n if ((isNullOrUndefined(item.headerTemplate)) && (isNullOrUndefined(item.header) || isNullOrUndefined(item.header.text) ||\n ((item.header.text.length === 0)) && (css === ''))) {\n spliceArray.push(i);\n return;\n }\n var txt = item.headerTemplate || item.header.text;\n if (typeof txt === 'string' && _this.enableHtmlSanitizer) {\n txt = SanitizeHtmlHelper.sanitize(txt);\n }\n var itemIndex;\n if (_this.isReplace && !isNullOrUndefined(_this.tbId) && _this.tbId !== '') {\n itemIndex = parseInt(_this.tbId.substring(_this.tbId.lastIndexOf('_') + 1), 10);\n _this.tbId = '';\n }\n else {\n itemIndex = index + i;\n }\n _this.lastIndex = ((tbItems.length === 0) ? i : ((_this.isReplace) ? (itemIndex) : (maxId + 1 + i)));\n var disabled = (item.disabled) ? ' ' + CLS_DISABLE$4 + ' ' + CLS_OVERLAY$2 : '';\n var hidden = (item.visible === false) ? ' ' + CLS_HIDDEN$1 : '';\n txtWrapEle = _this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });\n var tHtml = ((txt instanceof Object) ? txt.outerHTML : txt);\n var txtEmpty = (!isNullOrUndefined(tHtml) && tHtml !== '');\n if (!isNullOrUndefined(txt.tagName)) {\n txtWrapEle.appendChild(txt);\n }\n else {\n _this.headerTextCompile(txtWrapEle, txt, i);\n }\n var tEle;\n var icon = _this.createElement('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n });\n var tCont = _this.createElement('div', { className: CLS_TEXT_WRAP });\n tCont.appendChild(txtWrapEle);\n if ((txt !== '' && txt !== undefined) && css !== '') {\n if ((pos === 'left' || pos === 'top')) {\n tCont.insertBefore(icon, tCont.firstElementChild);\n }\n else {\n tCont.appendChild(icon);\n }\n tEle = txtWrapEle;\n _this.isIconAlone = false;\n }\n else {\n tEle = ((css === '') ? txtWrapEle : icon);\n if (tEle === icon) {\n detach(txtWrapEle);\n tCont.appendChild(icon);\n _this.isIconAlone = true;\n }\n }\n var tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();\n var wrapAttrs = (item.disabled) ? { role: 'tab', 'aria-disabled': 'true' } : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };\n tCont.appendChild(_this.btnCls.cloneNode(true));\n var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });\n wrap.appendChild(tCont);\n if (_this.itemIndexArray instanceof Array) {\n _this.itemIndexArray.splice((index + i), 0, CLS_ITEM$2 + _this.tabId + '_' + _this.lastIndex);\n }\n var attrObj = {\n id: CLS_ITEM$2 + _this.tabId + '_' + _this.lastIndex, 'data-id': item.id\n };\n var tItem = { htmlAttributes: attrObj, template: wrap };\n tItem.cssClass = ((item.cssClass !== undefined) ? item.cssClass : ' ') + ' ' + disabled + ' ' + hidden + ' '\n + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');\n if (pos === 'top' || pos === 'bottom') {\n _this.element.classList.add('e-vertical-icon');\n }\n tItems.push(tItem);\n i++;\n });\n if (!this.isAdd) {\n spliceArray.forEach(function (spliceItemIndex) {\n _this.items.splice(spliceItemIndex, 1);\n });\n }\n if (this.isIconAlone) {\n this.element.classList.add(CLS_ICON_TAB);\n }\n else {\n this.element.classList.remove(CLS_ICON_TAB);\n }\n return tItems;\n };\n Tab.prototype.removeActiveClass = function () {\n var tabHeader = this.getTabHeader();\n if (tabHeader) {\n var tabItems = selectAll('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, tabHeader);\n [].slice.call(tabItems).forEach(function (node) { return node.classList.remove(CLS_ACTIVE$1); });\n [].slice.call(tabItems).forEach(function (node) { return node.firstElementChild.setAttribute('aria-selected', 'false'); });\n }\n };\n Tab.prototype.checkPopupOverflow = function (ele) {\n this.tbPop = select('.' + CLS_TB_POP, this.element);\n var popIcon = select('.e-hor-nav', this.element);\n var tbrItems = select('.' + CLS_TB_ITEMS, this.element);\n var lastChild = tbrItems.lastChild;\n var isOverflow = false;\n if (!this.isVertical() && ((this.enableRtl && ((popIcon.offsetLeft + popIcon.offsetWidth) > tbrItems.offsetLeft))\n || (!this.enableRtl && popIcon.offsetLeft < tbrItems.offsetWidth))) {\n isOverflow = true;\n }\n else if (this.isVertical() && (popIcon.offsetTop < lastChild.offsetTop + lastChild.offsetHeight)) {\n isOverflow = true;\n }\n if (isOverflow) {\n ele.classList.add(CLS_TB_POPUP);\n this.tbPop.insertBefore(ele, selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);\n }\n return true;\n };\n Tab.prototype.popupHandler = function (target) {\n var ripEle = target.querySelector('.e-ripple-element');\n if (!isNullOrUndefined(ripEle)) {\n ripEle.outerHTML = '';\n target.querySelector('.' + CLS_WRAP).classList.remove('e-ripple');\n }\n this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);\n var lastChild = this.tbItem[this.tbItem.length - 1];\n if (this.tbItem.length !== 0) {\n target.classList.remove(CLS_TB_POPUP);\n target.removeAttribute('style');\n this.tbItems.appendChild(target);\n this.actEleId = target.id;\n if (this.checkPopupOverflow(lastChild)) {\n var prevEle = this.tbItems.lastChild.previousElementSibling;\n this.checkPopupOverflow(prevEle);\n }\n this.isPopup = true;\n }\n return selectAll('.' + CLS_TB_ITEM, this.tbItems).length - 1;\n };\n Tab.prototype.setCloseButton = function (val) {\n var trg = select('.' + CLS_HEADER$1, this.element);\n if (val === true) {\n trg.classList.add(CLS_CLOSE_SHOW);\n }\n else {\n trg.classList.remove(CLS_CLOSE_SHOW);\n }\n this.refreshOverflow();\n this.refreshActiveTabBorder();\n };\n Tab.prototype.prevCtnAnimation = function (prev, current) {\n var animation;\n var checkRTL = this.enableRtl || this.element.classList.contains(CLS_RTL$4);\n if (this.isPopup || prev <= current) {\n if (this.animation.previous.effect === 'SlideLeftIn') {\n animation = {\n name: 'SlideLeftOut',\n duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing\n };\n }\n else {\n animation = null;\n }\n }\n else {\n if (this.animation.next.effect === 'SlideRightIn') {\n animation = {\n name: 'SlideRightOut',\n duration: this.animation.next.duration, timingFunction: this.animation.next.easing\n };\n }\n else {\n animation = null;\n }\n }\n return animation;\n };\n Tab.prototype.triggerPrevAnimation = function (oldCnt, prevIndex) {\n var _this = this;\n var animateObj = this.prevCtnAnimation(prevIndex, this.selectedItem);\n if (!isNullOrUndefined(animateObj)) {\n animateObj.begin = function () {\n setStyleAttribute(oldCnt, { 'position': 'absolute' });\n oldCnt.classList.add(CLS_PROGRESS);\n oldCnt.classList.add('e-view');\n };\n animateObj.end = function () {\n oldCnt.style.display = 'none';\n oldCnt.classList.remove(CLS_ACTIVE$1);\n oldCnt.classList.remove(CLS_PROGRESS);\n oldCnt.classList.remove('e-view');\n setStyleAttribute(oldCnt, { 'display': '', 'position': '' });\n if (oldCnt.childNodes.length === 0 && !_this.isTemplate) {\n detach(oldCnt);\n }\n };\n new Animation(animateObj).animate(oldCnt);\n }\n else {\n oldCnt.classList.remove(CLS_ACTIVE$1);\n }\n };\n Tab.prototype.triggerAnimation = function (id, value) {\n var _this = this;\n var prevIndex = this.prevIndex;\n var oldCnt;\n var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT$1).children);\n itemCollection.forEach(function (item) {\n if (item.id === _this.prevActiveEle) {\n oldCnt = item;\n }\n });\n var prevEle = this.tbItem[prevIndex];\n var newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (isNullOrUndefined(oldCnt) && !isNullOrUndefined(prevEle)) {\n var idNo = this.extIndex(prevEle.id);\n oldCnt = this.getTrgContent(this.cntEle, idNo);\n }\n if (!isNullOrUndefined(newCnt)) {\n this.prevActiveEle = newCnt.id;\n }\n var isPrevent = isNullOrUndefined(this.animation) || isNullOrUndefined(this.animation.next.effect) || isNullOrUndefined(this.animation.previous.effect)\n || this.animation.previous.effect === 'None' || this.animation.next.effect === 'None';\n if (this.initRender || value === false || isPrevent) {\n if (oldCnt && oldCnt !== newCnt) {\n oldCnt.classList.remove(CLS_ACTIVE$1);\n }\n return;\n }\n var cnt = select('.' + CLS_CONTENT$1, this.element);\n var animateObj;\n if (this.prevIndex > this.selectedItem && !this.isPopup) {\n var openEff = this.animation.previous.effect;\n animateObj = {\n name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),\n duration: (this.animation.previous.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.previous.duration,\n timingFunction: this.animation.previous.easing\n };\n }\n else if (this.isPopup || this.prevIndex < this.selectedItem || this.prevIndex === this.selectedItem) {\n var clsEff = this.animation.next.effect;\n animateObj = {\n name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),\n duration: (this.animation.next.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.next.duration,\n timingFunction: this.animation.next.easing\n };\n }\n animateObj.progress = function () {\n cnt.classList.add(CLS_PROGRESS);\n _this.setActiveBorder();\n };\n animateObj.end = function () {\n cnt.classList.remove(CLS_PROGRESS);\n newCnt.classList.add(CLS_ACTIVE$1);\n };\n if (!this.initRender && !isNullOrUndefined(oldCnt)) {\n this.triggerPrevAnimation(oldCnt, prevIndex);\n }\n this.isPopup = false;\n if (animateObj.name === '') {\n newCnt.classList.add(CLS_ACTIVE$1);\n }\n else {\n new Animation(animateObj).animate(newCnt);\n }\n };\n Tab.prototype.keyPressed = function (trg) {\n var trgParent = closest(trg, '.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (!isNullOrUndefined(this.popEle) && trg.classList.contains('e-hor-nav')) {\n (this.popEle.classList.contains(CLS_POPUP_OPEN)) ? this.popObj.hide(this.hide) : this.popObj.show(this.show);\n }\n else if (trg.classList.contains('e-scroll-nav')) {\n trg.click();\n }\n else {\n if (!isNullOrUndefined(trgParent) && trgParent.classList.contains(CLS_ACTIVE$1) === false) {\n this.selectTab(trgIndex, null, true);\n if (!isNullOrUndefined(this.popEle)) {\n this.popObj.hide(this.hide);\n }\n }\n }\n };\n Tab.prototype.getTabHeader = function () {\n if (isNullOrUndefined(this.element)) {\n return undefined;\n }\n var headers = [].slice.call(this.element.children).filter(function (e) { return e.classList.contains(CLS_HEADER$1); });\n if (headers.length > 0) {\n return headers[0];\n }\n else {\n var wrap = [].slice.call(this.element.children).filter(function (e) { return !e.classList.contains(CLS_BLA_TEM); })[0];\n if (!wrap) {\n return undefined;\n }\n return [].slice.call(wrap.children).filter(function (e) { return e.classList.contains(CLS_HEADER$1); })[0];\n }\n };\n Tab.prototype.getEleIndex = function (item) {\n return Array.prototype.indexOf.call(selectAll('.' + CLS_TB_ITEM, this.getTabHeader()), item);\n };\n Tab.prototype.extIndex = function (id) {\n return id.replace(CLS_ITEM$2 + this.tabId + '_', '');\n };\n Tab.prototype.getMaxIndicesFromItems = function (tbItems) {\n var _this = this;\n var idList = [];\n tbItems.forEach(function (item) {\n idList.push(_this.getIndexFromEle(item.id));\n });\n return Math.max.apply(Math, idList);\n };\n Tab.prototype.expTemplateContent = function () {\n var _this = this;\n this.templateEle.forEach(function (eleStr) {\n if (!isNullOrUndefined(_this.element.querySelector(eleStr))) {\n document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';\n }\n });\n };\n Tab.prototype.templateCompile = function (ele, cnt, index) {\n var tempEle = this.createElement('div');\n this.compileElement(tempEle, cnt, 'content', index);\n if (tempEle.childNodes.length !== 0) {\n ele.appendChild(tempEle);\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Tab.prototype.compileElement = function (ele, val, prop, index) {\n var templateFn;\n if (typeof val === 'string') {\n val = val.trim();\n if (this.isVue) {\n templateFn = compile(this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val);\n }\n else {\n ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val;\n }\n }\n else {\n templateFn = compile(val);\n }\n var templateFUN;\n if (!isNullOrUndefined(templateFn)) {\n templateFUN = templateFn({}, this, prop);\n }\n if (!isNullOrUndefined(templateFn) && templateFUN.length > 0) {\n [].slice.call(templateFUN).forEach(function (el) {\n ele.appendChild(el);\n });\n }\n };\n Tab.prototype.headerTextCompile = function (element, text, index) {\n this.compileElement(element, text, 'headerTemplate', index);\n };\n Tab.prototype.getContent = function (ele, cnt, callType, index) {\n var eleStr;\n cnt = isNullOrUndefined(cnt) ? '' : cnt;\n if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {\n if (typeof cnt === 'string' && this.enableHtmlSanitizer) {\n cnt = SanitizeHtmlHelper.sanitize(cnt);\n }\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n if (callType === 'clone') {\n ele.appendChild(eleVal.cloneNode(true));\n }\n else {\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n }\n else {\n this.templateCompile(ele, cnt, index);\n }\n }\n else {\n this.templateCompile(ele, cnt, index);\n }\n }\n else {\n ele.appendChild(cnt);\n }\n if (!isNullOrUndefined(eleStr)) {\n if (this.templateEle.indexOf(cnt.toString()) === -1) {\n this.templateEle.push(cnt.toString());\n }\n }\n };\n Tab.prototype.getTrgContent = function (cntEle, no) {\n var ele;\n if (this.element.classList.contains(CLS_NEST$1)) {\n ele = select('.' + CLS_NEST$1 + '> .' + CLS_CONTENT$1 + ' > #' + CLS_CONTENT$1 + this.tabId + '_' + no, this.element);\n }\n else {\n ele = this.findEle(cntEle.children, CLS_CONTENT$1 + this.tabId + '_' + no);\n }\n return ele;\n };\n Tab.prototype.findEle = function (items, key) {\n var ele;\n for (var i = 0; i < items.length; i++) {\n if (items[i].id === key) {\n ele = items[i];\n break;\n }\n }\n return ele;\n };\n Tab.prototype.isVertical = function () {\n var isVertical = (this.headerPlacement === 'Left' || this.headerPlacement === 'Right') ? true : false;\n this.scrCntClass = (isVertical) ? CLS_VSCRCNT : CLS_HSCRCNT;\n return isVertical;\n };\n Tab.prototype.addVerticalClass = function () {\n if (this.isVertical()) {\n var tbPos = (this.headerPlacement === 'Left') ? CLS_VLEFT : CLS_VRIGHT;\n addClass([this.hdrEle], [CLS_VERTICAL$1, tbPos]);\n if (!this.element.classList.contains(CLS_NEST$1)) {\n addClass([this.element], [CLS_VTAB, tbPos]);\n }\n else {\n addClass([this.hdrEle], [CLS_VTAB, tbPos]);\n }\n }\n if (this.headerPlacement === 'Bottom') {\n addClass([this.hdrEle], [CLS_HBOTTOM]);\n }\n };\n Tab.prototype.updatePopAnimationConfig = function () {\n this.show = { name: (this.isVertical() ? 'FadeIn' : 'SlideDown'), duration: 100 };\n this.hide = { name: (this.isVertical() ? 'FadeOut' : 'SlideUp'), duration: 100 };\n };\n Tab.prototype.changeOrientation = function (place) {\n this.setOrientation(place, this.hdrEle);\n var activeTab = this.hdrEle.querySelector('.' + CLS_ACTIVE$1);\n var isVertical = this.hdrEle.classList.contains(CLS_VERTICAL$1) ? true : false;\n removeClass([this.element], [CLS_VTAB]);\n removeClass([this.hdrEle], [CLS_VERTICAL$1, CLS_VLEFT, CLS_VRIGHT]);\n if (isVertical !== this.isVertical()) {\n this.changeToolbarOrientation();\n if (!isNullOrUndefined(activeTab) && activeTab.classList.contains(CLS_TB_POPUP)) {\n this.popupHandler(activeTab);\n }\n }\n this.addVerticalClass();\n this.setActiveBorder();\n this.focusItem();\n };\n Tab.prototype.focusItem = function () {\n var curActItem = select(' #' + CLS_ITEM$2 + this.tabId + '_' + this.selectedItem, this.hdrEle);\n if (!isNullOrUndefined(curActItem)) {\n curActItem.firstElementChild.focus();\n }\n };\n Tab.prototype.changeToolbarOrientation = function () {\n this.tbObj.setProperties({ height: (this.isVertical() ? '100%' : 'auto'), width: (this.isVertical() ? 'auto' : '100%') }, true);\n this.tbObj.changeOrientation();\n this.updatePopAnimationConfig();\n };\n Tab.prototype.setOrientation = function (place, ele) {\n var headerPos = Array.prototype.indexOf.call(this.element.children, ele);\n var contentPos = Array.prototype.indexOf.call(this.element.children, this.element.querySelector('.' + CLS_CONTENT$1));\n if (place === 'Bottom' && (contentPos > headerPos)) {\n this.element.appendChild(ele);\n }\n else {\n removeClass([ele], [CLS_HBOTTOM]);\n this.element.insertBefore(ele, select('.' + CLS_CONTENT$1, this.element));\n }\n };\n Tab.prototype.setCssClass = function (ele, cls, val) {\n if (cls === '' || isNullOrUndefined(cls)) {\n return;\n }\n var list = cls.split(' ');\n for (var i = 0; i < list.length; i++) {\n if (val) {\n ele.classList.add(list[i]);\n }\n else {\n ele.classList.remove(list[i]);\n }\n }\n };\n Tab.prototype.setContentHeight = function (val) {\n if (this.element.classList.contains(CLS_FILL)) {\n removeClass([this.element], [CLS_FILL]);\n }\n if (isNullOrUndefined(this.cntEle)) {\n return;\n }\n var hdrEle = this.getTabHeader();\n if (this.heightAdjustMode === 'None') {\n if (this.height === 'auto') {\n return;\n }\n else {\n if (!this.isVertical()) {\n setStyleAttribute(this.cntEle, { 'height': (this.element.clientHeight - hdrEle.offsetHeight) + 'px' });\n }\n }\n }\n else if (this.heightAdjustMode === 'Fill') {\n addClass([this.element], [CLS_FILL]);\n setStyleAttribute(this.element, { 'height': '100%' });\n this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';\n }\n else if (this.heightAdjustMode === 'Auto') {\n if (this.isTemplate === true) {\n var cnt = selectAll('.' + CLS_CONTENT$1 + ' > .' + CLS_ITEM$2, this.element);\n for (var i = 0; i < cnt.length; i++) {\n cnt[i].setAttribute('style', 'display:block; visibility: visible');\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(cnt[i]));\n cnt[i].style.removeProperty('display');\n cnt[i].style.removeProperty('visibility');\n }\n }\n else {\n this.cntEle = select('.' + CLS_CONTENT$1, this.element);\n if (val === true) {\n this.cntEle.appendChild(this.createElement('div', {\n id: (CLS_CONTENT$1 + this.tabId + '_' + 0), className: CLS_ITEM$2 + ' ' + CLS_ACTIVE$1,\n attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + 0 }\n }));\n }\n var ele = this.cntEle.children.item(0);\n for (var i = 0; i < this.items.length; i++) {\n this.getContent(ele, this.items[i].content, 'clone', i);\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(ele));\n while (ele.firstChild) {\n ele.removeChild(ele.firstChild);\n }\n }\n if (this.isReact || this.isAngular || this.isVue) {\n this.clearTemplate(['content']);\n }\n this.templateEle = [];\n this.getContent(ele, this.items[0].content, 'render', 0);\n if (this.prevIndex !== this.selectedItem) {\n ele.classList.remove(CLS_ACTIVE$1);\n }\n }\n setStyleAttribute(this.cntEle, { 'height': this.maxHeight + 'px' });\n }\n else {\n setStyleAttribute(this.cntEle, { 'height': 'auto' });\n }\n };\n Tab.prototype.getHeight = function (ele) {\n var cs = window.getComputedStyle(ele);\n return ele.offsetHeight + parseFloat(cs.getPropertyValue('padding-top')) + parseFloat(cs.getPropertyValue('padding-bottom')) +\n parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));\n };\n Tab.prototype.setActiveBorder = function () {\n var trgHdrEle = this.getTabHeader();\n var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, trgHdrEle);\n if (isNullOrUndefined(trg)) {\n return;\n }\n if (!this.reorderActiveTab) {\n if (trg.classList.contains(CLS_TB_POPUP) && !this.bdrLine.classList.contains(CLS_HIDDEN$1)) {\n this.bdrLine.classList.add(CLS_HIDDEN$1);\n }\n if (trgHdrEle && !trgHdrEle.classList.contains(CLS_REORDER_ACTIVE_ITEM)) {\n trgHdrEle.classList.add(CLS_REORDER_ACTIVE_ITEM);\n }\n }\n else if (trgHdrEle) {\n trgHdrEle.classList.remove(CLS_REORDER_ACTIVE_ITEM);\n }\n var root = closest(trg, '.' + CLS_TAB);\n if (this.element !== root) {\n return;\n }\n this.tbItems = select('.' + CLS_TB_ITEMS, trgHdrEle);\n var bar = select('.' + CLS_INDICATOR, trgHdrEle);\n var scrollCnt = select('.' + CLS_TB_ITEMS + ' .' + this.scrCntClass, trgHdrEle);\n if (this.isVertical()) {\n setStyleAttribute(bar, { 'left': '', 'right': '' });\n var tbHeight = (isNullOrUndefined(scrollCnt)) ? this.tbItems.offsetHeight : scrollCnt.offsetHeight;\n if (tbHeight !== 0) {\n setStyleAttribute(bar, { 'top': trg.offsetTop + 'px', 'height': trg.offsetHeight + 'px' });\n }\n else {\n setStyleAttribute(bar, { 'top': 0, 'height': 0 });\n }\n }\n else {\n if (this.overflowMode === 'MultiRow') {\n var top_1 = this.headerPlacement === 'Bottom' ? trg.offsetTop : trg.offsetHeight + trg.offsetTop;\n setStyleAttribute(bar, { 'top': top_1 + 'px', 'height': '' });\n }\n else {\n setStyleAttribute(bar, { 'top': '', 'height': '' });\n }\n var tbWidth = (isNullOrUndefined(scrollCnt)) ? this.tbItems.offsetWidth : scrollCnt.offsetWidth;\n if (tbWidth !== 0) {\n setStyleAttribute(bar, { 'left': trg.offsetLeft + 'px', 'right': tbWidth - (trg.offsetLeft + trg.offsetWidth) + 'px' });\n }\n else {\n setStyleAttribute(bar, { 'left': 'auto', 'right': 'auto' });\n }\n }\n if (!isNullOrUndefined(this.bdrLine) && !trg.classList.contains(CLS_TB_POPUP)) {\n this.bdrLine.classList.remove(CLS_HIDDEN$1);\n }\n };\n Tab.prototype.setActive = function (value, skipDataBind, isInteracted) {\n if (skipDataBind === void 0) { skipDataBind = false; }\n if (isInteracted === void 0) { isInteracted = false; }\n this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());\n var trg = this.tbItem[value];\n if (value < 0 || isNaN(value) || this.tbItem.length === 0 || !isNullOrUndefined(trg) && trg.classList.contains(CLS_DISABLE$4)) {\n return;\n }\n if (value >= 0 && !skipDataBind) {\n this.allowServerDataBinding = false;\n this.setProperties({ selectedItem: value }, true);\n this.allowServerDataBinding = true;\n if (!this.initRender) {\n this.serverDataBind();\n }\n }\n if (trg.classList.contains(CLS_ACTIVE$1)) {\n this.setActiveBorder();\n return;\n }\n if (!this.isTemplate) {\n attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });\n }\n var id = trg.id;\n this.removeActiveClass();\n trg.classList.add(CLS_ACTIVE$1);\n trg.firstElementChild.setAttribute('aria-selected', 'true');\n var no = Number(this.extIndex(id));\n if (isNullOrUndefined(this.prevActiveEle)) {\n this.prevActiveEle = CLS_CONTENT$1 + this.tabId + '_' + no;\n }\n if (this.isTemplate) {\n if (select('.' + CLS_CONTENT$1, this.element).children.length > 0) {\n var trg_1 = this.findEle(select('.' + CLS_CONTENT$1, this.element).children, CLS_CONTENT$1 + this.tabId + '_' + no);\n if (!isNullOrUndefined(trg_1)) {\n trg_1.classList.add(CLS_ACTIVE$1);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n }\n else {\n this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT$1, this.element);\n var item = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (isNullOrUndefined(item)) {\n this.cntEle.appendChild(this.createElement('div', {\n id: CLS_CONTENT$1 + this.tabId + '_' + this.extIndex(id), className: CLS_ITEM$2 + ' ' + CLS_ACTIVE$1,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + this.extIndex(id) }\n }));\n var eleTrg = this.getTrgContent(this.cntEle, this.extIndex(id));\n var itemIndex = Array.prototype.indexOf.call(this.itemIndexArray, id);\n this.getContent(eleTrg, this.items[itemIndex].content, 'render', itemIndex);\n }\n else {\n item.classList.add(CLS_ACTIVE$1);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n this.setActiveBorder();\n this.refreshItemVisibility(trg);\n if (!this.initRender && !skipDataBind) {\n var eventArg = {\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: trg,\n selectedIndex: value,\n selectedContent: select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content),\n isSwiped: this.isSwiped,\n isInteracted: isInteracted,\n preventFocus: false\n };\n this.trigger('selected', eventArg, function (selectEventArgs) {\n if (!selectEventArgs.preventFocus) {\n trg.firstElementChild.focus();\n }\n });\n }\n };\n Tab.prototype.setItems = function (items) {\n this.isReplace = true;\n this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());\n this.tbObj.items = this.parseObject(items, 0);\n this.tbObj.dataBind();\n this.isReplace = false;\n };\n Tab.prototype.setRTL = function (value) {\n this.tbObj.enableRtl = value;\n this.tbObj.dataBind();\n this.setCssClass(this.element, CLS_RTL$4, value);\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshActiveBorder = function () {\n if (!isNullOrUndefined(this.bdrLine)) {\n this.bdrLine.classList.add(CLS_HIDDEN$1);\n }\n this.setActiveBorder();\n };\n Tab.prototype.showPopup = function (config) {\n var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);\n if (tbPop && tbPop.classList.contains('e-popup-close')) {\n var tbPopObj = (tbPop && tbPop.ej2_instances[0]);\n tbPopObj.position.X = (this.headerPlacement === 'Left' || this.element.classList.contains(CLS_RTL$4)) ? 'left' : 'right';\n tbPopObj.dataBind();\n tbPopObj.show(config);\n }\n };\n Tab.prototype.bindDraggable = function () {\n var _this = this;\n if (this.allowDragAndDrop) {\n var tabHeader = this.element.querySelector('.' + CLS_HEADER$1);\n if (tabHeader) {\n var items = Array.prototype.slice.call(tabHeader.querySelectorAll('.' + CLS_TB_ITEM));\n items.forEach(function (element) {\n _this.initializeDrag(element);\n });\n }\n }\n };\n Tab.prototype.wireEvents = function () {\n this.bindDraggable();\n window.addEventListener('resize', this.resizeContext);\n EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);\n EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);\n if (!isNullOrUndefined(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });\n this.tabKeyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyHandler.bind(this),\n keyConfigs: { openPopup: 'shift+f10', tab: 'tab', shiftTab: 'shift+tab' },\n eventName: 'keydown'\n });\n };\n Tab.prototype.unWireEvents = function () {\n if (!isNullOrUndefined(this.keyModule)) {\n this.keyModule.destroy();\n }\n if (!isNullOrUndefined(this.tabKeyModule)) {\n this.tabKeyModule.destroy();\n }\n if (!isNullOrUndefined(this.cntEle) && !isNullOrUndefined(this.touchModule)) {\n this.touchModule.destroy();\n this.touchModule = null;\n }\n window.removeEventListener('resize', this.resizeContext);\n EventHandler.remove(this.element, 'mouseover', this.hoverHandler);\n EventHandler.remove(this.element, 'keydown', this.spaceKeyDown);\n this.element.classList.remove(CLS_RTL$4);\n this.element.classList.remove(CLS_FOCUS);\n };\n Tab.prototype.clickHandler = function (args) {\n this.element.classList.remove(CLS_FOCUS);\n var trg = args.originalEvent.target;\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (trg.classList.contains(CLS_ICON_CLOSE)) {\n this.removeTab(trgIndex);\n }\n else if (this.isVertical() && closest(trg, '.' + CLS_HOR_NAV)) {\n this.showPopup(this.show);\n }\n else {\n this.isPopup = false;\n if (!isNullOrUndefined(trgParent) && (trgIndex !== this.selectedItem)) {\n this.selectTab(trgIndex, args.originalEvent, true);\n }\n }\n };\n Tab.prototype.swipeHandler = function (e) {\n if (e.velocity < 3 && isNullOrUndefined(e.originalEvent.changedTouches)) {\n return;\n }\n if (this.isNested) {\n this.element.setAttribute('data-swipe', 'true');\n }\n var nestedTab = this.element.querySelector('[data-swipe=\"true\"]');\n if (nestedTab) {\n nestedTab.removeAttribute('data-swipe');\n return;\n }\n this.isSwiped = true;\n if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {\n for (var k = this.selectedItem - 1; k >= 0; k--) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN$1)) {\n this.selectTab(k, null, true);\n break;\n }\n }\n }\n else if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {\n for (var i = this.selectedItem + 1; i < this.tbItem.length; i++) {\n if (!this.tbItem[i].classList.contains(CLS_HIDDEN$1)) {\n this.selectTab(i, null, true);\n break;\n }\n }\n }\n this.isSwiped = false;\n };\n Tab.prototype.spaceKeyDown = function (e) {\n if ((e.keyCode === 32 && e.which === 32) || (e.keyCode === 35 && e.which === 35)) {\n var clstHead = closest(e.target, '.' + CLS_HEADER$1);\n if (!isNullOrUndefined(clstHead)) {\n e.preventDefault();\n }\n }\n };\n Tab.prototype.keyHandler = function (e) {\n if (this.element.classList.contains(CLS_DISABLE$4)) {\n return;\n }\n this.element.classList.add(CLS_FOCUS);\n var trg = e.target;\n var tabHeader = this.getTabHeader();\n var actEle = select('.' + CLS_ACTIVE$1, tabHeader);\n this.popEle = select('.' + CLS_TB_POP, tabHeader);\n if (!isNullOrUndefined(this.popEle)) {\n this.popObj = this.popEle.ej2_instances[0];\n }\n var item = closest(document.activeElement, '.' + CLS_TB_ITEM);\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n switch (e.action) {\n case 'space':\n case 'enter':\n if (trg.parentElement.classList.contains(CLS_DISABLE$4)) {\n return;\n }\n if (e.action === 'enter' && trg.classList.contains('e-hor-nav')) {\n this.showPopup(this.show);\n break;\n }\n this.keyPressed(trg);\n break;\n case 'tab':\n case 'shiftTab':\n if (trg.classList.contains(CLS_WRAP)\n && closest(trg, '.' + CLS_TB_ITEM).classList.contains(CLS_ACTIVE$1) === false) {\n trg.setAttribute('tabindex', trg.getAttribute('data-tabindex'));\n }\n if (this.popObj && isVisible(this.popObj.element)) {\n this.popObj.hide(this.hide);\n }\n if (!isNullOrUndefined(actEle) && actEle.children.item(0).getAttribute('tabindex') === '-1') {\n actEle.children.item(0).setAttribute('tabindex', '0');\n }\n break;\n case 'moveLeft':\n case 'moveRight':\n if (!isNullOrUndefined(item)) {\n this.refreshItemVisibility(item);\n }\n break;\n case 'openPopup':\n e.preventDefault();\n if (!isNullOrUndefined(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {\n this.popObj.show(this.show);\n }\n break;\n case 'delete':\n if (this.showCloseButton === true && !isNullOrUndefined(trgParent)) {\n var nxtSib = trgParent.nextSibling;\n if (!isNullOrUndefined(nxtSib) && nxtSib.classList.contains(CLS_TB_ITEM)) {\n nxtSib.firstElementChild.focus();\n }\n this.removeTab(this.getEleIndex(trgParent));\n }\n this.setActiveBorder();\n break;\n }\n };\n Tab.prototype.refreshItemVisibility = function (target) {\n var scrCnt = select('.' + this.scrCntClass, this.tbItems);\n if (!this.isVertical() && !isNullOrUndefined(scrCnt)) {\n var scrBar = select('.e-hscroll-bar', this.tbItems);\n var scrStart = scrBar.scrollLeft;\n var scrEnd = scrStart + scrBar.offsetWidth;\n var eleStart = target.offsetLeft;\n var eleWidth = target.offsetWidth;\n var eleEnd = target.offsetLeft + target.offsetWidth;\n if ((scrStart < eleStart) && (scrEnd < eleEnd)) {\n var eleViewRange = scrEnd - eleStart;\n scrBar.scrollLeft = scrStart + (eleWidth - eleViewRange);\n }\n else {\n if ((scrStart > eleStart) && (scrEnd > eleEnd)) {\n var eleViewRange = eleEnd - scrStart;\n scrBar.scrollLeft = scrStart - (eleWidth - eleViewRange);\n }\n }\n }\n else {\n return;\n }\n };\n Tab.prototype.getIndexFromEle = function (id) {\n return parseInt(id.substring(id.lastIndexOf('_') + 1), 10);\n };\n Tab.prototype.hoverHandler = function (e) {\n var trg = e.target;\n if (!isNullOrUndefined(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {\n trg.setAttribute('title', new L10n('tab', { closeButtonTitle: this.title }, this.locale).getConstant('closeButtonTitle'));\n }\n };\n Tab.prototype.evalOnPropertyChangeItems = function (newProp, oldProp) {\n var _this = this;\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var i = 0; i < changedProp.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var properties = Object.keys(newProp.items[index]);\n for (var j = 0; j < properties.length; j++) {\n var oldVal = Object(oldProp.items[index])[properties[j]];\n var newVal = Object(newProp.items[index])[properties[j]];\n var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];\n var itemIndex = void 0;\n if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {\n itemIndex = this.getIndexFromEle(hdr.id);\n }\n else {\n itemIndex = index;\n }\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);\n var cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);\n if (properties[j] === 'header' || properties[j] === 'headerTemplate') {\n var icon = (isNullOrUndefined(this.items[index].header) ||\n isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;\n var textVal = this.items[index].headerTemplate || this.items[index].header.text;\n if (properties[j] === 'headerTemplate') {\n this.clearTabTemplate(hdrItem, properties[j], CLS_TB_ITEM);\n }\n if ((textVal === '') && (icon === '')) {\n this.removeTab(index);\n }\n else {\n this.tbId = hdr.id;\n var arr = [];\n arr.push(this.items[index]);\n this.items.splice(index, 1);\n this.itemIndexArray.splice(index, 1);\n this.tbObj.items.splice(index, 1);\n var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN$1);\n detach(hdrItem);\n this.isReplace = true;\n this.addTab(arr, index);\n if (isHiddenEle) {\n this.hideTab(index);\n }\n this.isReplace = false;\n }\n }\n if (properties[j] === 'content' && !isNullOrUndefined(cntItem)) {\n var strVal = typeof newVal === 'string' || isNullOrUndefined(newVal.innerHTML);\n if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {\n var eleVal = document.querySelector(newVal);\n cntItem.appendChild(eleVal);\n eleVal.style.display = '';\n }\n else if (newVal === '' && oldVal[0] === '#') {\n document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';\n cntItem.innerHTML = newVal;\n }\n else if (this.isAngular || this.isReact) {\n this.clearTabTemplate(cntItem, properties[j], CLS_ITEM$2);\n cntItem.innerHTML = '';\n this.templateCompile(cntItem, newVal, index);\n }\n else if (typeof newVal !== 'function') {\n cntItem.innerHTML = newVal;\n }\n }\n if (properties[j] === 'cssClass') {\n if (!isNullOrUndefined(hdrItem)) {\n hdrItem.classList.remove(oldVal);\n hdrItem.classList.add(newVal);\n }\n if (!isNullOrUndefined(cntItem)) {\n cntItem.classList.remove(oldVal);\n cntItem.classList.add(newVal);\n }\n }\n if (properties[j] === 'disabled') {\n this.enableTab(index, ((newVal === true) ? false : true));\n }\n if (properties[j] === 'visible') {\n this.hideTab(index, ((newVal === true) ? false : true));\n }\n }\n }\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n _this.refreshActiveTabBorder();\n });\n }\n }\n else {\n this.lastIndex = 0;\n if (isNullOrUndefined(this.tbObj)) {\n this.reRenderItems();\n }\n else {\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n this.setItems(newProp.items);\n if (this.templateEle.length > 0) {\n this.expTemplateContent();\n }\n this.templateEle = [];\n var selectElement = select('.' + CLS_TAB + ' > .' + CLS_CONTENT$1, this.element);\n while (selectElement.firstElementChild) {\n detach(selectElement.firstElementChild);\n }\n this.select(this.selectedItem);\n this.draggableItems = [];\n this.bindDraggable();\n }\n }\n };\n Tab.prototype.clearTabTemplate = function (templateEle, templateName, className) {\n if (!this.clearTemplates) {\n return;\n }\n if (this.registeredTemplate && this.registeredTemplate[templateName]) {\n var registeredTemplates = this.registeredTemplate;\n for (var index = 0; index < registeredTemplates[templateName].length; index++) {\n var registeredItem = registeredTemplates[templateName][index].rootNodes[0];\n var closestItem = closest(registeredItem, '.' + className);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {\n this.clearTemplate([templateName], [registeredTemplates[templateName][index]]);\n break;\n }\n }\n }\n else if (this.portals && this.portals.length > 0) {\n var portals = this.portals;\n for (var index = 0; index < portals.length; index++) {\n var portalItem = portals[index];\n var closestItem = closest(portalItem.containerInfo, '.' + className);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {\n this.clearTemplate([templateName], index);\n break;\n }\n }\n }\n };\n Tab.prototype.initializeDrag = function (target) {\n var _this = this;\n var dragObj = new Draggable(target, {\n dragArea: this.dragArea,\n dragTarget: '.' + CLS_TB_ITEM,\n clone: true,\n helper: this.helper.bind(this),\n dragStart: this.itemDragStart.bind(this),\n drag: function (e) {\n var dragIndex = _this.getEleIndex(_this.dragItem);\n var dropIndex;\n var dropItem;\n var dragArgs = {\n draggedItem: _this.dragItem,\n event: e.event,\n target: e.target,\n droppedItem: e.target.closest('.' + CLS_TB_ITEM),\n clonedElement: _this.cloneElement,\n index: dragIndex\n };\n if (!isNullOrUndefined(e.target.closest('.' + CLS_TAB)) && !e.target.closest('.' + CLS_TAB).isEqualNode(_this.element) &&\n _this.dragArea !== '.' + CLS_HEADER$1) {\n _this.trigger('dragging', dragArgs);\n }\n else {\n if (!(e.target.closest(_this.dragArea)) && _this.overflowMode !== 'Popup') {\n document.body.style.cursor = 'not-allowed';\n addClass([_this.cloneElement], CLS_HIDDEN$1);\n if (_this.dragItem.classList.contains(CLS_HIDDEN$1)) {\n removeClass([_this.dragItem], CLS_HIDDEN$1);\n }\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';\n }\n else {\n document.body.style.cursor = '';\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'hidden';\n if (_this.cloneElement.classList.contains(CLS_HIDDEN$1)) {\n removeClass([_this.cloneElement], CLS_HIDDEN$1);\n }\n }\n if (_this.overflowMode === 'Scrollable' && !isNullOrUndefined(_this.element.querySelector('.e-hscroll'))) {\n var scrollRightNavEle = _this.element.querySelector('.e-scroll-right-nav');\n var scrollLeftNavEle = _this.element.querySelector('.e-scroll-left-nav');\n var hscrollBar = _this.element.querySelector('.e-hscroll-bar');\n if (!isNullOrUndefined(scrollRightNavEle) && Math.abs((scrollRightNavEle.offsetWidth / 2) +\n scrollRightNavEle.offsetLeft) > _this.cloneElement.offsetLeft + _this.cloneElement.offsetWidth) {\n hscrollBar.scrollLeft -= 10;\n }\n if (!isNullOrUndefined(scrollLeftNavEle) && Math.abs((scrollLeftNavEle.offsetLeft + scrollLeftNavEle.offsetWidth) -\n _this.cloneElement.offsetLeft) > (scrollLeftNavEle.offsetWidth / 2)) {\n hscrollBar.scrollLeft += 10;\n }\n }\n _this.cloneElement.style.pointerEvents = 'none';\n dropItem = closest(e.target, '.' + CLS_TB_ITEM + '.e-draggable');\n var scrollContentWidth = 0;\n if (_this.overflowMode === 'Scrollable' && !isNullOrUndefined(_this.element.querySelector('.e-hscroll'))) {\n scrollContentWidth = _this.element.querySelector('.e-hscroll-content').offsetWidth;\n }\n if (dropItem != null && !dropItem.isSameNode(_this.dragItem) &&\n dropItem.closest('.' + CLS_TAB).isSameNode(_this.dragItem.closest('.' + CLS_TAB))) {\n dropIndex = _this.getEleIndex(dropItem);\n if (dropIndex < dragIndex &&\n (Math.abs((dropItem.offsetLeft + dropItem.offsetWidth) -\n _this.cloneElement.offsetLeft) > (dropItem.offsetWidth / 2))) {\n _this.dragAction(dropItem, dragIndex, dropIndex);\n }\n if (dropIndex > dragIndex &&\n (Math.abs(dropItem.offsetWidth / 2) + dropItem.offsetLeft -\n scrollContentWidth) < _this.cloneElement.offsetLeft + _this.cloneElement.offsetWidth) {\n _this.dragAction(dropItem, dragIndex, dropIndex);\n }\n }\n _this.droppedIndex = _this.getEleIndex(_this.dragItem);\n _this.trigger('dragging', dragArgs);\n }\n },\n dragStop: this.itemDragStop.bind(this)\n });\n this.draggableItems.push(dragObj);\n };\n Tab.prototype.helper = function (e) {\n this.cloneElement = this.createElement('div');\n if (e.element) {\n this.cloneElement = (e.element.cloneNode(true));\n addClass([this.cloneElement], 'e-tab-clone-element');\n if (this.element.querySelector('.' + CLS_HEADER$1).classList.contains(CLS_CLOSE_SHOW)) {\n addClass([this.cloneElement], CLS_CLOSE_SHOW);\n }\n removeClass([this.cloneElement.querySelector('.' + CLS_WRAP)], 'e-ripple');\n if (!isNullOrUndefined(this.cloneElement.querySelector('.e-ripple-element'))) {\n remove(this.cloneElement.querySelector('.e-ripple-element'));\n }\n document.body.appendChild(this.cloneElement);\n }\n return this.cloneElement;\n };\n Tab.prototype.itemDragStart = function (e) {\n var _this = this;\n this.draggingItems = this.items.map(function (x) { return x; });\n this.dragItem = e.element;\n var dragArgs = {\n draggedItem: e.element,\n event: e.event,\n target: e.target,\n droppedItem: null,\n index: this.getEleIndex(this.dragItem),\n clonedElement: this.cloneElement,\n cancel: false\n };\n this.trigger('onDragStart', dragArgs, function (tabItemDragArgs) {\n if (tabItemDragArgs.cancel) {\n var dragObj = e.element.ej2_instances[0];\n if (!isNullOrUndefined(dragObj)) {\n dragObj.intDestroy(e.event);\n }\n detach(_this.cloneElement);\n }\n else {\n _this.removeActiveClass();\n addClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN$1);\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'hidden';\n }\n });\n };\n Tab.prototype.dragAction = function (dropItem, dragsIndex, dropIndex) {\n if (this.items.length > 0) {\n var item = this.draggingItems[dragsIndex];\n this.draggingItems.splice(dragsIndex, 1);\n this.draggingItems.splice(dropIndex, 0, item);\n }\n if (this.overflowMode === 'MultiRow') {\n dropItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);\n }\n if (dragsIndex > dropIndex) {\n if (!(this.dragItem.parentElement).isSameNode(dropItem.parentElement)) {\n if (this.overflowMode === 'Extended') {\n if (dropItem.isSameNode(dropItem.parentElement.lastChild)) {\n var popupContainer = this.dragItem.parentNode;\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n popupContainer.insertBefore(dropItem.parentElement.lastChild, popupContainer.childNodes[0]);\n }\n else {\n this.dragItem.parentNode.insertBefore((dropItem.parentElement.lastChild), this.dragItem.parentElement.childNodes[0]);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n else {\n var lastEle = (dropItem.parentElement).lastChild;\n if (dropItem.isSameNode(lastEle)) {\n var popupContainer = this.dragItem.parentNode;\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n popupContainer.insertBefore(lastEle, popupContainer.childNodes[0]);\n }\n else {\n this.dragItem.parentNode.insertBefore((dropItem.parentElement).lastChild, this.dragItem.parentElement.childNodes[0]);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n }\n else {\n this.dragItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n if (dragsIndex < dropIndex) {\n if (!(this.dragItem.parentElement).isSameNode(dropItem.parentElement)) {\n if (this.overflowMode === 'Extended') {\n this.dragItem.parentElement.appendChild(dropItem.parentElement.firstElementChild);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem.nextSibling);\n }\n else {\n this.dragItem.parentNode.insertBefore((dropItem.parentElement).lastChild, this.dragItem.parentElement.childNodes[0]);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n else {\n this.dragItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);\n }\n }\n };\n Tab.prototype.itemDragStop = function (e) {\n var _this = this;\n detach(this.cloneElement);\n this.cloneElement = null;\n this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';\n document.body.style.cursor = '';\n var dragStopArgs = {\n draggedItem: this.dragItem,\n event: e.event,\n target: e.target,\n droppedItem: this.tbItem[this.droppedIndex],\n clonedElement: null,\n index: this.droppedIndex,\n cancel: false\n };\n this.trigger('dragged', dragStopArgs, function (tabItemDropArgs) {\n if (tabItemDropArgs.cancel) {\n _this.refresh();\n }\n else {\n if (_this.items.length > 0 && _this.draggingItems.length > 0) {\n _this.items = _this.draggingItems;\n _this.selectedItem = isNullOrUndefined(_this.droppedIndex) ? _this.getEleIndex(_this.dragItem) : _this.droppedIndex;\n _this.refresh();\n }\n else {\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = '';\n removeClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN$1);\n _this.droppedIndex = isNullOrUndefined(_this.droppedIndex) ? _this.getEleIndex(_this.dragItem) : _this.droppedIndex;\n _this.selectTab(_this.droppedIndex, null, true);\n }\n }\n });\n this.dragItem = null;\n this.droppedIndex = null;\n };\n /**\n * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.\n *\n * @param {number} index - Index value of target Tab item.\n * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.\n * By default, isEnable is true.\n * @returns {void}.\n */\n Tab.prototype.enableTab = function (index, value) {\n var tbItems = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNullOrUndefined(tbItems)) {\n return;\n }\n if (value === true) {\n tbItems.classList.remove(CLS_DISABLE$4, CLS_OVERLAY$2);\n tbItems.firstElementChild.setAttribute('tabindex', tbItems.firstElementChild.getAttribute('data-tabindex'));\n }\n else {\n tbItems.classList.add(CLS_DISABLE$4, CLS_OVERLAY$2);\n tbItems.firstElementChild.removeAttribute('tabindex');\n if (tbItems.classList.contains(CLS_ACTIVE$1)) {\n this.select(index + 1);\n }\n }\n if (!isNullOrUndefined(this.items[index])) {\n this.items[index].disabled = !value;\n this.dataBind();\n }\n tbItems.firstElementChild.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');\n };\n /**\n * Adds new items to the Tab that accepts an array as Tab items.\n *\n * @param {TabItemModel[]} items - An array of item that is added to the Tab.\n * @param {number} index - Number value that determines where the items to be added. By default, index is 0.\n * @returns {void}.\n */\n Tab.prototype.addTab = function (items, index) {\n var _this = this;\n var addArgs = { addedItems: items, cancel: false };\n if (!this.isReplace) {\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n item.disabled = item.disabled || false;\n item.visible = item.visible || true;\n }\n this.trigger('adding', addArgs, function (tabAddingArgs) {\n if (!tabAddingArgs.cancel) {\n _this.addingTabContent(items, index);\n }\n });\n }\n else {\n this.addingTabContent(items, index);\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Tab.prototype.addingTabContent = function (items, index) {\n var _this = this;\n var lastEleIndex = 0;\n this.hdrEle = select('.' + CLS_HEADER$1, this.element);\n if (isNullOrUndefined(this.hdrEle)) {\n this.items = items;\n this.reRenderItems();\n this.bindDraggable();\n }\n else {\n var tbItems = Array.from(selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element));\n var itemsCount = tbItems.length;\n if (itemsCount !== 0) {\n lastEleIndex = this.getMaxIndicesFromItems(tbItems) + 1;\n }\n if (isNullOrUndefined(index)) {\n index = itemsCount - 1;\n }\n if (itemsCount < index || index < 0 || isNaN(index)) {\n return;\n }\n if (itemsCount === 0 && !isNullOrUndefined(this.hdrEle)) {\n this.hdrEle.style.display = '';\n }\n if (!isNullOrUndefined(this.bdrLine)) {\n this.bdrLine.classList.add(CLS_HIDDEN$1);\n }\n this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());\n this.isAdd = true;\n var tabItems_2 = this.parseObject(items, index);\n this.isAdd = false;\n var i_1 = 0;\n var textValue_1;\n items.forEach(function (item, place) {\n textValue_1 = item.headerTemplate || item.header.text;\n if (!(isNullOrUndefined(item.headerTemplate || item.header) || isNullOrUndefined(textValue_1) ||\n (textValue_1.length === 0) && !isNullOrUndefined(item.header) && isNullOrUndefined(item.header.iconCss))) {\n if (tabItems_2[place]) {\n if (isNullOrUndefined(item.id)) {\n item.id = CLS_ITEM$2 + _this.tabId + '_' + TABITEMPREFIX + (lastEleIndex + place).toString();\n }\n tabItems_2[place].htmlAttributes['data-id'] = item.id;\n }\n _this.items.splice((index + i_1), 0, item);\n i_1++;\n }\n if (_this.isTemplate && !isNullOrUndefined(item.header) && !isNullOrUndefined(item.header.text)) {\n var no = lastEleIndex + place;\n var ele = _this.createElement('div', {\n id: CLS_CONTENT$1 + _this.tabId + '_' + no, className: CLS_ITEM$2,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + '_' + no }\n });\n _this.cntEle.insertBefore(ele, _this.cntEle.children[(index + place)]);\n var eleTrg = _this.getTrgContent(_this.cntEle, no.toString());\n _this.getContent(eleTrg, item.content, 'render', index);\n }\n });\n this.tbObj.addItems(tabItems_2, index);\n if (!this.isReplace) {\n this.trigger('added', { addedItems: items });\n }\n if (this.selectedItem === index) {\n this.select(index);\n }\n else {\n this.setActiveBorder();\n this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());\n }\n this.bindDraggable();\n }\n };\n /**\n * Removes the items in the Tab from the specified index.\n *\n * @param {number} index - Index of target item that is going to be removed.\n * @returns {void}.\n */\n Tab.prototype.removeTab = function (index) {\n var _this = this;\n var trg = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNullOrUndefined(trg)) {\n return;\n }\n var removeArgs = { removedItem: trg, removedIndex: index, cancel: false };\n this.trigger('removing', removeArgs, function (tabRemovingArgs) {\n if (!tabRemovingArgs.cancel) {\n var header = select('#' + CLS_ITEM$2 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_TB_ITEMS, _this.element));\n if (!isNullOrUndefined(header)) {\n _this.clearTabTemplate(header, 'headerTemplate', CLS_TB_ITEM);\n }\n _this.tbObj.removeItems(index);\n if (_this.allowDragAndDrop && (index !== Array.prototype.indexOf.call(_this.itemIndexArray, trg.id))) {\n index = Array.prototype.indexOf.call(_this.itemIndexArray, trg.id);\n }\n var targetEleIndex = _this.itemIndexArray.indexOf(trg.id);\n _this.items.splice(targetEleIndex, 1);\n _this.itemIndexArray.splice(targetEleIndex, 1);\n _this.refreshActiveBorder();\n var cntTrg = select('#' + CLS_CONTENT$1 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT$1, _this.element));\n if (!isNullOrUndefined(cntTrg)) {\n _this.clearTabTemplate(cntTrg, 'content', CLS_ITEM$2);\n detach(cntTrg);\n }\n _this.trigger('removed', tabRemovingArgs);\n if (_this.draggableItems && _this.draggableItems.length > 0) {\n _this.draggableItems[index].destroy();\n _this.draggableItems[index] = null;\n _this.draggableItems.splice(index, 1);\n }\n if (trg.classList.contains(CLS_ACTIVE$1)) {\n index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', _this.element).length - 1) ? index - 1 : index;\n _this.enableAnimation = false;\n _this.tbItem = selectAll('.' + CLS_TB_ITEM, _this.getTabHeader());\n index = _this.getSelectingTabIndex(index);\n index = !isNaN(index) && index >= 0 && _this.tbItem.length > index ? index : 0;\n _this.selectedItem = index;\n _this.select(index);\n }\n else if (index !== _this.selectedItem) {\n if (index < _this.selectedItem) {\n index = _this.itemIndexArray.indexOf(_this.tbItem[_this.selectedItem].id);\n _this.setProperties({ selectedItem: index > -1 ? index : _this.selectedItem }, true);\n _this.prevIndex = _this.selectedItem;\n }\n _this.tbItem = selectAll('.' + CLS_TB_ITEM, _this.getTabHeader());\n }\n if (selectAll('.' + CLS_TB_ITEM, _this.element).length === 0) {\n _this.hdrEle.style.display = 'none';\n }\n _this.enableAnimation = true;\n }\n });\n };\n /**\n * Shows or hides the Tab that is in the specified index.\n *\n * @param {number} index - Index value of target item.\n * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.\n * @returns {void}.\n */\n Tab.prototype.hideTab = function (index, value) {\n var items;\n var item = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNullOrUndefined(item)) {\n return;\n }\n if (isNullOrUndefined(value)) {\n value = true;\n }\n this.bdrLine.classList.add(CLS_HIDDEN$1);\n if (value === true) {\n item.classList.add(CLS_HIDDEN$1);\n items = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_HIDDEN$1 + ')', this.tbItems);\n if (items.length !== 0 && item.classList.contains(CLS_ACTIVE$1)) {\n if (index !== 0) {\n for (var i = index - 1; i >= 0; i--) {\n if (!this.tbItem[i].classList.contains(CLS_HIDDEN$1)) {\n this.select(i);\n break;\n }\n else if (i === 0) {\n for (var k = index + 1; k < this.tbItem.length; k++) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN$1)) {\n this.select(k);\n break;\n }\n }\n }\n }\n }\n else {\n for (var k = index + 1; k < this.tbItem.length; k++) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN$1)) {\n this.select(k);\n break;\n }\n }\n }\n }\n else if (items.length === 0) {\n this.element.classList.add(CLS_HIDDEN$1);\n }\n }\n else {\n this.element.classList.remove(CLS_HIDDEN$1);\n items = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_HIDDEN$1 + ')', this.tbItems);\n item.classList.remove(CLS_HIDDEN$1);\n if (items.length === 0) {\n this.select(index);\n }\n }\n this.setActiveBorder();\n if (!isNullOrUndefined(this.items[index])) {\n this.items[index].visible = !value;\n this.dataBind();\n }\n if (!isNullOrUndefined(item.firstElementChild)) {\n item.firstElementChild.setAttribute('aria-hidden', '' + value);\n }\n if (this.overflowMode === 'Popup') {\n this.refreshOverflow();\n }\n };\n Tab.prototype.selectTab = function (args, event, isInteracted) {\n if (event === void 0) { event = null; }\n if (isInteracted === void 0) { isInteracted = false; }\n this.isInteracted = isInteracted;\n this.select(args, event);\n };\n /**\n * Specifies the index or HTMLElement to select an item from the Tab.\n *\n * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.\n * @param {Event} event - An event which takes place in DOM.\n * @returns {void}\n */\n Tab.prototype.select = function (args, event) {\n var _this = this;\n var tabHeader = this.getTabHeader();\n this.tbItems = select('.' + CLS_TB_ITEMS, tabHeader);\n this.tbItem = selectAll('.' + CLS_TB_ITEM, tabHeader);\n this.content = select('.' + CLS_CONTENT$1, this.element);\n this.prevItem = this.tbItem[this.prevIndex];\n if (isNullOrUndefined(this.selectedItem) || (this.selectedItem < 0) || (this.tbItem.length <= this.selectedItem) || isNaN(this.selectedItem)) {\n this.selectedItem = 0;\n }\n else {\n this.selectedID = this.extIndex(this.tbItem[this.selectedItem].id);\n }\n var trg = this.tbItem[args];\n if (isNullOrUndefined(trg)) {\n this.selectedID = '0';\n }\n else {\n this.selectingID = this.extIndex(trg.id);\n }\n if (!isNullOrUndefined(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE$4)) {\n this.prevItem.children.item(0).setAttribute('tabindex', this.prevItem.firstElementChild.getAttribute('tabindex'));\n }\n var eventArg = {\n event: event,\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: this.tbItem[this.selectedItem],\n selectedIndex: this.selectedItem,\n selectedContent: !isNullOrUndefined(this.content) ?\n select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectedID, this.content) : null,\n selectingItem: trg,\n selectingIndex: args,\n selectingContent: !isNullOrUndefined(this.content) ?\n select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content) : null,\n isSwiped: this.isSwiped,\n isInteracted: this.isInteracted,\n cancel: false\n };\n if (!this.initRender) {\n this.trigger('selecting', eventArg, function (selectArgs) {\n if (!selectArgs.cancel) {\n _this.selectingContent(args, _this.isInteracted);\n }\n });\n }\n else {\n this.selectingContent(args, this.isInteracted);\n }\n this.isInteracted = false;\n };\n Tab.prototype.getSelectingTabIndex = function (args) {\n if (!isNullOrUndefined(this.tbItem[args]) && (this.tbItem[args].classList.contains(CLS_DISABLE$4) ||\n this.tbItem[args].classList.contains(CLS_HIDDEN$1))) {\n for (var i = args + 1; i < this.items.length; i++) {\n if (this.items[i].disabled === false && this.items[i].visible === true) {\n args = i;\n break;\n }\n else {\n args = 0;\n }\n }\n }\n return args;\n };\n Tab.prototype.selectingContent = function (args, isInteracted) {\n if (typeof args === 'number') {\n args = this.getSelectingTabIndex(args);\n if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {\n this.prevIndex = this.selectedItem;\n this.prevItem = this.tbItem[this.prevIndex];\n if (this.tbItem[args].classList.contains(CLS_TB_POPUP) && this.reorderActiveTab) {\n this.setActive(this.popupHandler(this.tbItem[args]), null, isInteracted);\n if ((!isNullOrUndefined(this.items) && this.items.length > 0) && this.allowDragAndDrop) {\n this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);\n var item = this.items[args];\n this.items.splice(args, 1);\n this.items.splice(this.tbItem.length - 1, 0, item);\n var itemId = this.itemIndexArray[args];\n this.itemIndexArray.splice(args, 1);\n this.itemIndexArray.splice(this.tbItem.length - 1, 0, itemId);\n }\n }\n else {\n this.setActive(args, null, isInteracted);\n }\n }\n else {\n this.setActive(0, null, isInteracted);\n }\n }\n else if (args instanceof (HTMLElement)) {\n this.setActive(this.getEleIndex(args), null, isInteracted);\n }\n };\n /**\n * Gets the item index from the Tab.\n *\n * @param {string} tabItemId - Item ID is used for getting index from the Tab.\n * @returns {number} - It returns item index.\n */\n Tab.prototype.getItemIndex = function (tabItemId) {\n var tabIndex;\n for (var i = 0; i < this.tbItem.length; i++) {\n var value = this.tbItem[i].getAttribute('data-id');\n if (tabItemId === value) {\n tabIndex = i;\n break;\n }\n }\n return tabIndex;\n };\n /**\n * Specifies the value to disable/enable the Tab component.\n * When set to `true`, the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, Tab will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n Tab.prototype.disable = function (value) {\n this.setCssClass(this.element, CLS_DISABLE$4, value);\n this.element.setAttribute('aria-disabled', '' + value);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - It returns the persisted state.\n */\n Tab.prototype.getPersistData = function () {\n return this.addOnPersist(['selectedItem', 'actEleId']);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n Tab.prototype.getModuleName = function () {\n return 'tab';\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n *\n * @param {TabModel} newProp - It contains the new value of data.\n * @param {TabModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n Tab.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n var sortedKeys = Object.keys(newProp).sort(function (a, b) {\n if (a === 'items')\n return -1;\n if (b === 'items')\n return 1;\n return 0;\n });\n for (var _i = 0, sortedKeys_1 = sortedKeys; _i < sortedKeys_1.length; _i++) {\n var prop = sortedKeys_1[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.element, { width: formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { height: formatUnit(newProp.height) });\n this.setContentHeight(false);\n break;\n case 'cssClass':\n var headerEle = this.element.querySelector('.' + CLS_HEADER$1);\n if (oldProp.cssClass !== '' && !isNullOrUndefined(oldProp.cssClass)) {\n this.setCssClass(this.element, oldProp.cssClass, false);\n this.setCssClass(this.element, newProp.cssClass, true);\n if (!isNullOrUndefined(headerEle)) {\n this.setCssClass(headerEle, oldProp.cssClass, false);\n this.setCssClass(headerEle, newProp.cssClass, true);\n }\n }\n else {\n this.setCssClass(this.element, newProp.cssClass, true);\n if (!isNullOrUndefined(headerEle)) {\n this.setCssClass(headerEle, newProp.cssClass, true);\n }\n }\n break;\n case 'items':\n this.evalOnPropertyChangeItems(newProp, oldProp);\n break;\n case 'showCloseButton':\n this.setCloseButton(newProp.showCloseButton);\n break;\n case 'reorderActiveTab':\n this.refreshActiveTabBorder();\n break;\n case 'selectedItem':\n this.selectedItem = oldProp.selectedItem;\n this.select(newProp.selectedItem);\n break;\n case 'headerPlacement':\n this.changeOrientation(newProp.headerPlacement);\n break;\n case 'enableRtl':\n this.setRTL(newProp.enableRtl);\n break;\n case 'overflowMode':\n this.tbObj.overflowMode = newProp.overflowMode;\n this.tbObj.dataBind();\n this.refreshActiveTabBorder();\n break;\n case 'heightAdjustMode':\n this.setContentHeight(false);\n this.select(this.selectedItem);\n break;\n case 'scrollStep':\n if (this.tbObj) {\n this.tbObj.scrollStep = this.scrollStep;\n }\n break;\n case 'allowDragAndDrop':\n this.bindDraggable();\n break;\n case 'dragArea':\n if (this.allowDragAndDrop) {\n this.draggableItems.forEach(function (item) {\n item.dragArea = _this.dragArea;\n });\n this.refresh();\n }\n break;\n }\n }\n };\n /**\n * To refresh the active tab contents.\n *\n * @returns {void}\n */\n Tab.prototype.refreshActiveTab = function () {\n if (this.isReact && this.isTemplate) {\n this.clearTemplate();\n }\n if (!this.isTemplate) {\n if (this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1)) {\n detach(this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1).children[0]);\n detach(this.element.querySelector('.' + CLS_CONTENT$1).querySelector('.' + CLS_ACTIVE$1).children[0]);\n var item = this.items[this.selectedItem];\n var pos = (isNullOrUndefined(item.header) || isNullOrUndefined(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNullOrUndefined(item.header) || isNullOrUndefined(item.header.iconCss)) ? '' : item.header.iconCss;\n var text = item.headerTemplate || item.header.text;\n var txtWrap = this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });\n if (!isNullOrUndefined(text.tagName)) {\n txtWrap.appendChild(text);\n }\n else {\n this.headerTextCompile(txtWrap, text, this.selectedItem);\n }\n var tEle = void 0;\n var icon = this.createElement('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n });\n var tConts = this.createElement('div', { className: CLS_TEXT_WRAP });\n tConts.appendChild(txtWrap);\n if ((text !== '' && text !== undefined) && css !== '') {\n if ((pos === 'left' || pos === 'top')) {\n tConts.insertBefore(icon, tConts.firstElementChild);\n }\n else {\n tConts.appendChild(icon);\n }\n tEle = txtWrap;\n this.isIconAlone = false;\n }\n else {\n tEle = ((css === '') ? txtWrap : icon);\n if (tEle === icon) {\n detach(txtWrap);\n tConts.appendChild(icon);\n this.isIconAlone = true;\n }\n }\n var tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();\n var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true', 'aria-disabled': 'false' };\n tConts.appendChild(this.btnCls.cloneNode(true));\n var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });\n wraper.appendChild(tConts);\n if (pos === 'top' || pos === 'bottom') {\n this.element.classList.add('e-vertical-icon');\n }\n this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1).appendChild(wraper);\n var crElem = this.createElement('div');\n var cnt = item.content;\n var eleStr = void 0;\n if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {\n if (typeof cnt === 'string' && this.enableHtmlSanitizer) {\n cnt = SanitizeHtmlHelper.sanitize(cnt);\n }\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n crElem.appendChild(eleVal);\n eleVal.style.display = '';\n }\n else {\n this.compileElement(crElem, cnt, 'content', this.selectedItem);\n }\n }\n else {\n this.compileElement(crElem, cnt, 'content', this.selectedItem);\n }\n }\n else {\n crElem.appendChild(cnt);\n }\n if (!isNullOrUndefined(eleStr)) {\n if (this.templateEle.indexOf(cnt.toString()) === -1) {\n this.templateEle.push(cnt.toString());\n }\n }\n this.element.querySelector('.' + CLS_ITEM$2 + '.' + CLS_ACTIVE$1).appendChild(crElem);\n }\n }\n else {\n var tabItems = this.element.querySelector('.' + CLS_TB_ITEMS);\n var element = this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1);\n var index = this.getIndexFromEle(element.id);\n var header = element.innerText;\n var detachContent = this.element.querySelector('.' + CLS_CONTENT$1).querySelector('.' + CLS_ACTIVE$1).children[0];\n var mainContents = detachContent.innerHTML;\n detach(element);\n detach(detachContent);\n var attr = {\n className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE$1 + ' ' + CLS_ACTIVE$1, id: CLS_ITEM$2 + this.tabId + '_' + index\n };\n var txtString = this.createElement('span', {\n className: CLS_TEXT, innerHTML: header, attrs: { 'role': 'presentation' }\n }).outerHTML;\n var conte = this.createElement('div', {\n className: CLS_TEXT_WRAP, innerHTML: txtString + this.btnCls.outerHTML\n }).outerHTML;\n var tabIndex = element.firstElementChild.getAttribute('data-tabindex');\n var wrap = this.createElement('div', {\n className: CLS_WRAP, innerHTML: conte,\n attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + index, 'aria-selected': 'true', 'aria-disabled': 'false' }\n });\n tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);\n this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1).appendChild(wrap);\n var crElem = this.createElement('div', { innerHTML: mainContents });\n this.element.querySelector('.' + CLS_CONTENT$1).querySelector('.' + CLS_ACTIVE$1).appendChild(crElem);\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * To refresh the active tab indicator.\n *\n * @returns {void}\n */\n Tab.prototype.refreshActiveTabBorder = function () {\n var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE$1, this.element);\n if (!isNullOrUndefined(activeEle) && this.reorderActiveTab) {\n this.select(this.getEleIndex(activeEle));\n }\n this.refreshActiveBorder();\n };\n __decorate$7([\n Collection([], TabItem)\n ], Tab.prototype, \"items\", void 0);\n __decorate$7([\n Property('100%')\n ], Tab.prototype, \"width\", void 0);\n __decorate$7([\n Property('auto')\n ], Tab.prototype, \"height\", void 0);\n __decorate$7([\n Property('')\n ], Tab.prototype, \"cssClass\", void 0);\n __decorate$7([\n Property(0)\n ], Tab.prototype, \"selectedItem\", void 0);\n __decorate$7([\n Property('Top')\n ], Tab.prototype, \"headerPlacement\", void 0);\n __decorate$7([\n Property('Content')\n ], Tab.prototype, \"heightAdjustMode\", void 0);\n __decorate$7([\n Property('Scrollable')\n ], Tab.prototype, \"overflowMode\", void 0);\n __decorate$7([\n Property('Dynamic')\n ], Tab.prototype, \"loadOn\", void 0);\n __decorate$7([\n Property(false)\n ], Tab.prototype, \"enablePersistence\", void 0);\n __decorate$7([\n Property(true)\n ], Tab.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$7([\n Property(false)\n ], Tab.prototype, \"showCloseButton\", void 0);\n __decorate$7([\n Property(true)\n ], Tab.prototype, \"reorderActiveTab\", void 0);\n __decorate$7([\n Property()\n ], Tab.prototype, \"scrollStep\", void 0);\n __decorate$7([\n Property()\n ], Tab.prototype, \"dragArea\", void 0);\n __decorate$7([\n Property(false)\n ], Tab.prototype, \"allowDragAndDrop\", void 0);\n __decorate$7([\n Property(true)\n ], Tab.prototype, \"clearTemplates\", void 0);\n __decorate$7([\n Complex({}, TabAnimationSettings)\n ], Tab.prototype, \"animation\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"created\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"adding\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"added\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"selecting\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"selected\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"removing\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"removed\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"onDragStart\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"dragging\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"dragged\", void 0);\n __decorate$7([\n Event()\n ], Tab.prototype, \"destroyed\", void 0);\n Tab = __decorate$7([\n NotifyPropertyChanges\n ], Tab);\n return Tab;\n}(Component));\n\nvar __extends$8 = (undefined && undefined.__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$8 = (undefined && undefined.__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};\nvar ROOT = 'e-treeview';\nvar CONTROL = 'e-control';\nvar COLLAPSIBLE = 'e-icon-collapsible';\nvar EXPANDABLE = 'e-icon-expandable';\nvar LISTITEM = 'e-list-item';\nvar LISTTEXT = 'e-list-text';\nvar LISTWRAP = 'e-text-wrap';\nvar IELISTWRAP = 'e-ie-wrap';\nvar PARENTITEM = 'e-list-parent';\nvar HOVER = 'e-hover';\nvar ACTIVE = 'e-active';\nvar LOAD = 'e-icons-spinner';\nvar PROCESS = 'e-process';\nvar ICON = 'e-icons';\nvar TEXTWRAP = 'e-text-content';\nvar INPUT = 'e-input';\nvar INPUTGROUP = 'e-input-group';\nvar TREEINPUT = 'e-tree-input';\nvar EDITING = 'e-editing';\nvar RTL$1 = 'e-rtl';\nvar INTERACTION = 'e-interaction';\nvar DRAGITEM = 'e-drag-item';\nvar DROPPABLE = 'e-droppable';\nvar DRAGGING = 'e-dragging';\nvar SIBLING = 'e-sibling';\nvar DROPIN = 'e-drop-in';\nvar DROPNEXT = 'e-drop-next';\nvar DROPOUT = 'e-drop-out';\nvar NODROP = 'e-no-drop';\nvar FULLROWWRAP = 'e-fullrow-wrap';\nvar FULLROW = 'e-fullrow';\nvar SELECTED$1 = 'e-selected';\nvar EXPANDED = 'e-expanded';\nvar NODECOLLAPSED = 'e-node-collapsed';\nvar DISABLE = 'e-disable';\nvar DROPCOUNT = 'e-drop-count';\nvar CHECK = 'e-check';\nvar INDETERMINATE = 'e-stop';\nvar CHECKBOXWRAP = 'e-treeview-checkbox';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECKBOXRIPPLE = 'e-ripple-container';\nvar RIPPLE = 'e-ripple';\nvar RIPPLEELMENT = 'e-ripple-element';\nvar FOCUS = 'e-node-focus';\nvar IMAGE = 'e-list-img';\nvar BIGGER = 'e-bigger';\nvar SMALL = 'e-small';\nvar CHILD = 'e-has-child';\nvar ITEM_ANIMATION_ACTIVE = 'e-animation-active';\nvar DISABLED$1 = 'e-disabled';\nvar PREVENTSELECT = 'e-prevent';\nvar treeAriaAttr = {\n treeRole: 'group',\n itemRole: 'treeitem',\n listRole: 'group',\n itemText: '',\n wrapperRole: ''\n};\n/**\n * Configures the fields to bind to the properties of node in the TreeView component.\n */\nvar FieldsSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$8(FieldsSettings, _super);\n function FieldsSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('child')\n ], FieldsSettings.prototype, \"child\", void 0);\n __decorate$8([\n Property([])\n ], FieldsSettings.prototype, \"dataSource\", void 0);\n __decorate$8([\n Property('expanded')\n ], FieldsSettings.prototype, \"expanded\", void 0);\n __decorate$8([\n Property('hasChildren')\n ], FieldsSettings.prototype, \"hasChildren\", void 0);\n __decorate$8([\n Property('htmlAttributes')\n ], FieldsSettings.prototype, \"htmlAttributes\", void 0);\n __decorate$8([\n Property('iconCss')\n ], FieldsSettings.prototype, \"iconCss\", void 0);\n __decorate$8([\n Property('id')\n ], FieldsSettings.prototype, \"id\", void 0);\n __decorate$8([\n Property('imageUrl')\n ], FieldsSettings.prototype, \"imageUrl\", void 0);\n __decorate$8([\n Property('isChecked')\n ], FieldsSettings.prototype, \"isChecked\", void 0);\n __decorate$8([\n Property('parentID')\n ], FieldsSettings.prototype, \"parentID\", void 0);\n __decorate$8([\n Property(null)\n ], FieldsSettings.prototype, \"query\", void 0);\n __decorate$8([\n Property('selectable')\n ], FieldsSettings.prototype, \"selectable\", void 0);\n __decorate$8([\n Property('selected')\n ], FieldsSettings.prototype, \"selected\", void 0);\n __decorate$8([\n Property(null)\n ], FieldsSettings.prototype, \"tableName\", void 0);\n __decorate$8([\n Property('text')\n ], FieldsSettings.prototype, \"text\", void 0);\n __decorate$8([\n Property('tooltip')\n ], FieldsSettings.prototype, \"tooltip\", void 0);\n __decorate$8([\n Property('navigateUrl')\n ], FieldsSettings.prototype, \"navigateUrl\", void 0);\n return FieldsSettings;\n}(ChildProperty));\n/**\n * Configures animation settings for the TreeView component.\n */\nvar ActionSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$8(ActionSettings, _super);\n function ActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Property('SlideDown')\n ], ActionSettings.prototype, \"effect\", void 0);\n __decorate$8([\n Property(400)\n ], ActionSettings.prototype, \"duration\", void 0);\n __decorate$8([\n Property('linear')\n ], ActionSettings.prototype, \"easing\", void 0);\n return ActionSettings;\n}(ChildProperty));\n/**\n * Configures the animation settings for expanding and collapsing nodes in TreeView.\n */\nvar NodeAnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$8(NodeAnimationSettings, _super);\n function NodeAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$8([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"collapse\", void 0);\n __decorate$8([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"expand\", void 0);\n return NodeAnimationSettings;\n}(ChildProperty));\n/**\n * The TreeView component is used to represent hierarchical data in a tree like structure with advanced\n * functions to perform edit, drag and drop, selection with check-box, and more.\n * ```html\n * \n * ```\n * ```typescript\n * let treeObj: TreeView = new TreeView();\n * treeObj.appendTo('#tree');\n * ```\n */\nvar TreeView = /** @__PURE__ @class */ (function (_super) {\n __extends$8(TreeView, _super);\n function TreeView(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isRefreshed = false;\n _this.preventExpand = false;\n _this.checkedElement = [];\n _this.disableNode = [];\n _this.validArr = [];\n _this.validNodes = [];\n _this.expandChildren = [];\n _this.isFieldChange = false;\n _this.changeDataSource = false;\n _this.hasTemplate = false;\n _this.isFirstRender = false;\n // Specifies whether the node is dropped or not\n _this.isNodeDropped = false;\n _this.isInteracted = false;\n _this.isRightClick = false;\n _this.mouseDownStatus = false;\n _this.isDropIn = false;\n _this.OldCheckedData = [];\n return _this;\n }\n TreeView_1 = TreeView;\n /**\n * Get component name.\n *\n * @returns {string} - returns module name.\n * @private\n */\n TreeView.prototype.getModuleName = function () {\n return 'treeview';\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n */\n TreeView.prototype.preRender = function () {\n var _this = this;\n this.checkActionNodes = [];\n this.parentNodeCheck = [];\n this.dragStartAction = false;\n this.isAnimate = false;\n this.keyConfigs = {\n escape: 'escape',\n end: 'end',\n enter: 'enter',\n f2: 'f2',\n home: 'home',\n moveDown: 'downarrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n ctrlDown: 'ctrl+downarrow',\n ctrlUp: 'ctrl+uparrow',\n ctrlEnter: 'ctrl+enter',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n ctrlA: 'ctrl+A',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftEnter: 'shift+enter',\n shiftHome: 'shift+home',\n shiftEnd: 'shift+end',\n csDown: 'ctrl+shift+downarrow',\n csUp: 'ctrl+shift+uparrow',\n csEnter: 'ctrl+shift+enter',\n csHome: 'ctrl+shift+home',\n csEnd: 'ctrl+shift+end',\n space: 'space',\n shiftSpace: 'shift+space',\n ctrlSpace: 'ctrl+space'\n };\n this.listBaseOption = {\n expandCollapse: true,\n showIcon: true,\n expandIconClass: EXPANDABLE,\n ariaAttributes: treeAriaAttr,\n expandIconPosition: 'Left',\n itemCreated: function (e) {\n _this.beforeNodeCreate(e);\n },\n enableHtmlSanitizer: this.enableHtmlSanitizer,\n itemNavigable: this.fullRowNavigable\n };\n this.updateListProp(this.fields);\n this.aniObj = new Animation({});\n this.treeList = [];\n this.isLoaded = false;\n this.isInitalExpand = false;\n this.expandChildren = [];\n this.index = 0;\n this.setTouchClass();\n this.DDTTreeData = JSON.parse(JSON.stringify(this.fields.dataSource));\n if (isNullOrUndefined(this.selectedNodes)) {\n this.setProperties({ selectedNodes: [] }, true);\n }\n if (isNullOrUndefined(this.checkedNodes)) {\n this.setProperties({ checkedNodes: [] }, true);\n }\n if (isNullOrUndefined(this.expandedNodes)) {\n this.setProperties({ expandedNodes: [] }, true);\n }\n else {\n this.isInitalExpand = true;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - returns the persisted data\n * @hidden\n */\n TreeView.prototype.getPersistData = function () {\n var keyEntity = ['selectedNodes', 'checkedNodes', 'expandedNodes'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n TreeView.prototype.render = function () {\n this.initialRender = true;\n this.initialize();\n this.setDataBinding(false);\n this.setDisabledMode();\n this.setExpandOnType();\n if (!this.disabled) {\n this.setRipple();\n }\n this.wireEditingEvents(this.allowEditing);\n this.setDragAndDrop(this.allowDragAndDrop);\n if (!this.disabled) {\n this.wireEvents();\n }\n this.initialRender = false;\n this.renderComplete();\n };\n TreeView.prototype.initialize = function () {\n this.element.setAttribute('role', 'tree');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n this.setCssClass(null, this.cssClass);\n this.setEnableRtl();\n this.setFullRow(this.fullRowSelect);\n this.setTextWrap();\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n };\n TreeView.prototype.setDisabledMode = function () {\n if (this.disabled) {\n this.element.classList.add(DISABLED$1);\n this.element.setAttribute('aria-disabled', 'true');\n }\n else {\n this.element.classList.remove(DISABLED$1);\n this.element.setAttribute('aria-disabled', 'false');\n }\n };\n TreeView.prototype.setEnableRtl = function () {\n (this.enableRtl ? addClass : removeClass)([this.element], RTL$1);\n };\n TreeView.prototype.setRipple = function () {\n var tempStr = '.' + FULLROW + ',.' + TEXTWRAP;\n var rippleModel = {\n selector: tempStr,\n ignore: '.' + TEXTWRAP + ' > .' + ICON + ',.' + INPUTGROUP + ',.' + INPUT + ', .' + CHECKBOXWRAP\n };\n this.rippleFn = rippleEffect(this.element, rippleModel);\n var iconModel = {\n selector: '.' + TEXTWRAP + ' > .' + ICON,\n isCenterRipple: true\n };\n this.rippleIconFn = rippleEffect(this.element, iconModel);\n };\n TreeView.prototype.setFullRow = function (isEnabled) {\n (isEnabled ? addClass : removeClass)([this.element], FULLROWWRAP);\n };\n TreeView.prototype.setMultiSelect = function (isEnabled) {\n if (isEnabled) {\n this.element.setAttribute('aria-multiselectable', 'true');\n }\n else {\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n };\n TreeView.prototype.templateComplier = function (template) {\n if (template) {\n this.hasTemplate = true;\n this.element.classList.add(INTERACTION);\n try {\n if (typeof template !== 'function' && document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n else {\n return compile(template);\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n this.element.classList.remove(INTERACTION);\n return undefined;\n };\n TreeView.prototype.setDataBinding = function (changeDataSource) {\n var _this = this;\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager) {\n this.isOffline = this.fields.dataSource.dataSource.offline;\n if (this.fields.dataSource.ready) {\n this.fields.dataSource.ready.then(function (e) {\n _this.isOffline = _this.fields.dataSource.dataSource.offline;\n if (_this.fields.dataSource instanceof DataManager && _this.isOffline) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n _this.renderItems(true);\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n }\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n else {\n this.fields.dataSource.executeQuery(this.getQuery(this.fields)).then(function (e) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n if (changeDataSource) {\n _this.changeDataSource = true;\n }\n _this.renderItems(true);\n _this.changeDataSource = false;\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n }\n else {\n this.treeList.pop();\n if (isNullOrUndefined(this.fields.dataSource)) {\n this.rootData = this.treeData = [];\n }\n else {\n this.treeData = JSON.parse(JSON.stringify(this.fields.dataSource));\n this.setRootData();\n }\n this.isNumberTypeId = this.getType();\n this.renderItems(false);\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.getQuery = function (mapper, value) {\n if (value === void 0) { value = null; }\n var columns = [];\n var query;\n if (!mapper.query) {\n query = new Query();\n var prop = this.getActualProperties(mapper);\n for (var _i = 0, _a = Object.keys(prop); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col !== 'dataSource' && col !== 'tableName' && col !== 'child' && !!mapper[\"\" + col]\n && col !== 'url' && columns.indexOf(mapper[\"\" + col]) === -1) {\n columns.push(mapper[\"\" + col]);\n }\n }\n query.select(columns);\n if (Object.prototype.hasOwnProperty.call(prop, 'tableName')) {\n query.from(mapper.tableName);\n }\n }\n else {\n query = mapper.query.clone();\n }\n ListBase.addSorting(this.sortOrder, mapper.text, query);\n if (!isNullOrUndefined(value) && !isNullOrUndefined(mapper.parentID)) {\n query.where(mapper.parentID, 'equal', (this.isNumberTypeId ? parseFloat(value) : value));\n }\n return query;\n };\n TreeView.prototype.getType = function () {\n return this.treeData[0] ? ((typeof getValue(this.fields.id, this.treeData[0]) === 'number') ? true : false) : false;\n };\n TreeView.prototype.setRootData = function () {\n this.dataType = this.getDataType(this.treeData, this.fields);\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n var rootItems = this.getChildNodes(this.treeData, undefined, true);\n if (isNullOrUndefined(rootItems)) {\n this.rootData = [];\n }\n else {\n this.rootData = rootItems;\n }\n }\n else {\n this.rootData = this.treeData;\n }\n };\n TreeView.prototype.isChildObject = function () {\n if (typeof this.fields.child === 'object') {\n return true;\n }\n else {\n return false;\n }\n };\n TreeView.prototype.renderItems = function (isSorted) {\n this.listBaseOption.ariaAttributes.level = 1;\n var sortedData = this.getSortedData(this.rootData);\n this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : sortedData, this.listBaseOption);\n this.element.appendChild(this.ulElement);\n var rootNodes = this.ulElement.querySelectorAll('.e-list-item');\n if (this.loadOnDemand === false) {\n var i = 0;\n while (i < rootNodes.length) {\n this.renderChildNodes(rootNodes[parseInt(i.toString(), 10)], true, null, true);\n i++;\n }\n }\n var parentEle = selectAll('.' + PARENTITEM, this.element);\n if ((parentEle.length === 1 && (rootNodes && rootNodes.length !== 0)) || this.loadOnDemand) {\n this.finalizeNode(this.element);\n }\n this.parentNodeCheck = [];\n this.parentCheckData = [];\n this.updateCheckedStateFromDS();\n if (this.autoCheck && this.showCheckBox && !this.isLoaded) {\n this.updateParentCheckState();\n }\n };\n /**\n * Update the checkedNodes from datasource at initial rendering\n *\n * @returns {void}\n */\n TreeView.prototype.updateCheckedStateFromDS = function () {\n this.validNodes = [];\n if (this.treeData && this.showCheckBox) {\n if (this.dataType === 1) {\n var mapper = this.fields;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));\n for (var i = 0; i < resultData.length; i++) {\n var resultId = resultData[parseInt(i.toString(), 10)][this.fields.id]\n ? resultData[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(resultId) === -1 && !(this.isLoaded)) {\n this.checkDisabledState(resultId, resultData[i]);\n }\n if (resultData[parseInt(i.toString(), 10)][this.fields.hasChildren]) {\n var id = resultData[parseInt(i.toString(), 10)][this.fields.id];\n var childData = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper.parentID, 'equal', id, false));\n for (var child = 0; child < childData.length; child++) {\n var childId = childData[parseInt(child.toString(), 10)][this.fields.id]\n ? childData[parseInt(child.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(childId) === -1 && this.autoCheck) {\n this.checkDisabledState(childId, childData[child]);\n }\n }\n }\n }\n for (var i = 0; i < this.checkedNodes.length; i++) {\n var mapper_1 = this.fields;\n var checkState = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper_1.id, 'equal', this.checkedNodes[parseInt(i.toString(), 10)], true));\n if (checkState[0] && this.autoCheck) {\n this.getCheckedNodeDetails(mapper_1, checkState);\n this.checkIndeterminateState(checkState[0]);\n }\n if (checkState.length > 0) {\n var checkedId = checkState[0][this.fields.id] ? checkState[0][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {\n this.validNodes.push(checkedId);\n }\n }\n var checkedData = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper_1.parentID, 'equal', this.checkedNodes[parseInt(i.toString(), 10)], true));\n for (var index = 0; index < checkedData.length; index++) {\n var checkedId = checkedData[parseInt(index.toString(), 10)][this.fields.id]\n ? checkedData[parseInt(index.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(checkedId) === -1 && this.autoCheck) {\n this.checkDisabledState(checkedId, checkedData[index]);\n }\n if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {\n this.validNodes.push(checkedId);\n }\n }\n }\n }\n else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&\n this.isOffline)) {\n for (var index = 0; index < this.treeData.length; index++) {\n var fieldId = this.treeData[parseInt(index.toString(), 10)][this.fields.id] ? this.treeData[parseInt(index.toString(), 10)][this.fields.id].toString() : '';\n if (this.treeData[parseInt(index.toString(), 10)][this.fields.isChecked] &&\n !(this.isLoaded) && this.checkedNodes.indexOf(fieldId) === -1) {\n this.checkDisabledState(fieldId, this.treeData[index]);\n }\n if (this.checkedNodes.indexOf(fieldId) > -1 && this.validNodes.indexOf(fieldId) === -1) {\n this.validNodes.push(fieldId);\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[parseInt(index.toString(), 10)]);\n if (childItems) {\n this.updateChildCheckState(childItems, this.treeData[parseInt(index.toString(), 10)]);\n }\n }\n this.validNodes = (this.enablePersistence) ? this.checkedNodes : this.validNodes;\n }\n this.setProperties({ checkedNodes: this.validNodes }, true);\n }\n };\n /**\n * To check whether the list data has sub child and to change the parent check state accordingly\n *\n * @param {FieldsSettingsModel} mapper - The mapper object containing field settings.\n * @param {Object[]} checkNodes - The array of checked nodes.\n * @returns {void}\n * @private\n */\n TreeView.prototype.getCheckedNodeDetails = function (mapper, checkNodes) {\n var id = checkNodes[0][this.fields.parentID] ? checkNodes[0][this.fields.parentID].toString() : null;\n var count = 0;\n var element = this.element.querySelector('[data-uid=\"' + checkNodes[0][this.fields.id] + '\"]');\n var parentEle = this.element.querySelector('[data-uid=\"' + checkNodes[0][this.fields.parentID] + '\"]');\n if (!element && !parentEle) {\n if (this.parentNodeCheck.indexOf(id) === -1) {\n this.parentNodeCheck.push(id);\n }\n var childNodes = this.getChildNodes(this.treeData, id);\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[parseInt(i.toString(), 10)][this.fields.id]\n ? childNodes[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n if (count === childNodes.length && this.checkedNodes.indexOf(id) === -1) {\n this.checkDisabledState(id);\n }\n }\n var preElement = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper.id, 'equal', id, true));\n this.getCheckedNodeDetails(mapper, preElement);\n }\n else if (parentEle) {\n var check = select('.' + CHECK, parentEle);\n if (!check) {\n this.changeState(parentEle, 'indeterminate', null, true, true);\n }\n }\n };\n /**\n * Update the checkedNodes and parent state when all the child Nodes are in checkedstate at initial rendering\n *\n * @returns {void}\n * @private\n */\n TreeView.prototype.updateParentCheckState = function () {\n var indeterminate = selectAll('.' + INDETERMINATE, this.element);\n var childCheckedElement;\n var data = this.treeData;\n if (this.element.classList.contains('e-filtering')) {\n data = this.DDTTreeData;\n }\n for (var i = 0; i < indeterminate.length; i++) {\n var node = closest(indeterminate[parseInt(i.toString(), 10)], '.' + LISTITEM);\n var nodeId = node.getAttribute('data-uid').toString();\n var OldCheckedNodes = void 0;\n if (this.element.classList.contains('e-filtering')) {\n OldCheckedNodes = new DataManager(this.OldCheckedData).executeLocal(new Query().where('parentID', 'equal', nodeId, true));\n }\n if (this.dataType === 1) {\n childCheckedElement = new DataManager(data).\n executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));\n }\n else {\n childCheckedElement = this.getChildNodes(data, nodeId);\n }\n var count = 0;\n if (childCheckedElement) {\n var _loop_1 = function (j) {\n var childId = childCheckedElement[parseInt(j.toString(), 10)][this_1.fields.id].toString();\n if (this_1.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n else if (this_1.element.classList.contains('e-filtering') && OldCheckedNodes.findIndex(function (e) { return e['id'] === childId; }) !== -1) {\n count++;\n }\n };\n var this_1 = this;\n for (var j = 0; j < childCheckedElement.length; j++) {\n _loop_1(j);\n }\n if (count === childCheckedElement.length) {\n var nodeCheck = node.getAttribute('data-uid');\n if (this.checkedNodes.indexOf(nodeCheck) === -1) {\n this.checkDisabledState(nodeCheck);\n }\n this.changeState(node, 'check', null, true, true);\n }\n else if (count === 0 && this.checkedNodes.length === 0) {\n this.changeState(node, 'uncheck', null, true, true);\n }\n }\n var parentElement = closest(node, '.' + PARENTITEM);\n if (!isNullOrUndefined(parentElement)) {\n this.ensureParentCheckState(closest(parentElement, '.' + LISTITEM));\n }\n }\n };\n /**\n * Change the parent to indeterminate state whenever the child is in checked state which is not rendered in DOM\n *\n * @param {Object} data - The data object to check for indeterminate state.\n * @returns {void}\n * @private\n */\n TreeView.prototype.checkIndeterminateState = function (data) {\n var element;\n if (this.dataType === 1) {\n element = this.element.querySelector('[data-uid=\"' + data[this.fields.parentID] + '\"]');\n }\n else {\n element = this.element.querySelector('[data-uid=\"' + data[this.fields.id] + '\"]');\n }\n if (element) {\n var ariaChecked = element.getAttribute('aria-checked');\n if (ariaChecked !== 'true') {\n this.changeState(element, 'indeterminate', null, true, true);\n }\n }\n else if (this.dataType === 2) {\n if (this.parentNodeCheck.indexOf(data[this.fields.id].toString()) === -1) {\n this.parentNodeCheck.push(data[this.fields.id].toString());\n }\n }\n };\n /**\n * Update the checkedNodes for child and subchild from datasource (hierarchical datasource) at initial rendering\n *\n * @param {Object[]} childItems - The array of child items to update the checked state.\n * @param {Object} treeData - The tree data object containing field values.\n * @returns {void}\n * @private\n */\n TreeView.prototype.updateChildCheckState = function (childItems, treeData) {\n var count = 0;\n var checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';\n for (var index = 0; index < childItems.length; index++) {\n var checkedChild = childItems[parseInt(index.toString(), 10)][this.fields.id] ? childItems[parseInt(index.toString(), 10)][this.fields.id].toString() : '';\n if (childItems[parseInt(index.toString(), 10)][this.fields.isChecked] &&\n !(this.isLoaded) && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkDisabledState(checkedChild, childItems[index]);\n }\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1 && this.autoCheck) {\n this.checkDisabledState(checkedChild, childItems[index]);\n }\n if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {\n count++;\n }\n if (this.checkedNodes.indexOf(checkedChild) > -1 && this.validNodes.indexOf(checkedChild) === -1) {\n this.validNodes.push(checkedChild);\n }\n var subChildItems = getValue(this.fields.child.toString(), childItems[parseInt(index.toString(), 10)]);\n if (subChildItems && subChildItems.length) {\n if (this.parentCheckData.indexOf(treeData) === -1) {\n this.parentCheckData.push(treeData);\n }\n this.updateChildCheckState(subChildItems, childItems[parseInt(index.toString(), 10)]);\n }\n if (count === childItems.length && this.autoCheck && this.checkedNodes.indexOf(checkedParent) === -1) {\n this.checkDisabledState(checkedParent, treeData);\n }\n }\n if (count !== 0 && this.autoCheck) {\n this.checkIndeterminateState(treeData);\n for (var len = 0; len < this.parentCheckData.length; len++) {\n if ((treeData !== this.parentCheckData[parseInt(len.toString(), 10)]) &&\n (this.parentCheckData[parseInt(len.toString(), 10)])) {\n this.checkIndeterminateState(this.parentCheckData[parseInt(len.toString(), 10)]);\n }\n }\n }\n this.parentCheckData = [];\n };\n TreeView.prototype.beforeNodeCreate = function (e) {\n if (this.showCheckBox) {\n var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });\n checkboxEle.classList.add(CHECKBOXWRAP);\n var icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, e.item);\n var id = e.item.getAttribute('data-uid');\n e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNullOrUndefined(icon) ? 0 : 1]);\n var checkValue = getValue(e.fields.isChecked, e.curData);\n if (this.checkedNodes.indexOf(id) > -1) {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n e.item.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else if (!isNullOrUndefined(checkValue) && checkValue.toString() === 'true') {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n e.item.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else {\n e.item.setAttribute('aria-checked', 'false');\n }\n var frame = select('.' + CHECKBOXFRAME, checkboxEle);\n EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);\n EventHandler.add(frame, 'mouseup', this.frameMouseHandler, this);\n }\n if (this.fullRowSelect) {\n this.createFullRow(e.item);\n }\n if (this.allowMultiSelection && !e.item.classList.contains(SELECTED$1)) {\n e.item.setAttribute('aria-selected', 'false');\n }\n var fields = e.fields;\n this.addActionClass(e, fields.selected, SELECTED$1);\n this.addActionClass(e, fields.expanded, EXPANDED);\n e.item.setAttribute('tabindex', '-1');\n EventHandler.add(e.item, 'focus', this.focusIn, this);\n if (!isNullOrUndefined(this.nodeTemplateFn)) {\n var textEle = e.item.querySelector('.' + LISTTEXT);\n var dataId = e.item.getAttribute('data-uid');\n textEle.innerHTML = '';\n this.renderNodeTemplate(e.curData, textEle, dataId);\n }\n var eventArgs = {\n node: e.item,\n nodeData: e.curData,\n text: e.text\n };\n if (!this.isRefreshed) {\n this.trigger('drawNode', eventArgs);\n if (e.curData[this.fields.selectable] === false && !this.showCheckBox) {\n e.item.classList.add(PREVENTSELECT);\n e.item.firstElementChild.setAttribute('style', 'cursor: not-allowed');\n }\n }\n };\n TreeView.prototype.frameMouseHandler = function (e) {\n var rippleSpan = select('.' + CHECKBOXRIPPLE, e.target.parentElement);\n rippleMouseHandler(e, rippleSpan);\n };\n TreeView.prototype.addActionClass = function (e, action, cssClass) {\n var data = e.curData;\n var actionValue = getValue(action, data);\n if (!isNullOrUndefined(actionValue) && actionValue.toString() !== 'false') {\n e.item.classList.add(cssClass);\n }\n };\n TreeView.prototype.getDataType = function (ds, mapper) {\n if (this.fields.dataSource instanceof DataManager) {\n for (var i = 0; i < ds.length; i++) {\n if (this.isOffline) {\n if ((typeof mapper.child === 'string') && isNullOrUndefined(getValue(mapper.child, ds[parseInt(i.toString(), 10)])) && !isNullOrUndefined(getValue(mapper.parentID, ds[parseInt(i.toString(), 10)]))) {\n return 1;\n }\n }\n else if ((typeof mapper.child === 'string') && isNullOrUndefined(getValue(mapper.child, ds[parseInt(i.toString(), 10)]))) {\n return 1;\n }\n }\n return 2;\n }\n for (var i = 0, len = ds.length; i < len; i++) {\n if ((typeof mapper.child === 'string') && (!isNullOrUndefined(getValue(mapper.child, ds[parseInt(i.toString(), 10)])) || (Object.prototype.hasOwnProperty.call(ds[parseInt(i.toString(), 10)], mapper.child)))) {\n return 2;\n }\n if (this.isChildObject()) {\n return 2;\n }\n if (!isNullOrUndefined(getValue(mapper.parentID, ds[parseInt(i.toString(), 10)])) ||\n !isNullOrUndefined(getValue(mapper.hasChildren, ds[parseInt(i.toString(), 10)]))) {\n return 1;\n }\n }\n return 1;\n };\n TreeView.prototype.getGroupedData = function (dataSource, groupBy) {\n var cusQuery = new Query().group(groupBy);\n var ds = ListBase.getDataSource(dataSource, cusQuery);\n var grpItem = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[parseInt(j.toString(), 10)].items;\n grpItem.push(itemObj);\n }\n return grpItem;\n };\n TreeView.prototype.getSortedData = function (list) {\n if (list && this.sortOrder !== 'None') {\n list = ListBase.getDataSource(list, ListBase.addSorting(this.sortOrder, this.fields.text));\n }\n return list;\n };\n TreeView.prototype.finalizeNode = function (element, isFromExpandAll, expandChild) {\n var _this = this;\n if (!isFromExpandAll) {\n this.updateAttributes(element);\n }\n if (!expandChild) {\n var eNodes = selectAll('.' + EXPANDED, element);\n if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {\n this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] === true; }).length > 0\n ? true\n : this.isInitalExpand;\n }\n if (!this.isInitalExpand) {\n for (var i = 0; i < eNodes.length; i++) {\n this.renderChildNodes(eNodes[parseInt(i.toString(), 10)]);\n }\n }\n removeClass(eNodes, EXPANDED);\n }\n if (!isFromExpandAll) {\n this.updateList();\n }\n if (this.isLoaded) {\n this.updateCheckedProp();\n }\n };\n TreeView.prototype.updateAttributes = function (element) {\n var iNodes = selectAll('.' + IMAGE, element);\n for (var k = 0; k < iNodes.length; k++) {\n iNodes[parseInt(k.toString(), 10)].setAttribute('alt', IMAGE);\n }\n if (this.isLoaded) {\n var sNodes = selectAll('.' + SELECTED$1, element);\n for (var i = 0; i < sNodes.length; i++) {\n this.selectNode(sNodes[parseInt(i.toString(), 10)], null);\n break;\n }\n removeClass(sNodes, SELECTED$1);\n }\n var cNodes = selectAll('.' + LISTITEM + ':not(.' + EXPANDED + ')', element);\n for (var j = 0; j < cNodes.length; j++) {\n var icon = select('div.' + ICON, cNodes[parseInt(j.toString(), 10)]);\n if (icon && icon.classList.contains(EXPANDABLE)) {\n this.disableExpandAttr(cNodes[parseInt(j.toString(), 10)]);\n }\n }\n };\n TreeView.prototype.updateCheckedProp = function () {\n if (this.showCheckBox) {\n var nodes = [].concat([], this.checkedNodes);\n this.setProperties({ checkedNodes: nodes }, true);\n }\n };\n TreeView.prototype.ensureIndeterminate = function () {\n if (this.autoCheck) {\n var liElement = selectAll('li', this.element);\n var ulElement = void 0;\n for (var i = 0; i < liElement.length; i++) {\n if (liElement[parseInt(i.toString(), 10)].classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, liElement[parseInt(i.toString(), 10)]);\n if (ulElement) {\n this.ensureParentCheckState(liElement[parseInt(i.toString(), 10)]);\n }\n else {\n this.ensureChildCheckState(liElement[parseInt(i.toString(), 10)]);\n }\n }\n }\n }\n else {\n var indeterminate = selectAll('.' + INDETERMINATE, this.element);\n for (var i = 0; i < indeterminate.length; i++) {\n indeterminate[parseInt(i.toString(), 10)].classList.remove(INDETERMINATE);\n }\n }\n };\n TreeView.prototype.ensureParentCheckState = function (element) {\n if (!isNullOrUndefined(element)) {\n if (element.classList.contains(ROOT)) {\n return;\n }\n var ulElement = element;\n if (element.classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, element);\n }\n var checkedNodes = selectAll('.' + CHECKBOXWRAP + ' .' + CHECK, ulElement);\n var indeterminateNodes = selectAll('.' + INDETERMINATE, ulElement);\n var nodes = selectAll(this.checkDisabledChildren ? '.' + LISTITEM : '.' + LISTITEM + ':not(.' + DISABLE + ')', ulElement);\n var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];\n var count = nodes.length;\n var checkedCount = checkedNodes.length;\n var matchedChildNodes = [];\n var oldChildCount = [];\n var dataUid_1 = element.getAttribute('data-uid');\n var rootNodeChecked_1 = true;\n var childNodeChecked_1 = false;\n nodes.forEach(function (childNode) {\n if (childNode instanceof HTMLElement) {\n var ariaChecked = childNode.getAttribute('aria-checked');\n if (ariaChecked === 'true') {\n childNodeChecked_1 = true;\n }\n else {\n rootNodeChecked_1 = false;\n }\n }\n });\n var parentNodeChecked = false;\n if (this.element.classList.contains('e-filtering')) {\n var oldCheckedNodes = new DataManager(this.OldCheckedData).executeLocal(new Query().where('parentID', 'equal', dataUid_1, true));\n checkedCount = oldCheckedNodes.length;\n var parentNode = new DataManager(this.OldCheckedData).executeLocal(new Query().where('hasChildren', 'equal', true, true));\n if (parentNode.length > 0\n && (this.OldCheckedData.some(function (oldNode) { return oldNode.id === dataUid_1; }) && childNodeChecked_1)) {\n checkedCount = parentNode.length;\n parentNodeChecked = true;\n }\n var childItems = [];\n if (this.dataType === 1) {\n childItems = new DataManager(this.DDTTreeData).executeLocal(new Query().where(this.fields.parentID, 'equal', dataUid_1, true));\n }\n else {\n childItems = this.getChildNodes(this.DDTTreeData, dataUid_1);\n }\n count = childItems.length;\n }\n if (this.autoCheck && this.showCheckBox && !(this.fields.dataSource instanceof DataManager)) {\n var selectedChildNodeDetails = this.getSelectedChildNodeDetails(dataUid_1);\n matchedChildNodes = selectedChildNodeDetails;\n oldChildCount = new DataManager(this.checkActionNodes)\n .executeLocal(new Query().where('parentID', 'equal', dataUid_1, true));\n }\n if (count === 0 && checkedCount === 0) {\n return;\n }\n else if (count === checkedCount || ((parentNodeChecked && count > 0) && (oldChildCount.length === matchedChildNodes.length)\n && (oldChildCount.length !== 0 && matchedChildNodes.length !== 0) && rootNodeChecked_1\n && (this.autoCheck && this.showCheckBox))) {\n this.changeState(checkBoxEle, 'check', null, true, true);\n }\n else if ((checkedCount > 0 && !parentNodeChecked && (this.autoCheck && this.showCheckBox))) {\n this.changeState(checkBoxEle, 'indeterminate', null, true, true);\n }\n else if (checkedCount > 0 || indeterminateNodes.length > 0) {\n this.changeState(checkBoxEle, 'indeterminate', null, true, true);\n }\n else if (checkedCount === 0) {\n this.changeState(checkBoxEle, 'uncheck', null, true, true);\n }\n var parentUL = closest(element, '.' + PARENTITEM);\n if (!isNullOrUndefined(parentUL)) {\n var currentParent = closest(parentUL, '.' + LISTITEM);\n this.ensureParentCheckState(currentParent);\n }\n }\n };\n TreeView.prototype.getSelectedChildNodeDetails = function (dataUid) {\n var _this = this;\n return this.checkedNodes\n .map(function (checkedNodeId) {\n return new DataManager(_this.DDTTreeData)\n .executeLocal(new Query().where('id', 'equal', checkedNodeId, true))[0];\n })\n .filter(function (childNode) {\n if (childNode && typeof childNode === 'object' && 'pid' in childNode) {\n var childNodePid = childNode.pid;\n if (!isNullOrUndefined(childNodePid)) {\n return childNodePid.toString() === dataUid;\n }\n }\n return false;\n });\n };\n TreeView.prototype.ensureChildCheckState = function (element, e, isFromExpandAll) {\n var _this = this;\n if (!isNullOrUndefined(element)) {\n var childElement = select('.' + PARENTITEM, element);\n var checkBoxes = void 0;\n if (!isNullOrUndefined(childElement)) {\n var childCheck = Array.from(childElement.querySelectorAll('li'));\n checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);\n if (this.isFilter) {\n checkBoxes = Array.from(checkBoxes).filter(function (checkbox) {\n var dataUID = checkbox.closest('li').getAttribute('data-uid');\n return dataUID !== null && _this.checkedNodes.indexOf(dataUID) !== -1;\n });\n childCheck = Array.from(childCheck).filter(function (li) {\n var childIds = li.getAttribute('data-uid');\n return childIds !== null && _this.checkedNodes.indexOf(childIds) !== -1;\n });\n if (checkBoxes.length === 0) {\n checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);\n childCheck = Array.from(childElement.querySelectorAll('li'));\n }\n }\n var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n var parentCheck = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(INDETERMINATE);\n var checkedState = void 0;\n for (var index = 0; index < checkBoxes.length; index++) {\n var childId = childCheck[parseInt(index.toString(), 10)].getAttribute('data-uid');\n if (!isNullOrUndefined(this.currentLoadData) &&\n !isNullOrUndefined(getValue(this.fields.isChecked, this.currentLoadData[parseInt(index.toString(), 10)]))) {\n checkedState = getValue(this.fields.isChecked, this.currentLoadData[parseInt(index.toString(), 10)]) ? 'check' : 'uncheck';\n if (this.ele !== -1) {\n checkedState = isChecked ? 'check' : 'uncheck';\n }\n if ((checkedState === 'uncheck') && (!isUndefined(this.parentNodeCheck) && this.autoCheck\n && this.parentNodeCheck.indexOf(childId) !== -1)) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n checkedState = 'indeterminate';\n }\n }\n else {\n var isNodeChecked = checkBoxes[parseInt(index.toString(), 10)]\n .getElementsByClassName(CHECKBOXFRAME)[0]\n .classList.contains(CHECK);\n if (isChecked) {\n checkedState = 'check';\n }\n else if (isNodeChecked && !this.isLoaded) {\n checkedState = 'check';\n }\n else if (this.checkedNodes.indexOf(childId) !== -1 && this.isLoaded && (parentCheck || isChecked)) {\n checkedState = 'check';\n }\n else if (childCheck[parseInt(index.toString(), 10)].classList.contains(CHILD) &&\n (!isUndefined(this.parentNodeCheck) && this.autoCheck\n && (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {\n checkedState = 'indeterminate';\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n }\n else if (this.dataType === 1 && (!isUndefined(this.parentNodeCheck) && this.autoCheck &&\n (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {\n checkedState = 'indeterminate';\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n }\n else {\n checkedState = 'uncheck';\n }\n }\n this.changeState(checkBoxes[parseInt(index.toString(), 10)], checkedState, e, true, true);\n }\n }\n if (this.autoCheck && this.isLoaded && !isFromExpandAll) {\n this.updateParentCheckState();\n }\n }\n };\n TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {\n if (!isNullOrUndefined(nodes)) {\n nodes.reverse();\n for (var len = nodes.length - 1; len >= 0; len--) {\n var liEle = this.getElement(nodes[parseInt(len.toString(), 10)]);\n if (isNullOrUndefined(liEle)) {\n var node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString()\n : nodes[parseInt(len.toString(), 10)]\n ? nodes[parseInt(len.toString(), 10)].toString()\n : null;\n if (node !== '' && doCheck && node) {\n this.setValidCheckedNode(node, nodes);\n this.dynamicCheckState(node, doCheck);\n }\n else if (this.checkedNodes.indexOf(node) !== -1 && node !== '' && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(node), 1);\n var childItems = this.getChildNodes(this.treeData, node);\n if (childItems) {\n for (var i = 0; i < childItems.length; i++) {\n var id = childItems[parseInt(i.toString(), 10)][this.fields.id]\n ? childItems[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(id) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);\n var ele = this.element.querySelector('[data-uid=\"' + id + '\"]');\n if (ele) {\n this.changeState(ele, 'uncheck', null);\n }\n }\n }\n if (this.parentNodeCheck.indexOf(node) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(node), 1);\n }\n }\n if (node) {\n this.dynamicCheckState(node, doCheck);\n }\n this.updateField(this.treeData, this.fields, node, 'isChecked', null);\n }\n continue;\n }\n var checkBox = select('.' + PARENTITEM + ' .' + CHECKBOXWRAP, liEle);\n this.validateCheckNode(checkBox, !doCheck, liEle, null);\n }\n }\n else {\n var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);\n if (this.loadOnDemand) {\n for (var index = 0; index < checkBoxes.length; index++) {\n this.updateFieldChecked(checkBoxes[parseInt(index.toString(), 10)], doCheck);\n this.changeState(checkBoxes[parseInt(index.toString(), 10)], doCheck ? 'check' : 'uncheck', null, null, null, doCheck);\n }\n }\n else {\n for (var index = 0; index < checkBoxes.length; index++) {\n this.updateFieldChecked(checkBoxes[parseInt(index.toString(), 10)], doCheck);\n this.changeState(checkBoxes[parseInt(index.toString(), 10)], doCheck ? 'check' : 'uncheck');\n }\n }\n }\n if (nodes) {\n for (var j = 0; j < nodes.length - 1; j++) {\n var node = nodes[parseInt(j.toString(), 10)] ? nodes[parseInt(j.toString(), 10)].toString() : '';\n if (!doCheck) {\n this.updateField(this.treeData, this.fields, node, 'isChecked', null);\n }\n }\n }\n if (this.autoCheck) {\n this.updateParentCheckState();\n }\n };\n TreeView.prototype.updateFieldChecked = function (checkbox, doCheck) {\n var currLi = closest(checkbox, '.' + LISTITEM);\n var id = currLi.getAttribute('data-uid');\n var nodeDetails = this.getNodeData(currLi);\n if (nodeDetails.isChecked === 'true' && !doCheck) {\n this.updateField(this.treeData, this.fields, id, 'isChecked', null);\n }\n };\n /**\n * Changes the parent and child check state while changing the checkedNodes via setmodel\n *\n * @param {string} node - The unique identifier of the node.\n * @param {boolean} doCheck - A boolean value indicating whether to check or uncheck the node.\n * @returns {void}\n * @private\n */\n TreeView.prototype.dynamicCheckState = function (node, doCheck) {\n if (this.dataType === 1) {\n var count = 0;\n var resultId = new DataManager(this.treeData).executeLocal(new Query().where(this.fields.id, 'equal', node, true));\n if (resultId[0]) {\n var id = resultId[0][this.fields.id] ? resultId[0][this.fields.id].toString() : null;\n var parent_1 = resultId[0][this.fields.parentID] ? resultId[0][this.fields.parentID].toString() : null;\n var parentElement = this.element.querySelector('[data-uid=\"' + parent_1 + '\"]');\n var element = this.element.querySelector('[data-uid=\"' + id + '\"]');\n var childNodes = this.getChildNodes(this.treeData, parent_1);\n if (childNodes) {\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[parseInt(i.toString(), 10)][this.fields.id]\n ? childNodes[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n }\n if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (id === node) && this.autoCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && element && (id === node) && !doCheck) {\n this.changeState(element, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(node) !== -1 && element && (id === node) && doCheck) {\n this.changeState(element, 'check', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck\n && count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck\n && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (!element && !parentElement && (id === node) && this.autoCheck) {\n this.updateIndeterminate(node, doCheck);\n }\n }\n }\n else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&\n this.isOffline)) {\n var id = void 0;\n var parentElement = void 0;\n var check = void 0;\n for (var i = 0; i < this.treeData.length; i++) {\n id = this.treeData[parseInt(i.toString(), 10)][this.fields.id] ? this.treeData[parseInt(i.toString(), 10)][this.fields.id].toString() : '';\n parentElement = this.element.querySelector('[data-uid=\"' + id + '\"]');\n check = parentElement ? select('.' + CHECK, parentElement) : null;\n if (this.checkedNodes.indexOf(id) === -1 && parentElement && check && !doCheck) {\n this.changeState(parentElement, 'uncheck', null);\n }\n var subChild = getValue(this.fields.child.toString(), this.treeData[parseInt(i.toString(), 10)]);\n if (subChild) {\n this.updateChildIndeterminate(subChild, id, node, doCheck, id);\n }\n }\n }\n };\n /**\n * updates the parent and child check state while changing the checkedNodes via setmodel for listData\n *\n * @param {string} node - The unique identifier of the node.\n * @param {boolean} doCheck - A boolean value indicating whether to check or uncheck the node.\n * @returns {void}\n * @private\n */\n TreeView.prototype.updateIndeterminate = function (node, doCheck) {\n var indeterminateData = this.getTreeData(node);\n var count = 0;\n var parent;\n if (this.dataType === 1) {\n parent = indeterminateData[0][this.fields.parentID] ? indeterminateData[0][this.fields.parentID].toString() : null;\n }\n var childNodes = this.getChildNodes(this.treeData, parent);\n if (childNodes) {\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[parseInt(i.toString(), 10)][this.fields.id]\n ? childNodes[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n }\n var parentElement = this.element.querySelector('[data-uid=\"' + parent + '\"]');\n if (parentElement && doCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (!parentElement) {\n if (!doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent), 1);\n }\n else if (doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) === -1) {\n this.parentNodeCheck.push(parent);\n }\n else if (!doCheck && this.checkedNodes.indexOf(parent) !== -1 && this.parentNodeCheck.indexOf(parent) === -1\n && count !== 0) {\n this.parentNodeCheck.push(parent);\n }\n this.updateIndeterminate(parent, doCheck);\n if (this.checkedNodes.indexOf(parent) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(parent), 1);\n }\n }\n };\n /**\n * updates the parent and child check state while changing the checkedNodes via setmodel for hierarchical data\n *\n * @param {Object[]} subChild - Array of child nodes\n * @param {string} parent - Parent identifier\n * @param {string} node - Current node identifier\n * @param {boolean} doCheck - Boolean indicating whether to perform a check\n * @param {string} [child] - Optional child identifier\n * @returns {void}\n * @private\n */\n TreeView.prototype.updateChildIndeterminate = function (subChild, parent, node, doCheck, child) {\n var count = 0;\n for (var j = 0; j < subChild.length; j++) {\n var subId = subChild[parseInt(j.toString(), 10)][this.fields.id] ? subChild[parseInt(j.toString(), 10)][this.fields.id].toString() : '';\n if (this.checkedNodes.indexOf(subId) !== -1) {\n count++;\n }\n var parentElement = this.element.querySelector('[data-uid=\"' + parent + '\"]');\n var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;\n var check = parentElement ? select('.' + CHECK, parentElement) : null;\n var element = this.element.querySelector('[data-uid=\"' + subId + '\"]');\n var childElementCheck = element ? select('.' + CHECK, element) : null;\n if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (subId === node) && this.autoCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && parentElement && !element && (subId === node) && !doCheck) {\n if (this.autoCheck) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else {\n if (count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else {\n this.changeState(parentElement, 'uncheck', null);\n }\n }\n }\n else if (this.checkedNodes.indexOf(node) === -1 && element && (subId === node) && !doCheck) {\n this.changeState(element, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && indeterminate && (subId === node) && this.autoCheck && count === 0\n && !doCheck) {\n indeterminate.classList.remove(INDETERMINATE);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && check && (subId === node) && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(subId) === -1 && element && childElementCheck && count === 0) {\n this.changeState(element, 'uncheck', null);\n }\n else if (!element && !parentElement && (subId === node) || (this.parentNodeCheck.indexOf(parent) !== -1) && this.autoCheck) {\n var childElement = this.element.querySelector('[data-uid=\"' + child + '\"]');\n if (doCheck && count !== 0) {\n this.changeState(childElement, 'indeterminate', null);\n }\n else if (doCheck && count === subChild.length && this.checkedNodes.indexOf(parent) === -1) {\n this.checkDisabledState(parent);\n }\n else if (!doCheck && count === 0 && this.parentNodeCheck.indexOf(parent) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent));\n }\n if (this.parentNodeCheck.indexOf(parent) === -1) {\n this.parentNodeCheck.push(parent);\n }\n }\n var innerChild = getValue(this.fields.child.toString(), subChild[parseInt(j.toString(), 10)]);\n if (innerChild) {\n this.updateChildIndeterminate(innerChild, subId, node, doCheck, child);\n }\n }\n };\n TreeView.prototype.changeState = function (wrapper, state, e, isPrevent, isAdd, doCheck) {\n var _this = this;\n var eventArgs;\n var currLi = closest(wrapper, '.' + LISTITEM);\n if (!this.checkDisabledChildren && currLi && (currLi.classList.contains(DISABLE)\n || (this.disableNode && this.disableNode.indexOf(currLi.getAttribute('data-uid')) !== -1))) {\n return;\n }\n if (wrapper === currLi) {\n wrapper = select('.' + CHECKBOXWRAP, currLi);\n }\n if (!isPrevent) {\n this.checkActionNodes = [];\n eventArgs = this.getCheckEvent(currLi, state, e);\n this.trigger('nodeChecking', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeCheckAction(wrapper, state, currLi, observedArgs, e, isPrevent, isAdd, doCheck);\n }\n });\n }\n else {\n this.nodeCheckAction(wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck);\n }\n };\n TreeView.prototype.nodeCheckAction = function (wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck) {\n var ariaState;\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n this.addCheck(currLi);\n ariaState = 'true';\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n this.removeCheck(currLi);\n ariaState = 'false';\n }\n else if (state === 'indeterminate' && this.autoCheck) {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n this.removeCheck(currLi);\n ariaState = 'mixed';\n }\n ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;\n if (!isNullOrUndefined(ariaState)) {\n currLi.setAttribute('aria-checked', ariaState);\n }\n if (isAdd) {\n var data = [].concat([], this.checkActionNodes);\n eventArgs = this.getCheckEvent(currLi, state, e);\n if (isUndefined(isPrevent)) {\n eventArgs.data = data;\n }\n }\n if (doCheck !== undefined) {\n this.ensureStateChange(currLi, doCheck);\n }\n if (!isPrevent) {\n if (!isNullOrUndefined(ariaState)) {\n currLi.setAttribute('aria-checked', ariaState);\n eventArgs.data[0].checked = ariaState;\n this.trigger('nodeChecked', eventArgs);\n this.checkActionNodes = [];\n }\n }\n };\n TreeView.prototype.addCheck = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n if (!isNullOrUndefined(id) && this.checkedNodes.indexOf(id) === -1) {\n this.checkDisabledState(id);\n }\n };\n TreeView.prototype.removeCheck = function (liEle) {\n var index = this.checkedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.checkedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.getCheckEvent = function (currLi, action, e) {\n this.checkActionNodes.push(this.getNodeData(currLi));\n var nodeData = this.checkActionNodes;\n return { action: action, cancel: false, isInteracted: isNullOrUndefined(e) ? false : true, node: currLi, data: nodeData };\n };\n TreeView.prototype.finalize = function () {\n var firstUl = select('.' + PARENTITEM, this.element);\n if (!isNullOrUndefined(firstUl)) {\n firstUl.setAttribute('role', treeAriaAttr.treeRole);\n this.setMultiSelect(this.allowMultiSelection);\n var firstNode = select('.' + LISTITEM, this.element);\n if (firstNode) {\n firstNode.setAttribute('tabindex', '0');\n this.updateIdAttr(null, firstNode);\n }\n if (this.allowTextWrap) {\n this.updateWrap();\n }\n this.renderReactTemplates();\n this.hasPid = this.rootData[0] ? Object.prototype.hasOwnProperty.call(this.rootData[0], this.fields.parentID) : false;\n this.doExpandAction();\n }\n };\n TreeView.prototype.setTextWrap = function () {\n (this.allowTextWrap ? addClass : removeClass)([this.element], LISTWRAP);\n if (Browser.isIE) {\n (this.allowTextWrap ? addClass : removeClass)([this.element], IELISTWRAP);\n }\n };\n TreeView.prototype.updateWrap = function (ulEle) {\n if (!this.fullRowSelect) {\n return;\n }\n var liEle = ulEle ? selectAll('.' + LISTITEM, ulEle) : this.liList;\n var length = liEle.length;\n for (var i = 0; i < length; i++) {\n this.calculateWrap(liEle[parseInt(i.toString(), 10)]);\n }\n };\n TreeView.prototype.calculateWrap = function (liEle) {\n var element = select('.' + FULLROW, liEle);\n if (element && element.nextElementSibling) {\n element.style.height = this.allowTextWrap ? element.nextElementSibling.offsetHeight + 'px' : '';\n }\n };\n TreeView.prototype.doExpandAction = function () {\n var _this = this;\n var eUids = this.expandedNodes;\n if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {\n this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] === true; }).length > 0\n ? true\n : this.isInitalExpand;\n }\n if (this.isInitalExpand && eUids.length > 0) {\n this.setProperties({ expandedNodes: [] }, true);\n if (this.fields.dataSource instanceof DataManager) {\n this.expandGivenNodes(eUids);\n }\n else {\n for (var i = 0; i < eUids.length; i++) {\n var eNode = select('[data-uid=\"' + eUids[parseInt(i.toString(), 10)] + '\"]', this.element);\n if (!isNullOrUndefined(eNode)) {\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));\n if (!isNullOrUndefined(icon)) {\n this.expandAction(eNode, icon, null);\n }\n }\n else {\n if (eUids[parseInt(i.toString(), 10)] && this.expandChildren.indexOf(eUids[parseInt(i.toString(), 10)]) === -1) {\n this.expandChildren.push(eUids[parseInt(i.toString(), 10)].toString());\n }\n continue;\n }\n }\n this.afterFinalized();\n }\n }\n else {\n this.afterFinalized();\n }\n };\n TreeView.prototype.expandGivenNodes = function (arr) {\n var _this = this;\n this.expandCallback(arr[this.index], function () {\n _this.index++;\n if (_this.index < arr.length) {\n _this.expandGivenNodes(arr);\n }\n else {\n _this.afterFinalized();\n }\n });\n if (this.index > 0) {\n this.index = 0;\n }\n };\n TreeView.prototype.expandCallback = function (eUid, callback) {\n var eNode = select('[data-uid=\"' + eUid + '\"]', this.element);\n if (!isNullOrUndefined(eNode)) {\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));\n if (!isNullOrUndefined(icon)) {\n this.expandAction(eNode, icon, null, false, callback);\n }\n callback();\n }\n else {\n callback();\n }\n };\n TreeView.prototype.afterFinalized = function () {\n this.doSelectionAction();\n this.updateCheckedProp();\n this.isAnimate = true;\n this.isInitalExpand = false;\n if ((!this.isLoaded || this.isFieldChange) && !this.isNodeDropped) {\n var eventArgs = { data: this.treeData };\n this.trigger('dataBound', eventArgs);\n }\n this.isLoaded = true;\n this.isNodeDropped = false;\n };\n TreeView.prototype.doSelectionAction = function () {\n var sNodes = selectAll('.' + SELECTED$1, this.element);\n var sUids = this.selectedNodes;\n if (sUids.length > 0) {\n this.setProperties({ selectedNodes: [] }, true);\n for (var i = 0; i < sUids.length; i++) {\n var sNode = select('[data-uid=\"' + sUids[parseInt(i.toString(), 10)] + '\"]', this.element);\n if (sNode && !(sNode.classList.contains('e-active'))) {\n this.selectNode(sNode, null, true);\n }\n else {\n this.selectedNodes.push(sUids[parseInt(i.toString(), 10)]);\n }\n if (!this.allowMultiSelection) {\n break;\n }\n }\n }\n else {\n this.selectGivenNodes(sNodes);\n }\n removeClass(sNodes, SELECTED$1);\n };\n TreeView.prototype.selectGivenNodes = function (sNodes) {\n for (var i = 0; i < sNodes.length; i++) {\n if (!sNodes[parseInt(i.toString(), 10)].classList.contains('e-disable')) {\n this.selectNode(sNodes[parseInt(i.toString(), 10)], null, true);\n }\n if (!this.allowMultiSelection) {\n break;\n }\n }\n };\n TreeView.prototype.clickHandler = function (event) {\n var target = Browser.isDevice && event.originalEvent.changedTouches && !Browser.isIos\n ? document.elementFromPoint(event.originalEvent.changedTouches[0].clientX, event.originalEvent.changedTouches[0].clientY)\n : event.originalEvent.target;\n EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);\n if (!target || this.dragStartAction) {\n return;\n }\n else {\n var classList = target.classList;\n var li = closest(target, '.' + LISTITEM);\n if (!li || (li.classList.contains(PREVENTSELECT) && !(classList.contains(EXPANDABLE) || classList.contains(COLLAPSIBLE)))) {\n return;\n }\n else if (event.originalEvent.which !== 3) {\n var rippleElement = select('.' + RIPPLEELMENT, li);\n var rippleIcons = select('.' + ICON, li);\n this.removeHover();\n this.setFocusElement(li);\n if (this.showCheckBox && !li.classList.contains('e-disable')) {\n var checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNullOrUndefined(checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, checkWrapper);\n this.validateCheckNode(checkWrapper, checkElement.classList.contains(CHECK), li, event.originalEvent);\n this.triggerClickEvent(event.originalEvent, li);\n return;\n }\n }\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(li, target, event);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, target, event);\n }\n else if (rippleElement && rippleIcons) {\n if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(EXPANDABLE)) {\n this.expandAction(li, rippleIcons, event);\n }\n else if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, rippleIcons, event);\n }\n else if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n else {\n if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n }\n if (event.originalEvent.which === 3) {\n this.isRightClick = true;\n }\n this.triggerClickEvent(event.originalEvent, li);\n }\n };\n TreeView.prototype.nodeCheckedEvent = function (wrapper, isCheck, e) {\n var eventArgs = this.getCheckEvent(wrapper, isCheck ? 'uncheck' : 'check', e);\n eventArgs.data = eventArgs.data.splice(0, eventArgs.data.length - 1);\n this.trigger('nodeChecked', eventArgs);\n };\n TreeView.prototype.updateOldCheckedData = function (data) {\n var _this = this;\n var dataManager = new DataManager(data);\n var childItems = dataManager.executeLocal(new Query().where('isChecked', 'equal', 'true', true));\n var uncheckedItems = dataManager.executeLocal(new Query().where('isChecked', 'equal', 'false', true));\n if (uncheckedItems.length > 0) {\n var index = this.OldCheckedData.findIndex(function (e) { return e['id'] === uncheckedItems[0]['id']; });\n if (index !== -1) {\n this.OldCheckedData.splice(index, 1);\n var childNodes = this.OldCheckedData.filter(function (e) { return e['parentID'] === uncheckedItems[0]['id']; });\n if (childNodes.length > 0) {\n childNodes.forEach(function (child) {\n var childIndex = _this.OldCheckedData.findIndex(function (e) { return e['id'] === child.id; });\n if (childIndex !== -1) {\n _this.OldCheckedData.splice(childIndex, 1);\n }\n });\n }\n return;\n }\n }\n if (childItems.length > 0) {\n var index = this.OldCheckedData.findIndex(function (e) { return e['id'] === childItems[0]['id']; });\n if (index === -1) {\n this.OldCheckedData.push(childItems[0]);\n return;\n }\n }\n };\n TreeView.prototype.triggerClickEvent = function (e, li) {\n var eventArgs = {\n event: e,\n node: li\n };\n this.trigger('nodeClicked', eventArgs);\n };\n TreeView.prototype.expandNode = function (currLi, icon, loaded) {\n var _this = this;\n this.renderReactTemplates();\n if (icon.classList.contains(LOAD)) {\n this.hideSpinner(icon);\n }\n if (!this.initialRender) {\n icon.classList.add('interaction');\n }\n if (loaded !== true || (loaded === true && currLi.classList.contains('e-expanded'))) {\n if (this.preventExpand !== true) {\n removeClass([icon], EXPANDABLE);\n addClass([icon], COLLAPSIBLE);\n var start_1 = 0;\n var end_1 = 0;\n var ul_1 = select('.' + PARENTITEM, currLi);\n var liEle_1 = currLi;\n if (this.isAnimate && !this.isRefreshed) {\n this.setHeight(liEle_1, ul_1);\n var activeElement_1 = select('.' + LISTITEM + '.' + ACTIVE, currLi);\n this.aniObj.animate(ul_1, {\n name: this.animation.expand.effect,\n duration: (this.animation.expand.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.expand.duration,\n timingFunction: this.animation.expand.easing,\n begin: function () {\n liEle_1.style.overflow = 'hidden';\n if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {\n activeElement_1.classList.add(ITEM_ANIMATION_ACTIVE);\n }\n start_1 = liEle_1.offsetHeight;\n end_1 = select('.' + TEXTWRAP, currLi).offsetHeight;\n },\n progress: function (args) {\n args.element.style.display = 'block';\n _this.animateHeight(args, start_1, end_1);\n },\n end: function (args) {\n args.element.style.display = 'block';\n if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {\n activeElement_1.classList.remove(ITEM_ANIMATION_ACTIVE);\n }\n _this.expandedNode(liEle_1, ul_1, icon);\n }\n });\n }\n else {\n this.expandedNode(liEle_1, ul_1, icon);\n }\n }\n }\n else {\n var ul = select('.' + PARENTITEM, currLi);\n ul.style.display = 'none';\n if (this.fields.dataSource instanceof DataManager === true) {\n this.preventExpand = false;\n }\n }\n if (this.initialRender) {\n icon.classList.add('interaction');\n }\n };\n TreeView.prototype.expandedNode = function (currLi, ul, icon) {\n ul.style.display = 'block';\n currLi.style.display = 'block';\n currLi.style.overflow = '';\n currLi.style.height = '';\n removeClass([icon], PROCESS);\n this.addExpand(currLi);\n if (this.allowTextWrap && this.isLoaded && this.isFirstRender) {\n this.updateWrap(currLi);\n this.isFirstRender = false;\n }\n if (this.isLoaded && this.expandArgs && !this.isRefreshed) {\n this.expandArgs = this.getExpandEvent(currLi, null);\n this.expandArgs.isInteracted = this.isInteracted;\n this.trigger('nodeExpanded', this.expandArgs);\n }\n };\n TreeView.prototype.addExpand = function (liEle) {\n liEle.setAttribute('aria-expanded', 'true');\n removeClass([liEle], NODECOLLAPSED);\n var id = liEle.getAttribute('data-uid');\n if (!isNullOrUndefined(id) && this.expandedNodes.indexOf(id) === -1) {\n this.expandedNodes.push(id);\n }\n };\n TreeView.prototype.collapseNode = function (currLi, icon, e) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n var colArgs;\n if (this.isLoaded) {\n colArgs = this.getExpandEvent(currLi, e);\n this.isInteracted = colArgs.isInteracted;\n this.trigger('nodeCollapsing', colArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n removeClass([icon], PROCESS);\n }\n else {\n _this.nodeCollapseAction(currLi, icon, observedArgs);\n }\n });\n }\n else {\n this.nodeCollapseAction(currLi, icon, colArgs);\n }\n };\n TreeView.prototype.nodeCollapseAction = function (currLi, icon, colArgs) {\n var _this = this;\n removeClass([icon], COLLAPSIBLE);\n addClass([icon], EXPANDABLE);\n var start = 0;\n var end = 0;\n var ul = select('.' + PARENTITEM, currLi);\n var liEle = currLi;\n var activeElement = select('.' + LISTITEM + '.' + ACTIVE, currLi);\n if (this.isAnimate) {\n this.aniObj.animate(ul, {\n name: this.animation.collapse.effect,\n duration: (this.animation.collapse.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n begin: function () {\n liEle.style.overflow = 'hidden';\n if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {\n activeElement.classList.add(ITEM_ANIMATION_ACTIVE);\n }\n start = select('.' + TEXTWRAP, currLi).offsetHeight;\n end = liEle.offsetHeight;\n },\n progress: function (args) {\n _this.animateHeight(args, start, end);\n },\n end: function (args) {\n args.element.style.display = 'none';\n if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {\n activeElement.classList.remove(ITEM_ANIMATION_ACTIVE);\n }\n _this.collapsedNode(liEle, ul, icon, colArgs);\n }\n });\n }\n else {\n this.collapsedNode(liEle, ul, icon, colArgs);\n }\n };\n TreeView.prototype.collapsedNode = function (liEle, ul, icon, colArgs) {\n ul.style.display = 'none';\n liEle.style.overflow = '';\n liEle.style.height = '';\n removeClass([icon], PROCESS);\n this.removeExpand(liEle);\n if (this.isLoaded) {\n colArgs = this.getExpandEvent(liEle, null);\n colArgs.isInteracted = this.isInteracted;\n this.trigger('nodeCollapsed', colArgs);\n }\n };\n TreeView.prototype.removeExpand = function (liEle, toRemove) {\n if (toRemove) {\n liEle.removeAttribute('aria-expanded');\n }\n else {\n this.disableExpandAttr(liEle);\n }\n var index = this.expandedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.expandedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.disableExpandAttr = function (liEle) {\n liEle.setAttribute('aria-expanded', 'false');\n addClass([liEle], NODECOLLAPSED);\n };\n TreeView.prototype.setHeight = function (currLi, ul) {\n ul.style.display = 'block';\n ul.style.visibility = 'hidden';\n currLi.style.height = currLi.offsetHeight + 'px';\n ul.style.display = 'none';\n ul.style.visibility = '';\n };\n TreeView.prototype.animateHeight = function (args, start, end) {\n var remaining = (args.duration - args.timeStamp) / args.duration;\n var currentHeight = (end - start) * remaining + start;\n args.element.parentElement.style.height = currentHeight + 'px';\n };\n TreeView.prototype.renderChildNodes = function (parentLi, expandChild, callback, loaded, isFromExpandAll) {\n var _this = this;\n var eicon = select('div.' + ICON, parentLi);\n if (isNullOrUndefined(eicon)) {\n return;\n }\n this.showSpinner(eicon);\n var childItems;\n if (this.fields.dataSource instanceof DataManager) {\n var level = this.parents(parentLi, '.' + PARENTITEM).length;\n var mapper_2 = this.getChildFields(this.fields, level, 1);\n if (isNullOrUndefined(mapper_2) || isNullOrUndefined(mapper_2.dataSource)) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n return;\n }\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager && this.isOffline) {\n this.treeList.pop();\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));\n this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);\n }\n else {\n mapper_2.dataSource.executeQuery(this.getQuery(mapper_2, parentLi.getAttribute('data-uid'))).then(function (e) {\n _this.treeList.pop();\n childItems = e.result;\n if (_this.dataType === 1) {\n _this.dataType = 2;\n }\n _this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n }\n else {\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'), false, parseFloat(parentLi.getAttribute('aria-level')) + 1);\n this.currentLoadData = this.getSortedData(childItems);\n if (isNullOrUndefined(childItems) || childItems.length === 0) {\n detach(eicon);\n if (eicon.classList.contains(LOAD)) {\n this.hideSpinner(eicon);\n }\n this.removeExpand(parentLi, true);\n return;\n }\n else {\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.createElement, this.currentLoadData, this.listBaseOption));\n this.expandNode(parentLi, eicon, loaded);\n this.setSelectionForChildNodes(childItems);\n this.ensureCheckNode(parentLi, isFromExpandAll);\n this.finalizeNode(parentLi, isFromExpandAll, expandChild);\n this.disableTreeNodes(childItems);\n this.renderSubChild(parentLi, expandChild, loaded, isFromExpandAll);\n }\n }\n };\n TreeView.prototype.loadChild = function (childItems, mapper, eicon, parentLi, expandChild, callback, loaded) {\n this.currentLoadData = childItems;\n if (isNullOrUndefined(childItems) || childItems.length === 0) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n }\n else {\n this.updateListProp(mapper);\n if (this.fields.dataSource instanceof DataManager && !this.isOffline) {\n var id = parentLi.getAttribute('data-uid');\n var nodeData = this.getNodeObject(id);\n setValue('child', childItems, nodeData);\n }\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.createElement, childItems, this.listBaseOption));\n this.expandNode(parentLi, eicon, loaded);\n this.setSelectionForChildNodes(childItems);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n this.disableTreeNodes(childItems);\n this.renderSubChild(parentLi, expandChild, loaded);\n }\n if (callback) {\n callback();\n }\n if (expandChild) {\n this.expandedNodes.push(parentLi.getAttribute('data-uid'));\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.disableTreeNodes = function (childItems) {\n if (isNullOrUndefined(this.disableNode) || this.disableNode.length === 0) {\n return;\n }\n var i = 0;\n while (i < childItems.length) {\n var id = childItems[parseInt(i.toString(), 10)][this.fields.id]\n ? childItems[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.disableNode !== undefined && this.disableNode.indexOf(id) !== -1) {\n this.doDisableAction([id]);\n }\n i++;\n }\n };\n /**\n * Sets the child Item in selectedState while rendering the child node\n *\n * @param {Object[]} nodes - Array of nodes\n * @returns {void}\n */\n TreeView.prototype.setSelectionForChildNodes = function (nodes) {\n if (isNullOrUndefined(this.selectedNodes) || this.selectedNodes.length === 0) {\n return;\n }\n var i;\n for (i = 0; i < nodes.length; i++) {\n var id = nodes[parseInt(i.toString(), 10)][this.fields.id]\n ? nodes[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.selectedNodes !== undefined && this.selectedNodes.indexOf(id) !== -1) {\n this.doSelectionAction();\n }\n }\n };\n TreeView.prototype.ensureCheckNode = function (element, isFromExpandAll) {\n if (this.showCheckBox) {\n this.ele = (this.checkedElement) ? this.checkedElement.indexOf(element.getAttribute('data-uid')) : null;\n if (this.autoCheck) {\n this.ensureChildCheckState(element, null, isFromExpandAll);\n if (isFromExpandAll ? (select('.' + CHECK, this.element) || select('.' + INDETERMINATE, this.element)) : true) {\n this.ensureParentCheckState(element);\n }\n }\n }\n this.currentLoadData = null;\n };\n TreeView.prototype.getFields = function (mapper, nodeLevel, dataLevel) {\n if (nodeLevel === dataLevel) {\n return mapper;\n }\n else {\n return this.getFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildFields = function (mapper, nodeLevel, dataLevel) {\n if (nodeLevel === dataLevel) {\n return this.getChildMapper(mapper);\n }\n else {\n return this.getChildFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildMapper = function (mapper) {\n return (typeof mapper.child === 'string' || isNullOrUndefined(mapper.child)) ? mapper : mapper.child;\n };\n TreeView.prototype.getChildNodes = function (obj, parentId, isRoot, level) {\n var _this = this;\n if (isRoot === void 0) { isRoot = false; }\n var childNodes;\n if (isNullOrUndefined(obj)) {\n return childNodes;\n }\n if (this.dataType === 1) {\n return this.getChildGroup(this.groupedData, parentId, isRoot);\n }\n if (typeof this.fields.child === 'string') {\n return this.findChildNodes(obj, this.fields.id, parentId) || this.findNestedChildNodes(obj, parentId, level) || [];\n }\n if (this.isChildObject()) {\n var tempField = !isNullOrUndefined(level) ? this.fields : this.fields.child;\n var i = 1;\n while (i < level) {\n if (!isNullOrUndefined(tempField.child)) {\n tempField = tempField.child;\n }\n else {\n break;\n }\n i++;\n }\n this.updateListProp(tempField);\n var index = obj.findIndex(function (data) {\n return getValue(_this.fields.id, data) &&\n getValue(_this.fields.id, data).toString() === parentId;\n });\n if (index !== -1) {\n return getValue('child', obj[parseInt(index.toString(), 10)]);\n }\n if (index === -1) {\n for (var i_1 = 0, objlen = obj.length; i_1 < objlen; i_1++) {\n var tempArray = getValue('child', obj[parseInt(i_1.toString(), 10)]);\n var childIndex = !isNullOrUndefined(tempArray)\n ? tempArray.findIndex(function (data) {\n return getValue(_this.fields.child.id, data) &&\n getValue(_this.fields.child.id, data).toString() === parentId;\n })\n : -1;\n if (childIndex !== -1) {\n return getValue('child', tempArray[parseInt(childIndex.toString(), 10)]);\n }\n else if (!isNullOrUndefined(tempArray)) {\n childNodes = this.getChildNodes(tempArray, parentId, false, level);\n if (childNodes !== undefined) {\n break;\n }\n }\n }\n }\n }\n return childNodes;\n };\n TreeView.prototype.findChildNodes = function (items, idField, parentId) {\n var index = items.findIndex(function (data) {\n var value = getValue(idField, data);\n return value && value.toString() === parentId;\n });\n if (index !== -1) {\n return getValue(this.fields.child, items[index]);\n }\n return null;\n };\n TreeView.prototype.findNestedChildNodes = function (items, parentId, level) {\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n var tempArray = getValue(this.fields.child, item);\n if (!isNullOrUndefined(tempArray)) {\n var childNodes = this.findChildNodes(tempArray, this.fields.id, parentId);\n if (childNodes) {\n return childNodes;\n }\n var nestedChildNodes = this.getChildNodes(tempArray, parentId, false, level);\n if (nestedChildNodes && nestedChildNodes.length > 0) {\n return nestedChildNodes;\n }\n }\n }\n return undefined;\n };\n TreeView.prototype.getChildGroup = function (data, parentId, isRoot) {\n var childNodes;\n if (isNullOrUndefined(data)) {\n return childNodes;\n }\n for (var i = 0, objlen = data.length; i < objlen; i++) {\n if (!isNullOrUndefined(data[parseInt(i.toString(), 10)][0]) &&\n !isNullOrUndefined(getValue(this.fields.parentID, data[parseInt(i.toString(), 10)][0]))) {\n if (getValue(this.fields.parentID, data[parseInt(i.toString(), 10)][0]).toString() === parentId) {\n return data[parseInt(i.toString(), 10)];\n }\n }\n else if (isRoot) {\n return data[parseInt(i.toString(), 10)];\n }\n else {\n return [];\n }\n }\n return childNodes;\n };\n TreeView.prototype.renderSubChild = function (element, expandChild, loaded, isFromExpandAll) {\n if (expandChild) {\n var cIcons = selectAll('.' + EXPANDABLE, element);\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[parseInt(i.toString(), 10)];\n if (element.querySelector('.e-icons') !== cIcons[parseInt(i.toString(), 10)]) {\n var curLi = closest(icon, '.' + LISTITEM);\n this.expandArgs = this.getExpandEvent(curLi, null);\n if (loaded !== true) {\n this.trigger('nodeExpanding', this.expandArgs);\n }\n this.renderChildNodes(curLi, expandChild, null, loaded, isFromExpandAll);\n }\n }\n }\n };\n TreeView.prototype.toggleSelect = function (li, e, multiSelect) {\n if (!li.classList.contains('e-disable')) {\n if (this.allowMultiSelection && ((e && e.ctrlKey) || multiSelect) && this.isActive(li)) {\n this.unselectNode(li, e);\n }\n else {\n this.selectNode(li, e, multiSelect);\n }\n }\n };\n TreeView.prototype.isActive = function (li) {\n return li.classList.contains(ACTIVE) ? true : false;\n };\n TreeView.prototype.selectNode = function (li, e, multiSelect) {\n var _this = this;\n if (isNullOrUndefined(li) || (!this.allowMultiSelection && this.isActive(li) && !isNullOrUndefined(e))) {\n this.setFocusElement(li);\n return;\n }\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'select', e);\n this.trigger('nodeSelecting', eventArgs, function (observedArgs) {\n if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {\n _this.nodeSelectAction(li, e, observedArgs, multiSelect);\n }\n });\n }\n else {\n this.nodeSelectAction(li, e, eventArgs, multiSelect);\n }\n };\n TreeView.prototype.nodeSelectAction = function (li, e, eventArgs, multiSelect) {\n if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !(e.ctrlKey || e.metaKey))))) {\n this.removeSelectAll();\n }\n if (this.allowMultiSelection && e && e.shiftKey) {\n if (!this.startNode) {\n this.startNode = li;\n }\n var startIndex = this.liList.indexOf(this.startNode);\n var endIndex = this.liList.indexOf(li);\n if (startIndex > endIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex; i <= endIndex; i++) {\n var currNode = this.liList[parseInt(i.toString(), 10)];\n if (isVisible(currNode) && !currNode.classList.contains('e-disable')) {\n this.addSelect(currNode);\n }\n }\n }\n else {\n this.startNode = li;\n this.addSelect(li);\n }\n if (this.isLoaded) {\n eventArgs.nodeData = this.getNodeData(li);\n this.trigger('nodeSelected', eventArgs);\n this.isRightClick = false;\n }\n this.isRightClick = false;\n };\n TreeView.prototype.unselectNode = function (li, e) {\n var _this = this;\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'un-select', e);\n this.trigger('nodeSelecting', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeUnselectAction(li, observedArgs);\n }\n });\n }\n else {\n this.nodeUnselectAction(li, eventArgs);\n }\n };\n TreeView.prototype.nodeUnselectAction = function (li, eventArgs) {\n this.removeSelect(li);\n this.setFocusElement(li);\n if (this.isLoaded) {\n eventArgs.nodeData = this.getNodeData(li);\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.setFocusElement = function (li) {\n if (!isNullOrUndefined(li)) {\n var focusedNode = this.getFocusedNode();\n if (focusedNode) {\n removeClass([focusedNode], FOCUS);\n focusedNode.setAttribute('tabindex', '-1');\n }\n addClass([li], FOCUS);\n li.setAttribute('tabindex', '0');\n EventHandler.add(li, 'blur', this.focusOut, this);\n this.updateIdAttr(focusedNode, li);\n }\n };\n TreeView.prototype.addSelect = function (liEle) {\n liEle.setAttribute('aria-selected', 'true');\n addClass([liEle], ACTIVE);\n var id = liEle.getAttribute('data-uid');\n if (!isNullOrUndefined(id) && this.selectedNodes.indexOf(id) === -1) {\n this.selectedNodes.push(id);\n }\n };\n TreeView.prototype.removeSelect = function (liEle) {\n if (this.allowMultiSelection) {\n liEle.setAttribute('aria-selected', 'false');\n }\n else {\n liEle.removeAttribute('aria-selected');\n }\n removeClass([liEle], ACTIVE);\n var index = this.selectedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.selectedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.removeSelectAll = function () {\n var selectedLI = this.element.querySelectorAll('.' + ACTIVE);\n for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {\n var ele = selectedLI_1[_i];\n if (this.allowMultiSelection) {\n ele.setAttribute('aria-selected', 'false');\n }\n else {\n ele.removeAttribute('aria-selected');\n }\n }\n removeClass(selectedLI, ACTIVE);\n this.setProperties({ selectedNodes: [] }, true);\n };\n TreeView.prototype.getSelectEvent = function (currLi, action, e) {\n var nodeData = this.getNodeData(currLi);\n return { action: action, cancel: false, isInteracted: isNullOrUndefined(e) ? false : true, node: currLi, nodeData: nodeData };\n };\n TreeView.prototype.setExpandOnType = function () {\n this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;\n };\n TreeView.prototype.expandHandler = function (e) {\n var target = e.originalEvent.target;\n if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||\n target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||\n target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {\n return;\n }\n else {\n this.expandCollapseAction(closest(target, '.' + LISTITEM), e);\n }\n };\n TreeView.prototype.expandCollapseAction = function (currLi, e) {\n var icon = select('div.' + ICON, currLi);\n if (!icon || icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n var classList = icon.classList;\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(currLi, icon, e);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(currLi, icon, e);\n }\n }\n };\n TreeView.prototype.expandAction = function (currLi, icon, e, expandChild, callback, isFromExpandAll) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n if (this.isLoaded && !this.isRefreshed) {\n this.expandArgs = this.getExpandEvent(currLi, e);\n this.isInteracted = this.expandArgs.isInteracted;\n this.trigger('nodeExpanding', this.expandArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n removeClass([icon], PROCESS);\n }\n else {\n _this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll);\n }\n });\n }\n else {\n this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll);\n }\n };\n TreeView.prototype.nodeExpandAction = function (currLi, icon, expandChild, callback, isFromExpandAll) {\n var ul = select('.' + PARENTITEM, currLi);\n if (ul && ul.nodeName === 'UL') {\n this.expandNode(currLi, icon);\n }\n else {\n this.isFirstRender = true;\n this.renderChildNodes(currLi, expandChild, callback, null, isFromExpandAll);\n var liEles = selectAll('.' + LISTITEM, currLi);\n for (var i = 0; i < liEles.length; i++) {\n var id = this.getId(liEles[parseInt(i.toString(), 10)]);\n if (this.expandChildren.indexOf(id) !== -1 && this.expandChildren !== undefined) {\n var icon_1 = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEles[parseInt(i.toString(), 10)]));\n if (!isNullOrUndefined(icon_1)) {\n this.expandAction(liEles[parseInt(i.toString(), 10)], icon_1, null);\n }\n this.expandChildren.splice(this.expandChildren.indexOf(id), 1);\n }\n }\n }\n };\n TreeView.prototype.keyActionHandler = function (e) {\n var _this = this;\n var target = e.target;\n var focusedNode = this.getFocusedNode();\n if (target && target.classList.contains(INPUT)) {\n var inpEle = target;\n if (e.action === 'enter') {\n inpEle.blur();\n }\n else if (e.action === 'escape') {\n inpEle.value = this.oldText;\n inpEle.blur();\n }\n return;\n }\n e.preventDefault();\n var eventArgs = {\n cancel: false,\n event: e,\n node: focusedNode\n };\n this.trigger('keyPress', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n switch (e.action) {\n case 'space':\n if (_this.showCheckBox) {\n _this.checkNode(e);\n }\n else {\n _this.toggleSelect(focusedNode, e);\n }\n break;\n case 'moveRight':\n _this.openNode(_this.enableRtl ? false : true, e);\n break;\n case 'moveLeft':\n _this.openNode(_this.enableRtl ? true : false, e);\n break;\n case 'shiftDown':\n _this.shiftKeySelect(true, e);\n break;\n case 'moveDown':\n case 'ctrlDown':\n case 'csDown':\n _this.navigateNode(true);\n break;\n case 'shiftUp':\n _this.shiftKeySelect(false, e);\n break;\n case 'moveUp':\n case 'ctrlUp':\n case 'csUp':\n _this.navigateNode(false);\n break;\n case 'home':\n case 'shiftHome':\n case 'ctrlHome':\n case 'csHome':\n _this.navigateRootNode(true);\n break;\n case 'end':\n case 'shiftEnd':\n case 'ctrlEnd':\n case 'csEnd':\n _this.navigateRootNode(false);\n break;\n case 'enter':\n case 'ctrlEnter':\n case 'shiftEnter':\n case 'csEnter':\n case 'shiftSpace':\n case 'ctrlSpace':\n _this.toggleSelect(focusedNode, e);\n break;\n case 'f2':\n if (_this.allowEditing && !focusedNode.classList.contains('e-disable')) {\n _this.createTextbox(focusedNode);\n }\n break;\n case 'ctrlA':\n if (_this.allowMultiSelection) {\n var sNodes = selectAll('.' + LISTITEM + ':not(.' + ACTIVE + ')', _this.element);\n _this.selectGivenNodes(sNodes);\n }\n break;\n }\n }\n });\n };\n TreeView.prototype.navigateToFocus = function (isUp) {\n var focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);\n var pos = focusNode.getBoundingClientRect();\n var parent = this.getScrollParent(this.element);\n if (!isNullOrUndefined(parent)) {\n var parentPos = parent.getBoundingClientRect();\n if (pos.bottom > parentPos.bottom) {\n parent.scrollTop += pos.bottom - parentPos.bottom;\n }\n else if (pos.top < parentPos.top) {\n parent.scrollTop -= parentPos.top - pos.top;\n }\n }\n var isVisible = this.isVisibleInViewport(focusNode);\n if (!isVisible) {\n focusNode.scrollIntoView(isUp);\n }\n };\n TreeView.prototype.isVisibleInViewport = function (txtWrap) {\n var pos = txtWrap.getBoundingClientRect();\n return (pos.top >= 0 && pos.left >= 0 && pos.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n pos.right <= (window.innerWidth || document.documentElement.clientWidth));\n };\n TreeView.prototype.getScrollParent = function (node) {\n if (isNullOrUndefined(node)) {\n return null;\n }\n return (node.scrollHeight > node.clientHeight) ? node : this.getScrollParent(node.parentElement);\n };\n TreeView.prototype.shiftKeySelect = function (isTowards, e) {\n if (this.allowMultiSelection) {\n var focusedNode = this.getFocusedNode();\n var nextNode = isTowards ? this.getNextNode(focusedNode) : this.getPrevNode(focusedNode);\n this.removeHover();\n this.setFocusElement(nextNode);\n this.toggleSelect(nextNode, e, false);\n this.navigateToFocus(!isTowards);\n }\n else {\n this.navigateNode(isTowards);\n }\n };\n TreeView.prototype.checkNode = function (e) {\n var focusedNode = this.getFocusedNode();\n var checkWrap = select('.' + CHECKBOXWRAP, focusedNode);\n var isChecked = select(' .' + CHECKBOXFRAME, checkWrap).classList.contains(CHECK);\n if (!focusedNode.classList.contains('e-disable')) {\n if (focusedNode.getElementsByClassName('e-checkbox-disabled').length === 0) {\n this.validateCheckNode(checkWrap, isChecked, focusedNode, e);\n }\n }\n };\n TreeView.prototype.validateCheckNode = function (checkWrap, isCheck, li, e) {\n var _this = this;\n var currLi = closest(checkWrap, '.' + LISTITEM);\n this.checkActionNodes = [];\n var ariaState = !isCheck ? 'true' : 'false';\n if (!isNullOrUndefined(ariaState)) {\n currLi.setAttribute('aria-checked', ariaState);\n }\n var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);\n this.trigger('nodeChecking', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeCheckingAction(checkWrap, isCheck, li, observedArgs, e);\n }\n });\n };\n TreeView.prototype.nodeCheckingAction = function (checkWrap, isCheck, li, eventArgs, e) {\n if (this.checkedElement.indexOf(li.getAttribute('data-uid')) === -1) {\n this.checkedElement.push(li.getAttribute('data-uid'));\n if (this.autoCheck) {\n var child = this.getChildNodes(this.treeData, li.getAttribute('data-uid'));\n if (child !== null) {\n this.allCheckNode(child, this.checkedElement, null, null, false);\n }\n else {\n child = null;\n }\n }\n }\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);\n if (this.autoCheck) {\n this.ensureChildCheckState(li);\n this.updateOldCheckedData([this.getNodeData(li)]);\n this.ensureParentCheckState(closest(closest(li, '.' + PARENTITEM), '.' + LISTITEM));\n var doCheck = void 0;\n if (eventArgs.action === 'check') {\n doCheck = true;\n }\n else if (eventArgs.action === 'uncheck') {\n doCheck = false;\n }\n this.ensureStateChange(li, doCheck);\n }\n this.nodeCheckedEvent(checkWrap, isCheck, e);\n };\n /**\n * Update checkedNodes when UI interaction happens before the child node renders in DOM\n *\n * @param {Element} li - The list item element\n * @param {boolean} [doCheck] - Optional parameter to specify whether to perform a check\n * @returns {void}\n */\n TreeView.prototype.ensureStateChange = function (li, doCheck) {\n var _this = this;\n var childElement = select('.' + PARENTITEM, li);\n var parentIndex = li.getAttribute('data-uid');\n var mapper = this.fields;\n if (this.dataType === 1 && this.autoCheck) {\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.parentID, 'equal', parentIndex, true));\n var childMatchesCheckedNodes = resultData.filter(function (item) {\n return _this.checkedNodes.indexOf(item[mapper.id].toString()) !== -1;\n }, this);\n if (this.checkedNodes.indexOf(parentIndex) !== -1 && childMatchesCheckedNodes.length !== resultData.length && this.isFilter) {\n if (childMatchesCheckedNodes.length > 0) {\n resultData = childMatchesCheckedNodes;\n }\n }\n for (var i = 0; i < resultData.length; i++) {\n var resultId = resultData[parseInt(i.toString(), 10)][this.fields.id]\n ? resultData[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n var isCheck = resultData[parseInt(i.toString(), 10)][this.fields.isChecked]\n ? resultData[parseInt(i.toString(), 10)][this.fields.isChecked].toString()\n : null;\n if (this.checkedNodes.indexOf(parentIndex) !== -1 && this.checkedNodes.indexOf(resultId) === -1) {\n this.checkDisabledState(resultId, resultData[i]);\n var childItems = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childItems, doCheck);\n if (this.parentNodeCheck.indexOf(resultId) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);\n }\n }\n else if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null &&\n this.checkedNodes.indexOf(resultId) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(resultId), 1);\n if (isCheck === 'true') {\n this.updateField(this.treeData, this.fields, resultId, 'isChecked', null);\n }\n if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null ||\n this.parentNodeCheck.indexOf(resultId) !== -1) {\n var childNodes = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childNodes, doCheck);\n if (this.parentNodeCheck.indexOf(resultId) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);\n }\n }\n }\n else {\n var childItems = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childItems, doCheck);\n }\n }\n }\n else if (this.dataType === 1 && !this.autoCheck) {\n if (!doCheck) {\n var checkedData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));\n for (var i = 0; i < checkedData.length; i++) {\n var id = checkedData[parseInt(i.toString(), 10)][this.fields.id]\n ? checkedData[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(id) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);\n }\n this.updateField(this.treeData, this.fields, id, 'isChecked', null);\n }\n this.checkedNodes = [];\n }\n else {\n for (var i = 0; i < this.treeData.length; i++) {\n var checkedId = this.treeData[parseInt(i.toString(), 10)][this.fields.id]\n ? this.treeData[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n if (this.checkedNodes.indexOf(checkedId) === -1) {\n this.checkDisabledState(checkedId, this.treeData[i]);\n }\n }\n }\n }\n else {\n var childItems = this.getChildNodes(this.treeData, parentIndex);\n if (childItems) {\n var filteredChildItems = childItems.filter(function (item) {\n var itemValue = String(item[Object.keys(item)[0]]);\n return _this.checkedNodes.indexOf(itemValue) !== -1;\n });\n if (filteredChildItems.length > 0 && childItems.length && this.isFilter) {\n childItems = filteredChildItems;\n }\n this.childStateChange(childItems, parentIndex, childElement, doCheck);\n }\n }\n };\n TreeView.prototype.checkDisabledState = function (resultId, currentItem) {\n var requiresUpdate = this.checkDisabledChildren;\n if (!requiresUpdate) {\n var shouldPreventUpdate = true;\n if (this.loadOnDemand && this.fields.htmlAttributes) {\n currentItem = isNullOrUndefined(currentItem) ? currentItem : this.getNodeObject(resultId);\n if (!isNullOrUndefined(currentItem)) {\n var htmlAttributes = currentItem[this.fields.htmlAttributes];\n if (htmlAttributes && !isNullOrUndefined(htmlAttributes.class) && htmlAttributes.class.indexOf(DISABLE) !== -1) {\n shouldPreventUpdate = false;\n }\n }\n }\n var liElement = select(\"[data-uid=\\\"\" + resultId + \"\\\"]\", this.element);\n requiresUpdate = liElement ? !liElement.classList.contains(DISABLE)\n : (this.disableNode.indexOf(resultId) === -1 && shouldPreventUpdate);\n }\n if (requiresUpdate) {\n this.checkedNodes.push(resultId);\n }\n };\n TreeView.prototype.getChildItems = function (childItems, doCheck) {\n for (var i = 0; i < childItems.length; i++) {\n var childId = childItems[parseInt(i.toString(), 10)][this.fields.id]\n ? childItems[parseInt(i.toString(), 10)][this.fields.id].toString()\n : null;\n var childIsCheck = childItems[parseInt(i.toString(), 10)][this.fields.isChecked]\n ? childItems[parseInt(i.toString(), 10)][this.fields.isChecked].toString()\n : null;\n if (this.checkedNodes.indexOf(childId) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(childId), 1);\n }\n if (this.checkedNodes.indexOf(childId) === -1 && doCheck) {\n this.checkDisabledState(childId, childItems[i]);\n }\n if (childIsCheck === 'true' && !doCheck) {\n this.updateField(this.treeData, this.fields, childId, 'isChecked', null);\n }\n var subChildItems = this.getChildNodes(this.treeData, childId);\n if (subChildItems.length > 0) {\n this.getChildItems(subChildItems, doCheck);\n }\n }\n };\n /**\n * Update checkedNodes when UI interaction happens before the child node renders in DOM for hierarchical DS\n *\n * @param {Object[]} childItems - Array of child items\n * @param {string} parent - Parent identifier\n * @param {Element} childElement - Child DOM element\n * @param {boolean} [doCheck] - Optional parameter to specify whether to perform a check\n * @returns {void}\n */\n TreeView.prototype.childStateChange = function (childItems, parent, childElement, doCheck) {\n for (var i = 0; i < childItems.length; i++) {\n var checkedChild = childItems[parseInt(i.toString(), 10)][this.fields.id] ? childItems[parseInt(i.toString(), 10)][this.fields.id].toString() : '';\n var isCheck = childItems[parseInt(i.toString(), 10)][this.fields.isChecked]\n ? childItems[parseInt(i.toString(), 10)][this.fields.isChecked].toString()\n : null;\n if (this.autoCheck) {\n if (this.checkedNodes.indexOf(parent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkDisabledState(checkedChild, childItems[i]);\n if (this.parentNodeCheck.indexOf(checkedChild) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(checkedChild), 1);\n }\n }\n else if (this.checkedNodes.indexOf(parent) === -1 && this.checkedNodes.indexOf(checkedChild) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);\n if (isCheck === 'true') {\n this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);\n }\n }\n }\n else if (!this.autoCheck) {\n if (!doCheck) {\n if (this.checkedNodes.indexOf(checkedChild) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);\n }\n this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);\n this.checkedNodes = [];\n }\n else {\n if (this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkDisabledState(checkedChild, childItems[i]);\n }\n }\n }\n var subChild = this.getChildNodes([childItems[parseInt(i.toString(), 10)]], checkedChild);\n if (subChild) {\n this.childStateChange(subChild, parent, childElement, doCheck);\n }\n }\n };\n //This method can be used to get all child nodes of a parent by passing the children of a parent along with 'validateCheck' set to false\n TreeView.prototype.allCheckNode = function (child, newCheck, checked, childCheck, validateCheck) {\n if (child) {\n for (var length_1 = 0; length_1 < child.length; length_1++) {\n var childId = getValue(this.fields.id, child[parseInt(length_1.toString(), 10)]);\n var check = this.element.querySelector('[data-uid=\"' + childId + '\"]');\n //Validates isChecked case while no UI interaction has been performed on the node or it's parent\n if (validateCheck !== false && this.checkedElement.indexOf(childId.toString()) === -1) {\n if (((check === null && !isNullOrUndefined(child[parseInt(length_1.toString(), 10)][this.fields.isChecked]) &&\n newCheck.indexOf(childId.toString()) === -1)\n || childCheck === 0 || checked === 2)) {\n if (child[parseInt(length_1.toString(), 10)][this.fields.isChecked] !== false || checked === 2) {\n newCheck.push(childId.toString());\n }\n else {\n childCheck = null;\n }\n childCheck = (child[parseInt(length_1.toString(), 10)][this.fields.isChecked] !== false || checked === 2) ? 0 : null;\n }\n }\n //Pushes child checked node done thro' UI interaction\n if (newCheck.indexOf(childId.toString()) === -1 && isNullOrUndefined(checked)) {\n newCheck.push(childId.toString());\n }\n var hierChildId = getValue(this.fields.child.toString(), child[parseInt(length_1.toString(), 10)]);\n //Gets if any next level children are available for child nodes\n if (getValue(this.fields.hasChildren, child[parseInt(length_1.toString(), 10)]) === true || hierChildId) {\n var id = getValue(this.fields.id, child[parseInt(length_1.toString(), 10)]);\n var childId_1 = void 0;\n if (this.dataType === 1) {\n childId_1 = this.getChildNodes(this.treeData, id.toString());\n }\n else {\n childId_1 = hierChildId;\n }\n if (childId_1) {\n if (isNullOrUndefined(validateCheck)) {\n this.allCheckNode(childId_1, newCheck, checked, childCheck);\n }\n else {\n this.allCheckNode(childId_1, newCheck, checked, childCheck, validateCheck);\n }\n childCheck = null;\n }\n }\n childCheck = null;\n }\n }\n };\n TreeView.prototype.openNode = function (toBeOpened, e) {\n var focusedNode = this.getFocusedNode();\n var icon = select('div.' + ICON, focusedNode);\n if (toBeOpened) {\n if (!icon) {\n return;\n }\n else if (icon.classList.contains(EXPANDABLE)) {\n this.expandAction(focusedNode, icon, e);\n }\n else {\n this.focusNextNode(focusedNode, true);\n }\n }\n else {\n if (icon && icon.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(focusedNode, icon, e);\n }\n else {\n var parentLi = closest(closest(focusedNode, '.' + PARENTITEM), '.' + LISTITEM);\n if (!parentLi) {\n return;\n }\n else {\n if (!parentLi.classList.contains('e-disable')) {\n this.setFocus(focusedNode, parentLi);\n this.navigateToFocus(true);\n }\n }\n }\n }\n };\n TreeView.prototype.navigateNode = function (isTowards) {\n var focusedNode = this.getFocusedNode();\n this.focusNextNode(focusedNode, isTowards);\n };\n TreeView.prototype.navigateRootNode = function (isBackwards) {\n var focusedNode = this.getFocusedNode();\n var rootNode = isBackwards ? this.getRootNode() : this.getEndNode();\n if (!rootNode.classList.contains('e-disable')) {\n this.setFocus(focusedNode, rootNode);\n this.navigateToFocus(isBackwards);\n }\n };\n TreeView.prototype.getFocusedNode = function () {\n var selectedItem;\n var fNode = select('.' + LISTITEM + '[tabindex=\"0\"]', this.element);\n if (!isNullOrUndefined(fNode)) {\n var ariaChecked = fNode.getAttribute('aria-checked');\n if (ariaChecked === 'mixed' || ariaChecked === 'false') {\n this.isFilter = false;\n }\n }\n if (isNullOrUndefined(fNode)) {\n selectedItem = select('.' + LISTITEM, this.element);\n }\n return isNullOrUndefined(fNode) ? (isNullOrUndefined(selectedItem) ? this.element.firstElementChild : selectedItem) : fNode;\n };\n TreeView.prototype.focusNextNode = function (li, isTowards) {\n var nextNode = isTowards ? this.getNextNode(li) : this.getPrevNode(li);\n this.setFocus(li, nextNode);\n this.navigateToFocus(!isTowards);\n if (nextNode.classList.contains('e-disable')) {\n var lastChild = nextNode.lastChild;\n if (nextNode.previousSibling == null && nextNode.classList.contains('e-level-1')) {\n this.focusNextNode(nextNode, true);\n }\n else if (nextNode.nextSibling == null && nextNode.classList.contains('e-node-collapsed')) {\n this.focusNextNode(nextNode, false);\n }\n else if (nextNode.nextSibling == null && lastChild.classList.contains(TEXTWRAP)) {\n this.focusNextNode(nextNode, false);\n }\n else {\n this.focusNextNode(nextNode, isTowards);\n }\n }\n };\n TreeView.prototype.getNextNode = function (li) {\n var index = this.liList.indexOf(li);\n var nextNode;\n do {\n index++;\n nextNode = this.liList[parseInt(index.toString(), 10)];\n if (isNullOrUndefined(nextNode)) {\n return li;\n }\n } while (!isVisible(nextNode));\n return nextNode;\n };\n TreeView.prototype.getPrevNode = function (li) {\n var index = this.liList.indexOf(li);\n var prevNode;\n do {\n index--;\n prevNode = this.liList[parseInt(index.toString(), 10)];\n if (isNullOrUndefined(prevNode)) {\n return li;\n }\n } while (!isVisible(prevNode));\n return prevNode;\n };\n TreeView.prototype.getRootNode = function () {\n var index = 0;\n var rootNode;\n do {\n rootNode = this.liList[parseInt(index.toString(), 10)];\n index++;\n } while (!isVisible(rootNode));\n return rootNode;\n };\n TreeView.prototype.getEndNode = function () {\n var index = this.liList.length - 1;\n var endNode;\n do {\n endNode = this.liList[parseInt(index.toString(), 10)];\n index--;\n } while (!isVisible(endNode));\n return endNode;\n };\n TreeView.prototype.setFocus = function (preNode, nextNode) {\n removeClass([preNode], FOCUS);\n preNode.setAttribute('tabindex', '-1');\n if (!nextNode.classList.contains('e-disable')) {\n addClass([nextNode], FOCUS);\n nextNode.setAttribute('tabindex', '0');\n nextNode.focus();\n EventHandler.add(nextNode, 'blur', this.focusOut, this);\n this.updateIdAttr(preNode, nextNode);\n }\n };\n TreeView.prototype.updateIdAttr = function (preNode, nextNode) {\n this.element.removeAttribute('aria-activedescendant');\n if (preNode) {\n preNode.removeAttribute('id');\n }\n nextNode.setAttribute('id', this.element.id + '_active');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n };\n TreeView.prototype.focusIn = function () {\n if (!this.mouseDownStatus) {\n var focusedElement = this.getFocusedNode();\n if (focusedElement.classList.contains('e-disable')) {\n focusedElement.setAttribute('tabindex', '-1');\n this.navigateNode(true);\n }\n else {\n focusedElement.setAttribute('tabindex', '0');\n addClass([focusedElement], FOCUS);\n EventHandler.add(focusedElement, 'blur', this.focusOut, this);\n }\n this.mouseDownStatus = false;\n }\n };\n TreeView.prototype.focusOut = function (event) {\n var focusedElement = this.getFocusedNode();\n if (event.target === focusedElement) {\n removeClass([focusedElement], FOCUS);\n EventHandler.remove(focusedElement, 'blur', this.focusOut);\n }\n };\n TreeView.prototype.onMouseOver = function (e) {\n if (Browser.isDevice) {\n return;\n }\n var target = e.target;\n var classList = target.classList;\n var currentLi = closest(target, '.' + LISTITEM);\n if (!currentLi || classList.contains(PARENTITEM) || classList.contains(LISTITEM)) {\n this.removeHover();\n return;\n }\n else {\n if (currentLi && !currentLi.classList.contains('e-disable')) {\n this.setHover(currentLi);\n }\n }\n };\n TreeView.prototype.setHover = function (li) {\n if (!li.classList.contains(HOVER) && !li.classList.contains(PREVENTSELECT)) {\n this.removeHover();\n addClass([li], HOVER);\n }\n };\n TreeView.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n TreeView.prototype.removeHover = function () {\n var hoveredNode = selectAll('.' + HOVER, this.element);\n if (hoveredNode && hoveredNode.length) {\n removeClass(hoveredNode, HOVER);\n }\n };\n TreeView.prototype.getNodeData = function (currLi, fromDS) {\n if (!isNullOrUndefined(currLi) && currLi.classList.contains(LISTITEM) &&\n !isNullOrUndefined(closest(currLi, '.' + CONTROL)) && closest(currLi, '.' + CONTROL).classList.contains(ROOT)) {\n var id = currLi.getAttribute('data-uid');\n var text = this.getText(currLi, fromDS);\n var pNode = closest(currLi.parentNode, '.' + LISTITEM);\n var pid = pNode ? pNode.getAttribute('data-uid') : null;\n var selected = currLi.classList.contains(ACTIVE);\n var selectable = currLi.classList.contains(PREVENTSELECT) ? false : true;\n var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;\n var hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;\n var checked = null;\n var checkboxElement = select('.' + CHECKBOXWRAP, currLi);\n if (this.showCheckBox && checkboxElement) {\n checked = currLi.getAttribute('aria-checked');\n }\n return {\n id: id, text: text, parentID: pid, selected: selected, selectable: selectable, expanded: expanded,\n isChecked: checked, hasChildren: hasChildren\n };\n }\n return { id: '', text: '', parentID: '', selected: false, expanded: false, isChecked: '', hasChildren: false };\n };\n TreeView.prototype.getText = function (currLi, fromDS) {\n if (fromDS) {\n var nodeData = this.getNodeObject(currLi.getAttribute('data-uid'));\n var level = parseFloat(currLi.getAttribute('aria-level'));\n var nodeFields = this.getFields(this.fields, level, 1);\n return getValue(nodeFields.text, nodeData);\n }\n return select('.' + LISTTEXT, currLi).textContent;\n };\n TreeView.prototype.getExpandEvent = function (currLi, e) {\n var nodeData = this.getNodeData(currLi);\n return { cancel: false, isInteracted: isNullOrUndefined(e) ? false : true, node: currLi, nodeData: nodeData, event: e };\n };\n TreeView.prototype.renderNodeTemplate = function (data, textEle, dataId) {\n var tempArr = this.nodeTemplateFn(data, this, 'nodeTemplate' + dataId, this.element.id + 'nodeTemplate', this.isStringTemplate, undefined, textEle, this.root);\n if (tempArr) {\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, textEle);\n }\n };\n TreeView.prototype.destroyTemplate = function (liEle) {\n this.clearTemplate(['nodeTemplate' + liEle.getAttribute('data-uid')]);\n };\n TreeView.prototype.reRenderNodes = function () {\n this.updateListProp(this.fields);\n if (Browser.isIE) {\n this.ulElement = this.element.querySelector('.e-list-parent.e-ul');\n this.ulElement.parentElement.removeChild(this.ulElement);\n }\n else {\n this.element.innerHTML = '';\n }\n if (!isNullOrUndefined(this.nodeTemplateFn)) {\n this.clearTemplate();\n }\n this.setTouchClass();\n this.setProperties({ selectedNodes: [], checkedNodes: [], expandedNodes: [] }, true);\n this.checkedElement = [];\n this.isLoaded = false;\n this.setDataBinding(true);\n };\n TreeView.prototype.setCssClass = function (oldClass, newClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass([this.element], oldClass.split(' '));\n }\n if (!isNullOrUndefined(newClass) && newClass !== '') {\n addClass([this.element], newClass.split(' '));\n }\n };\n TreeView.prototype.editingHandler = function (e) {\n var target = e.target;\n if (!target || target.classList.contains(ROOT) || target.classList.contains(PARENTITEM) ||\n target.classList.contains(LISTITEM) || target.classList.contains(ICON) ||\n target.classList.contains(INPUT) || target.classList.contains(INPUTGROUP)) {\n return;\n }\n else {\n var liEle = closest(target, '.' + LISTITEM);\n this.createTextbox(liEle);\n }\n };\n TreeView.prototype.createTextbox = function (liEle) {\n var _this = this;\n var oldInpEle = select('.' + TREEINPUT, this.element);\n if (oldInpEle) {\n oldInpEle.blur();\n }\n var textEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var innerEle = this.createElement('input', { className: TREEINPUT, attrs: { value: this.oldText } });\n var eventArgs = this.getEditEvent(liEle, null, innerEle.outerHTML);\n this.trigger('nodeEditing', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var inpWidth = textEle.offsetWidth + 5;\n var style_1 = 'width:' + inpWidth + 'px';\n addClass([liEle], EDITING);\n if (!isNullOrUndefined(_this.nodeTemplateFn)) {\n _this.destroyTemplate(liEle);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (_this.isReact) {\n setTimeout(function () {\n _this.renderTextBox(eventArgs, textEle, style_1);\n }, 5);\n }\n else {\n _this.renderTextBox(eventArgs, textEle, style_1);\n }\n }\n });\n };\n TreeView.prototype.renderTextBox = function (eventArgs, textEle, style) {\n textEle.innerHTML = eventArgs.innerHtml;\n var inpEle = select('.' + TREEINPUT, textEle);\n this.inputObj = Input.createInput({\n element: inpEle,\n properties: {\n enableRtl: this.enableRtl\n }\n }, this.createElement);\n this.inputObj.container.setAttribute('style', style);\n inpEle.focus();\n var inputEle = inpEle;\n inputEle.setSelectionRange(0, inputEle.value.length);\n this.wireInputEvents(inpEle);\n };\n TreeView.prototype.updateOldText = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n this.editData = this.getNodeObject(id);\n var level = parseFloat(liEle.getAttribute('aria-level'));\n this.editFields = this.getFields(this.fields, level, 1);\n this.oldText = getValue(this.editFields.text, this.editData);\n };\n TreeView.prototype.inputFocusOut = function (e) {\n if (!select('.' + TREEINPUT, this.element)) {\n return;\n }\n var target = e.target;\n var newText = target.value;\n var txtEle = closest(target, '.' + LISTTEXT);\n var liEle = closest(target, '.' + LISTITEM);\n detach(this.inputObj.container);\n Input.destroy({ element: target, properties: this.properties });\n if (this.fields.dataSource instanceof DataManager && !this.isOffline) {\n this.crudOperation('update', null, liEle, newText, null, null, true);\n }\n else {\n this.appendNewText(liEle, txtEle, newText, true);\n }\n EventHandler.remove(target, 'blur', this.inputFocusOut);\n this.inputObj = null;\n detach(target);\n target = null;\n };\n TreeView.prototype.appendNewText = function (liEle, txtEle, newText, isInput) {\n var _this = this;\n var eventArgs = this.getEditEvent(liEle, newText, null);\n this.trigger('nodeEdited', eventArgs, function (observedArgs) {\n newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;\n _this.updateText(liEle, txtEle, newText, isInput);\n if (observedArgs.oldText !== newText) {\n _this.triggerEvent('nodeEdited', [_this.getNode(liEle)]);\n }\n });\n };\n TreeView.prototype.updateText = function (liEle, txtEle, newText, isInput) {\n var newData = setValue(this.editFields.text, newText, this.editData);\n if (!isNullOrUndefined(this.nodeTemplateFn)) {\n txtEle.innerText = '';\n var dataId = liEle.getAttribute('data-uid');\n this.renderNodeTemplate(newData, txtEle, dataId);\n this.renderReactTemplates();\n }\n else {\n if (this.enableHtmlSanitizer) {\n txtEle.innerText = SanitizeHtmlHelper.sanitize(newText);\n }\n else {\n txtEle.innerHTML = newText;\n }\n }\n if (isInput) {\n removeClass([liEle], EDITING);\n liEle.focus();\n EventHandler.add(liEle, 'blur', this.focusOut, this);\n addClass([liEle], FOCUS);\n }\n if (this.allowTextWrap) {\n this.calculateWrap(liEle);\n }\n };\n TreeView.prototype.getElement = function (ele) {\n if (isNullOrUndefined(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return this.element.querySelector('[data-uid=\"' + ele + '\"]');\n }\n else if (typeof ele === 'object') {\n return getElement(ele);\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getId = function (ele) {\n if (isNullOrUndefined(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return ele;\n }\n else if (typeof ele === 'object') {\n return (getElement(ele)).getAttribute('data-uid');\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getEditEvent = function (liEle, newText, inpEle) {\n var data = this.getNodeData(liEle);\n return { cancel: false, newText: newText, node: liEle, nodeData: data, oldText: this.oldText, innerHtml: inpEle };\n };\n TreeView.prototype.getNodeObject = function (id) {\n var childNodes;\n if (isNullOrUndefined(id)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n for (var i = 0, objlen = this.treeData.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, this.treeData[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(this.treeData[parseInt(i.toString(), 10)]) && !isNullOrUndefined(dataId) && dataId.toString() === id) {\n return this.treeData[parseInt(i.toString(), 10)];\n }\n }\n }\n else {\n return this.getChildNodeObject(this.treeData, this.fields, id);\n }\n return childNodes;\n };\n TreeView.prototype.getChildNodeObject = function (obj, mapper, id) {\n var newList;\n if (isNullOrUndefined(obj)) {\n return newList;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(mapper.id, obj[parseInt(i.toString(), 10)]);\n if (obj[parseInt(i.toString(), 10)] && dataId && dataId.toString() === id) {\n return obj[parseInt(i.toString(), 10)];\n }\n else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[parseInt(i.toString(), 10)]))) {\n var childData = getValue(mapper.child, obj[parseInt(i.toString(), 10)]);\n newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', obj[parseInt(i.toString(), 10)]))) {\n var child = 'child';\n newList = this.getChildNodeObject(getValue(child, obj[parseInt(i.toString(), 10)]), this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n else if (this.isChildObject()) {\n var children = 'child';\n var childData = getValue(children, obj[parseInt(i.toString(), 10)]);\n newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n }\n return newList;\n };\n TreeView.prototype.setDragAndDrop = function (toBind) {\n if (toBind && !this.disabled) {\n this.initializeDrag();\n }\n else {\n this.destroyDrag();\n }\n };\n TreeView.prototype.initializeDrag = function () {\n var _this = this;\n var virtualEle;\n this.dragObj = new Draggable(this.element, {\n enableTailMode: true, enableAutoScroll: true,\n dragArea: this.dragArea,\n dragTarget: '.' + TEXTWRAP,\n enableTapHold: true,\n tapHoldThreshold: 100,\n helper: function (e) {\n _this.dragTarget = e.sender.target;\n var dragRoot = closest(_this.dragTarget, '.' + ROOT);\n var dragWrap = closest(_this.dragTarget, '.' + TEXTWRAP);\n _this.dragLi = closest(_this.dragTarget, '.' + LISTITEM);\n if (_this.fullRowSelect && !dragWrap && _this.dragTarget.classList.contains(FULLROW)) {\n dragWrap = _this.dragTarget.nextElementSibling;\n }\n if (!_this.dragTarget || !e.element.isSameNode(dragRoot) || !dragWrap ||\n _this.dragTarget.classList.contains(ROOT) || _this.dragTarget.classList.contains(PARENTITEM) ||\n _this.dragTarget.classList.contains(LISTITEM) || _this.dragLi.classList.contains('e-disable')) {\n return false;\n }\n var cloneEle = (dragWrap.cloneNode(true));\n if (isNullOrUndefined(select('div.' + ICON, cloneEle))) {\n var icon = _this.createElement('div', { className: ICON + ' ' + EXPANDABLE });\n cloneEle.insertBefore(icon, cloneEle.children[0]);\n }\n var cssClass = DRAGITEM + ' ' + ROOT + ' ' + _this.cssClass + ' ' + (_this.enableRtl ? RTL$1 : '');\n virtualEle = _this.createElement('div', { className: cssClass });\n virtualEle.appendChild(cloneEle);\n var nLen = _this.selectedNodes.length;\n if (nLen > 1 && _this.allowMultiSelection && _this.dragLi.classList.contains(ACTIVE)) {\n var cNode = _this.createElement('span', { className: DROPCOUNT, innerHTML: '' + nLen });\n virtualEle.appendChild(cNode);\n }\n document.body.appendChild(virtualEle);\n document.body.style.cursor = '';\n _this.dragData = _this.getNodeData(_this.dragLi);\n return virtualEle;\n },\n dragStart: function (e) {\n addClass([_this.element], DRAGGING);\n var listItem = closest(e.target, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = _this.getDragEvent(e.event, _this, null, e.target, null, virtualEle, level);\n if (eventArgs.draggedNode.classList.contains(EDITING)) {\n _this.dragObj.intDestroy(e.event);\n _this.dragCancelAction(virtualEle);\n }\n else {\n _this.trigger('nodeDragStart', eventArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n _this.dragObj.intDestroy(e.event);\n _this.dragCancelAction(virtualEle);\n }\n else {\n _this.dragStartAction = true;\n }\n });\n }\n },\n drag: function (e) {\n _this.dragObj.setProperties({ cursorAt: { top: (!isNullOrUndefined(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });\n _this.dragAction(e, virtualEle);\n },\n dragStop: function (e) {\n removeClass([_this.element], DRAGGING);\n if (!e.target.classList.contains('e-sibling')) {\n _this.removeVirtualEle();\n }\n var dropTarget = e.target;\n var preventTargetExpand = false;\n var dropRoot = (closest(dropTarget, '.' + DROPPABLE));\n if (!dropTarget || !dropRoot) {\n detach(e.helper);\n document.body.style.cursor = '';\n }\n var listItem = closest(dropTarget, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = _this.getDragEvent(e.event, _this, dropTarget, dropTarget, null, e.helper, level);\n eventArgs.preventTargetExpand = preventTargetExpand;\n _this.trigger('nodeDragStop', eventArgs, function (observedArgs) {\n _this.dragParent = observedArgs.draggedParentNode;\n _this.preventExpand = observedArgs.preventTargetExpand;\n if (observedArgs.cancel) {\n if (e.helper.parentNode) {\n detach(e.helper);\n }\n document.body.style.cursor = '';\n if (dropTarget.classList.contains('e-sibling')) {\n _this.removeVirtualEle();\n }\n }\n _this.dragStartAction = false;\n });\n }\n });\n this.dropObj = new Droppable(this.element, {\n out: function (e) {\n if (!isNullOrUndefined(e) && !e.target.classList.contains(SIBLING) &&\n (_this.dropObj.dragData.default && _this.dropObj.dragData.default.helper.classList.contains(ROOT))) {\n document.body.style.cursor = 'not-allowed';\n }\n },\n over: function () {\n document.body.style.cursor = '';\n },\n drop: function (e) {\n _this.dropAction(e);\n _this.removeVirtualEle();\n }\n });\n };\n TreeView.prototype.dragCancelAction = function (virtualEle) {\n detach(virtualEle);\n removeClass([this.element], DRAGGING);\n this.dragStartAction = false;\n };\n TreeView.prototype.getOffsetX = function (event, target) {\n var touchList = event.changedTouches;\n if (touchList && touchList.length > 0) {\n return touchList[0].clientX - target.getBoundingClientRect().left;\n }\n else {\n return event.offsetX;\n }\n };\n TreeView.prototype.getOffsetY = function (event, target) {\n var touchList = event.changedTouches;\n if (touchList && touchList.length > 0) {\n return touchList[0].clientY - target.getBoundingClientRect().top;\n }\n else {\n return event.offsetY;\n }\n };\n TreeView.prototype.dragAction = function (e, virtualEle) {\n var dropRoot = closest(e.target, '.' + DROPPABLE);\n var dropWrap = closest(e.target, '.' + TEXTWRAP);\n var icon = select('div.' + ICON, virtualEle);\n removeClass([icon], [DROPIN, DROPNEXT, DROPOUT, NODROP]);\n this.isDropIn = false;\n this.removeVirtualEle();\n document.body.style.cursor = '';\n var classList = e.target.classList;\n var event = e.event;\n var offsetY = this.getOffsetY(event, e.target);\n var offsetX = this.getOffsetX(event, e.target);\n if (this.fullRowSelect && !dropWrap && !isNullOrUndefined(classList) && classList.contains(FULLROW)) {\n dropWrap = e.target.nextElementSibling;\n }\n if (dropRoot) {\n var dropLi = closest(e.target, '.' + LISTITEM);\n var checkWrapper = closest(e.target, '.' + CHECKBOXWRAP);\n var collapse = closest(e.target, '.' + COLLAPSIBLE);\n var expand = closest(e.target, '.' + EXPANDABLE);\n if (!dropRoot.classList.contains(ROOT) || (dropWrap &&\n (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi)))) {\n if (this.hasTemplate && dropLi) {\n var templateTarget = select(this.fullRowSelect ? '.' + FULLROW : '.' + TEXTWRAP, dropLi);\n if ((e && (!expand && !collapse) && offsetY < 7 && !checkWrapper) ||\n (((expand && offsetY < 5) || (collapse && offsetX < 3)))) {\n var index = this.fullRowSelect ? (1) : (0);\n this.appendIndicator(dropLi, icon, index);\n }\n else if ((e && (!expand && !collapse) &&\n !checkWrapper && templateTarget && offsetY > templateTarget.offsetHeight - 10) ||\n ((expand && offsetY > 19) || (collapse && offsetX > 19))) {\n var index = this.fullRowSelect ? (2) : (1);\n this.appendIndicator(dropLi, icon, index);\n }\n else {\n addClass([icon], DROPIN);\n this.isDropIn = true;\n }\n }\n else {\n if ((dropLi && e && (!expand && !collapse) && (offsetY < 7) && !checkWrapper) ||\n (((expand && offsetY < 5) || (collapse && offsetX < 3)))) {\n var index = this.fullRowSelect ? (1) : (0);\n this.appendIndicator(dropLi, icon, index);\n }\n else if ((dropLi && e && (!expand && !collapse) &&\n (e.target.offsetHeight > 0 && offsetY > (e.target.offsetHeight - 10)) && !checkWrapper) ||\n (((expand && offsetY > 19) || (collapse && offsetX > 19)))) {\n var index = this.fullRowSelect ? (2) : (1);\n this.appendIndicator(dropLi, icon, index);\n }\n else {\n addClass([icon], DROPIN);\n this.isDropIn = true;\n }\n }\n }\n else if (e.target.nodeName === 'LI' && (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi))) {\n addClass([icon], DROPNEXT);\n this.renderVirtualEle(e);\n }\n else if (e.target.classList.contains(SIBLING)) {\n addClass([icon], DROPNEXT);\n }\n else {\n addClass([icon], DROPOUT);\n }\n }\n else {\n addClass([icon], NODROP);\n document.body.style.cursor = 'not-allowed';\n }\n var listItem = closest(e.target, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = this.getDragEvent(e.event, this, e.target, e.target, null, virtualEle, level);\n if (eventArgs.dropIndicator) {\n removeClass([icon], eventArgs.dropIndicator);\n }\n this.trigger('nodeDragging', eventArgs);\n if (eventArgs.dropIndicator) {\n addClass([icon], eventArgs.dropIndicator);\n }\n };\n TreeView.prototype.appendIndicator = function (dropLi, icon, index) {\n addClass([icon], DROPNEXT);\n var virEle = this.createElement('div', { className: SIBLING });\n dropLi.insertBefore(virEle, dropLi.children[parseInt(index.toString(), 10)]);\n };\n TreeView.prototype.dropAction = function (e) {\n var event = e.event;\n var offsetY = this.getOffsetY(event, e.target);\n var dropTarget = e.target;\n var dragObj;\n var level;\n var drop = false;\n var nodeData = [];\n var liArray = [];\n var dragInstance = e.dragData.draggable;\n for (var i = 0; i < dragInstance.ej2_instances.length; i++) {\n if (dragInstance.ej2_instances[parseInt(i.toString(), 10)] instanceof TreeView_1) {\n dragObj = dragInstance.ej2_instances[parseInt(i.toString(), 10)];\n break;\n }\n }\n if (dragObj && dragObj.dragTarget) {\n var dragTarget = dragObj.dragTarget;\n var dragLi = (closest(dragTarget, '.' + LISTITEM));\n var dropLi = (closest(dropTarget, '.' + LISTITEM));\n liArray.push(dragLi);\n if (dropLi == null && dropTarget.classList.contains(ROOT)) {\n dropLi = dropTarget.firstElementChild;\n }\n detach(e.droppedElement);\n document.body.style.cursor = '';\n if (!dropLi || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n return;\n }\n if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {\n var sNodes = selectAll('.' + ACTIVE, dragObj.element);\n liArray = sNodes;\n if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {\n for (var i = sNodes.length - 1; i >= 0; i--) {\n if (dropLi.isSameNode(sNodes[parseInt(i.toString(), 10)]) ||\n this.isDescendant(sNodes[parseInt(i.toString(), 10)], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[parseInt(i.toString(), 10)], dropLi, e, dragObj, offsetY);\n }\n }\n else {\n for (var i = 0; i < sNodes.length; i++) {\n if (dropLi.isSameNode(sNodes[parseInt(i.toString(), 10)]) ||\n this.isDescendant(sNodes[parseInt(i.toString(), 10)], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[parseInt(i.toString(), 10)], dropLi, e, dragObj, offsetY);\n }\n }\n }\n else {\n this.appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY);\n }\n level = parseInt(dragLi.getAttribute('aria-level'), 10);\n drop = true;\n }\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n for (var i = 0; i < liArray.length; i++) {\n nodeData.push(this.getNode(liArray[parseInt(i.toString(), 10)]));\n }\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));\n if (dragObj.element.id !== this.element.id) {\n dragObj.triggerEvent('nodeDropped', nodeData);\n this.isNodeDropped = true;\n this.fields.dataSource = this.treeData;\n }\n this.triggerEvent('nodeDropped', nodeData);\n };\n TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {\n var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);\n var collapse = closest(e.target, '.' + COLLAPSIBLE);\n var expand = closest(e.target, '.' + EXPANDABLE);\n if (!dragLi.classList.contains('e-disable') && !checkWrapper && ((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3) || (expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19) || (!expand && !collapse))) {\n if (dropTarget.nodeName === 'LI') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else if (dropTarget.firstElementChild && dropTarget.classList.contains(ROOT)) {\n if (dropTarget.firstElementChild.nodeName === 'UL') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n }\n else if ((dropTarget.classList.contains('e-icon-collapsible')) || (dropTarget.classList.contains('e-icon-expandable'))) {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, null, dropTarget);\n }\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, true, dropTarget);\n }\n if (this.showCheckBox) {\n this.ensureIndeterminate();\n }\n };\n TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {\n var dropUl = closest(dropLi, '.' + PARENTITEM);\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var pre;\n if (e.target.offsetHeight > 0 && e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n else if (e.target.classList.contains('e-icon-expandable') || (e.target.classList.contains('e-icon-collapsible'))) {\n if ((e.event.offsetY < 5) || (e.event.offsetX < 3)) {\n pre = true;\n }\n else if ((e.event.offsetY > 15) || (e.event.offsetX > 17)) {\n pre = false;\n }\n }\n if ((e.target.classList.contains('e-icon-expandable')) || (e.target.classList.contains('e-icon-collapsible'))) {\n var target = e.target.closest('li');\n dropUl.insertBefore(dragLi, pre ? target : target.nextElementSibling);\n }\n else {\n dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);\n }\n this.moveData(dragLi, dropLi, dropUl, pre, dragObj);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.dropAsChildNode = function (dragLi, dropLi, dragObj, index, e, pos, isCheck, dropTarget) {\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var dropParentUl = closest(dropLi, '.' + PARENTITEM);\n var templateTarget;\n if (e && e.target) {\n templateTarget = select(this.fullRowSelect ? '.' + FULLROW : '.' + TEXTWRAP, dropLi);\n }\n if (e && ((pos < 7 && !dropTarget.classList.contains('e-sibling')) || (dropTarget.classList.contains('e-sibling') && !dropLi.lastChild.classList.contains('e-sibling'))) && !isCheck) {\n dropParentUl.insertBefore(dragLi, dropLi);\n this.moveData(dragLi, dropLi, dropParentUl, true, dragObj);\n }\n else if (e && (e.target.offsetHeight > 0 && pos > (e.target.offsetHeight - 10)) && !isCheck && !this.hasTemplate) {\n dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);\n this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);\n }\n else if (this.hasTemplate && templateTarget && pos > templateTarget.offsetHeight - 10 && !isCheck) {\n dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);\n this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);\n }\n else {\n var dropUl = this.expandParent(dropLi);\n var childLi = !isNullOrUndefined(index) ? dropUl.childNodes[parseInt(index.toString(), 10)] : null;\n dropUl.insertBefore(dragLi, childLi);\n this.moveData(dragLi, childLi, dropUl, true, dragObj);\n }\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.moveData = function (dragLi, dropLi, dropUl, pre, dragObj) {\n var dropParentLi = closest(dropUl, '.' + LISTITEM);\n var id = this.getId(dragLi);\n var removedData = dragObj.updateChildField(dragObj.treeData, dragObj.fields, id, null, null, true);\n var refId = this.getId(dropLi);\n var index = this.getDataPos(this.treeData, this.fields, refId);\n var parentId = this.getId(dropParentLi);\n if (this.dataType === 1) {\n this.updateField(this.treeData, this.fields, parentId, 'hasChildren', true);\n var pos = isNullOrUndefined(index) ? this.treeData.length : (pre ? index : index + 1);\n if (isNullOrUndefined(parentId) && !this.hasPid) {\n delete removedData[0][this.fields.parentID];\n }\n else {\n var currPid = this.isNumberTypeId ? parseFloat(parentId) : parentId;\n setValue(this.fields.parentID, currPid, removedData[0]);\n }\n this.treeData.splice(pos, 0, removedData[0]);\n if (dragObj.element.id !== this.element.id) {\n var childData = dragObj.removeChildNodes(id);\n pos++;\n for (var i = 0, len = childData.length; i < len; i++) {\n this.treeData.splice(pos, 0, childData[parseInt(i.toString(), 10)]);\n pos++;\n }\n dragObj.groupedData = dragObj.getGroupedData(dragObj.treeData, dragObj.fields.parentID);\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n else {\n this.addChildData(this.treeData, this.fields, parentId, removedData, pre ? index : index + 1);\n }\n };\n TreeView.prototype.expandParent = function (dropLi) {\n var dropIcon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);\n if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && this.preventExpand !== true) {\n this.expandAction(dropLi, dropIcon, null);\n }\n var dropUl = select('.' + PARENTITEM, dropLi);\n if (this.preventExpand === true && !dropUl && dropIcon) {\n this.renderChildNodes(dropLi);\n }\n dropUl = select('.' + PARENTITEM, dropLi);\n if (!isNullOrUndefined(dropUl) && this.preventExpand === true) {\n dropUl.style.display = 'none';\n }\n if (!isNullOrUndefined(dropUl) && this.preventExpand === false) {\n dropUl.style.display = 'block';\n }\n if (isNullOrUndefined(dropUl) && this.preventExpand === true) {\n if (isNullOrUndefined(dropIcon)) {\n ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);\n }\n var icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);\n if (icon) {\n icon.classList.add('e-icon-expandable');\n }\n dropUl = ListBase.generateUL(this.createElement, [], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n if (icon) {\n removeClass([icon], COLLAPSIBLE);\n }\n else {\n ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);\n }\n dropLi.setAttribute('aria-expanded', 'false');\n dropUl.style.display = 'none';\n }\n if (isNullOrUndefined(dropUl)) {\n var args = this.expandArgs;\n if (isNullOrUndefined(args) || (args && args.name !== 'nodeExpanding')) {\n this.trigger('nodeExpanding', this.getExpandEvent(dropLi, null));\n }\n if (isNullOrUndefined(dropIcon)) {\n ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);\n }\n var icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);\n if (icon) {\n removeClass([icon], EXPANDABLE);\n }\n else {\n ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);\n icon = select('div.' + ICON, dropLi);\n removeClass([icon], EXPANDABLE);\n }\n dropUl = ListBase.generateUL(this.createElement, [], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n this.addExpand(dropLi);\n this.trigger('nodeExpanded', this.getExpandEvent(dropLi, null));\n }\n var collapseIcon = select('div.' + COLLAPSIBLE, dropLi);\n if (!isNullOrUndefined(dropUl) && collapseIcon && this.preventExpand) {\n removeClass([collapseIcon], COLLAPSIBLE);\n dropLi.setAttribute('aria-expanded', 'false');\n addClass([collapseIcon], EXPANDABLE);\n }\n return dropUl;\n };\n TreeView.prototype.updateElement = function (dragParentUl, dragParentLi) {\n if (dragParentLi && dragParentUl.childElementCount === 0) {\n var dragIcon = select('div.' + ICON, dragParentLi);\n detach(dragParentUl);\n detach(dragIcon);\n var parentId = this.getId(dragParentLi);\n this.updateField(this.treeData, this.fields, parentId, 'hasChildren', false);\n this.removeExpand(dragParentLi, true);\n }\n };\n TreeView.prototype.updateAriaLevel = function (dragLi) {\n var level = this.parents(dragLi, '.' + PARENTITEM).length;\n dragLi.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, dragLi), level + 1);\n };\n TreeView.prototype.updateChildAriaLevel = function (element, level) {\n if (!isNullOrUndefined(element)) {\n var cNodes = element.childNodes;\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[parseInt(i.toString(), 10)];\n liEle.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, liEle), level + 1);\n }\n }\n };\n TreeView.prototype.renderVirtualEle = function (e) {\n var pre;\n var event = e.event;\n var offsetY = this.getOffsetY(event, e.target);\n if (offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (offsetY < 2) {\n pre = true;\n }\n var virEle = this.createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (pre ? 1 : 2) : (pre ? 0 : 1);\n e.target.insertBefore(virEle, e.target.children[parseInt(index.toString(), 10)]);\n };\n TreeView.prototype.removeVirtualEle = function () {\n var sibEle = select('.' + SIBLING);\n if (sibEle) {\n detach(sibEle);\n }\n };\n TreeView.prototype.destroyDrag = function () {\n if (this.dragObj && this.dropObj) {\n this.dragObj.destroy();\n this.dropObj.destroy();\n }\n };\n TreeView.prototype.getDragEvent = function (event, obj, dropTarget, target, dragNode, cloneEle, level, drop) {\n var dropLi = dropTarget ? closest(dropTarget, '.' + LISTITEM) : null;\n var dropData = dropLi ? this.getNodeData(dropLi) : null;\n var draggedNode = obj ? obj.dragLi : dragNode;\n var draggedNodeData = obj ? obj.dragData : null;\n var newParent = dropTarget ? this.parents(dropTarget, '.' + LISTITEM) : null;\n var dragLiParent = obj.dragLi.parentElement;\n var dragParent = obj.dragLi ? closest(dragLiParent, '.' + LISTITEM) : null;\n var targetParent = null;\n var indexValue = null;\n var iconCss = [DROPNEXT, DROPIN, DROPOUT, NODROP];\n var iconClass = null;\n var node = (drop === true) ? draggedNode : dropLi;\n var index = node ? closest(node, '.e-list-parent') : null;\n var i = 0;\n var position = null;\n dragParent = (obj.dragLi && dragParent === null) ? closest(dragLiParent, '.' + ROOT) : dragParent;\n dragParent = (drop === true) ? this.dragParent : dragParent;\n if (cloneEle) {\n while (i < 4) {\n if (select('.' + ICON, cloneEle).classList.contains(iconCss[parseInt(i.toString(), 10)])) {\n iconClass = iconCss[parseInt(i.toString(), 10)];\n break;\n }\n i++;\n }\n }\n if (index) {\n var dropTar = 0;\n for (i = 0; i < index.childElementCount; i++) {\n dropTar = (drop !== true && index.children[parseInt(i.toString(), 10)] === draggedNode && dropLi !== draggedNode)\n ? ++dropTar\n : dropTar;\n if ((drop !== true && index.children[parseInt(i.toString(), 10)].classList.contains('e-hover'))) {\n indexValue = (event.offsetY >= 23) ? i + 1 : i;\n break;\n }\n else if (index.children[parseInt(i.toString(), 10)] === node) {\n indexValue = (event.offsetY >= 23) ? i : i;\n break;\n }\n }\n indexValue = (dropTar !== 0) ? --indexValue : indexValue;\n position = this.isDropIn ? 'Inside' : ((event.offsetY < 7) ? 'Before' : 'After');\n }\n if (dropTarget) {\n if (newParent.length === 0) {\n targetParent = null;\n }\n else if (dropTarget.classList.contains(LISTITEM)) {\n targetParent = newParent[0];\n }\n else {\n targetParent = newParent[1];\n }\n }\n if (dropLi === draggedNode) {\n targetParent = dropLi;\n }\n if (dropTarget && target.offsetHeight <= 33 && event.offsetY < target.offsetHeight - 10 && event.offsetY > 6) {\n targetParent = dropLi;\n if (drop !== true) {\n level = ++level;\n var parent_2 = targetParent ? select('.e-list-parent', targetParent) : null;\n indexValue = (parent_2) ? parent_2.children.length : 0;\n if (!(this.fields.dataSource instanceof DataManager) && parent_2 === null && targetParent) {\n var parent_3 = targetParent.hasAttribute('data-uid') ?\n this.getChildNodes(this.fields.dataSource, targetParent.getAttribute('data-uid').toString()) : null;\n indexValue = (parent_3) ? parent_3.length : 0;\n }\n }\n }\n return {\n cancel: false,\n clonedNode: cloneEle,\n event: event,\n draggedNode: draggedNode,\n draggedNodeData: draggedNodeData,\n droppedNode: dropLi,\n droppedNodeData: dropData,\n dropIndex: indexValue,\n dropLevel: level,\n draggedParentNode: dragParent,\n dropTarget: targetParent,\n dropIndicator: iconClass,\n target: target,\n position: position\n };\n };\n TreeView.prototype.addFullRow = function (toAdd) {\n var len = this.liList.length;\n if (toAdd) {\n for (var i = 0; i < len; i++) {\n this.createFullRow(this.liList[parseInt(i.toString(), 10)]);\n }\n }\n else {\n for (var i = 0; i < len; i++) {\n var rowDiv = select('.' + FULLROW, this.liList[parseInt(i.toString(), 10)]);\n detach(rowDiv);\n }\n }\n };\n TreeView.prototype.createFullRow = function (item) {\n var rowDiv = this.createElement('div', { className: FULLROW });\n item.insertBefore(rowDiv, item.childNodes[0]);\n };\n TreeView.prototype.addMultiSelect = function (toAdd) {\n if (toAdd) {\n var liEles = selectAll('.' + LISTITEM + ':not([aria-selected=\"true\"])', this.element);\n for (var _i = 0, liEles_1 = liEles; _i < liEles_1.length; _i++) {\n var ele = liEles_1[_i];\n ele.setAttribute('aria-selected', 'false');\n }\n }\n else {\n var liEles = selectAll('.' + LISTITEM + '[aria-selected=\"false\"]', this.element);\n for (var _a = 0, liEles_2 = liEles; _a < liEles_2.length; _a++) {\n var ele = liEles_2[_a];\n ele.removeAttribute('aria-selected');\n }\n }\n };\n TreeView.prototype.collapseByLevel = function (element, level, excludeHiddenNodes, currentLevel) {\n currentLevel = isNullOrUndefined(currentLevel) ? 1 : currentLevel;\n if (level > 0 && !isNullOrUndefined(element)) {\n var cNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[parseInt(i.toString(), 10)];\n var icon = select('.' + COLLAPSIBLE, select('.' + TEXTWRAP, liEle));\n if (currentLevel >= level && !isNullOrUndefined(icon)) {\n this.collapseNode(liEle, icon, null);\n }\n this.collapseByLevel(select('.' + PARENTITEM, liEle), level, excludeHiddenNodes, currentLevel + 1);\n }\n }\n };\n TreeView.prototype.collapseAllNodes = function (excludeHiddenNodes) {\n var cIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + COLLAPSIBLE, this.element));\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[parseInt(i.toString(), 10)];\n var liEle = closest(icon, '.' + LISTITEM);\n this.collapseNode(liEle, icon, null);\n }\n };\n TreeView.prototype.expandByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNullOrUndefined(element)) {\n var eNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n var liEle = eNodes[parseInt(i.toString(), 10)];\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEle));\n if (!isNullOrUndefined(icon)) {\n this.expandAction(liEle, icon, null);\n }\n this.expandByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.expandAllNodes = function (excludeHiddenNodes) {\n var eIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + EXPANDABLE, this.element));\n for (var _i = 0, eIcons_1 = eIcons; _i < eIcons_1.length; _i++) {\n var icon = eIcons_1[_i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.expandAction(liEle, icon, null, true, null, true);\n }\n };\n TreeView.prototype.getVisibleNodes = function (excludeHiddenNodes, nodes) {\n var vNodes = Array.prototype.slice.call(nodes);\n if (excludeHiddenNodes) {\n for (var i = 0; i < vNodes.length; i++) {\n if (!isVisible(vNodes[parseInt(i.toString(), 10)])) {\n vNodes.splice(i, 1);\n i--;\n }\n }\n }\n return vNodes;\n };\n TreeView.prototype.removeNode = function (node) {\n var dragParentUl = closest(node, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n if (!isNullOrUndefined(this.nodeTemplateFn)) {\n this.destroyTemplate(node);\n }\n detach(node);\n this.updateElement(dragParentUl, dragParentLi);\n this.removeData(node);\n };\n TreeView.prototype.updateInstance = function () {\n this.updateList();\n this.updateSelectedNodes();\n this.updateExpandedNodes();\n };\n TreeView.prototype.updateList = function () {\n this.liList = Array.prototype.slice.call(selectAll('.' + LISTITEM, this.element));\n };\n TreeView.prototype.updateSelectedNodes = function () {\n this.setProperties({ selectedNodes: [] }, true);\n var sNodes = selectAll('.' + ACTIVE, this.element);\n this.selectGivenNodes(sNodes);\n };\n TreeView.prototype.updateExpandedNodes = function () {\n this.setProperties({ expandedNodes: [] }, true);\n var eNodes = selectAll('[aria-expanded=\"true\"]', this.element);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n this.addExpand(eNodes[parseInt(i.toString(), 10)]);\n }\n };\n TreeView.prototype.removeData = function (node) {\n if (this.dataType === 1) {\n var dm = new DataManager(this.treeData);\n var id = this.getId(node);\n var data = {};\n var newId = this.isNumberTypeId ? parseFloat(id) : id;\n data[this.fields.id] = newId;\n dm.remove(this.fields.id, data);\n this.removeChildNodes(id);\n }\n else {\n var id = this.getId(node);\n this.updateChildField(this.treeData, this.fields, id, null, null, true);\n }\n };\n TreeView.prototype.removeChildNodes = function (parentId) {\n var cNodes = this.getChildGroup(this.groupedData, parentId, false);\n var childData = [];\n if (cNodes) {\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var dm = new DataManager(this.treeData);\n var id = getValue(this.fields.id, cNodes[parseInt(i.toString(), 10)]).toString();\n var data = {};\n var currId = this.isNumberTypeId ? parseFloat(id) : id;\n data[this.fields.id] = currId;\n var nodeData = dm.remove(this.fields.id, data);\n childData.push(nodeData[0]);\n this.removeChildNodes(id);\n }\n }\n return childData;\n };\n TreeView.prototype.doGivenAction = function (nodes, selector, toExpand) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[parseInt(i.toString(), 10)]);\n if (isNullOrUndefined(liEle)) {\n continue;\n }\n var icon = select('.' + selector, select('.' + TEXTWRAP, liEle));\n if (!isNullOrUndefined(icon)) {\n if (toExpand) {\n this.expandAction(liEle, icon, null);\n }\n else {\n this.collapseNode(liEle, icon, null);\n }\n }\n }\n };\n TreeView.prototype.addGivenNodes = function (nodes, dropLi, index, isRemote, dropEle) {\n if (nodes.length === 0) {\n return;\n }\n var sNodes = this.getSortedData(nodes);\n var level = dropLi ? parseFloat(dropLi.getAttribute('aria-level')) + 1 : 1;\n if (isRemote) {\n this.updateMapper(level);\n }\n var li = ListBase.createListItemFromJson(this.createElement, sNodes, this.listBaseOption, level);\n var id = this.getId(dropLi);\n var dropIcon1;\n if (!isNullOrUndefined(dropLi)) {\n dropIcon1 = select('div.' + ICON, dropLi);\n }\n if (this.dataType === 1 && dropIcon1 && dropIcon1.classList.contains(EXPANDABLE) && this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {\n this.preventExpand = true;\n }\n if (this.dataType !== 1) {\n this.addChildData(this.treeData, this.fields, id, nodes, index);\n this.isFirstRender = false;\n }\n var dropUl;\n if (!dropEle) {\n dropUl = dropLi ? this.expandParent(dropLi) : select('.' + PARENTITEM, this.element);\n }\n else {\n dropUl = dropEle;\n }\n var refNode = !isNullOrUndefined(index) ? dropUl.childNodes[parseInt(index.toString(), 10)] : null;\n if (!this.isFirstRender || this.dataType === 1) {\n var args = this.expandArgs;\n if (refNode || this.sortOrder === 'None') {\n for (var i = 0; i < li.length; i++) {\n dropUl.insertBefore(li[parseInt(i.toString(), 10)], refNode);\n }\n if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {\n this.preventExpand = false;\n var dropIcon = select('div.' + ICON, dropLi);\n if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && (isNullOrUndefined(args) || args.name !== 'nodeExpanding')) {\n this.expandAction(dropLi, dropIcon, null);\n }\n }\n }\n if (!refNode && ((this.sortOrder === 'Ascending') || (this.sortOrder === 'Descending'))) {\n if (dropUl.childNodes.length === 0) {\n for (var i = 0; i < li.length; i++) {\n dropUl.insertBefore(li[parseInt(i.toString(), 10)], refNode);\n }\n if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {\n this.preventExpand = false;\n var dropIcon = select('div.' + ICON, dropLi);\n if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && (isNullOrUndefined(args) || args.name !== 'nodeExpanding')) {\n this.expandAction(dropLi, dropIcon, null);\n }\n }\n }\n else {\n var cNodes = dropUl.childNodes;\n for (var i = 0; i < li.length; i++) {\n for (var j = 0; j < cNodes.length; j++) {\n var returnValue = (this.sortOrder === 'Ascending') ? cNodes[parseInt(j.toString(), 10)].textContent.toUpperCase() > li[parseInt(i.toString(), 10)].innerText.toUpperCase() : cNodes[parseInt(j.toString(), 10)].textContent.toUpperCase() < li[parseInt(i.toString(), 10)].innerText.toUpperCase();\n if (returnValue) {\n dropUl.insertBefore(li[parseInt(i.toString(), 10)], cNodes[parseInt(j.toString(), 10)]);\n break;\n }\n dropUl.insertBefore(li[parseInt(i.toString(), 10)], cNodes[cNodes.length]);\n }\n }\n }\n }\n }\n if (this.dataType === 1) {\n this.updateField(this.treeData, this.fields, id, 'hasChildren', true);\n var refId = this.getId(refNode);\n var pos = isNullOrUndefined(refId) ? this.treeData.length : this.getDataPos(this.treeData, this.fields, refId);\n for (var j = 0; j < nodes.length; j++) {\n if (!isNullOrUndefined(id)) {\n var currId = this.isNumberTypeId ? parseFloat(id) : id;\n setValue(this.fields.parentID, currId, nodes[parseInt(j.toString(), 10)]);\n }\n this.treeData.splice(pos, 0, nodes[parseInt(j.toString(), 10)]);\n pos++;\n }\n }\n this.finalizeNode(dropUl);\n };\n TreeView.prototype.updateMapper = function (level) {\n var mapper = (level === 1) ? this.fields : this.getChildFields(this.fields, level - 1, 1);\n this.updateListProp(mapper);\n };\n TreeView.prototype.updateListProp = function (mapper) {\n var prop = this.getActualProperties(mapper);\n this.listBaseOption.fields = prop;\n this.listBaseOption.fields.url = Object.prototype.hasOwnProperty.call(prop, 'navigateUrl') ? prop.navigateUrl : 'navigateUrl';\n };\n TreeView.prototype.getDataPos = function (obj, mapper, id) {\n var pos = null;\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[parseInt(i.toString(), 10)]);\n if (obj[parseInt(i.toString(), 10)] && nodeId && nodeId.toString() === id) {\n return i;\n }\n else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[parseInt(i.toString(), 10)]))) {\n var data = getValue(mapper.child, obj[parseInt(i.toString(), 10)]);\n pos = this.getDataPos(data, this.getChildMapper(mapper), id);\n if (pos !== null) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', obj[parseInt(i.toString(), 10)]))) {\n var items = getValue('child', obj[parseInt(i.toString(), 10)]);\n pos = this.getDataPos(items, this.getChildMapper(mapper), id);\n if (pos !== null) {\n break;\n }\n }\n }\n return pos;\n };\n TreeView.prototype.addChildData = function (obj, mapper, id, data, index) {\n var updated;\n if (isNullOrUndefined(id)) {\n index = isNullOrUndefined(index) ? obj.length : index;\n for (var k = 0, len = data.length; k < len; k++) {\n obj.splice(index, 0, data[parseInt(k.toString(), 10)]);\n index++;\n }\n return updated;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[parseInt(i.toString(), 10)]);\n if (obj[parseInt(i.toString(), 10)] && nodeId && nodeId.toString() === id) {\n if ((typeof mapper.child === 'string' && (Object.prototype.hasOwnProperty.call(obj[parseInt(i.toString(), 10)], mapper.child) && obj[parseInt(i.toString(), 10)][mapper.child] !== null)) ||\n ((this.fields.dataSource instanceof DataManager) && Object.prototype.hasOwnProperty.call(obj[parseInt(i.toString(), 10)], 'child'))) {\n var key = (typeof mapper.child === 'string') ? mapper.child : 'child';\n var childData = getValue(key, obj[parseInt(i.toString(), 10)]);\n if (isNullOrUndefined(childData)) {\n childData = [];\n }\n index = isNullOrUndefined(index) ? childData.length : index;\n for (var k = 0, len = data.length; k < len; k++) {\n childData.splice(index, 0, data[parseInt(k.toString(), 10)]);\n index++;\n }\n }\n else {\n var key = (typeof mapper.child === 'string') ? mapper.child : 'child';\n obj[parseInt(i.toString(), 10)][\"\" + key] = data;\n }\n return true;\n }\n else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[parseInt(i.toString(), 10)]))) {\n var childObj = getValue(mapper.child, obj[parseInt(i.toString(), 10)]);\n updated = this.addChildData(childObj, this.getChildMapper(mapper), id, data, index);\n if (updated !== undefined) {\n break;\n }\n }\n else if ((this.fields.dataSource instanceof DataManager) && !isNullOrUndefined(getValue('child', obj[parseInt(i.toString(), 10)]))) {\n var childData = getValue('child', obj[parseInt(i.toString(), 10)]);\n updated = this.addChildData(childData, this.getChildMapper(mapper), id, data, index);\n if (updated !== undefined) {\n break;\n }\n }\n }\n return updated;\n };\n TreeView.prototype.doDisableAction = function (nodes) {\n var validNodes = this.nodeType(nodes);\n var validID = this.checkValidId(validNodes);\n this.validArr = [];\n for (var i = 0, len = validID.length; i < len; i++) {\n var id = validID[parseInt(i.toString(), 10)][this.fields.id].toString();\n if (id && this.disableNode.indexOf(id) === -1) {\n this.disableNode.push(id);\n }\n var liEle = this.getElement(id);\n if (liEle) {\n liEle.setAttribute('aria-disabled', 'true');\n addClass([liEle], DISABLE);\n }\n }\n };\n TreeView.prototype.doEnableAction = function (nodes) {\n var strNodes = this.nodeType(nodes);\n for (var i = 0, len = strNodes.length; i < len; i++) {\n var liEle = this.getElement(strNodes[parseInt(i.toString(), 10)]);\n var id = strNodes[parseInt(i.toString(), 10)];\n if (id && this.disableNode.indexOf(id) !== -1) {\n this.disableNode.splice(this.disableNode.indexOf(id), 1);\n }\n if (liEle) {\n liEle.removeAttribute('aria-disabled');\n removeClass([liEle], DISABLE);\n }\n }\n };\n TreeView.prototype.nodeType = function (nodes) {\n var validID = [];\n for (var i = 0, len = nodes.length; i < len; i++) {\n var id = void 0;\n if (typeof nodes[parseInt(i.toString(), 10)] == 'string') {\n id = (nodes[parseInt(i.toString(), 10)]) ? nodes[parseInt(i.toString(), 10)].toString() : null;\n }\n else if (typeof nodes[parseInt(i.toString(), 10)] === 'object') {\n id = nodes[parseInt(i.toString(), 10)] ? nodes[parseInt(i.toString(), 10)].getAttribute('data-uid').toString() : null;\n }\n if (validID.indexOf(id) === -1) {\n validID.push(id);\n }\n }\n return validID;\n };\n TreeView.prototype.checkValidId = function (node) {\n var _this = this;\n if (this.dataType === 1) {\n this.validArr = this.treeData.filter(function (data) {\n return node.indexOf(data[_this.fields.id] ? data[_this.fields.id].toString() : null) !== -1;\n });\n }\n else if (this.dataType === 2) {\n for (var k = 0; k < this.treeData.length; k++) {\n var id = this.treeData[parseInt(k.toString(), 10)][this.fields.id]\n ? this.treeData[parseInt(k.toString(), 10)][this.fields.id].toString()\n : null;\n if (node.indexOf(id) !== -1) {\n this.validArr.push(this.treeData[parseInt(k.toString(), 10)]);\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[parseInt(k.toString(), 10)]);\n if (childItems) {\n this.filterNestedChild(childItems, node);\n }\n }\n }\n return this.validArr;\n };\n TreeView.prototype.filterNestedChild = function (treeData, nodes) {\n for (var k = 0; k < treeData.length; k++) {\n var id = treeData[parseInt(k.toString(), 10)][this.fields.id]\n ? treeData[parseInt(k.toString(), 10)][this.fields.id].toString()\n : null;\n if (nodes.indexOf(id) !== -1) {\n this.validArr.push(treeData[parseInt(k.toString(), 10)]);\n }\n var childItems = getValue(this.fields.child.toString(), treeData[parseInt(k.toString(), 10)]);\n if (childItems) {\n this.filterNestedChild(childItems, nodes);\n }\n }\n };\n TreeView.prototype.setTouchClass = function () {\n var ele = closest(this.element, '.' + BIGGER);\n this.touchClass = isNullOrUndefined(ele) ? '' : SMALL;\n };\n TreeView.prototype.updatePersistProp = function () {\n this.removeField(this.treeData, this.fields, ['selected', 'expanded']);\n var sleNodes = this.selectedNodes;\n for (var l = 0, slelen = sleNodes.length; l < slelen; l++) {\n this.updateField(this.treeData, this.fields, sleNodes[parseInt(l.toString(), 10)], 'selected', true);\n }\n var enodes = this.expandedNodes;\n for (var k = 0, nodelen = enodes.length; k < nodelen; k++) {\n this.updateField(this.treeData, this.fields, enodes[parseInt(k.toString(), 10)], 'expanded', true);\n }\n if (this.showCheckBox) {\n this.removeField(this.treeData, this.fields, ['isChecked']);\n var cnodes = this.checkedNodes;\n for (var m = 0, nodelen = cnodes.length; m < nodelen; m++) {\n this.updateField(this.treeData, this.fields, cnodes[parseInt(m.toString(), 10)], 'isChecked', true);\n }\n }\n };\n TreeView.prototype.removeField = function (obj, mapper, names) {\n if (isNullOrUndefined(obj) || isNullOrUndefined(mapper)) {\n return;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n for (var j = 0; j < names.length; j++) {\n var field = this.getMapperProp(mapper, names[parseInt(j.toString(), 10)]);\n if (!isNullOrUndefined(obj[parseInt(i.toString(), 10)][\"\" + field])) {\n delete obj[parseInt(i.toString(), 10)][\"\" + field];\n }\n }\n if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[parseInt(i.toString(), 10)]))) {\n this.removeField(getValue(mapper.child, obj[parseInt(i.toString(), 10)]), this.getChildMapper(mapper), names);\n }\n else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', obj[parseInt(i.toString(), 10)]))) {\n this.removeField(getValue('child', obj[parseInt(i.toString(), 10)]), this.getChildMapper(mapper), names);\n }\n }\n };\n TreeView.prototype.getMapperProp = function (mapper, fieldName) {\n switch (fieldName) {\n case 'selected':\n return !isNullOrUndefined(mapper.selected) ? mapper.selected : 'selected';\n case 'expanded':\n return !isNullOrUndefined(mapper.expanded) ? mapper.expanded : 'expanded';\n case 'isChecked':\n return !isNullOrUndefined(mapper.isChecked) ? mapper.isChecked : 'isChecked';\n case 'hasChildren':\n return !isNullOrUndefined(mapper.hasChildren) ? mapper.hasChildren : 'hasChildren';\n default:\n return fieldName;\n }\n };\n TreeView.prototype.updateField = function (obj, mapper, id, key, value) {\n if (isNullOrUndefined(id)) {\n return;\n }\n else if (this.dataType === 1) {\n var newId = this.isNumberTypeId ? parseFloat(id) : id;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.id, 'equal', newId, false));\n setValue(this.getMapperProp(mapper, key), value, resultData[0]);\n }\n else {\n this.updateChildField(obj, mapper, id, key, value);\n }\n };\n TreeView.prototype.updateChildField = function (obj, mapper, id, key, value, remove) {\n var removedData;\n if (isNullOrUndefined(obj)) {\n return removedData;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[parseInt(i.toString(), 10)]);\n if (obj[parseInt(i.toString(), 10)] && !isNullOrUndefined(nodeId) && nodeId.toString() === id) {\n if (remove) {\n removedData = obj.splice(i, 1);\n }\n else {\n setValue(this.getMapperProp(mapper, key), value, obj[parseInt(i.toString(), 10)]);\n removedData = [];\n }\n return removedData;\n }\n else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[parseInt(i.toString(), 10)]))) {\n var childData = getValue(mapper.child, obj[parseInt(i.toString(), 10)]);\n removedData = this.updateChildField(childData, this.getChildMapper(mapper), id, key, value, remove);\n if (removedData !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', obj[parseInt(i.toString(), 10)]))) {\n var childItems = getValue('child', obj[parseInt(i.toString(), 10)]);\n removedData = this.updateChildField(childItems, this.getChildMapper(mapper), id, key, value, remove);\n if (removedData !== undefined) {\n break;\n }\n }\n }\n return removedData;\n };\n TreeView.prototype.triggerEvent = function (action, node) {\n this.renderReactTemplates();\n if (action === 'addNodes') {\n var nodeData = [];\n for (var i = 0; i < node.length; i++) {\n nodeData.push(this.getNode(this.getElement(isNullOrUndefined(node[parseInt(i.toString(), 10)][this.fields.id])\n ? getValue(this.fields.id, node[parseInt(i.toString(), 10)]).toString()\n : null)));\n }\n node = nodeData;\n }\n var eventArgs = { data: this.treeData, action: action, nodeData: node };\n this.trigger('dataSourceChanged', eventArgs);\n };\n TreeView.prototype.wireInputEvents = function (inpEle) {\n EventHandler.add(inpEle, 'blur', this.inputFocusOut, this);\n };\n TreeView.prototype.wireEditingEvents = function (toBind) {\n var _this = this;\n if (toBind && !this.disabled) {\n this.touchEditObj = new Touch(this.element, {\n tap: function (e) {\n if (_this.isDoubleTapped(e) && e.tapCount === 2) {\n e.originalEvent.preventDefault();\n _this.editingHandler(e.originalEvent);\n }\n }\n });\n }\n else {\n if (this.touchEditObj) {\n this.touchEditObj.destroy();\n }\n }\n };\n TreeView.prototype.wireClickEvent = function (toBind) {\n var _this = this;\n if (toBind) {\n this.touchClickObj = new Touch(this.element, {\n tap: function (e) {\n _this.clickHandler(e);\n }\n });\n }\n else {\n if (this.touchClickObj) {\n this.touchClickObj.destroy();\n }\n }\n };\n TreeView.prototype.wireExpandOnEvent = function (toBind) {\n var _this = this;\n if (toBind) {\n this.touchExpandObj = new Touch(this.element, {\n tap: function (e) {\n if ((_this.expandOnType === 'Click' || (_this.expandOnType === 'DblClick' && _this.isDoubleTapped(e) && e.tapCount === 2))\n && e.originalEvent.which !== 3) {\n _this.expandHandler(e);\n }\n }\n });\n }\n else {\n if (this.touchExpandObj) {\n this.touchExpandObj.destroy();\n }\n }\n };\n TreeView.prototype.mouseDownHandler = function (e) {\n this.mouseDownStatus = true;\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (e.ctrlKey && this.allowMultiSelection) {\n EventHandler.add(this.element, 'contextmenu', this.preventContextMenu, this);\n }\n };\n TreeView.prototype.preventContextMenu = function (e) {\n e.preventDefault();\n };\n TreeView.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);\n this.wireClickEvent(true);\n if (this.expandOnType !== 'None') {\n this.wireExpandOnEvent(true);\n }\n EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.element, 'mouseout', this.onMouseLeave, this);\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n };\n TreeView.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);\n this.wireClickEvent(false);\n this.wireExpandOnEvent(false);\n EventHandler.remove(this.element, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);\n if (!this.disabled) {\n this.keyboardModule.destroy();\n }\n };\n TreeView.prototype.parents = function (element, selector) {\n var matched = [];\n var el = element.parentNode;\n while (!isNullOrUndefined(el)) {\n if (matches(el, selector)) {\n matched.push(el);\n }\n el = el.parentNode;\n }\n return matched;\n };\n TreeView.prototype.isDoubleTapped = function (e) {\n var target = e.originalEvent.target;\n var secondTap;\n if (target && e.tapCount) {\n if (e.tapCount === 1) {\n this.firstTap = closest(target, '.' + LISTITEM);\n }\n else if (e.tapCount === 2) {\n secondTap = closest(target, '.' + LISTITEM);\n }\n }\n return (this.firstTap === secondTap);\n };\n TreeView.prototype.isDescendant = function (parent, child) {\n var node = child.parentNode;\n while (!isNullOrUndefined(node)) {\n if (node === parent) {\n return true;\n }\n node = node.parentNode;\n }\n return false;\n };\n TreeView.prototype.showSpinner = function (element) {\n addClass([element], LOAD);\n createSpinner({\n target: element,\n width: Browser.isDevice ? 16 : 14\n }, this.createElement);\n showSpinner(element);\n };\n TreeView.prototype.hideSpinner = function (element) {\n hideSpinner(element);\n element.innerHTML = '';\n removeClass([element], LOAD);\n };\n TreeView.prototype.setCheckedNodes = function (nodes) {\n nodes = JSON.parse(JSON.stringify(nodes));\n if (nodes.length > 1 && typeof this.nodeChecked === 'function' && this.nodeChecked.length > 0) {\n this.isFilter = true;\n }\n this.uncheckAll(this.checkedNodes);\n this.setIndeterminate(nodes);\n if (nodes.length > 0) {\n this.checkAll(nodes);\n }\n };\n /**\n * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel\n *\n * @param {string} node - The unique identifier of the node.\n * @param {string[]} [nodes=[]] - The list of node IDs to check.\n * @returns {void}\n * @private\n */\n TreeView.prototype.setValidCheckedNode = function (node, nodes) {\n if (nodes === void 0) { nodes = []; }\n if (this.dataType === 1) {\n var mapper = this.fields;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.id, 'equal', node, true));\n if (resultData[0]) {\n this.setChildCheckState(resultData, node, resultData[0], nodes);\n if (this.autoCheck) {\n var parent_4 = resultData[0][this.fields.parentID] ? resultData[0][this.fields.parentID].toString() : null;\n var childNodes = this.getChildNodes(this.treeData, parent_4);\n var count = 0;\n for (var len = 0; len < childNodes.length; len++) {\n var childId = childNodes[parseInt(len.toString(), 10)][this.fields.id].toString();\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n if (count === childNodes.length && this.checkedNodes.indexOf(parent_4) === -1 && parent_4) {\n this.checkDisabledState(parent_4);\n }\n }\n }\n }\n else if (this.dataType === 2) {\n for (var a = 0; a < this.treeData.length; a++) {\n var index = this.treeData[parseInt(a.toString(), 10)][this.fields.id] ? this.treeData[parseInt(a.toString(), 10)][this.fields.id].toString() : '';\n if (index === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkDisabledState(node);\n break;\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[parseInt(a.toString(), 10)]);\n if (childItems) {\n this.setChildCheckState(childItems, node, this.treeData[parseInt(a.toString(), 10)], nodes);\n }\n }\n }\n };\n /**\n * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)\n *\n * @param {Object[]} childItems - The child items to check.\n * @param {string} node - The node to set the check state for.\n * @param {Object} [treeData] - The optional tree data.\n * @returns {void}\n * @private\n */\n /**\n * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)\n *\n * @param {Object[]} childItems - The child items to check.\n * @param {string} node - The node to set the check state for.\n * @param {Object} [treeData] - The optional tree data.\n * @param {string[]} [nodes=[]] - The list of node IDs to check.\n * @returns {void}\n * @private\n */\n TreeView.prototype.setChildCheckState = function (childItems, node, treeData, nodes) {\n if (nodes === void 0) { nodes = []; }\n var checkedParent;\n var count = 0;\n if (this.dataType === 1) {\n if (treeData) {\n checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : null;\n }\n for (var index = 0; index < childItems.length; index++) {\n var checkNode = childItems[parseInt(index.toString(), 10)][this.fields.id]\n ? childItems[parseInt(index.toString(), 10)][this.fields.id].toString()\n : null;\n if (treeData && checkedParent && this.autoCheck) {\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkNode) === -1) {\n this.checkDisabledState(checkNode, childItems[index]);\n }\n }\n if (checkNode === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkDisabledState(node);\n }\n var subChildItems = this.getChildNodes(this.treeData, checkNode);\n var isParentNodeCheck = (nodes.length === 1 && nodes[0] === checkNode);\n if (subChildItems.length === node.length || isParentNodeCheck) {\n this.setChildCheckState(subChildItems, node, treeData);\n }\n }\n }\n else {\n if (treeData) {\n checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';\n }\n for (var index = 0; index < childItems.length; index++) {\n var checkedChild = childItems[parseInt(index.toString(), 10)][this.fields.id] ? childItems[parseInt(index.toString(), 10)][this.fields.id].toString() : '';\n var isParentNodeCheck = ([node].length === 1 && nodes.length === 0);\n if (treeData && checkedParent && this.autoCheck) {\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1\n && (checkedChild === node || isParentNodeCheck)) {\n this.checkDisabledState(checkedChild, childItems[index]);\n }\n }\n if (checkedChild === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkDisabledState(node);\n }\n var subChildItems = getValue(this.fields.child.toString(), childItems[parseInt(index.toString(), 10)]);\n if (subChildItems) {\n this.setChildCheckState(subChildItems, node, childItems[parseInt(index.toString(), 10)]);\n }\n if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {\n count++;\n }\n if (count === childItems.length && this.checkedNodes.indexOf(checkedParent) === -1 && this.autoCheck) {\n this.checkDisabledState(checkedParent, treeData);\n }\n }\n }\n };\n TreeView.prototype.setIndeterminate = function (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n this.setValidCheckedNode(nodes[parseInt(i.toString(), 10)], nodes);\n }\n };\n TreeView.prototype.updatePosition = function (id, newData, isRefreshChild, childValue) {\n if (this.dataType === 1) {\n var pos = this.getDataPos(this.treeData, this.fields, id);\n this.treeData.splice(pos, 1, newData);\n if (isRefreshChild) {\n this.removeChildNodes(id);\n for (var j = 0; j < childValue.length; j++) {\n this.treeData.splice(pos, 0, childValue[parseInt(j.toString(), 10)]);\n pos++;\n }\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n else {\n this.updateChildPosition(this.treeData, this.fields, id, [newData], undefined);\n }\n };\n TreeView.prototype.updateChildPosition = function (treeData, mapper, currID, newData, index) {\n var found;\n for (var i = 0, objlen = treeData.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, treeData[parseInt(i.toString(), 10)]);\n if (treeData[parseInt(i.toString(), 10)] && nodeId && nodeId.toString() === currID) {\n treeData[parseInt(i.toString(), 10)] = newData[0];\n return true;\n }\n else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, treeData[parseInt(i.toString(), 10)]))) {\n var childObj = getValue(mapper.child, treeData[parseInt(i.toString(), 10)]);\n found = this.updateChildPosition(childObj, this.getChildMapper(mapper), currID, newData, index);\n if (found !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', treeData[parseInt(i.toString(), 10)]))) {\n var childData = getValue('child', treeData[parseInt(i.toString(), 10)]);\n found = this.updateChildPosition(childData, this.getChildMapper(mapper), currID, newData, index);\n if (found !== undefined) {\n break;\n }\n }\n }\n return found;\n };\n TreeView.prototype.dynamicState = function () {\n this.setDragAndDrop(this.allowDragAndDrop);\n this.wireEditingEvents(this.allowEditing);\n if (!this.disabled) {\n this.wireEvents();\n this.setRipple();\n }\n else {\n this.unWireEvents();\n this.rippleFn();\n this.rippleIconFn();\n }\n };\n TreeView.prototype.crudOperation = function (operation, nodes, target, newText, newNode, index, prevent) {\n var _this = this;\n var data = this.fields.dataSource;\n var matchedArr = [];\n var query = this.getQuery(this.fields);\n var key = this.fields.id;\n var crud;\n var changes = {\n addedRecords: [],\n deletedRecords: [],\n changedRecords: []\n };\n var nodesID = [];\n if (nodes) {\n nodesID = this.nodeType(nodes);\n }\n else if (target) {\n if (typeof target == 'string') {\n nodesID[0] = target.toString();\n }\n else if (typeof target === 'object') {\n nodesID[0] = target.getAttribute('data-uid').toString();\n }\n }\n for (var i = 0, len = nodesID.length; i < len; i++) {\n var liEle = this.getElement(nodesID[parseInt(i.toString(), 10)]);\n if (isNullOrUndefined(liEle)) {\n continue;\n }\n var removedData = this.getNodeObject(nodesID[parseInt(i.toString(), 10)]);\n matchedArr.push(removedData);\n }\n switch (operation) {\n case 'delete':\n if (nodes.length === 1) {\n crud = data.remove(key, matchedArr[0], query.fromTable, query);\n }\n else {\n changes.deletedRecords = matchedArr;\n crud = data.saveChanges(changes, key, query.fromTable, query);\n }\n crud.then(function () { return _this.deleteSuccess(nodesID); })\n .catch(function (e) { return _this.dmFailure(e); });\n break;\n case 'update':\n matchedArr[0][this.fields.text] = newText;\n crud = data.update(key, matchedArr[0], query.fromTable, query);\n crud.then(function () { return _this.editSucess(target, newText, prevent); })\n .catch(function (e) { return _this.dmFailure(e, target, prevent); });\n break;\n case 'insert':\n if (newNode.length === 1) {\n crud = data.insert(newNode[0], query.fromTable, query);\n }\n else {\n var arr = [];\n for (var i = 0, len = newNode.length; i < len; i++) {\n arr.push(newNode[parseInt(i.toString(), 10)]);\n }\n changes.addedRecords = arr;\n crud = data.saveChanges(changes, key, query.fromTable, query);\n }\n crud.then(function () {\n var dropLi = _this.getElement(target);\n _this.addSuccess(newNode, dropLi, index);\n _this.preventExpand = false;\n }).catch(function (e) { return _this.dmFailure(e); });\n break;\n }\n };\n TreeView.prototype.deleteSuccess = function (nodes) {\n var nodeData = [];\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[parseInt(i.toString(), 10)]);\n nodeData.push(this.getNode(liEle));\n if (isNullOrUndefined(liEle)) {\n continue;\n }\n this.removeNode(liEle);\n }\n this.updateInstance();\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n this.triggerEvent('removeNode', nodeData);\n };\n TreeView.prototype.editSucess = function (target, newText, prevent) {\n var liEle = this.getElement(target);\n var txtEle = select('.' + LISTTEXT, liEle);\n this.appendNewText(liEle, txtEle, newText, prevent);\n };\n TreeView.prototype.addSuccess = function (nodes, dropLi, index) {\n var _this = this;\n var dropUl;\n var icon = dropLi ? dropLi.querySelector('.' + ICON) : null;\n if (dropLi && icon && icon.classList.contains(EXPANDABLE) &&\n dropLi.querySelector('.' + PARENTITEM) === null) {\n this.renderChildNodes(dropLi, null, function () {\n dropUl = dropLi.querySelector('.' + PARENTITEM);\n _this.addGivenNodes(nodes, dropLi, index, true, dropUl);\n _this.triggerEvent('addNodes', nodes);\n });\n }\n else {\n this.addGivenNodes(nodes, dropLi, index, true);\n this.triggerEvent('addNodes', nodes);\n }\n };\n TreeView.prototype.dmFailure = function (e, target, prevent) {\n if (target) {\n this.updatePreviousText(target, prevent);\n }\n this.trigger('actionFailure', { error: e });\n };\n TreeView.prototype.updatePreviousText = function (target, prevent) {\n var liEle = this.getElement(target);\n var txtEle = select('.' + LISTTEXT, liEle);\n this.updateText(liEle, txtEle, this.oldText, prevent);\n };\n TreeView.prototype.getHierarchicalParentId = function (node, data, parentsID) {\n var _this = this;\n var index = data.findIndex(function (data) {\n return data[_this.fields.id] && data[_this.fields.id].toString() === node;\n });\n if (index === -1) {\n for (var i = 0; i < data.length; i++) {\n var childItems = getValue(this.fields.child.toString(), data[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(childItems)) {\n index = childItems.findIndex(function (data) {\n return data[_this.fields.id] && data[_this.fields.id].toString() === node;\n });\n if (index === -1) {\n this.getHierarchicalParentId(node, childItems, parentsID);\n }\n else {\n parentsID.push(data[parseInt(i.toString(), 10)][this.fields.id].toString());\n this.getHierarchicalParentId(data[parseInt(i.toString(), 10)][this.fields.id].toString(), this.treeData, parentsID);\n break;\n }\n }\n }\n }\n return parentsID;\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {TreeViewModel} newProp - The new property value.\n * @param {TreeViewModel} oldProp - The old property value.\n * @returns {void}\n * @private\n */\n TreeView.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 'allowDragAndDrop':\n this.setDragAndDrop(this.allowDragAndDrop);\n break;\n case 'dragArea':\n if (this.allowDragAndDrop) {\n this.dragObj.dragArea = this.dragArea;\n }\n break;\n case 'allowEditing':\n this.wireEditingEvents(this.allowEditing);\n break;\n case 'allowMultiSelection':\n if (this.selectedNodes.length > 1) {\n var sNode = this.getElement(this.selectedNodes[0]);\n this.isLoaded = false;\n this.removeSelectAll();\n this.selectNode(sNode, null);\n this.isLoaded = true;\n }\n this.setMultiSelect(this.allowMultiSelection);\n this.addMultiSelect(this.allowMultiSelection);\n break;\n case 'allowTextWrap':\n this.setTextWrap();\n this.updateWrap();\n break;\n case 'checkedNodes':\n if (this.showCheckBox) {\n this.checkedNodes = oldProp.checkedNodes;\n this.setCheckedNodes(newProp.checkedNodes);\n }\n break;\n case 'autoCheck':\n if (this.showCheckBox) {\n this.autoCheck = newProp.autoCheck;\n this.ensureIndeterminate();\n }\n break;\n case 'cssClass':\n this.setCssClass(oldProp.cssClass, newProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'expandedNodes':\n this.isAnimate = false;\n this.setProperties({ expandedNodes: [] }, true);\n this.collapseAll();\n this.isInitalExpand = true;\n this.setProperties({ expandedNodes: isNullOrUndefined(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);\n this.doExpandAction();\n this.isInitalExpand = false;\n this.isAnimate = true;\n break;\n case 'expandOn':\n this.wireExpandOnEvent(false);\n this.setExpandOnType();\n if (this.expandOnType !== 'None' && !this.disabled) {\n this.wireExpandOnEvent(true);\n }\n break;\n case 'disabled':\n this.setDisabledMode();\n this.dynamicState();\n break;\n case 'fields':\n this.isAnimate = false;\n this.isFieldChange = true;\n this.initialRender = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact || this.isReact && !(this.fields.dataSource instanceof DataManager)) {\n if (!this.element.classList.contains('e-filtering')) {\n this.DDTTreeData = JSON.parse(JSON.stringify(this.fields.dataSource));\n }\n this.reRenderNodes();\n }\n this.initialRender = false;\n this.isAnimate = true;\n this.isFieldChange = false;\n break;\n case 'fullRowSelect':\n this.setFullRow(this.fullRowSelect);\n this.addFullRow(this.fullRowSelect);\n if (this.allowTextWrap) {\n this.setTextWrap();\n this.updateWrap();\n }\n break;\n case 'loadOnDemand':\n if (this.loadOnDemand === false && !this.onLoaded) {\n var nodes = this.element.querySelectorAll('li');\n var i = 0;\n while (i < nodes.length) {\n if (nodes[parseInt(i.toString(), 10)].getAttribute('aria-expanded') !== 'true') {\n this.renderChildNodes(nodes[parseInt(i.toString(), 10)], true, null, true);\n }\n i++;\n }\n this.onLoaded = true;\n }\n break;\n case 'nodeTemplate':\n this.hasTemplate = false;\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n this.reRenderNodes();\n break;\n case 'selectedNodes':\n this.removeSelectAll();\n this.setProperties({ selectedNodes: newProp.selectedNodes }, true);\n this.doSelectionAction();\n break;\n case 'showCheckBox':\n case 'checkDisabledChildren':\n this.reRenderNodes();\n break;\n case 'sortOrder':\n this.reRenderNodes();\n break;\n case 'fullRowNavigable':\n this.setProperties({ fullRowNavigable: newProp.fullRowNavigable }, true);\n this.listBaseOption.itemNavigable = newProp.fullRowNavigable;\n this.reRenderNodes();\n break;\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n *\n * @returns {void}\n */\n TreeView.prototype.destroy = function () {\n this.clearTemplate();\n this.element.removeAttribute('aria-activedescendant');\n this.unWireEvents();\n this.wireEditingEvents(false);\n if (!this.disabled) {\n this.rippleFn();\n this.rippleIconFn();\n }\n this.setCssClass(this.cssClass, null);\n this.setDragAndDrop(false);\n this.setFullRow(false);\n if (this.ulElement && this.ulElement.parentElement) {\n this.ulElement.parentElement.removeChild(this.ulElement);\n }\n this.ulElement = null;\n this.liList = null;\n this.startNode = null;\n this.firstTap = null;\n this.expandArgs = null;\n this.dragLi = null;\n this.dragTarget = null;\n this.dragParent = null;\n this.dragObj = null;\n this.dropObj = null;\n this.inputObj = null;\n this.touchEditObj = null;\n this.touchExpandObj = null;\n this.touchClickObj = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Adds the collection of TreeView nodes based on target and index position. If target node is not specified,\n * then the nodes are added as children of the given parentID or in the root level of TreeView.\n *\n * @param { object } nodes - Specifies the array of JSON data that has to be added.\n * @param { string | Element } target - Specifies ID of TreeView node/TreeView node as target element.\n * @param { number } index - Specifies the index to place the newly added nodes in the target element.\n * @param { boolean } preventTargetExpand - If set to true, the target parent node will be prevented from auto expanding.\n * @returns {void}\n */\n TreeView.prototype.addNodes = function (nodes, target, index, preventTargetExpand) {\n if (isNullOrUndefined(nodes)) {\n return;\n }\n nodes = JSON.parse(JSON.stringify(nodes));\n var dropLi = this.getElement(target);\n this.preventExpand = preventTargetExpand;\n if (this.fields.dataSource instanceof DataManager) {\n if (!this.isOffline) {\n this.crudOperation('insert', null, target, null, nodes, index, this.preventExpand);\n }\n else {\n this.addSuccess(nodes, dropLi, index);\n }\n }\n else if (this.dataType === 2) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n if (dropLi) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n nodes = this.getSortedData(nodes);\n for (var i = 0; i < nodes.length; i++) {\n var pid = getValue(this.fields.parentID, nodes[parseInt(i.toString(), 10)]);\n dropLi = pid ? this.getElement(pid.toString()) : pid;\n if (!isNullOrUndefined(pid) && isNullOrUndefined(dropLi)) {\n this.preventExpand = false;\n this.ensureVisible(pid);\n this.preventExpand = preventTargetExpand;\n dropLi = this.getElement(pid.toString());\n }\n this.addGivenNodes([nodes[parseInt(i.toString(), 10)]], dropLi, index);\n }\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n this.updateCheckedStateFromDS();\n if (this.showCheckBox && dropLi) {\n this.ensureParentCheckState(dropLi);\n }\n if ((this.fields.dataSource instanceof DataManager === false)) {\n this.preventExpand = false;\n this.triggerEvent('addNodes', nodes);\n }\n };\n /**\n * Editing can also be enabled by using the `beginEdit` property, instead of clicking on the\n * TreeView node. On passing the node ID or element through this property, the edit textBox\n * will be created for the particular node thus allowing us to edit it.\n *\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n * @returns {void}\n */\n TreeView.prototype.beginEdit = function (node) {\n var ele = this.getElement(node);\n if (isNullOrUndefined(ele) || this.disabled) {\n return;\n }\n this.createTextbox(ele);\n };\n /**\n * Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes\n * as argument to this method.\n *\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @returns {void}\n */\n TreeView.prototype.checkAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, true);\n }\n };\n /**\n * Collapses all the expanded TreeView nodes. You can collapse specific nodes by passing array of nodes as argument to this method.\n * You can also collapse all the nodes excluding the hidden nodes by setting **excludeHiddenNodes** to true. If you want to collapse\n * a specific level of nodes, set **level** as argument to collapseAll method.\n *\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/ array of TreeView node.\n * @param {number} level - TreeView nodes will collapse up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes of TreeView when collapsing all nodes.\n * @returns {void}\n */\n TreeView.prototype.collapseAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNullOrUndefined(nodes)) {\n this.doGivenAction(nodes, COLLAPSIBLE, false);\n }\n else {\n if (level > 0) {\n this.collapseByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.collapseAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Disables the collection of nodes by passing the ID of nodes or node elements in the array.\n *\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n * @returns {void}\n */\n TreeView.prototype.disableNodes = function (nodes) {\n if (!isNullOrUndefined(nodes)) {\n this.doDisableAction(nodes);\n }\n };\n /**\n * Enables the collection of disabled nodes by passing the ID of nodes or node elements in the array.\n *\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n * @returns {void}\n */\n TreeView.prototype.enableNodes = function (nodes) {\n if (!isNullOrUndefined(nodes)) {\n this.doEnableAction(nodes);\n }\n };\n /**\n * Ensures visibility of the TreeView node by using node ID or node element.\n * When many TreeView nodes are present and we need to find a particular node, `ensureVisible` property\n * helps bring the node to visibility by expanding the TreeView and scrolling to the specific node.\n *\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView nodes.\n * @returns {void}\n */\n TreeView.prototype.ensureVisible = function (node) {\n var parentsId = [];\n if (this.dataType === 1) {\n var nodeData = this.getTreeData(node);\n while (nodeData.length !== 0 && !isNullOrUndefined(nodeData[0][this.fields.parentID])) {\n parentsId.push(nodeData[0][this.fields.parentID].toString());\n nodeData = this.getTreeData(nodeData[0][this.fields.parentID].toString());\n }\n }\n else if (this.dataType === 2) {\n parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId);\n }\n this.expandAll(parentsId.reverse());\n var liEle = this.getElement(node);\n if (!isNullOrUndefined(liEle)) {\n if (typeof node == 'object') {\n var parents = this.parents(liEle, '.' + LISTITEM);\n this.expandAll(parents);\n }\n setTimeout(function () { liEle.scrollIntoView({ behavior: 'smooth' }); }, 450);\n }\n };\n /**\n * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes\n * as argument to this method. You can also expand all the collapsed nodes by excluding the hidden nodes by setting\n * **excludeHiddenNodes** to true to this method. To expand a specific level of nodes, set **level** as argument to expandAll method.\n *\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n * @param {number} level - TreeView nodes will expand up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes when expanding all nodes.\n * @param {boolean} preventAnimation - Prevent the expand animation when expanding all nodes.\n * @returns {void}\n */\n TreeView.prototype.expandAll = function (nodes, level, excludeHiddenNodes, preventAnimation) {\n this.isAnimate = !preventAnimation;\n if (!isNullOrUndefined(nodes)) {\n this.doGivenAction(nodes, EXPANDABLE, true);\n }\n else {\n if (level > 0) {\n this.expandByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.expandAllNodes(excludeHiddenNodes);\n if (!this.loadOnDemand || this.element.classList.contains('e-filtering')) {\n this.updateAttributes(this.element);\n this.updateList();\n }\n }\n }\n this.isAnimate = true;\n };\n /**\n * Gets all the checked nodes including child, whether it is loaded or not.\n *\n * @returns {string[]} - An array of strings representing the unique identifiers of checked nodes.\n */\n TreeView.prototype.getAllCheckedNodes = function () {\n var checkNodes = this.checkedNodes;\n return checkNodes;\n };\n /**\n * Gets all the disabled nodes including child, whether it is loaded or not.\n *\n * @returns {string[]} An array of strings representing the unique identifiers of disabled nodes.\n */\n TreeView.prototype.getDisabledNodes = function () {\n var disabledNodes = this.disableNode;\n return disabledNodes;\n };\n /**\n * Gets the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.\n *\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n * @returns {Object} - The data associated with the specified node.\n */\n TreeView.prototype.getNode = function (node) {\n var ele = this.getElement(node);\n return this.getNodeData(ele, true);\n };\n /**\n * To get the updated data source of TreeView after performing some operation like drag and drop, node editing,\n * node selecting/unSelecting, node expanding/collapsing, node checking/unChecking, adding and removing node.\n * * If you pass the ID of TreeView node as arguments for this method then it will return the updated data source\n * of the corresponding node otherwise it will return the entire updated data source of TreeView.\n * * The updated data source also contains custom attributes if you specified in data source.\n *\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n * @isGenericType true\n * @returns {Object} - The tree data associated with the specified node or element.\n */\n TreeView.prototype.getTreeData = function (node) {\n var id = this.getId(node);\n this.updatePersistProp();\n if (isNullOrUndefined(id)) {\n return this.treeData;\n }\n else {\n var data = this.getNodeObject(id);\n return isNullOrUndefined(data) ? [] : [data];\n }\n };\n /**\n * Moves the collection of nodes within the same TreeView based on target or its index position.\n *\n * @param {string[] | Element[]} sourceNodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {number} index - Specifies the index to place the moved nodes in the target element.\n * @param { boolean } preventTargetExpand - If set to true, the target parent node will be prevented from auto expanding.\n * @returns {void}\n */\n TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {\n var dropLi = this.getElement(target);\n var nodeData = [];\n if (isNullOrUndefined(dropLi)) {\n return;\n }\n for (var i = 0; i < sourceNodes.length; i++) {\n var dragLi = this.getElement(sourceNodes[parseInt(i.toString(), 10)]);\n nodeData.push(this.getNode(dragLi));\n if (isNullOrUndefined(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n continue;\n }\n this.preventExpand = preventTargetExpand;\n this.dropAsChildNode(dragLi, dropLi, this, index, null, null, null, dropLi);\n }\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n this.triggerEvent('moveNodes', nodeData);\n };\n /**\n * Refreshes a particular node of the TreeView.\n *\n * @param {string | Element} target - Specifies the ID of TreeView node or TreeView node as target element.\n * @param {Object[]} newData - Specifies the new data of TreeView node.\n * @returns {void}\n * ```typescript\n * var treeObj = document.getElementById(\"treeview\").ej2_instances[0];\n * var data = treeObj.getTreeData(\"01\");\n * var newData = {\n * id: data[0].id,\n * name: \"new Text\",\n * };\n * treeObj.refreshNode(\"01\", [newData]);\n * ```\n */\n TreeView.prototype.refreshNode = function (target, newData) {\n if (isNullOrUndefined(target) || isNullOrUndefined(newData)) {\n return;\n }\n var isRefreshChild = false;\n if (this.dataType === 1 && newData.length > 1) {\n isRefreshChild = true;\n }\n else if (this.dataType === 2 && newData.length === 1) {\n var updatedChildValue = getValue(this.fields.child.toString(), newData[0]);\n if (!isNullOrUndefined(updatedChildValue)) {\n isRefreshChild = true;\n }\n }\n var liEle = this.getElement(target);\n var id = liEle ? liEle.getAttribute('data-uid') : ((target) ? target.toString() : null);\n this.refreshData = this.getNodeObject(id);\n newData = JSON.parse(JSON.stringify(newData));\n var newNodeData;\n var parentData;\n if (this.dataType === 1 && isRefreshChild) {\n for (var k = 0; k < newData.length; k++) {\n if (isNullOrUndefined(newData[parseInt(k.toString(), 10)][this.fields.parentID])) {\n parentData = newData[parseInt(k.toString(), 10)];\n newData.splice(k, 1);\n break;\n }\n }\n newNodeData = extend({}, this.refreshData, parentData);\n }\n else {\n newNodeData = extend({}, this.refreshData, newData[0]);\n }\n if (isNullOrUndefined(liEle)) {\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n return;\n }\n this.isRefreshed = true;\n var level = parseFloat(liEle.getAttribute('aria-level'));\n var newliEle = ListBase.createListItemFromJson(this.createElement, [newNodeData], this.listBaseOption, level);\n var ul = select('.' + PARENTITEM, liEle);\n var childItems = getValue(this.fields.child.toString(), newNodeData);\n if ((isRefreshChild && ul) || (isRefreshChild && !isNullOrUndefined(childItems))) {\n var parentEle = liEle.parentElement;\n var index = Array.prototype.indexOf.call(parentEle.childNodes, liEle);\n remove(liEle);\n parentEle.insertBefore(newliEle[0], parentEle.childNodes[parseInt(index.toString(), 10)]);\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n if (isRefreshChild && ul) {\n this.expandAll([id]);\n }\n }\n else {\n var txtEle = select('.' + TEXTWRAP, liEle);\n var newTextEle = select('.' + TEXTWRAP, newliEle[0]);\n var icon = select('div.' + ICON, txtEle);\n var newIcon = select('div.' + ICON, newTextEle);\n if (icon && newIcon) {\n if (newIcon.classList.contains(EXPANDABLE) && icon.classList.contains(COLLAPSIBLE)) {\n removeClass([newIcon], EXPANDABLE);\n addClass([newIcon], COLLAPSIBLE);\n }\n else if (newIcon.classList.contains(COLLAPSIBLE) && icon.classList.contains(EXPANDABLE)) {\n removeClass([newIcon], COLLAPSIBLE);\n addClass([newIcon], EXPANDABLE);\n }\n else if (icon.classList.contains('interaction')) {\n addClass([newIcon], 'interaction');\n }\n }\n remove(txtEle);\n var fullEle = select('.' + FULLROW, liEle);\n fullEle.parentNode.insertBefore(newTextEle, fullEle.nextSibling);\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n }\n liEle = this.getElement(target);\n if (newNodeData[this.fields.tooltip]) {\n liEle.setAttribute('title', newNodeData[this.fields.tooltip]);\n }\n if (Object.prototype.hasOwnProperty.call(newNodeData, this.fields.htmlAttributes) && newNodeData[this.fields.htmlAttributes]) {\n var attr = {};\n merge(attr, newNodeData[this.fields.htmlAttributes]);\n if (attr.class) {\n addClass([liEle], attr.class.split(' '));\n delete attr.class;\n }\n else {\n attributes(liEle, attr);\n }\n }\n if (this.selectedNodes.indexOf(id) !== -1) {\n liEle.setAttribute('aria-selected', 'true');\n addClass([liEle], ACTIVE);\n }\n this.isRefreshed = false;\n this.triggerEvent('refreshNode', [this.getNode(liEle)]);\n };\n /**\n * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.\n *\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @returns {void}\n */\n TreeView.prototype.removeNodes = function (nodes) {\n if (!isNullOrUndefined(nodes)) {\n if (this.fields.dataSource instanceof DataManager && !this.isOffline) {\n this.crudOperation('delete', nodes);\n }\n else {\n this.deleteSuccess(nodes);\n }\n }\n };\n /**\n * Replaces the text of the TreeView node with the given text only when the `allowEditing` property is enabled.\n *\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {string} newText - Specifies the new text of TreeView node.\n * @returns {void}\n */\n TreeView.prototype.updateNode = function (target, newText) {\n var _this = this;\n if (isNullOrUndefined(target) || isNullOrUndefined(newText) || !this.allowEditing) {\n return;\n }\n var liEle = this.getElement(target);\n if (isNullOrUndefined(liEle)) {\n return;\n }\n var txtEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var eventArgs = this.getEditEvent(liEle, null, null);\n this.trigger('nodeEditing', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n if (_this.fields.dataSource instanceof DataManager && !_this.isOffline) {\n _this.crudOperation('update', null, target, newText, null, null, false);\n }\n else {\n _this.appendNewText(liEle, txtEle, newText, false);\n }\n }\n });\n };\n /**\n * Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes\n * as argument to this method.\n *\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @returns {void}\n */\n TreeView.prototype.uncheckAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, false);\n }\n };\n var TreeView_1;\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"allowDragAndDrop\", void 0);\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"allowEditing\", void 0);\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"allowMultiSelection\", void 0);\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"allowTextWrap\", void 0);\n __decorate$8([\n Complex({}, NodeAnimationSettings)\n ], TreeView.prototype, \"animation\", void 0);\n __decorate$8([\n Property()\n ], TreeView.prototype, \"checkedNodes\", void 0);\n __decorate$8([\n Property(true)\n ], TreeView.prototype, \"checkDisabledChildren\", void 0);\n __decorate$8([\n Property('')\n ], TreeView.prototype, \"cssClass\", void 0);\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"disabled\", void 0);\n __decorate$8([\n Property(null)\n ], TreeView.prototype, \"dragArea\", void 0);\n __decorate$8([\n Property(true)\n ], TreeView.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"enablePersistence\", void 0);\n __decorate$8([\n Property()\n ], TreeView.prototype, \"expandedNodes\", void 0);\n __decorate$8([\n Property('Auto')\n ], TreeView.prototype, \"expandOn\", void 0);\n __decorate$8([\n Complex({}, FieldsSettings)\n ], TreeView.prototype, \"fields\", void 0);\n __decorate$8([\n Property(true)\n ], TreeView.prototype, \"fullRowSelect\", void 0);\n __decorate$8([\n Property(true)\n ], TreeView.prototype, \"loadOnDemand\", void 0);\n __decorate$8([\n Property()\n ], TreeView.prototype, \"locale\", void 0);\n __decorate$8([\n Property()\n ], TreeView.prototype, \"nodeTemplate\", void 0);\n __decorate$8([\n Property()\n ], TreeView.prototype, \"selectedNodes\", void 0);\n __decorate$8([\n Property('None')\n ], TreeView.prototype, \"sortOrder\", void 0);\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"showCheckBox\", void 0);\n __decorate$8([\n Property(true)\n ], TreeView.prototype, \"autoCheck\", void 0);\n __decorate$8([\n Property(false)\n ], TreeView.prototype, \"fullRowNavigable\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"actionFailure\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"created\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"dataBound\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"dataSourceChanged\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"drawNode\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"destroyed\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"keyPress\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeChecked\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeChecking\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeClicked\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeCollapsed\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeCollapsing\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeDragging\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeDragStart\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeDragStop\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeDropped\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeEdited\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeEditing\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeExpanded\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeExpanding\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeSelected\", void 0);\n __decorate$8([\n Event()\n ], TreeView.prototype, \"nodeSelecting\", void 0);\n TreeView = TreeView_1 = __decorate$8([\n NotifyPropertyChanges\n ], TreeView);\n return TreeView;\n}(Component));\n\nvar __extends$9 = (undefined && undefined.__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$9 = (undefined && undefined.__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};\nvar CONTROL$1 = 'e-control';\nvar ROOT$1 = 'e-sidebar';\nvar DOCKER = 'e-dock';\nvar CLOSE = 'e-close';\nvar OPEN = 'e-open';\nvar TRASITION = 'e-transition';\nvar DEFAULTBACKDROP = 'e-sidebar-overlay';\nvar RTL$2 = 'e-rtl';\nvar RIGHT = 'e-right';\nvar LEFT = 'e-left';\nvar OVER = 'e-over';\nvar PUSH = 'e-push';\nvar SLIDE = 'e-slide';\nvar VISIBILITY = 'e-visibility';\nvar DISPLAY = 'e-sidebar-display';\nvar MAINCONTENTANIMATION = 'e-content-animation';\nvar DISABLEANIMATION = 'e-disable-animation';\nvar CONTEXT = 'e-sidebar-context';\nvar SIDEBARABSOLUTE = 'e-sidebar-absolute';\n/**\n * Sidebar is an expandable or collapsible\n * component that typically act as a side container to place the primary or secondary content alongside of the main content.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Sidebar = /** @__PURE__ @class */ (function (_super) {\n __extends$9(Sidebar, _super);\n function Sidebar(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.documentClickContext = _this.documentclickHandler.bind(_this);\n return _this;\n }\n Sidebar.prototype.preRender = function () {\n this.setWidth();\n };\n Sidebar.prototype.render = function () {\n this.initialize();\n this.wireEvents();\n this.renderComplete();\n };\n Sidebar.prototype.initialize = function () {\n this.setTarget();\n this.addClass();\n this.setZindex();\n if (this.enableDock) {\n this.setDock();\n }\n if (this.isOpen) {\n this.show();\n this.firstRender = true;\n }\n else {\n this.setMediaQuery();\n }\n this.checkType(true);\n this.setType(this.type);\n this.setCloseOnDocumentClick();\n this.setEnableRTL();\n if (Browser.isDevice) {\n this.windowWidth = window.innerWidth;\n }\n };\n Sidebar.prototype.setEnableRTL = function () {\n (this.enableRtl ? addClass : removeClass)([this.element], RTL$2);\n };\n Sidebar.prototype.setTarget = function () {\n this.targetEle = this.element.nextElementSibling;\n this.sidebarEleCopy = this.element.cloneNode(true);\n if (typeof (this.target) === 'string') {\n this.setProperties({ target: document.querySelector(this.target) }, true);\n }\n if (this.target) {\n this.target.insertBefore(this.element, this.target.children[0]);\n addClass([this.element], SIDEBARABSOLUTE);\n addClass([this.target], CONTEXT);\n this.targetEle = this.getTargetElement();\n }\n };\n Sidebar.prototype.getTargetElement = function () {\n var siblingElement = this.element.nextElementSibling;\n while (!isNullOrUndefined(siblingElement)) {\n if (!siblingElement.classList.contains(ROOT$1)) {\n break;\n }\n siblingElement = siblingElement.nextElementSibling;\n }\n return siblingElement;\n };\n Sidebar.prototype.setCloseOnDocumentClick = function () {\n if (this.closeOnDocumentClick) {\n document.addEventListener('mousedown', this.documentClickContext);\n document.addEventListener('touchstart', this.documentClickContext);\n }\n else {\n document.removeEventListener('mousedown', this.documentClickContext);\n document.removeEventListener('touchstart', this.documentClickContext);\n }\n };\n Sidebar.prototype.setWidth = function () {\n if (this.enableDock && this.position === 'Left') {\n setStyleAttribute(this.element, { 'width': this.setDimension(this.dockSize) });\n }\n else if (this.enableDock && this.position === 'Right') {\n setStyleAttribute(this.element, { 'width': this.setDimension(this.dockSize) });\n }\n else if (!this.enableDock) {\n setStyleAttribute(this.element, { 'width': this.setDimension(this.width) });\n }\n };\n Sidebar.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = (width.match(/px|%|em/)) ? width : formatUnit(width);\n }\n else {\n width = '100%';\n }\n return width;\n };\n Sidebar.prototype.setZindex = function () {\n setStyleAttribute(this.element, { 'z-index': '' + this.zIndex });\n };\n Sidebar.prototype.addClass = function () {\n if (this.element.tagName === 'EJS-SIDEBAR') {\n addClass([this.element], DISPLAY);\n }\n var classELement = document.querySelector('.e-main-content');\n if (!isNullOrUndefined(classELement || this.targetEle)) {\n addClass([classELement || this.targetEle], [MAINCONTENTANIMATION]);\n }\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : null;\n if (!this.enableDock && this.type !== 'Auto') {\n addClass([this.element], [VISIBILITY]);\n }\n removeClass([this.element], [OPEN, CLOSE, RIGHT, LEFT, SLIDE, PUSH, OVER]);\n this.element.classList.add(ROOT$1);\n addClass([this.element], (this.position === 'Right') ? RIGHT : LEFT);\n if (this.enableDock) {\n addClass([this.element], DOCKER);\n }\n if (!isNullOrUndefined(this.tabIndex)) {\n this.element.setAttribute('tabindex', this.tabIndex);\n }\n if (this.type === 'Auto' && !Browser.isDevice) {\n this.show();\n }\n else if (!this.isOpen) {\n addClass([this.element], [CLOSE, DISABLEANIMATION]);\n }\n };\n Sidebar.prototype.checkType = function (val) {\n if (!(this.type === 'Push' || this.type === 'Over' || this.type === 'Slide')) {\n this.type = 'Auto';\n }\n else {\n if (!this.element.classList.contains(CLOSE) && !val) {\n this.hide();\n }\n }\n };\n Sidebar.prototype.transitionEnd = function (e) {\n this.setDock();\n if (!isNullOrUndefined(e) && !this.firstRender) {\n this.triggerChange();\n }\n this.firstRender = false;\n EventHandler.remove(this.element, 'transitionend', this.transitionEnd);\n };\n Sidebar.prototype.destroyBackDrop = function () {\n var sibling = document.querySelector('.e-main-content') || this.targetEle;\n if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {\n removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);\n }\n else if (this.showBackdrop && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n };\n /**\n * Hide the Sidebar component, if it is in an open state.\n *\n * @param {Event} e - The event triggering the hide action.\n * @returns {void}\n *\n */\n Sidebar.prototype.hide = function (e) {\n var _this = this;\n var closeArguments = {\n model: this,\n element: this.element,\n cancel: false,\n isInteracted: !isNullOrUndefined(e),\n event: (e || null)\n };\n this.trigger('close', closeArguments, function (observedcloseArgs) {\n if (!observedcloseArgs.cancel) {\n if (_this.element.classList.contains(CLOSE)) {\n return;\n }\n if (_this.element.classList.contains(OPEN) && !_this.animate) {\n _this.triggerChange();\n }\n addClass([_this.element], CLOSE);\n removeClass([_this.element], OPEN);\n setStyleAttribute(_this.element, { 'width': formatUnit(_this.enableDock ? _this.dockSize : _this.width) });\n _this.setType(_this.type);\n var sibling = document.querySelector('.e-main-content') || _this.targetEle;\n if (!_this.enableDock && sibling) {\n sibling.style.transform = 'translateX(' + 0 + 'px)';\n sibling.style[_this.position === 'Left' ? 'marginLeft' : 'marginRight'] = '0px';\n }\n _this.destroyBackDrop();\n _this.setAnimation();\n if (_this.type === 'Slide') {\n document.body.classList.remove('e-sidebar-overflow');\n }\n _this.setProperties({ isOpen: false }, true);\n if (_this.enableDock) {\n setTimeout(function () { return _this.setTimeOut(); }, 50);\n }\n EventHandler.add(_this.element, 'transitionend', _this.transitionEnd, _this);\n }\n });\n };\n Sidebar.prototype.setTimeOut = function () {\n var sibling = document.querySelector('.e-main-content') || this.targetEle;\n var elementWidth = this.element.getBoundingClientRect().width;\n if (this.element.classList.contains(OPEN) && sibling && !(this.type === 'Over' && this.enableDock)) {\n if (this.position === 'Left') {\n sibling.style.marginLeft = this.setDimension(this.width === 'auto' ? elementWidth : this.width);\n }\n else {\n sibling.style.marginRight = this.setDimension(this.width === 'auto' ? elementWidth : this.width);\n }\n }\n else if (this.element.classList.contains(CLOSE) && sibling) {\n if (this.position === 'Left') {\n sibling.style.marginLeft = this.setDimension(this.dockSize === 'auto' ? elementWidth : this.dockSize);\n }\n else {\n sibling.style.marginRight = this.setDimension(this.dockSize === 'auto' ? elementWidth : this.dockSize);\n }\n }\n };\n /**\n * Shows the Sidebar component, if it is in closed state.\n *\n * @param {Event} e - The optional event triggering the show action.\n * @returns {void}\n */\n Sidebar.prototype.show = function (e) {\n var _this = this;\n var openArguments = {\n model: this,\n element: this.element,\n cancel: false,\n isInteracted: !isNullOrUndefined(e),\n event: (e || null)\n };\n this.trigger('open', openArguments, function (observedopenArgs) {\n if (!observedopenArgs.cancel) {\n removeClass([_this.element], [VISIBILITY, DISABLEANIMATION]);\n if (_this.element.classList.contains(OPEN)) {\n return;\n }\n if (_this.element.classList.contains(CLOSE) && !_this.animate) {\n _this.triggerChange();\n }\n addClass([_this.element], [OPEN, TRASITION]);\n setStyleAttribute(_this.element, { 'transform': '' });\n removeClass([_this.element], CLOSE);\n setStyleAttribute(_this.element, { 'width': formatUnit(_this.width) });\n _this.setType(_this.type);\n _this.createBackDrop();\n _this.setAnimation();\n if (_this.type === 'Slide') {\n document.body.classList.add('e-sidebar-overflow');\n }\n _this.setProperties({ isOpen: true }, true);\n EventHandler.add(_this.element, 'transitionend', _this.transitionEnd, _this);\n }\n });\n };\n Sidebar.prototype.setAnimation = function () {\n if (this.animate) {\n removeClass([this.element], DISABLEANIMATION);\n }\n else {\n addClass([this.element], DISABLEANIMATION);\n }\n };\n Sidebar.prototype.triggerChange = function () {\n var changeArguments = { name: 'change', element: this.element };\n this.trigger('change', changeArguments);\n };\n Sidebar.prototype.setDock = function () {\n if (this.enableDock && this.position === 'Left' && !this.getState()) {\n setStyleAttribute(this.element, { 'transform': 'translateX(' + -100 + '%) translateX(' + this.setDimension(this.dockSize) + ')' });\n }\n else if (this.enableDock && this.position === 'Right' && !this.getState()) {\n setStyleAttribute(this.element, { 'transform': 'translateX(' + 100 + '%) translateX(' + '-' + this.setDimension(this.dockSize) + ')' });\n }\n if (this.element.classList.contains(CLOSE) && this.enableDock) {\n setStyleAttribute(this.element, { 'width': this.setDimension(this.dockSize) });\n }\n };\n Sidebar.prototype.createBackDrop = function () {\n if (this.target && this.showBackdrop && this.getState()) {\n var targetString = this.target;\n var sibling = document.querySelector('.e-main-content') || this.targetEle;\n this.defaultBackdropDiv = this.createElement('div');\n addClass([this.defaultBackdropDiv], DEFAULTBACKDROP);\n setStyleAttribute(this.defaultBackdropDiv, { height: targetString.style.height });\n sibling.appendChild(this.defaultBackdropDiv);\n }\n else if (this.showBackdrop && !this.modal && this.getState()) {\n this.modal = this.createElement('div');\n this.modal.className = DEFAULTBACKDROP;\n this.modal.style.display = 'block';\n document.body.appendChild(this.modal);\n }\n };\n Sidebar.prototype.getPersistData = function () {\n return this.addOnPersist(['type', 'position', 'isOpen']);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - returns module name.\n * @private\n *\n */\n Sidebar.prototype.getModuleName = function () {\n return 'sidebar';\n };\n /**\n * Shows or hides the Sidebar based on the current state.\n *\n * @returns {void}\n */\n Sidebar.prototype.toggle = function () {\n if (this.element.classList.contains(OPEN)) {\n this.hide();\n }\n else {\n this.show();\n }\n };\n Sidebar.prototype.getState = function () {\n return this.element.classList.contains(OPEN) ? true : false;\n };\n Sidebar.prototype.setMediaQuery = function () {\n if (this.mediaQuery) {\n var media = false;\n if (typeof (this.mediaQuery) === 'string') {\n media = window.matchMedia(this.mediaQuery).matches;\n }\n else {\n media = (this.mediaQuery).matches;\n }\n if (media && this.windowWidth !== window.innerWidth) {\n this.show();\n }\n else if (this.getState() && this.windowWidth !== window.innerWidth) {\n this.hide();\n }\n }\n };\n Sidebar.prototype.resize = function () {\n if (!isNullOrUndefined(this.width) && this.width !== 'auto' && typeof this.width === 'string' && !this.width.includes('px')) {\n this.setType(this.type);\n }\n if (this.type === 'Auto') {\n if (Browser.isDevice) {\n addClass([this.element], OVER);\n }\n else {\n addClass([this.element], PUSH);\n }\n }\n this.setMediaQuery();\n if (Browser.isDevice) {\n this.windowWidth = window.innerWidth;\n }\n };\n Sidebar.prototype.documentclickHandler = function (e) {\n if (closest(e.target, '.' + CONTROL$1 + '' + '.' + ROOT$1)) {\n return;\n }\n this.hide(e);\n };\n Sidebar.prototype.enableGestureHandler = function (args) {\n if (!this.isOpen && this.position === 'Left' && args.swipeDirection === 'Right' &&\n (args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {\n this.show();\n }\n else if (this.isOpen && this.position === 'Left' && args.swipeDirection === 'Left') {\n this.hide(args.originalEvent);\n }\n else if (this.isOpen && this.position === 'Right' && args.swipeDirection === 'Right') {\n this.hide(args.originalEvent);\n }\n else if (!this.isOpen && this.position === 'Right' && args.swipeDirection === 'Left'\n && (window.innerWidth - args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {\n this.show();\n }\n };\n Sidebar.prototype.setEnableGestures = function () {\n if (this.enableGestures) {\n this.mainContentEle = new Touch(document.body, { swipe: this.enableGestureHandler.bind(this) });\n this.sidebarEle = new Touch(this.element, { swipe: this.enableGestureHandler.bind(this) });\n }\n else {\n if (this.mainContentEle && this.sidebarEle) {\n this.mainContentEle.destroy();\n this.sidebarEle.destroy();\n }\n }\n };\n Sidebar.prototype.wireEvents = function () {\n this.setEnableGestures();\n EventHandler.add(window, 'resize', this.resize, this);\n };\n Sidebar.prototype.unWireEvents = function () {\n EventHandler.remove(window, 'resize', this.resize);\n EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);\n if (this.mainContentEle) {\n this.mainContentEle.destroy();\n }\n if (this.sidebarEle) {\n this.sidebarEle.destroy();\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {SidebarModel} newProp - specifies newProp value.\n * @param {SidebarModel} oldProp - specifies oldProp value.\n * @returns {void}\n * @private\n *\n */\n Sidebar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var sibling = document.querySelector('.e-main-content') || this.targetEle;\n var isRendered = this.isServerRendered;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'isOpen':\n if (this.isOpen) {\n this.show();\n }\n else {\n this.hide();\n }\n break;\n case 'width':\n this.setWidth();\n if (!this.getState()) {\n this.setDock();\n }\n break;\n case 'animate':\n this.setAnimation();\n break;\n case 'type':\n this.checkType(false);\n removeClass([this.element], [VISIBILITY]);\n this.addClass();\n addClass([this.element], this.type === 'Auto' ? (Browser.isDevice ? ['e-over'] :\n ['e-push']) : ['e-' + this.type.toLowerCase()]);\n break;\n case 'position':\n this.element.style.transform = '';\n this.setDock();\n if (sibling) {\n sibling.style[this.position === 'Left' ? 'marginRight' : 'marginLeft'] = '0px';\n }\n if (this.position === 'Right') {\n removeClass([this.element], LEFT);\n addClass([this.element], RIGHT);\n }\n else {\n removeClass([this.element], RIGHT);\n addClass([this.element], LEFT);\n }\n this.setType(this.type);\n break;\n case 'showBackdrop':\n if (this.showBackdrop) {\n this.createBackDrop();\n }\n else {\n if (this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n }\n break;\n case 'target':\n if (typeof (this.target) === 'string') {\n this.setProperties({ target: document.querySelector(this.target) }, true);\n }\n if (isNullOrUndefined(this.target)) {\n removeClass([this.element], SIDEBARABSOLUTE);\n removeClass([oldProp.target], CONTEXT);\n setStyleAttribute(sibling, { 'margin-left': 0, 'margin-right': 0 });\n document.body.insertAdjacentElement('afterbegin', this.element);\n }\n this.isServerRendered = false;\n _super.prototype.refresh.call(this);\n this.isServerRendered = isRendered;\n break;\n case 'closeOnDocumentClick':\n this.setCloseOnDocumentClick();\n break;\n case 'enableDock':\n if (!this.getState()) {\n this.setDock();\n }\n break;\n case 'zIndex':\n this.setZindex();\n break;\n case 'mediaQuery':\n this.setMediaQuery();\n break;\n case 'enableGestures':\n this.setEnableGestures();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n }\n }\n };\n Sidebar.prototype.setType = function (type) {\n var elementWidth = this.element.getBoundingClientRect().width;\n this.setZindex();\n var sibling = document.querySelector('.e-main-content') || this.targetEle;\n if (sibling) {\n sibling.style.transform = 'translateX(' + 0 + 'px)';\n if (!Browser.isDevice && this.type !== 'Auto' && !(this.type === 'Over' && this.enableDock)) {\n sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = '0px';\n }\n }\n var margin = this.position === 'Left' ? elementWidth + 'px' : elementWidth + 'px';\n var eleWidth = this.position === 'Left' ? elementWidth : -(elementWidth);\n removeClass([this.element], [PUSH, OVER, SLIDE]);\n switch (type) {\n case 'Push':\n addClass([this.element], [PUSH]);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;\n }\n break;\n case 'Slide':\n addClass([this.element], [SLIDE]);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n sibling.style.transform = 'translateX(' + eleWidth + 'px)';\n }\n break;\n case 'Over':\n addClass([this.element], [OVER]);\n if (this.enableDock && (this.element.classList.contains(CLOSE) || this.isOpen)) {\n if (sibling) {\n sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = this.setDimension(this.dockSize);\n }\n }\n break;\n case 'Auto':\n addClass([this.element], [TRASITION]);\n if (Browser.isDevice) {\n if (sibling && (this.enableDock) && !this.getState()) {\n sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;\n addClass([this.element], PUSH);\n }\n else {\n addClass([this.element], OVER);\n }\n }\n else {\n addClass([this.element], PUSH);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;\n }\n }\n this.createBackDrop();\n }\n };\n /**\n * Removes the control from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @returns {void}\n *\n */\n Sidebar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.target) {\n removeClass([this.target], CONTEXT);\n }\n this.destroyBackDrop();\n if (this.element) {\n removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION, DISABLEANIMATION]);\n removeClass([this.element], SIDEBARABSOLUTE);\n this.element.style.width = '';\n this.element.style.zIndex = '';\n this.element.style.transform = '';\n if (!isNullOrUndefined(this.sidebarEleCopy.getAttribute('tabindex'))) {\n this.element.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.element.removeAttribute('tabindex');\n }\n }\n this.windowWidth = null;\n var sibling = document.querySelector('.e-main-content') || this.targetEle;\n if (!isNullOrUndefined(sibling)) {\n sibling.style.margin = '';\n sibling.style.transform = '';\n }\n this.unWireEvents();\n };\n __decorate$9([\n Property('auto')\n ], Sidebar.prototype, \"dockSize\", void 0);\n __decorate$9([\n Property(null)\n ], Sidebar.prototype, \"mediaQuery\", void 0);\n __decorate$9([\n Property(false)\n ], Sidebar.prototype, \"enableDock\", void 0);\n __decorate$9([\n Property('en-US')\n ], Sidebar.prototype, \"locale\", void 0);\n __decorate$9([\n Property(false)\n ], Sidebar.prototype, \"enablePersistence\", void 0);\n __decorate$9([\n Property(true)\n ], Sidebar.prototype, \"enableGestures\", void 0);\n __decorate$9([\n Property(false)\n ], Sidebar.prototype, \"isOpen\", void 0);\n __decorate$9([\n Property(false)\n ], Sidebar.prototype, \"enableRtl\", void 0);\n __decorate$9([\n Property(true)\n ], Sidebar.prototype, \"animate\", void 0);\n __decorate$9([\n Property('auto')\n ], Sidebar.prototype, \"height\", void 0);\n __decorate$9([\n Property(false)\n ], Sidebar.prototype, \"closeOnDocumentClick\", void 0);\n __decorate$9([\n Property('Left')\n ], Sidebar.prototype, \"position\", void 0);\n __decorate$9([\n Property(null)\n ], Sidebar.prototype, \"target\", void 0);\n __decorate$9([\n Property(false)\n ], Sidebar.prototype, \"showBackdrop\", void 0);\n __decorate$9([\n Property('Auto')\n ], Sidebar.prototype, \"type\", void 0);\n __decorate$9([\n Property('auto')\n ], Sidebar.prototype, \"width\", void 0);\n __decorate$9([\n Property(1000)\n ], Sidebar.prototype, \"zIndex\", void 0);\n __decorate$9([\n Event()\n ], Sidebar.prototype, \"created\", void 0);\n __decorate$9([\n Event()\n ], Sidebar.prototype, \"close\", void 0);\n __decorate$9([\n Event()\n ], Sidebar.prototype, \"open\", void 0);\n __decorate$9([\n Event()\n ], Sidebar.prototype, \"change\", void 0);\n __decorate$9([\n Event()\n ], Sidebar.prototype, \"destroyed\", void 0);\n Sidebar = __decorate$9([\n NotifyPropertyChanges\n ], Sidebar);\n return Sidebar;\n}(Component));\n\nvar __extends$a = (undefined && undefined.__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$a = (undefined && undefined.__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};\nvar ICONRIGHT = 'e-icon-right';\nvar ITEMTEXTCLASS = 'e-breadcrumb-text';\nvar ICONCLASS = 'e-breadcrumb-icon';\nvar MENUCLASS = 'e-breadcrumb-menu';\nvar ITEMCLASS = 'e-breadcrumb-item';\nvar POPUPCLASS = 'e-breadcrumb-popup';\nvar WRAPMODECLASS = 'e-breadcrumb-wrap-mode';\nvar SCROLLMODECLASS = 'e-breadcrumb-scroll-mode';\nvar TABINDEX = 'tabindex';\nvar DISABLEDCLASS = 'e-disabled';\nvar ARIADISABLED = 'aria-disabled';\nvar DOT = '.';\n/**\n * Defines the Breadcrumb overflow modes.\n */\nvar BreadcrumbOverflowMode;\n(function (BreadcrumbOverflowMode) {\n /**\n * Hidden mode shows the maximum number of items possible in the container space and hides the remaining items.\n * Clicking on a previous item will make the hidden item visible.\n */\n BreadcrumbOverflowMode[\"Hidden\"] = \"Hidden\";\n /**\n * Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon.\n * When the collapsed icon is clicked, all items become visible and navigable.\n */\n BreadcrumbOverflowMode[\"Collapsed\"] = \"Collapsed\";\n /**\n * Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.\n */\n BreadcrumbOverflowMode[\"Menu\"] = \"Menu\";\n /**\n * Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.\n */\n BreadcrumbOverflowMode[\"Wrap\"] = \"Wrap\";\n /**\n * Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.\n */\n BreadcrumbOverflowMode[\"Scroll\"] = \"Scroll\";\n /**\n * None mode shows all the items in a single line.\n */\n BreadcrumbOverflowMode[\"None\"] = \"None\";\n})(BreadcrumbOverflowMode || (BreadcrumbOverflowMode = {}));\nvar BreadcrumbItem = /** @__PURE__ @class */ (function (_super) {\n __extends$a(BreadcrumbItem, _super);\n function BreadcrumbItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$a([\n Property('')\n ], BreadcrumbItem.prototype, \"text\", void 0);\n __decorate$a([\n Property('')\n ], BreadcrumbItem.prototype, \"id\", void 0);\n __decorate$a([\n Property('')\n ], BreadcrumbItem.prototype, \"url\", void 0);\n __decorate$a([\n Property(null)\n ], BreadcrumbItem.prototype, \"iconCss\", void 0);\n __decorate$a([\n Property(false)\n ], BreadcrumbItem.prototype, \"disabled\", void 0);\n return BreadcrumbItem;\n}(ChildProperty));\n/**\n * Breadcrumb is a graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites.\n * The aim is to make the user aware of their current position in a hierarchy of website links.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Breadcrumb = /** @__PURE__ @class */ (function (_super) {\n __extends$a(Breadcrumb, _super);\n /**\n * Constructor for creating the widget.\n *\n * @private\n * @param {BreadcrumbModel} options - Specifies the Breadcrumb model.\n * @param {string | HTMLElement} element - Specifies the element.\n */\n function Breadcrumb(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isPopupCreated = false;\n return _this;\n }\n /**\n * @private\n * @returns {void}\n */\n Breadcrumb.prototype.preRender = function () {\n // pre render code\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n Breadcrumb.prototype.render = function () {\n this.initialize();\n this.renderItems(this.items);\n this.wireEvents();\n };\n Breadcrumb.prototype.initialize = function () {\n this._maxItems = this.maxItems;\n if (isNullOrUndefined(this.element.getAttribute('aria-label'))) {\n this.element.setAttribute('aria-label', 'breadcrumb');\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n if (this.disabled) {\n this.element.classList.add(DISABLEDCLASS);\n this.element.setAttribute(ARIADISABLED, 'true');\n }\n if (this.overflowMode === 'Wrap') {\n this.element.classList.add(WRAPMODECLASS);\n }\n else if (this.overflowMode === 'Scroll') {\n this.element.classList.add(SCROLLMODECLASS);\n }\n this.initItems();\n this.initPvtProps();\n };\n Breadcrumb.prototype.initPvtProps = function () {\n if (this.overflowMode === 'Hidden' && this._maxItems > 0) {\n this.endIndex = this.getEndIndex();\n this.startIndex = this.endIndex + 1 - (this._maxItems - 1);\n }\n if (this.overflowMode === 'Menu') {\n if (this._maxItems >= 0) {\n this.startIndex = this._maxItems > 1 ? 1 : 0;\n this.endIndex = this.getEndIndex();\n this.popupUl = this.createElement('ul', { attrs: { TABINDEX: '0', 'role': 'menu' } });\n }\n else {\n this.startIndex = this.endIndex = null;\n }\n }\n };\n Breadcrumb.prototype.getEndIndex = function () {\n var _this = this;\n var endIndex;\n if (this.activeItem) {\n this.items.forEach(function (item, idx) {\n if (item.url === _this.activeItem || item.text === _this.activeItem) {\n endIndex = idx;\n }\n });\n }\n else {\n endIndex = this.items.length - 1;\n }\n return endIndex;\n };\n Breadcrumb.prototype.initItems = function () {\n if (!this.items.length) {\n var baseUri = void 0;\n var uri = void 0;\n var items = [];\n if (this.url) {\n var url = new URL(this.url, window.location.origin);\n baseUri = url.origin + '/';\n uri = url.href.split(baseUri)[1].split('/');\n }\n else {\n baseUri = window.location.origin + '/';\n uri = window.location.href.split(baseUri)[1].split('/');\n }\n items.push({ iconCss: 'e-icons e-home', url: baseUri });\n for (var i = 0; i < uri.length; i++) {\n if (uri[i]) {\n items.push({ text: uri[i], url: baseUri + uri[i] });\n baseUri += uri[i] + '/';\n }\n }\n this.setProperties({ items: items }, true);\n }\n };\n Breadcrumb.prototype.renderItems = function (items) {\n var _this = this;\n var item;\n var isSingleLevel;\n var isIconRight = this.element.classList.contains(ICONRIGHT);\n var itemsLength = items.length;\n if (itemsLength) {\n var isActiveItem = void 0;\n var isLastItem = void 0;\n var isLastItemInPopup_1;\n var j_1 = 0;\n var wrapDiv = void 0;\n var len = (itemsLength * 2) - 1;\n var isItemCancelled_1 = false;\n var ol = this.createElement('ol', { className: this.overflowMode === 'Wrap' ? 'e-breadcrumb-wrapped-ol' : '' });\n var firstOl = this.createElement('ol', { className: this.overflowMode === 'Wrap' ? 'e-breadcrumb-first-ol' : '' });\n var showIcon = this.hasField(items, 'iconCss');\n var isCollasped = (this.overflowMode === 'Collapsed' && this._maxItems > 0 && itemsLength > this._maxItems && !this.isExpanded);\n var isDefaultOverflowMode_1 = (this.overflowMode === 'Hidden' && this._maxItems > 0);\n if (this.overflowMode === 'Menu' && this.popupUl) {\n this.popupUl.innerHTML = '';\n }\n var listBaseOptions = {\n moduleName: this.getModuleName(),\n showIcon: showIcon,\n itemNavigable: true,\n itemCreated: function (args) {\n var isLastItem = args.curData.isLastItem;\n if (isLastItem && args.item.children.length && !_this.itemTemplate) {\n delete args.curData.isLastItem;\n if (!isLastItemInPopup_1 && !_this.enableActiveItemNavigation) {\n args.item.innerHTML = _this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;\n }\n }\n if (args.curData.iconCss && !args.curData.text && !_this.itemTemplate) {\n args.item.classList.add('e-icon-item');\n }\n if (isDefaultOverflowMode_1) {\n args.item.setAttribute('item-index', j_1.toString());\n }\n var eventArgs = {\n item: extend({}, args.curData.properties ?\n args.curData.properties : args.curData), element: args.item, cancel: false\n };\n _this.trigger('beforeItemRender', eventArgs);\n isItemCancelled_1 = eventArgs.cancel;\n var containsRightIcon = (isIconRight || eventArgs.element.classList.contains(ICONRIGHT));\n if (containsRightIcon && args.curData.iconCss && !_this.itemTemplate) {\n args.item.querySelector('.e-anchor-wrap').appendChild(args.item.querySelector(DOT + ICONCLASS));\n }\n if (eventArgs.item.disabled) {\n args.item.setAttribute(ARIADISABLED, 'true');\n args.item.classList.add(DISABLEDCLASS);\n }\n if (eventArgs.item.id) {\n args.item.setAttribute('id', eventArgs.item.id);\n }\n if ((eventArgs.item.disabled || _this.disabled) && args.item.children.length && !_this.itemTemplate) {\n args.item.children[0].setAttribute(TABINDEX, '-1');\n }\n if (args.curData.isEmptyUrl) {\n args.item.children[0].removeAttribute('href');\n if ((!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) && !(eventArgs.item.disabled\n || _this.disabled)) {\n args.item.children[0].setAttribute(TABINDEX, '0');\n EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);\n }\n }\n args.item.removeAttribute('role');\n if (isLastItem) {\n args.item.setAttribute('data-active-item', '');\n }\n if (!_this.itemTemplate) {\n _this.beforeItemRenderChanges(args.curData, eventArgs.item, args.item, containsRightIcon);\n }\n }\n };\n for (var i = 0; i < len; (i % 2 && j_1++), i++) {\n isActiveItem = (this.activeItem && (this.activeItem === items[j_1].url ||\n this.activeItem === items[j_1].text));\n if (isCollasped && i > 1 && i < len - 2) {\n continue;\n }\n else if (isDefaultOverflowMode_1 && ((j_1 < this.startIndex || j_1 > this.endIndex)\n && (i % 2 ? j_1 !== this.startIndex - 1 : true)) && j_1 !== 0) {\n continue;\n }\n if (i % 2) {\n // separator item\n wrapDiv = this.createElement('div', { className: 'e-breadcrumb-item-wrapper' });\n if ((this.separatorTemplate && this.separatorTemplate === '/') || isNullOrUndefined(this.separatorTemplate)) {\n listBaseOptions.template = initializeCSPTemplate(function () {\n return '/';\n });\n }\n else {\n listBaseOptions.template = this.separatorTemplate;\n }\n listBaseOptions.itemClass = 'e-breadcrumb-separator';\n isSingleLevel = false;\n item = [{ previousItem: items[j_1], nextItem: items[j_1 + 1] }];\n }\n else {\n // list item\n listBaseOptions.itemClass = '';\n if (this.itemTemplate) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listBaseOptions.template = this.itemTemplate;\n isSingleLevel = false;\n }\n else {\n isSingleLevel = true;\n }\n item = [extend({}, items[j_1].properties ?\n items[j_1].properties\n : items[j_1])];\n if (!item[0].url && !this.itemTemplate) {\n item = [extend({}, item[0], { isEmptyUrl: true, url: '#' })];\n }\n isLastItem = (isDefaultOverflowMode_1 || this.overflowMode === 'Menu') && (j_1 === this.endIndex);\n if (((i === len - 1 || isLastItem) && !this.itemTemplate) || isActiveItem) {\n item[0].isLastItem = true;\n }\n }\n var parent_1 = ol;\n var lastPopupItemIdx = this.startIndex + this.endIndex - this._maxItems;\n if (this.overflowMode === 'Menu' && ((j_1 >= this.startIndex && (j_1 <= lastPopupItemIdx && (i % 2 ? !(j_1 === lastPopupItemIdx) : true)) && this.endIndex >= this._maxItems && this._maxItems > 0) || this._maxItems === 0)) {\n if (i % 2) {\n continue;\n }\n else {\n parent_1 = this.popupUl;\n if (isLastItem) {\n isLastItemInPopup_1 = true;\n }\n }\n }\n else if (this.overflowMode === 'Wrap') {\n if (i === 0) {\n parent_1 = firstOl;\n }\n else {\n parent_1 = wrapDiv;\n }\n }\n var li = ListBase.createList(this.createElement, item, listBaseOptions, isSingleLevel, this).childNodes;\n if (!isItemCancelled_1) {\n append(li, parent_1);\n }\n else if (isDefaultOverflowMode_1 || isCollasped || this.overflowMode === 'Menu' || this.overflowMode === 'Wrap') {\n items.splice(j_1, 1);\n this.initPvtProps();\n return this.reRenderItems();\n }\n else if ((i === len - 1 || isLastItem)) {\n remove(parent_1.lastElementChild);\n }\n if (this.overflowMode === 'Wrap' && i !== 0 && i % 2 === 0) {\n ol.appendChild(wrapDiv);\n }\n if (isCollasped && i === 1) {\n var li_1 = this.createElement('li', { className: 'e-icons e-breadcrumb-collapsed', attrs: { TABINDEX: '0' } });\n EventHandler.add(li_1, 'keyup', this.expandHandler, this);\n ol.appendChild(li_1);\n }\n if (this.overflowMode === 'Menu' && this.startIndex === i && this.endIndex >= this._maxItems && this._maxItems >= 0) {\n var menu = this.getMenuElement();\n EventHandler.add(menu, 'keyup', this.keyDownHandler, this);\n ol.appendChild(menu);\n }\n if (isActiveItem || isLastItem) {\n break;\n }\n if (isItemCancelled_1) {\n i++;\n }\n }\n if (this.isReact) {\n this.renderReactTemplates();\n setTimeout(function () {\n _this.calculateMaxItems();\n }, 5);\n }\n if (this.overflowMode === 'Wrap') {\n this.element.appendChild(firstOl);\n }\n this.element.appendChild(ol);\n if (!this.isReact) {\n this.calculateMaxItems();\n }\n }\n };\n Breadcrumb.prototype.calculateMaxItems = function () {\n if (this.overflowMode === 'Hidden' || this.overflowMode === 'Collapsed' || this.overflowMode === 'Menu') {\n var maxItems = void 0;\n var width = this.element.offsetWidth;\n var liElems = [].slice.call(this.element.children[0].children).reverse();\n var liWidth = this.overflowMode === 'Menu' ? 0 : liElems[liElems.length - 1].offsetWidth + (liElems[liElems.length - 2] ? liElems[liElems.length - 2].offsetWidth : 0);\n if (this.overflowMode === 'Menu') {\n var menuEle = this.getMenuElement();\n this.element.appendChild(menuEle);\n liWidth += menuEle.offsetWidth;\n remove(menuEle);\n }\n for (var i = 0; i < liElems.length - 2; i++) {\n if (liWidth > width) {\n maxItems = Math.ceil((i - 1) / 2) + ((this.overflowMode === 'Menu' && i <= 2) ? 0 : 1);\n if (((this.maxItems > maxItems && !(this.maxItems > -1 && maxItems === -1)) ||\n this.maxItems === -1) && this._maxItems !== maxItems) {\n this._maxItems = maxItems;\n this.initPvtProps();\n return this.reRenderItems();\n }\n else {\n break;\n }\n }\n else {\n if (this.overflowMode === 'Menu' && i === 2) {\n liWidth += liElems[liElems.length - 1].offsetWidth + liElems[liElems.length - 2].offsetWidth;\n if (liWidth > width) {\n this._maxItems = 1;\n this.initPvtProps();\n return this.reRenderItems();\n }\n }\n if (!(this.overflowMode === 'Menu' && liElems[i].classList.contains(MENUCLASS))) {\n liWidth += liElems[i].offsetWidth;\n }\n }\n }\n }\n else if ((this.overflowMode === 'Wrap' || this.overflowMode === 'Scroll') && this._maxItems > 0) {\n var width = 0;\n var liElems = this.element.querySelectorAll(DOT + ITEMCLASS);\n if (liElems.length > this._maxItems + this._maxItems - 1) {\n for (var i = this.overflowMode === 'Wrap' ? 1 : 0; i < this._maxItems + this._maxItems - 1; i++) {\n width += liElems[i].offsetWidth;\n }\n width = width + 5 + (parseInt(getComputedStyle(this.element.children[0]).paddingLeft, 10) * 2);\n if (this.overflowMode === 'Wrap') {\n this.element.querySelector('.e-breadcrumb-wrapped-ol').style.width = width + 'px';\n }\n else {\n this.element.style.width = width + 'px';\n }\n }\n }\n };\n Breadcrumb.prototype.hasField = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][\"\" + field]) {\n return true;\n }\n }\n return false;\n };\n Breadcrumb.prototype.getMenuElement = function () {\n return this.createElement('li', { className: 'e-icons e-breadcrumb-menu', attrs: { TABINDEX: '0' } });\n };\n Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {\n var wrapElem = elem.querySelector('.e-anchor-wrap');\n if (wrapElem) {\n wrapElem.parentElement.setAttribute('aria-label', 'home');\n }\n if (currItem.text !== prevItem.text && wrapElem) {\n wrapElem.childNodes.forEach(function (child) {\n if (child.nodeType === Node.TEXT_NODE) {\n child.textContent = currItem.text;\n }\n });\n }\n if (currItem.iconCss !== prevItem.iconCss && wrapElem) { // wrapElem - for checking it is item not a separator\n var iconElem = elem.querySelector(DOT + ICONCLASS);\n if (iconElem) {\n if (currItem.iconCss) {\n removeClass([iconElem], prevItem.iconCss.split(' '));\n addClass([iconElem], currItem.iconCss.split(' '));\n }\n else {\n remove(iconElem);\n }\n }\n else if (currItem.iconCss) {\n var iconElem_1 = this.createElement('span', { className: ICONCLASS + ' ' + currItem.iconCss });\n if (isRightIcon) {\n append([iconElem_1], wrapElem);\n }\n else {\n wrapElem.insertBefore(iconElem_1, wrapElem.childNodes[0]);\n }\n }\n }\n if (currItem.url !== prevItem.url && this.enableNavigation) {\n var anchor = elem.querySelector('a.' + ITEMTEXTCLASS);\n if (anchor) {\n if (currItem.url) {\n anchor.setAttribute('href', currItem.url);\n }\n else {\n anchor.removeAttribute('href');\n }\n }\n }\n };\n Breadcrumb.prototype.reRenderItems = function () {\n if (this.overflowMode === 'Menu' && this.popupObj && this.popupObj.element.classList.contains('e-popup-open') && this.popupObj.element.querySelector('.e-edit-template')) {\n this.popupObj.hide();\n this.popupObj.destroy();\n this.isPopupCreated = false;\n detach(this.popupObj.element);\n }\n this.element.innerHTML = '';\n this.renderItems(this.items);\n };\n Breadcrumb.prototype.clickHandler = function (e) {\n var li = closest(e.target, DOT + ITEMCLASS + ':not(.e-breadcrumb-separator)');\n if (!this.enableNavigation) {\n e.preventDefault();\n }\n if (li && (closest(e.target, DOT + ITEMTEXTCLASS) || this.itemTemplate)) {\n var idx = void 0;\n if (this.overflowMode === 'Wrap') {\n idx = [].slice.call(this.element.querySelectorAll(DOT + ITEMCLASS)).indexOf(li);\n }\n else {\n idx = [].slice.call(li.parentElement.children).indexOf(li);\n }\n if (this.overflowMode === 'Menu') {\n if (closest(e.target, DOT + POPUPCLASS)) {\n idx += this.startIndex;\n this.endIndex = idx;\n if (e.type === 'keydown') {\n this.documentClickHandler(e);\n }\n }\n else if (this.element.querySelector(DOT + MENUCLASS)) {\n if (idx > [].slice.call(this.element.children[0].children).indexOf(this.element.querySelector(DOT + MENUCLASS))) {\n idx += (this.popupUl.childElementCount * 2) - 2;\n idx = Math.floor(idx / 2);\n this.endIndex = idx;\n }\n else {\n this.startIndex = this.endIndex = idx;\n }\n }\n else {\n idx = Math.floor(idx / 2);\n this.startIndex = this.endIndex = idx;\n }\n }\n else {\n idx = Math.floor(idx / 2);\n }\n if (this.overflowMode === 'Hidden' && this._maxItems > 0 && this.endIndex !== 0) {\n idx = parseInt(li.getAttribute('item-index'), 10);\n if (this.startIndex > 1) {\n this.startIndex -= (this.endIndex - idx);\n }\n this.endIndex = idx;\n }\n var itemClickArgs = { element: li,\n item: this.items[idx], event: e, cancel: false };\n this.trigger('itemClick', itemClickArgs);\n if (itemClickArgs.cancel) {\n return;\n }\n if (this.items[idx]) {\n this.activeItem = this.items[idx].url || this.items[idx].text;\n }\n this.dataBind();\n }\n if (e.target.classList.contains('e-breadcrumb-collapsed')) {\n this.isExpanded = true;\n this.reRenderItems();\n }\n if (e.target.classList.contains(MENUCLASS) && !this.isPopupCreated) {\n this.renderPopup();\n }\n };\n Breadcrumb.prototype.renderPopup = function () {\n var _this = this;\n var wrapper = this.createElement('div', { className: POPUPCLASS + ' ' + this.cssClass + (this.enableRtl ? ' e-rtl' : '') });\n document.body.appendChild(wrapper);\n this.isPopupCreated = true;\n this.popupObj = new Popup(wrapper, {\n content: this.popupUl,\n relateTo: this.element.querySelector(DOT + MENUCLASS),\n enableRtl: this.enableRtl,\n position: { X: 'left', Y: 'bottom' },\n collision: { X: 'fit', Y: 'flip' },\n open: function () {\n if (_this.popupUl) {\n _this.popupUl.focus();\n }\n }\n });\n this.popupWireEvents();\n this.popupObj.show();\n };\n Breadcrumb.prototype.documentClickHandler = function (e) {\n if (this.overflowMode === 'Menu' && this.popupObj && this.popupObj.element.classList.contains('e-popup-open') && !closest(e.target, DOT + MENUCLASS) && !closest(e.target, DOT + 'e-edit-template')) {\n this.popupObj.hide();\n this.popupObj.destroy();\n this.isPopupCreated = false;\n detach(this.popupObj.element);\n }\n };\n Breadcrumb.prototype.resize = function () {\n this._maxItems = this.maxItems;\n this.initPvtProps();\n this.reRenderItems();\n };\n Breadcrumb.prototype.expandHandler = function (e) {\n if (e.key === 'Enter') {\n this.isExpanded = true;\n this.reRenderItems();\n }\n };\n Breadcrumb.prototype.keyDownHandler = function (e) {\n if (e.key === 'Enter') {\n this.clickHandler(e);\n }\n };\n Breadcrumb.prototype.popupKeyDownHandler = function (e) {\n if (e.key === 'Escape') {\n this.documentClickHandler(e);\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @private\n * @param {BreadcrumbModel} newProp - Specifies the new properties.\n * @param {BreadcrumbModel} oldProp - Specifies the old properties.\n * @returns {void}\n */\n Breadcrumb.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 'items':\n case 'enableActiveItemNavigation':\n this.reRenderItems();\n break;\n case 'activeItem':\n this._maxItems = this.maxItems;\n this.initPvtProps();\n this.reRenderItems();\n break;\n case 'overflowMode':\n case 'maxItems':\n this._maxItems = this.maxItems;\n this.initPvtProps();\n this.reRenderItems();\n if (oldProp.overflowMode === 'Wrap') {\n this.element.classList.remove(WRAPMODECLASS);\n }\n else if (newProp.overflowMode === 'Wrap') {\n this.element.classList.add(WRAPMODECLASS);\n }\n if (oldProp.overflowMode === 'Scroll') {\n this.element.classList.remove(SCROLLMODECLASS);\n }\n else if (newProp.overflowMode === 'Scroll') {\n this.element.classList.add(SCROLLMODECLASS);\n }\n break;\n case 'url':\n this.initItems();\n this.reRenderItems();\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 if ((oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) && !(newProp.cssClass &&\n newProp.cssClass.indexOf(ICONRIGHT) > -1) || !(oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) &&\n (newProp.cssClass && newProp.cssClass.indexOf(ICONRIGHT) > -1)) {\n this.reRenderItems();\n }\n break;\n case 'enableRtl':\n this.element.classList.toggle('e-rtl');\n break;\n case 'disabled':\n this.element.classList.toggle(DISABLEDCLASS);\n this.element.setAttribute(ARIADISABLED, newProp.disabled + '');\n break;\n }\n }\n };\n Breadcrumb.prototype.wireEvents = function () {\n this.delegateClickHanlder = this.documentClickHandler.bind(this);\n EventHandler.add(document, 'click', this.delegateClickHanlder, this);\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resize.bind(this));\n };\n Breadcrumb.prototype.popupWireEvents = function () {\n EventHandler.add(this.popupObj.element, 'click', this.clickHandler, this);\n EventHandler.add(this.popupObj.element, 'keydown', this.popupKeyDownHandler, this);\n };\n Breadcrumb.prototype.unWireEvents = function () {\n EventHandler.remove(document, 'click', this.delegateClickHanlder);\n EventHandler.remove(this.element, 'click', this.clickHandler);\n window.removeEventListener('resize', this.resize.bind(this));\n if (this.popupObj) {\n EventHandler.remove(this.popupObj.element, 'click', this.clickHandler);\n EventHandler.remove(this.popupObj.element, 'keydown', this.popupKeyDownHandler);\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n Breadcrumb.prototype.getPersistData = function () {\n return this.addOnPersist(['activeItem']);\n };\n /**\n * Get module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n Breadcrumb.prototype.getModuleName = function () {\n return 'breadcrumb';\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n Breadcrumb.prototype.destroy = function () {\n var _this = this;\n if (this.popupObj && this.popupObj.element.classList.contains('e-popup-open')) {\n this.popupObj.destroy();\n this.isPopupCreated = false;\n detach(this.popupObj.element);\n }\n var classes = [];\n var attributes = ['aria-label'];\n if (this.cssClass) {\n classes.concat(this.cssClass.split(' '));\n }\n if (this.enableRtl) {\n classes.push('e-rtl');\n }\n if (this.disabled) {\n classes.push(DISABLEDCLASS);\n attributes.push(ARIADISABLED);\n }\n if (this.overflowMode === 'Wrap') {\n classes.push(WRAPMODECLASS);\n }\n else if (this.overflowMode === 'Scroll') {\n classes.push(SCROLLMODECLASS);\n }\n this.unWireEvents();\n this.element.innerHTML = '';\n removeClass([this.element], classes);\n attributes.forEach(function (attribute) {\n _this.element.removeAttribute(attribute);\n });\n _super.prototype.destroy.call(this);\n };\n __decorate$a([\n Property('')\n ], Breadcrumb.prototype, \"url\", void 0);\n __decorate$a([\n Collection([], BreadcrumbItem)\n ], Breadcrumb.prototype, \"items\", void 0);\n __decorate$a([\n Property('')\n ], Breadcrumb.prototype, \"activeItem\", void 0);\n __decorate$a([\n Property(-1)\n ], Breadcrumb.prototype, \"maxItems\", void 0);\n __decorate$a([\n Property('Menu')\n ], Breadcrumb.prototype, \"overflowMode\", void 0);\n __decorate$a([\n Property('')\n ], Breadcrumb.prototype, \"cssClass\", void 0);\n __decorate$a([\n Property(null)\n ], Breadcrumb.prototype, \"itemTemplate\", void 0);\n __decorate$a([\n Property('/')\n ], Breadcrumb.prototype, \"separatorTemplate\", void 0);\n __decorate$a([\n Property(true)\n ], Breadcrumb.prototype, \"enableNavigation\", void 0);\n __decorate$a([\n Property(false)\n ], Breadcrumb.prototype, \"enableActiveItemNavigation\", void 0);\n __decorate$a([\n Property(false)\n ], Breadcrumb.prototype, \"disabled\", void 0);\n __decorate$a([\n Property('')\n ], Breadcrumb.prototype, \"locale\", void 0);\n __decorate$a([\n Event()\n ], Breadcrumb.prototype, \"beforeItemRender\", void 0);\n __decorate$a([\n Event()\n ], Breadcrumb.prototype, \"itemClick\", void 0);\n __decorate$a([\n Event()\n ], Breadcrumb.prototype, \"created\", void 0);\n Breadcrumb = __decorate$a([\n NotifyPropertyChanges\n ], Breadcrumb);\n return Breadcrumb;\n}(Component));\n\nvar __extends$b = (undefined && undefined.__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$b = (undefined && undefined.__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// Constant variables\nvar CLS_CAROUSEL = 'e-carousel';\nvar CLS_ACTIVE$2 = 'e-active';\nvar CLS_RTL$5 = 'e-rtl';\nvar CLS_PARTIAL = 'e-partial';\nvar CLS_SWIPE = 'e-swipe';\nvar CLS_SLIDE_CONTAINER = 'e-carousel-slide-container';\nvar CLS_ITEMS$2 = 'e-carousel-items';\nvar CLS_CLONED = 'e-cloned';\nvar CLS_ITEM$3 = 'e-carousel-item';\nvar CLS_PREVIOUS = 'e-previous';\nvar CLS_NEXT = 'e-next';\nvar CLS_PREV_ICON = 'e-previous-icon';\nvar CLS_NEXT_ICON = 'e-next-icon';\nvar CLS_NAVIGATORS = 'e-carousel-navigators';\nvar CLS_INDICATORS = 'e-carousel-indicators';\nvar CLS_INDICATOR_BARS = 'e-indicator-bars';\nvar CLS_INDICATOR_BAR = 'e-indicator-bar';\nvar CLS_INDICATOR$1 = 'e-indicator';\nvar CLS_ICON$1 = 'e-icons';\nvar CLS_PLAY_PAUSE = 'e-play-pause';\nvar CLS_PLAY_ICON = 'e-play-icon';\nvar CLS_PAUSE_ICON = 'e-pause-icon';\nvar CLS_PREV_BUTTON = 'e-previous-button';\nvar CLS_NEXT_BUTTON = 'e-next-button';\nvar CLS_PLAY_BUTTON = 'e-play-button';\nvar CLS_FLAT = 'e-flat';\nvar CLS_ROUND = 'e-round';\nvar CLS_HOVER_ARROWS = 'e-hover-arrows';\nvar CLS_HOVER = 'e-carousel-hover';\nvar CLS_TEMPLATE$2 = 'e-template';\nvar CLS_SLIDE_ANIMATION = 'e-carousel-slide-animation';\nvar CLS_FADE_ANIMATION = 'e-carousel-fade-animation';\nvar CLS_CUSTOM_ANIMATION = 'e-carousel-custom-animation';\nvar CLS_ANIMATION_NONE = 'e-carousel-animation-none';\nvar CLS_PREV_SLIDE = 'e-prev';\nvar CLS_NEXT_SLIDE = 'e-next';\nvar CLS_TRANSITION_START = 'e-transition-start';\nvar CLS_TRANSITION_END = 'e-transition-end';\n/**\n * Specifies the action (touch & mouse) which enables the slide swiping action in carousel.\n * * Touch - Enables or disables the swiping action in touch interaction.\n * * Mouse - Enables or disables the swiping action in mouse interaction.\n *\n * @aspNumberEnum\n */\nvar CarouselSwipeMode;\n(function (CarouselSwipeMode) {\n /** Enables or disables the swiping action in touch interaction. */\n CarouselSwipeMode[CarouselSwipeMode[\"Touch\"] = 1] = \"Touch\";\n /** Enables or disables the swiping action in mouse interaction. */\n CarouselSwipeMode[CarouselSwipeMode[\"Mouse\"] = 2] = \"Mouse\";\n})(CarouselSwipeMode || (CarouselSwipeMode = {}));\n/** Specifies the carousel individual item. */\nvar CarouselItem = /** @__PURE__ @class */ (function (_super) {\n __extends$b(CarouselItem, _super);\n function CarouselItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$b([\n Property()\n ], CarouselItem.prototype, \"cssClass\", void 0);\n __decorate$b([\n Property()\n ], CarouselItem.prototype, \"interval\", void 0);\n __decorate$b([\n Property()\n ], CarouselItem.prototype, \"template\", void 0);\n __decorate$b([\n Property()\n ], CarouselItem.prototype, \"htmlAttributes\", void 0);\n return CarouselItem;\n}(ChildProperty));\nvar Carousel = /** @__PURE__ @class */ (function (_super) {\n __extends$b(Carousel, _super);\n /**\n * Constructor for creating the Carousel widget\n *\n * @param {CarouselModel} options Accepts the carousel model properties to initiate the rendering\n * @param {string | HTMLElement} element Accepts the DOM element reference\n */\n function Carousel(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isSwipe = false;\n return _this;\n }\n Carousel.prototype.getModuleName = function () {\n return CLS_CAROUSEL.replace('e-', '');\n };\n Carousel.prototype.getPersistData = function () {\n return this.addOnPersist(['selectedIndex']);\n };\n Carousel.prototype.preRender = function () {\n this.keyConfigs = {\n home: 'home',\n end: 'end',\n space: 'space',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow'\n };\n var defaultLocale = {\n nextSlide: 'Next slide',\n of: 'of',\n pauseSlideTransition: 'Pause slide transition',\n playSlideTransition: 'Play slide transition',\n previousSlide: 'Previous slide',\n slide: 'Slide',\n slideShow: 'Slide show'\n };\n this.localeObj = new L10n(this.getModuleName(), defaultLocale, this.locale);\n };\n Carousel.prototype.render = function () {\n this.initialize();\n this.renderSlides();\n this.renderNavigators();\n this.renderPlayButton();\n this.renderIndicators();\n this.applyAnimation();\n this.wireEvents();\n };\n Carousel.prototype.onPropertyChanged = function (newProp, oldProp) {\n var target;\n var rtlElement;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'animationEffect':\n this.applyAnimation();\n break;\n case 'cssClass':\n classList(this.element, [newProp.cssClass], [oldProp.cssClass]);\n break;\n case 'selectedIndex':\n this.setActiveSlide(this.selectedIndex, oldProp.selectedIndex > this.selectedIndex ? 'Previous' : 'Next');\n this.autoSlide();\n break;\n case 'htmlAttributes':\n if (!isNullOrUndefined(this.htmlAttributes)) {\n this.setHtmlAttributes(this.htmlAttributes, this.element);\n }\n break;\n case 'enableTouchSwipe':\n if (!this.enableTouchSwipe && this.touchModule) {\n this.touchModule.destroy();\n }\n if (this.element.querySelector(\".\" + CLS_ITEMS$2)) {\n this.renderTouchActions();\n }\n break;\n case 'loop':\n if (this.loop && isNullOrUndefined(this.autoSlideInterval)) {\n this.applySlideInterval();\n }\n this.handleNavigatorsActions(this.selectedIndex);\n if (this.partialVisible || !(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {\n this.reRenderSlides();\n }\n break;\n case 'enableRtl':\n rtlElement = [].slice.call(this.element.querySelectorAll(\".\" + CLS_PREV_BUTTON + \",\\n .\" + CLS_NEXT_BUTTON + \", .\" + CLS_PLAY_BUTTON));\n rtlElement.push(this.element);\n if (this.enableRtl) {\n addClass(rtlElement, CLS_RTL$5);\n }\n else {\n removeClass(rtlElement, CLS_RTL$5);\n }\n if (this.partialVisible || !(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {\n var cloneCount = this.loop ? this.getNumOfItems() : 0;\n var slideWidth = this.itemsContainer.firstElementChild.clientWidth;\n this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);\n }\n break;\n case 'buttonsVisibility':\n target = this.element.querySelector(\".\" + CLS_NAVIGATORS);\n if (target) {\n switch (this.buttonsVisibility) {\n case 'Hidden':\n this.resetTemplates(['previousButtonTemplate', 'nextButtonTemplate']);\n remove(target);\n break;\n case 'VisibleOnHover':\n addClass([].slice.call(target.childNodes), CLS_HOVER_ARROWS);\n break;\n case 'Visible':\n removeClass([].slice.call(target.childNodes), CLS_HOVER_ARROWS);\n break;\n }\n }\n else {\n this.renderNavigators();\n this.renderPlayButton();\n }\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(this.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(this.height) });\n break;\n case 'autoPlay':\n if (this.showPlayButton && isNullOrUndefined(this.playButtonTemplate)) {\n this.playButtonClickHandler(null, true);\n }\n this.autoSlide();\n break;\n case 'interval':\n this.autoSlide();\n break;\n case 'showIndicators':\n case 'indicatorsType':\n target = this.element.querySelector(\".\" + CLS_INDICATORS);\n if (target) {\n this.resetTemplates(['indicatorsTemplate']);\n remove(target);\n }\n this.renderIndicators();\n break;\n case 'showPlayButton':\n target = this.element.querySelector(\".\" + CLS_PLAY_PAUSE);\n if (!this.showPlayButton && target) {\n remove(target);\n this.resetTemplates(['playButtonTemplate']);\n }\n this.renderPlayButton();\n break;\n case 'items':\n case 'dataSource': {\n var selectedData = prop === 'dataSource' ? this.dataSource : this.items;\n if (!isNullOrUndefined(selectedData) && selectedData.length > 0 && this.selectedIndex >= selectedData.length) {\n this.setActiveSlide(selectedData.length - 1, 'Previous');\n this.autoSlide();\n }\n this.reRenderSlides();\n this.reRenderIndicators();\n break;\n }\n case 'partialVisible':\n if (this.partialVisible) {\n addClass([this.element], CLS_PARTIAL);\n }\n else {\n removeClass([this.element], CLS_PARTIAL);\n }\n this.reRenderSlides();\n break;\n case 'swipeMode':\n EventHandler.remove(this.element, 'mousedown touchstart', this.swipeStart);\n EventHandler.remove(this.element, 'mousemove touchmove', this.swiping);\n EventHandler.remove(this.element, 'mouseup touchend', this.swipStop);\n this.swipeModehandlers();\n this.reRenderSlides();\n break;\n }\n }\n };\n Carousel.prototype.reRenderSlides = function () {\n var target = this.element.querySelector(\".\" + CLS_ITEMS$2);\n if (target) {\n this.resetTemplates(['itemTemplate']);\n remove(target);\n }\n this.renderSlides();\n };\n Carousel.prototype.reRenderIndicators = function () {\n var target = this.element.querySelector(\".\" + CLS_INDICATORS);\n if (target) {\n this.resetTemplates(['indicatorsTemplate']);\n remove(target);\n }\n this.renderIndicators();\n };\n Carousel.prototype.initialize = function () {\n var carouselClasses = [];\n carouselClasses.push(CLS_CAROUSEL);\n if (this.cssClass) {\n carouselClasses.push(this.cssClass);\n }\n if (this.enableRtl) {\n carouselClasses.push(CLS_RTL$5);\n }\n if (this.partialVisible) {\n carouselClasses.push(CLS_PARTIAL);\n }\n if (!(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {\n carouselClasses.push(CLS_SWIPE);\n }\n addClass([this.element], carouselClasses);\n setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });\n attributes(this.element, { 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });\n if (!isNullOrUndefined(this.htmlAttributes)) {\n this.setHtmlAttributes(this.htmlAttributes, this.element);\n }\n };\n Carousel.prototype.renderSlides = function () {\n var _this = this;\n var slideContainer = this.element.querySelector('.' + CLS_SLIDE_CONTAINER);\n if (!slideContainer) {\n slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER, attrs: { 'tabindex': '0', 'role': 'tabpanel' } });\n this.element.appendChild(slideContainer);\n }\n this.itemsContainer = this.createElement('div', { className: CLS_ITEMS$2, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });\n slideContainer.appendChild(this.itemsContainer);\n var numOfItems = this.getNumOfItems();\n if (numOfItems > 0 && this.loop) {\n if (this.items.length > 0) {\n this.items.slice(-numOfItems).forEach(function (item, index) {\n _this.renderSlide(item, item.template, index, _this.itemsContainer, true);\n });\n }\n else if (!isNullOrUndefined(this.dataSource) && this.dataSource.length > 0) {\n this.dataSource.slice(-numOfItems).forEach(function (item, index) {\n _this.renderSlide(item, _this.itemTemplate, index, _this.itemsContainer, true);\n });\n }\n }\n if (this.items.length > 0) {\n this.slideItems = this.items;\n this.items.forEach(function (item, index) {\n _this.renderSlide(item, item.template, index, _this.itemsContainer);\n });\n }\n else if (!isNullOrUndefined(this.dataSource) && this.dataSource.length > 0) {\n this.slideItems = this.dataSource;\n this.dataSource.forEach(function (item, index) {\n _this.renderSlide(item, _this.itemTemplate, index, _this.itemsContainer);\n });\n }\n if (numOfItems > 0 && this.loop) {\n if (this.items.length > 0) {\n this.items.slice(0, numOfItems).forEach(function (item, index) {\n _this.renderSlide(item, item.template, index, _this.itemsContainer, true);\n });\n }\n else if (!isNullOrUndefined(this.dataSource) && this.dataSource.length > 0) {\n this.dataSource.slice(0, numOfItems).forEach(function (item, index) {\n _this.renderSlide(item, _this.itemTemplate, index, _this.itemsContainer, true);\n });\n }\n }\n this.renderTemplates();\n this.itemsContainer.style.setProperty('--carousel-items-count', \"\" + this.itemsContainer.children.length);\n var slideWidth = isNullOrUndefined(this.itemsContainer.firstElementChild) ? 0 :\n this.itemsContainer.firstElementChild.clientWidth;\n this.itemsContainer.style.transitionProperty = 'none';\n var cloneCount = this.loop ? numOfItems : 0;\n this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);\n this.autoSlide();\n this.renderTouchActions();\n this.renderKeyboardActions();\n };\n Carousel.prototype.getTranslateX = function (slideWidth, count) {\n if (count === void 0) { count = 1; }\n return this.enableRtl ? \"translateX(\" + (slideWidth) * (count) + \"px)\" :\n \"translateX(\" + -(slideWidth) * (count) + \"px)\";\n };\n Carousel.prototype.renderSlide = function (item, itemTemplate, index, container, isClone) {\n if (isClone === void 0) { isClone = false; }\n var itemEle = this.createElement('div', {\n id: getUniqueID('carousel_item'),\n className: CLS_ITEM$3 + \" \" + (item.cssClass ? item.cssClass : '') + \" \" + (this.selectedIndex === index && !isClone ? CLS_ACTIVE$2 : ''),\n attrs: {\n 'aria-hidden': this.selectedIndex === index && !isClone ? 'false' : 'true', 'data-index': index.toString(),\n 'role': 'group', 'aria-roledescription': 'slide'\n }\n });\n if (isClone) {\n itemEle.classList.add(CLS_CLONED);\n }\n if (!isNullOrUndefined(item.htmlAttributes)) {\n this.setHtmlAttributes(item.htmlAttributes, itemEle);\n }\n var templateId = this.element.id + '_template';\n var template = this.templateParser(itemTemplate)(item, this, 'itemTemplate', templateId, false);\n append(template, itemEle);\n container.appendChild(itemEle);\n };\n Carousel.prototype.renderNavigators = function () {\n if (this.buttonsVisibility === 'Hidden') {\n return;\n }\n var navigators = this.createElement('div', { className: CLS_NAVIGATORS });\n var itemsContainer = this.element.querySelector(\".\" + CLS_SLIDE_CONTAINER);\n itemsContainer.insertAdjacentElement('afterend', navigators);\n if (!isNullOrUndefined(this.slideItems) && this.slideItems.length > 1) {\n this.renderNavigatorButton('Previous');\n this.renderNavigatorButton('Next');\n }\n this.renderTemplates();\n };\n Carousel.prototype.renderNavigatorButton = function (direction) {\n var buttonContainer = this.createElement('div', {\n className: (direction === 'Previous' ? CLS_PREVIOUS : CLS_NEXT) + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : '')\n });\n if (direction === 'Previous' && this.previousButtonTemplate) {\n addClass([buttonContainer], CLS_TEMPLATE$2);\n var templateId = this.element.id + '_previousButtonTemplate';\n var template = this.templateParser(this.previousButtonTemplate)({ type: 'Previous' }, this, 'previousButtonTemplate', templateId, false);\n append(template, buttonContainer);\n }\n else if (direction === 'Next' && this.nextButtonTemplate) {\n addClass([buttonContainer], CLS_TEMPLATE$2);\n var templateId = this.element.id + '_nextButtonTemplate';\n var template = this.templateParser(this.nextButtonTemplate)({ type: 'Next' }, this, 'nextButtonTemplate', templateId, false);\n append(template, buttonContainer);\n }\n else {\n var button = this.createElement('button', {\n attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide'), 'type': 'button' }\n });\n var buttonObj = new Button({\n cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + (direction === 'Previous' ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON),\n iconCss: CLS_ICON$1 + ' ' + (direction === 'Previous' ? CLS_PREV_ICON : CLS_NEXT_ICON),\n enableRtl: this.enableRtl,\n disabled: !this.loop && this.selectedIndex === (direction === 'Previous' ? 0 : this.slideItems.length - 1)\n });\n buttonObj.appendTo(button);\n buttonContainer.appendChild(button);\n }\n this.element.querySelector('.' + CLS_NAVIGATORS).appendChild(buttonContainer);\n EventHandler.add(buttonContainer, 'click', this.navigatorClickHandler, this);\n };\n Carousel.prototype.renderPlayButton = function () {\n if (isNullOrUndefined(this.slideItems) || this.buttonsVisibility === 'Hidden' || !this.showPlayButton || this.slideItems.length <= 1) {\n return;\n }\n var playPauseWrap = this.createElement('div', {\n className: CLS_PLAY_PAUSE + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : '')\n });\n if (this.playButtonTemplate) {\n addClass([playPauseWrap], CLS_TEMPLATE$2);\n var templateId = this.element.id + '_playButtonTemplate';\n var template = this.templateParser(this.playButtonTemplate)({}, this, 'playButtonTemplate', templateId, false);\n append(template, playPauseWrap);\n }\n else {\n var playButton = this.createElement('button', {\n attrs: { 'aria-label': this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'), 'type': 'button' }\n });\n var isLastSlide = this.selectedIndex === this.slideItems.length - 1 && !this.loop;\n var buttonObj = new Button({\n cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + CLS_PLAY_BUTTON,\n iconCss: CLS_ICON$1 + ' ' + (this.autoPlay && !isLastSlide ? CLS_PAUSE_ICON : CLS_PLAY_ICON),\n isToggle: true,\n enableRtl: this.enableRtl\n });\n if (isLastSlide) {\n this.setProperties({ autoPlay: false }, true);\n playButton.setAttribute('aria-label', this.localeObj.getConstant('playSlideTransition'));\n this.itemsContainer.setAttribute('aria-live', 'polite');\n }\n buttonObj.appendTo(playButton);\n playPauseWrap.appendChild(playButton);\n }\n var navigators = this.element.querySelector(\".\" + CLS_NAVIGATORS);\n navigators.insertBefore(playPauseWrap, navigators.lastElementChild);\n this.renderTemplates();\n EventHandler.add(playPauseWrap, 'click', this.playButtonClickHandler, this);\n };\n Carousel.prototype.renderIndicators = function () {\n var _this = this;\n if (!this.showIndicators || isNullOrUndefined(this.indicatorsType)) {\n return;\n }\n var indicatorClass = 'e-default';\n if (!this.indicatorsTemplate) {\n indicatorClass = \"e-\" + this.indicatorsType.toLowerCase();\n }\n var indicatorWrap = this.createElement('div', { className: CLS_INDICATORS + \" \" + indicatorClass });\n var indicatorBars = this.createElement('div', { className: CLS_INDICATOR_BARS });\n indicatorWrap.appendChild(indicatorBars);\n var progress;\n if (this.slideItems) {\n switch (this.indicatorsType) {\n case 'Fraction':\n if (this.indicatorsTemplate) {\n this.renderIndicatorTemplate(indicatorBars, this.selectedIndex + 1);\n }\n else {\n indicatorBars.innerText = this.selectedIndex + 1 + \" / \" + this.slideItems.length;\n }\n break;\n case 'Progress':\n if (this.indicatorsTemplate) {\n this.renderIndicatorTemplate(indicatorBars, this.selectedIndex + 1);\n }\n else {\n progress = this.createElement('div', { className: CLS_INDICATOR_BAR });\n progress.style.setProperty('--carousel-items-current', \"\" + (this.selectedIndex + 1));\n progress.style.setProperty('--carousel-items-count', \"\" + this.slideItems.length);\n indicatorBars.appendChild(progress);\n }\n break;\n case 'Default':\n case 'Dynamic':\n this.slideItems.forEach(function (item, index) {\n var indicatorBar = _this.createElement('div', {\n className: CLS_INDICATOR_BAR + ' ' + (_this.selectedIndex === index ? CLS_ACTIVE$2 : _this.selectedIndex - 1 === index ? CLS_PREV_SLIDE : _this.selectedIndex + 1 === index ? CLS_NEXT_SLIDE : ''),\n attrs: { 'data-index': index.toString(), 'aria-current': _this.selectedIndex === index ? 'true' : 'false' }\n });\n indicatorBar.style.setProperty('--carousel-items-current', \"\" + _this.selectedIndex);\n if (_this.indicatorsTemplate) {\n _this.renderIndicatorTemplate(indicatorBar, index);\n }\n else if (_this.indicatorsType === 'Default') {\n var indicator = _this.createElement('button', { className: CLS_INDICATOR$1, attrs: { 'type': 'button', 'aria-label': _this.localeObj.getConstant('slide') + ' ' + (index + 1) + ' ' + _this.localeObj.getConstant('of') + ' ' + _this.slideItems.length } });\n indicatorBar.appendChild(indicator);\n indicator.appendChild(_this.createElement('div', {}));\n var buttonObj = new Button({ cssClass: 'e-flat e-small' });\n buttonObj.appendTo(indicator);\n }\n indicatorBars.appendChild(indicatorBar);\n if (_this.indicatorsType === 'Default') {\n EventHandler.add(indicatorBar, 'click', _this.indicatorClickHandler, _this);\n }\n });\n break;\n }\n }\n this.element.appendChild(indicatorWrap);\n };\n Carousel.prototype.renderIndicatorTemplate = function (indicatorBar, index) {\n if (index === void 0) { index = 0; }\n addClass([indicatorBar], CLS_TEMPLATE$2);\n var templateId = this.element.id + '_indicatorsTemplate';\n var template = this.templateParser(this.indicatorsTemplate)({ index: index, selectedIndex: this.selectedIndex }, this, 'indicatorsTemplate', templateId, false);\n append(template, indicatorBar);\n };\n Carousel.prototype.renderKeyboardActions = function () {\n this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });\n };\n Carousel.prototype.renderTouchActions = function () {\n if (!this.enableTouchSwipe) {\n return;\n }\n this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });\n };\n Carousel.prototype.applyAnimation = function () {\n removeClass([this.element], [CLS_CUSTOM_ANIMATION, CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION, CLS_ANIMATION_NONE]);\n switch (this.animationEffect) {\n case 'Slide':\n addClass([this.element], CLS_SLIDE_ANIMATION);\n break;\n case 'Fade':\n addClass([this.element], CLS_FADE_ANIMATION);\n break;\n case 'None':\n addClass([this.element], CLS_ANIMATION_NONE);\n break;\n case 'Custom':\n addClass([this.element], CLS_CUSTOM_ANIMATION);\n break;\n }\n };\n Carousel.prototype.autoSlide = function () {\n if (isNullOrUndefined(this.slideItems) || this.slideItems.length <= 1) {\n return;\n }\n this.resetSlideInterval();\n this.applySlideInterval();\n };\n Carousel.prototype.autoSlideChange = function () {\n var activeSlide = this.element.querySelector(\".\" + CLS_ITEM$3 + \".\" + CLS_ACTIVE$2)\n || this.element.querySelector(\".\" + CLS_INDICATORS + \" .\" + CLS_ACTIVE$2);\n if (isNullOrUndefined(activeSlide)) {\n return;\n }\n var activeIndex = parseInt(activeSlide.dataset.index, 10);\n if (!this.loop && activeIndex === this.slideItems.length - 1) {\n this.resetSlideInterval();\n }\n else {\n var index = (activeIndex + 1) % this.slideItems.length;\n if (!this.element.classList.contains(CLS_HOVER)) {\n this.setActiveSlide(index, 'Next');\n }\n this.autoSlide();\n }\n };\n Carousel.prototype.applySlideInterval = function () {\n var _this = this;\n if (!this.autoPlay || this.element.classList.contains(CLS_HOVER)) {\n return;\n }\n var itemInterval = this.interval;\n if (this.items.length > 0 && !isNullOrUndefined(this.items[this.selectedIndex || 0].interval)) {\n itemInterval = this.items[this.selectedIndex || 0].interval;\n }\n this.autoSlideInterval = setInterval(function () { return _this.autoSlideChange(); }, itemInterval);\n };\n Carousel.prototype.resetSlideInterval = function () {\n clearInterval(this.autoSlideInterval);\n this.autoSlideInterval = null;\n };\n Carousel.prototype.getSlideIndex = function (direction) {\n var currentIndex = this.selectedIndex || 0;\n if (direction === 'Previous') {\n currentIndex--;\n if (currentIndex < 0) {\n currentIndex = this.slideItems.length - 1;\n }\n }\n else {\n currentIndex++;\n if (currentIndex === this.slideItems.length) {\n currentIndex = 0;\n }\n }\n return currentIndex;\n };\n Carousel.prototype.setActiveSlide = function (currentIndex, direction, isSwiped) {\n var _this = this;\n if (isSwiped === void 0) { isSwiped = false; }\n if (this.element.querySelectorAll(\".\" + CLS_ITEM$3 + \".\" + CLS_PREV_SLIDE + \",.\" + CLS_ITEM$3 + \".\" + CLS_NEXT_SLIDE).length > 0) {\n return;\n }\n currentIndex = isNullOrUndefined(currentIndex) ? 0 : currentIndex;\n var allSlides = [].slice.call(this.element.querySelectorAll(\".\" + CLS_ITEM$3 + \":not(.e-cloned)\"));\n var activeSlide = this.element.querySelector(\".\" + CLS_ITEM$3 + \".\" + CLS_ACTIVE$2);\n if (isNullOrUndefined(activeSlide) && this.showIndicators) {\n var activeIndicator = this.element.querySelector(\".\" + CLS_INDICATOR_BAR + \".\" + CLS_ACTIVE$2);\n var activeIndex_1 = parseInt(activeIndicator.dataset.index, 10);\n addClass([allSlides[parseInt(activeIndex_1.toString(), 10)]], CLS_ACTIVE$2);\n return;\n }\n else if (isNullOrUndefined(activeSlide)) {\n addClass([allSlides[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE$2);\n return;\n }\n var activeIndex = parseInt(activeSlide.dataset.index, 10);\n var currentSlide = allSlides[parseInt(currentIndex.toString(), 10)];\n var eventArgs = {\n currentIndex: activeIndex,\n nextIndex: currentIndex,\n currentSlide: activeSlide,\n nextSlide: currentSlide,\n slideDirection: direction,\n isSwiped: isSwiped,\n cancel: false\n };\n this.trigger('slideChanging', eventArgs, function (args) {\n if (args.cancel) {\n return;\n }\n _this.setProperties({ selectedIndex: currentIndex }, true);\n attributes(args.currentSlide, { 'aria-hidden': 'true' });\n attributes(args.nextSlide, { 'aria-hidden': 'false' });\n _this.refreshIndicators(activeIndex, currentIndex);\n _this.slideChangedEventArgs = {\n currentIndex: args.nextIndex,\n previousIndex: args.currentIndex,\n currentSlide: args.nextSlide,\n previousSlide: args.currentSlide,\n slideDirection: direction,\n isSwiped: isSwiped\n };\n var slideWidth = allSlides[parseInt(currentIndex.toString(), 10)].clientWidth;\n var numOfItems = _this.getNumOfItems();\n if (!_this.isSwipe) {\n _this.itemsContainer.style.transitionDuration = '0.6s';\n }\n _this.isSwipe = false;\n if ((_this.animationEffect === 'Fade')) {\n _this.itemsContainer.classList.add('e-fade-in-out');\n }\n else {\n _this.itemsContainer.style.transitionProperty = 'transform';\n }\n if (_this.loop) {\n if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {\n _this.itemsContainer.style.transform = _this.getTranslateX(slideWidth, allSlides.length + numOfItems);\n }\n else if (_this.slideChangedEventArgs.currentIndex === _this.slideItems.length - 1 && _this.slideChangedEventArgs.slideDirection === 'Previous') {\n _this.itemsContainer.style.transform = _this.partialVisible ? _this.getTranslateX(slideWidth) : 'translateX(0px)';\n }\n else {\n _this.itemsContainer.style.transform = _this.getTranslateX(slideWidth, currentIndex + numOfItems);\n }\n }\n else {\n _this.itemsContainer.style.transform = _this.getTranslateX(slideWidth, currentIndex);\n }\n if (_this.animationEffect === 'Slide') {\n if (direction === 'Previous') {\n addClass([args.nextSlide], CLS_PREV_SLIDE);\n args.nextSlide.setAttribute('data-slide-height', args.nextSlide.offsetHeight.toString());\n addClass([args.currentSlide, args.nextSlide], CLS_TRANSITION_END);\n }\n else {\n addClass([args.nextSlide], CLS_NEXT_SLIDE);\n args.nextSlide.setAttribute('data-slide-height', args.nextSlide.offsetHeight.toString());\n addClass([args.currentSlide, args.nextSlide], CLS_TRANSITION_START);\n }\n }\n else if (_this.animationEffect === 'Fade') {\n removeClass([args.currentSlide], CLS_ACTIVE$2);\n addClass([args.nextSlide], CLS_ACTIVE$2);\n }\n else if (_this.animationEffect === 'Custom') {\n if (direction === 'Previous') {\n addClass([args.nextSlide], CLS_NEXT_SLIDE);\n addClass([args.currentSlide], CLS_PREV_SLIDE);\n }\n else {\n addClass([args.currentSlide], CLS_PREV_SLIDE);\n addClass([args.nextSlide], CLS_NEXT_SLIDE);\n }\n }\n else {\n _this.onTransitionEnd();\n }\n _this.handleNavigatorsActions(currentIndex);\n });\n };\n Carousel.prototype.onTransitionEnd = function () {\n var _this = this;\n removeClass(this.element.querySelectorAll(\".\" + CLS_ITEMS$2), 'e-fade-in-out');\n var numOfItems = this.getNumOfItems();\n if (this.slideChangedEventArgs) {\n this.itemsContainer.style.transitionProperty = 'none';\n if (this.loop && (this.slideChangedEventArgs.currentIndex === 0 && this.slideChangedEventArgs.slideDirection === 'Next' ||\n this.slideChangedEventArgs.currentIndex === this.slideItems.length - 1 && this.slideChangedEventArgs.slideDirection === 'Previous')) {\n var slideWidth = this.slideChangedEventArgs.currentSlide.clientWidth;\n this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.slideChangedEventArgs.currentIndex + numOfItems);\n }\n addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE$2);\n removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE$2);\n this.trigger('slideChanged', this.slideChangedEventArgs, function () {\n removeClass(_this.element.querySelectorAll(\".\" + CLS_ITEM$3), [CLS_PREV_SLIDE, CLS_NEXT_SLIDE, CLS_TRANSITION_START, CLS_TRANSITION_END]);\n _this.slideChangedEventArgs = null;\n });\n }\n };\n Carousel.prototype.refreshIndicators = function (activeIndex, currentIndex) {\n var _this = this;\n var slideIndicator = this.element.querySelector(\".\" + CLS_INDICATOR_BARS);\n if (isNullOrUndefined(slideIndicator)) {\n return;\n }\n var indicators = [].slice.call(slideIndicator.childNodes);\n switch (this.indicatorsType) {\n case 'Default':\n case 'Dynamic':\n attributes(indicators[parseInt(activeIndex.toString(), 10)], { 'aria-current': 'false' });\n attributes(indicators[parseInt(currentIndex.toString(), 10)], { 'aria-current': 'true' });\n removeClass(indicators, [CLS_ACTIVE$2, CLS_PREV_SLIDE, CLS_NEXT_SLIDE]);\n addClass([indicators[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE$2);\n if (indicators[currentIndex - 1]) {\n addClass([indicators[currentIndex - 1]], CLS_PREV_SLIDE);\n }\n if (indicators[currentIndex + 1]) {\n addClass([indicators[currentIndex + 1]], CLS_NEXT_SLIDE);\n }\n indicators.forEach(function (item) { return item.style.setProperty('--carousel-items-current', \"\" + _this.selectedIndex); });\n break;\n case 'Fraction':\n if (this.indicatorsTemplate) {\n if (slideIndicator.children.length > 0) {\n slideIndicator.removeChild(slideIndicator.firstElementChild);\n }\n this.renderIndicatorTemplate(slideIndicator, currentIndex + 1);\n }\n else {\n slideIndicator.innerText = this.selectedIndex + 1 + \" / \" + this.slideItems.length;\n }\n break;\n case 'Progress':\n if (this.indicatorsTemplate) {\n if (slideIndicator.children.length > 0) {\n slideIndicator.removeChild(slideIndicator.firstElementChild);\n }\n this.renderIndicatorTemplate(slideIndicator, currentIndex + 1);\n }\n else {\n slideIndicator.firstElementChild.style.setProperty('--carousel-items-current', \"\" + (this.selectedIndex + 1));\n }\n break;\n }\n };\n Carousel.prototype.setHtmlAttributes = function (attribute, element) {\n var keys = Object.keys(attribute);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (key === 'class') {\n addClass([element], attribute[\"\" + key]);\n }\n else {\n element.setAttribute(key, attribute[\"\" + key]);\n }\n }\n };\n Carousel.prototype.templateParser = function (template) {\n if (template) {\n try {\n if (typeof template !== 'function' && document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n else {\n return compile(template);\n }\n }\n catch (error) {\n return compile(template);\n }\n }\n return undefined;\n };\n Carousel.prototype.getNavigatorState = function (target, isPrevious) {\n var button = target.querySelector(\".\" + (isPrevious ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON));\n if (button) {\n var buttonObj = getInstance(button, Button);\n return buttonObj.disabled;\n }\n return false;\n };\n Carousel.prototype.navigatorClickHandler = function (e) {\n var target = e.currentTarget;\n var isDisabled = this.getNavigatorState(target, target.classList.contains(CLS_PREVIOUS));\n if (isDisabled) {\n return;\n }\n var direction = target.classList.contains(CLS_PREVIOUS) ? 'Previous' : 'Next';\n this.setActiveSlide(this.getSlideIndex(direction), direction);\n this.autoSlide();\n };\n Carousel.prototype.indicatorClickHandler = function (e) {\n var target = closest(e.target, \".\" + CLS_INDICATOR_BAR);\n var index = parseInt(target.dataset.index, 10);\n if (this.selectedIndex !== index) {\n this.setActiveSlide(index, this.selectedIndex > index ? 'Previous' : 'Next');\n this.autoSlide();\n }\n };\n Carousel.prototype.playButtonClickHandler = function (e, isPropertyChange) {\n if (isPropertyChange === void 0) { isPropertyChange = false; }\n var playButton = this.element.querySelector(\".\" + CLS_PLAY_BUTTON);\n if (playButton) {\n var buttonObj = getInstance(playButton, Button);\n if (!isPropertyChange) {\n this.setProperties({ autoPlay: !this.autoPlay }, true);\n }\n playButton.setAttribute('aria-label', this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'));\n buttonObj.iconCss = CLS_ICON$1 + ' ' + (this.autoPlay ? CLS_PAUSE_ICON : CLS_PLAY_ICON);\n buttonObj.dataBind();\n this.itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');\n if (this.autoPlay && !this.loop && this.selectedIndex === this.slideItems.length - 1) {\n this.setActiveSlide(0, 'Next');\n }\n this.autoSlide();\n }\n };\n Carousel.prototype.keyHandler = function (e) {\n var direction;\n var slideIndex;\n var isSlideTransition = false;\n var target = e.target;\n e.preventDefault();\n switch (e.action) {\n case 'space':\n if (this.showIndicators && target.classList.contains(CLS_INDICATOR$1)) {\n target.click();\n }\n else if (target.classList.contains(CLS_CAROUSEL) || target.classList.contains(CLS_PLAY_BUTTON)) {\n this.playButtonClickHandler(e);\n }\n else if (target.classList.contains(CLS_NEXT_BUTTON)) {\n this.next();\n }\n else if (target.classList.contains(CLS_PREV_BUTTON)) {\n this.prev();\n }\n break;\n case 'end':\n slideIndex = this.slideItems.length - 1;\n direction = 'Next';\n isSlideTransition = true;\n break;\n case 'home':\n slideIndex = 0;\n direction = 'Previous';\n isSlideTransition = true;\n break;\n case 'moveUp':\n case 'moveLeft':\n case 'moveDown':\n case 'moveRight':\n if (this.showIndicators && isNullOrUndefined(this.indicatorsTemplate)) {\n this.element.focus();\n }\n direction = (e.action === 'moveUp' || e.action === 'moveLeft') ? 'Previous' : 'Next';\n slideIndex = this.getSlideIndex(direction);\n isSlideTransition = !this.isSuspendSlideTransition(slideIndex, direction);\n break;\n }\n if (isSlideTransition) {\n this.setActiveSlide(slideIndex, direction);\n this.autoSlide();\n isSlideTransition = false;\n }\n };\n Carousel.prototype.swipeHandler = function (e) {\n if (this.element.classList.contains(CLS_HOVER) || isNullOrUndefined(this.slideItems) || this.slideItems.length <= 1) {\n return;\n }\n var direction = (e.swipeDirection === 'Right') ? 'Previous' : 'Next';\n var slideIndex = this.getSlideIndex(direction);\n if (!this.isSuspendSlideTransition(slideIndex, direction)) {\n this.setActiveSlide(slideIndex, direction, true);\n this.autoSlide();\n }\n };\n Carousel.prototype.isSuspendSlideTransition = function (index, direction) {\n return !this.loop && (direction === 'Next' && index === 0 || direction === 'Previous' && index === this.slideItems.length - 1);\n };\n Carousel.prototype.handleNavigatorsActions = function (index) {\n if (this.buttonsVisibility === 'Hidden') {\n return;\n }\n if (this.showPlayButton) {\n var playButton = this.element.querySelector(\".\" + CLS_PLAY_BUTTON);\n var isLastSlide = this.selectedIndex === this.slideItems.length - 1 && !this.loop;\n var isButtonUpdate = isNullOrUndefined(this.playButtonTemplate) && playButton && isLastSlide;\n if (isNullOrUndefined(this.playButtonTemplate) && playButton && !isLastSlide) {\n isButtonUpdate = !playButton.classList.contains(CLS_ACTIVE$2);\n }\n if (isButtonUpdate) {\n this.setProperties({ autoPlay: !isLastSlide }, true);\n playButton.setAttribute('aria-label', this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'));\n this.itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');\n var buttonObj = getInstance(playButton, Button);\n buttonObj.iconCss = CLS_ICON$1 + ' ' + (this.autoPlay ? CLS_PAUSE_ICON : CLS_PLAY_ICON);\n buttonObj.dataBind();\n }\n }\n var prevButton = this.element.querySelector(\".\" + CLS_PREV_BUTTON);\n if (prevButton && isNullOrUndefined(this.previousButtonTemplate)) {\n var buttonObj = getInstance(prevButton, Button);\n buttonObj.disabled = !this.loop && index === 0;\n buttonObj.dataBind();\n }\n var nextButton = this.element.querySelector(\".\" + CLS_NEXT_BUTTON);\n if (nextButton && isNullOrUndefined(this.nextButtonTemplate)) {\n var buttonObj = getInstance(nextButton, Button);\n buttonObj.disabled = !this.loop && index === this.slideItems.length - 1;\n buttonObj.dataBind();\n }\n };\n Carousel.prototype.onHoverActions = function (e) {\n var navigator = this.element.querySelector(\".\" + CLS_NAVIGATORS);\n switch (e.type) {\n case 'mouseenter':\n if (this.buttonsVisibility === 'VisibleOnHover' && navigator) {\n removeClass([].slice.call(navigator.childNodes), CLS_HOVER_ARROWS);\n }\n if (this.pauseOnHover) {\n addClass([this.element], CLS_HOVER);\n }\n break;\n case 'mouseleave':\n if (this.buttonsVisibility === 'VisibleOnHover' && navigator) {\n addClass([].slice.call(navigator.childNodes), CLS_HOVER_ARROWS);\n }\n removeClass([this.element], CLS_HOVER);\n break;\n }\n this.autoSlide();\n };\n Carousel.prototype.onFocusActions = function (e) {\n switch (e.type) {\n case 'focusin':\n addClass([this.element], CLS_HOVER);\n break;\n case 'focusout':\n removeClass([this.element], CLS_HOVER);\n break;\n }\n this.autoSlide();\n };\n Carousel.prototype.destroyButtons = function () {\n var buttonCollections = [].slice.call(this.element.querySelectorAll('.e-control.e-btn'));\n for (var _i = 0, buttonCollections_1 = buttonCollections; _i < buttonCollections_1.length; _i++) {\n var button = buttonCollections_1[_i];\n var instance = getInstance(button, Button);\n if (instance) {\n instance.destroy();\n }\n }\n };\n Carousel.prototype.getNumOfItems = function () {\n return this.partialVisible ? 2 : 1;\n };\n Carousel.prototype.getTranslateValue = function (element) {\n var style = getComputedStyle(element);\n return window.WebKitCSSMatrix ?\n new WebKitCSSMatrix(style.webkitTransform).m41 : 0;\n };\n Carousel.prototype.swipeStart = function (e) {\n if (!this.timeStampStart) {\n this.timeStampStart = Date.now();\n }\n this.isSwipe = false;\n this.itemsContainer.classList.add('e-swipe-start');\n this.prevPageX = e.touches ? e.touches[0].pageX : e.pageX;\n this.initialTranslate = this.getTranslateValue(this.itemsContainer);\n };\n Carousel.prototype.swiping = function (e) {\n if (!this.itemsContainer.classList.contains('e-swipe-start')) {\n return;\n }\n e.preventDefault();\n var pageX = e.touches ? e.touches[0].pageX : e.pageX;\n var positionDiff = this.prevPageX - (pageX);\n if (!this.loop && ((this.enableRtl && ((this.selectedIndex === 0 && positionDiff > 0) ||\n (this.selectedIndex === this.itemsContainer.childElementCount - 1 && positionDiff < 0))) ||\n (!this.enableRtl && ((this.selectedIndex === 0 && positionDiff < 0) ||\n (this.selectedIndex === this.itemsContainer.childElementCount - 1 && positionDiff > 0))))) {\n return;\n }\n this.itemsContainer.style.transform = \"translateX(\" + (this.initialTranslate + (this.enableRtl ? positionDiff : -positionDiff)) + \"px)\";\n };\n Carousel.prototype.swipStop = function () {\n this.isSwipe = true;\n var time = Date.now() - this.timeStampStart;\n var distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;\n distanceX = distanceX < 0 ? distanceX * -1 : distanceX;\n if (this.isSwipe) {\n var offsetDist = distanceX * (Browser.isDevice ? 6 : 1.66);\n this.itemsContainer.style.transitionDuration = (((Browser.isDevice ? distanceX : offsetDist) / time) / 10) + 's';\n }\n var slideWidth = this.itemsContainer.firstElementChild.clientWidth;\n var threshold = slideWidth / 2;\n this.itemsContainer.classList.remove('e-swipe-start');\n var value = this.getTranslateValue(this.itemsContainer);\n if (value - this.initialTranslate < -threshold) {\n this.swipeNavigation(!this.enableRtl);\n }\n else if (value - this.initialTranslate > threshold) {\n this.swipeNavigation(this.enableRtl);\n }\n else {\n this.itemsContainer.style.transform = \"translateX(\" + this.initialTranslate + \"px)\";\n if (this.animationEffect === 'Fade') {\n this.itemsContainer.classList.add('e-fade-in-out');\n }\n }\n };\n Carousel.prototype.swipeNavigation = function (isRtl) {\n if (isRtl) {\n this.next();\n }\n else {\n this.prev();\n }\n };\n Carousel.prototype.swipeModehandlers = function () {\n if ((this.swipeMode & CarouselSwipeMode.Touch) === CarouselSwipeMode.Touch) {\n EventHandler.add(this.itemsContainer, 'touchstart', this.swipeStart, this);\n EventHandler.add(this.itemsContainer, 'touchmove', this.swiping, this);\n EventHandler.add(this.itemsContainer, 'touchend', this.swipStop, this);\n }\n if ((this.swipeMode & CarouselSwipeMode.Mouse) === CarouselSwipeMode.Mouse) {\n EventHandler.add(this.itemsContainer, 'mousedown', this.swipeStart, this);\n EventHandler.add(this.itemsContainer, 'mousemove', this.swiping, this);\n EventHandler.add(this.itemsContainer, 'mouseup', this.swipStop, this);\n }\n if ((this.swipeMode === 0) && (this.swipeMode & CarouselSwipeMode.Mouse & CarouselSwipeMode.Touch) ===\n (CarouselSwipeMode.Mouse & CarouselSwipeMode.Touch)) {\n EventHandler.add(this.itemsContainer, 'mousedown touchstart', this.swipeStart, this);\n EventHandler.add(this.itemsContainer, 'mousemove touchmove', this.swiping, this);\n EventHandler.add(this.itemsContainer, 'mouseup touchend', this.swipStop, this);\n }\n };\n Carousel.prototype.resizeHandler = function () {\n if (this.itemsContainer && this.itemsContainer.firstElementChild) {\n var numOfItems = this.getNumOfItems();\n var slideWidth = this.itemsContainer.firstElementChild.clientWidth;\n if (this.loop) {\n this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + numOfItems);\n }\n else {\n this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex);\n }\n }\n };\n Carousel.prototype.wireEvents = function () {\n if (!(this.animationEffect === 'Custom')) {\n this.swipeModehandlers();\n }\n EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);\n EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);\n EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);\n EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);\n EventHandler.add(window, 'resize', this.resizeHandler, this);\n };\n Carousel.prototype.unWireEvents = function () {\n var _this = this;\n var indicators = [].slice.call(this.element.querySelectorAll(\".\" + CLS_INDICATOR_BAR));\n indicators.forEach(function (indicator) {\n EventHandler.remove(indicator, 'click', _this.indicatorClickHandler);\n });\n var navigators = [].slice.call(this.element.querySelectorAll(\".\" + CLS_PREVIOUS + \",.\" + CLS_NEXT));\n navigators.forEach(function (navigator) {\n EventHandler.remove(navigator, 'click', _this.navigatorClickHandler);\n });\n var playIcon = this.element.querySelector(\".\" + CLS_PLAY_PAUSE);\n if (playIcon) {\n EventHandler.remove(playIcon, 'click', this.playButtonClickHandler);\n }\n EventHandler.remove(this.element.firstElementChild, 'animationend', this.onTransitionEnd);\n EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);\n EventHandler.clearEvents(this.element);\n EventHandler.clearEvents(this.itemsContainer);\n EventHandler.remove(window, 'resize', this.resizeHandler);\n };\n /**\n * Method to transit from the current slide to the previous slide.\n *\n * @returns {void}\n */\n Carousel.prototype.prev = function () {\n if (!this.loop && this.selectedIndex === 0) {\n return;\n }\n var index = (this.selectedIndex === 0) ? this.slideItems.length - 1 : this.selectedIndex - 1;\n this.setActiveSlide(index, 'Previous');\n this.autoSlide();\n };\n /**\n * Method to transit from the current slide to the next slide.\n *\n * @returns {void}\n */\n Carousel.prototype.next = function () {\n if (!this.loop && this.selectedIndex === this.slideItems.length - 1) {\n return;\n }\n var index = (this.selectedIndex === this.slideItems.length - 1) ? 0 : this.selectedIndex + 1;\n this.setActiveSlide(index, 'Next');\n this.autoSlide();\n };\n /**\n * Method to play the slides programmatically.\n *\n * @returns {void}\n */\n Carousel.prototype.play = function () {\n var playIcon = this.element.querySelector(\".\" + CLS_PLAY_ICON);\n if (this.showPlayButton && playIcon) {\n classList(playIcon, [CLS_PAUSE_ICON], [CLS_PLAY_ICON]);\n var playButton = this.element.querySelector(\".\" + CLS_PLAY_BUTTON);\n playButton.setAttribute('aria-label', this.localeObj.getConstant('pauseSlideTransition'));\n }\n this.setProperties({ autoPlay: true }, true);\n this.itemsContainer.setAttribute('aria-live', 'off');\n this.applySlideInterval();\n };\n /**\n * Method to pause the slides programmatically.\n *\n * @returns {void}\n */\n Carousel.prototype.pause = function () {\n var pauseIcon = this.element.querySelector(\".\" + CLS_PAUSE_ICON);\n if (this.showPlayButton && pauseIcon) {\n var playButton = this.element.querySelector(\".\" + CLS_PLAY_BUTTON);\n playButton.setAttribute('aria-label', this.localeObj.getConstant('playSlideTransition'));\n classList(pauseIcon, [CLS_PLAY_ICON], [CLS_PAUSE_ICON]);\n }\n this.setProperties({ autoPlay: false }, true);\n this.itemsContainer.setAttribute('aria-live', 'off');\n this.resetSlideInterval();\n };\n /**\n * Method to render react and angular templates\n *\n * @returns {void}\n * @private\n */\n Carousel.prototype.renderTemplates = function () {\n if (this.isAngular || this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Method to reset react and angular templates\n *\n * @param {string[]} templates Accepts the template ID\n * @returns {void}\n * @private\n */\n Carousel.prototype.resetTemplates = function (templates) {\n if (this.isAngular || this.isReact) {\n this.clearTemplate(templates);\n }\n };\n /**\n * Method for destroy the carousel component.\n *\n * @returns {void}\n */\n Carousel.prototype.destroy = function () {\n var _this = this;\n this.resetTemplates();\n if (this.touchModule) {\n this.touchModule.destroy();\n this.touchModule = null;\n }\n this.keyModule.destroy();\n this.keyModule = null;\n this.resetSlideInterval();\n this.destroyButtons();\n this.unWireEvents();\n [].slice.call(this.element.children).forEach(function (ele) { _this.element.removeChild(ele); });\n removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL$5, CLS_SWIPE]);\n ['role', 'style'].forEach(function (attr) { _this.element.removeAttribute(attr); });\n this.itemsContainer = null;\n _super.prototype.destroy.call(this);\n };\n __decorate$b([\n Collection([], CarouselItem)\n ], Carousel.prototype, \"items\", void 0);\n __decorate$b([\n Property('Slide')\n ], Carousel.prototype, \"animationEffect\", void 0);\n __decorate$b([\n Property()\n ], Carousel.prototype, \"previousButtonTemplate\", void 0);\n __decorate$b([\n Property()\n ], Carousel.prototype, \"nextButtonTemplate\", void 0);\n __decorate$b([\n Property()\n ], Carousel.prototype, \"indicatorsTemplate\", void 0);\n __decorate$b([\n Property()\n ], Carousel.prototype, \"playButtonTemplate\", void 0);\n __decorate$b([\n Property()\n ], Carousel.prototype, \"cssClass\", void 0);\n __decorate$b([\n Property([])\n ], Carousel.prototype, \"dataSource\", void 0);\n __decorate$b([\n Property()\n ], Carousel.prototype, \"itemTemplate\", void 0);\n __decorate$b([\n Property(0)\n ], Carousel.prototype, \"selectedIndex\", void 0);\n __decorate$b([\n Property('100%')\n ], Carousel.prototype, \"width\", void 0);\n __decorate$b([\n Property('100%')\n ], Carousel.prototype, \"height\", void 0);\n __decorate$b([\n Property(5000)\n ], Carousel.prototype, \"interval\", void 0);\n __decorate$b([\n Property(true)\n ], Carousel.prototype, \"autoPlay\", void 0);\n __decorate$b([\n Property(true)\n ], Carousel.prototype, \"pauseOnHover\", void 0);\n __decorate$b([\n Property(true)\n ], Carousel.prototype, \"loop\", void 0);\n __decorate$b([\n Property(false)\n ], Carousel.prototype, \"showPlayButton\", void 0);\n __decorate$b([\n Property(true)\n ], Carousel.prototype, \"enableTouchSwipe\", void 0);\n __decorate$b([\n Property(true)\n ], Carousel.prototype, \"showIndicators\", void 0);\n __decorate$b([\n Property('Default')\n ], Carousel.prototype, \"indicatorsType\", void 0);\n __decorate$b([\n Property('Visible')\n ], Carousel.prototype, \"buttonsVisibility\", void 0);\n __decorate$b([\n Property(false)\n ], Carousel.prototype, \"partialVisible\", void 0);\n __decorate$b([\n Property(CarouselSwipeMode.Touch)\n ], Carousel.prototype, \"swipeMode\", void 0);\n __decorate$b([\n Property()\n ], Carousel.prototype, \"htmlAttributes\", void 0);\n __decorate$b([\n Event()\n ], Carousel.prototype, \"slideChanging\", void 0);\n __decorate$b([\n Event()\n ], Carousel.prototype, \"slideChanged\", void 0);\n Carousel = __decorate$b([\n NotifyPropertyChanges\n ], Carousel);\n return Carousel;\n}(Component));\n\nvar __extends$c = (undefined && undefined.__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$c = (undefined && undefined.__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// Constant variables\nvar CLS_APPBAR = 'e-appbar';\nvar CLS_HORIZONTAL_BOTTOM = 'e-horizontal-bottom';\nvar CLS_STICKY = 'e-sticky';\nvar CLS_PROMINENT = 'e-prominent';\nvar CLS_DENSE = 'e-dense';\nvar CLS_RTL$6 = 'e-rtl';\nvar CLS_LIGHT = 'e-light';\nvar CLS_DARK = 'e-dark';\nvar CLS_PRIMARY = 'e-primary';\nvar CLS_INHERIT = 'e-inherit';\n/**\n * The AppBar displays the information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.\n * Support to inherit colors from AppBar provided to Button , DropDownButton , Menu and TextBox .\n * Set CssClass property with .\n *\n * @private\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n StepperBase.prototype.preRender = function () {\n };\n /**\n * This method is abstract member of the Component.\n *\n * @private\n * @returns {string} - It returns the current module name.\n */\n StepperBase.prototype.getModuleName = function () {\n return 'stepperBase';\n };\n /**\n * This method is abstract member of the Component.\n *\n * @private\n * @returns {string} - It returns the persisted data.\n */\n StepperBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * This method is abstract member of the Component.\n *\n * @private\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n StepperBase.prototype.render = function () {\n };\n StepperBase.prototype.updateOrientaion = function (wrapper) {\n if (wrapper.classList.contains('e-horizontal') || wrapper.classList.contains('e-vertical')) {\n wrapper.classList.remove('e-horizontal', 'e-vertical');\n }\n if (!(isNullOrUndefined(this.orientation))) {\n wrapper.classList.add('e-' + this.orientation.toLocaleLowerCase());\n }\n };\n StepperBase.prototype.renderProgressBar = function (wrapper) {\n this.progressStep = this.createElement('div', { className: 'e-stepper-progressbar' });\n this.progressbar = this.createElement('div', { className: 'e-progressbar-value' });\n this.progressStep.appendChild(this.progressbar);\n wrapper.prepend(this.progressStep);\n this.progressbar.style.setProperty(PROGRESSVALUE, (0) + '%');\n var beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));\n if (wrapper.classList.contains('e-vertical')) {\n if (wrapper.classList.contains('e-label-bottom') || wrapper.classList.contains('e-label-top')) {\n var stepsContainer = (wrapper.querySelector('.e-stepper-steps'));\n this.progressStep.style.setProperty('--progress-position', (stepsContainer.offsetWidth / 2) + 'px');\n }\n else {\n this.progressStep.style.setProperty('--progress-position', ((this.progressBarPosition / 2) - 1) + 'px');\n }\n }\n if (beforeLabel && (beforeLabel.classList.contains('e-label-before'))) {\n this.progressStep.style.setProperty('--progress-position', (((this.progressBarPosition) - 1)) + 5 + 'px');\n }\n if (wrapper.classList.contains('e-horizontal')) {\n this.setProgressPosition(wrapper);\n }\n };\n StepperBase.prototype.setProgressPosition = function (wrapper, isResize) {\n var stepItemContainer = (wrapper.querySelector('.e-step-container'));\n var stepItemEle = stepItemContainer.firstElementChild;\n if (isResize !== true) {\n var topPos = 0;\n if (wrapper.classList.contains('e-label-before')) {\n topPos = (stepItemContainer.offsetParent.offsetHeight - (stepItemEle.offsetHeight / 2) - 1);\n }\n else {\n topPos = (stepItemEle.offsetHeight / 2);\n }\n this.progressStep.style.setProperty('--progress-top-position', topPos + 'px');\n }\n var lastEle = wrapper.querySelector('.e-stepper-steps').lastChild.firstChild;\n if (wrapper.classList.contains('e-rtl')) {\n var leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.e-stepper-steps').offsetWidth);\n this.progressStep.style.setProperty('--progress-left-position', Math.abs(leftPost) + 'px');\n this.progressStep.style.setProperty('--progress-bar-width', Math.abs(lastEle.offsetLeft - stepItemEle.offsetLeft) + 'px');\n }\n else {\n this.progressStep.style.setProperty('--progress-left-position', (stepItemEle.offsetLeft + 1) + 'px');\n this.progressStep.style.setProperty('--progress-bar-width', ((lastEle.offsetWidth + lastEle.offsetLeft - 2) - (stepItemEle.offsetLeft + 2)) + 'px');\n }\n };\n /**\n * This method is abstract member of the Component.\n *\n * @param {StepperBaseModel} newProp - Specifies new properties\n * @param {StepperBaseModel} oldProp - Specifies old properties\n * @private\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars\n StepperBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n };\n __decorate$d([\n Collection([], Step)\n ], StepperBase.prototype, \"steps\", void 0);\n __decorate$d([\n Property('')\n ], StepperBase.prototype, \"cssClass\", void 0);\n __decorate$d([\n Property(false)\n ], StepperBase.prototype, \"readOnly\", void 0);\n __decorate$d([\n Property(StepperOrientation.Horizontal)\n ], StepperBase.prototype, \"orientation\", void 0);\n __decorate$d([\n Event()\n ], StepperBase.prototype, \"created\", void 0);\n StepperBase = __decorate$d([\n NotifyPropertyChanges\n ], StepperBase);\n return StepperBase;\n}(Component));\n\nvar __extends$e = (undefined && undefined.__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$e = (undefined && undefined.__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};\nvar ITEMCONTAINER = 'e-step-container';\nvar ITEMLIST = 'e-stepper-steps';\nvar ICONCSS = 'e-indicator';\nvar TEXTCSS = 'e-step-text-container';\nvar STEPLABEL = 'e-step-label-container';\nvar OPTIONAL = 'e-step-label-optional';\nvar SELECTED$2 = 'e-step-selected';\nvar INPROGRESS = 'e-step-inprogress';\nvar NOTSTARTED = 'e-step-notstarted';\nvar FOCUS$1 = 'e-step-focus';\nvar COMPLETED = 'e-step-completed';\nvar DISABLED$2 = 'e-step-disabled';\nvar READONLY = 'e-stepper-readonly';\nvar PROGRESSVALUE$1 = '--progress-value';\nvar RTL$3 = 'e-rtl';\nvar TEMPLATE = 'e-step-template';\nvar LABELAFTER = 'e-label-after';\nvar LABELBEFORE = 'e-label-before';\nvar VERTICALSTEP = 'e-vertical';\nvar HORIZSTEP = 'e-horizontal';\nvar STEPICON = 'e-step-item';\nvar STEPTEXT = 'e-step-text';\nvar TEXT = 'e-text';\nvar STEPSLABEL = 'e-step-label';\nvar LABEL = 'e-label';\nvar STEPINDICATOR = 'e-step-type-indicator';\nvar LABELINDICATOR = 'e-step-type-label';\nvar INDICATORICON = 'e-step-indicator';\nvar STEPPERTOOLTIP = 'e-stepper-tooltip';\nvar STEPPERIPROGRESSTIP = 'e-step-inprogress-tip';\nvar LINEARSTEP = 'e-linear';\nvar PREVSTEP = 'e-previous';\nvar NEXTSTEP = 'e-next';\n/**\n * Defines the step progress animation of the Stepper.\n */\nvar StepperAnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$e(StepperAnimationSettings, _super);\n function StepperAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$e([\n Property(true)\n ], StepperAnimationSettings.prototype, \"enable\", void 0);\n __decorate$e([\n Property(2000)\n ], StepperAnimationSettings.prototype, \"duration\", void 0);\n __decorate$e([\n Property(0)\n ], StepperAnimationSettings.prototype, \"delay\", void 0);\n return StepperAnimationSettings;\n}(ChildProperty));\n/**\n * Defines the label position in the Stepper.\n */\nvar StepLabelPosition;\n(function (StepLabelPosition) {\n /**\n * Displays the label on top position regardless of the Stepper's orientation.\n */\n StepLabelPosition[\"Top\"] = \"Top\";\n /**\n * Displays the label on bottom position regardless of the Stepper's orientation.\n */\n StepLabelPosition[\"Bottom\"] = \"Bottom\";\n /**\n * Displays the label on left side regardless of the Stepper's orientation.\n */\n StepLabelPosition[\"Start\"] = \"Start\";\n /**\n * Displays the label on right side regardless of the Stepper's orientation.\n */\n StepLabelPosition[\"End\"] = \"End\";\n})(StepLabelPosition || (StepLabelPosition = {}));\n/**\n * Defines whether steps are display with only indicator, only labels or combination of both.\n */\nvar StepType;\n(function (StepType) {\n /**\n * Steps are shown indicator with label defined.\n */\n StepType[\"Default\"] = \"Default\";\n /**\n * Steps are shown with only label.\n */\n StepType[\"Label\"] = \"Label\";\n /**\n * Steps are shown with only indicator.\n */\n StepType[\"Indicator\"] = \"Indicator\";\n})(StepType || (StepType = {}));\n/**\n * The Stepper component visualizes several steps and indicates the current progress by highlighting already completed steps.\n *\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Stepper = /** @__PURE__ @class */ (function (_super) {\n __extends$e(Stepper, _super);\n /**\n * * Constructor for creating the Stepper component.\n *\n * @param {StepperModel} options - Specifies the Stepper model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function Stepper(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.stepperItemElements = [];\n return _this;\n }\n Stepper.prototype.preRender = function () {\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n var localeText = { optional: 'Optional' };\n this.l10n = new L10n('stepper', localeText, this.locale);\n this.keyConfigs = {\n downarrow: 'downarrow',\n leftarrow: 'leftarrow',\n rightarrow: 'rightarrow',\n uparrow: 'uparrow',\n space: 'space',\n enter: 'enter',\n home: 'home',\n end: 'end',\n tab: 'tab',\n shiftTab: 'shift+tab',\n escape: 'escape'\n };\n this.tooltipOpen = false;\n };\n /**\n * To get component name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n Stepper.prototype.getModuleName = function () {\n return 'stepper';\n };\n Stepper.prototype.render = function () {\n this.initialize();\n this.navigationHandler(this.activeStep, null, false);\n this.updateStepperStatus(true);\n };\n Stepper.prototype.initialize = function () {\n var _this = this;\n this.element.setAttribute('aria-label', this.element.id);\n this.updatePosition();\n this.stepperItemList = this.createElement('ol', { className: ITEMLIST });\n this.updateOrientaion(this.element);\n this.updateStepType();\n this.element.appendChild(this.stepperItemList);\n if (this.cssClass) {\n addClass([this.element], this.cssClass.trim().split(' '));\n }\n if (this.readOnly) {\n this.element.classList.add(READONLY);\n }\n if (this.enableRtl) {\n this.element.classList.add(RTL$3);\n }\n this.wireEvents();\n this.updateTemplateFunction();\n this.renderItems();\n if (this.steps.length > 0) {\n if (this.steps.length > 1) {\n if (this.isAngular && this.template) {\n setTimeout(function () {\n _this.renderProgressBar(_this.element);\n });\n }\n else {\n this.renderProgressBar(this.element);\n }\n }\n this.checkValidStep();\n this.updateAnimation();\n this.updateTooltip();\n this.wireKeyboardEvent();\n }\n };\n Stepper.prototype.updatePosition = function () {\n this.progressBarPosition = this.beforeLabelWidth = this.textEleWidth = 0;\n };\n Stepper.prototype.renderDefault = function (index) {\n return (!this.steps[parseInt((index).toString(), 10)].iconCss && !this.steps[parseInt((index).toString(), 10)].text &&\n !this.steps[parseInt((index).toString(), 10)].label) ? true : false;\n };\n Stepper.prototype.updateAnimation = function () {\n var progressEle = this.element.querySelector('.e-progressbar-value');\n if (this.animation.enable) {\n if (this.animation.duration >= 0) {\n if (progressEle) {\n progressEle.style.setProperty('--duration', ((this.animation.duration) + 'ms'));\n }\n }\n if (this.animation.delay >= 0) {\n if (progressEle) {\n progressEle.style.setProperty('--delay', ((this.animation.delay) + 'ms'));\n }\n }\n }\n else {\n if (progressEle) {\n progressEle.style.setProperty('--delay', (0 + 'ms'));\n progressEle.style.setProperty('--duration', (0 + 'ms'));\n }\n }\n };\n Stepper.prototype.updateStepType = function () {\n if (!(isNullOrUndefined(this.stepType)) && (this.stepType.toLowerCase() === 'indicator' || this.stepType.toLowerCase() === 'label' || this.stepType.toLowerCase() === 'default')) {\n if (this.stepType.toLowerCase() !== 'default') {\n this.element.classList.add('e-step-type-' + this.stepType.toLowerCase());\n }\n if (((this.stepType.toLowerCase() === 'indicator' || 'label') && (this.labelContainer))) {\n this.clearLabelPosition();\n }\n }\n };\n Stepper.prototype.wireEvents = function () {\n EventHandler.add(window, 'resize', this.updateResize, this);\n EventHandler.add(window, 'click', this.updateStepFocus, this);\n };\n Stepper.prototype.unWireEvents = function () {\n EventHandler.remove(window, 'resize', this.updateResize);\n EventHandler.remove(window, 'click', this.updateStepFocus);\n };\n Stepper.prototype.updateResize = function () {\n if (this.stepperItemList && this.progressbar && this.element.classList.contains(HORIZSTEP)) {\n this.setProgressPosition(this.element, true);\n }\n this.navigateToStep(this.activeStep, null, null, false, false);\n };\n Stepper.prototype.updateStepFocus = function () {\n if (this.isKeyNavFocus) {\n this.isKeyNavFocus = false;\n var isFocus = this.element.querySelector('.' + FOCUS$1);\n if (isFocus) {\n isFocus.classList.remove(FOCUS$1);\n this.element.classList.remove('e-steps-focus');\n }\n }\n };\n Stepper.prototype.updateStepperStatus = function (isInitial) {\n for (var index = 0; index < this.steps.length; index++) {\n var item = this.steps[parseInt(index.toString(), 10)];\n var status_1 = item.status.toLowerCase();\n if (isInitial && this.activeStep === 0 && index === 0) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n item.status = StepStatus.InProgress;\n this.isProtectedOnChange = prevOnChange;\n }\n if (item && status_1 !== 'notstarted' && index === this.activeStep) {\n for (var i = 0; i < this.steps.length; i++) {\n var itemElement = this.stepperItemElements[parseInt(i.toString(), 10)];\n itemElement.classList.remove(SELECTED$2, INPROGRESS, COMPLETED, NOTSTARTED);\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (status_1 === 'completed') {\n this.updateStatusClass(i, index, itemElement);\n }\n else {\n this.updateStatusClass(i, index, itemElement, true);\n }\n this.isProtectedOnChange = prevOnChange;\n }\n }\n else if (item && status_1 !== 'notstarted' && index !== this.activeStep) {\n this.navigationHandler(this.activeStep, null, true);\n }\n }\n };\n Stepper.prototype.updateStatusClass = function (currentStep, index, ele, isInprogress) {\n var stepItem = this.steps[parseInt(currentStep.toString(), 10)];\n if (currentStep < index) {\n ele.classList.add(COMPLETED);\n stepItem.status = StepStatus.Completed;\n }\n else if (currentStep === index) {\n ele.classList.add(isInprogress ? INPROGRESS : COMPLETED, SELECTED$2);\n }\n else {\n ele.classList.add(NOTSTARTED);\n }\n };\n Stepper.prototype.renderItems = function () {\n var _this = this;\n for (var index = 0; index < this.steps.length; index++) {\n this.stepperItemContainer = this.createElement('li', { className: ITEMCONTAINER });\n this.stepperItemContainer.classList[(index === 0) ? 'add' : 'remove'](SELECTED$2, INPROGRESS);\n this.stepperItemContainer.classList[(index !== 0) ? 'add' : 'remove'](NOTSTARTED);\n if (this.element.classList.contains(HORIZSTEP)) {\n this.stepperItemContainer.style.setProperty('--max-width', 100 / this.steps.length + '%');\n }\n var stepSpan = this.createElement('span', { className: 'e-step' });\n var item = this.steps[parseInt(index.toString(), 10)];\n var isItemLabel = item.label ? true : false;\n var isItemText = item.text ? true : false;\n if (this.renderDefault(index) && (isNullOrUndefined(this.template) || this.template === '')) {\n var isIndicator = (!this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator') ? true : false;\n if (isIndicator) {\n stepSpan.classList.add('e-icons', INDICATORICON);\n }\n if (!isIndicator && item.isValid == null) {\n stepSpan.classList.add('e-step-content');\n stepSpan.innerHTML = (index + 1).toString();\n }\n this.stepperItemContainer.appendChild(stepSpan);\n }\n else if (isNullOrUndefined(this.template) || this.template === '') {\n var isRender = true;\n if ((item.iconCss || (!item.iconCss && isItemText && isItemLabel)) && (((!isItemText && !isItemLabel) ||\n !this.element.classList.contains(LABELINDICATOR)))) {\n if (item.iconCss) {\n var itemIcon = item.iconCss.trim().split(' ');\n stepSpan.classList.add(ICONCSS);\n for (var i = 0; i < itemIcon.length; i++) {\n stepSpan.classList.add(itemIcon[parseInt(i.toString(), 10)]);\n }\n this.stepperItemContainer.classList.add(STEPICON);\n }\n else if (!item.iconCss && isItemText && isItemLabel) {\n stepSpan.classList.add(ICONCSS);\n stepSpan.innerHTML = item.text;\n this.stepperItemContainer.classList.add(STEPICON);\n }\n this.stepperItemContainer.appendChild(stepSpan);\n if ((this.element.classList.contains(HORIZSTEP) && (this.labelPosition.toLowerCase() === 'start' || this.labelPosition.toLowerCase() === 'end') && isItemLabel) ||\n (this.element.classList.contains(VERTICALSTEP) && (this.labelPosition.toLowerCase() === 'top' || this.labelPosition.toLowerCase() === 'bottom') && isItemLabel)) {\n this.element.classList.add('e-label-' + this.labelPosition.toLowerCase());\n var textSpan = this.createElement('span', { className: TEXTCSS + ' ' + TEXT });\n textSpan.innerText = item.label;\n this.stepperItemContainer.appendChild(textSpan);\n this.stepperItemContainer.classList.add(STEPTEXT);\n isRender = false;\n }\n }\n if (isItemText && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender &&\n !(item.iconCss && isItemLabel)) {\n if ((!item.iconCss && this.element.classList.contains(STEPINDICATOR)) ||\n ((!item.iconCss || this.element.classList.contains(LABELINDICATOR)) && !isItemLabel)) {\n if (!item.iconCss && !isItemLabel) {\n this.element.classList.add('e-step-type-indicator');\n }\n this.checkValidState(item, stepSpan);\n isItemLabel = null;\n }\n else {\n var textSpan = this.createElement('span', { className: TEXT });\n if (!isItemLabel) {\n textSpan.innerText = item.text;\n textSpan.classList.add(TEXTCSS);\n this.stepperItemContainer.appendChild(textSpan);\n this.stepperItemContainer.classList.add(STEPTEXT);\n }\n if (isItemLabel && this.element.classList.contains(LABELINDICATOR)) {\n textSpan.innerText = item.label;\n }\n isItemText = item.label ? false : true;\n }\n }\n if (isItemLabel && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender) {\n if (!item.iconCss && !isItemText && this.element.classList.contains(STEPINDICATOR)) {\n this.checkValidState(item, stepSpan, true);\n }\n else if ((!((this.element.classList.contains(LABELINDICATOR)) && isItemText)) ||\n (this.element.classList.contains(LABELINDICATOR) && isItemLabel)) {\n this.labelContainer = this.createElement('span', { className: STEPLABEL });\n var labelSpan = this.createElement('span', { className: LABEL });\n labelSpan.innerText = item.label;\n this.labelContainer.appendChild(labelSpan);\n this.stepperItemContainer.classList.add(STEPSLABEL);\n this.updateLabelPosition();\n if ((!item.iconCss && !isItemText && !this.stepperItemContainer.classList.contains(STEPICON)) ||\n this.element.classList.contains(LABELINDICATOR)) {\n this.stepperItemContainer.classList.add('e-step-label-only');\n if (item.isValid !== null) {\n var iconSpan = this.createElement('span', { className: 'e-step-validation-icon e-icons' });\n this.labelContainer.appendChild(iconSpan);\n }\n }\n }\n }\n }\n if (item.optional) {\n var optionalSpan = this.createElement('span', { className: OPTIONAL });\n this.l10n.setLocale(this.locale);\n var optionalContent = this.l10n.getConstant('optional');\n optionalSpan.innerText = optionalContent;\n if (isItemLabel && (this.labelContainer && ((this.element.classList.contains(LABELAFTER) && !this.stepperItemContainer.classList.contains('e-step-label-only'))\n || (this.element.classList.contains(HORIZSTEP) && this.element.classList.contains(LABELBEFORE) && !this.stepperItemContainer.classList.contains('e-step-label-only'))))\n || (this.element.classList.contains(VERTICALSTEP) && this.element.classList.contains(LABELBEFORE))) {\n this.labelContainer.appendChild(optionalSpan);\n }\n else {\n this.stepperItemContainer.appendChild(optionalSpan);\n }\n if (item.isValid !== null) {\n this.stepperItemContainer.classList.add(item.isValid ? 'e-step-valid' : 'e-step-error');\n }\n }\n if (item.cssClass) {\n addClass([this.stepperItemContainer], item.cssClass.trim().split(' '));\n }\n if (item.disabled) {\n this.stepperItemContainer.classList[item.disabled ? 'add' : 'remove'](DISABLED$2);\n attributes(this.stepperItemContainer, { 'tabindex': '-1', 'aria-disabled': 'true' });\n }\n if (item.isValid !== null) {\n if (item.isValid) {\n this.stepperItemContainer.classList.add('e-step-valid');\n }\n else {\n this.stepperItemContainer.classList.add('e-step-error');\n }\n }\n this.renderItemContent(index, false);\n if (this.stepperItemContainer.classList.contains(INPROGRESS)) {\n attributes(this.stepperItemContainer, { 'tabindex': '0', 'aria-current': 'true' });\n }\n else {\n attributes(this.stepperItemContainer, { 'tabindex': '-1' });\n }\n this.wireItemsEvents(this.stepperItemContainer, index);\n this.stepperItemElements.push(this.stepperItemContainer);\n var eventArgs = { element: this.stepperItemContainer, index: index };\n this.trigger('beforeStepRender', eventArgs, function (args) {\n _this.stepperItemList.appendChild(args.element);\n });\n if (this.isAngular && this.template) {\n setTimeout(function () {\n _this.calculateProgressBarPosition();\n });\n }\n else {\n this.calculateProgressBarPosition();\n }\n }\n if (this.element.classList.contains(VERTICALSTEP)) {\n if (this.element.classList.contains(LABELBEFORE)) {\n var listItems = this.stepperItemList.querySelectorAll('.' + LABEL);\n for (var i = 0; i < listItems.length; i++) {\n var labelEle = listItems[parseInt((i).toString(), 10)];\n labelEle.style.setProperty('--label-width', (this.beforeLabelWidth) + 5 + 'px');\n }\n }\n }\n };\n Stepper.prototype.calculateProgressBarPosition = function () {\n var isBeforeLabel = (this.element.classList.contains(LABELBEFORE)) ? true : false;\n var isStepVertical = (this.element.classList.contains(VERTICALSTEP)) ? true : false;\n if (isStepVertical) {\n var iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) &&\n !this.stepperItemContainer.classList.contains(STEPTEXT) &&\n !this.stepperItemContainer.classList.contains(STEPSLABEL)) ? true : false;\n var textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));\n if (textEle) {\n this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;\n }\n if (isBeforeLabel) {\n var itemWidth = void 0;\n var labelWidth = this.stepperItemContainer.querySelector('.' + LABEL).offsetWidth + 15;\n if (this.beforeLabelWidth < labelWidth) {\n this.beforeLabelWidth = labelWidth;\n }\n if (this.element.querySelector('ol').lastChild.querySelector('.' + ICONCSS)) {\n itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + ICONCSS).offsetWidth / 2));\n }\n else if (this.stepperItemContainer.querySelector('.' + TEXTCSS)) {\n itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + TEXTCSS).offsetWidth / 2));\n }\n if (this.progressBarPosition < itemWidth) {\n this.progressBarPosition = itemWidth;\n }\n }\n else if (this.progressBarPosition < (iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth)) {\n this.progressBarPosition = iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth;\n }\n }\n };\n Stepper.prototype.checkValidState = function (item, stepSpan, isLabel) {\n if (item.isValid == null) {\n stepSpan.classList.add('e-step-content');\n if (isLabel) {\n stepSpan.innerHTML = item.label;\n }\n else {\n stepSpan.innerHTML = item.label ? item.label : item.text;\n }\n this.stepperItemContainer.appendChild(stepSpan);\n }\n else {\n stepSpan.classList.add(ICONCSS);\n this.stepperItemContainer.appendChild(stepSpan);\n this.stepperItemContainer.classList.add(STEPICON);\n }\n };\n Stepper.prototype.updateCurrentLabel = function () {\n var currentLabelPos;\n if (this.element.classList.contains(HORIZSTEP)) {\n currentLabelPos = this.labelPosition.toLowerCase() === 'top' ? 'before' : this.labelPosition.toLowerCase() === 'bottom' ? 'after' : this.labelPosition.toLowerCase();\n }\n else {\n currentLabelPos = this.labelPosition.toLowerCase() === 'start' ? 'before' : this.labelPosition.toLowerCase() === 'end' ? 'after' : this.labelPosition.toLowerCase();\n }\n return currentLabelPos;\n };\n Stepper.prototype.updateLabelPosition = function () {\n this.clearLabelPosition();\n this.labelContainer.classList.add('e-label-' + this.updateCurrentLabel());\n if (this.labelPosition.toLowerCase() === 'start' && this.orientation.toLowerCase() === 'vertical') {\n if (this.stepperItemContainer.firstChild) {\n this.stepperItemContainer.firstChild.before(this.labelContainer);\n }\n else {\n this.stepperItemContainer.appendChild(this.labelContainer);\n }\n }\n else {\n this.stepperItemContainer.appendChild(this.labelContainer);\n }\n this.element.classList.add('e-label-' + this.updateCurrentLabel());\n };\n Stepper.prototype.clearLabelPosition = function () {\n var removeCss = this.labelContainer.classList.value.match(/(e-label-[after|before]+)/g);\n if (removeCss) {\n removeClass([this.labelContainer], removeCss);\n removeClass([this.element], removeCss);\n }\n };\n Stepper.prototype.checkValidStep = function () {\n for (var index = 0; index < this.steps.length; index++) {\n var item = this.steps[parseInt(index.toString(), 10)];\n var itemElement = this.stepperItemElements[parseInt(index.toString(), 10)];\n if (item.isValid !== null) {\n var indicatorEle = void 0;\n var iconEle = void 0;\n if (this.element.classList.contains(STEPINDICATOR) && !item.iconCss) {\n indicatorEle = itemElement.querySelector('.' + ICONCSS);\n }\n else {\n iconEle = itemElement.querySelector('.' + ICONCSS);\n }\n if (!indicatorEle && this.element.classList.contains(STEPINDICATOR) && this.renderDefault(index)) {\n indicatorEle = itemElement.querySelector('.' + INDICATORICON);\n }\n var textLabelIcon = itemElement.querySelector('.e-step-validation-icon');\n var itemIcon = item.iconCss.trim().split(' ');\n var validStep = itemElement.classList.contains('e-step-valid');\n if (indicatorEle) {\n indicatorEle.classList.remove(INDICATORICON);\n if (indicatorEle.innerHTML !== '') {\n indicatorEle.innerHTML = '';\n }\n indicatorEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);\n }\n if (this.renderDefault(index) && !this.element.classList.contains(STEPINDICATOR)) {\n var stepSpan = itemElement.querySelector('.e-step');\n stepSpan.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);\n }\n if (iconEle) {\n if (iconEle.innerHTML !== '') {\n iconEle.innerHTML = '';\n }\n else if (itemIcon.length > 0) {\n for (var i = 0; i < itemIcon.length; i++) {\n iconEle.classList.remove(itemIcon[parseInt(i.toString(), 10)]);\n }\n }\n iconEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info');\n }\n if (textLabelIcon) {\n textLabelIcon.classList.add(validStep ? 'e-circle-check' : 'e-circle-info');\n if (this.element.classList.contains(VERTICALSTEP)) {\n var labelEle = itemElement.querySelector('.' + LABEL);\n var textEle = itemElement.querySelector('.' + TEXT);\n var itemWidth = textEle ? textEle.offsetWidth + textEle.getBoundingClientRect().left :\n labelEle.offsetWidth + labelEle.getBoundingClientRect().left;\n var validationIcon = itemElement.querySelector('.e-step-validation-icon');\n validationIcon.style.setProperty('--icon-position', (itemWidth + 20) + 'px');\n }\n }\n }\n }\n };\n Stepper.prototype.updateTooltip = function () {\n if (this.showTooltip) {\n this.tooltipObj = new Tooltip({\n target: '.e-step-container', windowCollision: true,\n opensOn: 'Custom', cssClass: this.cssClass ? (STEPPERTOOLTIP + ' ' + this.cssClass) : STEPPERTOOLTIP,\n position: 'TopCenter'\n });\n this.tooltipObj.appendTo(this.stepperItemList);\n }\n else {\n if (!isNullOrUndefined(this.tooltipObj)) {\n this.tooltipObj.destroy();\n this.tooltipObj = null;\n }\n }\n };\n Stepper.prototype.wireItemsEvents = function (itemElement, index) {\n var _this = this;\n EventHandler.add(itemElement, 'click', function (e) {\n if (_this.linear) {\n var linearModeValue = index - _this.activeStep;\n if (Math.abs(linearModeValue) === 1) {\n _this.stepClickHandler(index, e, itemElement);\n }\n }\n else {\n _this.stepClickHandler(index, e, itemElement);\n }\n }, this);\n EventHandler.add(itemElement, 'mouseover', function () { return _this.openStepperTooltip(index); }, this);\n EventHandler.add(itemElement, 'mouseleave', function () { return _this.closeStepperTooltip(); }, this);\n };\n Stepper.prototype.openStepperTooltip = function (index) {\n var currentStep = this.steps[parseInt(index.toString(), 10)];\n if (this.showTooltip && (currentStep.label || currentStep.text)) {\n if (!this.tooltipOpen) {\n this.updateTooltipContent(index);\n this.tooltipObj.open(this.stepperItemElements[parseInt((index).toString(), 10)]);\n if (this.stepType.toLocaleLowerCase() !== 'label' && ((this.stepType.toLocaleLowerCase() === 'indicator') ||\n (currentStep.label !== '' && currentStep.iconCss !== '') || (currentStep.label === null && currentStep.iconCss === '' && currentStep.text !== ''))) {\n var tooltipPopupClass = currentStep.status.toLowerCase() === 'inprogress' ?\n STEPPERTOOLTIP + \" \" + STEPPERIPROGRESSTIP + \" \" + (this.cssClass ? this.cssClass : '') : STEPPERTOOLTIP + \" \" + (this.cssClass ? this.cssClass : '');\n this.tooltipObj.setProperties({ cssClass: tooltipPopupClass.trim() });\n }\n this.tooltipOpen = true;\n }\n }\n };\n Stepper.prototype.closeStepperTooltip = function () {\n if (this.tooltipOpen) {\n this.tooltipObj.close();\n this.tooltipOpen = false;\n }\n };\n Stepper.prototype.updateTooltipContent = function (index) {\n if (this.showTooltip) {\n if (this.isReact) {\n this.clearTemplate(['stepperTooltipTemplate']);\n }\n var content = void 0;\n var currentStep = this.steps[parseInt(index.toString(), 10)];\n if (this.tooltipTemplate) {\n content = this.createElement('span', { className: 'e-stepper-tooltip-content' });\n var templateFunction = this.getTemplateFunction(this.tooltipTemplate);\n append(templateFunction({ value: currentStep }, this, 'stepperTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate), content);\n this.tooltipObj.setProperties({ content: content }, true);\n }\n else {\n var content_1 = currentStep.label ? currentStep.label : currentStep.text;\n this.tooltipObj.setProperties({ content: initializeCSPTemplate(function () { return content_1; }) }, true);\n }\n this.renderReactTemplates();\n }\n };\n Stepper.prototype.stepClickHandler = function (index, e, itemElement) {\n var clickEventArgs = {\n element: itemElement, event: e, previousStep: this.activeStep,\n activeStep: index\n };\n this.trigger('stepClick', clickEventArgs);\n this.navigateToStep(index, e, itemElement, true);\n };\n Stepper.prototype.updateTemplateFunction = function () {\n this.templateFunction = this.template ? this.getTemplateFunction(this.template) : null;\n };\n Stepper.prototype.renderItemContent = function (index, isrerender) {\n var listItems = this.stepperItemList.querySelectorAll('li');\n if (isrerender) {\n this.removeItemContent(listItems[parseInt((index).toString(), 10)]);\n }\n if (this.template) {\n if (isrerender) {\n listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE);\n }\n else {\n this.stepperItemContainer.classList.add(TEMPLATE);\n }\n var item = this.steps[parseInt(index.toString(), 10)];\n append(this.templateFunction({ step: item, currentStep: index }, this, 'stepperTemplate', (this.element.id + '_stepperTemplate'), this.isStringTemplate), isrerender ? listItems[parseInt((index).toString(), 10)] : this.stepperItemContainer);\n }\n this.renderReactTemplates();\n };\n Stepper.prototype.removeItemContent = function (ele) {\n ele.classList.remove(TEMPLATE);\n var firstChild = ele.firstElementChild;\n for (var i = 0; i < ele.childElementCount; i++) {\n firstChild.remove();\n }\n };\n Stepper.prototype.updateContent = function () {\n if (this.isReact) {\n this.clearTemplate(['stepperTemplate']);\n }\n for (var i = 0; i < this.steps.length; i++) {\n this.renderItemContent(i, true);\n }\n };\n /**\n * Gets template content based on the template property value.\n *\n * @param {string | Function} template - Template property value.\n * @returns {Function} - Return template function.\n * @hidden\n */\n Stepper.prototype.getTemplateFunction = function (template) {\n if (typeof template === 'string') {\n var content = '';\n try {\n var tempEle = select(template);\n if (tempEle) {\n //Return innerHTML incase of jsrenderer script else outerHTML\n content = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;\n }\n else {\n content = template;\n }\n }\n catch (e) {\n content = template;\n }\n return compile(content);\n }\n else {\n /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n return compile(template);\n }\n };\n Stepper.prototype.navigateToStep = function (index, e, itemElement, isInteracted, isUpdated) {\n var _this = this;\n var eventArgs = {\n element: itemElement, event: e, isInteracted: isInteracted,\n previousStep: this.activeStep, activeStep: index, cancel: false\n };\n if (isUpdated !== false) {\n var previousStep_1 = this.activeStep;\n this.trigger('stepChanging', eventArgs, function (args) {\n if (args.cancel) {\n return;\n }\n _this.navigationHandler(index);\n var eventArgs = {\n element: itemElement, event: e, isInteracted: isInteracted,\n previousStep: previousStep_1, activeStep: _this.activeStep\n };\n _this.trigger('stepChanged', eventArgs);\n });\n }\n else {\n this.navigationHandler(index);\n }\n };\n Stepper.prototype.navigationHandler = function (index, stepStatus, isUpdated) {\n index = (index >= this.steps.length - 1) ? this.steps.length - 1 : index;\n var Itemslength = this.stepperItemElements.length;\n if (index >= 0 && index < Itemslength - 1) {\n index = this.stepperItemElements[parseInt(index.toString(), 10)].classList.contains(DISABLED$2) ? this.activeStep : index;\n }\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.activeStep = parseInt(index.toString(), 10);\n this.isProtectedOnChange = prevOnChange;\n for (var i = 0; i < this.steps.length; i++) {\n var itemElement = this.stepperItemElements[parseInt(i.toString(), 10)];\n var item = this.steps[parseInt(i.toString(), 10)];\n itemElement.classList.remove(SELECTED$2, INPROGRESS, COMPLETED, NOTSTARTED);\n if (i === this.activeStep) {\n itemElement.classList.add(SELECTED$2);\n }\n if (this.activeStep >= 0 && this.progressbar) {\n if (this.element.classList.contains(HORIZSTEP)) {\n if ((this.element.classList.contains(LABELBEFORE) || this.element.classList.contains(LABELAFTER)) &&\n !this.element.classList.contains(STEPINDICATOR) &&\n this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(STEPICON)) {\n var progressPos = this.element.querySelector('.e-stepper-progressbar');\n var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]\n .firstChild;\n var value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft +\n (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;\n if (this.element.classList.contains(RTL$3)) {\n value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +\n (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;\n this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');\n }\n else {\n this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');\n }\n }\n else {\n var totalLiWidth = 0;\n var activeLiWidth = 0;\n for (var j = 0; j < this.stepperItemElements.length; j++) {\n totalLiWidth = totalLiWidth + this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;\n if (j <= this.activeStep) {\n if (j < this.activeStep) {\n activeLiWidth = activeLiWidth +\n this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;\n }\n else if (j === this.activeStep && j !== 0) {\n activeLiWidth = activeLiWidth +\n (this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth / 2);\n }\n }\n }\n var spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth) /\n (this.stepperItemElements.length - 1);\n var progressValue = ((activeLiWidth + (spaceWidth * this.activeStep)) /\n this.stepperItemList.offsetWidth) * 100;\n this.progressbar.style.setProperty(PROGRESSVALUE$1, (progressValue) + '%');\n }\n }\n else {\n this.progressbar.style.setProperty(PROGRESSVALUE$1, ((100 / (this.steps.length - 1)) * index) + '%');\n }\n }\n else if (this.activeStep < 0 && this.progressbar) {\n this.progressbar.style.setProperty(PROGRESSVALUE$1, 0 + '%');\n }\n if (i === this.activeStep) {\n itemElement.classList.add(INPROGRESS);\n }\n else if (this.activeStep > 0 && i < this.activeStep) {\n itemElement.classList.add(COMPLETED);\n }\n else {\n itemElement.classList.add(NOTSTARTED);\n }\n if (itemElement.classList.contains(INPROGRESS)) {\n attributes(itemElement, { 'tabindex': '0', 'aria-current': 'true' });\n }\n else {\n attributes(itemElement, { 'tabindex': '-1', 'aria-current': 'false' });\n }\n var prevOnChange_1 = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (isUpdated !== false) {\n if (i < this.activeStep || (this.steps.length - 1 === this.activeStep && item.status.toLowerCase() === 'completed')) {\n item.status = StepStatus.Completed;\n }\n else if (i === this.activeStep) {\n item.status = StepStatus.InProgress;\n }\n else if (i > this.activeStep) {\n item.status = StepStatus.NotStarted;\n }\n if (stepStatus && this.activeStep === i) {\n item.status = stepStatus;\n }\n if (item.status.toLowerCase() === 'completed') {\n itemElement.classList.remove(SELECTED$2, INPROGRESS, NOTSTARTED);\n itemElement.classList.add(COMPLETED);\n }\n if (item.status.toLowerCase() === 'notstarted') {\n itemElement.classList.remove(SELECTED$2, INPROGRESS, COMPLETED);\n itemElement.classList.add(NOTSTARTED);\n }\n }\n this.isProtectedOnChange = prevOnChange_1;\n if (this.renderDefault(i) && this.element.classList.contains(STEPINDICATOR) && !itemElement.classList.contains('e-step-valid') && !itemElement.classList.contains('e-step-error')) {\n if (itemElement.classList.contains(COMPLETED)) {\n itemElement.firstChild.classList.remove('e-icons', 'e-step-indicator');\n itemElement.firstChild.classList.add(ICONCSS, 'e-icons', 'e-check');\n }\n else if (itemElement.classList.contains(INPROGRESS) || itemElement.classList.contains(NOTSTARTED)) {\n itemElement.firstChild.classList.remove(ICONCSS, 'e-icons', 'e-check');\n itemElement.firstChild.classList.add('e-icons', 'e-step-indicator');\n }\n }\n }\n this.updateStepInteractions();\n };\n Stepper.prototype.updateStepInteractions = function () {\n var _this = this;\n this.element.classList.toggle(LINEARSTEP, this.linear);\n this.stepperItemElements.forEach(function (step, index) {\n var isPreviousStep = (index === _this.activeStep - 1);\n var isNextStep = (index === _this.activeStep + 1);\n step.classList.toggle(PREVSTEP, isPreviousStep);\n step.classList.toggle(NEXTSTEP, isNextStep);\n });\n };\n Stepper.prototype.removeItemElements = function () {\n for (var i = 0; i < this.stepperItemElements.length; i++) {\n remove(this.stepperItemElements[parseInt(i.toString(), 10)]);\n }\n this.stepperItemElements = [];\n };\n /**\n * Move to next step from current step in Stepper.\n *\n * @returns {void}\n */\n Stepper.prototype.nextStep = function () {\n if (this.activeStep !== this.steps.length - 1) {\n this.navigateToStep(this.activeStep + 1, null, null, false);\n }\n };\n /**\n * Move to previous step from current step in Stepper.\n *\n * @returns {void}\n */\n Stepper.prototype.previousStep = function () {\n if (this.activeStep > 0) {\n this.navigateToStep(this.activeStep - 1, null, null, false);\n }\n };\n /**\n * Reset the state of the Stepper and move to the first step.\n *\n * @returns {void}\n */\n Stepper.prototype.reset = function () {\n if (this.activeStep === 0) {\n this.updateStepInteractions();\n }\n else {\n var isDisabled = this.stepperItemElements[0].classList.contains(DISABLED$2) ? true : false;\n this.navigateToStep(isDisabled ? -1 : 0, null, null, false);\n }\n };\n /**\n * Refreshes the position of the progress bar programmatically when the dimensions of the parent container are changed.\n *\n * @returns {void}\n */\n Stepper.prototype.refreshProgressbar = function () {\n if (this.stepperItemList && this.progressbar) {\n this.setProgressPosition(this.element);\n }\n this.navigateToStep(this.activeStep, null, null, false, false);\n };\n Stepper.prototype.updateElementClassArray = function () {\n var classArray = [RTL$3, READONLY, 'e-steps-focus', LABELAFTER, LABELBEFORE, 'e-label-top',\n 'e-label-bottom', 'e-label-start', 'e-label-end', STEPINDICATOR, LABELINDICATOR, VERTICALSTEP, HORIZSTEP, LINEARSTEP];\n removeClass([this.element], classArray);\n };\n /**\n * Destroy the stepper control.\n *\n * @returns {void}\n */\n Stepper.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n // unwires the events and detach the li elements\n this.removeItemElements();\n this.clearTemplate();\n if (this.stepperItemList) {\n remove(this.stepperItemList);\n }\n this.stepperItemList = null;\n if (this.progressStep) {\n remove(this.progressStep);\n }\n this.progressStep = null;\n this.progressbar = null;\n this.progressBarPosition = null;\n this.stepperItemContainer = null;\n this.textContainer = null;\n this.labelContainer = null;\n this.updateElementClassArray();\n this.element.removeAttribute('aria-label');\n if (this.showTooltip) {\n this.tooltipObj.destroy();\n this.tooltipObj = null;\n }\n if (this.keyboardModuleStepper) {\n this.keyboardModuleStepper.destroy();\n }\n this.keyboardModuleStepper = null;\n };\n Stepper.prototype.wireKeyboardEvent = function () {\n this.keyboardModuleStepper = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n };\n Stepper.prototype.keyActionHandler = function (e) {\n if (this.readOnly) {\n return;\n }\n switch (e.action) {\n case 'uparrow':\n case 'downarrow':\n case 'leftarrow':\n case 'rightarrow':\n case 'tab':\n case 'shiftTab':\n this.handleNavigation(this.enableRtl && this.element.classList.contains(HORIZSTEP) ? (e.action === 'leftarrow' || e.action === 'tab' || e.action === 'uparrow') : (e.action === 'rightarrow' || e.action === 'tab' || e.action === 'downarrow'), e);\n break;\n case 'space':\n case 'enter':\n case 'escape':\n this.handleNavigation(null, e);\n break;\n case 'home':\n case 'end':\n this.handleNavigation(null, e, this.enableRtl);\n break;\n }\n };\n Stepper.prototype.handleNavigation = function (isNextStep, e, isRTL) {\n this.isKeyNavFocus = true;\n this.element.classList.add('e-steps-focus');\n var focusedEle = this.element.querySelector('.' + FOCUS$1);\n if (!focusedEle) {\n focusedEle = this.element.querySelector('.' + SELECTED$2);\n }\n var stepItems = Array.prototype.slice.call(this.stepperItemList.children);\n var index = stepItems.indexOf(focusedEle);\n if (e.action === 'tab' || e.action === 'shiftTab' || e.action === 'downarrow' || e.action === 'uparrow' || e.action === 'space' || e.action === 'home' || e.action === 'end') {\n if ((e.action === 'tab' && index === stepItems.length - 1) || (e.action === 'shiftTab' && index === 0)) {\n if (focusedEle.classList.contains(FOCUS$1)) {\n this.updateStepFocus();\n return;\n }\n }\n else {\n e.preventDefault();\n }\n }\n if (e.action === 'escape') {\n stepItems[parseInt(index.toString(), 10)].classList.remove(FOCUS$1);\n this.element.classList.remove('e-steps-focus');\n }\n if (!(e.action === 'space' || e.action === 'enter')) {\n var prevIndex = index;\n index = isNextStep ? index + 1 : index - 1;\n while ((index >= 0 && index < stepItems.length) && stepItems[parseInt(index.toString(), 10)].classList.contains(DISABLED$2)) {\n index = isNextStep ? index + 1 : index - 1;\n }\n index = (index < 0) ? 0 : (index > stepItems.length - 1) ? stepItems.length - 1 : index;\n if (stepItems[parseInt(prevIndex.toString(), 10)].classList.contains(FOCUS$1)) {\n stepItems[parseInt(prevIndex.toString(), 10)].classList.remove(FOCUS$1);\n }\n if ((e.action === 'home' || e.action === 'end')) {\n if (e.action === 'home') {\n index = isRTL ? stepItems.length - 1 : 0;\n }\n else {\n index = isRTL ? 0 : stepItems.length - 1;\n }\n }\n if (index >= 0 && index < stepItems.length) {\n stepItems[parseInt(index.toString(), 10)].classList.add(FOCUS$1);\n }\n }\n else if ((e.action === 'space' || e.action === 'enter')) {\n var isupdateFocus = false;\n if (this.linear) {\n var linearModeValue = this.activeStep - index;\n if (Math.abs(linearModeValue) === 1) {\n this.navigateToStep(index, null, null, true);\n isupdateFocus = true;\n }\n }\n else {\n this.navigateToStep(index, null, null, true);\n isupdateFocus = true;\n }\n if (isupdateFocus) {\n this.updateStepFocus();\n this.stepperItemElements[index].focus();\n }\n }\n };\n Stepper.prototype.renderStepperItems = function (isUpdate, isStepType) {\n this.updateElementClassArray();\n this.removeItemElements();\n this.element.querySelector('.e-stepper-progressbar').remove();\n if (isUpdate) {\n this.updatePosition();\n }\n if (isStepType) {\n this.updateStepType();\n }\n if (this.readOnly && !this.element.classList.contains(READONLY)) {\n this.element.classList.add(READONLY);\n }\n if (this.enableRtl && !this.element.classList.contains(RTL$3)) {\n this.element.classList.add(RTL$3);\n }\n this.updateOrientaion(this.element);\n this.renderItems();\n this.renderProgressBar(this.element);\n this.checkValidStep();\n this.updateAnimation();\n this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {StepperModel} newProp - Specifies new properties\n * @param {StepperModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n Stepper.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 'steps': {\n if (!(newProp.steps instanceof Array && oldProp.steps instanceof Array)) {\n var stepCounts = Object.keys(newProp.steps);\n for (var i = 0; i < stepCounts.length; i++) {\n var index = parseInt(Object.keys(newProp.steps)[i], 10);\n var changedPropsCount = Object.keys(newProp.steps[index]).length;\n for (var j = 0; j < changedPropsCount; j++) {\n var property = Object.keys(newProp.steps[index])[j];\n if (property === 'status') {\n if (this.activeStep === index) {\n this.navigationHandler(index, newProp.steps[index].status);\n }\n else {\n this.steps[index].status = oldProp.steps[index].status;\n }\n }\n else {\n this.removeItemElements();\n this.renderItems();\n this.updateStepperStatus();\n }\n if (property === 'label' && (this.steps[index].iconCss || this.steps[index].text) &&\n this.stepType.toLowerCase() === 'default') {\n this.refreshProgressbar();\n }\n this.updateStepInteractions();\n this.checkValidStep();\n }\n }\n }\n else {\n this.renderStepperItems(true, true);\n }\n break;\n }\n case 'orientation':\n this.updateOrientaion(this.element);\n this.renderStepperItems(true);\n break;\n case 'activeStep':\n this.activeStep = (newProp.activeStep > this.steps.length - 1 || newProp.activeStep < -1) ?\n oldProp.activeStep : this.activeStep;\n if (this.activeStep >= 0 && this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]\n .classList.contains(DISABLED$2)) {\n this.activeStep = oldProp.activeStep;\n }\n if (this.linear) {\n var linearModeValue = oldProp.activeStep - this.activeStep;\n if (Math.abs(linearModeValue) === 1) {\n this.navigateToStep(this.activeStep, null, null, true);\n }\n }\n else {\n this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);\n }\n break;\n case 'enableRtl':\n this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL$3);\n break;\n case 'readOnly':\n this.element.classList[this.readOnly ? 'add' : 'remove'](READONLY);\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.trim().split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.trim().split(' '));\n }\n if (this.tooltipObj) {\n this.tooltipObj.setProperties({ cssClass: this.cssClass ? (STEPPERTOOLTIP + ' ' + this.cssClass) : STEPPERTOOLTIP });\n }\n break;\n case 'labelPosition':\n this.renderStepperItems(true);\n break;\n case 'showTooltip':\n this.updateTooltip();\n break;\n case 'stepType':\n this.renderStepperItems(true, true);\n break;\n case 'template':\n this.updateTemplateFunction();\n this.updateContent();\n break;\n case 'animation':\n this.updateAnimation();\n break;\n case 'linear':\n this.updateStepInteractions();\n break;\n }\n }\n };\n __decorate$e([\n Property(0)\n ], Stepper.prototype, \"activeStep\", void 0);\n __decorate$e([\n Complex({}, StepperAnimationSettings)\n ], Stepper.prototype, \"animation\", void 0);\n __decorate$e([\n Property(false)\n ], Stepper.prototype, \"linear\", void 0);\n __decorate$e([\n Property(false)\n ], Stepper.prototype, \"showTooltip\", void 0);\n __decorate$e([\n Property('')\n ], Stepper.prototype, \"template\", void 0);\n __decorate$e([\n Property('')\n ], Stepper.prototype, \"tooltipTemplate\", void 0);\n __decorate$e([\n Property(StepLabelPosition.Bottom)\n ], Stepper.prototype, \"labelPosition\", void 0);\n __decorate$e([\n Property(StepType.Default)\n ], Stepper.prototype, \"stepType\", void 0);\n __decorate$e([\n Event()\n ], Stepper.prototype, \"stepChanged\", void 0);\n __decorate$e([\n Event()\n ], Stepper.prototype, \"stepChanging\", void 0);\n __decorate$e([\n Event()\n ], Stepper.prototype, \"stepClick\", void 0);\n __decorate$e([\n Event()\n ], Stepper.prototype, \"beforeStepRender\", void 0);\n Stepper = __decorate$e([\n NotifyPropertyChanges\n ], Stepper);\n return Stepper;\n}(StepperBase));\n\nexport { Accordion, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, ActionSettings, AppBar, Breadcrumb, BreadcrumbItem, BreadcrumbOverflowMode, Carousel, CarouselItem, CarouselSwipeMode, ContextMenu, FieldSettings, FieldsSettings, HScroll, Header, Item, Menu, MenuAnimationSettings, MenuItem, NodeAnimationSettings, Sidebar, Step, StepLabelPosition, StepStatus, StepType, Stepper, StepperAnimationSettings, StepperBase, StepperOrientation, Tab, TabActionSettings, TabAnimationSettings, TabItem, Toolbar, TreeView, VScroll, addScrolling, destroyScroll };\n","import { isNullOrUndefined, Property, ChildProperty, setStyleAttribute, formatUnit, Browser, EventHandler, removeClass, addClass, Animation as Animation$1, Complex, Event, NotifyPropertyChanges, Component, createElement, detach, L10n, attributes, Draggable, isBlazor, compile, append, SanitizeHtmlHelper, extend, prepend, animationMode, Collection, select, selectAll, remove, closest, getUniqueID, Touch, classList } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\n\n/**\n * Position library\n */\nvar elementRect;\nvar popupRect;\nvar element;\nvar parentDocument;\nvar fixedParent = false;\n/**\n *\n * @param {HTMLElement} anchor - specifies the element\n * @param {HTMLElement} element - specifies the element\n * @returns {OffsetPosition} - returns the value\n */\nfunction calculateRelativeBasedPosition(anchor, element) {\n var fixedElement = false;\n var anchorPos = { left: 0, top: 0 };\n var tempAnchor = anchor;\n if (!anchor || !element) {\n return anchorPos;\n }\n if (isNullOrUndefined(element.offsetParent) && element.style.position === 'fixed') {\n fixedElement = true;\n }\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left += anchor.offsetLeft;\n anchorPos.top += anchor.offsetTop;\n anchor = anchor.offsetParent;\n }\n anchor = tempAnchor;\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left -= anchor.scrollLeft;\n anchorPos.top -= anchor.scrollTop;\n anchor = anchor.parentElement;\n }\n return anchorPos;\n}\n/**\n *\n * @param {Element} currentElement - specifies the element\n * @param {string} positionX - specifies the position\n * @param {string} positionY - specifies the position\n * @param {boolean} parentElement - specifies the boolean\n * @param {ClientRect} targetValues - specifies the client\n * @returns {OffsetPosition} - returns the position\n */\nfunction calculatePosition(currentElement, positionX, positionY, parentElement, targetValues) {\n popupRect = undefined;\n popupRect = targetValues;\n fixedParent = parentElement ? true : false;\n if (!currentElement) {\n return { left: 0, top: 0 };\n }\n if (!positionX) {\n positionX = 'left';\n }\n if (!positionY) {\n positionY = 'top';\n }\n parentDocument = currentElement.ownerDocument;\n element = currentElement;\n var pos = { left: 0, top: 0 };\n return updatePosition(positionX.toLowerCase(), positionY.toLowerCase(), pos);\n}\n/**\n *\n * @param {number} value - specifies the number\n * @param {OffsetPosition} pos - specifies the position\n * @returns {void}\n */\nfunction setPosx(value, pos) {\n pos.left = value;\n}\n/**\n *\n * @param {number} value - specifies the number\n * @param {OffsetPosition} pos - specifies the position\n * @returns {void}\n */\nfunction setPosy(value, pos) {\n pos.top = value;\n}\n/**\n *\n * @param {string} posX - specifies the position\n * @param {string} posY - specifies the position\n * @param {OffsetPosition} pos - specifies the position\n * @returns {OffsetPosition} - returns the postion\n */\nfunction updatePosition(posX, posY, pos) {\n elementRect = element.getBoundingClientRect();\n switch (posY + posX) {\n case 'topcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'topright':\n setPosx(getElementRight(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'centercenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerright':\n setPosx(getElementRight(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'bottomcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomright':\n setPosx(getElementRight(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementBottom(), pos);\n break;\n default:\n case 'topleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementTop(), pos);\n break;\n }\n element = null;\n return pos;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getBodyScrollTop() {\n return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getBodyScrollLeft() {\n return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementBottom() {\n return fixedParent ? elementRect.bottom : elementRect.bottom + getBodyScrollTop();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementVCenter() {\n return getElementTop() + (elementRect.height / 2);\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementTop() {\n return fixedParent ? elementRect.top : elementRect.top + getBodyScrollTop();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementLeft() {\n return elementRect.left + getBodyScrollLeft();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementRight() {\n var popupWidth = (element && (element.classList.contains('e-date-wrapper') || element.classList.contains('e-datetime-wrapper') || (element.classList.contains('e-ddl') && element.classList.contains('e-rtl')) || element.classList.contains('e-date-range-wrapper'))) ? (popupRect ? popupRect.width : 0) :\n (popupRect && (elementRect.width >= popupRect.width) ? popupRect.width : 0);\n return elementRect.right + getBodyScrollLeft() - popupWidth;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementHCenter() {\n return getElementLeft() + (elementRect.width / 2);\n}\n\n/**\n * Collision module.\n */\nvar parentDocument$1;\nvar targetContainer;\n/**\n *\n * @param {HTMLElement} element - specifies the element\n * @param {HTMLElement} viewPortElement - specifies the element\n * @param {CollisionCoordinates} axis - specifies the collision coordinates\n * @param {OffsetPosition} position - specifies the position\n * @returns {void}\n */\nfunction fit(element, viewPortElement, axis, position) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n if (axis === void 0) { axis = { X: false, Y: false }; }\n if (!axis.Y && !axis.X) {\n return { left: 0, top: 0 };\n }\n var elemData = element.getBoundingClientRect();\n targetContainer = viewPortElement;\n parentDocument$1 = element.ownerDocument;\n if (!position) {\n position = calculatePosition(element, 'left', 'top');\n }\n if (axis.X) {\n var containerWidth = targetContainer ? getTargetContainerWidth() : getViewPortWidth();\n var containerLeft = ContainerLeft();\n var containerRight = ContainerRight();\n var overLeft = containerLeft - position.left;\n var overRight = position.left + elemData.width - containerRight;\n if (elemData.width > containerWidth) {\n if (overLeft > 0 && overRight <= 0) {\n position.left = containerRight - elemData.width;\n }\n else if (overRight > 0 && overLeft <= 0) {\n position.left = containerLeft;\n }\n else {\n position.left = overLeft > overRight ? (containerRight - elemData.width) : containerLeft;\n }\n }\n else if (overLeft > 0) {\n position.left += overLeft;\n }\n else if (overRight > 0) {\n position.left -= overRight;\n }\n }\n if (axis.Y) {\n var containerHeight = targetContainer ? getTargetContainerHeight() : getViewPortHeight();\n var containerTop = ContainerTop();\n var containerBottom = ContainerBottom();\n var overTop = containerTop - position.top;\n var overBottom = position.top + elemData.height - containerBottom;\n if (elemData.height > containerHeight) {\n if (overTop > 0 && overBottom <= 0) {\n position.top = containerBottom - elemData.height;\n }\n else if (overBottom > 0 && overTop <= 0) {\n position.top = containerTop;\n }\n else {\n position.top = overTop > overBottom ? (containerBottom - elemData.height) : containerTop;\n }\n }\n else if (overTop > 0) {\n position.top += overTop;\n }\n else if (overBottom > 0) {\n position.top -= overBottom;\n }\n }\n return position;\n}\n/**\n *\n * @param {HTMLElement} element - specifies the html element\n * @param {HTMLElement} viewPortElement - specifies the html element\n * @param {number} x - specifies the number\n * @param {number} y - specifies the number\n * @returns {string[]} - returns the string value\n */\nfunction isCollide(element, viewPortElement, x, y) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n var elemOffset = calculatePosition(element, 'left', 'top');\n if (x) {\n elemOffset.left = x;\n }\n if (y) {\n elemOffset.top = y;\n }\n var data = [];\n targetContainer = viewPortElement;\n parentDocument$1 = element.ownerDocument;\n var elementRect = element.getBoundingClientRect();\n var top = elemOffset.top;\n var left = elemOffset.left;\n var right = elemOffset.left + elementRect.width;\n var bottom = elemOffset.top + elementRect.height;\n var yAxis = topCollideCheck(top, bottom);\n var xAxis = leftCollideCheck(left, right);\n if (yAxis.topSide) {\n data.push('top');\n }\n if (xAxis.rightSide) {\n data.push('right');\n }\n if (xAxis.leftSide) {\n data.push('left');\n }\n if (yAxis.bottomSide) {\n data.push('bottom');\n }\n return data;\n}\n/**\n *\n * @param {HTMLElement} element - specifies the element\n * @param {HTMLElement} target - specifies the element\n * @param {number} offsetX - specifies the number\n * @param {number} offsetY - specifies the number\n * @param {string} positionX - specifies the string value\n * @param {string} positionY - specifies the string value\n * @param {HTMLElement} viewPortElement - specifies the element\n * @param {CollisionCoordinates} axis - specifies the collision axis\n * @param {boolean} fixedParent - specifies the boolean\n * @returns {void}\n */\nfunction flip(element, target, offsetX, offsetY, positionX, positionY, viewPortElement, \n/* eslint-disable */\naxis, fixedParent) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n if (axis === void 0) { axis = { X: true, Y: true }; }\n if (!target || !element || !positionX || !positionY || (!axis.X && !axis.Y)) {\n return;\n }\n var tEdge = { TL: null,\n TR: null,\n BL: null,\n BR: null\n }, eEdge = {\n TL: null,\n TR: null,\n BL: null,\n BR: null\n /* eslint-enable */\n };\n var elementRect;\n if (window.getComputedStyle(element).display === 'none') {\n var oldVisibility = element.style.visibility;\n element.style.visibility = 'hidden';\n element.style.display = 'block';\n elementRect = element.getBoundingClientRect();\n element.style.removeProperty('display');\n element.style.visibility = oldVisibility;\n }\n else {\n elementRect = element.getBoundingClientRect();\n }\n var pos = {\n posX: positionX, posY: positionY, offsetX: offsetX, offsetY: offsetY, position: { left: 0, top: 0 }\n };\n targetContainer = viewPortElement;\n parentDocument$1 = target.ownerDocument;\n updateElementData(target, tEdge, pos, fixedParent, elementRect);\n setPosition(eEdge, pos, elementRect);\n if (axis.X) {\n leftFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n if (axis.Y && tEdge.TL.top > -1) {\n topFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n setPopup(element, pos, elementRect);\n}\n/**\n *\n * @param {HTMLElement} element - specifies the element\n * @param {PositionLocation} pos - specifies the location\n * @param {ClientRect} elementRect - specifies the client rect\n * @returns {void}\n */\nfunction setPopup(element, pos, elementRect) {\n var left = 0;\n var top = 0;\n if (element.offsetParent != null\n && (getComputedStyle(element.offsetParent).position === 'absolute' ||\n getComputedStyle(element.offsetParent).position === 'relative')) {\n var data = calculatePosition(element.offsetParent, 'left', 'top', false, elementRect);\n left = data.left;\n top = data.top;\n }\n var scaleX = 1;\n var scaleY = 1;\n var tranformElement = getTransformElement(element);\n if (tranformElement) {\n var transformStyle = getComputedStyle(tranformElement).transform;\n if (transformStyle !== 'none') {\n var matrix = new DOMMatrix(transformStyle);\n scaleX = matrix.a;\n scaleY = matrix.d;\n }\n var zoomStyle = getComputedStyle(tranformElement).zoom;\n if (zoomStyle !== 'none') {\n var bodyZoom = getZoomValue(document.body);\n scaleX = bodyZoom * scaleX;\n scaleY = bodyZoom * scaleY;\n }\n }\n element.style.top = ((pos.position.top / scaleY) + pos.offsetY - (top / scaleY)) + 'px';\n element.style.left = ((pos.position.left / scaleX) + pos.offsetX - (left / scaleX)) + 'px';\n}\nfunction getZoomValue(element) {\n var zoomValue = getComputedStyle(element).zoom;\n return parseFloat(zoomValue) || 1; // Default zoom value is 1 (no zoom)\n}\n/**\n *\n * @param {HTMLElement} element - specifies the element\n * @returns {HTMLElement} The modified element.\n */\nfunction getTransformElement(element) {\n while (element) {\n var transform = window.getComputedStyle(element).transform;\n var zoom = getZoomValue(document.body);\n if ((transform && transform !== 'none') || (zoom && zoom !== 1)) {\n return element;\n }\n if (element === document.body) {\n return null;\n }\n element = (element.offsetParent || element.parentElement);\n }\n return null;\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {EdgeOffset} edge - specifies the offset\n * @param {PositionLocation} pos - specifies theloaction\n * @param {boolean} fixedParent - specifies the boolean\n * @param {ClientRect} elementRect - specifies the client rect\n * @returns {void}\n */\nfunction updateElementData(target, edge, pos, fixedParent, elementRect) {\n pos.position = calculatePosition(target, pos.posX, pos.posY, fixedParent, elementRect);\n edge.TL = calculatePosition(target, 'left', 'top', fixedParent, elementRect);\n edge.TR = calculatePosition(target, 'right', 'top', fixedParent, elementRect);\n edge.BR = calculatePosition(target, 'left', 'bottom', fixedParent, elementRect);\n edge.BL = calculatePosition(target, 'right', 'bottom', fixedParent, elementRect);\n}\n/**\n *\n * @param {EdgeOffset} eStatus - specifies the status\n * @param {PositionLocation} pos - specifies the location\n * @param {ClientRect} elementRect - specifies the client\n * @returns {void}\n */\nfunction setPosition(eStatus, pos, elementRect) {\n eStatus.TL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX };\n eStatus.TR = { top: eStatus.TL.top, left: eStatus.TL.left + elementRect.width };\n eStatus.BL = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left };\n eStatus.BR = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left + elementRect.width };\n}\n/**\n *\n * @param {number} left - specifies the number\n * @param {number} right - specifies the number\n * @returns {LeftCorners} - returns the value\n */\nfunction leftCollideCheck(left, right) {\n //eslint-disable-next-line\n var leftSide = false, rightSide = false;\n if (((left - getBodyScrollLeft$1()) < ContainerLeft())) {\n leftSide = true;\n }\n if (right > ContainerRight()) {\n rightSide = true;\n }\n return { leftSide: leftSide, rightSide: rightSide };\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {EdgeOffset} edge - specifes the element\n * @param {EdgeOffset} tEdge - specifies the edge offset\n * @param {PositionLocation} pos - specifes the location\n * @param {ClientRect} elementRect - specifies the client\n * @param {boolean} deepCheck - specifies the boolean value\n * @returns {void}\n */\nfunction leftFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = leftCollideCheck(edge.TL.left, edge.TR.left);\n var collide = topCollideCheck(edge.TL.top, edge.BL.top);\n if ((tEdge.TL.left - getBodyScrollLeft$1()) <= ContainerLeft()) {\n collideSide.leftSide = false;\n }\n if (tEdge.TR.left > ContainerRight()) {\n collideSide.rightSide = false;\n }\n if ((collideSide.leftSide && !collideSide.rightSide) || (!collideSide.leftSide && collideSide.rightSide)) {\n if (pos.posX === 'right') {\n pos.posX = 'left';\n }\n else {\n pos.posX = 'right';\n }\n pos.offsetX = pos.offsetX + elementRect.width;\n pos.offsetX = -1 * pos.offsetX;\n pos.position = calculatePosition(target, pos.posX, pos.posY, false);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n leftFlip(target, edge, tEdge, pos, elementRect, false);\n }\n if ((!collideSide.leftSide && collideSide.rightSide && collide.bottomSide)) {\n pos.offsetX = 0;\n }\n }\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {EdgeOffset} edge - specifies the offset\n * @param {EdgeOffset} tEdge - specifies the offset\n * @param {PositionLocation} pos - specifies the location\n * @param {ClientRect} elementRect - specifies the client rect\n * @param {boolean} deepCheck - specifies the boolean\n * @returns {void}\n */\nfunction topFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = topCollideCheck(edge.TL.top, edge.BL.top);\n if ((tEdge.TL.top - getBodyScrollTop$1()) <= ContainerTop()) {\n collideSide.topSide = false;\n }\n if (tEdge.BL.top >= ContainerBottom() && target.getBoundingClientRect().bottom < window.innerHeight) {\n collideSide.bottomSide = false;\n }\n if ((collideSide.topSide && !collideSide.bottomSide) || (!collideSide.topSide && collideSide.bottomSide)) {\n if (pos.posY === 'top') {\n pos.posY = 'bottom';\n }\n else {\n pos.posY = 'top';\n }\n pos.offsetY = pos.offsetY + elementRect.height;\n pos.offsetY = -1 * pos.offsetY;\n pos.position = calculatePosition(target, pos.posX, pos.posY, false, elementRect);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n topFlip(target, edge, tEdge, pos, elementRect, false);\n }\n }\n}\n/**\n *\n * @param {number} top - specifies the number\n * @param {number} bottom - specifies the number\n * @returns {TopCorners} - retyrns the value\n */\nfunction topCollideCheck(top, bottom) {\n //eslint-disable-next-line\n var topSide = false, bottomSide = false;\n if ((top - getBodyScrollTop$1()) < ContainerTop()) {\n topSide = true;\n }\n if (bottom > ContainerBottom()) {\n bottomSide = true;\n }\n return { topSide: topSide, bottomSide: bottomSide };\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerWidth() {\n return targetContainer.getBoundingClientRect().width;\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerHeight() {\n return targetContainer.getBoundingClientRect().height;\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerLeft() {\n return targetContainer.getBoundingClientRect().left;\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerTop() {\n return targetContainer.getBoundingClientRect().top;\n}\n//eslint-disable-next-line\nfunction ContainerTop() {\n if (targetContainer) {\n return getTargetContainerTop();\n }\n return 0;\n}\n//eslint-disable-next-line\nfunction ContainerLeft() {\n if (targetContainer) {\n return getTargetContainerLeft();\n }\n return 0;\n}\n//eslint-disable-next-line\nfunction ContainerRight() {\n if (targetContainer) {\n return (getBodyScrollLeft$1() + getTargetContainerLeft() + getTargetContainerWidth());\n }\n return (getBodyScrollLeft$1() + getViewPortWidth());\n}\n//eslint-disable-next-line\nfunction ContainerBottom() {\n if (targetContainer) {\n return (getBodyScrollTop$1() + getTargetContainerTop() + getTargetContainerHeight());\n }\n return (getBodyScrollTop$1() + getViewPortHeight());\n}\n/**\n * @returns {number} - returns the scroll top value\n */\nfunction getBodyScrollTop$1() {\n // if(targetContainer)\n // return targetContainer.scrollTop;\n return parentDocument$1.documentElement.scrollTop || parentDocument$1.body.scrollTop;\n}\n/**\n * @returns {number} - returns the scroll left value\n */\nfunction getBodyScrollLeft$1() {\n // if(targetContainer)\n // return targetContainer.scrollLeft;\n return parentDocument$1.documentElement.scrollLeft || parentDocument$1.body.scrollLeft;\n}\n/**\n * @returns {number} - returns the viewport height\n */\nfunction getViewPortHeight() {\n return window.innerHeight;\n}\n/**\n * @returns {number} - returns the viewport width\n */\nfunction getViewPortWidth() {\n var windowWidth = window.innerWidth;\n var documentReact = document.documentElement.getBoundingClientRect();\n var offsetWidth = (isNullOrUndefined(document.documentElement)) ? 0 : documentReact.width;\n return windowWidth - (windowWidth - offsetWidth);\n}\n/**\n * @returns {void}\n */\nfunction destroy() {\n targetContainer = null;\n parentDocument$1 = null;\n}\n\nvar __extends = (undefined && undefined.__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 = (undefined && undefined.__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/**\n * Specifies the offset position values.\n */\nvar PositionData = /** @__PURE__ @class */ (function (_super) {\n __extends(PositionData, _super);\n function PositionData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('left')\n ], PositionData.prototype, \"X\", void 0);\n __decorate([\n Property('top')\n ], PositionData.prototype, \"Y\", void 0);\n return PositionData;\n}(ChildProperty));\n// don't use space in classNames\nvar CLASSNAMES = {\n ROOT: 'e-popup',\n RTL: 'e-rtl',\n OPEN: 'e-popup-open',\n CLOSE: 'e-popup-close'\n};\n/**\n * Represents the Popup Component\n * ```html\n *
e-inherit CSS class to inherit the background and color from AppBar.\n */\nvar AppBar = /** @__PURE__ @class */ (function (_super) {\n __extends$c(AppBar, _super);\n /**\n * Constructor for creating the AppBar widget\n *\n * @param {AppBarModel} options Accepts the AppBar model properties to initiate the rendering\n * @param {string | HTMLElement} element Accepts the DOM element reference\n */\n function AppBar(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n AppBar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.element.classList.remove(CLS_APPBAR);\n this.element.removeAttribute('style');\n this.element.removeAttribute('role');\n };\n AppBar.prototype.getModuleName = function () {\n return 'appbar';\n };\n AppBar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n AppBar.prototype.preRender = function () {\n // pre render code\n };\n AppBar.prototype.render = function () {\n this.element.classList.add(CLS_APPBAR);\n if (this.element.tagName !== 'HEADER') {\n this.element.setAttribute('role', 'banner');\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (this.position === 'Bottom') {\n this.element.classList.add(CLS_HORIZONTAL_BOTTOM);\n }\n if (this.isSticky) {\n this.element.classList.add(CLS_STICKY);\n }\n if (this.enableRtl) {\n this.element.classList.add(CLS_RTL$6);\n }\n this.setHeightMode();\n this.setColorMode();\n if (!isNullOrUndefined(this.htmlAttributes)) {\n this.setHtmlAttributes(this.htmlAttributes, this.element);\n }\n };\n AppBar.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 'mode':\n removeClass([this.element], [CLS_DENSE, CLS_PROMINENT]);\n this.setHeightMode();\n break;\n case 'position':\n if (this.position === 'Bottom') {\n addClass([this.element], CLS_HORIZONTAL_BOTTOM);\n }\n else {\n removeClass([this.element], CLS_HORIZONTAL_BOTTOM);\n }\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.split(' '));\n }\n break;\n case 'isSticky':\n if (this.isSticky) {\n addClass([this.element], CLS_STICKY);\n }\n else {\n removeClass([this.element], CLS_STICKY);\n }\n break;\n case 'htmlAttributes':\n if (!isNullOrUndefined(this.htmlAttributes)) {\n if (!isNullOrUndefined(oldProp.htmlAttributes)) {\n var keys = Object.keys(oldProp.htmlAttributes);\n for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {\n var key = keys_1[_b];\n if (key === 'class') {\n removeClass([this.element], oldProp.htmlAttributes[\"\" + key]);\n }\n else {\n this.element.removeAttribute(key);\n }\n }\n }\n this.setHtmlAttributes(newProp.htmlAttributes, this.element);\n }\n break;\n case 'colorMode':\n removeClass([this.element], [CLS_DARK, CLS_PRIMARY, CLS_INHERIT, CLS_LIGHT]);\n this.setColorMode();\n break;\n case 'enableRtl':\n if (this.enableRtl) {\n addClass([this.element], CLS_RTL$6);\n }\n else {\n removeClass([this.element], CLS_RTL$6);\n }\n break;\n }\n }\n };\n AppBar.prototype.setHtmlAttributes = function (attribute, element) {\n var keys = Object.keys(attribute);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n if (key === 'class') {\n addClass([element], attribute[\"\" + key]);\n }\n else {\n element.setAttribute(key, attribute[\"\" + key]);\n }\n }\n };\n AppBar.prototype.setHeightMode = function () {\n if (this.mode === 'Prominent') {\n this.element.classList.add(CLS_PROMINENT);\n }\n else if (this.mode === 'Dense') {\n this.element.classList.add(CLS_DENSE);\n }\n };\n AppBar.prototype.setColorMode = function () {\n switch (this.colorMode) {\n case 'Light':\n this.element.classList.add(CLS_LIGHT);\n break;\n case 'Dark':\n this.element.classList.add(CLS_DARK);\n break;\n case 'Primary':\n this.element.classList.add(CLS_PRIMARY);\n break;\n case 'Inherit':\n this.element.classList.add(CLS_INHERIT);\n break;\n }\n };\n __decorate$c([\n Property('Regular')\n ], AppBar.prototype, \"mode\", void 0);\n __decorate$c([\n Property('Top')\n ], AppBar.prototype, \"position\", void 0);\n __decorate$c([\n Property()\n ], AppBar.prototype, \"cssClass\", void 0);\n __decorate$c([\n Property(false)\n ], AppBar.prototype, \"isSticky\", void 0);\n __decorate$c([\n Property()\n ], AppBar.prototype, \"htmlAttributes\", void 0);\n __decorate$c([\n Property('Light')\n ], AppBar.prototype, \"colorMode\", void 0);\n __decorate$c([\n Event()\n ], AppBar.prototype, \"created\", void 0);\n __decorate$c([\n Event()\n ], AppBar.prototype, \"destroyed\", void 0);\n AppBar = __decorate$c([\n NotifyPropertyChanges\n ], AppBar);\n return AppBar;\n}(Component));\n\nvar __extends$d = (undefined && undefined.__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$d = (undefined && undefined.__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};\nvar PROGRESSVALUE = '--progress-value';\n/**\n * Defines the status of the step.\n */\nvar StepStatus;\n(function (StepStatus) {\n /**\n * Shows the status of the step is not started.\n */\n StepStatus[\"NotStarted\"] = \"NotStarted\";\n /**\n * Shows the step is in progress.\n */\n StepStatus[\"InProgress\"] = \"InProgress\";\n /**\n * Shows the status of the step is completed.\n */\n StepStatus[\"Completed\"] = \"Completed\";\n})(StepStatus || (StepStatus = {}));\n/**\n * Specifies the steps of the Stepper.\n */\nvar Step = /** @__PURE__ @class */ (function (_super) {\n __extends$d(Step, _super);\n function Step() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$d([\n Property('')\n ], Step.prototype, \"cssClass\", void 0);\n __decorate$d([\n Property(false)\n ], Step.prototype, \"disabled\", void 0);\n __decorate$d([\n Property('')\n ], Step.prototype, \"iconCss\", void 0);\n __decorate$d([\n Property(null)\n ], Step.prototype, \"isValid\", void 0);\n __decorate$d([\n Property('')\n ], Step.prototype, \"label\", void 0);\n __decorate$d([\n Property(false)\n ], Step.prototype, \"optional\", void 0);\n __decorate$d([\n Property(StepStatus.NotStarted)\n ], Step.prototype, \"status\", void 0);\n __decorate$d([\n Property('')\n ], Step.prototype, \"text\", void 0);\n return Step;\n}(ChildProperty));\n/**\n * Defines the orientation type of the Stepper.\n */\nvar StepperOrientation;\n(function (StepperOrientation) {\n /**\n * Steps are displayed horizontally.\n */\n StepperOrientation[\"Horizontal\"] = \"Horizontal\";\n /**\n * Steps are displayed vertically.\n */\n StepperOrientation[\"Vertical\"] = \"Vertical\";\n})(StepperOrientation || (StepperOrientation = {}));\n/**\n * StepperBase component act as base class to the stepper component.\n */\nvar StepperBase = /** @__PURE__ @class */ (function (_super) {\n __extends$d(StepperBase, _super);\n /**\n * * Constructor for Base class\n *\n * @param {StepperBaseModel} options - Specifies the Base model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function StepperBase(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * This method is abstract member of the Component\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Popup = /** @__PURE__ @class */ (function (_super) {\n __extends(Popup, _super);\n function Popup(element, options) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @param {PopupModel} newProp - specifies the new property\n * @param {PopupModel} oldProp - specifies the old property\n * @private\n * @returns {void}\n */\n Popup.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 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'zIndex':\n setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'position':\n case 'relateTo':\n this.refreshPosition();\n break;\n case 'offsetX': {\n var x = newProp.offsetX - oldProp.offsetX;\n this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';\n break;\n }\n case 'offsetY': {\n var y = newProp.offsetY - oldProp.offsetY;\n this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';\n break;\n }\n case 'content':\n this.setContent();\n break;\n case 'actionOnScroll':\n if (newProp.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n else {\n this.unwireScrollEvents();\n }\n break;\n }\n }\n };\n /**\n * gets the Component module name.\n *\n * @returns {void}\n * @private\n */\n Popup.prototype.getModuleName = function () {\n return 'popup';\n };\n /**\n * To resolve if any collision occurs.\n *\n * @returns {void}\n */\n Popup.prototype.resolveCollision = function () {\n this.checkCollision();\n };\n /**\n * gets the persisted state properties of the Component.\n *\n * @returns {void}\n */\n Popup.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the control.\n *\n * @returns {void}\n */\n Popup.prototype.destroy = function () {\n if (this.element.classList.contains('e-popup-open')) {\n this.unwireEvents();\n }\n this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL, CLASSNAMES.OPEN, CLASSNAMES.CLOSE);\n this.content = null;\n this.relateTo = null;\n destroy();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Popup.prototype.render = function () {\n this.element.classList.add(CLASSNAMES.ROOT);\n var styles = {};\n if (this.zIndex !== 1000) {\n styles.zIndex = this.zIndex;\n }\n if (this.width !== 'auto') {\n styles.width = formatUnit(this.width);\n }\n if (this.height !== 'auto') {\n styles.height = formatUnit(this.height);\n }\n setStyleAttribute(this.element, styles);\n this.fixedParent = false;\n this.setEnableRtl();\n this.setContent();\n };\n Popup.prototype.wireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);\n }\n if (this.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n };\n Popup.prototype.wireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);\n }\n }\n };\n Popup.prototype.unwireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.remove(window, 'orientationchange', this.orientationOnChange);\n }\n if (this.actionOnScroll !== 'none') {\n this.unwireScrollEvents();\n }\n };\n Popup.prototype.unwireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);\n }\n }\n };\n Popup.prototype.getRelateToElement = function () {\n var relateToElement = this.relateTo === '' || isNullOrUndefined(this.relateTo) ?\n document.body : this.relateTo;\n this.setProperties({ relateTo: relateToElement }, true);\n return ((typeof this.relateTo) === 'string') ?\n document.querySelector(this.relateTo) : this.relateTo;\n };\n Popup.prototype.scrollRefresh = function (e) {\n if (this.actionOnScroll === 'reposition') {\n if (!isNullOrUndefined(this.element) && !(this.element.offsetParent === e.target ||\n (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&\n e.target.parentElement == null))) {\n this.refreshPosition();\n }\n }\n else if (this.actionOnScroll === 'hide') {\n this.hide();\n }\n if (this.actionOnScroll !== 'none') {\n if (this.getRelateToElement()) {\n var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);\n if (!targetVisible && !this.targetInvisibleStatus) {\n this.trigger('targetExitViewport');\n this.targetInvisibleStatus = true;\n }\n else if (targetVisible) {\n this.targetInvisibleStatus = false;\n }\n }\n }\n };\n /**\n * This method is to get the element visibility on viewport when scroll\n * the page. This method will returns true even though 1 px of element\n * part is in visible.\n *\n * @param {HTMLElement} relateToElement - specifies the element\n * @param {HTMLElement} scrollElement - specifies the scroll element\n * @returns {boolean} - retruns the boolean\n */\n // eslint-disable-next-line\n Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {\n var scrollParents = this.getScrollableParent(relateToElement);\n for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {\n if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {\n continue;\n }\n else {\n return false;\n }\n }\n return true;\n };\n Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {\n var rect = this.checkGetBoundingClientRect(relateToElement);\n if (!rect.height || !rect.width) {\n return false;\n }\n if (!isNullOrUndefined(this.checkGetBoundingClientRect(scrollElement))) {\n var parent_4 = scrollElement.getBoundingClientRect();\n return !(rect.bottom < parent_4.top) &&\n (!(rect.bottom > parent_4.bottom) &&\n (!(rect.right > parent_4.right) &&\n !(rect.left < parent_4.left)));\n }\n else {\n var win = window;\n var windowView = {\n top: win.scrollY,\n left: win.scrollX,\n right: win.scrollX + win.outerWidth,\n bottom: win.scrollY + win.outerHeight\n };\n var off = calculatePosition(relateToElement);\n var ele = {\n top: off.top,\n left: off.left,\n right: off.left + rect.width,\n bottom: off.top + rect.height\n };\n var elementView = {\n top: windowView.bottom - ele.top,\n left: windowView.right - ele.left,\n bottom: ele.bottom - windowView.top,\n right: ele.right - windowView.left\n };\n return elementView.top > 0\n && elementView.left > 0\n && elementView.right > 0\n && elementView.bottom > 0;\n }\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Popup.prototype.preRender = function () {\n //There is no event handler\n };\n Popup.prototype.setEnableRtl = function () {\n this.reposition();\n if (this.enableRtl) {\n this.element.classList.add(CLASSNAMES.RTL);\n }\n else {\n this.element.classList.remove(CLASSNAMES.RTL);\n }\n };\n Popup.prototype.setContent = function () {\n if (!isNullOrUndefined(this.content)) {\n this.element.innerHTML = '';\n if (typeof (this.content) === 'string') {\n this.element.textContent = this.content;\n }\n else {\n var relateToElem = this.getRelateToElement();\n // eslint-disable-next-line\n var props = this.content.props;\n if (!relateToElem.classList.contains('e-dropdown-btn') || isNullOrUndefined(props)) {\n this.element.appendChild(this.content);\n }\n }\n }\n };\n Popup.prototype.orientationOnChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.refreshPosition();\n }, 200);\n };\n /**\n * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.\n *\n * @param {HTMLElement} target - The target element.\n * @param {boolean} collision - Specifies whether to check for collision.\n * @returns {void}\n */\n Popup.prototype.refreshPosition = function (target, collision) {\n if (!isNullOrUndefined(target)) {\n this.checkFixedParent(target);\n }\n this.reposition();\n if (!collision) {\n this.checkCollision();\n }\n };\n Popup.prototype.reposition = function () {\n var pos;\n var position;\n var relateToElement = this.getRelateToElement();\n if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {\n pos = { left: this.position.X, top: this.position.Y };\n }\n else if ((typeof this.position.X === 'string' && typeof this.position.Y === 'number') ||\n (typeof this.position.X === 'number' && typeof this.position.Y === 'string')) {\n var parentDisplay = void 0;\n var display = this.element.style.display;\n this.element.style.display = 'block';\n if (this.element.classList.contains('e-dlg-modal')) {\n parentDisplay = this.element.parentElement.style.display;\n this.element.parentElement.style.display = 'block';\n }\n position = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n if (typeof this.position.X === 'string') {\n pos = { left: position.left, top: this.position.Y };\n }\n else {\n pos = { left: this.position.X, top: position.top };\n }\n this.element.style.display = display;\n if (this.element.classList.contains('e-dlg-modal')) {\n this.element.parentElement.style.display = parentDisplay;\n }\n }\n else if (relateToElement) {\n var height = this.element.clientHeight;\n var display = this.element.style.display;\n this.element.style.display = 'block';\n pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY, height);\n this.element.style.display = display;\n }\n else {\n pos = { left: 0, top: 0 };\n }\n if (!isNullOrUndefined(pos)) {\n this.element.style.left = pos.left + 'px';\n this.element.style.top = pos.top + 'px';\n }\n };\n Popup.prototype.checkGetBoundingClientRect = function (ele) {\n var eleRect;\n try {\n eleRect = ele.getBoundingClientRect();\n return eleRect;\n }\n catch (error) {\n return null;\n }\n };\n Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY, height) {\n if (height === void 0) { height = 0; }\n var eleRect = this.checkGetBoundingClientRect(ele);\n var anchorRect = this.checkGetBoundingClientRect(anchorEle);\n if (isNullOrUndefined(eleRect) || isNullOrUndefined(anchorRect)) {\n return null;\n }\n var anchor = anchorEle;\n var anchorPos = { left: 0, top: 0 };\n if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {\n anchorPos = calculatePosition(anchorEle);\n }\n else {\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName !== 'BODY')) {\n ele = ele.parentElement;\n }\n anchorPos = calculateRelativeBasedPosition(anchor, ele);\n }\n switch (position.X) {\n default:\n case 'left':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth / 2 - eleRect.width / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);\n }\n else {\n anchorPos.left += (anchorRect.width / 2);\n }\n break;\n case 'right':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth - eleRect.width);\n }\n else if (this.targetType === 'container') {\n var scaleX = 1;\n var tranformElement = getTransformElement(ele);\n if (tranformElement) {\n var transformStyle = getComputedStyle(tranformElement).transform;\n if (transformStyle !== 'none') {\n var matrix = new DOMMatrix(transformStyle);\n scaleX = matrix.a;\n }\n var zoomStyle = getComputedStyle(tranformElement).zoom;\n if (zoomStyle !== 'none') {\n var bodyZoom = getZoomValue(document.body);\n scaleX = bodyZoom * scaleX;\n }\n }\n anchorPos.left += ((anchorRect.width - eleRect.width) / scaleX);\n }\n else {\n anchorPos.left += (anchorRect.width);\n }\n break;\n }\n switch (position.Y) {\n default:\n case 'top':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight / 2 - eleRect.height / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);\n }\n else {\n anchorPos.top += (anchorRect.height / 2);\n }\n break;\n case 'bottom':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight - eleRect.height);\n }\n else if (this.targetType === 'container' && !ele.classList.contains('e-dialog')) {\n anchorPos.top += (anchorRect.height - eleRect.height);\n }\n else if (this.targetType === 'container' && ele.classList.contains('e-dialog')) {\n anchorPos.top += (anchorRect.height - height);\n }\n else {\n anchorPos.top += (anchorRect.height);\n }\n break;\n }\n anchorPos.left += offsetX;\n anchorPos.top += offsetY;\n return anchorPos;\n };\n Popup.prototype.callFlip = function (param) {\n var relateToElement = this.getRelateToElement();\n flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);\n };\n Popup.prototype.callFit = function (param) {\n if (isCollide(this.element, this.viewPortElement).length !== 0) {\n if (isNullOrUndefined(this.viewPortElement)) {\n var data = fit(this.element, this.viewPortElement, param);\n if (param.X) {\n this.element.style.left = data.left + 'px';\n }\n if (param.Y) {\n this.element.style.top = data.top + 'px';\n }\n }\n else {\n var elementRect = this.checkGetBoundingClientRect(this.element);\n var viewPortRect = this.checkGetBoundingClientRect(this.viewPortElement);\n if (isNullOrUndefined(elementRect) || isNullOrUndefined(viewPortRect)) {\n return null;\n }\n if (param && param.Y === true) {\n if (viewPortRect.top > elementRect.top) {\n this.element.style.top = '0px';\n }\n else if (viewPortRect.bottom < elementRect.bottom) {\n this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';\n }\n }\n if (param && param.X === true) {\n if (viewPortRect.right < elementRect.right) {\n this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';\n }\n else if (viewPortRect.left > elementRect.left) {\n this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';\n }\n }\n }\n }\n };\n Popup.prototype.checkCollision = function () {\n var horz = this.collision.X;\n var vert = this.collision.Y;\n if (horz === 'none' && vert === 'none') {\n return;\n }\n if (horz === 'flip' && vert === 'flip') {\n this.callFlip({ X: true, Y: true });\n }\n else if (horz === 'fit' && vert === 'fit') {\n this.callFit({ X: true, Y: true });\n }\n else {\n if (horz === 'flip') {\n this.callFlip({ X: true, Y: false });\n }\n else if (vert === 'flip') {\n this.callFlip({ Y: true, X: false });\n }\n if (horz === 'fit') {\n this.callFit({ X: true, Y: false });\n }\n else if (vert === 'fit') {\n this.callFit({ X: false, Y: true });\n }\n }\n };\n /**\n * Shows the popup element from screen.\n *\n * @returns {void}\n * @param {AnimationModel} animationOptions - specifies the model\n * @param { HTMLElement } relativeElement - To calculate the zIndex value dynamically.\n */\n Popup.prototype.show = function (animationOptions, relativeElement) {\n var _this = this;\n var relateToElement = this.getRelateToElement();\n if (relateToElement.classList.contains('e-filemanager')) {\n this.fmDialogContainer = this.element.getElementsByClassName('e-file-select-wrap')[0];\n }\n this.wireEvents();\n if (!isNullOrUndefined(this.fmDialogContainer) && Browser.isIos) {\n this.fmDialogContainer.style.display = 'block';\n }\n if (this.zIndex === 1000 || !isNullOrUndefined(relativeElement)) {\n var zIndexElement = (isNullOrUndefined(relativeElement)) ? this.element : relativeElement;\n this.zIndex = getZindexPartial(zIndexElement);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n }\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.showAnimation;\n if (this.collision.X !== 'none' || this.collision.Y !== 'none') {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.checkCollision();\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n }\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.begin = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.CLOSE);\n addClass([_this.element], CLASSNAMES.OPEN);\n }\n };\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n _this.trigger('open');\n }\n };\n new Animation$1(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.trigger('open');\n }\n };\n /**\n * Hides the popup element from screen.\n *\n * @param {AnimationModel} animationOptions - To give the animation options.\n * @returns {void}\n */\n Popup.prototype.hide = function (animationOptions) {\n var _this = this;\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.hideAnimation;\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.OPEN);\n addClass([_this.element], CLASSNAMES.CLOSE);\n _this.trigger('close');\n }\n };\n new Animation$1(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n this.trigger('close');\n }\n this.unwireEvents();\n };\n /**\n * Gets scrollable parent elements for the given element.\n *\n * @returns {void}\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n */\n Popup.prototype.getScrollableParent = function (element) {\n this.checkFixedParent(element);\n return getScrollableParent(element, this.fixedParent);\n };\n Popup.prototype.checkFixedParent = function (element) {\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if ((parentStyle.position === 'fixed' || parentStyle.position === 'sticky') && !isNullOrUndefined(this.element) && this.element.offsetParent &&\n this.element.offsetParent.tagName === 'BODY' && getComputedStyle(this.element.offsetParent).overflow !== 'hidden') {\n this.element.style.top = window.scrollY > parseInt(this.element.style.top, 10) ?\n formatUnit(window.scrollY - parseInt(this.element.style.top, 10))\n : formatUnit(parseInt(this.element.style.top, 10) - window.scrollY);\n this.element.style.position = 'fixed';\n this.fixedParent = true;\n }\n parent = parent.parentElement;\n if (!isNullOrUndefined(this.element) && isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'\n && this.element.style.position === 'fixed') {\n this.fixedParent = true;\n }\n }\n };\n __decorate([\n Property('auto')\n ], Popup.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Popup.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"content\", void 0);\n __decorate([\n Property('container')\n ], Popup.prototype, \"targetType\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"viewPortElement\", void 0);\n __decorate([\n Property({ X: 'none', Y: 'none' })\n ], Popup.prototype, \"collision\", void 0);\n __decorate([\n Property('')\n ], Popup.prototype, \"relateTo\", void 0);\n __decorate([\n Complex({}, PositionData)\n ], Popup.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetY\", void 0);\n __decorate([\n Property(1000)\n ], Popup.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Popup.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('reposition')\n ], Popup.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"showAnimation\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"hideAnimation\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"targetExitViewport\", void 0);\n Popup = __decorate([\n NotifyPropertyChanges\n ], Popup);\n return Popup;\n}(Component));\n/**\n * Gets scrollable parent elements for the given element.\n *\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n * @param {boolean} fixedParent - specifies the parent element\n * @private\n * @returns {void}\n */\nfunction getScrollableParent(element, fixedParent) {\n var eleStyle = getComputedStyle(element);\n var scrollParents = [];\n var overflowRegex = /(auto|scroll)/;\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')\n && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n if (!fixedParent) {\n scrollParents.push(document);\n }\n return scrollParents;\n}\n/**\n * Gets the maximum z-index of the given element.\n *\n * @returns {void}\n * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.\n * @private\n */\nfunction getZindexPartial(element) {\n // upto body traversal\n var parent = element.parentElement;\n var parentZindex = [];\n while (parent) {\n if (parent.tagName !== 'BODY') {\n var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n parentZindex.push(index);\n }\n parent = parent.parentElement;\n }\n else {\n break;\n }\n }\n var childrenZindex = [];\n for (var i = 0; i < document.body.children.length; i++) {\n if (!element.isEqualNode(document.body.children[i])) {\n var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n childrenZindex.push(index);\n }\n }\n }\n childrenZindex.push('999');\n var siblingsZindex = [];\n if (!isNullOrUndefined(element.parentElement) && element.parentElement.tagName !== 'BODY') {\n var childNodes = [].slice.call(element.parentElement.children);\n for (var i = 0; i < childNodes.length; i++) {\n if (!element.isEqualNode(childNodes[i])) {\n var index = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n siblingsZindex.push(index);\n }\n }\n }\n }\n var finalValue = parentZindex.concat(childrenZindex, siblingsZindex);\n // eslint-disable-next-line\n var currentZindexValue = Math.max.apply(Math, finalValue) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n/**\n * Gets the maximum z-index of the page.\n *\n * @returns {void}\n * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.\n * @private\n */\nfunction getMaxZindex(tagName) {\n if (tagName === void 0) { tagName = ['*']; }\n var maxZindex = [];\n for (var i = 0; i < tagName.length; i++) {\n var elements = document.getElementsByTagName(tagName[i]);\n for (var i_1 = 0; i_1 < elements.length; i_1++) {\n var index = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n maxZindex.push(index);\n }\n }\n }\n // eslint-disable-next-line\n var currentZindexValue = Math.max.apply(Math, maxZindex) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n\n/**\n * Resize library\n */\nvar elementClass = ['north-west', 'north', 'north-east', 'west', 'east', 'south-west', 'south', 'south-east'];\nvar RESIZE_HANDLER = 'e-resize-handle';\nvar FOCUSED_HANDLER = 'e-focused-handle';\nvar DIALOG_RESIZABLE = 'e-dlg-resizable';\nvar RESTRICT_LEFT = ['e-restrict-left'];\nvar RESIZE_WITHIN_VIEWPORT = 'e-resize-viewport';\nvar dialogBorderResize = ['north', 'west', 'east', 'south'];\nvar targetElement;\nvar selectedHandler;\nvar originalWidth = 0;\nvar originalHeight = 0;\nvar originalX = 0;\nvar originalY = 0;\nvar originalMouseX = 0;\nvar originalMouseY = 0;\nvar minHeight;\nvar maxHeight;\nvar minWidth;\nvar maxWidth;\nvar containerElement;\nvar resizeStart = null;\nvar resize = null;\nvar resizeEnd = null;\nvar resizeWestWidth;\nvar setLeft = true;\nvar previousWidth = 0;\nvar setWidth = true;\n/**\n *\n * @param {ResizeArgs} args - specifies the resize args\n * @returns {void}\n */\nfunction createResize(args) {\n resizeStart = args.resizeBegin;\n resize = args.resizing;\n resizeEnd = args.resizeComplete;\n targetElement = getDOMElement(args.element);\n containerElement = getDOMElement(args.boundary);\n var directions = args.direction.split(' ');\n for (var i = 0; i < directions.length; i++) {\n if (dialogBorderResize.indexOf(directions[i]) >= 0 && directions[i]) {\n setBorderResizeElm(directions[i]);\n }\n else if (directions[i].trim() !== '') {\n var resizeHandler = createElement('div', { className: 'e-icons ' + RESIZE_HANDLER + ' ' + 'e-' + directions[i] });\n targetElement.appendChild(resizeHandler);\n }\n }\n minHeight = args.minHeight;\n minWidth = args.minWidth;\n maxWidth = args.maxWidth;\n maxHeight = args.maxHeight;\n if (args.proxy && args.proxy.element && args.proxy.element.classList.contains('e-dialog')) {\n wireEvents(args.proxy);\n }\n else {\n wireEvents();\n }\n}\n/**\n *\n * @param {string} direction - specifies the string\n * @returns {void}\n */\nfunction setBorderResizeElm(direction) {\n calculateValues();\n var borderBottom = createElement('span', {\n attrs: {\n 'unselectable': 'on', 'contenteditable': 'false'\n }\n });\n borderBottom.setAttribute('class', 'e-dialog-border-resize e-' + direction);\n if (direction === 'south') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.bottom = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'north') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.top = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'east') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.right = '0px';\n borderBottom.style.top = '0px';\n }\n if (direction === 'west') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.left = '0px';\n borderBottom.style.top = '0px';\n }\n targetElement.appendChild(borderBottom);\n}\n/**\n *\n * @param {string} element - specifies the element\n * @returns {HTMLElement} - returns the element\n */\nfunction getDOMElement(element) {\n var domElement;\n if (!isNullOrUndefined(element)) {\n if (typeof (element) === 'string') {\n domElement = document.querySelector(element);\n }\n else {\n domElement = element;\n }\n }\n return domElement;\n}\n/**\n * Wires up the event handlers for the resizable elements.\n *\n * @param {any} [args] - Optional arguments that provide context for the event handlers.\n * @returns {void}\n */\nfunction wireEvents(args) {\n var context = args || this;\n var resizers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < resizers.length; i++) {\n selectedHandler = resizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, context);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, context);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNullOrUndefined(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n selectedHandler = borderResizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, context);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, context);\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {string} e - specifies the string\n * @returns {string} - returns the string\n */\nfunction getEventType(e) {\n return (e.indexOf('mouse') > -1) ? 'mouse' : 'touch';\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the mouse event\n * @returns {void}\n */\nfunction onMouseDown(e) {\n e.preventDefault();\n targetElement = e.target.parentElement;\n calculateValues();\n originalMouseX = e.pageX;\n originalMouseY = e.pageY;\n e.target.classList.add(FOCUSED_HANDLER);\n if (!isNullOrUndefined(resizeStart)) {\n var proxy_1 = this;\n if (resizeStart(e, proxy_1) === true) {\n return;\n }\n }\n if (this.targetEle && targetElement && targetElement.querySelector('.' + DIALOG_RESIZABLE)) {\n containerElement = this.target === ('body' ) ? null : this.targetEle;\n maxWidth = this.targetEle.clientWidth;\n maxHeight = this.targetEle.clientHeight;\n }\n var target = (isNullOrUndefined(containerElement)) ? document : containerElement;\n EventHandler.add(target, 'mousemove', onMouseMove, this);\n EventHandler.add(document, 'mouseup', onMouseUp, this);\n for (var i = 0; i < RESTRICT_LEFT.length; i++) {\n if (targetElement.classList.contains(RESTRICT_LEFT[i])) {\n setLeft = false;\n }\n else {\n setLeft = true;\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the event\n * @returns {void}\n */\nfunction onMouseUp(e) {\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNullOrUndefined(containerElement)) ? document : containerElement;\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.remove(target, 'mousemove', onMouseMove);\n EventHandler.remove(target, touchMoveEvent, onMouseMove);\n EventHandler.remove(target, eventName, onMouseMove);\n if (!isNullOrUndefined(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n document.body.querySelector('.' + FOCUSED_HANDLER).classList.remove(FOCUSED_HANDLER);\n }\n if (!isNullOrUndefined(resizeEnd)) {\n var proxy_2 = this;\n resizeEnd(e, proxy_2);\n }\n EventHandler.remove(document, 'mouseup', onMouseUp);\n EventHandler.remove(document, touchEndEvent, onMouseUp);\n}\n/* istanbul ignore next */\n/**\n * @returns {void}\n */\nfunction calculateValues() {\n originalWidth = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('width').replace('px', ''));\n originalHeight = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('height').replace('px', ''));\n originalX = targetElement.getBoundingClientRect().left;\n originalY = targetElement.getBoundingClientRect().top;\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the event\n * @returns {void}\n */\nfunction onTouchStart(e) {\n targetElement = e.target.parentElement;\n calculateValues();\n var dialogResizeElement = targetElement.classList.contains('e-dialog');\n if ((e.target.classList.contains(RESIZE_HANDLER) || e.target.classList.contains('e-dialog-border-resize')) && dialogResizeElement) {\n e.target.classList.add(FOCUSED_HANDLER);\n }\n var coordinates = e.touches ? e.changedTouches[0] : e;\n originalMouseX = coordinates.pageX;\n originalMouseY = coordinates.pageY;\n if (!isNullOrUndefined(resizeStart)) {\n var proxy_3 = this;\n if (resizeStart(e, proxy_3) === true) {\n return;\n }\n }\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNullOrUndefined(containerElement)) ? document : containerElement;\n EventHandler.add(target, touchMoveEvent, onMouseMove, this);\n EventHandler.add(document, touchEndEvent, onMouseUp, this);\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the event\n * @returns {void}\n */\nfunction onMouseMove(e) {\n if (e.target.classList.contains(RESIZE_HANDLER) && e.target.classList.contains(FOCUSED_HANDLER)) {\n selectedHandler = e.target;\n }\n else if (!isNullOrUndefined(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n selectedHandler = document.body.querySelector('.' + FOCUSED_HANDLER);\n }\n if (!isNullOrUndefined(selectedHandler)) {\n var resizeTowards = '';\n for (var i = 0; i < elementClass.length; i++) {\n if (selectedHandler.classList.contains('e-' + elementClass[i])) {\n resizeTowards = elementClass[i];\n }\n }\n if (!isNullOrUndefined(resize)) {\n var proxy_4 = this;\n resize(e, proxy_4);\n }\n switch (resizeTowards) {\n case 'south':\n resizeSouth(e);\n break;\n case 'north':\n resizeNorth(e);\n break;\n case 'west':\n resizeWest(e);\n break;\n case 'east':\n resizeEast(e);\n break;\n case 'south-east':\n resizeSouth(e);\n resizeEast(e);\n break;\n case 'south-west':\n resizeSouth(e);\n resizeWest(e);\n break;\n case 'north-east':\n resizeNorth(e);\n resizeEast(e);\n break;\n case 'north-west':\n resizeNorth(e);\n resizeWest(e);\n break;\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {HTMLElement} element - specifies the eleemnt\n * @returns {ClientRect} - returns the client\n */\nfunction getClientRectValues(element) {\n return element.getBoundingClientRect();\n}\n/**\n * @param {MouseEvent | TouchEvent} e - specifies the event\n * @returns {void}\n */\nfunction resizeSouth(e) {\n var documentHeight = document.documentElement.clientHeight;\n var calculateValue = false;\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var currentpageY = coordinates.pageY;\n var targetRectValues = getClientRectValues(targetElement);\n var containerRectValues;\n if (!isNullOrUndefined(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n if (!isNullOrUndefined(containerElement)) {\n calculateValue = true;\n }\n else if (isNullOrUndefined(containerElement) && ((documentHeight - currentpageY) >= 0 || (targetRectValues.top < 0))) {\n calculateValue = true;\n }\n var calculatedHeight = originalHeight + (currentpageY - originalMouseY);\n calculatedHeight = (calculatedHeight > minHeight) ? calculatedHeight : minHeight;\n var containerTop = 0;\n if (!isNullOrUndefined(containerElement)) {\n containerTop = containerRectValues.top;\n }\n var borderValue = isNullOrUndefined(containerElement) ? 0 : containerElement.offsetHeight - containerElement.clientHeight;\n var topWithoutborder = (targetRectValues.top - containerTop) - (borderValue / 2);\n topWithoutborder = (topWithoutborder < 0) ? 0 : topWithoutborder;\n if (targetRectValues.top > 0 && (topWithoutborder + calculatedHeight) > maxHeight) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.height = (maxHeight - parseInt(topWithoutborder.toString(), 10)) + 'px';\n return;\n }\n var targetTop = 0;\n if (calculateValue) {\n if (targetRectValues.top < 0 && (documentHeight + (targetRectValues.height + targetRectValues.top) > 0)) {\n targetTop = targetRectValues.top;\n if ((calculatedHeight + targetTop) <= 30) {\n calculatedHeight = (targetRectValues.height - (targetRectValues.height + targetRectValues.top)) + 30;\n }\n }\n if (((calculatedHeight + targetRectValues.top) >= maxHeight)) {\n targetElement.style.height = targetRectValues.height +\n (documentHeight - (targetRectValues.height + targetRectValues.top)) + 'px';\n }\n var calculatedTop = (isNullOrUndefined(containerElement)) ? targetTop : topWithoutborder;\n if (calculatedHeight >= minHeight && ((calculatedHeight + calculatedTop) <= maxHeight)) {\n targetElement.style.height = calculatedHeight + 'px';\n }\n }\n}\n/**\n * Resizes the element towards the north direction.\n *\n * @param {MouseEvent | TouchEvent} e - The event object.\n * @returns {void}\n */\nfunction resizeNorth(e) {\n var calculateValue = false;\n var boundaryRectValues;\n var pageY = (getEventType(e.type) === 'mouse') ? e.pageY : e.touches[0].pageY;\n var targetRectValues = getClientRectValues(targetElement);\n var borderValue = isNullOrUndefined(containerElement) ? 0 : containerElement.offsetHeight - containerElement.clientHeight;\n if (!isNullOrUndefined(containerElement)) {\n boundaryRectValues = getClientRectValues(containerElement);\n }\n if (!isNullOrUndefined(containerElement) && (targetRectValues.top - boundaryRectValues.top) > 0) {\n calculateValue = true;\n }\n else if (isNullOrUndefined(containerElement) && pageY > 0) {\n calculateValue = true;\n }\n else if (!isNullOrUndefined(containerElement) &&\n (Math.floor((targetRectValues.top - boundaryRectValues.top) + targetRectValues.height +\n (boundaryRectValues.bottom - targetRectValues.bottom)) - borderValue) <= maxHeight) {\n calculateValue = true;\n }\n var currentHeight = originalHeight - (pageY - originalMouseY);\n if (calculateValue) {\n if (currentHeight >= minHeight && currentHeight <= maxHeight) {\n var containerTop = 0;\n if (!isNullOrUndefined(containerElement)) {\n containerTop = boundaryRectValues.top;\n }\n var top_1 = (originalY - containerTop) + (pageY - originalMouseY);\n top_1 = top_1 > 0 ? top_1 : 1;\n targetElement.style.height = currentHeight + 'px';\n targetElement.style.top = top_1 + 'px';\n }\n }\n}\n/**\n * Resizes the element towards the west direction.\n *\n * @param {MouseEvent | TouchEvent} e - The event object.\n * @returns {void}\n */\nfunction resizeWest(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var rectValues;\n if (!isNullOrUndefined(containerElement)) {\n rectValues = getClientRectValues(containerElement);\n }\n var pageX = (getEventType(e.type) === 'mouse') ? e.pageX : e.touches[0].pageX;\n var targetRectValues = getClientRectValues(targetElement);\n var borderValue = isNullOrUndefined(containerElement) ? 0 : containerElement.offsetWidth - containerElement.clientWidth;\n /* eslint-disable */\n var left = isNullOrUndefined(containerElement) ? 0 : rectValues.left;\n var containerWidth = isNullOrUndefined(containerElement) ? 0 : rectValues.width;\n /* eslint-enable */\n if (isNullOrUndefined(resizeWestWidth)) {\n if (!isNullOrUndefined(containerElement)) {\n resizeWestWidth = (((targetRectValues.left - left) - borderValue / 2)) + targetRectValues.width;\n resizeWestWidth = resizeWestWidth + (containerWidth - borderValue - resizeWestWidth);\n }\n else {\n resizeWestWidth = documentWidth;\n }\n }\n if (!isNullOrUndefined(containerElement) &&\n (Math.floor((targetRectValues.left - rectValues.left) + targetRectValues.width +\n (rectValues.right - targetRectValues.right)) - borderValue) <= maxWidth) {\n calculateValue = true;\n }\n else if (isNullOrUndefined(containerElement) && pageX >= 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth - (pageX - originalMouseX);\n if (setLeft) {\n calculatedWidth = (calculatedWidth > resizeWestWidth) ? resizeWestWidth : calculatedWidth;\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n var containerLeft = 0;\n if (!isNullOrUndefined(containerElement)) {\n containerLeft = rectValues.left;\n }\n var left_1 = (originalX - containerLeft) + (pageX - originalMouseX);\n left_1 = (left_1 > 0) ? left_1 : 1;\n if (calculatedWidth !== previousWidth && setWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n if (setLeft) {\n targetElement.style.left = left_1 + 'px';\n if (left_1 === 1) {\n setWidth = false;\n }\n else {\n setWidth = true;\n }\n }\n }\n }\n previousWidth = calculatedWidth;\n}\n/**\n * Resizes the element towards the east direction.\n *\n * @param {MouseEvent | TouchEvent} e - The event object.\n * @returns {void}\n */\nfunction resizeEast(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var containerRectValues;\n if (!isNullOrUndefined(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var pageX = coordinates.pageX;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNullOrUndefined(containerElement) && (((targetRectValues.left - containerRectValues.left) + targetRectValues.width) <= maxWidth\n || (targetRectValues.right - containerRectValues.left) >= targetRectValues.width)) {\n calculateValue = true;\n }\n else if (isNullOrUndefined(containerElement) && (documentWidth - pageX) > 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth + (pageX - originalMouseX);\n var containerLeft = 0;\n if (!isNullOrUndefined(containerElement)) {\n containerLeft = containerRectValues.left;\n }\n if (((targetRectValues.left - containerLeft) + calculatedWidth) > maxWidth) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.width = maxWidth - (targetRectValues.left - containerLeft) + 'px';\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {number} minimumHeight - specifies the number\n * @returns {void}\n */\nfunction setMinHeight(minimumHeight) {\n minHeight = minimumHeight;\n}\n/**\n *\n * @param {number} value - specifies the number value\n * @returns {void}\n */\nfunction setMaxWidth(value) {\n maxWidth = value;\n}\n/**\n *\n * @param {number} value - specifies the number value\n * @returns {void}\n */\nfunction setMaxHeight(value) {\n maxHeight = value;\n}\n/**\n * @returns {void}\n */\nfunction removeResize() {\n var handlers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < handlers.length; i++) {\n detach(handlers[i]);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNullOrUndefined(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n detach(borderResizers[i]);\n }\n }\n}\n/**\n * @returns {void}\n */\nfunction resizeDestroy() {\n targetElement = null;\n selectedHandler = null;\n containerElement = null;\n resizeWestWidth = null;\n}\n\nvar __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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};\nvar ButtonProps = /** @__PURE__ @class */ (function (_super) {\n __extends$1(ButtonProps, _super);\n function ButtonProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property(true)\n ], ButtonProps.prototype, \"isFlat\", void 0);\n __decorate$1([\n Property()\n ], ButtonProps.prototype, \"buttonModel\", void 0);\n __decorate$1([\n Property('Button')\n ], ButtonProps.prototype, \"type\", void 0);\n __decorate$1([\n Event()\n ], ButtonProps.prototype, \"click\", void 0);\n return ButtonProps;\n}(ChildProperty));\n/**\n * Configures the animation properties for both open and close the dialog.\n */\nvar AnimationSettings = /** @__PURE__ @class */ (function (_super) {\n __extends$1(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$1([\n Property('Fade')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate$1([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate$1([\n Property(0)\n ], AnimationSettings.prototype, \"delay\", void 0);\n return AnimationSettings;\n}(ChildProperty));\nvar ROOT = 'e-dialog';\nvar RTL = 'e-rtl';\nvar DLG_HEADER_CONTENT = 'e-dlg-header-content';\nvar DLG_HEADER = 'e-dlg-header';\nvar DLG_FOOTER_CONTENT = 'e-footer-content';\nvar MODAL_DLG = 'e-dlg-modal';\nvar DLG_CONTENT = 'e-dlg-content';\nvar DLG_CLOSE_ICON = 'e-icon-dlg-close';\nvar DLG_OVERLAY = 'e-dlg-overlay';\nvar DLG_TARGET = 'e-dlg-target';\nvar DLG_CONTAINER = 'e-dlg-container';\nvar SCROLL_DISABLED = 'e-scroll-disabled';\nvar DLG_PRIMARY_BUTTON = 'e-primary';\nvar ICON = 'e-icons';\nvar POPUP_ROOT = 'e-popup';\nvar DEVICE = 'e-device';\nvar FULLSCREEN = 'e-dlg-fullscreen';\nvar DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';\nvar DLG_HIDE = 'e-popup-close';\nvar DLG_SHOW = 'e-popup-open';\nvar DLG_UTIL_DEFAULT_TITLE = 'Information';\nvar DLG_UTIL_ROOT = 'e-scroll-disabled';\nvar DLG_UTIL_ALERT = 'e-alert-dialog';\nvar DLG_UTIL_CONFIRM = 'e-confirm-dialog';\nvar DLG_RESIZABLE = 'e-dlg-resizable';\nvar DLG_RESTRICT_LEFT_VALUE = 'e-restrict-left';\nvar DLG_RESTRICT_WIDTH_VALUE = 'e-resize-viewport';\nvar DLG_REF_ELEMENT = 'e-dlg-ref-element';\nvar DLG_USER_ACTION_CLOSED = 'user action';\nvar DLG_CLOSE_ICON_CLOSED = 'close icon';\nvar DLG_ESCAPE_CLOSED = 'escape';\nvar DLG_OVERLAYCLICK_CLOSED = 'overlayClick';\nvar DLG_DRAG = 'e-draggable';\n/**\n * Represents the dialog component that displays the information and get input from the user.\n * Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Dialog = /** @__PURE__ @class */ (function (_super) {\n __extends$1(Dialog, _super);\n /*\n * * Constructor for creating the widget\n *\n * @param\n * @param\n * @hidden\n */\n function Dialog(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.needsID = true;\n return _this;\n }\n /**\n *Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n if (this.width === '100%') {\n this.element.style.width = '';\n }\n if (this.minHeight !== '') {\n this.element.style.minHeight = formatUnit(this.minHeight);\n }\n if (this.enableResize) {\n this.setResize();\n if (this.isModal) {\n this.isModelResize = true;\n }\n if (this.animationSettings.effect === 'None') {\n this.getMinHeight();\n }\n }\n this.renderComplete();\n };\n Dialog.prototype.initializeValue = function () {\n this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n };\n /**\n *Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.preRender = function () {\n var _this = this;\n this.initializeValue();\n this.headerContent = null;\n this.allowMaxHeight = true;\n this.preventVisibility = true;\n this.clonedEle = this.element.cloneNode(true);\n this.closeIconClickEventHandler = function (event) {\n _this.dlgClosedBy = DLG_CLOSE_ICON_CLOSED;\n _this.hide(event);\n };\n this.dlgOverlayClickEventHandler = function (event) {\n _this.dlgClosedBy = DLG_OVERLAYCLICK_CLOSED;\n event.preventFocus = false;\n _this.trigger('overlayClick', event, function (overlayClickEventArgs) {\n if (!overlayClickEventArgs.preventFocus) {\n _this.focusContent();\n }\n _this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n });\n };\n var localeText = { close: 'Close' };\n this.l10n = new L10n('dialog', localeText, this.locale);\n this.checkPositionData();\n if (isNullOrUndefined(this.target)) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.target = document.body;\n this.isProtectedOnChange = prevOnChange;\n }\n };\n Dialog.prototype.updatePersistData = function () {\n if (this.enablePersistence) {\n this.setProperties({ width: parseFloat(this.element.style.width), height: parseFloat(this.element.style.height),\n position: { X: parseFloat(this.dragObj.element.style.left), Y: parseFloat(this.dragObj.element.style.top) } }, true);\n }\n };\n Dialog.prototype.isNumberValue = function (value) {\n var isNumber = /^[-+]?\\d*\\.?\\d+$/.test(value);\n return isNumber;\n };\n Dialog.prototype.checkPositionData = function () {\n if (!isNullOrUndefined(this.position)) {\n if (!isNullOrUndefined(this.position.X) && (typeof (this.position.X) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.X);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.X = parseFloat(this.position.X);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n if (!isNullOrUndefined(this.position.Y) && (typeof (this.position.Y) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.Y);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.Y = parseFloat(this.position.Y);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n }\n };\n Dialog.prototype.getEle = function (list, selector) {\n var element = undefined;\n for (var i = 0; i < list.length; i++) {\n if (list[i].classList.contains(selector)) {\n element = list[i];\n break;\n }\n }\n return element;\n };\n /* istanbul ignore next */\n Dialog.prototype.getMinHeight = function () {\n var computedHeaderHeight = '0px';\n var computedFooterHeight = '0px';\n if (!isNullOrUndefined(this.element.querySelector('.' + DLG_HEADER_CONTENT))) {\n computedHeaderHeight = getComputedStyle(this.headerContent).height;\n }\n var footerEle = this.getEle(this.element.children, DLG_FOOTER_CONTENT);\n if (!isNullOrUndefined(footerEle)) {\n computedFooterHeight = getComputedStyle(footerEle).height;\n }\n var headerHeight = parseInt(computedHeaderHeight.slice(0, computedHeaderHeight.indexOf('p')), 10);\n var footerHeight = parseInt(computedFooterHeight.slice(0, computedFooterHeight.indexOf('p')), 10);\n setMinHeight(headerHeight + 30 + (isNaN(footerHeight) ? 0 : footerHeight));\n return (headerHeight + 30 + footerHeight);\n };\n Dialog.prototype.onResizeStart = function (args, dialogObj) {\n dialogObj.trigger('resizeStart', args);\n if (!args.cancel && this.isModelResize && !isNullOrUndefined(this.dlgContainer) && this.dlgContainer.classList.contains('e-dlg-' + this.position.X + '-' + this.position.Y)) {\n this.setPopupPosition();\n this.dlgContainer.classList.remove('e-dlg-' + this.position.X + '-' + this.position.Y);\n var targetType = this.getTargetContainer(this.target);\n if (targetType instanceof Element) {\n var computedStyle = window.getComputedStyle(targetType);\n if (computedStyle.getPropertyValue('direction') === 'rtl') {\n this.element.style.position = 'absolute';\n }\n else {\n this.element.style.position = 'relative';\n }\n }\n else {\n this.element.style.position = 'relative';\n }\n if (this.element.classList.contains(DLG_RESTRICT_LEFT_VALUE)) {\n this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n }\n this.isModelResize = false;\n }\n return args.cancel;\n };\n Dialog.prototype.onResizing = function (args, dialogObj) {\n dialogObj.trigger('resizing', args);\n };\n Dialog.prototype.onResizeComplete = function (args, dialogObj) {\n dialogObj.trigger('resizeStop', args);\n this.updatePersistData();\n };\n Dialog.prototype.setResize = function () {\n if (this.enableResize) {\n this.element.classList.add(DLG_RESIZABLE);\n var computedHeight = getComputedStyle(this.element).minHeight;\n var computedWidth = getComputedStyle(this.element).minWidth;\n var direction = '';\n for (var i = 0; i < this.resizeHandles.length; i++) {\n if (this.resizeHandles[i] === 'All') {\n direction = 'south north east west north-east north-west south-east south-west';\n break;\n }\n else {\n var directionValue = '';\n switch (this.resizeHandles[i].toString()) {\n case 'SouthEast':\n directionValue = 'south-east';\n break;\n case 'SouthWest':\n directionValue = 'south-west';\n break;\n case 'NorthEast':\n directionValue = 'north-east';\n break;\n case 'NorthWest':\n directionValue = 'north-west';\n break;\n default:\n directionValue = this.resizeHandles[i].toString();\n break;\n }\n direction += directionValue.toLocaleLowerCase() + ' ';\n }\n }\n if (this.enableRtl && direction.trim() === 'south-east') {\n direction = 'south-west';\n }\n else if (this.enableRtl && direction.trim() === 'south-west') {\n direction = 'south-east';\n }\n if (this.isModal && this.enableRtl) {\n this.element.classList.add(DLG_RESTRICT_LEFT_VALUE);\n }\n else if (this.isModal && this.target === document.body) {\n this.element.classList.add(DLG_RESTRICT_WIDTH_VALUE);\n }\n createResize({\n element: this.element,\n direction: direction,\n minHeight: parseInt(computedHeight.slice(0, computedWidth.indexOf('p')), 10),\n maxHeight: this.targetEle.clientHeight,\n minWidth: parseInt(computedWidth.slice(0, computedWidth.indexOf('p')), 10),\n maxWidth: this.targetEle.clientWidth,\n boundary: this.target === document.body ? null : this.targetEle,\n resizeBegin: this.onResizeStart.bind(this),\n resizeComplete: this.onResizeComplete.bind(this),\n resizing: this.onResizing.bind(this),\n proxy: this\n });\n this.wireWindowResizeEvent();\n }\n else {\n removeResize();\n this.unWireWindowResizeEvent();\n if (this.isModal) {\n this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n }\n else {\n this.element.classList.remove(DLG_RESTRICT_WIDTH_VALUE);\n }\n this.element.classList.remove(DLG_RESIZABLE);\n }\n };\n Dialog.prototype.getFocusElement = function (target) {\n var value = 'input,select,textarea,button:enabled,a,[contenteditable=\"true\"],[tabindex]';\n var items = target.querySelectorAll(value);\n return { element: items[items.length - 1] };\n };\n /* istanbul ignore next */\n Dialog.prototype.keyDown = function (event) {\n var _this = this;\n if (event.keyCode === 9) {\n if (this.isModal) {\n var buttonObj = void 0;\n if (!isNullOrUndefined(this.btnObj)) {\n buttonObj = this.btnObj[this.btnObj.length - 1];\n }\n if ((isNullOrUndefined(this.btnObj)) && (!isNullOrUndefined(this.ftrTemplateContent))) {\n buttonObj = this.getFocusElement(this.ftrTemplateContent);\n }\n if (isNullOrUndefined(this.btnObj) && isNullOrUndefined(this.ftrTemplateContent) && !isNullOrUndefined(this.contentEle)) {\n buttonObj = this.getFocusElement(this.contentEle);\n }\n if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {\n event.preventDefault();\n this.focusableElements(this.element).focus();\n }\n if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {\n event.preventDefault();\n if (!isNullOrUndefined(buttonObj)) {\n buttonObj.element.focus();\n }\n }\n }\n }\n var element = document.activeElement;\n var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);\n var isContentEdit = false;\n if (!isTagName) {\n isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';\n }\n if (event.keyCode === 27 && this.closeOnEscape) {\n this.dlgClosedBy = DLG_ESCAPE_CLOSED;\n var query = document.querySelector('.e-popup-open:not(.e-dialog)');\n // 'document.querySelector' is used to find the elements rendered based on body\n if (!(!isNullOrUndefined(query) && !query.classList.contains('e-toolbar-pop') && !query.classList.contains('e-slider-tooltip'))) {\n this.hide(event);\n }\n }\n if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&\n isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||\n (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||\n isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {\n var buttonIndex_1;\n var firstPrimary = this.buttons.some(function (data, index) {\n buttonIndex_1 = index;\n var buttonModel = data.buttonModel;\n return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;\n });\n if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {\n setTimeout(function () {\n _this.buttons[buttonIndex_1].click.call(_this, event);\n });\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.initialize = function () {\n if (!isNullOrUndefined(this.target)) {\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n }\n if (!this.isBlazorServerRender()) {\n addClass([this.element], ROOT);\n }\n if (Browser.isDevice) {\n addClass([this.element], DEVICE);\n }\n if (!this.isBlazorServerRender()) {\n this.setCSSClass();\n }\n this.setMaxHeight();\n };\n /**\n * Initialize the rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.initRender = function () {\n var _this = this;\n this.initialRender = true;\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { role: 'dialog' });\n }\n if (this.zIndex === 1000) {\n this.setzIndex(this.element, false);\n this.calculatezIndex = true;\n }\n else {\n this.calculatezIndex = false;\n }\n this.setTargetContent();\n if (this.header !== '' && !isNullOrUndefined(this.header)) {\n this.setHeader();\n }\n this.renderCloseIcon();\n this.setContent();\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setFooterTemplate();\n }\n else if (!isNullOrUndefined(this.buttons[0]) && !isNullOrUndefined(this.buttons[0].buttonModel)) {\n this.setButton();\n }\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });\n if (this.isModal) {\n this.setIsModal();\n }\n if (this.element.classList.contains(DLG_UTIL_ALERT) !== true && this.element.classList.contains(DLG_UTIL_CONFIRM) !== true\n && !isNullOrUndefined(this.element.parentElement)) {\n var parentEle = this.isModal ? this.dlgContainer.parentElement : this.element.parentElement;\n this.refElement = this.createElement('div', { className: DLG_REF_ELEMENT });\n parentEle.insertBefore(this.refElement, (this.isModal ? this.dlgContainer : this.element));\n }\n if (!isNullOrUndefined(this.targetEle)) {\n if (this.isModal) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n else {\n this.targetEle.appendChild(this.element);\n }\n }\n this.popupObj = new Popup(this.element, {\n height: this.height,\n width: this.width,\n zIndex: this.zIndex,\n relateTo: this.target,\n actionOnScroll: 'none',\n enableRtl: this.enableRtl,\n // eslint-disable-next-line\n open: function (event) {\n var eventArgs = {\n container: _this.isModal ? _this.dlgContainer : _this.element,\n element: _this.element,\n target: _this.target,\n preventFocus: false\n };\n if (_this.enableResize) {\n _this.resetResizeIcon();\n }\n _this.trigger('open', eventArgs, function (openEventArgs) {\n if (!openEventArgs.preventFocus) {\n _this.focusContent();\n }\n });\n },\n // eslint-disable-next-line\n close: function (event) {\n if (_this.isModal) {\n addClass([_this.dlgOverlay], 'e-fade');\n }\n _this.unBindEvent(_this.element);\n if (_this.isModal) {\n _this.dlgContainer.style.display = 'none';\n }\n _this.trigger('close', _this.closeArgs);\n var activeEle = document.activeElement;\n if (!isNullOrUndefined(activeEle) && !isNullOrUndefined((activeEle).blur)) {\n activeEle.blur();\n }\n if (!isNullOrUndefined(_this.storeActiveElement) && !isNullOrUndefined(_this.storeActiveElement.focus)) {\n _this.storeActiveElement.focus();\n }\n }\n });\n this.positionChange();\n this.setEnableRTL();\n if (!this.isBlazorServerRender()) {\n addClass([this.element], DLG_HIDE);\n if (this.isModal) {\n this.setOverlayZindex();\n }\n }\n if (this.visible) {\n this.show();\n if (this.isModal) {\n var targetType = this.getTargetContainer(this.target);\n if (targetType instanceof Element) {\n var computedStyle = window.getComputedStyle(targetType);\n if (computedStyle.getPropertyValue('direction') === 'rtl') {\n this.setPopupPosition();\n }\n }\n }\n }\n else {\n if (this.isModal) {\n this.dlgOverlay.style.display = 'none';\n }\n }\n this.initialRender = false;\n };\n Dialog.prototype.getTargetContainer = function (targetValue) {\n var targetElement = null;\n if (typeof targetValue === 'string') {\n if (targetValue.startsWith('#')) {\n targetElement = document.getElementById(targetValue.substring(1));\n }\n else if (targetValue.startsWith('.')) {\n var elements = document.getElementsByClassName(targetValue.substring(1));\n targetElement = elements.length > 0 ? elements[0] : null;\n }\n else {\n if (!(targetValue instanceof HTMLElement) && targetValue !== document.body) {\n targetElement = document.querySelector(targetValue);\n }\n }\n }\n else if (targetValue instanceof HTMLElement) {\n targetElement = targetValue;\n }\n return targetElement;\n };\n Dialog.prototype.resetResizeIcon = function () {\n var dialogConHeight = this.getMinHeight();\n if (this.targetEle.offsetHeight < dialogConHeight) {\n var className = this.enableRtl ? 'e-south-west' : 'e-south-east';\n var resizeIcon = this.element.querySelector('.' + className);\n if (!isNullOrUndefined(resizeIcon)) {\n resizeIcon.style.bottom = '-' + dialogConHeight.toString() + 'px';\n }\n }\n };\n Dialog.prototype.setOverlayZindex = function (zIndexValue) {\n var zIndex;\n if (isNullOrUndefined(zIndexValue)) {\n zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;\n }\n else {\n zIndex = zIndexValue;\n }\n this.dlgOverlay.style.zIndex = (zIndex - 1).toString();\n this.dlgContainer.style.zIndex = zIndex.toString();\n };\n Dialog.prototype.positionChange = function () {\n if (this.isModal) {\n if (!isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y))) {\n this.setPopupPosition();\n }\n else if ((!isNaN(parseFloat(this.position.X)) && isNaN(parseFloat(this.position.Y)))\n || (isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y)))) {\n this.setPopupPosition();\n }\n else {\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);\n }\n }\n else {\n this.setPopupPosition();\n }\n };\n Dialog.prototype.setPopupPosition = function () {\n this.popupObj.setProperties({\n position: {\n X: this.position.X, Y: this.position.Y\n }\n });\n };\n Dialog.prototype.setAllowDragging = function () {\n var _this = this;\n var handleContent = '.' + DLG_HEADER_CONTENT;\n if (!this.element.classList.contains(DLG_DRAG)) {\n this.dragObj = new Draggable(this.element, {\n clone: false,\n isDragScroll: true,\n abort: '.e-dlg-closeicon-btn',\n handle: handleContent,\n dragStart: function (event) {\n _this.trigger('dragStart', event, function (dragEventArgs) {\n if (isBlazor()) {\n dragEventArgs.bindEvents(event.dragElement);\n }\n });\n },\n dragStop: function (event) {\n if (_this.isModal) {\n _this.IsDragStop = true;\n if (!isNullOrUndefined(_this.position)) {\n _this.dlgContainer.classList.remove('e-dlg-' + _this.position.X + '-' + _this.position.Y);\n }\n // Reset the dialog position after drag completion.\n var targetType = _this.getTargetContainer(_this.target);\n if (targetType instanceof Element) {\n var computedStyle = window.getComputedStyle(targetType);\n if (computedStyle.getPropertyValue('direction') === 'rtl') {\n _this.element.style.position = 'absolute';\n }\n else {\n _this.element.style.position = 'relative';\n }\n }\n else {\n _this.element.style.position = 'relative';\n }\n }\n _this.trigger('dragStop', event);\n _this.isModelResize = false;\n _this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n _this.updatePersistData();\n },\n drag: function (event) {\n _this.trigger('drag', event);\n }\n });\n if (!isNullOrUndefined(this.targetEle)) {\n this.dragObj.dragArea = this.targetEle;\n }\n }\n };\n Dialog.prototype.setButton = function () {\n if (!this.isBlazorServerRender()) {\n this.buttonContent = [];\n this.btnObj = [];\n for (var i = 0; i < this.buttons.length; i++) {\n if (isNullOrUndefined(this.buttons[i].buttonModel)) {\n continue;\n }\n var buttonType = !isNullOrUndefined(this.buttons[i].type) ?\n this.buttons[i].type.toLowerCase() : 'button';\n var btn = this.createElement('button', { className: this.cssClass, attrs: { type: buttonType } });\n this.buttonContent.push(btn.outerHTML);\n }\n this.setFooterTemplate();\n }\n var footerBtn;\n for (var i = 0, childNodes = this.element.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains(DLG_FOOTER_CONTENT)) {\n footerBtn = childNodes[i].querySelectorAll('button');\n }\n }\n for (var i = 0; i < this.buttons.length; i++) {\n if (isNullOrUndefined(this.buttons[i].buttonModel)) {\n continue;\n }\n if (!this.isBlazorServerRender()) {\n this.btnObj[i] = new Button(this.buttons[i].buttonModel);\n }\n if (!isNullOrUndefined(this.ftrTemplateContent) && footerBtn.length > 0) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.add(footerBtn[i], 'click', this.buttons[i].click, this);\n }\n if (typeof (this.buttons[i].click) === 'object') {\n EventHandler.add(footerBtn[i], 'click', this.buttonClickHandler.bind(this, i), this);\n }\n }\n if (!this.isBlazorServerRender() && !isNullOrUndefined(this.ftrTemplateContent)) {\n this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);\n if (this.buttons[i].isFlat) {\n this.btnObj[i].element.classList.add('e-flat');\n }\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n }\n };\n Dialog.prototype.buttonClickHandler = function (index) {\n this.trigger('buttons[' + index + '].click', {});\n };\n Dialog.prototype.setContent = function () {\n this.contentEle = this.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });\n if (this.headerEle) {\n attributes(this.element, { 'aria-describedby': this.element.id + '_title' + ' ' + this.element.id + '_dialog-content' });\n }\n else {\n attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });\n }\n if (this.innerContentElement) {\n this.contentEle.appendChild(this.innerContentElement);\n }\n else if (!isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {\n if (typeof (this.content) === 'string' && !isBlazor()) {\n this.setTemplate(this.content, this.contentEle, 'content');\n }\n else if (this.content instanceof HTMLElement) {\n this.contentEle.appendChild(this.content);\n }\n else {\n this.setTemplate(this.content, this.contentEle, 'content');\n }\n }\n if (!isNullOrUndefined(this.headerContent)) {\n this.element.insertBefore(this.contentEle, this.element.children[1]);\n }\n else {\n this.element.insertBefore(this.contentEle, this.element.children[0]);\n }\n if (this.height === 'auto') {\n if (!this.isBlazorServerRender() && Browser.isIE && this.element.style.width === '' && !isNullOrUndefined(this.width)) {\n this.element.style.width = formatUnit(this.width);\n }\n this.setMaxHeight();\n }\n };\n Dialog.prototype.setTemplate = function (template, toElement, prop) {\n var templateFn;\n var templateProps;\n if (toElement.classList.contains(DLG_HEADER)) {\n templateProps = this.element.id + 'header';\n }\n else if (toElement.classList.contains(DLG_FOOTER_CONTENT)) {\n templateProps = this.element.id + 'footerTemplate';\n }\n else {\n templateProps = this.element.id + 'content';\n }\n var templateValue;\n if (!isNullOrUndefined(template.outerHTML)) {\n toElement.appendChild(template);\n }\n else if ((typeof template === 'string') || (typeof template !== 'string') || (isBlazor() && !this.isStringTemplate)) {\n if ((typeof template === 'string')) {\n template = this.sanitizeHelper(template);\n }\n if (this.isVue || typeof template !== 'string') {\n templateFn = compile(template);\n templateValue = template;\n }\n else {\n toElement.innerHTML = template;\n }\n }\n var fromElements = [];\n if (!isNullOrUndefined(templateFn)) {\n var isString = (isBlazor() &&\n !this.isStringTemplate && (templateValue).indexOf('Popup Content
Blazor') === 0) ?\n this.isStringTemplate : true;\n for (var _i = 0, _a = templateFn({}, this, prop, templateProps, isString); _i < _a.length; _i++) {\n var item = _a[_i];\n fromElements.push(item);\n }\n append([].slice.call(fromElements), toElement);\n }\n };\n /*\n * @returns {void}\n * @hidden\n * @value\n */\n Dialog.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var dialogItem = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(dialogItem, dialogItem, beforeEvent);\n this.trigger('beforeSanitizeHtml', dialogItem);\n if (dialogItem.cancel && !isNullOrUndefined(dialogItem.helper)) {\n value = dialogItem.helper(value);\n }\n else if (!dialogItem.cancel) {\n value = SanitizeHtmlHelper.serializeValue(dialogItem, value);\n }\n }\n return value;\n };\n Dialog.prototype.setMaxHeight = function () {\n if (!this.allowMaxHeight) {\n return;\n }\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) && (this.targetEle.offsetHeight < window.innerHeight) ?\n (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';\n this.element.style.display = display;\n if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle)\n && this.element.offsetHeight < this.contentEle.offsetHeight) {\n this.element.style.height = 'inherit';\n }\n };\n Dialog.prototype.setEnableRTL = function () {\n if (!this.isBlazorServerRender()) {\n if (this.enableRtl) {\n addClass([this.element], RTL);\n }\n else {\n removeClass([this.element], RTL);\n }\n }\n if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {\n removeResize();\n this.setResize();\n }\n };\n Dialog.prototype.setTargetContent = function () {\n var _this = this;\n if (isNullOrUndefined(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s|<(\\/?|\\/?)(!--!--)>/g, '') !== '';\n if (this.element.children.length > 0 || isContent) {\n this.innerContentElement = document.createDocumentFragment();\n [].slice.call(this.element.childNodes).forEach(function (el) {\n if (el.nodeType !== 8) {\n _this.innerContentElement.appendChild(el);\n }\n });\n }\n }\n };\n Dialog.prototype.setHeader = function () {\n if (this.headerEle) {\n this.headerEle.innerHTML = '';\n }\n else {\n this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });\n }\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.setTemplate(this.header, this.headerEle, 'header');\n attributes(this.element, { 'aria-describedby': this.element.id + '_title' });\n attributes(this.element, { 'aria-labelledby': this.element.id + '_dialog-header' });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n };\n Dialog.prototype.setFooterTemplate = function () {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n }\n else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');\n }\n else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n this.element.appendChild(this.ftrTemplateContent);\n };\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });\n }\n };\n Dialog.prototype.renderCloseIcon = function () {\n if (this.showCloseIcon) {\n this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n }\n };\n Dialog.prototype.closeIconTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n };\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n if (this.isModal && !isNullOrUndefined(this.dlgContainer)) {\n removeClass([this.dlgContainer], oldCSSClass.split(' '));\n }\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n if (this.isModal && !isNullOrUndefined(this.dlgContainer)) {\n addClass([this.dlgContainer], this.cssClass.split(' '));\n }\n }\n };\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });\n this.setCSSClass();\n this.element.classList.remove(DLG_SHOW);\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n else {\n node = null;\n }\n }\n return node;\n };\n Dialog.prototype.focusableElements = function (content) {\n if (!isNullOrUndefined(content)) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n };\n Dialog.prototype.getAutoFocusNode = function (container) {\n var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n var value = '[autofocus]';\n var items = container.querySelectorAll(value);\n var validNode = this.getValidFocusNode(items);\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n };\n Dialog.prototype.disableElement = function (element, t) {\n var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msGetRegionContent : null;\n if (elementMatch) {\n for (; element; element = element.parentNode) {\n if (element instanceof Element && elementMatch.call(element, t)) {\n /* istanbul ignore next */\n return element;\n }\n }\n }\n return null;\n };\n Dialog.prototype.focusContent = function () {\n var element = this.getAutoFocusNode(this.element);\n var node = !isNullOrUndefined(element) ? element : this.element;\n var userAgent = Browser.userAgent;\n if (userAgent.indexOf('MSIE ') > 0 || userAgent.indexOf('Trident/') > 0) {\n this.element.focus();\n }\n node.focus();\n this.unBindEvent(this.element);\n this.bindEvent(this.element);\n };\n Dialog.prototype.bindEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n };\n Dialog.prototype.unBindEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n };\n Dialog.prototype.updateSanitizeContent = function () {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n };\n Dialog.prototype.isBlazorServerRender = function () {\n return isBlazor() && this.isServerRendered;\n };\n /**\n * Module required function\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.getModuleName = function () {\n return 'dialog';\n };\n /**\n * Called internally if any of the property value changed\n *\n * @param {DialogModel} newProp - specifies the new property\n * @param {DialogModel} oldProp - specifies the old property\n * @private\n * @returns {void}\n */\n Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n if (this.isBlazorServerRender()) {\n this.contentEle = this.element.querySelector('.e-dlg-content');\n }\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = '';\n }\n if (typeof (this.content) === 'function') {\n this.clearTemplate(['content']);\n detach(this.contentEle);\n this.contentEle = null;\n this.setContent();\n }\n else {\n if (typeof (this.content) === 'string') {\n this.updateSanitizeContent();\n }\n else {\n this.contentEle.appendChild(this.content);\n }\n }\n this.setMaxHeight();\n }\n else {\n this.setContent();\n }\n }\n else if (!isNullOrUndefined(this.contentEle)) {\n detach(this.contentEle);\n this.contentEle = null;\n }\n break;\n case 'header':\n if (this.header === '' || isNullOrUndefined(this.header)) {\n if (this.headerEle) {\n detach(this.headerEle);\n this.headerEle = null;\n }\n }\n else {\n this.setHeader();\n }\n break;\n case 'footerTemplate':\n if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {\n if (!this.ftrTemplateContent) {\n return;\n }\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n this.buttons = [{}];\n }\n else {\n this.setFooterTemplate();\n this.buttons = [{}];\n }\n break;\n case 'showCloseIcon':\n if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {\n if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {\n detach(this.headerContent);\n this.headerContent = null;\n }\n else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n }\n }\n else {\n this.renderCloseIcon();\n this.wireEvents();\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n break;\n case 'visible':\n if (this.visible) {\n this.show();\n }\n else {\n this.hide();\n }\n break;\n case 'isModal':\n this.updateIsModal();\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n this.updatePersistData();\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n this.updatePersistData();\n break;\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n if (this.element.style.zIndex !== this.zIndex.toString()) {\n this.calculatezIndex = false;\n }\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'buttons': {\n this.unWireButtonEvents();\n this.destroyButtons();\n if (!isNullOrUndefined(this.ftrTemplateContent)) {\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n }\n this.footerTemplate = '';\n this.setButton();\n break;\n }\n case 'allowDragging':\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n else {\n this.dragObj.destroy();\n }\n break;\n case 'target':\n this.setTarget(newProp.target);\n break;\n case 'position':\n this.checkPositionData();\n if (this.isModal) {\n var positionX = this.position.X;\n var positionY = this.position.Y;\n if (!isNullOrUndefined(oldProp.position)) {\n if (!isNullOrUndefined(oldProp.position.X)) {\n positionX = oldProp.position.X;\n }\n if (!isNullOrUndefined(oldProp.position.Y)) {\n positionY = oldProp.position.Y;\n }\n }\n if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {\n this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);\n }\n }\n this.positionChange();\n this.updatePersistData();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'enableResize':\n this.setResize();\n this.isModelResize = this.enableResize && this.isModal;\n if (this.enableResize && this.dialogOpen) {\n this.resetResizeIcon();\n }\n break;\n case 'minHeight':\n if (this.minHeight !== '') {\n this.element.style.minHeight = formatUnit(this.minHeight);\n }\n break;\n }\n }\n };\n Dialog.prototype.setTarget = function (target) {\n this.popupObj.relateTo = target;\n this.target = target;\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n if (this.dragObj) {\n this.dragObj.dragArea = this.targetEle;\n }\n this.setMaxHeight();\n if (this.isModal) {\n this.updateIsModal();\n }\n if (this.enableResize) {\n this.setResize();\n }\n if (!isNullOrUndefined(this.targetEle)) {\n if (this.isModal && !isNullOrUndefined(this.dlgContainer)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n else if (!isNullOrUndefined(this.element)) {\n this.targetEle.appendChild(this.element);\n }\n }\n };\n Dialog.prototype.updateIsModal = function () {\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n if (this.isModal) {\n if (isNullOrUndefined(this.dlgOverlay)) {\n this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n if (this.visible) {\n this.show();\n }\n this.positionChange();\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n Dialog.prototype.setzIndex = function (zIndexElement, setPopupZindex) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n var currentzIndex = getZindexPartial(zIndexElement);\n this.zIndex = currentzIndex > this.zIndex ? currentzIndex : this.zIndex;\n this.isProtectedOnChange = prevOnChange;\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n };\n Dialog.prototype.windowResizeHandler = function () {\n setMaxWidth(this.targetEle.clientWidth);\n setMaxHeight(this.targetEle.clientHeight);\n this.setMaxHeight();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.getPersistData = function () {\n return this.addOnPersist(['width', 'height', 'position']);\n };\n Dialog.prototype.removeAllChildren = function (element) {\n while (element.children[0]) {\n this.removeAllChildren(element.children[0]);\n element.removeChild(element.children[0]);\n }\n };\n /**\n * To destroy the widget\n *\n * @returns {void}\n */\n Dialog.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n var classArray = [RTL, MODAL_DLG, DLG_RESIZABLE, DLG_RESTRICT_LEFT_VALUE, FULLSCREEN, DEVICE];\n var attrs = ['role', 'aria-modal', 'aria-labelledby', 'aria-describedby', 'aria-grabbed', 'tabindex', 'style'];\n removeClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n if (!isNullOrUndefined(this.element) && this.element.classList.contains(FULLSCREEN)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n if (this.isModal) {\n removeClass([(!isNullOrUndefined(this.targetEle) ? this.targetEle : document.body)], SCROLL_DISABLED);\n }\n this.unWireEvents();\n this.unWireButtonEvents();\n this.destroyButtons();\n if (!isNullOrUndefined(this.closeIconBtnObj)) {\n this.closeIconBtnObj.destroy();\n }\n if (!isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n if (!isNullOrUndefined(this.popupObj.element) && this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n removeClass([this.element], classArray);\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n removeClass([this.element], this.cssClass.split(' '));\n }\n if (!isNullOrUndefined(this.refElement) && !isNullOrUndefined(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore((this.isModal ? this.dlgContainer : this.element), this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (this.isModal) {\n detach(this.dlgOverlay);\n this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);\n detach(this.dlgContainer);\n }\n this.element.innerHTML = this.clonedEle.innerHTML;\n for (var i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[i]);\n }\n this.ftrTemplateContent = null;\n this.headerContent = null;\n if (!this.isReact && !this.isVue && !isNullOrUndefined(this.contentEle)) {\n this.removeAllChildren(this.contentEle);\n }\n this.contentEle = null;\n resizeDestroy();\n _super.prototype.destroy.call(this);\n // eslint-disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n };\n Dialog.prototype.wireWindowResizeEvent = function () {\n this.boundWindowResizeHandler = this.windowResizeHandler.bind(this);\n window.addEventListener('resize', this.boundWindowResizeHandler);\n };\n Dialog.prototype.unWireWindowResizeEvent = function () {\n window.removeEventListener('resize', this.boundWindowResizeHandler);\n this.boundWindowResizeHandler = null;\n };\n /**\n * Binding event to the element while widget creation\n *\n * @returns {void}\n * @hidden\n */\n Dialog.prototype.wireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n /**\n * Unbinding event to the element while widget destroy\n *\n * @returns {void}\n * @hidden\n */\n Dialog.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n };\n /**\n * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.\n *\n * @returns {void}\n */\n Dialog.prototype.refreshPosition = function () {\n this.popupObj.refreshPosition();\n if (this.element.classList.contains(MODAL_DLG)) {\n this.positionChange();\n }\n };\n /**\n * Returns the current width and height of the Dialog\n *\n * @returns {DialogDimension}- returns the dialog element Dimension.\n * @public\n */\n Dialog.prototype.getDimension = function () {\n var dialogWidth = this.element.offsetWidth;\n var dialogHeight = this.element.offsetHeight;\n return { width: dialogWidth, height: dialogHeight };\n };\n /**\n * Opens the dialog if it is in hidden state.\n * To open the dialog with full screen width, set the parameter to true.\n *\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @returns {void}\n */\n Dialog.prototype.show = function (isFullScreen) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\n var eventArgs_1 = isBlazor() ? {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n maxHeight: this.element.style.maxHeight\n } : {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n target: this.target,\n maxHeight: this.element.style.maxHeight\n };\n this.trigger('beforeOpen', eventArgs_1, function (beforeOpenArgs) {\n if (!beforeOpenArgs.cancel) {\n if (_this.element.style.maxHeight !== eventArgs_1.maxHeight) {\n _this.allowMaxHeight = false;\n _this.element.style.maxHeight = eventArgs_1.maxHeight;\n }\n if (_this.enableResize && _this.boundWindowResizeHandler == null && !_this.initialRender) {\n _this.wireWindowResizeEvent();\n }\n _this.storeActiveElement = document.activeElement;\n _this.element.tabIndex = -1;\n if (_this.isModal && (!isNullOrUndefined(_this.dlgOverlay))) {\n _this.dlgOverlay.style.display = 'block';\n _this.dlgContainer.style.display = 'flex';\n removeClass([_this.dlgOverlay], 'e-fade');\n if (!isNullOrUndefined(_this.targetEle)) {\n if (_this.targetEle === document.body) {\n _this.dlgContainer.style.position = 'fixed';\n }\n else {\n _this.dlgContainer.style.position = 'absolute';\n }\n _this.dlgOverlay.style.position = 'absolute';\n var targetType = _this.getTargetContainer(_this.target);\n if (targetType instanceof Element) {\n var computedStyle = window.getComputedStyle(targetType);\n if (computedStyle.getPropertyValue('direction') === 'rtl') {\n _this.element.style.position = 'absolute';\n }\n else {\n _this.element.style.position = 'relative';\n }\n }\n else {\n _this.element.style.position = 'relative';\n }\n addClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n else {\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n var openAnimation = {\n name: (_this.animationSettings.effect === 'None' && animationMode === 'Enable') ? 'Zoom' + 'In' : _this.animationSettings.effect + 'In',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n var zIndexElement = (_this.isModal) ? _this.element.parentElement : _this.element;\n if (_this.calculatezIndex) {\n _this.setzIndex(zIndexElement, true);\n setStyleAttribute(_this.element, { 'zIndex': _this.zIndex });\n if (_this.isModal) {\n _this.setOverlayZindex(_this.zIndex);\n }\n }\n // eslint-disable-next-line\n (_this.animationSettings.effect === 'None' && animationMode === 'Enable') ? _this.popupObj.show(openAnimation) : ((_this.animationSettings.effect === 'None') ? _this.popupObj.show() : _this.popupObj.show(openAnimation));\n if (_this.isModal) {\n var targetType = _this.getTargetContainer(_this.target);\n if (targetType instanceof Element) {\n var computedStyle = window.getComputedStyle(targetType);\n if (computedStyle.getPropertyValue('direction') === 'rtl' && !_this.IsDragStop) {\n _this.setPopupPosition();\n }\n }\n }\n _this.dialogOpen = true;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = true;\n _this.preventVisibility = true;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Closes the dialog if it is in visible state.\n *\n * @param { Event } event - specifies the event\n * @returns {void}\n */\n Dialog.prototype.hide = function (event) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (this.preventVisibility) {\n var eventArgs = isBlazor() ? {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n } : {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n target: this.target,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event,\n closedBy: this.dlgClosedBy\n };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, function (beforeCloseArgs) {\n if (!beforeCloseArgs.cancel) {\n if (_this.enableResize) {\n _this.unWireWindowResizeEvent();\n }\n var closeAnimation = {\n name: (_this.animationSettings.effect === 'None' && animationMode === 'Enable') ? 'Zoom' + 'Out' : _this.animationSettings.effect + 'Out',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n if (_this.animationSettings.effect === 'None' && animationMode === 'Enable') {\n _this.popupObj.hide(closeAnimation);\n }\n else if (_this.animationSettings.effect === 'None') {\n _this.popupObj.hide();\n }\n else {\n _this.popupObj.hide(closeAnimation);\n }\n setTimeout(function () {\n if (_this.isModal) {\n if (!isNullOrUndefined(_this.targetEle) && _this.targetEle.classList.contains(DLG_TARGET) &&\n _this.targetEle.classList.contains(SCROLL_DISABLED)) {\n removeClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n if (document.body.classList.contains(DLG_TARGET) &&\n document.body.classList.contains(SCROLL_DISABLED)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }, (_this.animationSettings.duration + _this.animationSettings.delay));\n _this.dialogOpen = false;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = false;\n _this.preventVisibility = false;\n _this.isProtectedOnChange = prevOnChange;\n }\n _this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n });\n }\n };\n /**\n * Specifies to view the Full screen Dialog.\n *\n * @param {boolean} args - specifies the arguments\n * @returns {boolean} - returns the boolean value\n * @private\n */\n Dialog.prototype.fullScreen = function (args) {\n /* eslint-disable */\n var top = this.element.offsetTop;\n var left = this.element.offsetLeft;\n /* eslint-enable */\n if (args) {\n if (!this.isModal) {\n this.element.style.top = document.scrollingElement.scrollTop + 'px';\n }\n addClass([this.element], FULLSCREEN);\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';\n this.element.style.display = display;\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n }\n else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n }\n return args;\n };\n /**\n * Returns the dialog button instances.\n * Based on that, you can dynamically change the button states.\n *\n * @param { number } index - Index of the button.\n * @returns {Button} - returns the button element\n */\n Dialog.prototype.getButtons = function (index) {\n if (!isNullOrUndefined(index)) {\n return this.btnObj[index];\n }\n return this.btnObj;\n };\n Dialog.prototype.unWireButtonEvents = function () {\n if (this.buttons.length > 0 && this.footerTemplate === '' && this.ftrTemplateContent) {\n for (var i = 0; i < this.buttons.length; i++) {\n if (this.buttons[i].click && typeof (this.buttons[i].click) === 'function'\n && this.ftrTemplateContent.children[i]) {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n };\n Dialog.prototype.destroyButtons = function () {\n if (!isNullOrUndefined(this.btnObj)) {\n for (var i = 0; i < this.btnObj.length; i++) {\n if (this.btnObj[i] && !this.btnObj[i].isDestroyed) {\n this.btnObj[i].destroy();\n }\n }\n }\n };\n __decorate$1([\n Property('')\n ], Dialog.prototype, \"content\", void 0);\n __decorate$1([\n Property(true)\n ], Dialog.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$1([\n Property(false)\n ], Dialog.prototype, \"enablePersistence\", void 0);\n __decorate$1([\n Property(false)\n ], Dialog.prototype, \"showCloseIcon\", void 0);\n __decorate$1([\n Property(false)\n ], Dialog.prototype, \"isModal\", void 0);\n __decorate$1([\n Property('')\n ], Dialog.prototype, \"header\", void 0);\n __decorate$1([\n Property(true)\n ], Dialog.prototype, \"visible\", void 0);\n __decorate$1([\n Property(false)\n ], Dialog.prototype, \"enableResize\", void 0);\n __decorate$1([\n Property(['South-East'])\n ], Dialog.prototype, \"resizeHandles\", void 0);\n __decorate$1([\n Property('auto')\n ], Dialog.prototype, \"height\", void 0);\n __decorate$1([\n Property('')\n ], Dialog.prototype, \"minHeight\", void 0);\n __decorate$1([\n Property('100%')\n ], Dialog.prototype, \"width\", void 0);\n __decorate$1([\n Property('')\n ], Dialog.prototype, \"cssClass\", void 0);\n __decorate$1([\n Property(1000)\n ], Dialog.prototype, \"zIndex\", void 0);\n __decorate$1([\n Property(null)\n ], Dialog.prototype, \"target\", void 0);\n __decorate$1([\n Property('')\n ], Dialog.prototype, \"footerTemplate\", void 0);\n __decorate$1([\n Property(false)\n ], Dialog.prototype, \"allowDragging\", void 0);\n __decorate$1([\n Collection([{}], ButtonProps)\n ], Dialog.prototype, \"buttons\", void 0);\n __decorate$1([\n Property(true)\n ], Dialog.prototype, \"closeOnEscape\", void 0);\n __decorate$1([\n Complex({}, AnimationSettings)\n ], Dialog.prototype, \"animationSettings\", void 0);\n __decorate$1([\n Complex({ X: 'center', Y: 'center' }, PositionData)\n ], Dialog.prototype, \"position\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"created\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"open\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"beforeOpen\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"close\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"beforeClose\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"dragStart\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"dragStop\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"drag\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"overlayClick\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"resizeStart\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"resizing\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"resizeStop\", void 0);\n __decorate$1([\n Event()\n ], Dialog.prototype, \"destroyed\", void 0);\n Dialog = __decorate$1([\n NotifyPropertyChanges\n ], Dialog);\n return Dialog;\n}(Component));\n/**\n * Base for creating Alert and Confirmation Dialog through util method.\n */\n// eslint-disable-next-line\nvar DialogUtility;\n(function (DialogUtility) {\n /**\n * An alert dialog box is used to display warning like messages to the users.\n * ```\n * Eg : DialogUtility.alert('Alert message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {AlertDialogArgs} args - specifies the string\n * @returns {Dialog} - returns the dialog element.\n */\n function alert(args) {\n var dialogElement = createElement('div', { 'className': DLG_UTIL_ALERT });\n document.body.appendChild(dialogElement);\n var alertDialogObj;\n var okButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n alertDialogObj = createDialog({ content: args,\n position: { X: 'center', Y: 'top' },\n isModal: true, header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okButtonModel }, dialogElement);\n }\n else {\n alertDialogObj = createDialog(alertOptions(args), dialogElement);\n }\n alertDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(alertDialogObj);\n }\n alertDialogObj.destroy();\n if (alertDialogObj.element.classList.contains('e-dlg-modal')) {\n alertDialogObj.element.parentElement.remove();\n alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n alertDialogObj.element.remove();\n }\n };\n return alertDialogObj;\n }\n DialogUtility.alert = alert;\n /**\n * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.\n * ```\n * Eg : DialogUtility.confirm('Confirm dialog message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {ConfirmDialogArgs} args - specifies the args\n * @returns {Dialog} - returns te element\n */\n function confirm(args) {\n var dialogElement = createElement('div', { 'className': DLG_UTIL_CONFIRM });\n document.body.appendChild(dialogElement);\n var confirmDialogObj;\n var okCancelButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }, {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n confirmDialogObj = createDialog({ position: { X: 'center', Y: 'top' }, content: args, isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE, buttons: okCancelButtonModel\n }, dialogElement);\n }\n else {\n confirmDialogObj = createDialog(confirmOptions(args), dialogElement);\n }\n confirmDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(confirmDialogObj);\n }\n confirmDialogObj.destroy();\n if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {\n confirmDialogObj.element.parentElement.remove();\n confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n confirmDialogObj.element.remove();\n }\n };\n return confirmDialogObj;\n }\n DialogUtility.confirm = confirm;\n // eslint-disable-next-line\n function createDialog(options, element) {\n var dialogObject = new Dialog(options);\n dialogObject.appendTo(element);\n return dialogObject;\n }\n // eslint-disable-next-line\n function alertOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setAlertButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function confirmOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setConfirmButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function formOptions(options, option) {\n options.header = !isNullOrUndefined(option.title) ? option.title : null;\n options.content = !isNullOrUndefined(option.content) ? option.content : '';\n options.isModal = !isNullOrUndefined(option.isModal) ? option.isModal : true;\n options.showCloseIcon = !isNullOrUndefined(option.showCloseIcon) ? option.showCloseIcon : false;\n options.allowDragging = !isNullOrUndefined(option.isDraggable) ? option.isDraggable : false;\n options.closeOnEscape = !isNullOrUndefined(option.closeOnEscape) ? option.closeOnEscape : false;\n options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };\n options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings :\n { effect: 'Fade', duration: 400, delay: 0 };\n options.cssClass = !isNullOrUndefined(option.cssClass) ? option.cssClass : '';\n options.zIndex = !isNullOrUndefined(option.zIndex) ? option.zIndex : 1000;\n options.open = !isNullOrUndefined(option.open) ? option.open : null;\n options.width = !isNullOrUndefined(option.width) ? option.width : 'auto';\n options.height = !isNullOrUndefined(option.height) ? option.height : 'auto';\n return options;\n }\n // eslint-disable-next-line\n function setAlertButtonModel(options, option) {\n var alertButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);\n }\n else {\n options.buttons = alertButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function setConfirmButtonModel(options, option) {\n var okButtonModel = {\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n };\n var cancelButtonModel = {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n };\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);\n }\n else {\n options.buttons[0] = okButtonModel;\n }\n if (!isNullOrUndefined(option.cancelButton)) {\n options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);\n }\n else {\n options.buttons[1] = cancelButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function formButtonModel(buttonModel, option, buttonPropModel) {\n var buttonProps = buttonPropModel;\n if (!isNullOrUndefined(option.text)) {\n buttonProps.buttonModel.content = option.text;\n }\n if (!isNullOrUndefined(option.icon)) {\n buttonProps.buttonModel.iconCss = option.icon;\n }\n if (!isNullOrUndefined(option.cssClass)) {\n buttonProps.buttonModel.cssClass = option.cssClass;\n }\n if (!isNullOrUndefined(option.click)) {\n buttonProps.click = option.click;\n }\n if (!isNullOrUndefined(option.isFlat)) {\n buttonProps.isFlat = option.isFlat;\n }\n return buttonProps;\n }\n})(DialogUtility || (DialogUtility = {}));\n\nvar __extends$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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};\nvar TOUCHEND_HIDE_DELAY = 1500;\nvar TAPHOLD_THRESHOLD = 500;\nvar SHOW_POINTER_TIP_GAP = 0;\nvar HIDE_POINTER_TIP_GAP = 8;\nvar MOUSE_TRAIL_GAP = 2;\nvar POINTER_ADJUST = 2;\nvar ROOT$1 = 'e-tooltip';\nvar RTL$1 = 'e-rtl';\nvar DEVICE$1 = 'e-bigger';\nvar ICON$1 = 'e-icons';\nvar CLOSE = 'e-tooltip-close';\nvar TOOLTIP_WRAP = 'e-tooltip-wrap';\nvar CONTENT = 'e-tip-content';\nvar ARROW_TIP = 'e-arrow-tip';\nvar ARROW_TIP_OUTER = 'e-arrow-tip-outer';\nvar ARROW_TIP_INNER = 'e-arrow-tip-inner';\nvar TIP_BOTTOM = 'e-tip-bottom';\nvar TIP_TOP = 'e-tip-top';\nvar TIP_LEFT = 'e-tip-left';\nvar TIP_RIGHT = 'e-tip-right';\nvar POPUP_ROOT$1 = 'e-popup';\nvar POPUP_OPEN = 'e-popup-open';\nvar POPUP_CLOSE = 'e-popup-close';\nvar POPUP_LIB = 'e-lib';\nvar HIDE_POPUP = 'e-hidden';\nvar POPUP_CONTAINER = 'e-tooltip-popup-container';\nvar Animation = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Animation, _super);\n function Animation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate$2([\n Property({ effect: 'FadeIn', duration: 150, delay: 0 })\n ], Animation.prototype, \"open\", void 0);\n __decorate$2([\n Property({ effect: 'FadeOut', duration: 150, delay: 0 })\n ], Animation.prototype, \"close\", void 0);\n return Animation;\n}(ChildProperty));\n/**\n * Represents the Tooltip component that displays a piece of information about the target element on mouse hover.\n * ```html\n * ' + params.documentTitle + ' '; // Attach css files\n\n if (params.css) {\n // Add support for single file\n if (!Array.isArray(params.css)) params.css = [params.css]; // Create link tags for each css file\n\n params.css.forEach(function (file) {\n printFrame.srcdoc += '';\n });\n }\n\n printFrame.srcdoc += '';\n } // Check printable type\n\n\n switch (params.type) {\n case 'pdf':\n // Check browser support for pdf and if not supported we will just open the pdf file instead\n if (_browser__WEBPACK_IMPORTED_MODULE_0__[\"default\"].isIE()) {\n try {\n console.info('Print.js doesn\\'t support PDF printing in Internet Explorer.');\n var win = window.open(params.fallbackPrintable, '_blank');\n win.focus();\n params.onIncompatibleBrowser();\n } catch (error) {\n params.onError(error);\n } finally {\n // Make sure there is no loading modal opened\n if (params.showModal) _modal__WEBPACK_IMPORTED_MODULE_1__[\"default\"].close();\n if (params.onLoadingEnd) params.onLoadingEnd();\n }\n } else {\n _pdf__WEBPACK_IMPORTED_MODULE_2__[\"default\"].print(params, printFrame);\n }\n\n break;\n\n case 'image':\n _image__WEBPACK_IMPORTED_MODULE_5__[\"default\"].print(params, printFrame);\n break;\n\n case 'html':\n _html__WEBPACK_IMPORTED_MODULE_3__[\"default\"].print(params, printFrame);\n break;\n\n case 'raw-html':\n _raw_html__WEBPACK_IMPORTED_MODULE_4__[\"default\"].print(params, printFrame);\n break;\n\n case 'json':\n _json__WEBPACK_IMPORTED_MODULE_6__[\"default\"].print(params, printFrame);\n break;\n }\n }\n});\n\n/***/ }),\n\n/***/ \"./src/js/json.js\":\n/*!************************!*\\\n !*** ./src/js/json.js ***!\n \\************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _functions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./functions */ \"./src/js/functions.js\");\n/* harmony import */ var _print__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./print */ \"./src/js/print.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n print: function print(params, printFrame) {\n // Check if we received proper data\n if (_typeof(params.printable) !== 'object') {\n throw new Error('Invalid javascript data object (JSON).');\n } // Validate repeatTableHeader\n\n\n if (typeof params.repeatTableHeader !== 'boolean') {\n throw new Error('Invalid value for repeatTableHeader attribute (JSON).');\n } // Validate properties\n\n\n if (!params.properties || !Array.isArray(params.properties)) {\n throw new Error('Invalid properties array for your JSON data.');\n } // We will format the property objects to keep the JSON api compatible with older releases\n\n\n params.properties = params.properties.map(function (property) {\n return {\n field: _typeof(property) === 'object' ? property.field : property,\n displayName: _typeof(property) === 'object' ? property.displayName : property,\n columnSize: _typeof(property) === 'object' && property.columnSize ? property.columnSize + ';' : 100 / params.properties.length + '%;'\n };\n }); // Create a print container element\n\n params.printableElement = document.createElement('div'); // Check if we are adding a print header\n\n if (params.header) {\n Object(_functions__WEBPACK_IMPORTED_MODULE_0__[\"addHeader\"])(params.printableElement, params);\n } // Build the printable html data\n\n\n params.printableElement.innerHTML += jsonToHTML(params); // Print the json data\n\n _print__WEBPACK_IMPORTED_MODULE_1__[\"default\"].send(params, printFrame);\n }\n});\n\nfunction jsonToHTML(params) {\n // Get the row and column data\n var data = params.printable;\n var properties = params.properties; // Create a html table\n\n var htmlData = ''; // Check if the header should be repeated\n\n if (params.repeatTableHeader) {\n htmlData += '';\n } // Add the table header row\n\n\n htmlData += '
';\n return htmlData;\n}\n\n/***/ }),\n\n/***/ \"./src/js/modal.js\":\n/*!*************************!*\\\n !*** ./src/js/modal.js ***!\n \\*************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\nvar Modal = {\n show: function show(params) {\n // Build modal\n var modalStyle = 'font-family:sans-serif; ' + 'display:table; ' + 'text-align:center; ' + 'font-weight:300; ' + 'font-size:30px; ' + 'left:0; top:0;' + 'position:fixed; ' + 'z-index: 9990;' + 'color: #0460B5; ' + 'width: 100%; ' + 'height: 100%; ' + 'background-color:rgba(255,255,255,.9);' + 'transition: opacity .3s ease;'; // Create wrapper\n\n var printModal = document.createElement('div');\n printModal.setAttribute('style', modalStyle);\n printModal.setAttribute('id', 'printJS-Modal'); // Create content div\n\n var contentDiv = document.createElement('div');\n contentDiv.setAttribute('style', 'display:table-cell; vertical-align:middle; padding-bottom:100px;'); // Add close button (requires print.css)\n\n var closeButton = document.createElement('div');\n closeButton.setAttribute('class', 'printClose');\n closeButton.setAttribute('id', 'printClose');\n contentDiv.appendChild(closeButton); // Add spinner (requires print.css)\n\n var spinner = document.createElement('span');\n spinner.setAttribute('class', 'printSpinner');\n contentDiv.appendChild(spinner); // Add message\n\n var messageNode = document.createTextNode(params.modalMessage);\n contentDiv.appendChild(messageNode); // Add contentDiv to printModal\n\n printModal.appendChild(contentDiv); // Append print modal element to document body\n\n document.getElementsByTagName('body')[0].appendChild(printModal); // Add event listener to close button\n\n document.getElementById('printClose').addEventListener('click', function () {\n Modal.close();\n });\n },\n close: function close() {\n var printModal = document.getElementById('printJS-Modal');\n\n if (printModal) {\n printModal.parentNode.removeChild(printModal);\n }\n }\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Modal);\n\n/***/ }),\n\n/***/ \"./src/js/pdf.js\":\n/*!***********************!*\\\n !*** ./src/js/pdf.js ***!\n \\***********************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _print__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./print */ \"./src/js/print.js\");\n/* harmony import */ var _functions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./functions */ \"./src/js/functions.js\");\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n print: function print(params, printFrame) {\n // Check if we have base64 data\n if (params.base64) {\n var bytesArray = Uint8Array.from(atob(params.printable), function (c) {\n return c.charCodeAt(0);\n });\n createBlobAndPrint(params, printFrame, bytesArray);\n return;\n } // Format pdf url\n\n\n params.printable = /^(blob|http|\\/\\/)/i.test(params.printable) ? params.printable : window.location.origin + (params.printable.charAt(0) !== '/' ? '/' + params.printable : params.printable); // Get the file through a http request (Preload)\n\n var req = new window.XMLHttpRequest();\n req.responseType = 'arraybuffer';\n req.addEventListener('error', function () {\n Object(_functions__WEBPACK_IMPORTED_MODULE_1__[\"cleanUp\"])(params);\n params.onError(req.statusText, req); // Since we don't have a pdf document available, we will stop the print job\n });\n req.addEventListener('load', function () {\n // Check for errors\n if ([200, 201].indexOf(req.status) === -1) {\n Object(_functions__WEBPACK_IMPORTED_MODULE_1__[\"cleanUp\"])(params);\n params.onError(req.statusText, req); // Since we don't have a pdf document available, we will stop the print job\n\n return;\n } // Print requested document\n\n\n createBlobAndPrint(params, printFrame, req.response);\n });\n req.open('GET', params.printable, true);\n req.send();\n }\n});\n\nfunction createBlobAndPrint(params, printFrame, data) {\n // Pass response or base64 data to a blob and create a local object url\n var localPdf = new window.Blob([data], {\n type: 'application/pdf'\n });\n localPdf = window.URL.createObjectURL(localPdf); // Set iframe src with pdf document url\n\n printFrame.setAttribute('src', localPdf);\n _print__WEBPACK_IMPORTED_MODULE_0__[\"default\"].send(params, printFrame);\n}\n\n/***/ }),\n\n/***/ \"./src/js/print.js\":\n/*!*************************!*\\\n !*** ./src/js/print.js ***!\n \\*************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _browser__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./browser */ \"./src/js/browser.js\");\n/* harmony import */ var _functions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./functions */ \"./src/js/functions.js\");\n\n\nvar Print = {\n send: function send(params, printFrame) {\n // Append iframe element to document body\n document.getElementsByTagName('body')[0].appendChild(printFrame); // Get iframe element\n\n var iframeElement = document.getElementById(params.frameId); // Wait for iframe to load all content\n\n iframeElement.onload = function () {\n if (params.type === 'pdf') {\n // Add a delay for Firefox. In my tests, 1000ms was sufficient but 100ms was not\n if (_browser__WEBPACK_IMPORTED_MODULE_0__[\"default\"].isFirefox()) {\n setTimeout(function () {\n return performPrint(iframeElement, params);\n }, 1000);\n } else {\n performPrint(iframeElement, params);\n }\n\n return;\n } // Get iframe element document\n\n\n var printDocument = iframeElement.contentWindow || iframeElement.contentDocument;\n if (printDocument.document) printDocument = printDocument.document; // Append printable element to the iframe body\n\n printDocument.body.appendChild(params.printableElement); // Add custom style\n\n if (params.type !== 'pdf' && params.style) {\n // Create style element\n var style = document.createElement('style');\n style.innerHTML = params.style; // Append style element to iframe's head\n\n printDocument.head.appendChild(style);\n } // If printing images, wait for them to load inside the iframe\n\n\n var images = printDocument.getElementsByTagName('img');\n\n if (images.length > 0) {\n loadIframeImages(Array.from(images)).then(function () {\n return performPrint(iframeElement, params);\n });\n } else {\n performPrint(iframeElement, params);\n }\n };\n }\n};\n\nfunction performPrint(iframeElement, params) {\n try {\n iframeElement.focus(); // If Edge or IE, try catch with execCommand\n\n if (_browser__WEBPACK_IMPORTED_MODULE_0__[\"default\"].isEdge() || _browser__WEBPACK_IMPORTED_MODULE_0__[\"default\"].isIE()) {\n try {\n iframeElement.contentWindow.document.execCommand('print', false, null);\n } catch (e) {\n iframeElement.contentWindow.print();\n }\n } else {\n // Other browsers\n iframeElement.contentWindow.print();\n }\n } catch (error) {\n params.onError(error);\n } finally {\n if (_browser__WEBPACK_IMPORTED_MODULE_0__[\"default\"].isFirefox()) {\n // Move the iframe element off-screen and make it invisible\n iframeElement.style.visibility = 'hidden';\n iframeElement.style.left = '-1px';\n }\n\n Object(_functions__WEBPACK_IMPORTED_MODULE_1__[\"cleanUp\"])(params);\n }\n}\n\nfunction loadIframeImages(images) {\n var promises = images.map(function (image) {\n if (image.src && image.src !== window.location.href) {\n return loadIframeImage(image);\n }\n });\n return Promise.all(promises);\n}\n\nfunction loadIframeImage(image) {\n return new Promise(function (resolve) {\n var pollImage = function pollImage() {\n !image || typeof image.naturalWidth === 'undefined' || image.naturalWidth === 0 || !image.complete ? setTimeout(pollImage, 500) : resolve();\n };\n\n pollImage();\n });\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Print);\n\n/***/ }),\n\n/***/ \"./src/js/raw-html.js\":\n/*!****************************!*\\\n !*** ./src/js/raw-html.js ***!\n \\****************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _print__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./print */ \"./src/js/print.js\");\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n print: function print(params, printFrame) {\n // Create printable element (container)\n params.printableElement = document.createElement('div');\n params.printableElement.setAttribute('style', 'width:100%'); // Set our raw html as the printable element inner html content\n\n params.printableElement.innerHTML = params.printable; // Print html contents\n\n _print__WEBPACK_IMPORTED_MODULE_0__[\"default\"].send(params, printFrame);\n }\n});\n\n/***/ }),\n\n/***/ \"./src/sass/index.scss\":\n/*!*****************************!*\\\n !*** ./src/sass/index.scss ***!\n \\*****************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\n// extracted by mini-css-extract-plugin\n\n/***/ }),\n\n/***/ 0:\n/*!****************************!*\\\n !*** multi ./src/index.js ***!\n \\****************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(/*! ./src/index.js */\"./src/index.js\");\n\n\n/***/ })\n\n/******/ })[\"default\"];\n});\n","import { Subject } from './Subject';\nexport class BehaviorSubject extends Subject {\n constructor(_value) {\n super();\n this._value = _value;\n }\n get value() {\n return this.getValue();\n }\n _subscribe(subscriber) {\n const subscription = super._subscribe(subscriber);\n !subscription.closed && subscriber.next(this._value);\n return subscription;\n }\n getValue() {\n const { hasError, thrownError, _value } = this;\n if (hasError) {\n throw thrownError;\n }\n this._throwIfClosed();\n return _value;\n }\n next(value) {\n super.next((this._value = value));\n }\n}\n","import { SafeSubscriber, Subscriber } from './Subscriber';\nimport { isSubscription } from './Subscription';\nimport { observable as Symbol_observable } from './symbol/observable';\nimport { pipeFromArray } from './util/pipe';\nimport { config } from './config';\nimport { isFunction } from './util/isFunction';\nimport { errorContext } from './util/errorContext';\nexport class Observable {\n constructor(subscribe) {\n if (subscribe) {\n this._subscribe = subscribe;\n }\n }\n lift(operator) {\n const observable = new Observable();\n observable.source = this;\n observable.operator = operator;\n return observable;\n }\n subscribe(observerOrNext, error, complete) {\n const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);\n errorContext(() => {\n const { operator, source } = this;\n subscriber.add(operator\n ?\n operator.call(subscriber, source)\n : source\n ?\n this._subscribe(subscriber)\n :\n this._trySubscribe(subscriber));\n });\n return subscriber;\n }\n _trySubscribe(sink) {\n try {\n return this._subscribe(sink);\n }\n catch (err) {\n sink.error(err);\n }\n }\n forEach(next, promiseCtor) {\n promiseCtor = getPromiseCtor(promiseCtor);\n return new promiseCtor((resolve, reject) => {\n const subscriber = new SafeSubscriber({\n next: (value) => {\n try {\n next(value);\n }\n catch (err) {\n reject(err);\n subscriber.unsubscribe();\n }\n },\n error: reject,\n complete: resolve,\n });\n this.subscribe(subscriber);\n });\n }\n _subscribe(subscriber) {\n var _a;\n return (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber);\n }\n [Symbol_observable]() {\n return this;\n }\n pipe(...operations) {\n return pipeFromArray(operations)(this);\n }\n toPromise(promiseCtor) {\n promiseCtor = getPromiseCtor(promiseCtor);\n return new promiseCtor((resolve, reject) => {\n let value;\n this.subscribe((x) => (value = x), (err) => reject(err), () => resolve(value));\n });\n }\n}\nObservable.create = (subscribe) => {\n return new Observable(subscribe);\n};\nfunction getPromiseCtor(promiseCtor) {\n var _a;\n return (_a = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a !== void 0 ? _a : Promise;\n}\nfunction isObserver(value) {\n return value && isFunction(value.next) && isFunction(value.error) && isFunction(value.complete);\n}\nfunction isSubscriber(value) {\n return (value && value instanceof Subscriber) || (isObserver(value) && isSubscription(value));\n}\n","import { createErrorClass } from './createErrorClass';\nexport const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {\n _super(this);\n this.name = 'ObjectUnsubscribedError';\n this.message = 'object unsubscribed';\n});\n","import { Observable } from './Observable';\nimport { Subscription, EMPTY_SUBSCRIPTION } from './Subscription';\nimport { ObjectUnsubscribedError } from './util/ObjectUnsubscribedError';\nimport { arrRemove } from './util/arrRemove';\nimport { errorContext } from './util/errorContext';\nexport class Subject extends Observable {\n constructor() {\n super();\n this.closed = false;\n this.currentObservers = null;\n this.observers = [];\n this.isStopped = false;\n this.hasError = false;\n this.thrownError = null;\n }\n lift(operator) {\n const subject = new AnonymousSubject(this, this);\n subject.operator = operator;\n return subject;\n }\n _throwIfClosed() {\n if (this.closed) {\n throw new ObjectUnsubscribedError();\n }\n }\n next(value) {\n errorContext(() => {\n this._throwIfClosed();\n if (!this.isStopped) {\n if (!this.currentObservers) {\n this.currentObservers = Array.from(this.observers);\n }\n for (const observer of this.currentObservers) {\n observer.next(value);\n }\n }\n });\n }\n error(err) {\n errorContext(() => {\n this._throwIfClosed();\n if (!this.isStopped) {\n this.hasError = this.isStopped = true;\n this.thrownError = err;\n const { observers } = this;\n while (observers.length) {\n observers.shift().error(err);\n }\n }\n });\n }\n complete() {\n errorContext(() => {\n this._throwIfClosed();\n if (!this.isStopped) {\n this.isStopped = true;\n const { observers } = this;\n while (observers.length) {\n observers.shift().complete();\n }\n }\n });\n }\n unsubscribe() {\n this.isStopped = this.closed = true;\n this.observers = this.currentObservers = null;\n }\n get observed() {\n var _a;\n return ((_a = this.observers) === null || _a === void 0 ? void 0 : _a.length) > 0;\n }\n _trySubscribe(subscriber) {\n this._throwIfClosed();\n return super._trySubscribe(subscriber);\n }\n _subscribe(subscriber) {\n this._throwIfClosed();\n this._checkFinalizedStatuses(subscriber);\n return this._innerSubscribe(subscriber);\n }\n _innerSubscribe(subscriber) {\n const { hasError, isStopped, observers } = this;\n if (hasError || isStopped) {\n return EMPTY_SUBSCRIPTION;\n }\n this.currentObservers = null;\n observers.push(subscriber);\n return new Subscription(() => {\n this.currentObservers = null;\n arrRemove(observers, subscriber);\n });\n }\n _checkFinalizedStatuses(subscriber) {\n const { hasError, thrownError, isStopped } = this;\n if (hasError) {\n subscriber.error(thrownError);\n }\n else if (isStopped) {\n subscriber.complete();\n }\n }\n asObservable() {\n const observable = new Observable();\n observable.source = this;\n return observable;\n }\n}\nSubject.create = (destination, source) => {\n return new AnonymousSubject(destination, source);\n};\nexport class AnonymousSubject extends Subject {\n constructor(destination, source) {\n super();\n this.destination = destination;\n this.source = source;\n }\n next(value) {\n var _a, _b;\n (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.next) === null || _b === void 0 ? void 0 : _b.call(_a, value);\n }\n error(err) {\n var _a, _b;\n (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, err);\n }\n complete() {\n var _a, _b;\n (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.complete) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n _subscribe(subscriber) {\n var _a, _b;\n return (_b = (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;\n }\n}\n","export function noop() { }\n","export const COMPLETE_NOTIFICATION = (() => createNotification('C', undefined, undefined))();\nexport function errorNotification(error) {\n return createNotification('E', undefined, error);\n}\nexport function nextNotification(value) {\n return createNotification('N', value, undefined);\n}\nexport function createNotification(kind, value, error) {\n return {\n kind,\n value,\n error,\n };\n}\n","import { isFunction } from './util/isFunction';\nimport { isSubscription, Subscription } from './Subscription';\nimport { config } from './config';\nimport { reportUnhandledError } from './util/reportUnhandledError';\nimport { noop } from './util/noop';\nimport { nextNotification, errorNotification, COMPLETE_NOTIFICATION } from './NotificationFactories';\nimport { timeoutProvider } from './scheduler/timeoutProvider';\nimport { captureError } from './util/errorContext';\nexport class Subscriber extends Subscription {\n constructor(destination) {\n super();\n this.isStopped = false;\n if (destination) {\n this.destination = destination;\n if (isSubscription(destination)) {\n destination.add(this);\n }\n }\n else {\n this.destination = EMPTY_OBSERVER;\n }\n }\n static create(next, error, complete) {\n return new SafeSubscriber(next, error, complete);\n }\n next(value) {\n if (this.isStopped) {\n handleStoppedNotification(nextNotification(value), this);\n }\n else {\n this._next(value);\n }\n }\n error(err) {\n if (this.isStopped) {\n handleStoppedNotification(errorNotification(err), this);\n }\n else {\n this.isStopped = true;\n this._error(err);\n }\n }\n complete() {\n if (this.isStopped) {\n handleStoppedNotification(COMPLETE_NOTIFICATION, this);\n }\n else {\n this.isStopped = true;\n this._complete();\n }\n }\n unsubscribe() {\n if (!this.closed) {\n this.isStopped = true;\n super.unsubscribe();\n this.destination = null;\n }\n }\n _next(value) {\n this.destination.next(value);\n }\n _error(err) {\n try {\n this.destination.error(err);\n }\n finally {\n this.unsubscribe();\n }\n }\n _complete() {\n try {\n this.destination.complete();\n }\n finally {\n this.unsubscribe();\n }\n }\n}\nconst _bind = Function.prototype.bind;\nfunction bind(fn, thisArg) {\n return _bind.call(fn, thisArg);\n}\nclass ConsumerObserver {\n constructor(partialObserver) {\n this.partialObserver = partialObserver;\n }\n next(value) {\n const { partialObserver } = this;\n if (partialObserver.next) {\n try {\n partialObserver.next(value);\n }\n catch (error) {\n handleUnhandledError(error);\n }\n }\n }\n error(err) {\n const { partialObserver } = this;\n if (partialObserver.error) {\n try {\n partialObserver.error(err);\n }\n catch (error) {\n handleUnhandledError(error);\n }\n }\n else {\n handleUnhandledError(err);\n }\n }\n complete() {\n const { partialObserver } = this;\n if (partialObserver.complete) {\n try {\n partialObserver.complete();\n }\n catch (error) {\n handleUnhandledError(error);\n }\n }\n }\n}\nexport class SafeSubscriber extends Subscriber {\n constructor(observerOrNext, error, complete) {\n super();\n let partialObserver;\n if (isFunction(observerOrNext) || !observerOrNext) {\n partialObserver = {\n next: (observerOrNext !== null && observerOrNext !== void 0 ? observerOrNext : undefined),\n error: error !== null && error !== void 0 ? error : undefined,\n complete: complete !== null && complete !== void 0 ? complete : undefined,\n };\n }\n else {\n let context;\n if (this && config.useDeprecatedNextContext) {\n context = Object.create(observerOrNext);\n context.unsubscribe = () => this.unsubscribe();\n partialObserver = {\n next: observerOrNext.next && bind(observerOrNext.next, context),\n error: observerOrNext.error && bind(observerOrNext.error, context),\n complete: observerOrNext.complete && bind(observerOrNext.complete, context),\n };\n }\n else {\n partialObserver = observerOrNext;\n }\n }\n this.destination = new ConsumerObserver(partialObserver);\n }\n}\nfunction handleUnhandledError(error) {\n if (config.useDeprecatedSynchronousErrorHandling) {\n captureError(error);\n }\n else {\n reportUnhandledError(error);\n }\n}\nfunction defaultErrorHandler(err) {\n throw err;\n}\nfunction handleStoppedNotification(notification, subscriber) {\n const { onStoppedNotification } = config;\n onStoppedNotification && timeoutProvider.setTimeout(() => onStoppedNotification(notification, subscriber));\n}\nexport const EMPTY_OBSERVER = {\n closed: true,\n next: noop,\n error: defaultErrorHandler,\n complete: noop,\n};\n","import { createErrorClass } from './createErrorClass';\nexport const UnsubscriptionError = createErrorClass((_super) => function UnsubscriptionErrorImpl(errors) {\n _super(this);\n this.message = errors\n ? `${errors.length} errors occurred during unsubscription:\n${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\\n ')}`\n : '';\n this.name = 'UnsubscriptionError';\n this.errors = errors;\n});\n","import { isFunction } from './util/isFunction';\nimport { UnsubscriptionError } from './util/UnsubscriptionError';\nimport { arrRemove } from './util/arrRemove';\nexport class Subscription {\n constructor(initialTeardown) {\n this.initialTeardown = initialTeardown;\n this.closed = false;\n this._parentage = null;\n this._finalizers = null;\n }\n unsubscribe() {\n let errors;\n if (!this.closed) {\n this.closed = true;\n const { _parentage } = this;\n if (_parentage) {\n this._parentage = null;\n if (Array.isArray(_parentage)) {\n for (const parent of _parentage) {\n parent.remove(this);\n }\n }\n else {\n _parentage.remove(this);\n }\n }\n const { initialTeardown: initialFinalizer } = this;\n if (isFunction(initialFinalizer)) {\n try {\n initialFinalizer();\n }\n catch (e) {\n errors = e instanceof UnsubscriptionError ? e.errors : [e];\n }\n }\n const { _finalizers } = this;\n if (_finalizers) {\n this._finalizers = null;\n for (const finalizer of _finalizers) {\n try {\n execFinalizer(finalizer);\n }\n catch (err) {\n errors = errors !== null && errors !== void 0 ? errors : [];\n if (err instanceof UnsubscriptionError) {\n errors = [...errors, ...err.errors];\n }\n else {\n errors.push(err);\n }\n }\n }\n }\n if (errors) {\n throw new UnsubscriptionError(errors);\n }\n }\n }\n add(teardown) {\n var _a;\n if (teardown && teardown !== this) {\n if (this.closed) {\n execFinalizer(teardown);\n }\n else {\n if (teardown instanceof Subscription) {\n if (teardown.closed || teardown._hasParent(this)) {\n return;\n }\n teardown._addParent(this);\n }\n (this._finalizers = (_a = this._finalizers) !== null && _a !== void 0 ? _a : []).push(teardown);\n }\n }\n }\n _hasParent(parent) {\n const { _parentage } = this;\n return _parentage === parent || (Array.isArray(_parentage) && _parentage.includes(parent));\n }\n _addParent(parent) {\n const { _parentage } = this;\n this._parentage = Array.isArray(_parentage) ? (_parentage.push(parent), _parentage) : _parentage ? [_parentage, parent] : parent;\n }\n _removeParent(parent) {\n const { _parentage } = this;\n if (_parentage === parent) {\n this._parentage = null;\n }\n else if (Array.isArray(_parentage)) {\n arrRemove(_parentage, parent);\n }\n }\n remove(teardown) {\n const { _finalizers } = this;\n _finalizers && arrRemove(_finalizers, teardown);\n if (teardown instanceof Subscription) {\n teardown._removeParent(this);\n }\n }\n}\nSubscription.EMPTY = (() => {\n const empty = new Subscription();\n empty.closed = true;\n return empty;\n})();\nexport const EMPTY_SUBSCRIPTION = Subscription.EMPTY;\nexport function isSubscription(value) {\n return (value instanceof Subscription ||\n (value && 'closed' in value && isFunction(value.remove) && isFunction(value.add) && isFunction(value.unsubscribe)));\n}\nfunction execFinalizer(finalizer) {\n if (isFunction(finalizer)) {\n finalizer();\n }\n else {\n finalizer.unsubscribe();\n }\n}\n","export const config = {\n onUnhandledError: null,\n onStoppedNotification: null,\n Promise: undefined,\n useDeprecatedSynchronousErrorHandling: false,\n useDeprecatedNextContext: false,\n};\n","import { Observable } from '../Observable';\nexport const EMPTY = new Observable((subscriber) => subscriber.complete());\nexport function empty(scheduler) {\n return scheduler ? emptyScheduled(scheduler) : EMPTY;\n}\nfunction emptyScheduled(scheduler) {\n return new Observable((subscriber) => scheduler.schedule(() => subscriber.complete()));\n}\n","import { Observable } from '../Observable';\nimport { argsArgArrayOrObject } from '../util/argsArgArrayOrObject';\nimport { innerFrom } from './innerFrom';\nimport { popResultSelector } from '../util/args';\nimport { createOperatorSubscriber } from '../operators/OperatorSubscriber';\nimport { mapOneOrManyArgs } from '../util/mapOneOrManyArgs';\nimport { createObject } from '../util/createObject';\nexport function forkJoin(...args) {\n const resultSelector = popResultSelector(args);\n const { args: sources, keys } = argsArgArrayOrObject(args);\n const result = new Observable((subscriber) => {\n const { length } = sources;\n if (!length) {\n subscriber.complete();\n return;\n }\n const values = new Array(length);\n let remainingCompletions = length;\n let remainingEmissions = length;\n for (let sourceIndex = 0; sourceIndex < length; sourceIndex++) {\n let hasValue = false;\n innerFrom(sources[sourceIndex]).subscribe(createOperatorSubscriber(subscriber, (value) => {\n if (!hasValue) {\n hasValue = true;\n remainingEmissions--;\n }\n values[sourceIndex] = value;\n }, () => remainingCompletions--, undefined, () => {\n if (!remainingCompletions || !hasValue) {\n if (!remainingEmissions) {\n subscriber.next(keys ? createObject(keys, values) : values);\n }\n subscriber.complete();\n }\n }));\n }\n });\n return resultSelector ? result.pipe(mapOneOrManyArgs(resultSelector)) : result;\n}\n","import { executeSchedule } from '../util/executeSchedule';\nimport { operate } from '../util/lift';\nimport { createOperatorSubscriber } from './OperatorSubscriber';\nexport function observeOn(scheduler, delay = 0) {\n return operate((source, subscriber) => {\n source.subscribe(createOperatorSubscriber(subscriber, (value) => executeSchedule(subscriber, scheduler, () => subscriber.next(value), delay), () => executeSchedule(subscriber, scheduler, () => subscriber.complete(), delay), (err) => executeSchedule(subscriber, scheduler, () => subscriber.error(err), delay)));\n });\n}\n","import { operate } from '../util/lift';\nexport function subscribeOn(scheduler, delay = 0) {\n return operate((source, subscriber) => {\n subscriber.add(scheduler.schedule(() => source.subscribe(subscriber), delay));\n });\n}\n","import { Observable } from '../Observable';\nimport { executeSchedule } from '../util/executeSchedule';\nexport function scheduleAsyncIterable(input, scheduler) {\n if (!input) {\n throw new Error('Iterable cannot be null');\n }\n return new Observable((subscriber) => {\n executeSchedule(subscriber, scheduler, () => {\n const iterator = input[Symbol.asyncIterator]();\n executeSchedule(subscriber, scheduler, () => {\n iterator.next().then((result) => {\n if (result.done) {\n subscriber.complete();\n }\n else {\n subscriber.next(result.value);\n }\n });\n }, 0, true);\n });\n });\n}\n","import { scheduleObservable } from './scheduleObservable';\nimport { schedulePromise } from './schedulePromise';\nimport { scheduleArray } from './scheduleArray';\nimport { scheduleIterable } from './scheduleIterable';\nimport { scheduleAsyncIterable } from './scheduleAsyncIterable';\nimport { isInteropObservable } from '../util/isInteropObservable';\nimport { isPromise } from '../util/isPromise';\nimport { isArrayLike } from '../util/isArrayLike';\nimport { isIterable } from '../util/isIterable';\nimport { isAsyncIterable } from '../util/isAsyncIterable';\nimport { createInvalidObservableTypeError } from '../util/throwUnobservableError';\nimport { isReadableStreamLike } from '../util/isReadableStreamLike';\nimport { scheduleReadableStreamLike } from './scheduleReadableStreamLike';\nexport function scheduled(input, scheduler) {\n if (input != null) {\n if (isInteropObservable(input)) {\n return scheduleObservable(input, scheduler);\n }\n if (isArrayLike(input)) {\n return scheduleArray(input, scheduler);\n }\n if (isPromise(input)) {\n return schedulePromise(input, scheduler);\n }\n if (isAsyncIterable(input)) {\n return scheduleAsyncIterable(input, scheduler);\n }\n if (isIterable(input)) {\n return scheduleIterable(input, scheduler);\n }\n if (isReadableStreamLike(input)) {\n return scheduleReadableStreamLike(input, scheduler);\n }\n }\n throw createInvalidObservableTypeError(input);\n}\n","import { innerFrom } from '../observable/innerFrom';\nimport { observeOn } from '../operators/observeOn';\nimport { subscribeOn } from '../operators/subscribeOn';\nexport function scheduleObservable(input, scheduler) {\n return innerFrom(input).pipe(subscribeOn(scheduler), observeOn(scheduler));\n}\n","import { Observable } from '../Observable';\nexport function scheduleArray(input, scheduler) {\n return new Observable((subscriber) => {\n let i = 0;\n return scheduler.schedule(function () {\n if (i === input.length) {\n subscriber.complete();\n }\n else {\n subscriber.next(input[i++]);\n if (!subscriber.closed) {\n this.schedule();\n }\n }\n });\n });\n}\n","import { innerFrom } from '../observable/innerFrom';\nimport { observeOn } from '../operators/observeOn';\nimport { subscribeOn } from '../operators/subscribeOn';\nexport function schedulePromise(input, scheduler) {\n return innerFrom(input).pipe(subscribeOn(scheduler), observeOn(scheduler));\n}\n","import { Observable } from '../Observable';\nimport { iterator as Symbol_iterator } from '../symbol/iterator';\nimport { isFunction } from '../util/isFunction';\nimport { executeSchedule } from '../util/executeSchedule';\nexport function scheduleIterable(input, scheduler) {\n return new Observable((subscriber) => {\n let iterator;\n executeSchedule(subscriber, scheduler, () => {\n iterator = input[Symbol_iterator]();\n executeSchedule(subscriber, scheduler, () => {\n let value;\n let done;\n try {\n ({ value, done } = iterator.next());\n }\n catch (err) {\n subscriber.error(err);\n return;\n }\n if (done) {\n subscriber.complete();\n }\n else {\n subscriber.next(value);\n }\n }, 0, true);\n });\n return () => isFunction(iterator === null || iterator === void 0 ? void 0 : iterator.return) && iterator.return();\n });\n}\n","import { scheduleAsyncIterable } from './scheduleAsyncIterable';\nimport { readableStreamLikeToAsyncGenerator } from '../util/isReadableStreamLike';\nexport function scheduleReadableStreamLike(input, scheduler) {\n return scheduleAsyncIterable(readableStreamLikeToAsyncGenerator(input), scheduler);\n}\n","import { scheduled } from '../scheduled/scheduled';\nimport { innerFrom } from './innerFrom';\nexport function from(input, scheduler) {\n return scheduler ? scheduled(input, scheduler) : innerFrom(input);\n}\n","import { __asyncValues, __awaiter } from \"tslib\";\nimport { isArrayLike } from '../util/isArrayLike';\nimport { isPromise } from '../util/isPromise';\nimport { Observable } from '../Observable';\nimport { isInteropObservable } from '../util/isInteropObservable';\nimport { isAsyncIterable } from '../util/isAsyncIterable';\nimport { createInvalidObservableTypeError } from '../util/throwUnobservableError';\nimport { isIterable } from '../util/isIterable';\nimport { isReadableStreamLike, readableStreamLikeToAsyncGenerator } from '../util/isReadableStreamLike';\nimport { isFunction } from '../util/isFunction';\nimport { reportUnhandledError } from '../util/reportUnhandledError';\nimport { observable as Symbol_observable } from '../symbol/observable';\nexport function innerFrom(input) {\n if (input instanceof Observable) {\n return input;\n }\n if (input != null) {\n if (isInteropObservable(input)) {\n return fromInteropObservable(input);\n }\n if (isArrayLike(input)) {\n return fromArrayLike(input);\n }\n if (isPromise(input)) {\n return fromPromise(input);\n }\n if (isAsyncIterable(input)) {\n return fromAsyncIterable(input);\n }\n if (isIterable(input)) {\n return fromIterable(input);\n }\n if (isReadableStreamLike(input)) {\n return fromReadableStreamLike(input);\n }\n }\n throw createInvalidObservableTypeError(input);\n}\nexport function fromInteropObservable(obj) {\n return new Observable((subscriber) => {\n const obs = obj[Symbol_observable]();\n if (isFunction(obs.subscribe)) {\n return obs.subscribe(subscriber);\n }\n throw new TypeError('Provided object does not correctly implement Symbol.observable');\n });\n}\nexport function fromArrayLike(array) {\n return new Observable((subscriber) => {\n for (let i = 0; i < array.length && !subscriber.closed; i++) {\n subscriber.next(array[i]);\n }\n subscriber.complete();\n });\n}\nexport function fromPromise(promise) {\n return new Observable((subscriber) => {\n promise\n .then((value) => {\n if (!subscriber.closed) {\n subscriber.next(value);\n subscriber.complete();\n }\n }, (err) => subscriber.error(err))\n .then(null, reportUnhandledError);\n });\n}\nexport function fromIterable(iterable) {\n return new Observable((subscriber) => {\n for (const value of iterable) {\n subscriber.next(value);\n if (subscriber.closed) {\n return;\n }\n }\n subscriber.complete();\n });\n}\nexport function fromAsyncIterable(asyncIterable) {\n return new Observable((subscriber) => {\n process(asyncIterable, subscriber).catch((err) => subscriber.error(err));\n });\n}\nexport function fromReadableStreamLike(readableStream) {\n return fromAsyncIterable(readableStreamLikeToAsyncGenerator(readableStream));\n}\nfunction process(asyncIterable, subscriber) {\n var asyncIterable_1, asyncIterable_1_1;\n var e_1, _a;\n return __awaiter(this, void 0, void 0, function* () {\n try {\n for (asyncIterable_1 = __asyncValues(asyncIterable); asyncIterable_1_1 = yield asyncIterable_1.next(), !asyncIterable_1_1.done;) {\n const value = asyncIterable_1_1.value;\n subscriber.next(value);\n if (subscriber.closed) {\n return;\n }\n }\n }\n catch (e_1_1) { e_1 = { error: e_1_1 }; }\n finally {\n try {\n if (asyncIterable_1_1 && !asyncIterable_1_1.done && (_a = asyncIterable_1.return)) yield _a.call(asyncIterable_1);\n }\n finally { if (e_1) throw e_1.error; }\n }\n subscriber.complete();\n });\n}\n","import { mergeAll } from '../operators/mergeAll';\nimport { innerFrom } from './innerFrom';\nimport { EMPTY } from './empty';\nimport { popNumber, popScheduler } from '../util/args';\nimport { from } from './from';\nexport function merge(...args) {\n const scheduler = popScheduler(args);\n const concurrent = popNumber(args, Infinity);\n const sources = args;\n return !sources.length\n ?\n EMPTY\n : sources.length === 1\n ?\n innerFrom(sources[0])\n :\n mergeAll(concurrent)(from(sources, scheduler));\n}\n","import { popScheduler } from '../util/args';\nimport { from } from './from';\nexport function of(...args) {\n const scheduler = popScheduler(args);\n return from(args, scheduler);\n}\n","import { Observable } from '../Observable';\nimport { isFunction } from '../util/isFunction';\nexport function throwError(errorOrErrorFactory, scheduler) {\n const errorFactory = isFunction(errorOrErrorFactory) ? errorOrErrorFactory : () => errorOrErrorFactory;\n const init = (subscriber) => subscriber.error(errorFactory());\n return new Observable(scheduler ? (subscriber) => scheduler.schedule(init, 0, subscriber) : init);\n}\n","import { Subscriber } from '../Subscriber';\nexport function createOperatorSubscriber(destination, onNext, onComplete, onError, onFinalize) {\n return new OperatorSubscriber(destination, onNext, onComplete, onError, onFinalize);\n}\nexport class OperatorSubscriber extends Subscriber {\n constructor(destination, onNext, onComplete, onError, onFinalize, shouldUnsubscribe) {\n super(destination);\n this.onFinalize = onFinalize;\n this.shouldUnsubscribe = shouldUnsubscribe;\n this._next = onNext\n ? function (value) {\n try {\n onNext(value);\n }\n catch (err) {\n destination.error(err);\n }\n }\n : super._next;\n this._error = onError\n ? function (err) {\n try {\n onError(err);\n }\n catch (err) {\n destination.error(err);\n }\n finally {\n this.unsubscribe();\n }\n }\n : super._error;\n this._complete = onComplete\n ? function () {\n try {\n onComplete();\n }\n catch (err) {\n destination.error(err);\n }\n finally {\n this.unsubscribe();\n }\n }\n : super._complete;\n }\n unsubscribe() {\n var _a;\n if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {\n const { closed } = this;\n super.unsubscribe();\n !closed && ((_a = this.onFinalize) === null || _a === void 0 ? void 0 : _a.call(this));\n }\n }\n}\n","import { innerFrom } from '../observable/innerFrom';\nimport { createOperatorSubscriber } from './OperatorSubscriber';\nimport { operate } from '../util/lift';\nexport function catchError(selector) {\n return operate((source, subscriber) => {\n let innerSub = null;\n let syncUnsub = false;\n let handledResult;\n innerSub = source.subscribe(createOperatorSubscriber(subscriber, undefined, undefined, (err) => {\n handledResult = innerFrom(selector(err, catchError(selector)(source)));\n if (innerSub) {\n innerSub.unsubscribe();\n innerSub = null;\n handledResult.subscribe(subscriber);\n }\n else {\n syncUnsub = true;\n }\n }));\n if (syncUnsub) {\n innerSub.unsubscribe();\n innerSub = null;\n handledResult.subscribe(subscriber);\n }\n });\n}\n","import { mergeMap } from './mergeMap';\nimport { isFunction } from '../util/isFunction';\nexport function concatMap(project, resultSelector) {\n return isFunction(resultSelector) ? mergeMap(project, resultSelector, 1) : mergeMap(project, 1);\n}\n","import { operate } from '../util/lift';\nimport { createOperatorSubscriber } from './OperatorSubscriber';\nexport function filter(predicate, thisArg) {\n return operate((source, subscriber) => {\n let index = 0;\n source.subscribe(createOperatorSubscriber(subscriber, (value) => predicate.call(thisArg, value, index++) && subscriber.next(value)));\n });\n}\n","import { operate } from '../util/lift';\nimport { createOperatorSubscriber } from './OperatorSubscriber';\nexport function map(project, thisArg) {\n return operate((source, subscriber) => {\n let index = 0;\n source.subscribe(createOperatorSubscriber(subscriber, (value) => {\n subscriber.next(project.call(thisArg, value, index++));\n }));\n });\n}\n","import { mergeMap } from './mergeMap';\nimport { identity } from '../util/identity';\nexport function mergeAll(concurrent = Infinity) {\n return mergeMap(identity, concurrent);\n}\n","import { map } from './map';\nimport { innerFrom } from '../observable/innerFrom';\nimport { operate } from '../util/lift';\nimport { mergeInternals } from './mergeInternals';\nimport { isFunction } from '../util/isFunction';\nexport function mergeMap(project, resultSelector, concurrent = Infinity) {\n if (isFunction(resultSelector)) {\n return mergeMap((a, i) => map((b, ii) => resultSelector(a, b, i, ii))(innerFrom(project(a, i))), concurrent);\n }\n else if (typeof resultSelector === 'number') {\n concurrent = resultSelector;\n }\n return operate((source, subscriber) => mergeInternals(source, subscriber, project, concurrent));\n}\n","import { innerFrom } from '../observable/innerFrom';\nimport { executeSchedule } from '../util/executeSchedule';\nimport { createOperatorSubscriber } from './OperatorSubscriber';\nexport function mergeInternals(source, subscriber, project, concurrent, onBeforeNext, expand, innerSubScheduler, additionalFinalizer) {\n const buffer = [];\n let active = 0;\n let index = 0;\n let isComplete = false;\n const checkComplete = () => {\n if (isComplete && !buffer.length && !active) {\n subscriber.complete();\n }\n };\n const outerNext = (value) => (active < concurrent ? doInnerSub(value) : buffer.push(value));\n const doInnerSub = (value) => {\n expand && subscriber.next(value);\n active++;\n let innerComplete = false;\n innerFrom(project(value, index++)).subscribe(createOperatorSubscriber(subscriber, (innerValue) => {\n onBeforeNext === null || onBeforeNext === void 0 ? void 0 : onBeforeNext(innerValue);\n if (expand) {\n outerNext(innerValue);\n }\n else {\n subscriber.next(innerValue);\n }\n }, () => {\n innerComplete = true;\n }, undefined, () => {\n if (innerComplete) {\n try {\n active--;\n while (buffer.length && active < concurrent) {\n const bufferedValue = buffer.shift();\n if (innerSubScheduler) {\n executeSchedule(subscriber, innerSubScheduler, () => doInnerSub(bufferedValue));\n }\n else {\n doInnerSub(bufferedValue);\n }\n }\n checkComplete();\n }\n catch (err) {\n subscriber.error(err);\n }\n }\n }));\n };\n source.subscribe(createOperatorSubscriber(subscriber, outerNext, () => {\n isComplete = true;\n checkComplete();\n }));\n return () => {\n additionalFinalizer === null || additionalFinalizer === void 0 ? void 0 : additionalFinalizer();\n };\n}\n","import { EMPTY } from '../observable/empty';\nimport { operate } from '../util/lift';\nimport { createOperatorSubscriber } from './OperatorSubscriber';\nexport function take(count) {\n return count <= 0\n ?\n () => EMPTY\n : operate((source, subscriber) => {\n let seen = 0;\n source.subscribe(createOperatorSubscriber(subscriber, (value) => {\n if (++seen <= count) {\n subscriber.next(value);\n if (count <= seen) {\n subscriber.complete();\n }\n }\n }));\n });\n}\n","export const timeoutProvider = {\n setTimeout(handler, timeout, ...args) {\n const { delegate } = timeoutProvider;\n if (delegate === null || delegate === void 0 ? void 0 : delegate.setTimeout) {\n return delegate.setTimeout(handler, timeout, ...args);\n }\n return setTimeout(handler, timeout, ...args);\n },\n clearTimeout(handle) {\n const { delegate } = timeoutProvider;\n return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearTimeout) || clearTimeout)(handle);\n },\n delegate: undefined,\n};\n","export function getSymbolIterator() {\n if (typeof Symbol !== 'function' || !Symbol.iterator) {\n return '@@iterator';\n }\n return Symbol.iterator;\n}\nexport const iterator = getSymbolIterator();\n","export const observable = (() => (typeof Symbol === 'function' && Symbol.observable) || '@@observable')();\n","import { isFunction } from './isFunction';\nimport { isScheduler } from './isScheduler';\nfunction last(arr) {\n return arr[arr.length - 1];\n}\nexport function popResultSelector(args) {\n return isFunction(last(args)) ? args.pop() : undefined;\n}\nexport function popScheduler(args) {\n return isScheduler(last(args)) ? args.pop() : undefined;\n}\nexport function popNumber(args, defaultValue) {\n return typeof last(args) === 'number' ? args.pop() : defaultValue;\n}\n","import { isFunction } from './isFunction';\nexport function isScheduler(value) {\n return value && isFunction(value.schedule);\n}\n","const { isArray } = Array;\nconst { getPrototypeOf, prototype: objectProto, keys: getKeys } = Object;\nexport function argsArgArrayOrObject(args) {\n if (args.length === 1) {\n const first = args[0];\n if (isArray(first)) {\n return { args: first, keys: null };\n }\n if (isPOJO(first)) {\n const keys = getKeys(first);\n return {\n args: keys.map((key) => first[key]),\n keys,\n };\n }\n }\n return { args: args, keys: null };\n}\nfunction isPOJO(obj) {\n return obj && typeof obj === 'object' && getPrototypeOf(obj) === objectProto;\n}\n","export function arrRemove(arr, item) {\n if (arr) {\n const index = arr.indexOf(item);\n 0 <= index && arr.splice(index, 1);\n }\n}\n","export function createErrorClass(createImpl) {\n const _super = (instance) => {\n Error.call(instance);\n instance.stack = new Error().stack;\n };\n const ctorFunc = createImpl(_super);\n ctorFunc.prototype = Object.create(Error.prototype);\n ctorFunc.prototype.constructor = ctorFunc;\n return ctorFunc;\n}\n","export function createObject(keys, values) {\n return keys.reduce((result, key, i) => ((result[key] = values[i]), result), {});\n}\n","import { config } from '../config';\nlet context = null;\nexport function errorContext(cb) {\n if (config.useDeprecatedSynchronousErrorHandling) {\n const isRoot = !context;\n if (isRoot) {\n context = { errorThrown: false, error: null };\n }\n cb();\n if (isRoot) {\n const { errorThrown, error } = context;\n context = null;\n if (errorThrown) {\n throw error;\n }\n }\n }\n else {\n cb();\n }\n}\nexport function captureError(err) {\n if (config.useDeprecatedSynchronousErrorHandling && context) {\n context.errorThrown = true;\n context.error = err;\n }\n}\n","export function executeSchedule(parentSubscription, scheduler, work, delay = 0, repeat = false) {\n const scheduleSubscription = scheduler.schedule(function () {\n work();\n if (repeat) {\n parentSubscription.add(this.schedule(null, delay));\n }\n else {\n this.unsubscribe();\n }\n }, delay);\n parentSubscription.add(scheduleSubscription);\n if (!repeat) {\n return scheduleSubscription;\n }\n}\n","export function identity(x) {\n return x;\n}\n","export const isArrayLike = ((x) => x && typeof x.length === 'number' && typeof x !== 'function');\n","import { isFunction } from './isFunction';\nexport function isAsyncIterable(obj) {\n return Symbol.asyncIterator && isFunction(obj === null || obj === void 0 ? void 0 : obj[Symbol.asyncIterator]);\n}\n","export function isFunction(value) {\n return typeof value === 'function';\n}\n","import { observable as Symbol_observable } from '../symbol/observable';\nimport { isFunction } from './isFunction';\nexport function isInteropObservable(input) {\n return isFunction(input[Symbol_observable]);\n}\n","import { iterator as Symbol_iterator } from '../symbol/iterator';\nimport { isFunction } from './isFunction';\nexport function isIterable(input) {\n return isFunction(input === null || input === void 0 ? void 0 : input[Symbol_iterator]);\n}\n","import { isFunction } from \"./isFunction\";\nexport function isPromise(value) {\n return isFunction(value === null || value === void 0 ? void 0 : value.then);\n}\n","import { __asyncGenerator, __await } from \"tslib\";\nimport { isFunction } from './isFunction';\nexport function readableStreamLikeToAsyncGenerator(readableStream) {\n return __asyncGenerator(this, arguments, function* readableStreamLikeToAsyncGenerator_1() {\n const reader = readableStream.getReader();\n try {\n while (true) {\n const { value, done } = yield __await(reader.read());\n if (done) {\n return yield __await(void 0);\n }\n yield yield __await(value);\n }\n }\n finally {\n reader.releaseLock();\n }\n });\n}\nexport function isReadableStreamLike(obj) {\n return isFunction(obj === null || obj === void 0 ? void 0 : obj.getReader);\n}\n","import { isFunction } from './isFunction';\nexport function hasLift(source) {\n return isFunction(source === null || source === void 0 ? void 0 : source.lift);\n}\nexport function operate(init) {\n return (source) => {\n if (hasLift(source)) {\n return source.lift(function (liftedSource) {\n try {\n return init(liftedSource, this);\n }\n catch (err) {\n this.error(err);\n }\n });\n }\n throw new TypeError('Unable to lift unknown Observable type');\n };\n}\n","import { map } from \"../operators/map\";\nconst { isArray } = Array;\nfunction callOrApply(fn, args) {\n return isArray(args) ? fn(...args) : fn(args);\n}\nexport function mapOneOrManyArgs(fn) {\n return map(args => callOrApply(fn, args));\n}\n","import { identity } from './identity';\nexport function pipe(...fns) {\n return pipeFromArray(fns);\n}\nexport function pipeFromArray(fns) {\n if (fns.length === 0) {\n return identity;\n }\n if (fns.length === 1) {\n return fns[0];\n }\n return function piped(input) {\n return fns.reduce((prev, fn) => fn(prev), input);\n };\n}\n","import { config } from '../config';\nimport { timeoutProvider } from '../scheduler/timeoutProvider';\nexport function reportUnhandledError(err) {\n timeoutProvider.setTimeout(() => {\n const { onUnhandledError } = config;\n if (onUnhandledError) {\n onUnhandledError(err);\n }\n else {\n throw err;\n }\n });\n}\n","export function createInvalidObservableTypeError(input) {\n return new TypeError(`You provided ${input !== null && typeof input === 'object' ? 'an invalid object' : `'${input}'`} where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.`);\n}\n","/*!\n* sweetalert2 v11.12.0\n* Released under the MIT License.\n*/\n(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Sweetalert2 = factory());\n})(this, (function () { 'use strict';\n\n function _arrayLikeToArray(r, a) {\n (null == a || a > r.length) && (a = r.length);\n for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];\n return n;\n }\n function _arrayWithHoles(r) {\n if (Array.isArray(r)) return r;\n }\n function _arrayWithoutHoles(r) {\n if (Array.isArray(r)) return _arrayLikeToArray(r);\n }\n function _assertClassBrand(e, t, n) {\n if (\"function\" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;\n throw new TypeError(\"Private element is not present on this object\");\n }\n function _assertThisInitialized(e) {\n if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n return e;\n }\n function _callSuper(t, o, e) {\n return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));\n }\n function _checkPrivateRedeclaration(e, t) {\n if (t.has(e)) throw new TypeError(\"Cannot initialize the same private elements twice on an object\");\n }\n function _classCallCheck(a, n) {\n if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\");\n }\n function _classPrivateFieldGet2(s, a) {\n return s.get(_assertClassBrand(s, a));\n }\n function _classPrivateFieldInitSpec(e, t, a) {\n _checkPrivateRedeclaration(e, t), t.set(e, a);\n }\n function _classPrivateFieldSet2(s, a, r) {\n return s.set(_assertClassBrand(s, a), r), r;\n }\n function _construct(t, e, r) {\n if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);\n var o = [null];\n o.push.apply(o, e);\n var p = new (t.bind.apply(t, o))();\n return p;\n }\n function _defineProperties(e, r) {\n for (var t = 0; t < r.length; t++) {\n var o = r[t];\n o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);\n }\n }\n function _createClass(e, r, t) {\n return r && _defineProperties(e.prototype, r), Object.defineProperty(e, \"prototype\", {\n writable: !1\n }), e;\n }\n function _createForOfIteratorHelper(r, e) {\n var t = \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n if (!t) {\n if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e ) {\n t && (r = t);\n var n = 0,\n F = function () {};\n return {\n s: F,\n n: function () {\n return n >= r.length ? {\n done: !0\n } : {\n done: !1,\n value: r[n++]\n };\n },\n e: function (r) {\n throw r;\n },\n f: F\n };\n }\n throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n var o,\n a = !0,\n u = !1;\n return {\n s: function () {\n t = t.call(r);\n },\n n: function () {\n var r = t.next();\n return a = r.done, r;\n },\n e: function (r) {\n u = !0, o = r;\n },\n f: function () {\n try {\n a || null == t.return || t.return();\n } finally {\n if (u) throw o;\n }\n }\n };\n }\n function _get() {\n return _get = \"undefined\" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) {\n var p = _superPropBase(e, t);\n if (p) {\n var n = Object.getOwnPropertyDescriptor(p, t);\n return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value;\n }\n }, _get.apply(null, arguments);\n }\n function _getPrototypeOf(t) {\n return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {\n return t.__proto__ || Object.getPrototypeOf(t);\n }, _getPrototypeOf(t);\n }\n function _inherits(t, e) {\n if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\");\n t.prototype = Object.create(e && e.prototype, {\n constructor: {\n value: t,\n writable: !0,\n configurable: !0\n }\n }), Object.defineProperty(t, \"prototype\", {\n writable: !1\n }), e && _setPrototypeOf(t, e);\n }\n function _isNativeReflectConstruct() {\n try {\n var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n } catch (t) {}\n return (_isNativeReflectConstruct = function () {\n return !!t;\n })();\n }\n function _iterableToArray(r) {\n if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r);\n }\n function _iterableToArrayLimit(r, l) {\n var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n if (null != t) {\n var e,\n n,\n i,\n u,\n a = [],\n f = !0,\n o = !1;\n try {\n if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);\n } catch (r) {\n o = !0, n = r;\n } finally {\n try {\n if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;\n } finally {\n if (o) throw n;\n }\n }\n return a;\n }\n }\n function _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n function _possibleConstructorReturn(t, e) {\n if (e && (\"object\" == typeof e || \"function\" == typeof e)) return e;\n if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\");\n return _assertThisInitialized(t);\n }\n function _setPrototypeOf(t, e) {\n return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {\n return t.__proto__ = e, t;\n }, _setPrototypeOf(t, e);\n }\n function _slicedToArray(r, e) {\n return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();\n }\n function _superPropBase(t, o) {\n for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t)););\n return t;\n }\n function _toConsumableArray(r) {\n return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();\n }\n function _toPrimitive(t, r) {\n if (\"object\" != typeof t || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r );\n if (\"object\" != typeof i) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (String )(t);\n }\n function _toPropertyKey(t) {\n var i = _toPrimitive(t, \"string\");\n return \"symbol\" == typeof i ? i : i + \"\";\n }\n function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n }\n function _unsupportedIterableToArray(r, a) {\n if (r) {\n if (\"string\" == typeof r) return _arrayLikeToArray(r, a);\n var t = {}.toString.call(r).slice(8, -1);\n return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;\n }\n }\n\n var RESTORE_FOCUS_TIMEOUT = 100;\n\n /** @type {GlobalState} */\n var globalState = {};\n var focusPreviousActiveElement = function focusPreviousActiveElement() {\n if (globalState.previousActiveElement instanceof HTMLElement) {\n globalState.previousActiveElement.focus();\n globalState.previousActiveElement = null;\n } else if (document.body) {\n document.body.focus();\n }\n };\n\n /**\n * Restore previous active (focused) element\n *\n * @param {boolean} returnFocus\n * @returns {Promise}\n */\n var restoreActiveElement = function restoreActiveElement(returnFocus) {\n return new Promise(function (resolve) {\n if (!returnFocus) {\n return resolve();\n }\n var x = window.scrollX;\n var y = window.scrollY;\n globalState.restoreFocusTimeout = setTimeout(function () {\n focusPreviousActiveElement();\n resolve();\n }, RESTORE_FOCUS_TIMEOUT); // issues/900\n\n window.scrollTo(x, y);\n });\n };\n\n var swalPrefix = 'swal2-';\n\n /**\n * @typedef\n * { | 'container'\n * | 'shown'\n * | 'height-auto'\n * | 'iosfix'\n * | 'popup'\n * | 'modal'\n * | 'no-backdrop'\n * | 'no-transition'\n * | 'toast'\n * | 'toast-shown'\n * | 'show'\n * | 'hide'\n * | 'close'\n * | 'title'\n * | 'html-container'\n * | 'actions'\n * | 'confirm'\n * | 'deny'\n * | 'cancel'\n * | 'default-outline'\n * | 'footer'\n * | 'icon'\n * | 'icon-content'\n * | 'image'\n * | 'input'\n * | 'file'\n * | 'range'\n * | 'select'\n * | 'radio'\n * | 'checkbox'\n * | 'label'\n * | 'textarea'\n * | 'inputerror'\n * | 'input-label'\n * | 'validation-message'\n * | 'progress-steps'\n * | 'active-progress-step'\n * | 'progress-step'\n * | 'progress-step-line'\n * | 'loader'\n * | 'loading'\n * | 'styled'\n * | 'top'\n * | 'top-start'\n * | 'top-end'\n * | 'top-left'\n * | 'top-right'\n * | 'center'\n * | 'center-start'\n * | 'center-end'\n * | 'center-left'\n * | 'center-right'\n * | 'bottom'\n * | 'bottom-start'\n * | 'bottom-end'\n * | 'bottom-left'\n * | 'bottom-right'\n * | 'grow-row'\n * | 'grow-column'\n * | 'grow-fullscreen'\n * | 'rtl'\n * | 'timer-progress-bar'\n * | 'timer-progress-bar-container'\n * | 'scrollbar-measure'\n * | 'icon-success'\n * | 'icon-warning'\n * | 'icon-info'\n * | 'icon-question'\n * | 'icon-error'\n * } SwalClass\n * @typedef {Record} SwalClasses\n */\n\n /**\n * @typedef {'success' | 'warning' | 'info' | 'question' | 'error'} SwalIcon\n * @typedef {Record} SwalIcons\n */\n\n /** @type {SwalClass[]} */\n var classNames = ['container', 'shown', 'height-auto', 'iosfix', 'popup', 'modal', 'no-backdrop', 'no-transition', 'toast', 'toast-shown', 'show', 'hide', 'close', 'title', 'html-container', 'actions', 'confirm', 'deny', 'cancel', 'default-outline', 'footer', 'icon', 'icon-content', 'image', 'input', 'file', 'range', 'select', 'radio', 'checkbox', 'label', 'textarea', 'inputerror', 'input-label', 'validation-message', 'progress-steps', 'active-progress-step', 'progress-step', 'progress-step-line', 'loader', 'loading', 'styled', 'top', 'top-start', 'top-end', 'top-left', 'top-right', 'center', 'center-start', 'center-end', 'center-left', 'center-right', 'bottom', 'bottom-start', 'bottom-end', 'bottom-left', 'bottom-right', 'grow-row', 'grow-column', 'grow-fullscreen', 'rtl', 'timer-progress-bar', 'timer-progress-bar-container', 'scrollbar-measure', 'icon-success', 'icon-warning', 'icon-info', 'icon-question', 'icon-error'];\n var swalClasses = classNames.reduce(function (acc, className) {\n acc[className] = swalPrefix + className;\n return acc;\n }, /** @type {SwalClasses} */{});\n\n /** @type {SwalIcon[]} */\n var icons = ['success', 'warning', 'info', 'question', 'error'];\n var iconTypes = icons.reduce(function (acc, icon) {\n acc[icon] = swalPrefix + icon;\n return acc;\n }, /** @type {SwalIcons} */{});\n\n var consolePrefix = 'SweetAlert2:';\n\n /**\n * Capitalize the first letter of a string\n *\n * @param {string} str\n * @returns {string}\n */\n var capitalizeFirstLetter = function capitalizeFirstLetter(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n };\n\n /**\n * Standardize console warnings\n *\n * @param {string | string[]} message\n */\n var warn = function warn(message) {\n console.warn(\"\".concat(consolePrefix, \" \").concat(_typeof(message) === 'object' ? message.join(' ') : message));\n };\n\n /**\n * Standardize console errors\n *\n * @param {string} message\n */\n var error = function error(message) {\n console.error(\"\".concat(consolePrefix, \" \").concat(message));\n };\n\n /**\n * Private global state for `warnOnce`\n *\n * @type {string[]}\n * @private\n */\n var previousWarnOnceMessages = [];\n\n /**\n * Show a console warning, but only if it hasn't already been shown\n *\n * @param {string} message\n */\n var warnOnce = function warnOnce(message) {\n if (!previousWarnOnceMessages.includes(message)) {\n previousWarnOnceMessages.push(message);\n warn(message);\n }\n };\n\n /**\n * Show a one-time console warning about deprecated params/methods\n *\n * @param {string} deprecatedParam\n * @param {string?} useInstead\n */\n var warnAboutDeprecation = function warnAboutDeprecation(deprecatedParam) {\n var useInstead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n warnOnce(\"\\\"\".concat(deprecatedParam, \"\\\" is deprecated and will be removed in the next major release.\").concat(useInstead ? \" Use \\\"\".concat(useInstead, \"\\\" instead.\") : ''));\n };\n\n /**\n * If `arg` is a function, call it (with no arguments or context) and return the result.\n * Otherwise, just pass the value through\n *\n * @param {Function | any} arg\n * @returns {any}\n */\n var callIfFunction = function callIfFunction(arg) {\n return typeof arg === 'function' ? arg() : arg;\n };\n\n /**\n * @param {any} arg\n * @returns {boolean}\n */\n var hasToPromiseFn = function hasToPromiseFn(arg) {\n return arg && typeof arg.toPromise === 'function';\n };\n\n /**\n * @param {any} arg\n * @returns {Promise}\n */\n var asPromise = function asPromise(arg) {\n return hasToPromiseFn(arg) ? arg.toPromise() : Promise.resolve(arg);\n };\n\n /**\n * @param {any} arg\n * @returns {boolean}\n */\n var isPromise = function isPromise(arg) {\n return arg && Promise.resolve(arg) === arg;\n };\n\n /**\n * Gets the popup container which contains the backdrop and the popup itself.\n *\n * @returns {HTMLElement | null}\n */\n var getContainer = function getContainer() {\n return document.body.querySelector(\".\".concat(swalClasses.container));\n };\n\n /**\n * @param {string} selectorString\n * @returns {HTMLElement | null}\n */\n var elementBySelector = function elementBySelector(selectorString) {\n var container = getContainer();\n return container ? container.querySelector(selectorString) : null;\n };\n\n /**\n * @param {string} className\n * @returns {HTMLElement | null}\n */\n var elementByClass = function elementByClass(className) {\n return elementBySelector(\".\".concat(className));\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getPopup = function getPopup() {\n return elementByClass(swalClasses.popup);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getIcon = function getIcon() {\n return elementByClass(swalClasses.icon);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getIconContent = function getIconContent() {\n return elementByClass(swalClasses['icon-content']);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getTitle = function getTitle() {\n return elementByClass(swalClasses.title);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getHtmlContainer = function getHtmlContainer() {\n return elementByClass(swalClasses['html-container']);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getImage = function getImage() {\n return elementByClass(swalClasses.image);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getProgressSteps = function getProgressSteps() {\n return elementByClass(swalClasses['progress-steps']);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getValidationMessage = function getValidationMessage() {\n return elementByClass(swalClasses['validation-message']);\n };\n\n /**\n * @returns {HTMLButtonElement | null}\n */\n var getConfirmButton = function getConfirmButton() {\n return /** @type {HTMLButtonElement} */elementBySelector(\".\".concat(swalClasses.actions, \" .\").concat(swalClasses.confirm));\n };\n\n /**\n * @returns {HTMLButtonElement | null}\n */\n var getCancelButton = function getCancelButton() {\n return /** @type {HTMLButtonElement} */elementBySelector(\".\".concat(swalClasses.actions, \" .\").concat(swalClasses.cancel));\n };\n\n /**\n * @returns {HTMLButtonElement | null}\n */\n var getDenyButton = function getDenyButton() {\n return /** @type {HTMLButtonElement} */elementBySelector(\".\".concat(swalClasses.actions, \" .\").concat(swalClasses.deny));\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getInputLabel = function getInputLabel() {\n return elementByClass(swalClasses['input-label']);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getLoader = function getLoader() {\n return elementBySelector(\".\".concat(swalClasses.loader));\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getActions = function getActions() {\n return elementByClass(swalClasses.actions);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getFooter = function getFooter() {\n return elementByClass(swalClasses.footer);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getTimerProgressBar = function getTimerProgressBar() {\n return elementByClass(swalClasses['timer-progress-bar']);\n };\n\n /**\n * @returns {HTMLElement | null}\n */\n var getCloseButton = function getCloseButton() {\n return elementByClass(swalClasses.close);\n };\n\n // https://github.com/jkup/focusable/blob/master/index.js\n var focusable = \"\\n a[href],\\n area[href],\\n input:not([disabled]),\\n select:not([disabled]),\\n textarea:not([disabled]),\\n button:not([disabled]),\\n iframe,\\n object,\\n embed,\\n [tabindex=\\\"0\\\"],\\n [contenteditable],\\n audio[controls],\\n video[controls],\\n summary\\n\";\n /**\n * @returns {HTMLElement[]}\n */\n var getFocusableElements = function getFocusableElements() {\n var popup = getPopup();\n if (!popup) {\n return [];\n }\n /** @type {NodeListOf} */\n var focusableElementsWithTabindex = popup.querySelectorAll('[tabindex]:not([tabindex=\"-1\"]):not([tabindex=\"0\"])');\n var focusableElementsWithTabindexSorted = Array.from(focusableElementsWithTabindex)\n // sort according to tabindex\n .sort(function (a, b) {\n var tabindexA = parseInt(a.getAttribute('tabindex') || '0');\n var tabindexB = parseInt(b.getAttribute('tabindex') || '0');\n if (tabindexA > tabindexB) {\n return 1;\n } else if (tabindexA < tabindexB) {\n return -1;\n }\n return 0;\n });\n\n /** @type {NodeListOf} */\n var otherFocusableElements = popup.querySelectorAll(focusable);\n var otherFocusableElementsFiltered = Array.from(otherFocusableElements).filter(function (el) {\n return el.getAttribute('tabindex') !== '-1';\n });\n return _toConsumableArray(new Set(focusableElementsWithTabindexSorted.concat(otherFocusableElementsFiltered))).filter(function (el) {\n return isVisible$1(el);\n });\n };\n\n /**\n * @returns {boolean}\n */\n var isModal = function isModal() {\n return hasClass(document.body, swalClasses.shown) && !hasClass(document.body, swalClasses['toast-shown']) && !hasClass(document.body, swalClasses['no-backdrop']);\n };\n\n /**\n * @returns {boolean}\n */\n var isToast = function isToast() {\n var popup = getPopup();\n if (!popup) {\n return false;\n }\n return hasClass(popup, swalClasses.toast);\n };\n\n /**\n * @returns {boolean}\n */\n var isLoading = function isLoading() {\n var popup = getPopup();\n if (!popup) {\n return false;\n }\n return popup.hasAttribute('data-loading');\n };\n\n /**\n * Securely set innerHTML of an element\n * https://github.com/sweetalert2/sweetalert2/issues/1926\n *\n * @param {HTMLElement} elem\n * @param {string} html\n */\n var setInnerHtml = function setInnerHtml(elem, html) {\n elem.textContent = '';\n if (html) {\n var parser = new DOMParser();\n var parsed = parser.parseFromString(html, \"text/html\");\n var head = parsed.querySelector('head');\n head && Array.from(head.childNodes).forEach(function (child) {\n elem.appendChild(child);\n });\n var body = parsed.querySelector('body');\n body && Array.from(body.childNodes).forEach(function (child) {\n if (child instanceof HTMLVideoElement || child instanceof HTMLAudioElement) {\n elem.appendChild(child.cloneNode(true)); // https://github.com/sweetalert2/sweetalert2/issues/2507\n } else {\n elem.appendChild(child);\n }\n });\n }\n };\n\n /**\n * @param {HTMLElement} elem\n * @param {string} className\n * @returns {boolean}\n */\n var hasClass = function hasClass(elem, className) {\n if (!className) {\n return false;\n }\n var classList = className.split(/\\s+/);\n for (var i = 0; i < classList.length; i++) {\n if (!elem.classList.contains(classList[i])) {\n return false;\n }\n }\n return true;\n };\n\n /**\n * @param {HTMLElement} elem\n * @param {SweetAlertOptions} params\n */\n var removeCustomClasses = function removeCustomClasses(elem, params) {\n Array.from(elem.classList).forEach(function (className) {\n if (!Object.values(swalClasses).includes(className) && !Object.values(iconTypes).includes(className) && !Object.values(params.showClass || {}).includes(className)) {\n elem.classList.remove(className);\n }\n });\n };\n\n /**\n * @param {HTMLElement} elem\n * @param {SweetAlertOptions} params\n * @param {string} className\n */\n var applyCustomClass = function applyCustomClass(elem, params, className) {\n removeCustomClasses(elem, params);\n if (params.customClass && params.customClass[className]) {\n if (typeof params.customClass[className] !== 'string' && !params.customClass[className].forEach) {\n warn(\"Invalid type of customClass.\".concat(className, \"! Expected string or iterable object, got \\\"\").concat(_typeof(params.customClass[className]), \"\\\"\"));\n return;\n }\n addClass(elem, params.customClass[className]);\n }\n };\n\n /**\n * @param {HTMLElement} popup\n * @param {import('./renderers/renderInput').InputClass | SweetAlertInput} inputClass\n * @returns {HTMLInputElement | null}\n */\n var getInput$1 = function getInput(popup, inputClass) {\n if (!inputClass) {\n return null;\n }\n switch (inputClass) {\n case 'select':\n case 'textarea':\n case 'file':\n return popup.querySelector(\".\".concat(swalClasses.popup, \" > .\").concat(swalClasses[inputClass]));\n case 'checkbox':\n return popup.querySelector(\".\".concat(swalClasses.popup, \" > .\").concat(swalClasses.checkbox, \" input\"));\n case 'radio':\n return popup.querySelector(\".\".concat(swalClasses.popup, \" > .\").concat(swalClasses.radio, \" input:checked\")) || popup.querySelector(\".\".concat(swalClasses.popup, \" > .\").concat(swalClasses.radio, \" input:first-child\"));\n case 'range':\n return popup.querySelector(\".\".concat(swalClasses.popup, \" > .\").concat(swalClasses.range, \" input\"));\n default:\n return popup.querySelector(\".\".concat(swalClasses.popup, \" > .\").concat(swalClasses.input));\n }\n };\n\n /**\n * @param {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} input\n */\n var focusInput = function focusInput(input) {\n input.focus();\n\n // place cursor at end of text in text input\n if (input.type !== 'file') {\n // http://stackoverflow.com/a/2345915\n var val = input.value;\n input.value = '';\n input.value = val;\n }\n };\n\n /**\n * @param {HTMLElement | HTMLElement[] | null} target\n * @param {string | string[] | readonly string[] | undefined} classList\n * @param {boolean} condition\n */\n var toggleClass = function toggleClass(target, classList, condition) {\n if (!target || !classList) {\n return;\n }\n if (typeof classList === 'string') {\n classList = classList.split(/\\s+/).filter(Boolean);\n }\n classList.forEach(function (className) {\n if (Array.isArray(target)) {\n target.forEach(function (elem) {\n condition ? elem.classList.add(className) : elem.classList.remove(className);\n });\n } else {\n condition ? target.classList.add(className) : target.classList.remove(className);\n }\n });\n };\n\n /**\n * @param {HTMLElement | HTMLElement[] | null} target\n * @param {string | string[] | readonly string[] | undefined} classList\n */\n var addClass = function addClass(target, classList) {\n toggleClass(target, classList, true);\n };\n\n /**\n * @param {HTMLElement | HTMLElement[] | null} target\n * @param {string | string[] | readonly string[] | undefined} classList\n */\n var removeClass = function removeClass(target, classList) {\n toggleClass(target, classList, false);\n };\n\n /**\n * Get direct child of an element by class name\n *\n * @param {HTMLElement} elem\n * @param {string} className\n * @returns {HTMLElement | undefined}\n */\n var getDirectChildByClass = function getDirectChildByClass(elem, className) {\n var children = Array.from(elem.children);\n for (var i = 0; i < children.length; i++) {\n var child = children[i];\n if (child instanceof HTMLElement && hasClass(child, className)) {\n return child;\n }\n }\n };\n\n /**\n * @param {HTMLElement} elem\n * @param {string} property\n * @param {*} value\n */\n var applyNumericalStyle = function applyNumericalStyle(elem, property, value) {\n if (value === \"\".concat(parseInt(value))) {\n value = parseInt(value);\n }\n if (value || parseInt(value) === 0) {\n elem.style.setProperty(property, typeof value === 'number' ? \"\".concat(value, \"px\") : value);\n } else {\n elem.style.removeProperty(property);\n }\n };\n\n /**\n * @param {HTMLElement | null} elem\n * @param {string} display\n */\n var show = function show(elem) {\n var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'flex';\n elem && (elem.style.display = display);\n };\n\n /**\n * @param {HTMLElement | null} elem\n */\n var hide = function hide(elem) {\n elem && (elem.style.display = 'none');\n };\n\n /**\n * @param {HTMLElement | null} elem\n * @param {string} display\n */\n var showWhenInnerHtmlPresent = function showWhenInnerHtmlPresent(elem) {\n var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'block';\n if (!elem) {\n return;\n }\n new MutationObserver(function () {\n toggle(elem, elem.innerHTML, display);\n }).observe(elem, {\n childList: true,\n subtree: true\n });\n };\n\n /**\n * @param {HTMLElement} parent\n * @param {string} selector\n * @param {string} property\n * @param {string} value\n */\n var setStyle = function setStyle(parent, selector, property, value) {\n /** @type {HTMLElement | null} */\n var el = parent.querySelector(selector);\n if (el) {\n el.style.setProperty(property, value);\n }\n };\n\n /**\n * @param {HTMLElement} elem\n * @param {any} condition\n * @param {string} display\n */\n var toggle = function toggle(elem, condition) {\n var display = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flex';\n condition ? show(elem, display) : hide(elem);\n };\n\n /**\n * borrowed from jquery $(elem).is(':visible') implementation\n *\n * @param {HTMLElement | null} elem\n * @returns {boolean}\n */\n var isVisible$1 = function isVisible(elem) {\n return !!(elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length));\n };\n\n /**\n * @returns {boolean}\n */\n var allButtonsAreHidden = function allButtonsAreHidden() {\n return !isVisible$1(getConfirmButton()) && !isVisible$1(getDenyButton()) && !isVisible$1(getCancelButton());\n };\n\n /**\n * @param {HTMLElement} elem\n * @returns {boolean}\n */\n var isScrollable = function isScrollable(elem) {\n return !!(elem.scrollHeight > elem.clientHeight);\n };\n\n /**\n * borrowed from https://stackoverflow.com/a/46352119\n *\n * @param {HTMLElement} elem\n * @returns {boolean}\n */\n var hasCssAnimation = function hasCssAnimation(elem) {\n var style = window.getComputedStyle(elem);\n var animDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');\n var transDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');\n return animDuration > 0 || transDuration > 0;\n };\n\n /**\n * @param {number} timer\n * @param {boolean} reset\n */\n var animateTimerProgressBar = function animateTimerProgressBar(timer) {\n var reset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var timerProgressBar = getTimerProgressBar();\n if (!timerProgressBar) {\n return;\n }\n if (isVisible$1(timerProgressBar)) {\n if (reset) {\n timerProgressBar.style.transition = 'none';\n timerProgressBar.style.width = '100%';\n }\n setTimeout(function () {\n timerProgressBar.style.transition = \"width \".concat(timer / 1000, \"s linear\");\n timerProgressBar.style.width = '0%';\n }, 10);\n }\n };\n var stopTimerProgressBar = function stopTimerProgressBar() {\n var timerProgressBar = getTimerProgressBar();\n if (!timerProgressBar) {\n return;\n }\n var timerProgressBarWidth = parseInt(window.getComputedStyle(timerProgressBar).width);\n timerProgressBar.style.removeProperty('transition');\n timerProgressBar.style.width = '100%';\n var timerProgressBarFullWidth = parseInt(window.getComputedStyle(timerProgressBar).width);\n var timerProgressBarPercent = timerProgressBarWidth / timerProgressBarFullWidth * 100;\n timerProgressBar.style.width = \"\".concat(timerProgressBarPercent, \"%\");\n };\n\n /**\n * Detect Node env\n *\n * @returns {boolean}\n */\n var isNodeEnv = function isNodeEnv() {\n return typeof window === 'undefined' || typeof document === 'undefined';\n };\n\n var sweetHTML = \"\\n Input>} */\n var renderInputType = {};\n\n /**\n * @param {HTMLInputElement} input\n * @param {SweetAlertOptions} params\n * @returns {HTMLInputElement}\n */\n renderInputType.text = renderInputType.email = renderInputType.password = renderInputType.number = renderInputType.tel = renderInputType.url = renderInputType.search = renderInputType.date = renderInputType['datetime-local'] = renderInputType.time = renderInputType.week = renderInputType.month = function (input, params) {\n checkAndSetInputValue(input, params.inputValue);\n setInputLabel(input, input, params);\n setInputPlaceholder(input, params);\n input.type = params.input;\n return input;\n };\n\n /**\n * @param {HTMLInputElement} input\n * @param {SweetAlertOptions} params\n * @returns {HTMLInputElement}\n */\n renderInputType.file = function (input, params) {\n setInputLabel(input, input, params);\n setInputPlaceholder(input, params);\n return input;\n };\n\n /**\n * @param {HTMLInputElement} range\n * @param {SweetAlertOptions} params\n * @returns {HTMLInputElement}\n */\n renderInputType.range = function (range, params) {\n var rangeInput = range.querySelector('input');\n var rangeOutput = range.querySelector('output');\n checkAndSetInputValue(rangeInput, params.inputValue);\n rangeInput.type = params.input;\n checkAndSetInputValue(rangeOutput, params.inputValue);\n setInputLabel(rangeInput, range, params);\n return range;\n };\n\n /**\n * @param {HTMLSelectElement} select\n * @param {SweetAlertOptions} params\n * @returns {HTMLSelectElement}\n */\n renderInputType.select = function (select, params) {\n select.textContent = '';\n if (params.inputPlaceholder) {\n var placeholder = document.createElement('option');\n setInnerHtml(placeholder, params.inputPlaceholder);\n placeholder.value = '';\n placeholder.disabled = true;\n placeholder.selected = true;\n select.appendChild(placeholder);\n }\n setInputLabel(select, select, params);\n return select;\n };\n\n /**\n * @param {HTMLInputElement} radio\n * @returns {HTMLInputElement}\n */\n renderInputType.radio = function (radio) {\n radio.textContent = '';\n return radio;\n };\n\n /**\n * @param {HTMLLabelElement} checkboxContainer\n * @param {SweetAlertOptions} params\n * @returns {HTMLInputElement}\n */\n renderInputType.checkbox = function (checkboxContainer, params) {\n var checkbox = getInput$1(getPopup(), 'checkbox');\n checkbox.value = '1';\n checkbox.checked = Boolean(params.inputValue);\n var label = checkboxContainer.querySelector('span');\n setInnerHtml(label, params.inputPlaceholder);\n return checkbox;\n };\n\n /**\n * @param {HTMLTextAreaElement} textarea\n * @param {SweetAlertOptions} params\n * @returns {HTMLTextAreaElement}\n */\n renderInputType.textarea = function (textarea, params) {\n checkAndSetInputValue(textarea, params.inputValue);\n setInputPlaceholder(textarea, params);\n setInputLabel(textarea, textarea, params);\n\n /**\n * @param {HTMLElement} el\n * @returns {number}\n */\n var getMargin = function getMargin(el) {\n return parseInt(window.getComputedStyle(el).marginLeft) + parseInt(window.getComputedStyle(el).marginRight);\n };\n\n // https://github.com/sweetalert2/sweetalert2/issues/2291\n setTimeout(function () {\n // https://github.com/sweetalert2/sweetalert2/issues/1699\n if ('MutationObserver' in window) {\n var initialPopupWidth = parseInt(window.getComputedStyle(getPopup()).width);\n var textareaResizeHandler = function textareaResizeHandler() {\n // check if texarea is still in document (i.e. popup wasn't closed in the meantime)\n if (!document.body.contains(textarea)) {\n return;\n }\n var textareaWidth = textarea.offsetWidth + getMargin(textarea);\n if (textareaWidth > initialPopupWidth) {\n getPopup().style.width = \"\".concat(textareaWidth, \"px\");\n } else {\n applyNumericalStyle(getPopup(), 'width', params.width);\n }\n };\n new MutationObserver(textareaResizeHandler).observe(textarea, {\n attributes: true,\n attributeFilter: ['style']\n });\n }\n });\n return textarea;\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderContent = function renderContent(instance, params) {\n var htmlContainer = getHtmlContainer();\n if (!htmlContainer) {\n return;\n }\n showWhenInnerHtmlPresent(htmlContainer);\n applyCustomClass(htmlContainer, params, 'htmlContainer');\n\n // Content as HTML\n if (params.html) {\n parseHtmlToContainer(params.html, htmlContainer);\n show(htmlContainer, 'block');\n }\n\n // Content as plain text\n else if (params.text) {\n htmlContainer.textContent = params.text;\n show(htmlContainer, 'block');\n }\n\n // No content\n else {\n hide(htmlContainer);\n }\n renderInput(instance, params);\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderFooter = function renderFooter(instance, params) {\n var footer = getFooter();\n if (!footer) {\n return;\n }\n showWhenInnerHtmlPresent(footer);\n toggle(footer, params.footer, 'block');\n if (params.footer) {\n parseHtmlToContainer(params.footer, footer);\n }\n\n // Custom class\n applyCustomClass(footer, params, 'footer');\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderIcon = function renderIcon(instance, params) {\n var innerParams = privateProps.innerParams.get(instance);\n var icon = getIcon();\n if (!icon) {\n return;\n }\n\n // if the given icon already rendered, apply the styling without re-rendering the icon\n if (innerParams && params.icon === innerParams.icon) {\n // Custom or default content\n setContent(icon, params);\n applyStyles(icon, params);\n return;\n }\n if (!params.icon && !params.iconHtml) {\n hide(icon);\n return;\n }\n if (params.icon && Object.keys(iconTypes).indexOf(params.icon) === -1) {\n error(\"Unknown icon! Expected \\\"success\\\", \\\"error\\\", \\\"warning\\\", \\\"info\\\" or \\\"question\\\", got \\\"\".concat(params.icon, \"\\\"\"));\n hide(icon);\n return;\n }\n show(icon);\n\n // Custom or default content\n setContent(icon, params);\n applyStyles(icon, params);\n\n // Animate icon\n addClass(icon, params.showClass && params.showClass.icon);\n };\n\n /**\n * @param {HTMLElement} icon\n * @param {SweetAlertOptions} params\n */\n var applyStyles = function applyStyles(icon, params) {\n for (var _i = 0, _Object$entries = Object.entries(iconTypes); _i < _Object$entries.length; _i++) {\n var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),\n iconType = _Object$entries$_i[0],\n iconClassName = _Object$entries$_i[1];\n if (params.icon !== iconType) {\n removeClass(icon, iconClassName);\n }\n }\n addClass(icon, params.icon && iconTypes[params.icon]);\n\n // Icon color\n setColor(icon, params);\n\n // Success icon background color\n adjustSuccessIconBackgroundColor();\n\n // Custom class\n applyCustomClass(icon, params, 'icon');\n };\n\n // Adjust success icon background color to match the popup background color\n var adjustSuccessIconBackgroundColor = function adjustSuccessIconBackgroundColor() {\n var popup = getPopup();\n if (!popup) {\n return;\n }\n var popupBackgroundColor = window.getComputedStyle(popup).getPropertyValue('background-color');\n /** @type {NodeListOf} */\n var successIconParts = popup.querySelectorAll('[class^=swal2-success-circular-line], .swal2-success-fix');\n for (var i = 0; i < successIconParts.length; i++) {\n successIconParts[i].style.backgroundColor = popupBackgroundColor;\n }\n };\n var successIconHtml = \"\\n \\n \\n \\n \\n\";\n var errorIconHtml = \"\\n \\n \\n \\n \\n\";\n\n /**\n * @param {HTMLElement} icon\n * @param {SweetAlertOptions} params\n */\n var setContent = function setContent(icon, params) {\n if (!params.icon && !params.iconHtml) {\n return;\n }\n var oldContent = icon.innerHTML;\n var newContent = '';\n if (params.iconHtml) {\n newContent = iconContent(params.iconHtml);\n } else if (params.icon === 'success') {\n newContent = successIconHtml;\n oldContent = oldContent.replace(/ style=\".*?\"/g, ''); // undo adjustSuccessIconBackgroundColor()\n } else if (params.icon === 'error') {\n newContent = errorIconHtml;\n } else if (params.icon) {\n var defaultIconHtml = {\n question: '?',\n warning: '!',\n info: 'i'\n };\n newContent = iconContent(defaultIconHtml[params.icon]);\n }\n if (oldContent.trim() !== newContent.trim()) {\n setInnerHtml(icon, newContent);\n }\n };\n\n /**\n * @param {HTMLElement} icon\n * @param {SweetAlertOptions} params\n */\n var setColor = function setColor(icon, params) {\n if (!params.iconColor) {\n return;\n }\n icon.style.color = params.iconColor;\n icon.style.borderColor = params.iconColor;\n for (var _i2 = 0, _arr = ['.swal2-success-line-tip', '.swal2-success-line-long', '.swal2-x-mark-line-left', '.swal2-x-mark-line-right']; _i2 < _arr.length; _i2++) {\n var sel = _arr[_i2];\n setStyle(icon, sel, 'background-color', params.iconColor);\n }\n setStyle(icon, '.swal2-success-ring', 'border-color', params.iconColor);\n };\n\n /**\n * @param {string} content\n * @returns {string}\n */\n var iconContent = function iconContent(content) {\n return \"} */\n var DismissReason = Object.freeze({\n cancel: 'cancel',\n backdrop: 'backdrop',\n close: 'close',\n esc: 'esc',\n timer: 'timer'\n });\n\n /**\n * @param {GlobalState} globalState\n */\n var removeKeydownHandler = function removeKeydownHandler(globalState) {\n if (globalState.keydownTarget && globalState.keydownHandlerAdded) {\n globalState.keydownTarget.removeEventListener('keydown', globalState.keydownHandler, {\n capture: globalState.keydownListenerCapture\n });\n globalState.keydownHandlerAdded = false;\n }\n };\n\n /**\n * @param {GlobalState} globalState\n * @param {SweetAlertOptions} innerParams\n * @param {*} dismissWith\n */\n var addKeydownHandler = function addKeydownHandler(globalState, innerParams, dismissWith) {\n removeKeydownHandler(globalState);\n if (!innerParams.toast) {\n globalState.keydownHandler = function (e) {\n return keydownHandler(innerParams, e, dismissWith);\n };\n globalState.keydownTarget = innerParams.keydownListenerCapture ? window : getPopup();\n globalState.keydownListenerCapture = innerParams.keydownListenerCapture;\n globalState.keydownTarget.addEventListener('keydown', globalState.keydownHandler, {\n capture: globalState.keydownListenerCapture\n });\n globalState.keydownHandlerAdded = true;\n }\n };\n\n /**\n * @param {number} index\n * @param {number} increment\n */\n var setFocus = function setFocus(index, increment) {\n var _dom$getPopup;\n var focusableElements = getFocusableElements();\n // search for visible elements and select the next possible match\n if (focusableElements.length) {\n index = index + increment;\n\n // rollover to first item\n if (index === focusableElements.length) {\n index = 0;\n\n // go to last item\n } else if (index === -1) {\n index = focusableElements.length - 1;\n }\n focusableElements[index].focus();\n return;\n }\n // no visible focusable elements, focus the popup\n (_dom$getPopup = getPopup()) === null || _dom$getPopup === void 0 || _dom$getPopup.focus();\n };\n var arrowKeysNextButton = ['ArrowRight', 'ArrowDown'];\n var arrowKeysPreviousButton = ['ArrowLeft', 'ArrowUp'];\n\n /**\n * @param {SweetAlertOptions} innerParams\n * @param {KeyboardEvent} event\n * @param {Function} dismissWith\n */\n var keydownHandler = function keydownHandler(innerParams, event, dismissWith) {\n if (!innerParams) {\n return; // This instance has already been destroyed\n }\n\n // Ignore keydown during IME composition\n // https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event#ignoring_keydown_during_ime_composition\n // https://github.com/sweetalert2/sweetalert2/issues/720\n // https://github.com/sweetalert2/sweetalert2/issues/2406\n if (event.isComposing || event.keyCode === 229) {\n return;\n }\n if (innerParams.stopKeydownPropagation) {\n event.stopPropagation();\n }\n\n // ENTER\n if (event.key === 'Enter') {\n handleEnter(event, innerParams);\n }\n\n // TAB\n else if (event.key === 'Tab') {\n handleTab(event);\n }\n\n // ARROWS - switch focus between buttons\n else if ([].concat(arrowKeysNextButton, arrowKeysPreviousButton).includes(event.key)) {\n handleArrows(event.key);\n }\n\n // ESC\n else if (event.key === 'Escape') {\n handleEsc(event, innerParams, dismissWith);\n }\n };\n\n /**\n * @param {KeyboardEvent} event\n * @param {SweetAlertOptions} innerParams\n */\n var handleEnter = function handleEnter(event, innerParams) {\n // https://github.com/sweetalert2/sweetalert2/issues/2386\n if (!callIfFunction(innerParams.allowEnterKey)) {\n return;\n }\n var input = getInput$1(getPopup(), innerParams.input);\n if (event.target && input && event.target instanceof HTMLElement && event.target.outerHTML === input.outerHTML) {\n if (['textarea', 'file'].includes(innerParams.input)) {\n return; // do not submit\n }\n clickConfirm();\n event.preventDefault();\n }\n };\n\n /**\n * @param {KeyboardEvent} event\n */\n var handleTab = function handleTab(event) {\n var targetElement = event.target;\n var focusableElements = getFocusableElements();\n var btnIndex = -1;\n for (var i = 0; i < focusableElements.length; i++) {\n if (targetElement === focusableElements[i]) {\n btnIndex = i;\n break;\n }\n }\n\n // Cycle to the next button\n if (!event.shiftKey) {\n setFocus(btnIndex, 1);\n }\n\n // Cycle to the prev button\n else {\n setFocus(btnIndex, -1);\n }\n event.stopPropagation();\n event.preventDefault();\n };\n\n /**\n * @param {string} key\n */\n var handleArrows = function handleArrows(key) {\n var actions = getActions();\n var confirmButton = getConfirmButton();\n var denyButton = getDenyButton();\n var cancelButton = getCancelButton();\n if (!actions || !confirmButton || !denyButton || !cancelButton) {\n return;\n }\n /** @type HTMLElement[] */\n var buttons = [confirmButton, denyButton, cancelButton];\n if (document.activeElement instanceof HTMLElement && !buttons.includes(document.activeElement)) {\n return;\n }\n var sibling = arrowKeysNextButton.includes(key) ? 'nextElementSibling' : 'previousElementSibling';\n var buttonToFocus = document.activeElement;\n if (!buttonToFocus) {\n return;\n }\n for (var i = 0; i < actions.children.length; i++) {\n buttonToFocus = buttonToFocus[sibling];\n if (!buttonToFocus) {\n return;\n }\n if (buttonToFocus instanceof HTMLButtonElement && isVisible$1(buttonToFocus)) {\n break;\n }\n }\n if (buttonToFocus instanceof HTMLButtonElement) {\n buttonToFocus.focus();\n }\n };\n\n /**\n * @param {KeyboardEvent} event\n * @param {SweetAlertOptions} innerParams\n * @param {Function} dismissWith\n */\n var handleEsc = function handleEsc(event, innerParams, dismissWith) {\n if (callIfFunction(innerParams.allowEscapeKey)) {\n event.preventDefault();\n dismissWith(DismissReason.esc);\n }\n };\n\n /**\n * This module contains `WeakMap`s for each effectively-\"private property\" that a `Swal` has.\n * For example, to set the private property \"foo\" of `this` to \"bar\", you can `privateProps.foo.set(this, 'bar')`\n * This is the approach that Babel will probably take to implement private methods/fields\n * https://github.com/tc39/proposal-private-methods\n * https://github.com/babel/babel/pull/7555\n * Once we have the changes from that PR in Babel, and our core class fits reasonable in *one module*\n * then we can use that language feature.\n */\n\n var privateMethods = {\n swalPromiseResolve: new WeakMap(),\n swalPromiseReject: new WeakMap()\n };\n\n // From https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/\n // Adding aria-hidden=\"true\" to elements outside of the active modal dialog ensures that\n // elements not within the active modal dialog will not be surfaced if a user opens a screen\n // reader’s list of elements (headings, form controls, landmarks, etc.) in the document.\n\n var setAriaHidden = function setAriaHidden() {\n var container = getContainer();\n var bodyChildren = Array.from(document.body.children);\n bodyChildren.forEach(function (el) {\n if (el.contains(container)) {\n return;\n }\n if (el.hasAttribute('aria-hidden')) {\n el.setAttribute('data-previous-aria-hidden', el.getAttribute('aria-hidden') || '');\n }\n el.setAttribute('aria-hidden', 'true');\n });\n };\n var unsetAriaHidden = function unsetAriaHidden() {\n var bodyChildren = Array.from(document.body.children);\n bodyChildren.forEach(function (el) {\n if (el.hasAttribute('data-previous-aria-hidden')) {\n el.setAttribute('aria-hidden', el.getAttribute('data-previous-aria-hidden') || '');\n el.removeAttribute('data-previous-aria-hidden');\n } else {\n el.removeAttribute('aria-hidden');\n }\n });\n };\n\n // @ts-ignore\n var isSafariOrIOS = typeof window !== 'undefined' && !!window.GestureEvent; // true for Safari desktop + all iOS browsers https://stackoverflow.com/a/70585394\n\n /**\n * Fix iOS scrolling\n * http://stackoverflow.com/q/39626302\n */\n var iOSfix = function iOSfix() {\n if (isSafariOrIOS && !hasClass(document.body, swalClasses.iosfix)) {\n var offset = document.body.scrollTop;\n document.body.style.top = \"\".concat(offset * -1, \"px\");\n addClass(document.body, swalClasses.iosfix);\n lockBodyScroll();\n }\n };\n\n /**\n * https://github.com/sweetalert2/sweetalert2/issues/1246\n */\n var lockBodyScroll = function lockBodyScroll() {\n var container = getContainer();\n if (!container) {\n return;\n }\n /** @type {boolean} */\n var preventTouchMove;\n /**\n * @param {TouchEvent} event\n */\n container.ontouchstart = function (event) {\n preventTouchMove = shouldPreventTouchMove(event);\n };\n /**\n * @param {TouchEvent} event\n */\n container.ontouchmove = function (event) {\n if (preventTouchMove) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n };\n\n /**\n * @param {TouchEvent} event\n * @returns {boolean}\n */\n var shouldPreventTouchMove = function shouldPreventTouchMove(event) {\n var target = event.target;\n var container = getContainer();\n var htmlContainer = getHtmlContainer();\n if (!container || !htmlContainer) {\n return false;\n }\n if (isStylus(event) || isZoom(event)) {\n return false;\n }\n if (target === container) {\n return true;\n }\n if (!isScrollable(container) && target instanceof HTMLElement && target.tagName !== 'INPUT' &&\n // #1603\n target.tagName !== 'TEXTAREA' &&\n // #2266\n !(isScrollable(htmlContainer) &&\n // #1944\n htmlContainer.contains(target))) {\n return true;\n }\n return false;\n };\n\n /**\n * https://github.com/sweetalert2/sweetalert2/issues/1786\n *\n * @param {*} event\n * @returns {boolean}\n */\n var isStylus = function isStylus(event) {\n return event.touches && event.touches.length && event.touches[0].touchType === 'stylus';\n };\n\n /**\n * https://github.com/sweetalert2/sweetalert2/issues/1891\n *\n * @param {TouchEvent} event\n * @returns {boolean}\n */\n var isZoom = function isZoom(event) {\n return event.touches && event.touches.length > 1;\n };\n var undoIOSfix = function undoIOSfix() {\n if (hasClass(document.body, swalClasses.iosfix)) {\n var offset = parseInt(document.body.style.top, 10);\n removeClass(document.body, swalClasses.iosfix);\n document.body.style.top = '';\n document.body.scrollTop = offset * -1;\n }\n };\n\n /**\n * Measure scrollbar width for padding body during modal show/hide\n * https://github.com/twbs/bootstrap/blob/master/js/src/modal.js\n *\n * @returns {number}\n */\n var measureScrollbar = function measureScrollbar() {\n var scrollDiv = document.createElement('div');\n scrollDiv.className = swalClasses['scrollbar-measure'];\n document.body.appendChild(scrollDiv);\n var scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;\n document.body.removeChild(scrollDiv);\n return scrollbarWidth;\n };\n\n /**\n * Remember state in cases where opening and handling a modal will fiddle with it.\n * @type {number | null}\n */\n var previousBodyPadding = null;\n\n /**\n * @param {string} initialBodyOverflow\n */\n var replaceScrollbarWithPadding = function replaceScrollbarWithPadding(initialBodyOverflow) {\n // for queues, do not do this more than once\n if (previousBodyPadding !== null) {\n return;\n }\n // if the body has overflow\n if (document.body.scrollHeight > window.innerHeight || initialBodyOverflow === 'scroll' // https://github.com/sweetalert2/sweetalert2/issues/2663\n ) {\n // add padding so the content doesn't shift after removal of scrollbar\n previousBodyPadding = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'));\n document.body.style.paddingRight = \"\".concat(previousBodyPadding + measureScrollbar(), \"px\");\n }\n };\n var undoReplaceScrollbarWithPadding = function undoReplaceScrollbarWithPadding() {\n if (previousBodyPadding !== null) {\n document.body.style.paddingRight = \"\".concat(previousBodyPadding, \"px\");\n previousBodyPadding = null;\n }\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {HTMLElement} container\n * @param {boolean} returnFocus\n * @param {Function} didClose\n */\n function removePopupAndResetState(instance, container, returnFocus, didClose) {\n if (isToast()) {\n triggerDidCloseAndDispose(instance, didClose);\n } else {\n restoreActiveElement(returnFocus).then(function () {\n return triggerDidCloseAndDispose(instance, didClose);\n });\n removeKeydownHandler(globalState);\n }\n\n // workaround for https://github.com/sweetalert2/sweetalert2/issues/2088\n // for some reason removing the container in Safari will scroll the document to bottom\n if (isSafariOrIOS) {\n container.setAttribute('style', 'display:none !important');\n container.removeAttribute('class');\n container.innerHTML = '';\n } else {\n container.remove();\n }\n if (isModal()) {\n undoReplaceScrollbarWithPadding();\n undoIOSfix();\n unsetAriaHidden();\n }\n removeBodyClasses();\n }\n\n /**\n * Remove SweetAlert2 classes from body\n */\n function removeBodyClasses() {\n removeClass([document.documentElement, document.body], [swalClasses.shown, swalClasses['height-auto'], swalClasses['no-backdrop'], swalClasses['toast-shown']]);\n }\n\n /**\n * Instance method to close sweetAlert\n *\n * @param {any} resolveValue\n */\n function close(resolveValue) {\n resolveValue = prepareResolveValue(resolveValue);\n var swalPromiseResolve = privateMethods.swalPromiseResolve.get(this);\n var didClose = triggerClosePopup(this);\n if (this.isAwaitingPromise) {\n // A swal awaiting for a promise (after a click on Confirm or Deny) cannot be dismissed anymore #2335\n if (!resolveValue.isDismissed) {\n handleAwaitingPromise(this);\n swalPromiseResolve(resolveValue);\n }\n } else if (didClose) {\n // Resolve Swal promise\n swalPromiseResolve(resolveValue);\n }\n }\n var triggerClosePopup = function triggerClosePopup(instance) {\n var popup = getPopup();\n if (!popup) {\n return false;\n }\n var innerParams = privateProps.innerParams.get(instance);\n if (!innerParams || hasClass(popup, innerParams.hideClass.popup)) {\n return false;\n }\n removeClass(popup, innerParams.showClass.popup);\n addClass(popup, innerParams.hideClass.popup);\n var backdrop = getContainer();\n removeClass(backdrop, innerParams.showClass.backdrop);\n addClass(backdrop, innerParams.hideClass.backdrop);\n handlePopupAnimation(instance, popup, innerParams);\n return true;\n };\n\n /**\n * @param {any} error\n */\n function rejectPromise(error) {\n var rejectPromise = privateMethods.swalPromiseReject.get(this);\n handleAwaitingPromise(this);\n if (rejectPromise) {\n // Reject Swal promise\n rejectPromise(error);\n }\n }\n\n /**\n * @param {SweetAlert} instance\n */\n var handleAwaitingPromise = function handleAwaitingPromise(instance) {\n if (instance.isAwaitingPromise) {\n delete instance.isAwaitingPromise;\n // The instance might have been previously partly destroyed, we must resume the destroy process in this case #2335\n if (!privateProps.innerParams.get(instance)) {\n instance._destroy();\n }\n }\n };\n\n /**\n * @param {any} resolveValue\n * @returns {SweetAlertResult}\n */\n var prepareResolveValue = function prepareResolveValue(resolveValue) {\n // When user calls Swal.close()\n if (typeof resolveValue === 'undefined') {\n return {\n isConfirmed: false,\n isDenied: false,\n isDismissed: true\n };\n }\n return Object.assign({\n isConfirmed: false,\n isDenied: false,\n isDismissed: false\n }, resolveValue);\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {HTMLElement} popup\n * @param {SweetAlertOptions} innerParams\n */\n var handlePopupAnimation = function handlePopupAnimation(instance, popup, innerParams) {\n var container = getContainer();\n // If animation is supported, animate\n var animationIsSupported = animationEndEvent && hasCssAnimation(popup);\n if (typeof innerParams.willClose === 'function') {\n innerParams.willClose(popup);\n }\n if (animationIsSupported) {\n animatePopup(instance, popup, container, innerParams.returnFocus, innerParams.didClose);\n } else {\n // Otherwise, remove immediately\n removePopupAndResetState(instance, container, innerParams.returnFocus, innerParams.didClose);\n }\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {HTMLElement} popup\n * @param {HTMLElement} container\n * @param {boolean} returnFocus\n * @param {Function} didClose\n */\n var animatePopup = function animatePopup(instance, popup, container, returnFocus, didClose) {\n if (!animationEndEvent) {\n return;\n }\n globalState.swalCloseEventFinishedCallback = removePopupAndResetState.bind(null, instance, container, returnFocus, didClose);\n popup.addEventListener(animationEndEvent, function (e) {\n if (e.target === popup) {\n globalState.swalCloseEventFinishedCallback();\n delete globalState.swalCloseEventFinishedCallback;\n }\n });\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {Function} didClose\n */\n var triggerDidCloseAndDispose = function triggerDidCloseAndDispose(instance, didClose) {\n setTimeout(function () {\n if (typeof didClose === 'function') {\n didClose.bind(instance.params)();\n }\n // instance might have been destroyed already\n if (instance._destroy) {\n instance._destroy();\n }\n });\n };\n\n /**\n * Shows loader (spinner), this is useful with AJAX requests.\n * By default the loader be shown instead of the \"Confirm\" button.\n *\n * @param {HTMLButtonElement | null} [buttonToReplace]\n */\n var showLoading = function showLoading(buttonToReplace) {\n var popup = getPopup();\n if (!popup) {\n new Swal(); // eslint-disable-line no-new\n }\n popup = getPopup();\n if (!popup) {\n return;\n }\n var loader = getLoader();\n if (isToast()) {\n hide(getIcon());\n } else {\n replaceButton(popup, buttonToReplace);\n }\n show(loader);\n popup.setAttribute('data-loading', 'true');\n popup.setAttribute('aria-busy', 'true');\n popup.focus();\n };\n\n /**\n * @param {HTMLElement} popup\n * @param {HTMLButtonElement | null} [buttonToReplace]\n */\n var replaceButton = function replaceButton(popup, buttonToReplace) {\n var actions = getActions();\n var loader = getLoader();\n if (!actions || !loader) {\n return;\n }\n if (!buttonToReplace && isVisible$1(getConfirmButton())) {\n buttonToReplace = getConfirmButton();\n }\n show(actions);\n if (buttonToReplace) {\n hide(buttonToReplace);\n loader.setAttribute('data-button-to-replace', buttonToReplace.className);\n actions.insertBefore(loader, buttonToReplace);\n }\n addClass([popup, actions], swalClasses.loading);\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var handleInputOptionsAndValue = function handleInputOptionsAndValue(instance, params) {\n if (params.input === 'select' || params.input === 'radio') {\n handleInputOptions(instance, params);\n } else if (['text', 'email', 'number', 'tel', 'textarea'].some(function (i) {\n return i === params.input;\n }) && (hasToPromiseFn(params.inputValue) || isPromise(params.inputValue))) {\n showLoading(getConfirmButton());\n handleInputValue(instance, params);\n }\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} innerParams\n * @returns {SweetAlertInputValue}\n */\n var getInputValue = function getInputValue(instance, innerParams) {\n var input = instance.getInput();\n if (!input) {\n return null;\n }\n switch (innerParams.input) {\n case 'checkbox':\n return getCheckboxValue(input);\n case 'radio':\n return getRadioValue(input);\n case 'file':\n return getFileValue(input);\n default:\n return innerParams.inputAutoTrim ? input.value.trim() : input.value;\n }\n };\n\n /**\n * @param {HTMLInputElement} input\n * @returns {number}\n */\n var getCheckboxValue = function getCheckboxValue(input) {\n return input.checked ? 1 : 0;\n };\n\n /**\n * @param {HTMLInputElement} input\n * @returns {string | null}\n */\n var getRadioValue = function getRadioValue(input) {\n return input.checked ? input.value : null;\n };\n\n /**\n * @param {HTMLInputElement} input\n * @returns {FileList | File | null}\n */\n var getFileValue = function getFileValue(input) {\n return input.files && input.files.length ? input.getAttribute('multiple') !== null ? input.files : input.files[0] : null;\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var handleInputOptions = function handleInputOptions(instance, params) {\n var popup = getPopup();\n if (!popup) {\n return;\n }\n /**\n * @param {Record} inputOptions\n */\n var processInputOptions = function processInputOptions(inputOptions) {\n if (params.input === 'select') {\n populateSelectOptions(popup, formatInputOptions(inputOptions), params);\n } else if (params.input === 'radio') {\n populateRadioOptions(popup, formatInputOptions(inputOptions), params);\n }\n };\n if (hasToPromiseFn(params.inputOptions) || isPromise(params.inputOptions)) {\n showLoading(getConfirmButton());\n asPromise(params.inputOptions).then(function (inputOptions) {\n instance.hideLoading();\n processInputOptions(inputOptions);\n });\n } else if (_typeof(params.inputOptions) === 'object') {\n processInputOptions(params.inputOptions);\n } else {\n error(\"Unexpected type of inputOptions! Expected object, Map or Promise, got \".concat(_typeof(params.inputOptions)));\n }\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var handleInputValue = function handleInputValue(instance, params) {\n var input = instance.getInput();\n if (!input) {\n return;\n }\n hide(input);\n asPromise(params.inputValue).then(function (inputValue) {\n input.value = params.input === 'number' ? \"\".concat(parseFloat(inputValue) || 0) : \"\".concat(inputValue);\n show(input);\n input.focus();\n instance.hideLoading();\n })[\"catch\"](function (err) {\n error(\"Error in inputValue promise: \".concat(err));\n input.value = '';\n show(input);\n input.focus();\n instance.hideLoading();\n });\n };\n\n /**\n * @param {HTMLElement} popup\n * @param {InputOptionFlattened[]} inputOptions\n * @param {SweetAlertOptions} params\n */\n function populateSelectOptions(popup, inputOptions, params) {\n var select = getDirectChildByClass(popup, swalClasses.select);\n if (!select) {\n return;\n }\n /**\n * @param {HTMLElement} parent\n * @param {string} optionLabel\n * @param {string} optionValue\n */\n var renderOption = function renderOption(parent, optionLabel, optionValue) {\n var option = document.createElement('option');\n option.value = optionValue;\n setInnerHtml(option, optionLabel);\n option.selected = isSelected(optionValue, params.inputValue);\n parent.appendChild(option);\n };\n inputOptions.forEach(function (inputOption) {\n var optionValue = inputOption[0];\n var optionLabel = inputOption[1];\n //
Show Tooltip
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Tooltip = /** @__PURE__ @class */ (function (_super) {\n __extends$2(Tooltip, _super);\n /**\n * Constructor for creating the Tooltip Component\n *\n * @param {TooltipModel} options - specifies the options for the constructor\n * @param {string| HTMLElement} element - specifies the element for the constructor\n *\n */\n function Tooltip(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseMoveEvent = null;\n _this.mouseMoveTarget = null;\n _this.containerElement = null;\n _this.isBodyContainer = true;\n return _this;\n }\n Tooltip.prototype.initialize = function () {\n this.formatPosition();\n addClass([this.element], ROOT$1);\n };\n Tooltip.prototype.formatPosition = function () {\n var _a, _b;\n if (!this.position) {\n return;\n }\n if (this.position.indexOf('Top') === 0 || this.position.indexOf('Bottom') === 0) {\n _a = this.position.split(/(?=[A-Z])/), this.tooltipPositionY = _a[0], this.tooltipPositionX = _a[1];\n }\n else {\n _b = this.position.split(/(?=[A-Z])/), this.tooltipPositionX = _b[0], this.tooltipPositionY = _b[1];\n }\n };\n Tooltip.prototype.renderArrow = function () {\n this.setTipClass(this.position);\n var tip = this.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));\n this.tooltipEle.appendChild(tip);\n };\n Tooltip.prototype.setTipClass = function (position) {\n if (position.indexOf('Right') === 0) {\n this.tipClass = TIP_LEFT;\n }\n else if (position.indexOf('Bottom') === 0) {\n this.tipClass = TIP_TOP;\n }\n else if (position.indexOf('Left') === 0) {\n this.tipClass = TIP_RIGHT;\n }\n else {\n this.tipClass = TIP_BOTTOM;\n }\n };\n Tooltip.prototype.renderPopup = function (target) {\n var elePos = this.mouseTrail ? { top: 0, left: 0 } : this.getTooltipPosition(target);\n this.tooltipEle.classList.remove(POPUP_LIB);\n this.popupObj = new Popup(this.tooltipEle, {\n height: this.height,\n width: this.width,\n position: { X: elePos.left, Y: elePos.top },\n enableRtl: this.enableRtl,\n open: this.openPopupHandler.bind(this),\n close: this.closePopupHandler.bind(this)\n });\n };\n Tooltip.prototype.getScalingFactor = function (target) {\n if (!target) {\n return { x: 1, y: 1 };\n }\n var scalingFactors = { x: 1, y: 1 };\n var elementsWithTransform = target.closest('[style*=\"transform: scale\"]');\n if (elementsWithTransform && elementsWithTransform !== this.tooltipEle && elementsWithTransform.contains(this.tooltipEle)) {\n var computedStyle = window.getComputedStyle(elementsWithTransform);\n var transformValue = computedStyle.getPropertyValue('transform');\n var matrixValues = transformValue.match(/matrix\\(([^)]+)\\)/)[1].split(',').map(parseFloat);\n scalingFactors.x = matrixValues[0];\n scalingFactors.y = matrixValues[3];\n }\n return scalingFactors;\n };\n Tooltip.prototype.getTooltipPosition = function (target) {\n this.tooltipEle.style.display = 'block';\n var parentWithZoomStyle = this.element.closest('[style*=\"zoom\"]');\n if (parentWithZoomStyle) {\n if (!parentWithZoomStyle.contains(this.tooltipEle)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.tooltipEle.style.zoom = getComputedStyle(parentWithZoomStyle).zoom;\n }\n }\n var pos = calculatePosition(target, this.tooltipPositionX, this.tooltipPositionY, !this.isBodyContainer, this.isBodyContainer ? null : this.containerElement.getBoundingClientRect());\n var scalingFactors = this.getScalingFactor(target);\n var offsetPos = this.calculateTooltipOffset(this.position, scalingFactors.x, scalingFactors.y);\n var collisionPosition = this.calculateElementPosition(pos, offsetPos);\n var collisionLeft = collisionPosition[0];\n var collisionTop = collisionPosition[1];\n var elePos = this.collisionFlipFit(target, collisionLeft, collisionTop);\n elePos.left = elePos.left / scalingFactors.x;\n elePos.top = elePos.top / scalingFactors.y;\n this.tooltipEle.style.display = '';\n return elePos;\n };\n Tooltip.prototype.windowResize = function () {\n this.reposition(this.findTarget());\n };\n Tooltip.prototype.reposition = function (target) {\n if (this.popupObj && target) {\n var elePos = this.getTooltipPosition(target);\n this.popupObj.position = { X: elePos.left, Y: elePos.top };\n this.popupObj.dataBind();\n }\n };\n Tooltip.prototype.openPopupHandler = function () {\n if (!this.mouseTrail && this.needTemplateReposition()) {\n this.reposition(this.findTarget());\n }\n this.trigger('afterOpen', this.tooltipEventArgs);\n this.tooltipEventArgs = null;\n };\n Tooltip.prototype.closePopupHandler = function () {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact && !(this.opensOn === 'Click' || typeof (this.content) === 'function')) {\n this.clearTemplate(['content']);\n }\n this.clear();\n var tooltipAfterCloseEventArgs = {\n type: this.tooltipEventArgs.event ? this.tooltipEventArgs.event.type : null, cancel: false,\n target: this.tooltipEventArgs.target, event: this.tooltipEventArgs.event ? this.tooltipEventArgs.event : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(this.tooltipEventArgs.event)\n };\n this.trigger('afterClose', tooltipAfterCloseEventArgs);\n tooltipAfterCloseEventArgs = null;\n };\n Tooltip.prototype.calculateTooltipOffset = function (position, xScalingFactor, yScalingFactor) {\n if (xScalingFactor === void 0) { xScalingFactor = 1; }\n if (yScalingFactor === void 0) { yScalingFactor = 1; }\n var pos = { top: 0, left: 0 };\n var tipWidth;\n var tipHeight;\n var tooltipEleWidth;\n var tooltipEleHeight;\n var arrowEle;\n var tipAdjust;\n var tipHeightAdjust;\n var tipWidthAdjust;\n if (xScalingFactor !== 1 || yScalingFactor !== 1) {\n var tooltipEleRect = this.tooltipEle.getBoundingClientRect();\n var arrowEleRect = void 0;\n tooltipEleWidth = Math.round(tooltipEleRect.width);\n tooltipEleHeight = Math.round(tooltipEleRect.height);\n arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n if (arrowEle) {\n arrowEleRect = arrowEle.getBoundingClientRect();\n }\n tipWidth = arrowEle ? Math.round(arrowEleRect.width) : 0;\n tipHeight = arrowEle ? Math.round(arrowEleRect.height) : 0;\n tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);\n tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (tooltipEleHeight - (this.tooltipEle.clientHeight * yScalingFactor));\n tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (tooltipEleWidth - (this.tooltipEle.clientWidth * xScalingFactor));\n }\n else {\n tooltipEleWidth = this.tooltipEle.offsetWidth;\n tooltipEleHeight = this.tooltipEle.offsetHeight;\n arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n tipWidth = arrowEle ? arrowEle.offsetWidth : 0;\n tipHeight = arrowEle ? arrowEle.offsetHeight : 0;\n tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);\n tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (this.tooltipEle.offsetHeight - this.tooltipEle.clientHeight);\n tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (this.tooltipEle.offsetWidth - this.tooltipEle.clientWidth);\n }\n if (this.mouseTrail) {\n tipAdjust += MOUSE_TRAIL_GAP;\n }\n switch (position) {\n case 'RightTop':\n pos.left += tipWidth + tipAdjust;\n pos.top -= tooltipEleHeight - tipHeightAdjust;\n break;\n case 'RightCenter':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'RightBottom':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tipHeightAdjust);\n break;\n case 'BottomRight':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n case 'BottomCenter':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n case 'BottomLeft':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'LeftBottom':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tipHeightAdjust);\n break;\n case 'LeftCenter':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'LeftTop':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight - tipHeightAdjust);\n break;\n case 'TopLeft':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'TopRight':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n default:\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n }\n pos.left += this.offsetX;\n pos.top += this.offsetY;\n return pos;\n };\n Tooltip.prototype.updateTipPosition = function (position) {\n var selEle = selectAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER, this.tooltipEle);\n var removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];\n removeClass(selEle, removeList);\n this.setTipClass(position);\n addClass(selEle, this.tipClass);\n };\n Tooltip.prototype.adjustArrow = function (target, position, tooltipPositionX, tooltipPositionY) {\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n if (this.showTipPointer === false || arrowEle === null) {\n return;\n }\n this.updateTipPosition(position);\n var leftValue;\n var topValue;\n this.tooltipEle.style.display = 'block';\n var tooltipWidth = this.tooltipEle.clientWidth;\n var tooltipHeight = this.tooltipEle.clientHeight;\n var arrowInnerELe = select('.' + ARROW_TIP_INNER, this.tooltipEle);\n var tipWidth = arrowEle.offsetWidth;\n var tipHeight = arrowEle.offsetHeight;\n this.tooltipEle.style.display = '';\n if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {\n if (this.tipClass === TIP_BOTTOM) {\n topValue = '99.9%';\n // Arrow icon aligned -2px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 2) + 'px';\n }\n else {\n topValue = -(tipHeight - 1) + 'px';\n // Arrow icon aligned -6px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 6) + 'px';\n }\n if (target) {\n var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n leftValue = POINTER_ADJUST + 'px';\n }\n else if ((tipPosExclude) && (this.tipPointerPosition === 'End' || this.tipPointerPosition === 'Start')) {\n leftValue = (this.tipPointerPosition === 'End') ? ((target.offsetWidth + ((this.tooltipEle.offsetWidth - target.offsetWidth) / 2)) - (tipWidth / 2)) - POINTER_ADJUST + 'px'\n : ((this.tooltipEle.offsetWidth - target.offsetWidth) / 2) - (tipWidth / 2) + POINTER_ADJUST + 'px';\n }\n else {\n leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';\n }\n }\n }\n else {\n if (this.tipClass === TIP_RIGHT) {\n leftValue = '99.9%';\n // Arrow icon aligned -2px left from ArrowOuterTip div\n arrowInnerELe.style.left = '-' + (tipWidth - 2) + 'px';\n }\n else {\n leftValue = -(tipWidth - 1) + 'px';\n // Arrow icon aligned -2px from ArrowOuterTip width\n arrowInnerELe.style.left = (-(tipWidth) + (tipWidth - 2)) + 'px';\n }\n var tipPosExclude = tooltipPositionY !== 'Center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionY === 'Top') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n topValue = (tooltipHeight - tipHeight - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionY === 'Bottom') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n topValue = POINTER_ADJUST + 'px';\n }\n else {\n topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';\n }\n }\n arrowEle.style.top = topValue;\n arrowEle.style.left = leftValue;\n };\n Tooltip.prototype.renderContent = function (target) {\n var _this = this;\n var tooltipContent = select('.' + CONTENT, this.tooltipEle);\n if (this.cssClass) {\n addClass([this.tooltipEle], this.cssClass.split(' '));\n }\n if (target && !isNullOrUndefined(target.getAttribute('title'))) {\n target.setAttribute('data-content', target.getAttribute('title'));\n target.removeAttribute('title');\n }\n if (!isNullOrUndefined(this.content)) {\n tooltipContent.innerHTML = '';\n if (this.content instanceof HTMLElement) {\n tooltipContent.appendChild(this.content);\n }\n else if (typeof this.content === 'string') {\n if (this.isAngular) {\n this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);\n }\n else {\n this.content = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.content) : this.content;\n }\n if (this.enableHtmlParse) {\n var tempFunction = compile(this.content);\n var tempArr = tempFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent, this.root);\n if (tempArr) {\n append(tempArr, tooltipContent);\n }\n }\n else {\n tooltipContent['textContent'] = this.content;\n }\n }\n else {\n var templateFunction = compile(this.content);\n var tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n if (this.isAngular) {\n setTimeout(function () {\n _this.reposition(target);\n }, 1);\n }\n append(tempArr, tooltipContent);\n }\n this.renderReactTemplates();\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n };\n Tooltip.prototype.renderCloseIcon = function () {\n if (!this.isSticky) {\n var existingCloseIcon = this.tooltipEle.querySelector('.' + ICON$1 + '.' + CLOSE);\n if (existingCloseIcon) {\n remove(existingCloseIcon);\n }\n return;\n }\n var tipClose = this.createElement('div', { className: ICON$1 + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n };\n Tooltip.prototype.addDescribedBy = function (target, id) {\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n };\n Tooltip.prototype.removeDescribedBy = function (target) {\n var id = target.getAttribute('data-tooltip-id');\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n var index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n var orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n };\n Tooltip.prototype.tapHoldHandler = function (evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n };\n Tooltip.prototype.touchEndHandler = function () {\n var _this = this;\n if (this.isSticky) {\n return;\n }\n var close = function () {\n _this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n };\n Tooltip.prototype.targetClick = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n };\n Tooltip.prototype.targetHover = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || (target.getAttribute('data-tooltip-id') !== null && this.closeDelay === 0)) {\n return;\n }\n var targetList = [].slice.call(selectAll('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document));\n for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {\n var target_1 = targetList_1[_i];\n this.restoreElement(target_1);\n }\n this.showTooltip(target, this.animation.open, e);\n };\n Tooltip.prototype.mouseMoveBeforeOpen = function (e) {\n this.mouseMoveEvent = e;\n };\n Tooltip.prototype.mouseMoveBeforeRemove = function () {\n if (this.mouseMoveTarget) {\n EventHandler.remove(this.mouseMoveTarget, 'mousemove touchstart', this.mouseMoveBeforeOpen);\n }\n };\n Tooltip.prototype.showTooltip = function (target, showAnimation, e) {\n var _this = this;\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n if (this.openDelay && this.mouseTrail) {\n this.mouseMoveBeforeRemove();\n this.mouseMoveTarget = target;\n EventHandler.add(this.mouseMoveTarget, 'mousemove touchstart', this.mouseMoveBeforeOpen, this);\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n var observeCallback = function (beforeRenderArgs) {\n _this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);\n };\n this.trigger('beforeRender', this.tooltipEventArgs, observeCallback.bind(this));\n };\n Tooltip.prototype.beforeRenderCallback = function (beforeRenderArgs, target, e, showAnimation) {\n if (beforeRenderArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n }\n else {\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n this.ctrlId = this.element.getAttribute('id') ?\n getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = this.createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT$1 + ' ' + POPUP_LIB, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' +\n formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n this.tooltipBeforeRender(target, this);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n else {\n if (target) {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n Animation$1.stop(this.tooltipEle);\n this.reposition(target);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n }\n }\n };\n Tooltip.prototype.appendContainer = function (ctrlObj) {\n if (typeof this.container == 'string') {\n if (this.container === 'body') {\n this.containerElement = document.body;\n }\n else {\n this.isBodyContainer = false;\n this.containerElement = select(this.container, document);\n }\n }\n else if (this.container instanceof HTMLElement) {\n this.containerElement = this.container;\n this.isBodyContainer = this.containerElement.tagName === 'BODY';\n }\n if (!this.isBodyContainer) {\n addClass([this.containerElement], POPUP_CONTAINER);\n }\n this.containerElement.appendChild(ctrlObj.tooltipEle);\n };\n Tooltip.prototype.tooltipBeforeRender = function (target, ctrlObj) {\n if (target) {\n if (Browser.isDevice) {\n addClass([ctrlObj.tooltipEle], DEVICE$1);\n }\n if (ctrlObj.width !== 'auto') {\n ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);\n }\n ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));\n this.appendContainer(ctrlObj);\n removeClass([ctrlObj.tooltipEle], HIDE_POPUP);\n ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');\n ctrlObj.renderContent(target);\n addClass([ctrlObj.tooltipEle], POPUP_OPEN);\n if (ctrlObj.showTipPointer) {\n ctrlObj.renderArrow();\n }\n ctrlObj.renderCloseIcon();\n ctrlObj.renderPopup(target);\n ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);\n Animation$1.stop(ctrlObj.tooltipEle);\n ctrlObj.reposition(target);\n }\n };\n Tooltip.prototype.tooltipAfterRender = function (target, e, showAnimation, ctrlObj) {\n if (target) {\n removeClass([ctrlObj.tooltipEle], POPUP_OPEN);\n addClass([ctrlObj.tooltipEle], POPUP_CLOSE);\n ctrlObj.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: ctrlObj.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail && (showAnimation.effect === 'None' || showAnimation.effect === 'FadeIn' ||\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (this.isReact && typeof ctrlObj.content != 'string'))) {\n ctrlObj.tooltipEle.style.display = 'none';\n }\n var observeCallback = function (observedArgs) {\n ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);\n };\n ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));\n }\n };\n Tooltip.prototype.beforeOpenCallback = function (observedArgs, target, showAnimation, e) {\n var _this = this;\n if (observedArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n this.restoreElement(target);\n }\n else {\n var openAnimation_1 = {\n name: (showAnimation.effect === 'None' && animationMode === 'Enable') ? 'FadeIn' : this.animation.open.effect,\n duration: showAnimation.duration,\n delay: showAnimation.delay,\n timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation_1 = undefined;\n }\n if (this.openDelay > 0) {\n var show = function () {\n if (_this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', _this.onMouseMove, _this);\n }\n if (_this.popupObj) {\n _this.popupObj.show(openAnimation_1, target);\n if (_this.mouseMoveEvent && _this.mouseTrail) {\n _this.onMouseMove(_this.mouseMoveEvent);\n }\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n if (this.popupObj) {\n this.popupObj.show(openAnimation_1, target);\n }\n }\n }\n if (e) {\n this.wireMouseEvents(e, target);\n }\n };\n Tooltip.prototype.needTemplateReposition = function () {\n // eslint-disable-next-line\n var tooltip = this;\n return !isNullOrUndefined(tooltip.viewContainerRef)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n && typeof tooltip.viewContainerRef !== 'string' || this.isReact;\n };\n Tooltip.prototype.checkCollision = function (target, x, y) {\n var elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n var affectedPos = isCollide(this.tooltipEle, this.checkCollideTarget(), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n };\n Tooltip.prototype.calculateElementPosition = function (pos, offsetPos) {\n return [this.isBodyContainer ? pos.left + offsetPos.left :\n (pos.left - this.containerElement.getBoundingClientRect().left) +\n offsetPos.left + window.pageXOffset + this.containerElement.scrollLeft,\n this.isBodyContainer ? pos.top + offsetPos.top :\n (pos.top - this.containerElement.getBoundingClientRect().top) +\n offsetPos.top + window.pageYOffset + this.containerElement.scrollTop];\n };\n Tooltip.prototype.collisionFlipFit = function (target, x, y) {\n var elePos = this.checkCollision(target, x, y);\n var newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n if (this.tooltipEventArgs.cancel) {\n newpos = this.position;\n }\n else {\n var elePosVertical = elePos.vertical;\n var elePosHorizontal = elePos.horizontal;\n if (elePos.position !== newpos) {\n var pos = calculatePosition(target, elePosHorizontal, elePosVertical, !this.isBodyContainer, this.isBodyContainer ? null : this.containerElement.getBoundingClientRect());\n this.adjustArrow(target, newpos, elePosHorizontal, elePosVertical);\n var scalingFactors = this.getScalingFactor(target);\n var offsetPos = this.calculateTooltipOffset(newpos, scalingFactors.x, scalingFactors.y);\n offsetPos.top -= this.getOffSetPosition('TopBottom', newpos, this.offsetY);\n offsetPos.left -= this.getOffSetPosition('RightLeft', newpos, this.offsetX);\n elePos.position = newpos;\n var elePosition = this.calculateElementPosition(pos, offsetPos);\n elePos.left = elePosition[0];\n elePos.top = elePosition[1];\n }\n else {\n this.adjustArrow(target, newpos, elePosHorizontal, elePosVertical);\n }\n }\n var eleOffset = { left: elePos.left, top: elePos.top };\n var position = this.isBodyContainer ?\n fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: this.windowCollision }, eleOffset) : eleOffset;\n this.tooltipEle.style.display = 'block';\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n if (this.showTipPointer && arrowEle != null && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n var arrowleft = parseInt(arrowEle.style.left, 10) - (position.left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n this.tooltipEle.style.display = '';\n eleOffset.left = position.left;\n eleOffset.top = position.top;\n return eleOffset;\n };\n Tooltip.prototype.getOffSetPosition = function (positionString, newPos, offsetType) {\n return ((positionString.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n (positionString.indexOf(newPos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * offsetType) : 0;\n };\n Tooltip.prototype.checkCollideTarget = function () {\n return !this.windowCollision && this.target ? this.element : null;\n };\n Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {\n var _this = this;\n if (this.closeDelay > 0) {\n clearTimeout(this.hideTimer);\n clearTimeout(this.showTimer);\n var hide = function () {\n if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {\n return;\n }\n _this.tooltipHide(hideAnimation, e, targetElement);\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.tooltipHide(hideAnimation, e, targetElement);\n }\n };\n Tooltip.prototype.tooltipHide = function (hideAnimation, e, targetElement) {\n var _this = this;\n var target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n }\n else {\n target = select('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document);\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // this line commented for close the tooltip popup element even the target element destroyed in a page.\n //if (isNullOrUndefined(target)) { return; }\n this.trigger('beforeClose', this.tooltipEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.mouseMoveBeforeRemove();\n _this.popupHide(hideAnimation, target, e);\n }\n else {\n _this.isHidden = false;\n }\n });\n };\n Tooltip.prototype.popupHide = function (hideAnimation, target, e) {\n if (target && e) {\n this.restoreElement(target);\n }\n this.isHidden = true;\n var closeAnimation = {\n name: (hideAnimation.effect === 'None' && animationMode === 'Enable') ? 'FadeOut' : this.animation.close.effect,\n duration: hideAnimation.duration,\n delay: hideAnimation.delay,\n timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation = undefined;\n }\n if (this.popupObj) {\n this.popupObj.hide(closeAnimation);\n }\n };\n Tooltip.prototype.restoreElement = function (target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n };\n Tooltip.prototype.clear = function () {\n var target = this.findTarget();\n if (target) {\n this.restoreElement(target);\n }\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n };\n Tooltip.prototype.tooltipHover = function () {\n if (this.tooltipEle) {\n this.isTooltipOpen = true;\n }\n };\n Tooltip.prototype.tooltipMouseOut = function (e) {\n this.isTooltipOpen = false;\n this.hideTooltip(this.animation.close, e, this.findTarget());\n };\n Tooltip.prototype.onMouseOut = function (e) {\n var enteredElement = e.relatedTarget;\n // don't close the tooltip only if it is tooltip content element\n if (enteredElement && !this.mouseTrail) {\n var checkForTooltipElement = closest(enteredElement, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT$1);\n if (checkForTooltipElement) {\n EventHandler.add(checkForTooltipElement, 'mouseleave', this.tooltipElementMouseOut, this);\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.closeDelay === 0 && (this.animation.close.effect === 'None' || (this.isReact && typeof this.content != 'string'))) {\n this.clear();\n }\n }\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n this.clear();\n }\n if (this.popupObj && !this.popupObj.element.classList.contains(POPUP_OPEN)) {\n this.clear();\n }\n };\n Tooltip.prototype.tooltipElementMouseOut = function (e) {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n EventHandler.remove(this.element, 'mouseleave', this.tooltipElementMouseOut);\n this.clear();\n };\n Tooltip.prototype.onStickyClose = function () {\n this.close();\n };\n Tooltip.prototype.onMouseMove = function (event) {\n var eventPageX = 0;\n var eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n Animation$1.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n var scalingFactors = this.getScalingFactor(event.target);\n var pos = this.calculateTooltipOffset(this.position, scalingFactors.x, scalingFactors.y);\n var x = eventPageX + pos.left + this.offsetX;\n var y = eventPageY + pos.top + this.offsetY;\n var elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n var colpos = this.calculateTooltipOffset(elePos.position, scalingFactors.x, scalingFactors.y);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n };\n Tooltip.prototype.keyDown = function (event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n };\n Tooltip.prototype.touchEnd = function (e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT$1) === null && !this.isSticky) {\n this.close();\n }\n };\n Tooltip.prototype.scrollHandler = function (e) {\n if (this.tooltipEle && !this.isSticky) {\n if (!(closest(e.target, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT$1))\n && !this.isSticky) {\n this.close();\n }\n }\n };\n /**\n * Core method that initializes the control rendering.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.render = function () {\n this.initialize();\n this.wireEvents(this.opensOn);\n this.renderComplete();\n };\n /**\n * Initializes the values of private members.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.preRender = function () {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n };\n /**\n * Binding events to the Tooltip element.\n *\n * @hidden\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.wireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {\n var opensOn = triggerList_1[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n }\n }\n }\n this.windowResizeBound = this.windowResize.bind(this);\n this.keyDownBound = this.keyDown.bind(this);\n this.touchEndBound = this.touchEnd.bind(this);\n this.scrollWheelBound = this.scrollHandler.bind(this);\n document.addEventListener('wheel', this.scrollWheelBound);\n document.addEventListener('scroll', this.scrollWheelBound);\n document.addEventListener('touchend', this.touchEndBound);\n document.addEventListener('keydown', this.keyDownBound);\n window.addEventListener('resize', this.windowResizeBound);\n };\n Tooltip.prototype.getTriggerList = function (trigger) {\n if (!trigger) {\n return [];\n }\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n };\n Tooltip.prototype.wireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(selectAll(this.target, this.element));\n this.targetsList = targetList;\n if (!isNullOrUndefined(this.targetsList) && this.targetsList.length > 0) {\n for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {\n var target = targetList_2[_i];\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focusin', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focusin', this.targetHover, this);\n }\n };\n Tooltip.prototype.wireMouseEvents = function (e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'focusin') {\n EventHandler.add(target, 'focusout', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n if (this.closeDelay) {\n EventHandler.add(this.tooltipEle, 'mouseenter', this.tooltipHover, this);\n EventHandler.add(this.tooltipEle, 'mouseleave', this.tooltipMouseOut, this);\n }\n }\n if (this.mouseTrail && this.openDelay === 0) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n }\n };\n /**\n * Unbinding events from the element on widget destroy.\n *\n * @hidden\n *\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.unwireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {\n var opensOn = triggerList_2[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n }\n }\n }\n document.removeEventListener('touchend', this.touchEndBound);\n this.touchEndBound = null;\n document.removeEventListener('wheel', this.scrollWheelBound);\n document.removeEventListener('scroll', this.scrollWheelBound);\n this.scrollWheelBound = null;\n window.removeEventListener('resize', this.windowResizeBound);\n this.windowResizeBound = null;\n document.removeEventListener('keydown', this.keyDownBound);\n this.keyDownBound = null;\n };\n Tooltip.prototype.unwireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(selectAll(this.target, this.element));\n if (!isNullOrUndefined(this.targetsList) && this.targetsList.length > 0) {\n for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {\n var target = targetList_3[_i];\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focusin', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focusin', this.targetHover);\n }\n };\n Tooltip.prototype.unwireMouseEvents = function (target) {\n if (!this.isSticky) {\n var triggerList = this.getTriggerList(this.opensOn);\n for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {\n var opensOn = triggerList_3[_i];\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n EventHandler.remove(target, 'focusout', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n if (this.closeDelay) {\n EventHandler.remove(target, 'mouseenter', this.tooltipHover);\n EventHandler.remove(target, 'mouseleave', this.tooltipMouseOut);\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n };\n Tooltip.prototype.findTarget = function () {\n var target = select('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document);\n return target;\n };\n /**\n * Core method to return the component name.\n *\n * @private\n *\n * @returns {string} - this method returns module name.\n */\n Tooltip.prototype.getModuleName = function () {\n return 'tooltip';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n *\n * @private\n *\n * @returns {string} - this method returns persisted data.\n */\n Tooltip.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally, if any of the property value changed.\n *\n * @private\n *\n * @param {TooltipModel} newProp - this param gives new property values to the method\n * @param {TooltipModel} oldProp - this param gives old property values to the method\n * @returns {void}\n *\n */\n Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {\n var targetElement = this.findTarget();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.width = this.tooltipEle.style.maxWidth = formatUnit(newProp.width);\n this.reposition(targetElement);\n }\n break;\n case 'height':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n this.reposition(targetElement);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n this.renderContent();\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n if (this.tooltipEle && targetElement) {\n var arrowInnerELe = select('.' + ARROW_TIP_INNER, this.tooltipEle);\n if (arrowInnerELe) {\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n }\n this.reposition(targetElement);\n }\n break;\n case 'tipPointerPosition':\n if (this.tooltipEle && targetElement) {\n this.reposition(targetElement);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n var x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n var y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL$1);\n }\n else {\n removeClass([this.tooltipEle], RTL$1);\n }\n }\n break;\n case 'isSticky':\n if (this.tooltipEle && targetElement) {\n this.renderCloseIcon();\n this.reposition(targetElement);\n }\n break;\n case 'container':\n if (!isNullOrUndefined(this.containerElement)) {\n removeClass([this.containerElement], POPUP_CONTAINER);\n }\n this.container = newProp.container;\n if (this.tooltipEle && targetElement) {\n this.appendContainer(this);\n this.reposition(targetElement);\n }\n }\n }\n };\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n *\n * @param {HTMLElement} element - Target element where the Tooltip is to be displayed. (It is an optional parameter)\n * @param {TooltipAnimationSettings} animation - Sets the specific animation, while showing the Tooltip on the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.open = function (element, animation) {\n if (isNullOrUndefined(animation)) {\n animation = this.animation.open;\n }\n if (isNullOrUndefined(element)) {\n element = this.element;\n }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n };\n /**\n * It is used to hide the Tooltip with specific animation effect.\n *\n * @param {TooltipAnimationSettings} animation - Sets the specific animation when hiding Tooltip from the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.close = function (animation) {\n if (!animation) {\n animation = this.animation.close;\n }\n this.hideTooltip(animation);\n };\n /**\n * It is used to refresh the Tooltip content and its position.\n *\n * @param {HTMLElement} target - Target element where the Tooltip content or position needs to be refreshed.\n * @returns {void}\n */\n Tooltip.prototype.refresh = function (target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n if (!isNullOrUndefined(this.targetsList) && !isNullOrUndefined(this.target)) {\n var target_2 = selectAll(this.target, this.element);\n if (target_2.length !== this.targetsList.length) {\n this.unwireEvents(this.opensOn);\n this.wireEvents(this.opensOn);\n }\n }\n };\n /**\n *\n * It is used to destroy the Tooltip component.\n *\n * @method destroy\n * @returns {void}\n * @memberof Tooltip\n */\n Tooltip.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n destroy();\n removeClass([this.element], ROOT$1);\n this.unwireEvents(this.opensOn);\n this.unwireMouseEvents(this.element);\n this.tooltipEle = null;\n this.popupObj = null;\n var currentTarget = selectAll('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', this.element);\n for (var _i = 0, currentTarget_1 = currentTarget; _i < currentTarget_1.length; _i++) {\n var target = currentTarget_1[_i];\n this.restoreElement(target);\n }\n this.containerElement = null;\n this.tipClass = null;\n this.tooltipPositionX = null;\n this.tooltipPositionY = null;\n this.ctrlId = null;\n this.tooltipEventArgs = null;\n this.touchModule = null;\n this.mouseMoveEvent = null;\n this.mouseMoveTarget = null;\n this.containerElement = null;\n this.targetsList = null;\n };\n __decorate$2([\n Property('auto')\n ], Tooltip.prototype, \"width\", void 0);\n __decorate$2([\n Property('auto')\n ], Tooltip.prototype, \"height\", void 0);\n __decorate$2([\n Property()\n ], Tooltip.prototype, \"content\", void 0);\n __decorate$2([\n Property('body')\n ], Tooltip.prototype, \"container\", void 0);\n __decorate$2([\n Property()\n ], Tooltip.prototype, \"target\", void 0);\n __decorate$2([\n Property('TopCenter')\n ], Tooltip.prototype, \"position\", void 0);\n __decorate$2([\n Property(0)\n ], Tooltip.prototype, \"offsetX\", void 0);\n __decorate$2([\n Property(0)\n ], Tooltip.prototype, \"offsetY\", void 0);\n __decorate$2([\n Property(true)\n ], Tooltip.prototype, \"showTipPointer\", void 0);\n __decorate$2([\n Property(true)\n ], Tooltip.prototype, \"enableHtmlParse\", void 0);\n __decorate$2([\n Property(false)\n ], Tooltip.prototype, \"windowCollision\", void 0);\n __decorate$2([\n Property('Auto')\n ], Tooltip.prototype, \"tipPointerPosition\", void 0);\n __decorate$2([\n Property('Auto')\n ], Tooltip.prototype, \"opensOn\", void 0);\n __decorate$2([\n Property(false)\n ], Tooltip.prototype, \"mouseTrail\", void 0);\n __decorate$2([\n Property(false)\n ], Tooltip.prototype, \"isSticky\", void 0);\n __decorate$2([\n Complex({}, Animation)\n ], Tooltip.prototype, \"animation\", void 0);\n __decorate$2([\n Property(0)\n ], Tooltip.prototype, \"openDelay\", void 0);\n __decorate$2([\n Property(0)\n ], Tooltip.prototype, \"closeDelay\", void 0);\n __decorate$2([\n Property()\n ], Tooltip.prototype, \"cssClass\", void 0);\n __decorate$2([\n Property(true)\n ], Tooltip.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate$2([\n Property('')\n ], Tooltip.prototype, \"htmlAttributes\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"beforeRender\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"beforeOpen\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"afterOpen\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"beforeClose\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"afterClose\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"beforeCollision\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"created\", void 0);\n __decorate$2([\n Event()\n ], Tooltip.prototype, \"destroyed\", void 0);\n Tooltip = __decorate$2([\n NotifyPropertyChanges\n ], Tooltip);\n return Tooltip;\n}(Component));\n\nvar globalTimeOut = {};\nvar DEFT_MAT_WIDTH = 30;\nvar DEFT_MAT3_WIDTH = 30;\nvar DEFT_FAB_WIDTH = 30;\nvar DEFT_FLUENT_WIDTH = 30;\nvar DEFT_FLUENT2_WIDTH = 30;\nvar DEFT_BOOT_WIDTH = 30;\nvar DEFT_BOOT4_WIDTH = 36;\nvar DEFT_BOOT5_WIDTH = 36;\nvar CLS_SHOWSPIN = 'e-spin-show';\nvar CLS_HIDESPIN = 'e-spin-hide';\nvar CLS_MATERIALSPIN = 'e-spin-material';\nvar CLS_MATERIAL3SPIN = 'e-spin-material3';\nvar CLS_FABRICSPIN = 'e-spin-fabric';\nvar CLS_FLUENTSPIN = 'e-spin-fluent';\nvar CLS_FLUENT2SPIN = 'e-spin-fluent2';\nvar CLS_TAILWINDSPIN = 'e-spin-tailwind';\nvar CLS_BOOTSPIN = 'e-spin-bootstrap';\nvar CLS_BOOT4SPIN = 'e-spin-bootstrap4';\nvar CLS_BOOT5SPIN = 'e-spin-bootstrap5';\nvar CLS_HIGHCONTRASTSPIN = 'e-spin-high-contrast';\nvar CLS_SPINWRAP = 'e-spinner-pane';\nvar CLS_SPININWRAP = 'e-spinner-inner';\nvar CLS_SPINCIRCLE = 'e-path-circle';\nvar CLS_SPINARC = 'e-path-arc';\nvar CLS_SPINLABEL = 'e-spin-label';\nvar CLS_SPINTEMPLATE = 'e-spin-template';\nvar spinTemplate = null;\nvar spinCSSClass = null;\n/**\n * Function to change the Spinners in a page globally from application end.\n * ```\n * E.g : blazorSpinner({ action: \"Create\", options: {target: targetElement}, type: \"\" });\n * ```\n *\n * @param {string} action - specifies the string\n * @param {CreateArgs} options - specifies the args\n * @param {string} target - specifies the target\n * @param {string} type - specifes the type\n * @returns {void}\n * @private\n */\nfunction Spinner(action, options, target, type) {\n switch (action) {\n case 'Create':\n /* eslint-disable */\n var element = document.querySelector(options.target);\n var args = {\n type: type, target: element, cssClass: options.cssClass,\n label: options.label, width: options.width\n };\n /* eslint-enable */\n createSpinner(args);\n break;\n case 'Show':\n showSpinner(document.querySelector(target));\n break;\n case 'Hide':\n hideSpinner(document.querySelector(target));\n break;\n case 'Set': {\n var setArgs = { cssClass: options.cssClass, type: type };\n setSpinner(setArgs);\n break;\n }\n }\n}\n/**\n * Create a spinner for the specified target element.\n * ```\n * E.g : createSpinner({ target: targetElement, width: '34px', label: 'Loading..' });\n * ```\n *\n * @param {SpinnerArgs} args - specifies the args\n * @param {CreateElementArgs} internalCreateElement - specifis the element args\n * @returns {void}\n * @private\n */\nfunction createSpinner(args, internalCreateElement) {\n var _a;\n if (!args.target) {\n return;\n }\n var radius;\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n // eslint-disable-next-line\n var container = create_spinner_container(args.target, makeElement);\n if (!isNullOrUndefined(args.cssClass)) {\n var classNames = args.cssClass.split(' ').filter(function (className) { return className.trim() !== ''; });\n (_a = container.wrap.classList).add.apply(_a, classNames);\n }\n if (!isNullOrUndefined(args.template) || !isNullOrUndefined(spinTemplate)) {\n var template = !isNullOrUndefined(args.template) ? args.template : spinTemplate;\n container.wrap.classList.add(CLS_SPINTEMPLATE);\n replaceContent(container.wrap, template, spinCSSClass);\n }\n else {\n var theme = !isNullOrUndefined(args.type) ? args.type : getTheme(container.wrap);\n var width = !isNullOrUndefined(args.width) ? args.width : undefined;\n radius = calculateRadius(width, theme);\n setTheme(theme, container.wrap, radius, makeElement);\n if (!isNullOrUndefined(args.label)) {\n createLabel(container.inner_wrap, args.label, makeElement);\n }\n }\n container.wrap.classList.add(CLS_HIDESPIN);\n container = null;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} label - specifies the string\n * @param {createElementParams} makeElement - specifies the element\n * @returns {HTMLElement} - returns the element\n */\nfunction createLabel(container, label, makeElement) {\n var labelEle = makeElement('div', {});\n labelEle.classList.add(CLS_SPINLABEL);\n labelEle.innerHTML = label;\n container.appendChild(labelEle);\n return labelEle;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createMaterialSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Material', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_MATERIALSPIN);\n mat_calculate_attributes(radius, container, 'Material', CLS_MATERIALSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createMaterial3Spinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Material3', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_MATERIAL3SPIN);\n mat_calculate_attributes(radius, container, 'Material3', CLS_MATERIAL3SPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrap4Spinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Bootstrap4', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_BOOT4SPIN);\n mat_calculate_attributes(radius, container, 'Bootstrap4', CLS_BOOT4SPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrap5Spinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Bootstrap5', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_BOOT5SPIN);\n mat_calculate_attributes(radius, container, 'Bootstrap5', CLS_BOOT5SPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} uniqueID - specifies the id.\n * @param {number} radius - specifies the radius\n * @returns {void}\n */\nfunction startMatAnimate(container, uniqueID, radius) {\n var globalObject = {};\n var timeOutVar = 0;\n globalTimeOut[\"\" + uniqueID].timeOut = 0;\n globalObject[\"\" + uniqueID] = globalVariables(uniqueID, radius, 0, 0);\n var spinnerInfo = { uniqueID: uniqueID, container: container, globalInfo: globalObject, timeOutVar: timeOutVar };\n animateMaterial(spinnerInfo);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createFabricSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Fabric', radius: radius };\n create_fabric_element(container, uniqueID, CLS_FABRICSPIN);\n fb_calculate_attributes(radius, container, CLS_FABRICSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createFluentSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Fluent', radius: radius };\n create_fabric_element(container, uniqueID, CLS_FLUENTSPIN);\n fb_calculate_attributes(radius, container, CLS_FLUENTSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createFluent2Spinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Fluent2', radius: radius };\n create_fabric_element(container, uniqueID, CLS_FLUENT2SPIN);\n fb_calculate_attributes(radius, container, CLS_FLUENT2SPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createTailwindSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Tailwind', radius: radius };\n create_fabric_element(container, uniqueID, CLS_TAILWINDSPIN);\n fb_calculate_attributes(radius, container, CLS_TAILWINDSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createHighContrastSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'HighContrast', radius: radius };\n create_fabric_element(container, uniqueID, CLS_HIGHCONTRASTSPIN);\n fb_calculate_attributes(radius, container, CLS_HIGHCONTRASTSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @returns {string} - returns the string\n */\nfunction getTheme(container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n}\n/**\n *\n * @param {string} theme - specifies the theme\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction setTheme(theme, container, radius, makeElement) {\n var innerContainer = container.querySelector('.' + CLS_SPININWRAP);\n var svg = innerContainer.querySelector('svg');\n if (!isNullOrUndefined(svg)) {\n innerContainer.removeChild(svg);\n }\n switch (theme) {\n case 'Material':\n createMaterialSpinner(innerContainer, radius, makeElement);\n break;\n case 'Material3':\n createMaterial3Spinner(innerContainer, radius, makeElement);\n break;\n case 'Fabric':\n createFabricSpinner(innerContainer, radius);\n break;\n case 'Fluent':\n createFluentSpinner(innerContainer, radius);\n break;\n case 'Fluent2':\n createFluent2Spinner(innerContainer, radius);\n break;\n case 'Bootstrap':\n createBootstrapSpinner(innerContainer, radius);\n break;\n case 'HighContrast':\n createHighContrastSpinner(innerContainer, radius);\n break;\n case 'Bootstrap4':\n createBootstrap4Spinner(innerContainer, radius, makeElement);\n break;\n case 'Bootstrap5':\n createBootstrap5Spinner(innerContainer, radius, makeElement);\n break;\n case 'Tailwind':\n case 'Tailwind-dark':\n createTailwindSpinner(innerContainer, radius);\n break;\n }\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrapSpinner(innerContainer, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[\"\" + uniqueID] = { timeOut: 0, type: 'Bootstrap', radius: radius };\n create_bootstrap_element(innerContainer, uniqueID);\n boot_calculate_attributes(innerContainer, radius);\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {string} uniqueID - specifies the id\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_bootstrap_element(innerContainer, uniqueID, makeElement) {\n var svgBoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n var viewBoxValue = 64;\n var trans = 32;\n var defaultRadius = 2;\n svgBoot.setAttribute('id', uniqueID);\n svgBoot.setAttribute('class', CLS_BOOTSPIN);\n svgBoot.setAttribute('viewBox', '0 0 ' + viewBoxValue + ' ' + viewBoxValue);\n innerContainer.insertBefore(svgBoot, innerContainer.firstChild);\n for (var item = 0; item <= 7; item++) {\n var bootCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n bootCircle.setAttribute('class', CLS_SPINCIRCLE + '_' + item);\n bootCircle.setAttribute('r', defaultRadius + '');\n bootCircle.setAttribute('transform', 'translate(' + trans + ',' + trans + ')');\n svgBoot.appendChild(bootCircle);\n }\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {number} radius - specifies the radius\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction boot_calculate_attributes(innerContainer, radius) {\n var svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n var x = 0;\n var y = 0;\n var rad = 24;\n svg.style.width = svg.style.height = radius + 'px';\n var startArc = 90;\n for (var item = 0; item <= 7; item++) {\n var start = defineArcPoints(x, y, rad, startArc);\n var circleEle = svg.querySelector('.' + CLS_SPINCIRCLE + '_' + item);\n circleEle.setAttribute('cx', start.x + '');\n circleEle.setAttribute('cy', start.y + '');\n startArc = startArc >= 360 ? 0 : startArc;\n startArc = startArc + 45;\n }\n}\n/**\n *\n * @param {number} begin - specifies the number\n * @param {number} stop - specifirs the number\n * @returns {number[]} - returns the array of number\n */\nfunction generateSeries(begin, stop) {\n var series = [];\n var start = begin;\n var end = stop;\n var increment = false;\n var count = 1;\n formSeries(start);\n /**\n *\n * @param {number} i - specifies the number\n * @returns {void}\n */\n function formSeries(i) {\n series.push(i);\n if (i !== end || count === 1) {\n if (i <= start && i > 1 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n else if (i === 1) {\n i = 7;\n i = parseFloat((i + 0.2).toFixed(2));\n increment = true;\n }\n else if (i < 8 && increment) {\n i = parseFloat((i + 0.2).toFixed(2));\n if (i === 8) {\n increment = false;\n }\n }\n else if (i <= 8 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n ++count;\n formSeries(i);\n }\n }\n return series;\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @returns {void}\n */\nfunction animateBootstrap(innerContainer) {\n var svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n var id = svg.getAttribute('id');\n for (var i = 1; i <= 8; i++) {\n var circleEle = (innerContainer.getElementsByClassName('e-path-circle_' +\n (i === 8 ? 0 : i))[0]);\n rotation(circleEle, i, i, generateSeries(i, i), id);\n }\n /**\n *\n * @param {SVGCircleElement} circle - specifies the circl element\n * @param {number} start - specifies the number\n * @param {number} end - specifies the end number\n * @param {number} series - specifies the series\n * @param {string} id - specifies the id\n * @returns {void}\n */\n function rotation(circle, start, end, series, id) {\n var count = 0;\n boot_animate(start);\n // eslint-disable-next-line\n function boot_animate(radius) {\n if (globalTimeOut[\"\" + id].isAnimate) {\n ++count;\n circle.setAttribute('r', radius + '');\n if (count >= series.length) {\n count = 0;\n }\n // eslint-disable-next-line\n globalTimeOut[id].timeOut = setTimeout(boot_animate.bind(null, series[count]), 18);\n }\n }\n }\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} template - specifies the template\n * @param {string} cssClass - specifies the css class.\n * @returns {void}\n */\nfunction replaceContent(container, template, cssClass) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n var inner = container.querySelector('.e-spinner-inner');\n inner.innerHTML = template;\n}\n/**\n *\n * @param {string} width - specifies the width\n * @param {string} theme - specifies the string\n * @returns {number} - returns the number\n */\nfunction calculateRadius(width, theme) {\n var defaultSize;\n switch (theme) {\n case 'Material':\n defaultSize = DEFT_MAT_WIDTH;\n break;\n case 'Material3':\n defaultSize = DEFT_MAT3_WIDTH;\n break;\n case 'Fabric':\n defaultSize = DEFT_FAB_WIDTH;\n break;\n case 'Tailwind':\n case 'Tailwind-dark':\n defaultSize = DEFT_FAB_WIDTH;\n break;\n case 'Fluent':\n defaultSize = DEFT_FLUENT_WIDTH;\n break;\n case 'Fluent2':\n defaultSize = DEFT_FLUENT2_WIDTH;\n break;\n case 'Bootstrap4':\n defaultSize = DEFT_BOOT4_WIDTH;\n break;\n case 'Bootstrap5':\n defaultSize = DEFT_BOOT5_WIDTH;\n break;\n default:\n defaultSize = DEFT_BOOT_WIDTH;\n }\n width = width ? parseFloat(width + '') : defaultSize;\n return theme === 'Bootstrap' ? width : width / 2;\n}\n/**\n *\n * @param {string} id - specifies the id\n * @param {number} radius - specifies the radius\n * @param {number} count - specifies the number count\n * @param {number} previousId - specifies the previous id\n * @returns {GlobalVariables} - returns the variables\n */\nfunction globalVariables(id, radius, count, previousId) {\n return {\n radius: radius,\n count: count,\n previousId: previousId\n };\n}\n/**\n * @returns {string} - returns the string\n */\n// eslint-disable-next-line\nfunction random_generator() {\n var random = '';\n var combine = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n for (var i = 0; i < 5; i++) {\n random += combine.charAt(Math.floor(Math.random() * combine.length));\n }\n return random;\n}\n/**\n *\n * @param {HTMLElement} innerCon - specifies the element\n * @param {string} uniqueID - specifies the unique id\n * @param {string} themeClass - specifies the string\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_fabric_element(innerCon, uniqueID, themeClass, makeElement) {\n var svgFabric = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svgFabric.setAttribute('id', uniqueID);\n svgFabric.setAttribute('class', themeClass);\n var fabricCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n var fabricCircleArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCircleArc.setAttribute('class', CLS_SPINARC);\n innerCon.insertBefore(svgFabric, innerCon.firstChild);\n svgFabric.appendChild(fabricCirclePath);\n svgFabric.appendChild(fabricCircleArc);\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {string} uniqueID - specifies the unique id\n * @param {createElementParams} makeElement - specifies the element\n * @param {string} cls - specifies the string\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_material_element(innerContainer, uniqueID, makeElement, cls) {\n var svgMaterial = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n var matCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n svgMaterial.setAttribute('class', cls);\n svgMaterial.setAttribute('id', uniqueID);\n matCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n innerContainer.insertBefore(svgMaterial, innerContainer.firstChild);\n svgMaterial.appendChild(matCirclePath);\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_spinner_container(target, makeElement) {\n var spinnerContainer = makeElement('div', {});\n var spinnerInnerContainer = makeElement('div', {});\n spinnerContainer.classList.add(CLS_SPINWRAP);\n spinnerInnerContainer.classList.add(CLS_SPININWRAP);\n spinnerInnerContainer.setAttribute('aria-disabled', 'true');\n target.appendChild(spinnerContainer);\n spinnerContainer.appendChild(spinnerInnerContainer);\n // eslint-disable-next-line\n return { wrap: spinnerContainer, inner_wrap: spinnerInnerContainer };\n}\n/**\n *\n * @param {SpinnerInfo} spinnerInfo - specifies the spinner\n * @returns {void}\n */\nfunction animateMaterial(spinnerInfo) {\n var start = 1;\n var end = 149;\n var duration = 1333;\n var max = 75;\n createCircle(start, end, easeAnimation, duration, spinnerInfo.globalInfo[spinnerInfo.uniqueID].count, max, spinnerInfo);\n spinnerInfo.globalInfo[spinnerInfo.uniqueID].count = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].count % 4;\n}\n/**\n *\n * @param {number} start - specifies the number\n * @param {number} end - specifies the end number\n * @param {Function} easing - specifies the function\n * @param {number} duration - specifies the duration\n * @param {number} count - specifies the count\n * @param {number} max - specifies the max number\n * @param {SpinnerInfo} spinnerInfo - specifies the spinner info\n * @returns {void}\n */\nfunction createCircle(start, end, easing, duration, count, max, spinnerInfo) {\n var id = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId;\n var startTime = new Date().getTime();\n var change = end - start;\n var diameter = getSize((spinnerInfo.globalInfo[spinnerInfo.uniqueID].radius * 2) + '');\n var strokeSize = getStrokeSize(diameter);\n var rotate = -90 * (spinnerInfo.globalInfo[spinnerInfo.uniqueID].count || 0);\n mat_animation(spinnerInfo);\n // eslint-disable-next-line\n function mat_animation(spinnerInfo) {\n var currentTime = Math.max(0, Math.min(new Date().getTime() - startTime, duration));\n updatePath(easing(currentTime, start, change, duration), spinnerInfo.container);\n if (id === spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId && currentTime < duration) {\n // eslint-disable-next-line\n globalTimeOut[spinnerInfo.uniqueID].timeOut = setTimeout(mat_animation.bind(null, spinnerInfo), 1);\n }\n else {\n animateMaterial(spinnerInfo);\n }\n }\n /**\n *\n * @param {number} value - specifies the number value\n * @param {HTMLElement} container - specifies the container\n * @returns {void}\n */\n function updatePath(value, container) {\n if (!isNullOrUndefined(container.querySelector('svg.e-spin-material')) || !isNullOrUndefined(container.querySelector('svg.e-spin-material3'))) {\n var svg = void 0;\n if (!isNullOrUndefined(container.querySelector('svg.e-spin-material')) &&\n !isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle'))) {\n svg = container.querySelector('svg.e-spin-material');\n }\n else if (!isNullOrUndefined(container.querySelector('svg.e-spin-material3')) &&\n !isNullOrUndefined(container.querySelector('svg.e-spin-material3').querySelector('path.e-path-circle'))) {\n svg = container.querySelector('svg.e-spin-material3');\n }\n if (!isNullOrUndefined(svg)) {\n var path = svg.querySelector('path.e-path-circle');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');\n path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');\n }\n }\n }\n}\n/**\n *\n * @param {number} radius - specifies the number\n * @param {HTMLElement} container - specifies the element\n * @param {string} type - specifies the string type\n * @param {string} cls - specifies the string\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction mat_calculate_attributes(radius, container, type, cls) {\n var diameter = radius * 2;\n var svg = container.querySelector('svg.' + cls);\n var path = svg.querySelector('path.e-path-circle');\n var strokeSize = getStrokeSize(diameter);\n var transformOrigin = (diameter / 2) + 'px';\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.width = svg.style.height = diameter + 'px';\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n path.setAttribute('d', drawArc(diameter, strokeSize));\n if (type === 'Material' || type === 'Material3' || type === 'Fluent2') {\n path.setAttribute('stroke-width', strokeSize + '');\n path.setAttribute('stroke-dasharray', ((diameter - strokeSize) * Math.PI * 0.75) + '');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, 1, 75) + '');\n }\n}\n/**\n *\n * @param {string} value - specifies the value\n * @returns {number} - returns the number\n */\nfunction getSize(value) {\n var parsed = parseFloat(value);\n return parsed;\n}\n/**\n *\n * @param {number} diameter - specifies the diameter\n * @param {number} strokeSize - specifies the size\n * @returns {string} - returns the string\n */\nfunction drawArc(diameter, strokeSize) {\n var radius = diameter / 2;\n var offset = strokeSize / 2;\n return 'M' + radius + ',' + offset\n + 'A' + (radius - offset) + ',' + (radius - offset) + ' 0 1 1 ' + offset + ',' + radius;\n}\n/**\n *\n * @param {number} diameter - specifies the number\n * @returns {number} - returns the number\n */\nfunction getStrokeSize(diameter) {\n return 10 / 100 * diameter;\n}\n/**\n *\n * @param {number} diameter - specifies the number\n * @param {number} strokeSize - specifies the stroke size\n * @param {number} value - specifies the value\n * @param {number} max - specifies the max number\n * @returns {number} - returns the number\n */\nfunction getDashOffset(diameter, strokeSize, value, max) {\n return (diameter - strokeSize) * Math.PI * ((3 * (max) / 100) - (value / 100));\n}\n/**\n *\n * @param {number} current - specifies the number\n * @param {number} start - specifies the stroke size\n * @param {number} change - specifies the value\n * @param {number} duration - specifies the max number\n * @returns {number} - returns the number\n */\nfunction easeAnimation(current, start, change, duration) {\n var timestamp = (current /= duration) * current;\n var timecount = timestamp * current;\n return start + change * (6 * timecount * timestamp + -15 * timestamp * timestamp + 10 * timecount);\n}\n/**\n *\n * @param {number} radius - specifies the number\n * @param {HTMLElement} innerConainer - specifies the element\n * @param {string} trgClass - specifies the class\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction fb_calculate_attributes(radius, innerConainer, trgClass) {\n var centerX = radius;\n var centerY = radius;\n var diameter = radius * 2;\n var startArc = 315;\n var endArc = 45;\n var svg = innerConainer.querySelector('.' + trgClass);\n var circle = svg.querySelector('.e-path-circle');\n var path = svg.querySelector('.e-path-arc');\n var transformOrigin = (diameter / 2) + 'px';\n circle.setAttribute('d', defineCircle(centerX, centerY, radius));\n path.setAttribute('d', defineArc(centerX, centerY, radius, startArc, endArc));\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n svg.style.width = svg.style.height = diameter + 'px';\n}\n/**\n *\n * @param {number} centerX - specifies the number\n * @param {number} centerY - specifies the stroke size\n * @param {number} radius - specifies the value\n * @param {number} angle - specifies the max number\n * @returns {number} - returns the number\n */\nfunction defineArcPoints(centerX, centerY, radius, angle) {\n var radians = (angle - 90) * Math.PI / 180.0;\n return {\n x: centerX + (radius * Math.cos(radians)),\n y: centerY + (radius * Math.sin(radians))\n };\n}\n/**\n *\n * @param {number} x - specifies the number\n * @param {number} y - specifies the stroke size\n * @param {number} radius - specifies the radius\n * @param {number} startArc - specifies the value\n * @param {number} endArc - specifies the max number\n * @returns {number} - returns the number\n */\nfunction defineArc(x, y, radius, startArc, endArc) {\n var start = defineArcPoints(x, y, radius, endArc);\n var end = defineArcPoints(x, y, radius, startArc);\n var d = [\n 'M', start.x, start.y,\n 'A', radius, radius, 0, 0, 0, end.x, end.y\n ].join(' ');\n return d;\n}\n/**\n *\n * @param {number} x - specifies the number\n * @param {number} y - specifies the stroke size\n * @param {number} radius - specifies the value\n * @returns {string} - returns the string\n */\nfunction defineCircle(x, y, radius) {\n var d = [\n 'M', x, y,\n 'm', -radius, 0,\n 'a', radius, radius, 0, 1, 0, radius * 2, 0,\n 'a', radius, radius, 0, 1, 0, -radius * 2, 0\n ].join(' ');\n return d;\n}\n/**\n * Function to show the Spinner.\n *\n * @param {HTMLElement} container - Specify the target of the Spinner.\n * @returns {void}\n * @private\n */\nfunction showSpinner(container) {\n showHideSpinner(container, false);\n container = null;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {boolean} isHide - specifies the boolean\n * @returns {void}\n */\nfunction showHideSpinner(container, isHide) {\n var spinnerWrap;\n if (container) {\n if (container.classList.contains(CLS_SPINWRAP)) {\n spinnerWrap = container;\n }\n else {\n var spinWrapCollection = container.querySelectorAll('.' + CLS_SPINWRAP);\n if (Browser.isIE) {\n for (var i = 0; i < spinWrapCollection.length; i++) {\n if (spinWrapCollection[i].parentElement && spinWrapCollection[i].parentElement === container) {\n spinnerWrap = spinWrapCollection[i];\n break;\n }\n }\n }\n else {\n spinnerWrap = Array.from(spinWrapCollection).find(function (wrap) { return wrap.parentElement === container; }) || null;\n }\n }\n }\n if (container && spinnerWrap) {\n var inner = spinnerWrap.querySelector('.' + CLS_SPININWRAP);\n var spinCheck = isHide ? !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) &&\n !spinnerWrap.classList.contains(CLS_HIDESPIN) :\n !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_SHOWSPIN);\n if (spinCheck) {\n var svgEle = spinnerWrap.querySelector('svg');\n if (isNullOrUndefined(svgEle)) {\n return;\n }\n var id = svgEle.getAttribute('id');\n globalTimeOut[\"\" + id].isAnimate = !isHide;\n switch (globalTimeOut[\"\" + id].type) {\n case 'Material':\n case 'Material3':\n if (isHide) {\n clearTimeout(globalTimeOut[id].timeOut);\n }\n else {\n startMatAnimate(inner, id, globalTimeOut[id].radius);\n }\n break;\n case 'Bootstrap':\n if (isHide) {\n clearTimeout(globalTimeOut[id].timeOut);\n }\n else {\n animateBootstrap(inner);\n }\n break;\n }\n }\n if (isHide) {\n classList(spinnerWrap, [CLS_HIDESPIN], [CLS_SHOWSPIN]);\n }\n else {\n classList(spinnerWrap, [CLS_SHOWSPIN], [CLS_HIDESPIN]);\n }\n container = null;\n }\n}\n/**\n * Function to hide the Spinner.\n *\n * @param {HTMLElement} container - Specify the target of the Spinner.\n * @returns {void}\n * @private\n */\nfunction hideSpinner(container) {\n showHideSpinner(container, true);\n container = null;\n}\n/**\n * Function to change the Spinners in a page globally from application end.\n * ```\n * E.g : setSpinner({ cssClass: 'custom-css'; type: 'Material' });\n * ```\n *\n * @param {SetSpinnerArgs} args - specifies the args\n * @param {createElementParams} internalCreateElement - specifies the element params\n * @returns {void}\n * @private\n */\nfunction setSpinner(args, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (args.template !== undefined) {\n spinTemplate = args.template;\n if (args.template !== undefined) {\n spinCSSClass = args.cssClass;\n }\n }\n var container = document.querySelectorAll('.' + CLS_SPINWRAP);\n for (var index = 0; index < container.length; index++) {\n ensureTemplate(args.template, container[index], args.type, args.cssClass, makeElement);\n }\n}\n/**\n *\n * @param {string} template - specifies the string\n * @param {HTMLElement} container - specifies the container\n * @param {string} theme - specifies the theme\n * @param {string} cssClass - specifies the string class\n * @param {createElementParams} makeEle - specifies the params\n * @returns {void}\n */\nfunction ensureTemplate(template, container, theme, cssClass, makeEle) {\n if (isNullOrUndefined(template) && !container.classList.contains(CLS_SPINTEMPLATE)) {\n replaceTheme(container, theme, cssClass, makeEle);\n if (container.classList.contains(CLS_SHOWSPIN)) {\n container.classList.remove(CLS_SHOWSPIN);\n showSpinner(container);\n }\n else {\n container.classList.remove(CLS_HIDESPIN);\n hideSpinner(container);\n }\n }\n else {\n spinTemplate = template;\n if (!isNullOrUndefined(cssClass)) {\n spinCSSClass = cssClass;\n }\n if (!isNullOrUndefined(spinTemplate)) {\n replaceContent(container, spinTemplate, spinCSSClass);\n }\n }\n}\n/**\n *\n * @param {HTMLElement} container - specifies the container\n * @param {string} theme - specifies the theme\n * @param {string} cssClass - specifies the string class\n * @param {createElementParams} makeEle - specifies the params\n * @returns {void}\n */\nfunction replaceTheme(container, theme, cssClass, makeEle) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n var svgElement = container.querySelector('svg');\n if (!isNullOrUndefined(svgElement)) {\n var radius = theme === 'Bootstrap' ? parseFloat(svgElement.style.height) : parseFloat(svgElement.style.height) / 2;\n var classNames = svgElement.getAttribute('class');\n var svgClassList = classNames.split(/\\s/);\n if (svgClassList.indexOf('e-spin-material') >= 0) {\n var id = svgElement.getAttribute('id');\n clearTimeout(globalTimeOut[\"\" + id].timeOut);\n }\n setTheme(theme, container, radius, makeEle);\n }\n}\n\nexport { Animation, AnimationSettings, ButtonProps, Dialog, DialogUtility, Popup, PositionData, Spinner, Tooltip, calculatePosition, calculateRelativeBasedPosition, createSpinner, destroy, fit, flip, getMaxZindex, getScrollableParent, getTransformElement, getZindexPartial, getZoomValue, hideSpinner, isCollide, setSpinner, showSpinner };\n","(function(a,b){if(\"function\"==typeof define&&define.amd)define([],b);else if(\"undefined\"!=typeof exports)b();else{b(),a.FileSaver={exports:{}}.exports}})(this,function(){\"use strict\";function b(a,b){return\"undefined\"==typeof b?b={autoBom:!1}:\"object\"!=typeof b&&(console.warn(\"Deprecated: Expected third argument to be a object\"),b={autoBom:!b}),b.autoBom&&/^\\s*(?:text\\/\\S*|application\\/xml|\\S*\\/\\S*\\+xml)\\s*;.*charset\\s*=\\s*utf-8/i.test(a.type)?new Blob([\"\\uFEFF\",a],{type:a.type}):a}function c(a,b,c){var d=new XMLHttpRequest;d.open(\"GET\",a),d.responseType=\"blob\",d.onload=function(){g(d.response,b,c)},d.onerror=function(){console.error(\"could not download file\")},d.send()}function d(a){var b=new XMLHttpRequest;b.open(\"HEAD\",a,!1);try{b.send()}catch(a){}return 200<=b.status&&299>=b.status}function e(a){try{a.dispatchEvent(new MouseEvent(\"click\"))}catch(c){var b=document.createEvent(\"MouseEvents\");b.initMouseEvent(\"click\",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),a.dispatchEvent(b)}}var f=\"object\"==typeof window&&window.window===window?window:\"object\"==typeof self&&self.self===self?self:\"object\"==typeof global&&global.global===global?global:void 0,a=f.navigator&&/Macintosh/.test(navigator.userAgent)&&/AppleWebKit/.test(navigator.userAgent)&&!/Safari/.test(navigator.userAgent),g=f.saveAs||(\"object\"!=typeof window||window!==f?function(){}:\"download\"in HTMLAnchorElement.prototype&&!a?function(b,g,h){var i=f.URL||f.webkitURL,j=document.createElement(\"a\");g=g||b.name||\"download\",j.download=g,j.rel=\"noopener\",\"string\"==typeof b?(j.href=b,j.origin===location.origin?e(j):d(j.href)?c(b,g,h):e(j,j.target=\"_blank\")):(j.href=i.createObjectURL(b),setTimeout(function(){i.revokeObjectURL(j.href)},4E4),setTimeout(function(){e(j)},0))}:\"msSaveOrOpenBlob\"in navigator?function(f,g,h){if(g=g||f.name||\"download\",\"string\"!=typeof f)navigator.msSaveOrOpenBlob(b(f,h),g);else if(d(f))c(f,g,h);else{var i=document.createElement(\"a\");i.href=f,i.target=\"_blank\",setTimeout(function(){e(i)})}}:function(b,d,e,g){if(g=g||open(\"\",\"_blank\"),g&&(g.document.title=g.document.body.innerText=\"downloading...\"),\"string\"==typeof b)return c(b,d,e);var h=\"application/octet-stream\"===b.type,i=/constructor/i.test(f.HTMLElement)||f.safari,j=/CriOS\\/[\\d]+/.test(navigator.userAgent);if((j||h&&i||a)&&\"undefined\"!=typeof FileReader){var k=new FileReader;k.onloadend=function(){var a=k.result;a=j?a:a.replace(/^data:[^;]*;/,\"data:attachment/file;\"),g?g.location.href=a:location=a,g=null},k.readAsDataURL(b)}else{var l=f.URL||f.webkitURL,m=l.createObjectURL(b);g?g.location=m:location.href=m,g=null,setTimeout(function(){l.revokeObjectURL(m)},4E4)}});f.saveAs=g.saveAs=g,\"undefined\"!=typeof module&&(module.exports=g)});\n\n","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"printJS\"] = factory();\n\telse\n\t\troot[\"printJS\"] = factory();\n})(window, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// define __esModule on exports\n/******/ \t__webpack_require__.r = function(exports) {\n/******/ \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n/******/ \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n/******/ \t\t}\n/******/ \t\tObject.defineProperty(exports, '__esModule', { value: true });\n/******/ \t};\n/******/\n/******/ \t// create a fake namespace object\n/******/ \t// mode & 1: value is a module id, require it\n/******/ \t// mode & 2: merge all properties of value into the ns\n/******/ \t// mode & 4: return value when already ns object\n/******/ \t// mode & 8|1: behave like require\n/******/ \t__webpack_require__.t = function(value, mode) {\n/******/ \t\tif(mode & 1) value = __webpack_require__(value);\n/******/ \t\tif(mode & 8) return value;\n/******/ \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n/******/ \t\tvar ns = Object.create(null);\n/******/ \t\t__webpack_require__.r(ns);\n/******/ \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n/******/ \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n/******/ \t\treturn ns;\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ \"./src/index.js\":\n/*!**********************!*\\\n !*** ./src/index.js ***!\n \\**********************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sass_index_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sass/index.scss */ \"./src/sass/index.scss\");\n/* harmony import */ var _sass_index_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_sass_index_scss__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _js_init__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./js/init */ \"./src/js/init.js\");\n\n\nvar printJS = _js_init__WEBPACK_IMPORTED_MODULE_1__[\"default\"].init;\n\nif (typeof window !== 'undefined') {\n window.printJS = printJS;\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (printJS);\n\n/***/ }),\n\n/***/ \"./src/js/browser.js\":\n/*!***************************!*\\\n !*** ./src/js/browser.js ***!\n \\***************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\nvar Browser = {\n // Firefox 1.0+\n isFirefox: function isFirefox() {\n return typeof InstallTrigger !== 'undefined';\n },\n // Internet Explorer 6-11\n isIE: function isIE() {\n return navigator.userAgent.indexOf('MSIE') !== -1 || !!document.documentMode;\n },\n // Edge 20+\n isEdge: function isEdge() {\n return !Browser.isIE() && !!window.StyleMedia;\n },\n // Chrome 1+\n isChrome: function isChrome() {\n var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;\n return !!context.chrome;\n },\n // At least Safari 3+: \"[object HTMLElementConstructor]\"\n isSafari: function isSafari() {\n return Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || navigator.userAgent.toLowerCase().indexOf('safari') !== -1;\n },\n // IOS Chrome\n isIOSChrome: function isIOSChrome() {\n return navigator.userAgent.toLowerCase().indexOf('crios') !== -1;\n }\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Browser);\n\n/***/ }),\n\n/***/ \"./src/js/functions.js\":\n/*!*****************************!*\\\n !*** ./src/js/functions.js ***!\n \\*****************************/\n/*! exports provided: addWrapper, capitalizePrint, collectStyles, addHeader, cleanUp, isRawHTML */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"addWrapper\", function() { return addWrapper; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"capitalizePrint\", function() { return capitalizePrint; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"collectStyles\", function() { return collectStyles; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"addHeader\", function() { return addHeader; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"cleanUp\", function() { return cleanUp; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isRawHTML\", function() { return isRawHTML; });\n/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modal */ \"./src/js/modal.js\");\n/* harmony import */ var _browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./browser */ \"./src/js/browser.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n\n\nfunction addWrapper(htmlData, params) {\n var bodyStyle = 'font-family:' + params.font + ' !important; font-size: ' + params.font_size + ' !important; width:100%;';\n return '' + htmlData + '
';\n}\nfunction capitalizePrint(obj) {\n return obj.charAt(0).toUpperCase() + obj.slice(1);\n}\nfunction collectStyles(element, params) {\n var win = document.defaultView || window; // String variable to hold styling for each element\n\n var elementStyle = ''; // Loop over computed styles\n\n var styles = win.getComputedStyle(element, '');\n\n for (var key = 0; key < styles.length; key++) {\n // Check if style should be processed\n if (params.targetStyles.indexOf('*') !== -1 || params.targetStyle.indexOf(styles[key]) !== -1 || targetStylesMatch(params.targetStyles, styles[key])) {\n if (styles.getPropertyValue(styles[key])) elementStyle += styles[key] + ':' + styles.getPropertyValue(styles[key]) + ';';\n }\n } // Print friendly defaults (deprecated)\n\n\n elementStyle += 'max-width: ' + params.maxWidth + 'px !important; font-size: ' + params.font_size + ' !important;';\n return elementStyle;\n}\n\nfunction targetStylesMatch(styles, value) {\n for (var i = 0; i < styles.length; i++) {\n if (_typeof(value) === 'object' && value.indexOf(styles[i]) !== -1) return true;\n }\n\n return false;\n}\n\nfunction addHeader(printElement, params) {\n // Create the header container div\n var headerContainer = document.createElement('div'); // Check if the header is text or raw html\n\n if (isRawHTML(params.header)) {\n headerContainer.innerHTML = params.header;\n } else {\n // Create header element\n var headerElement = document.createElement('h1'); // Create header text node\n\n var headerNode = document.createTextNode(params.header); // Build and style\n\n headerElement.appendChild(headerNode);\n headerElement.setAttribute('style', params.headerStyle);\n headerContainer.appendChild(headerElement);\n }\n\n printElement.insertBefore(headerContainer, printElement.childNodes[0]);\n}\nfunction cleanUp(params) {\n // If we are showing a feedback message to user, remove it\n if (params.showModal) _modal__WEBPACK_IMPORTED_MODULE_0__[\"default\"].close(); // Check for a finished loading hook function\n\n if (params.onLoadingEnd) params.onLoadingEnd(); // If preloading pdf files, clean blob url\n\n if (params.showModal || params.onLoadingStart) window.URL.revokeObjectURL(params.printable); // Run onPrintDialogClose callback\n\n var event = 'mouseover';\n\n if (_browser__WEBPACK_IMPORTED_MODULE_1__[\"default\"].isChrome() || _browser__WEBPACK_IMPORTED_MODULE_1__[\"default\"].isFirefox()) {\n // Ps.: Firefox will require an extra click in the document to fire the focus event.\n event = 'focus';\n }\n\n var handler = function handler() {\n // Make sure the event only happens once.\n window.removeEventListener(event, handler);\n params.onPrintDialogClose(); // Remove iframe from the DOM\n\n var iframe = document.getElementById(params.frameId);\n\n if (iframe) {\n iframe.remove();\n }\n };\n\n window.addEventListener(event, handler);\n}\nfunction isRawHTML(raw) {\n var regexHtml = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\\\b[^>]*>(.*?)');\n return regexHtml.test(raw);\n}\n\n/***/ }),\n\n/***/ \"./src/js/html.js\":\n/*!************************!*\\\n !*** ./src/js/html.js ***!\n \\************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _functions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./functions */ \"./src/js/functions.js\");\n/* harmony import */ var _print__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./print */ \"./src/js/print.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n print: function print(params, printFrame) {\n // Get the DOM printable element\n var printElement = isHtmlElement(params.printable) ? params.printable : document.getElementById(params.printable); // Check if the element exists\n\n if (!printElement) {\n window.console.error('Invalid HTML element id: ' + params.printable);\n return;\n } // Clone the target element including its children (if available)\n\n\n params.printableElement = cloneElement(printElement, params); // Add header\n\n if (params.header) {\n Object(_functions__WEBPACK_IMPORTED_MODULE_0__[\"addHeader\"])(params.printableElement, params);\n } // Print html element contents\n\n\n _print__WEBPACK_IMPORTED_MODULE_1__[\"default\"].send(params, printFrame);\n }\n});\n\nfunction cloneElement(element, params) {\n // Clone the main node (if not already inside the recursion process)\n var clone = element.cloneNode(); // Loop over and process the children elements / nodes (including text nodes)\n\n var childNodesArray = Array.prototype.slice.call(element.childNodes);\n\n for (var i = 0; i < childNodesArray.length; i++) {\n // Check if we are skipping the current element\n if (params.ignoreElements.indexOf(childNodesArray[i].id) !== -1) {\n continue;\n } // Clone the child element\n\n\n var clonedChild = cloneElement(childNodesArray[i], params); // Attach the cloned child to the cloned parent node\n\n clone.appendChild(clonedChild);\n } // Get all styling for print element (for nodes of type element only)\n\n\n if (params.scanStyles && element.nodeType === 1) {\n clone.setAttribute('style', Object(_functions__WEBPACK_IMPORTED_MODULE_0__[\"collectStyles\"])(element, params));\n } // Check if the element needs any state processing (copy user input data)\n\n\n switch (element.tagName) {\n case 'SELECT':\n // Copy the current selection value to its clone\n clone.value = element.value;\n break;\n\n case 'CANVAS':\n // Copy the canvas content to its clone\n clone.getContext('2d').drawImage(element, 0, 0);\n break;\n }\n\n return clone;\n}\n\nfunction isHtmlElement(printable) {\n // Check if element is instance of HTMLElement or has nodeType === 1 (for elements in iframe)\n return _typeof(printable) === 'object' && printable && (printable instanceof HTMLElement || printable.nodeType === 1);\n}\n\n/***/ }),\n\n/***/ \"./src/js/image.js\":\n/*!*************************!*\\\n !*** ./src/js/image.js ***!\n \\*************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _functions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./functions */ \"./src/js/functions.js\");\n/* harmony import */ var _print__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./print */ \"./src/js/print.js\");\n/* harmony import */ var _browser__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./browser */ \"./src/js/browser.js\");\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n print: function print(params, printFrame) {\n // Check if we are printing one image or multiple images\n if (params.printable.constructor !== Array) {\n // Create array with one image\n params.printable = [params.printable];\n } // Create printable element (container)\n\n\n params.printableElement = document.createElement('div'); // Create all image elements and append them to the printable container\n\n params.printable.forEach(function (src) {\n // Create the image element\n var img = document.createElement('img');\n img.setAttribute('style', params.imageStyle); // Set image src with the file url\n\n img.src = src; // The following block is for Firefox, which for some reason requires the image's src to be fully qualified in\n // order to print it\n\n if (_browser__WEBPACK_IMPORTED_MODULE_2__[\"default\"].isFirefox()) {\n var fullyQualifiedSrc = img.src;\n img.src = fullyQualifiedSrc;\n } // Create the image wrapper\n\n\n var imageWrapper = document.createElement('div'); // Append image to the wrapper element\n\n imageWrapper.appendChild(img); // Append wrapper to the printable element\n\n params.printableElement.appendChild(imageWrapper);\n }); // Check if we are adding a print header\n\n if (params.header) Object(_functions__WEBPACK_IMPORTED_MODULE_0__[\"addHeader\"])(params.printableElement, params); // Print image\n\n _print__WEBPACK_IMPORTED_MODULE_1__[\"default\"].send(params, printFrame);\n }\n});\n\n/***/ }),\n\n/***/ \"./src/js/init.js\":\n/*!************************!*\\\n !*** ./src/js/init.js ***!\n \\************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _browser__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./browser */ \"./src/js/browser.js\");\n/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modal */ \"./src/js/modal.js\");\n/* harmony import */ var _pdf__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./pdf */ \"./src/js/pdf.js\");\n/* harmony import */ var _html__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./html */ \"./src/js/html.js\");\n/* harmony import */ var _raw_html__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./raw-html */ \"./src/js/raw-html.js\");\n/* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./image */ \"./src/js/image.js\");\n/* harmony import */ var _json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./json */ \"./src/js/json.js\");\n\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n\n\n\n\n\n\n\nvar printTypes = ['pdf', 'html', 'image', 'json', 'raw-html'];\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n init: function init() {\n var params = {\n printable: null,\n fallbackPrintable: null,\n type: 'pdf',\n header: null,\n headerStyle: 'font-weight: 300;',\n maxWidth: 800,\n properties: null,\n gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',\n gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',\n showModal: false,\n onError: function onError(error) {\n throw error;\n },\n onLoadingStart: null,\n onLoadingEnd: null,\n onPrintDialogClose: function onPrintDialogClose() {},\n onIncompatibleBrowser: function onIncompatibleBrowser() {},\n modalMessage: 'Retrieving Document...',\n frameId: 'printJS',\n printableElement: null,\n documentTitle: 'Document',\n targetStyle: ['clear', 'display', 'width', 'min-width', 'height', 'min-height', 'max-height'],\n targetStyles: ['border', 'box', 'break', 'text-decoration'],\n ignoreElements: [],\n repeatTableHeader: true,\n css: null,\n style: null,\n scanStyles: true,\n base64: false,\n // Deprecated\n onPdfOpen: null,\n font: 'TimesNewRoman',\n font_size: '12pt',\n honorMarginPadding: true,\n honorColor: false,\n imageStyle: 'max-width: 100%;'\n }; // Check if a printable document or object was supplied\n\n var args = arguments[0];\n\n if (args === undefined) {\n throw new Error('printJS expects at least 1 attribute.');\n } // Process parameters\n\n\n switch (_typeof(args)) {\n case 'string':\n params.printable = encodeURI(args);\n params.fallbackPrintable = params.printable;\n params.type = arguments[1] || params.type;\n break;\n\n case 'object':\n params.printable = args.printable;\n params.fallbackPrintable = typeof args.fallbackPrintable !== 'undefined' ? args.fallbackPrintable : params.printable;\n params.fallbackPrintable = params.base64 ? \"data:application/pdf;base64,\".concat(params.fallbackPrintable) : params.fallbackPrintable;\n\n for (var k in params) {\n if (k === 'printable' || k === 'fallbackPrintable') continue;\n params[k] = typeof args[k] !== 'undefined' ? args[k] : params[k];\n }\n\n break;\n\n default:\n throw new Error('Unexpected argument type! Expected \"string\" or \"object\", got ' + _typeof(args));\n } // Validate printable\n\n\n if (!params.printable) throw new Error('Missing printable information.'); // Validate type\n\n if (!params.type || typeof params.type !== 'string' || printTypes.indexOf(params.type.toLowerCase()) === -1) {\n throw new Error('Invalid print type. Available types are: pdf, html, image and json.');\n } // Check if we are showing a feedback message to the user (useful for large files)\n\n\n if (params.showModal) _modal__WEBPACK_IMPORTED_MODULE_1__[\"default\"].show(params); // Check for a print start hook function\n\n if (params.onLoadingStart) params.onLoadingStart(); // To prevent duplication and issues, remove any used printFrame from the DOM\n\n var usedFrame = document.getElementById(params.frameId);\n if (usedFrame) usedFrame.parentNode.removeChild(usedFrame); // Create a new iframe for the print job\n\n var printFrame = document.createElement('iframe');\n\n if (_browser__WEBPACK_IMPORTED_MODULE_0__[\"default\"].isFirefox()) {\n // Set the iframe to be is visible on the page (guaranteed by fixed position) but hidden using opacity 0, because\n // this works in Firefox. The height needs to be sufficient for some part of the document other than the PDF\n // viewer's toolbar to be visible in the page\n printFrame.setAttribute('style', 'width: 1px; height: 100px; position: fixed; left: 0; top: 0; opacity: 0; border-width: 0; margin: 0; padding: 0');\n } else {\n // Hide the iframe in other browsers\n printFrame.setAttribute('style', 'visibility: hidden; height: 0; width: 0; position: absolute; border: 0');\n } // Set iframe element id\n\n\n printFrame.setAttribute('id', params.frameId); // For non pdf printing, pass an html document string to srcdoc (force onload callback)\n\n if (params.type !== 'pdf') {\n printFrame.srcdoc = '| ' + Object(_functions__WEBPACK_IMPORTED_MODULE_0__[\"capitalizePrint\"])(properties[a].displayName) + ' | ';\n } // Add the closing tag for the table header row\n\n\n htmlData += '
|---|
| ' + stringData + ' | ';\n } // Add the row closing tag\n\n\n htmlData += '
\\n \\n ![]()
\\n \\n \\n \\n \\n
\\n\").replace(/(^|\\n)\\s*/g, '');\n\n /**\n * @returns {boolean}\n */\n var resetOldContainer = function resetOldContainer() {\n var oldContainer = getContainer();\n if (!oldContainer) {\n return false;\n }\n oldContainer.remove();\n removeClass([document.documentElement, document.body], [swalClasses['no-backdrop'], swalClasses['toast-shown'], swalClasses['has-column']]);\n return true;\n };\n var resetValidationMessage$1 = function resetValidationMessage() {\n globalState.currentInstance.resetValidationMessage();\n };\n var addInputChangeListeners = function addInputChangeListeners() {\n var popup = getPopup();\n var input = getDirectChildByClass(popup, swalClasses.input);\n var file = getDirectChildByClass(popup, swalClasses.file);\n /** @type {HTMLInputElement} */\n var range = popup.querySelector(\".\".concat(swalClasses.range, \" input\"));\n /** @type {HTMLOutputElement} */\n var rangeOutput = popup.querySelector(\".\".concat(swalClasses.range, \" output\"));\n var select = getDirectChildByClass(popup, swalClasses.select);\n /** @type {HTMLInputElement} */\n var checkbox = popup.querySelector(\".\".concat(swalClasses.checkbox, \" input\"));\n var textarea = getDirectChildByClass(popup, swalClasses.textarea);\n input.oninput = resetValidationMessage$1;\n file.onchange = resetValidationMessage$1;\n select.onchange = resetValidationMessage$1;\n checkbox.onchange = resetValidationMessage$1;\n textarea.oninput = resetValidationMessage$1;\n range.oninput = function () {\n resetValidationMessage$1();\n rangeOutput.value = range.value;\n };\n range.onchange = function () {\n resetValidationMessage$1();\n rangeOutput.value = range.value;\n };\n };\n\n /**\n * @param {string | HTMLElement} target\n * @returns {HTMLElement}\n */\n var getTarget = function getTarget(target) {\n return typeof target === 'string' ? document.querySelector(target) : target;\n };\n\n /**\n * @param {SweetAlertOptions} params\n */\n var setupAccessibility = function setupAccessibility(params) {\n var popup = getPopup();\n popup.setAttribute('role', params.toast ? 'alert' : 'dialog');\n popup.setAttribute('aria-live', params.toast ? 'polite' : 'assertive');\n if (!params.toast) {\n popup.setAttribute('aria-modal', 'true');\n }\n };\n\n /**\n * @param {HTMLElement} targetElement\n */\n var setupRTL = function setupRTL(targetElement) {\n if (window.getComputedStyle(targetElement).direction === 'rtl') {\n addClass(getContainer(), swalClasses.rtl);\n }\n };\n\n /**\n * Add modal + backdrop + no-war message for Russians to DOM\n *\n * @param {SweetAlertOptions} params\n */\n var init = function init(params) {\n // Clean up the old popup container if it exists\n var oldContainerExisted = resetOldContainer();\n if (isNodeEnv()) {\n error('SweetAlert2 requires document to initialize');\n return;\n }\n var container = document.createElement('div');\n container.className = swalClasses.container;\n if (oldContainerExisted) {\n addClass(container, swalClasses['no-transition']);\n }\n setInnerHtml(container, sweetHTML);\n var targetElement = getTarget(params.target);\n targetElement.appendChild(container);\n setupAccessibility(params);\n setupRTL(targetElement);\n addInputChangeListeners();\n };\n\n /**\n * @param {HTMLElement | object | string} param\n * @param {HTMLElement} target\n */\n var parseHtmlToContainer = function parseHtmlToContainer(param, target) {\n // DOM element\n if (param instanceof HTMLElement) {\n target.appendChild(param);\n }\n\n // Object\n else if (_typeof(param) === 'object') {\n handleObject(param, target);\n }\n\n // Plain string\n else if (param) {\n setInnerHtml(target, param);\n }\n };\n\n /**\n * @param {any} param\n * @param {HTMLElement} target\n */\n var handleObject = function handleObject(param, target) {\n // JQuery element(s)\n if (param.jquery) {\n handleJqueryElem(target, param);\n }\n\n // For other objects use their string representation\n else {\n setInnerHtml(target, param.toString());\n }\n };\n\n /**\n * @param {HTMLElement} target\n * @param {any} elem\n */\n var handleJqueryElem = function handleJqueryElem(target, elem) {\n target.textContent = '';\n if (0 in elem) {\n for (var i = 0; (i in elem); i++) {\n target.appendChild(elem[i].cloneNode(true));\n }\n } else {\n target.appendChild(elem.cloneNode(true));\n }\n };\n\n /**\n * @returns {'webkitAnimationEnd' | 'animationend' | false}\n */\n var animationEndEvent = function () {\n // Prevent run in Node env\n if (isNodeEnv()) {\n return false;\n }\n var testEl = document.createElement('div');\n\n // Chrome, Safari and Opera\n if (typeof testEl.style.webkitAnimation !== 'undefined') {\n return 'webkitAnimationEnd';\n }\n\n // Standard syntax\n if (typeof testEl.style.animation !== 'undefined') {\n return 'animationend';\n }\n return false;\n }();\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderActions = function renderActions(instance, params) {\n var actions = getActions();\n var loader = getLoader();\n if (!actions || !loader) {\n return;\n }\n\n // Actions (buttons) wrapper\n if (!params.showConfirmButton && !params.showDenyButton && !params.showCancelButton) {\n hide(actions);\n } else {\n show(actions);\n }\n\n // Custom class\n applyCustomClass(actions, params, 'actions');\n\n // Render all the buttons\n renderButtons(actions, loader, params);\n\n // Loader\n setInnerHtml(loader, params.loaderHtml || '');\n applyCustomClass(loader, params, 'loader');\n };\n\n /**\n * @param {HTMLElement} actions\n * @param {HTMLElement} loader\n * @param {SweetAlertOptions} params\n */\n function renderButtons(actions, loader, params) {\n var confirmButton = getConfirmButton();\n var denyButton = getDenyButton();\n var cancelButton = getCancelButton();\n if (!confirmButton || !denyButton || !cancelButton) {\n return;\n }\n\n // Render buttons\n renderButton(confirmButton, 'confirm', params);\n renderButton(denyButton, 'deny', params);\n renderButton(cancelButton, 'cancel', params);\n handleButtonsStyling(confirmButton, denyButton, cancelButton, params);\n if (params.reverseButtons) {\n if (params.toast) {\n actions.insertBefore(cancelButton, confirmButton);\n actions.insertBefore(denyButton, confirmButton);\n } else {\n actions.insertBefore(cancelButton, loader);\n actions.insertBefore(denyButton, loader);\n actions.insertBefore(confirmButton, loader);\n }\n }\n }\n\n /**\n * @param {HTMLElement} confirmButton\n * @param {HTMLElement} denyButton\n * @param {HTMLElement} cancelButton\n * @param {SweetAlertOptions} params\n */\n function handleButtonsStyling(confirmButton, denyButton, cancelButton, params) {\n if (!params.buttonsStyling) {\n removeClass([confirmButton, denyButton, cancelButton], swalClasses.styled);\n return;\n }\n addClass([confirmButton, denyButton, cancelButton], swalClasses.styled);\n\n // Buttons background colors\n if (params.confirmButtonColor) {\n confirmButton.style.backgroundColor = params.confirmButtonColor;\n addClass(confirmButton, swalClasses['default-outline']);\n }\n if (params.denyButtonColor) {\n denyButton.style.backgroundColor = params.denyButtonColor;\n addClass(denyButton, swalClasses['default-outline']);\n }\n if (params.cancelButtonColor) {\n cancelButton.style.backgroundColor = params.cancelButtonColor;\n addClass(cancelButton, swalClasses['default-outline']);\n }\n }\n\n /**\n * @param {HTMLElement} button\n * @param {'confirm' | 'deny' | 'cancel'} buttonType\n * @param {SweetAlertOptions} params\n */\n function renderButton(button, buttonType, params) {\n var buttonName = /** @type {'Confirm' | 'Deny' | 'Cancel'} */capitalizeFirstLetter(buttonType);\n toggle(button, params[\"show\".concat(buttonName, \"Button\")], 'inline-block');\n setInnerHtml(button, params[\"\".concat(buttonType, \"ButtonText\")] || ''); // Set caption text\n button.setAttribute('aria-label', params[\"\".concat(buttonType, \"ButtonAriaLabel\")] || ''); // ARIA label\n\n // Add buttons custom classes\n button.className = swalClasses[buttonType];\n applyCustomClass(button, params, \"\".concat(buttonType, \"Button\"));\n }\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderCloseButton = function renderCloseButton(instance, params) {\n var closeButton = getCloseButton();\n if (!closeButton) {\n return;\n }\n setInnerHtml(closeButton, params.closeButtonHtml || '');\n\n // Custom class\n applyCustomClass(closeButton, params, 'closeButton');\n toggle(closeButton, params.showCloseButton);\n closeButton.setAttribute('aria-label', params.closeButtonAriaLabel || '');\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderContainer = function renderContainer(instance, params) {\n var container = getContainer();\n if (!container) {\n return;\n }\n handleBackdropParam(container, params.backdrop);\n handlePositionParam(container, params.position);\n handleGrowParam(container, params.grow);\n\n // Custom class\n applyCustomClass(container, params, 'container');\n };\n\n /**\n * @param {HTMLElement} container\n * @param {SweetAlertOptions['backdrop']} backdrop\n */\n function handleBackdropParam(container, backdrop) {\n if (typeof backdrop === 'string') {\n container.style.background = backdrop;\n } else if (!backdrop) {\n addClass([document.documentElement, document.body], swalClasses['no-backdrop']);\n }\n }\n\n /**\n * @param {HTMLElement} container\n * @param {SweetAlertOptions['position']} position\n */\n function handlePositionParam(container, position) {\n if (!position) {\n return;\n }\n if (position in swalClasses) {\n addClass(container, swalClasses[position]);\n } else {\n warn('The \"position\" parameter is not valid, defaulting to \"center\"');\n addClass(container, swalClasses.center);\n }\n }\n\n /**\n * @param {HTMLElement} container\n * @param {SweetAlertOptions['grow']} grow\n */\n function handleGrowParam(container, grow) {\n if (!grow) {\n return;\n }\n addClass(container, swalClasses[\"grow-\".concat(grow)]);\n }\n\n /**\n * This module contains `WeakMap`s for each effectively-\"private property\" that a `Swal` has.\n * For example, to set the private property \"foo\" of `this` to \"bar\", you can `privateProps.foo.set(this, 'bar')`\n * This is the approach that Babel will probably take to implement private methods/fields\n * https://github.com/tc39/proposal-private-methods\n * https://github.com/babel/babel/pull/7555\n * Once we have the changes from that PR in Babel, and our core class fits reasonable in *one module*\n * then we can use that language feature.\n */\n\n var privateProps = {\n innerParams: new WeakMap(),\n domCache: new WeakMap()\n };\n\n /** @type {InputClass[]} */\n var inputClasses = ['input', 'file', 'range', 'select', 'radio', 'checkbox', 'textarea'];\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderInput = function renderInput(instance, params) {\n var popup = getPopup();\n if (!popup) {\n return;\n }\n var innerParams = privateProps.innerParams.get(instance);\n var rerender = !innerParams || params.input !== innerParams.input;\n inputClasses.forEach(function (inputClass) {\n var inputContainer = getDirectChildByClass(popup, swalClasses[inputClass]);\n if (!inputContainer) {\n return;\n }\n\n // set attributes\n setAttributes(inputClass, params.inputAttributes);\n\n // set class\n inputContainer.className = swalClasses[inputClass];\n if (rerender) {\n hide(inputContainer);\n }\n });\n if (params.input) {\n if (rerender) {\n showInput(params);\n }\n // set custom class\n setCustomClass(params);\n }\n };\n\n /**\n * @param {SweetAlertOptions} params\n */\n var showInput = function showInput(params) {\n if (!params.input) {\n return;\n }\n if (!renderInputType[params.input]) {\n error(\"Unexpected type of input! Expected \".concat(Object.keys(renderInputType).join(' | '), \", got \\\"\").concat(params.input, \"\\\"\"));\n return;\n }\n var inputContainer = getInputContainer(params.input);\n var input = renderInputType[params.input](inputContainer, params);\n show(inputContainer);\n\n // input autofocus\n if (params.inputAutoFocus) {\n setTimeout(function () {\n focusInput(input);\n });\n }\n };\n\n /**\n * @param {HTMLInputElement} input\n */\n var removeAttributes = function removeAttributes(input) {\n for (var i = 0; i < input.attributes.length; i++) {\n var attrName = input.attributes[i].name;\n if (!['id', 'type', 'value', 'style'].includes(attrName)) {\n input.removeAttribute(attrName);\n }\n }\n };\n\n /**\n * @param {InputClass} inputClass\n * @param {SweetAlertOptions['inputAttributes']} inputAttributes\n */\n var setAttributes = function setAttributes(inputClass, inputAttributes) {\n var input = getInput$1(getPopup(), inputClass);\n if (!input) {\n return;\n }\n removeAttributes(input);\n for (var attr in inputAttributes) {\n input.setAttribute(attr, inputAttributes[attr]);\n }\n };\n\n /**\n * @param {SweetAlertOptions} params\n */\n var setCustomClass = function setCustomClass(params) {\n var inputContainer = getInputContainer(params.input);\n if (_typeof(params.customClass) === 'object') {\n addClass(inputContainer, params.customClass.input);\n }\n };\n\n /**\n * @param {HTMLInputElement | HTMLTextAreaElement} input\n * @param {SweetAlertOptions} params\n */\n var setInputPlaceholder = function setInputPlaceholder(input, params) {\n if (!input.placeholder || params.inputPlaceholder) {\n input.placeholder = params.inputPlaceholder;\n }\n };\n\n /**\n * @param {Input} input\n * @param {Input} prependTo\n * @param {SweetAlertOptions} params\n */\n var setInputLabel = function setInputLabel(input, prependTo, params) {\n if (params.inputLabel) {\n var label = document.createElement('label');\n var labelClass = swalClasses['input-label'];\n label.setAttribute('for', input.id);\n label.className = labelClass;\n if (_typeof(params.customClass) === 'object') {\n addClass(label, params.customClass.inputLabel);\n }\n label.innerText = params.inputLabel;\n prependTo.insertAdjacentElement('beforebegin', label);\n }\n };\n\n /**\n * @param {SweetAlertOptions['input']} inputType\n * @returns {HTMLElement}\n */\n var getInputContainer = function getInputContainer(inputType) {\n return getDirectChildByClass(getPopup(), swalClasses[inputType] || swalClasses.input);\n };\n\n /**\n * @param {HTMLInputElement | HTMLOutputElement | HTMLTextAreaElement} input\n * @param {SweetAlertOptions['inputValue']} inputValue\n */\n var checkAndSetInputValue = function checkAndSetInputValue(input, inputValue) {\n if (['string', 'number'].includes(_typeof(inputValue))) {\n input.value = \"\".concat(inputValue);\n } else if (!isPromise(inputValue)) {\n warn(\"Unexpected type of inputValue! Expected \\\"string\\\", \\\"number\\\" or \\\"Promise\\\", got \\\"\".concat(_typeof(inputValue), \"\\\"\"));\n }\n };\n\n /** @type {Record\\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n \\n \").concat(content, \"
\");\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderImage = function renderImage(instance, params) {\n var image = getImage();\n if (!image) {\n return;\n }\n if (!params.imageUrl) {\n hide(image);\n return;\n }\n show(image, '');\n\n // Src, alt\n image.setAttribute('src', params.imageUrl);\n image.setAttribute('alt', params.imageAlt || '');\n\n // Width, height\n applyNumericalStyle(image, 'width', params.imageWidth);\n applyNumericalStyle(image, 'height', params.imageHeight);\n\n // Class\n image.className = swalClasses.image;\n applyCustomClass(image, params, 'image');\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderPopup = function renderPopup(instance, params) {\n var container = getContainer();\n var popup = getPopup();\n if (!container || !popup) {\n return;\n }\n\n // Width\n // https://github.com/sweetalert2/sweetalert2/issues/2170\n if (params.toast) {\n applyNumericalStyle(container, 'width', params.width);\n popup.style.width = '100%';\n var loader = getLoader();\n loader && popup.insertBefore(loader, getIcon());\n } else {\n applyNumericalStyle(popup, 'width', params.width);\n }\n\n // Padding\n applyNumericalStyle(popup, 'padding', params.padding);\n\n // Color\n if (params.color) {\n popup.style.color = params.color;\n }\n\n // Background\n if (params.background) {\n popup.style.background = params.background;\n }\n hide(getValidationMessage());\n\n // Classes\n addClasses$1(popup, params);\n };\n\n /**\n * @param {HTMLElement} popup\n * @param {SweetAlertOptions} params\n */\n var addClasses$1 = function addClasses(popup, params) {\n var showClass = params.showClass || {};\n // Default Class + showClass when updating Swal.update({})\n popup.className = \"\".concat(swalClasses.popup, \" \").concat(isVisible$1(popup) ? showClass.popup : '');\n if (params.toast) {\n addClass([document.documentElement, document.body], swalClasses['toast-shown']);\n addClass(popup, swalClasses.toast);\n } else {\n addClass(popup, swalClasses.modal);\n }\n\n // Custom class\n applyCustomClass(popup, params, 'popup');\n if (typeof params.customClass === 'string') {\n addClass(popup, params.customClass);\n }\n\n // Icon class (#1842)\n if (params.icon) {\n addClass(popup, swalClasses[\"icon-\".concat(params.icon)]);\n }\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderProgressSteps = function renderProgressSteps(instance, params) {\n var progressStepsContainer = getProgressSteps();\n if (!progressStepsContainer) {\n return;\n }\n var progressSteps = params.progressSteps,\n currentProgressStep = params.currentProgressStep;\n if (!progressSteps || progressSteps.length === 0 || currentProgressStep === undefined) {\n hide(progressStepsContainer);\n return;\n }\n show(progressStepsContainer);\n progressStepsContainer.textContent = '';\n if (currentProgressStep >= progressSteps.length) {\n warn('Invalid currentProgressStep parameter, it should be less than progressSteps.length ' + '(currentProgressStep like JS arrays starts from 0)');\n }\n progressSteps.forEach(function (step, index) {\n var stepEl = createStepElement(step);\n progressStepsContainer.appendChild(stepEl);\n if (index === currentProgressStep) {\n addClass(stepEl, swalClasses['active-progress-step']);\n }\n if (index !== progressSteps.length - 1) {\n var lineEl = createLineElement(params);\n progressStepsContainer.appendChild(lineEl);\n }\n });\n };\n\n /**\n * @param {string} step\n * @returns {HTMLLIElement}\n */\n var createStepElement = function createStepElement(step) {\n var stepEl = document.createElement('li');\n addClass(stepEl, swalClasses['progress-step']);\n setInnerHtml(stepEl, step);\n return stepEl;\n };\n\n /**\n * @param {SweetAlertOptions} params\n * @returns {HTMLLIElement}\n */\n var createLineElement = function createLineElement(params) {\n var lineEl = document.createElement('li');\n addClass(lineEl, swalClasses['progress-step-line']);\n if (params.progressStepsDistance) {\n applyNumericalStyle(lineEl, 'width', params.progressStepsDistance);\n }\n return lineEl;\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderTitle = function renderTitle(instance, params) {\n var title = getTitle();\n if (!title) {\n return;\n }\n showWhenInnerHtmlPresent(title);\n toggle(title, params.title || params.titleText, 'block');\n if (params.title) {\n parseHtmlToContainer(params.title, title);\n }\n if (params.titleText) {\n title.innerText = params.titleText;\n }\n\n // Custom class\n applyCustomClass(title, params, 'title');\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var render = function render(instance, params) {\n renderPopup(instance, params);\n renderContainer(instance, params);\n renderProgressSteps(instance, params);\n renderIcon(instance, params);\n renderImage(instance, params);\n renderTitle(instance, params);\n renderCloseButton(instance, params);\n renderContent(instance, params);\n renderActions(instance, params);\n renderFooter(instance, params);\n var popup = getPopup();\n if (typeof params.didRender === 'function' && popup) {\n params.didRender(popup);\n }\n };\n\n /*\n * Global function to determine if SweetAlert2 popup is shown\n */\n var isVisible = function isVisible() {\n return isVisible$1(getPopup());\n };\n\n /*\n * Global function to click 'Confirm' button\n */\n var clickConfirm = function clickConfirm() {\n var _dom$getConfirmButton;\n return (_dom$getConfirmButton = getConfirmButton()) === null || _dom$getConfirmButton === void 0 ? void 0 : _dom$getConfirmButton.click();\n };\n\n /*\n * Global function to click 'Deny' button\n */\n var clickDeny = function clickDeny() {\n var _dom$getDenyButton;\n return (_dom$getDenyButton = getDenyButton()) === null || _dom$getDenyButton === void 0 ? void 0 : _dom$getDenyButton.click();\n };\n\n /*\n * Global function to click 'Cancel' button\n */\n var clickCancel = function clickCancel() {\n var _dom$getCancelButton;\n return (_dom$getCancelButton = getCancelButton()) === null || _dom$getCancelButton === void 0 ? void 0 : _dom$getCancelButton.click();\n };\n\n /** @typedef {'cancel' | 'backdrop' | 'close' | 'esc' | 'timer'} DismissReason */\n\n /** @type {Record